/* =========================================================
   macOS 网页版 - 全部样式
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "PingFang SC" , "Hiragino Sans GB" , "Microsoft YaHei" , "Noto Sans CJK SC" , sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, system-ui, "PingFang SC" , "Hiragino Sans GB" , "Microsoft YaHei" , "Noto Sans CJK SC" , sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
  background: #000;
}

input, textarea { user-select: text; }
button { border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }

/* ---------- 主题变量 ---------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, system-ui, "PingFang SC" , "Hiragino Sans GB" , "Microsoft YaHei" , "Noto Sans CJK SC" , sans-serif;
  --mono: ui-monospace, "SF Mono" , Menlo, Consolas, "Courier New" , monospace;
  --mb-bg: rgba(250, 250, 252, 0.55);
  --mb-text: #1d1d1f;
  --win-bg: #f5f5f7;
  --win-title-bg: rgba(236, 236, 240, 0.72);
  --win-text: #1d1d1f;
  --win-text2: #6e6e73;
  --win-border: rgba(0, 0, 0, 0.14);
  --dock-bg: rgba(246, 246, 250, 0.38);
  --panel-bg: rgba(248, 248, 252, 0.68);
  --card-bg: rgba(255, 255, 255, 0.72);
  --hover-bg: rgba(0, 0, 0, 0.06);
  --sel-bg: rgba(10, 132, 255, 0.85);
  --sel-soft: rgba(10, 132, 255, 0.16);
  --accent: #0a84ff;
  --input-bg: rgba(255, 255, 255, 0.85);
  --input-border: rgba(0, 0, 0, 0.18);
  --shadow-menu: 0 4px 22px rgba(0, 0, 0, 0.22);
  --tip-bg: rgba(48, 48, 52, 0.88);
  --icon-label: #fff;
}
html.dark {
  --mb-bg: rgba(24, 24, 27, 0.58);
  --mb-text: #f5f5f7;
  --win-bg: #2b2b2e;
  --win-title-bg: rgba(56, 56, 60, 0.66);
  --win-text: #f5f5f7;
  --win-text2: #98989f;
  --win-border: rgba(255, 255, 255, 0.12);
  --dock-bg: rgba(30, 30, 34, 0.42);
  --panel-bg: rgba(32, 32, 36, 0.72);
  --card-bg: rgba(58, 58, 62, 0.72);
  --hover-bg: rgba(255, 255, 255, 0.09);
  --sel-soft: rgba(10, 132, 255, 0.28);
  --input-bg: rgba(20, 20, 23, 0.85);
  --input-border: rgba(255, 255, 255, 0.22);
  --shadow-menu: 0 4px 22px rgba(0, 0, 0, 0.55);
  --tip-bg: rgba(240, 240, 245, 0.9);
  --icon-label: #fff;
}
html.dark body { color-scheme: dark; }

/* ---------- 壁纸 ---------- */
#desktop {
  position: fixed; inset: 0;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.wp-bigsur {
  background:
    radial-gradient(1100px 620px at 18% 12%, rgba(255,154,61,.75), rgba(255,154,61,0) 62%),
    radial-gradient(950px 760px at 86% 20%, rgba(255,94,138,.66), rgba(255,94,138,0) 58%),
    radial-gradient(1300px 900px at 52% 108%, rgba(43,82,212,.8), rgba(43,82,212,0) 60%),
    linear-gradient(160deg, #2a57c9 0%, #4f6fe0 34%, #8a63d2 68%, #c457b8 100%);
}
.wp-bigsur-dark {
  background:
    radial-gradient(1100px 700px at 20% 8%, rgba(64,52,160,.85), rgba(64,52,160,0) 62%),
    radial-gradient(900px 700px at 85% 25%, rgba(150,44,96,.7), rgba(150,44,96,0) 58%),
    radial-gradient(1200px 900px at 50% 110%, rgba(18,52,128,.95), rgba(18,52,128,0) 62%),
    linear-gradient(165deg, #101a3d 0%, #232a5e 45%, #3c2560 75%, #552a63 100%);
}
.wp-sonoma {
  background:
    radial-gradient(1200px 600px at 50% 118%, rgba(255,196,87,.9), rgba(255,196,87,0) 60%),
    radial-gradient(1000px 500px at 85% 96%, rgba(255,94,98,.75), rgba(255,94,98,0) 62%),
    radial-gradient(900px 560px at 12% 100%, rgba(196,87,184,.7), rgba(196,87,184,0) 60%),
    linear-gradient(180deg, #1d2b64 0%, #51337b 38%, #a6448f 66%, #f76d6d 100%);
}
.wp-graphite {
  background:
    radial-gradient(1000px 600px at 80% 0%, rgba(90,138,90,.55), rgba(90,138,90,0) 60%),
    radial-gradient(1200px 800px at 10% 100%, rgba(32,64,52,.9), rgba(32,64,52,0) 62%),
    linear-gradient(155deg, #3d4843 0%, #2c3a35 45%, #1f2a26 100%);
}

/* ---------- 开机画面 ---------- */
#boot-screen {
  position: fixed; inset: 0; z-index: 13000;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 76px;
}
#boot-logo { opacity: 0; transition: opacity 0.8s ease; }
#boot-logo.in { opacity: 1; }
#boot-logo svg { display: block; }
#boot-progress {
  width: 210px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
#boot-bar {
  width: 0%; height: 100%;
  background: #fff; border-radius: 3px;
}

/* ---------- 锁定屏幕 ---------- */
#lock-screen {
  position: fixed; inset: 0; z-index: 10000;
  overflow: hidden;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#lock-screen.unlocking { opacity: 0; transform: scale(1.06); pointer-events: none; }
#lock-bg {
  position: absolute; inset: -60px;
  background-size: cover; background-position: center;
  filter: blur(38px) brightness(0.72);
}
#lock-content {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 9vh 0 5vh;
  color: #fff;
}
#lock-clock { text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
#lock-date { font-size: 22px; font-weight: 500; margin-bottom: 8px; }
#lock-time { font-size: 92px; font-weight: 700; line-height: 1; letter-spacing: -2px; }
#lock-user { display: flex; flex-direction: column; align-items: center; gap: 9px; }
#lock-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
#lock-username { font-size: 17px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
#lock-password {
  width: 190px; height: 30px;
  border-radius: 15px; border: none; outline: none;
  background: rgba(255,255,255,.34);
  color: #fff; text-align: center; font-size: 13px;
  backdrop-filter: blur(8px);
  transition: opacity .25s, visibility .25s;
}
#lock-password::placeholder { color: rgba(255,255,255,.75); }
#lock-password.hidden { visibility: hidden; opacity: 0; }
#lock-hint { font-size: 12px; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* ---------- 关机画面 ---------- */
#shutdown-screen {
  position: fixed; inset: 0; z-index: 12000;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
#shutdown-text { color: rgba(255,255,255,.55); font-size: 26px; font-weight: 300; letter-spacing: 2px; }
#shutdown-sub { color: rgba(255,255,255,.28); font-size: 13px; }

/* ---------- 亮度遮罩 ---------- */
#brightness-overlay {
  position: fixed; inset: 0; z-index: 14000;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}

/* ---------- 菜单栏 ---------- */
#menubar {
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  z-index: 5000;
  background: var(--mb-bg);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  color: var(--mb-text);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 14px;
  box-shadow: 0 0.5px 0 rgba(0,0,0,.12);
}
.mb-left, .mb-right { display: flex; align-items: center; height: 100%; }
.mb-item {
  height: 22px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 5px; font-size: 13px; line-height: 1;
  color: var(--mb-text);
  position: relative;
}
.mb-item:hover, .mb-item.open { background: var(--hover-bg); }
.mb-appname { font-weight: 700; }
.mb-apple { padding: 0 8px; }
.mb-apple svg { display: block; fill: var(--mb-text); }
.mb-item svg { display: inline-block; }
#mb-clock { font-variant-numeric: tabular-nums; }
#mb-dnd { display: none; }
#mb-dnd.show { display: inline-flex; }

