/* ==================================================================
   macOS Sonoma 桌面（网页版）— 样式表
   依据 macOS-Sonoma-UI-Spec.md：几何 / 颜色 / 字阶 / 动效全部落在
   :root 的 Design Tokens 里，组件只引用变量。
   动效：全局唯一缓动 var(--ease) = cubic-bezier(0.32, 0.72, 0, 1)
         时长统一 120 / 140 / 180 / 200 / 250 / 300ms（全部落在 120–300ms）
   ================================================================== */

/* ------------------------------------------------------------------
   0. 基础重置
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: #1b1b1f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: default; }
input, textarea { font: inherit; color: inherit; }
textarea, input[type="text"], input[type="search"] { user-select: text; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { display: block; flex: none; fill: currentColor; }
.ic use { pointer-events: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------ */
:root {
  /* 动效：全局唯一缓动曲线 + 六档时长（全部在 120–300ms 内） */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-120: 120ms;
  --dur-140: 140ms;
  --dur-180: 180ms;
  --dur-200: 200ms;
  --dur-250: 250ms;
  --dur-300: 300ms;

  /* 几何（规格书第 1/3/4 节） */
  --menubar-h: 24px;          /* [HIG] 菜单栏 24pt */
  --titlebar-h: 28px;         /* 纯标题标题栏 28px */
  --tl-size: 12px;            /* 交通灯直径 12px */
  --tl-gap: 8px;              /* 交通灯间距 8px（中心距 20px） */
  --tl-inset: 20px;           /* 窗口左边缘 → 第一个按钮 20px */
  --radius-window: 10px;      /* 窗口圆角 10px */
  --radius-menu: 6px;         /* 菜单 / 提示气泡 6px */
  --radius-dock: 20px;        /* Dock 面板圆角 20px */
  --dock-icon: 48px;          /* Dock 图标 48px */
  --dock-gap: 8px;            /* Dock 图标间距 8px */
  --spotlight-w: 660px;       /* 聚焦搜索面板 660px */
  --sp-row-h: 56px;           /* 聚焦搜索输入行 56px */

  /* 交通灯（Big Sur 起采样值） */
  --tl-close: #FF5F57;
  --tl-min: #FEBC2E;
  --tl-zoom: #28C840;
  --tl-idle: #D6D6D6;         /* 失焦：三颗全部变灰 */

  /* 字体与字阶（规格书第 8 节） */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei UI",
          "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, "Cascadia Mono", Consolas, monospace;
  --fs-large-title: 26px; --lh-large-title: 32px;
  --fs-title-1: 22px;     --lh-title-1: 26px;
  --fs-title-2: 17px;     --lh-title-2: 22px;
  --fs-title-3: 15px;     --lh-title-3: 20px;
  --fs-headline: 13px;    --lh-headline: 16px;
  --fs-body: 13px;        --lh-body: 16px;
  --fs-callout: 12px;     --lh-callout: 15px;
  --fs-subheadline: 11px; --lh-subheadline: 14px;
  --fs-footnote: 10px;    --lh-footnote: 13px;
  --accent: #007AFF;
}

