/**
 * styles.css
 * ------------------------------------------------------------
 * All visual styling for Rockstick, grouped by page section so
 * it lines up with the sections in index.html and content.js.
 * ------------------------------------------------------------
 */

:root{
  --paper: #FAF9F5;
  --paper-2: #F1EFE8;
  --card: #FFFFFF;
  --bg: #F1EFE8;
  --placeholder: #B5B2A8;
  --ink: #1B1B1D;
  --ink-soft: #55534C;
  --rule: #D8D4C8;
  --pencil-blue: #2E4B8F;
  --pencil-blue-soft: #E7ECF8;
  --pencil-red: #B3432B;
  --pencil-red-soft: #F7E9E4;
  --gold: #A9822F;
  --accent: #2E4B8F;
  --accent-soft: #E7ECF8;
}

/* ================= DARK MODE ================= */
[data-theme="dark"]{
  --paper: #17181A;
  --paper-2: #1F2123;
  --card: #232527;
  --placeholder: #5C5D5E;
  --ink: #ECEBE6;
  --ink-soft: #9B9A93;
  --rule: #38393C;
  --pencil-blue: #8FB2ED;
  --pencil-blue-soft: #223047;
  --pencil-red: #E08165;
  --pencil-red-soft: #3A241E;
  --gold: #D2AE63;
  --accent: #8FB2ED;
  --accent-soft: #223047;
}

/* ================= OCEAN THEME (blue, cyan, orange) ================= */
[data-theme="ocean"]{
  --paper: #0B1929;
  --paper-2: #102A42;
  --card: #143352;
  --placeholder: #5A8BA8;
  --ink: #E8F4FC;
  --ink-soft: #8ECAE6;
  --rule: #1E4D6B;
  --pencil-blue: #48CAE4;
  --pencil-blue-soft: #1A3A52;
  --pencil-red: #FB8500;
  --pencil-red-soft: #3D2810;
  --gold: #FFB703;
  --accent: #48CAE4;
  --accent-soft: #1A3A52;
}

/* ================= SOLAR THEME (black, white, yellow — easy on eyes) ================= */
[data-theme="solar"]{
  --paper: #1A1A1A;
  --paper-2: #242424;
  --card: #2A2A2A;
  --placeholder: #888880;
  --ink: #F5F5DC;
  --ink-soft: #C4C4A8;
  --rule: #404040;
  --pencil-blue: #FFD54F;
  --pencil-blue-soft: #3D3520;
  --pencil-red: #FFAB40;
  --pencil-red-soft: #3D2A15;
  --gold: #FFEB3B;
  --accent: #FFD54F;
  --accent-soft: #3D3520;
}

[data-theme="forest"]{
  --paper: #1A2E1A;
  --paper-2: #243824;
  --card: #2A422A;
  --placeholder: #6B8F6B;
  --ink: #E8F5E8;
  --ink-soft: #A8C4A8;
  --rule: #3D5C3D;
  --pencil-blue: #81C784;
  --pencil-blue-soft: #1E3A1E;
  --pencil-red: #FF8A65;
  --pencil-red-soft: #3A241E;
  --gold: #A5D6A7;
  --accent: #81C784;
  --accent-soft: #1E3A1E;
}

[data-theme="rose"]{
  --paper: #2A1A1F;
  --paper-2: #352428;
  --card: #402A32;
  --placeholder: #9A7A82;
  --ink: #FFF0F3;
  --ink-soft: #D4A8B0;
  --rule: #5C3D45;
  --pencil-blue: #FF8A80;
  --pencil-blue-soft: #3A2028;
  --pencil-red: #FF7043;
  --pencil-red-soft: #3A2418;
  --gold: #FFAB91;
  --accent: #FF8A80;
  --accent-soft: #3A2028;
}

[data-theme="midnight"]{
  --paper: #12101F;
  --paper-2: #1A1729;
  --card: #221E35;
  --placeholder: #7A7590;
  --ink: #EDE9FE;
  --ink-soft: #A89FC4;
  --rule: #3D3655;
  --pencil-blue: #A78BFA;
  --pencil-blue-soft: #2A2040;
  --pencil-red: #F472B6;
  --pencil-red-soft: #3A2030;
  --gold: #C4B5FD;
  --accent: #A78BFA;
  --accent-soft: #2A2040;
}