/* 菜单栏下拉菜单 */
.mbmenu {
  position: fixed; z-index: 5600; min-width: 218px;
  background: var(--panel-bg);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-radius: 8px;
  border: 0.5px solid var(--win-border);
  box-shadow: var(--shadow-menu);
  padding: 5px;
  color: var(--win-text);
}
.mbm-item {
  display: flex; width: 100%; align-items: center;
  justify-content: space-between; gap: 24px;
  padding: 4px 10px; border-radius: 5px;
  font-size: 13px; text-align: left; white-space: nowrap;
}
.mbm-item:hover { background: var(--sel-bg); color: #fff; }
.mbm-item.disabled { color: var(--win-text2); opacity: .55; pointer-events: none; }
.mbm-sep { height: 1px; margin: 5px 10px; background: var(--win-border); }
.mbm-key { font-size: 13px; opacity: .58; }

/* ---------- 窗口 ---------- */
#windows-layer { position: absolute; inset: 30px 0 0 0; }
.win {
  position: absolute;
  min-width: 240px; min-height: 120px;
  border-radius: 11px;
  background: var(--win-bg);
  color: var(--win-text);
  box-shadow: 0 22px 68px rgba(0,0,0,.4), 0 0 0 0.5px var(--win-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: left .24s cubic-bezier(.25,.8,.3,1), top .24s cubic-bezier(.25,.8,.3,1),
              width .24s cubic-bezier(.25,.8,.3,1), height .24s cubic-bezier(.25,.8,.3,1),
              transform .24s ease, opacity .24s ease;
  outline: none;
}
.win:not(.focused) { box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 0.5px var(--win-border); }
.win.dragging, .win.resizing { transition: none; }
.win.minimizing { transform: translateY(105vh) scale(0.08); opacity: 0; pointer-events: none; }
.win.anim-open { animation: winOpen .2s ease; }
@keyframes winOpen { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.win-titlebar {
  flex: 0 0 38px;
  display: flex; align-items: center;
  background: var(--win-title-bg);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 0.5px solid var(--win-border);
  position: relative;
  padding: 0 12px;
}
.win-body { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.win-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; color: var(--win-text);
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
.win:not(.focused) .win-title { color: var(--win-text2); }

/* 红绿灯按钮 */
.traffic { display: flex; gap: 8px; z-index: 2; }
.tl {
  width: 12px; height: 12px; border-radius: 50%;
  position: relative; padding: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.18);
}
.tl.red { background: #FF5F57; }
.tl.yellow { background: #FEBC2E; }
.tl.green { background: #28C840; }
.win:not(.focused) .tl { background: #d2d2d6; }
html.dark .win:not(.focused) .tl { background: #5b5b60; }
.tl::after {
  content: ''; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  color: rgba(0,0,0,.52); opacity: 0;
}
.traffic:hover .tl::after { opacity: 1; }
.tl.red::after { content: '×'; font-size: 11px; top: -0.5px; }
.tl.yellow::after { content: '–'; top: -3px; }
.tl.green::after { content: '+'; top: -0.5px; }

/* 调整大小手柄 */
.rs { position: absolute; z-index: 5; }
.rs-n { top: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.rs-s { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.rs-e { right: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.rs-w { left: -3px; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.rs-ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.rs-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.rs-nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.rs-se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize; }

/* ---------- Dock ---------- */
#dock-wrap {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center;
  z-index: 6000; pointer-events: none;
}
#dock {
  pointer-events: auto;
  display: flex; align-items: flex-end; gap: 4px;
  padding: 6px 8px 2px;
  background: var(--dock-bg);
  backdrop-filter: blur(26px) saturate(1.9);
  -webkit-backdrop-filter: blur(26px) saturate(1.9);
  border-radius: 24px;
  border: 0.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 34px rgba(0,0,0,.32);
}
html.dark #dock { border-color: rgba(255,255,255,.14); }
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; }
.dock-icon {
  width: var(--sz, 52px); height: var(--sz, 52px);
  border-radius: 23%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--sz, 52px) * 0.56);
  background: var(--icon-bg, #eee);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.1), 0 2px 7px rgba(0,0,0,.2);
  transition: width .1s ease-out, height .1s ease-out;
}
.dock-icon.trash { background: rgba(255,255,255,.55); }
html.dark .dock-icon.trash { background: rgba(255,255,255,.16); }
.dock-icon:active { filter: brightness(.8); }
.dock-tip {
  position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
  background: var(--tip-bg);
  color: #fff;
  padding: 4px 11px; border-radius: 7px;
  font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
html.dark .dock-tip { color: #1d1d1f; }
.dock-item:hover .dock-tip { opacity: 1; }
.dock-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(0,0,0,.65);
  margin-top: 3px; visibility: hidden;
}
html.dark .dock-dot { background: rgba(255,255,255,.85); }
.dock-item.running .dock-dot { visibility: visible; }
.dock-sep { width: 1px; height: calc(var(--sz, 52px) + 2px); background: rgba(0,0,0,.18); margin: 0 4px; align-self: center; }
html.dark .dock-sep { background: rgba(255,255,255,.2); }
.dock-icon.bounce { animation: dockBounce .75s ease; }
@keyframes dockBounce {
  0%, 100% { transform: translateY(0); }
  28% { transform: translateY(calc(var(--sz,52px) * -0.5)); }
  55% { transform: translateY(0); }
  78% { transform: translateY(calc(var(--sz,52px) * -0.2)); }
}

/* ---------- 桌面图标 ---------- */
#desktop-icons { position: absolute; inset: 30px 0 0 0; z-index: 1; }
.dicon {
  position: absolute; width: 92px; padding: 6px 2px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-radius: 8px;
}
.dicon-img {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.dicon.sel .dicon-img { background: rgba(255,255,255,.24); border-radius: 7px; }
.dicon-name {
  max-width: 100%; text-align: center;
  font-size: 12px; color: var(--icon-label);
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  padding: 1px 5px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-all;
}
.dicon.sel .dicon-name { background: var(--sel-bg); text-shadow: none; }
.dicon-name input {
  width: 88px; font-size: 12px; text-align: center;
  border: 1px solid var(--accent); border-radius: 4px; outline: none;
  background: var(--input-bg); color: var(--win-text);
}

/* ---------- 右键菜单 ---------- */
.ctx {
  position: fixed; z-index: 9500; min-width: 190px;
  background: var(--panel-bg);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 0.5px solid var(--win-border);
  border-radius: 8px; box-shadow: var(--shadow-menu);
  padding: 5px; color: var(--win-text);
  animation: ctxIn .1s ease;
}
@keyframes ctxIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.ctx-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 4px 11px; border-radius: 5px; font-size: 13px; text-align: left; white-space: nowrap;
  gap: 18px;
}
.ctx-item:hover { background: var(--sel-bg); color: #fff; }
.ctx-item.disabled { color: var(--win-text2); opacity: .55; pointer-events: none; }
.ctx-item.danger { color: #ff453a; }
.ctx-item.danger:hover { background: #ff453a; color: #fff; }
.ctx-sep { height: 1px; margin: 5px 11px; background: var(--win-border); }

/* ---------- 通用弹窗 ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0.24);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  min-width: 300px; max-width: 82vw;
  background: var(--panel-bg);
  backdrop-filter: blur(34px) saturate(1.8);
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
  border-radius: 13px;
  border: 0.5px solid var(--win-border);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  color: var(--win-text);
  animation: winOpen .18s ease;
}
.modal-title {
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 14px 20px 0;
}
.modal-content { padding: 12px 20px; font-size: 13px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 14px; }
.btn {
  min-width: 74px; height: 24px; padding: 0 14px;
  border-radius: 6px; font-size: 13px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 0.5px var(--win-border), 0 1px 2px rgba(0,0,0,.1);
  color: var(--win-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.92); }
.btn.primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn.danger { background: #ff453a; color: #fff; box-shadow: none; }

/* ---------- 开关 / 滑杆 ---------- */
.switch {
  width: 38px; height: 23px; border-radius: 12px;
  background: rgba(120,120,128,.32);
  position: relative; transition: background .2s;
  flex: 0 0 auto;
}
.switch::after {
  content: ''; position: absolute; top: 1.5px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.32);
  transition: left .2s cubic-bezier(.25,.8,.3,1);
}
.switch.on { background: #34c759; }
.switch.on::after { left: 16px; }
input[type="range"].slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent;
}
input[type="range"].slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: rgba(120,120,128,.4);
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 0.5px rgba(0,0,0,.08);
  margin-top: -7px;
}

/* ---------- 控制中心 / 通知中心 ---------- */
.panel {
  position: fixed; right: 12px; top: 38px; z-index: 7000;
  width: 330px;
  background: var(--panel-bg);
  backdrop-filter: blur(34px) saturate(1.9);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  border: 0.5px solid var(--win-border);
  border-radius: 15px;
  box-shadow: 0 18px 54px rgba(0,0,0,.38);
  color: var(--win-text);
  padding: 10px;
  transition: transform .28s cubic-bezier(.25,.8,.3,1), opacity .22s ease;
}
.panel.off { transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-card {
  background: var(--card-bg);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.cc-card.span2 { grid-column: span 2; }
.cc-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--win-text2); }
.cc-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.cc-ic {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex: 0 0 auto;
  background: rgba(120,120,128,.24); color: var(--win-text);
  transition: background .2s, color .2s;
}
.cc-ic.active { background: var(--accent); color: #fff; }
.cc-lbl { flex: 1; min-width: 0; }
.cc-lbl b { display: block; font-size: 13px; font-weight: 600; }
.cc-lbl span { font-size: 11px; color: var(--win-text2); }
.cc-slider-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.cc-slider-row > span { font-size: 15px; }

#nc {
  top: 38px; right: 12px; width: 336px;
  bottom: auto; max-height: calc(100vh - 56px);
  overflow-y: auto;
}
.nc-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 9px; }
.nc-head b { font-size: 14px; }
.nc-clear { font-size: 12px; color: var(--accent); padding: 2px 7px; border-radius: 5px; }
.nc-clear:hover { background: var(--hover-bg); }
.nc-notif, .nc-widget {
  background: var(--card-bg); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.nc-notif { display: flex; gap: 10px; align-items: flex-start; }
.nc-notif .nc-ic { font-size: 21px; }
.nc-notif b { display: block; font-size: 13px; }
.nc-notif p { font-size: 12px; color: var(--win-text2); margin-top: 1px; }
.nc-notif small { font-size: 10px; color: var(--win-text2); margin-left: auto; flex: 0 0 auto; }
.nc-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.nc-widget { margin-bottom: 0; }
.nc-widget .cc-title { margin-bottom: 5px; }
.nc-weather-now { display: flex; align-items: center; gap: 8px; }
.nc-weather-now .big { font-size: 30px; }
.nc-weather-now b { font-size: 20px; }
.nc-battery { height: 9px; border-radius: 5px; background: rgba(120,120,128,.3); overflow: hidden; margin-top: 7px; }
.nc-battery i { display: block; height: 100%; background: #34c759; border-radius: 5px; }
.nc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: 10px; text-align: center; color: var(--win-text2); }
.nc-cal-grid span { padding: 2px 0; }
.nc-cal-grid .today { background: #ff3b30; color: #fff; border-radius: 50%; font-weight: 700; }

/* ---------- 聚焦搜索 ---------- */
#spotlight {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; justify-content: center;
}
#spotlight.off { display: none; }
.sp-box {
  margin-top: 19vh; height: fit-content;
  width: 620px; max-width: 92vw;
  background: var(--panel-bg);
  backdrop-filter: blur(40px) saturate(1.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.9);
  border-radius: 16px;
  border: 0.5px solid var(--win-border);
  box-shadow: 0 26px 76px rgba(0,0,0,.5);
  overflow: hidden;
  animation: winOpen .16s ease;
}
.sp-input-row { display: flex; align-items: center; gap: 12px; padding: 13px 17px; }
.sp-input-row svg { flex: 0 0 auto; opacity: .65; }
#sp-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 21px; color: var(--win-text); font-weight: 300;
}
#sp-input::placeholder { color: var(--win-text2); }
#sp-results { max-height: 46vh; overflow-y: auto; padding: 6px 8px 10px; }
#sp-results:empty { padding: 0; }
.sp-section {
  font-size: 11px; font-weight: 700; color: var(--win-text2);
  padding: 8px 10px 3px;
}
.sp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px;
  font-size: 14px; color: var(--win-text);
}
.sp-item .sp-ic {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex: 0 0 auto;
}
.sp-item small { color: var(--win-text2); font-size: 11px; margin-left: auto; }
.sp-item.sel { background: var(--sel-bg); color: #fff; }
.sp-item.sel small { color: rgba(255,255,255,.8); }

/* ---------- 启动台 ---------- */
#launchpad {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(30, 30, 40, 0.42);
  backdrop-filter: blur(36px) saturate(1.6);
  -webkit-backdrop-filter: blur(36px) saturate(1.6);
  display: flex; flex-direction: column; align-items: center;
  padding: 4.5vh 6vw;
  animation: lpIn .22s ease;
}
@keyframes lpIn { from { opacity: 0; } to { opacity: 1; } }
#lp-input {
  width: 240px; height: 30px;
  border-radius: 8px; border: 0.5px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.18);
  color: #fff; font-size: 14px; text-align: center; outline: none;
  margin-bottom: 4.5vh;
}
#lp-input::placeholder { color: rgba(255,255,255,.7); }
#lp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 3.2vh 1vw; width: 100%; max-width: 940px;
}
.lp-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px;
  transition: transform .12s ease;
}
.lp-app:hover { background: rgba(255,255,255,.08); }
.lp-app:active { transform: scale(.92); }
.lp-icon {
  width: 72px; height: 72px; border-radius: 23%;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  background: var(--icon-bg, #eee);
  box-shadow: 0 6px 20px rgba(0,0,0,.3), inset 0 0 0 0.5px rgba(0,0,0,.1);
}
.lp-name { font-size: 13px; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.5); }

/* ---------- 访达 ---------- */
.finder { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.f-toolbar {
  flex: 0 0 46px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--win-border);
}
.f-nav {
  width: 27px; height: 23px; border-radius: 6px;
  font-size: 15px; color: var(--win-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.f-nav:hover { background: var(--hover-bg); }
.f-nav.disabled { color: var(--win-text2); opacity: .4; pointer-events: none; }
.f-crumb { display: flex; align-items: center; min-width: 0; overflow: hidden; flex: 1; }
.f-crumb button {
  padding: 3px 7px; border-radius: 5px; font-size: 13px; font-weight: 600;
  white-space: nowrap; color: var(--win-text);
}
.f-crumb button:hover { background: var(--hover-bg); }
.f-crumb .cr-sep { color: var(--win-text2); font-size: 11px; }
.f-spacer { flex: 1; }
.f-viewbtns { display: flex; background: var(--hover-bg); border-radius: 7px; padding: 2px; gap: 2px; }
.f-viewbtn {
  width: 30px; height: 21px; border-radius: 5px; font-size: 12px;
  color: var(--win-text); display: inline-flex; align-items: center; justify-content: center;
}
.f-viewbtn.active { background: var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.f-tbtn {
  height: 25px; padding: 0 9px; border-radius: 6px; font-size: 15px;
  color: var(--win-text); display: inline-flex; align-items: center; justify-content: center;
}
.f-tbtn:hover { background: var(--hover-bg); }
.f-search {
  width: 150px; height: 25px; border-radius: 6px;
  border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text);
  padding: 0 9px; font-size: 12px; outline: none;
}
.f-search:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.35); border-color: var(--accent); }
.f-main { flex: 1; display: flex; min-height: 0; }
.f-side {
  flex: 0 0 168px; overflow-y: auto;
  padding: 9px 8px;
  border-right: 0.5px solid var(--win-border);
  background: rgba(120,120,128,.06);
}
.f-side-title { font-size: 11px; font-weight: 700; color: var(--win-text2); padding: 7px 8px 3px; }
.f-side-item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 13px; color: var(--win-text);
  width: 100%; text-align: left;
}
.f-side-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-side-item:hover { background: var(--hover-bg); }
.f-side-item.active { background: rgba(120,120,128,.2); }
.f-content { flex: 1; overflow: auto; padding: 12px; position: relative; }
.f-content.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 6px; align-content: start; }
.fi {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 3px 5px; border-radius: 7px;
}
.fi-thumb {
  width: 52px; height: 52px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; line-height: 1;
}
.fi.sel .fi-thumb { background: rgba(120,120,128,.22); }
.fi-name {
  font-size: 12px; text-align: center; color: var(--win-text);
  max-width: 100%; padding: 0 5px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-all;
}
.fi.sel .fi-name { background: var(--sel-bg); color: #fff; }
.fi-name input { width: 84px; font-size: 12px; text-align: center; border: 1px solid var(--accent); border-radius: 4px; outline: none; background: var(--input-bg); color: var(--win-text); }
.f-content.list { padding: 0; }
.fi-row {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px;
  font-size: 13px; color: var(--win-text);
}
.fi-row:nth-child(even) { background: rgba(120,120,128,.05); }
.fi-row.sel { background: var(--sel-bg) !important; color: #fff; }
.fi-row.sel .fi-cell { color: #fff; }
.fi-row .fi-ic { font-size: 17px; flex: 0 0 auto; }
.fi-row .fi-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-row .fi-cell { width: 110px; flex: 0 0 auto; color: var(--win-text2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-row .fi-cell.w { width: 90px; }
.fi-row input { font-size: 13px; border: 1px solid var(--accent); border-radius: 4px; outline: none; background: var(--input-bg); color: var(--win-text); padding: 1px 6px; width: 200px; }
.f-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--win-text2); font-size: 15px;
}
.f-status {
  flex: 0 0 24px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 11px; color: var(--win-text2);
  border-top: 0.5px solid var(--win-border);
}

/* ---------- 终端 ---------- */
.term {
  flex: 1; background: rgba(22, 24, 28, 0.94);
  color: #d6f5d6; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.5;
  padding: 8px 10px; overflow-y: auto;
  user-select: text;
}
.term .term-out { white-space: pre-wrap; word-break: break-all; }
.term .term-out .dim { color: #7f8c8d; }
.term .term-out .err { color: #ff7b72; }
.term .term-out .cyan { color: #7ee0ff; }
.term-input-line { display: flex; align-items: center; gap: 7px; }
.term-prompt { color: #6ee7a8; white-space: nowrap; }
.term-in {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e8f5e9; font-family: var(--mono); font-size: 12.5px;
  caret-color: #6ee7a8;
}

/* ---------- 备忘录 ---------- */
.notes { display: flex; height: 100%; background: var(--win-bg); }
.notes-side {
  flex: 0 0 218px; display: flex; flex-direction: column;
  border-right: 0.5px solid var(--win-border);
  background: rgba(120,120,128,.06);
}
.notes-tools { display: flex; gap: 4px; padding: 9px 10px 5px; }
.notes-tools .f-tbtn { font-size: 14px; }
.notes-list { flex: 1; overflow-y: auto; padding: 4px 7px; }
.note-item { padding: 7px 10px; border-radius: 7px; margin-bottom: 2px; }
.note-item b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item span { font-size: 11px; color: var(--win-text2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-item:hover { background: var(--hover-bg); }
.note-item.active { background: #ffd60a55; }
html.dark .note-item.active { background: #ffd60a33; }
.notes-main { flex: 1; display: flex; flex-direction: column; }
.notes-date { text-align: center; font-size: 11px; color: var(--win-text2); padding: 9px 0 2px; }
.notes-editor {
  flex: 1; border: none; outline: none; resize: none;
  padding: 6px 22px 18px; font-size: 14px; line-height: 1.55;
  background: transparent; color: var(--win-text);
  font-family: var(--font);
}
.notes-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--win-text2); font-size: 14px; }

/* ---------- 文本编辑 ---------- */
.te { display: flex; flex-direction: column; height: 100%; }
.te-bar {
  flex: 0 0 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-bottom: 0.5px solid var(--win-border);
}
.te-name { font-size: 12px; color: var(--win-text2); margin-left: auto; }
.te-area {
  flex: 1; border: none; outline: none; resize: none;
  padding: 13px 16px; font-size: 14px; line-height: 1.55;
  background: var(--win-bg); color: var(--win-text);
  font-family: var(--font);
}

/* ---------- 计算器 ---------- */
.calc { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.calc-display {
  flex: 1; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 10px 18px;
  font-size: 52px; font-weight: 300; color: var(--win-text);
  overflow: hidden; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--win-border);
  border-top: 0.5px solid var(--win-border);
}
html:not(.dark) .calc-grid { background: rgba(0,0,0,.1); }
.calc-btn {
  height: 62px; font-size: 21px;
  background: var(--win-bg); color: var(--win-text);
  display: flex; align-items: center; justify-content: center;
}
.calc-btn:hover { filter: brightness(1.09); }
.calc-btn:active { filter: brightness(.82); }
.calc-btn.fn { background: rgba(120,120,128,.22); }
.calc-btn.op { background: #ff9f0a; color: #fff; }
.calc-btn.op.active { background: #fff; color: #ff9f0a; }
.calc-btn.zero { grid-column: span 2; justify-content: flex-start; padding-left: 27px; }

/* ---------- 日历 ---------- */
.cal { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.cal-head { display: flex; align-items: center; padding: 12px 16px 8px; }
.cal-title { font-size: 19px; font-weight: 700; color: var(--win-text); }
.cal-title b { color: #ff3b30; }
.cal-navs { margin-left: auto; display: flex; gap: 4px; }
.cal-gridwrap { padding: 0 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--win-text2); padding: 6px 0;
  border-bottom: 0.5px solid var(--win-border);
}
.cal-day {
  aspect-ratio: 1.7; display: flex; flex-direction: column; align-items: center;
  padding-top: 5px; position: relative; border-radius: 7px;
  color: var(--win-text); font-size: 14px;
}
.cal-day:hover { background: var(--hover-bg); }
.cal-day span {
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-day.today span { background: #ff3b30; color: #fff; font-weight: 700; }
.cal-day.other { color: var(--win-text2); opacity: .45; }
.cal-day.sel:not(.today) span { background: var(--sel-soft); }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 1px; }
.cal-day.other .cal-dot { visibility: hidden !important; }
.cal-dot.hidden { visibility: hidden; }
.cal-events { flex: 1; overflow-y: auto; padding: 10px 16px; border-top: 0.5px solid var(--win-border); margin-top: 10px; }
.cal-events h4 { font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.cal-evt {
  display: flex; align-items: center; gap: 8px;
  background: var(--sel-soft); border-radius: 6px;
  padding: 6px 10px; margin-bottom: 5px; font-size: 13px;
  color: var(--win-text);
}
.cal-evt::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); }
.cal-evt button { margin-left: auto; color: #ff453a; font-size: 14px; padding: 0 4px; border-radius: 4px; }
.cal-evt button:hover { background: var(--hover-bg); }
.cal-noevt { font-size: 12px; color: var(--win-text2); }
.cal-add { margin-top: 6px; font-size: 12px; color: var(--accent); padding: 3px 8px; border-radius: 5px; }
.cal-add:hover { background: var(--hover-bg); }

/* ---------- 照片 ---------- */
.photos-grid {
  flex: 1; overflow-y: auto; padding: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 7px; background: var(--win-bg); align-content: start;
}
.ph-item { border-radius: 6px; overflow: hidden; aspect-ratio: 1.55; position: relative; }
.ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ph-item:hover img { transform: scale(1.045); }
.photo-viewer {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  animation: lpIn .18s ease;
}
.photo-viewer img { max-width: 82vw; max-height: 82vh; border-radius: 6px; box-shadow: 0 12px 50px rgba(0,0,0,.6); }
.pv-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.pv-btn:hover { background: rgba(255,255,255,.3); }
.pv-prev { left: 3vw; }
.pv-next { right: 3vw; }
.pv-close { position: absolute; top: 26px; left: 30px; transform: none; font-size: 18px; }
.pv-count { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; }

/* ---------- 音乐 ---------- */
.music { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.music-head { padding: 15px 18px 9px; }
.music-head h3 { font-size: 17px; font-weight: 700; }
.music-head p { font-size: 12px; color: var(--win-text2); }
.mu-list { flex: 1; overflow-y: auto; padding: 0 10px; }
.mu-song {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; border-radius: 8px; width: 100%; text-align: left;
}
.mu-song:hover { background: var(--hover-bg); }
.mu-song.playing { background: var(--sel-soft); }
.mu-cover {
  width: 42px; height: 42px; border-radius: 7px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.mu-meta { flex: 1; min-width: 0; }
.mu-meta b { display: block; font-size: 13px; color: var(--win-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-meta span { font-size: 11px; color: var(--win-text2); }
.mu-dur { font-size: 12px; color: var(--win-text2); font-variant-numeric: tabular-nums; }
.mu-ctl {
  flex: 0 0 auto; margin: 8px 12px 12px;
  border-radius: 12px; background: var(--card-bg);
  padding: 10px 14px;
  box-shadow: 0 1px 5px rgba(0,0,0,.1);
  display: flex; flex-direction: column; gap: 6px;
}
.mu-top { display: flex; align-items: center; gap: 10px; }
.mu-now { flex: 1; min-width: 0; font-size: 12px; color: var(--win-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-btns button { font-size: 17px; padding: 0 8px; color: var(--win-text); }
.mu-btns button:hover { opacity: .7; }
.mu-progress { height: 4px; border-radius: 2px; background: rgba(120,120,128,.32); overflow: hidden; }
.mu-progress i { display: block; height: 100%; width: 0%; background: #fa2d55; transition: width .25s linear; }

/* ---------- 系统设置 ---------- */
.settings { display: flex; height: 100%; }
.set-side {
  flex: 0 0 196px; padding: 10px; overflow-y: auto;
  border-right: 0.5px solid var(--win-border);
  background: rgba(120,120,128,.06);
}
.set-me { display: flex; align-items: center; gap: 9px; padding: 6px 8px 12px; }
.set-me .set-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg,#9be15d,#00c6fb); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.set-me b { font-size: 13px; display: block; }
.set-me span { font-size: 11px; color: var(--win-text2); }
.set-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 5px 8px; border-radius: 7px;
  font-size: 13px; text-align: left;
}
.set-item .set-ic {
  width: 23px; height: 23px; border-radius: 6px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.set-item:hover { background: var(--hover-bg); }
.set-item.active { background: var(--sel-bg); color: #fff; }
.set-item.active .set-ic { box-shadow: none; }
.set-body { flex: 1; overflow-y: auto; padding: 22px 28px; }
.set-body h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.set-group { background: var(--card-bg); border-radius: 11px; padding: 4px 14px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.set-row + .set-row { border-top: 0.5px solid var(--win-border); }
.set-row .s-lbl { flex: 1; }
.set-row .s-lbl b { font-size: 13px; font-weight: 600; display: block; }
.set-row .s-lbl span { font-size: 11px; color: var(--win-text2); }
.appear-cards { display: flex; gap: 14px; margin-bottom: 20px; }
.appear-card { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; }
.appear-thumb {
  width: 128px; height: 82px; border-radius: 8px; overflow: hidden;
  border: 2.5px solid transparent;
  box-shadow: 0 2px 9px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
}
.appear-card.active .appear-thumb { border-color: var(--accent); }
.ap-thumb-bar { flex: 0 0 12px; }
.ap-thumb-body { flex: 1; }
.ap-light .ap-thumb-bar { background: #ececf0; } .ap-light .ap-thumb-body { background: #fafafc; }
.ap-dark .ap-thumb-bar { background: #3a3a3e; } .ap-dark .ap-thumb-body { background: #28282c; }
.wp-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 13px; }
.wp-thumb { display: flex; flex-direction: column; gap: 6px; font-size: 12px; align-items: center; }
.wp-thumb > div {
  width: 100%; aspect-ratio: 1.75; border-radius: 8px;
  background-size: cover; border: 2.5px solid transparent;
  box-shadow: 0 2px 9px rgba(0,0,0,.22);
}
.wp-thumb.active > div { border-color: var(--accent); }
.about-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.about-logo { width: 74px; height: 74px; border-radius: 17px; background: linear-gradient(160deg,#5ab0ff,#1f6feb); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.about-hero h3 { font-size: 17px; font-weight: 700; }
.about-hero p { font-size: 12px; color: var(--win-text2); margin-top: 2px; }
.about-table { width: 100%; font-size: 13px; }
.about-table div { display: flex; padding: 6px 0; border-top: 0.5px solid var(--win-border); }
.about-table div span:first-child { width: 130px; color: var(--win-text2); }

/* ---------- Safari ---------- */
.safari { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.sf-bar {
  flex: 0 0 44px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-bottom: 0.5px solid var(--win-border);
}
.sf-url {
  flex: 1; height: 28px; max-width: 560px; margin: 0 auto;
  border-radius: 8px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text);
  text-align: center; font-size: 13px; outline: none; padding: 0 12px;
}
.sf-url:focus { box-shadow: 0 0 0 3.5px rgba(10,132,255,.4); }
.sf-page { flex: 1; overflow-y: auto; }
.sf-favs { padding: 34px 30px; }
.sf-favs h2 { font-size: 21px; font-weight: 700; margin-bottom: 17px; }
.sf-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 17px 9px; max-width: 640px; }
.sf-fav { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; color: var(--win-text); }
.sf-fav .sf-fav-tile {
  width: 62px; height: 62px; border-radius: 14px;
  background: var(--card-bg); box-shadow: 0 2px 9px rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center; font-size: 31px;
  transition: transform .13s;
}
.sf-fav:hover .sf-fav-tile { transform: scale(1.07); }
.sf-hero { padding: 60px 40px; text-align: center; color: #fff; }
.sf-hero .big-emoji { font-size: 74px; }
.sf-hero h1 { font-size: 38px; font-weight: 700; margin: 13px 0 7px; }
.sf-hero p { font-size: 17px; opacity: .92; }
.sf-hero .btn { margin-top: 19px; background: #fff; color: #000; border-radius: 20px; min-width: 110px; height: 34px; font-weight: 600; }
.sf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 26px 36px; }
.sf-card { border-radius: 14px; padding: 22px 17px; text-align: center; background: var(--card-bg); color: var(--win-text); box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.sf-card .em { font-size: 40px; }
.sf-card b { display: block; margin: 9px 0 5px; font-size: 15px; }
.sf-card span { font-size: 12px; color: var(--win-text2); }
.sf-repo { max-width: 860px; margin: 0 auto; padding: 20px 30px; }
.sf-repo-head { border-bottom: 1px solid var(--win-border); padding-bottom: 15px; margin-bottom: 14px; }
.sf-repo-head h2 { font-size: 19px; } .sf-repo-head p { color: var(--win-text2); margin-top: 4px; font-size: 13px; }
.sf-file { display: flex; gap: 10px; padding: 8px 6px; border-bottom: 0.5px solid var(--win-border); font-size: 13px; color: var(--win-text); }
.sf-file span:last-child { margin-left: auto; color: var(--win-text2); font-size: 12px; }
.sf-readme { margin-top: 15px; border: 1px solid var(--win-border); border-radius: 9px; padding: 16px 19px; font-size: 13px; line-height: 1.6; color: var(--win-text); }
.sf-wiki { max-width: 760px; margin: 0 auto; padding: 26px 30px; line-height: 1.7; color: var(--win-text); }
.sf-wiki h1 { font-size: 25px; border-bottom: 1px solid var(--win-border); padding-bottom: 8px; margin-bottom: 13px; }
.sf-wiki p { margin-bottom: 11px; font-size: 14px; }
.sf-news-item { display: flex; gap: 12px; padding: 13px 6px; border-bottom: 0.5px solid var(--win-border); }
.sf-news-item .em { font-size: 30px; }
.sf-news-item b { font-size: 14.5px; display: block; margin-bottom: 3px; }
.sf-news-item p { font-size: 12px; color: var(--win-text2); }
.sf-news-item small { font-size: 11px; color: var(--win-text2); margin-left: auto; flex: 0 0 auto; }
.sf-off { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; padding: 40px; text-align: center; }
.sf-off .em { font-size: 52px; }
.sf-off h2 { font-size: 19px; font-weight: 600; }
.sf-off p { font-size: 13.5px; color: var(--win-text2); max-width: 380px; line-height: 1.55; }
.sf-off .btn { margin-top: 14px; }
.sf-weather-now { text-align: center; padding: 36px 20px 22px; }
.sf-weather-now .em { font-size: 64px; }
.sf-weather-now .t { font-size: 52px; font-weight: 300; }
.sf-hours { display: flex; gap: 11px; justify-content: center; padding: 12px 20px 24px; flex-wrap: wrap; }
.sf-hour { background: var(--card-bg); border-radius: 10px; padding: 10px 13px; text-align: center; font-size: 12px; }
.sf-hour .em { font-size: 21px; display: block; margin: 4px 0; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,128,.42); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,.62); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   v2 — 真实图标 / Dock 方位 / 设置扩展 / Safari / 音乐 等
   ========================================================= */

/* ---------- 资源图标（PNG，加载失败时保留 emoji 回退） ---------- */
.aicon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-icon { background: none !important; box-shadow: none !important; }
.tb-ic { width: 16px; height: 16px; display: inline-flex; flex: 0 0 auto; }
.tb-ic .aicon-img { border-radius: 4px; }
.win-title { display: flex; align-items: center; gap: 5px; }
.mb-appic { width: 15px; height: 15px; display: inline-flex; }
.mb-appic .aicon-img { border-radius: 3.5px; }
.mb-item.mb-dim { opacity: .45; }
.f-side-ic { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.fi-row .fi-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nc-notif .nc-ic { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nc-notif .nc-ic .aicon-img { border-radius: 6px; }
.set-app-ic { width: 24px; height: 24px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.set-app-ic .aicon-img { border-radius: 5.5px; }
.fq-name { display: flex; align-items: center; gap: 8px; }
.fq-ic { width: 20px; height: 20px; display: inline-flex; flex: 0 0 auto; }
.fq-ic .aicon-img { border-radius: 4.5px; }
.dock-icon .aicon-img, .lp-icon .aicon-img { border-radius: 23%; }
.dicon-img .aicon-img { border-radius: 9px; }
.fi-thumb .aicon-img { border-radius: 8px; }

/* ---------- 夜览遮罩 ---------- */
#nightshift-overlay {
  position: fixed; inset: 0; z-index: 13900;
  background: #ff9f0a; opacity: 0; pointer-events: none;
  mix-blend-mode: multiply; transition: opacity .4s ease;
}

/* ---------- Dock 方位与自动隐藏 ---------- */
#dock { transition: transform .24s cubic-bezier(.25,.8,.3,1); }
#dock-wrap.pos-left, #dock-wrap.pos-right {
  top: 50%; bottom: auto; transform: translateY(-50%);
  justify-content: flex-start;
}
#dock-wrap.pos-left { left: 9px; right: auto; }
#dock-wrap.pos-right { right: 9px; left: auto; }
#dock-wrap.pos-left #dock, #dock-wrap.pos-right #dock {
  flex-direction: column; align-items: center; padding: 8px 6px;
}
#dock-wrap.pos-left .dock-sep, #dock-wrap.pos-right .dock-sep {
  width: calc(var(--sz, 52px) + 2px); height: 1px; margin: 4px 0; align-self: center;
}
#dock-wrap.pos-left .dock-tip { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
#dock-wrap.pos-right .dock-tip { left: auto; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
#dock-wrap.pos-bottom.autohide #dock { transform: translateY(calc(100% + 22px)); }
#dock-wrap.pos-left.autohide #dock { transform: translateX(calc(-100% - 22px)); }
#dock-wrap.pos-right.autohide #dock { transform: translateX(calc(100% + 22px)); }
#dock-wrap.autohide.show #dock { transform: none; }
#dock-hotzone { position: absolute; z-index: 5900; display: none; }
#dock-hotzone.hz-bottom { left: 0; right: 0; bottom: 0; height: 5px; }
#dock-hotzone.hz-left { left: 0; top: 30px; bottom: 0; width: 5px; }
#dock-hotzone.hz-right { right: 0; top: 30px; bottom: 0; width: 5px; }

/* ---------- 屏幕保护程序 ---------- */
#screensaver {
  position: fixed; inset: 0; z-index: 9800;
  background: #000; overflow: hidden;
}
.saver-clock { position: absolute; color: #fff; text-align: center; text-shadow: 0 4px 30px rgba(0,0,0,.6); animation: saverFloat 26s ease-in-out infinite alternate; }
.saver-time { font-size: 96px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.saver-date { font-size: 22px; font-weight: 500; margin-top: 10px; opacity: .85; }
@keyframes saverFloat {
  0%   { top: 12%; left: 8%; }
  25%  { top: 58%; left: 62%; }
  50%  { top: 20%; left: 66%; }
  75%  { top: 62%; left: 12%; }
  100% { top: 38%; left: 38%; }
}
.saver-slide { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 4.2s ease; }
.saver-slide.off { opacity: 0; }

/* ---------- 系统设置扩展 ---------- */
.set-search {
  width: 100%; height: 26px; border-radius: 7px;
  border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text);
  font-size: 12px; padding: 0 9px; outline: none; margin-bottom: 8px;
}
.set-search:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.35); border-color: var(--accent); }
.set-sec-title { font-size: 11px; font-weight: 700; color: var(--win-text2); padding: 9px 8px 3px; }
.set-sub-title { font-size: 11px; font-weight: 700; color: var(--win-text2); padding: 8px 0 5px; }
.set-note { font-size: 11px; color: var(--win-text2); margin: -10px 4px 16px; line-height: 1.5; }
.set-row.dim { opacity: .45; }
.set-dim { color: var(--win-text2); font-size: 12px; text-align: right; }
.set-input {
  height: 26px; border-radius: 6px; width: 190px;
  border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text);
  font-size: 12.5px; padding: 0 9px; outline: none;
}
.set-input:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.35); border-color: var(--accent); }
.set-empty { padding: 16px 0; text-align: center; color: var(--win-text2); font-size: 12.5px; }
.set-no-result { padding: 14px 8px; color: var(--win-text2); font-size: 12px; }
.set-row.radio { cursor: pointer; }
.set-row.radio:hover { background: var(--hover-bg); border-radius: 7px; }
.radio-mark { color: var(--accent); font-size: 12px; }
.btn-off { opacity: .5; pointer-events: auto; }
.store-bar { height: 10px; border-radius: 5px; background: rgba(120,120,128,.3); overflow: hidden; margin: 2px 0 10px; }
.store-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.spinner {
  display: inline-block; width: 11px; height: 11px;
  border: 2px solid rgba(120,120,128,.4); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.su-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 0 20px; }
.su-gear { font-size: 52px; }
.touchid-circle {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--card-bg); display: flex; align-items: center; justify-content: center;
  font-size: 38px; box-shadow: 0 2px 9px rgba(0,0,0,.15);
}
.set-avatar.big {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(160deg,#9be15d,#00c6fb);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 6px 0 10px; }
.avatar-cell { font-size: 27px; padding: 7px 0; border-radius: 9px; border: 2px solid transparent; }
.avatar-cell:hover { background: var(--hover-bg); }
.avatar-cell.active { border-color: var(--accent); background: var(--sel-soft); }
.kbd-row { gap: 14px; justify-content: space-between; }
.kbd {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--card-bg); border: 0.5px solid var(--win-border); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 8px; white-space: nowrap;
}
.gesture-ic {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.ap-auto .ap-thumb-bar { background: linear-gradient(90deg, #ececf0 50%, #3a3a3e 50%); }
.ap-auto .ap-thumb-body { background: linear-gradient(90deg, #fafafc 50%, #28282c 50%); }

/* ---------- 访达 v2 ---------- */
.fi-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--win-bg); border-bottom: 0.5px solid var(--win-border);
  font-weight: 600;
}
.fi-hcell {
  width: 110px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--win-text2); cursor: pointer;
}
.fi-hcell:hover { color: var(--win-text); }
.fi-hcell.fi-nm { flex: 1; width: auto; }
.fi-hcell.w { width: 90px; }
.drop-target { outline: 2px solid var(--accent) !important; outline-offset: -2px; border-radius: 8px; }
#desktop-icons.drop-target { outline: none !important; background: rgba(10,132,255,.1); border-radius: 0; }
.ctx-sub { z-index: 9600; }

/* ---------- Safari v2 ---------- */
.sf-wrap { flex: 1; position: relative; display: flex; min-height: 0; }
.sf-frame { flex: 1; border: none; width: 100%; height: 100%; background: #fff; }
.sf-spin {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid rgba(120,120,128,.4); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.sf-hint { margin-top: 26px; font-size: 12px; color: var(--win-text2); max-width: 580px; line-height: 1.65; }

/* ---------- 音乐 v2 ---------- */
.music-outer { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.music-mid { flex: 1; display: flex; min-height: 0; }
.mu-side {
  flex: 0 0 168px; overflow-y: auto; padding: 10px 8px;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
}
.mu-side-title { font-size: 11px; font-weight: 700; color: var(--win-text2); padding: 7px 8px 3px; }
.mu-side-item {
  display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px;
  font-size: 13px; width: 100%; text-align: left; color: var(--win-text);
}
.mu-side-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-side-item:hover { background: var(--hover-bg); }
.mu-side-item.active { background: rgba(120,120,128,.2); }
.mu-side-cover { width: 20px; height: 20px; border-radius: 4px; flex: 0 0 auto; }
.mu-side-ic { font-size: 14px; }
.mu-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mu-main-head { padding: 13px 18px 7px; }
.mu-main-head h3 { font-size: 17px; font-weight: 700; }
.mu-main-head p { font-size: 12px; color: var(--win-text2); }
.mu-tracks { flex: 1; overflow-y: auto; padding: 0 10px 8px; }
.mu-tr {
  display: grid; grid-template-columns: 26px minmax(0,1fr) 110px 110px 52px;
  gap: 10px; align-items: center;
  width: 100%; padding: 6px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--win-text); text-align: left;
}
.mu-head {
  font-size: 11px; color: var(--win-text2);
  border-bottom: 0.5px solid var(--win-border); border-radius: 0;
  position: sticky; top: 0; background: var(--win-bg); z-index: 1;
}
.mu-song:hover { background: var(--hover-bg); }
.mu-song.playing { background: var(--sel-soft); }
.mu-idx { color: var(--win-text2); font-variant-numeric: tabular-nums; }
.mu-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mu-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mu-mini-cover { width: 26px; height: 26px; border-radius: 5px; flex: 0 0 auto; }
.mu-cell { color: var(--win-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.mu-dur { color: var(--win-text2); font-variant-numeric: tabular-nums; text-align: right; }
.mu-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; color: var(--win-text2); font-size: 13px; text-align: center; padding: 30px;
}
.mu-empty .em { font-size: 44px; }
.mu-player {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 46px minmax(90px,1fr) auto minmax(170px,1.3fr) minmax(100px,.55fr);
  gap: 12px; align-items: center;
  padding: 10px 14px; border-top: 0.5px solid var(--win-border); background: var(--card-bg);
}
.mu-pcover { width: 46px; height: 46px; border-radius: 7px; box-shadow: 0 2px 7px rgba(0,0,0,.2); background: rgba(120,120,128,.2); }
.mu-pmeta { min-width: 0; }
.mu-pmeta b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-pmeta span { font-size: 11px; color: var(--win-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mu-pctrls { display: flex; align-items: center; gap: 1px; }
.mu-pbtn { font-size: 15px; padding: 4px 7px; border-radius: 6px; color: var(--win-text); }
.mu-pbtn:hover { background: var(--hover-bg); }
.mu-pbtn.big { font-size: 19px; }
.mu-pbtn.on { color: var(--accent); }
.mu-pprog { display: flex; align-items: center; gap: 8px; }
.mu-time { font-size: 10.5px; color: var(--win-text2); font-variant-numeric: tabular-nums; width: 37px; text-align: center; flex: 0 0 auto; }
.mu-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(120,120,128,.32); overflow: hidden; cursor: pointer; }
.mu-bar i { display: block; height: 100%; width: 0%; background: #fa2d55; }
.mu-pvol { display: flex; align-items: center; gap: 7px; }
.mu-pvol span { font-size: 13px; }

/* ---------- 帮助窗口 ---------- */
.help-doc {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  font-size: 13px; line-height: 1.75; color: var(--win-text); background: var(--win-bg);
  user-select: text;
}
.help-doc h3 { margin-bottom: 10px; font-size: 16px; }
.help-doc p { margin-bottom: 8px; }

/* ---------- 密码错误抖动 ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
.shake { animation: shake .45s ease; }

/* ---------- 辅助功能 ---------- */
html.reduce-transparency * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.reduce-transparency {
  --mb-bg: rgba(250, 250, 252, 0.94);
  --panel-bg: rgba(248, 248, 252, 0.97);
  --dock-bg: rgba(246, 246, 250, 0.9);
  --win-title-bg: rgba(236, 236, 240, 0.95);
}
html.reduce-transparency.dark {
  --mb-bg: rgba(24, 24, 27, 0.95);
  --panel-bg: rgba(32, 32, 36, 0.97);
  --dock-bg: rgba(30, 30, 34, 0.92);
  --win-title-bg: rgba(56, 56, 60, 0.95);
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .001s !important;
  transition-duration: .001s !important;
}
html.high-contrast { --win-border: rgba(0, 0, 0, 0.45); }
html.high-contrast.dark { --win-border: rgba(255, 255, 255, 0.45); }

/* ---------- Safari 搜索引擎切换 ---------- */
.sf-eng { display: flex; align-items: center; gap: 9px; margin-top: 24px; font-size: 12.5px; color: var(--win-text); }
.sf-eng select {
  height: 24px; border-radius: 6px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text); font-size: 12px; padding: 0 7px; outline: none;
}
.sf-eng em { font-style: normal; color: #ff9f0a; font-size: 11.5px; }

/* =========================================================
   v3 — 8 个新 App：地图 / App Store / 活动监视器 / 天气 /
   时钟 / 提醒事项 / 通讯录 / 便笺
   ========================================================= */

/* ---------- 地图 ---------- */
.maps { position: relative; height: 100%; background: #e8e6e1; }
.map-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.map-view:active { cursor: grabbing; }
.map-tiles { position: absolute; inset: 0; }
.map-tile { position: absolute; width: 256px; height: 256px; overflow: hidden; user-select: none; }
.map-tile > img:not(.map-parent) { width: 256px; height: 256px; display: block; -webkit-user-drag: none; }
.map-tile.loading { background: linear-gradient(135deg, #eceae5, #dfddd8); }
.map-tile.broken { background: repeating-linear-gradient(45deg, #e5e3de, #e5e3de 8px, #dcdad5 8px, #dcdad5 16px); }
.map-parent { position: absolute; width: 512px; height: 512px; display: block; }
.map-seg {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.seg-item { padding: 6px 14px; font-size: 12.5px; color: #1d1d1f; }
.seg-item + .seg-item { border-left: 0.5px solid rgba(0,0,0,.1); }
.seg-item.on { background: #1d1d1f; color: #fff; }
.map-search {
  position: absolute; top: 12px; left: 12px; z-index: 5; width: 240px;
}
.map-search input {
  width: 100%; height: 32px; border-radius: 9px; border: none; outline: none;
  background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(0,0,0,.25);
  padding: 0 12px; font-size: 13px; color: #1d1d1f;
}
.map-drop {
  position: absolute; top: 48px; left: 0; right: 0; z-index: 6;
  background: rgba(255,255,255,.97); border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.map-drop-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; color: #1d1d1f; }
.map-drop-item:hover { background: rgba(10,132,255,.12); }
.map-drop-item span { font-size: 11px; color: #6e6e73; }
.map-drop-item.dim { color: #6e6e73; }
.map-zoom {
  position: absolute; right: 12px; bottom: 24px; z-index: 5;
  display: flex; flex-direction: column; border-radius: 9px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.map-zoom button {
  width: 38px; height: 34px; background: rgba(255,255,255,.95); font-size: 17px; color: #1d1d1f;
}
.map-zoom button + button { border-top: 0.5px solid rgba(0,0,0,.1); }
.map-zoom button:hover { background: #fff; }
.map-pin { position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none; text-align: center; }
.map-pin-dot {
  width: 22px; height: 22px; margin: 0 auto;
  background: #ff3b30; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35);
  border: 2px solid #fff;
}
.map-pin-label {
  margin-top: 4px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}

/* ---------- App Store ---------- */
.appstore { display: flex; height: 100%; background: var(--win-bg); }
.as-side {
  flex: 0 0 168px; padding: 12px 8px; overflow-y: auto;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
}
.as-tab {
  display: flex; width: 100%; padding: 7px 10px; border-radius: 7px;
  font-size: 13px; text-align: left; color: var(--win-text);
}
.as-tab:hover { background: var(--hover-bg); }
.as-tab.active { background: rgba(120,120,128,.2); font-weight: 600; }
.as-main { flex: 1; overflow-y: auto; padding: 18px 22px; }
.as-main h2 { font-size: 21px; font-weight: 700; margin-bottom: 15px; }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.as-card {
  background: var(--card-bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.1); margin-bottom: 14px;
}
.as-shot { width: 100%; aspect-ratio: 1.87; display: block; object-fit: cover; }
.as-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 4px; }
.as-ic { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.as-ic .aicon-img { border-radius: 9px; }
.as-info { flex: 1; min-width: 0; }
.as-info b { display: block; font-size: 14px; }
.as-info span { font-size: 11px; color: var(--win-text2); }
.as-btn { min-width: 64px; position: relative; overflow: hidden; }
.as-btn.as-getting { pointer-events: none; }
.as-btn.as-getting i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(10,132,255,.55); transition: width .08s linear; }
.as-desc { padding: 4px 14px 12px; font-size: 12px; color: var(--win-text2); line-height: 1.5; }
.as-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 0; color: var(--win-text2); }
.as-empty .em { font-size: 46px; }

/* ---------- 活动监视器 ---------- */
.am { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.am-tb { flex: 0 0 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 0.5px solid var(--win-border); }
.am-quit {
  width: 24px; height: 24px; border-radius: 6px; background: #ff9f0a; color: #fff;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.am-quit:hover { filter: brightness(1.1); }
.am-search {
  margin-left: auto; width: 170px; height: 25px; border-radius: 6px;
  border: 0.5px solid var(--input-border); background: var(--input-bg); color: var(--win-text);
  padding: 0 9px; font-size: 12px; outline: none;
}
.am-tabs { flex: 0 0 36px; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 0.5px solid var(--win-border); }
.am-tab { padding: 4px 14px; border-radius: 6px; font-size: 12.5px; color: var(--win-text); }
.am-tab:hover { background: var(--hover-bg); }
.am-tab.active { background: var(--sel-soft); color: var(--accent); font-weight: 600; }
.am-table { flex: 1; overflow-y: auto; }
.am-tr { display: flex; align-items: center; height: 27px; padding: 0 12px; font-size: 12px; color: var(--win-text); }
.am-tr:nth-child(even):not(.am-head) { background: rgba(120,120,128,.05); }
.am-tr.sel { background: var(--sel-bg) !important; color: #fff; }
.am-head { position: sticky; top: 0; z-index: 1; background: var(--win-bg); border-bottom: 0.5px solid var(--win-border); font-weight: 600; height: 26px; }
.am-head .am-cell { cursor: pointer; }
.am-cell { width: 90px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.am-cell.nm { flex: 1; text-align: left; display: flex; align-items: center; gap: 7px; }
.am-ic { width: 17px; height: 17px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.am-ic .aicon-img { border-radius: 4px; }
.am-foot {
  flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--win-text2); border-top: 0.5px solid var(--win-border);
}

/* ---------- 天气 ---------- */
.wx { display: flex; height: 100%; background: var(--win-bg); }
.wx-side {
  flex: 0 0 208px; display: flex; flex-direction: column; padding: 12px 10px;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
  position: relative;
}
.wx-search {
  width: 100%; height: 27px; border-radius: 7px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text); padding: 0 9px; font-size: 12px; outline: none;
}
.wx-side .map-drop { left: 10px; right: 10px; top: 46px; width: auto; }
.wx-cities { flex: 1; overflow-y: auto; margin-top: 10px; }
.wx-city {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; padding: 9px 11px; border-radius: 9px; margin-bottom: 6px;
  background: linear-gradient(150deg, #4a90d9, #2b5f9e); color: #fff; text-align: left;
  position: relative;
}
.wx-city.active { box-shadow: 0 0 0 2.5px var(--accent); }
.wx-city b { display: block; font-size: 13.5px; }
.wx-city span { font-size: 11px; opacity: .85; }
.wx-del { font-size: 11px; opacity: .7; padding: 2px 5px; border-radius: 4px; }
.wx-del:hover { background: rgba(0,0,0,.25); opacity: 1; }
.wx-main { flex: 1; overflow-y: auto; background: linear-gradient(180deg, #3d7ec9 0%, #5b9bd5 55%, #83b6e3 100%); color: #fff; padding-bottom: 18px; }
.wx-hero { text-align: center; padding: 26px 20px 16px; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.wx-hero h2 { font-size: 24px; font-weight: 600; }
.wx-big { font-size: 76px; font-weight: 200; line-height: 1.05; }
.wx-cond { font-size: 16px; }
.wx-hl { font-size: 13px; opacity: .9; margin-top: 4px; }
.wx-stale { margin-top: 8px; font-size: 12px; background: rgba(0,0,0,.25); display: inline-block; padding: 3px 10px; border-radius: 7px; }
.wx-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px; font-size: 13px; opacity: .92; }
.wx-loading .em { font-size: 40px; }
.wx-hours {
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; margin: 0 14px;
  background: rgba(255,255,255,.14); border-radius: 12px;
}
.wx-hour { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 46px; font-size: 11px; padding: 6px 2px; }
.wx-hour .em { font-size: 19px; }
.wx-hour b { font-size: 13px; }
.wx-days { margin: 12px 14px 0; background: rgba(255,255,255,.14); border-radius: 12px; padding: 6px 16px; }
.wx-day { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.wx-day + .wx-day { border-top: 0.5px solid rgba(255,255,255,.18); }
.wx-day .dow { width: 44px; }
.wx-day .em { width: 24px; font-size: 17px; }
.wx-day .lo { width: 34px; text-align: right; opacity: .8; }
.wx-day .hi { width: 34px; text-align: right; font-weight: 600; }
.wx-range { flex: 1; height: 5px; border-radius: 3px; background: rgba(0,0,0,.25); position: relative; }
.wx-range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #ffd60a, #ff9f0a); }

/* ---------- 时钟 ---------- */
.clk { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.clk-tabs { flex: 0 0 40px; justify-content: center; }
.clk-body { flex: 1; overflow-y: auto; padding: 14px 18px; position: relative; }
.clk-add { margin-bottom: 12px; }
.clk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.clk-card {
  background: var(--card-bg); border-radius: 12px; padding: 12px 14px; position: relative;
  box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
.clk-city { font-size: 13px; font-weight: 600; }
.clk-time { font-size: 24px; font-weight: 300; font-variant-numeric: tabular-nums; margin: 2px 0; }
.clk-day { font-size: 11px; color: var(--win-text2); }
.clk-del { position: absolute; top: 6px; right: 8px; color: var(--win-text2); }
.clk-empty { text-align: center; color: var(--win-text2); font-size: 13px; padding: 30px 0; }
.clk-alarm {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--card-bg); border-radius: 12px; margin-bottom: 9px;
  box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
.clk-alarm.off { opacity: .55; }
.clk-alarm b { font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; }
.clk-alarm-mid { flex: 1; }
.clk-alarm-mid span { display: block; font-size: 13px; }
.clk-alarm-mid small { font-size: 11px; color: var(--win-text2); }
.clk-days-pick { display: flex; gap: 5px; margin-top: 10px; }
.clk-day-btn { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; background: var(--card-bg); color: var(--win-text); }
.clk-day-btn.on { background: var(--accent); color: #fff; }
.clk-sw-disp { text-align: center; font-size: 58px; font-weight: 200; font-variant-numeric: tabular-nums; padding: 30px 0 16px; }
.clk-btns { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.clk-laps { border-top: 0.5px solid var(--win-border); }
.clk-lap { display: flex; justify-content: space-between; padding: 7px 12px; font-size: 12.5px; border-bottom: 0.5px solid var(--win-border); font-variant-numeric: tabular-nums; }
.clk-pick { display: flex; justify-content: center; gap: 14px; padding: 34px 0 20px; }
.clk-pick-cell { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.clk-num { width: 62px; text-align: center; font-size: 19px; height: 40px; }
.clk-start { display: block; margin: 0 auto; }
.clk-ring { position: relative; width: 150px; margin: 20px auto 6px; }
.clk-ring svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(120,120,128,.3); stroke-width: 8; }
.ring-fg { fill: none; stroke: #ff9f0a; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.clk-ring-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-variant-numeric: tabular-nums; font-weight: 300;
}
.clk-banner {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  background: #ff9f0a; color: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
  font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ---------- 提醒事项 ---------- */
.rem { display: flex; height: 100%; background: var(--win-bg); }
.rem-side {
  flex: 0 0 186px; padding: 10px 8px; overflow-y: auto;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
}
.rem-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.rem-cnt { margin-left: auto; font-size: 11px; color: var(--win-text2); }
.rem-add { color: var(--accent); }
.rem-colors { display: flex; gap: 7px; margin-top: 10px; }
.rem-color { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid transparent; }
.rem-color.on { border-color: var(--win-text); }
.rem-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rem-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.rem-head h2 { font-size: 20px; font-weight: 700; }
.rem-list { flex: 1; overflow-y: auto; padding: 0 12px; }
.rem-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
}
.rem-item:hover { background: var(--hover-bg); }
.rem-circle {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(120,120,128,.6); background: transparent;
}
.rem-item.done .rem-circle { background: #30d158; border-color: #30d158; box-shadow: inset 0 0 0 3px var(--win-bg); }
.rem-mid { flex: 1; min-width: 0; }
.rem-text {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 13.5px; color: var(--win-text); font-family: inherit;
}
.rem-item.done .rem-text { text-decoration: line-through; color: var(--win-text2); }
.rem-mid small { font-size: 11px; color: var(--win-text2); }
.rem-mini { font-size: 13px; padding: 2px 5px; border-radius: 5px; visibility: hidden; }
.rem-item:hover .rem-mini { visibility: visible; }
.rem-mini:hover { background: var(--hover-bg); }
.rem-mini.danger:hover { background: rgba(255,69,58,.15); }
.rem-done-title { font-size: 11px; font-weight: 700; color: var(--win-text2); padding: 12px 8px 4px; }
.rem-input-row { flex: 0 0 auto; padding: 8px 14px 12px; }
.rem-input-row input {
  width: 100%; height: 30px; border-radius: 8px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text); padding: 0 11px; font-size: 13px; outline: none;
}

/* ---------- 通讯录 ---------- */
.ct { display: flex; height: 100%; background: var(--win-bg); position: relative; }
.ct-groups {
  flex: 0 0 148px; padding: 10px 8px; overflow-y: auto;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
}
.ct-g-ic { font-size: 14px; }
.ct-list { flex: 0 0 208px; display: flex; flex-direction: column; border-right: 0.5px solid var(--win-border); }
.ct-search {
  margin: 10px 10px 6px; height: 27px; border-radius: 7px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text); padding: 0 9px; font-size: 12px; outline: none;
}
.ct-names { flex: 1; overflow-y: auto; padding: 0 6px; }
.ct-name {
  display: flex; flex-direction: column; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 7px;
}
.ct-name b { font-size: 13px; }
.ct-name span { font-size: 11px; color: var(--win-text2); }
.ct-name:hover { background: var(--hover-bg); }
.ct-name.active { background: var(--sel-bg); color: #fff; }
.ct-name.active span { color: rgba(255,255,255,.8); }
.ct-none { padding: 14px; text-align: center; color: var(--win-text2); font-size: 12px; }
.ct-none.big { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 14px; }
.ct-add-row { padding: 6px 10px; border-top: 0.5px solid var(--win-border); }
.ct-detail { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; align-items: center; }
.ct-avatar {
  width: 76px; height: 76px; border-radius: 50%; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: #fff; font-weight: 600; box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
.ct-field { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 380px; padding: 7px 0; border-bottom: 0.5px solid var(--win-border); }
.ct-lbl { width: 52px; flex: 0 0 auto; font-size: 12px; color: var(--win-text2); text-align: right; }
.ct-val {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13.5px; color: var(--win-text); font-family: inherit;
  border-radius: 4px; padding: 2px 5px;
}
.ct-val:focus { box-shadow: 0 0 0 2.5px rgba(10,132,255,.35); background: var(--input-bg); }
.ct-copy { font-size: 11px; color: var(--accent); padding: 2px 8px; border-radius: 5px; }
.ct-copy:hover { background: var(--sel-soft); }
.ct-del { margin-top: 20px; }
.ct-toast {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--tip-bg); color: #fff; font-size: 12px;
  padding: 6px 14px; border-radius: 8px; opacity: 1; transition: opacity .3s;
  z-index: 10;
}
.ct-toast.out { opacity: 0; }

/* ---------- 便笺（桌面贴纸） ---------- */
.sticky {
  position: absolute; width: 218px; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  display: flex; flex-direction: column; overflow: hidden;
}
.sticky.st-yellow { background: #fff8b8; }
.sticky.st-pink { background: #ffd6e0; }
.sticky.st-green { background: #d8f5c8; }
.sticky.st-blue { background: #d2e8ff; }
.st-bar {
  flex: 0 0 24px; display: flex; align-items: center; gap: 4px;
  padding: 0 6px; background: rgba(0,0,0,.06); cursor: grab;
}
.st-bar:active { cursor: grabbing; }
.st-btn { width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.18); color: rgba(0,0,0,.55); font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.st-btn:hover { background: rgba(0,0,0,.32); }
.st-dots { display: flex; gap: 3px; margin-left: 4px; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.st-text {
  flex: 1; min-height: 150px; border: none; outline: none; resize: none;
  background: transparent; padding: 8px 10px; font-size: 13px; line-height: 1.5;
  color: #3a3a3c; font-family: inherit;
}
.sticky.collapsed .st-text { display: none; }

/* =========================================================
   v4 — 邮件 / 信息 / FaceTime / 预览 / QuickTime
   ========================================================= */

/* ---------- Dock 未读徽章 ---------- */
.dock-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #ff3b30; color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none;
}

/* ---------- 邮件 ---------- */
.mail { display: flex; height: 100%; background: var(--win-bg); }
.mail-boxes {
  flex: 0 0 158px; padding: 10px 8px; overflow-y: auto;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
  display: flex; flex-direction: column;
}
.mail-badge {
  margin-left: auto; background: #ff3b30; color: #fff; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; padding: 0 6px; line-height: 16px;
}
.mail-compose { margin-top: auto; }
.mail-list { flex: 0 0 262px; display: flex; flex-direction: column; border-right: 0.5px solid var(--win-border); }
.mail-search {
  margin: 10px 10px 6px; height: 27px; border-radius: 7px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text); padding: 0 9px; font-size: 12px; outline: none;
}
.mail-rows { flex: 1; overflow-y: auto; }
.mail-row { padding: 8px 12px; border-bottom: 0.5px solid var(--win-border); cursor: pointer; }
.mail-row:hover { background: var(--hover-bg); }
.mail-row.sel { background: var(--sel-bg); color: #fff; }
.mail-row.sel .mail-prev, .mail-row.sel .mail-time { color: rgba(255,255,255,.8); }
.mail-row-top { display: flex; justify-content: space-between; align-items: baseline; }
.mail-row-top b { font-size: 13px; }
.mail-row.unread .mail-row-top b::before { content: '●'; color: var(--accent); font-size: 8px; margin-right: 5px; vertical-align: 2px; }
.mail-time { font-size: 11px; color: var(--win-text2); }
.mail-sub { font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-prev { font-size: 11px; color: var(--win-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-read { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mail-none { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--win-text2); font-size: 14px; }
.mail-head { padding: 14px 18px 10px; border-bottom: 0.5px solid var(--win-border); position: relative; }
.mail-head h3 { font-size: 16px; }
.mail-from { font-size: 12px; color: var(--win-text2); margin-top: 3px; }
.mail-time2 { font-size: 11px; color: var(--win-text2); margin-top: 2px; }
.mail-acts { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; }
.mail-body { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; user-select: text; }
.mail-compose { display: flex; flex-direction: column; height: 100%; }
.mc-in {
  height: 32px; border: none; outline: none; padding: 0 12px; font-size: 13px;
  border-bottom: 0.5px solid var(--win-border); background: var(--win-bg); color: var(--win-text);
}
.mc-body { flex: 1; border: none; outline: none; resize: none; padding: 12px; font-size: 13.5px; line-height: 1.6; background: var(--win-bg); color: var(--win-text); font-family: inherit; }
.mc-bar { display: flex; gap: 8px; padding: 10px 12px; border-top: 0.5px solid var(--win-border); }

/* ---------- 信息 ---------- */
.msg { display: flex; height: 100%; background: var(--win-bg); }
.msg-chats { flex: 0 0 252px; display: flex; flex-direction: column; border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06); }
.msg-new { align-self: flex-end; margin: 8px 10px 2px; }
.msg-chat-list { flex: 1; overflow-y: auto; padding: 4px 7px; }
.msg-chat { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 9px; text-align: left; }
.msg-chat:hover { background: var(--hover-bg); }
.msg-chat.active { background: rgba(120,120,128,.22); }
.msg-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 600;
}
.msg-mid { flex: 1; min-width: 0; }
.msg-top { display: flex; justify-content: space-between; align-items: baseline; }
.msg-top b { font-size: 13px; }
.msg-time { font-size: 10.5px; color: var(--win-text2); }
.msg-last { display: block; font-size: 11.5px; color: var(--win-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-unread {
  flex: 0 0 auto; min-width: 17px; height: 17px; border-radius: 9px;
  background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.msg-convo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msg-head { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-bottom: 0.5px solid var(--win-border); font-size: 13px; }
.msg-flow { flex: 1; overflow-y: auto; padding: 14px 16px; }
.msg-row { display: flex; margin-bottom: 6px; }
.msg-row.me { justify-content: flex-end; }
.msg-bubble {
  max-width: 68%; padding: 7px 12px; border-radius: 17px; font-size: 13.5px; line-height: 1.45;
  background: rgba(120,120,128,.22); color: var(--win-text);
  border-bottom-left-radius: 4px;
  user-select: text;
}
.msg-row.me .msg-bubble { background: #0a84ff; color: #fff; border-bottom-left-radius: 17px; border-bottom-right-radius: 4px; }
.msg-bubble.typing { color: var(--win-text2); font-size: 12px; font-style: italic; }
.msg-input-row { flex: 0 0 auto; padding: 9px 14px 12px; }
.msg-input-row input {
  width: 100%; height: 32px; border-radius: 16px; border: 0.5px solid var(--input-border);
  background: var(--input-bg); color: var(--win-text); padding: 0 14px; font-size: 13px; outline: none;
}

/* ---------- FaceTime ---------- */
.ft { height: 100%; background: #1d1d1f; overflow-y: auto; }
.ft-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; padding: 20px;
}
.ft-card {
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ft-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; font-weight: 600;
}
.ft-card b { color: #f5f5f7; font-size: 14px; }
.ft-btns { display: flex; gap: 8px; }
.ft-call {
  padding: 5px 12px; border-radius: 8px; font-size: 12.5px;
  background: rgba(255,255,255,.14); color: #fff;
}
.ft-call:hover { background: #30d158; }
.ft-screen { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.ft-remote {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(160deg,#232326,#3a3a40);
  animation: ftBg 8s ease-in-out infinite alternate;
}
.ft-remote.connected { background: linear-gradient(160deg,#0f3d24,#12603a 55%,#0d2f1d); background-size: 200% 200%; animation: ftBg 5s ease-in-out infinite alternate; }
@keyframes ftBg { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.ft-ravatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: #fff; font-weight: 600;
}
.ft-status { color: rgba(255,255,255,.9); font-size: 17px; font-variant-numeric: tabular-nums; }
.ft-wave { display: flex; align-items: center; gap: 4px; height: 34px; }
.ft-wave i { width: 4px; border-radius: 2px; background: #30d158; animation: ftWave 1s ease-in-out infinite; }
.ft-wave i:nth-child(odd) { animation-delay: .15s; }
.ft-wave i:nth-child(3n) { animation-delay: .3s; }
.ft-wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes ftWave { 0%, 100% { height: 8px; } 50% { height: 30px; } }
.ft-pip {
  position: absolute; right: 16px; bottom: 86px; width: 168px; height: 112px;
  border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.5);
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.ft-pip video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.ft-pip-hint {
  position: absolute; right: 16px; bottom: 86px; width: 168px;
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.85);
  border-radius: 12px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; text-align: center;
}
.ft-ctrls {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px;
}
.ft-ctrl {
  width: 52px; height: 52px; border-radius: 50%; font-size: 21px;
  background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ft-ctrl:hover { background: rgba(255,255,255,.3); }
.ft-ctrl.off { background: rgba(255,255,255,.34); }
.ft-ctrl.end { background: #ff3b30; }
.ft-ctrl.end:hover { background: #ff5147; }

/* ---------- 预览 ---------- */
.pv { display: flex; flex-direction: column; height: 100%; background: var(--win-bg); }
.pv-tb { flex: 0 0 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 0.5px solid var(--win-border); }
.pv-mid { flex: 1; display: flex; min-height: 0; }
.pv-side {
  flex: 0 0 128px; overflow-y: auto; padding: 8px;
  border-right: 0.5px solid var(--win-border); background: rgba(120,120,128,.06);
}
.pv-thumb {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 5px;
  border-radius: 7px; margin-bottom: 4px; border: 2px solid transparent;
}
.pv-thumb img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 4px; }
.pv-thumb:hover { background: var(--hover-bg); }
.pv-thumb.active { border-color: var(--accent); }
.pv-thumb-ic { font-size: 26px; text-align: center; }
.pv-thumb-nm { font-size: 10px; color: var(--win-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage {
  flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center;
  background:
    repeating-conic-gradient(rgba(120,120,128,.14) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px;
  position: relative;
}
.pv-img { max-width: 96%; max-height: 96%; box-shadow: 0 4px 24px rgba(0,0,0,.28); transition: transform .15s ease; }
.pv-img.pv-broken { max-width: none; max-height: none; width: 0; height: 0; }
.pv-img.pv-broken::after { content: '无法载入图片'; }
.pv-img.pv-broken + * { color: var(--win-text2); }

/* ---------- QuickTime ---------- */
.qt { display: flex; flex-direction: column; height: 100%; background: #101013; }
.qt-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.qt-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.qt-empty, .qt-err {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: rgba(255,255,255,.75); font-size: 13.5px; text-align: center; padding: 20px;
}
.qt-empty .em { font-size: 52px; }
.qt-err { background: rgba(16,16,19,.82); z-index: 2; }
.qt-bar {
  flex: 0 0 46px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; background: rgba(40,40,44,.95); color: #f5f5f7;
}
.qt-btn { font-size: 15px; padding: 3px 7px; border-radius: 6px; color: #f5f5f7; }
.qt-btn:hover { background: rgba(255,255,255,.12); }
.qt-btn.on { color: #30d158; }
.qt-btn.big { font-size: 18px; }
.qt-time { font-size: 11px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; width: 38px; text-align: center; flex: 0 0 auto; }
.qt-seek { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; cursor: pointer; }
.qt-seek i { display: block; height: 100%; width: 0%; background: #0a84ff; }
.qt-vol { width: 76px !important; flex: 0 0 auto; }
.qt-spd {
  height: 24px; border-radius: 6px; border: 0.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #f5f5f7; font-size: 11.5px; padding: 0 6px; outline: none;
}
.qt-spd option { color: #1d1d1f; }

/* =========================================================
   v5 — 真实全屏 / 菜单栏与 Dock 滑出 / Dock 右键
   ========================================================= */
.win.fullscreen {
  position: fixed !important;
  left: 0 !important; top: 0 !important;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0;
}
.win.fullscreen .rs { display: none; }

/* 菜单栏与 Dock 在全屏模式下滑出 */
#menubar { transition: transform .28s cubic-bezier(.25,.8,.3,1); }
body.fs-mode #menubar { transform: translateY(-100%); }
body.fs-mode.show-menubar #menubar { transform: translateY(0); }
body.fs-mode #dock-wrap.pos-bottom #dock { transform: translateY(calc(100% + 26px)); }
body.fs-mode #dock-wrap.pos-left #dock { transform: translateX(calc(-100% - 26px)); }
body.fs-mode #dock-wrap.pos-right #dock { transform: translateX(calc(100% + 26px)); }
body.fs-mode #dock-wrap.fs-show #dock { transform: none !important; }
body.fs-mode #dock-hotzone { display: block !important; }