:root{
  --bg:#0b0c10;--card:#12141a;--muted:#98a2b3;--text:#e5e7eb;--accent:#22c55e;--accent-2:#60a5fa;--warn:#f59e0b;--danger:#ef4444;--border:#1f2430;
  --radius:16px;
}

/* 基础样式和移动端优化 */
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b0c10,#0e1117);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-x:hidden;}

/* 响应式容器 */
.container{max-width:980px;margin:0 auto;padding:20px 16px 80px;-webkit-overflow-scrolling:touch;}

/* 响应式头部 */
header{position:sticky;top:0;z-index:5;background:rgba(11,12,16,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
header .bar{display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:980px;margin:0 auto;padding:14px 16px;}

/* 标题样式 */
.title{font-weight:700;letter-spacing:.5px;text-align:center;}

/* 表单元素基础样式 */
select,button,input,textarea{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button{cursor:pointer;min-height:44px;min-width:44px;}
button.primary{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent;color:#04130a;font-weight:700;}
button.ghost{background:#F88332;border-color:transparent;color:#04130a;font-weight:700;}
button.resetplan{background:#F88332;border-color:transparent;color:#04130a;font-weight:700;height:30px;display:inline-flex;align-items:center;justify-content:center;}

/* 网格布局 */
.grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:900px){.grid{grid-template-columns:2fr 1fr;}}

/* 卡片样式 */
.card{background:linear-gradient(180deg,#12141a,#0f1217);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.35);margin-bottom:24px;}
.card h2{margin:0 0 12px;font-size:18px;}

/* 文本样式 */
.muted{color:var(--muted);font-size:14px;margin-top:20px;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ok{color:#10b981;}
.warn{color:var(--warn);}
.danger{color:var(--danger);}

/* 标签页 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:transparent;opacity:.8;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.tab.active{opacity:1;background:linear-gradient(135deg,#60a5fa22,#22c55e22);}

/* 列表和项目 */
.list{display:grid;gap:10px;}
.item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px dashed var(--border);border-radius:12px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.tag{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);}

/* 键值对布局 */
.kvs{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;}
.kvs label{font-size:13px;color:var(--muted);}
.kvs select,.kvs input{width:100%;}
.small{font-size:12px;}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.note{width:100%;min-height:64px;}

/* 底部样式 */
.footer{position:fixed;bottom:0;left:0;right:0;background:rgba(11,12,16,.75);backdrop-filter:blur(10px);border-top:1px solid var(--border);}
.footer .bar{max-width:980px;margin:0 auto;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}

/* 登录弹窗 */
.login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:400px;width:90%;}
.disabled{opacity:.5;pointer-events:none;}

/* 日历样式 */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:16px;}
.calendar-weekday{text-align:center;font-weight:600;font-size:12px;color:var(--muted);padding:8px 0;}
.calendar-day{aspect-ratio:1;border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;background:var(--card);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.calendar-day:hover{border-color:var(--accent-2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2);}
.calendar-day.other-month{opacity:.3;cursor:default;}
.calendar-day.other-month:hover{border-color:var(--border);transform:none;box-shadow:none;}
.calendar-day.today{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,197,94,.2);}
.calendar-day.training{background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.05));border-color:var(--accent);}
.calendar-day.rest{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.05));border-color:var(--warn);}
.calendar-day-number{font-size:14px;font-weight:500;}
.calendar-day.training .calendar-day-number{color:var(--accent);}
.calendar-day.rest .calendar-day-number{color:var(--warn);}
.calendar-legend{width:12px;height:12px;border-radius:2px;}
.calendar-legend.training{background:var(--accent);}
.calendar-legend.rest{background:var(--warn);}

/* 日历弹窗 */
.calendar-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);}
.calendar-modal-content{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.4);}
.calendar-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.calendar-modal-header h3{margin:0;font-size:18px;font-weight:600;}
.calendar-modal-close{background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.calendar-modal-close:hover{background:var(--border);color:var(--text);}
.calendar-training-info{margin-bottom:20px;}
.calendar-training-info h4{margin:0 0 8px 0;font-size:14px;font-weight:600;color:var(--muted);}
.calendar-training-info p{margin:0 0 12px 0;font-size:16px;line-height:1.5;}
.calendar-record-type{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.calendar-record-type .tag{font-size:12px;padding:4px 8px;}
.calendar-record-type .tag.training{background:var(--accent);color:#04130a;border-color:var(--accent);}
.calendar-record-type .tag.rest{background:var(--warn);color:#04130a;border-color:var(--warn);}
.calendar-note{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:16px;}
.calendar-note-title{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.calendar-note div{font-size:14px;line-height:1.6;white-space:pre-wrap;}
.calendar-meta{text-align:right;padding-top:12px;border-top:1px solid var(--border);margin-top:16px;}

/* 日历编辑功能样式 */
.calendar-edit-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.calendar-edit-section h4{margin:0 0 12px 0;font-size:14px;font-weight:600;color:var(--muted);}
.calendar-edit-controls{display:flex;flex-direction:column;gap:8px;}
.calendar-edit-type{min-width:120px;}
.calendar-edit-note{width:100%;min-height:60px;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:8px;background:var(--bg);color:var(--text);font-size:13px;line-height:1.4;}
.calendar-edit-note:focus{border-color:var(--accent);outline:none;}
.calendar-edit-save{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent;color:#04130a;font-weight:600;}
.calendar-edit-delete{background:#ef4444;border-color:transparent;color:white;font-weight:600;}
.calendar-edit-save:disabled,.calendar-edit-delete:disabled{opacity:0.5;cursor:not-allowed;}

/* 训练内容编辑样式 */
.training-content-edit{margin-top:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;}
.calendar-edit-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.training-arts-selector{margin-bottom:12px;}
.training-arts-checkboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px;}
.training-art-checkbox{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all 0.2s ease;background:var(--card);}
.training-art-checkbox:hover{border-color:var(--accent);background:rgba(34,197,94,0.1);}
.training-art-checkbox input[type="checkbox"]{margin:0;}
.training-art-checkbox span{font-size:12px;}
.custom-training-input{}
.calendar-edit-input{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:13px;}
.calendar-edit-input:focus{border-color:var(--accent);outline:none;}

/* 移动端编辑功能优化 */
@media(max-width:768px){
  .calendar-edit-section{margin-top:16px;padding-top:12px;}
  .calendar-edit-note{min-height:80px;font-size:14px;}
  .calendar-edit-controls .row{flex-direction:column;align-items:stretch;}
  .calendar-edit-type{min-width:auto;width:100%;}
  .training-arts-checkboxes{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;}
  .training-art-checkbox{padding:4px 6px;}
  .training-art-checkbox span{font-size:11px;}
}

@media(max-width:480px){
  .calendar-edit-section{margin-top:12px;padding-top:10px;}
  .calendar-edit-note{min-height:70px;font-size:13px;padding:6px;}
  .training-content-edit{padding:8px;}
  .training-arts-checkboxes{grid-template-columns:1fr 1fr;gap:4px;}
  .training-art-checkbox{padding:3px 5px;}
  .training-art-checkbox span{font-size:10px;}
  .calendar-edit-input{font-size:12px;padding:6px;}
}

/* Logo和头部居中 */
.app-logo{height:120px;width:auto;margin-bottom:12px;border-radius:12px;}
.header-center{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;}

/* 移动端响应式优化 - 768px以下 */
@media(max-width:768px){
  /* 容器和间距 */
  .container{max-width:100%;margin:0 auto;padding:16px 12px 60px;}
  header .bar{padding:10px 12px;flex-wrap:wrap;gap:8px;}
  .card{padding:12px;margin-bottom:16px;}
  
  /* 字体大小 */
  .title{font-size:18px;}
  select,button,input,textarea{font-size:13px;padding:8px 10px;}
  .card h2{font-size:16px;}
  .muted{font-size:12px;}
  .chip{font-size:11px;padding:4px 8px;}
  .small{font-size:11px;}
  
  /* 布局调整 */
  .grid{grid-template-columns:1fr;gap:12px;}
  .kvs{grid-template-columns:1fr;gap:8px;}
  .row{gap:8px;}
  .chips{gap:6px;}
  
  /* 按钮和交互元素 */
  button{min-height:44px;min-width:44px;}
  button.resetplan{height:36px;}
  .tab{padding:6px 10px;font-size:12px;}
  .item{padding:8px 10px;}
  .pill{padding:4px 8px;font-size:11px;}
  
  /* 日历优化 */
  .calendar-grid{gap:2px;}
  .calendar-day{font-size:12px;}
  .calendar-day-number{font-size:12px;}
  .calendar-modal-content{padding:16px;max-height:90vh;}
  
  /* 头部和底部 */
  .app-logo{height:80px;}
  .footer .bar{padding:8px 12px;flex-wrap:wrap;}
  
  /* 表单和弹窗 */
  .login-card{padding:20px;max-width:90%;}
  .calendar-modal-content{padding:20px;max-width:95%;}
  .note{min-height:80px;}
}

/* 移动端响应式优化 - 480px以下 */
@media(max-width:480px){
  /* 容器和间距 */
  .container{max-width:100%;margin:0 auto;padding:8px 4px 60px;}
  header .bar{padding:8px;flex-direction:column;align-items:stretch;gap:6px;}
  .card{padding:8px;margin-bottom:12px;}
  
  /* 字体大小 */
  .title{font-size:16px;}
  select,button,input,textarea{font-size:12px;padding:6px 8px;}
  .card h2{font-size:14px;}
  .muted{font-size:11px;}
  .chip{font-size:10px;padding:3px 6px;}
  .small{font-size:10px;}
  
  /* 布局调整 */
  .grid{grid-template-columns:1fr;gap:8px;}
  .kvs{grid-template-columns:1fr;gap:6px;}
  .row{gap:6px;}
  .chips{gap:4px;}
  
  /* 按钮和交互元素 */
  button{min-height:40px;min-width:40px;}
  button.resetplan{height:32px;}
  .tab{padding:4px 8px;font-size:11px;}
  .item{padding:6px 8px;}
  .pill{padding:3px 6px;font-size:10px;}
  
  /* 日历优化 */
  .calendar-grid{gap:1px;}
  .calendar-day{font-size:10px;min-height:40px;}
  .calendar-day-number{font-size:10px;}
  .calendar-modal-content{padding:12px;}
  
  /* 头部和底部 */
  .app-logo{height:60px;}
  .footer .bar{padding:6px 8px;}
  .account-info{width:100%;justify-content:center;}
  
  /* 表单和弹窗 */
  .login-card{padding:16px;max-width:95%;}
  .calendar-modal-content{padding:16px;max-width:98%;}
  .note{min-height:60px;}
}