/* m1-shell.css —— v8 桌面外壳（M1-13 / S20-A）
 * ============================================================================================
 * 只在 ≥1024px 的桌面断点生效；移动端沿用 style.css 的浅色布局与底部标签栏。
 * v8 令牌在 style.css 的 `:root`（`--v8-*`，值逐字取自 docs/design/v8/交互原型/style.css:1）。
 *
 * 布局：左侧栏 208px（1024–1279 用 180px）+ 顶栏 72px + 内容区；六入口在侧栏，
 * 顶栏右侧是资产快捷入口 / 设置 / 默认芥子。各页内容仍由各机负责，这里只动外壳。
 * 断点：1024×640 · 1280×720 · 1440×900；125%/150% 缩放由浏览器改有效视口，布局用相对宽度。
 */

.m1-topbar { display: none; }

/* v8 桌面壳在两种情况下生效：
   ① 布局宽度 ≥1024（正常 100%）；
   ② 浏览器缩放 125%/150% 时 CSS 视口会缩到 819/683，但 devicePixelRatio（CSS resolution）
      同步变大 ⇒ 用 (宽 ≥680 且 resolution ≥1.25dppx) 保住桌面壳，不让缩放退化成手机底栏。 */
@media (min-width: 1024px), (min-width: 680px) and (min-resolution: 1.25dppx) {
  body.v8-shell {
    background: var(--v8-bg);
    color: var(--v8-text);
    font-size: var(--v8-text-base);
    color-scheme: dark;
  }
  body.v8-shell .app {
    max-width: none;
    margin: 0 0 0 var(--v8-sidebar-min);
    min-height: 100vh;
  }
  /* 顶栏：72px，固定在内容区顶部 */
  body.v8-shell .m1-topbar {
    position: sticky; top: 0; z-index: 20;
    height: var(--v8-topbar);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
    background: var(--v8-side);
    border-bottom: 1px solid var(--v8-line);
  }
  body.v8-shell .m1-crumb { display: flex; align-items: center; gap: 12px; font-size: 13px; }
  body.v8-shell .m1-brand { font-size: 23px; letter-spacing: 3px; color: var(--v8-text); }
  body.v8-shell .m1-crumb span { color: var(--v8-muted); }
  body.v8-shell .m1-crumb b { font-weight: 550; color: var(--v8-text); }
  body.v8-shell .m1-topbar-tools { display: flex; align-items: center; gap: 12px; }
  body.v8-shell .m1-tool {
    min-height: 36px; padding: 0 14px; border-radius: 9px;
    background: var(--v8-panel2); color: var(--v8-text);
    border: 1px solid var(--v8-line); font-size: 13px;
  }
  body.v8-shell .m1-tool:hover { filter: brightness(1.12); }
  body.v8-shell .m1-default-jiezi {
    font-size: 11px; color: var(--v8-mint);
    border: 1px solid var(--v8-mint); background: var(--v8-mint);
    border-radius: 30px; padding: 5px 10px; white-space: nowrap;
  }
  /* 侧栏：208px（窄桌面 180px），替代底部标签栏 */
  body.v8-shell .tabbar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 30;
    width: var(--v8-sidebar-min); max-width: none; margin: 0;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 18px 12px; gap: 4px;
    background: var(--v8-side); border-top: 0; border-right: 1px solid var(--v8-line);
    backdrop-filter: none;
  }
  body.v8-shell .tabbar .tab {
    display: flex; align-items: center; justify-content: flex-start; gap: 14px;
    width: 100%; min-height: 46px; padding: 12px 14px;
    border-radius: 10px; color: var(--v8-muted); font-size: 14px; text-align: left;
    background: transparent;
  }
  body.v8-shell .tabbar .tab span { font-size: 14px; }
  body.v8-shell .tabbar .tab.active {
    color: var(--v8-text); background: var(--v8-mint); box-shadow: inset 0 0 0 1px var(--v8-mint);
  }
  body.v8-shell .tabbar .tab.active::after { display: none; }
  /* 内容区不再给底部标签栏留 84px */
  body.v8-shell .pages { padding-bottom: 0; }
  body.v8-shell .page { min-height: calc(100vh - var(--v8-topbar)); }
}

@media (min-width: 1280px) {
  body.v8-shell .app { margin-left: var(--v8-sidebar); }
  body.v8-shell .tabbar { width: var(--v8-sidebar); }
}

/* 1440×900：内容最宽 1180 + 左右呼吸，不拉成一条超长行 */
@media (min-width: 1440px) {
  body.v8-shell .page { max-width: 1180px; }
}

/* 低高度桌面（1024×640）：侧栏/顶栏不变，页面内容自己滚动，不裁切 */
@media (min-width: 1024px) and (max-height: 700px) {
  body.v8-shell .page { padding-top: 20px; padding-bottom: 20px; }
}

/* ★ M1-13 第 3 轮返工：页面内容也吃 v8 令牌（不再只换外壳）。
   只在 v8-shell 作用域覆盖，移动端仍是原来的浅色令牌。 */
body.v8-shell {
  --bg-base: var(--v8-bg);
  --bg-card: var(--v8-panel);
  --card: var(--v8-panel);
  --ink: var(--v8-text);
  --ink-sub: var(--v8-muted);
  --ink-muted: var(--v8-muted);
  --border: var(--v8-line);
  --text-base: var(--v8-text-base);
  --on-action: var(--v8-text);
  --action: var(--v8-mint);
  --action-hover: var(--v8-lilac);
}