* { box-sizing: border-box; }

:root {
  --cream: #f7efe4;
  --muted: #b8aea2;
  --gold: #c8a568;
  --panel: rgba(5,5,5,.96);
  --panel2: rgba(12,12,12,.94);
  --border: rgba(255,255,255,.13);
  --shadow: 0 26px 70px rgba(0,0,0,.56);
  --text: #f7efe4;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(rgba(19,10,5,.26), rgba(7,4,2,.56)),
    url("assets/dark-wood-background.png") center top / cover fixed;
}

body[data-theme="glass"] {
  background: radial-gradient(circle at top, #292929, #050505 60%);
}
body[data-theme="paper"] {
  --text: #251d16;
  --cream: #251d16;
  --muted: #665d53;
  --panel: rgba(255,252,245,.96);
  --panel2: rgba(247,241,230,.96);
  --border: rgba(50,35,20,.16);
  background: linear-gradient(#efe2cb, #d8c3a4);
}
body[data-theme="library"] {
  background:
    linear-gradient(rgba(28,13,3,.2), rgba(4,2,1,.62)),
    url("assets/dark-wood-background.png") center / cover fixed;
}
body[data-theme="minimal"] {
  background: #111;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 10%, rgba(255,220,180,.08), transparent 38%);
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
  padding: 17px clamp(20px,6vw,85px);
  background: rgba(3,3,3,.87);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(17px);
}
.brand { display:flex; align-items:center; gap:13px; color:white; text-decoration:none; }
.brand-icon {
  display:grid; width:42px; height:42px; place-items:center;
  color:var(--gold); border:1px solid rgba(200,165,104,.65);
  border-radius:11px; font:25px Georgia,serif;
}
.brand strong { display:block; font-family:Georgia,serif; letter-spacing:.16em; }
.brand small { display:block; margin-top:2px; color:#a79d92; font-size:11px; }
nav { display:flex; gap:22px; }
nav a { color:#d2c9be; text-decoration:none; font-size:14px; }

main { position:relative; z-index:1; width:min(1180px,calc(100% - 32px)); margin:auto; }
.hero { padding:76px 0 34px; }
.eyebrow { margin:0 0 13px; color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.17em; }
.hero h1,.content-card h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:500; }
.hero h1 { max-width:950px; font-size:clamp(45px,7vw,82px); line-height:.98; text-shadow:0 3px 22px rgba(0,0,0,.7); }
.hero h1 span { color:#ddcbb6; }
.hero-copy { max-width:760px; color:#ded2c3; font-size:17px; line-height:1.7; text-shadow:0 2px 14px rgba(0,0,0,.8); }

.quick-settings,
.translator-shell,
.content-card {
  background: linear-gradient(145deg,var(--panel2),var(--panel));
  border:1px solid var(--border);
  border-radius:25px;
  box-shadow:var(--shadow);
}

.quick-settings {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:18px;
}

.translator-shell { padding:21px; }
.shell-header,.box-header,.box-footer,.options-row,.content-card,footer {
  display:flex; align-items:center; justify-content:space-between;
}
.header-actions { display:flex; gap:16px; }
.connection { color:var(--muted); font-size:13px; }
.connection span { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#8daa72; box-shadow:0 0 11px rgba(141,170,114,.7); }

button,select,textarea { font:inherit; }
button { cursor:pointer; }
.text-button { padding:0; color:#d7cec4; background:none; border:0; }
.secondary-button {
  padding:9px 15px; color:white; background:#181818;
  border:1px solid #3e3e3e; border-radius:9px;
}
body[data-theme="paper"] .secondary-button { color:#251d16; background:#eee4d2; border-color:#a99478; }

.translation-grid { display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); }
.translation-box {
  min-height:390px; display:flex; flex-direction:column; overflow:hidden;
  background:#050505; border:1px solid rgba(255,255,255,.14); border-radius:18px;
}
body[data-theme="paper"] .translation-box { background:#fffaf0; }
.box-header { min-height:70px; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.12); }
.box-header > div { display:flex; align-items:center; gap:12px; }
.box-header label,.option-control label {
  color:#8f877e; font-size:11px; font-weight:700; letter-spacing:.12em;
}
select { color:white; background:#151515; border:1px solid #363636; border-radius:10px; padding:10px 35px 10px 12px; }
body[data-theme="paper"] select { color:#251d16; background:#f5ecdc; border-color:#b4a184; }

textarea,.result-text {
  flex:1; width:100%; min-height:210px; padding:25px;
  color:white; background:#050505; border:0; outline:0; resize:none;
  font:20px/1.65 Georgia,serif;
}
body[data-theme="paper"] textarea,
body[data-theme="paper"] .result-text { color:#251d16; background:#fffaf0; }

.result-text span.word-token { cursor:pointer; border-radius:5px; padding:1px 2px; }
.result-text span.word-token:hover { background:rgba(200,165,104,.18); }

.romanization,.pronunciation {
  padding:12px 25px; color:#bba98f; background:#0b0b0b;
  border-top:1px solid rgba(255,255,255,.08); font-size:14px; font-style:italic;
}
.box-footer { min-height:48px; padding:10px 18px; color:#8b847c; border-top:1px solid rgba(255,255,255,.11); font-size:12px; }
.swap-wrap { display:grid; place-items:center; }
.swap-button,.speak-button,.round-action-button {
  display:grid; width:43px; height:43px; place-items:center; padding:0;
  color:white; background:#15110d; border:2px solid #7a5637; border-radius:50%;
}
.options-row {
  justify-content:flex-start; gap:10px; flex-wrap:wrap; padding:13px 18px;
  background:#0b0b0b; border-top:1px solid rgba(255,255,255,.1);
}
.option-control { display:flex; align-items:center; gap:8px; }
.compact-control select { min-width:92px; }
.beta-badge { padding:5px 8px; color:var(--gold); border:1px solid rgba(200,165,104,.48); border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.1em; }
.translate-button {
  width:100%; margin-top:17px; padding:16px; color:#1b130b;
  background:linear-gradient(135deg,#e1c28a,#ae8953); border:0; border-radius:14px; font-weight:800;
}
.translate-button.small { margin-top:10px; }
.translate-button:disabled { cursor:wait; opacity:.72; }
.post-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.notice { margin:14px 4px 1px; color:#938a81; font-size:12px; line-height:1.6; }
.grammar-hint { margin-top:12px; padding:13px 15px; color:#d8cdc1; background:rgba(22,17,13,.78); border:1px solid rgba(178,126,76,.38); border-radius:12px; font-size:12px; line-height:1.55; }

.insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.content-card { gap:55px; margin-top:68px; padding:clamp(28px,5vw,55px); }
.compact-card { margin-top:0; align-items:flex-start; }
.content-card h2 { font-size:clamp(28px,4vw,44px); }
.language-cloud { display:flex; max-width:540px; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.language-cloud span { padding:9px 13px; color:#d9d0c6; border:1px solid rgba(255,255,255,.13); border-radius:999px; font-size:13px; }
.language-cloud .special { color:#e0bf84; border-color:rgba(200,165,104,.5); }

.list-panel { display:grid; gap:8px; min-width:280px; }
.list-item,.alternative-item {
  padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.025);
}
.list-item small { display:block; color:#8f877e; margin-top:5px; }
.list-item-actions { display:flex; gap:8px; margin-top:9px; }
.empty-state { color:#8f877e; }

.word-card {
  min-width:280px; padding:18px; border:1px solid rgba(255,255,255,.1);
  border-radius:14px; background:rgba(255,255,255,.025);
}
.word-card h3 { margin-top:0; font:30px Georgia,serif; }
.word-card dl { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; }
.word-card dt { color:#8f877e; }
.word-card dd { margin:0; }

.conversation-card { align-items:flex-start; flex-direction:column; }
.conversation-grid { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.conversation-side { display:flex; flex-direction:column; gap:10px; }
.conversation-side textarea { min-height:150px; border:1px solid var(--border); border-radius:14px; }

.split-card p:not(.eyebrow) { max-width:620px; color:#bdb3a8; line-height:1.75; }
.history-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; width:100%; }
.dictionary-preview { display:grid; min-width:290px; gap:8px; }
.dictionary-preview span { display:flex; justify-content:space-between; gap:25px; padding:10px 0; color:#d8cec3; border-bottom:1px solid rgba(255,255,255,.1); }
.detected-language { color:#a99d90; font-size:13px; }
.hidden { display:none !important; }

.translation-box[dir="rtl"] textarea,
.translation-box[dir="rtl"] .result-text { direction:rtl; text-align:right; }

.about-section { padding:48px 0 70px; color:#ddd2c5; text-align:center; }
footer { position:relative; z-index:1; padding:23px clamp(20px,6vw,85px); color:#827a72; background:rgba(3,3,3,.84); border-top:1px solid rgba(255,255,255,.09); font-size:12px; }

@media (max-width:900px) {
  nav { display:none; }
  .translation-grid,.conversation-grid,.insight-grid,.history-columns { grid-template-columns:1fr; }
  .swap-wrap { height:45px; }
  .swap-button { transform:rotate(90deg); }
  .content-card { align-items:flex-start; flex-direction:column; }
  .language-cloud { justify-content:flex-start; }
}
@media (max-width:540px) {
  .hero { padding-top:52px; }
  .translator-shell { padding:12px; }
  .box-header > div,.options-row { align-items:stretch; flex-direction:column; }
  .option-control { justify-content:space-between; }
  .secondary-button { width:100%; }
}


/* Wordora v7 themes */
body[data-theme="classic-blue"] {
  --gold: #a8d4ff;
  --panel: rgba(4, 14, 31, .97);
  --panel2: rgba(8, 29, 58, .95);
  --border: rgba(145, 201, 255, .22);
  background:
    radial-gradient(circle at 50% 0%, rgba(74, 151, 225, .28), transparent 36%),
    linear-gradient(145deg, #071b33, #02070f 72%);
}

body[data-theme="classic-blue"] .translate-button {
  color: #06101d;
  background: linear-gradient(135deg, #b7ddff, #5e9ed7);
}

body[data-theme="classic-blue"] .translation-box {
  background: #020b16;
  border-color: rgba(145, 201, 255, .22);
}

body[data-theme="classic-blue"] textarea,
body[data-theme="classic-blue"] .result-text {
  background: #020b16;
}

body[data-theme="red-lego"] {
  --gold: #ffd463;
  --panel: rgba(33, 2, 2, .97);
  --panel2: rgba(76, 5, 5, .95);
  --border: rgba(255, 211, 89, .22);
  background:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.14) 0 5px, transparent 6px) 0 0 / 40px 40px,
    linear-gradient(145deg, #a10d0d, #3b0000 68%);
}

body[data-theme="red-lego"] .translate-button {
  color: #281000;
  background: linear-gradient(135deg, #ffe075, #e8a821);
}

body[data-theme="red-lego"] .translation-box {
  background: #150202;
  border-color: rgba(255, 211, 89, .22);
}

body[data-theme="red-lego"] textarea,
body[data-theme="red-lego"] .result-text {
  background: #150202;
}

body[data-theme="carpet"] {
  --gold: #e3bd7b;
  --panel: rgba(19, 8, 11, .97);
  --panel2: rgba(50, 17, 26, .94);
  --border: rgba(229, 179, 116, .2);
  background:
    repeating-linear-gradient(45deg, rgba(238,190,129,.08) 0 3px, transparent 3px 16px),
    repeating-linear-gradient(-45deg, rgba(139,26,51,.2) 0 5px, transparent 5px 20px),
    linear-gradient(145deg, #60162a, #18070d 72%);
}

body[data-theme="carpet"] .translate-button {
  color: #23130b;
  background: linear-gradient(135deg, #e8c992, #a76b47);
}

body[data-theme="carpet"] .translation-box {
  background: #11070a;
}

body[data-theme="carpet"] textarea,
body[data-theme="carpet"] .result-text {
  background: #11070a;
}

body[data-theme="night-sky"] {
  --gold: #b7c8ff;
  --panel: rgba(2, 5, 20, .97);
  --panel2: rgba(8, 13, 42, .95);
  --border: rgba(173, 195, 255, .2);
  background:
    radial-gradient(circle at 12% 18%, white 0 1px, transparent 2px),
    radial-gradient(circle at 32% 8%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 22%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(124, 92, 255, .22), transparent 28%),
    linear-gradient(180deg, #090d2a, #02030c 72%);
  background-size: 180px 180px, 260px 260px, 210px 210px, 320px 320px, auto, auto;
}

body[data-theme="night-sky"] .translate-button {
  color: #080b21;
  background: linear-gradient(135deg, #c8d5ff, #7d86dc);
}

body[data-theme="night-sky"] .translation-box {
  background: #020515;
  border-color: rgba(173, 195, 255, .2);
}

body[data-theme="night-sky"] textarea,
body[data-theme="night-sky"] .result-text {
  background: #020515;
}

.vocabulary-card {
  align-items: flex-start;
}

.vocabulary-preview {
  display: grid;
  width: min(620px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.vocabulary-chip {
  padding: 10px 12px;
  color: #dcd2c7;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  font-size: 13px;
}

.vocabulary-chip b {
  display: block;
  color: white;
  margin-bottom: 3px;
}

@media (max-width: 700px) {
  .vocabulary-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Wordora v8 themes */
body[data-theme="navy-blue"] {
  --gold: #d0d7ff;
  --panel: rgba(0, 12, 44, .98);
  --panel2: rgba(0, 28, 78, .96);
  --border: rgba(180, 195, 255, .2);
  background: #001b5e;
}

body[data-theme="navy-blue"]::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 3px
    );
}

body[data-theme="navy-blue"] .translate-button {
  color: #001238;
  background: linear-gradient(135deg, #d7e1ff, #819be8);
}

body[data-theme="navy-blue"] .translation-box,
body[data-theme="navy-blue"] textarea,
body[data-theme="navy-blue"] .result-text {
  background: #000b2b;
}

body[data-theme="bright-sky"] {
  --text: #102039;
  --cream: #102039;
  --muted: #4d6582;
  --gold: #1266a8;
  --panel: rgba(244, 252, 255, .96);
  --panel2: rgba(226, 245, 255, .95);
  --border: rgba(28, 112, 174, .18);
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.92) 0 40px, transparent 42px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.78) 0 56px, transparent 58px),
    linear-gradient(180deg, #58c6ff, #c9efff 68%, #eefbff);
}

body[data-theme="bright-sky"] .topbar {
  background: rgba(235, 248, 255, .88);
}

body[data-theme="bright-sky"] .brand,
body[data-theme="bright-sky"] nav a,
body[data-theme="bright-sky"] .text-button {
  color: #123354;
}

body[data-theme="bright-sky"] .translation-box,
body[data-theme="bright-sky"] textarea,
body[data-theme="bright-sky"] .result-text {
  color: #102039;
  background: #f9fdff;
}

body[data-theme="bright-sky"] select {
  color: #102039;
  background: #e9f7ff;
  border-color: #8cbfdd;
}

body[data-theme="bright-sky"] .translate-button {
  color: white;
  background: linear-gradient(135deg, #2098df, #0f65a8);
}

body[data-theme="cute"] {
  --text: #5b2e4a;
  --cream: #5b2e4a;
  --muted: #956d87;
  --gold: #d66fa6;
  --panel: rgba(255, 246, 251, .97);
  --panel2: rgba(255, 231, 244, .96);
  --border: rgba(204, 103, 157, .22);
  background:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.9) 0 4px, transparent 5px) 0 0 / 42px 42px,
    linear-gradient(135deg, #ffc7e3, #e3d1ff 52%, #c9f0ff);
}

body[data-theme="cute"] .topbar {
  background: rgba(255, 242, 250, .9);
}

body[data-theme="cute"] .brand,
body[data-theme="cute"] nav a,
body[data-theme="cute"] .text-button {
  color: #6d3557;
}

body[data-theme="cute"] .brand-icon {
  border-radius: 50%;
  color: #d04e94;
  border-color: #df92ba;
}

body[data-theme="cute"] .translation-box,
body[data-theme="cute"] textarea,
body[data-theme="cute"] .result-text {
  color: #5b2e4a;
  background: #fff9fc;
}

body[data-theme="cute"] select {
  color: #5b2e4a;
  background: #ffeaf5;
  border-color: #dda4c3;
}

body[data-theme="cute"] .translate-button {
  color: white;
  background: linear-gradient(135deg, #e977b4, #a86de0);
  border-radius: 999px;
}

body[data-theme="cute"] .content-card,
body[data-theme="cute"] .translator-shell,
body[data-theme="cute"] .quick-settings {
  border-radius: 30px;
}

body[data-theme="terminal-green"] {
  --gold: #8dff9c;
  --panel: rgba(0, 12, 5, .98);
  --panel2: rgba(0, 28, 10, .96);
  --border: rgba(111, 255, 133, .2);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(65,255,92,.035) 0 1px,
      transparent 1px 4px
    ),
    #001506;
}

body[data-theme="terminal-green"] * {
  font-family: "Courier New", monospace;
}

body[data-theme="terminal-green"] .translate-button {
  color: #001506;
  background: #7fff93;
}

body[data-theme="terminal-green"] .translation-box,
body[data-theme="terminal-green"] textarea,
body[data-theme="terminal-green"] .result-text {
  color: #8cff9c;
  background: #000b03;
}

body[data-theme="sunset"] {
  --gold: #ffd19a;
  --panel: rgba(27, 7, 24, .97);
  --panel2: rgba(69, 18, 45, .95);
  --border: rgba(255, 188, 130, .2);
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 205, 117, .72), transparent 18%),
    linear-gradient(180deg, #5e2c8a 0%, #c34771 45%, #f2915b 75%, #ffc47f 100%);
}

body[data-theme="sunset"] .translate-button {
  color: #301427;
  background: linear-gradient(135deg, #ffd39d, #f18c6c);
}

body[data-theme="sunset"] .translation-box,
body[data-theme="sunset"] textarea,
body[data-theme="sunset"] .result-text {
  background: #160615;
}

.long-vocabulary-card {
  align-items: flex-start;
}

.encyclopedia-link{display:inline-block;margin-top:6px;padding:0;color:var(--gold);background:none;border:0;border-bottom:1px solid currentColor;font-size:11px;cursor:pointer}
.word-with-encyclopedia{display:inline-flex;flex-direction:column;align-items:flex-start;vertical-align:top;margin:0 2px}
.encyclopedia-drawer{position:fixed;top:0;right:0;z-index:60;width:min(430px,92vw);height:100vh;overflow-y:auto;padding:28px;color:var(--text);background:linear-gradient(155deg,var(--panel2),var(--panel));border-left:1px solid var(--border);box-shadow:-24px 0 70px rgba(0,0,0,.45);transform:translateX(105%);transition:transform .28s ease}
.encyclopedia-drawer.open{transform:translateX(0)}
.encyclopedia-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.encyclopedia-header h2{margin:0;font:38px Georgia,serif}
.encyclopedia-close{display:grid;width:38px;height:38px;place-items:center;padding:0;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:50%;font-size:24px}
.encyclopedia-body{padding-top:20px;line-height:1.65}
.encyclopedia-facts{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0 0 24px}
.encyclopedia-facts dt{color:var(--muted)} .encyclopedia-facts dd{margin:0}
.encyclopedia-examples{display:grid;gap:10px}
.encyclopedia-example{padding:13px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:12px}
.encyclopedia-example b{display:block;margin-bottom:4px}
.drawer-backdrop{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.38);backdrop-filter:blur(2px)}
body.drawer-open{overflow:hidden}

.audio-note {
  margin: 10px 4px 0;
  color: var(--muted);
  font-size: 11px;
}

.encyclopedia-entry-count {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 9px;
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .05em;
}


/* Transwordi Pedia v15 font selector */
body[data-font="default"] {
  --app-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body[data-font="serif"] {
  --app-font: Georgia, "Times New Roman", "Noto Serif", serif;
}
body[data-font="sans-serif"] {
  --app-font: Arial, Helvetica, "Noto Sans", sans-serif;
}
body[data-font="calligraphy"] {
  --app-font: "Apple Chancery", "Segoe Script", "URW Chancery L", cursive;
}
body[data-font="arial"] {
  --app-font: Arial, "Noto Sans", sans-serif;
}
body[data-font="helvetica"] {
  --app-font: Helvetica, Arial, "Noto Sans", sans-serif;
}
body[data-font="helvetica-neue"] {
  --app-font: "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
}
body[data-font="fredoka"] {
  --app-font: Fredoka, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}
body[data-font="georgia"] {
  --app-font: Georgia, "Noto Serif", serif;
}
body[data-font="times-new-roman"] {
  --app-font: "Times New Roman", "Noto Serif", serif;
}
body[data-font="trebuchet"] {
  --app-font: "Trebuchet MS", Arial, sans-serif;
}
body[data-font="verdana"] {
  --app-font: Verdana, Geneva, sans-serif;
}
body[data-font="courier-new"] {
  --app-font: "Courier New", "Noto Sans Mono", monospace;
}
body[data-font="monospace"] {
  --app-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body[data-font="rounded"] {
  --app-font: "Arial Rounded MT Bold", Fredoka, "Trebuchet MS", sans-serif;
}
body[data-font="mincho"] {
  --app-font: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
}
body[data-font="gothic-japanese"] {
  --app-font: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
}

body {
  font-family: var(--app-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Keep symbols and multilingual text readable even when the selected font lacks glyphs. */
textarea,
select,
button,
input,
.translation-box,
.result-text,
.encyclopedia-body,
.word-token {
  font-family: var(--app-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif),
               "Noto Sans CJK JP", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;
}


/* Transwordi Pedia v16 additional font styles */
body[data-font="cartoon"] {
  --app-font: "Comic Sans MS", "Chalkboard SE", "Marker Felt",
              "Bradley Hand", cursive;
}

body[data-font="pixel"] {
  --app-font: "Press Start 2P", "Pixel Operator", "Fixedsys",
              "MS Gothic", "Courier New", monospace;
  letter-spacing: .02em;
}

body[data-font="comic"] {
  --app-font: "Comic Sans MS", "Chalkboard", "Segoe Print", cursive;
}

body[data-font="retro-terminal"] {
  --app-font: "VT323", "PxPlus IBM VGA8", "Lucida Console",
              "Courier New", monospace;
  letter-spacing: .03em;
}

body[data-font="typewriter"] {
  --app-font: "American Typewriter", "Courier Prime",
              "Courier New", monospace;
}

body[data-font="handwritten"] {
  --app-font: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

body[data-font="elegant"] {
  --app-font: "Baskerville", "Palatino Linotype",
              "Book Antiqua", Georgia, serif;
}

body[data-font="futuristic"] {
  --app-font: "Eurostile", "Microgramma", "Orbitron",
              "Trebuchet MS", sans-serif;
  letter-spacing: .04em;
}

/* Pixel and terminal styles get slightly sharper UI corners. */
body[data-font="pixel"] button,
body[data-font="pixel"] select,
body[data-font="pixel"] textarea,
body[data-font="pixel"] .translation-box,
body[data-font="retro-terminal"] button,
body[data-font="retro-terminal"] select,
body[data-font="retro-terminal"] textarea,
body[data-font="retro-terminal"] .translation-box {
  border-radius: 2px;
}

/* Cartoon and handwritten styles get softer UI corners. */
body[data-font="cartoon"] button,
body[data-font="cartoon"] select,
body[data-font="cartoon"] textarea,
body[data-font="cartoon"] .translation-box,
body[data-font="handwritten"] button,
body[data-font="handwritten"] select,
body[data-font="handwritten"] textarea,
body[data-font="handwritten"] .translation-box {
  border-radius: 18px;
}


/* Transwordi Pedia v17 themes */
body[data-theme="horror"] {
  --text: #f3e9e9;
  --cream: #f3e9e9;
  --muted: #b89292;
  --gold: #c94b4b;
  --panel: rgba(12, 4, 7, .97);
  --panel2: rgba(34, 5, 12, .96);
  --border: rgba(190, 45, 57, .24);
  background:
    radial-gradient(circle at 76% 18%, rgba(102, 0, 20, .34), transparent 28%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, #090507, #17060b 52%, #050304);
}
body[data-theme="horror"]::before {
  background:
    radial-gradient(circle at 18% 76%, rgba(120, 0, 18, .18), transparent 24%),
    repeating-linear-gradient(8deg, transparent 0 22px, rgba(255,255,255,.012) 23px 24px);
}
body[data-theme="horror"] .translate-button {
  color: #fff1f1;
  background: linear-gradient(135deg, #7d1227, #c34242);
  box-shadow: 0 8px 26px rgba(135, 12, 30, .35);
}
body[data-theme="horror"] .translation-box,
body[data-theme="horror"] textarea,
body[data-theme="horror"] .result-text {
  background: rgba(8, 2, 4, .96);
}

body[data-theme="legacy-background"] {
  --text: #081f49;
  --cream: #081f49;
  --muted: #315f9b;
  --gold: #0d3f87;
  --panel: rgba(245, 249, 255, .96);
  --panel2: rgba(224, 237, 255, .96);
  --border: rgba(13, 63, 135, .22);
  background:
    linear-gradient(180deg, #5288f4 0%, #5288f4 93%, #3e75de 94%, #245fc8 100%);
}
body[data-theme="legacy-background"]::before {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.025));
}
body[data-theme="legacy-background"] .topbar {
  background: rgba(238, 246, 255, .92);
}
body[data-theme="legacy-background"] .brand,
body[data-theme="legacy-background"] nav a,
body[data-theme="legacy-background"] .text-button {
  color: #0a2a61;
}
body[data-theme="legacy-background"] .translation-box,
body[data-theme="legacy-background"] textarea,
body[data-theme="legacy-background"] .result-text {
  color: #081f49;
  background: #f8fbff;
}
body[data-theme="legacy-background"] select {
  color: #081f49;
  background: #edf4ff;
  border-color: #8aaeea;
}
body[data-theme="legacy-background"] .translate-button {
  color: white;
  background: linear-gradient(135deg, #275ebd, #17468f);
}

body[data-theme="jade-stone"] {
  --text: #e9fff4;
  --cream: #e9fff4;
  --muted: #9bc7ae;
  --gold: #d7c27a;
  --panel: rgba(5, 31, 21, .96);
  --panel2: rgba(8, 50, 34, .95);
  --border: rgba(149, 213, 177, .2);
  background:
    repeating-linear-gradient(0deg, rgba(0, 45, 27, .6) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(90deg, rgba(0, 45, 27, .6) 0 2px, transparent 2px 84px),
    radial-gradient(circle at 20% 18%, rgba(112, 190, 145, .18), transparent 28%),
    radial-gradient(circle at 78% 66%, rgba(48, 120, 79, .23), transparent 30%),
    linear-gradient(135deg, #0d4a32, #163e30 52%, #092b20);
}
body[data-theme="jade-stone"]::before {
  background:
    repeating-linear-gradient(35deg, rgba(255,255,255,.018) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 45% 38%, rgba(255,255,255,.04), transparent 17%);
}
body[data-theme="jade-stone"] .translate-button {
  color: #0a2a1d;
  background: linear-gradient(135deg, #d7d18a, #8ec89e);
}
body[data-theme="jade-stone"] .translation-box,
body[data-theme="jade-stone"] textarea,
body[data-theme="jade-stone"] .result-text {
  background: linear-gradient(145deg, rgba(7, 40, 27, .98), rgba(13, 64, 44, .95));
  box-shadow: inset 0 0 0 1px rgba(167, 220, 188, .07);
}


/* Transwordi Pedia v18 additional fonts */
body[data-font="nib-pro"] {
  --app-font: "Nib Pro", "Baskerville", "Palatino Linotype",
              "Book Antiqua", Georgia, serif;
}

body[data-font="nib-pro-light"] {
  --app-font: "Nib Pro Light", "Nib Pro", "Iowan Old Style",
              "Palatino Linotype", Georgia, serif;
  font-weight: 300;
}

body[data-font="cyborg"] {
  --app-font: "Cyborg", "Eurostile Extended", "Bank Gothic",
              "Orbitron", "Trebuchet MS", sans-serif;
  letter-spacing: .055em;
}

body[data-font="sketch-3d"] {
  --app-font: "Arial Rounded MT Bold", "Trebuchet MS",
              "Comic Sans MS", sans-serif;
  letter-spacing: .035em;
}

/* Hand-drawn outlined 3D treatment inspired by the supplied reference. */
body[data-font="sketch-3d"] .brand,
body[data-font="sketch-3d"] h1,
body[data-font="sketch-3d"] h2,
body[data-font="sketch-3d"] h3,
body[data-font="sketch-3d"] .translate-button,
body[data-font="sketch-3d"] .secondary-button {
  font-weight: 900;
  -webkit-text-stroke: 1px currentColor;
  text-shadow:
    1px 1px 0 rgba(255,255,255,.28),
    2px 2px 0 rgba(0,0,0,.22),
    3px 3px 0 rgba(0,0,0,.18),
    4px 4px 0 rgba(0,0,0,.12);
}

body[data-font="sketch-3d"] .content-card,
body[data-font="sketch-3d"] .translator-shell,
body[data-font="sketch-3d"] .quick-settings {
  border-style: dashed;
}

body[data-font="cyborg"] button,
body[data-font="cyborg"] select,
body[data-font="cyborg"] textarea,
body[data-font="cyborg"] .translation-box {
  border-radius: 3px;
  text-transform: none;
}

body[data-font="nib-pro-light"] h1,
body[data-font="nib-pro-light"] h2,
body[data-font="nib-pro-light"] h3 {
  font-weight: 400;
}


/* Transwordi Pedia v19 speech controls */
.speech-style-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.speech-style-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.speech-style-panel select,
.speech-style-panel input[type="range"] {
  width: 100%;
}
.speech-action-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkbox-row {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.checkbox-row input {
  width: auto;
}
@media (max-width: 760px) {
  .speech-style-panel {
    grid-template-columns: 1fr;
  }
}


/* Transwordi Pedia v20 speech enhancements */
.speech-feature-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}


/* Transwordi Pedia v21 learning tools */
.learning-tools-card {
  display: block;
}
.learning-heading,
.learning-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.learning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.learning-panel {
  min-height: 280px;
  padding: 18px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.learning-panel h3 {
  margin: 0;
}
.confidence-badge {
  padding: 4px 8px;
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
}
.sentence-breakdown {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.breakdown-token {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 12px;
  padding: 11px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.breakdown-token strong {
  color: var(--gold);
  font-size: 17px;
}
.breakdown-token small {
  display: block;
  color: var(--muted);
}
.grammar-notes-panel {
  margin-top: 16px;
  line-height: 1.65;
}
.grammar-note-card {
  padding: 13px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.grammar-note-card + .grammar-note-card {
  margin-top: 10px;
}
.quiz-card {
  display: grid;
  gap: 12px;
  min-height: 160px;
  margin-top: 16px;
}
.quiz-question {
  font-size: 20px;
  font-weight: 700;
}
.quiz-options {
  display: grid;
  gap: 8px;
}
.quiz-option {
  width: 100%;
  text-align: left;
}
.quiz-option.correct {
  outline: 2px solid #68c98d;
}
.quiz-option.incorrect {
  outline: 2px solid #d86666;
}
.quiz-feedback {
  min-height: 24px;
  color: var(--muted);
}
.quiz-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 980px) {
  .learning-grid {
    grid-template-columns: 1fr;
  }
}


/* Transwordi Pedia v22 quiz filters */
.quiz-filter-label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.quiz-filter-label select {
  width: 100%;
}
.quiz-language-badge {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  color: var(--gold);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
}


/* Transwordi Pedia v23 quiz difficulty */
.quiz-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}
.quiz-difficulty-badge {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
}
.quiz-difficulty-badge.easy { color: #7fd59a; }
.quiz-difficulty-badge.medium { color: #e2bf63; }
.quiz-difficulty-badge.hard { color: #e67b7b; }
.quiz-hard-note {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}


/* Transwordi Pedia v25 voice and image input */
.multimodal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.multimodal-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.multimodal-button.listening {
  animation: microphonePulse 1s ease-in-out infinite;
  outline: 2px solid #e76868;
}
@keyframes microphonePulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
.input-feature-status {
  min-height: 18px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}
.speech-interim {
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.image-translator-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}
.image-translator-dialog {
  width: min(100%, 960px);
  max-height: 92vh;
  overflow: auto;
  padding: 22px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
}
.image-dialog-header,
.image-source-actions,
.image-text-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px;
}
.image-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px;
  margin-top: 18px;
}
.image-drop-zone {
  display: grid;
  place-items: center;
  min-height: 310px;
  overflow: hidden;
  background: rgba(255,255,255,.025);
  border: 2px dashed var(--border);
  border-radius: 18px;
  text-align: center;
}
.image-drop-zone.drag-over {
  background: rgba(255,255,255,.07);
  border-color: var(--gold);
}
.image-drop-zone img {
  width: 100%;
  max-height: 430px;
  object-fit: contain;
}
.large-symbol {
  font-size: 48px;
}
.image-metadata {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.image-text-panel {
  display: grid;
  align-content: start;
  gap: 9px;
}
.image-text-panel textarea {
  width: 100%;
  resize: vertical;
}
.feature-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
body.image-dialog-open {
  overflow: hidden;
}
@media (max-width: 800px) {
  .image-workspace {
    grid-template-columns: 1fr;
  }
}


/* v28: Pixel redesigned from the supplied bitmap reference */
body[data-font="pixel"] {
  --app-font: "Pixel Operator","PxPlus IBM VGA8","Fixedsys Excelsior",
              "Fixedsys","Perfect DOS VGA 437","MS Gothic",
              "Lucida Console","Courier New",monospace;
  letter-spacing:.015em;
  font-variant-ligatures:none;
  font-synthesis:none;
  -webkit-font-smoothing:none;
  text-rendering:geometricPrecision;
}
body[data-font="pixel"] input,
body[data-font="pixel"] textarea,
body[data-font="pixel"] select,
body[data-font="pixel"] button,
body[data-font="pixel"] .translation-box,
body[data-font="pixel"] .result-text {
  font-family:var(--app-font);
  letter-spacing:.015em;
}
body[data-font="pixel"] h1,
body[data-font="pixel"] h2,
body[data-font="pixel"] h3,
body[data-font="pixel"] .brand,
body[data-font="pixel"] .translate-button,
body[data-font="pixel"] .secondary-button {
  font-weight:700;
  letter-spacing:.025em;
  text-shadow:1px 0 0 currentColor,0 1px 0 currentColor;
}
body[data-font="pixel"] button,
body[data-font="pixel"] select,
body[data-font="pixel"] textarea,
body[data-font="pixel"] input,
body[data-font="pixel"] .translation-box,
body[data-font="pixel"] .content-card,
body[data-font="pixel"] .learning-panel,
body[data-font="pixel"] .speech-style-panel {
  border-radius:0!important;
}
body[data-font="pixel"] .translate-button,
body[data-font="pixel"] .secondary-button,
body[data-font="pixel"] .icon-button {
  box-shadow:3px 0 0 rgba(0,0,0,.28),0 3px 0 rgba(0,0,0,.28);
}

/* v28: Cyborg redesigned from the supplied wide sci-fi reference */
body[data-font="cyborg"] {
  --app-font:"Cyborg","Ethnocentric","Eurostile Extended",
             "Microgramma D Extended","Bank Gothic","Orbitron",
             "Arial Black",sans-serif;
  letter-spacing:.065em;
  font-stretch:expanded;
  font-variant-ligatures:none;
  text-rendering:geometricPrecision;
}
body[data-font="cyborg"] input,
body[data-font="cyborg"] textarea,
body[data-font="cyborg"] select,
body[data-font="cyborg"] button,
body[data-font="cyborg"] .translation-box,
body[data-font="cyborg"] .result-text {
  font-family:var(--app-font);
}
body[data-font="cyborg"] h1,
body[data-font="cyborg"] h2,
body[data-font="cyborg"] h3,
body[data-font="cyborg"] .brand,
body[data-font="cyborg"] .translate-button,
body[data-font="cyborg"] .secondary-button,
body[data-font="cyborg"] .eyebrow {
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transform:scaleX(1.06);
  transform-origin:left center;
}
body[data-font="cyborg"] button,
body[data-font="cyborg"] select,
body[data-font="cyborg"] textarea,
body[data-font="cyborg"] input,
body[data-font="cyborg"] .translation-box,
body[data-font="cyborg"] .content-card,
body[data-font="cyborg"] .learning-panel,
body[data-font="cyborg"] .speech-style-panel {
  border-radius:3px!important;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,
    100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,
    0 calc(100% - 7px),0 7px);
}
body[data-font="cyborg"] .brand-icon { transform:skewX(-7deg); }

/* Native-script readability */
body[data-font="pixel"] :lang(ja),
body[data-font="pixel"] :lang(zh),
body[data-font="pixel"] :lang(ko),
body[data-font="cyborg"] :lang(ja),
body[data-font="cyborg"] :lang(zh),
body[data-font="cyborg"] :lang(ko) {
  font-family:"MS Gothic","Noto Sans CJK JP",sans-serif;
  transform:none;
  letter-spacing:normal;
}
body[data-font="pixel"] :lang(ar),
body[data-font="cyborg"] :lang(ar) {
  font-family:"Noto Sans Arabic",Arial,sans-serif;
  transform:none;
  letter-spacing:normal;
}
body[data-font="pixel"] :lang(hi),
body[data-font="cyborg"] :lang(hi) {
  font-family:"Noto Sans Devanagari",Arial,sans-serif;
  transform:none;
  letter-spacing:normal;
}

.study-hub-card{display:block}.study-hub-heading,.study-tool-title{display:flex;align-items:center;justify-content:space-between;gap:14px}.study-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.study-tool-panel{min-height:360px;padding:18px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:18px}.study-tool-panel h3{margin:0}.collection-create-row,.collection-save-row,.compare-input-row,.mistake-review-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.collection-create-row input,.collection-save-row input,.compare-input-row input{flex:1 1 140px}.saved-words-list,.language-comparison-results,.mistake-review-card{display:grid;gap:9px;margin-top:14px}.saved-word-card,.language-comparison-card,.mistake-item-card{padding:12px;background:rgba(255,255,255,.028);border:1px solid var(--border);border-radius:12px}.saved-word-card,.language-comparison-card{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.saved-word-card small,.language-comparison-card small,.mistake-item-card small{display:block;color:var(--muted)}.compare-language-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.compare-language-option{display:flex;align-items:center;gap:7px;font-size:12px}.compare-language-option input{width:auto}.mistake-word{font-size:20px;font-weight:700;color:var(--gold)}@media(max-width:1050px){.study-hub-grid{grid-template-columns:1fr}}

.vocabulary-library-card{display:block}.vocabulary-library-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.vocabulary-library-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.vocabulary-library-controls label{display:grid;gap:6px;color:var(--muted);font-size:12px}.vocabulary-library-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;max-height:560px;overflow:auto;padding-right:4px}.vocabulary-library-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:12px}.vocabulary-library-item b{color:var(--gold)}.vocabulary-library-item small{display:block;color:var(--muted)}.vocabulary-library-actions{display:flex;gap:5px}@media(max-width:900px){.vocabulary-library-controls,.vocabulary-library-results{grid-template-columns:1fr}}


body[data-theme="ocean-floor"]{
  --text:#f5fdff;--cream:#f5fdff;--muted:#b9e8f5;--gold:#f7e7b0;
  --panel:rgba(4,40,71,.84);--panel2:rgba(5,74,104,.78);
  --border:rgba(192,242,255,.25);
  background:
    linear-gradient(rgba(2,34,74,.28),rgba(1,52,89,.42)),
    url("assets/ocean-floor-background.png") center/cover fixed no-repeat;
}
body[data-theme="ocean-floor"]::before{
  background:
    radial-gradient(circle at 50% 4%,rgba(255,255,255,.16),transparent 24%),
    linear-gradient(180deg,rgba(44,211,255,.08),rgba(0,39,73,.28));
}
body[data-theme="ocean-floor"] .topbar{background:rgba(1,43,76,.78);backdrop-filter:blur(14px)}
body[data-theme="ocean-floor"] .content-card,
body[data-theme="ocean-floor"] .study-tool-panel,
body[data-theme="ocean-floor"] .learning-panel,
body[data-theme="ocean-floor"] .speech-style-panel,
body[data-theme="ocean-floor"] .translation-box,
body[data-theme="ocean-floor"] textarea,
body[data-theme="ocean-floor"] .result-text{
  background:linear-gradient(145deg,rgba(2,46,82,.88),rgba(8,89,116,.76));
}
body[data-theme="ocean-floor"] .translate-button{
  color:#073450;background:linear-gradient(135deg,#baf5ff,#6ed8ec 55%,#e8dca4);
}

body[data-theme="lantern-forest"]{
  --text:#efffff;--cream:#efffff;--muted:#a9d4cf;--gold:#ffd66e;
  --panel:rgba(1,31,35,.87);--panel2:rgba(5,52,55,.82);
  --border:rgba(255,214,110,.22);
  background:
    linear-gradient(rgba(0,26,34,.28),rgba(0,33,36,.46)),
    url("assets/lantern-forest-background.png") center/cover fixed no-repeat;
}
body[data-theme="lantern-forest"]::before{
  background:
    radial-gradient(circle at 13% 60%,rgba(255,191,61,.09),transparent 18%),
    radial-gradient(circle at 80% 67%,rgba(255,204,81,.08),transparent 20%),
    linear-gradient(180deg,rgba(0,161,184,.06),rgba(0,26,31,.32));
}
body[data-theme="lantern-forest"] .topbar{background:rgba(0,29,34,.8);backdrop-filter:blur(14px)}
body[data-theme="lantern-forest"] .content-card,
body[data-theme="lantern-forest"] .study-tool-panel,
body[data-theme="lantern-forest"] .learning-panel,
body[data-theme="lantern-forest"] .speech-style-panel,
body[data-theme="lantern-forest"] .translation-box,
body[data-theme="lantern-forest"] textarea,
body[data-theme="lantern-forest"] .result-text{
  background:linear-gradient(145deg,rgba(0,29,33,.91),rgba(5,59,59,.79));
}
body[data-theme="lantern-forest"] .translate-button{
  color:#20300d;background:linear-gradient(135deg,#ffe69a,#f5b63e 60%,#d88f20);
}

.advanced-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.advanced-tool-panel{padding:16px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:16px}.advanced-tool-panel input,.advanced-tool-panel textarea,.advanced-tool-panel select{width:100%;margin:5px 0}.tool-list{display:grid;gap:8px;margin-top:10px}.tool-list-item{padding:10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025)}.tool-list-item small{display:block;color:var(--muted)}.statistics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{padding:10px;text-align:center;border:1px solid var(--border);border-radius:10px}.stat-card b{display:block;font-size:22px;color:var(--gold)}.permission-overlay{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);padding:20px}.permission-dialog{max-width:460px;padding:24px;text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:20px}.permission-dialog button{margin:6px}@media(max-width:1000px){.advanced-tools-grid{grid-template-columns:1fr}}

.internet-search-control{min-width:220px}
.internet-search-control small{display:block;max-width:245px;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.35}
.internet-search-notice{display:flex;align-items:flex-start;gap:12px;margin:0 18px 18px;padding:14px 16px;border:1px solid rgba(96,165,250,.42);border-radius:14px;background:rgba(30,64,175,.16);color:var(--text)}
.internet-search-notice.hidden{display:none}
.internet-search-notice strong,.internet-search-notice small{display:block}
.internet-search-notice small{margin-top:3px;color:var(--muted);line-height:1.4}
.internet-notice-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:rgba(96,165,250,.18);font-size:18px;animation:internet-spin 1s linear infinite}
.internet-search-notice.is-success{border-color:rgba(34,197,94,.5);background:rgba(22,101,52,.17)}
.internet-search-notice.is-success .internet-notice-icon{animation:none}
.internet-search-notice.is-error{border-color:rgba(248,113,113,.72);background:rgba(127,29,29,.24);color:#fecaca}
.internet-search-notice.is-error .internet-notice-icon{animation:none;background:rgba(239,68,68,.22)}
.online-result-badge{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 9px;border:1px solid rgba(96,165,250,.42);border-radius:999px;background:rgba(30,64,175,.15);color:var(--text);font-size:11px;font-weight:700}
@keyframes internet-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.internet-search-control,.internet-demo-control{width:100%}}