/* =========================================================
   Word Frequency Analyzer — Premium UI (Design Upgrade)
   Notes:
   - No content removed. Styling only.
   - Works across index, blog, compare, readability, and legal pages.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg0:#070b16;
  --bg1:#0b1430;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --text:#eaf1ff;
  --muted:#b9c6e6;
  --muted2:#95a7d6;
  --primary:#3b82f6;        /* blue-500 */
  --primary2:#2563eb;       /* blue-600 */
  --accent:#22c55e;         /* green-500 (sparingly) */
  --danger:#ef4444;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow2: 0 8px 25px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 14px;
  --max: 1120px;
  --pad: 20px;
  --glass: blur(14px);
}

/* ---------- Base / reset ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(59,130,246,.40), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(168,85,247,.30), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Subtle grid texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 65%);
}

/* ---------- Layout ---------- */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
main.container{ padding-top: 26px; padding-bottom: 44px; }
section{ margin-top: 34px; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,11,22,.55);
  backdrop-filter: var(--glass);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration:none;
  color: var(--text);
  font-size: 1.05rem;
  white-space: nowrap;
}
.brand::before{
  content:"";
  width: 12px; height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), #a855f7);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
.topnav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.topnav a{
  color: rgba(234,241,255,.85);
  text-decoration:none;
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
}
.topnav a:hover{
  transform: translateY(-1px);
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.25);
}
.topnav a:active{ transform: translateY(0); }

/* ---------- Hero ---------- */
.hero{
  text-align:center;
  padding: 34px 0 8px;
}
.hero h1{
  margin: 0 0 10px;
  font-size: clamp(2.05rem, 3.25vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.hero .sub{
  max-width: 860px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
}
.gradient{
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Cards ---------- */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 22px 0 6px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  transition: transform .14s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(600px 150px at 20% 0%, rgba(59,130,246,.18), transparent 55%);
  opacity:.9;
}
.card > *{ position:relative; }
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(59,130,246,.22);
}
.card h2{
  margin: 0 0 8px;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.card p{
  margin: 0 0 12px;
  color: var(--muted);
}
.card a{
  color: var(--text);
  font-weight: 700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.card a::after{
  content:"→";
  opacity:.9;
  transition: transform .15s ease;
}
.card a:hover::after{ transform: translateX(2px); }

/* ---------- Prose pages (About/Privacy/Terms/Blog posts) ---------- */
.prose-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--radius) + 2px);
  padding: 22px 24px;
  box-shadow: var(--shadow2);
}
.prose-card h1, .prose-card h2, .prose-card h3{
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.prose-card p, .prose-card li{
  color: rgba(234,241,255,.92);
}
.prose-card p{ margin: 0 0 12px; }
.prose-card ul, .prose-card ol{
  margin: 10px 0 14px 20px;
}
.prose-card a{
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-card a:hover{ color: #bfdbfe; }

/* Details blocks / FAQ styling */
.prose-card details{
  margin-top: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
}
.prose-card details summary{
  cursor:pointer;
  font-weight: 700;
  color: var(--text);
}
.prose-card details p{ color: var(--muted); margin-top: 8px; }

/* ---------- Tool container (Analyzer) ---------- */
.glass-container{
  text-align:left;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  margin: 26px auto 30px;
  max-width: 980px;
  width: 100%;
  backdrop-filter: var(--glass);
}
.glass-container h1,
.glass-container h2{
  margin: 0 0 10px;
  text-align:left;
}
.description{
  text-align:left;
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 14px;
}

/* Inputs */
textarea, input, select{
  width:100%;
  font: inherit;
  color: var(--text);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
textarea{ min-height: 190px; resize: vertical; }
textarea:focus, input:focus, select:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
.word-count{
  margin: 10px 0 8px;
  text-align:right;
  font-size: .9rem;
  color: var(--muted2);
}

/* Button row */
.buttons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin: 14px 0 18px;
}
button{
  font: inherit;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 14px;
  color: var(--text);
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  cursor:pointer;
  transition: transform .12s ease, box-shadow .22s ease, filter .22s ease, background-color .22s ease;
  min-width: 140px;
}
button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(37,99,235,.25);
  filter: brightness(1.03);
}
button:active{ transform: translateY(0); }
button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.28), 0 10px 26px rgba(37,99,235,.25);
}