[data-theme="sepia"]{
  --paper: #2C2419;
  --paper-2: #3A3024;
  --card: #453828;
  --placeholder: #9A8870;
  --ink: #F5EDE0;
  --ink-soft: #C4B098;
  --rule: #5C4D38;
  --pencil-blue: #D4A574;
  --pencil-blue-soft: #3A3020;
  --pencil-red: #E09868;
  --pencil-red-soft: #3A2818;
  --gold: #E8C49A;
  --accent: #D4A574;
  --accent-soft: #3A3020;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s ease, color .15s ease;
}
.wrap{
  width:80%;
  max-width:1200px;
  margin:0 auto;
  padding:28px 24px 52px;
}

/* ================= LAYOUT: DESKTOP (centered, comfortable width) ================= */
[data-layout="desktop"] .wrap{
  width:80%;
  max-width:1200px;
  margin:0 auto;
  padding:28px 24px 52px;
}
[data-layout="desktop"] main{
  grid-template-columns:1.35fr 1fr;
  gap:28px;
}
[data-layout="desktop"] .manuscript-panel textarea{
  min-height:400px;
  resize:vertical;
}
[data-layout="desktop"] header .tagline{
  display:block;
}

/* ================= LAYOUT: MOBILE FIT ================= */
[data-layout="mobile"] body{
  overflow-x:hidden;
}
[data-layout="mobile"] .wrap{
  width:100%;
  max-width:100%;
  padding:12px 14px 24px;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}
[data-layout="mobile"] header{
  flex-direction:column;
  align-items:flex-start;
  padding-bottom:12px;
  margin-bottom:4px;
}
[data-layout="mobile"] h1{
  font-size:clamp(26px, 7vw, 34px);
}
[data-layout="mobile"] .tagline{
  display:block;
  text-align:left;
  max-width:100%;
  font-size:14px;
}
[data-layout="mobile"] .controls-strip{
  flex-wrap:wrap;
  gap:8px;
  padding:8px 0;
}
[data-layout="mobile"] .controls-group{
  flex:1 1 calc(50% - 4px);
  min-width:120px;
}
[data-layout="mobile"] .control-select{
  width:100%;
  font-size:12px;
}
[data-layout="mobile"] .gauge-row{
  grid-template-columns:repeat(2, 1fr);
}
[data-layout="mobile"] main{
  grid-template-columns:1fr;
  gap:16px;
  margin-top:20px;
}
[data-layout="mobile"] .manuscript-panel textarea{
  min-height:220px;
  font-size:16px;
  padding:14px;
  -webkit-text-size-adjust:100%;
}
[data-layout="mobile"] .side{
  gap:16px;
}
[data-layout="mobile"] .panel-head{
  padding:10px 12px;
}
[data-layout="mobile"] .field-row{
  padding:12px;
}
[data-layout="mobile"] .tray{
  grid-template-columns:repeat(4, 1fr);
}
[data-layout="mobile"] .ad-slot-wrap{
  margin:12px 0;
}
[data-layout="mobile"] footer{
  flex-direction:column;
  font-size:10px;
}

/* ================= HEADER ================= */
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid var(--ink);
  padding-bottom:18px;
  margin-bottom:8px;
  gap:24px;
  flex-wrap:wrap;
}
.header-main{ flex:1; min-width:0; }
.site-logo{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
  text-decoration:none;
  color:var(--ink-soft);
  transition:opacity .15s ease;
}
.site-logo:hover{ opacity:0.85; }
.site-logo:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
.site-logo-mark{
  display:block;
  width:56px;
  height:50px;
  flex-shrink:0;
}
.site-logo-text .brand{
  margin:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--ink-soft);
}
.site-logo-text .brand b{
  color:var(--ink);
  font-weight:600;
}
.site-logo-text .brand span{
  color:var(--ink-soft);
}
[data-layout="mobile"] .site-logo-mark{ width:48px; height:43px; }
[data-layout="mobile"] .site-logo{ gap:11px; margin-bottom:8px; }
[data-layout="mobile"] .site-logo-text .brand{ font-size:9px; }
.brand b{color:var(--ink);}
h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(26px, 3.8vw, 38px);
  line-height:1.08;
  margin:6px 0 0;
  letter-spacing:-0.01em;
  color:var(--ink);
}
h1 em{ font-style:italic; color:var(--accent); }
.tagline{
  font-family:'Source Serif 4', serif;
  font-size:16px;
  color:var(--ink-soft);
  max-width:320px;
  text-align:right;
  padding-bottom:6px;
}

