/* ================================================================
   PEKRYON — Solar Meridian Design System
   Theme: Option A — warm golden-dawn confidence on deep indigo
   
   Palette:
   void  #07071A  — near-black indigo background
   deep  #0E0E2C  — card surface
   mid   #16163E  — raised surface
   sun   #FFB830  — amber gold — primary CTA & brand accent
   dawn  #FF7F3F  — coral orange — warm secondary
   glow  #FFE566  — luminous highlight
   iris  #6C63FF  — electric violet — info/intel
   mint  #3DFFA0  — fresh green — pass/success
   sky   #38CFFF  — cyan — data/links

   Fonts: Sora (display) · Inter (body) · JetBrains Mono (data)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surface */
  --void:    #07071A;
  --deep:    #0E0E2C;
  --mid:     #16163E;
  --raised:  #1D1D50;
  --rim:     #28285E;
  --border:  rgba(255,255,255,0.07);
  --borderw: rgba(255,255,255,0.13);

  /* Primary — Sun */
  --sun:     #FFB830;
  --sun-d:   #E09B1A;
  --sun-dim: rgba(255,184,48,0.12);
  --sun-glow:rgba(255,184,48,0.30);

  /* Accent warm */
  --dawn:    #FF7F3F;
  --glow:    #FFE566;

  /* Accent cool */
  --iris:    #6C63FF;
  --iris-dim:rgba(108,99,255,0.14);
  --iris-glow:rgba(108,99,255,0.28);
  --mint:    #3DFFA0;
  --mint-dim:rgba(61,255,160,0.10);
  --sky:     #38CFFF;
  --sky-dim: rgba(56,207,255,0.10);

  /* Semantic */
  --pass:    #3DFFA0;
  --warn:    #FFB830;
  --fail:    #FF4A6E;
  --info:    #6C63FF;
  --red:     #FF4A6E;
  --red-dim: rgba(255,74,110,0.12);
  --orange:  #FF7F3F;
  --orange-dim:rgba(255,127,63,0.12);
  --emerald: #3DFFA0;
  --em-dim:  rgba(61,255,160,0.10);
  --cyan:    #38CFFF;
  --cyan-dim:rgba(56,207,255,0.10);
  --purple:  #6C63FF;
  --pur-dim: rgba(108,99,255,0.14);

  /* Text */
  --text:    #FFFFFF;
  --text-2:  #C4C5E8;
  --text-3:  #7879A8;
  --text-4:  #3A3B70;
  --white:   #FFFFFF;

  /* Typography */
  --sora:    'Sora', sans-serif;
  --inter:   'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;
  /* Legacy aliases for existing pages */
  --orbitron:'Sora', sans-serif;
  --raleway: 'Inter', sans-serif;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl:36px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t:    all 0.22s var(--ease);
  --ts:   all 0.35s var(--ease);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }

body {
  background: var(--void);
  color: var(--text-2);
  font-family: var(--inter);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Ambient starfield ─────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 7%,  rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 52%, rgba(255,255,255,0.14) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 44%, rgba(255,255,255,0.16) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 82%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(2px 2px at 8%  64%, rgba(255,184,48,0.28)  0%, transparent 100%),
    radial-gradient(2px 2px at 95% 14%, rgba(108,99,255,0.22)  0%, transparent 100%),
    radial-gradient(1px 1px at 27% 91%, rgba(61,255,160,0.15)  0%, transparent 100%);
}

/* ── Solar glow (hero signature element) ──────────────────── */
.hero-section {
  position: relative; overflow: hidden;
}
.solar-glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(ellipse at center,
    rgba(255,229,102,0.18) 0%, rgba(255,184,48,0.12) 25%,
    rgba(255,127,63,0.06) 50%, transparent 70%);
  border-radius: 50%; pointer-events: none; filter: blur(2px);
  animation: solar-pulse 6s ease-in-out infinite;
}
@keyframes solar-pulse {
  0%,100% { transform: translateX(-50%) scale(1);    opacity: 1; }
  50%      { transform: translateX(-50%) scale(1.08); opacity: 0.85; }
}

/* ── Ray divider ───────────────────────────────────────────── */
.ray-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,184,48,0.3) 30%,
    rgba(255,229,102,0.4) 50%, rgba(255,184,48,0.3) 70%, transparent 100%);
}

