/* ===== 个人工作台 视觉规范 =====
   背景 #F7F7F5 / 内容区白色 / 深灰文字 #202124 / 次要文字 #6F7277
   浅边框 #E6E7E4 / 深绿强调 #2F6B57
   淡黄 #F4D85A / 淡粉 #E9A8CF / 淡蓝 #AFC9EA / 淡绿 #B8CB9A
   正文 14-16px / 卡片圆角约 12px / 无 emoji / 统一 SVG 图标 */

:root {
  --bg: #F7F7F5;
  --card: #FFFFFF;
  --text: #202124;
  --sub: #6F7277;
  --border: #E6E7E4;
  --accent: #2F6B57;
  --accent-dark: #1F4A3A;
  --yellow: #F4D85A;
  --pink: #E9A8CF;
  --blue: #AFC9EA;
  --green: #B8CB9A;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(32,33,36,0.08);
  --sidebar-w: 210px;
  --danger: #B3261E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.3s;
}

/* ===== 板块主题色（统一架构，各自主色） ===== */
body { --theme: var(--accent); }
body.theme-focus { --theme: #E74C3C; }
body.theme-activity { --theme: #27AE60; }
body.theme-library { --theme: #2980B9; }
body.theme-inbox { --theme: #9B59B6; }
body.theme-mistakes { --theme: #F39C12; }
body.theme-qa { --theme: #1ABC9C; }
body.theme-reviews { --theme: #34495E; }
body.theme-health { --theme: #2ECC71; }
body.theme-calendar { --theme: #8E44AD; }
body.theme-accounts { --theme: #95A5A6; }
body.theme-search { --theme: #34495E; }
body.theme-ai { --theme: #3498DB; }
body.theme-settings { --theme: #7F8C8D; }
body.theme-kaoyan { --theme: #F5B041; }
.tint-gold { background: #FCF5E5; border: 1px solid #F3E3B8; }
body.theme-cet { --theme: #2980B9; }
body.theme-paper { --theme: #E9A8CF; }
body.theme-courses { --theme: #8E44AD; }
#topbar h2 { color: var(--theme); }
#viewWrap::before {
  content: ""; display: block; height: 4px; border-radius: 4px;
  background: var(--theme); margin-bottom: 14px; opacity: 0.85;
}
.btn { background: var(--theme); }
.btn:hover { background: var(--theme); filter: brightness(1.06); }
.btn.ghost { background: none; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--theme); color: var(--theme); background: none; }
.btn.plain { background: none; color: var(--theme); }
.btn.plain:hover { background: color-mix(in srgb, var(--theme) 8%, #fff); }
.nav-item.active { background: color-mix(in srgb, var(--theme) 14%, #fff); color: var(--theme); }
.sidebar .nav-item.active::before { display: none; }
.drawer-item.active { color: var(--theme); }

/* ===== 字体大小（设置里可调；手机端默认偏小） ===== */
:root { --fs-base: 15px; --fs-sm: 13px; --fs-h3: 15px; }
@media (max-width: 768px) {
  :root { --fs-base: 14px; --fs-sm: 12px; --fs-h3: 14px; }
  body.font-large { --fs-base: 15px; --fs-sm: 13px; --fs-h3: 15px; }
}
body.font-small { --fs-base: 14px; --fs-sm: 12px; --fs-h3: 14px; }
body.font-large { --fs-base: 16px; --fs-sm: 14px; --fs-h3: 16px; }

/* ===== 考研今日行动面板（三行固定布局） ===== */
.ky-top { display: flex; align-items: center; justify-content: space-between; background: #FCF5E5; border: 1px solid #F3E3B8; border-radius: 12px; padding: 10px 16px; margin-bottom: 12px; }
.ky-top-item { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: var(--sub); }
.ky-top-item .ky-num { font-size: 22px; font-weight: 800; color: #F5B041; }
.ky-stage-btn { background: #F5B041; color: #fff; border: none; border-radius: 8px; padding: 6px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ky-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.ky-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 158px; }
.ky-card.ky-done { opacity: .65; }
.ky-card-name { font-size: 15px; font-weight: 800; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
.ky-ok { font-size: 12px; color: #27AE60; font-weight: 600; }
.ky-card-count { font-size: 13px; color: var(--sub); line-height: 1.5; flex: 1; }
.ky-card-prog .progress-track { height: 5px; }
.ky-start { border: none; color: #fff; border-radius: 8px; padding: 9px 0; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; background: var(--kc, var(--accent)); }
.ky-bottom { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; margin-bottom: 12px; }
.ky-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.ky-ring-label { font-size: 12px; color: var(--sub); }
.ky-stats { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ky-stat-line { font-size: 14px; color: var(--text); }
.ky-stat-line b { color: #F5B041; font-size: 15px; }
.ky-coupon { background: #FCF5E5; color: #B07D0E; border: 1px dashed #F5B041; border-radius: 6px; font-size: 12px; padding: 1px 8px; margin-left: 4px; }
.ky-pressure { font-size: 12px; color: var(--danger); }
.ky-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ky-timer-box { position: fixed; top: 16px; right: 16px; z-index: 99; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); padding: 12px 18px; text-align: center; display: none; min-width: 170px; }
.ky-timer-label { font-size: 13px; color: var(--sub); margin-bottom: 4px; }
.ky-timer-time { font-size: 28px; font-weight: 800; color: var(--danger); margin-bottom: 8px; }
.ky-words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.ky-word { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; }
.ky-word .kw-w { font-weight: 700; color: var(--text); }
.ky-word .kw-m { font-size: 12px; color: var(--sub); text-align: right; }
.ky-word.done { opacity: .45; text-decoration: line-through; }
@media (max-width: 768px) {
  .ky-cards { grid-template-columns: repeat(2, 1fr); }
  .ky-card { min-height: 132px; }
  .ky-top { padding: 8px 10px; }
  .ky-num { font-size: 18px; }
  .ky-bottom { gap: 10px; padding: 10px 12px; }
  .ky-timer-box { top: 8px; right: 8px; left: 8px; }
}

/* ===== 今日首页（变体B 行动优先） ===== */
.home-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.home-brand { font-size: 13px; color: var(--sub); letter-spacing: .3px; }
.home-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; color: #555; }
.chip.gold { background: #FCF5E5; border-color: #F3E3B8; color: #B07D0E; }
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.home-greet { font-size: 22px; font-weight: 800; }
.home-date { font-size: 13px; color: var(--sub); margin-top: 4px; }
.home-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.home-action-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.home-action-head h3 { font-size: 16px; font-weight: 800; }
.home-pct { font-size: 13px; color: var(--accent); font-weight: 700; }
.home-goal { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F7F7F5; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.home-goal .gl { flex: 1; color: var(--sub); }
.home-goal .gl.has { color: var(--text); }
.home-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-task { border: 1px solid #EEEEEA; border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.home-task .box { width: 20px; height: 20px; border: 2px solid #C9CCCB; border-radius: 6px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.home-task .box.on { background: var(--accent); border-color: var(--accent); }
.ht-name { font-size: 14px; font-weight: 600; }
.ht-sub { font-size: 12px; color: #888; margin-top: 2px; }
.ht-late { font-size: 11.5px; color: var(--danger); margin-top: 2px; }
.home-domains { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.hd { border: 1px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; transition: all .12s; background: #fff; }
.hd:hover { border-color: var(--accent); }
.hd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hd-emoji { font-size: 19px; }
.hd-name { font-size: 14px; font-weight: 700; }
.hd-sub { font-size: 12px; color: var(--sub); line-height: 1.5; min-height: 36px; margin-bottom: 8px; }
.hd-go { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.hd-go.ky { color: #B07D0E; } .hd-go.en { color: #2980B9; } .hd-go.ai { color: #3498DB; } .hd-go.pa { color: #C0392B; } .hd-go.cu { color: #8E44AD; }
.home-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hs-ring { width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--accent) 0 var(--p, 0%), #E8E8E5 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hs-ring i { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 800; color: var(--accent); }
.hs-item { font-size: 13.5px; color: #555; padding: 0 12px; border-left: 1px solid #EEE; }
.hs-item b { font-size: 17px; color: var(--text); }
@media (max-width: 768px) {
  .home-hero { flex-direction: column; align-items: flex-start; }
  .home-tasks { grid-template-columns: 1fr; }
  .home-domains { grid-template-columns: repeat(2, 1fr); }
  .hs-ring { width: 46px; height: 46px; }
  .hs-ring i { width: 36px; height: 36px; font-size: 12px; }
  .hs-item { padding: 0 8px; font-size: 12.5px; }
}

/* ===== 学科页通用 ===== */
.page-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page-title { font-size: 19px; font-weight: 800; }
.tool { border: 1px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; transition: all .12s; background: #fff; }
.tool:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.tool-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 8px; background: #F4F5F2; }
.tool-name { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.tool-sub { font-size: 12px; color: var(--sub); line-height: 1.5; }
.formula-block { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.formula-title { font-size: 13.5px; font-weight: 800; margin-bottom: 5px; }
.formula-line { font-size: 13px; color: var(--sub); line-height: 1.7; padding: 1px 0; }
.sentence-block { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.sentence-en { font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.sentence-ans { font-size: 12.5px; color: var(--sub); margin-top: 6px; line-height: 1.6; }

/* ===== 英语学习（变体B Notion 暖极简） ===== */
.en-bar { display: flex; align-items: baseline; gap: 16px; padding: 8px 4px 18px; border-bottom: 1px solid #EFEEE9; margin-bottom: 16px; flex-wrap: wrap; }
.en-name { font-size: 22px; font-weight: 700; font-family: Georgia, "Songti SC", "SimSun", serif; }
.en-days { font-size: 22px; font-weight: 700; color: var(--accent); }
.en-meta { font-size: 13px; color: var(--sub); }
.en-switch { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.en-switch select { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: #fff; }
.en-today { background: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
.en-task { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #EFEEE9; font-size: 14px; cursor: pointer; }
.en-task:last-child { border: none; }
.en-box { width: 15px; height: 15px; border: 1.5px solid #C9C9C2; border-radius: 3px; flex-shrink: 0; }
.en-box.on { background: var(--accent); border-color: var(--accent); }
.en-task-name { flex: 1; }
.en-task-tag { font-size: 12px; color: var(--sub); }
.en-sec { font-size: 13px; color: var(--sub); margin: 18px 0 8px; }
.en-skill-list { background: #fff; border-radius: 12px; padding: 4px 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); margin-bottom: 16px; }
.en-skill { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #F4F3EF; cursor: pointer; }
.en-skill:last-child { border: none; }
.en-skill:hover { background: #FAFAF7; margin: 0 -8px; padding-left: 20px; padding-right: 20px; border-radius: 8px; }
.en-skill-ic { font-size: 17px; width: 30px; text-align: center; }
.en-skill-name { font-size: 14.5px; flex: 1; font-weight: 600; }
.en-skill-sub { font-size: 12px; color: var(--sub); }
.en-skill-arrow { color: #C9C9C2; font-size: 15px; }
.en-entry-row { display: flex; gap: 10px; margin-bottom: 16px; }
.en-entry { flex: 1; background: #fff; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--sub); box-shadow: 0 1px 4px rgba(0, 0, 0, .05); cursor: pointer; text-align: center; line-height: 1.6; }
.en-entry:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
@media (max-width: 768px) {
  .en-bar { gap: 8px; }
  .en-name { font-size: 19px; }
  .en-days { font-size: 19px; }
  .en-switch { margin-left: 0; width: 100%; }
  .en-switch select { flex: 1; }
  .en-entry-row { gap: 8px; }
  .en-entry { padding: 10px 8px; font-size: 12px; }
}
.mk-big { font-size: 26px; font-weight: 900; line-height: 1.1; }
body.bg-default { background-color: #F7F7F5; background-image: none; }
body.bg-dots {
  background-color: #F7F7F5;
  background-image: radial-gradient(rgba(47,107,87,0.10) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
body.bg-grid {
  background-color: #F9FAF8;
  background-image:
    linear-gradient(rgba(47,107,87,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,107,87,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
body.bg-waves {
  background-color: #FAF7F9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 12 Q 10 4 20 12 T 40 12 T 60 12 T 80 12' fill='none' stroke='%23E9A8CF' stroke-opacity='0.35' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 80px 24px;
}
body.bg-gradient {
  background-color: #F7F7F5;
  background-image: linear-gradient(165deg, #F7F7F5 0%, #EFF4EE 45%, #F4F0E8 100%);
  background-attachment: fixed;
}
/* 背景预览块（设置页） */
.bg-preview {
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 10px; border: 1px solid var(--border);
  cursor: pointer; position: relative; overflow: hidden;
}
.bg-preview.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-preview .bp-name { position: absolute; left: 8px; bottom: 6px; font-size: 12px; color: var(--text); background: rgba(255,255,255,0.75); border-radius: 6px; padding: 1px 8px; }
.bg-preview .bp-check { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: var(--fs-base); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { font-weight: 700; }

/* ===== 桌面侧边栏（变体C 紧凑浅色） ===== */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: #FAFAFA;
  color: #4A4A4A;
  border-right: 1px solid #ECECEC;
  display: flex; flex-direction: column;
  z-index: 50;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 10px;
  font-size: 15px; font-weight: 800; color: #202124;
}
.brand-logo { width: 18px; height: 18px; }
.brand svg { stroke: #2F6B57; }
.side-nav { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.nav-group { margin-top: 10px; }
.nav-group-title {
  font-size: 10.5px; color: #A0A0A0;
  padding: 10px 10px 4px; letter-spacing: 0.8px; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 1px 0;
  border-radius: 6px; color: #4A4A4A;
  font-size: 13px; width: 100%; text-align: left;
  transition: background 0.15s;
}
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .9; }
.nav-item:hover { background: #F0F0F0; }
.nav-item.active { background: #2F6B57; color: #fff; font-weight: 600; }
.nav-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; }
.nav-item .nav-badge {
  margin-left: auto; font-size: 11px; background: rgba(47,107,87,0.12);
  color: #2F6B57; border-radius: 10px; padding: 1px 7px;
}
.nav-item.active .nav-badge { background: rgba(255,255,255,0.25); color: #fff; }
.side-foot { padding: 12px 16px 16px; border-top: 1px solid #ECECEC; }
.side-save { font-size: 12px; color: #888; }
.side-ver { font-size: 11px; color: #B0B0B0; margin-top: 2px; }

/* ===== 主区域 ===== */
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 28px 6px;
}
.ph-emoji { font-size: 27px; line-height: 1; flex-shrink: 0; }
.ph-txt { flex: 1; min-width: 0; }
.ph-txt h1 { font-size: 19px; }
.topbar-sub { display: block; font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.topbar-help { margin-left: auto; }

/* ===== 健康三卡 + 统计卡（emoji 风格） ===== */
.health3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h3 { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; text-align: center; }
.h3-emoji { font-size: 24px; }
.h3-label { font-size: 12px; color: var(--sub); margin-top: 6px; }
.h3-val { font-size: 13.5px; font-weight: 700; margin-top: 3px; line-height: 1.4; }
.h3-btn { margin-top: 8px; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 4px 14px; font-size: 11.5px; color: var(--accent); cursor: pointer; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st3 { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; text-align: center; }
.st3-emoji { font-size: 18px; }
.st3-num { font-size: 18px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.st3-label { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.st4 { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px; }
.st4-emoji { font-size: 20px; }
.st4-num { font-size: 20px; font-weight: 900; margin-top: 5px; }
.st4-label { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
@media (max-width: 768px) { .stats4 { grid-template-columns: repeat(2, 1fr); } .health3 { grid-template-columns: repeat(3, 1fr); } .stats3 { grid-template-columns: repeat(3, 1fr); } }

.view-wrap { padding: 10px 28px 40px; flex: 1; }

/* ===== 课程卡片方块 ===== */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.course-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all .12s; position: relative; overflow: hidden; }
.course-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, .06); transform: translateY(-1px); }
.cc-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.cc-name { font-size: 14.5px; font-weight: 800; margin: 6px 0 4px; line-height: 1.4; }
.cc-sub { font-size: 12px; color: var(--sub); line-height: 1.6; }
.cc-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cc-tag { font-size: 11px; color: var(--sub); background: #F5F5F3; border-radius: 6px; padding: 2px 8px; }
.cc-tag.link { color: var(--accent); background: #EDF3F0; }
.cc-tag.note { color: #B07D0E; background: #FCF5E5; }
.cc-empty { color: var(--sub); font-size: 13px; padding: 8px 2px; }
@media (max-width: 768px) { .course-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ===== 课程照片 ===== */
.course-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.cp-item { position: relative; border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; }
.cp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; }
.cp-note { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 专注页（双变体） ===== */
.f-types { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.f-tp { border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #55554F; cursor: pointer; background: #fff; transition: all .15s; display: flex; align-items: center; gap: 6px; }
.f-tp:hover { border-color: var(--accent); }
.f-tp.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.f-tp-ic { font-size: 14px; }
.f-name-row { display: flex; gap: 8px; max-width: 440px; margin: 4px auto 14px; justify-content: center; }
.f-name-row input { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; background: #fff; outline: none; min-width: 0; }
.f-name-row input:focus { border-color: var(--accent); }
.f-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.f-sound { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.f-sd { border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 6px 12px; font-size: 12px; color: #55554F; cursor: pointer; }
.f-sd.on { background: #FCF5E5; border-color: #F3E3B8; color: #B07D0E; }
.f-stats { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.f-st { flex: 1; min-width: 120px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.f-st-num { font-size: 18px; font-weight: 800; color: var(--accent); }
.f-st-label { font-size: 11.5px; color: var(--sub); margin-top: 2px; display: block; }
.f-history { padding: 4px 0; }
.f-his { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #F2F2EF; font-size: 13px; }
.f-his:last-child { border: none; }
.f-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.f-his-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-his-type { font-size: 11px; color: var(--sub); flex-shrink: 0; }
.f-his-time { color: var(--sub); font-size: 12px; flex-shrink: 0; }
/* 变体B */
.f-now { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; flex-wrap: wrap; }
.f-now-ring { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--accent) 0 35%, #EDEFEC 0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.f-now-ring i { width: 42px; height: 42px; border-radius: 50%; background: #fff; font-style: normal; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--accent); }
.f-now-info { flex: 1; min-width: 140px; }
.f-now-name { font-size: 14.5px; font-weight: 700; }
.f-now-type { font-size: 12px; color: var(--sub); margin-top: 2px; }
.f-now-actions { display: flex; gap: 8px; }
.f-cols { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; }
.f-stats-v { display: flex; flex-direction: column; gap: 8px; }
.f-stats-v .f-st { display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 11px 14px; }
.f-stats-v .f-st-num { font-size: 15px; }
@media (max-width: 768px) { .f-cols { grid-template-columns: 1fr; } .f-now { gap: 10px; } .f-now-actions { width: 100%; justify-content: flex-end; } .f-stats .f-st { min-width: calc(50% - 10px); } }

/* ===== 通用卡片与网格 ===== */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.card-head h3 { font-size: var(--fs-h3); flex: 1; }
.card-head .hint { color: var(--sub); font-size: 12px; font-weight: 400; }
.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); }

/* ===== 彩色卡片 ===== */
.tint-yellow { background: var(--yellow); border-color: transparent; }
.tint-pink { background: var(--pink); border-color: transparent; }
.tint-blue { background: var(--blue); border-color: transparent; }
.tint-green { background: var(--green); border-color: transparent; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff;
  border-radius: 8px; padding: 8px 16px;
  font-size: var(--fs-base); font-weight: 600;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn svg { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.ghost:hover { background: rgba(47,107,87,0.06); }
.btn.plain { background: #EEF0ED; color: var(--text); }
.btn.plain:hover { background: #E3E6E2; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn.small { padding: 4px 10px; font-size: var(--fs-sm); }
.btn.block { width: 100%; justify-content: center; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--sub);
}
.icon-btn:hover { background: #EEF0ED; color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.lg { width: 40px; height: 40px; }
.icon-btn.lg svg { width: 22px; height: 22px; }

/* ===== 表单 ===== */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: var(--fs-sm); color: var(--sub); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
}
.field textarea { min-height: 80px; resize: vertical; }
.form-row { display: flex; gap: 10px; }
.form-row .field { flex: 1; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
.checkline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ===== 列表 ===== */
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; font-size: 14.5px; word-break: break-word; }
.list-item .li-sub { font-size: 12.5px; color: var(--sub); margin-top: 2px; word-break: break-all; }
.list-item .li-meta { font-size: 12px; color: var(--sub); white-space: nowrap; }
.empty {
  text-align: center; color: var(--sub); padding: 34px 16px;
  font-size: 14px;
}
.empty .empty-tip { margin-top: 6px; font-size: var(--fs-sm); }

/* ===== 进度条 ===== */
.progress-track { background: #ECEEEB; border-radius: 20px; height: 8px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 20px; background: var(--accent); transition: width 0.3s; }
.progress-fill.yellow { background: #D9B422; }
.progress-fill.pink { background: #C77BA8; }
.progress-fill.blue { background: #7FA3D6; }
.progress-fill.green { background: #93AD72; }

/* ===== 标签 ===== */
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; border-radius: 20px;
  padding: 2px 10px; margin: 2px 4px 2px 0;
  background: #EEF0ED; color: var(--sub);
}
.tag.platform { background: #E3EAE5; color: var(--accent); font-weight: 600; }
.tag.state-done { background: var(--green); color: #3D5230; }
.tag.state-doing { background: var(--blue); color: #2C4A6E; }
.tag.state-todo { background: #EEF0ED; color: var(--sub); }
.tag.pri-hi { background: var(--pink); color: #7A3D5F; }
.tag.pri-mid { background: var(--yellow); color: #6B5A0E; }
.tag.pri-lo { background: #EEF0ED; color: var(--sub); }

/* ===== 时间线 ===== */
.timeline { display: flex; gap: 4px; margin: 10px 0 4px; }
.tl-step { flex: 1; text-align: center; position: relative; }
.tl-step::before {
  content: ""; position: absolute; top: 11px; left: 0; right: 0;
  height: 2px; background: var(--border);
}
.tl-step:first-child::before { left: 50%; }
.tl-step:last-child::before { right: 50%; }
.tl-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: #ECEEEB; border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--border);
  margin: 0 auto; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.tl-step.done .tl-dot { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tl-step.current .tl-dot { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.tl-step.current .tl-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tl-label { font-size: 12px; margin-top: 6px; color: var(--sub); }
.tl-step.current .tl-label { color: var(--accent); font-weight: 700; }
.tl-step.done .tl-label { color: var(--text); }

/* ===== 打卡热力图 ===== */
.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hm-cell {
  aspect-ratio: 1; border-radius: 4px; background: #EDEFEC;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; position: relative;
}
.hm-cell.l1 { background: #DCE8DF; }
.hm-cell.l2 { background: #A9C9B4; }
.hm-cell.l3 { background: #5E9577; }
.hm-cell.l4 { background: var(--accent); }
.hm-cell.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-legend { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--sub); margin-top: 8px; }
.hm-legend .hm-cell { width: 14px; height: 14px; }

/* ===== 柱状图 ===== */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bar-val { font-size: 11px; color: var(--sub); }
.bar { width: 70%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: var(--blue); min-height: 2px; }
.bar-col.today .bar { background: var(--accent); }
.bar-label { font-size: 11px; color: var(--sub); }

/* ===== 日历 ===== */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { text-align: center; font-size: 12px; color: var(--sub); padding: 4px 0; }
.cal-cell {
  aspect-ratio: 1; border-radius: 8px; padding: 4px;
  font-size: 13px; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cal-cell.other { color: #C4C7C4; }
.cal-cell.today { border-color: var(--accent); font-weight: 700; }
.cal-cell.has-event { background: #F0F6F2; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ===== 复盘 ===== */
.review-item { border-left: 3px solid var(--accent); padding-left: 14px; margin-bottom: 18px; }
.review-item .ri-head { display: flex; align-items: center; gap: 10px; }
.review-item .ri-date { font-weight: 700; font-size: 15px; }
.review-item .ri-type { font-size: 12px; color: var(--accent); background: #E3EAE5; border-radius: 10px; padding: 1px 8px; }

/* ===== 搜索 ===== */
.search-input-wrap { display: flex; gap: 8px; margin-bottom: 16px; }
.search-input-wrap input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 15px; outline: none; background: #fff;
}
.search-input-wrap input:focus { border-color: var(--accent); }
.search-group-title { font-size: 13px; color: var(--sub); margin: 14px 0 6px; font-weight: 600; }

/* ===== AI ===== */
.ai-banner {
  background: #E3EAE5; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  font-size: 13.5px; color: var(--accent-dark); margin-bottom: 16px;
  display: flex; gap: 10px; align-items: flex-start;
}
.ai-chat { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px 0; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 12px; font-size: var(--fs-base); white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.msg.bot { align-self: flex-start; background: #EEF0ED; }
.msg.draft { align-self: flex-start; background: #FBF3D9; border: 1px dashed #D9B422; }
.ai-input { display: flex; gap: 8px; margin-top: 12px; }
.ai-input input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; outline: none; }
.ai-input input:focus { border-color: var(--accent); }

/* ===== 今日 ===== */
.today-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.task-item:last-child { border-bottom: none; }
.task-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; background: #fff; cursor: pointer;
}
.task-check svg { width: 14px; height: 14px; }
.task-item.done .task-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.task-item.done .li-title { text-decoration: line-through; color: var(--sub); }
.task-title { flex: 1; font-weight: 600; font-size: 14.5px; }
.task-domain { font-size: 12px; color: var(--sub); white-space: nowrap; }

/* ===== 模态 ===== */
.modal-mask, .help-mask, .drawer-mask {
  position: fixed; inset: 0; background: rgba(32,33,36,0.45);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-mask.open, .help-mask.open, .drawer-mask.open { display: flex; }
.modal {
  background: #fff; border-radius: 16px; width: 520px; max-width: 92vw;
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.modal-head { display: flex; align-items: center; padding: 16px 20px 8px; }
.modal-head h3 { flex: 1; font-size: 17px; }
.modal-body { padding: 8px 20px 16px; overflow-y: auto; }
.modal-foot { padding: 0 20px 18px; display: flex; justify-content: flex-end; gap: 10px; }

/* ===== 帮助 ===== */
.help-mask { align-items: center; }
.help-box {
  background: #fff; border-radius: 16px; width: 480px; max-width: 92vw;
  max-height: 80vh; overflow-y: auto; padding: 24px;
}
.help-box h4 { margin: 14px 0 6px; font-size: 15px; }
.help-box p { font-size: var(--fs-base); color: var(--sub); margin-bottom: 6px; }
.help-box .hl { color: var(--text); }

/* ===== 抽屉 ===== */
.drawer-mask { justify-content: flex-start; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 88vw;
  background: #fff; z-index: 101; display: none;
  flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}
.drawer.open { display: flex; }
.drawer-head { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.drawer-title { flex: 1; font-weight: 700; font-size: 16px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 30px; }
.drawer-group-title {
  font-size: 12px; color: var(--sub); padding: 14px 10px 5px;
  display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;
}
.drawer-group-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.drawer-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 10px; border-radius: 8px; font-size: 14.5px; text-align: left;
}
.drawer-item:hover { background: #F1F3F0; }
.drawer-item.active { background: #E3EAE5; color: var(--accent); font-weight: 600; }
.drawer-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== 手机底部导航 ===== */
.mobile-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid var(--border);
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav .mn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 8px 0 7px;
  min-height: 56px; color: var(--sub); font-size: 11px;
}
.mobile-nav .mn-item svg { width: 22px; height: 22px; }
.mobile-nav .mn-item.active { color: var(--accent); font-weight: 700; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: #202124; color: #fff; font-size: 13.5px;
  padding: 10px 18px; border-radius: 10px; opacity: 0;
  pointer-events: none; transition: all 0.25s; z-index: 200;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); }

/* ===== 统计块 ===== */
.stat-num { font-size: 26px; font-weight: 800; }
.stat-label { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.stat-sub { font-size: 12px; color: var(--sub); margin-top: 6px; }

/* ===== 倒计时 ===== */
.countdown { display: flex; align-items: baseline; gap: 8px; }
.countdown .cd-num { font-size: 30px; font-weight: 800; color: var(--accent); }
.countdown .cd-label { font-size: 13px; color: var(--sub); }

/* ===== 回收站/日志 ===== */
.log-item { font-size: 13.5px; border-left: 3px solid var(--border); padding: 4px 0 4px 14px; margin-bottom: 14px; }
.log-item .log-date { font-weight: 700; font-size: var(--fs-base); }
.log-item .log-tag { font-size: 12px; color: var(--accent); background: #E3EAE5; padding: 1px 8px; border-radius: 10px; margin-left: 8px; }
.log-item p { color: var(--sub); margin-top: 4px; font-size: 13.5px; }

/* ===== 帮助圆问号 ===== */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--sub); color: var(--sub);
  font-size: 13px; line-height: 1; flex-shrink: 0; cursor: pointer;
  background: #fff;
}
.help-dot:hover { border-color: var(--accent); color: var(--accent); }

/* ===== 专注计时 ===== */
.timer-display { font-size: 44px; font-weight: 800; letter-spacing: 2px; text-align: center; }
.timer-controls { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

/* ===== 响应式：手机 ===== */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .topbar { padding: 14px 16px 4px; }
  .topbar h1 { font-size: 19px; }
  .view-wrap { padding: 8px 14px 96px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .today-grid { grid-template-columns: 1fr; }
  .mobile-nav { display: flex; }
  .card { padding: 14px; }
  .form-row { flex-direction: column; gap: 0; }
  .timer-display { font-size: 38px; }
  .toast { bottom: 80px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* 无横向滚动兜底 */
img, svg, video { max-width: 100%; }