@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Light theme (default) — creamy throughout, dark text */
  --ink: #EDE1C4;
  --ink-2: #F6EFDC;
  --ink-3: #E3D5B2;
  --paper: #F1E7D0;
  --paper-line: #D9C9A3;
  --amber: #C9992E;
  --amber-2: #A97A1E;
  --cream: #2B2418;
  --ink-text: #2B2418;
  --muted: #8a7a5c;
  --muted-dark: #6b655c;
  --card-bg: #fffdf6;
  --card-bg-alt: #f6efdc;
  --card-border: var(--paper-line);
  --placeholder: #b9ab86;
  --on-amber: #2B2418;
}
html.theme-dark{
  --ink: #211D26;
  --ink-2: #2A2530;
  --ink-3: #332C3B;
  --paper: #1C1820;
  --paper-line: #4a4353;
  --amber-2: #E0B24E;
  --cream: #EDE3CB;
  --ink-text: #EDE3CB;
  --muted: #9A9184;
  --muted-dark: #b8ab8f;
  --card-bg: #241f2a;
  --card-bg-alt: #2c2633;
  --card-border: #4a4353;
  --placeholder: #6b6272;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; background:var(--ink); color:var(--cream); font-family:'Inter',sans-serif; }
::selection{ background:var(--amber); color:var(--on-amber); }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
a{ color:var(--amber-2); }
img{ max-width:100%; }

/* ---------- Layout shell ---------- */
.site-header{ background:var(--ink-2); border-bottom:1px solid var(--ink-3); padding:14px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:sticky; top:0; z-index:50; }
.site-logo{ font-family:'Fraunces',serif; font-weight:700; font-size:21px; color:var(--cream); text-decoration:none; letter-spacing:-0.01em; }
.site-logo span{ color:var(--amber-2); }
.site-nav{ display:flex; gap:4px; margin-left:8px; flex-wrap:wrap; }
.site-nav a{ font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:6px; transition:color .15s ease, background .15s ease; }
.site-nav a:hover, .site-nav a.active{ color:var(--cream); background:var(--ink-3); }
.theme-toggle-btn{ margin-left:auto; background:var(--ink-3); border:1px solid var(--card-border); color:var(--cream); width:38px; height:38px; border-radius:8px; font-size:16px; display:flex; align-items:center; justify-content:center; flex:none; }
.theme-toggle-btn:hover{ border-color:var(--amber); }

.site-main{ max-width:1180px; margin:0 auto; padding:32px 24px 60px; }
.page-main{ max-width:760px; margin:0 auto; padding:48px 24px 60px; }
.page-title{ font-family:'Fraunces',serif; font-size:34px; font-weight:700; margin:0 0 6px; color:var(--cream); }
.page-sub{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--muted); margin-bottom:28px; }
.page-main h2{ font-family:'Fraunces',serif; font-size:21px; font-weight:600; margin:30px 0 10px; color:var(--cream); }
.page-main p, .page-main li{ font-size:14.5px; line-height:1.7; color:var(--ink-text); }
.page-main ul{ padding-left:20px; }
.page-main a{ text-decoration:underline; }

.site-footer{ border-top:1px solid var(--ink-3); background:var(--ink-2); padding:28px 24px 32px; margin-top:40px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start; }
.footer-credits{ font-family:'Space Mono',monospace; font-size:11px; line-height:1.8; color:var(--muted); max-width:520px; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--muted); text-decoration:none; }
.footer-terms{ max-width:1180px; margin:18px auto 0; padding-top:18px; border-top:1px solid var(--ink-3); font-family:'Space Mono',monospace; font-size:10.5px; line-height:1.7; color:var(--muted); }
.footer-terms strong{ color:var(--ink-text); }
.footer-terms a{ color:var(--muted); }
.footer-links a:hover{ color:var(--amber-2); }

/* ---------- Hero ---------- */
.hero{ text-align:center; padding:20px 0 34px; }
.hero-title{ font-family:'Fraunces',serif; font-weight:700; font-size:40px; margin:0 0 10px; color:var(--cream); }
.hero-title span{ color:var(--amber-2); }
.hero-sub{ font-family:'Space Mono',monospace; font-size:13px; color:var(--muted); max-width:520px; margin:0 auto; line-height:1.7; }

