/* Zheoyoo 桌面：Win11 风格。颜色都走变量，深浅色在下面两段里换。 */
:root {
  --accent: #0067c0;
  --accent-text: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --on-accent: #fff;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", "Noto Sans Mono CJK SC", monospace;
  --text: #1b1b1b;
  --text-2: #5c5c5c;
  --text-3: #8a8a8a;
  --bg-win: #f3f3f3;
  --bg-card: #fbfbfb;
  --bg-card-2: #f6f6f6;
  --bg-hover: rgba(0, 0, 0, .04);
  --bg-press: rgba(0, 0, 0, .025);
  --bg-sel: color-mix(in srgb, var(--accent) 14%, transparent);
  --stroke: rgba(0, 0, 0, .08);
  --stroke-2: rgba(0, 0, 0, .14);
  --input-line: rgba(0, 0, 0, .45);
  --acrylic: rgba(238, 238, 238, .82);
  --acrylic-2: rgba(249, 249, 249, .9);
  --taskbar: rgba(240, 240, 240, .84);
  --shadow-win: 0 12px 40px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-win-idle: 0 6px 22px rgba(0, 0, 0, .12);
  --shadow-fly: 0 8px 32px rgba(0, 0, 0, .2);
  --ok: #0f7b0f;
  --warn: #9d5d00;
  --bad: #c42b1c;
  --ok-bg: #dff6dd;
  --warn-bg: #fff4ce;
  --bad-bg: #fde7e9;
  --chart-grid: rgba(0, 0, 0, .08);
  --scroll: rgba(0, 0, 0, .28);
  --wall-a: #cfdcf0;
  --wall-b: #e9eef6;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-text: color-mix(in srgb, var(--accent) 55%, white);
    --text: #ffffff;
    --text-2: #c5c5c5;
    --text-3: #9a9a9a;
    --bg-win: #202020;
    --bg-card: #2b2b2b;
    --bg-card-2: #262626;
    --bg-hover: rgba(255, 255, 255, .06);
    --bg-press: rgba(255, 255, 255, .04);
    --bg-sel: color-mix(in srgb, var(--accent) 30%, transparent);
    --stroke: rgba(255, 255, 255, .08);
    --stroke-2: rgba(255, 255, 255, .14);
    --input-line: rgba(255, 255, 255, .55);
    --acrylic: rgba(36, 36, 36, .82);
    --acrylic-2: rgba(44, 44, 44, .92);
    --taskbar: rgba(28, 28, 28, .84);
    --shadow-win: 0 12px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-win-idle: 0 6px 22px rgba(0, 0, 0, .35);
    --shadow-fly: 0 8px 32px rgba(0, 0, 0, .5);
    --ok: #6ccb5f;
    --warn: #fce100;
    --bad: #ff99a4;
    --ok-bg: #393d1b;
    --warn-bg: #433519;
    --bad-bg: #442726;
    --chart-grid: rgba(255, 255, 255, .09);
    --scroll: rgba(255, 255, 255, .3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --accent-text: color-mix(in srgb, var(--accent) 55%, white);
  --text: #ffffff;
  --text-2: #c5c5c5;
  --text-3: #9a9a9a;
  --bg-win: #202020;
  --bg-card: #2b2b2b;
  --bg-card-2: #262626;
  --bg-hover: rgba(255, 255, 255, .06);
  --bg-press: rgba(255, 255, 255, .04);
  --bg-sel: color-mix(in srgb, var(--accent) 30%, transparent);
  --stroke: rgba(255, 255, 255, .08);
  --stroke-2: rgba(255, 255, 255, .14);
  --input-line: rgba(255, 255, 255, .55);
  --acrylic: rgba(36, 36, 36, .82);
  --acrylic-2: rgba(44, 44, 44, .92);
  --taskbar: rgba(28, 28, 28, .84);
  --shadow-win: 0 12px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-win-idle: 0 6px 22px rgba(0, 0, 0, .35);
  --shadow-fly: 0 8px 32px rgba(0, 0, 0, .5);
  --ok: #6ccb5f;
  --warn: #fce100;
  --bad: #ff99a4;
  --ok-bg: #393d1b;
  --warn-bg: #433519;
  --bad-bg: #442726;
  --chart-grid: rgba(255, 255, 255, .09);
  --scroll: rgba(255, 255, 255, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font: 14px/1.43 var(--font);
  color: var(--text);
  background: #0b1e3d;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: default; }
svg { display: block; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 6px; border: 4px solid transparent; background-clip: padding-box; min-height: 30px; }
::-webkit-scrollbar-thumb:hover { border-width: 3px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
.selectable, .selectable * { user-select: text; -webkit-user-select: text; }

/* ---------- 壁纸 ---------- */
.wallpaper { position: fixed; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: filter .4s, transform .4s; }
.wallpaper[data-wp="bloom"] { background-image: url(../wp/bloom-light.svg); }
.wallpaper[data-wp="glow"] { background: radial-gradient(60% 80% at 75% 30%, #b9a3ff 0%, transparent 60%), radial-gradient(70% 90% at 20% 80%, #8ec5ff 0%, transparent 60%), linear-gradient(135deg, #e8e4ff, #d3e7ff); }
.wallpaper[data-wp="aurora"] { background: radial-gradient(70% 60% at 30% 20%, #6fe0c2 0%, transparent 60%), radial-gradient(60% 70% at 80% 60%, #4f9df5 0%, transparent 60%), linear-gradient(160deg, #d9f5ec, #cfe0f7); }
.wallpaper[data-wp="dusk"] { background: radial-gradient(60% 70% at 70% 30%, #ffb48a 0%, transparent 60%), radial-gradient(70% 70% at 25% 75%, #f78fb3 0%, transparent 60%), linear-gradient(150deg, #ffe7d6, #f6d5e6); }
.wallpaper[data-wp="plain"] { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 35%, #e9eef6), color-mix(in srgb, var(--accent) 15%, #f4f6fa)); }
/* AI 机器人：three.js 画在 .robot-canvas 里（js/robot.js），canvas 出来之前 / 没有 WebGL / 设置页缩略图都用这张截图 */
.wallpaper[data-wp="robot"] { background: #030913 url(../wp/robot.jpg) center / cover no-repeat; }
.robot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s; }
.robot-canvas.on { opacity: 1; }
/* AI 科技：不放图，深海军蓝底 + 一团强调色的光（深浅色都一样） */
.wallpaper[data-wp="tech"] { background: radial-gradient(55% 65% at 76% 36%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%), radial-gradient(60% 60% at 12% 92%, rgba(110, 80, 255, .12) 0%, transparent 70%), linear-gradient(160deg, #071224, #02060f); }
:root[data-theme="dark"] .wallpaper[data-wp="bloom"] { background-image: url(../wp/bloom-dark.svg); }
:root[data-theme="dark"] .wallpaper[data-wp="glow"] { background: radial-gradient(60% 80% at 75% 30%, #4b2fb0 0%, transparent 60%), radial-gradient(70% 90% at 20% 80%, #0d4fa3 0%, transparent 60%), linear-gradient(135deg, #120d2b, #071a36); }
:root[data-theme="dark"] .wallpaper[data-wp="aurora"] { background: radial-gradient(70% 60% at 30% 20%, #0f7a63 0%, transparent 60%), radial-gradient(60% 70% at 80% 60%, #1a4f9a 0%, transparent 60%), linear-gradient(160deg, #04201b, #071630); }
:root[data-theme="dark"] .wallpaper[data-wp="dusk"] { background: radial-gradient(60% 70% at 70% 30%, #a6461f 0%, transparent 60%), radial-gradient(70% 70% at 25% 75%, #8a2353 0%, transparent 60%), linear-gradient(150deg, #2a120c, #22101e); }
:root[data-theme="dark"] .wallpaper[data-wp="plain"] { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 40%, #0d1424), color-mix(in srgb, var(--accent) 18%, #0a0f1a)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wallpaper[data-wp="bloom"] { background-image: url(../wp/bloom-dark.svg); }
  :root:not([data-theme="light"]) .wallpaper[data-wp="glow"] { background: radial-gradient(60% 80% at 75% 30%, #4b2fb0 0%, transparent 60%), radial-gradient(70% 90% at 20% 80%, #0d4fa3 0%, transparent 60%), linear-gradient(135deg, #120d2b, #071a36); }
  :root:not([data-theme="light"]) .wallpaper[data-wp="aurora"] { background: radial-gradient(70% 60% at 30% 20%, #0f7a63 0%, transparent 60%), radial-gradient(60% 70% at 80% 60%, #1a4f9a 0%, transparent 60%), linear-gradient(160deg, #04201b, #071630); }
  :root:not([data-theme="light"]) .wallpaper[data-wp="dusk"] { background: radial-gradient(60% 70% at 70% 30%, #a6461f 0%, transparent 60%), radial-gradient(70% 70% at 25% 75%, #8a2353 0%, transparent 60%), linear-gradient(150deg, #2a120c, #22101e); }
  :root:not([data-theme="light"]) .wallpaper[data-wp="plain"] { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 40%, #0d1424), color-mix(in srgb, var(--accent) 18%, #0a0f1a)); }
}
body.locked .wallpaper.blur { filter: blur(28px) saturate(1.1); transform: scale(1.08); }

/* ---------- 锁屏 / 登录 ---------- */
.lock { position: fixed; inset: 0; z-index: 9000; color: #fff; display: flex; flex-direction: column; align-items: center; transition: opacity .35s; }
.lock.hide { opacity: 0; pointer-events: none; }
.lock::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); transition: background .4s; }
.lock.login::before { background: rgba(0, 0, 0, .32); }
.lock-clock { position: relative; margin-top: 13vh; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.lock-clock .t { font-size: clamp(64px, 11vw, 112px); font-weight: 600; letter-spacing: -1px; line-height: 1.05; }
.lock-clock .d { font-size: clamp(16px, 2.2vw, 22px); font-weight: 500; }
.lock-hint { position: absolute; bottom: 9vh; font-size: 14px; opacity: .85; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.lock.login .lock-clock { transform: translateY(-40px); opacity: 0; pointer-events: none; }
.lock.login .lock-hint { display: none; }
.lock-panel { position: absolute; top: 50%; left: 50%; width: min(360px, calc(100vw - 32px)); transform: translate(-50%, -42%); display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.lock.login .lock-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.avatar { width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 46px; font-weight: 600; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset; overflow: hidden; }
.avatar svg { width: 60%; height: 60%; }
.lock-name { font-size: 26px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); min-height: 36px; }
.lock-field { width: 100%; display: flex; align-items: stretch; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); border-bottom-color: rgba(255, 255, 255, .7); border-radius: 4px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lock-field:focus-within { background: rgba(255, 255, 255, .95); border-bottom: 2px solid var(--accent); }
.lock-field input { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: #fff; padding: 0 12px; font-size: 15px; }
.lock-field:focus-within input { color: #1b1b1b; }
.lock-field input::placeholder { color: rgba(255, 255, 255, .8); }
.lock-field:focus-within input::placeholder { color: #6b6b6b; }
.lock-field button { width: 38px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; }
.lock-field:focus-within button { color: #1b1b1b; }
.lock-field button:hover { background: rgba(0, 0, 0, .06); }
.lock-field button.go { background: rgba(255, 255, 255, .18); }
.lock-field:focus-within button.go { background: var(--accent); color: #fff; }
.lock-code { letter-spacing: 10px; text-align: center; font-size: 22px !important; font-variant-numeric: tabular-nums; }
.lock-code::placeholder { letter-spacing: 2px; font-size: 15px; }
.lock-msg { min-height: 20px; font-size: 13px; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.lock-msg.err { color: #ffd5d0; }
.lock-link { background: none; border: 0; color: #fff; opacity: .85; font-size: 13px; padding: 4px 8px; border-radius: 4px; text-decoration: underline; text-underline-offset: 3px; }
.lock-link:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.lock-sub { font-size: 14px; text-align: center; opacity: .95; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.lock-setup { width: min(440px, calc(100vw - 32px)); background: var(--acrylic-2); color: var(--text); border-radius: 8px; padding: 22px 24px; box-shadow: var(--shadow-fly); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); text-shadow: none; }
.lock-setup h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.lock-setup ol { margin: 8px 0 12px; padding-left: 20px; color: var(--text-2); }
.lock-setup ol li { margin: 4px 0; }
.lock-setup .qr { display: flex; gap: 16px; align-items: center; margin: 10px 0 14px; }
.lock-setup .qr img { width: 150px; height: 150px; background: #fff; border-radius: 6px; padding: 4px; flex: none; }
.lock-setup .secret { font: 13px/1.5 var(--mono); word-break: break-all; background: var(--bg-card-2); border: 1px solid var(--stroke); border-radius: 4px; padding: 6px 8px; }
.lock-busy { width: 28px; height: 28px; }
.welcome { position: fixed; inset: 0; z-index: 8999; display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); pointer-events: none; transition: opacity .35s; }

/* 转圈：Win11 的点点 */
.spin { width: 28px; height: 28px; animation: spin 1s linear infinite; }
.spin circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 40 100; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 桌面 ---------- */
.desktop { position: fixed; inset: 0 0 48px 0; z-index: 1; }
.desk-icons { position: absolute; inset: 8px 0 0 6px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 98px); grid-auto-columns: 84px; gap: 2px; align-content: start; justify-content: start; pointer-events: none; }
.desk-icon { pointer-events: auto; width: 82px; height: 96px; border: 1px solid transparent; border-radius: 4px; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 2px 2px; text-align: center; font-size: 12px; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.desk-icon .ic { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.desk-icon .ic svg { width: 100%; height: 100%; }
.desk-icon span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.desk-icon:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
.desk-icon.sel, .desk-icon:focus-visible { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .38); outline: 0; }
.tile-letter { width: 100%; height: 100%; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; text-shadow: none; position: relative; overflow: hidden; }
.tile-letter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%); }
.tile-letter .arrow { position: absolute; left: 2px; bottom: 2px; width: 14px; height: 14px; background: #fff; border-radius: 3px; color: #1b1b1b; display: grid; place-items: center; z-index: 1; }
.tile-letter .arrow svg { width: 10px; height: 10px; }
.start-app .tile-letter, .start-rec .tile-letter { font-size: 15px; border-radius: 7px; }
.start-app .tile-letter .arrow, .start-rec .tile-letter .arrow { display: none; }

/* ---------- 窗口 ---------- */
.win { position: absolute; display: flex; flex-direction: column; background: var(--bg-win); border-radius: 8px; box-shadow: var(--shadow-win-idle), 0 0 0 1px var(--stroke-2); overflow: hidden; min-width: 320px; min-height: 200px; transition: opacity .16s, transform .16s cubic-bezier(.2, .8, .2, 1); }
.win.active { box-shadow: var(--shadow-win), 0 0 0 1px var(--stroke-2); }
.win.opening { opacity: 0; transform: scale(.94); }
.win.closing { opacity: 0; transform: scale(.94); pointer-events: none; }
.win.minimizing { opacity: 0; transform: translateY(40%) scale(.6); pointer-events: none; transition: opacity .2s, transform .22s ease-in; }
.win.min { display: none; }
.win.max { border-radius: 0; box-shadow: none; }
.win.anim-geo { transition: left .18s, top .18s, width .18s, height .18s, opacity .16s, transform .16s; }
.win-title { height: 40px; flex: none; display: flex; align-items: center; gap: 10px; padding-left: 14px; background: transparent; touch-action: none; }
.win-title .ic { width: 16px; height: 16px; flex: none; }
.win-title .ic svg { width: 16px; height: 16px; }
.win-title .tt { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.win:not(.active) .win-title .tt, .win:not(.active) .win-title .ic, .win:not(.active) .wc { opacity: .55; }
.wc { width: 46px; height: 40px; flex: none; border: 0; background: transparent; display: grid; place-items: center; color: var(--text); }
.wc svg { width: 10px; height: 10px; }
.wc:hover { background: var(--bg-hover); }
.wc.close:hover { background: #c42b1c; color: #fff; }
.wc.close:active { background: #c84031; }
.win-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.rz { position: absolute; z-index: 5; touch-action: none; }
.rz.n { top: -3px; left: 8px; right: 8px; height: 7px; cursor: n-resize; }
.rz.s { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: s-resize; }
.rz.e { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: e-resize; }
.rz.w { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: w-resize; }
.rz.ne { right: -3px; top: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.rz.nw { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.rz.se { right: -3px; bottom: -3px; width: 12px; height: 12px; cursor: se-resize; }
.rz.sw { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: sw-resize; }
.win.max .rz { display: none; }
.snap-preview { position: absolute; z-index: 4999; border-radius: 8px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, .2); transition: all .15s; pointer-events: none; }
.drag-shield { position: fixed; inset: 0; z-index: 99999; }

/* ---------- 任务栏 ---------- */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 48px; z-index: 6000; background: var(--taskbar); backdrop-filter: blur(30px) saturate(1.3); -webkit-backdrop-filter: blur(30px) saturate(1.3); border-top: 1px solid var(--stroke); display: flex; align-items: center; color: var(--text); }
.tb-left { position: absolute; left: 6px; top: 4px; bottom: 4px; display: flex; align-items: center; }
.tb-center { margin: 0 auto; display: flex; align-items: center; gap: 4px; height: 100%; max-width: calc(100% - 420px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tb-center::-webkit-scrollbar { display: none; }
.tb-right { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px; padding-right: 0; }
.tb-btn { position: relative; width: 40px; height: 40px; flex: none; border: 0; border-radius: 4px; background: transparent; display: grid; place-items: center; transition: background .1s; }
.tb-btn:hover, .tb-btn.open { background: var(--bg-hover); box-shadow: 0 0 0 1px var(--stroke) inset; }
.tb-btn:active .ic { transform: scale(.88); }
.tb-btn .ic { width: 24px; height: 24px; transition: transform .1s; }
.tb-btn .ic svg { width: 24px; height: 24px; }
.tb-btn .dot { position: absolute; bottom: 2px; left: 50%; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: var(--text-3); transition: width .2s, margin .2s, background .2s; }
.tb-btn.focused .dot { width: 16px; margin-left: -8px; background: var(--accent-text); }
.tb-btn.focused { background: var(--bg-hover); box-shadow: 0 0 0 1px var(--stroke) inset; }
.tb-widget { height: 40px; border: 0; background: transparent; border-radius: 4px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--text); text-align: left; }
.tb-widget:hover { background: var(--bg-hover); }
.tb-widget .ic { width: 26px; height: 26px; }
.tb-widget .l1 { font-size: 12px; font-weight: 600; line-height: 16px; }
.tb-widget .l2 { font-size: 12px; color: var(--text-2); line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-tray { height: 40px; border: 0; background: transparent; border-radius: 4px; display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--text); }
.tb-tray:hover, .tb-tray.open { background: var(--bg-hover); }
.tb-tray svg { width: 16px; height: 16px; }
.tb-net { font-size: 11px; line-height: 14px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-clock { height: 40px; border: 0; background: transparent; border-radius: 4px; padding: 0 10px; font-size: 12px; line-height: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.tb-clock:hover, .tb-clock.open { background: var(--bg-hover); }
.tb-showdesk { width: 12px; height: 48px; border: 0; background: transparent; border-left: 1px solid var(--stroke-2); }
.tb-showdesk:hover { background: var(--bg-hover); }
.tb-sep { width: 1px; height: 24px; background: var(--stroke-2); margin: 0 4px; flex: none; }

/* ---------- 弹出面板（开始菜单、日历、快速设置、右键菜单） ---------- */
.flyout { position: fixed; z-index: 7000; background: var(--acrylic); backdrop-filter: blur(40px) saturate(1.4); -webkit-backdrop-filter: blur(40px) saturate(1.4); border: 1px solid var(--stroke-2); border-radius: 8px; box-shadow: var(--shadow-fly); color: var(--text); transition: opacity .16s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.flyout.hide { opacity: 0; transform: translateY(16px); pointer-events: none; }
.start { left: 50%; bottom: 58px; width: min(640px, calc(100vw - 16px)); height: min(720px, calc(100vh - 72px)); margin-left: max(-320px, calc(-50vw + 8px)); display: flex; flex-direction: column; overflow: hidden; }
.start-search { margin: 28px 32px 12px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--stroke); border-bottom-color: var(--input-line); }
.start-search:focus-within { border-bottom: 2px solid var(--accent); }
.start-search svg { width: 16px; height: 16px; opacity: .7; }
.start-search input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; }
.start-main { flex: 1; overflow-y: auto; padding: 0 32px 16px; }
.start-h { display: flex; justify-content: space-between; align-items: center; margin: 14px 8px 8px; font-weight: 600; }
.start-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.start-app { border: 0; background: transparent; border-radius: 4px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; padding: 4px; color: var(--text); text-align: center; }
.start-app:hover, .start-app.kb { background: var(--bg-hover); }
.start-app .ic { width: 32px; height: 32px; }
.start-app .ic svg { width: 32px; height: 32px; }
.start-app span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.start-rec button { border: 0; background: transparent; border-radius: 4px; display: flex; gap: 12px; align-items: center; padding: 8px 10px; text-align: left; color: var(--text); min-width: 0; }
.start-rec button:hover { background: var(--bg-hover); }
.start-rec .ic { width: 32px; height: 32px; flex: none; }
.start-rec .ic svg { width: 32px; height: 32px; }
.start-rec b { display: block; font-weight: 400; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-rec small { display: block; color: var(--text-2); font-size: 12px; }
.start-empty { color: var(--text-2); padding: 12px 8px; font-size: 13px; }
.start-foot { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: rgba(0, 0, 0, .03); border-top: 1px solid var(--stroke); }
.start-user { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 6px 10px; border-radius: 4px; color: var(--text); }
.start-user:hover { background: var(--bg-hover); }
.start-user .av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; }
.icon-btn { width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; display: grid; place-items: center; color: var(--text); flex: none; }
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:disabled { opacity: .4; }
.icon-btn svg { width: 16px; height: 16px; }

.menu { position: fixed; z-index: 8000; min-width: 200px; padding: 4px; background: var(--acrylic-2); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--stroke-2); border-radius: 8px; box-shadow: var(--shadow-fly); animation: menuIn .14s cubic-bezier(.2, .8, .2, 1); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.menu button { width: 100%; height: 34px; border: 0; background: transparent; border-radius: 4px; display: flex; align-items: center; gap: 12px; padding: 0 12px; text-align: left; color: var(--text); white-space: nowrap; }
.menu button:hover:not(:disabled) { background: var(--bg-hover); }
.menu button:disabled { opacity: .45; }
.menu button svg { width: 16px; height: 16px; flex: none; }
.menu button .sp { width: 16px; flex: none; }
.menu button.danger { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--stroke-2); margin: 4px 2px; }

.cal { right: 12px; bottom: 58px; width: 334px; padding: 14px 16px 16px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-head b { font-weight: 600; font-size: 14px; padding-left: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-grid span { height: 40px; display: grid; place-items: center; border-radius: 50%; }
.cal-grid .wd { height: 28px; color: var(--text-2); font-size: 12px; }
.cal-grid .other { color: var(--text-3); }
.cal-grid .today { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cal-big { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0 6px 10px; border-bottom: 1px solid var(--stroke); }

.qs { right: 12px; bottom: 58px; width: 360px; padding: 16px; }
.qs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qs-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.qs-tile button { width: 100%; height: 48px; border-radius: 6px; border: 1px solid var(--stroke); background: var(--bg-card); display: grid; place-items: center; color: var(--text); }
.qs-tile button svg { width: 18px; height: 18px; }
.qs-tile button.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.qs-tile button:hover { filter: brightness(.97); }
.qs-stats { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--stroke); display: grid; gap: 10px; }
.qs-row { display: grid; grid-template-columns: 56px 1fr 74px; align-items: center; gap: 10px; font-size: 12px; }
.qs-row .v { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- 通知 ---------- */
.toasts { position: fixed; right: 12px; bottom: 60px; z-index: 9500; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; width: min(364px, calc(100vw - 24px)); background: var(--acrylic-2); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--stroke-2); border-radius: 8px; box-shadow: var(--shadow-fly); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; animation: toastIn .3s cubic-bezier(.2, .8, .2, 1); color: var(--text); }
.toast.out { opacity: 0; transform: translateX(30px); transition: all .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px); } }
.toast .ti { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.toast .tx { flex: 1; min-width: 0; font-size: 13px; word-break: break-word; }
.toast .tx b { display: block; font-weight: 600; margin-bottom: 2px; }
.toast.ok .ti { color: var(--ok); }
.toast.error .ti { color: var(--bad); }
.toast.info .ti { color: var(--accent-text); }

/* ---------- 对话框 ---------- */
.smoke { position: fixed; inset: 0; z-index: 8500; background: rgba(0, 0, 0, .3); display: grid; place-items: center; animation: fadeIn .15s; padding: 16px; }
@keyframes fadeIn { from { opacity: 0; } }
.dialog { width: min(var(--dw, 440px), 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bg-win); border-radius: 8px; box-shadow: var(--shadow-fly), 0 0 0 1px var(--stroke-2); overflow: hidden; animation: dlgIn .2s cubic-bezier(.2, .8, .2, 1); color: var(--text); }
@keyframes dlgIn { from { opacity: 0; transform: scale(1.04); } }
.dialog-body { padding: 24px 24px 20px; background: var(--bg-card); overflow: auto; }
.dialog-body h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.dialog-body p { margin: 0 0 8px; color: var(--text); }
.dialog-foot { padding: 20px 24px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--stroke); }
.dialog-foot .btn { flex: 1; max-width: 180px; }

/* ---------- 通用控件 ---------- */
.btn { height: 32px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--stroke); border-bottom-color: var(--stroke-2); background: var(--bg-card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-card) 92%, var(--text)); }
.btn:active:not(:disabled) { color: var(--text-2); }
.btn:disabled { opacity: .5; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 90%, white); }
.btn.danger { background: #c42b1c; border-color: transparent; color: #fff; }
.btn.sub { border-color: transparent; background: transparent; }
.btn.sub:hover:not(:disabled) { background: var(--bg-hover); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.inp, .sel { height: 32px; border-radius: 4px; border: 1px solid var(--stroke); border-bottom-color: var(--input-line); background: var(--bg-card); padding: 0 10px; outline: 0; min-width: 0; color: var(--text); }
.inp:focus, .sel:focus { border-bottom: 2px solid var(--accent); background: var(--bg-win); }
.inp.full { width: 100%; }
.sel { padding-right: 6px; }
label.field { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.switch { position: relative; width: 40px; height: 20px; flex: none; border-radius: 10px; border: 1px solid var(--input-line); background: transparent; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-2); transition: left .15s, background .15s, transform .1s; }
.switch[aria-checked="true"] { background: var(--accent); border-color: transparent; }
.switch[aria-checked="true"]::after { left: 23px; background: var(--on-accent); }
.switch:active::after { transform: scaleX(1.25); }
.sw-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.seg { display: inline-flex; border: 1px solid var(--stroke); border-radius: 4px; overflow: hidden; background: var(--bg-card); }
.seg button { border: 0; background: transparent; height: 30px; padding: 0 12px; color: var(--text); }
.seg button + button { border-left: 1px solid var(--stroke); }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; white-space: nowrap; background: var(--bg-card-2); border: 1px solid var(--stroke); color: var(--text-2); }
.badge svg { width: 12px; height: 12px; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.loading { display: grid; place-items: center; padding: 40px; color: var(--text-2); gap: 10px; }
.empty { padding: 40px 20px; text-align: center; color: var(--text-2); }
.err-box { margin: 16px; padding: 12px 14px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); }

/* 应用里的命令栏 / 表格 */
.cmdbar { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 12px; min-height: 48px; border-bottom: 1px solid var(--stroke); background: var(--bg-win); flex-wrap: wrap; }
.cmdbar .btn.sub { height: 32px; }
.cmdbar .vsep { width: 1px; height: 20px; background: var(--stroke-2); margin: 0 6px; }
.scroll { flex: 1; min-height: 0; overflow: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--bg-win); text-align: left; font-weight: 400; color: var(--text-2); padding: 8px 12px; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
.tbl th.sortable:hover { background: var(--bg-hover); }
.tbl th .arr { display: inline-block; margin-left: 4px; font-size: 10px; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--stroke); vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--bg-hover); }
.tbl tr.sel td { background: var(--bg-sel); }
.tbl .r { text-align: right; }
.tbl td.num, .tbl td.r, .tbl td.nw { white-space: nowrap; }
.tbl .ellip { max-width: 1px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card { background: var(--bg-card); border: 1px solid var(--stroke); border-radius: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- 手机 ---------- */
body.mobile .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; box-shadow: none; }
body.mobile .rz { display: none; }
body.mobile .wc.max { display: none; }
body.mobile .tb-left, body.mobile .tb-net { display: none; }
body.mobile .tb-center { max-width: calc(100% - 150px); margin-left: 4px; }
body.mobile .tb-tray > span:not(:last-child) { display: none; }
body.mobile .tb-clock { padding: 0 6px; }
body.mobile .start { left: 8px; right: 8px; width: auto; margin-left: 0; height: calc(100% - 72px); }
body.mobile .start-search { margin: 18px 16px 10px; }
body.mobile .start-main { padding: 0 12px 12px; }
body.mobile .start-grid { grid-template-columns: repeat(4, 1fr); }
body.mobile .start-rec { grid-template-columns: 1fr; }
body.mobile .start-foot { padding: 0 16px; }
body.mobile .cal, body.mobile .qs { right: 8px; left: 8px; width: auto; }
body.mobile .desk-icons { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 84px); grid-template-rows: none; grid-auto-rows: 98px; justify-content: center; inset: 12px 8px 0; }
body.mobile .toasts { left: 12px; right: 12px; align-items: stretch; }
body.mobile .toast { width: auto; }

/* ---------- 「AI 机器人」「AI 科技」壁纸配套的科技风（2026-10-20） ----------
   只在选了这两张壁纸时生效（<html data-wp="robot|tech">）。深色模式下窗口换成深海军蓝；
   任务栏、当前窗口、弹出面板、桌面图标带一圈强调色的光；锁屏换 Orbitron 数字钟（字体 OFL，fonts/）。 */
@font-face { font-family: "Orbitron"; src: url(../fonts/orbitron-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url(../fonts/orbitron-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root:is([data-wp="robot"], [data-wp="tech"]) {
  --tech: color-mix(in srgb, var(--accent) 45%, #3fe6ff);
  --tech-line: color-mix(in srgb, var(--tech) 42%, transparent);
}
:root:is([data-wp="robot"], [data-wp="tech"])[data-theme="dark"] {
  --bg-win: #0c1320;
  --bg-card: #131c2b;
  --bg-card-2: #101827;
  --bg-hover: rgba(120, 200, 255, .07);
  --bg-press: rgba(120, 200, 255, .045);
  --stroke: rgba(120, 200, 255, .1);
  --stroke-2: rgba(120, 200, 255, .18);
  --acrylic: rgba(10, 18, 31, .84);
  --acrylic-2: rgba(14, 23, 38, .93);
  --taskbar: rgba(5, 11, 22, .78);
}
@media (prefers-color-scheme: dark) {
  :root:is([data-wp="robot"], [data-wp="tech"]):not([data-theme="light"]) {
    --bg-win: #0c1320;
    --bg-card: #131c2b;
    --bg-card-2: #101827;
    --bg-hover: rgba(120, 200, 255, .07);
    --bg-press: rgba(120, 200, 255, .045);
    --stroke: rgba(120, 200, 255, .1);
    --stroke-2: rgba(120, 200, 255, .18);
    --acrylic: rgba(10, 18, 31, .84);
    --acrylic-2: rgba(14, 23, 38, .93);
    --taskbar: rgba(5, 11, 22, .78);
  }
}
:root:is([data-wp="robot"], [data-wp="tech"]) .taskbar { border-top-color: var(--tech-line); box-shadow: 0 -12px 32px -24px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .tb-btn.focused .dot { background: var(--tech); box-shadow: 0 0 6px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .win.active { box-shadow: var(--shadow-win), 0 0 0 1px var(--tech-line), 0 0 34px -14px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .win.max { box-shadow: none; }
:root:is([data-wp="robot"], [data-wp="tech"]) .flyout { border-color: var(--tech-line); box-shadow: var(--shadow-fly), 0 0 34px -16px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .desk-icon { text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6); }
:root:is([data-wp="robot"], [data-wp="tech"]) .desk-icon:hover { background: color-mix(in srgb, var(--tech) 14%, transparent); border-color: color-mix(in srgb, var(--tech) 35%, transparent); }
:root:is([data-wp="robot"], [data-wp="tech"]) .desk-icon.sel, :root:is([data-wp="robot"], [data-wp="tech"]) .desk-icon:focus-visible { background: color-mix(in srgb, var(--tech) 24%, transparent); border-color: color-mix(in srgb, var(--tech) 60%, transparent); box-shadow: 0 0 16px -6px var(--tech); }
/* 锁屏 */
:root[data-wp="robot"] .lock::before { background: linear-gradient(90deg, rgba(1, 5, 12, .5), rgba(1, 5, 12, .05) 60%); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock.login::before { background: rgba(1, 6, 14, .5); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-clock::before { content: "ZHEOYOO · AI CONSOLE"; display: block; margin-bottom: 18px; font: 700 12px/1 "Orbitron", var(--font); letter-spacing: .42em; color: var(--tech); text-shadow: 0 0 10px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-clock .t { font-family: "Orbitron", var(--font); font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px color-mix(in srgb, var(--tech) 70%, transparent), 0 0 2px rgba(255, 255, 255, .8); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-clock .d { margin-top: 6px; letter-spacing: .3em; color: color-mix(in srgb, var(--tech) 30%, #fff); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-clock::after { content: ""; display: block; width: min(340px, 70vw); height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--tech), transparent); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-hint { letter-spacing: .2em; color: color-mix(in srgb, var(--tech) 35%, #fff); }
@media (min-aspect-ratio: 23/20) {   /* 横屏：机器人在右边，钟挪到左边 */
  :root[data-wp="robot"] .lock-clock { align-self: flex-start; margin: 25vh 0 0 9vw; text-align: left; }
  :root[data-wp="robot"] .lock-clock::after { margin-left: 0; background: linear-gradient(90deg, var(--tech), transparent); }
}
:root:is([data-wp="robot"], [data-wp="tech"]) .avatar { background: rgba(8, 22, 40, .6); box-shadow: 0 0 0 1px var(--tech-line) inset, 0 0 32px -8px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-field { background: rgba(6, 16, 30, .55); border-color: var(--tech-line); border-bottom-color: var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-field:focus-within { background: rgba(8, 20, 36, .92); border-bottom-color: var(--tech); box-shadow: 0 0 20px -8px var(--tech); }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-field:focus-within input, :root:is([data-wp="robot"], [data-wp="tech"]) .lock-field:focus-within button { color: #fff; }
:root:is([data-wp="robot"], [data-wp="tech"]) .lock-field:focus-within input::placeholder { color: rgba(255, 255, 255, .55); }

/* 2026-11-01 桌面上的文件（服务器 /root/Desktop）：拖进来上传、拖出去下载 */
.desktop.drop-hi::after { content: '松开鼠标：放到服务器桌面上'; position: absolute; inset: 8px; border: 2px dashed rgba(255, 255, 255, .85); border-radius: 12px; background: rgba(0, 103, 192, .14); color: #fff; font-size: 18px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); display: grid; place-items: end center; padding-bottom: 28px; pointer-events: none; z-index: 1; }
.desk-icon.desk-file.drop-into { background: rgba(255, 255, 255, .34); border-color: #fff; }
.desk-icon .ic.thumb { display: grid; place-items: center; }
.desk-icon .ic.thumb img { max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); object-fit: cover; }
.desk-up { position: absolute; right: 16px; bottom: 16px; z-index: 5; width: 320px; max-width: calc(100% - 32px); padding: 12px 14px; border-radius: 10px; background: var(--bg-card); color: var(--text); box-shadow: 0 8px 28px rgba(0, 0, 0, .3); font-size: 13px; display: grid; gap: 8px; }
.desk-up .bar { height: 6px; border-radius: 3px; background: var(--stroke); overflow: hidden; }
.desk-up .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }