:root{
  --paper:#f5f0e8;--card:#fffdfa;--ink:#29251f;--muted:#746d63;--line:#ded5c8;
  --plum:#4d3045;--plum-soft:#e8dfe5;--terra:#b65f42;--terra-soft:#f3dfd6;
  --sage:#627a67;--sage-soft:#dfe8df;--sand:#a57c45;--sand-soft:#eee2ce;--clay:#8f4f3b;
  --red:#b44d43;--green:#477358;--shadow:0 16px 40px rgba(63,48,36,.07);--radius:22px;--sidebar:248px
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Inter","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== 布局 ===== */
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:28px 20px 22px;background:#ede6dc;border-right:1px solid rgba(104,87,68,.12);display:flex;flex-direction:column;z-index:20;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:0;padding:0 4px 20px 8px;border:0;background:transparent;color:inherit;text-align:left}
.brand-inner{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--plum);color:#fff;font:700 19px/1 "Songti SC",serif;box-shadow:0 7px 18px rgba(77,48,69,.2)}
.brand strong{display:block;font:700 19px/1.2 "Songti SC",serif;letter-spacing:.05em}
.brand span{display:block;margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.12em}
.side-nav{display:flex;flex-direction:column;gap:4px}
.nav-label{margin:14px 0 2px 13px;font-size:10px;letter-spacing:.18em;color:#a59c90;font-weight:700}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 13px;border:0;border-radius:12px;background:transparent;color:#5e574e;text-align:left;transition:.2s}
.nav-item:hover{background:rgba(255,255,255,.48);color:var(--ink)}
.nav-item.active{background:var(--plum);color:#fff;box-shadow:0 8px 18px rgba(77,48,69,.22)}
.nav-item svg{width:20px;height:20px;flex:0 0 auto}
.local-card{margin-top:auto;padding:14px;border-radius:16px;background:rgba(255,253,250,.7);border:1px solid rgba(154,145,134,.18)}
.local-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:600}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(71,115,88,.18)}
.local-card p{margin:8px 0 4px;font-size:12px;color:var(--muted);line-height:1.5}
.local-card small{font-size:11px;color:#a59c90}

.main-content{margin-left:var(--sidebar);padding:30px 40px 60px;max-width:1240px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.eyebrow{margin:0;font-size:11px;letter-spacing:.18em;color:#a59c90;font-weight:700;text-transform:uppercase}
.topbar h1{margin:6px 0 0;font:700 30px/1.1 "Songti SC",serif}
.top-actions{display:flex;align-items:center;gap:10px}
.save-state{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.save-state span{width:8px;height:8px;border-radius:50%;background:var(--green)}
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fffdfa;color:var(--ink);font-weight:600;transition:.2s}
.btn:hover{box-shadow:var(--shadow)}
.btn.primary{background:var(--plum);border-color:var(--plum);color:#fff}
.btn.ghost{background:transparent}
.btn.full{width:100%;justify-content:center}
.text-btn{border:0;background:transparent;color:var(--plum);font-weight:700;font-size:13px;padding:4px 6px}

/* ===== 卡片通用 ===== */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-head .eyebrow{color:#b7ad9f}
.panel-head h2{margin:4px 0 0;font:700 18px/1.2 "Songti SC",serif}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.span-2{grid-column:span 2}

/* Hero */
.hero-card{grid-column:span 2;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#4d3045,#6b4259);color:#fff;border:0;box-shadow:0 18px 44px rgba(77,48,69,.28)}
.hero-card .eyebrow.light{color:rgba(255,255,255,.7)}
.hero-card h2{margin:10px 0 8px;font:700 30px/1.15 "Songti SC",serif}
.hero-card p{margin:0;color:rgba(255,255,255,.82);max-width:42ch}
.score-orbit{position:relative;width:120px;height:120px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center}
.score-orbit span{position:absolute;inset:10px;border-radius:50%;border:3px dashed rgba(255,255,255,.4)}
.score-orbit b{font:700 15px/1 "Songti SC",serif;color:#fff}

/* 快速开始 */
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick-action{position:relative;display:flex;align-items:center;gap:11px;min-height:74px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-align:left;transition:.2s}
.quick-action:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.quick-action svg{width:22px;height:22px;flex:0 0 auto}
.quick-action span{display:flex;flex-direction:column;gap:2px}
.quick-action strong{font-size:14px}
.quick-action small{font-size:11px;color:var(--muted)}
.quick-action i{position:absolute;top:10px;right:12px;font-style:normal;font-weight:700;color:var(--plum);font-size:15px}
.quick-action.terracotta{background:var(--terra-soft)}
.quick-action.plum{background:var(--plum-soft)}
.quick-action.sage{background:var(--sage-soft)}
.quick-action.sand{background:var(--sand-soft)}

/* 统计卡 */
.stat-card{display:flex;align-items:center;gap:14px}
.stat-icon{width:46px;height:46px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center}
.stat-icon svg{width:22px;height:22px}
.stat-icon.terracotta{background:var(--terra-soft);color:var(--terra)}
.stat-icon.plum{background:var(--plum-soft);color:var(--plum)}
.stat-icon.sage{background:var(--sage-soft);color:var(--sage)}
.stat-icon.sand{background:var(--sand-soft);color:var(--sand)}
.stat-icon.terra{background:var(--terra-soft);color:var(--terra)}
.stat-icon.clay{background:#ecd9d0;color:var(--clay)}
.stat-card span{font-size:12px;color:var(--muted)}
.stat-card strong{display:block;margin-top:2px;font:700 22px/1.1 "Songti SC",serif}
.stat-card small{display:block;margin-top:3px;font-size:11px;color:#a59c90}

/* 今天要处理 */
.clean-list{display:flex;flex-direction:column;gap:8px}
.todo-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fffdfa}
.todo-row.overdue{border-color:#ecc9c4;background:#fdf3f1}
.todo-row .dot{width:9px;height:9px;border-radius:50%;background:var(--sage);flex:0 0 auto}
.todo-row.overdue .dot{background:var(--red)}
.todo-row .main{flex:1;min-width:0}
.todo-row .main b{display:block;font-size:14px;font-weight:600}
.todo-row .main small{font-size:12px;color:var(--muted)}
.todo-row.overdue .main b{color:var(--red)}
.todo-row .when{font-size:12px;color:var(--muted);white-space:nowrap}
.done-btn{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);border-radius:11px;background:#fffdfa;color:var(--sage);display:grid;place-items:center}
.done-btn:hover{background:var(--sage-soft)}
.empty-hint{padding:18px;text-align:center;color:var(--muted);font-size:13px}

/* 今日打卡 */
.habit-stack{display:flex;flex-direction:column;gap:8px}
.habit-pill{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:13px}
.habit-pill svg{width:18px;height:18px}
.habit-pill b{font-size:13px;font-weight:600}
.habit-pill small{margin-left:auto;font-size:11px;color:var(--muted)}

/* 模块速览 */
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.glance-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px}
.glance-item svg{width:18px;height:18px;color:var(--plum)}
.glance-item div{display:flex;flex-direction:column}
.glance-item b{font-size:13px}
.glance-item small{font-size:11px;color:var(--muted)}

/* 轻提醒 */
.insight-card{background:linear-gradient(135deg,#fffdfa,#f3ecf1);border-style:dashed}
.insight-card blockquote{margin:6px 0 10px;font:500 15px/1.5 "Songti SC",serif;color:var(--plum)}
.insight-card span{font-size:11px;color:#a59c90}

/* 留白页 */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:52vh;gap:10px;color:var(--muted)}
.coming-soon svg{width:46px;height:46px;color:var(--plum);opacity:.7}
.coming-soon h2{margin:4px 0 0;font:700 22px/1.2 "Songti SC",serif;color:var(--ink)}
.coming-soon p{max-width:42ch;font-size:14px;line-height:1.6}

/* 视图切换 */
.view{display:none}
.view.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== 登录 ===== */
.login-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#6b4259,#3a2533);padding:20px}
.login-card{width:min(360px,92vw);background:var(--card);border-radius:24px;padding:34px 28px;box-shadow:0 30px 70px rgba(0,0,0,.35);text-align:center}
.login-mark{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:var(--plum);color:#fff;display:grid;place-items:center;font:700 26px/1 "Songti SC",serif}
.login-card h1{margin:0;font:700 24px/1.2 "Songti SC",serif}
.login-sub{margin:6px 0 22px;color:var(--muted);font-size:13px}
.login-card .field{margin-bottom:14px;text-align:left}
.login-card .btn{margin-top:6px}
.login-error{margin:12px 0 0;color:var(--red);font-size:13px}

/* 表单 */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field span{font-size:12px;color:var(--muted);font-weight:600}
.field input,.field select{height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fffdfa;font-size:16px;outline:none}
.field input:focus{border-color:var(--plum)}

/* toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);z-index:120;background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 手机底部导航 */
.mobile-nav{display:none}

/* ===== 响应式 ===== */
@media(max-width:1180px){
  .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-card,.span-2{grid-column:span 2}
  .glance-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  :root{--sidebar:0px}
  html,body{overflow-x:hidden}
  .sidebar{display:none}
  .main-content{margin-left:0;padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
  .topbar{align-items:flex-start;flex-direction:column;gap:10px}
  .topbar h1{font-size:24px}
  .top-actions{width:100%;justify-content:space-between}
  .dashboard-grid,.hero-card,.span-2{grid-column:auto;grid-template-columns:1fr}
  .hero-card{min-height:150px}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .glance-grid{grid-template-columns:1fr 1fr}
  .mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;height:64px;padding:6px;border:1px solid rgba(85,69,55,.14);border-radius:20px;background:rgba(255,252,247,.94);box-shadow:0 14px 35px rgba(53,41,31,.16);backdrop-filter:blur(14px)}
  .mobile-nav button{min-width:0;border:0;border-radius:14px;background:transparent;color:#847a70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px}
  .mobile-nav button svg{width:21px;height:21px}
  .mobile-nav button.active{background:var(--plum);color:#fff}
  .login-card{padding:28px 22px}
}
@media(max-width:560px){
  body{font-size:14px}
  .stat-card strong{font-size:19px}
  .glance-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
