/* ── Shared CSS Variables ── */
:root[data-theme="dark"] {
  --bg:#050d0a; --bg2:#071209; --bg3:#0a1a10; --card:#0b1812; --card2:#0f2018;
  --border:rgba(34,197,94,0.12); --border2:rgba(34,197,94,0.28);
  --text:#e2f0e8; --text2:#6b9b78; --text3:#3d6b4d;
  --shadow:0 2px 16px rgba(0,0,0,0.45); --code:#020c06; --sidebar:#07140a;
}
:root[data-theme="light"] {
  --bg:#dde5e0; --bg2:#d3ddd8; --bg3:#c8d4ce; --card:#e8eeea; --card2:#dfe8e2;
  --border:rgba(22,163,74,0.14); --border2:rgba(22,163,74,0.28);
  --text:#1b2d21; --text2:#4a6e5a; --text3:#7a9e8a;
  --shadow:0 2px 14px rgba(0,0,0,0.08); --code:#1b2d21; --sidebar:#d5e0da;
}
:root[data-theme="cyber"] {
  --bg:#07030f; --bg2:#0d0520; --bg3:#100728; --card:#0e0520; --card2:#140a2e;
  --border:rgba(168,85,247,0.15); --border2:rgba(168,85,247,0.35);
  --text:#f0e6ff; --text2:#a78bca; --text3:#5b3d7a;
  --nav-bg:rgba(7,3,15,0.9); --shadow:0 8px 32px rgba(0,0,0,0.6); --code-bg:#050210;
  --sidebar:#0a0419;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); font-family:'Inter',sans-serif; color:var(--text); transition:background .3s,color .3s; }

/* ── Typography ── */
.mono { font-family:'JetBrains Mono',monospace; }
.grad { background:linear-gradient(135deg,#22c55e,#16a34a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-bg { background:linear-gradient(135deg,#22c55e,#16a34a); }

/* ── Theme toggle ── */
.t-toggle { width:46px; height:26px; border-radius:999px; border:1px solid var(--border2); background:var(--card2); position:relative; cursor:pointer; transition:all .3s; flex-shrink:0; }
.t-toggle::after { content:''; position:absolute; top:4px; left:4px; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#22c55e,#16a34a); transition:transform .3s; }
[data-theme="light"] .t-toggle::after { transform:translateX(20px); }

/* ── Lang switcher ── */
.lang-btn{padding:4px 9px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border2);background:var(--card2);color:var(--text2);transition:all .2s;font-family:'JetBrains Mono',monospace}
.lang-btn:hover{border-color:#22c55e;color:#22c55e;background:rgba(34,197,94,.08)}
.lang-btn.active{background:rgba(34,197,94,.15);color:#22c55e;border-color:rgba(34,197,94,.45);font-weight:700}

/* ── SVG icon sizing ── */
.ic { width:20px; height:20px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.ic-lg { width:26px; height:26px; }
.ic-sm { width:16px; height:16px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(34,197,94,0.28); border-radius:3px; }

/* ── Divider ── */
.divider { border:none; border-top:1px solid var(--border); }

/* ── Toast ── */
.toast-msg {
  background:#0b1812;
  border:1px solid rgba(34,197,94,0.4);
  color:#4ade80;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="light"] .toast-msg {
  background:var(--card);
  border:1px solid rgba(22,163,74,0.45);
  color:#166534;
  box-shadow:0 4px 20px rgba(0,0,0,0.14);
}

/* ── Modal overlay ── */
.modal-overlay {
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
[data-theme="light"] .modal-overlay {
  background:rgba(0,0,0,0.42);
}