/* ============= CONTROLS STRIP (theme, layout, font) ============= */
.controls-strip{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px 16px;
  padding:10px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}
.controls-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.control-label{
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.control-select{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  padding:6px 10px;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  outline:none;
  min-width:140px;
}
.control-select:focus{ border-color:var(--accent); }
.layout-auto-badge .layout-detect{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  padding:6px 10px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  color:var(--ink-soft);
  display:inline-block;
  min-width:140px;
}
.controls-strip .visitor-count-group{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  padding-bottom:4px;
}
.controls-strip .count{
  color:var(--accent);
  font-weight:600;
}

/* Legacy theme toggle (kept for reference, unused) */
.theme-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--ink-soft);
  color:var(--ink-soft);
  padding:5px 10px;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.theme-toggle:hover{ border-color:var(--ink); color:var(--ink); }

/* ============= VISITOR COUNTER STRIP ============= */
.visitor-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px 0 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}
.visitor-strip .visitor-count-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.visitor-strip .count{
  color:var(--accent);
  font-weight:600;
}

/* ================= AD SLOTS ================= */
.ad-slot-wrap{
  margin:18px 0;
  border:1px dashed var(--rule);
  background:var(--paper-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ad-slot-wrap iframe{ display:block; border:none; width:100%; }
.ad-slot-wrap .adsbygoogle{ min-height:90px; }
.ad-slot--header .adsbygoogle{ min-height:90px; }
.ad-slot--footer .adsbygoogle{ min-height:90px; }
.ad-slot--sidebar .adsbygoogle{ min-height:250px; }
.ad-placeholder{
  width:100%;
  min-height:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.ad-placeholder small{
  font-size:9px;
  opacity:0.75;
  text-transform:none;
  letter-spacing:0.02em;
}
.ad-slot--header .ad-placeholder,
.ad-slot--header{ min-height:90px; }
.ad-slot--footer .ad-placeholder,
.ad-slot--footer{ min-height:90px; }
.ad-slot--sidebar .ad-placeholder,
.ad-slot--sidebar{ min-height:250px; }

/* ================= GAUGE STRIP (signature element) ================= */
.gauge{
  margin-top:22px;
  border:1px solid var(--ink);
  background:var(--paper-2);
  overflow:hidden;
}
.gauge-row{ display:grid; grid-template-columns:repeat(6, 1fr); }
@media (max-width:900px){
  .gauge-row{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:700px){
  .gauge-row{ grid-template-columns:repeat(2, 1fr); }
  .gauge-cell:nth-child(2n){ border-right:none; }
}
.gauge-cell{
  padding:16px 16px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid transparent;
  position:relative;
}
.gauge-cell:last-child{border-right:none;}
.gauge-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.gauge-num{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:32px;
  line-height:1.1;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.gauge-idx{ font-family:'IBM Plex Mono', monospace; }

/* ================= MAIN GRID ================= */
main{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:28px;
  margin-top:34px;
}
@media (max-width:800px){
  main{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .tagline{text-align:left;max-width:100%;}
}

.panel{ border:1px solid var(--rule); background:var(--card); }
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
}
.panel-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.panel-title b{color:var(--ink);}

/* ---- Manuscript panel (main textarea) ---- */
.theme-toggle:hover{ border-color:var(--ink); color:var(--ink); }

/* ---- Manuscript textarea + font variants ---- */
textarea{
  width:100%;
  min-height:360px;
  border:none;
  outline:none;
  resize:vertical;
  padding:20px;
  font-family:'Source Serif 4', serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
}
textarea::placeholder{color:var(--placeholder);}

[data-font="source-serif"] textarea{ font-family:'Source Serif 4', serif; }
[data-font="inter"] textarea{ font-family:'Inter', sans-serif; }
[data-font="lora"] textarea{ font-family:'Lora', serif; }
[data-font="merriweather"] textarea{ font-family:'Merriweather', serif; }
[data-font="open-sans"] textarea{ font-family:'Open Sans', sans-serif; }
[data-font="fraunces"] textarea{ font-family:'Fraunces', serif; }
[data-font="ibm-plex-mono"] textarea{ font-family:'IBM Plex Mono', monospace; font-size:15px; }
[data-font="roboto-mono"] textarea{ font-family:'Roboto Mono', monospace; font-size:15px; }
[data-font="playfair"] textarea{ font-family:'Playfair Display', serif; }
[data-font="pt-serif"] textarea{ font-family:'PT Serif', serif; }
[data-font="nunito"] textarea{ font-family:'Nunito', sans-serif; }
[data-font="raleway"] textarea{ font-family:'Raleway', sans-serif; }
[data-font="courier"] textarea{ font-family:'Courier Prime', monospace; font-size:15px; }
[data-font="jetbrains"] textarea{ font-family:'JetBrains Mono', monospace; font-size:15px; }
[data-font="crimson"] textarea{ font-family:'Crimson Pro', serif; }
[data-font="libre"] textarea{ font-family:'Libre Baskerville', serif; }
[data-font="georgia"] textarea{ font-family:Georgia, 'Times New Roman', serif; }
[data-font="times"] textarea{ font-family:'Times New Roman', Times, serif; }

.clear-btn:hover{ border-color:var(--pencil-red); color:var(--pencil-red); }
.print-btn:hover{ border-color:var(--accent); color:var(--accent); }
.export-btn:hover{ border-color:var(--accent); color:var(--accent); }

.panel-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---- Random text generator panel ---- */
.generator-fields{ display:flex; flex-direction:column; gap:12px; }
.generator-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:480px){
  .generator-grid{ grid-template-columns:1fr; }
}
.generator-field label{
  display:block;
  margin-bottom:6px;
}
.generator-field input[type="number"]{
  width:100%;
  max-width:none;
}
.gen-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
  line-height:1.4;
}
.gen-check input{ margin-top:3px; accent-color:var(--accent); flex-shrink:0; }
.generate-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--accent);
  color:var(--paper);
  border:none;
  padding:10px 16px;
  cursor:pointer;
  transition:opacity .15s ease;
  align-self:flex-start;
}
[data-theme="light"] .generate-btn{ color:#fff; }
[data-theme="solar"] .generate-btn{ color:#1A1A1A; }
.generate-btn:hover{ opacity:0.88; }

.sample-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--ink-soft);
  color:var(--ink-soft);
  padding:5px 10px;
  cursor:pointer;
  transition:all .15s ease;
}
.sample-btn:hover{border-color:var(--ink); color:var(--ink);}

/* ---- Side column (find + filter panels) ---- */
.main-left{ display:flex; flex-direction:column; gap:20px; }
.side{display:flex; flex-direction:column; gap:20px;}

.field-row{padding:16px;}
.field-row + .field-row{border-top:1px solid var(--rule);}
label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
input[type="text"], input[type="number"]{
  width:100%;
  border:1px solid var(--rule);
  background:var(--paper);
  padding:9px 10px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  color:var(--ink);
  outline:none;
}
input[type="text"]:focus, input[type="number"]:focus{border-color:var(--accent);}

/* ---- Find-a-word panel ---- */
.range-inline{display:flex; align-items:center; gap:8px;}
.range-inline input{width:70px;}
.range-inline span{color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; font-size:12px;}

.find-result{
  margin-top:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--ink-soft);
}
.find-result b{
  color:var(--accent);
  font-size:20px;
  font-family:'Fraunces', serif;
  font-weight:500;
}
.helper-text{
  margin-top:6px;
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  line-height:1.4;
  color:var(--ink-soft);
}
.match-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.match-chip{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  padding:3px 8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ink);
}
.match-chip mark{ padding:0; }
.match-chip .chip-count{ color:var(--ink-soft); font-size:10px; }
mark{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:2px;
  padding:0 1px;
}

/* ---- Word limit panel ---- */
.limit-panel .panel-head{ gap:12px; }
.limit-enable{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
}
.limit-enable input{ cursor:pointer; accent-color:var(--accent); }
.limit-row input[type="number"]{ max-width:120px; }
.limit-bar-track{
  margin-top:12px;
  height:6px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  overflow:hidden;
}
.limit-bar-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .15s ease, background-color .15s ease;
}
.limit-bar-fill.over{ background:var(--pencil-red); }
#limitStatus{ border-top:none; padding:8px 0 0; }


/* ---- Letter tray (filter panel) ---- */
.tray{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.type-cell{
  background:var(--card);
  padding:8px 6px;
  text-align:center;
  transition:opacity .15s ease, background .15s ease;
}
.type-cell.dim{opacity:0.22;}
.type-cell .letter{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:16px;
  display:block;
}
.type-cell .count{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--ink-soft);
  display:block;
  margin-top:2px;
}
.type-cell.active{background:var(--accent-soft);}
.type-cell.active .letter{color:var(--accent);}
.type-cell.active .count{color:var(--accent);}

.foot-note{
  padding:12px 16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  border-top:1px solid var(--rule);
}

/* ================= FOOTER ================= */
footer{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--ink-soft);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  text-align:center;
}

/* ================= SEO CONTENT SECTION (visible, theme-aware) ================= */
.seo-section{
  margin-top:56px;
  padding:40px 28px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
  width:100%;
  text-align:center;
}
.seo-section h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(24px, 3.5vw, 32px);
  margin:0 auto 18px;
  color:var(--ink);
  text-align:center;
  line-height:1.2;
}
.seo-section h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(18px, 2.5vw, 22px);
  margin:32px auto 14px;
  color:var(--ink);
  text-align:center;
}
.seo-section p{
  font-family:'Source Serif 4', serif;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  opacity:0.88;
  margin:0 auto 14px;
  text-align:center;
  max-width:680px;
}
.seo-list{
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  opacity:0.85;
  padding-left:22px;
  margin:0 auto 10px;
  text-align:left;
  display:inline-block;
  max-width:680px;
}
.seo-list li{ margin-bottom:8px; }
.faq-list{
  margin-top:16px;
  text-align:left;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.faq-item{
  border:1px solid var(--rule);
  background:var(--card);
  margin-bottom:8px;
  padding:0;
}
.faq-item summary{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  padding:12px 16px;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item p{
  font-family:'Inter', sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  padding:0 16px 14px;
  margin:0;
}

/* ================= SEO GUIDE CTA (index page) ================= */
.seo-guide-cta{
  margin-top:40px;
  text-align:center;
  padding:24px 20px;
  border:1px dashed var(--rule);
  border-radius:2px;
  background:var(--paper-2);
}
.seo-guide-btn{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--card);
  background:var(--accent);
  padding:12px 22px;
  border-radius:2px;
  text-decoration:none;
  transition:opacity .15s ease;
}
.seo-guide-btn:hover{ opacity:0.88; }
.seo-guide-cta-note{
  display:block;
  margin-top:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
}

/* ================= SEO GUIDE PAGE ================= */
.seo-guide-wrap{ max-width:900px; }
.seo-guide-header{
  margin-bottom:32px;
  text-align:left;
}
.seo-guide-header h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(28px, 4.5vw, 40px);
  line-height:1.15;
  margin:20px 0 12px;
  color:var(--ink);
}
.seo-guide-lead{
  font-family:'Source Serif 4', serif;
  font-size:17px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
  max-width:720px;
}
.seo-guide-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.nav-link{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  text-decoration:none;
  padding:6px 12px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
}
.nav-link:hover{ color:var(--ink); border-color:var(--accent); }
.nav-link--accent{
  color:var(--accent);
  border-color:var(--accent);
}
.seo-guide-section{ text-align:left; }
.seo-guide-section h2,
.seo-guide-section h3,
.seo-guide-section p{ text-align:left; margin-left:0; margin-right:0; }
.seo-guide-section p{ max-width:none; }

