@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap');

/* ── Base (Terminal Green) ──────────────────────────────── */
:root {
  --bg:#0d0d0d; --bg2:#141414; --bg3:#1c1c1c;
  --border:#2a2a2a; --text:#b0b0b0; --text-dim:#505050;
  --head:#f0f0f0; --accent:#e7ff00;
  --card-bg:#111; --card-border:#2a2a2a;
  --mono:'Space Mono',monospace; --sans:'Syne',sans-serif;
  --r:8px; --t:170ms ease;
  --card-font: inherit;
}

/* ── DARK THEMES (18) ───────────────────────────────────── */
[data-theme="night_runner"]  {--bg:#212121;--bg2:#1a1a1a;--bg3:#2a2a2a;--border:#3a3a3a;--text:#e8e8e8;--text-dim:#91A6AB;--head:#feff04;--accent:#feff04;--card-bg:#1a1a1a;--card-border:#3a3a3a;}
[data-theme="miami_nights"]  {--bg:#18181a;--bg2:#0f0f10;--bg3:#222224;--border:#333336;--text:#ffffff;--text-dim:#91A6AB;--head:#ffffff;--accent:#e4609b;--card-bg:#0f0f10;--card-border:#333336;}
[data-theme="aurora"]        {--bg:#011926;--bg2:#000c13;--bg3:#0a2030;--border:#1a3a44;--text:#ffffff;--text-dim:#91A6AB;--head:#ffffff;--accent:#00e980;--card-bg:#000c13;--card-border:#1a3a44;}
[data-theme="cyberspace"]    {--bg:#181c18;--bg2:#131613;--bg3:#202420;--border:#2a342a;--text:#c2fbe1;--text-dim:#91A6AB;--head:#c2fbe1;--accent:#00ce7c;--card-bg:#131613;--card-border:#2a342a;}
[data-theme="joker"]         {--bg:#1a0e25;--bg2:#14081f;--bg3:#22103a;--border:#3a2050;--text:#e9e2f5;--text-dim:#91A6AB;--head:#e9e2f5;--accent:#99de1e;--card-bg:#14081f;--card-border:#3a2050;}
[data-theme="luna"]          {--bg:#221c35;--bg2:#2f2346;--bg3:#2a2240;--border:#3a3060;--text:#ffe3eb;--text-dim:#91A6AB;--head:#ffe3eb;--accent:#f67599;--card-bg:#2f2346;--card-border:#3a3060;}
[data-theme="dracula"]       {--bg:#282a36;--bg2:#21222c;--bg3:#343746;--border:#44475a;--text:#f8f8f2;--text-dim:#91A6AB;--head:#f8f8f2;--accent:#ff79c6;--card-bg:#21222c;--card-border:#44475a;}
[data-theme="rose_pine"]     {--bg:#1f1d27;--bg2:#282533;--bg3:#28263a;--border:#3a3850;--text:#e0def4;--text-dim:#91A6AB;--head:#e0def4;--accent:#9ccfd8;--card-bg:#282533;--card-border:#3a3850;}
[data-theme="catppuccin"]    {--bg:#1e1e2e;--bg2:#181825;--bg3:#313244;--border:#45475a;--text:#cdd6f4;--text-dim:#91A6AB;--head:#cdd6f4;--accent:#89b4fa;--card-bg:#181825;--card-border:#45475a;}
[data-theme="nord"]          {--bg:#2e3440;--bg2:#272c36;--bg3:#3b4252;--border:#434c5e;--text:#d8dee9;--text-dim:#91A6AB;--head:#eceff4;--accent:#88c0d0;--card-bg:#272c36;--card-border:#434c5e;}
[data-theme="vesper"]        {--bg:#101010;--bg2:#1c1c1c;--bg3:#202020;--border:#303030;--text:#ffffff;--text-dim:#91A6AB;--head:#ffffff;--accent:#ffc799;--card-bg:#1c1c1c;--card-border:#303030;}
[data-theme="superuser"]     {--bg:#262a33;--bg2:#1f232c;--bg3:#2e3240;--border:#3a4050;--text:#e5f7ef;--text-dim:#91A6AB;--head:#e5f7ef;--accent:#43ffaf;--card-bg:#1f232c;--card-border:#3a4050;}
[data-theme="hammerhead"]    {--bg:#030613;--bg2:#0a1928;--bg3:#0a1020;--border:#1a3048;--text:#e2f1f5;--text-dim:#91A6AB;--head:#e2f1f5;--accent:#4fcdb9;--card-bg:#0a1928;--card-border:#1a3048;}
[data-theme="bushido"]       {--bg:#242933;--bg2:#1c222d;--bg3:#2c3040;--border:#3a4050;--text:#f6f0e9;--text-dim:#91A6AB;--head:#f6f0e9;--accent:#ec4c56;--card-bg:#1c222d;--card-border:#3a4050;}
[data-theme="earthsong"]     {--bg:#292521;--bg2:#1d1b18;--bg3:#322e28;--border:#443c34;--text:#e6c7a8;--text-dim:#91A6AB;--head:#e6c7a8;--accent:#509452;--card-bg:#1d1b18;--card-border:#443c34;}
[data-theme="serika_dark"]   {--bg:#323437;--bg2:#2c2e31;--bg3:#3a3c40;--border:#4a4c50;--text:#d1d0c5;--text-dim:#91A6AB;--head:#d1d0c5;--accent:#e2b714;--card-bg:#2c2e31;--card-border:#4a4c50;}
[data-theme="monokai"]       {--bg:#272822;--bg2:#1f201b;--bg3:#2e2f28;--border:#404038;--text:#e2e2dc;--text-dim:#91A6AB;--head:#e2e2dc;--accent:#a6e22e;--card-bg:#1f201b;--card-border:#404038;}
[data-theme="phantom"]       {--bg:#1a1b26;--bg2:#24283b;--bg3:#1e2030;--border:#414868;--text:#c0caf5;--text-dim:#91A6AB;--head:#c0caf5;--accent:#7aa2f7;--card-bg:#24283b;--card-border:#414868;}

/* ── LIGHT THEMES (18) ──────────────────────────────────── */
[data-theme="milkshake"]     {--bg:#ffffff;--bg2:#ddeff3;--bg3:#eef8fb;--border:#c0e0ea;--text:#212b43;--text-dim:#77767B;--head:#212b43;--accent:#212b43;--card-bg:#ddeff3;--card-border:#c0e0ea;}
[data-theme="serika"]        {--bg:#e1e1e3;--bg2:#d1d3d8;--bg3:#d8d8dc;--border:#b0b2b8;--text:#323437;--text-dim:#77767B;--head:#323437;--accent:#e2b714;--card-bg:#d1d3d8;--card-border:#b0b2b8;}
[data-theme="godspeed"]      {--bg:#eae4cf;--bg2:#ded9c9;--bg3:#e4dece;--border:#c0baa8;--text:#646669;--text-dim:#77767B;--head:#323437;--accent:#9abbcd;--card-bg:#ded9c9;--card-border:#c0baa8;}
[data-theme="rose_pine_dawn"]{--bg:#fffaf3;--bg2:#f0e9df;--bg3:#f8f0e8;--border:#d0c8c0;--text:#286983;--text-dim:#77767B;--head:#1a1a2e;--accent:#56949f;--card-bg:#f0e9df;--card-border:#d0c8c0;}
[data-theme="repose_light"]  {--bg:#efead0;--bg2:#dbd6c4;--bg3:#e4dece;--border:#b8b4a0;--text:#333538;--text-dim:#77767B;--head:#1a1a18;--accent:#5f605e;--card-bg:#dbd6c4;--card-border:#b8b4a0;}
[data-theme="latte"]         {--bg:#dce0e8;--bg2:#d0d5de;--bg3:#c4cad6;--border:#a0a8b8;--text:#3c3f52;--text-dim:#77767B;--head:#1e2030;--accent:#1450c8;--card-bg:#d0d5de;--card-border:#a0a8b8;}
[data-theme="gruvbox_light"] {--bg:#fbf1c7;--bg2:#dacaae;--bg3:#ede0c0;--border:#b0a070;--text:#3c3836;--text-dim:#77767B;--head:#1c1c1c;--accent:#689d6a;--card-bg:#dacaae;--card-border:#b0a070;}
[data-theme="solarized_light"]{--bg:#fdf6e3;--bg2:#e2d8be;--bg3:#ede8d0;--border:#b8b090;--text:#181819;--text-dim:#77767B;--head:#002b36;--accent:#859900;--card-bg:#e2d8be;--card-border:#b8b090;}
[data-theme="camping"]       {--bg:#faf1e4;--bg2:#e7dccb;--bg3:#f0e6d4;--border:#c2b8aa;--text:#3c403b;--text-dim:#77767B;--head:#1a1a18;--accent:#618c56;--card-bg:#e7dccb;--card-border:#c2b8aa;}
[data-theme="cheesecake"]    {--bg:#fdf0d5;--bg2:#f3e2bf;--bg3:#f8ecd0;--border:#d4c0a0;--text:#3a3335;--text-dim:#77767B;--head:#1a1010;--accent:#8e2949;--card-bg:#f3e2bf;--card-border:#d4c0a0;}
[data-theme="breeze"]        {--bg:#e8d5c4;--bg2:#f6e6da;--bg3:#eeddd0;--border:#c8b8a8;--text:#1b4c5e;--text-dim:#77767B;--head:#0a2030;--accent:#7d67a9;--card-bg:#f6e6da;--card-border:#c8b8a8;}
[data-theme="olive"]         {--bg:#e9e5cc;--bg2:#d4cfbc;--bg3:#dedad0;--border:#b7b39e;--text:#373731;--text-dim:#77767B;--head:#1a1a10;--accent:#92946f;--card-bg:#d4cfbc;--card-border:#b7b39e;}
[data-theme="terrazzo"]      {--bg:#f1e5da;--bg2:#e3d3c6;--bg3:#eaddd2;--border:#c8b8a8;--text:#023e3b;--text-dim:#77767B;--head:#001818;--accent:#e0794e;--card-bg:#e3d3c6;--card-border:#c8b8a8;}
[data-theme="hanok"]         {--bg:#d8d2c3;--bg2:#cdc0af;--bg3:#d4cabb;--border:#b0a890;--text:#393b3b;--text-dim:#77767B;--head:#101010;--accent:#513a2a;--card-bg:#cdc0af;--card-border:#b0a890;}
[data-theme="peaches"]       {--bg:#e0d7c1;--bg2:#e2caaf;--bg3:#ded0b8;--border:#c0a888;--text:#5f4c41;--text-dim:#77767B;--head:#201008;--accent:#dd7a5f;--card-bg:#e2caaf;--card-border:#c0a888;}
[data-theme="witch_girl"]    {--bg:#f3dbda;--bg2:#e7c8be;--bg3:#edd4cc;--border:#c8b0a8;--text:#56786a;--text-dim:#77767B;--head:#102018;--accent:#56786a;--card-bg:#e7c8be;--card-border:#c8b0a8;}
[data-theme="mr_sleeves"]    {--bg:#d1d7da;--bg2:#bfcbd1;--bg3:#c8d2d8;--border:#a0b0b8;--text:#1d1d1d;--text-dim:#77767B;--head:#0a0a0a;--accent:#daa99b;--card-bg:#bfcbd1;--card-border:#a0b0b8;}
[data-theme="shoko"]         {--bg:#ced7e0;--bg2:#b7cada;--bg3:#c4d0da;--border:#98b0c0;--text:#3b4c58;--text-dim:#77767B;--head:#0a1820;--accent:#81c4dd;--card-bg:#b7cada;--card-border:#98b0c0;}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;cursor:none}
a, button, [role="button"], .card, .chip, .theme-dot, .toggle, .ctrl-btn, .bar-btn, .bar-text-btn, .custom-select-btn, .custom-select-option { cursor: none; }

/* ── Custom cursor ──────────────────────────────────────── */
#cursor{
  width:12px;height:12px;border-radius:50%;
  border:1px solid var(--head);background:var(--head);
  pointer-events:none;position:fixed;top:0;left:0;
  transform:translate(-50%,-50%);z-index:9999;
  transition:width .2s ease,height .2s ease,background-color .2s ease,border-color .2s ease;
  mix-blend-mode:difference;
}
#cursor.cursor--hover{width:28px;height:28px;background:transparent;border-color:var(--accent)}
@media(hover:none){#cursor{display:none}body{cursor:auto}}

/* ── Scrollbar — thin, fades when idle ──────────────────── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;opacity:0;transition:opacity .3s}
.scrolling::-webkit-scrollbar-thumb{background:var(--text-dim)}
* { scrollbar-width:thin; scrollbar-color:transparent transparent }
.scrolling { scrollbar-color:var(--text-dim) transparent }

/* ── Custom dropdown ────────────────────────────────────── */
.custom-select{position:relative;display:inline-block}
.custom-select-btn{
  font-family:var(--mono);font-size:13px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--head);padding:7px 30px 7px 11px;
  border-radius:var(--r);cursor:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  transition:border-color var(--t);user-select:none;
}
.custom-select-btn:hover,.custom-select-btn.open{border-color:var(--accent);color:var(--accent)}
.custom-select-arrow{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--text-dim);font-size:9px;transition:transform var(--t)
}
.custom-select-btn.open .custom-select-arrow{transform:translateY(-50%) rotate(180deg)}
.custom-select-list{
  position:absolute;top:calc(100% + 4px);left:0;min-width:100%;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);z-index:500;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease;
}
.custom-select-list.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.custom-select-option{
  font-family:var(--mono);font-size:12px;color:var(--text);
  padding:8px 14px;cursor:none;white-space:nowrap;
  transition:background var(--t),color var(--t);
}
.custom-select-option:hover{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--head)}
.custom-select-option.selected{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* ── Top Bar ────────────────────────────────────────────── */
#topbar{
  position:sticky;top:0;z-index:100;
  background:var(--bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 30px;height:72px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-group{display:flex;align-items:center;gap:10px}
.tb-spacer{flex:1}
.bar-sep { display: block; width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

.logo{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--head);white-space:nowrap;display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:0px}
.logo-dot{width:10px;height:10px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent);flex-shrink:0;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 10px var(--accent)}50%{opacity:.4;box-shadow:0 0 3px var(--accent)}}
.bar-label{font-size:12px;font-family:var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}

.bar-btn{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--border);border-radius:var(--r);
  background:transparent;color:var(--text);cursor:none;
  transition:border-color var(--t),color var(--t),background var(--t);flex-shrink:0
}
.bar-btn:hover{border-color:var(--accent);color:var(--accent)}
.bar-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.bar-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.bar-text-btn{
  font-family:var(--mono);font-size:13px;font-weight:700;
  padding:7px 16px;border:1px solid var(--border);border-radius:var(--r);
  background:transparent;color:var(--text);cursor:none;
  transition:all var(--t);white-space:nowrap;text-decoration:none;
  display:flex;align-items:center;gap:6px
}
.bar-text-btn:hover{border-color:var(--accent);color:var(--accent)}
.bar-text-btn.bmc:hover{border-color:#ffdd57;color:#ffdd57;background:color-mix(in srgb,#ffdd57 8%,transparent)}

/* Mobile right group */
.mobile-right-group {
  display: none;
  align-items: center;
  gap: 8px;
}

/* Desktop-only elements shown by default */
.desktop-bmc,
.desktop-streamer {
  display: flex;
}

/* ── Main ───────────────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;align-items:center;padding:36px 20px 100px;gap:24px}

/* ── Filter bar ────────────────────────────── */
#filter-bar{width:100%;max-width:840px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
#filter-bar > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
#filter-mode-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#active-filter-label {
  display: none;
}
.filter-label{font-family:var(--mono);font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;flex-shrink:0;}
#cat-chips{
  display:flex;gap:8px;
  overflow-x:auto;flex-wrap:wrap;
  padding-bottom:4px;
  scrollbar-width:none;
  width: 100%;
}
#cat-chips::-webkit-scrollbar{display:none}
.chip{font-family:var(--mono);font-size:12px;padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text-dim);cursor:none;transition:all var(--t);white-space:nowrap;flex-shrink:0}
.chip:hover{border-color:var(--text-dim);color:var(--text)}
.chip.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* Clear filters button */
.clear-filters-btn {
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  cursor: none;
  transition: all var(--t);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clear-filters-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

#active-filters-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  width: 100%;
  min-height: 0;
}
.active-filter-tag {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}

#stats-bar{font-family:var(--mono);font-size:12px;color:var(--text-dim);width:100%;max-width:840px}
#stats-bar span{color:var(--accent)}

/* ── Card ───────────────────────────────────────────────── */
#cards-grid{width:100%;max-width:840px}
.card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:14px;padding:36px 32px 32px;
  display:flex;flex-direction:column;gap:20px;
  cursor:none;position:relative;
  transition:border-color 220ms ease,transform 220ms ease,box-shadow 220ms ease;
  min-height:220px;user-select:none
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-2px);box-shadow:0 12px 48px color-mix(in srgb,var(--accent) 5%,transparent)}
.card.revealed{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}
.card-primary{font-family:var(--sans);font-weight:600;color:var(--head);line-height:1.4;flex:1}
.card-secondary{font-family:var(--mono);color:var(--accent);line-height:1.5;overflow:hidden}
.card-secondary.hidden{visibility:hidden;height:0}
.card-hint{font-family:var(--mono);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-top:auto}
.card-tts{
  position:absolute;bottom:18px;right:18px;width:34px;height:34px;
  border:1px solid var(--border);border-radius:50%;
  background:transparent;color:var(--text-dim);cursor:none;
  display:flex;align-items:center;justify-content:center;transition:all var(--t)
}
.card-tts:hover{border-color:var(--accent);color:var(--accent)}
.card-tts svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@keyframes scramble-in{0%{opacity:.3}100%{opacity:1}}
.scrambling{animation:scramble-in 360ms ease forwards}

/* ── Word Token Styling ─────────────────────────────────── */
.word-token {
  position: relative;
  transition: color 150ms ease;
  cursor: none;
}
.word-token:hover {
  color: var(--accent);
}
.word-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.word-italic {
  font-style: italic;
}
.word-bold {
  font-weight: 700;
}
.word-wavy {
  text-decoration: underline wavy var(--accent);
  text-decoration-thickness: 2px;
}
.word-dotted {
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 2px;
}

/* ── Word Tooltip ─────────────────────────────────────────── */
.word-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  font-family: var(--mono);
}
.word-tooltip.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.tt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.tt-pos {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg3);
  color: var(--text-dim);
}
.tt-pos.noun {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.tt-pos.verb {
  color: #ff79c6;
  background: color-mix(in srgb, #ff79c6 15%, transparent);
}
.tt-gender {
  font-size: 11px;
  color: var(--text);
}
.tt-lemma {
  font-size: 14px;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
}
.tt-case, .tt-tense {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.tt-meanings {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tt-meaning {
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}

/* ── Controls ────────────────────────────────────── */
#controls-row{width:100%;max-width:840px;display:none;gap:11px;align-items:center;justify-content:center;flex-wrap:wrap}
.ctrl-btn{
  font-family:var(--mono);font-size:13px;padding:11px 24px;
  border:1px solid var(--border);border-radius:var(--r);
  background:transparent;color:var(--text);cursor:none;
  transition:all var(--t);display:flex;align-items:center;gap:9px
}
.ctrl-btn:hover{border-color:var(--accent);color:var(--accent)}
.ctrl-btn.primary{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ctrl-btn.primary:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.ctrl-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Key hints bar ───────────────────────────────── */
#key-hints{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:12px;color:var(--text-dim);
  display:flex;gap:18px;pointer-events:none;white-space:nowrap;z-index:50
}
.key-hint-item{display:flex;align-items:center;gap:5px}
.key-hint-key{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:3px 8px;font-size:12px;color:var(--text)}

/* ── Present mode ───────────────────────────────────────── */
#presentation-mode{display:none;position:fixed;inset:0;background:var(--bg);z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:52px}
#presentation-mode.active{display:flex}
.pres-meta { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mono); font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.pres-level{color:var(--accent);font-weight:700}
.pres-primary{font-family:var(--sans);font-weight:700;text-align:center;color:var(--head);line-height:1.25;max-width:960px}
.pres-secondary{font-family:var(--mono);text-align:center;color:var(--accent);max-width:960px;line-height:1.4;transition:opacity 300ms}
.pres-secondary.hidden{opacity:0;pointer-events:none}
.pres-controls{position:fixed;bottom:30px;display:flex;gap:10px;align-items:center}
.pres-progress{position:fixed;bottom:0;left:0;right:0;height:3px;background:var(--border)}
.pres-progress-bar{height:100%;background:var(--accent);transition:width 280ms ease}

/* ── Settings panel ─────────────────────────────────────── */
#settings-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
#settings-overlay.active{display:flex}
#settings-panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:16px;
  padding:30px 34px;width:min(620px,94vw);
  max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:28px;
  scrollbar-width:none;
}
#settings-panel::-webkit-scrollbar{width:0}
#settings-panel.scrolling{scrollbar-width:thin;scrollbar-color:var(--text-dim) transparent}
#settings-panel.scrolling::-webkit-scrollbar{width:3px}
#settings-panel.scrolling::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:2px}

.settings-title{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--head);display:flex;justify-content:space-between;align-items:center}
.settings-close{background:transparent;border:none;color:var(--text-dim);cursor:none;font-size:22px;line-height:1;transition:color var(--t)}
.settings-close:hover{color:var(--head)}
.settings-section{display:flex;flex-direction:column;gap:12px}
.settings-section-label{font-family:var(--mono);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em}

/* Themes */
.theme-dots{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.theme-dot{width:26px;height:26px;border-radius:50%;cursor:none;border:3px solid transparent;transition:transform 180ms,border-color 180ms;flex-shrink:0}
.theme-dot:hover{transform:scale(1.18)}
.theme-dot.active{border-color:var(--head);transform:scale(1.22)}

/* Fonts */
.font-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.font-btn {
  font-size: 13px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: transparent;
  color: var(--text-dim);
  cursor: none;
  transition: all var(--t);
  text-align: center;
}
.font-btn:hover { border-color: var(--text-dim); color: var(--text); }
.font-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Font size */
.fs-row{display:flex;gap:7px;align-items:center;flex-wrap:nowrap}
.fs-btn{font-family:var(--mono);font-size:12px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--r);background:transparent;color:var(--text);cursor:none;transition:all var(--t);white-space:nowrap}
.fs-btn:hover{border-color:var(--accent);color:var(--accent)}
.fs-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.fs-custom-wrap{display:flex;align-items:center;gap:8px;margin-left:4px}
.fs-custom-input{font-family:var(--mono);font-size:13px;width:72px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--head);padding:7px 10px;text-align:center}
.fs-custom-input:focus{outline:none;border-color:var(--accent)}
.fs-custom-label{font-family:var(--mono);font-size:11px;color:var(--text-dim);white-space:nowrap}

/* TTS voice select in settings */
.tts-voice-row{display:flex;align-items:center;gap:12px}
.tts-voice-select{
  font-family:var(--mono);font-size:12px;flex:1;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--head);padding:7px 10px;border-radius:var(--r);
  appearance:none;cursor:none;
}
.tts-voice-select:focus{outline:none;border-color:var(--accent)}
.tts-voice-select option{background:var(--bg3);color:var(--head)}

/* Word Style Settings */
.word-style-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.word-style-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.word-style-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}
.word-style-select {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--head);
  padding: 6px 10px;
  border-radius: var(--r);
  cursor: none;
  min-width: 140px;
}
.word-style-select:focus {
  outline: none;
  border-color: var(--accent);
}
.word-style-select option {
  background: var(--bg3);
  color: var(--head);
}

/* Toggle */
.toggle-row{display:flex;align-items:center;justify-content:space-between}
.toggle-label{font-family:var(--mono);font-size:12px;color:var(--text)}
.toggle{width:42px;height:24px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;cursor:none;position:relative;transition:background var(--t),border-color var(--t);flex-shrink:0}
.toggle.on{background:color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
.toggle::after{content:'';position:absolute;width:17px;height:17px;background:var(--text-dim);border-radius:50%;top:3px;left:3px;transition:left var(--t),background var(--t)}
.toggle.on::after{left:21px;background:var(--accent)}

/* Key remap */
.key-row{display:flex;align-items:center;gap:12px}
.key-label{font-family:var(--mono);font-size:12px;color:var(--text);flex:1}
.key-input{font-family:var(--mono);font-size:13px;width:72px;text-align:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--head);padding:6px;text-transform:uppercase}
.key-input:focus{outline:none;border-color:var(--accent)}

/* Color pickers */
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.color-row{display:flex;align-items:center;gap:10px}
.color-label{font-family:var(--mono);font-size:11px;color:var(--text);flex:1;white-space:nowrap}
.color-swatch{width:32px;height:32px;border-radius:6px;border:1px solid var(--border);cursor:none;flex-shrink:0;position:relative;overflow:hidden}
.color-swatch input[type=color]{position:absolute;inset:0;opacity:0;cursor:none;width:100%;height:100%;border:none;padding:0}
.color-hex{font-family:var(--mono);font-size:11px;width:76px;background:var(--bg3);border:1px solid var(--border);border-radius:5px;color:var(--head);padding:5px 7px;text-align:center;text-transform:uppercase}
.color-hex:focus{outline:none;border-color:var(--accent)}
.custom-theme-reset{font-family:var(--mono);font-size:11px;padding:6px 14px;border:1px solid var(--border);border-radius:var(--r);background:transparent;color:var(--text-dim);cursor:none;transition:all var(--t);align-self:flex-start}
.custom-theme-reset:hover{border-color:var(--accent);color:var(--accent)}


/* ── Info button ─────────────────────────────────────────── */
.info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;          /* smaller */
  height: 20px;
  border: none;         /* remove border */
  border-radius: 0;     /* remove circle */
  background: transparent;
  color: var(--accent); /* always accented */
  cursor: none;
  transition: opacity 150ms;
  flex-shrink: 0;
  margin-left: 0px;
  padding: 0;
}
.info-btn:hover {
  opacity: 0.7;         /* subtle fade on hover */
}
.info-btn svg {
  width: 18px;          /* bigger icon, smaller button */
  height: 18px;
}

/* ── Info overlay ───────────────────────────────────────── */
#info-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 300;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}
#info-overlay.active {
  display: flex;
}
#info-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
#info-panel::-webkit-scrollbar {
  width: 0;
}
.info-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--head);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px 0;
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 2;
}
.info-content {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.info-content h3 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--head);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.info-lead {
  font-size: 15px;
  color: var(--head);
  margin: 0;
}
.info-langs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.info-lang-code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}
.info-lang-feat {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
}
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-list li {
  position: relative;
  padding-left: 18px;
}
.info-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.info-content a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 150ms;
}
.info-content a:hover {
  opacity: 0.7;
  text-decoration: underline;
}
.info-support {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
  margin-top: 4px;
}
.info-support p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-dim);
}
.info-kofi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  text-decoration: none;
  transition: all var(--t);
}
.info-kofi:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.info-footer {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin: 0;
  padding-top: 8px;
}

@media (max-width: 640px) {
  .info-title {
    padding: 18px 20px 0;
  }
  .info-content {
    padding: 16px 20px 20px;
  }
  .info-lang-feat {
    display: none;
  }
}

/* ── Upload ─────────────────────────────────────────────── */
#upload-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
#upload-overlay.active{display:flex}
#upload-panel{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:30px 34px;width:min(500px,94vw);display:flex;flex-direction:column;gap:18px}
.upload-title{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--head);display:flex;justify-content:space-between;align-items:center}
.upload-format{font-family:var(--mono);font-size:11px;color:var(--text-dim);line-height:1.9;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.upload-format code{color:var(--accent)}
.upload-drop{border:2px dashed var(--border);border-radius:var(--r);padding:32px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--text-dim);cursor:none;transition:border-color var(--t)}
.upload-drop:hover,.upload-drop.dragover{border-color:var(--accent);color:var(--accent)}
.upload-status{font-family:var(--mono);font-size:12px;min-height:20px}
.upload-status.ok{color:var(--accent)}
.upload-status.err{color:#ff5555}

#upload-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
}
.bmc {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
}

/* ── Empty ──────────────────────────────────────────────── */
#empty-state{text-align:center;padding:70px 20px;font-family:var(--mono);font-size:13px;color:var(--text-dim);display:none}
#empty-state.active{display:block}

#topbar-main { display: none; width: 100%; }
#hamburger-btn { display: none; }

@media(min-width:641px) {
  #topbar-main { display: none !important; }
  #topbar-drawer { display: none !important; }
  .desktop-only { display: flex !important; }
  .topbar-left { display: flex !important; }
  .topbar-right { display: flex !important; }
}

.load-status {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  z-index: 9999;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media(max-width:640px){
  body{cursor:auto}
  #cursor{display:none}
  #topbar{
    flex-direction:column;height:auto;padding:10px 14px;gap:0;align-items:stretch;
  }
  .topbar-left, .topbar-right, .desktop-only, .desktop-nav {
    display: none !important;
  }
  #topbar-main {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  #topbar-main .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto; /* pushes everything else right */
  }
  #topbar-main .info-btn {
    margin-left: 0;
    margin-right: auto; /* sits right after logo, before the gap */
  }
  .mobile-right-group { 
    display: flex; 
    align-items: center;
    gap: 8px;
  }
  #hamburger-btn{display:flex;}
  #topbar-drawer {
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    padding-top: 0;
    max-height: 0; 
    opacity: 0; 
    overflow: hidden;
    transition: opacity 200ms ease, max-height 250ms ease, padding-top 200ms ease;
  }
  #topbar-drawer.open {
    max-height: 200px; 
    padding-top: 10px; 
    opacity: 1; 
    overflow: visible;
  }
  #topbar-drawer .tb-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
  }
  #topbar-drawer .tb-group .custom-select-btn {
    height: 42px;
    padding: 7px 28px 7px 14px;
    font-size: 12px;
  }
  #topbar-drawer .tb-group .bar-text-btn,
  #topbar-drawer .tb-group .bar-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }
  #main{padding:16px 12px 80px;gap:16px}
  #cards-grid{max-width:100%}
  .card{padding:24px 18px 24px;min-height:160px}
  #controls-row{gap:8px}
  .ctrl-btn{font-size:12px;padding:9px 16px}
  #key-hints{display:none}
  #settings-panel{padding:20px 18px;max-height:92vh}
  .color-grid{grid-template-columns:1fr}
  .fs-row{flex-wrap:wrap}
  .pres-primary{font-size:14px}
  .pres-secondary{font-size:14px}

  /* Mobile filter adjustments */
  #filter-mode-wrap {
    margin-bottom: 4px;
  }
  .word-tooltip {
    max-width: 260px;
    padding: 10px 12px;
  }
}