/* ── Navbar ────────────────────────────────────────────────── */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 72px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(7,7,26,0.88); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  transition: opacity 0.1s;
}
.nav-logo:active {
  opacity: 0.6;
}
.nav-logo img {
  height: 48px; width: auto; object-fit: contain; mix-blend-mode: screen;
}
.nav-name {
  font-family: var(--sora); font-size: 17px; font-weight: 800;
  letter-spacing: 0.14em; color: #fff; text-transform: uppercase;
  line-height: 1; display: block;
}
.nav-tag {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sun); margin-top: 3px; display: block;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--text-3);
  transition: color 0.15s; text-decoration: none;
}
.nav-links a:hover { color: var(--sun); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 100px;
  font-family: var(--sora); font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer; border: none;
  transition: var(--t); white-space: nowrap; text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--sun), var(--dawn));
  color: var(--void); box-shadow: 0 6px 28px var(--sun-glow);
}
.btn-primary:hover {
  transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 0 12px 40px var(--sun-glow);
}
.btn-ghost {
  background: rgba(255,255,255,0.05); color: var(--text-2);
  border: 1px solid var(--border); font-weight: 500;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.09); color: #fff; border-color: var(--borderw);
}
/* Was referenced in several places (e.g. history.html's "View Intel"
   button) but never actually defined — meaning it silently fell back to
   default unstyled button rendering while destructive actions right
   next to it (Delete) had explicit red styling, so the primary action
   had LESS visual weight than the destructive one. This is the fix:
   a clear, colored, moderately-prominent style — enough to read as
   "the main action" in a dense table row, without the heavier
   glow/gradient treatment .btn-primary uses for large standalone CTAs. */
.btn-outline {
  background: transparent; color: var(--sky);
  border: 1px solid rgba(56,207,255,0.35); font-weight: 600;
}
.btn-outline:hover {
  background: rgba(56,207,255,0.1); border-color: var(--sky); color: #fff;
}
.btn-iris {
  background: var(--iris); color: #fff;
  box-shadow: 0 6px 24px var(--iris-glow);
}
.btn-iris:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-sm  { padding: 8px 18px; font-size: 12px; }
.btn-lg  { padding: 14px 36px; font-size: 15px; }

/* ── Scan pill/bar ─────────────────────────────────────────── */
.scan-bar {
  display: flex; align-items: center;
  background: var(--deep); border: 1px solid var(--borderw);
  border-radius: 100px; padding: 6px 6px 6px 24px;
  box-shadow: 0 0 0 1px rgba(255,184,48,0.06), 0 24px 60px rgba(0,0,0,0.4);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.scan-bar:focus-within {
  border-color: rgba(255,184,48,0.4);
  box-shadow: 0 0 0 3px rgba(255,184,48,0.12), 0 24px 60px rgba(0,0,0,0.4);
}
.scan-bar input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--mono); font-size: 14px; color: #fff; min-width: 0;
}
.scan-bar input::placeholder { color: var(--text-4); }
.scan-bar-btn {
  background: linear-gradient(135deg, var(--sun), var(--dawn));
  color: var(--void); border: none; border-radius: 100px;
  padding: 12px 28px; font-family: var(--sora); font-size: 13px;
  font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: var(--t); letter-spacing: 0.02em;
}
.scan-bar-btn:hover { filter: brightness(1.1); transform: scale(1.03); }

/* ── Hero pill badge ───────────────────────────────────────── */
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,184,48,0.10); border: 1px solid rgba(255,184,48,0.25);
  border-radius: 100px; padding: 6px 16px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun);
  margin-bottom: 28px; transition: var(--t);
}
.hero-pill:hover { background: rgba(255,184,48,0.16); border-color: rgba(255,184,48,0.4); }
.pill-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(61,255,160,0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(61,255,160,0); }
}

/* ── Section layout ────────────────────────────────────────── */
.section {
  position: relative; z-index: 1;
  padding: 90px 40px; max-width: 1200px; margin: 0 auto;
}
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sun); margin-bottom: 16px;
}
.section-eyebrow::before { content: ''; width: 24px; height: 1.5px; background: var(--sun); }
.section-h2 {
  font-family: var(--sora); font-size: clamp(28px,4vw,50px);
  font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 14px;
}
.section-sub { font-size: 16px; color: var(--text-3); max-width: 500px; line-height: 1.7; margin-bottom: 48px; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; transition: var(--t);
  position: relative; overflow: hidden;
}
.card:hover { border-color: rgba(255,184,48,0.2); transform: translateY(-3px); }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--dawn));
  opacity: 0; transition: opacity 0.25s;
}
.card:hover::before { opacity: 1; }

/* ── Module grid ───────────────────────────────────────────── */
.modules-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.module-card {
  background: var(--mid); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 14px;
  transition: var(--t); position: relative; overflow: hidden;
  cursor: pointer; text-decoration: none; display: block;
}
.module-card:hover { border-color: rgba(255,184,48,0.3); transform: translateY(-3px); }
.module-card:hover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,184,48,0.05), transparent);
}
.module-icon { font-size: 20px; margin-bottom: 10px; display: block; }
.module-name {
  font-family: var(--sora); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 4px; line-height: 1.3;
}
.module-pts { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.pts-scored { color: var(--sun); }
.pts-intel  { color: var(--text-4); }

/* ── Module tab filter ─────────────────────────────────────── */
.mod-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.mod-tab {
  padding: 6px 18px; border-radius: 100px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--border);
  background: transparent; color: var(--text-3); transition: var(--t);
}
.mod-tab.active { background: var(--sun-dim); color: var(--sun); border-color: rgba(255,184,48,0.3); }