.seo-topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin-top:20px;
  text-align:left;
}
.seo-topic{
  border:1px solid var(--rule);
  background:var(--paper-2);
  padding:16px;
  border-radius:2px;
}
.seo-topic h3{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:600;
  margin:0 0 8px;
  text-align:left;
}
.seo-topic p{
  font-family:'Inter', sans-serif;
  font-size:13px;
  line-height:1.55;
  margin:0;
  opacity:0.9;
  text-align:left;
}
.seo-topic code{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  background:var(--card);
  padding:1px 4px;
  border-radius:2px;
}

.example-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:24px 0;
  text-align:left;
}
@media (max-width:768px){
  .example-pair{ grid-template-columns:1fr; }
}
.example-block{
  border:1px solid var(--rule);
  padding:16px;
  border-radius:2px;
  background:var(--paper-2);
}
.example-block--bad{ border-left:3px solid var(--pencil-red); }
.example-block--warn{ border-left:3px solid var(--pencil-gold); background:color-mix(in srgb, var(--pencil-gold) 8%, var(--card)); }
.example-block--good{ border-left:3px solid var(--pencil-blue); }
.example-block h3{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:600;
  margin:0 0 12px;
  text-align:left;
}
.example-note{
  font-family:'Inter', sans-serif;
  font-size:12px;
  color:var(--ink-soft);
  margin:10px 0 0;
  text-align:left;
}
.code-snippet{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  line-height:1.5;
  background:var(--card);
  border:1px solid var(--rule);
  padding:12px;
  margin:0;
  overflow-x:auto;
  border-radius:2px;
  text-align:left;
  white-space:pre-wrap;
  word-break:break-word;
}
.seo-checklist{ max-width:none; display:block; }

