/* ═══════════════════════════════════════════════════════════
   知序 — Morandi Design System
   莫兰迪低饱和 · 青灰商务学术 · 模块化卡片布局
   ═══════════════════════════════════════════════════════════ */

/* ===== CSS Variables ===== */
:root {
  /* 宫崎骏·日间 — 暖奶油草甸调色板 */
  --bg:        #FBF3E4;
  --surface:   #FFFDF8;
  --panel-bg:  #FFFDF8;
  --hover-bg:  #F5ECDD;
  --sidebar-bg:#F7EFE0;
  --sidebar-text:#6B5B45;
  --sidebar-active:#5BA97E;
  --primary:   #5BA97E;
  --primary-light:rgba(91,169,126,.15);
  --primary-dark:#4A8E68;
  --accent:    #E08E5A;
  --accent-light:rgba(224,142,90,.15);
  --success:   #7BA85B;
  --success-light:rgba(123,168,91,.15);
  --warning:   #D9A23B;
  --warning-light:rgba(217,162,59,.15);
  --danger:    #D97A6A;
  --danger-light:rgba(217,122,106,.15);
  --text:      #3A3326;
  --text-muted:#8A7B66;
  --border:    #EBDCC8;
  --border-light:#F4EAD9;
  --shadow: 0 2px 12px rgba(120,96,60,.08);
  --shadow-lg:0 10px 34px rgba(120,96,60,.12);
  --radius: 18px;
  --sidebar-w:200px;
  --topbar-h:56px;
  --font: 'LXGW WenKai Lite','PingFang SC',system-ui,-apple-system,sans-serif;

  --p-ui:#5BA97E; --p-i:#6BA3C4; --p-u:#E08E5A; --p-n:#8FB36B;
  --pomo-work:#5BA97E; --pomo-short:#6BA3C4; --pomo-long:#E08E5A;
}

[data-theme="dark"] {
  /* 宫崎骏·夜色 — 暮蓝紫 → 深松绿 + 星 */
  --bg:#1B2A4A; --surface:#21304B; --panel-bg:#21304B; --hover-bg:#2A3B59;
  --sidebar-bg:#1A2740;
  --sidebar-text:#C9D4E6; --sidebar-active:#86C9A6;
  --primary:#86C9A6; --primary-light:rgba(134,201,166,.16); --primary-dark:#A3D9BC;
  --accent:#E8A878; --accent-light:rgba(232,168,120,.16);
  --success:#8FB36B; --success-light:rgba(143,179,107,.16);
  --warning:#E6C06A; --warning-light:rgba(230,192,106,.16);
  --danger:#E08E8E; --danger-light:rgba(224,142,142,.16);
  --text:#E8EEF6; --text-muted:#9FB0C8; --border:#2E3E5C; --border-light:#28374F;
  --shadow:0 2px 10px rgba(0,0,0,.3); --shadow-lg:0 8px 30px rgba(0,0,0,.4);
  --p-ui:#86C9A6; --p-i:#7FB0D6; --p-u:#E8A878; --p-n:#8FB36B;
  --pomo-work:#86C9A6; --pomo-short:#7FB0D6; --pomo-long:#E8A878;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100vh;
  transition:background .3s,color .3s;line-height:1.5;
  overflow-x:hidden;
}
/* 弹窗打开时锁定背景滚动 */
body.modal-open{overflow:hidden !important}
/* 弹窗内滚动区域防止滚动链传递到body */
.shop-grid,.hist-list,.inv-grid,.chat-messages,.method-container,.coach-body,.onboard-steps{
  overscroll-behavior:contain;
  -webkit-overscroll-behavior:contain;
}
::selection{background:var(--primary-light);color:var(--primary-dark)}

/* ===== 宫崎骏风·背景氛围层（固定，纯静态无粒子） ===== */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg,#FBF3E4 0%,#E8F3EE 45%,#D6EBF2 100%),
    radial-gradient(1100px 520px at 82% -8%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 460px at 12% 4%, rgba(255,255,255,.40), transparent 60%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.05%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,100% 100%,200px 200px;
  transition:background-color .3s;
}
[data-theme="dark"] body::before{
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg,#1B2A4A 0%,#22384A 55%,#2E4A3F 100%),
    radial-gradient(900px 900px at 86% 6%, rgba(210,225,255,.20), transparent 60%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2230%22%20r%3D%221.2%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2270%22%20r%3D%221%22%20opacity%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2240%22%20r%3D%221.4%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22120%22%20r%3D%221%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22160%22%20r%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22200%22%20r%3D%221.3%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%22190%22%20r%3D%220.9%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.05%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat,no-repeat,repeat,repeat;
  background-size:100% 100%,100% 100%,240px 240px,200px 200px;
}

/* ===== Sidebar ===== */
/* 左边固定不动，右边自己滚 */
.sidebar{
  position:fixed;left:0;top:0;
  width:var(--sidebar-w);height:100vh;
  background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  overflow-y:auto;transition:transform .3s;z-index:100;
}
.sidebar.collapsed{transform:translateX(-100%)}

/* ===== Main Content ===== */
/* 右边自己滚，左边不动 */
.main{margin-left:var(--sidebar-w);min-height:100vh;overflow-x:hidden}
.main.expanded{margin-left:0}
.logo{display:flex;align-items:center;gap:10px;padding:20px 16px 16px;border-bottom:1px solid var(--border-light)}
.logo-svg{width:22px;height:22px;fill:var(--primary);flex-shrink:0}
.logo-text{font-size:1rem;font-weight:600;color:var(--sidebar-text);letter-spacing:.03em;white-space:nowrap}
.nav-list{list-style:none;flex:1;padding:8px 0}
.nav-item{display:flex;align-items:center;padding:9px 16px;color:var(--sidebar-text);cursor:pointer;font-size:.84rem;transition:all .15s;border-left:3px solid transparent;margin:1px 0;letter-spacing:.01em}
.nav-item:hover{background:var(--primary-light);color:var(--sidebar-active);}
.nav-item.active{background:var(--primary-light);color:var(--sidebar-active);font-weight:600;border-radius:var(--radius);}
.nav-label{white-space:nowrap}
.sidebar-footer{padding:16px;border-top:1px solid var(--border-light);display:flex;flex-direction:column;align-items:center;gap:4px}
.progress-ring-wrap{position:relative;width:56px;height:56px}
.progress-ring{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(0,0,0,.08);stroke-width:4}
.ring-fg{fill:none;stroke:var(--sidebar-active);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .6s;stroke-dasharray:138.2;stroke-dashoffset:138.2}
.ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--sidebar-text);font-weight:400;font-size:.78rem}
.footer-hint{color:var(--sidebar-text);font-size:.7rem}

