/* ============ 基础与主题变量 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
input, textarea, [contenteditable] { -webkit-user-select:text; user-select:text; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  font-size:13px; color:var(--text); background:#000;
  -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
img { -webkit-user-drag:none; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:rgba(128,128,128,.45); border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }

:root {
  --accent:#0a84ff;
  --danger:#ff453a;
  --warning:#ff9f0a;
  --success:#32d74b;
  /* 浅色 */
  --text:#1d1d1f; --text2:#6e6e73; --text3:#aeaeb2;
  --window-bg:rgba(246,246,248,.86); --window-bg-solid:#f6f6f8;
  --content-bg:#ffffff; --sidebar-bg:rgba(240,240,245,.72);
  --card-bg:rgba(255,255,255,.72); --card-border:rgba(0,0,0,.08);
  --border:rgba(0,0,0,.12); --separator:rgba(0,0,0,.09);
  --hover:rgba(0,0,0,.055); --active:rgba(0,0,0,.1);
  --selection:rgba(10,132,255,.28);
  --menubar-bg:rgba(255,255,255,.5);
  --dock-bg:rgba(255,255,255,.42);
  --input-bg:#ffffff;
  --shadow-win:0 22px 70px rgba(0,0,0,.34), 0 0 0 .5px rgba(0,0,0,.16);
  --shadow-pop:0 10px 34px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.1);
  --blur:blur(28px) saturate(180%);
  --glass-blur:blur(20px) saturate(160%);
}
body.dark {
  --text:#f5f5f7; --text2:#98989d; --text3:#636366;
  --window-bg:rgba(38,38,42,.84); --window-bg-solid:#26262a;
  --content-bg:#1e1e20; --sidebar-bg:rgba(34,34,38,.72);
  --card-bg:rgba(44,44,48,.72); --card-border:rgba(255,255,255,.1);
  --border:rgba(255,255,255,.16); --separator:rgba(255,255,255,.1);
  --hover:rgba(255,255,255,.08); --active:rgba(255,255,255,.14);
  --selection:rgba(10,132,255,.42);
  --menubar-bg:rgba(28,28,30,.5);
  --dock-bg:rgba(40,40,44,.44);
  --input-bg:#2c2c2e;
  --shadow-win:0 22px 70px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.14);
  --shadow-pop:0 10px 34px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.12);
}
body.reduce-transparency {
  --window-bg:var(--window-bg-solid); --menubar-bg:var(--window-bg-solid);
  --dock-bg:var(--window-bg-solid); --sidebar-bg:var(--window-bg-solid);
  --card-bg:var(--window-bg-solid); --blur:none; --glass-blur:none;
}
body.increase-contrast { --border:rgba(0,0,0,.4); --separator:rgba(0,0,0,.3); }
body.increase-contrast.dark { --border:rgba(255,255,255,.45); --separator:rgba(255,255,255,.35); }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration:.001s !important; transition-duration:.06s !important;
}

.hidden { display:none !important; }

/* ============ 全局遮罩（亮度/夜览） ============ */
#overlay-brightness, #overlay-nightshift {
  position:fixed; inset:0; pointer-events:none; z-index:9000;
}
#overlay-brightness { background:#000; opacity:0; transition:opacity .25s; }
#overlay-nightshift { background:#ff9f0a; opacity:0; mix-blend-mode:multiply; transition:opacity .4s; }

/* ============ 开机画面 ============ */
#bootscreen {
  position:fixed; inset:0; background:#000; z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:64px;
}
#boot-apple { opacity:0; animation:bootFade .9s ease .15s forwards; }
@keyframes bootFade { to { opacity:1; } }
#boot-progress { width:220px; height:5px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; opacity:0; animation:bootFade .5s ease .5s forwards; }
#boot-progress-fill { width:0%; height:100%; border-radius:3px; background:#e8e8ea; }

/* ============ 关机画面 ============ */
#poweroff {
  position:fixed; inset:0; background:#000; z-index:10000; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#poweroff-text { color:#8e8e93; font-size:22px; text-align:center; line-height:2; }
#poweroff-text span { font-size:14px; color:#48484a; }