/* ================= SEO ANALYZER PANEL ================= */
.seo-analyzer-panel{ margin-bottom:40px; text-align:left; }
.seo-analyzer-panel .panel-head{ text-align:left; }
.analyzer-body{ padding:16px 18px 22px; }
.analyzer-intro{
  font-family:'Inter', sans-serif;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.analyzer-tabs{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.analyzer-tab{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  padding:8px 14px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  color:var(--ink-soft);
  cursor:pointer;
  border-radius:2px;
}
.analyzer-tab.active{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}
.analyzer-label{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.analyzer-input-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.analyzer-input{
  flex:1 1 220px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--ink);
  border-radius:2px;
}
.analyzer-html-input{
  width:100%;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  padding:12px;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--ink);
  border-radius:2px;
  margin-bottom:12px;
  min-height:140px;
  resize:vertical;
}
.analyzer-status{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  margin-top:14px;
  min-height:18px;
}
.analyzer-status--loading{ color:var(--accent); }
.analyzer-status--ok{ color:var(--pencil-blue); }
.analyzer-status--error{ color:var(--pencil-red); }

.analyzer-warnings{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.analyzer-warning{
  padding:14px 16px;
  border-radius:2px;
  border:1px solid var(--rule);
  background:var(--card);
  text-align:left;
}
.analyzer-warning--js-shell{
  border-color:var(--pencil-gold);
  background:color-mix(in srgb, var(--pencil-gold) 12%, var(--card));
}
.analyzer-warning--big-site{
  border-color:var(--pencil-red);
  background:color-mix(in srgb, var(--pencil-red) 10%, var(--card));
}

.analyzer-disclaimer{
  margin:16px 0 20px;
  padding:16px 18px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
}
.analyzer-disclaimer strong{ color:var(--ink); }
.analyzer-disclaimer ul{
  margin:10px 0;
  padding-left:20px;
}
.analyzer-disclaimer li{ margin-bottom:6px; }
.analyzer-disclaimer a{ color:var(--accent); }
.analyzer-disclaimer p{ margin:10px 0 0; }

.score-accuracy{
  margin:16px 0 24px;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:var(--card);
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
}
.score-accuracy strong{ color:var(--ink); font-size:15px; }
.score-accuracy p{ margin:8px 0 0; }

.enhanced-preview-block{
  margin-bottom:28px;
  padding:18px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
  text-align:left;
}
.enhanced-intro{
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.enhanced-score{
  font-family:'Inter', sans-serif;
  font-size:15px;
  margin-bottom:12px;
  color:var(--ink);
}
.results-sub{
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:400;
  color:var(--ink-soft);
}

.analyzer-warning strong{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.analyzer-warning p{
  font-family:'Inter', sans-serif;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.score-ring.grade-limited{ --score-color: var(--ink-soft); }

.analyzer-results{ margin-top:28px; }
.score-hero{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding:20px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  border-radius:2px;
  margin-bottom:24px;
}
.score-ring{
  --score-pct: 0%;
  width:100px;
  height:100px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:conic-gradient(var(--accent) var(--score-pct), var(--rule) 0);
  position:relative;
}
.score-ring::after{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:var(--card);
}
.score-num,
.score-label{
  position:relative;
  z-index:1;
  font-family:'Fraunces', serif;
}
.score-num{ font-size:28px; font-weight:500; line-height:1; color:var(--ink); }
.score-label{ font-size:11px; color:var(--ink-soft); }
.score-grade{
  font-family:'Fraunces', serif;
  font-size:24px;
  font-weight:500;
}
.score-url{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  word-break:break-all;
  margin-top:6px;
}
.grade-a .score-num, .grade-a.score-grade{ color:#2e7d32; }
.grade-b .score-num, .grade-b.score-grade{ color:#558b2f; }
.grade-c .score-num, .grade-c.score-grade{ color:#f9a825; }
.grade-d .score-num, .grade-d.score-grade{ color:#ef6c00; }
.grade-f .score-num, .grade-f.score-grade{ color:var(--pencil-red); }
.grade-limited .score-num, .grade-limited.score-grade{ color:var(--ink-soft); }
[data-theme="dark"] .grade-a .score-num{ color:#81c784; }
[data-theme="dark"] .grade-b .score-num{ color:#aed581; }

.results-heading{
  font-family:'Fraunces', serif;
  font-size:18px;
  font-weight:500;
  margin:24px 0 12px;
  text-align:left;
}
.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.category-card{
  border:1px solid var(--rule);
  padding:12px 14px;
  background:var(--card);
  border-radius:2px;
  font-family:'Inter', sans-serif;
  font-size:12px;
}
.category-card--pass{ border-left:3px solid #2e7d32; }
.category-card--warn{ border-left:3px solid #f9a825; }
.category-card--fail{ border-left:3px solid var(--pencil-red); }
.category-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.category-name{ font-weight:600; font-size:13px; }
.category-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  padding:2px 6px;
  border-radius:2px;
}
.category-badge--pass{ background:#e8f5e9; color:#2e7d32; }
.category-badge--warn{ background:#fff8e1; color:#f57f17; }
.category-badge--fail{ background:var(--pencil-red-soft); color:var(--pencil-red); }
[data-theme="dark"] .category-badge--pass{ background:#1b3d1f; color:#81c784; }
[data-theme="dark"] .category-badge--warn{ background:#3d3510; color:#ffd54f; }
.category-bar{
  height:4px;
  background:var(--rule);
  border-radius:2px;
  margin-bottom:6px;
  overflow:hidden;
}
.category-bar-fill{
  height:100%;
  background:var(--accent);
  border-radius:2px;
}
.category-score{ font-weight:600; margin-bottom:4px; }
.category-current, .category-rec{
  color:var(--ink-soft);
  line-height:1.45;
  margin-top:4px;
}

.fix-list{ display:flex; flex-direction:column; gap:14px; }
.fix-item{
  border:1px solid var(--rule);
  padding:14px;
  background:var(--paper-2);
  border-radius:2px;
}
.fix-item-head p{ margin:6px 0 0; font-size:13px; color:var(--ink-soft); }
.fix-empty{ font-size:14px; color:var(--ink-soft); }

.extracted-list{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:8px 16px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  margin:0;
}
.extracted-list dt{
  font-weight:600;
  color:var(--ink-soft);
}
.extracted-list dd{
  margin:0;
  word-break:break-word;
  color:var(--ink);
}

.seo-guide-wrap footer{
  flex-direction:column;
  gap:12px;
}
.seo-guide-wrap footer a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.seo-guide-wrap footer a:hover{ text-decoration:underline; }

@media print{
  .controls-strip, .ad-slot-wrap, .seo-section, footer, .side, .generator-panel, .limit-panel, header .tagline{ display:none !important; }
  .wrap{ max-width:100%; padding:0; }
  main{ grid-template-columns:1fr; }
}