/* ---------- 浅色外观（默认） ---------- */
:root[data-theme="light"] {
  --win-bg: #ECECEC;
  --win-chrome: rgba(246, 246, 246, 0.72);
  --win-chrome-idle: rgba(246, 246, 246, 0.90);
  --elevated: #FFFFFF;
  --elevated-trans: rgba(255, 255, 255, 0.72);
  --sidebar-bg: rgba(246, 246, 246, 0.60);
  --text-primary: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.50);
  --text-tertiary: rgba(0, 0, 0, 0.26);
  --separator: rgba(0, 0, 0, 0.10);
  --separator-opaque: #C6C6C8;
  --control-fill: rgba(0, 0, 0, 0.05);
  --control-fill-hover: rgba(0, 0, 0, 0.09);
  --selected: var(--accent);
  --unemph-selected: rgba(0, 0, 0, 0.08);
  --menubar-bg: rgba(255, 255, 255, 0.45);
  --menubar-text: rgba(0, 0, 0, 0.85);
  --menubar-hover: rgba(0, 0, 0, 0.10);
  --dock-bg: rgba(255, 255, 255, 0.35);
  --dock-dot: rgba(0, 0, 0, 0.55);
  --dock-sep: rgba(0, 0, 0, 0.15);
  --dock-tip-bg: rgba(255, 255, 255, 0.5);
  --menu-bg: rgba(255, 255, 255, 0.72);
  --menu-hover: var(--accent);
  --menu-hover-text: #FFFFFF;
  --accent: #007AFF;
  --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.5);
  --terminal-bg: #1C1C1E;
  --scrollbar: rgba(0, 0, 0, 0.28);
  --shadow-window:
    0 10px 20px rgba(0, 0, 0, 0.14),
    0 40px 60px rgba(0, 0, 0, 0.24),
    0 0 0 0.5px rgba(0, 0, 0, 0.10);
  --shadow-window-idle:
    0 8px 16px rgba(0, 0, 0, 0.10),
    0 30px 50px rgba(0, 0, 0, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --wallpaper:
    radial-gradient(58% 62% at 12% 8%, rgba(255, 214, 120, 0.95) 0%, rgba(255, 176, 90, 0.55) 34%, rgba(255, 150, 90, 0) 66%),
    radial-gradient(64% 70% at 88% 16%, rgba(255, 96, 128, 0.85) 0%, rgba(226, 74, 110, 0.40) 38%, rgba(210, 60, 100, 0) 70%),
    radial-gradient(70% 72% at 80% 92%, rgba(120, 92, 255, 0.80) 0%, rgba(86, 78, 220, 0.36) 40%, rgba(70, 60, 200, 0) 72%),
    radial-gradient(66% 68% at 16% 88%, rgba(64, 190, 255, 0.75) 0%, rgba(40, 150, 230, 0.32) 42%, rgba(30, 130, 220, 0) 74%),
    radial-gradient(44% 46% at 50% 48%, rgba(255, 236, 190, 0.55) 0%, rgba(255, 200, 140, 0) 72%),
    conic-gradient(from 205deg at 50% 50%, rgba(255, 145, 90, 0.42), rgba(214, 96, 200, 0.34) 28%, rgba(104, 120, 250, 0.36) 56%, rgba(70, 190, 240, 0.34) 76%, rgba(255, 145, 90, 0.42)),
    linear-gradient(158deg, #3A1C56 0%, #6B2452 26%, #A83A4A 50%, #D9713C 72%, #F0B45E 100%);
  --wallpaper-veil: rgba(255, 255, 255, 0);
}
/* ---------- 深色外观 ---------- */
:root[data-theme="dark"] {
  --win-bg: #1E1E1E;
  --win-chrome: rgba(44, 44, 46, 0.72);
  --win-chrome-idle: rgba(38, 38, 40, 0.88);
  --elevated: #2C2C2E;
  --elevated-trans: rgba(44, 44, 46, 0.72);
  --sidebar-bg: rgba(255, 255, 255, 0.05);
  --text-primary: rgba(255, 255, 255, 0.85);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.25);
  --separator: rgba(255, 255, 255, 0.10);
  --separator-opaque: #38383A;
  --control-fill: rgba(255, 255, 255, 0.10);
  --control-fill-hover: rgba(255, 255, 255, 0.16);
  --selected: var(--accent);
  --unemph-selected: rgba(255, 255, 255, 0.10);
  --menubar-bg: rgba(30, 30, 30, 0.45);
  --menubar-text: #FFFFFF;
  --menubar-hover: rgba(255, 255, 255, 0.15);
  --dock-bg: rgba(40, 40, 40, 0.42);
  --dock-dot: rgba(255, 255, 255, 0.6);
  --dock-sep: rgba(255, 255, 255, 0.15);
  --dock-tip-bg: rgba(30, 30, 30, 0.5);
  --menu-bg: rgba(44, 44, 46, 0.72);
  --menu-hover: #0A84FF;
  --menu-hover-text: #FFFFFF;
  --accent: #0A84FF;
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.5);
  --scrollbar: rgba(255, 255, 255, 0.28);
  --shadow-window:
    0 10px 20px rgba(0, 0, 0, 0.36),
    0 40px 60px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --shadow-window-idle:
    0 8px 16px rgba(0, 0, 0, 0.25),
    0 30px 50px rgba(0, 0, 0, 0.35),
    0 0 0 0.5px rgba(255, 255, 255, 0.07);
  --wallpaper:
    radial-gradient(58% 62% at 12% 8%, rgba(232, 178, 92, 0.66) 0%, rgba(180, 118, 60, 0.34) 34%, rgba(140, 90, 50, 0) 66%),
    radial-gradient(64% 70% at 88% 16%, rgba(206, 70, 102, 0.62) 0%, rgba(150, 50, 84, 0.32) 38%, rgba(120, 40, 70, 0) 70%),
    radial-gradient(70% 72% at 80% 92%, rgba(92, 72, 210, 0.62) 0%, rgba(62, 56, 160, 0.30) 40%, rgba(50, 44, 140, 0) 72%),
    radial-gradient(66% 68% at 16% 88%, rgba(48, 142, 210, 0.58) 0%, rgba(30, 106, 176, 0.28) 42%, rgba(24, 90, 160, 0) 74%),
    radial-gradient(44% 46% at 50% 48%, rgba(232, 202, 150, 0.32) 0%, rgba(200, 150, 100, 0) 72%),
    conic-gradient(from 205deg at 50% 50%, rgba(220, 120, 72, 0.34), rgba(178, 78, 168, 0.28) 28%, rgba(84, 96, 214, 0.30) 56%, rgba(56, 152, 200, 0.28) 76%, rgba(220, 120, 72, 0.34)),
    linear-gradient(158deg, #1B0F2C 0%, #33122C 26%, #551B27 50%, #6E3520 72%, #8A5A2E 100%);
  --wallpaper-veil: rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------
   2. 舞台与壁纸
   ------------------------------------------------------------------ */
.stage {
  position: fixed;
  inset: var(--menubar-h) 0 0 0;      /* 工作区 = 视口 − 菜单栏 */
  overflow: hidden;
  isolation: isolate;
}
.wallpaper {
  position: absolute;
  inset: 0;
  background: var(--wallpaper);
  background-size: cover;
  transition: background var(--dur-300) var(--ease), filter var(--dur-250) var(--ease);
}
.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wallpaper-veil);
  transition: background var(--dur-300) var(--ease);
}
.dimmer {
  position: absolute;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--dim, 0));
  transition: background var(--dur-140) var(--ease);
}