/* ============ 锁屏 ============ */
#lockscreen { position:fixed; inset:0; z-index:9500; overflow:hidden; cursor:pointer; }
#lockscreen-bg {
  position:absolute; inset:-40px; background-size:cover; background-position:center;
  filter:blur(38px) brightness(.62) saturate(1.15);
  transform:scale(1.05);
}
#lockscreen-main { position:absolute; top:9%; width:100%; text-align:center; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); }
#lock-date { font-size:22px; font-weight:600; letter-spacing:.5px; }
#lock-time { font-size:96px; font-weight:700; letter-spacing:-2px; margin-top:2px; font-variant-numeric:tabular-nums; }
#lockscreen-user {
  position:absolute; bottom:10%; width:100%; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.4);
}
#lock-avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; box-shadow:0 4px 22px rgba(0,0,0,.4); background:#666; }
#lock-username { font-size:17px; font-weight:600; }
#lock-hint { font-size:12.5px; color:rgba(255,255,255,.82); }
#lock-error { font-size:12.5px; color:#ffd2cf; background:rgba(255,69,58,.35); padding:4px 12px; border-radius:10px; }
#lock-password-row input {
  width:190px; padding:7px 14px; border-radius:16px; border:none; outline:none; text-align:center;
  background:rgba(255,255,255,.32); color:#fff; font-size:13px; backdrop-filter:blur(8px);
}
#lock-password-row input::placeholder { color:rgba(255,255,255,.75); }
#lockscreen.unlocking { animation:lockOut .45s ease forwards; }
@keyframes lockOut { to { opacity:0; transform:scale(1.04); } }
#lockscreen.shake #lockscreen-user { animation:shake .4s; }
@keyframes shake { 20%{transform:translateX(-10px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }

/* ============ 屏保 ============ */
#screensaver { position:fixed; inset:0; z-index:9600; background:#000; cursor:none; }
#screensaver .ss-clock {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
}
#screensaver .ss-clock .t { font-size:130px; font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-3px; }
#screensaver .ss-clock .d { font-size:22px; color:#bbb; margin-top:8px; }
#screensaver .ss-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; }

/* ============ 通用控件 ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:4px 14px; border-radius:6px; font-size:13px;
  background:var(--card-bg); border:.5px solid var(--card-border); box-shadow:0 .5px 2px rgba(0,0,0,.08);
}
.btn:hover { background:var(--hover); }
.btn:active { background:var(--active); }
.btn.primary { background:var(--accent); color:#fff; border-color:transparent; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.danger { background:var(--danger); color:#fff; border-color:transparent; }

.switch { position:relative; width:42px; height:25px; border-radius:13px; background:rgba(120,120,128,.32); transition:background .22s; cursor:pointer; flex:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .22s; }
.switch.on { background:var(--success); }
.switch.on::after { transform:translateX(17px); }
.switch.disabled { opacity:.4; pointer-events:none; }

input[type="range"].slider { -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; }
input[type="range"].slider::-webkit-slider-runnable-track { height:5px; border-radius:3px; background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,50%), rgba(120,120,128,.28) var(--fill,50%)); }
input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:#fff; margin-top:-7px; box-shadow:0 1px 5px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.08); }

.text-input, select.text-input {
  padding:5px 9px; border-radius:6px; border:.5px solid var(--border);
  background:var(--input-bg); color:var(--text); outline:none; font-size:13px;
}
.text-input:focus { border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(10,132,255,.3); }

/* 分段控件 */
.segmented { display:inline-flex; background:rgba(120,120,128,.16); border-radius:8px; padding:2px; gap:2px; }
.segmented button { padding:3px 12px; border-radius:6px; font-size:12.5px; color:var(--text); white-space:nowrap; }
.segmented button.on { background:var(--content-bg); box-shadow:0 1px 4px rgba(0,0,0,.18), 0 0 0 .5px var(--card-border); }

/* 徽标 */
.badge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }

/* 空状态 */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; color:var(--text2); font-size:13px; padding:24px; text-align:center; }
.empty-state .es-icon { font-size:44px; opacity:.55; }

@media (max-width:1100px) {
  #lock-time { font-size:76px; }
}