/* ── Feature / info cards ──────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.blog-teaser-card {
  background: var(--mid); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: var(--t);
}
.blog-teaser-card:hover { border-color: rgba(255,184,48,0.3); transform: translateY(-3px); }
.blog-teaser-cover { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--deep); }
.blog-teaser-body { padding: 18px 20px; }
.blog-teaser-category { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); margin-bottom: 10px; }
.blog-teaser-title { font-family: var(--sora); font-size: 16px; font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: 8px; }
.blog-teaser-excerpt { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.feat-card {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px;
  position: relative; overflow: hidden; transition: var(--t);
}
.feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--dawn));
  opacity: 0; transition: opacity 0.25s;
}
.feat-card:hover { transform: translateY(-4px); border-color: rgba(255,184,48,0.18); }
.feat-card:hover::before { opacity: 1; }
.feat-icon {
  width: 48px; height: 48px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 22px;
  margin-bottom: 20px; background: var(--sun-dim);
}
.feat-title {
  font-family: var(--sora); font-size: 18px; font-weight: 700;
  color: #fff; margin-bottom: 10px; letter-spacing: -0.01em;
}
.feat-desc { font-size: 14px; color: var(--text-3); line-height: 1.7; }

/* ── Grade rows ────────────────────────────────────────────── */
.grade-list { display: flex; flex-direction: column; gap: 10px; }
.grade-row {
  display: flex; align-items: center; gap: 20px;
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 22px; transition: var(--t);
}
.grade-row:hover { transform: translateX(6px); border-color: var(--borderw); }
.grade-score {
  font-family: var(--sora); font-size: 17px; font-weight: 800;
  min-width: 76px; letter-spacing: -0.01em;
}
.grade-track { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.grade-fill  { height: 100%; border-radius: 2px; }
.grade-label { font-family: var(--sora); font-size: 13px; font-weight: 700; min-width: 130px; text-align: right; }

/* ── Steps ─────────────────────────────────────────────────── */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.step-item { text-align: center; padding: 40px 24px; border-radius: var(--r-lg); }
.step-item:hover { background: rgba(255,255,255,0.02); }
.step-item:hover .step-num { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255,184,48,0.12); }
.step-num {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--deep); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--sora); font-size: 24px; font-weight: 800; color: var(--sun);
  position: relative;
}
.step-num::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid rgba(255,184,48,0.18);
}
.step-title { font-family: var(--sora); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.step-desc  { font-size: 13px; color: var(--text-3); line-height: 1.65; }

/* ── CTA section ───────────────────────────────────────────── */
.cta-section {
  position: relative; z-index: 1;
  margin: 0 20px 80px; border-radius: var(--r-xl);
  background: linear-gradient(135deg,
    rgba(255,184,48,0.10) 0%, rgba(255,127,63,0.07) 40%, rgba(108,99,255,0.08) 100%);
  border: 1px solid rgba(255,184,48,0.18);
  padding: 80px 40px; text-align: center; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,184,48,0.06), transparent 65%);
  pointer-events: none;
}
.cta-section h2 {
  font-family: var(--sora); font-size: clamp(26px,4vw,50px);
  font-weight: 800; color: #fff; letter-spacing: -0.02em;
  margin-bottom: 16px; position: relative;
}
.cta-section p {
  font-size: 17px; color: var(--text-2); max-width: 500px;
  margin: 0 auto 36px; line-height: 1.65; position: relative;
}
.cta-btns { display: flex; gap: 14px; justify-content: center; position: relative; flex-wrap: wrap; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  padding: 60px 40px 32px; max-width: 1200px; margin: 0 auto;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-logo img {
  height: 52px; width: auto; object-fit: contain; mix-blend-mode: screen;
}
.footer-desc {
  font-size: 13px; color: var(--text-3); line-height: 1.75;
  margin-top: 16px; max-width: 240px;
}
.footer-col h4 {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 18px;
}
.footer-col a {
  display: block; font-size: 13px; color: var(--text-3);
  margin-bottom: 12px; transition: color 0.15s; text-decoration: none;
}
.footer-col a:hover { color: var(--sun); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 9px; color: var(--text-4);
  letter-spacing: 0.1em; text-transform: uppercase; flex-wrap: wrap; gap: 10px;
}
.footer-social { display: flex; gap: 14px; align-items: center; }
.footer-social a { color: var(--text-3); display: flex; transition: color 0.15s; }
.footer-social a:hover { color: var(--sky); }
.footer-social svg { width: 16px; height: 16px; }

/* ── Footer for authenticated app pages (dashboard, admin, etc.) ──
   The public site footer (.site-footer/.footer-bottom above) has a full
   multi-column layout meant for the marketing pages; this is a much
   lighter version that sits at the bottom of .app-content. */
.app-footer {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--text-4);
  letter-spacing: 0.08em; flex-wrap: wrap; gap: 12px;
}
.app-footer a { color: var(--text-4); text-decoration: none; transition: var(--t); }
.app-footer a:hover { color: var(--sun); }
.app-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── App shell (dashboard/authenticated pages) ─────────────── */
.app-shell {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--deep); border-right: 1px solid var(--border);
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
  display: flex; flex-direction: column; overflow-y: auto; z-index: 10;
}
.sidebar-brand {
  padding: 20px 18px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; min-height: 64px;
}
.sidebar-brand img { height: 40px; width: auto; mix-blend-mode: screen; }
.sidebar-nav { padding: 14px 10px; flex: 1; }
.sidebar-item, .nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-3);
  transition: var(--t); text-decoration: none; margin-bottom: 2px;
  border: none; background: none; width: 100%; text-align: left;
}
.sidebar-item:hover, .nav-link:hover { background: var(--mid); color: var(--text-2); }
.sidebar-item.active, .nav-link.active {
  background: var(--sun-dim); color: var(--sun);
  border: 1px solid rgba(255,184,48,0.2);
}
.sidebar-item-icon { font-size: 16px; flex-shrink: 0; }
.sidebar-section-label, .nav-section, .nav-section-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-4);
  padding: 16px 12px 6px; display: block;
}