/* ------------------------------------------------------------------
   3. 菜单栏（24px，规格书第 3 节）
   ------------------------------------------------------------------ */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--menubar-h);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 6px;
  background: var(--menubar-bg);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  color: var(--menubar-text);
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  box-shadow: 0 0.5px 0 var(--separator);
}
.mb-left, .mb-right { display: flex; align-items: center; height: 100%; }
.mb-right { gap: 2px; padding-right: 4px; }
.mb-item, .mb-status, .mb-title {
  height: 20px;                       /* 高亮矩形 20px（24px 栏内上下各留 2px） */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;                    /* 每个标题左右 10px */
  border-radius: 4px;
  color: var(--menubar-text);
  letter-spacing: 0.3px;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.mb-item:hover, .mb-status:hover, .mb-title:hover, .mb-title.open, .mb-item.open {
  background: var(--menubar-hover);
}
.mb-apple { padding: 0 9px; }
.mb-apple .ic { margin-top: -2px; }
.mb-titles { display: flex; align-items: center; }
.mb-title.app { font-weight: 600; }
.mb-status .ic { opacity: .92; }
.mb-batt { font-size: var(--fs-callout); letter-spacing: 0; }
.mb-clock { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }

/* ------------------------------------------------------------------
   4. 桌面图标
   ------------------------------------------------------------------ */
.desktop-icons {
  position: absolute;
  top: 10px; right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
.dicon {
  width: 96px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  transition: background-color var(--dur-120) var(--ease), box-shadow var(--dur-120) var(--ease);
}
.dicon-img { display: grid; place-items: center; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.dicon-text {
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  text-align: center;
  word-break: break-all;
}
.dicon:hover { background: rgba(255, 255, 255, 0.12); }
.dicon.selected { background: rgba(10, 132, 255, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }

/* ------------------------------------------------------------------
   5. 窗口
   ------------------------------------------------------------------ */
.win-layer { position: absolute; inset: 0; z-index: 10; }
/* 这一层铺满整个桌面，必须对指针透明，否则会截走桌面图标与右键菜单的点击；
   窗口是它的直接子元素，单独恢复事件接收。 */
.win-layer { pointer-events: none; }
.win-layer > * { pointer-events: auto; }
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 200px;
  border-radius: var(--radius-window);       /* 10px */
  overflow: hidden;
  background: var(--win-bg);
  box-shadow: var(--shadow-window);
  transform-origin: center center;
  animation: winIn var(--dur-250) var(--ease) both;
  transition: box-shadow var(--dur-200) var(--ease),
              opacity var(--dur-200) var(--ease);
}
@keyframes winIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.window.idle { box-shadow: var(--shadow-window-idle); }
.window.dragging, .window.resizing { will-change: transform; }
.window.maximized { border-radius: var(--radius-window); }

/* 标题栏：28px */
.titlebar {
  position: relative;
  flex: none;
  height: var(--titlebar-h);
  display: flex;
  align-items: center;
  padding: 0 12px 0 var(--tl-inset);
  gap: 10px;
  background: var(--win-chrome);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  box-shadow: 0 0.5px 0 var(--separator);
  cursor: default;
  transition: background-color var(--dur-200) var(--ease);
}
.window.idle .titlebar { background: var(--win-chrome-idle); }
.win-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-headline);
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-primary);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 120px;
  transition: color var(--dur-200) var(--ease);
}
.window.idle .win-title { color: var(--text-secondary); }
.win-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* 交通灯：直径 12px、间距 8px、左边距 20px */
.traffic { display: flex; align-items: center; gap: var(--tl-gap); flex: none; }
.tl {
  width: var(--tl-size);
  height: var(--tl-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  transition: background-color var(--dur-200) var(--ease);
}
.tl-close { background: var(--tl-close); }
.tl-min   { background: var(--tl-min); }
.tl-zoom  { background: var(--tl-zoom); }
/* 失焦：三颗全部变灰 #D6D6D6，且不显示字形 */
.window.idle .tl { background: var(--tl-idle); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.10); }
.tl .tl-g { opacity: 0; transition: opacity var(--dur-120) var(--ease); }
.traffic.hot .tl .tl-g, .tl:hover .tl-g { opacity: 1; }
.window.idle .traffic.hot .tl .tl-g { opacity: 0; }
.tl-g { display: block; }
.tl-close .tl-g { color: #7A1C16; }
.tl-min .tl-g   { color: #8A5B00; }
.tl-zoom .tl-g  { color: #0B5D1E; }
.tl:active { filter: brightness(0.92); }

/* 8 向缩放热区（窗口圆角靠 overflow 裁切，热区放在窗口内侧，避免被裁掉） */
.rz { position: absolute; z-index: 5; }
.rz-n  { top: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.rz-s  { bottom: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.rz-w  { left: 0; top: 12px; bottom: 12px; width: 5px; cursor: ew-resize; }
.rz-e  { right: 0; top: 12px; bottom: 12px; width: 5px; cursor: ew-resize; }
.rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }

.win-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--win-bg);
  color: var(--text-primary);
}

/* 贴靠预览框 */
.snap-hint {
  position: absolute;
  z-index: 20;
  border-radius: var(--radius-window);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  transition: left var(--dur-140) var(--ease), top var(--dur-140) var(--ease),
              width var(--dur-140) var(--ease), height var(--dur-140) var(--ease),
              opacity var(--dur-140) var(--ease);
}

/* ------------------------------------------------------------------
   6. Dock（规格书第 4 节）
   ------------------------------------------------------------------ */
.dock-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 4px;
  display: flex;
  justify-content: center;
  z-index: 700;
  pointer-events: none;
}
.dock {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--dock-gap);
  padding: 6px 8px;
  border-radius: var(--radius-dock);
  background: var(--dock-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
              0 0 0 0.5px rgba(0, 0, 0, 0.15),
              0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;                      /* 图标底 → 指示点 2px */
  flex: none;
}
.dock-icon {
  display: grid;
  place-items: center;
  width: var(--dock-icon);       /* 48px */
  height: var(--dock-icon);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
  transition: width var(--dur-120) var(--ease), height var(--dur-120) var(--ease);
}
.dock-icon svg { width: 100%; height: 100%; }
.dock-dot {
  width: 4px;                    /* 4px 圆点 */
  height: 4px;
  border-radius: 50%;
  background: var(--dock-dot);
  opacity: 0;
  transition: opacity var(--dur-200) var(--ease);
}
.dock-item.running .dock-dot { opacity: 1; }
.dock-sep {
  width: 1px;
  height: 44px;
  margin: 0 12px 6px;
  background: var(--dock-sep);
  flex: none;
  align-self: center;
}
.dock-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: var(--radius-menu);
  background: var(--dock-tip-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
  font-size: var(--fs-headline);
  letter-spacing: 0.4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-120) var(--ease);
}
.dock-item.hot .dock-tip { opacity: 1; }
.dock-item.bounce { animation: dockBounce var(--dur-300) var(--ease); }
@keyframes dockBounce {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}

