/* Hide page flash during GBA game-switch reload */
html.gba-reloading body { visibility: hidden !important; }

/* ===== FONT DISPLAY SWAP — override FA default (block) ===== */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 400; font-display: swap; src: local("Font Awesome 6 Free Regular"); }
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: swap; src: local("Font Awesome 6 Free Solid"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: swap; src: local("Font Awesome 6 Brands Regular"); }

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== LIGHT PAGE THEME ===== */
:root {
  --bg:          #ffffff;
  --bg2:         #f5faf7;
  --bg3:         #ffffff;
  --card:        #ffffff;
  --card-hover:  #eefbf3;
  --accent:      #15803d;
  --accent2:     #0d9488;
  --text:        #1c2a22;
  --text-muted:  #4b5a51;
  --border:      #dbe7de;
  --radius:      6px;
  --ease:        0.16s ease;
  --font-head:   'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body:   'Manrope', 'Segoe UI', system-ui, sans-serif;
}

html { scroll-behavior: smooth; font-size: 17px; background: #fff; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
/* Global paragraph size — excludes interactive tool/calc widgets */
p { font-size: 1.05rem; line-height: 1.78; }
.calc-col p,
.frac-page p, .pct-page p, .uc-page p, .geo-page p,
.graph-page p, .prime-page p, .glcm-page p, .ratio-page p,
.stats-page p, .exp-page p, .roman-page p, .tt-page p,
.eq-page p, .tri-page p, .base-page p { font-size: inherit; line-height: inherit; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(21,128,61,0.25); border-radius: 3px; }

/* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== HEADER ===== */
header {
  position: relative;
  background: #163a26;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  width: 100%;
}
.header-inner {
  width: 100%; max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px; height: 52px;
  display: flex; align-items: center; gap: 20px;
}
/* Inline brand icons, replacing the Font Awesome Brands webfont.
   Four glyphs (discord, facebook-f, reddit-alien, x-twitter) were costing a
   115KB font download on every page. As inline SVG they cost nothing extra -
   they compress with the HTML - and the browser now never requests
   fa-brands-400.woff2, because no element references that font family.

   height:1em with width:auto rather than a square 1em box: the Discord glyph
   has a 640x512 viewBox, so forcing 1em x 1em would squash it. Sizing by
   height preserves every aspect ratio, and currentColor means they inherit
   the surrounding link/button colour exactly as the <i> tags did. */
.fa-svg {
  height: 1em; width: auto;
  display: inline-block; vertical-align: -0.125em;
  flex-shrink: 0;
}

.logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.7rem; font-weight: 700;
  color: var(--text); letter-spacing: 0.4px; white-space: nowrap;
}
.logo-solve { color: #fff; }
.logo-calc  { color: #7fd8a8; }
.logo-img { width: 28px; height: 28px; object-fit: contain; display: block; }
.site-tagline { display: none; }
.header-nav { margin-left: auto; display: flex; gap: 6px; }
.header-nav a {
  padding: 6px 12px; border-radius: 5px;
  font-size: 0.85rem; font-weight: 600;
  color: rgba(255,255,255,0.82); transition: color var(--ease), background var(--ease);
}
.header-nav a:hover { color: #fff; }
.header-nav a.active { color: #fff; background: rgba(255,255,255,0.12); font-weight: 700; }
.mob-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  color: #fff; background: none; border: none; margin-left: auto;
  opacity: 0.9; transition: opacity 0.15s ease;
}
.mob-menu-btn:hover { opacity: 1; }

.mob-nav {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 16px 32px rgba(15,23,42,0.18);
  padding: 8px; margin: 0;
  max-height: calc(100vh - 54px); overflow-y: auto;
  z-index: 200;
}
.mob-nav.open { display: flex; }
.mob-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 5px;
  font-size: 0.95rem; font-weight: 700;
  color: var(--text); transition: color var(--ease), background var(--ease);
}
.mob-nav a i { width: 18px; text-align: center; color: #94a3b8; font-size: 0.9rem; flex-shrink: 0; }
.mob-nav a:hover { background: #f0fbf4; color: #15803d; }
.mob-nav a:hover i { color: #15803d; }
.mob-nav a.active { background: #f0fbf4; color: #15803d; }
.mob-nav a.active i { color: #15803d; }

/* ===== PAGE WRAP ===== */
.page-wrap { max-width: 1200px; width: 100%; margin: 0 auto; padding: 40px 40px 40px; flex: 1; background: #fff; }
body.page-home .page-wrap { padding-top: 28px; }
/* The ad slot is the first thing after the hero on mobile, so this top
   padding read as an unwanted white gap once the ad actually had a visible
   creative rendered in it (an empty slot just blends into the page bg). */
@media (max-width: 600px) {
  body.page-home .page-wrap { padding-top: 0; }
}

/* ══ HERO ══ */
.hero {
  position: relative;
  background: #fff;
  padding: 56px 24px 64px;
}
.hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.hero-h1 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #1c2a22;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
  max-width: 100%;
  word-break: break-word;
}
.hero-h1 .hero-h1-bang { color: #dc2626; }
.hero-sub mark {
  background: rgba(21,128,61,0.12);
  color: #15803d;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
}
.hero-sub {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto 32px;
}
.hero-btns { display: none; }
.hero-badges {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 160px;
}
.hero-badge-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.hero-badge-icon.hb-blue   { background: #dbeafe; color: #2563EB; }
.hero-badge-icon.hb-green  { background: #dcfce7; color: #16a34a; }
.hero-badge-icon.hb-purple { background: #ede9fe; color: #7c3aed; }
.hero-badge-title { font-size: 0.85rem; font-weight: 700; color: #1c2a22; margin: 0 0 2px; }
.hero-badge-desc { font-size: 0.75rem; color: #64748b; margin: 0; line-height: 1.4; }

/* The real, functional calculator now lives directly in the hero. */
.hero-calc-col.calc-col {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  .hero-calc-col.calc-col { max-width: 425px; }
}
@media (max-width: 900px) {
  .hero-h1 { font-size: 2.2rem; }
}
@media (max-width: 768px) {
  .hero-h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.5px; }
}

/* ══ FEATURE HIGHLIGHT ROW (below hero) ══
   Clean/minimal: one flat card style, one accent color for every icon -
   no rainbow of blue/purple/green variants pretending to mean something. */
.feat-row-section { background: #fff; padding: 44px 1rem 48px; }
.feat-row {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.feat-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 20px 20px; transition: border-color 0.18s ease;
}
.feat-card:hover { border-color: var(--accent); }
.feat-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  background: var(--bg2); color: var(--accent); border: 1px solid var(--border);
}
.feat-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.feat-desc { font-size: 0.87rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
@media (max-width: 800px) {
  .feat-row { grid-template-columns: 1fr; }
}


/* Card colour variants (used outside hero) */
.hc-icon {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.hc-name { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.hc-meta { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.hc-indigo  { background: rgba(99,102,241,0.07); }
.hc-indigo  .hc-icon { background: #6366f1; }
.hc-purple  { background: rgba(168,85,247,0.08); }
.hc-purple  .hc-icon { background: #a855f7; }
.hc-teal    { background: rgba(20,184,166,0.08); }
.hc-teal    .hc-icon { background: #14b8a6; }
.hc-green   { background: rgba(34,197,94,0.08); }
.hc-green   .hc-icon { background: #22c55e; }
.hc-orange  { background: rgba(245,166,35,0.09); }
.hc-orange  .hc-icon { background: #f5a623; }
.hc-blue    { background: rgba(21,128,61,0.07); }
.hc-blue    .hc-icon { background: #15803d; }

/* Clickable hero cards (used outside hero) */
a.hero-card {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
a.hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.11);
}
a.hero-card .hc-name { transition: color 0.18s; }
a.hero-card:hover .hc-name { color: var(--accent); }

/* ===== HOME LAYOUT — centered ===== */
.home-layout { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.calc-col { width: 100%; max-width: 420px; }
.content-col { width: 100%; max-width: 900px; }

/* ===== DEVICE FRAME — calculator body style ===== */
.device-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #22322a;
  border: 1px solid #3a4d40;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}
/* No phone side buttons */
.device-frame::before,
.device-frame::after { display: none; }

/* ===== CALCULATOR ===== */
.calc-widget {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* Header */
.calc-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 2px 14px;
  min-height: 30px;
  background: transparent;
  box-sizing: border-box;
}
.calc-title {
  font-size: 0.75rem; font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.6px; text-transform: uppercase;
}

/* Physical theme only - hidden by default, shown via [data-calc-theme="physical"] below */
.cs-topline, .cs-modifiers, .calc-sci-label, .calc-sci-panel, .calc-grid-physical { display: none; }

/* Display — dark panel with bright accent text */
.calc-display-wrap {
  flex-shrink: 0;
  background: #eaf5ec;
  border-top: 2px solid #22322a;
  border-left: 2px solid #22322a;
  border-right: 2px solid #b8dfc4;
  border-bottom: 2px solid #b8dfc4;
  border-radius: 4px;
  margin: 0 0 12px;
  padding: 14px 16px 10px;
  min-height: 72px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  box-sizing: border-box;
}
.calc-expr {
  font-size: 0.8rem;
  color: #5c7a63;
  min-height: 18px; word-break: break-all; text-align: right;
  padding-right: 2px;
  font-family: var(--font-body);
}
.calc-display {
  font-family: var(--font-body);
  font-size: 3rem; font-weight: 700;
  color: #16281c; text-align: right;
  line-height: 1; letter-spacing: -1px;
  word-break: break-all;
  width: 100%;
  transition: font-size 0.12s ease;
}
.calc-display.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

/* Button grid — fr-based rows so it always fills the 3:4 frame exactly,
   regardless of row count, instead of relying on fixed button heights. */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* First two rows (sin/cos/tan/log, ln/√/π/e) are slimmer than the number
     pad rows below - they're text labels, not digits, and don't need the
     same tap-target height. */
  grid-template-rows: 36px 36px repeat(6, minmax(52px, 1fr));
  gap: 10px;
}

/* Base button — fills its grid cell (row height is fr-based, not square) */
.cbtn {
  border: none;
  border-radius: 5px;
  font-size: 1.2rem; font-weight: 600;
  color: #f1f5f9;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: filter 0.12s ease, transform 0.07s ease, background 0.12s ease, box-shadow 0.07s ease;
  background: #3a4d40;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.28),
    0 5px 9px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.cbtn:hover { background: #456051; }
.cbtn:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 rgba(0,0,0,0.28),
    0 1px 2px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Scientific fn keys — same dark slate, smaller text */
.cbtn-fn {
  background: #3a4d40;
  font-size: 0.76rem; font-weight: 700;
  color: #c9dccf;
  letter-spacing: 0.2px;
}

/* AC / ⌫ — red, filled to match the blue operator buttons */
.cbtn-cl {
  background: #ef4444;
  color: #fff;
  font-size: 1.08rem; font-weight: 700;
}
.cbtn-cl:hover { background: #f87171; }

/* Operators — brand blue */
.cbtn-op {
  background: #d97706;
  color: #fff;
  font-size: 1.4rem; font-weight: 600;
}
.cbtn-op:hover { background: #b45309; }

/* Numbers */
.cbtn-num {
  background: #3a4d40;
  color: #eaf5ec;
  font-size: 1.35rem; font-weight: 600;
}

/* Equals */
.cbtn-eq {
  background: #22a06b;
  color: #fff;
  font-size: 1.5rem; font-weight: 700;
}
.cbtn-eq:hover { background: #0d9488; }

/* 0 key — wide, centered text */
.cbtn-wide2 {
  grid-column: span 2;
  justify-content: center;
  background: #3a4d40;
}

/* = spans full row */
.cbtn-wide4 {
  grid-column: span 4;
}

/* ===== CODE MODE TOGGLE (in calc header) ===== */
.code-toggle-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.code-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.code-toggle-track {
  display: inline-block; width: 30px; height: 17px;
  background: rgba(255,255,255,0.35); border-radius: 999px; position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.code-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px;
  background: #fff; border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.code-toggle-input:checked + .code-toggle-track { background: #15803d; }
.code-toggle-input:checked + .code-toggle-track .code-toggle-thumb {
  transform: translateX(13px); background: #fff;
}
.code-toggle-label {
  font-size: 0.65rem; font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: 0.7px;
}
.code-toggle-input:checked ~ .code-toggle-label { color: #fff; }

/* ===== RELATED ARTICLES ===== */
.about-topics-block {
  background: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 1.8rem 2rem 1.6rem;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
}
.about-topics-block-inner {
  max-width: 900px;
  margin: 0 auto;
}
.about-topics-block .intro { text-align: left; margin-bottom: 0; }
.tools-full-row {
  background: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 48px 2rem;
  margin-bottom: 0;
}
.tools-full-row .home-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}
/* 50/50 split: mascot (sticky) + tools grid.
   CSS Grid, not flex - fixed tracks avoid the first-paint sizing race
   flex-basis:0 + a sticky sibling can hit before layout settles. */
.tools-split-layout {
  width: 100%;
}
.tools-grid-col {
  min-width: 0;
}

@media (max-width: 768px) {
  .tools-split-layout { grid-template-columns: 1fr; }
  .tools-mascot-col { position: static; width: 100%; max-width: 280px; margin: 0 auto; }
  .tools-grid-col .home-tools-grid { grid-template-columns: repeat(2, 1fr); }
  /* Swap images on mobile */
  .tools-mascot-desktop { display: none; }
  .tools-mascot-mobile { display: block; }
}
.about-topics-block h1 { text-align: left; margin-bottom: .5rem; }
.related-articles { margin-top: 36px; }
.ra-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
.ra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ra-card {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px; border-radius: var(--radius);
  font-size: 0.82rem; font-weight: 800; color: #fff;
  text-align: center; line-height: 1.3;
  min-height: 52px;
  transition: opacity var(--ease), transform var(--ease);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.ra-card:hover { opacity: 0.88; transform: translateY(-1px); }
.ra-card:nth-child(1) { background: #f97316; }
.ra-card:nth-child(2) { background: #10b981; }
.ra-card:nth-child(3) { background: #eab308; color: #1a202c; }
.ra-card:nth-child(4) { background: #ef4444; }
.ra-card:nth-child(5) { background: #6366f1; }
.ra-card:nth-child(6) { background: #14b8a6; }
.ra-card { gap: 7px; }
.ra-card-icon { font-size: 0.85em; opacity: 0.88; flex-shrink: 0; }

/* ===== ACCESSIBILITY WIDGET ===== */
.a11y-wrap { position: relative; }

.mob-a11y-label {
  font-size: .85rem; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; gap: .45rem;
}
.a11y-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.a11y-toggle-btn:hover { background: var(--card-hover); color: var(--text); border-color: var(--accent); }
.a11y-t-icon {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}
.a11y-panel {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  min-width: 210px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  z-index: 999;
  flex-direction: column; gap: 14px;
}
.a11y-panel.a11y-panel-open { display: flex; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a11y-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.a11y-size-btns { display: flex; gap: 5px; }
.a11y-sz-btn {
  width: 32px; height: 32px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--text);
  font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.a11y-sz-btn:hover { background: var(--card-hover); border-color: var(--accent); }
.a11y-sz-reset { font-size: 0.95rem; }
/* ===== HOME ARTICLE ===== */
.home-article h1 { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.25; letter-spacing: -0.4px; margin-bottom: 12px; text-align: center; }
.home-article .intro { font-size: 1.06rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 28px; text-align: center; }
.home-article h2 { font-size: 1.2rem; font-weight: 600; color: var(--text); margin: 40px 0 14px; }
.home-article p { font-size: 1.06rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 16px; }
.home-article ul { padding-left: 20px; color: var(--text-muted); font-size: 1.06rem; line-height: 1.85; margin-bottom: 22px; }
.home-article li { margin-bottom: 8px; }
.home-article strong { color: var(--text); font-weight: 600; }
.home-article p a { color: var(--accent); text-decoration: none; }
.home-article p a:hover { text-decoration: underline; }
code { font-family: 'JetBrains Mono', ui-monospace, monospace; background: #eef1f7; padding: 1px 7px; border-radius: 3px; font-size: 0.88em; color: var(--accent,#15803d); }
.home-article code { font-family: 'JetBrains Mono', monospace; background: #eef1f7; padding: 1px 7px; border-radius: 3px; font-size: 0.9em; color: var(--accent); }
.home-article h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 24px 0 10px; }
.home-article ul a { color: var(--accent); text-decoration: none; }
.home-article ul a:hover { text-decoration: underline; }
.home-article .home-article-title {
  display: flex; align-items: center; gap: 12px;
  width: fit-content;
  font-size: 1.75rem; font-weight: 700; color: var(--text);
  line-height: 1.25; letter-spacing: -0.4px;
  margin: 0 auto 16px;
}
.home-article .quick-answer {
  background: #f0fbf4; border: 1px solid #dcf5e6;
  border-radius: 5px; padding: 18px; margin: 18px 0;
  box-sizing: border-box;
}
.home-article .quick-answer-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 800; color: #15803d;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.home-article .quick-answer-text {
  font-size: 1.03rem; line-height: 1.7; color: var(--text-muted);
  margin: 0;
}
.home-article .page-updated { font-size: 0.82rem; color: var(--text-muted); opacity: 0.8; margin: -6px 0 18px; }
.home-article table.quick-facts { margin: 18px 0; }
.home-article table.quick-facts th {
  width: 38%; background: #f8f9fc; font-weight: 700; font-size: 0.9rem;
  vertical-align: top; white-space: nowrap;
}
@media (max-width: 480px) {
  .home-article table.quick-facts th { width: 42%; white-space: normal; }
}
.home-article .math-box {
  background: #f0fbf4; border: 1px solid #dcf5e6;
  border-radius: 5px;
  padding: 16px 22px; margin: 20px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 0.98rem;
  color: var(--text); overflow-x: auto; line-height: 1.9;
}
.home-article .math-box strong { color: #15803d; font-weight: 800; }
.home-article .math-box a { color: var(--accent); }
.home-article table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.home-article th { background: #f1f4fa; padding: 10px 14px; text-align: left; font-weight: 800; color: var(--text); border-bottom: 2px solid var(--border); }
.home-article td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.home-article tr:last-child td { border-bottom: none; }
.home-article tr:hover td { background: #f8f9fc; }
.home-article td a { color: var(--accent); text-decoration: none; }
.home-article td a:hover { text-decoration: underline; }
.home-article kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8em;
  background: #eef1f7; color: var(--text); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

.use-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 32px; }
.use-case {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: box-shadow var(--ease), transform var(--ease);
}
.use-case:hover { box-shadow: 0 4px 14px rgba(21,128,61,0.1); transform: translateY(-1px); }
.use-case strong { display: block; font-size: 0.95rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.use-case p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* ===== ARTICLE PAGES ===== */
.inner-page { max-width: 780px; margin: 0 auto; padding-top: 8px; width: 100%; box-sizing: border-box; overflow-wrap: break-word; }
.inner-page h1 { font-size: 2rem; font-weight: 600; color: var(--text); line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 14px; }
.inner-page h2 { font-size: 1.25rem; font-weight: 600; color: var(--text); margin: 28px 0 10px; }
.inner-page p { font-size: 1.06rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 16px; }
.inner-page ul { padding-left: 22px; margin-bottom: 16px; max-width: 100%; box-sizing: border-box; }
.inner-page li { font-size: 1.06rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 6px; }
.article-page { max-width: 780px; margin: 0 auto; padding-top: 8px; }
/* Tool pages — wider than article but still centered */
.tool-page-layout { max-width: 900px; margin: 0 auto; }

/* ── Prev / Next tool navigation ── */
.tool-nav-row {
  display: flex;
  gap: .85rem;
  margin: 1.2rem 0;
}
.tool-nav-placeholder { flex: 1; }
.tool-nav-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card);
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  min-width: 0;
}
.tool-nav-card:hover {
  border-color: var(--tnc-color, var(--accent));
  box-shadow: 0 4px 14px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.tool-nav-card.tool-nav-next { flex-direction: row-reverse; text-align: right; }
.tool-nav-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tnc-color, var(--accent)) 14%, transparent);
  color: var(--tnc-color, var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.tool-nav-dir {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 2px;
}
/* Arrow chevron button on right side of prev, left side of next */
.tool-nav-card .tool-nav-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  color: var(--tnc-color, var(--accent));
  font-size: .7rem;
  margin-left: auto;
  transition: background .15s, border-color .15s;
}
.tool-nav-card.tool-nav-next .tool-nav-arrow { margin-left: 0; margin-right: auto; }
.tool-nav-card:hover .tool-nav-arrow {
  background: color-mix(in srgb, var(--tnc-color, var(--accent)) 12%, transparent);
  border-color: var(--tnc-color, var(--accent));
}
.tool-nav-name {
  font-size: .88rem; font-weight: 700;
  color: var(--text); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.tool-nav-text {
  min-width: 0; overflow: hidden; flex: 1;
}
@media (max-width: 640px) {
  .tool-nav-row { gap: .45rem; }
  .tool-nav-card { padding: .6rem .7rem; gap: .4rem; }
  .tool-nav-icon { width: 28px; height: 28px; font-size: .75rem; flex-shrink: 0; }
  .tool-nav-arrow { width: 22px; height: 22px; font-size: .6rem; flex-shrink: 0; }
  .tool-nav-dir { font-size: .6rem; }
  .tool-nav-name { font-size: .75rem; }
}
/* Pill-chip breadcrumb, not the plain "Home › Page › Current" text style
   most calculator sites use - each segment is its own rounded chip, and
   the current page reads as a solid accent-filled pill. */
.article-breadcrumb {
  display: flex; gap: 5px; align-items: center; margin-bottom: 22px; flex-wrap: wrap;
  font-size: 0.78rem; font-weight: 600;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.article-breadcrumb a {
  padding: 4px 11px; border-radius: 999px;
  color: var(--text-muted); background: var(--bg2);
  border: 1px solid var(--border);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.article-breadcrumb a:hover { background: var(--card-hover); color: var(--accent); border-color: var(--accent); }
.article-breadcrumb span:not(:last-child) {
  color: var(--border); font-size: 0.65rem; padding: 0 1px; line-height: 1;
}
.article-breadcrumb span:last-child {
  padding: 4px 11px; border-radius: 999px;
  color: #fff; font-weight: 700; background: var(--accent);
}
@media (max-width: 480px) {
  .article-breadcrumb { font-size: 0.72rem; }
  .article-breadcrumb a, .article-breadcrumb span:last-child { padding: 3px 9px; }
}
/* Category badge removed site-wide - the breadcrumb alone is enough context. */
.article-cat-badge { display: none; }
.article-page h1 { font-size: 2rem; font-weight: 600; color: var(--text); line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 14px; }
.article-meta { font-size: 0.84rem; color: var(--text-muted); font-weight: 500; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.article-intro { font-size: 1.11rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 30px; }
.article-body { font-size: 1.06rem; color: var(--text-muted); line-height: 1.9; }
.article-body h2 { font-size: 1.45rem; font-weight: 600; color: var(--text); margin: 34px 0 12px; letter-spacing: -0.3px; }
.article-body h3 { font-size: 1.1rem; font-weight: 500; color: var(--text); margin: 22px 0 8px; }

/* Branded section headings on article/tool pages - same red tag icon +
   text-underline treatment as the homepage. text-decoration is used (not
   border-bottom) because it hugs the actual text width automatically; the
   icon is display:inline-block so the underline skips over it rather than
   running underneath, per how text-decoration handles atomic inline
   descendants. No markup changes needed - every page sharing these
   selectors already renders a bare <h2>Text</h2>. */
.article-body h2, .inner-page h2, .cat-about h2, .tool-article h2 {
  text-decoration: underline;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}
.article-body h2::before, .inner-page h2::before, .cat-about h2::before, .tool-article h2::before {
  content: "\f02b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  color: #dc2626;
  font-size: 0.7em;
  margin-right: 10px;
  text-decoration: none;
}
.article-body p { margin-bottom: 16px; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 16px; }
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-body a { color: var(--accent); }
.article-body a:hover { text-decoration: underline; }
.callout-tip, .callout-warning {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: var(--radius); padding: 14px 16px; margin: 14px 0;
  font-size: 0.95rem; line-height: 1.7;
}
.callout-tip i, .callout-warning i { flex-shrink: 0; margin-top: 3px; font-size: 1rem; }
.callout-tip {
  background: rgba(21,128,61,0.06); border: 1px solid rgba(21,128,61,0.15); color: var(--text-muted);
}
.callout-tip i { color: var(--accent); }
.callout-warning {
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.22); color: var(--text-muted);
}
.callout-warning i { color: #d97706; }
.article-body .math-box {
  background: #f0fbf4; border: 1px solid #dcf5e6;
  border-radius: 5px;
  padding: 16px 22px; margin: 20px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 0.98rem;
  color: var(--text); overflow-x: auto; line-height: 1.9;
}
.article-body .math-box strong { color: #15803d; font-weight: 800; }
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 1rem; border-radius: var(--radius); overflow: hidden; }
.article-body th { background: #f1f4fa; padding: 10px 14px; text-align: left; font-weight: 800; color: var(--text); border-bottom: 2px solid var(--border); }
.article-body td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.article-body tr:last-child td { border-bottom: none; }
.article-body tr:hover td { background: #f8f9fc; }
.auto-toc { background: var(--card,#f8f9fc); border: 1.5px solid var(--border,#e5e7eb); border-radius: 6px; padding: .9rem 1.2rem; margin: 0 0 1.6rem; }
.auto-toc .toc-label { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted,#6b7280); margin-bottom: .6rem; }
.auto-toc ol { padding-left: 1.3rem; margin: 0; }
.auto-toc li { margin-bottom: .28rem; line-height: 1.5; }
.auto-toc a { color: var(--accent,#15803d); text-decoration: none; font-size: .94rem; }
.auto-toc a:hover { text-decoration: underline; }
.article-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.article-related h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.article-related-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.article-related-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; font-weight: 700; color: var(--text-muted); transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.article-related-card::before {
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  content: '\f002';
  font-size: .8rem; flex-shrink: 0; opacity: .65;
}
.article-related-card:hover { border-color: var(--accent); color: var(--accent); background: rgba(21,128,61,0.04); }
.article-related-card:hover::before { opacity: 1; }

/* ===== CATEGORY LANDING PAGES ===== */
.cat-landing { max-width: 780px; margin: 0 auto; }
.cat-hero {
  display: flex; align-items: flex-start; gap: 20px;
  background: linear-gradient(135deg, #15803d, #0d9488);
  border-radius: 12px; padding: 32px 28px;
  margin-bottom: 32px; color: #fff;
}
.cat-hero-icon {
  font-size: 2.5rem; background: rgba(255,255,255,0.15);
  border-radius: 16px; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
}
.cat-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 8px; color: #fff; }
.cat-hero p { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.82); }

.topic-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.topic-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 18px 20px; color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.topic-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(21,128,61,0.1); transform: translateX(3px); }
.topic-icon {
  width: 48px; height: 48px; border-radius: 8px;
  background: rgba(21,128,61,0.1); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--accent); flex-shrink: 0;
}
.topic-body { flex: 1; min-width: 0; }
.topic-body strong { display: block; font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.topic-body p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.topic-arrow { color: var(--text-muted); font-size: 0.9rem; flex-shrink: 0; transition: transform var(--ease); }
.topic-card:hover .topic-arrow { transform: translateX(4px); color: var(--accent); }

.cat-about h2 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 28px 0 10px; }
.cat-about p { font-size: 1.06rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 14px; }
.cat-about a { color: var(--accent); }
.cat-about a:hover { text-decoration: underline; }

/* ===== INNER PAGES ===== */
.inner-page { max-width: 780px; margin: 0 auto; padding-top: 8px; }
.inner-page h1 { font-size: 2rem; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.inner-page p { font-size: 1.06rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 14px; }
.inner-page h2 { font-size: 1.2rem; font-weight: 600; color: var(--text); margin: 28px 0 10px; }
.inner-page a { color: var(--accent); }
.inner-page a:hover { text-decoration: underline; }
.inner-page .article-breadcrumb { margin-bottom: 20px; }

/* ===== 404 ===== */
.not-found { text-align: center; padding: 60px 20px; max-width: 520px; margin: 0 auto; }
.not-found-code { font-size: 7rem; font-weight: 900; line-height: 1; color: var(--border); letter-spacing: -4px; margin-bottom: 8px; }
.not-found-title { font-size: 1.8rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.not-found-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 32px; }
.not-found-btn { display: inline-flex; }
.not-found-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.not-found-links a { padding: 8px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); font-size: 0.88rem; font-weight: 600; color: var(--text-muted); transition: border-color var(--ease), color var(--ease); }
.not-found-links a:hover { border-color: var(--accent); color: var(--accent); }

.contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.9rem; font-weight: 800; color: var(--text); }
.form-group input, .form-group textarea {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; color: var(--text); font-size: 1rem; font-family: inherit;
  outline: none; transition: border-color var(--ease);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21,128,61,0.12); }
.form-group textarea { resize: vertical; min-height: 130px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 28px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.95rem; font-weight: 800;
  cursor: pointer; border: none;
  box-shadow: 0 4px 0 #0f5c2b;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover { background: #116932; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0f5c2b; }
a.btn, a.btn:visited { background: var(--accent); color: #fff; }
a.btn:hover { background: #116932; }

/* ===== FOOTER ===== */
footer {
  background: #19253e;
  width: 100%;
  margin-top: 0;
}
.footer-inner {
  width: 100%; max-width: 640px;
  margin: 0 auto;
  padding: 44px 24px 28px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.footer-brand { font-size: 1.15rem; font-weight: 800; color: #fff; display: block; margin-bottom: 8px; }
.footer-blurb { font-size: 0.85rem; color: #94a3b8; line-height: 1.6; margin: 0 0 18px; }
.footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.footer-nav a { font-size: 0.85rem; font-weight: 500; color: #94a3b8; transition: color var(--ease); }
.footer-nav a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 40px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap;
}
.footer-copy { font-size: 0.78rem; color: #64748b; white-space: nowrap; }
.footer-dmca { font-size: 0.78rem; color: #64748b; }
.footer-dmca:hover { color: #94a3b8; }

/* ===== POSTS LISTING ===== */
/* Deliberately its own class, not .inner-page: that shared wrapper caps at
   780px for narrow text pages (About, Contact, ...), which squeezes the
   blog/guides grids below into a single reading column instead of using
   the full .page-wrap width. */
.posts-page { width: 100%; box-sizing: border-box; overflow-wrap: break-word; padding-top: 8px; }
.posts-page h1 { font-size: 2rem; font-weight: 600; color: var(--text); line-height: 1.2; letter-spacing: -0.4px; margin-bottom: 14px; }
.posts-intro { font-size: 1.06rem; color: var(--text-muted); margin: 0 0 36px; line-height: 1.65; }

/* ── Magazine hero row: one big card + two stacked secondary cards ──
   (unused on calcsolver.com until real featured images exist, but shared
   with solvecalc.net's template so both sites stay in sync) */
.blog-hero-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 36px; }
.blog-hero-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 16 / 10; text-decoration: none; color: #fff; background: var(--bg2);
}
.blog-hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,20,0.82) 0%, rgba(10,10,20,0.2) 55%, transparent 100%);
}
.blog-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 1; }
.blog-hero-cat {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 5px; margin-bottom: 8px;
}
.blog-hero-overlay .blog-hero-title { font-size: 1.4rem; font-weight: 800; margin: 0; line-height: 1.3; color: #fff; }
.blog-hero-secondary { display: flex; flex-direction: column; gap: 16px; }
.blog-hero-secondary .blog-hero-card { aspect-ratio: auto; flex: 1; min-height: 140px; }
.blog-hero-secondary .blog-hero-overlay .blog-hero-title { font-size: 0.95rem; }
.blog-hero-secondary .blog-hero-cat { font-size: 0.62rem; padding: 2px 8px; margin-bottom: 5px; }
@media (max-width: 900px) { .blog-hero-row { grid-template-columns: 1fr; } }

.blog-section-heading, .blog-all-heading {
  font-size: 1.15rem; font-weight: 800; margin: 0 0 18px; padding-left: 12px;
  border-left: 4px solid var(--accent); color: var(--text);
}

/* ── Browse Topics pills ── */
.blog-topics-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.blog-topic-pill {
  display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 600; color: var(--text); background: #fff;
}

/* ── Pagination ── */
.blog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.blog-page-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 0.88rem; font-weight: 700; color: var(--text);
  text-decoration: none; background: #fff; transition: border-color 0.15s, color 0.15s;
}
.blog-page-link:hover { border-color: var(--accent); color: var(--accent); }
.blog-page-disabled { opacity: 0.35; cursor: default; }
.blog-page-status { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
@media (max-width: 480px) {
  .blog-pagination { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ── /guides hub: category listing, same card pattern as the blog grid ── */
.guides-full-index { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.guides-full-index h2 { margin-bottom: 18px; }
.guides-full-index h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 28px 0 14px; }
.guides-full-index h3:first-of-type { margin-top: 0; }
.guides-index-grid { margin-bottom: 4px; }

.posts-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.post-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 20px 60px 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.post-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(21,128,61,0.1);
  transform: translateY(-2px);
}

.post-card-img {
  width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius);
  flex-shrink: 0; background: var(--bg2);
}

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.post-card-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  background: #f0fbf4;
  border-radius: 4px;
  padding: 3px 9px;
  width: fit-content;
}

.post-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}

.post-card-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

.post-card-arrow {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.post-card:hover .post-card-arrow { border-color: var(--accent); color: var(--accent); }

@media (max-width: 560px) {
  .post-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 40px; }
  .post-card-arrow { top: auto; bottom: 14px; transform: none; }
}

/* ===== VAULT OVERLAY ===== */
/* Two deliberate changes from the original here:
   - background-attachment: fixed is GONE. It forced the browser to
     re-composite this full-viewport background on every repaint in the
     stacking context, which is a classic source of jank - and it showed up
     as stuttering video whenever an ad overlay (offerwall rewarded ad, or a
     pre-roll) played on top of the vault. The element is position:fixed
     already, so scrolling never moved this background anyway; "fixed" bought
     nothing and cost a repaint.
   - The image is self-hosted and downsized (1280px, q55, 12KB webp / 52KB
     jpg fallback, sourced from Pexels and re-encoded locally rather than
     hotlinked). It sits under an 84% opaque gradient, so it only ever
     contributes texture - full resolution was wasted bytes, and a
     third-party image had no business in the critical path of opening the
     vault. */
.vault-overlay {
  display: none; position: fixed; inset: 0;
  background:
    linear-gradient(rgba(6,10,20,0.84), rgba(6,10,20,0.84)),
    image-set(url('/assets/img/vault-bg.webp?v=2') type('image/webp'),
              url('/assets/img/vault-bg.jpg?v=2')  type('image/jpeg')) center/cover no-repeat;
  z-index: 9000;
  flex-direction: column;
  animation: vault-in 0.18s ease;
}
.vault-overlay .vault-topbar       { background: rgba(10,16,28,0.55); }
.vault-overlay .vault-cat-sidebar  { background: rgba(10,16,28,0.55); }
.vault-overlay .vault-main-area    { background: transparent; }
.vault-overlay .vault-frame-header { background: rgba(10,16,28,0.55); }
.vault-overlay .vault-side-left    { background: rgba(10,16,28,0.4); }
.vault-overlay .vault-side-right   { background: rgba(10,16,28,0.4); }
.vault-overlay .vault-req-panel,
.vault-overlay .vault-codes-panel  { background: transparent; }
.vault-overlay.open { display: flex; }
@keyframes vault-in { from { opacity: 0; } to { opacity: 1; } }

/* Top bar */
.vault-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 46px; flex-shrink: 0;
  background: #1b2335;
  position: relative;
}
.vault-esc-hint { display: none; }
.vault-esc-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px;
  font-size: 0.6rem; color: #64748b; background: none; border: none;
  cursor: pointer; padding: 0; border-radius: 50%;
  transition: color 0.15s;
}
.vault-esc-close:hover { color: #8b9bb8; }
.vault-esc-hint kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 0.7rem; font-weight: 700; color: #8b9bb8;
  background: #17213a; border: 1px solid #2a3a5a;
  border-bottom: 2px solid #2a3a5a;
  border-radius: 3px; padding: 1px 6px; letter-spacing: 0.02em;
  box-shadow: 0 1px 0 #0a0e16;
}
.vault-topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(21,128,61,0.1); border: 1px solid rgba(21,128,61,0.3);
  color: #8ad9b5; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: color 0.18s, background 0.18s, border-color 0.18s; white-space: nowrap; flex-shrink: 0;
}
.vault-topbar-btn:hover { color: #eef2f9; background: rgba(21,128,61,0.22); border-color: #0d9488; }
.vault-discord-btn { color: #5865F2; text-decoration: none; }
.vault-discord-btn:hover { color: #4fae7f; }
@media (max-width: 900px) { .vault-discord-btn { display: none; } }
#vault-theme-btn { margin-left: auto; }
#vault-close-btn { background: #ef4444; color: #fff; border-color: #ef4444; display: flex; align-items: center; gap: 5px; }
#vault-close-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.vault-close-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px; }
@media (max-width: 600px) { .vault-close-label { display: none; } }
.vault-topbar-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 60%; max-width: 620px; min-width: 280px;
  pointer-events: none;
}
.vault-topbar-center > * { pointer-events: auto; }
.vault-logo-text { font-size: 1.1rem; font-weight: 800; color: #eef2f9; white-space: nowrap; letter-spacing: -0.3px; }
.vault-search-wrap { position: relative; width: 100%; max-width: 340px; min-width: 200px; flex: 1; }
.vault-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8b9bb8; pointer-events: none; }
.vault-search {
  width: 100%; background: rgba(21,128,61,0.08); border: 1.5px solid rgba(21,128,61,0.25);
  border-radius: 4px; padding: 7px 32px 7px 36px; color: #eef2f9;
  font-size: 0.88rem; font-family: inherit; outline: none; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.vault-search:focus { border-color: #0d9488; background: rgba(21,128,61,0.14); box-shadow: 0 0 0 3px rgba(21,128,61,0.15); }
.vault-search::placeholder { color: #64748b; }
.vault-search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #8b9bb8; font-size: 0.75rem;
  cursor: pointer; padding: 0; line-height: 1; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.vault-search-clear:hover { color: #eef2f9; background: rgba(255,255,255,0.08); }

/* Backup Discord bar - own-brand community link, styled distinctly from
   any ad slot (brand-blurple accent, plain text, no ad-like framing) and
   with rel=noopener on the outbound link, so it can never be mistaken for
   or interfere with AdSense/Ad Manager inventory. */
.vault-discord-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; flex-shrink: 0;
  background: rgba(88,101,242,0.14); border-bottom: 1px solid rgba(88,101,242,0.25);
}
.vault-discord-bar-text {
  display: flex; align-items: center; gap: 7px;
  color: #a3b3cc; font-size: 0.82rem; font-weight: 600;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-discord-bar-text i { color: #5865F2; font-size: 0.95rem; flex-shrink: 0; }
.vault-discord-bar-btn {
  display: inline-flex; align-items: center;
  padding: 4px 14px; border-radius: 999px; flex-shrink: 0;
  background: #5865F2; color: #fff; text-decoration: none;
  font-size: 0.8rem; font-weight: 700;
  transition: background 0.15s;
}
.vault-discord-bar-btn:hover { background: #4fae7f; }
.vault-discord-bar-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: none; border: none; color: #a3b3cc; font-size: 0.7rem; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.vault-discord-bar-close:hover { color: #eef2f9; background: rgba(255,255,255,0.08); }
.vault-discord-bar.vault-discord-bar-hidden { display: none; }
@media (max-width: 560px) { .vault-discord-bar-text { font-size: 0.76rem; } }

/* Body layout: sidebar + main */
.vault-body { display: flex; flex: 1; overflow: hidden; }

/* Sidebar toggle button (desktop only) */
.vault-sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0;
  background: rgba(21,128,61,0.1); border: 1px solid rgba(21,128,61,0.3);
  color: #8ad9b5; font-size: 0.85rem; cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.vault-sidebar-toggle:hover { color: #eef2f9; background: rgba(21,128,61,0.22); border-color: #0d9488; }

/* Category sidebar */
.vault-cat-sidebar {
  width: 184px; flex-shrink: 0;
  background: #1b2335;
  padding: 12px 8px 0;
  display: flex; flex-direction: column;
  transition: width 0.22s ease, opacity 0.18s ease;
}
.vault-cat-sidebar.sidebar-collapsed {
  width: 0; overflow: hidden; opacity: 0; padding: 0; border-right: none;
}
/* Only the category list scrolls - the Exit button below stays fixed at the
   bottom of the sidebar instead of scrolling away with the menu. min-height:0
   is required so this flex child actually scrolls instead of growing to fit
   its content. */
.vault-cat-links {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
/* Pill-style rows with an icon chip, rather than a flat list with a
   left-border indicator - reads as its own nav component instead of a
   generic sidebar list. */
.vault-cat-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 0.85rem; font-weight: 600; color: #8b9bb8;
  border-left: none;
  cursor: pointer; transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}
.vault-cat-link i {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(21,128,61,0.12);
  font-size: 0.8rem; transition: background 0.18s, color 0.18s;
}
.vault-cat-exit-btn i { color: #fff; background: none; width: auto; height: auto; }
.vault-cat-link + .vault-cat-link { border-top: none; }
.vault-cat-link i { color: #0d9488; }
.vault-cat-link:hover { color: #eef2f9; background: rgba(21,128,61,0.1); }
.v-cat-badge { margin-left: auto; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.03em; flex-shrink: 0; }
.v-cat-badge-hot { background: rgba(239,68,68,0.18); color: #f87171; }
.v-cat-badge-top { background: rgba(168,85,247,0.18); color: #c084fc; }
.v-cat-badge-new { background: rgba(34,197,94,0.18); color: #4ade80; }
.vault-cat-link.active { color: #fff; font-weight: 700; background: #15803d; }
.vault-cat-link.active i { background: rgba(255,255,255,0.2); color: #fff; }

/* Main grid area */
.vault-main-area { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }

/* Collapsible full-width category rows (shown when browsing "All") */
#vault-grid.vault-grid-rows-mode { display: block; }
.vault-cat-row { width: 100%; margin-bottom: 1.4rem; }
.vault-cat-row-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; cursor: pointer; padding: .5rem 2px;
  color: inherit; font: inherit; text-align: left;
}
.vault-cat-row-title { font-size: 1rem; font-weight: 700; color: #eef2f9; display: flex; align-items: center; gap: .55rem; }
.vault-cat-row-count { font-size: .72rem; font-weight: 700; color: #8b9bb8; background: rgba(255,255,255,0.07); border-radius: 999px; padding: .12rem .55rem; }
.vault-cat-row-arrow { color: #8b9bb8; font-size: .85rem; transition: transform .2s ease; flex-shrink: 0; }
.vault-cat-row.collapsed .vault-cat-row-arrow { transform: rotate(-90deg); }
.vault-cat-row.collapsed .vault-grid { display: none; }
.vault-cat-row .vault-grid { margin-top: .4rem; }
.vault-overlay.vault-light .vault-cat-row-title { color: #1a1a1a; }
.vault-overlay.vault-light .vault-cat-row-count { color: #6a6a6a; background: rgba(0,0,0,0.05); }
.vault-overlay.vault-light .vault-cat-row-arrow { color: #8a8a8a; }

.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  gap: 6px;
}
.vault-grid-sentinel { grid-column: 1 / -1; height: 1px; }

/* Card - simple, flat, no glow/shadow. Nearly transparent so the tiles read
   as part of the grid rather than boxed-in cards. */
.v-card {
  background: transparent; border: 1px solid rgba(21,128,61,0.18);
  border-radius: 4px; overflow: hidden; cursor: pointer;
  display: block; transition: border-color 0.18s;
  height: auto;
}
@media (hover: hover) and (pointer: fine) { .v-card:hover { border-color: #0d9488; } }
.v-thumb {
  position: relative; overflow: hidden;
  background: #17213a;
  height: auto; aspect-ratio: 1 / 1;
}
/* Shimmer loading */
.v-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  background-size: 200% 100%; animation: vshimmer 1.4s infinite;
}
.v-thumb.loaded::before { display: none; }
@keyframes vshimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.v-thumb img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.3s ease;
}
.v-thumb img.loaded { opacity: 1; }

/* ── Favourite heart button ── */
.v-fav-btn {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); font-size: .8rem;
  opacity: 0; transform: scale(0.8);
  transition: opacity .18s, transform .18s, color .15s, background .15s;
}
@media (hover: hover) and (pointer: fine) { .v-card:hover .v-fav-btn { opacity: 1; transform: scale(1); } }
.v-fav-btn.active { opacity: 1; transform: scale(1); color: #f43f5e; background: rgba(0,0,0,0.55); }
@media (hover: hover) and (pointer: fine) { .v-fav-btn:hover { background: rgba(0,0,0,0.7); color: #f43f5e; } }
@media (hover: hover) and (pointer: fine) { .v-fav-btn.active:hover { color: #fb7185; } }

@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
.v-fav-btn.pop { animation: fav-pop 0.35s ease; }

/* Topbar favourites button */
.vault-fav-topbar-btn { position: relative; color: #f43f5e; transition: box-shadow .18s; }
.vault-fav-topbar-btn i { font-size: .9rem; }
.vault-fav-topbar-btn.active { box-shadow: 0 0 0 3px rgba(244,63,94,0.25); border-radius: 4px; }
.vault-fav-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: #f43f5e; color: #fff; font-size: .65rem; font-weight: 700;
  border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* Sidebar favourites link */
.vault-fav-link { position: relative; }
.vault-fav-count-side {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 4px;
  background: #f43f5e; color: #fff; font-size: .65rem; font-weight: 700;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
}

/* Hover overlay */
.v-card-overlay {
  position: absolute; inset: 0;
  /* Light scrim only - enough to lift the play button off busy artwork
     without dimming the thumbnail the visitor is trying to look at. */
  background: rgba(0,0,0,0.14);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) { .v-card:hover .v-card-overlay { opacity: 1; } }
.v-play-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: #0d9488; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.v-play-btn svg { width: 18px; height: 18px; margin-left: 2px; }
/* Soften the triangle's points to match the Start button on the splash screen.
   An SVG path has no border-radius, so the corners are rounded by stroking the
   same shape in its own colour with a round join - the stroke rides the outline
   and turns each hard point into an arc. */
.v-play-btn svg path,
.vault-splash-play-btn svg path {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
/* Vignette title */
/* Title sits in its own row under the thumbnail rather than as an overlay on
   top of it - the gradient scrim used to eat the bottom third of every piece
   of key art, and long names still clipped against it. */
.v-card-info {
  padding: 8px 9px 8px;
  background: transparent;
  pointer-events: none;
}
.v-card-name {
  display: block; font-size: 0.78rem; font-weight: 700; color: #eef2f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0; letter-spacing: 0.1px; text-align: center;
}
@media (hover: hover) and (pointer: fine) { .v-card:hover .v-card-info { background: #1a2438; } }

/* Light theme: the label row is now solid rather than a scrim over artwork,
   so it has to follow the vault theme - a dark strip under every tile read as
   a mistake against the light grid. */
.vault-overlay.vault-light .v-card { background: transparent; border-color: rgba(21,128,61,0.18); }
.vault-overlay.vault-light .v-card-info { background: transparent; }
.vault-overlay.vault-light .v-card-name { color: #1a202c; }
@media (hover: hover) and (pointer: fine) { .vault-overlay.vault-light .v-card:hover .v-card-info { background: transparent; } }
.v-card-empty { text-align: center; color: #64748b; font-size: 0.9rem; padding: 60px 20px; grid-column: 1/-1; }

/* ── Vault skeleton loading ── */
@keyframes vault-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.v-card-skeleton { pointer-events: none; cursor: default; }
.v-card-skeleton .v-thumb {
  background: linear-gradient(90deg, #22304a 25%, #2a3a5a 50%, #22304a 75%);
  background-size: 800px 100%;
  animation: vault-shimmer 1.4s infinite linear;
}
.vault-overlay.vault-light .v-card-skeleton .v-thumb {
  background: linear-gradient(90deg, #ebebeb 25%, #d8d8d8 50%, #ebebeb 75%);
  background-size: 800px 100%;
}

/* Play view */
.vault-play-view { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.vault-split { display: flex; flex: 1; min-height: 0; }
.vault-side-left, .vault-side-right {
  width: 180px; flex-shrink: 0; background: #1b2335;
  overflow-y: auto; padding: 10px 8px;
}
.vault-side-left { }
.vault-side-right { }
.vault-side-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #64748b; padding: 4px 8px 10px; }
.vault-side-card { display: block; border-radius: 4px; overflow: hidden; background: #141d30; margin-bottom: 8px; cursor: pointer; border: 1px solid #22304a; transition: border-color 0.15s; }
@media (hover: hover) and (pointer: fine) { .vault-side-card:hover { border-color: #0d9488; } }
.vault-side-thumb { width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #17213a; }
.vault-side-info { padding: 5px 8px 6px; }
.vault-side-title { font-size: 0.68rem; font-weight: 600; color: #b8c4da; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vault-main-frame { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.vault-frame-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1b2335; flex-shrink: 0; position: relative; }
.vault-frame-left { display: flex; align-items: center; gap: 6px; }
.vault-frame-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; pointer-events: none; max-width: calc(100% - 200px); }
.vault-frame-center > * { pointer-events: auto; }
.vault-play-title { font-size: 1rem; font-weight: 700; color: #eef2f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
.vault-fs-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; background: #17213a; border: 1px solid #22304a; color: #8b9bb8; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.vault-fs-btn:hover { color: #eef2f9; border-color: #0d9488; }
.vault-frame-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 480px) {
  /* Centering via position:absolute expands the title equally in both
     directions from the header's midpoint, but the right button cluster
     (fav/fullscreen/reload) is wider than the left Back button - so a
     long title still collided with it well before any max-width buffer
     could account for the imbalance. Left-align it in normal flex flow
     instead, so it only ever takes the space actually left over between
     the two button groups. */
  .vault-frame-header { padding: 8px 10px; }
  .vault-frame-center {
    position: static;
    left: auto;
    transform: none;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    justify-content: flex-start;
    margin: 0 8px;
  }
  .vault-play-title { text-align: left; font-size: 0.88rem; }
}
#vault-loader-bar { position: absolute; bottom: -2px; left: 0; right: 0; height: 4px; background: transparent; pointer-events: none; transition: opacity 0.3s; overflow: hidden; }
#vault-loader-fill {
  position: relative;
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #15803d, #22a06b);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(21,128,61,0.7);
}
#vault-loader-fill::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7));
}
.vault-play-fav-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; background: #17213a; border: 1px solid #22304a; color: #8b9bb8; font-size: 0.95rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; }
.vault-play-fav-btn:hover { color: #f43f5e; border-color: #f43f5e; }
.vault-play-fav-btn.active { color: #f43f5e; border-color: #f43f5e; background: rgba(244,63,94,0.1); }
.vault-play-fav-btn.pop { animation: v-fav-pop 0.28s ease; }
@keyframes v-fav-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
.vault-overlay.vault-light .vault-play-fav-btn { background: #f0f0f0; border-color: #d0d0d0; color: #888; }
.vault-overlay.vault-light .vault-play-fav-btn:hover { color: #f43f5e; border-color: #f43f5e; }
.vault-overlay.vault-light .vault-play-fav-btn.active { color: #f43f5e; border-color: #f43f5e; background: rgba(244,63,94,0.08); }
#vault-iframe { width: 100%; height: 100%; border: none; flex: 1; }

body:has(.vault-overlay.open) header { display: none; }

/* ===== REQUEST GAME PANEL ===== */
.vault-codes-link i { color: #facc15 !important; }
.vault-codes-link { border-bottom: none; color: #ca8a04 !important; font-weight: 600; }
.vault-codes-link.active { color: #facc15 !important; border-left-color: #facc15; }
.vault-codes-panel { flex-direction: column; padding: 6px 12px 12px; overflow-y: auto; height: 100%; box-sizing: border-box; }
#vault-gba-panel { padding: 0; }
.codes-header { margin-bottom: 16px; }
.codes-title { font-size: 1.1rem; font-weight: 800; color: #eef2f9; margin-bottom: 10px; }
.codes-search { width: 100%; box-sizing: border-box; padding: 7px 12px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); color: #eef2f9; font-size: 0.85rem; font-family: inherit; outline: none; transition: border-color 0.18s, background 0.18s; }
.codes-search::placeholder { color: rgba(255,255,255,0.35); }
.codes-search:focus { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
.vault-overlay.vault-light .codes-search { background: #fff; border-color: #d4d4d4; color: #111; }
.vault-overlay.vault-light .codes-search::placeholder { color: #aaa; }
.vault-overlay.vault-light .codes-search:focus { border-color: #666; background: #fff; }

/* ===== GBA EMULATOR PANEL ===== */
.gba-dropzone {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 20px 12px; box-sizing: border-box;
  transition: background 0.18s;
}
.gba-dropzone.gba-drag-over { background: rgba(139,92,246,0.08); }
.vault-overlay.vault-light .gba-dropzone.gba-drag-over { background: rgba(139,92,246,0.06); }
.gba-dropzone-icon { font-size: 2.5rem; color: #a78bfa; margin-bottom: 14px; }
.gba-dropzone-title { font-size: 1rem; font-weight: 800; color: #f1ece6; margin-bottom: 6px; }
.gba-dropzone-sub { font-size: 0.8rem; color: #a89880; line-height: 1.5; margin-bottom: 16px; max-width: 360px; }
.gba-dropzone-sub code { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 6px; font-size: 0.85em; color: #f1ece6; }
.gba-file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #7c3aed; color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 10px 20px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.gba-file-btn:hover { background: #6d28d9; }

/* Same containment pattern as the regular game frame (#vault-iframe: 100%
   width/height, no fixed pixel sizing) - EmulatorJS otherwise sizes its
   internal canvas to the ROM's native resolution scaled up, which can be
   wider than this panel and forces the whole panel to scroll horizontally. */
.gba-player-wrap {
  width: 100%; height: 100%; max-width: 100%; overflow: hidden;
  display: flex; flex-direction: column;
}
.gba-player-wrap .vault-frame-header { flex-shrink: 0; position: relative; }
.gba-game-host { flex: 1; min-height: 0; width: 100%; max-width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.gba-game-host canvas { width: 100% !important; height: 100% !important; object-fit: contain; }
.gba-game-host canvas { width: 100% !important; height: 100% !important; object-fit: contain; }

/* Full-height box holding both the dropzone and the shortcut guide, so the
   two disappear together once a ROM loads and the box always matches the
   width other vault screens (game grid / play view) use - no independent
   max-width narrowing it down. */
.gba-upload-box {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 12px 60px; box-sizing: border-box;
}
/* Shrinkable (not flex:none) so the dropzone gives up space to the
   keyboard-shortcut table when it expands - the table's own max-height +
   scroll (below) is what actually bounds the total growth, so this box
   doesn't need overflow:hidden and won't crop anything off the top when
   centering a taller expanded state. */
.gba-upload-box .gba-dropzone { flex: 0 1 auto; min-height: 0; }
.gba-kbd-guide { width: 100%; max-width: 480px; flex-shrink: 0; margin: 4px 0 0; box-sizing: border-box; }
/* One unified box - heading + table together, no separate toggle bar over a
   separate card. Nothing to collapse, it's always shown. */
.gba-kbd-table-wrap { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; }
.gba-kbd-heading {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); color: #f1ece6; font-size: 0.85rem; font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gba-kbd-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.gba-kbd-table-wrap th {
  text-align: left; padding: 4px 12px; background: rgba(255,255,255,0.05);
  color: #a89880; font-weight: 700; text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.03em;
}
.gba-kbd-table-wrap td { padding: 4px 12px; border-top: 1px solid rgba(255,255,255,0.06); color: #d9cdb8; }
.gba-kbd-table-wrap kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 0.68rem; font-weight: 700; color: #a89880;
  background: #1e1509; border: 1px solid #3a2e1e; border-bottom: 2px solid #3a2e1e;
  border-radius: 4px; padding: 1px 5px; letter-spacing: 0.02em;
}
.vault-overlay.vault-light .gba-kbd-table-wrap { border-color: #e0e0e0; }
.vault-overlay.vault-light .gba-kbd-heading { background: #f1f4fa; border-color: #e0e0e0; color: #1a202c; }
.vault-overlay.vault-light .gba-kbd-table-wrap th { background: #f1f4fa; color: #666; }
.vault-overlay.vault-light .gba-kbd-table-wrap td { color: #1a202c; border-color: #eee; }
.vault-overlay.vault-light .gba-kbd-table-wrap kbd { background: #eef1f7; color: #1a202c; border-color: #d0d0d0; }
.vault-overlay.vault-light .gba-dropzone-title { color: #1a202c; }
.vault-overlay.vault-light .gba-dropzone-sub { color: #666; }
.vault-overlay.vault-light .gba-dropzone-sub code { background: #eee; color: #1a202c; }

/* GBA panel reuses .vault-side-card/.vault-side-thumb/.vault-side-title as-is
   (same markup as the play view's "More"/"Up Next" rails) - only the purple
   hover border below is specific to this panel, to match the GBA tab's own
   accent color instead of the orange used on regular game card hovers. */
#gba-side-cards .vault-side-thumb,
#gba-side-cards-right .vault-side-thumb { border: 1px solid transparent; transition: border-color 0.15s; }
#gba-side-cards .vault-side-card:hover .vault-side-thumb,
#gba-side-cards-right .vault-side-card:hover .vault-side-thumb { border-color: #6d28d9; }

/* Flash the dropzone border when a shelf card is tapped, so the "load this
   one yourself" hint reads as a response to the click rather than nothing
   happening. */
@keyframes gba-dz-pulse { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(139,92,246,0); } 50% { box-shadow: inset 0 0 0 2px rgba(167,139,250,0.8); } }
.gba-dropzone.gba-dz-pulse { border-radius: 10px; animation: gba-dz-pulse 0.6s ease-in-out 2; }

/* ROM loading progress bar */
.gba-load-bar-wrap { width: 100%; max-width: 320px; margin-top: 6px; }
.gba-load-bar-track { width: 100%; height: 4px; background: transparent; border-radius: 0 3px 3px 0; overflow: hidden; position: relative; }
.gba-load-bar-fill {
  position: relative; height: 100%; width: 0%;
  background: linear-gradient(90deg, #15803d, #22a06b);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(21,128,61,0.7);
  transition: width 0.15s ease;
}
.gba-load-bar-fill::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7));
}
.gba-load-bytes { font-size: 0.72rem; color: #a89880; margin-top: 4px; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }
.vault-overlay.vault-light .gba-load-bytes { color: #888; }

.codes-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.codes-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.codes-row:hover { background: rgba(0,0,0,0.35); }
.codes-thumb { width: 28px; height: 28px; border-radius: 3px; object-fit: cover; flex-shrink: 0; margin-right: 8px; background: #141d30; }
.codes-name { font-size: 0.82rem; color: #eef2f9; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.codes-code { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 700; color: #facc15; background: rgba(250,204,21,0.12); padding: 2px 8px; border-radius: 3px; flex-shrink: 0; letter-spacing: 2px; }
.vault-overlay.vault-light .codes-title { color: #111; }
.vault-overlay.vault-light .codes-name { color: #222; }
.vault-overlay.vault-light .codes-code { color: #dc2626; background: rgba(220,38,38,0.1); }
.vault-overlay.vault-light .codes-row:hover { background: rgba(0,0,0,0.08); }
.codes-empty { color: var(--text-muted); font-size: 0.85rem; padding: 16px 0; text-align: center; }
.vault-cat-exit-btn {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  font-size: 0.85rem; font-weight: 700;
  color: #fff;
  background: #ef4444;
  border: none;
  border-radius: 4px;
  cursor: pointer; transition: background 0.18s;
  white-space: nowrap; text-align: left;
  width: 100%; flex-shrink: 0;
  box-sizing: border-box;
}
.vault-cat-exit-btn:hover { background: #dc2626; }
.vault-req-panel { padding: 24px 20px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.req-header { margin-bottom: 22px; }
.req-title { font-size: 1.15rem; font-weight: 800; color: #eef2f9; margin-bottom: 4px; }
.req-sub { font-size: 0.82rem; color: #8b9bb8; }
.req-loading { color: #64748b; font-size: 0.88rem; padding: 8px 0; }

/* ── Poll options grid (Instagram-style) ── */
.req-poll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.req-poll-option {
  position: relative; overflow: hidden;
  border: 1.5px solid #2a3a5a; border-radius: 4px;
  padding: 10px 12px; cursor: pointer;
  background: #141d30;
  transition: border-color 0.2s, transform 0.12s;
  min-height: 52px; display: flex; flex-direction: column; justify-content: center;
  user-select: none;
}
.req-poll-option:hover:not(.req-revealed) { border-color: #0d9488; transform: translateY(-1px); }
.req-poll-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  background: rgba(194,65,12,0.22); border-radius: 6px;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.req-poll-option.req-my-vote .req-poll-fill { background: rgba(21,128,61,0.32); }
.req-poll-option.req-my-vote { border-color: #0d9488; }
.req-poll-label {
  position: relative; font-size: 0.82rem; font-weight: 700;
  color: #eef2f9; line-height: 1.3; margin-bottom: 3px;
}
.req-poll-bottom {
  position: relative; display: flex; align-items: center; justify-content: space-between;
}
.req-poll-pct {
  font-size: 0.75rem; font-weight: 700; color: #15803d;
  opacity: 0; transition: opacity 0.4s;
}
.req-poll-check {
  font-size: 0.7rem; color: #15803d; font-weight: 700;
  opacity: 0; transition: opacity 0.3s;
}
.req-poll-option.req-revealed .req-poll-pct { opacity: 1; }
.req-poll-option.req-revealed.req-my-vote .req-poll-check { opacity: 1; }
.req-poll-option.req-revealed { cursor: default; }

/* ── Poll skeleton ── */
.req-poll-option.req-skeleton { cursor: default; pointer-events: none; }
.req-skel-line {
  height: 11px; width: 70%; border-radius: 3px;
  background: linear-gradient(90deg, #22304a 25%, #2a3a5a 50%, #22304a 75%);
  background-size: 200% 100%; animation: req-shimmer 1.4s infinite;
}
.req-skel-pct {
  display: inline-block; height: 9px; width: 28px; border-radius: 2px;
  background: linear-gradient(90deg, #22304a 25%, #2a3a5a 50%, #22304a 75%);
  background-size: 200% 100%; animation: req-shimmer 1.4s infinite;
}
@keyframes req-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Custom suggest section ── */
.req-divider { border: none; height: 20px; margin: 0; }
.req-custom-label { font-size: 0.82rem; color: #8b9bb8; margin-bottom: 10px; }
.req-custom-row { display: flex; gap: 8px; }
.req-custom-input {
  flex: 1; background: #17213a; border: 1.5px solid #22304a; border-radius: 6px;
  padding: 10px 14px; color: #eef2f9; font-size: 0.88rem; outline: none; font-family: inherit;
}
.req-custom-input:focus { border-color: #0d9488; }
.req-submit-btn {
  background: #0d9488; color: #fff; border: none; border-radius: 6px;
  padding: 10px 18px; font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.req-submit-btn:hover { background: #15803d; }
.req-msg { font-size: 0.82rem; margin-top: 10px; min-height: 18px; }
.req-msg.ok  { color: #22c55e; }
.req-msg.err { color: #ef4444; }

/* ===== VAULT LIGHT THEME ===== */
.vault-overlay.vault-light { background: #f5f6f7; }
/* J2ME screen bg follows light theme */
.vault-overlay.vault-light .j2me-vault-body { background: #f0f1f3 !important; }

/* Sidebar box */
.vault-overlay.vault-light .j2me-games-sidebar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(6px) !important;
}
.vault-overlay.vault-light .j2me-games-sidebar-header {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
.vault-overlay.vault-light .j2me-games-sidebar-title {
  color: #475569 !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
/* Scrollbar on light bg */
.vault-overlay.vault-light .j2me-games-grid-scroll {
  scrollbar-color: rgba(71,85,105,0.25) transparent !important;
}
.vault-overlay.vault-light .j2me-games-grid-scroll::-webkit-scrollbar-thumb {
  background: rgba(71,85,105,0.25) !important;
}
/* Game cards */
.vault-overlay.vault-light .j2me-game-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.vault-overlay.vault-light .j2me-game-card span {
  color: #414f63 !important;
}
.vault-overlay.vault-light .j2me-game-card:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 4px 12px rgba(13,148,136,0.15) !important;
}
.vault-overlay.vault-light .vault-topbar { background: #f5f6f7; }
.vault-overlay.vault-light .vault-topbar-btn { background: #f0fbf4; border-color: #bfe8d2; color: #15803d; }
.vault-overlay.vault-light .vault-topbar-btn:hover { color: #116932; background: #dcf5e6; border-color: #15803d; }
.vault-overlay.vault-light .vault-discord-bar { background: rgba(88,101,242,0.08); border-bottom-color: rgba(88,101,242,0.2); }
.vault-overlay.vault-light .vault-discord-bar-text { color: #555; }
.vault-overlay.vault-light .vault-discord-bar-close { color: #888; }
.vault-overlay.vault-light .vault-discord-bar-close:hover { color: #111; background: rgba(0,0,0,0.06); }
/* J2ME toggle button always stays dark regardless of vault theme */
.vault-overlay.vault-light .vault-j2me-animated-btn { background: #262626 !important; border-color: transparent !important; }
.vault-overlay.vault-light .vault-j2me-animated-btn .vjb-content { background: rgba(10, 10, 10, 0.9) !important; }
.vault-overlay.vault-light .vault-j2me-animated-btn .vjb-text { background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.6) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.vault-overlay.vault-light .vault-sidebar-toggle { background: #f0fbf4; border-color: #bfe8d2; color: #15803d; }
.vault-overlay.vault-light .vault-sidebar-toggle:hover { color: #116932; background: #dcf5e6; border-color: #15803d; }
.vault-overlay.vault-light .vault-search { background: #fff; border-color: #d4d4d4; color: #111; }
.vault-overlay.vault-light .vault-search:focus { border-color: #15803d; background: #fff; }
.vault-overlay.vault-light .vault-search::placeholder { color: #aaa; }
.vault-overlay.vault-light .vault-search-icon { color: #aaa; }
.vault-overlay.vault-light .vault-search-clear { color: #aaa; }
.vault-overlay.vault-light .vault-search-clear:hover { color: #333; background: rgba(0,0,0,0.06); }
.vault-overlay.vault-light .vault-cat-sidebar { background: #f5f6f7; }
.vault-overlay.vault-light .vault-cat-link { color: #666; }
.vault-overlay.vault-light .vault-cat-link i { background: rgba(21,128,61,0.1); color: #15803d; }
.vault-overlay.vault-light .vault-cat-link:hover { color: #111; background: #f0fbf4; }
.vault-overlay.vault-light .vault-cat-link.active { color: #fff; font-weight: 700; background: #15803d; }
.vault-overlay.vault-light .vault-cat-link.active i { background: rgba(255,255,255,0.22); color: #fff; }
.vault-overlay.vault-light .v-card { background: transparent; border-color: rgba(21,128,61,0.18); }
@media (hover: hover) and (pointer: fine) { .vault-overlay.vault-light .v-card:hover { border-color: #15803d; } }
.vault-overlay.vault-light .v-thumb { background: #e8e8e8; }
.vault-overlay.vault-light .v-thumb::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); background-size: 200% 100%; }
.vault-overlay.vault-light .v-card-empty { color: #aaa; }
.vault-overlay.vault-light .v-play-btn { background: #15803d; }
.vault-overlay.vault-light .vault-side-left, .vault-overlay.vault-light .vault-side-right { background: #f5f6f7; }

.vault-overlay.vault-light .vault-side-label { color: #aaa; }
.vault-overlay.vault-light .vault-side-card { background: #fff; border-color: #e0e0e0; }
@media (hover: hover) and (pointer: fine) { .vault-overlay.vault-light .vault-side-card:hover { border-color: #15803d; } }
.vault-overlay.vault-light .vault-side-thumb { background-color: #e8e8e8; }
.vault-overlay.vault-light .vault-side-title { color: #555; }
.vault-overlay.vault-light .vault-frame-header { background: #f5f6f7; }
.vault-overlay.vault-light .vault-play-title { color: #111; }
.vault-overlay.vault-light .vault-fs-btn { background: #f0f0f0; border-color: #d0d0d0; color: #666; }
.vault-overlay.vault-light .vault-fs-btn:hover { color: #111; border-color: #15803d; }

.vault-overlay.vault-light .vault-cat-exit-btn { background: #ef4444; color: #fff; }
.vault-overlay.vault-light .vault-cat-exit-btn:hover { background: #dc2626; }
.vault-overlay.vault-light .req-title { color: #111; }
.vault-overlay.vault-light .req-sub { color: #666; }
.vault-overlay.vault-light .req-loading { color: #aaa; }
.vault-overlay.vault-light .req-poll-option { background: #fff; border-color: #ddd; }
.vault-overlay.vault-light .req-poll-option:hover:not(.req-revealed) { border-color: #15803d; }
.vault-overlay.vault-light .req-poll-fill { background: rgba(80,80,80,0.12); }
.vault-overlay.vault-light .req-poll-option.req-my-vote .req-poll-fill { background: rgba(80,80,80,0.22); }
.vault-overlay.vault-light .req-poll-option.req-my-vote { border-color: #15803d; }
.vault-overlay.vault-light .req-poll-label { color: #111; }
.vault-overlay.vault-light .req-poll-pct { color: #15803d; }
.vault-overlay.vault-light .req-poll-check { color: #15803d; }
.vault-overlay.vault-light .req-skel-line { background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%); background-size: 200% 100%; }
.vault-overlay.vault-light .req-skel-pct { background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%); background-size: 200% 100%; }

.vault-overlay.vault-light .req-custom-label { color: #666; }
.vault-overlay.vault-light .req-custom-input { background: #fff; border-color: #d4d4d4; color: #111; }
.vault-overlay.vault-light .req-custom-input:focus { border-color: #15803d; }
.vault-overlay.vault-light .req-submit-btn { background: #15803d; }
.vault-overlay.vault-light .req-submit-btn:hover { background: #116932; }

/* ===== 1366×768 LAPTOP OPTIMISATION ===== */
@media (max-width: 1400px) and (min-width: 769px) {
  .page-wrap { padding: 28px 32px 32px; }
  .home-hero { padding: 0 0 22px; }
  .home-layout { gap: 36px; }
  .tools-full-row { padding: 40px 2rem; }
  .about-topics-block { padding: 1.4rem 2rem 1.2rem; }
}

/* Hero responsive */
@media (max-width: 768px) {
  .hero { height: auto; min-height: 0; padding: 56px 0 44px; max-height: none; }
  .hero-sub { font-size: 0.98rem; }
  .hero-badges { display: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hero { padding: 60px 0 48px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) { .vault-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
@media (max-width: 900px) { .vault-cat-sidebar { display: none; } .vault-side-right { display: none; } }

/* ===== TABLET & MOBILE HEADER/FOOTER (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  /* Header */
  .header-nav, .site-tagline { display: none; }
  .mob-menu-btn { display: flex; }
  .a11y-wrap { display: none; }
  .header-inner { height: 54px; padding: 0 16px; }
  .logo { font-size: 1.4rem; }
  .logo-img { width: 26px; height: 26px; }

  /* Footer — stack vertically, centered */
  footer { height: auto; padding: 20px 16px; }
  .footer-inner { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .footer-nav { margin-left: 0; flex-wrap: wrap; gap: 4px; justify-content: center; }
  .footer-nav a { font-size: 0.75rem; padding: 4px 8px; }
  .footer-copy { font-size: 0.75rem; }
}

/* ===== TABLET (769px–1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Page */
  .page-wrap { padding: 24px 24px 28px; }
  .home-layout { gap: 32px; }

  /* Tools split: stack earlier on tablet */
  .tools-split-layout { grid-template-columns: 1fr; }
  .tools-mascot-col { position: static; width: 100%; max-width: 280px; margin: 0 auto; }
  .tools-mascot-desktop { display: none; }
  .tools-mascot-mobile { display: block; }
  .tools-grid-col .home-tools-grid { grid-template-columns: repeat(3, 1fr); }

  /* Vault — hide side panels in grid/play view */
  .vault-side-left { display: none; }
  .vault-side-right { display: none; }
  .vault-sidebar-toggle { display: none; }

  /* Vault grid — tighter cards */
  .vault-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: auto; }

  /* Vault topbar — prevent overlap */
  .vault-topbar-center { position: static; transform: none; flex: 1; min-width: 0; }
  #vault-theme-btn { margin-left: 0; }
  .vault-esc-hint { display: none; }

  /* Play view */
  .vault-in-play .vault-topbar-center { flex: 1; min-width: 0; }
  .vault-in-play .vault-search-wrap { min-width: 0; max-width: none; }
}

@media (max-width: 768px) {
  /* Layout — one consistent 20px side gutter for every homepage section
     (hero, feature row, about block, tools row, and the page-wrap sections
     all previously used different values: 16/24/32px). */
  .page-wrap { padding: 24px 20px 24px; }
  .hero { padding: 44px 20px 36px; }
  .feat-row-section { padding: 32px 20px 36px; }
  .about-topics-block, .tools-full-row { padding-left: 20px; padding-right: 20px; }
  .home-hero-title { font-size: 1.7rem; }
  .home-article h1 { font-size: 1.4rem; }
  .home-hero { padding: 0 0 28px; }
  .home-hero-desc { font-size: 0.92rem; max-width: 100%; }

  /* Vault topbar — revert search to normal flow on mobile */
  .vault-topbar { position: static; }
  .vault-topbar-center { position: static; transform: none; width: auto; flex: 1; min-width: 0; }
  #vault-theme-btn { margin-left: 0; }
  .vault-esc-hint { display: none; }

  /* Vault play view on mobile — let search fill available space, cancel auto-margin */
  .vault-in-play .vault-topbar-center { flex: 1; min-width: 0; }
  .vault-in-play .vault-search-wrap { min-width: 0; max-width: none; }
  .vault-in-play #vault-theme-btn { margin-left: 0; }

  /* Hide frame back button on mobile — use topbar back button instead */
  #vault-frame-back-btn { display: none !important; }


  /* Vault — mobile: plain 3-col 1:1 grid */
  .vault-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-auto-flow: row; }
  .v-card { height: auto; }
  .v-thumb { height: auto; aspect-ratio: 1 / 1; }
  .vault-side-left { display: none; }
  .vault-cat-sidebar { display: none; }
  .vault-side-right { display: none; }
  .vault-sidebar-toggle { display: none; }

  /* Other */
  .article-related-grid { grid-template-columns: 1fr 1fr; }
  .use-cases { grid-template-columns: 1fr; }
  .cat-hero { flex-direction: column; gap: 14px; }

  /* Article pages */
  .article-page h1 { font-size: 1.6rem; }
  .article-page { padding-top: 0; }

  /* Body text */
  .article-body, .inner-page p, .article-intro, .home-article p,
  .cat-about p, .article-body p { font-size: 0.98rem; }
}
@media (max-width: 480px) {
  .vault-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
  .article-related-grid { grid-template-columns: 1fr; }
  .ra-grid { grid-template-columns: 1fr; }
  .article-page h1, .cat-hero h1 { font-size: 1.4rem; }
  .home-hero-title { font-size: 1.5rem; }
  /* Inset the calculator on phones. Without this the 420px column simply
     fills the viewport edge to edge, so the keys render noticeably larger
     here than on solvecalc.net, which has carried this rule for a while.
     Padding rather than a smaller max-width, so the shrink comes from the
     sides and the widget stays centred. */
  .calc-col { max-width: 100%; padding-left: 28px; padding-right: 28px; }
}


/* ===== HOME SECTIONS (Tools grid + Topic cards) ===== */
.home-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 1rem;
}
.home-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1.4rem;
  letter-spacing: -.01em;
}
.sec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  color: #dc2626;
  font-size: 1.3rem;
}
.sec-text {
  text-decoration: underline;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

/* ── Home Tools Mini-Grid ── */
.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.1rem;
}
.ht-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1.3rem 1.3rem;
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.ht-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(15,23,42,0.09);
}
.ht-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: color-mix(in srgb, var(--hc, #15803d) 12%, #fff);
  flex-shrink: 0;
  color: var(--hc, #15803d);
}
.ht-name {
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.ht-desc {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.55;
}


@media (max-width: 600px) {
  .home-tools-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .ht-card { padding: 1.25rem 1.1rem 1.1rem; }
}

/* Comparison table */
.cs-compare-table-wrap { overflow-x: auto; }
/* Restyled to match the other .home-article tables: same bordered, rounded
   container, same header fill, same row dividers and hover - so the page reads
   as one consistent set of tables rather than this one looking bespoke. */
.cs-compare-table {
  width: 100%; border-collapse: collapse; min-width: 560px;
  font-size: 0.97rem;
  border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.cs-compare-table th, .cs-compare-table td {
  padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--border);
}
.cs-compare-table th:first-child, .cs-compare-table td:first-child {
  text-align: left; font-weight: 600; color: var(--text);
}
.cs-compare-table thead th {
  background: #f8fafc; font-weight: 700; color: var(--text);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.cs-compare-table tbody td { color: var(--text-muted); }
.cs-compare-table tbody tr:last-child td { border-bottom: none; }
.cs-compare-table tbody tr:hover td { background: #f8fafc; }
/* the CalcSolver column stays visually picked out */
.cs-compare-table .cs-compare-highlight {
  background: #f0fbf4; font-weight: 700; color: #15803d;
}
.cs-compare-table thead th.cs-compare-highlight {
  background: #dcf5e6; color: #15803d;
}
.cs-compare-table tbody tr:hover td.cs-compare-highlight { background: #dcf5e6; }
.cs-compare-table i.fa-circle-check { color: #16a34a; margin-right: 4px; }
.cs-compare-table i.fa-circle-xmark { color: #dc2626; margin-right: 4px; }

/* ── Story Section ── */
.home-story-section { }
.home-story-inner {
  max-width: 900px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 36px 40px;
}
.home-story-inner h2 { font-size: 1.5rem; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.home-story-inner .story-byline { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 20px; }
.home-story-inner .story-byline a { color: var(--accent); font-weight: 600; text-decoration: none; }
.home-story-inner .story-byline a:hover { text-decoration: underline; }
.home-story-inner p { color: var(--text-muted); font-size: 1.03rem; line-height: 1.75; margin: 0 0 16px; }
.home-story-inner p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .home-story-inner { padding: 24px 20px; }
}

/* ── FAQ Section ── */
.home-faq-section { }
.home-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 0 auto; }
.home-faq-item {
  border: 1px solid #b8c5d3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--card-bg);
}
.home-faq-q {
  display: block;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  user-select: none;
}
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-q::after {
  content: '+';
  float: right;
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 400;
}
.home-faq-item[open] .home-faq-q::after { content: '−'; }
.home-faq-a {
  padding: 0 20px 16px;
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ===== PERFORMANCE: disable expensive backdrop-filter on mobile ===== */
@media (max-width: 768px) {
  header { backdrop-filter: none; background: #163a26; }
}

/* ── Homepage AdsTerra ad placements ── */
.home-native-ad {
  width: 100%; overflow: hidden;
  margin: 0 0 20px;
  min-height: 60px;
}
.home-native-ad-below {
  width: 100%; overflow: hidden;
  margin: 20px 0 0;
  min-height: 60px;
}
.home-banner-300x250 {
  display: flex; align-items: center; justify-content: center;
  margin: 20px auto 0;
  min-height: 250px; width: 300px;
}
.home-banner-160x300 {
  display: flex; align-items: center; justify-content: center;
  margin: 24px auto;
  min-height: 300px; width: 160px;
}
@media (max-width: 600px) {
  .home-banner-300x250 { width: 100%; }
  .home-banner-160x300 { width: 100%; }
}

/* J2ME Simulator Navbar Button Active State (Non-glowing, clean toggle style) */
.j2me-navbar-btn.active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.vault-overlay.vault-light .j2me-navbar-btn.active {
  background: rgba(0, 0, 0, 0.15) !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Make sure the J2ME Simulator fits nicely in the Game Vault body */
.j2me-vault-body {
  position: relative;
  display: none; /* Controlled by JS toggle */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 60px) !important;
  padding: 20px !important;
  box-sizing: border-box;
  background: transparent !important; /* Inherits from vault-overlay (dark/light via theme) */
  overflow: hidden !important;
  gap: 30px;
}

/* Styles for full integration of keyboard guide and phone chassis */
.j2me-vault-body .kbd-guide {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 10 !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  width: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  color: #cbd5e1 !important; /* Theme aware: light slate in dark default */
  font-family: inherit !important;
  user-select: none !important;
}

.j2me-vault-body .kbd-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.85rem !important;
  color: #94a3b8 !important; /* Theme aware: light gray in dark default */
  gap: 12px !important;
}

.j2me-vault-body .kbd-keys {
  display: flex !important;
  gap: 4px !important;
}

.j2me-vault-body kbd {
  background: #2c3749 !important; /* Slate-800 for kbd in dark theme */
  border: 1px solid #414f63 !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  font-family: monospace !important;
  font-size: 0.75rem !important;
  color: #cbd5e1 !important;
  box-shadow: 0 1.5px 0 #414f63 !important;
  min-width: auto !important;
}

.j2me-vault-body .kbd-label {
  color: #94a3b8 !important;
}

/* Light theme overrides for kbd-guide */
.vault-overlay.vault-light .kbd-guide {
  color: #414f63 !important;
}
.vault-overlay.vault-light .kbd-row {
  color: #475569 !important;
}
.vault-overlay.vault-light kbd {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #21293c !important;
  box-shadow: 0 1.5px 0 #cbd5e1 !important;
}
.vault-overlay.vault-light .kbd-label {
  color: #64748b !important;
}

/* J2ME Zoom Controls Panel */


@media (max-width: 768px) {
  .j2me-vault-body .kbd-guide {
    display: none !important;
  }
}



.prod-container {
  position: relative !important;
  z-index: 8 !important; /* Overlay on top of vertical ads (z-index: 5) but under sidebar/kbd (z-index: 10) */
}



/* J2ME Simulator Grid Card Custom Styling */
.j2me-system-card .v-thumb {
  background: linear-gradient(135deg, #2c3749, #21293c) !important; /* Dark mode slate gradient */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vault-overlay.vault-light .j2me-system-card .v-thumb {
  background: #f1f5f9 !important; /* Light mode light-grey background */
}

.j2me-system-card img {
  width: 45% !important;
  height: 45% !important;
  object-fit: contain !important;
  margin: auto !important;
  position: absolute !important;
  inset: 0 !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) !important;
  transition: transform 0.3s ease !important;
}

.j2me-system-card:hover img {
  transform: scale(1.1) !important;
}

/* J2ME Fullscreen Button */
.j2me-fullscreen-btn {
  margin-top: 8px !important;
  width: 100% !important;
  height: 34px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  color: #414f63 !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background 0.15s, border-color 0.15s !important;
  user-select: none !important;
}

.j2me-fullscreen-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #21293c !important;
}

.j2me-fullscreen-btn:active {
  transform: translateY(0.5px) !important;
}

/* Prevent closed vault visual flash on page reload */
html.vault-pending-open #vault-overlay {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure open class is treated as active during reload */
html.vault-pending-open #vault-overlay:not(.open) {
  /* Force the overlay to behave as open immediately */
  pointer-events: auto !important;
}

/* Hide ALL main page elements so nothing ever flashes through during reload */
html.vault-pending-open header,
html.vault-pending-open main,
html.vault-pending-open .main-content,
html.vault-pending-open .hero,
html.vault-pending-open .calc-section,
html.vault-pending-open section,
html.vault-pending-open footer {
  display: none !important;
  visibility: hidden !important;
}

html.vault-pending-open #vault-j2me-view {
  display: flex !important;
}

html.vault-pending-open #vault-grid-view {
  display: none !important;
}

html.vault-pending-open .vault-search-wrap,
html.vault-pending-open #vault-sidebar-toggle,
html.vault-pending-open .vault-discord-btn,
html.vault-pending-open #vault-fav-btn {
  display: none !important;
}

/* J2ME Native Fullscreen styling */
#vault-j2me-view:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#vault-j2me-view:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* J2ME Games Sidebar and Grid Layout — theme-aware */
.j2me-games-sidebar {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  width: 250px !important;
  height: calc(100% - 48px) !important;
  background: rgba(0, 0, 0, 0.03) !important;  /* Transparent matches shortcut area */
  border: 1px solid rgba(0, 0, 0, 0.06) !important; /* Transparent matches shortcut area */
  border-radius: 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  user-select: none !important;
  overflow: hidden !important;
  backdrop-filter: blur(6px) !important;
  z-index: 10 !important;
}

/* Fixed header — never scrolls */
.j2me-games-sidebar-header {
  flex-shrink: 0 !important;
  padding: 14px 14px 10px 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Scrollable grid area below the header */
.j2me-games-grid-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 10px 8px 10px 12px !important; /* Right shrunk for scrollbar */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent !important;
}
.j2me-games-grid-scroll::-webkit-scrollbar {
  width: 4px !important;
}
.j2me-games-grid-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}
.j2me-games-grid-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3) !important;
  border-radius: 6px !important;
}
.j2me-games-grid-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55) !important;
}

.j2me-games-sidebar::-webkit-scrollbar {
  width: 5px !important; /* Custom thin scrollbar */
}
.j2me-games-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}
.j2me-games-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3) !important; /* slate-400 */
  border-radius: 6px !important;
}
.j2me-games-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5) !important;
}

.j2me-games-sidebar-title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: rgba(148, 163, 184, 0.9) !important; /* slate-400, works on dark bg */
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.j2me-coming-badge {
  display: inline-block !important;
  font-size: 8px !important; /* Concise pixel size */
  font-weight: 700 !important;
  color: #ffffff !important;
  background: #ef4444 !important; /* Premium red */
  padding: 2px 6px !important; /* Adjusted padding to prevent huge buttons */
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.j2me-games-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.j2me-game-card {
  background: rgba(0, 0, 0, 0.15) !important; /* Transparent cards */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 8px !important;
  text-align: center !important;
}

.j2me-game-card:hover {
  transform: translateY(-2px) !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 12px rgba(13, 148, 136, 0.25) !important;
}

.j2me-game-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 5px !important;
  margin-bottom: 6px !important;
}

.j2me-game-card span {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important; /* light slate — readable on dark */
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── Phone: Slightly darkened version of original, with filled call/end keys ── */

/* Slightly darker chassis — original was pure white, now a cool grey-silver tone */
.j2me-vault-body .retro-phone {
  background: linear-gradient(170deg, #fdfdfd 0%, #eceef1 40%, #cdd1d7 100%) !important;
  border-color: #9aa1ab !important;
  box-shadow:
    0 0 0 3px #e5e8ec,
    0 0 0 5px #878e99,
    0 6px 18px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), transform-origin 0.2s ease !important;
}

/* Filled GREEN call key */
.j2me-vault-body .phone-btn.call-key {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.j2me-vault-body .phone-btn.call-key:active {
  background: #15803d !important;
}

/* Filled RED end/cancel key */
.j2me-vault-body .phone-btn.end-key {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.j2me-vault-body .phone-btn.end-key:active {
  background: #b91c1c !important;
}

/* Hide sidebars on mobile screens */
@media (max-width: 768px) {
  .j2me-games-sidebar {
    display: none !important;
  }
}

/* J2ME Uiverse-inspired Animated Button Styles */
.vault-j2me-animated-btn {
  position: relative !important;
  background: #262626 !important; /* dark:bg-neutral-800 equivalent */
  border-radius: 9999px !important;
  padding: 1px !important;
  overflow: hidden !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: transform 0.2s !important;
  /* Match height of sibling .vault-topbar-btn exactly */
  height: 28px !important;
  align-self: center !important;
}

.vault-j2me-animated-btn:active {
  transform: scale(0.96) !important;
}

.vjb-bg-glow {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}

.vjb-glow-gradient {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 96px !important; /* size-24 equivalent */
  height: 96px !important;
  border-radius: 50% !important;
  filter: blur(24px) !important; /* blur-xl equivalent */
  background: linear-gradient(135deg, rgb(122, 105, 249), rgb(242, 99, 120), rgb(245, 131, 63)) !important;
}

.vjb-border-glow-wrap {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  animation: border-glow-translate 10s ease-in-out infinite alternate !important;
}

.vjb-border-glow-bar {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  z-index: 0 !important;
  height: 100% !important;
  width: 48px !important; /* w-12 equivalent */
  filter: blur(24px) !important; /* blur-xl equivalent */
  transform: translateX(-50%) !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, rgb(122, 105, 249), rgb(242, 99, 120), rgb(245, 131, 63)) !important;
  animation: border-glow-scale 10s ease-in-out infinite alternate !important;
}

.vjb-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 1 !important;
  background: rgba(10, 10, 10, 0.9) !important;
  border-radius: 9999px !important;
  padding: 4px 11px 4px 8px !important; /* Matches vault-topbar-btn's 5px 12px visually */
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.vjb-badge-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ef4444 !important; /* Premium red badge */
  color: #ffffff !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  padding: 1px 4px 1px 5px !important;
  border-radius: 3px !important;
  margin-left: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  position: relative !important;
  z-index: 3 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.vault-light .vault-j2me-animated-btn {
  background: #e5e5e5 !important; /* bg-neutral-200 equivalent */
}

.vault-light .vjb-content {
  background: rgba(250, 250, 250, 0.9) !important; /* bg-neutral-50/90 equivalent */
}

.vjb-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.5s !important;
}

.vault-j2me-animated-btn:hover .vjb-icon-wrap {
  transform: scale(1.05) rotate(360deg) !important;
}

.vjb-java-icon {
  opacity: 1 !important;
}

.vjb-star-shine {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  filter: blur(8px) !important; /* blur-lg equivalent */
  opacity: 0.3 !important;
  background: linear-gradient(135deg, rgb(59, 196, 242), rgb(122, 105, 249), rgb(242, 99, 120), rgb(245, 131, 63)) !important;
  animation: star-shine 14s ease-in-out infinite alternate !important;
}

.vjb-text {
  font-size: 0.72rem !important; /* text-xs equivalent */
  font-weight: 700 !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: transform 0.2s !important;
  margin-left: 2px !important;
  font-family: inherit !important;
}

.vault-light .vjb-text {
  background: linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, 0.6) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.vault-j2me-animated-btn:hover .vjb-text {
  transform: scale(1.05) !important;
}

/* Keyframes */
@keyframes border-glow-translate {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes border-glow-scale {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.5);
  }
}

@keyframes star-shine {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* ===== J2ME FULLSCREEN OVERRIDES ===== */
body.fullscreen-mode .j2me-games-sidebar,
body.fullscreen-mode .kbd-guide,
body.fullscreen-mode .j2me-zoom-controls,
body.fullscreen-mode .j2me-vertical-ad {
  display: none !important;
}

body.fullscreen-mode .j2me-vault-body .phone-wrapper {
  overflow: visible !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

body.fullscreen-mode .j2me-vault-body .retro-phone {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  transform: none !important;
}

body.fullscreen-mode .j2me-vault-body .screen-container {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Mobile & Tablet optimizations for vault navbar J2ME button */
@media (max-width: 768px) {
  .vault-j2me-animated-btn {
    width: 28px !important;
    height: 28px !important;
  }
  .vault-j2me-animated-btn .vjb-content {
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .vault-j2me-animated-btn .vjb-text,
  .vault-j2me-animated-btn .vjb-badge-new {
    display: none !important;
  }
}

/* Pre-display J2ME Simulator view when reload is pending to prevent flashing the grid */
.vault-j2me-pending-active #vault-grid-view,
.vault-j2me-pending-active #vault-play-view,
.vault-j2me-pending-active .vault-search-wrap,
.vault-j2me-pending-active #vault-sidebar-toggle,
.vault-j2me-pending-active .vault-discord-btn,
.vault-j2me-pending-active #vault-fav-btn {
  display: none !important;
}

.vault-j2me-pending-active #vault-j2me-view {
  display: flex !important;
}

.vault-j2me-pending-active #vault-back-btn {
  display: inline-flex !important;
}

/* ===== SCRATCH NOTES (ruled paper) ===== */
/* sits in a flex column with gap:16px, so this margin is on top of that -
   28 + 16 gives the pad clear separation from the calculator above it */
.notes-wrap { width: 100%; max-width: 420px; margin: 52px auto 0; }
/* full-width tinted bar so the pad reads as its own titled section */
.notes-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, rgba(21,128,61,0.10), rgba(13,148,136,0.06));
  border: 1px solid rgba(21,128,61,0.18);
  border-radius: 6px;
  padding: 11px 15px;
  margin-bottom: 12px;
}
.notes-title {
  font-size: 1.22rem; font-weight: 800; color: var(--accent);
  display: flex; align-items: center; gap: 9px; letter-spacing: -.2px;
}
.notes-title i { color: var(--accent); font-size: 1.02rem; }
.notes-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nbtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: .74rem; font-weight: 700; color: var(--text-muted);
  background: var(--card); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 10px; cursor: pointer; transition: all .14s;
}
.nbtn:hover { border-color: var(--accent); color: var(--accent); }
.nbtn:active { transform: translateY(1px); }
.nbtn:disabled { opacity: .4; cursor: default; transform: none; border-color: var(--border); color: var(--text-muted); }
.nbtn i { font-size: .78rem; }
.nbtn-danger:hover { border-color: #dc2626; color: #dc2626; }

/* the paper itself: ruled lines drawn with a repeating gradient, red margin rule
   down the left, and a faint shadow so it lifts off the page like a real pad */
.paper {
  position: relative; border-radius: 6px; overflow: hidden;
  background: #fffef7;
  border: 1px solid #e6e0cd;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.paper-margin {
  position: absolute; top: 0; bottom: 0; left: 34px; width: 1px;
  background: rgba(224,90,90,.45); z-index: 1; pointer-events: none;
}
.paper-area {
  position: relative; z-index: 2;
  display: block; width: 100%; min-height: 230px; resize: vertical;
  border: 0; outline: none; background: transparent;
  padding: 0 14px 0 46px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .9rem;
  /* line-height must equal the gradient period so text sits ON the rules */
  line-height: 28px;
  color: #26303d;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 27px, rgba(90,160,120,.32) 27px 28px);
  background-attachment: local;
}
.paper-area::placeholder { color: #a9b2bd; }
.notes-meta { margin-top: 7px; font-size: .72rem; color: var(--text-muted); opacity: .85; text-align: right; }

@media (max-width: 600px) {
  .notes-wrap { max-width: 100%; margin-top: 40px; }
  .notes-title { font-size: 1.1rem; }
  .notes-head { padding: 10px 13px; }
  .nbtn span { display: none; }        /* icons only, keeps the toolbar on one row */
  .nbtn { padding: 8px 11px; }
  .nbtn i { font-size: .9rem; }
  .paper-area { min-height: 200px; }
}

/* Printing: hide the whole site and print just the note on clean paper. */
@media print {
  body * { visibility: hidden !important; }
  #notes, #notes * { visibility: visible !important; }
  #notes { position: absolute; inset: 0; margin: 0; max-width: 100%; }
  .notes-toolbar, .notes-meta { display: none !important; }
  .paper { border: 0; box-shadow: none; background: #fff; }
  .paper-area {
    min-height: auto; height: auto; overflow: visible;
    color: #000; background-image: none; padding-left: 0;
  }
  /* an empty textarea still paints its placeholder, which was ending up in the
     printed page / PDF as if it were the note's text */
  .paper-area::placeholder { color: transparent !important; opacity: 0 !important; }
  .paper-area::-webkit-input-placeholder { color: transparent !important; opacity: 0 !important; }
  .paper-margin { display: none; }
}

/* ===========================================================================
   Smart-TV / remote (D-pad) focus visibility
   ---------------------------------------------------------------------------
   Smart-TV browsers are driven by a remote: the user moves FOCUS between
   elements and presses OK. Without a visible focus ring that navigation is
   impossible to follow. `:focus-visible` only matches keyboard/remote focus
   (never mouse or touch), so this is invisible to desktop/mobile users and
   changes nothing about how the site already looks. The halo keeps the ring
   visible on both the light pages and the dark vault overlay. !important
   overrides the scattered `outline:none` rules that hide the mouse outline.
   =========================================================================== */
:focus-visible {
  outline: 3px solid #15803d !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(21, 128, 61, 0.45) !important;
  border-radius: 3px;
}
/* On the dark vault overlay, swap to a brighter ring for contrast. */
.vault-overlay :focus-visible {
  outline-color: #fbbf24 !important;
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.35) !important;
}


/* ── Touch input: one tap opens a game ──────────────────────────────────────
   Every :hover rule on a vault card is now behind (hover: hover), because a
   phone browser will spend the first tap painting the hover state and only
   navigate on the second - which is why opening a game took two taps. With no
   hover styles to apply, the first tap is the one that counts.

   Two of those rules were doing real work though, so touch gets its own
   version: the heart only appeared on hover, and the play button did too. */
@media (hover: none), (pointer: coarse) {
  /* the favourite heart has to be permanently reachable without a hover */
  .v-card .v-fav-btn { opacity: 1; transform: scale(1); }
  /* No centre play circle on touch: tapping the card itself launches the game
     (the whole card is the tap target), so the button is redundant and just
     covers the artwork. Overlay + button hidden; the card thumbnail shows clean. */
  .v-card .v-card-overlay { opacity: 0; background: transparent; }
  .v-card .v-play-btn { display: none; }
  /* no 300 ms double-tap-to-zoom wait on the things you tap to play */
  .v-card, .vault-side-card, .v-fav-btn { touch-action: manipulation; }
}

/* The vault Discord button has been removed from index.ejs entirely. This rule
   stays as a belt-and-braces guard in case the markup is ever restored by hand
   before someone means to show it again. */
.vault-discord-btn { display: none !important; }

/* Final safety net: force pure white behind the entire page regardless of
   any earlier cascade issue. Added after repeated reports of grey margins
   showing outside the centered content column. */
html, body, .page-wrap, .home-layout, .content-col {
  background-color: #ffffff !important;
}

/* Fullscreen control: icon plus a "Fullscreen" label on desktop, icon only on
   phones. .vault-fs-btn is a fixed 32px square shared with the reload button,
   so the wider treatment goes on a modifier class rather than the base rule,
   which would stretch the reload button too.
   Mobile-first: the label is hidden by default and only revealed above the
   desktop breakpoint, so narrow screens keep the compact header. */
.vault-fs-btn--wide { gap: 7px; }
.vault-fs-label { display: none; font-size: .82rem; font-weight: 600; line-height: 1; white-space: nowrap; }
@media (min-width: 769px) {
  .vault-fs-btn--wide { width: auto; padding: 0 12px; }
  .vault-fs-label { display: inline; }
}

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 500;
  width: 46px; height: 46px; border-radius: 4px; border: none;
  background: #d1d5db; color: #374151; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background 0.15s;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: #c3c9d1; }
@media (max-width: 600px) {
  .scroll-top-btn { right: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 0.95rem; }
}

/* ===== SHARE ROW ===== */
.share-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 8px; }
.share-row-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.share-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); color: var(--text-muted); font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.15s, box-shadow 0.15s;
}
.share-row-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.16); }

/* ===== TOOL PAGE SHARED CHROME (share button + article prose) =====
   Was previously copy-pasted inside every tool page's own <style> block
   (21 near-identical copies). Centralized here once - one definition to
   keep consistent and one place to fix if it needs to change. */
.tool-share-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tool-share-btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; padding: .4rem .9rem; border-radius: 50px; border: 1.5px solid var(--border); background: transparent; cursor: pointer; color: var(--text-muted); transition: border-color .15s, color .15s; }
.tool-share-btn:hover { border-color: var(--accent); color: var(--accent); }

.tool-article { margin: 2.5rem 0 3rem; padding: 0 1rem 2.5rem; }
.tool-article h2 { font-size: 1.35rem; font-weight: 800; margin: 1.8rem 0 .6rem; color: var(--text); }
.tool-article p { font-size: 1.05rem; line-height: 1.85; margin: 0 0 .8rem; color: var(--text-muted); }
.tool-article ul, .tool-article ol { font-size: 1.05rem; line-height: 1.85; color: var(--text-muted); padding-left: 1.4rem; margin: 0 0 1rem; }
.tool-article li { margin-bottom: .35rem; }
.ta-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: 1rem; }
.ta-table th { background: var(--accent); color: #fff; padding: .55rem .9rem; text-align: left; font-weight: 700; }
.ta-table td { padding: .5rem .9rem; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.ta-table tr:last-child td { border-bottom: none; }
.ta-table tr:nth-child(even) td { background: rgba(0,0,0,.03); }
.ta-box { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0 1.4rem; font-size: 1.02rem; color: var(--text); }
.ta-box strong { display: block; margin-bottom: .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
@media (max-width: 700px) {
  .ta-table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* Share row inside a tool's article section - distinct name from the
   homepage's own .share-row (different markup, would otherwise collide). */
.tool-article-share { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.tool-article-share span { font-size: .82rem; font-weight: 700; color: var(--text-muted); margin-right: .2rem; }
.tool-article-share .share-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; cursor: pointer; font-size: .9rem; color: var(--text-muted); text-decoration: none; transition: border-color .15s, color .15s, transform .15s; }
.tool-article-share .share-icon-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.tool-article-share .share-icon-btn.copy-btn { font-size: .75rem; width: auto; padding: 0 .8rem; border-radius: 50px; gap: .3rem; }

/* ===== TOOL WIDGET (shared clean/minimal calculator UI) =====
   One visual language for every calculator tool: flat cards, a single
   accent color pulled from the site's own --accent (not a bespoke color
   per tool), subtle 1px borders instead of gradients/heavy shadows. Each
   tool's own <style> block should only add what's specific to that tool
   (a custom SVG diagram, a chart), not redefine this shared shell. */
.tw-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 2rem 1.75rem; max-width: 720px; margin: 0 auto 2rem; box-sizing: border-box; }
.tw-hero { text-align: center; margin-bottom: 1.75rem; }
.tw-hero h1 { font-size: 1.9rem; font-weight: 700; color: var(--text); margin: 0 0 .4rem; letter-spacing: -.3px; }
.tw-hero p { font-size: 1rem; color: var(--text-muted); margin: 0; }

.tw-op-group { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.tw-op-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.15rem; font-weight: 600; border-radius: 8px; width: 44px; height: 44px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; display: flex; align-items: center; justify-content: center; }
.tw-op-btn:hover { border-color: var(--accent); color: var(--accent); }
.tw-op-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.tw-fields { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.tw-field { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.5rem; text-align: center; min-width: 130px; box-sizing: border-box; }
.tw-field label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); display: block; margin-bottom: .5rem; }
.tw-num-input { width: 72px; text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--text); border: none; border-bottom: 2px solid var(--border); background: transparent; outline: none; padding: .15rem; transition: border-color .15s; }
.tw-num-input:focus { border-bottom-color: var(--accent); }
.tw-divider-line { width: 72px; height: 2px; background: var(--text); margin: .35rem auto; border-radius: 1px; }
.tw-op-display { font-size: 1.8rem; font-weight: 700; color: var(--accent); }

.tw-btn-primary { display: block; margin: 0 auto 1.75rem; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; border: none; border-radius: 8px; padding: .8rem 2.4rem; cursor: pointer; transition: background .15s, transform .1s; }
.tw-btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.tw-btn-primary:active { transform: scale(.98); }

.tw-visuals { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.75rem; }
.tw-visual-label { font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-top: .4rem; text-align: center; }

.tw-result { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; text-align: center; display: none; box-sizing: border-box; }
.tw-result.is-visible { display: block; animation: twFadeIn .25s ease; }
@keyframes twFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.tw-result-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: .5rem; }
.tw-result-value { font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1; }
.tw-result-sub { font-size: 1rem; color: var(--text-muted); margin-top: .5rem; font-weight: 500; }

.tw-steps { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.35rem; margin-top: 1.1rem; text-align: left; }
.tw-steps h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 .6rem; }
.tw-step { font-size: .92rem; color: var(--text); padding: .4rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: .6rem; }
.tw-step:last-child { border-bottom: none; }
.tw-step-num { width: 20px; height: 20px; background: var(--accent); border-radius: 50%; color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 560px) {
  .tw-card { padding: 1.5rem 1.1rem; }
  .tw-fields { flex-direction: column; }
  .tw-op-display { transform: rotate(90deg); }
  .tw-hero h1 { font-size: 1.6rem; }
  .tw-field { min-width: 0; width: 100%; }
}

/* ===== TOOL CALLOUT (guide pages: link to the matching calculator) ===== */
.tool-callout {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; margin: 20px 0 28px;
}
.tool-callout-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.tool-callout-body strong { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; }
.tool-callout-body p { margin: 0; font-size: 0.96rem; color: var(--text); }
.tool-callout-body a { color: var(--accent); font-weight: 700; text-decoration: none; }
.tool-callout-body a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .tool-callout { padding: 12px 14px; gap: 10px; }
  .tool-callout-icon { width: 34px; height: 34px; font-size: 0.9rem; }
}

/* ===== HOME TOPIC LINK THUMBNAILS (Browse by Topic) ===== */
.htopic-thumb { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; margin: 0 4px 3px 0; background: var(--bg2); }