/* ── Authenticated app pages: sidebar/topbar/stat components ──
   dashboard.html, admin.html, history.html, scan.html, scan-result.html,
   and account.html use these class names directly (rather than the
   .sidebar-item/-section-label pattern above), so they're defined here
   too — same design system, just the exact names those templates use. */
.app-main { min-width: 0; width: 100%; grid-column: 2; }
.sidebar-top { padding: 20px 18px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; min-height: 64px; }
.sidebar-top img { height: 40px; width: auto; mix-blend-mode: screen; }
.sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); }
.user-row, .user-card { display: flex; align-items: center; gap: 10px; }
.user-name { font-size: 13px; font-weight: 600; color: #fff; }
.user-plan { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.target-avatar, .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--sun-dim); color: var(--sun); border: 1px solid rgba(255,184,48,0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sora); font-size: 12px; font-weight: 700;
}
.topbar-title { font-family: var(--sora); font-size: 20px; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.topbar-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.stat-value { font-family: var(--sora); font-size: 34px; font-weight: 900; color: #fff; line-height: 1; }
.stat-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-4); margin-top: 6px; }
.app-content { padding: 32px 36px; overflow-y: auto; overflow-x: hidden; margin-top: 56px; }
.app-topbar {
  position: fixed; top: 0; left: 240px; right: 0; z-index: 10;
  background: rgba(7,7,26,0.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 56px; padding: 0 36px;
  display: flex; align-items: center; justify-content: space-between;
}
.page-title {
  font-family: var(--sora); font-size: 18px; font-weight: 700;
  color: #fff; letter-spacing: -0.01em;
}
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* ── Stat cards ────────────────────────────────────────────── */
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; }
.stat-card {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px;
  position: relative; overflow: hidden; transition: var(--t);
}
.stat-card:hover { border-color: var(--borderw); }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.stat-icon { font-size: 20px; }
.stat-val {
  font-family: var(--sora); font-size: 32px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px;
}
.stat-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

/* ── Score ring ────────────────────────────────────────────── */
.score-ring-wrap { display: flex; flex-direction: column; align-items: center; }
.score-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 3px solid var(--border); display: grid; place-items: center;
  position: relative; margin-bottom: 8px;
}
.score-ring-val {
  font-family: var(--sora); font-size: 32px; font-weight: 800; color: #fff; line-height: 1;
}
.score-ring-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* ── Scan history table ────────────────────────────────────── */
/* ── Table wrapper — safety net for narrow viewports; the table itself
   fills the available width via .scan-table's width:100% below, so this
   only kicks in if content genuinely can't fit (e.g. very narrow screens) ── */
.table-wrap { width: 100%; overflow-x: auto; }

.scan-table { width: 100%; border-collapse: collapse; }
.scan-table th {
  text-align: left; padding: 10px 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-4);
  border-bottom: 1px solid var(--border);
}
.scan-table td {
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px; color: var(--text-2);
}
.scan-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ── Badge/pill ────────────────────────────────────────────── */
/* ── Action buttons — small inline actions in tables/lists (Edit,
   Delete, View, etc). Shared across admin.html, my-blog.html, and
   anywhere else that needs compact row-level actions. ── */