/* ------------------------------------------------------------------
   7. 聚焦搜索 Spotlight（规格书第 5 节）
   ------------------------------------------------------------------ */
.spotlight {
  position: fixed;
  left: 50%;
  top: calc(25% - 16px);
  transform: translateX(-50%);
  width: var(--spotlight-w);
  max-width: calc(100vw - 40px);
  z-index: 850;
  border-radius: 12px;
  background: var(--elevated-trans);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--separator);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: spIn var(--dur-180) var(--ease) both;
  transform-origin: top center;
}
.spotlight.closing { animation: spOut var(--dur-140) var(--ease) both; }
@keyframes spIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes spOut {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) scale(1); }
}
.sp-row {
  height: var(--sp-row-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--separator);
}
.sp-glass { color: var(--text-secondary); }
.sp-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-primary);
}
.sp-row input::placeholder { color: var(--text-tertiary); }
.sp-body { max-height: 400px; overflow: auto; padding: 8px; }
.sp-head {
  font-size: var(--fs-callout);
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 0 8px 10px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 4px;
}
.sp-item {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 2px;
  border-radius: 4px;
  font-size: var(--fs-headline);
  color: var(--text-primary);
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.sp-item .sp-gut { width: 32px; display: grid; place-items: center; flex: none; }
.sp-item.sel { background: var(--selected); color: #FFFFFF; }
.sp-item.sel .sp-sub { color: rgba(255, 255, 255, 0.75); }
.sp-sub { margin-left: auto; font-size: var(--fs-callout); color: var(--text-secondary); }
.sp-empty { padding: 16px 10px; color: var(--text-secondary); font-size: var(--fs-headline); }

/* ------------------------------------------------------------------
   8. 启动台
   ------------------------------------------------------------------ */
.launchpad {
  position: fixed;
  inset: var(--menubar-h) 0 0 0;
  z-index: 840;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(20, 20, 24, 0.42);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  animation: lpIn var(--dur-200) var(--ease) both;
}
.launchpad.closing { animation: lpOut var(--dur-180) var(--ease) both; }
@keyframes lpIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes lpOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.03); } }
.lp-scroll { width: min(88vw, 1120px); max-height: 72vh; overflow: auto; }
.lp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 26px 12px; padding: 8px; }
.lp-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 10px;
  transition: background-color var(--dur-120) var(--ease), transform var(--dur-120) var(--ease);
}
.lp-app:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.04); }
.lp-app svg { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
.lp-name { font-size: var(--fs-callout); color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.lp-dots { display: flex; gap: 8px; }
.lp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.lp-dots i.on { background: rgba(255, 255, 255, 0.9); }

/* ------------------------------------------------------------------
   9. 控制中心
   ------------------------------------------------------------------ */
.flyout {
  position: fixed;
  z-index: 830;
  animation: flyIn var(--dur-200) var(--ease) both;
  transform-origin: top right;
}
.flyout.closing { animation: flyOut var(--dur-140) var(--ease) both; }
@keyframes flyIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flyOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.99); }
}
.cc {
  top: calc(var(--menubar-h) + 6px);
  right: 10px;
  width: 330px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 14px;
  background: var(--elevated-trans);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 0 0.5px var(--separator);
  color: var(--text-primary);
}
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-card {
  border-radius: 12px;
  background: var(--control-fill);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-mini { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.cc-row { display: flex; align-items: center; gap: 8px; }
.cc-ic {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--control-fill-hover);
  color: var(--text-primary);
  flex: none;
  transition: background-color var(--dur-200) var(--ease), color var(--dur-200) var(--ease);
}
.cc-ic.on { background: var(--accent); color: #FFFFFF; }
.cc-row-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc-t { font-size: var(--fs-headline); }
.cc-s { font-size: var(--fs-footnote); color: var(--text-secondary); }
.cc-sw {
  width: 26px; height: 16px;
  border-radius: 8px;
  background: var(--control-fill-hover);
  position: relative;
  flex: none;
  transition: background-color var(--dur-200) var(--ease);
}
.cc-sw::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-200) var(--ease);
}
.cc-sw.on { background: var(--accent); }
.cc-sw.on::after { transform: translateX(10px); }
.cc-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--control-fill-hover);
  font-size: var(--fs-headline);
  transition: background-color var(--dur-200) var(--ease), color var(--dur-200) var(--ease);
}
.cc-tile.on { background: var(--accent); color: #FFFFFF; }
.cc-slider { flex-direction: row; align-items: center; gap: 10px; }
.cc-slider input[type="range"] { flex: 1; }
.cc-foot { font-size: var(--fs-footnote); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.cc-foot-i { display: flex; align-items: center; gap: 5px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--control-fill-hover);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-120) var(--ease);
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.08); }