/* ---------- Tables / results ---------- */
.table-wrap{ overflow:auto; margin-top: 10px; }
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
th, td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align: top;
}
th{
  font-size: .92rem;
  letter-spacing: .2px;
  color: rgba(207,224,255,.95);
  background: rgba(59,130,246,.10);
}
tr:last-child td{ border-bottom:none; }
tr:hover td{ background: rgba(255,255,255,.03); }

.no-results{
  text-align:left;
  font-style: italic;
  color: #cfe0ff;
  margin-top: 12px;
}

/* ---------- Ads placeholder (if shown) ---------- */
.ad-space{
  width: 100%;
  max-width: 980px;
  margin: 28px auto;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(234,241,255,.70);
  font-size: .92rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  text-align:center;
}

/* ---------- Author / callouts ---------- */
.author{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px 16px;
  border-radius: 16px;
  margin: 22px 0;
}
.author strong{ letter-spacing: -.01em; }
.author span{ color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 26px 0 42px;
  color: rgba(234,241,255,.72);
}
.site-footer nav a{
  color: rgba(234,241,255,.85);
  text-decoration:none;
  margin: 0 10px;
  font-weight: 650;
}
.site-footer nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Utility layouts used by compare/readability ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

@media (max-width: 980px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}
.stats-row{ display:flex; gap: 12px; flex-wrap: wrap; }
.stats-row .chip{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(234,241,255,.86);
  font-weight: 650;
  font-size: .92rem;
}

/* N-gram helper classes (kept for compatibility) */
.form-grid label{ font-weight: 700; display:block; margin-bottom: 6px; color: rgba(234,241,255,.9); }
.controls{ display:flex; flex-wrap:wrap; gap: 12px; align-items:center; margin-top: 12px; }
.controls .inline{ display:flex; align-items:center; gap: 8px; }
.sample{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px 14px;
  border-radius: 14px;
  overflow:auto;
}
.bullet-columns{ columns: 2; column-gap: 2rem; }
@media (max-width: 860px){ .bullet-columns{ columns: 1; } }