/* ===== Topbar ===== */
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 24px;z-index:90;box-shadow:var(--shadow);flex-shrink:0;position:sticky;top:0}
.menu-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px 6px;border-radius:6px;display:flex;align-items:center}
.menu-btn-label{display:none}
.menu-btn:hover{background:var(--bg);color:var(--text)}
.topbar-info{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--text-muted);letter-spacing:.02em}
.topbar-sep{opacity:.3}
.topbar-spacer{flex:1}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ===== Buttons ===== */
.btn-icon{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;color:var(--text-muted);display:flex}
.btn-icon:hover{background:var(--bg);color:var(--text)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;padding:8px 16px;border-radius:var(--radius);font-weight:500;cursor:pointer}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(91,169,126,.35)}
.btn-primary:active{transform:scale(.97)}
.btn-outline{background:none;border:1.5px solid var(--border);border-radius:7px;padding:7px 16px;font-size:.84rem;cursor:pointer;color:var(--text);transition:all .15s;white-space:nowrap}
.btn-outline:hover{background:var(--hover-bg);border-color:var(--primary);color:var(--text)}
.btn-sm{background:var(--bg);border:1.5px solid var(--border);border-radius:6px;padding:5px 10px;font-size:.78rem;cursor:pointer;color:var(--text);transition:all .15s;white-space:nowrap}
.btn-sm:hover{border-color:var(--primary);color:var(--primary-dark)}
.btn-sm.btn-active,.btn-sm.btn-active:hover{background:var(--primary);border-color:var(--primary);color:#fff}

/* ===== Tab Content ===== */
.tab-content{display:none;padding:24px;opacity:0;transform:translateY(8px)}
.tab-content.active{display:block;animation:fadeTabIn .28s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes fadeTabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:20px}
.page-header h1{font-size:1.5rem;font-weight:400;letter-spacing:.01em}
.page-sub{color:var(--text-muted);font-size:.8rem;margin-top:3px;letter-spacing:.01em}

/* ===== Dashboard Layout ===== */
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.dash-col{display:flex;flex-direction:column;gap:14px}
.dash-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dash-title{font-size:1.25rem;font-weight:400;letter-spacing:.01em}
.dash-section{margin-bottom:18px}
.dash-section-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dash-section-title{font-size:1rem;font-weight:400}
.save-dot{width:9px;height:9px;border-radius:50%;background:var(--border);display:inline-block;margin-left:8px;flex-shrink:0;transition:background .3s}
.save-dot.saving{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5)}
.save-dot.saved{background:#16a34a;box-shadow:0 0 8px rgba(22,163,74,.6)}
.dash-section-actions{display:flex;gap:6px}
.dash-stats-row{display:flex;gap:14px;align-items:stretch;margin-bottom:20px}

/* ===== Surface Cards ===== */
.surface-card{
  background:var(--surface);border-radius:12px;padding:16px 20px;
  box-shadow:0 1px 3px rgba(60,50,40,.05),0 0 0 1px rgba(60,50,40,.03);
  border:1px solid var(--border-light);transition:box-shadow .25s,transform .25s;
}
.surface-card:hover{box-shadow:0 2px 10px rgba(60,50,40,.07),0 0 0 1px rgba(60,50,40,.04)}
.card-row{display:flex;justify-content:space-between;align-items:center}
.card-label{font-size:.84rem;font-weight:400;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.card-stat{font-size:.78rem;color:var(--text-muted)}
.card-meta{font-size:.72rem;color:var(--text-muted)}

/* ===== Form Helpers ===== */
.form-input{width:100%;padding:6px 10px;border-radius:6px;border:1px solid #eee;font-size:.8rem;background:var(--bg);color:var(--text)}
.form-area{width:100%;padding:8px 10px;border-radius:6px;border:1px solid #eee;font-size:.8rem;background:var(--bg);color:var(--text);resize:vertical}
.form-label{font-size:.72rem;color:var(--text-muted)}
.form-sm{width:100%;padding:4px 8px;border-radius:4px;border:1px solid #eee;font-size:.78rem;background:var(--bg);color:var(--text)}

/* ===== Dashboard ===== */
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.dashboard-grid .dg-card{
  background:var(--surface);border-radius:12px;padding:20px 22px;
  box-shadow:0 1px 3px rgba(60,50,40,.04),0 0 0 1px rgba(60,50,40,.02);
  border:1px solid var(--border-light);transition:box-shadow .25s,transform .25s;
  position:relative;overflow:hidden;
}
.dashboard-grid .dg-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:#f5f5f5,var(--primary-dark));
  opacity:.5;transition:opacity .3s;
}
.dashboard-grid .dg-card:hover{
  box-shadow:0 4px 16px rgba(60,50,40,.08),0 0 0 1px rgba(60,50,40,.05);
  transform:translateY(-1px);
}
.dashboard-grid .dg-card:hover::before{opacity:1}
.dg-card.span-2{grid-column:span 2}
.dg-card.span-4{grid-column:span 4}
.dg-card h3{
  font-size:.82rem;font-weight:400;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;
}
.dg-kpi{display:flex;align-items:baseline;gap:4px}
.dg-kpi .kpi-value{font-size:2.2rem;font-weight:400;color:#000;letter-spacing:-.03em;line-height:1.1;transition:color .3s}
.dg-kpi .kpi-unit{font-size:.78rem;color:var(--text-muted);font-weight:400}
.dg-sub{font-size:.73rem;color:var(--text-muted);margin-top:4px}
.dg-empty{font-size:.76rem;color:var(--text-muted);text-align:center;padding:16px 0}
.dg-triple{display:flex;gap:14px;text-align:center}
.dg-triple>div{flex:1}
.dg-bars{display:flex;flex-direction:column;gap:8px}
.dg-bar-row{display:flex;align-items:center;gap:10px;font-size:.78rem}
.dg-bar-row .bar-label{width:80px;color:var(--text-muted);text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-bar-row .bar-track{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.dg-bar-row .bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.dg-bar-row .bar-pct{width:36px;font-weight:400;text-align:right;font-size:.72rem;flex-shrink:0}
.dg-bar-row .bar-pct.red{color:var(--danger)}.dg-bar-row .bar-pct.amber{color:var(--warning)}.dg-bar-row .bar-pct.green{color:var(--success)}

/* 连胜火花（我的页 my-stats 卡片火焰态 · 乙方案） */
.my-stat-card.flame{
  border:1px solid rgba(255,122,24,.5);
  box-shadow:0 0 0 1px rgba(255,122,24,.4),0 6px 20px rgba(255,122,24,.18);
  animation:flameGlow 2.6s ease-in-out infinite;
}
.my-stat-card.flame .my-stat-val{color:#ff6a00;animation:flamePulse 1.7s ease-in-out infinite}
@keyframes flameGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,122,24,.35),0 4px 14px rgba(255,122,24,.14)}
  50%{box-shadow:0 0 0 1px rgba(255,122,24,.6),0 8px 26px rgba(255,122,24,.30)}
}
@keyframes flamePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  .my-stat-card.flame,.my-stat-card.flame .my-stat-val{animation:none}
}
.dg-chart canvas{width:100%!important;height:auto!important}
.dg-mistake-row{display:flex;flex-direction:column;gap:6px}
.dg-mistake-item{display:flex;align-items:center;gap:8px;font-size:.78rem;padding:2px 0}
.dg-mistake-item .ms-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dg-daily-agenda{font-size:.78rem;max-height:280px;overflow-y:auto}
.dg-daily-agenda .dg-task-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border-light)}
.dg-daily-agenda .dg-task-row.done .dg-task-name{text-decoration:line-through;color:var(--text-muted)}
.dg-daily-agenda .dg-task-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dg-daily-agenda .dg-task-time{font-size:.7rem;color:var(--text-muted);flex-shrink:0;width:42px}
.dg-daily-agenda .dg-task-name{flex:1}

/* ===== NEW Dashboard Design ===== */

/* ── Hero Welcome Section ── */
.dash-hero{
  background:#f5f5f5;
  border-radius:20px;padding:28px 30px;margin-bottom:20px;
  display:flex;justify-content:space-between;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(100,120,150,.08),0 0 0 1px rgba(120,140,170,.06);
}
.dash-hero::after{
  content:'';position:absolute;top:-40%;right:-10%;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(140,160,200,.12) 0%,transparent 70%);
  pointer-events:none;
}
.dash-hero-left{z-index:1}
.dash-greeting{font-size:1.6rem;font-weight:400;color:#3a4a5c;margin:0 0 4px;letter-spacing:-.02em}
.dash-hero-sub{font-size:.84rem;color:#6b7d8e;margin:0;font-weight:400}
.dash-hero-right{z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dash-hero-date{font-size:.82rem;color:#6b7d8e;font-weight:400}
.dash-hero-points{font-size:.9rem;font-weight:400;color:#8b6914;background:rgba(218,165,32,.1);padding:5px 14px;border-radius:20px;border:1px solid rgba(218,165,32,.15)}
.dash-hero-weather{font-size:.76rem;color:#6b7d8e}

/* ── Quick Stats Row ── */
.dash-stats-row-new{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.dash-stat-card{
  background:#fff;border-radius:16px;padding:18px 20px;
  box-shadow:0 1px 4px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.03);
  border:none;display:flex;flex-direction:column;gap:6px;
  transition:transform .2s,box-shadow .2s;cursor:default;
  position:relative;overflow:hidden;
}
.dash-stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:3px 3px 0 0;opacity:.6;
}
.dash-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.dash-stat-card:nth-child(1)::before{background:#6c8ebf}
.dash-stat-card:nth-child(2)::before{background:#d4958b}
.dash-stat-card:nth-child(3)::before{background:#86b8a5}
.dash-stat-card:nth-child(4)::before{background:#d4b06a}
.dash-stat-icon{font-size:1.3rem;line-height:1}
.dash-stat-value{font-size:1.7rem;font-weight:400;color:#2c3e50;letter-spacing:-.02em;line-height:1.2}
.dash-stat-label{font-size:.72rem;color:#7f8c8d;text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.dash-stat-sub{font-size:.68rem;color:#95a5a6;margin-top:-2px}

/* ── Quick Actions Grid ── */
.dash-quick-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
.dash-qa-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 10px 14px;border-radius:16px;border:1px solid rgba(0,0,0,.06);
  background:#fff;cursor:pointer;transition:all .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.dash-qa-item:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  border-color:rgba(108,142,191,.3);
}
.dash-qa-item:active{transform:translateY(0)}
.dash-qa-icon{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;background:#f5f5f5;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:all .2s;
}
.dash-qa-item:hover .dash-qa-icon{
  transform:scale(1.08);
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.dash-qa-label{font-size:.72rem;font-weight:400;color:#4a5568;white-space:nowrap}

/* Mini Plant XP Bar */
.mini-plant-xp-bar{width:100%;height:4px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden;margin-top:2px}
.mini-plant-xp-fill{height:100%;border-radius:2px;background:#f5f5f5;transition:width .6s ease}
#dashMiniPlantBtn:hover .mini-plant-xp-fill{background:#f5f5f5}

/* ── Progress Row ── */
.dash-progress-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.dash-progress-card{
  background:#fff;border-radius:16px;padding:20px 22px;
  box-shadow:0 1px 4px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.03);
  border:none;
}
.dash-progress-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:.84rem;font-weight:400;color:#4a5568}
.dash-progress-pct{font-size:1.3rem;font-weight:400;color:#6c8ebf}
.dash-progress-sub{font-size:.74rem;color:#7f8c8d;text-align:center;margin-top:8px}
.dash-ring-wrap{display:flex;justify-content:center}

/* ── Global Stats ── */
.dash-global-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-gs-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:#f7f9fb;border-radius:12px;
  transition:background .2s;
}
.dash-gs-item:hover{background:#edf1f5}
.dash-gs-icon{font-size:1.2rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;flex-shrink:0}
.dash-gs-icon.blue{background:rgba(108,142,191,.12)}
.dash-gs-icon.red{background:rgba(212,149,139,.12)}
.dash-gs-icon.green{background:rgba(134,184,165,.12)}
.dash-gs-icon.amber{background:rgba(212,176,106,.12)}
.dash-gs-info{min-width:0}
.dash-gs-value{font-size:1.05rem;font-weight:400;color:#2c3e50;line-height:1.3}
.dash-gs-label{font-size:.66rem;color:#95a5a6;text-transform:uppercase;letter-spacing:.05em}

/* ── Extra Widgets Row ── */
.dash-extra-widgets{margin-bottom:16px}

/* ── Dashboard Mini Pomodoro V2 (优化版) ── */
.mini-pomo-v2{
  display:flex;align-items:center;gap:16px;
  background:#f5f5f5;
  border:1px solid rgba(255,107,107,.12);
  border-radius:18px;padding:18px 20px;
  margin-top:0;margin-bottom:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.mpv2-ring-wrap{
  position:relative;width:100px;height:100px;flex-shrink:0;
}
.mpv2-ring{transform:rotate(-90deg)}
.mpv2-bg{fill:none;stroke:var(--border);stroke-width:6}
.mpv2-fg{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .5s linear;stroke-dasharray:314.2;stroke-dashoffset:0}
.mpv2-time{
  position:absolute;bottom:10px;left:0;right:0;
  text-align:center;font-size:1.05rem;font-weight:400;
  font-variant-numeric:tabular-nums;color:var(--text);
  text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.mpv2-body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.mpv2-mode-row{display:flex;align-items:center;gap:6px}
.mpv2-mode-icon{font-size:1.1rem}
.mpv2-mode{font-weight:400;font-size:.9rem;color:var(--text)}
.mpv2-sub{font-size:.72rem;color:var(--text-muted)}
.mpv2-mode-sel{
  font-size:.75rem;padding:5px 8px;border-radius:8px;
  border:1px solid #eee;background:var(--bg);color:var(--text);
  cursor:pointer;max-width:160px;
}
.mpv2-custom-input{
  font-size:.75rem;padding:5px 8px;border-radius:8px;
  border:1px solid #eee;background:var(--bg);
  color:var(--text);width:70px;
}
.mpv2-actions{display:flex;gap:8px;margin-top:4px}
.mpv2-btn{
  border:none;border-radius:20px;padding:7px 18px;cursor:pointer;
  font-size:.78rem;font-weight:400;transition:all .15s;
}
.mpv2-btn.start{background:#000;color:#fff}
.mpv2-btn.start:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(231,76,60,.3)}
.mpv2-btn.reset{background:var(--bg);color:var(--text-muted);border:1px solid #eee}
.mpv2-btn.reset:hover{color:var(--text);border-color:var(--text)}

/* ── 旧版mini-pomo样式(保留兼容) ── */
#dashMiniPomo.mini-pomo{
  margin-top:0;margin-bottom:20px;
  background:#f5f5f5;
  border:1px solid rgba(212,149,139,.15);
  border-radius:16px;
}

/* ═══════════════════════════════════════════════════════════
.daily-top-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.mini-pomo{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;align-items:center;gap:14px}
.mp-ring{position:relative;width:72px;height:72px;flex-shrink:0}
.mp-ring svg{transform:rotate(-90deg)}
.mp-bg{fill:none;stroke:var(--border);stroke-width:5}
.mp-fg{fill:none;stroke:var(--pomo-work);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .5s linear;stroke-dasharray:188.5;stroke-dashoffset:0}
.mp-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:400}
.mp-info{flex:1;min-width:0}
.mp-mode{font-weight:400;font-size:.84rem}
.mp-sub{font-size:.72rem;color:var(--text-muted)}
.mp-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.mp-btn{background:#000;color:#fff;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;font-size:.78rem;font-weight:400;white-space:nowrap}
.mp-btn:hover{background:var(--primary-dark)}
.mp-btn-sec{padding:5px 8px;background:var(--bg);color:var(--text);border:1px solid #eee}
.mp-mode-sel{font-size:.72rem;padding:4px 6px;border-radius:6px;border:1px solid #eee;background:var(--bg);color:var(--text)}
.mp-expand{background:none;border:1px dashed var(--border);border-radius:6px;padding:3px 8px;cursor:pointer;font-size:.72rem;color:var(--text-muted);margin-left:8px;white-space:nowrap}
.mp-expand:hover{border-color:#000;color:#000}
.daily-progress-panel{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;flex-direction:column;gap:8px}
.dpp-bar-wrap{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.dpp-bar{height:100%;background:#000;border-radius:4px;transition:width .5s;width:0%}
.dpp-stats{display:flex;gap:8px}
.dpp-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px}
.dpp-num{font-size:1.3rem;font-weight:400;color:#000}
.dpp-label{font-size:.68rem;color:var(--text-muted)}

/* Timeline */
.timeline-section{margin-bottom:14px}
.ts-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ts-header h3{font-size:.88rem;font-weight:400;flex:1}
.timeline{display:flex;flex-direction:column}
.time-block{display:flex;align-items:stretch;gap:10px;cursor:grab}
.time-block:active{cursor:grabbing}
.time-block.dragging{opacity:.4}
.time-block.drag-over{outline:2px dashed #000;border-radius:var(--radius)}
.time-label{width:44px;min-width:44px;font-size:.7rem;color:var(--text-muted);text-align:right;padding-top:14px}
.time-line{display:flex;flex-direction:column;align-items:center;width:14px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--border);flex-shrink:0;margin-top:16px}
.dot.active-dot{background:#000}
.dot.done-dot{background:var(--success)}
.line{flex:1;width:1.5px;background:var(--border);margin-top:1px}
.task-card{flex:1;background:var(--surface);border-radius:8px;padding:10px 14px;margin:5px 0;box-shadow:var(--shadow);border:1px solid var(--border-light);cursor:pointer;position:relative;transition:box-shadow .15s}
.task-card:hover{box-shadow:var(--shadow-lg)}
.task-card.done{opacity:.5}
.task-card.done .task-title{text-decoration:line-through}
.task-card.pri-ui{border-left:3px solid var(--p-ui)}
.task-card.pri-i{border-left:3px solid var(--p-i)}
.task-card.pri-u{border-left:3px solid var(--p-u)}
.task-card.pri-n{border-left:3px solid var(--p-n)}
.task-card.rest-card{border-left:3px solid var(--border)}
.task-title{font-weight:400;font-size:.84rem;margin-bottom:3px}
.task-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.task-time{font-size:.7rem;color:var(--text-muted)}
.task-tag{font-size:.66rem;padding:1px 7px;border-radius:10px;background:var(--primary-light);color:var(--primary-dark);font-weight:400}
.task-check{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:2px solid var(--border);cursor:pointer;background:none;display:flex;align-items:center;justify-content:center;transition:all .15s}
.task-check:hover{border-color:var(--success)}
.task-check.checked{background:var(--success);border-color:var(--success);color:#fff;font-size:.7rem}
.task-drag-handle{position:absolute;left:5px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.7rem;opacity:.25}
/* Edit button on task card */
.task-edit-btn{position:absolute;right:40px;top:8px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.72rem;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s}
.task-card:hover .task-edit-btn{opacity:1}
.task-edit-btn:hover{background:var(--primary-light);color:#000}
.task-del-btn{position:absolute;right:8px;top:8px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;font-weight:400;width:20px;height:20px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;padding:0}
.task-card:hover .task-del-btn{opacity:1}
.task-del-btn:hover{background:var(--danger-light);color:var(--danger)}

/* Advanced Panel */
.advanced-panel{margin-bottom:14px}
.adv-section{background:var(--surface);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow);border:1px solid var(--border-light);margin-bottom:6px}
.adv-section summary{font-weight:400;font-size:.84rem;cursor:pointer;padding:3px 0}
.adv-body{padding-top:10px;display:flex;flex-direction:column;gap:8px}
.adv-check{display:flex;align-items:center;gap:6px;font-size:.78rem;cursor:pointer}
.smart-result{font-size:.76rem;color:var(--text-muted);margin-top:6px;padding:8px 10px;border-radius:6px;background:var(--bg)}

/* Review Panel */
.review-panel{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light);margin-top:14px}
.review-panel summary{font-weight:400;font-size:.84rem;cursor:pointer}
.review-panel h3{font-size:.84rem;font-weight:400;margin-bottom:8px}
.review-body{padding-top:10px;display:flex;flex-direction:column;gap:10px}
.review-saved{font-size:.72rem;color:var(--success);margin-left:8px}
.review-clear{background:none;border:1px solid #eee;border-radius:6px;padding:4px 10px;font-size:.72rem;cursor:pointer;color:var(--text-muted);margin-left:6px;transition:all .15s}
.review-clear:hover{border-color:var(--danger);color:var(--danger)}

/* ===== Exam Preset Buttons ===== */
.exam-preset{padding:6px 14px;border-radius:18px;border:1.5px solid var(--border);background:none;cursor:pointer;font-size:.78rem;color:var(--text-muted);transition:all .15s}
.exam-preset:hover{border-color:#000;color:#000}
.exam-preset.active{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:400}
/* Exam timer large */
.exam-clock{font-variant-numeric:tabular-nums}
/* Mini pomo custom input */
.mp-custom-input{font-size:.7rem;padding:3px 5px;border-radius:4px;border:1px solid #eee;background:var(--bg);color:var(--text);text-align:center}
.mp-custom-input:focus{outline:none;border-color:#000}

/* ===== Focus Center Custom Time Input ===== */
.focus-layout{display:grid;grid-template-columns:360px 1fr;gap:18px}
.focus-pomo{background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;flex-direction:column;align-items:center;gap:16px}
.focus-side{display:flex;flex-direction:column;gap:14px}
.pomo-mode-btns{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.pomo-mode{padding:5px 11px;border-radius:16px;border:1.5px solid var(--border);background:none;cursor:pointer;font-size:.76rem;color:var(--text-muted);transition:all .15s}
.pomo-mode.active{background:var(--pomo-work);border-color:var(--pomo-work);color:#fff;font-weight:400}
.pomo-mode[data-mode="deep"].active{background:var(--primary-dark);border-color:var(--primary-dark)}
.pomo-mode[data-mode="recite"].active{background:var(--pomo-short);border-color:var(--pomo-short)}
.pomo-mode[data-mode="exam"].active{background:var(--danger);border-color:var(--danger)}
.pomo-circle{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center}
.pomo-ring{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.pomo-ring-bg{fill:none;stroke:var(--border);stroke-width:8}
.pomo-ring-fg{fill:none;stroke:var(--pomo-work);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s linear,stroke .3s;stroke-dasharray:666.0;stroke-dashoffset:0}
.pomo-timer-display{text-align:center}
.pomo-time{font-size:3rem;font-weight:400;letter-spacing:-.03em;line-height:1}
.pomo-rounds{font-size:.76rem;color:var(--text-muted);margin-top:4px}
.pomo-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pomo-btn{padding:8px 18px;border-radius:8px;background:#000;color:#fff;border:none;cursor:pointer;font-size:.84rem;font-weight:400;transition:background .15s}
.pomo-btn:hover{background:var(--primary-dark)}
.pomo-btn-sec{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.pomo-btn-sec:hover{background:var(--border)}
.pomo-task-select{width:100%}
.pomo-task-select label{font-size:.74rem;color:var(--text-muted);display:block;margin-bottom:4px}
.pomo-task-select select{width:100%;padding:7px 10px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:.8rem;outline:none}

/* White Noise */
.white-noise-panel{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.white-noise-panel h3,.focus-stats-mini h3,.focus-history h3{font-size:.84rem;font-weight:400;margin-bottom:8px}
.wn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.wn-btn{padding:7px 4px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg);cursor:pointer;font-size:.76rem;transition:all .15s;text-align:center}
.wn-btn:hover{border-color:#000}
.wn-btn.active{border-color:#000;background:var(--primary-light);color:var(--primary-dark);font-weight:400}
.wn-controls{display:flex;align-items:center;gap:6px}
.wn-controls input[type=range]{flex:1;accent-color:#000}
.wn-controls span{font-size:.72rem;color:var(--text-muted);min-width:40px}

.focus-stats-mini{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.fsm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fsm-item{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.68rem;color:var(--text-muted)}
.fsm-num{font-size:1.2rem;font-weight:400;color:#000}
.focus-history{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.fh-item{display:flex;justify-content:space-between;padding:2px 0;font-size:.76rem;border-bottom:1px solid var(--border-light);color:var(--text-muted)}

/* ===== Week ===== */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.week-col{background:var(--surface);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);border:1px solid var(--border-light);min-height:280px}
.week-col-header{font-weight:400;font-size:.8rem;padding-bottom:6px;margin-bottom:6px;border-bottom:2px solid var(--border);text-align:center}
.week-col-header .day-num{font-size:1.1rem}
.week-col-header .day-name{font-size:.68rem;color:var(--text-muted)}
.week-col.today .week-col-header{color:#000;border-color:#000}
.week-task{padding:5px 7px;border-radius:5px;margin-bottom:4px;font-size:.74rem;border-left:3px solid #000;background:var(--bg);cursor:pointer;transition:transform .12s;position:relative}
.week-task:hover{transform:scale(1.02)}
.week-task.done{opacity:.5;text-decoration:line-through}
.week-task .wk-del{position:absolute;right:3px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;font-weight:400;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;padding:0;line-height:1}
.week-task:hover .wk-del{opacity:1}
.week-task .wk-del:hover{background:var(--danger-light);color:var(--danger)}

/* ===== Monthly ===== */
.month-layout{display:grid;grid-template-columns:1fr 280px;gap:18px}
.month-calendar{background:var(--surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-header h3{font-size:.88rem;font-weight:400}
.cal-nav{background:none;border:1.5px solid var(--border);border-radius:6px;padding:3px 8px;cursor:pointer;font-size:.8rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day-label{text-align:center;font-size:.66rem;color:var(--text-muted);padding:2px;font-weight:400}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;font-size:.76rem;transition:background .15s}
.cal-day:hover{background:var(--bg)}
.cal-day.today{background:#000;color:#fff;font-weight:400}
.cal-day.has-task::after{content:'';position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:var(--accent)}
.cal-day.other-month{color:var(--border)}
.month-tasks{background:var(--surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.month-tasks h3{font-size:.88rem;font-weight:400;margin-bottom:10px}
.month-task-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--border-light);position:relative}
.month-task-item:last-child{border-bottom:none}
.month-task-item .mt-del{position:absolute;right:4px;top:6px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;font-weight:400;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;padding:0;line-height:1}
.month-task-item:hover .mt-del{opacity:1}
.month-task-item .mt-del:hover{background:var(--danger-light);color:var(--danger)}
.mti-check{width:16px;height:16px;border-radius:3px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mti-check.checked{background:var(--success);border-color:var(--success);color:#fff;font-size:.65rem}
.mti-title{font-size:.8rem;flex:1}
.mti-tag{font-size:.66rem;color:var(--primary-dark);font-weight:400}

/* ===== Yearly ===== */
.yearly-wrap{display:flex;flex-direction:column;gap:12px}
.year-quarter{background:var(--surface);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.quarter-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.quarter-label{font-weight:400;font-size:.88rem;color:var(--primary-dark);background:var(--primary-light);padding:3px 10px;border-radius:16px}
.quarter-progress{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.quarter-progress-bar{height:100%;background:#000;border-radius:3px;transition:width .4s}
.quarter-pct{font-size:.72rem;color:var(--text-muted);min-width:32px;text-align:right}
.quarter-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.goal-chip{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;background:var(--bg);font-size:.78rem;border:1.5px solid var(--border);cursor:pointer;transition:border-color .15s;position:relative}
.goal-chip:hover{border-color:#000}
.goal-chip.done{background:var(--success-light);border-color:var(--success);color:var(--success);text-decoration:line-through}
.goal-chip .gc-del{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;font-weight:400;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;padding:0;line-height:1}
.goal-chip:hover .gc-del{opacity:1}
.goal-chip .gc-del:hover{background:var(--danger-light);color:var(--danger)}

/* ===== Sprint ===== */
.sp-btn{font-size:.68rem;padding:3px 8px;border-radius:4px;border:1px solid #eee;background:var(--bg);cursor:pointer;color:var(--text);transition:all .15s}
.sp-btn:hover{border-color:#000;color:#000}
.sp-edit-btn{color:#000}
.sp-del-btn{color:var(--danger)}
.sprint-board{display:flex;flex-direction:column;gap:10px}
.sprint-mgr-bar{display:flex;align-items:center;gap:10px;padding:6px 0}
.sprint-mgr-btn{padding:5px 14px;border-radius:8px;background:#f5f5f5;color:#fff;border:none;font-size:.76rem;font-weight:400;cursor:pointer}
.sprint-cols-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sprint-col{background:var(--surface);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.sprint-col-header{display:flex;align-items:center;gap:6px;font-weight:400;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--border)}
.sprint-col-label{flex:1}
.sprint-col-edit{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.82rem;padding:2px 6px;border-radius:4px}
.sprint-col-edit:hover{background:var(--border-light);color:#000}
.sprint-count{color:#fff;border-radius:10px;padding:1px 7px;font-size:.68rem}
.sprint-task{background:var(--bg);border-radius:8px;padding:8px 10px;margin-bottom:6px;border:1.5px solid var(--border);cursor:pointer;transition:transform .12s;position:relative}
.sprint-task:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sprint-task-title{font-weight:400;font-size:.82rem;margin-bottom:3px}
.sprint-task-meta{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted)}
.sprint-task .st-del{position:absolute;right:6px;top:6px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;font-weight:400;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;padding:0;line-height:1}
.sprint-task:hover .st-del{opacity:1}
.sprint-task .st-del:hover{background:var(--danger-light);color:var(--danger)}
.sprint-add{width:100%;padding:6px;border-radius:7px;border:1.5px dashed var(--border);background:none;color:var(--text-muted);cursor:pointer;font-size:.78rem;transition:all .15s;margin-top:3px}
.sprint-add:hover{border-color:#000;color:#000}

/* ===== Memory ===== */
.memory-add-bar{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light);margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.memory-add-bar input,.memory-add-bar textarea{padding:8px 10px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:.8rem;outline:none;font-family:var(--font)}
.memory-add-bar input:focus,.memory-add-bar textarea:focus{border-color:#000}
.mar-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mar-row select{padding:7px 10px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:.8rem}
.memory-today{margin-bottom:16px}
.memory-today h3,.memory-all h3{font-size:.88rem;font-weight:400;margin-bottom:8px}
.memory-card-list{display:flex;flex-direction:column;gap:6px}
.memory-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.mem-card{background:var(--surface);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);border-left:3px solid #000;cursor:pointer;transition:transform .12s;border:1px solid var(--border-light)}
.mem-card:hover{transform:translateY(-2px)}
.mem-card h4{font-size:.82rem;font-weight:400;margin-bottom:3px}
.mem-content{font-size:.76rem;color:var(--text-muted);max-height:50px;overflow:hidden}
.mem-meta{display:flex;justify-content:space-between;margin-top:6px;font-size:.68rem;color:var(--text-muted)}
.mem-actions{display:flex;gap:5px;margin-top:6px}
.mem-btn{padding:3px 8px;border-radius:5px;border:1px solid #eee;background:var(--bg);cursor:pointer;font-size:.66rem}
.mem-btn:hover{border-color:#000}
.mem-next{font-size:.66rem;color:var(--danger);font-weight:400}
.mem-card.due{border-left-color:var(--danger)}.mem-empty{color:var(--text-muted);font-size:.78rem;text-align:center;padding:16px}

/* ===== Mistake Book (New) ===== */
.mistake-add-bar{background:var(--surface);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);border:1px solid var(--border-light);margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.mistake-add-bar input,.mistake-add-bar textarea,.mistake-add-bar select{padding:7px 10px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:.8rem;outline:none;font-family:var(--font)}
.mistake-add-bar input:focus,.mistake-add-bar textarea:focus,.mistake-add-bar select:focus{border-color:#000}
.mistake-add-bar .mar-row{gap:6px;flex-wrap:wrap}
.mistake-stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
.mistake-stats-row .ms-stat-card{background:var(--surface);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);border:1px solid var(--border-light);text-align:center}
.ms-stat-card .stat-subject{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.ms-stat-card .stat-count{font-size:1.8rem;font-weight:400;color:var(--danger)}
.ms-stat-card .stat-rate{font-size:.72rem;color:var(--text-muted)}
.mistake-filter{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mistake-filter h3{font-size:.88rem;font-weight:400;margin-right:8px}
.mistake-filter select,.mistake-filter input{padding:6px 10px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:.78rem;outline:none}
.mistake-list{display:flex;flex-direction:column;gap:8px}
.mistake-item{background:var(--surface);border-radius:8px;padding:12px 16px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:box-shadow .15s}
.mistake-item:hover{box-shadow:var(--shadow-lg)}
.mistake-item .ms-difficulty{font-size:1.2rem;flex-shrink:0;width:28px;text-align:center}
.mistake-item .ms-body{flex:1;min-width:0}
.mistake-item .ms-title{font-weight:400;font-size:.84rem;margin-bottom:4px}
.mistake-item .ms-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.7rem;color:var(--text-muted);margin-bottom:4px}
.mistake-item .ms-meta span{padding:1px 6px;border-radius:4px;background:var(--bg)}
.mistake-item .ms-content{font-size:.76rem;color:var(--text-muted);margin-top:4px;display:none}
.mistake-item.expanded .ms-content{display:block}
.mistake-item .ms-actions{display:flex;gap:5px;margin-top:6px}
.mistake-item .ms-actions button{padding:3px 8px;border-radius:5px;border:1px solid #eee;background:var(--bg);cursor:pointer;font-size:.68rem}
.mistake-item .ms-actions button:hover{border-color:#000}
.ms-difficulty.easy{color:var(--success)}.ms-difficulty.medium{color:var(--warning)}.ms-difficulty.hard{color:var(--danger)}

/* ===== Mock Exam (New) ===== */
.exam-setup-card{background:var(--surface);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);border:1px solid var(--border-light);max-width:720px}
.exam-setup-card h3{font-size:1rem;font-weight:400;margin-bottom:14px}
.exam-questions-editor{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.exam-q-row{background:var(--bg);border-radius:8px;padding:10px 14px;border:1px solid #eee;display:flex;flex-direction:column;gap:6px}
.exam-q-row .eq-header{display:flex;align-items:center;gap:8px}
.exam-q-row .eq-num{font-weight:400;font-size:.8rem;color:var(--primary-dark)}
.exam-q-row input,.exam-q-row select{padding:6px 10px;border-radius:6px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:.78rem;outline:none}
.exam-q-row input:focus{border-color:#000}
.exam-q-row .eq-correct{width:100%;padding:6px 10px}
.exam-q-row .eq-btn{background:none;border:1px solid #eee;border-radius:4px;cursor:pointer;font-size:.7rem;padding:2px 6px}
.exam-header-bar{background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;padding:14px 20px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;position:sticky;top:var(--topbar-h);z-index:10}
.exam-timer{font-size:2rem;font-weight:400;color:var(--danger);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.exam-questions{background:var(--surface);border-radius:0 0 var(--radius) var(--radius);padding:20px 24px;box-shadow:var(--shadow);border:1px solid var(--border-light);border-top:none;display:flex;flex-direction:column;gap:20px}
.exam-question{border-bottom:1px solid var(--border-light);padding-bottom:16px}
.exam-question:last-child{border-bottom:none}
.exam-question .eq-title{font-weight:400;font-size:.92rem;margin-bottom:10px}
.exam-question .eq-options{display:flex;flex-direction:column;gap:6px}
.exam-question .eq-opt{padding:8px 12px;border-radius:7px;border:1.5px solid var(--border);cursor:pointer;font-size:.82rem;display:flex;align-items:center;gap:8px;transition:all .15s}
.exam-question .eq-opt:hover{border-color:#000;background:var(--primary-light)}
.exam-question .eq-opt.selected{border-color:var(--primary-dark);background:var(--primary-light);font-weight:400}
.exam-report-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.exam-report-header h2{font-size:1.4rem;font-weight:400}
.exam-score-card{background:var(--surface);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;gap:20px;align-items:center;margin-bottom:18px}
.exam-score-circle{width:120px;height:120px;flex-shrink:0}
.exam-score-details{flex:1}
.exam-score-details h3{font-size:1.2rem;font-weight:400;margin-bottom:4px}
.exam-score-details .esd-row{font-size:.8rem;color:var(--text-muted);margin:2px 0}
.exam-detail{display:flex;flex-direction:column;gap:10px}
.exam-detail .ed-item{background:var(--surface);border-radius:8px;padding:12px 16px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.ed-item.correct{border-left:3px solid var(--success)}
.ed-item.wrong{border-left:3px solid var(--danger)}
.ed-item .ed-title{font-weight:400;font-size:.84rem;margin-bottom:4px}
.ed-item .ed-answer{font-size:.76rem;color:var(--text-muted)}
.ed-item .ed-correct-answer{font-size:.76rem;color:var(--success);font-weight:400}

/* ===== Methods ===== */
.method-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.method-card{background:var(--surface);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border:1px solid var(--border-light);display:flex;flex-direction:column;gap:6px}
.method-card h3{font-size:1rem;font-weight:400}
.method-tag{font-size:.68rem;padding:2px 8px;border-radius:10px;background:var(--primary-light);color:var(--primary-dark);font-weight:400;display:inline-block;width:fit-content}
.method-desc{font-size:.78rem;color:var(--text);line-height:1.55}
.method-desc strong{color:var(--primary-dark)}
.method-desc em{color:var(--danger);font-style:normal;font-weight:400}
.method-steps{list-style:none;display:flex;flex-direction:column;gap:2px;font-size:.76rem;color:var(--text-muted);padding-left:0}
.method-steps li{padding:2px 0}
.method-steps li::before{content:'\2713 ';color:var(--success);font-weight:400}

/* ===== Stats ===== */
.stats-layout{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.stats-card{background:var(--surface);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.stats-card h3{font-size:.84rem;font-weight:400;margin-bottom:8px}
.stats-chart{width:100%!important;height:auto!important;max-height:200px}
.stat-card{background:var(--bg);border-radius:6px;padding:8px 12px;text-align:center;min-width:70px}
.stat-num{font-size:1.3rem;font-weight:400;color:#000}
.stat-label{font-size:.66rem;color:var(--text-muted)}

/* ===== Fullscreen Focus ===== */
.focus-overlay{position:fixed;inset:0;background:#1A1D22;z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;transition:opacity .3s}
.focus-overlay.open{display:flex}
.focus-overlay-content{text-align:center}
.fm-header{display:flex;align-items:center;justify-content:space-between;width:340px;margin:0 auto 24px;color:#E4E0DC;font-size:1.1rem;font-weight:400}
.fm-exit{background:rgba(255,255,255,.08);color:#E4E0DC;border-color:rgba(255,255,255,.15)}
.fm-timer{position:relative;width:260px;height:260px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.fm-timer svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.fm-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.fm-fg{fill:none;stroke:var(--pomo-work);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s linear;stroke-dasharray:703.7;stroke-dashoffset:0}
.fm-time-display{text-align:center;color:#E4E0DC}
.fm-time{font-size:4rem;font-weight:400;letter-spacing:-.04em}
.fm-sub{font-size:.82rem;color:rgba(255,255,255,.4);margin-top:3px}
.fm-controls{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.fm-btn{padding:10px 24px;border-radius:10px;background:var(--pomo-work);color:#fff;border:none;cursor:pointer;font-size:.92rem;font-weight:400}
.fm-btn:hover{opacity:.85}
.fm-btn-sec{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.fm-hint{color:rgba(255,255,255,.3);font-size:.74rem}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(30,30,30,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100010;transition:opacity .2s}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border-radius:18px;width:480px;max-width:95vw;box-shadow:0 16px 48px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;animation:modalIn .3s cubic-bezier(.22,.61,.36,1)}
@keyframes modalIn{from{transform:scale(.92) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-header{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
}
.modal-header h2,.modal-header h3{
  font-size:1.05rem;font-weight:400;color:#fff;letter-spacing:.03em;margin:0;
}
.modal-header .btn-icon{
  color:rgba(255,255,255,.8);font-size:1.3rem;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:all .15s;background:rgba(255,255,255,0);
}
.modal-header .btn-icon:hover{background:rgba(255,255,255,.15);color:#fff}
.modal-close{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--text-muted);border-radius:6px;padding:2px 6px}
.modal-close:hover{background:var(--bg)}
.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.modal-footer{padding:12px 24px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border-light)}
.modal-field{display:flex;flex-direction:column;gap:4px;flex:1}
.modal-field label{font-size:.73rem;color:var(--text-muted);font-weight:400;letter-spacing:.03em;text-transform:uppercase;margin-bottom:1px}
.modal-field input,.modal-field select,.modal-field textarea,.form-group input,.form-group select,.form-group textarea{
  padding:9px 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);
  font-size:.82rem;outline:none;font-family:var(--font);transition:border-color .2s,box-shadow .2s;
}
.modal-field input:focus,.modal-field select:focus,.modal-field textarea:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:#000;box-shadow:0 0 0 3px var(--primary-light);
}
.modal-field input::placeholder,.modal-field textarea::placeholder{color:var(--border)}
/* priority dropdown visual hints */
.modal-field select#taskPriority option[value="urgent-important"]{color:var(--danger)}
.modal-field select#taskPriority option[value="important"]{color:var(--warning)}
.modal-field select#taskPriority option[value="urgent"]{color:#C48B7A}
.modal-field select#taskPriority option[value="normal"]{color:var(--success)}
.form-group{display:flex;flex-direction:column;gap:4px;flex:1}
.form-group label{font-size:.72rem;color:var(--text-muted);font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.form-row{display:flex;gap:10px}
.modal-btn{
  padding:8px 18px;border-radius:8px;border:none;cursor:pointer;font-size:.84rem;font-weight:400;
  transition:all .2s;letter-spacing:.02em;position:relative;overflow:hidden;
}
.modal-btn:active{transform:scale(.97)}
.modal-btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  box-shadow:0 2px 8px rgba(124,143,167,.3);
}
.modal-btn-primary:hover{box-shadow:0 4px 14px rgba(124,143,167,.4);transform:translateY(-1px)}
.modal-btn-cancel{background:var(--bg);color:var(--text-muted);border:1.5px solid var(--border)}
.modal-btn-cancel:hover{background:var(--border-light);color:var(--text);border-color:var(--text-muted)}
.modal-btn-danger{background:var(--danger-light);color:var(--danger);border:1.5px solid transparent}
.modal-btn-danger:hover{background:var(--danger);color:#fff;box-shadow:0 2px 10px rgba(196,139,122,.35)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));right:16px;left:16px;text-align:center;background:#2C3138;color:#E4E0DC;padding:10px 18px;border-radius:8px;font-size:.8rem;opacity:0;transform:translateY(10px);transition:all .25s;pointer-events:none;z-index:9998;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.toast.show{opacity:1;transform:translateY(0)}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .focus-layout{grid-template-columns:1fr}
  .dashboard-grid{grid-template-columns:repeat(2,1fr)}
  .dash-stats-row{flex-direction:column}
  .dash-cols{grid-template-columns:1fr}
  .stats-layout{grid-template-columns:1fr}
  .month-layout{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  .dg-card.span-2,.dg-card.span-4{grid-column:span 2}
  .mistake-stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--sidebar-w:180px}
  .tab-content{padding:14px}
  .dashboard-grid{grid-template-columns:1fr}
  .dg-card.span-2,.dg-card.span-4{grid-column:span 1}
  .week-grid{grid-template-columns:repeat(3,1fr)}
  .sprint-board{grid-template-columns:1fr}
  .fsm-grid{grid-template-columns:repeat(2,1fr)}
  .mini-pomo{flex-wrap:wrap}
  .exam-timer{font-size:1.4rem}
  .mistake-stats-row{grid-template-columns:1fr 1fr}
  .mistake-filter{flex-direction:column;align-items:flex-start}
}
/* ── 加载遮罩 ──────────────────────────────────── */
.loading-mask{position:fixed;inset:0;background:rgba(255,255,255,.92);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.loading-mask p{color:var(--text-muted);font-size:.95rem;margin:0}
.loading-spin{width:36px;height:36px;border:3px solid var(--border);border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════
   开发者面板 · 金色尊贵主题
   ═══════════════════════════════════════════════════════════ */

/* 顶栏在线用户徽章 */
.dev-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  background:#f5f5f5, rgba(218,165,32,.08));
  border: 1.5px solid rgba(184,134,11,.25);
  font-size: .78rem;
  font-weight:400;
  color: #8B6914;
  white-space: nowrap;
  cursor: default;
  letter-spacing: .02em;
}
.dev-online-badge.pulse { animation: goldPulse 2s ease-in-out infinite; }
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,134,11,.15); }
  50% { box-shadow: 0 0 0 6px rgba(184,134,11,.05); }
}

/* 侧边栏金色激活态 (开发者模式) */
.nav-item.dev-active {
  background:#f5f5f5, rgba(184,134,11,.1)) !important;
  color: #FFD700 !important;
  border-left-color: #DAA520 !important;
  font-weight: 500 !important;
  text-shadow: 0 0 8px rgba(218,165,32,.3);
}
.nav-item.dev-active:hover {
  background:#f5f5f5, rgba(184,134,11,.15)) !important;
}

/* 开发者 KPI 卡片行 */
.dev-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.dev-kpi-card {
  background: var(--surface);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.dev-kpi-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 60%);
  pointer-events: none;
}
.dev-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
}
.dev-kpi-icon { font-size: 1.5rem; margin-bottom: 6px; }
.dev-kpi-val { font-size: 1.8rem; font-weight:400; letter-spacing: -.02em; margin-bottom: 2px; }
.dev-kpi-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.dev-kpi-gold { --kpi-color: #B8860B; border-top: 3px solid var(--kpi-color); }
.dev-kpi-gold .dev-kpi-val { color: var(--kpi-color); }
.dev-kpi-green { --kpi-color: #2E8B57; border-top: 3px solid var(--kpi-color); }
.dev-kpi-green .dev-kpi-val { color: var(--kpi-color); }
.dev-kpi-blue { --kpi-color: #4169E1; border-top: 3px solid var(--kpi-color); }
.dev-kpi-blue .dev-kpi-val { color: var(--kpi-color); }
.dev-kpi-amber { --kpi-color: #CD853F; border-top: 3px solid var(--kpi-color); }
.dev-kpi-amber .dev-kpi-val { color: var(--kpi-color); }
.dev-kpi-red { --kpi-color: #CD5C5C; border-top: 3px solid var(--kpi-color); }
.dev-kpi-red .dev-kpi-val { color: var(--kpi-color); }
.dev-kpi-purple { --kpi-color: #7B68EE; border-top: 3px solid var(--kpi-color); }
.dev-kpi-purple .dev-kpi-val { color: var(--kpi-color); }

/* 开发者区块 */
.dev-section {
  background: var(--surface);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}
.dev-gold-border {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #DAA520, #B8860B, #8B6914) 1;
}
.dev-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.dev-section-hd h3 {
  font-size: .88rem;
  font-weight:400;
  white-space: nowrap;
}
.dev-badge {
  background:#f5f5f5;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight:400;
}

/* 在线用户标签 */
.dev-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 16px;
  background:#f5f5f5, rgba(60,179,113,.05));
  border: 1px solid rgba(46,139,87,.2);
  font-size: .76rem;
  font-weight:400;
  color: #2E8B57;
}
.dev-user-chip.offline {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}

/* 用户管理表格 */
.dev-user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.dev-user-table th {
  background:#f5f5f5, rgba(184,134,11,.06));
  color: #8B6914;
  font-weight:400;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid rgba(218,165,32,.2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.dev-user-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
}
.dev-user-table tr:hover { background: rgba(218,165,32,.04); }
.dev-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.dev-status-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.dev-status-dot.offline { background: #ccc; }
.dev-user-search-highlight { background: rgba(218,165,32,.15); }

/* 开发者信息网格 */
.dev-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: .78rem;
}
.dev-info-item {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg);
}
.dev-info-item .dii-label { color: var(--text-muted); font-size: .68rem; }
.dev-info-item .dii-val { font-weight:400; color: var(--text); margin-top: 2px; }

/* 开发者按钮 */
.dev-btn {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: .84rem;
  font-weight:400;
  letter-spacing: .02em;
  transition: all .2s;
  font-family: var(--font);
}
.dev-btn-gold-full {
  background:#f5f5f5;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 3px 12px rgba(184,134,11,.3);
}
.dev-btn-gold-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(184,134,11,.4);
}
.dev-btn-gold-full:active { transform: translateY(0); }
.dev-btn-sm {
  padding: 6px 14px;
  border: 1.5px solid;
  border-radius: 7px;
  cursor: pointer;
  font-size: .76rem;
  font-weight:400;
  transition: all .15s;
  font-family: var(--font);
  white-space: nowrap;
}
.dev-btn-gold {
  border-color: rgba(184,134,11,.4);
  background:#f5f5f5, rgba(184,134,11,.04));
  color: #8B6914;
}
.dev-btn-gold:hover {
  background:#f5f5f5, rgba(184,134,11,.1));
  border-color: #DAA520;
}
.dev-btn-danger {
  border-color: rgba(205,92,92,.4);
  background: rgba(205,92,92,.06);
  color: #CD5C5C;
}
.dev-btn-danger:hover {
  background: rgba(205,92,92,.14);
  border-color: #CD5C5C;
}

/* 开发者输入框 */
.dev-input-sm {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: .78rem;
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
.dev-input-sm:focus { border-color: #DAA520; }
.dev-textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: .8rem;
  font-family: var(--font);
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
.dev-textarea:focus { border-color: #DAA520; }

/* 反馈卡片 (开发者面板中) */
.dev-fb-card {
  border-bottom: 1px solid var(--border-light);
  padding: 14px 10px;
  transition: background .2s;
}
.dev-fb-card:hover { background: rgba(218,165,32,.03); }
.dev-fb-card.unread { background:#f5f5f5, transparent); }
.dev-fb-card .fb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}
.dev-fb-card .fb-cat {
  font-size: .76rem;
  font-weight:400;
}
.dev-fb-card .fb-user { font-size: .7rem; color: var(--text-muted); }
.dev-fb-card .fb-content {
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text);
}

/* 响应式 */
@media(max-width:1200px){
  .dev-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:768px){
  .dev-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ 手机适配 ═══ */
@media(max-width:768px){
  /* 布局：侧边栏隐藏，主内容占满 */
  body { flex-direction: column; }
  .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: 240px; height: 100vh;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
    transition: transform .3s;
  }
  .sidebar.mobile-show { transform: translateX(0); }
  .main { margin-left: 0 !important; width: 100% !important; min-height: 100vh; }
  .topbar { margin-left: 0 !important; width:100% !important; padding:0 10px !important; gap:6px; flex-wrap:nowrap; overflow:visible; }
  .topbar h2{font-size:.85rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-btn { display: flex !important; min-width: 44px; height: 40px; padding: 0 14px; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; background: #000; color: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(124,143,167,.4); }
  .menu-btn svg { stroke: #fff; }
  .menu-btn-label { display: inline !important; font-size: .82rem; font-weight:400; color: #fff; }
  /* 手机端隐藏日期时间，节省空间 */
  .topbar-info { display: none !important; }
  /* 手机端缩小按钮 */
  .topbar .btn-primary{background:#000;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:500;cursor:pointer}
  .topbar .btn-sm { padding: 5px 8px; font-size: .72rem; }
  /* 手机端隐藏反馈按钮，确保退出按钮可见 */
  .topbar #feedbackBtn { display: none !important; }
  /* 新建任务按钮：手机端保留但缩小 */
  .topbar #addTaskBtn { padding: 6px 10px !important; font-size: .72rem !important; white-space: nowrap; flex-shrink: 0; }
  /* 网格全部单列 */
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .dash-cols { grid-template-columns: 1fr !important; }
  .stats-layout { grid-template-columns: 1fr !important; }
  .month-layout { grid-template-columns: 1fr !important; }
  .method-grid { grid-template-columns: 1fr !important; }
  .fsm-grid { grid-template-columns: 1fr !important; }
  .mistake-stats-row { grid-template-columns: 1fr !important; }
  .dev-kpi-row { grid-template-columns: 1fr 1fr !important; }
  .week-grid { grid-template-columns: repeat(3,1fr) !important; }
  .sprint-board { grid-template-columns: 1fr !important; }
  .focus-layout { grid-template-columns: 1fr !important; }
  /* 间距缩小 */
  .tab-content { padding: 12px !important; }
  .page-header { flex-direction: column; gap: 8px; align-items: flex-start; }
  .dash-section-hd { flex-direction: column; gap: 6px; align-items: flex-start; }
  /* 手机遮罩层 */
  .mobile-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 199;
    backdrop-filter: blur(2px);
  }
  .mobile-overlay.show { display: block; }
  .focus-layout .surface-card[style*="230px"] { width: 180px !important; height: 180px !important; }
  /* 番茄钟圆环内文字缩小 */
  .focus-layout [style*="2.6rem"] { font-size: 2rem !important; }
  /* 考试时钟缩小 */
  #examClock { font-size: 3.5rem !important; }
}
@media(max-width:480px){
  :root { font-size: 13px; }
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .fsm-grid { grid-template-columns: 1fr !important; }
  .dev-kpi-row { grid-template-columns: 1fr !important; }
  .week-grid { grid-template-columns: repeat(2,1fr) !important; }
  .exam-preset-row { flex-wrap: wrap; }
}

/* ===== 手机版本布局 (body.mobile-mode) ===== */
/* 通过 ?mobile=1 触发，强制手机布局 */
/* 手机版：整体布局优化 */
body.mobile-mode {
  background: #F2EFEB;
}
body.mobile-mode .sidebar {
  position: fixed !important;
  top: 0; left: 0;
  width: 220px; height: 100vh;
  transform: translateX(-100%);
  z-index: 200;
  box-shadow: 2px 0 16px rgba(0,0,0,.18);
  transition: transform .3s;
}
body.mobile-mode .sidebar.mobile-show {
  transform: translateX(0);
}
body.mobile-mode .main {
  margin-left: 0 !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
body.mobile-mode .topbar {
  padding: 0 8px;
  height: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.mobile-mode .topbar::-webkit-scrollbar { display: none; }
body.mobile-mode .topbar #addTaskBtn {
  padding: 6px 10px !important;
  font-size: .72rem !important;
  white-space: nowrap;
  flex-shrink: 0;
}
body.mobile-mode .topbar #feedbackBtn { display: none !important; }
body.mobile-mode .topbar-info { display: none !important; }
body.mobile-mode .tab-content {
  padding: 12px !important;
}
body.mobile-mode .topbar h2 {
  font-size: 1.1rem;
}
body.mobile-mode .dashboard-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
/* 手机版Dashboard布局适配 */
body.mobile-mode .dash-hero {
  padding: 20px 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 16px;
}
body.mobile-mode .dash-hero-right {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.mobile-mode .dash-stats-row-new {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
body.mobile-mode .dash-quick-actions {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
body.mobile-mode .dash-progress-row {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body.mobile-mode .mini-pomo-v2 {
  padding: 14px 16px;
  gap: 12px;
  border-radius: 14px;
}
body.mobile-mode .focus-layout {
  grid-template-columns: 1fr !important;
}
body.mobile-mode .fsm-grid {
  grid-template-columns: 1fr 1fr !important;
}
body.mobile-mode .week-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
body.mobile-mode .sprint-board {
  grid-template-columns: 1fr !important;
}
/* 手机版：优化卡片和按钮 */
body.mobile-mode .surface-card {
  padding: 12px !important;
}
body.mobile-mode .btn, 
body.mobile-mode button {
  min-height: 40px;
  font-size: .9rem;
}
body.mobile-mode input, 
body.mobile-mode select, 
body.mobile-mode textarea {
  min-height: 38px;
  font-size: .9rem;
}
body.mobile-mode .dev-kpi-row {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
/* 手机版侧边栏滑出按钮 — 加大+强调色+文字标签 */
body.mobile-mode .menu-btn {
  display: flex !important;
  width: auto !important;
  min-width: 44px;
  height: 40px;
  padding: 0 14px !important;
  gap: 6px;
  background:#000;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(124,143,167,.4);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .12s, box-shadow .2s;
}
body.mobile-mode .menu-btn:active {
  transform: scale(.94);
}
body.mobile-mode .menu-btn svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  flex-shrink: 0;
}
body.mobile-mode .menu-btn-label {
  display: inline !important;
  font-size: .82rem;
  font-weight:400;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .02em;
}
/* 首次使用脉冲引导动画 */
@keyframes menuPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(124,143,167,.4), 0 0 0 0 rgba(124,143,167,.5); }
  50% { box-shadow: 0 2px 8px rgba(124,143,167,.4), 0 0 0 12px rgba(124,143,167,0); }
}
body.mobile-mode .menu-btn.pulse-hint {
  animation: menuPulse 1.4s ease-in-out infinite;
}
/* 引导气泡 */
.menu-hint {
  display: none;
  position: fixed;
  top: 56px;
  left: 12px;
  z-index: 95;
  background: var(--surface);
  border:1px solid #eee;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  font-size: .8rem;
  color: var(--text);
  white-space: nowrap;
  align-items: center;
  gap: 8px;
}
.menu-hint.show {
  display: flex;
  animation: hintFadeIn .3s ease;
}
.menu-hint-arrow {
  font-size: 1rem;
  color: #000;
  font-weight:400;
  animation: arrowBounce 1s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}
@keyframes hintFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 手机版遮罩层（必须放在mobile-mode块中，确保?mobile=1参数也生效） */
body.mobile-mode .mobile-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 199;
  backdrop-filter: blur(2px);
}
body.mobile-mode .mobile-overlay.show { display: block; }
/* 手机版侧边栏内部关闭按钮 */
.mobile-sb-close {
  display: none;
  background: none;
  border: none;
  color: #E4E0DC;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto;
}
.mobile-sb-close:hover {
  background: rgba(255,255,255,.1);
}
body.mobile-mode .mobile-sb-close {
  display: block;
}
/* 手机版底部导航栏显示 */
body.mobile-mode .mobile-bottom-nav {
  display: flex;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
body.mobile-mode .mbn-item {
  min-width: 44px;
  min-height: 48px;
  padding: 4px 6px;
  flex: 1;
}
body.mobile-mode .mbn-icon { font-size: 1.15rem; }
body.mobile-mode .mbn-label { font-size: .6rem; }
/* 手机版FAB按钮上移避免被底部导航遮挡 */
body.mobile-mode .fab-container {
  bottom: calc(72px + env(safe-area-inset-bottom));
}
/* 手机版正计时器上移 */
body.mobile-mode .stopwatch-widget {
  bottom: calc(72px + env(safe-area-inset-bottom));
  left: 8px;
  right: 8px;
}
/* 手机版弹窗底部留出导航空间 */
body.mobile-mode .modal-box {
  margin-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════
   开发者面板样式
   ═══════════════════════════════════════ */
.dev-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.dev-stat-card {
  background: var(--bg);
  border:1px solid #eee;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  transition: box-shadow .2s;
}
.dev-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.dev-stat-num {
  font-size: 1.8rem;
  font-weight:400;
  color: var(--text);
  line-height: 1.2;
}
.dev-stat-label {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.dev-user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.dev-user-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight:400;
  font-size: .72rem;
}
.dev-user-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dev-badge-gold {
  display: inline-block;
  background:#f5f5f5;
  color: #5C3D00;
  font-size: .65rem;
  font-weight:400;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 4px;
}
.dev-btn-sm {
  font-size: .7rem;
  padding: 4px 10px;
  border-radius: 5px;
  border:1px solid #eee;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.dev-btn-sm:hover { opacity: .8; }
.dev-btn-gold {
  background:#f5f5f5;
  color: #5C3D00;
  border-color: #DAA520;
  font-weight:400;
}
.dev-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.dev-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
  font-size: .85rem;
}
.dev-fb-card {
  background: var(--bg);
  border:1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}
.dev-fb-unread {
  border-left: 3px solid #DAA520;
}
.dev-fb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dev-fb-cat {
  font-size: .72rem;
  font-weight:400;
}
.dev-fb-user {
  font-size: .7rem;
  color: #000;
  font-weight:400;
  background: rgba(218,165,32,.1);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.dev-fb-time {
  font-size: .68rem;
  color: var(--text-muted);
  margin-left: auto;
}
.dev-fb-content {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.dev-fb-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════ 手机浮动功能按钮 ═══════════════ */
.fab-container{position:fixed;bottom:20px;right:16px;display:flex;flex-direction:column;gap:10px;z-index:1000;pointer-events:none}
.fab-btn{width:48px;height:48px;border-radius:50%;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s;position:relative}
.fab-btn:active{transform:scale(.9)}
.fab-icon{font-size:1.3rem;line-height:1}
.fab-label{font-size:.55rem;margin-top:-2px;font-weight:400;display:none}
.fab-shop{background:#f5f5f5;color:#fff}
.fab-chat{background:#f5f5f5;color:#fff}
/* 筷子先生 FAB — 大尺寸+真实头像+光环+在线红点 */
.fab-coach{
  width:68px;height:68px;
  background:#fff;
  padding:3px;
  border:3px solid #9b59b6;
  animation:fabPulse 2.2s ease-in-out infinite;
  position:relative;
}
.fab-coach .fab-avatar{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
  background:#f0e6f5;
}
.fab-online{
  position:absolute;
  right:4px;bottom:4px;
  width:14px;height:14px;
  background:#2ecc71;
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(46,204,113,.6);
  animation:onlinePulse 1.8s ease-out infinite;
}
@keyframes fabPulse{
  0%,100%{box-shadow:0 4px 14px rgba(155,89,182,.35),0 0 0 0 rgba(155,89,182,.45)}
  50%{box-shadow:0 6px 20px rgba(155,89,182,.55),0 0 0 10px rgba(155,89,182,0)}
}
@keyframes onlinePulse{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,.7)}
  70%{box-shadow:0 0 0 8px rgba(46,204,113,0)}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}
}
.fab-coach .fab-label{font-size:.6rem;display:block;position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);background:rgba(155,89,182,.95);color:#fff;padding:2px 8px;border-radius:8px;white-space:nowrap;font-weight:400}
/* 桌面端隐藏FAB（侧边栏已经可见） */
@media(min-width:769px){.fab-container{bottom:30px;right:24px;gap:18px}.fab-btn{width:56px;height:56px;font-size:1.1rem}.fab-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.3)}.fab-label{font-size:.65rem}.fab-coach{width:80px;height:80px;border-width:4px}.fab-coach .fab-label{font-size:.7rem;padding:3px 10px;bottom:-22px}}

/* ═══════════════ 积分系统 ═══════════════ */
/* 顶部积分显示 */
#pointsDisplay{display:flex;align-items:center;gap:6px;font-size:.8rem;margin-left:12px;padding:4px 10px;background:var(--panel-bg);border-radius:20px;cursor:pointer;transition:all .2s}
#pointsDisplay:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.pts-icon{font-size:1rem}
.pts-balance{font-weight:400;color:#000}
.pts-lv{font-size:.7rem;font-weight:400}
.pts-lv-bar-wrap{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:4px}
.pts-lv-bar{height:100%;border-radius:2px;transition:width .5s}
.pts-buff{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.68rem;font-weight:400;margin-top:5px;margin-right:5px;animation:buffPulse 2s ease-in-out infinite}
@keyframes buffPulse{0%,100%{opacity:.9}50%{opacity:1;box-shadow:0 0 8px rgba(255,255,255,.3)}}
.pts-streak{font-weight:400}

/* 积分弹出动画 */
.points-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;animation:ppBounce .5s ease-out;opacity:1}
.points-popup.boosted .pp-amount{text-shadow:0 0 12px rgba(255,193,7,.8)}
.pp-amount{font-size:2.2rem;font-weight:400;color:#ffc107;text-shadow:0 2px 4px rgba(0,0,0,.2)}
.pp-reason{font-size:.78rem;color:var(--text);background:var(--panel-bg);padding:2px 12px;border-radius:12px;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes ppBounce{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* 商品标签（侧边栏） */
.shop-badge-sidebar{display:inline-block;background:#f5f5f5;color:#fff;font-size:.65rem;font-weight:400;padding:1px 6px;border-radius:8px;margin-left:auto;animation:badgePulse 2s infinite}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ── 商店弹窗 ── */
.shop-container{width:90vw;max-width:780px;max-height:85vh;background:var(--panel-bg);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.shop-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.shop-header h2{margin:0;font-size:1.2rem}
.shop-header-right{display:flex;align-items:center;gap:12px}
.shop-balance{font-weight:400;color:#000;font-size:.9rem}
.shop-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-muted);padding:4px 8px;border-radius:6px;transition:all .2s}
.shop-close:hover{background:var(--hover-bg);color:var(--danger)}
.shop-tabs{display:flex;gap:4px;padding:12px 20px;overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--border)}
.shop-tab{padding:6px 14px;border-radius:20px;border:1px solid #eee;background:var(--bg);color:var(--text);font-size:.78rem;cursor:pointer;white-space:nowrap;transition:all .2s}
.shop-tab.active{background:#000;color:#fff;border-color:#000}
.shop-tab:hover:not(.active){background:var(--hover-bg)}
.shop-grid{flex:1;overflow-y:auto;padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shop-card{background:var(--bg);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;border:2px solid var(--border);transition:all .2s;position:relative}
.shop-card:hover{border-color:#000;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.shop-card.locked{opacity:.6}
.shop-card.owned{border-color:#4caf50;background:rgba(76,175,80,.03)}
.shop-card-icon{font-size:2rem;text-align:center;line-height:1}
.shop-card-body{flex:1}
.shop-card-name{font-weight:400;font-size:.9rem;margin-bottom:4px}
.shop-card-desc{font-size:.74rem;color:var(--text-muted);line-height:1.4}
.shop-dur{font-size:.68rem;background:#000;color:#fff;padding:1px 6px;border-radius:8px;font-weight:400}
.shop-badge{display:inline-block;font-size:.68rem;padding:1px 8px;border-radius:10px;margin-top:4px}
.shop-badge.owned{background:#4caf50;color:#fff}
.shop-badge.active{background:#2196f3;color:#fff}
.shop-badge.locked{background:var(--text-muted);color:#fff}
.shop-btn{width:100%;padding:8px;border-radius:8px;border:none;font-size:.8rem;font-weight:400;cursor:pointer;transition:all .2s}
.buy-btn{background:#f5f5f5;color:#fff}
.buy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,152,0,.3)}
.buy-btn.dev-buy{background:#f5f5f5;color:#fff;box-shadow:0 2px 8px rgba(155,89,182,.4)}
.buy-btn.dev-buy:hover{box-shadow:0 4px 14px rgba(155,89,182,.55)}
.shop-card.dev-card{border:1px solid rgba(155,89,182,.35);box-shadow:0 2px 10px rgba(155,89,182,.12)}
.owned-btn{background:#e8f5e9;color:#4caf50;cursor:default}
.locked-btn{background:var(--border);color:var(--text-muted);cursor:not-allowed}
.view-btn{background:var(--panel-bg);color:#000;border:1px solid transparent}
.shop-footer{display:flex;justify-content:center;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0}

/* ── 学习法弹窗 ── */
.method-container{width:90vw;max-width:660px;max-height:85vh;background:var(--panel-bg);border-radius:16px;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.method-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel-bg);z-index:1}
.method-header h2{margin:0;font-size:1.15rem}
.method-intro{padding:16px 20px;font-size:.88rem;color:var(--text-muted);line-height:1.6;background:var(--bg)}
.method-steps{padding:12px 20px}
.method-step{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.method-step:last-child{border-bottom:none}
.ms-num{width:28px;height:28px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:.82rem;flex-shrink:0}
.ms-title{font-weight:400;font-size:.9rem;margin-bottom:2px}
.ms-desc{font-size:.8rem;color:var(--text-muted);line-height:1.5}
.method-tip{padding:16px 20px;background:#fff8e1;font-size:.82rem;line-height:1.6;border-top:2px solid #ffc107}

/* ── AI教练 ── */
.coach-container{width:90vw;max-width:600px;max-height:80vh;background:var(--panel-bg);border-radius:16px;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.coach-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel-bg);z-index:1}
.coach-header h2{margin:0;font-size:1.15rem}
.coach-body{padding:16px 20px}
.coach-loading{text-align:center;padding:40px;color:var(--text-muted);font-size:.9rem}
.coach-advice{display:flex;gap:12px;padding:12px;margin-bottom:8px;background:var(--bg);border-radius:10px;align-items:flex-start}
.ca-icon{font-size:1.5rem;flex-shrink:0}
.ca-title{font-weight:400;font-size:.88rem;margin-bottom:4px}
.ca-detail{font-size:.78rem;color:var(--text-muted);line-height:1.5}

/* ── 聊天室 ── */
.chat-panel{position:fixed;right:-380px;top:0;width:360px;height:100vh;background:var(--panel-bg);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:9990;transition:right .3s ease;box-shadow:-4px 0 20px rgba(0,0,0,.1)}
.chat-panel.open{right:0}
.chat-header{padding:16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;position:relative}
.chat-header h3{margin:0;font-size:1.05rem}
.chat-subtitle{font-size:.7rem;color:var(--text-muted);margin-top:2px}
.chat-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-muted);padding:4px 8px;border-radius:6px}
.chat-close:hover{color:var(--danger);background:var(--hover-bg)}
.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.chat-empty{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:.82rem}
.chat-msg{padding:8px 12px;background:var(--bg);border-radius:12px;max-width:85%;align-self:flex-start}
.chat-msg.mine{align-self:flex-end;background:#000;color:#fff}
.chat-msg.mine .chat-msg-time{color:rgba(255,255,255,.7)}
.chat-msg.mine .chat-msg-user{color:rgba(255,255,255,.9)}
.chat-msg-user{font-size:.7rem;font-weight:400;margin-bottom:2px;color:var(--text-muted)}
.chat-msg-text{font-size:.84rem;line-height:1.4;word-break:break-word}
.chat-msg-time{font-size:.65rem;color:var(--text-muted);margin-top:2px;text-align:right}
.chat-input-area{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.chat-input{flex:1;padding:10px 14px;border-radius:20px;border:1px solid #eee;font-size:.84rem;background:var(--bg);color:var(--text);outline:none;transition:border .2s}
.chat-input:focus{border-color:#000}
.chat-send{padding:8px 16px;border-radius:20px;border:none;background:#000;color:#fff;font-size:.82rem;font-weight:400;cursor:pointer;transition:all .2s;white-space:nowrap}
.chat-send:hover{opacity:.9}
.chat-badge{display:none;background:#e74c3c;color:#fff;font-size:.62rem;font-weight:400;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center;line-height:16px;position:absolute;top:-4px;right:-8px}
.sidebar-chat-wrap{position:relative;display:inline-flex}

/* ── 聊天室按钮（侧边栏入口）── */
.chat-nav-item{align-items:center;position:relative}

/* ── 积分明细/背包 ── */
.hist-container{width:90vw;max-width:500px;max-height:80vh;background:var(--panel-bg);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.hist-summary{display:flex;gap:16px;padding:12px 20px;font-size:.78rem;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.hist-summary b{color:#000}
.hist-list{flex:1;overflow-y:auto;padding:8px 20px}
.hist-empty{text-align:center;padding:30px;color:var(--text-muted);font-size:.84rem}
.hist-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.hist-item:last-child{border-bottom:none}
.hi-pts{font-weight:400;min-width:50px}
.hist-earn .hi-pts{color:#4caf50}
.hist-spend .hi-pts{color:#e74c3c}
.hi-reason{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-time{font-size:.7rem;color:var(--text-muted);white-space:nowrap}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;padding:12px 20px;overflow-y:auto}

/* 贡献热力图 */
.heat-summary{display:flex;justify-content:space-around;padding:10px 20px;font-size:.76rem;color:var(--text-muted);border-bottom:1px solid var(--border)}
.heat-summary span{font-weight:400;color:var(--text)}
.heat-scroll{overflow-x:auto;padding:16px 20px}
.heat-month-row{display:grid;grid-auto-flow:column;grid-auto-columns:14px;gap:3px;margin-bottom:4px;font-size:.62rem;color:var(--text-muted)}
.heat-month-label{white-space:nowrap}
.heat-grid{display:grid;grid-auto-flow:column;grid-auto-columns:14px;gap:3px}
.heat-week{display:grid;grid-template-rows:repeat(7,14px);gap:3px}
.heat-cell{width:14px;height:14px;border-radius:3px;background:var(--border)}
.heat-cell.empty{background:transparent}
.heat-cell.lv0{background:var(--border)}
.heat-cell.lv1{background:#c6e48b}
.heat-cell.lv2{background:#7bc96f}
.heat-cell.lv3{background:#239a3b}
.heat-cell.lv4{background:#196127}
.heat-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;padding:0 20px 8px;font-size:.66rem;color:var(--text-muted)}
.heat-legend .heat-cell{width:12px;height:12px}
.heat-tip{padding:8px 20px 16px;font-size:.72rem;color:var(--text-muted);text-align:center}
.inv-card{text-align:center;padding:12px 8px;background:var(--bg);border-radius:10px;border:2px solid transparent;transition:all .2s}
.inv-card-active{border-color:#000;background:#f5f5f5,rgba(243,156,18,.08));box-shadow:0 2px 10px rgba(155,89,182,.15)}
.inv-icon{font-size:1.8rem;margin-bottom:4px}
.inv-name{font-size:.72rem;font-weight:400;margin-bottom:6px;color:var(--text)}
.inv-active-btn{background:#e8f5e9;color:#4caf50;cursor:default;width:100%}
.inv-switch-btn{background:#f5f5f5;color:#fff;width:100%}
.inv-switch-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(155,89,182,.35)}

/* ── 侧边栏商店/聊天入口按钮 ── */
.sidebar-shop-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#e65100;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-shop-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(255,152,0,.2)}
.sidebar-chat-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#1565c0;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-chat-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(21,101,192,.2)}
.sidebar-coach-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#6a1b9a;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-coach-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(106,27,154,.2)}

/* ── 背景音 ── */
.bgm-container{width:90vw;max-width:360px;background:var(--panel-bg);border-radius:16px;padding:20px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.bgm-container h3{margin:0 0 14px;font-size:1rem}
.bgm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bgm-btn{padding:14px;border-radius:10px;border:1px solid #eee;background:var(--bg);color:var(--text);font-size:.84rem;cursor:pointer;transition:all .2s}
.bgm-btn:hover{background:var(--hover-bg);border-color:#000}
.bgm-vol-row{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}

/* ── 响应式 ── */
@media(max-width:768px){
  /* 弹窗全屏化 */
  .shop-container,.method-container,.coach-container,.hist-container,.onboard-container{
    width:100vw !important;max-width:100vw !important;max-height:100vh !important;
    height:100vh;border-radius:0;
  }
  .shop-grid{grid-template-columns:1fr;padding:10px 12px}
  .shop-tabs{gap:2px;padding:6px 10px;flex-wrap:nowrap}
  .shop-tab{padding:5px 10px;font-size:.7rem;flex-shrink:0}
  .shop-footer{padding:8px 12px;gap:8px}
  .shop-footer .btn-sm{padding:10px 16px;font-size:.82rem;flex:1}
  /* 关闭按钮放大，确保可点击 */
  .shop-close,.chat-close{
    font-size:1.5rem !important;padding:8px 12px !important;
    min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  }
  .shop-header{padding:10px 14px}
  .shop-header h2{font-size:1rem}
  /* 全屏弹窗头部避开刘海/浏览器顶栏，关闭按钮不再被顶边挡住 */
  .shop-header,.method-header,.coach-header{padding-top:calc(12px + env(safe-area-inset-top))}
  /* 弹窗/费曼讲解区展开时隐藏 FAB，杜绝遮挡底部操作与误触 */
  body.modal-open .fab-container{display:none}
  body:has(#feynmanArea:not([style*="display: none"])) .fab-container{display:none}
  .shop-balance{font-size:.82rem}
  .chat-panel{width:100vw;right:-100vw}
  .chat-panel.open{right:0}
  .chat-header{padding:10px 14px}
  .chat-close{top:8px;right:8px}
  .points-popup{top:40%}
  .pp-amount{font-size:1.8rem}
  .method-container{overflow-y:auto}
  .method-header,.coach-header{position:sticky;top:0;z-index:2;padding:10px 14px}
  .coach-header h2{font-size:1rem}
  .coach-avatar{width:48px;height:48px}
  .inv-grid{grid-template-columns:repeat(3,1fr);padding:10px 12px}
  .hist-list{padding:6px 14px}
  .onboard-container{border-radius:0}
  .bgm-container{width:95vw;max-width:95vw}
}

/* ═══════════════ 筷子先生 AI导师 ═══════════════ */
.coach-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel-bg);z-index:1}
.coach-avatar-wrap{position:relative;width:56px;height:56px;flex-shrink:0}
.coach-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 18%;border:3px solid #9b59b6;box-shadow:0 4px 14px rgba(155,89,182,.35)}
.coach-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.8rem;border-radius:50%;background:var(--hover-bg);z-index:-1}
.coach-title-wrap{flex:1}
.coach-title-wrap h2{margin:0;font-size:1.15rem}
.coach-subtitle{font-size:.72rem;color:var(--text-muted)}
.coach-loading{padding:24px 20px;text-align:center;color:var(--text-muted);font-size:.88rem}
.coach-thinking{display:inline-block;width:14px;height:14px;border:2px solid #000;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin-right:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.coach-greeting{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--hover-bg);border-radius:12px;margin-bottom:14px}
.coach-greeting-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 18%;flex-shrink:0;border:2px solid #9b59b6}
.coach-greeting-text{font-size:.85rem;line-height:1.6;color:var(--text)}

/* ═══════════════ 学习法百科 ═══════════════ */
.lm-list{padding:12px 16px 20px}
.lm-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid #eee;border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.lm-card:hover{border-color:#000;transform:translateX(4px);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.lm-icon{font-size:1.6rem;flex-shrink:0;width:40px;text-align:center}
.lm-info{flex:1;min-width:0}
.lm-name{font-weight:400;font-size:.88rem;margin-bottom:2px}
.lm-desc{font-size:.76rem;color:var(--text-muted);line-height:1.4}
.lm-arrow{font-size:1.2rem;color:var(--text-muted);flex-shrink:0}

/* ═══════════════ 新手教程 ═══════════════ */
.onboard-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10002;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.onboard-container{width:520px;max-width:90vw;max-height:88vh;background:var(--panel-bg);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:slideUp .4s}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.onboard-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;background:#f5f5f5,var(--primary-dark,#000))}
.onboard-header h2{margin:0;color:#fff;font-size:1.2rem}
.onboard-skip{background:rgba(255,255,255,.2);color:#fff;border:none;padding:6px 14px;border-radius:14px;font-size:.76rem;cursor:pointer;transition:all .2s}
.onboard-skip:hover{background:rgba(255,255,255,.35)}
.onboard-steps{padding:16px 24px;overflow-y:auto;flex:1}
.onboard-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-light)}
.onboard-step:last-child{border-bottom:none}
.ob-num{width:24px;height:24px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:400;flex-shrink:0;margin-top:2px}
.ob-icon{font-size:1.4rem;flex-shrink:0;width:36px;text-align:center;margin-top:0}
.ob-content{flex:1}
.ob-title{font-weight:400;font-size:.88rem;margin-bottom:3px}
.ob-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5}
.onboard-start{margin:16px 24px 20px;padding:12px;background:#000;color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:400;cursor:pointer;transition:all .2s}
.onboard-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* 侧边栏学习法入口按钮 */
.sidebar-methods-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#6a1b9a;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-methods-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(106,27,154,.2)}
.sidebar-coach-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#2e7d32;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-coach-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(46,125,50,.2)}

/* 侧边栏成就/复盘按钮 */
.sidebar-ach-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#f57f17;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-ach-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(245,127,23,.2)}
.sidebar-review-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid #eee;background:#f5f5f5;color:#1565c0;font-size:.82rem;font-weight: 500;cursor:pointer;transition:all .2s;width:100%}
.sidebar-review-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(21,101,192,.2)}

/* ═══ 成就系统 CSS ═══ */
.ach-unlock-popup{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10002;animation:achSlideDown .4s cubic-bezier(.34,1.56,.64,1)}
.ach-unlock-popup.fade-out{animation:achFadeOut .4s ease forwards}
@keyframes achSlideDown{from{transform:translate(-50%,-120px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes achFadeOut{to{transform:translate(-50%,-120px);opacity:0}}
.ach-unlock-card{display:flex;align-items:center;gap:12px;background:var(--panel-bg,#fff);border-radius:16px;padding:14px 20px;box-shadow:0 8px 32px rgba(0,0,0,.25);border:2px solid #ffd700;position:relative;overflow:hidden}
.ach-unlock-glow{position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,215,0,.15),transparent 60%);pointer-events:none}
.ach-unlock-icon{font-size:2.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.ach-unlock-title{font-size:.72rem;color:#f57f17;font-weight:400;letter-spacing:1px}
.ach-unlock-name{font-size:1rem;font-weight:400;color:var(--text)}
.ach-unlock-desc{font-size:.76rem;color:var(--text-muted);margin-top:2px}
.ach-unlock-pts{font-size:.78rem;color:#f57f17;font-weight:400;margin-top:2px}
.ach-progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:8px}
.ach-progress-fill{height:100%;background:#f5f5f5;border-radius:4px;transition:width .5s}
.ach-cat-title{font-size:.82rem;font-weight:400;color:var(--text-muted);padding:12px 20px 4px;letter-spacing:.5px}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px 20px 8px}
.ach-badge{border-radius:12px;padding:12px 8px;text-align:center;transition:all .2s;border:2px solid var(--border)}
.ach-badge.unlocked{background:#f5f5f5;border-color:#ffd700}
.ach-badge.locked{opacity:.5;filter:grayscale(.6)}
.ach-badge-icon{font-size:1.8rem;margin-bottom:4px}
.ach-badge-name{font-size:.76rem;font-weight:400;color:var(--text)}
.ach-badge-desc{font-size:.66rem;color:var(--text-muted);margin-top:2px;line-height:1.3}
.ach-badge-pts{font-size:.7rem;color:#f57f17;font-weight:400;margin-top:4px}
.ach-badge-pts.locked{color:var(--text-muted)}

/* ═══ 每日复盘 CSS ═══ */
.review-saved-badge{background:var(--success,#4caf50);color:#fff;padding:6px 14px;border-radius:20px;font-size:.74rem;font-weight:400;text-align:center;margin-bottom:12px}
.review-section{margin-bottom:16px}
.review-label{font-size:.82rem;font-weight:400;color:var(--text);margin-bottom:8px}
.review-mood-grid{display:flex;gap:8px;flex-wrap:wrap}
.review-mood-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:10px;border:2px solid var(--border);cursor:pointer;transition:all .2s;min-width:52px}
.review-mood-item:hover{border-color:#000}
.review-mood-item.selected{border-color:#000;background:var(--primary-light,#e3f2fd);transform:scale(1.05)}
.review-mood-emoji{font-size:1.6rem}
.review-mood-label{font-size:.68rem;color:var(--text-muted)}
.review-slider{-webkit-appearance:none;appearance:none;flex:1;height:6px;background:var(--border);border-radius:3px;outline:none}
.review-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#000;cursor:pointer}
.review-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#000;cursor:pointer;border:none}
.review-goal-pct{font-size:.88rem;font-weight:400;color:#000;min-width:40px;text-align:right}
.review-textarea{width:100%;min-height:72px;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:.84rem;font-family:inherit;background:var(--bg);color:var(--text);resize:vertical;outline:none;transition:border-color .2s}
.review-textarea:focus{border-color:#000}
.review-save-btn{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:.92rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px}
.review-save-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.2)}

/* ═══ 天气组件 CSS ═══ */
.weather-widget{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.weather-emoji{font-size:2rem}
.weather-info{flex:1}
.weather-name{font-size:.92rem;font-weight:400}
.weather-suggestion{font-size:.76rem;color:var(--text-muted);margin-top:2px}
.weather-stats{font-size:.68rem;color:var(--text-muted);margin-top:4px;opacity:.8}

/* ═══ 金句组件 CSS ═══ */
.quote-widget{padding:12px 16px;border-left:3px solid #000;background:var(--surface);border-radius:0 10px 10px 0;margin-bottom:12px;position:relative}
.quote-text-wrap{display:flex;align-items:flex-start;gap:8px}
.quote-text{font-size:.82rem;color:var(--text);line-height:1.6;font-style:italic;flex:1}
.quote-refresh-btn{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid #eee;background:var(--bg);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:.5}
.quote-refresh-btn:hover{opacity:1;border-color:#000;background:var(--primary-light);transform:rotate(90deg)}
.quote-author{font-size:.72rem;color:var(--text-muted);margin-top:4px;text-align:right}
.quote-counter{font-size:.65rem;color:var(--text-muted);margin-left:6px}
.quote-refresh{animation:quoteFlash .4s ease}
@keyframes quoteFlash{0%{opacity:.3;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}}

/* ═══ 复盘热力条 CSS（驾驶舱用） ═══ */
.review-streak-bar{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface);border-radius:10px;margin-bottom:12px;font-size:.78rem}
.review-streak-bar .flame{font-size:1.1rem}
.review-streak-bar .streak-num{font-weight:400;color:#000}
.review-streak-bar .streak-action{margin-left:auto;color:#000;font-weight:400;cursor:pointer;text-decoration:underline}

/* ═══════════════════════════════════════════════════════════
   四象限矩阵 (Eisenhower Matrix)
   ═══════════════════════════════════════════════════════════ */
.quadrant-board{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:500px}
.quadrant-cell{border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;border:2px solid;min-height:220px;transition:border-color .3s}
.quadrant-cell.q1{border-color:rgba(196,139,122,.3);background:rgba(196,139,122,.05)}
.quadrant-cell.q2{border-color:rgba(141,168,147,.3);background:rgba(141,168,147,.05)}
.quadrant-cell.q3{border-color:rgba(196,166,125,.3);background:rgba(196,166,125,.05)}
.quadrant-cell.q4{border-color:rgba(141,142,136,.2);background:rgba(141,142,136,.03);opacity:.85}
.q-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.q-icon{font-size:1.2rem}
.q-title{font-weight:400;font-size:.84rem}
.q-subtitle{font-size:.68rem;color:var(--text-muted);margin-left:4px}
.q-count{margin-left:auto;background:#000;color:#fff;font-size:.68rem;padding:2px 8px;border-radius:10px;min-width:20px;text-align:center}
.q-body{flex:1;overflow-y:auto;max-height:200px}
.q-task{background:var(--panel-bg);border-radius:8px;padding:8px 10px;margin-bottom:6px;border:1px solid #eee;font-size:.78rem;display:flex;align-items:flex-start;gap:6px;transition:all .2s}
.q-task:hover{box-shadow:var(--shadow)}
.q-task-text{flex:1;word-break:break-word;line-height:1.4}
.q-task-actions{display:flex;gap:3px;flex-shrink:0}
.q-task-move{font-size:.68rem;padding:2px 6px;border-radius:4px;border:1px solid #eee;background:var(--hover-bg);cursor:pointer;white-space:nowrap}
.q-task-move:hover{background:var(--primary-light)}
.q-task-del{font-size:.68rem;padding:2px 6px;border-radius:4px;border:1px solid var(--danger);color:var(--danger);cursor:pointer;background:transparent}
.q-task-del:hover{background:var(--danger);color:#fff}
.q-task.done .q-task-text{text-decoration:line-through;opacity:.5}
.q-add-btn{margin-top:auto;padding:6px;border:1px dashed var(--border);border-radius:8px;background:transparent;color:var(--text-muted);font-size:.74rem;cursor:pointer;transition:all .2s}
.q-add-btn:hover{border-color:#000;color:#000;background:var(--primary-light)}

/* ═══════════════════════════════════════════════════════════
   沉浸心流模式 (Immersive Focus Mode)
   ═══════════════════════════════════════════════════════════ */
.immersive-overlay{position:fixed;inset:0;z-index:100000;background:#0a0a1a;overflow:hidden}
.immersive-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.immersive-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;padding:20px}
.immersive-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.immersive-topic-display{color:rgba(255,255,255,.8);font-size:1.1rem;font-weight:400;text-align:center;flex:1}
.immersive-exit{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);padding:6px 14px;border-radius:20px;cursor:pointer;font-size:.78rem;transition:all .2s}
.immersive-exit:hover{background:rgba(255,80,80,.3);border-color:rgba(255,80,80,.5);color:#fff}
.immersive-timer-area{text-align:center;margin-bottom:20px}
.immersive-time{font-size:4rem;font-weight:200;color:rgba(255,255,255,.95);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.immersive-phase{color:rgba(124,143,167,.8);font-size:.9rem;margin-top:4px}
.immersive-setup{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px;max-width:400px;width:100%}
.immersive-topic-input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;font-size:.92rem;text-align:center;outline:none}
.immersive-topic-input:focus{border-color:rgba(124,143,167,.6);background:rgba(255,255,255,.08)}
.immersive-topic-input::placeholder{color:rgba(255,255,255,.3)}
.immersive-duration-opts{display:flex;gap:8px}
.imm-dur-btn{padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);font-size:.8rem;cursor:pointer;transition:all .2s}
.imm-dur-btn:hover{border-color:rgba(124,143,167,.4);color:rgba(255,255,255,.8)}
.imm-dur-btn.active{border-color:rgba(124,143,167,.8);background:rgba(124,143,167,.15);color:#fff}
.immersive-start-btn{padding:12px 40px;border-radius:30px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:.92rem;font-weight:400;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px rgba(124,143,167,.3)}
.immersive-start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(124,143,167,.5)}
.immersive-running{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:10px}
.immersive-ring-wrap{position:relative;width:200px;height:200px}
.immersive-keywords{width:100%;max-width:400px}
.imm-keyword-input{width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-size:.82rem;outline:none;text-align:center}
.imm-keyword-input::placeholder{color:rgba(255,255,255,.25)}
.imm-keyword-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:center}
.imm-keyword-tag{padding:4px 12px;border-radius:20px;background:rgba(124,143,167,.2);border:1px solid rgba(124,143,167,.3);color:rgba(255,255,255,.8);font-size:.74rem;display:flex;align-items:center;gap:4px}
.imm-keyword-tag .kw-del{cursor:pointer;opacity:.5}
.imm-keyword-tag .kw-del:hover{opacity:1}
.immersive-hint{color:rgba(255,255,255,.3);font-size:.7rem;margin-top:8px}
.immersive-result{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px;max-width:400px;width:100%}
.immersive-notes-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:10px}
.immersive-notes-input::placeholder{color:rgba(255,255,255,.25)}

/* ═══════════════════════════════════════════════════════════
   正计时器 (Stopwatch Widget)
   ═══════════════════════════════════════════════════════════ */
.stopwatch-widget{position:fixed;bottom:20px;left:20px;z-index:9000;background:var(--panel-bg);border-radius:14px;padding:12px 16px;box-shadow:0 4px 20px rgba(0,0,0,.15);border:1px solid #eee;display:flex;align-items:center;gap:10px}
.sw-time{font-size:1.4rem;font-weight:400;font-variant-numeric:tabular-nums;color:var(--text);min-width:90px}
.sw-controls{display:flex;gap:4px}
.sw-btn{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .2s}
.sw-start{background:var(--success);color:#fff}
.sw-start.running{background:var(--warning)}
.sw-reset{background:var(--hover-bg);color:var(--text-muted);border:1px solid #eee}
.sw-close{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#fff;border:none;font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ═══════════════════════════════════════════════════════════
   移动端底部导航 (Mobile Bottom Nav)
   ═══════════════════════════════════════════════════════════ */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--panel-bg);border-top:1px solid var(--border);padding:6px 0 calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center;box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.mbn-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;border:none;background:transparent;cursor:pointer;color:var(--text-muted);transition:color .2s}
.mbn-item.active{color:#000}
.mbn-icon{font-size:1.2rem}
.mbn-label{font-size:.62rem}

/* ═══════════════════════════════════════════════════════════
   电子盆栽 (Plant Garden)
   ═══════════════════════════════════════════════════════════ */
.plant-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.plant-container{background:var(--panel-bg);border-radius:20px;padding:28px;max-width:440px;width:90vw;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.plant-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:none;background:var(--hover-bg);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.plant-display{text-align:center;padding:20px 0}
.plant-icon{font-size:5rem;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));animation:plantSway 3s ease-in-out infinite}
@keyframes plantSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.plant-name{font-size:1.3rem;font-weight:400;margin-top:12px}
.plant-level-tag{display:inline-block;padding:3px 12px;border-radius:20px;background:var(--primary-light);color:var(--primary-dark);font-size:.72rem;font-weight:400;margin-top:6px}
.plant-xp-bar-wrap{height:10px;background:var(--border);border-radius:5px;overflow:hidden;margin:16px 0 6px}
.plant-xp-bar{height:100%;border-radius:5px;background:#f5f5f5,#000);transition:width .5s}
.plant-xp-text{font-size:.74rem;color:var(--text-muted);text-align:center}
.plant-history{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.plant-history-title{font-size:.82rem;font-weight:400;margin-bottom:8px}
.plant-history-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.74rem;color:var(--text-muted)}
.plant-history-item .ph-icon{font-size:1rem}
.plant-skill-tree{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.plant-skill-title{font-size:.82rem;font-weight:400;margin-bottom:10px}
.plant-skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plant-skill-card{background:var(--hover-bg);border-radius:10px;padding:12px;text-align:center}
.plant-skill-icon{font-size:1.6rem}
.plant-skill-name{font-size:.74rem;font-weight:400;margin-top:4px}
.plant-skill-level{font-size:.68rem;color:var(--text-muted)}
.plant-skill-bar{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.plant-skill-bar-fill{height:100%;border-radius:2px}

/* ═══ 新侧边栏按钮样式 ═══ */
.sidebar-flow-btn{background:#f5f5f5,rgba(90,112,137,.1));border:1px solid rgba(124,143,167,.25);color:var(--primary-dark);font-size:.76rem;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .2s;text-align:left}
.sidebar-flow-btn:hover{background:#f5f5f5,rgba(90,112,137,.15));transform:translateY(-1px)}
.sidebar-plant-btn{background:#f5f5f5,rgba(120,150,128,.1));border:1px solid rgba(141,168,147,.25);color:var(--success);font-size:.76rem;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .2s;text-align:left}
.sidebar-plant-btn:hover{background:#f5f5f5,rgba(120,150,128,.15));transform:translateY(-1px)}
.sidebar-stopwatch-btn{background:var(--hover-bg);border:1px solid #eee;color:var(--text-muted);font-size:.76rem;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .2s;text-align:left}
.sidebar-stopwatch-btn:hover{background:var(--primary-light);color:#000}
.sidebar-lb-btn{background:#f5f5f5;border:1px solid rgba(243,156,18,.2);color:#e67e22;font-size:.76rem;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .2s;text-align:left;font-weight: 500}
.sidebar-lb-btn:hover{background:#f5f5f5;color:#d35400;transform:translateY(-1px)}
.sidebar-logout-btn{background:rgba(231,76,60,.06);border:1px solid rgba(231,76,60,.2);color:#e74c3c;font-size:.76rem;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .2s;text-align:left;font-weight: 500}
.sidebar-logout-btn:hover{background:rgba(231,76,60,.12);transform:translateY(-1px)}

/* ═══ Leaderboard ═══ */
.lb-empty{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:1rem}
.lb-count-bar{text-align:right;margin-bottom:8px;font-size:.75rem;color:var(--text-secondary)}
.lb-loading{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:.95rem}
.lb-spinner{display:inline-block;animation:spin 1s linear infinite;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.lb-cards{display:flex;flex-direction:column;gap:8px}
.lb-card{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--surface);border-radius:14px;border:1px solid #eee;transition:all .25s}
.lb-card:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.lb-card-top{border-color:transparent}
.lb-card:nth-child(1){background:#f5f5f5;border-color:rgba(245,158,11,.3)}
.lb-card:nth-child(2){background:#f5f5f5;border-color:rgba(148,163,184,.3)}
.lb-card:nth-child(3){background:#f5f5f5;border-color:rgba(180,115,60,.3)}
.lb-card-me{background:#f5f5f5!important;border-color:rgba(59,130,246,.3)!important}
.lb-card-dev{background:#f5f5f5!important;border-color:rgba(139,92,246,.3)!important}
.lb-rank{width:44px;text-align:center;flex-shrink:0}
.lb-medal{font-size:1.8rem;line-height:1}
.lb-rank-num{font-size:1.1rem;font-weight:400;color:var(--text-muted)}
.lb-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:1.1rem;color:#fff;flex-shrink:0}
.lb-info{flex:1;min-width:0}
.lb-name{font-weight:400;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-me-tag{font-size:.65rem;background:#3b82f6;color:#fff;padding:1px 6px;border-radius:6px;margin-left:4px}
.lb-dev-tag{font-size:.6rem;background:#f5f5f5;color:#fff;padding:1px 6px;border-radius:6px;margin-left:4px}
.lb-level{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.lb-points{text-align:right;flex-shrink:0}
.lb-pts-val{font-size:1.3rem;font-weight:400;color:var(--text)}
.lb-pts-unit{font-size:.75rem;color:var(--text-muted)}
.lb-pts-dev{font-size:1.2rem;font-weight:400;background:#000;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── 暗黑模式排行榜 ── */
[data-theme="dark"] .sidebar-lb-btn{background:#f5f5f5;border-color:rgba(243,156,18,.15);color:#f0a040}
[data-theme="dark"] .sidebar-lb-btn:hover{background:#f5f5f5;color:#f5b860}
[data-theme="dark"] .sidebar-logout-btn{background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.15);color:#ff6b6b}
[data-theme="dark"] .sidebar-logout-btn:hover{background:rgba(231,76,60,.18)}
[data-theme="dark"] .lb-card{background:#1e2433;border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .lb-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.2)}
[data-theme="dark"] .lb-card:nth-child(1){background:#f5f5f5;border-color:rgba(245,158,11,.15)}
[data-theme="dark"] .lb-card:nth-child(2){background:#f5f5f5;border-color:rgba(148,163,184,.15)}
[data-theme="dark"] .lb-card:nth-child(3){background:#f5f5f5;border-color:rgba(180,115,60,.15)}
[data-theme="dark"] .lb-card-me{background:#f5f5f5!important;border-color:rgba(59,130,246,.2)!important}
[data-theme="dark"] .lb-card-dev{background:#f5f5f5!important;border-color:rgba(139,92,246,.2)!important}
[data-theme="dark"] .lb-pts-val{color:#d0d8e8}
[data-theme="dark"] .lb-name{color:#d0d8e8}

/* ── 移动端排行榜 ── */
@media(max-width:768px){
  .lb-card{padding:12px 14px;gap:10px}
  .lb-avatar{width:38px;height:38px;font-size:.95rem}
  .lb-medal{font-size:1.5rem}
  .lb-pts-val{font-size:1.1rem}
  .lb-rank{width:36px}
}
@media(max-width:480px){
  .lb-card{padding:10px 12px;gap:8px;border-radius:12px}
  .lb-avatar{width:34px;height:34px;font-size:.85rem}
  .lb-name{font-size:.82rem}
  .lb-level{font-size:.68rem}
  .lb-medal{font-size:1.3rem}
  .lb-rank{width:30px}
  .lb-pts-val{font-size:1rem}
  .lb-pts-dev{font-size:1rem}
  .lb-me-tag,.lb-dev-tag{font-size:.55rem;padding:0 4px}
  .lb-count-bar{font-size:.7rem;text-align:right}
}
@media(max-width:375px){
  .lb-card{padding:8px 10px;gap:6px;border-radius:10px}
  .lb-avatar{width:30px;height:30px;font-size:.75rem}
  .lb-name{font-size:.76rem}
  .lb-level{font-size:.62rem}
  .lb-medal{font-size:1.1rem}
  .lb-rank{width:26px}
  .lb-rank-num{font-size:.85rem}
  .lb-pts-val{font-size:.9rem}
  .lb-pts-dev{font-size:.9rem}
  .lb-me-tag,.lb-dev-tag{font-size:.5rem;padding:0 3px;margin-left:2px}
  .lb-count-bar{font-size:.65rem;margin-bottom:6px}
  .lb-loading{font-size:.82rem;padding:40px 16px}
  .lb-empty{font-size:.85rem;padding:40px 16px}
}

/* ═══════════════ 费曼学习法 ═══════════════ */
.feynman-steps{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.feynman-step{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;border-radius:12px;background:var(--panel-bg);transition:all .3s;opacity:.45}
.feynman-step.active{opacity:1;background:#f5f5f5;box-shadow:0 2px 8px rgba(79,172,254,.2)}
.fs-num{width:28px;height:28px;border-radius:50%;background:var(--hover-bg);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:400;color:var(--text-muted)}
.feynman-step.active .fs-num{background:#f5f5f5;color:#fff}
.fs-label{font-size:.72rem;font-weight:400;color:var(--text-muted)}
.feynman-step.active .fs-label{color:#4facfe}
.feynman-step-arrow{font-size:1.1rem;color:var(--text-muted);opacity:.3}
.feynman-input-card{padding:20px}
.feynman-input-row{display:flex;gap:10px;align-items:center}
.feynman-input-icon{font-size:1.8rem;flex-shrink:0}
.feynman-concept-input{flex:1;border:none;outline:none;font-size:1rem;padding:10px 0;background:transparent;border-bottom:2px solid var(--border);transition:border-color .3s}
.feynman-concept-input:focus{border-bottom-color:#4facfe}
.feynman-start-btn{padding:10px 22px;font-size:.9rem;white-space:nowrap}
.feynman-explain-area{width:100%;border:2px solid var(--border);border-radius:12px;padding:14px;font-size:.92rem;resize:vertical;min-height:120px;outline:none;transition:border-color .3s;background:var(--panel-bg);color:var(--text);font-family:inherit;line-height:1.6}
.feynman-explain-area:focus{border-color:#4facfe}
.feynman-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:16px}
.feynman-stat-card{text-align:center;padding:16px 10px;border-radius:12px;background:var(--panel-bg);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.feynman-stat-icon{font-size:1.3rem;margin-bottom:4px}
.feynman-stat-num{font-size:1.3rem;font-weight:400;color:#000}
.feynman-stat-label{font-size:.68rem;color:var(--text-muted);margin-top:2px}

/* ═══════════════════════════════════════════════════════════
   移动端全面优化 (Mobile Responsive)
   ═══════════════════════════════════════════════════════════ */

/* ── 全局触摸优化 ── */
*{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input,textarea,select{ touch-action: manipulation; }
/* 防止iOS输入框缩放 */
input[type="text"],input[type="search"],textarea{ -webkit-text-size-adjust: 100%; }

/* ── 768px以下：平板/大屏手机 ── */
@media(max-width:768px){
  /* 四象限矩阵 */
  .quadrant-board{grid-template-columns:1fr;grid-template-rows:auto;min-height:auto;gap:10px}
  .quadrant-cell{min-height:auto;padding:12px}
  .q-header{flex-wrap:wrap;gap:4px;margin-bottom:8px;padding-bottom:6px}
  .q-subtitle{display:none} /* 手机端隐藏副标题节省空间 */
  .q-body{max-height:180px}
  .q-task{padding:10px 8px;font-size:.8rem;flex-wrap:wrap}
  .q-task-text{flex:1 1 100%;margin-bottom:6px;line-height:1.5}
  .q-task-actions{gap:5px;width:100%;justify-content:flex-end}
  .q-task-move,.q-task-del{min-width:36px;min-height:36px;padding:4px 10px;display:flex;align-items:center;justify-content:center;font-size:.74rem;border-radius:8px}
  .q-add-btn{padding:12px;min-height:44px;font-size:.8rem}

  /* 费曼学习法 */
  #feynmanConcept{min-width:100% !important;flex:1 1 100% !important}
  #feynmanExplain{rows:5;font-size:.85rem}
  .feynman-steps{gap:4px}
  .feynman-step{padding:6px 8px}
  .fs-num{width:22px;height:22px;font-size:.68rem}
  .fs-label{font-size:.62rem}
  .feynman-step-arrow{font-size:.8rem}
  .feynman-input-row{flex-wrap:wrap}
  .feynman-concept-input{font-size:.88rem;min-width:100%}
  .feynman-start-btn{width:100%;text-align:center}
  .feynman-explain-area{font-size:.85rem;min-height:100px}
  .feynman-stats-row{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .feynman-stat-card{padding:10px 6px}
  .feynman-stat-num{font-size:1.1rem}

  /* 沉浸心流 */
  .immersive-content{padding:14px}
  .immersive-header{margin-bottom:16px}
  .immersive-topic-display{font-size:.92rem}
  .immersive-exit{padding:8px 14px;font-size:.76rem;min-height:36px}
  .immersive-time{font-size:2.8rem}
  .immersive-phase{font-size:.82rem}
  .immersive-setup{gap:12px;margin-top:16px}
  .immersive-topic-input{padding:12px 14px;font-size:.88rem}
  .immersive-duration-opts{flex-wrap:wrap;justify-content:center;gap:6px}
  .imm-dur-btn{padding:8px 14px;font-size:.76rem;min-height:38px}
  .immersive-start-btn{padding:12px 32px;font-size:.88rem;min-height:44px}
  .immersive-ring-wrap{width:160px;height:160px}
  .immersive-ring-wrap svg{width:160px !important;height:160px !important}
  .immersive-keyword-input{padding:10px 12px;font-size:.8rem}
  .imm-keyword-tag{font-size:.72rem;padding:4px 10px}
  .immersive-hint{font-size:.68rem;line-height:1.5;padding:0 12px}
  .immersive-result{margin-top:14px;gap:6px}
  .immersive-result h2{font-size:1.2rem}
  .immersive-notes-input{font-size:.82rem}

  /* 正计时器 */
  .stopwatch-widget{bottom:calc(72px + env(safe-area-inset-bottom));left:8px;right:8px;padding:8px 12px;justify-content:space-between}
  .sw-time{font-size:1.15rem;min-width:80px}
  .sw-btn{width:38px;height:38px;font-size:.85rem}
  .sw-close{width:22px;height:22px;top:-6px;right:-6px}

  /* 电子盆栽弹窗全屏化 */
  .plant-container{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;padding:20px 16px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .plant-icon{font-size:4rem}
  .plant-name{font-size:1.15rem}
  .plant-close{width:40px;height:40px;top:calc(12px + env(safe-area-inset-top))}
  .plant-skill-grid{grid-template-columns:1fr 1fr;gap:8px}
  .plant-skill-card{padding:10px 8px}
  .plant-skill-icon{font-size:1.4rem}

/* ── 首页广告区（电脑端：单层轮播，卡片风；手机端见下方） ── */

/* 手机端（含横屏）：隐藏桌面轮播区，仅显示 slot9 横幅 */
body.mobile-mode .hero-ad-carousel{display:none}
body.mobile-mode .hero-ad-mobile{display:block;margin:24px 0}
body.mobile-mode .hero-ad-mobile .hero-ad{aspect-ratio:3 / 1;position:relative}

  /* 底部导航 */
  .mobile-bottom-nav{display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mbn-item{min-width:44px;min-height:48px;padding:4px 6px;flex:1}
  .mbn-icon{font-size:1.15rem}
  .mbn-label{font-size:.6rem}

  /* 手机端：隐藏左侧边栏与其菜单开关，导航统一收到底部（电脑 PC 端不受影响） */
  .sidebar{display:none !important}
  .menu-btn{display:none !important}

  /* 主内容底部留出导航空间 */
  .main{padding-bottom:calc(72px + env(safe-area-inset-bottom));padding-right:8px}

  /* FAB按钮上移避免遮挡 */
  .fab-container{bottom:calc(72px + env(safe-area-inset-bottom))}

  /* 移动端所有按钮/输入框右侧安全区，避免被FAB遮挡 */
  .surface-card,.page-header,.form-input,.form-area,.btn-primary,.btn-sm,.btn-outline,
  .feynman-input-card,.feynman-explain-area,.fh-item,
  .quadrant-cell,.modal-box,.settings-card{padding-right:max(12px, env(safe-area-inset-right))}
}

/* ★ 真手机（含横屏）：靠 JS 加的 mobile-mode 类统一手机版，不依赖屏幕宽度。
   横屏手机宽度>768 不命中 @media(max-width:768px)，必须靠 body.mobile-mode 类兜底。 */
body.mobile-mode .sidebar{display:none !important}
body.mobile-mode .menu-btn{display:none !important}
body.mobile-mode .mobile-bottom-nav{display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
body.mobile-mode .main{padding-bottom:calc(72px + env(safe-area-inset-bottom));padding-right:8px}

/* ── 电脑端广告轮播区（单层：第1帧=slot1大图 ↔ 第2帧=slot2+3并排，从右往左滑动） ── */
.hero-ad-carousel{position:relative;width:100%;aspect-ratio:840 / 280;border-radius:14px;overflow:hidden;background:#fafafa;margin:24px 0}
.heroTrack{display:flex;width:100%;height:100%;will-change:transform;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.heroSlide{flex:0 0 100%;width:100%;height:100%;position:relative;display:flex;overflow:hidden}
/* Frame A: slot1 单张大图卡片（占满整帧） */
.heroFrameA{align-items:center;justify-content:center;padding:0}
.heroFrameA .ad-card-wrap{width:100%;height:100%;position:relative;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 6px 20px -8px rgba(0,0,0,.25)}
/* Frame B: slot2+3 并排两张卡片 */
.heroFrameB{gap:12px;padding:0}
.heroFrameB .ad-card-wrap{flex:1;min-width:0;height:100%;position:relative;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 4px 14px -6px rgba(0,0,0,.22)}

/* ── 轮播帧内卡片视觉（纯图片漂浮，无浮字/无角标） ── */
.ad-card{display:block;position:absolute;inset:0}
.ad-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ad-card-wrap{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}
.ad-card-wrap:hover{transform:translateY(-4px);box-shadow:0 14px 34px -10px rgba(0,0,0,.4)}
.ad-card-wrap:hover img{transform:scale(1.04)}

/* 轮播指示点 */
.heroDots .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .25s}
.heroDots .dot.on{background:#fff;transform:scale(1.4)}

/* 手机端：隐藏电脑端轮播区，保持 slot9 原样 */
body.mobile-mode .hero-ad-carousel{display:none}

/* 手机端专属广告位：桌面默认隐藏，仅 true 手机（body.mobile-mode）显示一条横幅 */
.hero-ad-mobile{display:none}

/* ── 480px以下：小屏手机 ── */
@media(max-width:480px){
  /* 四象限进一步紧凑 */
  .quadrant-cell{padding:10px 8px}
  .q-body{max-height:160px}
  .q-task-move,.q-task-del{min-width:34px;min-height:34px;font-size:.72rem;padding:4px 8px}

  /* 沉浸心流进一步缩小 */
  .immersive-content{padding:10px}
  .immersive-time{font-size:2.2rem}
  .immersive-ring-wrap{width:140px;height:140px}
  .immersive-ring-wrap svg{width:140px !important;height:140px !important}
  .immersive-duration-opts{gap:4px}
  .imm-dur-btn{padding:6px 10px;font-size:.72rem}
  .immersive-start-btn{padding:10px 28px}

  /* 正计时器紧凑 */
  .stopwatch-widget{padding:6px 10px}
  .sw-time{font-size:1rem;min-width:70px}
  .sw-btn{width:34px;height:34px;font-size:.8rem}

  /* 底部导航极小屏优化 */
  .mbn-label{font-size:.56rem}
  .mbn-icon{font-size:1.05rem}
  .mbn-item{padding:3px 4px}

  /* 盆栽弹窗 */
  .plant-icon{font-size:3.5rem}
  .plant-skill-grid{gap:6px}
  .plant-skill-card{padding:8px 6px}
}

/* ── 375px以下：iPhone SE等极小屏 ── */
@media(max-width:375px){
  :root{font-size:13px}
  .immersive-time{font-size:2rem}
  .immersive-ring-wrap{width:120px;height:120px}
  .immersive-ring-wrap svg{width:120px !important;height:120px !important}
  .q-task-move,.q-task-del{min-width:32px;min-height:32px;font-size:.68rem}
  .mbn-label{font-size:.54rem}
}

/* ── 横屏优化 ── */
@media(max-width:768px) and (orientation:landscape){
  /* 沉浸心流横屏：左右布局 */
  .immersive-content{padding:10px 24px;justify-content:center}
  .immersive-header{margin-bottom:10px}
  .immersive-timer-area{margin-bottom:10px}
  .immersive-time{font-size:2.5rem}
  .immersive-setup{margin-top:10px;gap:10px}
  .immersive-ring-wrap{width:140px;height:140px}
  .immersive-ring-wrap svg{width:140px !important;height:140px !important}
  /* 四象限横屏：恢复2列 */
  .quadrant-board{grid-template-columns:1fr 1fr;gap:8px}
  .quadrant-cell{min-height:140px}
  .q-body{max-height:140px}
  /* 正计时器横屏靠左 */
  .stopwatch-widget{bottom:8px;left:8px;right:auto}
}

/* ── 暗黑模式下的移动端微调 ── */
[data-theme="dark"] .mobile-bottom-nav{
  box-shadow:0 -2px 12px rgba(0,0,0,.3);
  background:var(--panel-bg);
}
[data-theme="dark"] .stopwatch-widget{
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}

/* ── 暗黑模式 · 新Dashboard ── */
[data-theme="dark"] .dash-hero{
  background:#f5f5f5;
  box-shadow:0 2px 12px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.03);
}
[data-theme="dark"] .dash-greeting{color:#d0d8e8}
[data-theme="dark"] .dash-hero-sub{color:#8899b4}
[data-theme="dark"] .dash-hero-date{color:#8899b4}
[data-theme="dark"] .dash-hero-points{color:#d4a844;background:rgba(218,165,32,.08);border-color:rgba(218,165,32,.12)}
[data-theme="dark"] .dash-hero-weather{color:#8899b4}
[data-theme="dark"] .dash-stat-card{background:#1e2433;box-shadow:0 1px 4px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.03)}
[data-theme="dark"] .dash-stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.3)}
[data-theme="dark"] .dash-stat-value{color:#d0d8e8}
[data-theme="dark"] .dash-stat-label{color:#8899b4}
[data-theme="dark"] .dash-stat-sub{color:#6b7d8e}
[data-theme="dark"] .dash-qa-item{background:#1e2433;border-color:rgba(255,255,255,.04);box-shadow:0 1px 3px rgba(0,0,0,.15)}
[data-theme="dark"] .dash-qa-item:hover{border-color:rgba(140,170,210,.2)}
[data-theme="dark"] .dash-qa-icon{background:#f5f5f5;box-shadow:0 2px 8px rgba(0,0,0,.2)}
[data-theme="dark"] .dash-qa-label{color:#a0b0c8}
[data-theme="dark"] .dash-progress-card{background:#1e2433;box-shadow:0 1px 4px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.03)}
[data-theme="dark"] .dash-progress-hd{color:#a0b0c8}
[data-theme="dark"] .dash-progress-pct{color:#8daacf}
[data-theme="dark"] .dash-progress-sub{color:#6b7d8e}
[data-theme="dark"] .dash-gs-item{background:#262d3d}
[data-theme="dark"] .dash-gs-item:hover{background:#2a3142}
[data-theme="dark"] .dash-gs-value{color:#d0d8e8}
[data-theme="dark"] .dash-gs-label{color:#6b7d8e}
[data-theme="dark"] #dashMiniPomo.mini-pomo{background:#f5f5f5;border-color:rgba(212,149,139,.08)}
[data-theme="dark"] .mini-pomo-v2{background:#f5f5f5;border-color:rgba(255,107,107,.08);box-shadow:0 2px 12px rgba(0,0,0,.2)}
[data-theme="dark"] .mpv2-bg{stroke:rgba(255,255,255,.08)}
[data-theme="dark"] .mpv2-time{text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ── 移动端 · 新Dashboard ── */
@media(max-width:768px){
  .dash-hero{padding:20px 18px;flex-direction:column;align-items:flex-start;gap:12px;border-radius:16px}
  .dash-hero-right{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
  .dash-greeting{font-size:1.3rem}
  .dash-hero-sub{font-size:.76rem}
  .dash-stats-row-new{grid-template-columns:repeat(2,1fr);gap:10px}
  .dash-stat-card{padding:14px 16px;border-radius:14px}
  .dash-stat-value{font-size:1.4rem}
  .dash-quick-actions{grid-template-columns:repeat(3,1fr);gap:8px}
  .dash-qa-item{padding:12px 6px 10px;border-radius:14px}
  .dash-qa-icon{width:42px;height:42px;font-size:1.25rem}
  .dash-qa-label{font-size:.65rem}
  .dash-progress-row{grid-template-columns:1fr;gap:10px}
  .dash-global-stats{gap:10px}
  .dash-gs-item{padding:10px 12px}
  /* V2 Pomodoro mobile */
  .mini-pomo-v2{padding:14px 16px;gap:12px;border-radius:14px}
  .mpv2-ring-wrap{width:80px;height:80px}
  .mpv2-ring{width:80px;height:80px}
  .mpv2-time{font-size:.9rem;bottom:8px}
  .mpv2-mode{font-size:.8rem}
  .mpv2-btn{padding:6px 14px;font-size:.72rem}
}

@media(max-width:480px){
  .dash-hero{padding:16px 14px}
  .dash-stats-row-new{grid-template-columns:1fr 1fr;gap:8px}
  .dash-stat-card{padding:12px 14px}
  .dash-stat-value{font-size:1.2rem}
  .dash-quick-actions{gap:6px}
  .dash-qa-icon{width:36px;height:36px;font-size:1.1rem}
  .mini-pomo-v2{flex-direction:column;align-items:center;text-align:center;padding:12px 14px;gap:10px}
  .mpv2-ring-wrap{width:70px;height:70px}
  .mpv2-ring{width:70px;height:70px}
  .mpv2-time{font-size:.85rem;bottom:6px}
  .mpv2-actions{justify-content:center}
  .mpv2-mode-sel{max-width:140px}
}

/* ══════════════ 交互式新手引导 v2 ══════════════ */

.guide-tooltip {
  animation: guideSlideIn .35s cubic-bezier(.16,1,.3,1);
  pointer-events: all;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
.guide-tooltip-inner {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  padding: 24px 26px 20px;
  color: #1a1a2e;
}
[data-theme="dark"] .guide-tooltip-inner {
  background: #1e293b;
  color: #e2e8f0;
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
}

.guide-tooltip-title {
  font-size: 1.15rem;
  font-weight:400;
  margin: 0 0 10px;
  color: var(--primary,#0E9E86);
}
.guide-tooltip-desc {
  font-size: .9rem;
  line-height: 1.7;
  margin: 0 0 18px;
  color: #475569;
}
[data-theme="dark"] .guide-tooltip-desc { color: #94a3b8; }
.guide-tooltip-desc strong {
  color: #1e293b;
  font-weight:400;
}
[data-theme="dark"] .guide-tooltip-desc strong { color: #f1f5f9; }

.guide-tooltip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.guide-dots {
  display: flex;
  gap: 6px;
}
.guide-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background .3s, transform .3s;
}
.guide-dot.active {
  background: var(--primary,#0E9E86);
  transform: scale(1.4);
  box-shadow: 0 0 8px rgba(14,158,134,.4);
}
[data-theme="dark"] .guide-dot { background: #475569; }
[data-theme="dark"] .guide-dot.active { background: #0E9E86; }

.guide-btns {
  display: flex;
  gap: 8px;
}
.guide-btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight:400;
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.guide-btn-next {
  background: var(--primary,#0E9E86);
  color: #fff;
  box-shadow: 0 2px 8px rgba(14,158,134,.3);
}
.guide-btn-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14,158,134,.4);
}
.guide-btn-prev,
.guide-btn-skip {
  background: transparent;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.guide-btn-prev:hover,
.guide-btn-skip:hover {
  background: #f1f5f9;
  color: #334155;
}
[data-theme="dark"] .guide-btn-prev,
[data-theme="dark"] .guide-btn-skip {
  color: #94a3b8;
  border-color: #334155;
}
[data-theme="dark"] .guide-btn-prev:hover,
[data-theme="dark"] .guide-btn-skip:hover {
  background: #1e293b;
  color: #e2e8f0;
}

@keyframes guideSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 引导工具提示在移动端的适配 */
@media (max-width: 480px) {
  .guide-tooltip-inner {
    padding: 18px 16px 16px;
    border-radius: 14px;
  }
  .guide-tooltip-title { font-size: 1.05rem; }
  .guide-tooltip-desc { font-size: .82rem; line-height: 1.6; }
  .guide-btn { padding: 7px 14px; font-size: .8rem; }
}

/* ── 空状态的智能引导样式 ── */
.empty-guide {
  text-align: center;
  padding: 36px 20px;
}
.empty-guide-icon {
  font-size: 2.6rem;
  margin-bottom: 8px;
}
.empty-guide-title {
  font-size: 1.05rem;
  font-weight:400;
  color: var(--text,#1a1a2e);
  margin-bottom: 6px;
}
.empty-guide-hint {
  font-size: .82rem;
  color: var(--text-muted,#94a3b8);
  margin-bottom: 16px;
  line-height: 1.5;
}
.empty-guide-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}
.empty-guide-tpl {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px dashed var(--primary,#0E9E86);
  background: rgba(14,158,134,.05);
  color: var(--primary,#0E9E86);
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.empty-guide-tpl:hover {
  background: rgba(14,158,134,.12);
  border-style: solid;
  transform: translateY(-1px);
}
[data-theme="dark"] .empty-guide-tpl {
  background: rgba(14,158,134,.1);
  border-color: rgba(14,158,134,.4);
}
[data-theme="dark"] .empty-guide-tpl:hover {
  background: rgba(14,158,134,.2);
}

/* ── 快速捕获输入框 ── */
.quick-capture-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-right: 6px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border,#e2e8f0);
  background: var(--bg,#fff);
  transition: border-color .2s;
}
.quick-capture-wrap:focus-within {
  border-color: var(--primary,#0E9E86);
  box-shadow: 0 0 0 2px rgba(14,158,134,.15);
}
.quick-capture-input {
  border: none;
  outline: none;
  padding: 5px 10px;
  font-size: .8rem;
  width: 170px;
  background: transparent;
  color: var(--text,#1a1a2e);
  font-family: inherit;
}
.quick-capture-input::placeholder {
  color: var(--text-muted,#94a3b8);
  font-size: .75rem;
}
.quick-capture-btn {
  border: none;
  background: var(--primary,#0E9E86);
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  font-size: .9rem;
  font-weight:400;
  transition: background .2s;
}
.quick-capture-btn:hover {
  background: #0b8a75;
}
@media (max-width: 768px) {
  .quick-capture-input { width: 110px; font-size: .75rem; }
}

/* ── 四象限看板切换按钮 ── */
.quad-view-btn {
  transition: all .2s;
}
.quad-view-btn:hover {
  opacity: .85;
}
.kb-subtab {
  transition: all .2s;
}
.kb-subtab:hover {
  opacity: .85;
}

/* ── 新功能：趋势分段按钮 ── */
.seg-btn{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.8rem;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all .2s}
.seg-btn:hover{opacity:.85}
.seg-btn.seg-active{background:#0E9E86;color:#fff;border-color:#0E9E86}

/* ── 新功能：计划目标进度条 ── */
.goal-bar{height:7px;background:var(--bg);border-radius:99px;overflow:hidden;margin-top:10px}
.goal-fill{height:100%;width:0;background:linear-gradient(90deg,#0E9E86,#2EA84F);border-radius:99px;transition:width .6s cubic-bezier(.22,.61,.36,1)}

/* ── 第6板块：灵感速记卡片悬浮动效（新增，不影响现有卡片） ── */
.feature-notes{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.feature-notes:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(91,169,126,.25)}

/* ── 灵感速记面板布局与内容样式 ── */
/* 激活时内容紧贴顶部，不受 .main min-height:100vh 撑高影响 */
#tab-notes.active{display:block!important;padding:24px;padding-top:16px}
.notes-wrapper{padding:0;max-width:720px;margin:0 auto}
.notes-empty{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px 20px;text-align:center;color:var(--text-muted)}
.note-item{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;margin-bottom:12px;border-radius:14px;background:var(--bg);border:1px solid var(--border,#eee);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.note-item:hover{transform:translateX(3px);box-shadow:0 3px 14px rgba(0,0,0,.06)}
.note-item-body{flex:1;font-size:.9rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;color:var(--text,#333)}
.note-item-meta{font-size:.68rem;color:var(--text-muted);white-space:nowrap;padding-top:4px;flex-shrink:0}
.note-btn-promote{cursor:pointer;background:linear-gradient(135deg,#5BA97E,#86C9A6);color:#fff;border:none;border-radius:8px;padding:5px 12px;font-size:.74rem;white-space:nowrap;font-weight:400;transition:opacity .2s,transform .15s;flex-shrink:0}
.note-btn-promote:hover{opacity:.88;transform:scale(1.04)}
.note-btn-promote:disabled{background:#ccc;cursor-default;pointer-events:none;transform:none}
.note-btn-del{cursor:pointer;background:none;border:none;color:#e74c3c;font-size:1.15rem;line-height:1;padding:0 2px;flex-shrink:0;transition:transform .15s}
.note-btn-del:hover{transform:scale(1.2)}
.notes-empty-icon{font-size:3rem;margin-bottom:12px;display:inline-block;animation:noteFloat 3s ease-in-out infinite}
.notes-empty-title{font-size:1rem;font-weight:400;color:var(--text,#555);margin-bottom:6px}
.notes-empty-hint{font-size:.78rem;color:var(--text-muted);line-height:1.6;max-width:280px;margin:0 auto}

/* ── 灵感速记 语音按钮 ── */
.notes-voice-btn{flex-shrink:0;width:44px;height:44px;border-radius:12px;border:1px solid var(--border,#eee);background:var(--surface,#fff);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.notes-voice-btn:hover{background:var(--hover-bg)}
.notes-voice-btn.active{background:#e74c3c;border-color:#e74c3c;color:#fff}

/* ── 手机端任务操作按钮：加大点触区、分离删除与完成（修复易误触） ── */
@media (max-width:768px), (hover:none){
  /* 手机端整体字体放大：根字号 16→18px，全站 rem 文本同步放大约 +12.5%，更醒目 */
  html{font-size:18px}
  /* 每日任务：删除按钮默认靠 hover 显示，触屏无 hover → 看不见也点不到；改为常显 + 危险色块 */
  .task-del-btn{opacity:1;top:6px;right:6px;width:30px;height:30px;font-size:1.1rem;line-height:1;background:rgba(231,76,60,.12);color:var(--danger,#e74c3c)}
  /* 四象限：操作组按钮加大、加间距，删除与切换之间留白 */
  .q-task-actions{gap:8px;margin-top:6px}
  .q-task-move,.q-task-del{min-width:40px;min-height:40px;border-radius:8px}
  .q-task-del{margin-left:8px}
  /* 笔记：转知识库 与 删除 拉开 */
  .note-item{align-items:center}
  .note-btn-promote{margin-right:6px}
  .note-btn-del{width:34px;height:34px;font-size:1.35rem;background:rgba(231,76,60,.1);border-radius:50%}
  .notes-voice-btn{width:46px;height:46px}
}
/* 横屏手机（宽>768 不命中 max-width:768px）靠 body.mobile-mode 兜底，根字号同步放大 */
html.mobile-mode{font-size:18px}
@keyframes noteFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── 我的计划：4卡网格（桌面4列 / 手机2列方块） ── */
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:768px){.plans-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
body.mobile-mode .plans-grid{grid-template-columns:repeat(2,1fr);gap:10px}