:root{
  --canvas:#F5F6F8;
  --card:#FFFFFF;
  --ink:#101318;
  --sub:#6E7480;
  --faint:#A0A5AE;
  --line:#EDEEF2;
  --stroke:#E7E8EC;
  --accent:#4C6FFF;
  --accent-ink:#3A56E0;
  --dark:#171A21;
  --dark-2:#22262F;
  --radius:16px;
  --shadow:0 8px 24px rgba(16,19,24,.08);
  --shadow-lg:0 18px 40px rgba(16,19,24,.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#E9EAEE;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
select{font-family:inherit}
.muted{color:var(--faint)}
.hidden{display:none !important}

/* ---------- 布局骨架 ---------- */
.app{display:flex;min-height:100vh;background:var(--canvas)}
.sidebar{width:240px;flex:0 0 240px;background:var(--dark);color:#fff;display:flex;flex-direction:column;padding:20px 16px;gap:6px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.tabbar{display:none}

/* ---------- 侧栏 ---------- */
.brand{display:flex;align-items:center;gap:10px;height:44px;margin-bottom:8px}
.logo{width:32px;height:32px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.logo svg{width:18px;height:18px}
.brand-text{font-weight:700;font-size:15px}
.nav-label{font-size:11px;color:#6B7280;padding:12px 12px 6px;font-weight:500}
.nav-item{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:10px;color:#A8AEBA;font-size:13px;font-weight:500;width:100%;text-align:left;transition:.15s}
.nav-item svg{width:16px;height:16px;flex:0 0 16px}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-item.active{background:#262B36;color:#fff;font-weight:600}
.nav-divider{height:1px;background:#2A2F3A;margin:10px 0}
.side-foot{margin-top:auto;padding-top:16px}
.user{display:flex;align-items:center;gap:10px;background:var(--dark-2);border-radius:12px;padding:8px 10px}
.avatar{width:30px;height:30px;border-radius:15px;background:#343A47;display:flex;align-items:center;justify-content:center}
.avatar svg{width:16px;height:16px}
.user-text{display:flex;flex-direction:column;line-height:1.35}
.user-text b{font-size:12px}
.user-text span{font-size:10px;color:#8A90A0}

/* ---------- 顶栏 ---------- */
.topbar{height:76px;background:#fff;padding:0 28px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.title-block h1{margin:0;font-size:20px;font-weight:700}
.title-block p{margin:2px 0 0;font-size:12px;color:var(--sub)}
.top-actions{display:flex;align-items:center;gap:10px}
.seg{display:flex;gap:3px;background:#F1F2F5;border-radius:12px;padding:3px}
.seg button{padding:0 16px;height:32px;border-radius:9px;font-size:13px;font-weight:500;color:var(--sub)}
.seg button.active{background:var(--ink);color:#fff;font-weight:600}
#timePreset{height:36px;border-radius:10px;border:1px solid var(--stroke);background:#fff;color:var(--sub);font-size:12px;padding:0 8px;max-width:190px}
.icon-btn{width:36px;height:36px;border-radius:18px;background:#EDF1FF;display:flex;align-items:center;justify-content:center}
.icon-btn svg{width:16px;height:16px}
.ghost-btn{width:30px;height:30px;border-radius:9px;border:1px solid var(--stroke);background:#fff;color:var(--sub);font-size:16px;line-height:1}

/* ---------- 视图容器 ---------- */
.view{padding:20px 28px 24px;flex:1;min-height:0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px}
.sec-title{font-size:15px;font-weight:600}
.sec-more{font-size:12px;color:var(--sub)}

/* ---------- 星期条 ---------- */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px}
.ws-item{border-radius:14px;background:#fff;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.15s;position:relative}
.ws-item .w{font-size:11px;font-weight:500;color:var(--sub)}
.ws-item .d{font-size:15px;font-weight:600}
.ws-item.sel{background:var(--ink)}
.ws-item.sel .w{color:rgba(255,255,255,.72)}
.ws-item.sel .d{color:#fff}
.ws-item.none .w,.ws-item.none .d{color:var(--faint)}
.ws-item .dot{position:absolute;bottom:6px;width:4px;height:4px;border-radius:2px;background:var(--accent)}

/* ---------- 焦点卡（深色） ---------- */
.hero{background:var(--dark);border-radius:20px;padding:26px 28px;color:#fff;display:flex;gap:24px;align-items:center;justify-content:space-between;box-shadow:var(--shadow-lg);margin-bottom:20px}
.hero-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.hero-top{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600}
.pill .dot{width:6px;height:6px;border-radius:3px;background:#fff}
.pill.idle{background:#2C313C;color:#C9CDD6}
.pill.done{background:#2C313C;color:#C9CDD6}
.hero-sec{font-size:12px;color:#8A90A0;font-weight:500}
.hero-name{font-size:28px;font-weight:700;line-height:1.2;word-break:break-all}
.hero-meta{font-size:12px;color:#9AA0AB;word-break:break-all}
.hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.hero-num{font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.hero-unit{font-size:12px;color:#8A90A0;text-align:right}
.track{width:220px;height:6px;border-radius:3px;background:#2C313C;overflow:hidden}
.track > i{display:block;height:6px;border-radius:3px;background:var(--accent)}

/* ---------- 两栏 ---------- */
.columns{display:flex;gap:20px;align-items:flex-start}
.col-main{flex:1;min-width:0;width:100%;max-width:100%}
.col-side{width:320px;flex:0 0 320px;display:flex;flex-direction:column;gap:16px}
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-label{font-size:12px;font-weight:500;color:var(--sub)}
.chip{background:#EDF1FF;color:var(--accent-ink);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600}
.card-name{font-size:18px;font-weight:700}
.card-meta{font-size:12px;color:var(--sub);margin-top:4px}

/* ---------- 时间轴 ---------- */
.timeline{display:flex;flex-direction:column;gap:10px}
.tl-row{display:flex;align-items:center;gap:14px}
.tl-time{width:48px;flex:0 0 48px;text-align:right;font-size:11px;line-height:16px;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
.tl-bar{width:3px;flex:0 0 3px;height:46px;border-radius:2px}
.tl-card{flex:1;min-width:0;background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.tl-card.now{border:1.5px solid var(--accent)}
.tl-card.past{opacity:.82}
.tl-info{flex:1;min-width:0}
.tl-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-sub{font-size:11px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-chip{border-radius:999px;padding:5px 11px;font-size:11px;font-weight:600;background:#F1F2F5;color:#8A90A0;flex:0 0 auto}
.tl-chip.now{background:var(--accent);color:#fff}
.tl-card.past .tl-name{color:#8A90A0}

/* ---------- 迷你图 ---------- */
.chart{display:flex;align-items:flex-end;gap:8px;height:72px}
.chart i{flex:1;border-radius:5px;background:#DCE1EA;display:block}
.chart i.hi{background:var(--accent)}
.chart i.zero{background:#E9ECF1}
.axis{display:flex;gap:8px;margin-top:6px}
.axis span{flex:1;text-align:center;font-size:10px;color:var(--faint)}
.axis span.hi{color:var(--ink);font-weight:600}

/* ---------- 课程/统计行 ---------- */
.line-row{display:flex;align-items:center;gap:10px;height:28px;font-size:12px;color:#3A3F4A;min-width:0;max-width:100%}
.line-row .dot{width:6px;height:6px;border-radius:3px;flex:0 0 6px}
.line-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}

/* ---------- 周课表网格 ---------- */
.week-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.week-switch{display:flex;align-items:center;gap:10px}
.week-switch span{font-size:14px;font-weight:600}
.grid-card{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.grid-scroll{overflow-x:auto}
.tgrid{display:grid;gap:1px;background:#EDEEF2;border-radius:12px;padding:1px;min-width:760px}
.cell{background:#fff;padding:8px 10px;border-radius:8px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:17px;font-weight:600}
.cell.head{min-height:48px;font-weight:500;color:var(--sub);font-size:12px}
.cell.head.today{background:var(--ink);color:#fff;font-weight:600}
.cell.period{background:#fff;color:var(--sub);font-weight:500;font-size:11px;line-height:16px}
.cell.now{background:var(--accent);color:#fff}
.cell.blank{background:#fff}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.legend-item{display:flex;align-items:center;gap:8px;background:#F7F8FA;border-radius:10px;padding:10px 12px;font-size:11px;font-weight:500;color:#3A3F4A}
.legend-item .dot{width:8px;height:8px;border-radius:4px}
.grid-foot{margin-top:12px;display:flex;justify-content:space-between;font-size:11px}

/* ---------- 课程列表 ---------- */
.course-list{display:flex;flex-direction:column;gap:12px}
.course-item{background:#fff;border-radius:var(--radius);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow)}
.ci-bar{width:4px;border-radius:2px;align-self:stretch;min-height:44px;flex:0 0 4px}
.ci-main{flex:1;min-width:0}
.ci-name{font-size:15px;font-weight:600}
.ci-meta{font-size:12px;color:var(--sub);margin-top:4px}
.ci-next{font-size:11px;color:var(--faint);margin-top:6px}
.ci-count{font-size:12px;font-weight:600;color:var(--sub);flex:0 0 auto}

/* ---------- 手机 ---------- */
@media (max-width:900px){
  body{background:var(--canvas)}
  .app{flex-direction:column;min-height:100vh;padding-bottom:96px}
  .sidebar{display:none}
  .topbar{height:auto;padding:14px 16px;flex-direction:column;align-items:stretch;gap:10px}
  .top-actions{justify-content:space-between;flex-wrap:wrap;row-gap:8px}
  #timePreset{order:3;flex:1 1 100%;max-width:none;min-width:0}
  .view{padding:14px 16px 20px}
  .columns{flex-direction:column}
  .col-side{width:100%;max-width:100%;min-width:0}
  .hero{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .hero-right{align-items:flex-start}
  .track{width:100%}
  .hero-num{font-size:46px}
  .hero-name{font-size:22px}
  .grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cell{min-height:78px;font-size:11px;line-height:15px;padding:6px}
  .cell.head{min-height:44px}
  .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;padding:8px 16px 20px;background:linear-gradient(180deg,rgba(245,246,248,0) 0%,var(--canvas) 45%);z-index:20}
  .tab-pill{display:flex;gap:4px;background:#fff;border:1px solid var(--stroke);border-radius:36px;padding:4px;box-shadow:var(--shadow)}
  .tab{flex:1;height:54px;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8A90A0}
  .tab svg{width:18px;height:18px}
  .tab span{font-size:10px;font-weight:500}
  .tab.active{background:var(--dark);color:#fff}
  .tab.active span{font-weight:600}
}
@media (max-width:420px){
  .weekstrip{gap:4px}
  .ws-item{height:52px;border-radius:12px}
}