.action-btn {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: var(--t); background: transparent;
  color: var(--text-2); border: 1px solid var(--border);
  text-decoration: none; /* reset default underline when used on <a> tags */
}
.action-btn:hover { opacity: 0.8; border-color: var(--sun); color: var(--sun); }
.btn-disable  { color: var(--orange);  border-color: rgba(255,106,0,0.3); }
.btn-enable   { color: var(--emerald); border-color: rgba(0,196,122,0.3); }
.btn-delete   { color: var(--red);     border-color: rgba(227,6,19,0.3); }
.btn-download { color: var(--sky);     border-color: rgba(0,229,255,0.3); }
.btn-disable:hover, .btn-enable:hover, .btn-delete:hover, .btn-download:hover { border-color: currentColor; color: currentColor; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-xs);
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.badge-pass    { background: var(--mint-dim);   color: var(--mint); }
.badge-warn    { background: var(--sun-dim);    color: var(--sun); }
.badge-fail    { background: var(--red-dim);    color: var(--red); }
.badge-info    { background: var(--iris-dim);   color: var(--iris); }
.badge-sun     { background: var(--sun-dim);    color: var(--sun); }
.badge-orange  { background: var(--orange-dim); color: var(--orange); }

/* ── Form inputs ───────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.form-input {
  width: 100%; padding: 13px 16px;
  background: var(--mid); border: 1px solid var(--border);
  border-radius: var(--r); color: #fff;
  font-family: var(--inter); font-size: 14px; outline: none;
  transition: var(--t);
}
.form-input:focus { border-color: var(--sun); box-shadow: 0 0 0 2px var(--sun-dim); }
.form-input::placeholder { color: var(--text-4); }
.form-error {
  font-family: var(--mono); font-size: 11px; color: var(--red);
  margin-top: 8px; display: none;
}
.form-error.visible { display: block; }
.progress-track {
  height: 6px; background: var(--rim); border-radius: 4px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--sun), var(--orange));
  border-radius: 4px; transition: width 0.4s ease;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(7,7,26,0.88);
  backdrop-filter: blur(8px); z-index: 300;
  display: grid; place-items: center; padding: 24px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--deep); border: 1px solid rgba(255,184,48,0.2);
  border-radius: var(--r-xl); padding: 36px; width: 100%; max-width: 520px;
  position: relative; box-shadow: 0 0 80px rgba(255,184,48,0.08), 0 32px 80px rgba(0,0,0,0.7);
}
.modal::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sun), transparent);
}
.modal-title {
  font-family: var(--sora); font-size: 22px; font-weight: 800;
  color: #fff; margin-bottom: 6px; letter-spacing: -0.01em;
}
.modal-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 24px;
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  background: none; border: none; color: var(--text-3);
  font-size: 18px; cursor: pointer; padding: 6px; line-height: 1;
  transition: color 0.15s;
}
.modal-close:hover { color: #fff; }

/* ── Module scanning pills ─────────────────────────────────── */
.module-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 16px; max-height: 280px; overflow-y: auto; }
.module-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--mid); border: 1px solid var(--border);
  border-radius: var(--r); padding: 9px 12px;
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  transition: var(--t); letter-spacing: 0.04em;
}
.module-item.checking { border-color: var(--sun); color: var(--sun); background: var(--sun-dim); }
.module-item.done { border-color: var(--mint); color: var(--mint); background: var(--mint-dim); }

