/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ============ CSS Variables — Light Theme ============ */
:root{
  --font-ui:'Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif:'Lora',Georgia,serif;
  --font-body:'Noto Sans TC',sans-serif;
  --font-mono:'SF Mono','Fira Code',monospace;

  --bg:#f4f4f6;
  --win:rgba(255,255,255,.96);
  --win-s:rgba(255,255,255,.6);
  --border:rgba(0,0,0,.08);
  --border-s:rgba(0,0,0,.05);

  --text:#1a1a1c;
  --t2:#3a3a3c;
  --t3:#6e6e73;
  --t4:#aeaeb2;

  --blue:#0066cc;
  --blue-s:rgba(0,102,204,.08);
  --blue-b:rgba(0,102,204,.14);
  --rose:#9b2c3c;
  --rose-s:rgba(155,44,60,.07);
  --green:#1a7a3a;
  --green-s:rgba(26,122,58,.07);
  --amber:#8a6000;
  --amber-s:rgba(138,96,0,.07);
  --red:#c0392b;

  --sh:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.04);
  --r:12px;
  --r-s:8px;
  --r-xs:6px;
}

/* ============ Dark Theme ============ */
[data-theme="dark"]{
  --bg:#0e0e10;
  --win:rgba(26,26,30,.96);
  --win-s:rgba(34,34,40,.8);
  --border:rgba(255,255,255,.08);
  --border-s:rgba(255,255,255,.05);

  --text:#ececf0;
  --t2:#c8c8cc;
  --t3:#8e8e93;
  --t4:#4a4a4e;

  --blue:#4a9eff;
  --blue-s:rgba(74,158,255,.1);
  --blue-b:rgba(74,158,255,.18);
  --rose:#d4667a;
  --rose-s:rgba(212,102,122,.1);
  --green:#4aba6a;
  --green-s:rgba(74,186,106,.1);
  --amber:#d4a830;
  --amber-s:rgba(212,168,48,.1);
  --red:#e05050;
  --sh:0 1px 3px rgba(0,0,0,.2),0 4px 14px rgba(0,0,0,.15);
}

/* ============ Base ============ */
html{font-size:14px}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}

/* ============ Icons ============ */
.ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
.ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-s{width:13px;height:13px}
.ic-l{width:18px;height:18px}

/* ============ Scrollbars ============ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}

/* ============ Copy Toast ============ */
.copy-toast{
  position:fixed;bottom:120px;left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--bg);padding:8px 20px;border-radius:20px;
  font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:300;
  font-family:var(--font-ui);box-shadow:var(--sh);
}
.copy-toast.show{opacity:1}

/* ============ Spinner ============ */
.spin{
  display:inline-block;width:9px;height:9px;
  border:1.5px solid rgba(0,0,0,.08);border-top-color:var(--blue);
  border-radius:50%;animation:rot .6s linear infinite;vertical-align:middle;margin-right:2px;
}
[data-theme="dark"] .spin{border-color:rgba(255,255,255,.1);border-top-color:var(--blue)}
@keyframes rot{to{transform:rotate(360deg)}}

/* ============ Badges ============ */
.badge{font-size:9px;padding:2px 6px;border-radius:20px;font-family:var(--font-ui);font-weight:600;letter-spacing:.15px}
.bload{background:var(--blue-s);color:var(--blue)}
.bok{background:var(--green-s);color:var(--green)}
.berr{background:rgba(192,57,43,.08);color:var(--red)}

/* ============ Animations ============ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ Toggle Switch ============ */
.toggle-wrap{display:flex;align-items:center;gap:10px;padding:6px 0}
.toggle-label{font-size:13px;color:var(--t2);flex:1}
.toggle-switch{
  position:relative;width:40px;height:22px;
  background:var(--border);border-radius:11px;cursor:pointer;
  transition:background .2s;flex-shrink:0;border:none;padding:0;
}
.toggle-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,.15);
  transition:transform .2s;
}
.toggle-switch.on{background:var(--blue)}
.toggle-switch.on::after{transform:translateX(18px)}