:root{
  --bg:#F5F0E8; --card:#FFFFFF;
  --primary:#D97757; --primary-deep:#C15F3C; --primary-soft:#F5E6DD;
  --olive:#7A8B5E; --olive-soft:#EBEBDD;
  --gold:#C9A24B; --gold-soft:#F5EEDC;
  --clay:#B85C38; --clay-soft:#F6E3DA;
  --brown:#A68B5B;
  --text:#3D3929; --text2:#6B6257; --text3:#A69E93;
  --border:#EAE3D9; --track:#EDE7DD; --soft:#FBF8F3;
  --grad:linear-gradient(135deg,#D97757,#E8A87C);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Noto Sans SC","PingFang SC",-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:248px;background:var(--card);display:flex;flex-direction:column;padding:22px 14px 18px;gap:4px;position:sticky;top:0;height:100vh;flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;padding:0 8px 26px}
.logo-badge{width:38px;height:38px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-badge svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.logo span{font-size:18px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);transition:.15s}
.nav-item svg{width:20px;height:20px;fill:none;stroke:var(--text2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nav-item:hover{background:var(--primary-soft)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-deep);font-weight:600}
.nav-item.active svg{stroke:var(--primary-deep)}
.spacer{flex:1}

/* Main */
.main{flex:1;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.head{display:flex;justify-content:space-between;align-items:center}
.head h1{font-size:26px;font-weight:700}
.head .sub{font-size:14px;color:var(--text2);margin-top:4px}
.head-right{display:flex;gap:12px;align-items:center}
.btn{display:flex;align-items:center;gap:6px;padding:0 16px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-size:14px;font-weight:500;color:var(--text);cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px}
.stat .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.stat .ic svg{width:18px;height:18px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat .lb{font-size:13px;color:var(--text2)}
.stat .val{font-size:26px;font-weight:700}
.stat .trend{font-size:12px;color:var(--text3)}

.body{display:flex;gap:20px;flex:1;min-height:0}
.body-main{flex:1;display:flex;flex-direction:column;gap:20px;min-width:0}
.body-side{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:20px}
.h3{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.h3 b{font-size:18px;font-weight:700}
.h3 span{font-size:13px;color:var(--text3)}

/* Calendar */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head h3{font-size:18px;font-weight:700}
.cal-nav{display:flex;gap:8px;align-items:center}
.cal-nav button{width:30px;height:30px;border-radius:8px;border:none;background:var(--track);color:var(--text2);cursor:pointer;font-size:16px;line-height:1}
.cal-nav .today{width:auto;padding:0 14px;height:30px;background:var(--primary);color:#fff;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
.cal-wd{font-size:13px;font-weight:600;color:var(--text3);text-align:center;padding:6px 0}
.cal-wd.wk{color:var(--clay)}
.cal-day{min-height:88px;padding:6px;border-radius:8px;font-size:13px;border-top:1px solid var(--border)}
.cal-day .num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:12px;font-weight:500}
.cal-day.today{background:var(--soft)}
.cal-day.today .num{background:var(--primary);color:#fff;font-weight:700}
.cal-day.wk .num{color:var(--clay)}
.evt{margin-top:4px;font-size:10px;padding:3px 6px;border-radius:4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evt.course{background:var(--primary-soft);color:var(--primary-deep)}
.evt.fit{background:var(--clay-soft);color:var(--clay)}
.evt.todo{background:var(--gold-soft);color:#A8852E}
.evt.life{background:var(--olive-soft);color:#5F6F4A}

/* Todo */
.todo-list{display:flex;flex-direction:column;gap:12px}
.todo-item{display:flex;align-items:center;gap:10px}
.cb{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cb.done{background:var(--primary);border-color:var(--primary)}
.cb.done svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.todo-item .t{flex:1;font-size:14px;font-weight:500}
.todo-item .t.done{color:var(--text3);text-decoration:line-through}
.tag{font-size:11px;font-weight:500;padding:3px 8px;border-radius:6px;white-space:nowrap}
.tag.course{background:var(--primary-soft);color:var(--primary-deep)}
.tag.fit{background:var(--clay-soft);color:var(--clay)}
.tag.life{background:var(--olive-soft);color:#5F6F4A}
.tag.shop{background:var(--gold-soft);color:#A8852E}
.pri{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px}
.pri.high{background:#FBE4DF;color:#C0392B}
.pri.mid{background:var(--gold-soft);color:#A8852E}
.pri.low{background:#EFEEE9;color:var(--text3)}
.kb-card.dragging{opacity:.5;transform:rotate(1.5deg)}
.kb-col.drop-hover{outline:2px dashed var(--primary);outline-offset:-4px}
.weight-chart{margin-top:8px}
.weight-chart .axis{font-size:11px;color:var(--text3)}

/* Timeline */
.tl{display:flex;flex-direction:column;gap:12px}
.tl-item{display:flex;align-items:center;gap:10px}
.tl-item .time{font-size:13px;font-weight:600;color:var(--text2);width:44px;flex-shrink:0}
.tl-item .dot{width:8px;height:8px;border-radius:4px;flex-shrink:0}
.tl-item .txt{font-size:14px;font-weight:500}

/* Week tabs */
.week-tabs{display:flex;gap:6px;flex-wrap:wrap}
.wtab{padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:500;color:var(--text2);cursor:pointer}
.wtab.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.wtab.today{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-deep);font-weight:600}
.course-block{display:flex;gap:12px;padding:12px;border-radius:12px;margin-bottom:10px}
.course-block.required{background:var(--primary-soft)}
.course-block.elective{background:var(--olive-soft)}
.course-block .slot{width:72px;flex-shrink:0;font-size:13px;font-weight:700;color:var(--primary-deep)}
.course-block.elective .slot{color:#5F6F4A}
.course-block .info{flex:1}
.course-block .info b{font-size:14px;font-weight:600;color:var(--text)}
.course-block .info span{display:block;font-size:12px;color:var(--text2);margin-top:2px}
.course-block .rm{font-size:13px;color:var(--text3);align-self:center}
.empty-tip{text-align:center;padding:30px 0;color:var(--text3);font-size:14px}
.empty-tip .next{font-size:12px;margin-top:6px;color:var(--text2)}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;flex:1}
.kb-col{border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.kb-col.p0{background:#FBF3EC}.kb-col.p1{background:#FBF7EE}.kb-col.p2{background:#F3F4EC}
.kb-head{display:flex;justify-content:space-between;align-items:center}
.kb-head b{font-size:15px;font-weight:700}
.kb-head span{font-size:13px;color:var(--text3);font-weight:600}
.kb-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.kb-card .t{font-size:14px;font-weight:600}
.kb-card .d{font-size:12px;color:var(--text3)}

/* Expense */
.ov-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-list{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.cat-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.cat-row .n{font-weight:500}
.cat-row .a{color:var(--text2);font-size:12px}
.bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:4px}
.flow{display:flex;flex-direction:column;gap:12px}
.flow-item{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.flow-item .l{display:flex;align-items:center;gap:8px;min-width:0}
.flow-item .d{width:8px;height:8px;border-radius:4px;flex-shrink:0}
.flow-item .amt{font-weight:600;color:var(--primary-deep)}
.flow-item.income .amt{color:var(--olive)}

/* Budget */
.budget-item{margin-bottom:14px}
.budget-item .row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.budget-item .row b{font-weight:600}
.budget-item .row span{color:var(--text2);font-size:12px}
.budget-item .bar{margin-top:6px}
.over{color:var(--primary-deep)!important}

/* Accounts */
.accounts{display:flex;flex-direction:column;gap:10px}
.acc-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:13px}
.acc-item .n{display:flex;align-items:center;gap:8px}
.acc-item .n i{width:8px;height:8px;border-radius:4px}
.acc-item .v{font-weight:600}
.acc-total{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;background:var(--primary-soft);font-weight:700;font-size:14px}

/* Trend bars */
.trend-bars{display:flex;align-items:flex-end;gap:14px;height:120px;padding:10px 6px 0;margin-top:6px}
.tb-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.tb-col .col{width:100%;max-width:40px;background:var(--primary);border-radius:6px 6px 0 0;flex:1;display:flex;align-items:flex-end}
.tb-col .col.today{background:var(--primary-deep)}
.tb-col .col i{display:block;width:100%;height:var(--h);background:var(--primary);border-radius:6px 6px 0 0}
.tb-col .col.today i{background:var(--primary-deep)}
.tb-col span{font-size:11px;color:var(--text3)}

/* Import */
.import-src{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.src{display:flex;align-items:center;gap:6px;padding:0 12px;height:40px;border-radius:10px;background:var(--soft);border:1px solid var(--border);font-size:12px;font-weight:500;cursor:pointer}
.src i{width:8px;height:8px;border-radius:4px}
.drop{border:1px dashed var(--border);background:var(--soft);border-radius:12px;padding:20px;text-align:center;margin-top:6px;cursor:pointer}
.drop p{font-size:13px;font-weight:500;color:var(--text2)}
.drop small{font-size:11px;color:var(--text3)}

/* Fitness */
.week{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.week-row{display:flex;align-items:center;gap:12px}
.week-row .n{font-size:13px;font-weight:500;color:var(--text2);width:40px;flex-shrink:0}
.week-row .b{height:10px;border-radius:5px;background:var(--olive)}
.week-row .b.today{background:var(--primary)}

/* Tabbar */
.tabbar{display:none}

@media (max-width:768px){
  .sidebar{display:none}
  .main{padding:0 0 80px;gap:0}
  .head{padding:20px;background:var(--grad);color:#fff;flex-direction:column;align-items:flex-start;gap:6px}
  .head h1{color:#fff;font-size:20px}
  .head .sub{color:rgba(255,255,255,.85);margin-top:2px}
  .head-right{display:none}
  .stat-row{grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
  .stat{padding:14px}
  .stat .val{font-size:20px}
  .stat .trend{display:none}
  .stat:last-child{display:none}
  .body{flex-direction:column;padding:0 16px;gap:16px}
  .body-side{width:100%;flex-direction:column}
  .card{padding:16px}
  .ov-row{grid-template-columns:repeat(3,1fr);gap:10px}
  .ov-row .stat .val{font-size:16px}
  .kanban{grid-template-columns:1fr;gap:12px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:8px 8px 10px;z-index:10}
  .tabbar .item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--text3);cursor:pointer}
  .tabbar .item svg{width:22px;height:22px;fill:none;stroke:var(--text3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .item.active{color:var(--primary)}
  .tabbar .item.active svg{stroke:var(--primary)}
  .view{display:none}
  .view.active{display:block}
}
@media (min-width:769px){
  .view{display:none}
  .view.active{display:flex;flex-direction:column;gap:20px;flex:1;min-height:0}
}