/* ── Auth layout ───────────────────────────────────────────── */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-panel-left {
  background: var(--deep); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px; position: relative; overflow: hidden;
}
.auth-panel-left::before {
  content: ''; position: absolute; top: -200px; left: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,184,48,0.08), transparent 65%);
  pointer-events: none;
}
.auth-panel-right {
  background: var(--void); display: flex; align-items: center;
  justify-content: center; padding: 64px 48px;
}
.auth-form-wrap { width: 100%; max-width: 420px; }
.auth-title {
  font-family: var(--sora); font-size: clamp(22px,3vw,34px);
  font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-bottom: 8px;
}
.auth-sub   { font-size: 14px; color: var(--text-2); margin-bottom: 28px; }
.auth-footer { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-3); }
.auth-footer a { color: var(--sun); font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }
.error-banner {
  background: var(--red-dim); border: 1px solid rgba(255,74,110,0.25);
  border-radius: var(--r); padding: 12px 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--red); margin-bottom: 18px; display: none;
}
.error-banner.visible { display: block; }
.pw-bar   { height: 3px; border-radius: 2px; margin-top: 8px; background: var(--rim); transition: all 0.3s; }
.pw-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; margin-top: 4px; }
.divider-or {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-4); margin: 20px 0;
}
.divider-or::before, .divider-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 100px; padding: 12px; cursor: pointer;
  font-family: var(--inter); font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: var(--t); margin-bottom: 20px;
}
.google-btn:hover { background: rgba(255,255,255,0.09); color: #fff; border-color: var(--borderw); }

/* ── Learn pages ───────────────────────────────────────────── */
.learn-wrap  { max-width: 900px; margin: 0 auto; padding: 100px 28px 80px; position: relative; z-index: 1; }
.learn-bc    { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 28px; }
.learn-bc a  { color: var(--text-3); text-decoration: none; }
.learn-bc a:hover { color: var(--sun); }
.learn-intro { font-size: 15px; color: var(--text-2); line-height: 1.8; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.learn-wrap h2 {
  font-family: var(--sora); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: #fff;
  margin: 32px 0 12px; padding-left: 12px; border-left: 2px solid var(--sun);
}
.learn-wrap h3 { font-family: var(--sora); font-size: 13px; font-weight: 700; color: var(--sun); margin: 20px 0 8px; }
.learn-wrap p  { font-size: 15px; color: var(--text-2); line-height: 1.8; margin-bottom: 12px; }
.learn-wrap ul, .learn-wrap ol { padding-left: 20px; margin-bottom: 12px; }
.learn-wrap li { font-size: 15px; color: var(--text-2); line-height: 1.8; margin-bottom: 5px; }
.learn-wrap code {
  font-family: var(--mono); font-size: 12px;
  background: var(--mid); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 2px 7px; color: var(--sun);
}
.learn-wrap pre {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px; overflow-x: auto; margin: 14px 0;
}
.learn-wrap pre code { background: none; border: none; padding: 0; font-size: 12px; color: var(--sun); display: block; }
.learn-wrap table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.learn-wrap th { text-align: left; padding: 9px 12px; font-family: var(--mono); font-size: 10px; color: var(--text-3); border-bottom: 1px solid var(--border); }
.learn-wrap td { padding: 9px 12px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--border); }

/* Level toggle */
.level-bar { display: flex; gap: 0; background: var(--deep); border: 1px solid var(--border); border-radius: var(--r); padding: 4px; width: fit-content; margin-bottom: 24px; }
.level-btn {
  padding: 8px 22px; border-radius: calc(var(--r) - 2px);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; border: none;
  background: transparent; color: var(--text-3); transition: var(--t);
}
.level-btn.active { background: var(--sun-dim); color: var(--sun); }
.level-lbl {
  display: inline-block; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px; margin-bottom: 10px;
}
.lbl-beg { background: rgba(61,255,160,0.10); color: var(--mint); border: 1px solid rgba(61,255,160,0.3); }
.lbl-int { background: var(--sun-dim); color: var(--sun); border: 1px solid rgba(255,184,48,0.3); }
.level-content.hidden { display: none; }

/* Ad slot */
.ad-slot {
  background: rgba(255,184,48,0.03); border: 1px solid rgba(255,184,48,0.08);
  border-radius: var(--r-lg); min-height: 90px;
  display: block; margin: 28px 0;
  position: relative;
}
/* AdSense requires its container to have a resolved width BEFORE push()
   runs. .ad-slot used to be display:flex with align-items/justify-content
   centering — flexbox's default sizing is content-based on the main axis,
   and centering disables the normal cross-axis stretch, so an empty <ins>
   (no ad content yet) computed to 0 width and AdSense threw
   "No slot size for availableWidth=0". Block layout + explicit width:100%
   on the ins itself is the standard, documented-safe pattern. */
.ad-slot ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
}
.ad-slot::before {
  content: 'ADVERTISEMENT';
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; color: var(--text-4);
}

