/* ==========================================================================
   SITE.CSS — ClassikLust AI Gen Full Design System
   FIXED LAYOUT - NO RESPONSIVE SCALING - UNIVERSAL SIZING
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GOOGLE FONTS
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Orbitron:wght@400;600;700;900&display=swap");

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
}

body {
  background: var(--background, #0a0e1a);
  color: var(--text, #e8eef7);
  font-family: var(--font-primary, "Space Grotesk", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, "Orbitron", "Space Grotesk", sans-serif);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text, #e8eef7);
}

a {
  color: var(--primary, #7dd3fc);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent, #c4b5fd);
}

img {
  max-width: 100%;
  display: block;
}

ul,
ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   3. SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

::selection {
  background: rgba(61, 168, 255, 0.4);
  color: var(--on-fill);
}

/* --------------------------------------------------------------------------
   4. LAYOUT — RESPONSIVE SHELL
   -------------------------------------------------------------------------- */
/*
 * 🩹 2026-08-09 — this section used to be titled "FIXED WIDTH (NO SCALING)"
 * and capped every page at 700px with zero media queries in the whole file.
 *
 * That single cap is what made the site look unfinished: on a 1366px screen
 * the content sat in a narrow column with a huge dead gutter beside it, and
 * filter rows wrapped 3-2-1 ragged because they were squeezed into 660px of
 * usable space. It read as "made in a day" because nothing could breathe.
 *
 * The shell is now fluid with a sane ceiling, and the ceiling is a token so a
 * page that genuinely wants a narrow measure (long-form text, forms) can opt
 * into it instead of everything being forced narrow. Reading measure still
 * matters — this is not "stretch to 4K" — it is 1100px for app screens with
 * grids and cards, and 760px kept available for prose.
 */
/* Tokens are defined in head.ejs (carbonite, ported from ClassikLustAI.love).
   This block only keeps the legacy names site.css uses pointing at them, so
   the stylesheet inherits the hub palette instead of declaring a second,
   older one that fights it. */
:root {
  --shell-max: 1100px; /* app screens: grids, cards, galleries */
  --shell-max-narrow: 760px; /* prose, forms, single-column reading */
  --shell-pad: 20px;
  --header-h: 52px;
}

.page-content,
.container {
  padding-top: calc(var(--header-h) + 14px);
  width: 100%;
  margin: 0 auto;
}

.container {
  max-width: var(--shell-max);
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
  padding-bottom: 40px;
}

/* Opt-in narrow measure — was the ONLY behaviour, now a choice. */
.container-sm,
.container.is-narrow {
  width: 100%;
  max-width: var(--shell-max-narrow);
  margin: 0 auto;
  padding: calc(var(--header-h) + 14px) var(--shell-pad) 40px;
}

/* The file had ZERO media queries. Two, doing real work: */
@media (max-width: 720px) {
  :root {
    --shell-pad: 14px;
  }
  .container,
  .container-sm {
    padding-bottom: 28px;
  }
}

@media (min-width: 1500px) {
  :root {
    --shell-max: 1240px;
  }
}

/* --------------------------------------------------------------------------
   5. HEADER (FIXED)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 66px;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* Must track the shell, or the header content floats in the middle of the
     page while the body content sits wider — the two were locked to the same
     700px before, so this stays matched by using the same token. */
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

/* --------------------------------------------------------------------------
   6. HAMBURGER MENU TOGGLE
   -------------------------------------------------------------------------- */
.menu-toggle {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.menu-toggle span {
  width: 22px;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  transition:
    background 0.2s,
    transform 0.3s;
}

.menu-toggle:hover span {
  background: var(--accent, #c4b5fd);
}

/* --------------------------------------------------------------------------
   7. LOGO
   -------------------------------------------------------------------------- */
.site-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--on-fill);
}

.logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(
    135deg,
    var(--primary, #7dd3fc),
    var(--secondary, #38bdf8)
  );
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95em;
  letter-spacing: -0.5px;
  color: var(--primary-contrast, #06121f);
  /* Single glow. The landing page's identical logo mark uses exactly one
     (0 0 18px rgba(61, 168, 255,.45)); this stacked a drop shadow under it,
     which is what made the mark look like it was floating off the header. */
  box-shadow: 0 0 18px rgba(61, 168, 255, 0.45);
}

.logo-text {
  font-family: var(--font-heading, "Orbitron", "Space Grotesk", sans-serif);
  font-weight: 800;
  font-size: 1.05em;
  background: linear-gradient(
    135deg,
    var(--on-fill) 40%,
    rgba(255, 255, 255, 0.6)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   8. ACCOUNT WIDGET (header right)
   -------------------------------------------------------------------------- */
.account-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 4px 12px 4px 4px;
  height: 48px;
  min-width: 180px;
  max-width: 220px;
  position: relative;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.account-widget:hover,
.account-widget.active {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--primary, #7dd3fc),
    var(--secondary, #38bdf8)
  );
  color: var(--primary-contrast, #06121f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1em;
  flex-shrink: 0;
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.account-name {
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-credits {
  display: flex;
  gap: 6px;
  font-size: 0.7em;
}

.credit-regular {
  color: var(--primary, #7dd3fc);
  font-weight: 700;
}

.credit-referral {
  color: var(--accent, #c4b5fd);
  font-weight: 700;
}

.vip-badge-inside {
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 0.62em;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.vip-free,
.vip-basic,
.vip-regular {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.vip-bronze {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
  border: 1px solid rgba(205, 127, 50, 0.35);
}

.vip-silver {
  background: rgba(192, 192, 192, 0.15);
  color: #c8c8c8;
  border: 1px solid rgba(192, 192, 192, 0.3);
}

.vip-gold {
  background: rgba(255, 215, 0, 0.15);
  color: var(--warning);
  border: 1px solid rgba(255, 215, 0, 0.35);
}

.vip-platinum {
  background: rgba(229, 228, 226, 0.12);
  color: #ddd;
  border: 1px solid rgba(229, 228, 226, 0.3);
}

.vip-diamond {
  background: rgba(185, 242, 255, 0.12);
  color: var(--primary);
  border: 1px solid rgba(185, 242, 255, 0.3);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1001;
}

.account-widget.active .account-dropdown {
  display: flex;
  animation: dropdownIn 0.18s ease;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-dropdown a {
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.875em;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
  display: block;
}

.account-dropdown a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-fill);
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 4px 6px;
}

/* --------------------------------------------------------------------------
   9. SIDEBAR NAV OVERLAY
   -------------------------------------------------------------------------- */
.site-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2000;
  display: none;
  pointer-events: none;
}

.site-nav-overlay.active {
  display: block;
  pointer-events: all;
}

.site-nav-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-nav-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: var(--background);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px 16px;
  overflow-y: auto;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav-overlay.active .site-nav-wrapper {
  transform: translateX(0);
}

.site-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-nav-title {
  font-size: 0.7em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.site-nav-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--on-fill);
  font-size: 1.4em;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition:
    background 0.2s,
    transform 0.3s;
}

.site-nav-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.site-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav-menu li {
  margin-bottom: 2px;
}

.site-nav-menu li a,
.nav-item-parent {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Was FOUR stacked effects per item: a 3-stop white-to-black sheen, a second
     base gradient, a drop shadow, and an inset top highlight — every one of
     them fighting for attention in a vertical list of nine. That is the
     "chunky slab" look. A drawer item is a list row, not a raised 3D button:
     one flat surface, one hairline, colour on hover. */
  padding: 12px 14px;
  color: rgba(245, 248, 255, 0.95);
  text-decoration: none;
  border-radius: 11px;
  border: 1px solid var(--border, #2c3850);
  background: var(--surface, #111827);
  font-size: 0.92em;
  font-weight: 600;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
  cursor: pointer;
  justify-content: space-between;
}

.site-nav-menu li a:hover,
.nav-item-parent:hover {
  color: var(--on-fill);
  border-color: var(--primary, #7dd3fc);
  background: var(--surface-2, #1a2235);
}

.site-nav-menu li a:active {
  background: rgba(61, 168, 255, 0.15);
}

.submenu-arrow {
  transition: transform 0.3s;
  font-size: 0.7em;
  opacity: 0.5;
}

.nav-item-with-submenu.open .submenu-arrow {
  transform: rotate(90deg);
}

.nav-submenu {
  list-style: none;
  padding-left: 16px;
  margin-top: 2px;
  display: none;
}

.nav-item-with-submenu.open .nav-submenu {
  display: block;
}

.nav-submenu li a {
  font-size: 0.84em;
  padding: 10px 12px;
  color: rgba(236, 242, 255, 0.88);
}

.site-nav-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-footer-link {
  display: block;
  padding: 12px 14px;
  background: rgba(220, 53, 69, 0.12);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-radius: 10px;
  text-align: center;
  font-size: 0.875em;
  font-weight: 700;
  border: 1px solid rgba(220, 53, 69, 0.2);
  transition: background 0.2s;
}

.nav-footer-link:hover {
  background: rgba(220, 53, 69, 0.22);
  color: var(--on-fill);
}

/* --------------------------------------------------------------------------
   10. CARDS & SURFACE PANELS - 🔥 UPGRADED WITH GLOWING BORDERS
   -------------------------------------------------------------------------- */
/* Refinement pass 2026-07-25 — matched to the landing page's treatment.
   Two problems here, both of which read as "sloppy" at a glance:

   1. DOUBLE BORDER. The `0 0 0 1px rgba(61, 168, 255,.15)` spread-only shadow
      draws a SECOND 1px ring immediately outside the real 1px border. Two
      hairlines in slightly different colours around every card is the single
      biggest reason this looked cheaper than the landing page. A card gets one
      border.
   2. RESTING SHADOW. Cards sat on a permanent 30px drop shadow, so nothing
      lifted on hover — depth was spent before the interaction. The landing page
      rests flat and spends its shadow on :hover, which is what makes the grid
      feel calm.

   Border colour now uses --border (var(--border)) instead of rgba(255,255,255,.1):
   the token exists, matches the reference exactly, and follows a theme change. */
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 45%),
    var(--surface, #111827);
  border: 1px solid var(--border, #2c3850);
  border-radius: 12px;
  padding: 18px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.card:hover {
  border-color: var(--primary, #7dd3fc);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(-3px);
}

.card-sm {
  border-radius: 12px;
  padding: 16px;
}

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   11. STAT TILES
   -------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.stat-card {
  background: var(--surface, #111827);
  /* Was rgba(255,255,255,.07) — a third distinct hairline colour alongside the
     .card and nav borders. Three near-identical greys is drift, not design;
     everything uses the --border token now so a theme change moves all of it. */
  border: 1px solid var(--border, #2c3850);
  border-radius: 10px;
  padding: 13px 10px;
  text-align: center;
  transition:
    transform 0.15s ease,
    border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary, #7dd3fc),
    var(--secondary, #38bdf8)
  );
  opacity: 0;
  transition: opacity 0.2s;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
  display: block;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--font-heading, "Orbitron", "Space Grotesk", sans-serif);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
  line-height: 1;
}

.stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.45);
}

.stat-card.credits-regular .stat-value {
  color: var(--primary, #7dd3fc);
}
.stat-card.credits-referral .stat-value {
  color: var(--accent, #c4b5fd);
}

/* --------------------------------------------------------------------------
   12. PROFILE HERO
   -------------------------------------------------------------------------- */
.profile-hero {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(61, 168, 255, 0.08) 0%,
    rgba(118, 75, 162, 0.06) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px 20px;
  margin-bottom: 18px;
  overflow: hidden;
}

.profile-hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(61, 168, 255, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.profile-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.profile-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--accent, #c4b5fd) 0%,
    var(--primary, #7dd3fc) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.8rem;
  color: #000;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-username {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  margin-bottom: 2px;
}

.profile-member-since {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.telegram-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(0, 200, 83, 0.12);
  border: 1px solid rgba(0, 200, 83, 0.3);
  border-radius: 20px;
  color: var(--success);
  font-weight: 700;
  font-size: 0.72rem;
  margin-top: 6px;
}

.membership-badge-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.membership-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

.membership-badge {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.membership-regular {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.membership-bronze {
  background: rgba(205, 127, 50, 0.2);
  color: var(--warning);
  border: 1px solid rgba(205, 127, 50, 0.4);
}
.membership-silver {
  background: rgba(192, 192, 192, 0.15);
  color: #c8c8c8;
  border: 1px solid rgba(192, 192, 192, 0.3);
}
.membership-gold {
  background: rgba(255, 215, 0, 0.15);
  color: var(--warning);
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.12);
}
.membership-platinum {
  background: rgba(229, 228, 226, 0.1);
  color: #ddd;
  border: 1px solid rgba(229, 228, 226, 0.25);
}
.membership-diamond {
  background: rgba(185, 242, 255, 0.1);
  color: var(--primary);
  border: 1px solid rgba(185, 242, 255, 0.3);
  box-shadow: 0 0 14px rgba(185, 242, 255, 0.1);
}

/* --------------------------------------------------------------------------
   13. REFERRAL SECTION
   -------------------------------------------------------------------------- */
.referral-section {
  background: var(--surface, #111827);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
}

.referral-section h2 {
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.referral-code-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.referral-code {
  flex: 1;
  min-width: 160px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent, #c4b5fd);
  text-align: center;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. ACTION BUTTON GRID
   -------------------------------------------------------------------------- */
.action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.action-button {
  background: var(--surface, #111827);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px 16px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
  color: var(--text, #fff);
  display: block;
  text-align: center;
}

.action-button:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: var(--on-fill);
}

.action-button:active {
  transform: translateY(-1px);
}

.action-button-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
  display: block;
}

.action-button-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   15. BUTTONS
   -------------------------------------------------------------------------- */
.btn,
.btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Landing-page button metrics (14/26, r11, 15px). The old 10x20 at
     0.875rem read as a dense ADMIN control rather than a consumer CTA —
     a large part of why the two pages felt like different products even
     though they share a palette. */
  gap: 8px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-primary, "Space Grotesk", system-ui, sans-serif);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s,
    background 0.2s,
    border-color 0.2s,
    opacity 0.2s;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}

.btn:hover,
.btn-3d:hover {
  transform: translateY(-2px);
}

.btn:active,
.btn-3d:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn-3d:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn-primary,
.btn-3d.primary {
  background: linear-gradient(
    135deg,
    var(--primary, #7dd3fc),
    var(--secondary, #38bdf8)
  );
  color: var(--primary-contrast, #06121f);
  box-shadow: 0 8px 24px rgba(61, 168, 255, 0.28);
  border-color: transparent;
}
/* ONE shadow, not two. The old hover stacked a tight cyan drop shadow AND a
   26px ambient bloom, which is the halo that made these look garish next to the
   landing page's identical-colour buttons. Same brand gradient, same colour —
   the only difference was the second glow layer. */
.btn-primary:hover,
.btn-3d.primary:hover {
  box-shadow: 0 12px 32px rgba(61, 168, 255, 0.4);
  color: var(--primary-contrast, #06121f);
}

.btn-primary-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-primary, "Space Grotesk", system-ui, sans-serif);
  text-decoration: none;
  background: linear-gradient(
    135deg,
    var(--primary, #7dd3fc),
    var(--secondary, #38bdf8)
  );
  color: var(--primary-contrast, #06121f);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(61, 168, 255, 0.25);
  white-space: nowrap;
  line-height: 1;
}

.btn-primary-3d:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(61, 168, 255, 0.5),
    0 0 26px rgba(61, 168, 255, 0.35);
  color: var(--primary-contrast, #06121f);
}

.btn-primary-3d:active {
  transform: translateY(1px);
}

.btn-primary-3d:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-success,
.btn-3d.success {
  background: linear-gradient(135deg, var(--success), var(--success));
  color: var(--on-fill);
  box-shadow: 0 4px 14px rgba(0, 200, 83, 0.2);
  border-color: transparent;
}
.btn-success:hover,
.btn-3d.success:hover {
  color: var(--on-fill);
  box-shadow: 0 6px 20px rgba(0, 200, 83, 0.35);
}

.btn-danger,
.btn-3d.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: var(--on-fill);
  border-color: transparent;
}

.btn-outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--on-fill);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent, #c4b5fd), #a78bfa);
  color: #000;
  font-weight: 800;
  border-color: transparent;
}

.btn-sm {
  padding: 7px 14px;
  font-size: 0.8rem;
  border-radius: 8px;
}
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: 12px;
}
.btn-full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   16. FORM ELEMENTS
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--on-fill);
  font-size: 0.9rem;
  font-family: var(--font-primary, "Space Grotesk", system-ui, sans-serif);
  transition:
    border-color 0.2s,
    background 0.2s;
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary, #7dd3fc);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(61, 168, 255, 0.12);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* --------------------------------------------------------------------------
   17. FEEDBACK MESSAGES
   -------------------------------------------------------------------------- */
.error-message {
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  color: var(--error);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.success-message {
  padding: 14px 16px;
  background: rgba(0, 200, 83, 0.1);
  border: 1px solid rgba(0, 200, 83, 0.25);
  border-radius: 10px;
  color: var(--success);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.warning-message {
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  color: #fcd34d;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   18. BADGES & PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background: rgba(61, 168, 255, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(61, 168, 255, 0.3);
}
.badge-success {
  background: rgba(0, 200, 83, 0.15);
  color: var(--success);
  border: 1px solid rgba(0, 200, 83, 0.3);
}
.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-gold {
  background: rgba(255, 215, 0, 0.12);
  color: var(--warning);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* --------------------------------------------------------------------------
   19. PAGE SECTION HEADERS
   -------------------------------------------------------------------------- */
.section-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.section-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.section-subtitle {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   20. LOADING
   -------------------------------------------------------------------------- */
.loading-spinner {
  text-align: center;
  padding: 48px 20px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.9rem;
}

.loading-spinner::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--primary, #7dd3fc);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   21. PAGE-SPECIFIC: MY ACCOUNT
   -------------------------------------------------------------------------- */
.profile-container {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   GENERATION PROGRESS — one shared component for every generator.

   Steven, 2026-08-09: "they all should have a progress bar when generating".
   Built here rather than per page because each generator had been growing its
   own copy of everything (that is how 28 templates ended up with 125 hardcoded
   sky-blue literals). One class, four pages.

   Two modes, and which one is honest depends on the endpoint:
     .gen-bar                 indeterminate sweep — use when the server gives
                              no percentage (upscale and random are a single
                              synchronous POST; there is nothing to poll)
     .gen-bar.is-determinate  fills to --gen-pct — only for real, server-sent
                              progress
   A fabricated percentage that stalls at 90% is worse than an honest elapsed
   clock, so the sweep is the default.
   -------------------------------------------------------------------------- */
.gen-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
}

.gen-bar {
  position: relative;
  height: 4px;
  width: 100%;
  background: var(--surface-3, rgba(255, 255, 255, 0.07));
  border-radius: var(--radius-full, 999px);
  overflow: hidden;
}

.gen-bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: genSweep 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.gen-bar.is-determinate > span {
  animation: none;
  left: 0;
  width: var(--gen-pct, 0%);
  transition: width 300ms ease;
}

@keyframes genSweep {
  0% {
    left: -38%;
  }
  100% {
    left: 100%;
  }
}

.gen-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.gen-status .gen-elapsed {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint, var(--text-secondary));
}

@media (prefers-reduced-motion: reduce) {
  .gen-bar > span {
    animation-duration: 3s;
  }
}

/* ==========================================================================
   SHARED UI COMPONENTS — compact carbonite

   Steven, 2026-08-09: "do them all like that" — i.e. give every page the
   density and finish the nav rail got.

   WHY THIS EXISTS RATHER THAN 28 EDITS. Measured before writing a line:

     shared stylesheet defines    115 classes
     page <style> blocks define   511 classes
     total inline page CSS        121,349 bytes across 28 templates
     colliding class names         48  (page inline wins, so shared-sheet
                                        work silently never lands)
     page-only, repeated 3+ times  18  (the real component gaps)

   Those 18 are the same widgets retyped on every generator: the credit
   picker, the upload dropzone, the cost row, field labels, hints, error and
   success lines. Each copy drifted, which is how one site ended up with four
   different card paddings and three different hairline greys.

   So: define them once, here, then delete the duplicates from the page
   blocks. That is the only version of "restyle everything" that stays fixed
   — otherwise the next page added starts the drift again.

   RULES FOR THIS SECTION
   · Every colour, radius and space is a token. No literals.
   · Flat by default; decoration lives on :hover and [aria-]state. A control
     that carries its own gradient + border + shadow competes with the one
     next to it — that is what made the old nav look hand-made.
   · Compact first: these are dense admin//generator screens, not a landing
     page.
   ========================================================================== */

/* ── Page head ─────────────────────────────────────────────────────────── */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.page-head h1,
.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 0;
}

.page-sub,
.page-head p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.section-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-faint, var(--text-secondary));
  margin: var(--space-5) 0 var(--space-2);
}

/* ── Badges / chips ────────────────────────────────────────────────────── */
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.5;
  white-space: nowrap;
}

.badge-primary {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(61, 168, 255, 0.1);
}
.badge-success {
  border-color: var(--success);
  color: var(--success);
  background: rgba(47, 217, 139, 0.1);
}
.badge-warning {
  border-color: var(--warning);
  color: var(--warning);
  background: rgba(255, 180, 84, 0.1);
}
.badge-error {
  border-color: var(--error);
  color: var(--error);
  background: rgba(255, 92, 122, 0.1);
}
.badge-solid {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-4);
}

.field-label,
.form-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.hint,
.helper {
  font-size: 0.72rem;
  color: var(--text-faint, var(--text-secondary));
  margin: 4px 0 0;
  line-height: 1.45;
}

.form-control,
input[type="text"].form-control,
textarea.form-control,
select.form-control {
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow, rgba(61, 168, 255, 0.18));
}

.form-control::placeholder {
  color: var(--text-faint, var(--text-secondary));
}

/* ── Credit picker (every generator has one) ───────────────────────────── */
.credit-selector {
  margin-bottom: var(--space-4);
}

.credit-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.credit-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.credit-option:hover {
  border-color: var(--primary);
}

/* Selected reads as a tinted, ringed tile — no gradient, no lift. */
.credit-option.selected {
  border-color: var(--primary);
  background: rgba(61, 168, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.credit-option.disabled,
.credit-option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
  background: var(--surface);
}

.credit-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.credit-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.credit-option.selected .credit-label {
  color: var(--primary);
}

/* ── Upload dropzone ───────────────────────────────────────────────────── */
.upload-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  cursor: pointer;
  transition: var(--transition);
}

.upload-area:hover,
.upload-area.drag-over {
  border-color: var(--primary);
  background: rgba(61, 168, 255, 0.06);
}

.upload-area.has-file {
  border-style: solid;
  border-color: var(--success);
  background: rgba(47, 217, 139, 0.06);
}

.upload-area h3 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: var(--font-primary);
}

.upload-icon {
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.85;
}

/* ── Cost row ──────────────────────────────────────────────────────────── */
.cost-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  margin-bottom: var(--space-4);
}

.cost-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}

.cost-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

/* ── Inline messages ───────────────────────────────────────────────────── */
.err,
.ok,
.error-message,
.success-message {
  padding: 8px 11px;
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: var(--space-3) 0;
}

.err,
.error-message {
  color: var(--error);
  border-color: rgba(255, 92, 122, 0.35);
  background: rgba(255, 92, 122, 0.08);
}

.ok,
.success-message {
  color: var(--success);
  border-color: rgba(47, 217, 139, 0.35);
  background: rgba(47, 217, 139, 0.08);
}

/* ── Before/after preview pair ─────────────────────────────────────────── */
.preview-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.preview-box {
  padding: var(--space-3);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.preview-box h4 {
  margin: 0 0 var(--space-2);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-family: var(--font-primary);
}

.preview-box img,
.preview-box video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  font-size: 2rem;
  opacity: 0.5;
  display: block;
  margin-bottom: var(--space-2);
}
.empty-state h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-family: var(--font-primary);
}
.empty-state p {
  margin: 0;
  font-size: 0.78rem;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.tab {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.tab:hover {
  color: var(--text);
  background: var(--surface-3);
}
.tab.active {
  color: var(--primary-contrast);
  background: var(--primary);
}

/* ==========================================================================
   HUB FRAMING — the classiklustai.love page vocabulary

   Steven, 2026-08-09: "you see how my site's framing and stuff is, font etc,
   I love that design, looks good — compact that for my generation site".

   Read off the live hub pages (/affiliate.html, /admin-cpanel.html) rather
   than invented. The pattern that makes those pages read as designed is not
   the colour — that was already ported — it is the CONSISTENT THREE-PART
   CARD HEAD:

       kicker      tiny, uppercase, letter-spaced, PRIMARY-coloured
       heading     Orbitron, tight, plain white
       body        ~0.85rem, muted, generous line-height

   Everything else on those pages is small: 0.8rem buttons, 0.72rem labels,
   ✓ rows at 0.85rem. The size contrast between a tiny kicker and a solid
   heading is what does the work, so these deliberately do NOT scale up.
   ========================================================================== */

/* ── Card head ─────────────────────────────────────────────────────────── */
.kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.kicker-muted {
  color: var(--text-faint, var(--text-secondary));
}

.card-head {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

.card-body-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

/* ── Centred section header (the "Placement Tiers & Pricing" pattern) ──── */
.section-head {
  text-align: center;
  margin: var(--space-10) auto var(--space-6);
  max-width: 60ch;
}

.section-head h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.section-head p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── Feature checklist ─────────────────────────────────────────────────── */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The tick is generated, so markup stays clean and the colour follows theme. */
.check-list li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--primary);
  font-weight: 700;
  line-height: 1.5;
}

/* ── Price row: label+sub | value | savings pill | action ──────────────── */
.price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 0;
  border-top: 1px solid var(--divider, var(--border));
}

.price-row:first-of-type {
  border-top: none;
}

.price-row-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.price-row-label strong {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.price-row-label span {
  font-size: 0.7rem;
  color: var(--text-faint, var(--text-secondary));
}

.price-row-value {
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.price-save {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  color: var(--success);
  background: rgba(47, 217, 139, 0.12);
  white-space: nowrap;
}

/* ── Buttons at hub scale ──────────────────────────────────────────────── */
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-md);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.btn-sm:hover {
  background: var(--color-primary-hover, var(--primary));
}

.btn-sm.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}

.btn-sm.ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Featured strip (the full-width "⭐ FEATURED" bar) ──────────────────── */
.feature-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 7px 12px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.feature-strip.is-featured {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(61, 168, 255, 0.1);
}

/* ── Highlight card (the admin stat tiles with a tinted corner glow) ───── */
.tile {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.tile-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.tile-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.tile-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--text-faint, var(--text-secondary));
}

/* The glow is a corner wash, not a box-shadow — it stays inside the border
   radius and does not lift the card off the page. */
.tile::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(
    circle,
    var(--tile-glow, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.tile.glow-primary {
  --tile-glow: rgba(61, 168, 255, 0.16);
}
.tile.glow-accent {
  --tile-glow: rgba(0, 221, 255, 0.14);
}
.tile.glow-success {
  --tile-glow: rgba(47, 217, 139, 0.14);
}
.tile.glow-warning {
  --tile-glow: rgba(255, 180, 84, 0.14);
}
.tile.glow-error {
  --tile-glow: rgba(255, 92, 122, 0.14);
}

/* ── Generator page head — kicker + Orbitron title + muted line ────────── */
.gen-head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--divider, var(--border));
}

.gen-head h1 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
}

.gen-head p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Stat cards, reframed to the hub's admin tile layout ────────────────
   Label on top (tiny, uppercase, muted), then a big Orbitron number, then a
   caption — with the emoji demoted to a faint corner mark. That ordering is
   what makes the hub's traffic tiles scannable: you read the label, then the
   figure, and the icon never competes.

   Done with the flex "order" property rather than by rewriting markup, because these
   cards are emitted from a JS template literal inside renderProfile() on
   my-account — restyling reaches every page that uses .stat-card without
   touching a single tag. Later in the file than the base rule, so it wins. */
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  overflow: hidden;
  padding: 12px 12px 11px;
  min-height: 0;
}

.stat-card .stat-icon {
  position: absolute;
  top: 9px;
  right: 10px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.5;
}

.stat-card .stat-label {
  order: 1;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-right: 18px;
}

.stat-card .stat-value {
  order: 2;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 5px 0 0;
}

.stat-card .stat-sublabel {
  order: 3;
  margin-top: 2px;
  font-size: 0.62rem;
  color: var(--text-faint, var(--text-secondary));
  opacity: 1;
}

/* ==========================================================================
   TYPOGRAPHIC SCALE — applied to existing markup, no page edits

   Most pages never adopted the .kicker/.card-head classes because they use
   plain h1/h2/h3 inside a .card — restructuring 8 templates to add classes
   would be a lot of churn for the same result. Styling the tags directly
   reaches every page at once, including any page added later.

   Sizes are the hub's: a page title around 1.35rem, section heads near
   1.05rem, sub-heads under 1rem. The old pages ran 1.8rem/1.5rem with
   font-weight 900, which is what made ordinary panels shout.
   ========================================================================== */
.container h1,
.shell h1 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2px;
  margin: 0 0 var(--space-2);
}

.card h2,
.settings-section h2,
.container > h2 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

.card h3,
.settings-section h3 {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.card h4,
.settings-section h4 {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 6px;
}

/* The tagline under a page title, used by several generators. */
.tagline {
  margin: 0 0 var(--space-4);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ==========================================================================
   DESKTOP LAYOUT — stop being a phone layout on a 1366px screen

   Steven, 2026-08-09: "viewing via PC, it's tailored for mobile, so everything
   [is] extra". Correct diagnosis: the site is mobile-FIRST and never scales
   UP. Every generator is one narrow column, so a wide screen just adds dead
   gutter and vertical scrolling instead of showing more at once.

   Nothing below runs under 900px — the phone layout is already right (measured:
   no fixed width in any page template can overflow a 360px screen, and the
   shared grids are all auto-fit/minmax, which is why it fits). This only adds
   the layout the desktop was missing.
   ========================================================================== */
@media (min-width: 900px) {
  /* Generators become media-left / controls-right.
     Works with the existing markup because the two media blocks are direct
     children and are placed EXPLICITLY; everything else auto-flows into
     column 2. No template changes, so a page that later adds a control gets
     the right column for free. */
  #generateForm,
  #hsForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 26px;
    align-items: start;
  }

  #generateForm > .upload-area,
  #hsForm > .upload-area {
    grid-column: 1;
    grid-row: 1;
  }

  #generateForm > .preview-container,
  #hsForm > .preview-container {
    grid-column: 1;
    grid-row: 2;
  }

  #generateForm > *:not(.upload-area):not(.preview-container),
  #hsForm > *:not(.upload-area):not(.preview-container) {
    grid-column: 2;
  }

  /* The upload zone was sized for a phone; give it real height beside the
     controls so the two columns balance instead of one dangling. */
  #generateForm > .upload-area,
  #hsForm > .upload-area {
    min-height: 200px;
  }

  /* Stat tiles were locked to 3 columns, so half the width went unused.
     auto-fit lets a wide screen show six across and a laptop four, without a
     breakpoint per size. */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* Inputs below 16px make iOS zoom the whole page on focus. That is the real
   reason viewport zoom gets disabled — fixed at the source so pinch-zoom can
   stay enabled. */
@media (max-width: 720px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}