/* ============ macOS recreation — base ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size:13px; color:var(--text); background:#000;
  cursor:default;
}
:root {
  --accent:#0a82ff;
  --accent-rgb:10,130,255;
  --text:#1d1d1f;
  --text-2:rgba(60,60,67,.62);
  --text-3:rgba(60,60,67,.4);
  --menubar-bg:rgba(248,248,250,.42);
  --menubar-text:rgba(0,0,0,.86);
  --window-bg:#f6f6f6;
  --content-bg:#ffffff;
  --sidebar-bg:rgba(233,233,236,.6);
  --titlebar-bg:rgba(246,246,246,.85);
  --toolbar-bg:rgba(244,244,246,.78);
  --border:rgba(0,0,0,.09);
  --border-strong:rgba(0,0,0,.16);
  --hover:rgba(0,0,0,.055);
  --active:rgba(0,0,0,.1);
  --sel:rgba(var(--accent-rgb),.18);
  --sel-strong:var(--accent);
  --card-bg:rgba(255,255,255,.66);
  --panel-bg:rgba(242,242,247,.72);
  --panel-border:rgba(255,255,255,.5);
  --input-bg:#ffffff;
  --grid-line:rgba(0,0,0,.07);
  --win-shadow:0 24px 70px rgba(0,0,0,.4), 0 2px 14px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.25);
  --win-shadow-bg:0 8px 30px rgba(0,0,0,.22), 0 1px 6px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.18);
  --label-sel:#0158d0;
  --dock-bg:rgba(255,255,255,.28);
  --dock-border:rgba(255,255,255,.42);
}
html[data-theme="dark"] {
  --text:#f2f2f5;
  --text-2:rgba(235,235,245,.62);
  --text-3:rgba(235,235,245,.38);
  --menubar-bg:rgba(30,30,34,.42);
  --menubar-text:rgba(255,255,255,.88);
  --window-bg:#2b2b2e;
  --content-bg:#1e1e20;
  --sidebar-bg:rgba(40,40,44,.55);
  --titlebar-bg:rgba(50,50,54,.85);
  --toolbar-bg:rgba(48,48,52,.8);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.2);
  --hover:rgba(255,255,255,.08);
  --active:rgba(255,255,255,.14);
  --sel:rgba(var(--accent-rgb),.32);
  --card-bg:rgba(44,44,48,.6);
  --panel-bg:rgba(36,36,40,.72);
  --panel-border:rgba(255,255,255,.16);
  --input-bg:#2e2e32;
  --grid-line:rgba(255,255,255,.08);
  --win-shadow:0 24px 80px rgba(0,0,0,.62), 0 2px 16px rgba(0,0,0,.4), 0 0 0 .5px rgba(0,0,0,.8);
  --win-shadow-bg:0 8px 30px rgba(0,0,0,.4), 0 0 0 .5px rgba(0,0,0,.6);
  --label-sel:#0a66d6;
  --dock-bg:rgba(40,40,44,.4);
  --dock-border:rgba(255,255,255,.2);
}
::selection { background:rgba(var(--accent-rgb),.3); }

input, textarea, [contenteditable] { -webkit-user-select:text; user-select:text; font-family:inherit; }
button { font-family:inherit; }

/* Scrollbars (overlay style) */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.22); border-radius:5px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.4); background-clip:content-box; border:2px solid transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.26); background-clip:content-box; border:2px solid transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }

/* ---- shared controls ---- */
.mac-btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; padding:3.5px 12px; border-radius:6px; border:none;
  background:var(--hover); color:var(--text); cursor:default;
  box-shadow:0 .5px 1.5px rgba(0,0,0,.12), inset 0 0 0 .5px var(--border-strong);
}
.mac-btn:active { background:var(--active); }
.mac-btn.primary {
  background:linear-gradient(#2e9bff,#0a7ef5); color:#fff;
  box-shadow:0 .5px 1.5px rgba(0,0,0,.25), inset 0 0 0 .5px rgba(0,0,0,.15);
}
.mac-btn.primary:active { background:linear-gradient(#1e8bf0,#066fd8); }
.mac-btn:disabled, .mac-btn.disabled { opacity:.45; pointer-events:none; }
.mac-btn.default { animation:defaultPulse 2s infinite; }
@keyframes defaultPulse { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.14);} }

.mac-switch { position:relative; width:38px; height:22px; border-radius:11px; background:rgba(120,120,128,.32); transition:background .2s; flex:none; }
.mac-switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s cubic-bezier(.25,.9,.3,1.2); }
.mac-switch.on { background:#34c759; }
.mac-switch.on::after { transform:translateX(16px); }
.mac-switch.small { width:30px; height:17px; }
.mac-switch.small::after { width:13px; height:13px; }
.mac-switch.small.on::after { transform:translateX(13px); }

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

.mac-input {
  background:var(--input-bg); border:none; outline:none; color:var(--text);
  border-radius:6px; padding:4px 8px; font-size:13px;
  box-shadow:0 0 0 1px var(--border-strong), 0 1px 2px rgba(0,0,0,.06);
}
.mac-input:focus { box-shadow:0 0 0 3.5px rgba(var(--accent-rgb),.4), 0 0 0 1px var(--accent); }

/* segmented control */
.seg { display:inline-flex; background:var(--hover); border-radius:7px; padding:1.5px; box-shadow:inset 0 0 0 .5px var(--border-strong); }
.seg button { border:none; background:transparent; padding:2.5px 10px; font-size:12px; border-radius:5.5px; color:var(--text); display:flex; align-items:center; gap:4px; }
.seg button.on { background:var(--content-bg); box-shadow:0 1px 3px rgba(0,0,0,.16), 0 0 0 .5px var(--border); }
html[data-theme="dark"] .seg button.on { background:rgba(120,120,128,.32); }

/* tooltip */
#tooltip {
  position:fixed; z-index:10000; pointer-events:none;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8);
  color:var(--text); font-size:12px; padding:3px 9px; border-radius:7px;
  box-shadow:0 2px 10px rgba(0,0,0,.22), 0 0 0 .5px var(--panel-border);
  opacity:0; transition:opacity .15s;
}
#tooltip.show { opacity:1; }

/* context / drop menus */
.menu-pop {
  position:fixed; z-index:9000; min-width:200px; padding:5px;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(40px) saturate(1.9); backdrop-filter:blur(40px) saturate(1.9);
  border-radius:9px; box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 0 .5px var(--panel-border);
  transform-origin:top left; animation:menuIn .12s cubic-bezier(.2,.8,.3,1);
}
@keyframes menuIn { from{opacity:0; transform:scale(.96);} }
.menu-item {
  display:flex; align-items:center; gap:7px; padding:3.5px 10px; border-radius:6px;
  font-size:13px; color:var(--text); line-height:1.35; position:relative; white-space:nowrap;
}
.menu-item .mi-check { width:14px; flex:none; font-size:11px; }
.menu-item .mi-label { flex:1; }
.menu-item .mi-key { color:var(--text-3); font-size:13px; letter-spacing:1px; flex:none; }
.menu-item .mi-sub { color:var(--text-3); font-size:11px; flex:none; }
.menu-item.enabled:hover, .menu-item.enabled.open { background:var(--accent); color:#fff; }
.menu-item.enabled:hover .mi-key, .menu-item.enabled:hover .mi-sub,
.menu-item.enabled.open .mi-key, .menu-item.enabled.open .mi-sub { color:rgba(255,255,255,.75); }
.menu-item.disabled { color:var(--text-3); }
.menu-sep { height:1px; margin:5px 10px; background:var(--border-strong); }
.menu-item .mi-icon { width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center; }
.menu-item .mi-icon svg { width:15px; height:15px; }
.menu-header { padding:4px 10px 2px; font-size:11px; color:var(--text-3); }

/* alert dialog */
.alert {
  position:fixed; z-index:9500; width:270px; padding:18px 18px 14px;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(50px) saturate(1.8); backdrop-filter:blur(50px) saturate(1.8);
  border-radius:14px; box-shadow:var(--win-shadow); text-align:center;
  animation:alertIn .22s cubic-bezier(.25,1.2,.35,1);
}
@keyframes alertIn { from{ opacity:0; transform:scale(1.12);} }
.alert .a-icon { width:58px; height:58px; margin:0 auto 10px; }
.alert .a-icon svg { width:100%; height:100%; }
.alert .a-title { font-size:13px; font-weight:700; margin-bottom:4px; }
.alert .a-msg { font-size:11.5px; color:var(--text-2); line-height:1.45; margin-bottom:14px; }
.alert .a-btns { display:flex; gap:8px; }
.alert .a-btns .mac-btn { flex:1; }
.alert .a-mid { text-align:center; }
.alert .a-input { width:100%; margin:2px 0 14px; box-sizing:border-box; text-align:left; }
.alert-shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(3px);} }

.hidden { display:none !important; }
.no-anim *, .no-anim { transition:none !important; animation:none !important; }