/* ------------------------------------------------------------------
   10. 上下文菜单 / 菜单栏下拉
   ------------------------------------------------------------------ */
.ctx {
  position: fixed;
  z-index: 900;
  min-width: 200px;
  padding: 5px;
  border-radius: var(--radius-menu);
  background: var(--menu-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 0.5px var(--separator);
  color: var(--text-primary);
  animation: menuIn var(--dur-120) var(--ease) both;
  transform-origin: top left;
}
@keyframes menuIn {
  from { opacity: 0; transform: scaleY(0.98); }
  to   { opacity: 1; transform: scaleY(1); }
}
.ctx-head {
  padding: 4px 10px 5px;
  font-size: var(--fs-subheadline);
  color: var(--text-secondary);
}
.ctx-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: var(--fs-headline);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.ctx-item .ic { width: 16px; flex: none; color: var(--text-secondary); }
.ctx-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-key { font-size: var(--fs-callout); color: var(--text-secondary); }
.ctx-item:not(.disabled):hover { background: var(--menu-hover); color: var(--menu-hover-text); }
.ctx-item:not(.disabled):hover .ic, .ctx-item:not(.disabled):hover .ctx-key { color: var(--menu-hover-text); }
.ctx-item.disabled { color: var(--text-tertiary); pointer-events: none; }
.ctx-item.disabled .ic { color: var(--text-tertiary); }
.ctx-item.dim { color: var(--text-secondary); }
.ctx-item.dim .ic { color: var(--text-tertiary); }
.ctx-sep { height: 1px; margin: 5px 10px; background: var(--separator); }
.ctx-item .ctx-check { width: 16px; flex: none; }

/* ------------------------------------------------------------------
   11. 对话框 / 轻提示
   ------------------------------------------------------------------ */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 940;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn var(--dur-200) var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dialog {
  width: 300px;
  padding: 18px;
  border-radius: 12px;
  background: var(--elevated);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 0.5px var(--separator);
  text-align: center;
  animation: dlgIn var(--dur-250) var(--ease) both;
}
@keyframes dlgIn { from { opacity: 0; transform: scale(1.02) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.dialog-title { font-size: var(--fs-headline); font-weight: 600; margin-bottom: 8px; }
.dialog-body { font-size: var(--fs-callout); color: var(--text-secondary); margin-bottom: 16px; }
.dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.btn {
  height: 24px;
  border-radius: var(--radius-menu);
  background: var(--control-fill);
  font-size: var(--fs-headline);
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.btn:hover { background: var(--control-fill-hover); }
.btn.primary { background: var(--accent); color: #FFFFFF; }
.btn.primary:hover { filter: brightness(1.06); }
.toast-wrap {
  position: fixed;
  top: calc(var(--menubar-h) + 12px);
  right: 14px;
  z-index: 960;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--elevated-trans);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 0 0.5px var(--separator);
  font-size: var(--fs-headline);
  color: var(--text-primary);
  animation: toastIn var(--dur-200) var(--ease) both;
}
.toast.out { animation: toastOut var(--dur-200) var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } }

/* ------------------------------------------------------------------
   12. 应用：通用零件
   ------------------------------------------------------------------ */
.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--win-chrome);
  box-shadow: 0 0.5px 0 var(--separator);
}
.tbtn {
  width: 26px; height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.tbtn:hover { background: var(--control-fill-hover); }
.tbtn:disabled { color: var(--text-tertiary); }
.tbtn.on { color: var(--accent); }
.seg {
  display: flex;
  background: var(--control-fill);
  border-radius: 6px;
  padding: 1px;
  transition: background-color var(--dur-120) var(--ease);
}
.seg button {
  padding: 0 10px;
  height: 22px;
  border-radius: 5px;
  font-size: var(--fs-callout);
  color: var(--text-primary);
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.seg button.on {
  background: var(--elevated);
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.22);
}
.path {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-callout);
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
}
.sidebar {
  flex: none;
  width: 176px;
  padding: 8px 8px 12px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset -0.5px 0 0 var(--separator);
  overflow: auto;
}
.side-h {
  font-size: var(--fs-subheadline);
  color: var(--text-secondary);
  padding: 8px 6px 4px;
}
.side-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: var(--fs-headline);
  color: var(--text-primary);
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.side-item .ic { color: var(--accent); }
.side-item:hover { background: var(--control-fill); }
.side-item.active { background: var(--unemph-selected); }
.side-item.active .ic { color: var(--accent); }
.main-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.status-bar {
  flex: none;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  font-size: var(--fs-footnote);
  color: var(--text-secondary);
  box-shadow: inset 0 0.5px 0 var(--separator);
}

/* ---------- 访达 ---------- */
.finder { display: flex; flex: 1; min-height: 0; }
.files { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-head, .file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 116px 76px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.file-head {
  flex: none;
  height: 22px;
  font-size: var(--fs-subheadline);
  color: var(--text-secondary);
  box-shadow: inset 0 -0.5px 0 var(--separator);
}
.file-list { flex: 1; overflow: auto; padding: 4px 0 8px; }
.file-row {
  height: 24px;
  font-size: var(--fs-headline);
  border-radius: 5px;
  color: var(--text-primary);
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.file-row:hover { background: var(--control-fill); }
.file-row.selected { background: var(--selected); color: #FFFFFF; }
.file-row.selected .dim { color: rgba(255, 255, 255, 0.8); }
.fname { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim { color: var(--text-secondary); font-size: var(--fs-callout); }
.file-row .dim { font-size: var(--fs-callout); }
.empty-hint { padding: 24px 12px; color: var(--text-secondary); font-size: var(--fs-headline); }

/* ---------- 终端 ---------- */
.term {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--terminal-bg);
  color: #E8ECF2;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 17px;
  padding: 8px 10px;
}
.term-out { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.term-out b { color: #6FD3FF; font-weight: 400; }
.term-out i { color: #F2C36B; font-style: normal; }
.term-line { display: flex; gap: 0; }
.term-prompt { color: #7BE38B; white-space: pre; }
.term-in {
  flex: none;
  display: flex;
  align-items: center;
  border: 0;
  outline: none;
  background: none;
  color: #E8ECF2;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 17px;
  width: 100%;
  padding: 0;
  caret-color: #7BE38B;
}

/* ---------- 计算器 ---------- */
.calc { flex: 1; display: flex; flex-direction: column; background: #2B2B2E; color: #FFFFFF; }
.calc-out {
  flex: none;
  padding: 12px 14px 8px;
  text-align: right;
  font-size: 34px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--dur-200) var(--ease);
}
.calc-out.err { font-size: 20px; color: #FF9F9A; }
.calc-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 1px;
  background: rgba(0, 0, 0, 0.35);
}
.calc-key {
  background: #4A4A4E;
  color: #FFFFFF;
  font-size: 17px;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-120) var(--ease), color var(--dur-120) var(--ease);
}
.calc-key:hover { background: #5A5A5F; }
.calc-key.fn { background: #3A3A3E; }
.calc-key.fn:hover { background: #494A4E; }
.calc-key.op { background: #F0A03C; }
.calc-key.op:hover { background: #FFB44F; }
.calc-key.on { background: #FFFFFF; color: #F0A03C; }

/* ---------- 备忘录 ---------- */
.notes { flex: 1; display: flex; min-height: 0; }
.notes-list { width: 196px; flex: none; border-right: 0.5px solid var(--separator); background: var(--sidebar-bg); overflow: auto; }
.note-item {
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 0.5px solid var(--separator);
  transition: background-color var(--dur-120) var(--ease);
}
.note-item:hover { background: var(--control-fill); }
.note-item.active { background: var(--unemph-selected); }
.note-t { font-size: var(--fs-headline); color: var(--text-primary); }
.note-s { font-size: var(--fs-footnote); color: var(--text-secondary); }
.note-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.note-area {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  padding: 14px 18px;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 20px;
}

/* ---------- 文本编辑 ---------- */
.te { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--elevated); }
.te-area {
  flex: 1;
  min-height: 0;
  border: 0;
  outline: none;
  resize: none;
  padding: 12px 14px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

/* ---------- 系统设置 ---------- */
.settings { flex: 1; display: flex; min-height: 0; }
.set-main { flex: 1; min-width: 0; overflow: auto; padding: 16px 22px 24px; }
.set-h1 { font-size: var(--fs-title-1); line-height: var(--lh-title-1); margin-bottom: 14px; }
.set-group { font-size: var(--fs-callout); color: var(--text-secondary); margin: 14px 0 6px; }
.set-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: 0 0 0 0.5px var(--separator);
  margin-bottom: 8px;
  transition: background-color var(--dur-120) var(--ease);
}
.set-card.click { cursor: default; }
.set-card.click:hover { background: var(--control-fill); }
.set-card .ic { color: var(--text-secondary); }
.set-card-main { flex: 1; min-width: 0; }
.set-card-t { font-size: var(--fs-headline); }
.set-card-s { font-size: var(--fs-subheadline); color: var(--text-secondary); }
.set-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--control-fill);
  flex: none;
}
.appearance-row { display: flex; gap: 14px; margin-bottom: 14px; }
.appearance-card {
  width: 132px;
  padding: 10px;
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: 0 0 0 0.5px var(--separator);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: box-shadow var(--dur-200) var(--ease), background-color var(--dur-200) var(--ease);
}
.appearance-card.active { box-shadow: 0 0 0 2px var(--accent); }
.appearance-card .set-card-t { font-size: var(--fs-callout); }
.ap-prev {
  width: 100%;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 0.5px var(--separator);
}
.ap-bar { height: 9px; flex: none; }
.ap-body { flex: 1; }
.ap-light .ap-bar { background: rgba(255, 255, 255, 0.75); }
.ap-light .ap-body { background: #ECECEC; }
.ap-dark .ap-bar { background: rgba(40, 40, 40, 0.85); }
.ap-dark .ap-body { background: #1E1E1E; }
.switch {
  width: 34px; height: 20px;
  border-radius: 10px;
  background: var(--control-fill-hover);
  position: relative;
  flex: none;
  transition: background-color var(--dur-200) var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-200) var(--ease);
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(14px); }

/* ---------- Safari / 占位应用 ---------- */
.safari { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.safari-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08));
  padding: 24px;
}
.safari-title { font-size: var(--fs-title-1); }
.safari-fav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.safari-fav button {
  width: 92px; height: 72px;
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: 0 0 0 0.5px var(--separator);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-callout);
  transition: background-color var(--dur-120) var(--ease), transform var(--dur-120) var(--ease);
}
.safari-fav button:hover { background: var(--control-fill); transform: translateY(-1px); }
.url-field {
  flex: 1;
  height: 24px;
  border-radius: 7px;
  background: var(--control-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-callout);
  color: var(--text-secondary);
  max-width: 460px;
}
.placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  color: var(--text-secondary);
}
.placeholder .ph-t { font-size: var(--fs-title-2); color: var(--text-primary); }
.ph-badge {
  font-size: var(--fs-subheadline);
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--control-fill);
  color: var(--text-secondary);
}
.ph-note { font-size: var(--fs-callout); max-width: 420px; }

/* 废纸篓窗口 */
.trash-list { flex: 1; overflow: auto; padding: 6px 0; }

/* 关于本机 */
.about { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.about-h { font-size: var(--fs-title-1); }
.about-rows { font-size: var(--fs-callout); color: var(--text-secondary); display: grid; grid-template-columns: auto auto; gap: 3px 16px; text-align: left; margin-top: 6px; }
.about-rows b { font-weight: 400; color: var(--text-primary); }

/* ------------------------------------------------------------------
   共享剪贴板（跨桌面互通）
   ------------------------------------------------------------------ */
.clip {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--win-bg);
}
.clip-status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-menu);
  background: var(--elevated);
  box-shadow: 0 0 0 0.5px var(--separator);
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
  color: var(--text-secondary);
}
.clip-status b { font-weight: 400; color: var(--text-primary); }
.clip-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: background-color var(--dur-180) var(--ease);
}
.clip-status.has .clip-dot { background: var(--accent); }
.clip-area {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--elevated);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 19px;
  box-shadow: 0 0 0 0.5px var(--separator);
  transition: box-shadow var(--dur-140) var(--ease);
}
.clip-area:focus { box-shadow: var(--focus-ring); }
.clip-area::placeholder { color: var(--text-tertiary); }
.clip-bar { flex: none; display: flex; gap: 8px; }
.clip-bar .btn { flex: 1; height: 28px; }
.clip-tip {
  flex: none;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------
   关于这个系统
   ------------------------------------------------------------------ */
.aboutsys {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--win-bg);
}
.as-legal {
  flex: none;
  margin: 12px 14px 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: inset 3px 0 0 0 var(--accent), 0 0 0 0.5px var(--separator);
}
.as-legal-t { font-size: var(--fs-headline); line-height: var(--lh-headline); color: var(--text-primary); }
.as-legal-b { margin-top: 4px; font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--text-secondary); }
.as-legal-b b { font-weight: 400; color: var(--text-primary); }
.as-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 16px; }
.as-h { font-size: var(--fs-callout); color: var(--text-secondary); margin-bottom: 6px; }
.as-h + .as-list { margin-bottom: 14px; }
.as-list {
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: 0 0 0 0.5px var(--separator);
  padding: 10px 14px;
}
.as-list li {
  position: relative;
  padding-left: 12px;
  font-size: var(--fs-callout);
  line-height: 18px;
  color: var(--text-secondary);
}
.as-list li + li { margin-top: 6px; }
.as-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.as-list li b { font-weight: 400; color: var(--text-primary); }
.as-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--elevated);
  box-shadow: 0 0 0 0.5px var(--separator);
  font-size: var(--fs-callout);
  line-height: 17px;
}
.as-stats span { color: var(--text-secondary); }
.as-stats b { font-weight: 400; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.as-foot {
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-footnote);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------
   加载 / 启动失败提示
   app.js 成功启动后会移除它，所以它一直可见 = 脚本没有执行。
   ------------------------------------------------------------------ */
.boot-note {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  max-width: 620px;
  padding: 18px 24px;
  border-radius: 10px;
  background: rgba(18, 18, 20, .95);
  color: #fff;
  font: 400 14px/1.9 var(--font, sans-serif);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.boot-note b { color: #ffd166; }
.boot-note-error { border-color: #ff6b6b; }
.boot-note-error b { color: #ff8f8f; }