/* ============================================================
 * 桐灼 GEO · layout 层
 * 由 design-tokens.css 静态拆出（2026-08-24），级联顺序等价，零视觉变化。
 * 加载顺序：tokens → components → theme → layout → demo
 * ============================================================ */

/* --- 第 21 节（原 design-tokens.css） --- */
/* ============ 21. 布局重做（demo：侧边栏分组导航 + 终端顶栏） ============ */

/* ---- 侧边栏 ---- */
.sidebar { padding: 16px 12px 14px; }
.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.brand-logo-image { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.brand-version {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--purple-soft);
  border: 1px solid rgba(184, 68, 47, .2);
  padding: 1px 5px;
  border-radius: 4px;
}
.nav-section { margin-bottom: 12px; }
.nav-label {
  padding: 8px 8px 5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.nav-main a,
.nav-secondary a,
.nav-effect-toggle {
  margin: 1px 0;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 13px;
  min-height: 32px;
}
.nav-secondary { padding: 0; border-top: 0; }
.nav-secondary .nav-label { padding-top: 4px; }
.nav-effect-toggle { border-radius: 7px; }
.nav-effect-items { padding-left: 10px; }
.nav-effect-items a { margin: 1px 0; border-radius: 7px; }
.nav-spacer { display: none; }

/* ---- 顶栏 ---- */
.topbar {
  height: 52px;
  padding: 0 24px;
  gap: 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  position: sticky; top: 0; z-index: 50;
}
.topbar h1 { display: none; }
.topbar .crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  white-space: nowrap;
}
.crumb-brand { color: var(--muted-2); font-weight: 500; }
.crumb-sep { color: var(--line-strong); }
.crumb-now { color: var(--ink-strong); font-weight: 550; }
.crumb-live {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  color: #1f7a45;
  background: rgba(46, 138, 84, .1);
  border: 1px solid rgba(46, 138, 84, .22);
}
.crumb-live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2e8a54;
  box-shadow: 0 0 4px rgba(46, 138, 84, .8);
  animation: tz-pulse 1.5s ease-in-out infinite;
}
@keyframes tz-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.85); }
}
.topbar-search {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  width: 280px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--muted-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s;
}
.topbar-search:hover { border-color: #c4beb2; }
.topbar-search:focus-within,
.topbar-search:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(184, 68, 47, .12);
  outline: none;
}
.topbar-search .search-mark { font-size: 13px; color: var(--muted-2); }
.topbar-search kbd {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted-2);
  background: var(--panel-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  border: 1px solid var(--line);
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: #37332c;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.topbar-btn:hover { border-color: #c4beb2; background: var(--panel-soft); }
.topbar-btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.topbar-btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.assistant-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11.5px;
}
.assistant-pill i { background: #2e8a54; box-shadow: 0 0 4px rgba(46,138,84,.7); }
.avatar-button {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 7px;
   background: linear-gradient(135deg, #c9573f, #a03a26);
   color: #fff;
   font-size: 11.5px;
   font-weight: 600;
   box-shadow: 0 2px 8px rgba(160, 58, 38, .25);
   cursor: pointer;
}
.menu-button { display: none; }
@media (max-width: 900px) {
  .menu-button { display: inline-flex; }
  .topbar-search { width: 180px; }
}


/* --- 第 22 节（原 design-tokens.css） --- */
/* ============ 22. 工作台组件（demo 终端风） ============ */

/* 页面头（工作台） */
.page-head-terminal { margin-bottom: 28px; max-width: 640px; }
.page-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  margin-bottom: 6px;
  color: var(--blue);
}
.page-head-terminal h2 { margin: 0; color: var(--ink-strong); font-size: 26px; font-weight: 620; letter-spacing: -.6px; line-height: 1.3; }
.page-head-terminal p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* KPI 行 */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.kpi {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
  color: inherit;
}
.kpi:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(184, 68, 47, .5), transparent);
  border-radius: 10px 10px 0 0;
}
.kpi.accent-violet::before { background: linear-gradient(90deg, transparent, rgba(109, 93, 246, .5), transparent); }
.kpi.accent-blue::before { background: linear-gradient(90deg, transparent, rgba(2, 132, 199, .5), transparent); }
.kpi.accent-amber::before { background: linear-gradient(90deg, transparent, rgba(168, 116, 15, .5), transparent); }
.kpi-head { display: flex; justify-content: space-between; align-items: center; }
.kpi-label { font-size: 11.5px; font-weight: 600; color: #37332c; }
.kpi-icon {
  width: 22px; height: 22px;
  background: #f3f4f6;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px;
  color: var(--blue);
}
.kpi.accent-violet .kpi-icon { color: #6d5df6; background: rgba(109, 93, 246, .06); border-color: rgba(109, 93, 246, .18); }
.kpi.accent-blue .kpi-icon { color: #0284c7; background: rgba(2, 132, 199, .06); border-color: rgba(2, 132, 199, .18); }
.kpi.accent-amber .kpi-icon { color: #a8740f; background: rgba(168, 116, 15, .07); border-color: rgba(168, 116, 15, .2); }
.kpi-val {
  font-size: 25px;
  font-weight: 640;
  color: var(--ink-strong);
  margin: 8px 0 4px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.kpi-desc { font-size: 11.5px; color: var(--muted); }
.kpi-foot {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  color: #37332c;
  display: flex; justify-content: space-between;
}
.kpi-foot .up { color: var(--blue); }

/* 运营闭环流程条 */
.flow-card { margin-bottom: 14px; }
.flow-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.flow-title { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.flow-sub { font-size: 11.5px; color: var(--muted-2); }
.flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.flow-step {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: #fbf8f2;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
  position: relative;
  cursor: pointer;
  transition: all .15s;
}
.flow-step:hover { border-color: var(--line-strong); }
.flow-step .n { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10px; color: var(--muted-2); }
.flow-step .t { font-size: 12.5px; font-weight: 550; color: var(--ink); margin: 6px 0 4px; }
.flow-step .m { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10.5px; color: var(--muted-2); }
.flow-step.active {
  background: linear-gradient(135deg, rgba(184, 68, 47, .07), rgba(184, 68, 47, .02));
  border-color: rgba(184, 68, 47, .25);
}
.flow-step.active .n { color: var(--blue); }
.flow-step.active .t { color: var(--ink-strong); }
.flow-arrow {
  position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%);
  color: var(--line-strong);
  z-index: 2;
  font-size: 12px;
  pointer-events: none;
}
.flow-step:last-child .flow-arrow { display: none; }

/* 双栏布局 */
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-bottom: 14px; }

/* 卡片头（demo 结构） */
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.card-title { font-size: 13.5px; font-weight: 500; color: var(--ink-strong); display: flex; align-items: center; gap: 8px; }
.card-title .live-dot {
  width: 6px; height: 6px;
  background: #2e8a54;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(46, 138, 84, .7);
  animation: tz-pulse 1.5s ease-in-out infinite;
}
.card-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; line-height: 1.6; }
.card-tag {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--blue);
  padding: 2px 7px;
  background: var(--purple-soft);
  border: 1px solid rgba(184, 68, 47, .2);
  border-radius: 4px;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* 数据概览 mini 卡 */
.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 18px; }
.mini { padding: 0 14px; border-left: 1px solid var(--line); }
.mini:first-child { padding-left: 0; border-left: 0; }
.mini span { display: block; font-size: 11px; color: var(--muted); }
.mini b { display: block; margin-top: 6px; font-size: 20px; font-weight: 620; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }

/* 趋势折线 */
.trend-chart { width: 100%; height: 64px; display: block; }
.trend-chart .grid { stroke: rgba(184, 68, 47, .1); stroke-width: 1; }
.trend-chart .line { fill: none; stroke: #b8442f; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(184, 68, 47, .4)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: tz-draw-line 1.6s ease forwards .35s; }
.trend-chart .area { stroke: none; fill: rgba(184, 68, 47, .12); }

/* 待办列表 */
.todo { padding: 4px 0; }
.todo-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover { background: #fbfaf6; }
.todo-check {
  width: 15px; height: 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  flex-shrink: 0;
}
.todo-content { flex: 1; min-width: 0; }
.todo-title { display: block; font-size: 13.5px; font-weight: 550; color: var(--ink); }
.todo-sub { display: block; font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.todo-meta { display: flex; align-items: center; gap: 8px; }
.todo-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .05em;
}
.todo-tag.cyan { background: var(--purple-soft); color: var(--blue); border: 1px solid rgba(184, 68, 47, .2); }
.todo-tag.amber { background: var(--amber-soft); color: #8a5d0c; border: 1px solid rgba(168, 116, 15, .22); }
.todo-tag.muted { background: rgba(0, 0, 0, .045); color: var(--muted); border: 1px solid var(--line); }
.todo-count {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--muted);
  background: #f7f6f2;
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 28px; text-align: center;
}

/* 健康度 */
.health-card { padding: 18px; }
.health-top { text-align: center; padding: 4px 0 16px; }
.health-ring {
  width: 84px; height: 84px;
  margin: 0 auto 10px;
  position: relative;
}
.health-ring svg { transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(184, 68, 47, .3)); }
.health-ring .bg { fill: none; stroke: #e8e4dd; stroke-width: 6; }
.health-ring .fg { fill: none; stroke: url(#healthGrad); stroke-width: 6; stroke-linecap: round; }
.health-ring .label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.health-label { font-size: 13px; font-weight: 550; color: var(--ink); }
.health-sub { font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.health-list { padding: 0 2px 12px; }
.health-row {
  display: flex; align-items: center;
  padding: 7px 0;
  font-size: 12.5px;
}
.health-name { flex: 1; color: var(--ink); }
.health-bar {
  width: 110px;
  height: 3px;
  background: #f0ede6;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 12px;
}
.health-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #c9573f, #a03a26);
  border-radius: 2px;
}
.health-v {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--ink);
  min-width: 28px; text-align: right;
}

/* 系统状态格 */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.sys-cell { background: #fbfaf6; padding: 14px 16px; }
.sys-name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
.sys-status { font-size: 13.5px; font-weight: 550; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.sys-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.sys-status .dot.ok { background: #2e8a54; box-shadow: 0 0 6px rgba(46, 138, 84, .7); }
.sys-status .dot.warn { background: #a8740f; box-shadow: 0 0 6px rgba(168, 116, 15, .7); }
.sys-meta {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 5px;
}

/* 快捷开始 */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .12s;
}
.quick-action:hover { border-color: var(--line-strong); background: #f7f5ef; }
.quick-action > span { color: var(--blue); margin-bottom: 6px; }
.quick-action b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.quick-action small { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* 表格细节 */
.table-sub { font-size: 11px; color: var(--muted-2); }
.table-card .card-head { border-bottom-color: var(--line); }

/* 工作台卡片头（demo：h3 + sub 无分隔线） */
.card h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.1px;
  color: var(--ink-strong);
}
.card h3 .live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #2e8a54;
  box-shadow: 0 0 6px rgba(46, 138, 84, .7);
  animation: tz-pulse 1.5s ease-in-out infinite;
  vertical-align: 1px;
}
.card .sub {
  margin: 3px 0 16px;
  font-size: 11.5px;
  color: var(--muted-2);
}


/* --- 第 23 节（原 design-tokens.css） --- */
/* ============ 23. 侧边栏 demo 版（完整移植） ============ */
html body aside.sidebar {
  width: var(--sidebar-width);
  padding: 18px 8px 10px;
  background: transparent;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 14px;
  border-bottom: 0;
  margin-bottom: 0;
}
.sidebar .brand-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #c9573f, #a03a26);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(184, 68, 47, .3);
  flex-shrink: 0;
}
.sidebar .brand-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar .brand-text small {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--purple-soft);
  border: 1px solid rgba(184, 68, 47, .2);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}
.sidebar .sidebar-close { margin-left: auto; }
.sidebar .nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: visible;
}
.sidebar .nav-section { margin-bottom: 2px; }
.sidebar .nav-label {
  padding: 10px 10px 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1px 0;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--nav-muted);
  font-size: 12.5px;
  font-weight: 450;
  text-decoration: none;
  position: relative;
  min-height: 30px;
  background: transparent;
  box-shadow: none;
  transition: background .12s, color .12s;
}
.sidebar .nav-item:hover { background: var(--nav-soft); color: var(--ink); }
.sidebar .nav-item.active {
  background: var(--purple-soft);
  color: #a03a26;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(184, 68, 47, .14);
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 0 2px 2px 0;
  background: var(--blue);
}
.sidebar .nav-item .ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--muted-2);
}
.sidebar .nav-item .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .nav-item:hover .ic { color: var(--muted); }
.sidebar .nav-item.active .ic { color: var(--blue); }
.sidebar .nav-item .badge {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  padding: 1px 6px;
  background: #f7f6f2;
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 22px;
  text-align: center;
}
.sidebar .nav-item.active .badge {
  color: var(--blue);
  background: rgba(184, 68, 47, .08);
  border-color: rgba(184, 68, 47, .2);
}
.sidebar .nav-item-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 10px;
  color: var(--muted-2);
}
.sidebar .nav-item-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2e8a54;
  box-shadow: 0 0 5px rgba(46, 138, 84, .7);
}
.sidebar .nav-dot { position: static; margin-left: auto; }
.sidebar .nav-effect-group { position: relative; }
.sidebar .nav-effect-toggle { list-style: none; }
.sidebar .nav-effect-toggle::-webkit-details-marker { display: none; }
.sidebar .nav-effect-toggle .nav-effect-chevron {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  color: var(--muted-2);
  transition: transform .15s;
}
.sidebar .nav-effect-group[open] .nav-effect-chevron { transform: rotate(180deg); }
.sidebar .nav-effect-items { padding-left: 6px; }
.sidebar .nav-effect-items .nav-item { min-height: 28px; padding: 5px 8px; font-size: 12px; }
.sidebar .nav-promo {
  margin: 14px 4px 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafaf9;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.sidebar .nav-promo b { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink-strong); }
.sidebar .nav-promo p { margin: 4px 0 10px; font-size: 10.5px; line-height: 1.55; color: var(--muted-2); }
.sidebar .nav-promo-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s;
}
.sidebar .nav-promo-go:hover { background: var(--blue-hover); }

/* ============================================================
 * 26. 侧边栏 promo 卡片悬浮化（2026-08-26，紧凑 v2）
 * 侧边栏主体恢复贴边；仅 promo 卡片与侧边栏视觉分离：
 * 白底圆角 + 柔和投影，悬浮于导航流之上，吸底可见。
 * ============================================================ */
.sidebar .nav .nav-promo {
  margin: 10px 8px 10px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 19, 13, .04), 0 8px 24px rgba(23, 19, 13, .08);
  margin-top: auto;
  position: sticky;
  bottom: 10px;
  z-index: 2;
}

/* 桌面段（821-980px）回收让位：dashboard.css 的 270px+margin:0 在窄 desktop 会
   推挤所有非 dashboard 路由的主区域被侧栏盖住。这里统一恢复 210px 侧栏 + 210px 让位。 */
@media (min-width: 821px) and (max-width: 980px) {
  .sidebar { width: var(--sidebar-width); }
  .main-column { margin-left: var(--sidebar-width); }
}