/* ---------- Tool grid ---------- */
.tool-grid{ display:grid; grid-template-columns:1fr; gap:22px; align-items:start; }
.tool-card{ background:var(--paper); color:var(--ink-text); border-radius:14px; padding:22px 22px 24px; box-shadow:0 3px 0 rgba(0,0,0,0.18); }
.tool-card-hidden{ display:none; }
.tool-card-heading{ font-family:'Fraunces',serif; font-weight:700; font-size:20px; margin:0 0 4px; color:var(--ink-text); }
.tool-card-hint{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--muted); margin-bottom:14px; }
.tool-loading{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--muted); padding:8px 0; }

/* ---------- Ad slots ---------- */
.ad-slot{ display:flex; align-items:center; justify-content:center; background:var(--ink-2); border:1px dashed var(--card-border); border-radius:10px; color:var(--muted); font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin:22px auto; overflow:hidden; }
.ad-slot-leaderboard{ max-width:970px; min-height:90px; }
.ad-slot-rectangle{ max-width:336px; min-height:280px; }
.ad-slot-banner{ max-width:1180px; min-height:90px; }
.ad-slot-inline{ min-height:100px; }

/* ---------- Buttons (from Song Factory) ---------- */
.btn{ border:1px solid var(--ink-3); background:var(--ink-3); color:var(--cream); padding:9px 13px; border-radius:6px; font-size:12.5px; font-weight:600; transition:all .15s ease; white-space:nowrap; }
.btn:hover{ border-color:var(--amber); color:var(--amber-2); }
.btn-primary{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); }
.btn-primary:hover{ background:var(--amber-2); color:var(--on-amber); }
.btn-secondary-accent{ background:transparent; border:1px solid var(--amber-2); color:var(--amber-2); }
.btn-secondary-accent:hover{ background:rgba(201,153,46,0.12); }
.btn:disabled{ opacity:.4; cursor:default; }

/* ---------- Rhyme / thesaurus generator (from Song Factory, ported) ---------- */
.sentence-gen-heading{ font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--amber); margin-bottom:8px; }
.sentence-gen-empty{ color:var(--muted); font-family:'Space Mono',monospace; font-size:12px; }
.rhyme-gen-input-row{ display:flex; gap:6px; margin-bottom:14px; }
.rhyme-gen-clear-btn{ flex:none; padding:8px 11px; font-size:14px; }
.rhyme-gen-input-row input{ flex:1; min-width:0; background:var(--card-bg); border:1px solid var(--card-border); color:var(--ink-text); border-radius:6px; padding:10px 12px; font-size:14px; font-family:'Space Mono',monospace; }
.rhyme-gen-input-row input:focus{ outline:none; border-color:var(--amber); }
.rhyme-gen-empty{ margin-bottom:0; }
.rhyme-gen-group{ margin-bottom:12px; }
.rhyme-gen-label{ font-family:'Space Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.rhyme-gen-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.rhyme-chip{ background:var(--card-bg); border:1px solid var(--card-border); color:var(--ink-text); border-radius:5px; padding:5px 10px; font-family:'Space Mono',monospace; font-size:12.5px; }
.rhyme-chip:hover{ border-color:var(--amber); color:var(--amber-2); }
.rhyme-chip.near{ border-style:dashed; color:var(--muted); }
.rhyme-chip.near:hover{ border-color:var(--amber); color:var(--amber-2); }
.rhyme-chip.lyric{ border-color:var(--amber); color:var(--amber-2); display:inline-flex; align-items:center; gap:5px; }
.rhyme-chip.lyric:hover{ background:var(--amber); color:var(--on-amber); }
.rhyme-chip-tag{ font-size:8.5px; text-transform:uppercase; letter-spacing:.04em; opacity:.65; }
.rhyme-chip.slant{ border-style:dashed; color:var(--amber-2); }
.rhyme-chip.assonance{ border-style:dotted; color:var(--muted); }
.rhyme-chip.consonance{ border-style:dotted; color:var(--amber-2); }
.rhyme-chip.loose{ border-style:dotted; opacity:.7; }
.rhyme-chip.added{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); }
.rhyme-chip.added:hover{ background:var(--amber); color:var(--on-amber); }
.rhyme-gen-count{ opacity:.6; font-weight:normal; text-transform:none; letter-spacing:normal; }
.rhyme-gen-more{ background:none; border:none; font-family:'Space Mono',monospace; font-size:10.5px; color:var(--muted); align-self:center; padding-left:2px; text-decoration:underline; }

