/* Bundled CJK-friendly monospace (Noto Sans Mono CJK SC, OFL). Subset to the
   BMP (all common + uncommon Chinese incl. Ext-A), shipped locally as woff2 and
   loaded via file:// — NO network. Fixes Windows where ui-monospace→Consolas has
   no Chinese glyphs and CJK fell back to a non-monospace font (misaligned/ugly). */
@font-face {
  font-family: "Noto Sans Mono CJK SC";
  src: url("./fonts/NotoMonoSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { --mono: "Noto Sans Mono CJK SC", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

/* ── Palette (restrained: one accent + neutrals + sparse semantics) ──
   accent  = brand blue (primary actions, version/update/local accents)
   brand gradient (blue→violet) = logo + primary CTA ONLY
   ok/danger = sparse semantic (live dot / destructive); amber retired. */
:root {
  --accent: #5b8df7;
  --accent-soft: rgba(91,141,247,.16);
  --accent-line: rgba(91,141,247,.32);
  --accent-text: #a5c4ff;
  --ok: #4ade80;
  --danger: #f7a3a3;
  --text: #e5e7eb;
  --text-dim: #9da7b3;
  --text-mute: #6b7280;
  --line: rgba(255,255,255,.08);
}
* { box-sizing: border-box; }
html, body, #root { margin: 0; height: 100%; }
/* Fixed-size window (930*640): the page itself never scrolls — only .main
   scrolls (overflow-y auto, custom scrollbar). */
html, body { overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: #07080c;
  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
}
.shell {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  -webkit-app-region: drag;
}
.shell--app {
  align-items: stretch; justify-content: stretch;
  flex-direction: row;          /* left column + right helper drawer */
  background: linear-gradient(180deg, #0b0d13 0%, #07080c 100%);
  overflow: hidden;             /* each column scrolls independently */
  -webkit-app-region: no-drag;
}
.shell__left {
  flex: 1 1 auto;
  min-width: 0;                 /* allow shrink, prevent grid blow-out */
  display: flex; flex-direction: column;
  overflow: hidden;             /* topbar fixed; only .main scrolls */
}
.helper-aside {
  flex: 0 0 auto;
  position: relative;
  background: #0f1115;
  border-left: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  min-width: 320px;
  z-index: 1;
}
/* Make the entire aside non-draggable so the webview / placeholder don't
   become drag-region by inheritance from shell--app. */
.helper-aside, .helper-aside * { -webkit-app-region: no-drag; }
.shell--app .main   { -webkit-app-region: no-drag; }
.shell--app .topbar { -webkit-app-region: drag; }
.shell--app .topbar .user-chip,
.shell--app .topbar .user-chip *,
.shell--app .topbar .btn-ghost { -webkit-app-region: no-drag; }
.glow {
  position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(91,141,247,0.20), transparent 60%),
    radial-gradient(closest-side at 30% 70%, rgba(167,139,250,0.13), transparent 65%);
  filter: blur(30px);
}

/* ── Login card ── */
.card {
  -webkit-app-region: no-drag;
  position: relative; z-index: 1;
  width: 380px; padding: 36px 36px 28px;
  background: linear-gradient(180deg, rgba(20,24,32,.85), rgba(13,16,22,.85));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5b8df7 0%, #a78bfa 100%);
  box-shadow: 0 8px 20px rgba(91,141,247,.35);
}
.brand-mark.sm { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.brand-mark.sm svg { width: 16px; height: 16px; }
.brand-text { line-height: 1.2; }
.brand-name { font-weight: 600; font-size: 15px; }
.brand-sub  { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.tagline { margin: 4px 0 0; color: #c7cdd6; font-size: 13.5px; text-align: center; line-height: 1.55; }

.btn-primary {
  -webkit-app-region: no-drag;
  margin-top: 4px;
  appearance: none; width: 100%; height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #5b8df7 0%, #4570d8 100%);
  color: #fff; border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.18) inset,
              0 10px 22px rgba(91,141,247,.28);
  transition: transform 80ms ease, filter 120ms ease;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { filter: grayscale(.4) brightness(.7); cursor: default; }

.btn-ghost {
  -webkit-app-region: no-drag;
  appearance: none;
  background: transparent; color: #9ca3af;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 6px 14px; font-size: 12.5px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.btn-ghost.sm { padding: 4px 10px; font-size: 11.5px; }
.btn-ghost:hover { color: #e5e7eb; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.btn-ghost:disabled { opacity: .4; cursor: default; }

/* modal 底部按钮区:.btn-primary 默认 width:100%(给登录全宽按钮),放进 flex 行会吃满宽
   把「取消」挤成最小宽 —— 这里强制主按钮内容宽、两个按钮都不收缩。 */
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.modal-actions .btn-primary { width: auto; margin-top: 0; padding: 0 18px; }
.modal-actions .btn-ghost, .modal-actions .btn-primary { flex: 0 0 auto; white-space: nowrap; }

/* Email magic-link device-poll login (cross-device). */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: #6b7280; font-size: 11.5px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.login-email-input {
  -webkit-app-region: no-drag;
  appearance: none; width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.03); color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
  transition: border-color 120ms ease, background 120ms ease;
}
.login-email-input::placeholder { color: #6b7280; }
.login-email-input:focus { outline: none; border-color: rgba(99,102,241,.55); background: rgba(255,255,255,.05); }

.hint { margin: 0; font-size: 11.5px; color: #6b7280; }
.spinner-row { display: inline-flex; align-items: center; gap: 8px; color: #c7cdd6; font-size: 13px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.error {
  width: 100%; font-size: 12px;
  color: #fca5a5;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
  padding: 8px 12px; border-radius: 8px;
  text-align: center; line-height: 1.5;
}

/* ── App shell (logged in) ── */
.topbar {
  -webkit-app-region: drag;
  position: relative; flex: 0 0 auto; z-index: 10;  /* pinned: .main scrolls under it */
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 12px;
  background: rgba(8,9,14,.6);
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
/* macOS hiddenInset traffic-light buttons sit top-left. Instead of squeezing
   the brand to their RIGHT (84px gutter), drop the whole header row BELOW them
   — logo/title and the user chip live on their own line under the red/yellow/
   green dots. Cleaner, and the brand isn't crammed beside the controls.
   Removed in fullscreen where the buttons hide. */
[data-platform="darwin"][data-fullscreen="0"] .topbar { padding-top: 34px; }
.brand-mini { display: inline-flex; align-items: center; gap: 10px; }
/* brand-mini 已移除(logo 在 tab-shell 的「我的团队」标签):topbar 只剩 user-chip,
   推到右侧(space-between 单子元素会贴左)。 */
.topbar .user-chip { margin-left: auto; }
.brand-mini .brand-name { font-size: 14px; }

.user-chip {
  -webkit-app-region: no-drag;
  display: inline-flex; align-items: center; gap: 10px;
}
.welcome {
  font-size: 12px; color: var(--text-dim);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  animation: fadein 200ms ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5b8df7, #a78bfa);
  font-size: 12px; font-weight: 600; color: #fff;
}
.user-name { font-size: 13px; color: #c7cdd6; }

/* user-chip dropdown (我的钱包 / HTTPS tip / 退出) */
.user-chip { position: relative; }
.user-chip__trigger {
  -webkit-app-region: no-drag;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; background: transparent;
  border-radius: 999px; padding: 3px 8px 3px 3px; cursor: pointer;
  transition: .12s;
}
.user-chip__trigger:hover,
.user-chip__trigger.is-open {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}
.user-chip__caret { font-size: 10px; color: #8a93a3; transition: transform .12s; }
.user-chip__trigger.is-open .user-chip__caret { transform: rotate(180deg); }
.user-chip__menu {
  position: absolute; top: 38px; right: 0; z-index: 30;
  min-width: 200px; padding: 6px;
  background: #1b2027; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 2px;
  animation: fadein 140ms ease;
}
.user-chip__menu-item {
  text-align: left; width: 100%;
  border: none; background: transparent; color: #d1d5db;
  border-radius: 8px; padding: 9px 11px; font-size: 13px;
  cursor: pointer; transition: .12s;
}
.user-chip__menu-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.user-chip__menu-item.is-danger { color: #f7a3a3; }
.user-chip__menu-item.is-danger:hover { background: rgba(239,68,68,.16); color: #fff; }
.user-chip__menu-sep { height: 1px; margin: 4px 2px; background: rgba(255,255,255,.08); }
/* cicy-desktop version — bottom of the avatar dropdown */
.user-chip__menu-version {
  margin-top: 4px; padding: 8px 11px 4px;
  font-size: 11px; color: #6b7280; text-align: center;
  font-variant-numeric: tabular-nums; user-select: text;
  border-top: 1px solid rgba(255,255,255,.06);
}
/* HTTPS audit tip, rendered as a flat menu row with an on/off switch */
.user-chip__mitm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: default;
}
.user-chip__mitm-row:hover { background: transparent; }
.user-chip__mitm-label { font-size: 13px; color: var(--text); }
/* mini toggle switch (开/关) */
.mini-switch {
  -webkit-app-region: no-drag;
  position: relative; flex: 0 0 auto;
  width: 36px; height: 20px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.08); cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.mini-switch.is-on { background: var(--accent); border-color: var(--accent); }
.mini-switch.is-busy { opacity: .6; cursor: default; }
.mini-switch:disabled { cursor: default; }
.mini-switch__knob {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.45);
  transition: transform .16s ease;
}
.mini-switch.is-on .mini-switch__knob { transform: translateX(16px); }
.mini-switch.is-busy .mini-switch__knob { animation: spin 1s linear infinite; }
.user-chip__mitm-note { margin: 0 4px; padding: 2px 4px 6px; font-size: 11px; color: var(--text-mute); }
.user-chip__mitm-err {
  margin: 2px 4px 6px; padding: 5px 8px; font-size: 11px;
  color: var(--danger); background: rgba(239,68,68,.1); border-radius: 6px; line-height: 1.4;
}

/* cloud team card: 账单 entry (top-right, beside trial badge) */
.bcard__top-right { display: inline-flex; align-items: center; gap: 6px; }
.bcard__billing-btn {
  -webkit-app-region: no-drag;
  border: 1px solid var(--line); background: transparent; color: var(--text-dim);
  border-radius: 7px; padding: 3px 9px; font-size: 11px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.bcard__billing-btn:hover { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }

.glow--app {
  inset: -10% -10% auto -10%;
  height: 50vh;
  background:
    radial-gradient(closest-side at 75% 0%, rgba(91,141,247,.18), transparent 65%),
    radial-gradient(closest-side at 20% 10%, rgba(167,139,250,.10), transparent 60%);
  filter: blur(40px);
}

.main {
  position: relative; z-index: 1;
  padding: 22px 32px 48px;
  width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;             /* the ONLY scroll container of the page */
}
/* Custom scrollbar for .main */
.main::-webkit-scrollbar { width: 8px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb {
  background: rgba(125,135,150,.30);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.main::-webkit-scrollbar-thumb:hover { background-color: rgba(125,135,150,.55); }

/* ── 全局自定义滚动条 ──────────────────────────────────────────────────────────
   Windows 默认滚动条又宽又丑(灰色方块),homepage 里所有滚动区(菜单/弹窗/抽屉/
   审计日志/列表…)统一成细圆角半透明滚动条。Electron=Chromium,::-webkit-scrollbar
   生效;scrollbar-* 是兜底。 */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(125,135,150,.30);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(125,135,150,.55); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(125,135,150,.35) transparent; }

/* ── Skeleton(首次加载占位)──────────────────────────────────────────────────── */
@keyframes cicy-shimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: calc(240px + 100%) 0; }
}
.skel {
  background-color: rgba(255,255,255,.05);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%);
  background-size: 240px 100%;
  background-repeat: no-repeat;
  animation: cicy-shimmer 1.25s ease-in-out infinite;
  border-radius: 8px;
}
.skel--avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.skel--name { width: 72px; height: 12px; border-radius: 6px; }
.skel--line { height: 12px; border-radius: 6px; }
.skel--cta { height: 34px; border-radius: 9px; margin-top: 16px; }
.user-chip__trigger--skel { display: inline-flex; align-items: center; gap: 10px; cursor: default; }
.bcard--skeleton { pointer-events: none; }
.bcard--skeleton__head { display: flex; align-items: center; gap: 12px; }
.bcard--skeleton__lines { flex: 1; min-width: 0; }

/* ── App 自更新 banner(顶部细条)──────────────────────────────────────────────── */
.update-banner {
  position: relative; flex: 0 0 auto;
  padding: 9px 14px 9px 16px; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(59,130,246,.10);                 /* available: accent tint */
}
.update-banner--ready       { background: rgba(34,197,94,.12); }
.update-banner--error       { background: rgba(239,68,68,.12); }
.update-banner--downloading { background: rgba(255,255,255,.05); }
.update-banner__row { display: flex; align-items: center; gap: 10px; }
.update-banner__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg,#3b82f6,#8b5cf6);
}
.update-banner--ready .update-banner__icon       { background: #22c55e; }
.update-banner--error .update-banner__icon       { background: #ef4444; }
.update-banner--downloading .update-banner__icon { background: transparent; color: #7aa2f7; }
.update-banner__text { flex: 1; min-width: 0; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.update-banner__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.update-banner__btn {
  border: none; border-radius: 7px; padding: 5px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; color: #fff; background: rgba(255,255,255,.12);
}
.update-banner__btn.is-accent { background: linear-gradient(135deg,#3b82f6,#8b5cf6); }
.update-banner__btn:hover { filter: brightness(1.12); }
.update-banner__x { border: none; background: transparent; color: #9aa0a6; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.update-banner__x:hover { color: #e6edf3; background: rgba(255,255,255,.08); }
.update-banner__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.update-banner__bar > span { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#8b5cf6); transition: width .2s ease; }

/* ── Tabs row ── */
.app__tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(20,24,32,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  align-self: flex-start;
  backdrop-filter: blur(10px);
}
.app__tab {
  -webkit-app-region: no-drag;
  appearance: none;
  background: transparent;
  color: #9ca3af;
  border: 0;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.15px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 120ms ease, background 120ms ease;
}
.app__tab:hover { color: #e5e7eb; background: rgba(255,255,255,.04); }
.app__tab.is-active {
  color: #fff;
  background: rgba(91,141,247,.18);
  box-shadow: 0 0 0 1px rgba(91,141,247,.3) inset;
}
.app__tab-count {
  font-size: 10.5px;
  color: #9ca3af;
  background: rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.app__tab.is-active .app__tab-count { background: rgba(91,141,247,.3); color: #fff; }
/* 整行:tab 药丸在左,「新加团队」顶到行尾 */
.app__tabsrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
/* 行尾"新加团队"动作按钮:独立强调色按钮,跟 tab 药丸区分开 */
.app__add-team {
  -webkit-app-region: no-drag;
  appearance: none; cursor: pointer;
  flex: none;
  color: #5b8df7; font-weight: 600; font-size: 12.5px;
  background: rgba(91,141,247,.10);
  border: 1px solid rgba(91,141,247,.35);
  border-radius: 9px; padding: 7px 14px;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.app__add-team:hover { color: #fff; background: rgba(91,141,247,.22); border-color: rgba(91,141,247,.65); }

/* ── Card grid ── */
.app__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 14px;
}

/* "+ New" tile — same footprint as a card so the grid stays uniform */
.add-card {
  -webkit-app-region: no-drag;
  appearance: none;
  width: 200px; height: 200px;
  background: transparent;
  border: 1.5px dashed rgba(255,255,255,.12);
  border-radius: 14px;
  color: #9ca3af;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.add-card:hover {
  border-color: rgba(91,141,247,.5);
  color: #e5e7eb;
  background: rgba(91,141,247,.05);
}
.add-card__plus {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  font-size: 22px; font-weight: 300;
  color: inherit;
}
.add-card__label { font-size: 13px; font-weight: 500; }

/* ── Helper onboarding card (special tile in the grid) ── */
.bcard--helper {
  background: linear-gradient(160deg, rgba(91,141,247,.16), rgba(167,139,250,.14) 60%, rgba(20,24,32,.55));
  border-color: rgba(167,139,250,.25);
}
.bcard--helper .bcard__accent { background: linear-gradient(90deg, #5b8df7, #a78bfa); opacity: 1; }
.bcard--helper:hover { border-color: rgba(167,139,250,.45); }
.bcard__pill--helper {
  background: rgba(167,139,250,.18);
  border-color: rgba(167,139,250,.3);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.bcard__helper-icon { font-size: 12px; filter: grayscale(.2); }
.bcard__badge--free {
  background: rgba(52,211,153,.15);
  color: #34d399;
  border: 1px solid rgba(52,211,153,.3);
}
.bcard__badge--trial {
  background: rgba(255,255,255,.06);
  color: var(--text-dim);
  border: 1px solid var(--line);
  font-size: 9.5px;
  letter-spacing: 0.3px;
  padding: 2px 7px;
}
.bcard__badge--local {
  background: rgba(91,141,247,.18);
  color: #a5c4ff;
  border: 1px solid rgba(91,141,247,.35);
  font-size: 9.5px;
  letter-spacing: 0.3px;
  padding: 2px 7px;
}
.bcard--helper .bcard__name { color: #f3f4f6; }
.bcard__desc {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #c7cdd6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard__fineprint {
  margin: 4px 0 0;
  font-size: 10.5px;
  color: #9ca3af;
  opacity: .8;
}
.bcard__cta--helper {
  background: rgba(255,255,255,.05);
  box-shadow: none;
}
.bcard__cta--helper:hover { background: var(--accent-soft); }

/* ── Helper drawer top bar (close button) ── */
.helper-aside__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.helper-aside__title { font-size: 12.5px; font-weight: 600; color: #c7cdd6; }
.helper-aside__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: #6b7280;
  font-size: 20px; line-height: 1;
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.helper-aside__close:hover { color: #e5e7eb; background: rgba(255,255,255,.06); }

/* Drawer floating alert — manual fallback to send "start" if the
   server-side helper-kick missed (rare: drawer reopened before webview
   connected). Anchored bottom of the drawer with 64 px side gutters so it
   floats over the webview without permanently eating vertical space. */
.helper-modal__backdrop {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  z-index: 20;
  animation: fadein 140ms ease;
  padding: 16px;
  pointer-events: auto;
}
.helper-modal {
  width: min(360px, 100%);
  background: linear-gradient(180deg, #1f2733, #1a2029);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 20px 22px 16px;
  color: #e5e7eb;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.6),
              0 1px 0 rgba(255,255,255,.08) inset;
  animation: fadein 180ms ease;
}
.helper-modal__title {
  font-size: 14px;
  font-weight: 600;
  color: #f3f4f6;
  margin-bottom: 8px;
}
.helper-modal__desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #b6bcc6;
  margin-bottom: 18px;
}
.helper-modal__desc code {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 1px 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  color: #e7eaef;
}
.helper-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.helper-modal__btn {
  appearance: none;
  background: rgba(255,255,255,.06);
  color: #d2d6dd;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
.helper-modal__btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.helper-modal__btn:active { transform: translateY(1px); }
.helper-modal__btn--ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,.55);
  margin-right: auto;
  padding-left: 4px; padding-right: 4px;
}
.helper-modal__btn--ghost:hover { background: transparent; color: rgba(255,255,255,.85); }
.helper-modal__btn--primary {
  background: linear-gradient(180deg, #5b8df7, #4570d8);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.helper-modal__btn--primary:hover {
  background: linear-gradient(180deg, #6c9af9, #5a82e0);
}
.helper-modal__btn:disabled { filter: grayscale(.4) brightness(.7); cursor: default; }

/* ── Right helper drawer interior ── */
.helper-placeholder {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 32px 40px;
  text-align: center;
  color: #9ca3af;
}
.helper-placeholder__mark {
  font-size: 48px;
  line-height: 1;
  filter: grayscale(.2);
  opacity: .85;
}
.helper-placeholder__title {
  margin: 0;
  font-size: 16px; font-weight: 600;
  color: #e5e7eb;
}
.helper-placeholder__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9ca3af;
  max-width: 320px;
}
.helper-placeholder__note {
  margin-top: 8px;
  font-size: 11px;
  color: #6b7280;
  padding: 4px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
}
.helper-placeholder__note code {
  font-family: var(--mono);
  font-size: 11px;
  color: #c7cdd6;
}

.section {
  background: linear-gradient(180deg, rgba(20,24,32,.72), rgba(13,16,22,.72));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 30px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  padding: 18px 18px 16px;
}
.section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  margin-bottom: 14px;
}
.section-icon { font-size: 14px; opacity: .8; }
.section-head h2 { margin: 0; font-size: 13.5px; font-weight: 600; color: #e5e7eb; letter-spacing: 0.2px; }
.section-sub { font-size: 12px; color: #6b7280; }
.section-body { display: flex; flex-direction: column; gap: 10px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 14px;
}

/* ── BackendCard (ported from workers/render.bak) ── */
.bcard {
  position: relative;
  width: 200px; height: 200px;
  background: rgba(20,24,32,.55);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  --brand: #5b8df7;        /* 本地 local */
  --accent-cloud: #f59e0b; /* 云端 cloud */
  --accent-custom: #8b5cf6;/* 自定义 custom (deeplink 远程节点) */
}
.bcard:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
}

.bcard__accent {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
  opacity: .9;
}
.bcard--cloud .bcard__accent { background: var(--accent-cloud); }
.bcard--custom .bcard__accent { background: var(--accent-custom); }
.bcard--dsh .bcard__accent { background: #4d6bfe; }
.bcard--dsh.bcard--online::before {
  background: radial-gradient(circle at center, rgba(77,107,254,.22) 0%, transparent 60%);
}

.bcard--online::before {
  content: "";
  position: absolute;
  bottom: -40%; right: -20%;
  width: 140%; height: 100%;
  background: radial-gradient(circle at center, rgba(91,141,247,.22) 0%, transparent 60%);
  pointer-events: none;
  opacity: .55;
}
.bcard--cloud.bcard--online::before {
  background: radial-gradient(circle at center, rgba(245,158,11,.22) 0%, transparent 60%);
}
.bcard--custom.bcard--online::before {
  background: radial-gradient(circle at center, rgba(139,92,246,.22) 0%, transparent 60%);
}

.bcard__top {
  display: flex; align-items: center; justify-content: space-between;
  /* Above .bcard__body (which is also position:relative z-index:1) so the ⋯
     dropdown menu, which lives in here, paints OVER the card body instead of
     being covered by it. */
  position: relative; z-index: 5;
}
.bcard__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: rgba(8,9,14,.7);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  color: #9ca3af;
}
.bcard__pill svg { display: block; }
.bcard__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6b7280;
  flex-shrink: 0;
}
.bcard__dot[data-tone="ok"]   { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,.25); }
.bcard__dot[data-tone="off"]  { background: #6b7280; }
.bcard__dot[data-tone="warn"] { background: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,.25); }
.bcard__dot[data-tone="err"]  { background: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,.25); }

.bcard__badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.bcard__body {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 12px; padding-bottom: 12px;
  position: relative; z-index: 1;
  min-width: 0;
}
.bcard__name {
  margin: 0;
  font-size: 17px; font-weight: 700;
  color: #e5e7eb;
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard__host {
  font-family: var(--mono);
  font-size: 11px;
  color: #9ca3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard__meta {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.bcard__chip {
  font-size: 10.5px;
  color: #9ca3af;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  padding: 2px 7px;
  border-radius: 999px;
}

/* One calm, uniform 打开 button for EVERY card type — no loud blue/amber/purple
   fills or colored shadows (打开 别用不同颜色太醒目的 btn). Quiet neutral
   surface that warms to the single accent on hover. */
.bcard__cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 38px;
  border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255,255,255,.05); color: var(--text);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: transform 80ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
  box-shadow: none;
}
/* card-type variants inherit the same quiet style (overrides removed) */
.bcard--cloud .bcard__cta,
.bcard--custom .bcard__cta {
  background: rgba(255,255,255,.05); box-shadow: none;
}
.bcard__cta:hover {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text);
}
.bcard__cta:active { transform: translateY(1px); }
.bcard__cta:disabled {
  background: rgba(255,255,255,.03);
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.06);
}

.empty {
  font-size: 12.5px; color: #6b7280;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 10px;
}

/* ---- 本地团队卡片：cicy-code 守护进程维护 (⋯ 菜单 + 新版提示) ---- */
.bcard__menuwrap { position: relative; }
.bcard__kebab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #8b949e;
  cursor: pointer; transition: .15s;
}
.bcard__kebab:hover:not(:disabled) {
  color: #e6edf3; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}
.bcard__kebab:disabled { opacity: .5; cursor: default; }
/* amber dot on the ⋯ when an update is available */
.bcard__kebab.has-dot { color: #e6edf3; }
.bcard__kebab.has-dot::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b; box-shadow: 0 0 0 2px #0f1115;
}
.bcard__menu {
  position: absolute; top: 32px; right: 0; z-index: 20;
  min-width: 150px; padding: 5px;
  background: #1b2027; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 2px;
}
.bcard__menu-item {
  text-align: left; width: 100%;
  border: none; background: transparent; color: #d1d5db;
  border-radius: 7px; padding: 7px 10px; font-size: 12.5px;
  cursor: pointer; transition: .12s;
}
.bcard__menu-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.bcard__menu-item.is-accent { color: var(--accent-text); font-weight: 600; }
.bcard__menu-item.is-accent:hover { background: var(--accent-soft); color: #c7dbff; }
.bcard__menu-item.is-danger { color: #f7a3a3; }
.bcard__menu-item.is-danger:hover { background: rgba(239,68,68,.16); color: #fff; }
/* Plain divider line in the DockerCard ⋯ menu (cicy-code ops 上 / Docker 容器 ops 下). */
.bcard__menu-sep { height: 1px; margin: 5px 10px; background: rgba(255,255,255,.08); }
/* Switch-style menu item (Chrome 代理): label 左 + 小开关右. */
.bcard__menu-item--switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bcard__switch { flex: none; width: 30px; height: 17px; border-radius: 999px; background: rgba(255,255,255,.16); position: relative; transition: background .15s; }
.bcard__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.bcard__switch.is-on { background: var(--accent-text, #4f8cff); }
.bcard__switch.is-on::after { transform: translateX(13px); }
/* Portaled to document.body to escape .bcard's overflow:hidden (which clipped the
   dropdown). Inline top/left position it under the kebab; here just a high
   stacking order (below toast/drawer) + word-wrapping items so nothing overflows. */
.bcard__menu--portal { z-index: 9990; }
.bcard__menu--portal .bcard__menu-item { white-space: normal; word-break: break-word; }
/* ---- Windows Docker 一键安装/启动卡 (DockerSetup) ---- */
.docker-setup {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(91,141,247,.08), rgba(20,24,32,.5));
  border: 1px solid rgba(91,141,247,.22);
  border-radius: 12px;
}
.docker-setup__head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.docker-setup__title { font-size: 13.5px; font-weight: 600; color: #e6edf3; }
.docker-setup__sub { font-size: 11.5px; color: #9ca3af; line-height: 1.5; }
.docker-setup__steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.docker-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #9ca3af;
}
.docker-step__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #3a4150; transition: .2s;
}
.docker-step__label { color: #c7cdd6; min-width: 96px; }
.docker-step__msg { color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docker-step__pct { margin-left: auto; font-variant-numeric: tabular-nums; color: #5b8df7; flex: none; }
.docker-step.is-running .docker-step__dot { background: #5b8df7; box-shadow: 0 0 0 3px rgba(91,141,247,.18); animation: dpulse 1.2s ease-in-out infinite; }
.docker-step.is-running .docker-step__label { color: #e6edf3; }
.docker-step.is-done .docker-step__dot,
.docker-step.is-skip .docker-step__dot { background: #10b981; }
.docker-step.is-skip { opacity: .7; }
.docker-step.is-retry .docker-step__dot { background: #f59e0b; }
.docker-step.is-error .docker-step__dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.docker-step.is-error .docker-step__msg { color: #f7a3a3; }
@keyframes dpulse { 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.docker-setup__actions { display: flex; gap: 8px; align-items: center; }
.docker-setup__actions .btn-primary { width: auto; padding: 7px 16px; font-size: 12.5px; }

/* version from /api/health 探活 */
.bcard__ver {
  font-size: 11px;
  color: #8b949e;
  font-variant-numeric: tabular-nums;
}
/* "新版 vX.Y.Z" chip on the card face */
.bcard__chip--new {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.bcard__opmsg {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px;
  font-size: 11.5px; color: #9ca3af;
  word-break: break-word;
}

/* Toast: floating op feedback (更新/启动/重启 progress + result), bottom-right,
   stacked. Replaces the old in-card progress line — feedback floats over the UI. */
.toast-host {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 30px 10px 12px;
  font-size: 12.5px; line-height: 1.4; color: var(--text, #e6eaf0);
  background: rgba(22, 26, 33, 0.96);
  border: 1px solid rgba(125, 135, 150, 0.22);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  animation: toast-in 0.18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast[data-status="error"] { border-left-color: #f87171; }
.toast[data-status="error"] .toast__msg { color: #f87171; }
.toast[data-status="done"] { border-left-color: #4ade80; }
.toast[data-status="done"] .toast__msg { color: #4ade80; }
.toast__msg { word-break: break-word; }
.toast__x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 15px; line-height: 1; color: var(--text-dim, #9da7b3);
}
.toast__x:hover { color: var(--text, #e6eaf0); }
.toast__bar {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(125, 135, 150, 0.25); overflow: hidden;
}
.toast__bar > span {
  display: block; height: 100%; border-radius: 2px;
  background: var(--accent, #3b82f6);
  transition: width 0.25s ease;
}

/* ── 更新 drawer: bottom sheet with live log + 阶段 + 重试 ───────────────── */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 8, 12, 0.5); backdrop-filter: blur(2px);
  animation: drawer-fade 0.18s ease;
}
@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  width: min(560px, calc(100vw - 24px)); max-height: 76vh;
  display: flex; flex-direction: column;
  margin-bottom: 12px;
  background: rgba(20, 24, 31, 0.98);
  border: 1px solid rgba(125, 135, 150, 0.2);
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: drawer-up 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes drawer-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid rgba(125, 135, 150, 0.14);
}
.drawer__title { display: flex; align-items: center; gap: 11px; }
.drawer__spark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 14px; font-weight: 700;
  background: rgba(91, 141, 247, 0.16); color: var(--brand, #5b8df7);
}
.drawer__spark--done { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.drawer__spark--error { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.drawer__h { font-size: 13.5px; font-weight: 650; color: var(--text, #e6eaf0); }
.drawer__sub { font-size: 11.5px; color: var(--text-dim, #9da7b3); margin-top: 1px; }
.drawer__x {
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  font-size: 19px; line-height: 1; color: var(--text-dim, #9da7b3); border-radius: 6px;
}
.drawer__x:hover:not(:disabled) { color: var(--text, #e6eaf0); background: rgba(125, 135, 150, 0.12); }
.drawer__x:disabled { opacity: 0.35; cursor: default; }

/* app 自更新:抽屉里的醒目下载进度条(粗、圆角、渐变 + 流光)*/
.drawer__dl { padding: 14px 18px 6px; }
.drawer__dl-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.drawer__dl-pct { font-size: 22px; font-weight: 700; color: #e6edf3; letter-spacing: .5px; }
.drawer__dl-stats { font-size: 12px; color: var(--text-dim, #9da7b3); }
.drawer__dl-track { position: relative; height: 9px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.drawer__dl-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#3b82f6,#8b5cf6);
  transition: width .25s ease; position: relative; overflow: hidden;
}
.drawer__dl-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  background-size: 80px 100%; background-repeat: no-repeat;
  animation: cicy-shimmer 1.1s linear infinite;
}

.drawer__steps { display: flex; align-items: center; gap: 0; padding: 14px 18px 4px; }
.drawer__step { display: flex; align-items: center; gap: 7px; color: var(--text-dim, #9da7b3); font-size: 12px; }
.drawer__step-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
  border: 1.5px solid rgba(125, 135, 150, 0.35); color: var(--text-dim, #9da7b3);
  background: transparent; flex: none;
}
.drawer__step-bar { width: 30px; height: 1.5px; background: rgba(125, 135, 150, 0.25); margin: 0 8px; }
.drawer__step.is-active .drawer__step-dot { border-color: var(--brand, #5b8df7); color: var(--brand, #5b8df7); box-shadow: 0 0 0 3px rgba(91, 141, 247, 0.18); }
.drawer__step.is-active .drawer__step-label { color: var(--text, #e6eaf0); }
.drawer__step.is-done .drawer__step-dot { border-color: #4ade80; color: #06210f; background: #4ade80; }
.drawer__step.is-done .drawer__step-bar { background: rgba(74, 222, 128, 0.5); }
.drawer__step.is-error .drawer__step-dot { border-color: #f87171; color: #f87171; }

.drawer__log {
  flex: 1; min-height: 96px; overflow-y: auto;
  margin: 10px 14px; padding: 10px 12px;
  background: rgba(10, 12, 16, 0.7); border: 1px solid rgba(125, 135, 150, 0.12); border-radius: 10px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
}
/* Custom thin scrollbar for the install log (scroll 用自定义 style) */
.drawer__log--scroll { max-height: 168px; scrollbar-width: thin; scrollbar-color: rgba(125,135,150,.4) transparent; }
.drawer__log--scroll::-webkit-scrollbar { width: 7px; }
.drawer__log--scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.drawer__log--scroll::-webkit-scrollbar-thumb { background: rgba(125,135,150,.32); border-radius: 6px; border: 1.5px solid transparent; background-clip: padding-box; }
.drawer__log--scroll::-webkit-scrollbar-thumb:hover { background: rgba(125,135,150,.55); background-clip: padding-box; }

/* Fixed download progress bars (Docker Desktop / 基础镜像) — no scroll spam */
/* "What's happening now" line — prominent so a 100% download bar is never
   mistaken for the whole flow being finished (bug). */
.drawer__now {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 14px 2px; padding: 9px 12px;
  background: rgba(91,141,247,.08); border: 1px solid rgba(91,141,247,.2); border-radius: 10px;
  font-size: 12.5px; color: var(--text, #e6eaf0);
}
.drawer__now span { flex: 1; min-width: 0; }

.drawer__dlbars { display: flex; flex-direction: column; gap: 10px; margin: 12px 14px 2px; }
.dlbar {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(10, 12, 16, 0.55); border: 1px solid rgba(125, 135, 150, 0.14);
}
.dlbar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.dlbar__name { font-size: 12.5px; font-weight: 600; color: var(--text, #e6eaf0); }
.dlbar__pct { font-size: 11px; color: var(--text-dim, #9da7b3); font-variant-numeric: tabular-nums; }
.dlbar__track { height: 6px; border-radius: 4px; background: rgba(125, 135, 150, 0.16); overflow: hidden; }
.dlbar__fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #5b8df7, #2496ed);
  transition: width .2s ease;
}
.dlbar__fill.is-done { background: #4ade80; }
.dlbar__url {
  margin-top: 6px; font-size: 10.5px; color: #6b7686;
  font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlbar__urlk {
  display: inline-block; min-width: 16px; text-align: center;
  margin-right: 5px; padding: 0 4px; border-radius: 4px;
  font-family: inherit; font-size: 9.5px; color: #8fb0f5; background: rgba(91,141,247,.16);
}

/* Drawer header buttons (minimize ‒ / close ×) */
.drawer__headbtns { display: flex; align-items: center; gap: 2px; }

/* Minimized drawer → floating restore chip (op keeps running) */
.drawer-min {
  position: fixed; right: 20px; bottom: 20px; z-index: 2001;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 999px; cursor: pointer;
  background: #16181d; border: 1px solid rgba(125,135,150,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  color: var(--text, #e6eaf0); font-size: 12.5px; font-weight: 550;
  animation: drawer-min-in .18s cubic-bezier(.2,.8,.2,1);
}
.drawer-min:hover { border-color: rgba(125,135,150,.4); background: #1b1e24; }
@keyframes drawer-min-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.drawer-min__spark { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; font-weight: 700; }
.drawer-min--done .drawer-min__spark { color: #4ade80; }
.drawer-min--error .drawer-min__spark { color: #f87171; }
.drawer-min__label { font-variant-numeric: tabular-nums; }
.drawer__log-empty { color: var(--text-dim, #9da7b3); }
.drawer__line { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.drawer__t { color: #6b7686; flex: none; font-variant-numeric: tabular-nums; }
.drawer__badge {
  flex: none; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
  background: rgba(91, 141, 247, 0.16); color: #8fb0f5;
}
.drawer__badge--swap { background: rgba(245, 158, 11, 0.16); color: #f5b342; }
.drawer__badge--done { background: rgba(74, 222, 128, 0.16); color: #6ee79b; }
.drawer__linemsg { color: var(--text, #e6eaf0); word-break: break-word; }
.drawer__line[data-status="error"] .drawer__linemsg { color: #f87171; }
.drawer__line[data-status="done"] .drawer__linemsg { color: #6ee79b; }
.drawer__line[data-status="skip"] .drawer__linemsg { color: var(--text-dim, #9da7b3); }

.drawer__hint {
  margin: 0 14px 8px; padding: 8px 12px;
  background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.28); border-radius: 8px;
  color: #f5b342; font-size: 11.5px; line-height: 1.5;
}
.drawer__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid rgba(125, 135, 150, 0.14);
}
.drawer__foot-status { font-size: 12.5px; color: var(--text-dim, #9da7b3); margin-right: auto; }
.drawer__foot-status.is-error { color: #f87171; }
.drawer__foot-status.is-done { color: #4ade80; }
.drawer__foot-status.is-reboot { color: #f5b342; }
.drawer__spark--reboot { color: #f5b342; }
.drawer-min--reboot .drawer-min__spark { color: #f5b342; }
.drawer__btn {
  padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 550;
  background: rgba(125, 135, 150, 0.14); border: 1px solid rgba(125, 135, 150, 0.2); color: var(--text, #e6eaf0);
}
.drawer__btn:hover { background: rgba(125, 135, 150, 0.22); }
.drawer__btn.is-accent { background: var(--brand, #5b8df7); border-color: var(--brand, #5b8df7); color: #fff; }
.drawer__btn.is-accent:hover { filter: brightness(1.08); }

/* HTTPS 审计 CA 授权卡片 (合规 opt-in) */
.mitm-card {
  border: 1px solid rgba(125, 135, 150, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(30, 36, 46, 0.4);
}
.mitm-card--on { border-color: rgba(74, 222, 128, 0.35); background: rgba(22, 40, 30, 0.4); }

/* 已启用 = 低调小 pill,固定在右上角,不占首页正文 */
.mitm-pill {
  position: fixed; top: 64px; right: 16px; z-index: 9998;
  -webkit-app-region: no-drag;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 11px;
  border-radius: 999px; width: fit-content; max-width: calc(100vw - 32px);
  background: rgba(20, 30, 24, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.3);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  font-size: 12px; line-height: 1;
}
.mitm-pill__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}
.mitm-pill__dot[data-busy="1"] { background: #9da7b3; box-shadow: 0 0 0 3px rgba(157, 167, 179, 0.16); }
.mitm-pill__text { color: var(--text-dim, #9da7b3); white-space: nowrap; }
.mitm-pill__off {
  background: none; border: none; cursor: pointer;
  color: #6b7686; font-size: 11.5px; padding: 3px 7px; border-radius: 999px;
}
.mitm-pill__off:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.mitm-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mitm-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #9da7b3; flex: 0 0 auto; }
.mitm-card__dot[data-state="on"]   { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
.mitm-card__dot[data-state="warn"] { background: #fbbf24; }
.mitm-card__dot[data-state="off"]  { background: #60a5fa; }
.mitm-card__title { font-size: 14px; font-weight: 600; color: var(--text, #e6edf3); }
.mitm-card__desc { font-size: 12.5px; line-height: 1.5; color: var(--text-dim, #9da7b3); margin: 0 0 10px; }
.mitm-card__note { color: #fbbf24; }
.mitm-card__error { font-size: 12px; color: #f87171; margin-bottom: 8px; }
.mitm-card__actions { display: flex; gap: 8px; }
.mitm-card__btn {
  font-size: 13px; padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--accent, #3b82f6); color: #fff; font-weight: 500;
}
.mitm-card__btn:disabled { opacity: 0.6; cursor: default; }
.mitm-card__btn--ghost { background: transparent; border: 1px solid rgba(125, 135, 150, 0.35); color: var(--text-dim, #9da7b3); }
.mitm-card__sub { color: var(--text-dim, #9da7b3); opacity: 0.8; font-size: 11.5px; }

/* 首启门控条款页 (合规第一道整体同意) */
.terms-gate { display: flex; align-items: center; justify-content: center; padding: 24px; }
/* .shell sets -webkit-app-region: drag; only .shell--app un-drags itself. The
   terms gate / splash screens are bare .shell, so without this the whole panel
   is a window-drag region and its buttons can't be clicked. */
.terms-gate__panel, .terms-gate__panel * { -webkit-app-region: no-drag; }
.terms-gate__panel {
  position: relative; z-index: 1; width: min(680px, 94vw); max-height: 90vh;
  display: flex; flex-direction: column;
  background: rgba(20, 25, 33, 0.92); border: 1px solid rgba(125, 135, 150, 0.22);
  border-radius: 16px; padding: 28px 30px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.terms-gate__title { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--text, #e6edf3); }
.terms-gate__subtitle { font-size: 13px; color: var(--text-dim, #9da7b3); margin: 0 0 16px; }
.terms-gate__body {
  overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 10px;
  border-top: 1px solid rgba(125,135,150,0.15); border-bottom: 1px solid rgba(125,135,150,0.15);
  padding-top: 14px; padding-bottom: 14px;
  overscroll-behavior: contain;
}
/* slim, modern scrollbar (默认滚动条太丑) */
.terms-gate__body { scrollbar-width: thin; scrollbar-color: rgba(125,135,150,0.35) transparent; }
.terms-gate__body::-webkit-scrollbar { width: 8px; }
.terms-gate__body::-webkit-scrollbar-track { background: transparent; }
.terms-gate__body::-webkit-scrollbar-thumb {
  background: rgba(125,135,150,0.30); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.terms-gate__body::-webkit-scrollbar-thumb:hover { background: rgba(125,135,150,0.55); background-clip: padding-box; border: 2px solid transparent; }

/* review mode (从头像菜单点「用户协议」重新阅读) — 居中浮层 + 收紧面板 */
.terms-gate--review { padding: 24px; }
.terms-gate--review .glow { display: none; }            /* 装饰光晕只属于首启全屏页,modal 里多余 */
.terms-gate--review .terms-gate__panel {
  width: min(640px, 92vw); max-height: min(82vh, 760px);
  background: rgba(18, 22, 30, 0.98);
  box-shadow: 0 28px 80px rgba(0,0,0,0.6);
  animation: terms-pop .16s ease;
}
@keyframes terms-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* rendered markdown terms (mdLite) — 不再显示原始 # / ** / | 语法 */
.terms-md { font-size: 13px; line-height: 1.65; color: var(--text-dim, #c2cbd6); word-break: break-word; }
.terms-md > :first-child { margin-top: 0; }
.terms-md h1 { font-size: 17px; font-weight: 700; color: var(--text, #e6edf3); margin: 0 0 6px; }
.terms-md h2 { font-size: 15px; font-weight: 700; color: var(--text, #e6edf3); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid rgba(125,135,150,0.12); }
.terms-md h3 { font-size: 13.5px; font-weight: 600; color: var(--text, #e6edf3); margin: 16px 0 6px; }
.terms-md p { margin: 8px 0; }
.terms-md strong { color: var(--text, #e6edf3); font-weight: 600; }
.terms-md code { font-family: var(--mono); font-size: 12px;
  background: rgba(125,135,150,0.16); padding: 1px 5px; border-radius: 4px; color: #d7dee8; }
.terms-md ul, .terms-md ol { margin: 8px 0; padding-left: 22px; }
.terms-md li { margin: 4px 0; }
.terms-md hr { border: none; border-top: 1px solid rgba(125,135,150,0.14); margin: 18px 0; }
.terms-md blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid rgba(91,141,247,0.55);
  background: rgba(91,141,247,0.07); border-radius: 0 8px 8px 0; color: var(--text-dim, #b9c2cf);
}
.terms-md table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; display: block; overflow-x: auto; }
.terms-md th, .terms-md td { border: 1px solid rgba(125,135,150,0.18); padding: 7px 10px; text-align: left; vertical-align: top; }
.terms-md th { background: rgba(125,135,150,0.10); color: var(--text, #e6edf3); font-weight: 600; white-space: nowrap; }
.terms-gate__scrollhint { font-size: 12px; color: #fbbf24; text-align: center; margin: 12px 0 0; }
.terms-gate__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.terms-gate__btn {
  font-size: 14px; padding: 10px 22px; border-radius: 9px; border: none; cursor: pointer;
  background: var(--accent, #3b82f6); color: #fff; font-weight: 600;
}
.terms-gate__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.terms-gate__btn--ghost { background: transparent; border: 1px solid rgba(125,135,150,0.35); color: var(--text-dim, #9da7b3); font-weight: 500; }