/* Learn CTA */
.learn-cta {
  background: linear-gradient(135deg,rgba(255,184,48,0.10),rgba(255,127,63,0.06));
  border: 1px solid rgba(255,184,48,0.2); border-radius: var(--r-xl);
  padding: 32px; text-align: center; margin: 40px 0;
}
.learn-cta h3 { font-family: var(--sora); font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.learn-cta p  { color: var(--text-2); margin-bottom: 20px; font-size: 14px; }

/* Affiliate card */
.aff-box {
  background: var(--deep); border: 1px solid var(--border);
  border-left: 3px solid var(--sun); border-radius: var(--r-lg);
  padding: 20px; margin: 24px 0;
}
.aff-box-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sun); margin-bottom: 6px;
}
.aff-box-title { font-family: var(--sora); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.aff-box-note  { font-size: 13px; color: var(--text-2); margin-bottom: 14px; line-height: 1.6; }
.aff-link {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--mid); border: 1px solid var(--border);
  border-radius: var(--r); padding: 11px 14px; text-decoration: none;
  margin-bottom: 9px; transition: var(--t);
}
.aff-link:hover { border-color: rgba(255,184,48,0.3); }
.aff-link.hi { background: var(--sun-dim); border-color: rgba(255,184,48,0.3); }
.aff-name { font-family: var(--sora); font-size: 12px; font-weight: 700; color: #fff; }
.aff-note { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.aff-tag  { font-family: var(--mono); font-size: 11px; color: var(--sun); font-weight: 600; }
.aff-disc { font-family: var(--mono); font-size: 9px; color: var(--text-4); margin-top: 10px; }

/* Related cards grid */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px; margin: 16px 0; }
.rel-card {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px; text-decoration: none; transition: var(--t); display: block;
}
.rel-card:hover { border-color: rgba(255,184,48,0.25); }
.rel-card-cat  { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); margin-bottom: 4px; }
.rel-card-title { font-size: 13px; color: var(--text-2); font-weight: 500; }

/* ── Breakdown bars ────────────────────────────────────────── */
.breakdown-row  { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.breakdown-name { font-size: 12px; color: var(--text-2); width: 148px; flex-shrink: 0; font-family: var(--mono); letter-spacing: 0.04em; }
.breakdown-track{ flex: 1; height: 4px; background: var(--rim); border-radius: 2px; overflow: hidden; }
.breakdown-bar  { height: 100%; border-radius: 2px; transition: width 0.9s var(--ease); }
.breakdown-pts  { font-family: var(--mono); font-size: 11px; color: var(--text-3); width: 56px; text-align: right; flex-shrink: 0; }

/* ── Filter bar ────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.filter-input {
  background: var(--mid); border: 1px solid var(--border);
  border-radius: var(--r); padding: 9px 14px; color: #fff;
  font-family: var(--mono); font-size: 13px; outline: none; transition: var(--t);
}
.filter-input:focus { border-color: var(--sun); }
.filter-input::placeholder { color: var(--text-4); }
.count-tag {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  background: var(--mid); padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border);
}

/* ── Scan result modules ───────────────────────────────────── */
.result-section { margin-bottom: 32px; }
.result-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.result-section-title { font-family: var(--sora); font-size: 14px; font-weight: 700; color: #fff; }
.result-module {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 10px; overflow: hidden;
}
.result-module-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; transition: background 0.15s;
}
.result-module-header:hover { background: rgba(255,255,255,0.02); }
.result-module-status { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.st-pass { background: var(--mint-dim); border: 1px solid rgba(61,255,160,0.3); }
.st-warn { background: var(--sun-dim);  border: 1px solid rgba(255,184,48,0.3); }
.st-fail { background: var(--red-dim);  border: 1px solid rgba(255,74,110,0.3); }
.st-info { background: var(--iris-dim); border: 1px solid rgba(108,99,255,0.3); }
.result-module-name { font-family: var(--sora); font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.result-module-score { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.result-module-body { padding: 0 20px 18px; border-top: 1px solid var(--border); }

/* ── Quick scan (dashboard) ────────────────────────────────── */
.quick-scan {
  display: flex; overflow: hidden; background: var(--mid);
  border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 28px;
  transition: border-color 0.2s;
}
.quick-scan:focus-within { border-color: var(--sun); box-shadow: 0 0 0 2px var(--sun-dim); }
.quick-scan-prefix {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  padding: 14px 4px 14px 18px; white-space: nowrap;
  background: var(--deep); border-right: 1px solid var(--border); letter-spacing: 0.06em;
}
.quick-scan-field {
  flex: 1; background: transparent; border: none; padding: 14px;
  color: #fff; font-family: var(--mono); font-size: 14px; outline: none;
}
.quick-scan-field::placeholder { color: var(--text-4); }

/* ── Back button ───────────────────────────────────────────── */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 20px;
  cursor: pointer; background: none; border: none; transition: color 0.15s;
}
.back-btn:hover { color: var(--sun); }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 24px; text-align: center; gap: 12px;
}

/* ── Recommendations ───────────────────────────────────────── */
.rec-item {
  background: var(--deep); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
}
.rec-item.high   { border-left-color: var(--red); }
.rec-item.medium { border-left-color: var(--sun); }
.rec-item.low    { border-left-color: var(--mint); }
.rec-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-xs); white-space: nowrap;
  letter-spacing: 0.12em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px;
}
.rec-badge.high   { background: var(--red-dim);    color: var(--red); }
.rec-badge.medium { background: var(--sun-dim);    color: var(--sun); }
.rec-badge.low    { background: var(--mint-dim);   color: var(--mint); }
.rec-text   { font-size: 13.5px; color: var(--text-2); }
.rec-detail { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }

/* ── AdSense / affiliate ───────────────────────────────────── */
.affiliate-card {
  background: linear-gradient(135deg, var(--deep), var(--sun-dim));
  border: 1px solid rgba(255,184,48,0.18); border-radius: var(--r-lg);
  padding: 18px 20px; position: relative; overflow: hidden; transition: var(--ts);
}
.affiliate-card:hover { border-color: rgba(255,184,48,0.35); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,184,48,0.10); }
.affiliate-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--sun), var(--dawn));
}
.affiliate-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--sun-dim); border: 1px solid rgba(255,184,48,0.2);
  border-radius: var(--r-xs); padding: 2px 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun);
  margin-bottom: 10px;
}
.affiliate-title  { font-family: var(--sora); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.affiliate-desc   { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; }
.affiliate-context{ font-family: var(--mono); font-size: 11px; color: var(--sun); margin-bottom: 12px; }

/* ── Layout helpers ────────────────────────────────────────── */
.z1       { position: relative; z-index: 1; }
.hidden   { display: none !important; }
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--rim); border-top-color: var(--sky);
  border-radius: 50%; animation: spinnerRotate 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spinnerRotate { to { transform: rotate(360deg); } }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-1   { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px} .gap-8{gap:32px}
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3   { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-4   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.mt-2{margin-top:8px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-8{margin-top:32px}
.mb-2{margin-bottom:8px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px} .mb-8{margin-bottom:32px}
.w-full   { width: 100%; }
.text-center { text-align: center; }
.text-white  { color: #fff; }
.text-dim    { color: var(--text-2); }
.text-faint  { color: var(--text-3); }
.text-sun    { color: var(--sun); }
.text-mint   { color: var(--mint); }
.text-sky    { color: var(--sky); }
.text-iris   { color: var(--iris); }
.text-red    { color: var(--red); }
.text-orange { color: var(--orange); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Sidebar for learn pages ───────────────────────────────── */
.sidebar-brand { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; min-height: 80px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .modules-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Mobile app navigation (hamburger + logo strip + slide-in sidebar) ──
   Hidden on desktop; on mobile the sidebar becomes a slide-in drawer
   (toggled via .mobile-open, added/removed by toggleMobileSidebar() in
   pekryon.js) instead of being display:none with no way to reopen it. */
.mobile-topbar-brand { display: none; }
.mobile-menu-btn { display: none; }
.public-menu-btn { display: none; }
.public-mobile-menu { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-main { grid-column: 1; }

  .mobile-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: none; border: 1px solid var(--border); border-radius: var(--r);
    color: #fff; cursor: pointer;
  }
  .mobile-topbar-brand {
    display: flex; align-items: center; gap: 8px;
  }
  .mobile-topbar-brand img { height: 24px; width: auto; mix-blend-mode: screen; }
  .mobile-topbar-brand span {
    display: none; /* icon alone is enough brand recognition here — the page
                       title needs the room more, and opening the sidebar
                       shows the full wordmark anyway */
  }

  .sidebar {
    display: flex; transform: translateX(-100%);
    transition: transform 0.25s ease; z-index: 40;
  }
  .sidebar.mobile-open { transform: translateX(0); }

  .sidebar-backdrop.visible {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55); z-index: 35;
  }

  .app-content { padding: 20px; margin-top: 116px; }
  .app-topbar {
    left: 0; gap: 10px; padding: 10px 16px;
    height: auto; min-height: 56px; flex-wrap: wrap;
  }
  .topbar-title { font-size: 16px; }
  .topbar-sub { font-size: 9px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-panel-left { display: none; }
  .auth-panel-right { padding: 40px 24px; }
  .nav-bar { padding: 0 16px; height: auto; min-height: 64px; }
  .nav-logo img { height: 32px; }
  .nav-name { font-size: 13px; letter-spacing: 0.08em; }
  .nav-tag { display: none; }
  .nav-cta { gap: 6px; }

  .public-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; order: -1; margin-right: 8px;
    background: none; border: 1px solid var(--border); border-radius: var(--r);
    color: #fff; cursor: pointer;
  }
  .nav-links { display: none; } /* stays hidden in the bar itself — shown in the dropdown below instead */
  .public-mobile-menu {
    display: none; position: fixed; top: 64px; left: 0; right: 0;
    background: var(--void); border-bottom: 1px solid var(--border);
    padding: 8px 20px 20px; flex-direction: column; z-index: 199;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .public-mobile-menu.open { display: flex; }
  .public-mobile-menu a {
    padding: 14px 4px; color: var(--text-2); text-decoration: none;
    font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--border);
  }
  .nav-cta .btn { padding: 7px 12px; font-size: 11px; white-space: nowrap; }
  .nav-links { display: none; }
  .section { padding: 60px 20px; }
  .feat-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}