/* ── Reset ─────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{transition:background .25s,color .25s}

/* ── Dark Theme（默认）────────────────────────────── */
:root,[data-theme="dark"]{
  --bg:#080e1a;
  --surface:#0d1526;
  --surface2:#111d30;
  --surface3:#162038;
  --border:#1e2d47;
  --border2:#253552;
  --primary:#38bdf8;
  --primary-dim:#1e6b8a;
  --primary-bg:#0c1f38;
  --accent:#818cf8;
  --accent-bg:#1e1b4b;
  --green:#34d399;
  --green-bg:#022c22;
  --yellow:#fbbf24;
  --yellow-bg:#422006;
  --red:#f87171;
  --pink:#f472b6;
  --text:#e2e8f0;
  --text2:#cbd5e1;
  --muted:#64748b;
  --muted2:#94a3b8;
  --shadow:0 4px 24px rgba(0,0,0,.45);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --glass:rgba(13,21,38,.7);
  --topbar-blur:blur(12px);
  color-scheme:dark;
}

/* ── Light Theme（晨雾白）──────────────────────────── */
[data-theme="light"]{
  --bg:#f0f4f8;
  --surface:#ffffff;
  --surface2:#f8fafc;
  --surface3:#f1f5f9;
  --border:#dde3ec;
  --border2:#c8d1de;
  --primary:#0284c7;
  --primary-dim:#7ec8ec;
  --primary-bg:#e0f2fe;
  --accent:#6366f1;
  --accent-bg:#eef2ff;
  --green:#059669;
  --green-bg:#d1fae5;
  --yellow:#d97706;
  --yellow-bg:#fef3c7;
  --red:#dc2626;
  --pink:#db2777;
  --text:#0f172a;
  --text2:#1e293b;
  --muted:#64748b;
  --muted2:#475569;
  --shadow:0 4px 24px rgba(15,23,42,.1);
  --shadow-sm:0 2px 8px rgba(15,23,42,.08);
  --glass:rgba(255,255,255,.8);
  --topbar-blur:blur(12px);
  color-scheme:light;
}

/* ── 主题切换过渡动画 ─────────────────────────────── */
body,
.card,.topbar,.day-card,.res-item,.badge,.tag,
button,input,textarea,a{
  transition:background-color .22s ease,
             border-color .22s ease,
             color .18s ease,
             box-shadow .22s ease;
}

/* ── 基础 ────────────────────────────────────────── */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  min-height:100vh;
  line-height:1.6;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;border:none;font-family:inherit}
input,textarea{font-family:inherit}
.mono{font-family:'JetBrains Mono','Fira Code',monospace}

/* ── 布局 ────────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{
  background:var(--glass);
  border-bottom:1px solid var(--border);
  padding:0 24px;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  backdrop-filter:var(--topbar-blur);
  -webkit-backdrop-filter:var(--topbar-blur);
}
.topbar-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;letter-spacing:-.02em}
.topbar-brand .shield{font-size:1.3rem}
.topbar-actions{display:flex;align-items:center;gap:8px}
.main{flex:1;padding:24px;max-width:1400px;margin:0 auto;width:100%}

/* ── 换肤按钮 ────────────────────────────────────── */
.theme-toggle{
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted2);
  cursor:pointer;
  transition:all .2s;
  flex-shrink:0;
}
.theme-toggle:hover{
  background:var(--primary-bg);
  border-color:var(--primary);
  color:var(--primary);
  transform:rotate(20deg);
}
[data-theme="light"] .theme-toggle-icon-dark{display:none}
[data-theme="dark"]  .theme-toggle-icon-light{display:none}

/* ── Cards ───────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;padding:20px;
  transition:border-color .2s,box-shadow .2s;
  box-shadow:var(--shadow-sm);
}
.card:hover{border-color:var(--border2)}
.card-sm{padding:12px 16px}

/* ── Buttons ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;
  font-size:.875rem;font-weight:500;
  transition:all .15s;
}
.btn-primary{background:var(--primary);color:#fff}
[data-theme="dark"] .btn-primary{color:#000}
.btn-primary:hover{opacity:.88}
.btn-ghost{
  background:transparent;
  color:var(--muted2);
  border:1px solid var(--border);
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.btn-danger{background:#fef2f2;color:var(--red);border:1px solid #fecaca}
[data-theme="dark"] .btn-danger{background:#450a0a;border-color:#7f1d1d}
.btn-danger:hover{background:#fee2e2}
.btn-sm{padding:5px 10px;font-size:.8rem}

/* ── Badges ──────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;
  font-size:.73rem;font-weight:600;letter-spacing:.02em;
}
.badge-blue{background:var(--primary-bg);color:var(--primary)}
.badge-purple{background:var(--accent-bg);color:var(--accent)}
.badge-pink{background:#fdf2f8;color:var(--pink)}
[data-theme="dark"] .badge-pink{background:#500724}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow)}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-gray{background:var(--surface2);color:var(--muted2)}

/* ── Progress ────────────────────────────────────── */
.progress-track{background:var(--surface2);border-radius:20px;height:6px;overflow:hidden;border:1px solid var(--border)}
.progress-fill{height:100%;border-radius:20px;transition:width .5s ease;background:linear-gradient(90deg,var(--primary),var(--accent))}