/* ---------- Accessibility / motion ---------- */
a{ color: #93c5fd; }
a:hover{ color: #bfdbfe; }
:focus-visible{ outline: 2px solid rgba(59,130,246,.55); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 640px){
  .hero{ padding-top: 24px; }
  .glass-container{ padding: 18px 16px 14px; }
  .buttons{ justify-content: stretch; }
  button{ width:100%; min-width: 0; }
  th, td{ padding: 11px 12px; }
}

/* Keep readability SVG labels visible */
#readability-explainer svg text{ fill:#ffffff !important; }

/* =========================================================
   Ultra UI v2 — 10x polish pass (design-only)
   - Keeps ALL existing content.
   - Adds higher-end spacing, typography, surfaces, and micro-interactions.
   ========================================================= */

/* --- Refined tokens (override) --- */
:root{
  --max: 1180px;
  --radius: 22px;
  --radius2: 16px;
  --shadow: 0 28px 90px rgba(0,0,0,.55);
  --shadow2: 0 14px 42px rgba(0,0,0,.42);
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(255,255,255,.085);
  --stroke: rgba(255,255,255,.11);
  --stroke2: rgba(255,255,255,.16);
}

/* --- Cinematic background depth --- */
body::after{
  content:"";
  position:fixed;
  inset:-120px;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 18% 20%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(800px 520px at 82% 18%, rgba(168,85,247,.18), transparent 62%),
    radial-gradient(850px 620px at 50% 95%, rgba(34,197,94,.10), transparent 64%);
  filter: blur(0px);
  opacity:.85;
  z-index:-2;
}

/* --- Type scale & readability --- */
body{
  font-size: 16.5px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3{ letter-spacing: -0.02em; }
p{ color: rgba(234,241,255,.90); }
.muted{ color: var(--muted); }

/* --- Header: more premium --- */
.site-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(6,10,20,.62);
}
.header-inner{
  padding: 14px 0 12px;
}
.brand{
  font-size: 1.08rem;
}
.brand::before{
  width: 13px; height: 13px;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.16),
    0 0 22px rgba(59,130,246,.22);
}
.topnav a{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.topnav a:hover{
  background: rgba(59,130,246,.14);
  border-color: rgba(96,165,250,.30);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* --- Hero: stronger hierarchy --- */
.hero{
  padding-top: 40px;
}
.hero h1{
  text-shadow: 0 10px 36px rgba(0,0,0,.38);
}
.hero .sub{
  font-size: 1.07rem;
  color: rgba(185,198,230,.95);
}

/* --- Glass containers / sections --- */
.glass-container,
.content-section,
.prose-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

/* Make section blocks feel intentional */
.content-section{
  padding: 22px 22px;
}
.content-section h2{ margin-top: 0; }

/* --- Cards: sharper with subtle edge highlight --- */
.card{
  border-radius: var(--radius);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(96,165,250,.35), rgba(168,85,247,.22), rgba(52,211,153,.18));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.55;
}
.card:hover{
  transform: translateY(-3px);
}
.mini-card{
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

/* --- Buttons: true “product” feel --- */
button,
.button,
.buttons a{
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
button.primary,
button[type="submit"],
.buttons .primary{
  background: linear-gradient(135deg, rgba(59,130,246,1), rgba(168,85,247,.92)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 44px rgba(59,130,246,.22), 0 18px 44px rgba(168,85,247,.14);
}
button.primary:hover,
button[type="submit"]:hover,
.buttons .primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 70px rgba(59,130,246,.26), 0 26px 70px rgba(168,85,247,.18);
}
button.secondary,
.buttons .secondary{
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}
button:focus,
a:focus,
textarea:focus,
input:focus,
select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(96,165,250,.22), 0 0 0 1px rgba(96,165,250,.40);
}

/* --- Inputs / textarea: more luxurious --- */
textarea,
input,
select{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
}
textarea{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
textarea::placeholder,
input::placeholder{
  color: rgba(185,198,230,.70) !important;
}

/* --- Tables: modern, scannable --- */
.table,
table{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.table thead th,
table thead th{
  background: rgba(255,255,255,.06);
  color: rgba(234,241,255,.92);
  font-weight: 900;
}
.table tbody tr:hover,
table tbody tr:hover{
  background: rgba(59,130,246,.08);
}
.table td, .table th,
table td, table th{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* --- Blog/article typography (prose) --- */
.prose-card{
  padding: 22px 22px;
}
.prose-card h1,
.prose-card h2,
.prose-card h3{
  line-height: 1.18;
}
.prose-card p{
  max-width: 78ch;
}
.prose-card ul,
.prose-card ol{
  max-width: 78ch;
}

/* --- Helpful dividers & spacing --- */
hr{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 22px 0;
}

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* --- Mobile tightening --- */
@media (max-width: 720px){
  body{ font-size: 16px; }
  .hero{ padding-top: 30px; }
  .content-section{ padding: 18px 16px; }
  .topnav a{ padding: 8px 10px; }
}

/* =========================================================
   Ultra UI v3 — Visual Refresh (no content changes)
   Key changes:
   - Removes the "page break / grid" background texture
   - Stronger visual difference: richer aurora + softer surfaces + new accent system
   ========================================================= */

/* Remove the grid/page-break texture */
body::before{ display:none !important; }

/* Fresh aurora backdrop (cleaner, no grid) */
body{
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(59,130,246,.46), transparent 62%),
    radial-gradient(900px 650px at 85% 0%, rgba(168,85,247,.36), transparent 58%),
    radial-gradient(950px 720px at 50% 115%, rgba(34,197,94,.16), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
}

/* Elevated “product” feel */
:root{
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.095);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);
  --shadow: 0 34px 110px rgba(0,0,0,.58);
  --shadow2: 0 16px 54px rgba(0,0,0,.45);
}

/* Header: more distinct */
.site-header{
  background: rgba(6,10,18,.70) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* Nav pills: bigger + clearer */
.topnav a{
  padding: 9px 14px !important;
  border-radius: 14px !important;
}

/* Sections get a subtle divider glow so pages feel more “built” */
section{
  position: relative;
}
section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-18px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:.9;
}

/* Tool area: clearer focus */
textarea, input, select{
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
textarea:focus, input:focus, select:focus{
  box-shadow: 0 0 0 4px rgba(59,130,246,.20), 0 0 0 1px rgba(96,165,250,.45) !important;
}

/* Buttons: more obviously premium */
button.primary,
button[type="submit"],
.buttons .primary{
  background: linear-gradient(135deg, rgba(59,130,246,1), rgba(99,102,241,.96), rgba(168,85,247,.92)) !important;
}

/* Cards: stronger separation */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.card:hover{
  transform: translateY(-4px) !important;
}

/* Tables: more contrast */
.table thead th, table thead th{
  background: rgba(255,255,255,.075) !important;
}

/* =========================================================
   Ultra UI v4 — Remove "page break" lines + force cache bust
   - Keeps all content
   ========================================================= */

/* Ensure no grid/page-break texture */
body::before{ display:none !important; }

/* Remove horizontal "page break" dividers between sections */
section::before{ display:none !important; }

/* Soften any remaining horizontal separators */
hr{
  background: rgba(255,255,255,.10) !important;
  opacity:.55 !important;
}

/* Optional: slightly smoother background (no lines) */
body{
  background:
    radial-gradient(1200px 760px at 18% -12%, rgba(59,130,246,.46), transparent 62%),
    radial-gradient(980px 700px at 84% 2%, rgba(168,85,247,.34), transparent 60%),
    radial-gradient(980px 760px at 50% 118%, rgba(34,197,94,.14), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
}

body::after{
  content:"";
  position:fixed;
  inset:-120px;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(900px 540px at 18% 20%, rgba(59,130,246,.20), transparent 62%),
    radial-gradient(820px 560px at 82% 18%, rgba(168,85,247,.16), transparent 64%),
    radial-gradient(860px 660px at 50% 95%, rgba(34,197,94,.10), transparent 66%);
  opacity:.85;
}

/* =========================================================
   Ultra UI v5 — Hard remove ALL background lines
   - Disables grid texture + section dividers + HRs
   - New stylesheet filename for guaranteed cache bust
   ========================================================= */

/* Kill any grid/texture overlays */
body::before,
body::after{ background-image: none !important; }
body::before{ display:none !important; content:none !important; }
body::after{ content:"" !important; } /* keep optional aurora layer if present elsewhere */

/* No divider lines anywhere */
section::before{ display:none !important; content:none !important; }
hr{ display:none !important; }

/* Also remove any accidental 1px separators */
*{
  background-clip: padding-box;
}

/* Clean, continuous background (no linear grid) */
body{
  background-image:
    radial-gradient(1200px 760px at 18% -12%, rgba(59,130,246,.46), transparent 62%),
    radial-gradient(980px 700px at 84% 2%, rgba(168,85,247,.34), transparent 60%),
    radial-gradient(980px 760px at 50% 118%, rgba(34,197,94,.14), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* ===== Premium Footer Upgrade (site-wide) ===== */
.site-footer.footer-premium{
  position: relative;
  margin-top: 56px;
  padding: 36px 0 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 220px at 15% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    radial-gradient(700px 220px at 85% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(10,12,20,.92), rgba(7,9,16,.98));
  overflow: hidden;
}
.site-footer.footer-premium:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1px 1px at 18px 22px, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 120px 86px, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 220px 36px, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 60%);
  opacity:.55;
  pointer-events:none;
  transform: translateZ(0);
}
.site-footer.footer-premium .footer-inner{
  position: relative;
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.site-footer.footer-premium p{
  margin:0;
  color: rgba(255,255,255,.78);
  font-size: 0.95rem;
  line-height: 1.5;
}
.site-footer.footer-premium nav{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: rgba(255,255,255,.45);
}
.site-footer.footer-premium nav a{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 600;
  color: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.site-footer.footer-premium nav a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.site-footer.footer-premium nav a.back-to-top{
  border-color: rgba(255,255,255,.16);
}
/* style the dot separators if they exist as text nodes (kept for backwards-compat) */
.site-footer.footer-premium nav{
  font-size: 0.95rem;
}
.site-footer.footer-premium section.container{
  position: relative;
  margin-top: 18px;
}
.site-footer.footer-premium .card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.site-footer.footer-premium .card h3{
  margin-top:0;
}
@media (max-width: 640px){
  .site-footer.footer-premium{
    padding: 28px 0 24px;
  }
  .site-footer.footer-premium .footer-inner{
    gap:12px;
  }
  .site-footer.footer-premium nav a{
    padding: 8px 10px;
  }
}

/* ===== Ultra Footer v2 (site-wide) ===== */
.site-footer.footer-ultra{
  position:relative;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 240px at 12% 0%, rgba(255,255,255,.09), rgba(255,255,255,0) 60%),
    radial-gradient(700px 240px at 88% 10%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(10,12,20,.92), rgba(7,9,16,.99));
  overflow:hidden;
}
.site-footer.footer-ultra:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1px 1px at 18px 22px, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 120px 86px, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 60%),
    radial-gradient(1px 1px at 260px 48px, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 60%);
  opacity:.55;
  pointer-events:none;
}
.site-footer.footer-ultra:after{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.65;
  pointer-events:none;
}
.site-footer.footer-ultra .footer-top{
  position:relative;
  padding: 42px 0 22px;
  display:grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 26px;
}
.site-footer.footer-ultra .footer-brand .footer-logo{
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 1.05rem;
  color: rgba(255,255,255,.92);
}
.site-footer.footer-ultra .footer-brand p{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.74);
  line-height: 1.6;
  max-width: 56ch;
}
.site-footer.footer-ultra .footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.site-footer.footer-ultra .footer-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.site-footer.footer-ultra .footer-columns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.site-footer.footer-ultra .footer-col h3{
  margin: 0 0 10px;
  font-size: .98rem;
  color: rgba(255,255,255,.90);
}
.site-footer.footer-ultra .footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
}
.site-footer.footer-ultra .footer-col a{
  color: rgba(255,255,255,.76);
  text-decoration:none;
  font-weight: 600;
  border-radius: 10px;
  padding: 6px 8px;
  display:inline-flex;
}
.site-footer.footer-ultra .footer-col a:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.site-footer.footer-ultra .footer-bottom{
  position:relative;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.58);
  font-size: .92rem;
}
.site-footer.footer-ultra .footer-bottom a.back-to-top{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.site-footer.footer-ultra .footer-bottom a.back-to-top:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
@media (max-width: 900px){
  .site-footer.footer-ultra .footer-top{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
  .site-footer.footer-ultra .footer-top{
    padding: 32px 0 18px;
  }
  .site-footer.footer-ultra .footer-columns{
    grid-template-columns: 1fr;
  }
}

/* ----- Example blocks (homepage) ----- */
.content-section pre{
  margin: 12px 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow-x: auto;
}
.content-section code{
  color: rgba(255,255,255,.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ----- Author / Editor box (blog posts) ----- */
.author-box{
  margin-top: 28px;
  padding: 18px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.author-box h2{
  margin: 0 0 10px;
}
.author-box p{
  margin: 10px 0;
  color: rgba(255,255,255,.80);
  line-height: 1.65;
}
.author-box .author-meta{
  margin-top: 12px;
  font-size: .92rem;
  color: rgba(255,255,255,.62);
}