/* ---------- Modals (rhyme "+N more" and word-info popover) ---------- */
.rhyme-modal-overlay, .word-info-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:210; align-items:center; justify-content:center; padding:20px; }
.word-info-overlay{ z-index:230; }
.rhyme-modal{ position:relative; background:var(--ink-2); border:1px solid var(--ink-3); border-radius:12px; padding:28px 26px; max-width:640px; width:100%; max-height:85vh; overflow-y:auto; color:var(--cream); }
.record-close{ position:absolute; top:10px; right:14px; background:none; border:none; color:var(--muted); font-size:20px; }
.record-close:hover{ color:var(--amber-2); }
.structure-modal-title{ font-family:'Fraunces',serif; font-size:21px; font-weight:600; margin-bottom:6px; }
.rhyme-modal-sticky-title{ position:sticky; top:0; z-index:5; background:var(--ink-2); padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--ink-3); }
.rhyme-modal-hint{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--muted); margin-bottom:14px; }
.rhyme-modal-tier{ margin-bottom:4px; border-bottom:1px solid var(--ink-3); }
.rhyme-modal-tier-header{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; color:var(--cream); font-family:'Space Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; padding:12px 4px; cursor:pointer; }
.rhyme-modal-tier-header:hover{ color:var(--amber-2); }
.rhyme-modal-tier-caret{ display:inline-block; transition:transform .15s ease; color:var(--muted); }
.rhyme-modal-tier-caret.expanded{ transform:rotate(90deg); }
.rhyme-modal-tier-count{ color:var(--muted); text-transform:none; letter-spacing:normal; font-weight:normal; }
.rhyme-modal-tier-body{ display:none; padding:0 4px 14px; }
.rhyme-modal-tier-body.open{ display:block; }
.rhyme-toast{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(12px); background:var(--ink-2); border:1px solid var(--amber-2); color:var(--cream); font-family:'Space Mono',monospace; font-size:12.5px; padding:10px 18px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.35); z-index:400; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.rhyme-toast.visible{ opacity:1; transform:translateX(-50%) translateY(0); }

.word-info-def-pos{ font-family:'Space Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-2); margin-right:7px; }
.word-info-pos-group{ margin-bottom:14px; }
.word-info-def-pos-header{ font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber-2); font-weight:700; margin-bottom:6px; }
.word-info-def-item{ font-size:13.5px; line-height:1.55; color:var(--cream); margin:0 0 5px; }
.word-info-empty{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.word-info-thesaurus-toggle{ margin:4px 0 12px; }
.word-info-thesaurus-body{ display:none; margin-bottom:14px; }
.word-info-thesaurus-body.open{ display:block; }
.word-info-group-label{ font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:10px 0 6px; }
.word-info-actions{ display:flex; gap:10px; align-items:center; padding-top:12px; border-top:1px solid var(--ink-3); }
.word-info-actions .btn.added{ border-color:var(--amber); color:var(--amber-2); }

/* ---------- Workspace (lyrics pad + saved words) ---------- */
.workspace{ margin-top:48px; }
.workspace-heading{ font-family:'Fraunces',serif; font-weight:700; font-size:24px; margin:0 0 18px; color:var(--cream); }
.workspace-grid{ display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
@media (max-width:760px){ .workspace-grid{ grid-template-columns:1fr; } }
.workspace-panel{ background:var(--paper); color:var(--ink-text); border-radius:12px; padding:18px 18px 20px; }
.workspace-panel-heading{ font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:10px; }
.saved-words-list{ display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; margin-bottom:12px; }
.saved-word-row{ display:flex; align-items:center; gap:8px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px; padding:7px 10px; font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink-text); }
.saved-word-row button{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:14px; padding:0 3px; flex:none; }
.saved-word-row button:hover{ color:#A34A3D; }
.saved-words-empty{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--muted); padding:6px 0 12px; }
.lyrics-textarea{ display:block; width:100%; min-height:320px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:14px 16px; color:var(--ink-text); font-family:'Space Mono',monospace; font-size:13.5px; line-height:1.7; resize:vertical; }
.lyrics-textarea:focus{ outline:none; border-color:var(--amber-2); }
.workspace-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.workspace-file-input{ display:none; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:500; background:var(--ink-2); border-top:1px solid var(--ink-3); padding:16px 24px; display:none; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:0 -4px 18px rgba(0,0,0,0.25); }
.cookie-banner.visible{ display:flex; }
.cookie-banner-text{ flex:1; min-width:240px; font-size:13px; line-height:1.55; color:var(--ink-text); }
.cookie-banner-text a{ text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:8px; flex:none; }