/* ── Grid ────────────────────────────────────────── */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ── Tags ────────────────────────────────────────── */
.tag{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:.73rem;font-family:'JetBrains Mono',monospace;
  background:var(--surface2);color:var(--muted2);
  border:1px solid var(--border);
}
.tag-doc{color:#0369a1;border-color:#bae6fd;background:#e0f2fe}
[data-theme="dark"] .tag-doc{color:#60a5fa;border-color:#1e3a5f;background:#0c1f38}
.tag-repo{color:#6d28d9;border-color:#ddd6fe;background:#ede9fe}
[data-theme="dark"] .tag-repo{color:#a78bfa;border-color:#2d1b69;background:#1e1b4b}
.tag-blog{color:#065f46;border-color:#a7f3d0;background:#d1fae5}
[data-theme="dark"] .tag-blog{color:#34d399;border-color:#064e3b;background:#022c22}
.tag-book{color:#92400e;border-color:#fde68a;background:#fef3c7}
[data-theme="dark"] .tag-book{color:#fbbf24;border-color:#78350f;background:#422006}
.tag-tool{color:#9d174d;border-color:#fbcfe8;background:#fdf2f8}
[data-theme="dark"] .tag-tool{color:#f472b6;border-color:#500724;background:#2d0a1a}
.tag-course{color:#7c2d12;border-color:#fed7aa;background:#fff7ed}
[data-theme="dark"] .tag-course{color:#fb923c;border-color:#7c2d12;background:#2d1508}

/* ── Day Grid ────────────────────────────────────── */
.day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;padding:10px;
  cursor:default;
}
.day-label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.day-theme{font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.35}
.day-tasks{list-style:none;display:flex;flex-direction:column;gap:3px}
.day-tasks li{font-size:.7rem;color:var(--muted2);padding-left:10px;position:relative;line-height:1.45}
.day-tasks li::before{content:'›';position:absolute;left:0;color:var(--primary)}

/* ── Resource list ───────────────────────────────── */
.res-list{display:flex;flex-direction:column;gap:6px}
.res-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--surface2);
  border-radius:8px;
  border:1px solid var(--border);
  transition:border-color .15s,background .15s;
}
.res-item:hover{border-color:var(--primary);background:var(--primary-bg)}
.res-item a{flex:1;font-size:.83rem;color:var(--text2)}
.res-item a:hover{color:var(--primary);text-decoration:none}

/* ── Review questions ────────────────────────────── */
.review-list{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:q}
.review-list li{
  padding:10px 14px 10px 34px;
  background:var(--surface2);
  border-radius:8px;
  border-left:3px solid var(--accent);
  font-size:.85rem;color:var(--muted2);
  counter-increment:q;
  position:relative;
  line-height:1.55;
}
.review-list li::before{
  content:counter(q);
  position:absolute;left:10px;top:10px;
  font-weight:700;color:var(--accent);font-size:.8rem;
}

/* ── Alerts ──────────────────────────────────────── */
.alert{padding:10px 14px;border-radius:8px;border-left:3px solid;margin-bottom:14px;font-size:.83rem}
.alert-info{background:var(--primary-bg);border-color:var(--primary);color:var(--muted2)}
.alert-success{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.alert-warn{background:var(--yellow-bg);border-color:var(--yellow);color:var(--yellow)}
[data-theme="light"] .alert-info{color:var(--primary-dim);color:#0369a1}
[data-theme="light"] .alert-success{color:var(--green)}
[data-theme="light"] .alert-warn{color:var(--yellow)}

/* ── Stats ───────────────────────────────────────── */
.stat-box{text-align:center;padding:14px 8px}
.stat-num{
  font-size:1.9rem;font-weight:800;
  font-family:'JetBrains Mono',monospace;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1.1;
}
.stat-label{font-size:.7rem;color:var(--muted);margin-top:3px;letter-spacing:.04em;text-transform:uppercase}

/* ── Checkbox ────────────────────────────────────── */
.check-item{display:flex;align-items:flex-start;gap:10px;padding:6px 0;cursor:pointer}
.check-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--green);flex-shrink:0;margin-top:2px}
.check-item label{font-size:.875rem;color:var(--muted2);cursor:pointer;line-height:1.5}
.check-item.checked label{color:var(--muted);text-decoration:line-through}

/* ── Notes textarea ──────────────────────────────── */
.notes-area{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;padding:10px;
  font-size:.83rem;resize:vertical;min-height:80px;
  transition:border-color .2s;
}
.notes-area:focus{outline:none;border-color:var(--primary)}
.notes-area::placeholder{color:var(--muted)}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-dim)}

/* ── Animation ───────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .28s ease forwards}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .day-grid{grid-template-columns:repeat(2,1fr)}
  .main{padding:12px}
  .topbar{padding:0 12px}
}
@media(max-width:480px){.day-grid{grid-template-columns:1fr}}

/* ── Light mode 特定微调 ─────────────────────────── */
[data-theme="light"] .card{box-shadow:0 1px 4px rgba(15,23,42,.07),0 4px 16px rgba(15,23,42,.06)}
[data-theme="light"] .topbar{box-shadow:0 1px 0 var(--border)}