/* =====================================================================================================================
   BloxMaps THEME (theme.css): the one look for every page. Near-black, crisp white type, ONE glossy blue action colour.
   Loaded by base.html on every page, right after app.css + nav.css (so it wins over them) and before a page's own CSS
   ({% block head %}). docs/_layout.html and bloxui_base.html are separate bases (see the end of this note).

   HOW TO USE IT (phase-2 agents: read this first)
   - Do not hard-code colours, radii or shadows in page CSS: use the tokens below. Old app.css token names (--bg,
     --surface, --ink, --blue, --accent, --line, --r, --s-1..8 ...) are REMAPPED here to the new palette, so pages written
     against app.css already follow it; new code should prefer the names in the TOKENS table.
   - Dark is the only theme (the light / dark toggle is gone). For a white contrast band use .sec-light (it flips the
     tokens inside it, so every component in it turns light automatically).
   - Marketing pages (signed out): extend base.html. Signed-in app pages: extend base_app.html (sidebar + top bar;
     see the APP SHELL section at the end of this file and the comment at the top of base_app.html).

   TOKENS (all on :root)
     colour    --bg #070708 page · --bg-2 #0c0c0e band · --surface #111114 card · --surface-2 #18191c raised / modal
               --surface-3 #222327 hover / input · --line rgba(255,255,255,.08) hairline · --line-2 .14 strong hairline
               --ink #f5f6f8 text · --ink-2 #a6aab3 secondary · --ink-3 #7d818b faint (AA on --bg for >= 14px)
               --blue #4a90ff links + fills · --blue-1 #0a5cff / --blue-2 #2f86ff the glossy gradient · --blue-soft tint
               --green #34d399 success · --red #ff6b6b danger · --purple #7c6cff (only the account pill's border)
     gradient  --grad-blue (the primary button) · --grad-ring (account pill border) · --grad-hero (page-top glow)
     glow      --glow-blue (button glow) · --glow-blue-lg (hover / featured) · --shadow-1/2/3 (soft depth, no hard drops)
     type      --font-body / --font-display Inter · --font-hero Anton (UPPERCASE condensed headlines only)
               --fs-hero clamp(2.9rem..6.4rem) · --fs-h1 · --fs-h2 · --fs-h3 · --fs-lead 1.15-1.3rem · --fs-body 1rem (16px)
               --fs-small .875rem · --fs-tiny .78rem
     space     --s-1 4 · --s-2 8 · --s-3 12 · --s-4 16 · --s-5 24 · --s-6 32 · --s-7 48 · --s-8 64 · --s-9 96 · --s-10 128
     radius    --r-xs 8 · --r-sm 10 · --r 14 · --r-lg 20 · --r-xl 28 · --r-pill 999px · --r-app 12 (buttons in the app)
     layout    --wrap 1200px · --gutter 16 (24 from 720px) · --header-h 64 · --side-w 288 (app sidebar) · --side-w-min 72
     motion    --ease · --ease-out · --t .18s (all motion is off under prefers-reduced-motion)

   COMPONENTS (class -> when to use it)
     Type      .t-display  the huge condensed UPPERCASE headline (h1/h2 of a hero or a statement). Put the second line in
                           <span class="t-dim"> (.t-dim: slightly dimmer). .h-stroke (old pages) now renders the same way.
               .t-eyebrow  small caps label over a heading · .t-lead  the paragraph under a headline · .t-mute / .t-faint
     Buttons   .btn                 = primary (glossy blue). Pill on marketing pages, 12px radius inside .app (the shell).
               .btn-primary         explicit primary (same as .btn, .btn-go, .btn-yellow, .btn-purple)
               .btn-secondary       dark grey, thin border (same as .btn-ghost, .btn-dark)
               .btn-quiet           text-only button · .btn-danger (= .btn-pink)
               sizes .btn-sm 36px · (default 44px) · .btn-lg 52px · .btn-xl 60px · .btn-block full width
               inside: <svg class="i"> icon, <span class="btn-sub">Free to try</span> lighter suffix,
               <svg class="i btn-chev"><use href="#i-chev"/></svg> trailing chevron (nudges right on hover)
               .icon-btn  square 40px icon button (bordered) · .pill / .pill-blue  small rounded label or link
     Labels    .badge (+ .badge-blue / -green / -pink / -yellow) · .tag (picture tag on a card) · .chip (choice / idea)
     Surfaces  .card (+ .card-tight) · .t-card (alias) · .card-hover (lift + blue glow on hover) · .glass (frosted)
               .shot-card  picture card: .shot-pic (img + .tag) .shot-body (.shot-quote, .shot-meta, .pill)
               .marquee > .marquee-track  auto-scrolling row (theme.js duplicates the items for a seamless loop; pauses
                          on hover / focus; reduced motion = a normal sideways scroll)
               .float-card  rounded tilted picture with depth (hero decorations: style="--rot:-6deg")
     Sections  .sec (big vertical rhythm) · .sec-sm · .sec-head (centred heading + lead) · .sec-light (white band)
               .statement (big centred statement + CTA) · .divider (hairline)
     Forms     .field > label.field-label + .input / .textarea / select.input + .field-hint · .seg / .seg-btn (segmented)
               .tabs > .tab[aria-selected] (role=tablist / tab) · .switch · .search (icon + input)
     Accordion .faq > details > summary + p   (motion.js animates it)
     Tables    .table (wrap it in .table-wrap for sideways scroll on phones)
     Overlays  dialog.modal > .modal-box > .modal-head (h2 + .icon-btn close) · .toasts > .toast(.ok|.err)
               .menu (dropdown) · .success-screen (centred glowing icon, title, grey text, one .btn)
     Notes     .note (+ .note-green / -pink / -yellow)
     Chrome    .site-header / .nav / .header-right / .account-slot (base.html) · .site-footer (base.html)
     Utility   .wrap / .container · .stack (12px) .stack-sm .stack-lg · .cluster (wrap row, gap 12) · .grid-2/3/4
               (responsive columns) · .center / .text-center · .muted · .t-mute · .small · .tiny · .hide-phone /
               .only-phone · .full-bleed · .mt-0 .mb-0 · .sr-only
     App shell .app (grid) .app-side (sidebar) .app-main .app-top (top bar) .app-body (page content) .app-grid-bg
               .app-nav-link[aria-current] .app-sec (collapsible group) .app-plan (plan card) .app-search .app-prompt
               (the big prompt card with .tabs + .btn send). Built by base_app.html + static/js/shell.js.

   Separate bases: bloxui_base.html (the BloxUI shop on ui.<domain>) loads app.css + theme.css + pages-bloxui.css itself
   (its own top bar / footer, absolute links); bloxui.css and theme-shop.css are no longer linked by any page.
   docs/_layout.html is its own page (no base.html) with docs.css, restyled to these tokens in the redesign.
   ===================================================================================================================== */

/* ---------------------------------------------------------------- TOKENS
   :root:root:root beats app.css's :root, :root[data-theme=...] and its prefers-color-scheme block (dark only now) */
:root:root:root {
  color-scheme: dark;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hero: "Anton", "Archivo Black", Impact, "Arial Narrow", sans-serif;

  --fs-hero: clamp(2.9rem, 8.4vw, 6.4rem);
  --fs-h1: clamp(2.2rem, 5.4vw, 4rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.08rem, 1.6vw, 1.28rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.78rem;

  --s-9: 96px; --s-10: 128px;
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --r-app: 12px;
  --wrap: 1200px;
  --side-w: 288px; --side-w-min: 72px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.3, 1.4, 0.5, 1);

  /* the blue scale (app.css names kept so old page CSS follows) */
  --p-50: #eef4ff; --p-100: #d9e6ff; --p-200: #b3ccff; --p-300: #82acff; --p-400: #4a90ff;
  --p-500: #2f86ff; --p-600: #1d6bff; --p-700: #0a5cff; --p-800: #0847c4; --p-900: #062f85;
  --blue-1: #0a5cff; --blue-2: #2f86ff;
  --grad-blue: linear-gradient(180deg, #3d8fff 0%, #1d6bff 55%, #0a5cff 100%);
  --grad-blue-hover: linear-gradient(180deg, #55a0ff 0%, #2f7bff 55%, #1466ff 100%);
  --grad-ring: linear-gradient(135deg, rgba(124, 108, 255, 0.9), rgba(47, 134, 255, 0.9) 55%, rgba(120, 200, 255, 0.6));
  --grad-hero: radial-gradient(60% 55% at 50% -8%, rgba(47, 123, 255, 0.28), transparent 70%);
  --glow-blue: 0 6px 22px -6px rgba(29, 107, 255, 0.75), 0 0 0 1px rgba(61, 139, 255, 0.55);
  --glow-blue-lg: 0 10px 36px -6px rgba(29, 107, 255, 0.9), 0 0 0 1px rgba(110, 170, 255, 0.7), 0 0 60px -10px rgba(47, 134, 255, 0.55);

  --bg: #070708;
  --bg-2: #0c0c0e;
  --bg-dots: transparent;
  --glow: rgba(47, 123, 255, 0.18);
  --surface: #111114;
  --surface-2: #18191c;
  --surface-3: #222327;
  --ink: #f5f6f8;
  --ink-2: #a6aab3;
  --ink-3: #7d818b;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --drop: transparent;              /* the old cartoon hard drop shadows: gone */
  --stroke: transparent;            /* the old stroked headings' outline: gone */
  --overlay: rgba(2, 2, 4, 0.74);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.75);
  --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 32px 70px -24px rgba(0, 0, 0, 0.85);

  --blue: #4a90ff;
  --blue-d: #1d6bff;
  --blue-soft: rgba(47, 123, 255, 0.14);
  --on-blue: #ffffff;
  --accent: #2f7bff;                /* the call to action is blue now (it was amber) */
  --accent-d: #0a5cff;
  --accent-soft: rgba(47, 123, 255, 0.12);
  --on-accent: #ffffff;
  --green: #34d399;
  --green-d: #6ee7b7;
  --green-soft: rgba(52, 211, 153, 0.12);
  --red: #ff6b6b;
  --red-d: #ff9b9b;
  --red-soft: rgba(255, 107, 107, 0.12);
  --yellow: var(--accent); --yellow-d: var(--accent-d); --yellow-soft: var(--accent-soft); --ink-on-yellow: #fff;
  --pink: var(--red); --pink-d: var(--red-d); --pink-soft: var(--red-soft);
  --purple: #7c6cff; --purple-d: #5b4bdf; --purple-soft: rgba(124, 108, 255, 0.14);
  --orange: var(--accent);
  --focus: #6aa6ff;
  --grid-line: rgba(255, 255, 255, 0.035);
}
@media (min-width: 720px) { :root:root:root { --gutter: 24px; } }

/* ---------------------------------------------------------------- BASE */
html { background: var(--bg); }
img { height: auto; }   /* keeps a picture's own shape when max-width shrinks it (classes still set heights) */
body {
  background-color: var(--bg);
  background-image: var(--grad-hero);
  background-repeat: no-repeat;
  background-size: 100% 900px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
/* a whisper of film grain over everything (an 8 KB-free SVG noise tile, no network request) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #7fb0ff; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-weight: 700; letter-spacing: -0.01em; }
label { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(47, 123, 255, 0.45); color: #fff; }
.muted, .t-mute { color: var(--ink-2); }
.t-faint { color: var(--ink-3); }
.skip-link { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
html { scrollbar-color: #2a2b30 var(--bg); }

/* ---------------------------------------------------------------- DISPLAY TYPE */
.t-display, .h-stroke {
  font-family: var(--font-hero); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; word-spacing: 0.04em;
  line-height: 0.98; color: #fff; text-wrap: balance;
  -webkit-text-stroke: 0 transparent; text-shadow: none; paint-order: normal;
}
h1.t-display, h1.h-stroke { font-size: var(--fs-hero); }
h2.t-display, h2.h-stroke { font-size: var(--fs-h2); line-height: 1; }
.h-stroke.sm { -webkit-text-stroke-width: 0; text-shadow: none; }
@supports (paint-order: stroke fill) {
  .h-stroke, .h-stroke.sm { -webkit-text-stroke: 0 transparent; text-shadow: none; }
}
@media (max-width: 520px) { .h-stroke, .h-stroke.sm { -webkit-text-stroke-width: 0; text-shadow: none; } }
.t-dim, .h-stroke .mark, .t-display .mark { color: rgba(255, 255, 255, 0.5); background: none; padding: 0; }
.t-blue { background: linear-gradient(180deg, #8fbaff, #3d8bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-eyebrow, .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-3);
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.t-lead, .lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55; font-weight: 400; }

/* ---------------------------------------------------------------- BUTTONS
   one glossy blue (gradient, a soft inner top highlight, a blue glow); secondary = dark grey with a thin border */
.btn {
  --b: var(--accent); --bd: var(--accent-d); --bt: #fff;
  min-height: 44px; padding: 10px 22px; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; line-height: 1.1;
  color: #fff; background: var(--grad-blue); background-size: auto; animation: none;
  border: 0; border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), var(--glow-blue);
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.2s, border-color 0.2s;
}
.btn:hover { color: #fff; filter: none; transform: translateY(-1px); background: var(--grad-blue-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.18), var(--glow-blue-lg); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.06s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 10px -4px rgba(29, 107, 255, 0.8), 0 0 0 1px rgba(61, 139, 255, 0.5); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: var(--r-pill); }
.btn .i { width: 1.15em; height: 1.15em; stroke-width: 2.2; }
.btn-primary, .btn-go, .btn-yellow, .btn-purple { --b: var(--accent); color: #fff; background: var(--grad-blue); animation: none; }
.btn-go:hover, .btn-yellow:hover, .btn-purple:hover, .btn-primary:hover { animation: none; background: var(--grad-blue-hover); }
.btn-sub { font-weight: 400; opacity: 0.78; padding-left: 8px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, 0.3); }
.btn-chev { width: 1em !important; height: 1em !important; stroke-width: 2.6 !important; transition: transform 0.2s var(--ease); }
.btn:hover .btn-chev { transform: translateX(3px); }

.btn-secondary, .btn-ghost, .btn-dark {
  color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-secondary:hover, .btn-ghost:hover, .btn-dark:hover { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px -10px rgba(0, 0, 0, 0.8); }
.btn-secondary:active, .btn-ghost:active, .btn-dark:active { box-shadow: none; }
:root:root .btn-dark { color: var(--ink); }
.btn-quiet { color: var(--ink-2); background: transparent; box-shadow: none; }
.btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.btn-danger, .btn-pink { color: #fff; background: linear-gradient(180deg, #ff6b6b, #e5484d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 20px -8px rgba(229, 72, 77, 0.8); }
.btn-danger:hover, .btn-pink:hover { background: linear-gradient(180deg, #ff8080, #ef5357); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 28px -8px rgba(229, 72, 77, 0.9); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 0.9rem; border-radius: var(--r-pill); }
.btn-sm:active { transform: scale(0.98); }
.btn-lg { min-height: 52px; padding: 13px 28px; font-size: 1.06rem; border-radius: var(--r-pill); }
.btn-xl { min-height: 60px; padding: 16px 32px; font-size: 1.14rem; border-radius: var(--r-pill); }
.btn[disabled], .btn.is-disabled { color: var(--ink-3); background: var(--surface-3); box-shadow: none; transform: none; border: 1px solid var(--line); }
.btn.is-locked { color: var(--ink-2); background: var(--surface-3); box-shadow: none; border: 1px solid var(--line-2); }
.btn-link { color: var(--blue); font-weight: 600; text-decoration-thickness: 1px; }
/* the idea chips' "press me" pulse: the blue glow */
@keyframes go-pulse { 0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(61, 139, 255, 0.7); }
  50% { transform: scale(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 12px rgba(61, 139, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .go-pulse { outline: 2px solid var(--focus); } }

.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2); box-shadow: none; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.icon-btn:active { transform: scale(0.96); box-shadow: none; }
.icon-btn .i { width: 19px; height: 19px; stroke-width: 2; }

.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 14px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.86rem; line-height: 1.2; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.25s; }
.pill:hover { color: #fff; background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); }
.pill .i { width: 1em; height: 1em; stroke-width: 2.4; }
.pill-blue { color: #fff; background: var(--grad-blue); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 16px -6px rgba(29, 107, 255, 0.8); }
.pill-blue:hover { color: #fff; background: var(--grad-blue-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--glow-blue); }

/* ---------------------------------------------------------------- BADGES, TAGS, CHIPS */
.badge { padding: 2px 9px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em;
  line-height: 1.7; background: rgba(255, 255, 255, 0.07); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.badge-blue, .badge-yellow, .badge-lock, .tier-pro, .tier-studio { background: rgba(47, 123, 255, 0.16); color: #a9c8ff; border-color: rgba(74, 144, 255, 0.4); box-shadow: none; }
.tier-studio { background: linear-gradient(135deg, rgba(124, 108, 255, 0.25), rgba(47, 134, 255, 0.25)); color: #d4ccff; }
.badge-green { background: var(--green-soft); color: var(--green-d); border-color: rgba(52, 211, 153, 0.35); box-shadow: none; }
:root:root .badge-pink, .badge-pink { background: var(--red-soft); color: var(--red-d); border-color: rgba(255, 107, 107, 0.35); box-shadow: none; }
.badge-lock.lk-login { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.tier-free, .tier-anonymous { background: rgba(255, 255, 255, 0.07); color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.04em; color: #fff; background: rgba(8, 8, 10, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.chip { min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2);
  color: var(--ink-2); font-weight: 500; font-size: 0.92rem; box-shadow: none; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.chip:hover { color: #fff; border-color: rgba(74, 144, 255, 0.7); background: rgba(47, 123, 255, 0.1); transform: translateY(-1px); }
.chip:active { transform: scale(0.98); box-shadow: none; }
.chip.chip-more { background: transparent; border-style: dashed; color: var(--ink-3); }
.chip.chip-more:hover { color: #fff; border-color: rgba(74, 144, 255, 0.7); }

/* ---------------------------------------------------------------- SURFACES */
.card, .t-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 22px; }
.card-hover { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(74, 144, 255, 0.45);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(74, 144, 255, 0.25), 0 18px 50px -20px rgba(47, 123, 255, 0.55); }
.glass { background: rgba(20, 21, 25, 0.6); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.map-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; }
.map-card:hover { transform: translateY(-4px); border-color: rgba(74, 144, 255, 0.4);
  box-shadow: var(--shadow-2), 0 18px 50px -24px rgba(47, 123, 255, 0.6); }
.map-card .thumb { background: var(--surface-3); }
.map-card .prompt { font-weight: 600; }
.map-card .meta { color: var(--ink-3); font-weight: 500; }
.placeholder-art { background: linear-gradient(135deg, #12213f, #0b1222); color: rgba(150, 190, 255, 0.4); }

/* the picture card of a showcase row: picture with a tag, the prompt in quotes, a small pill */
.shot-card { position: relative; display: flex; flex-direction: column; flex: none; width: min(78vw, 320px); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--ink); text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s; }
.shot-card:hover { transform: translateY(-6px); border-color: rgba(74, 144, 255, 0.45); color: var(--ink);
  box-shadow: var(--shadow-3), 0 22px 60px -24px rgba(47, 123, 255, 0.7); }
.shot-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.shot-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.2s var(--ease-out); }
.shot-card:hover .shot-pic img { transform: scale(1.07); }
.shot-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55)); pointer-events: none; }
.shot-pic .tag { position: absolute; z-index: 1; top: 10px; left: 10px; }
.shot-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.shot-quote { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.shot-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--ink-3); font-size: 0.82rem; }
.shot-meta b { color: var(--ink-2); font-weight: 600; }

/* the auto-scrolling row (theme.js clones the items once, aria-hidden, so the loop is seamless) */
.marquee { position: relative; overflow: hidden; padding: 12px 0 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 20px; width: max-content; padding: 0 10px; list-style: none; margin: 0;
  animation: marquee var(--marquee-s, 60s) linear infinite; }
.marquee-track > li { display: flex; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(calc(-50% - 10px)); } }
.no-js .marquee-track, .marquee:not(.is-ready) .marquee-track { animation: none; }
.marquee:not(.is-ready) { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
.marquee:not(.is-ready) .marquee-track > li { scroll-snap-align: start; }

/* a lazy muted loop (theme.js [data-loop]): the poster picture until the clip plays, then a soft cross-fade */
[data-loop] { position: relative; overflow: hidden; }
[data-loop] .loop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
[data-loop].is-playing .loop-video { opacity: 1; }

/* tilted picture with depth (hero decorations) */
.float-card { position: absolute; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg)); will-change: transform; }
.float-card img { width: 100%; height: 100%; object-fit: cover; }
.float-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 40%, rgba(0, 0, 0, 0.35)); }

/* ---------------------------------------------------------------- SECTIONS */
.sec { position: relative; padding: clamp(56px, 7.5vw, 104px) 0; }
.sec-sm { padding: clamp(40px, 6vw, 72px) 0; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-sm { padding: clamp(32px, 5vw, 56px) 0; }
.sec-head, .section-head { text-align: center; max-width: 880px; margin: 0 auto clamp(28px, 4vw, 48px); }
.sec-head h2, .section-head h2 { margin: 0 0 14px; }
.sec-head p:not(.t-eyebrow), .section-head p:not(.t-eyebrow) { color: var(--ink-2); font-size: var(--fs-lead); margin: 0 auto; max-width: 620px; font-weight: 400; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; max-width: none; }
.sec-head-row p { margin: 0; }
.divider { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
/* a white band (contrast): the tokens flip inside it, so components in it turn light */
.sec-light {
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f1f4; --surface-3: #e6e8ec; --ink: #0b0b0d; --ink-2: #4a4f5a; --ink-3: #6b707b;
  --line: rgba(10, 12, 20, 0.08); --line-2: rgba(10, 12, 20, 0.16); --blue: #0a5cff; --shadow-1: 0 1px 2px rgba(10, 20, 40, 0.06), 0 8px 24px -12px rgba(10, 20, 40, 0.18);
  --shadow-2: 0 2px 6px rgba(10, 20, 40, 0.06), 0 22px 50px -24px rgba(10, 20, 40, 0.3);
  color-scheme: light; background: #f5f6f8; color: var(--ink);
}
.sec-light h1, .sec-light h2, .sec-light h3, .sec-light .t-display, .sec-light .h-stroke { color: #0b0b0d; }
.sec-light .t-dim, .sec-light .h-stroke .mark { color: rgba(11, 11, 13, 0.45); }
.sec-light .btn-secondary, .sec-light .btn-ghost { color: #0b0b0d; background: #fff; border-color: rgba(10, 12, 20, 0.16); }
.sec-light .chip { color: var(--ink-2); background: #fff; }
.statement { position: relative; text-align: center; overflow: hidden; isolation: isolate; }
.statement::before { content: ""; position: absolute; inset: 10% 15%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 123, 255, 0.28), transparent); filter: blur(30px); }
.statement .t-display { font-size: clamp(2.6rem, 7vw, 5.4rem); margin: 0 auto 18px; max-width: 14ch; }
.statement p { color: var(--ink-2); font-size: var(--fs-lead); max-width: 560px; margin: 0 auto 28px; }

/* the old blue CTA band (other pages): a dark glowing panel now */
.cta-band { color: var(--ink); border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: radial-gradient(70% 120% at 50% 0%, rgba(47, 123, 255, 0.3), transparent 70%), linear-gradient(180deg, #111318, #0b0c0f);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.cta-band::before, .cta-band::after { display: none; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--ink-2); font-weight: 400; }
.band { position: relative; padding: clamp(56px, 7.5vw, 104px) 0; }
.band-soft { background: linear-gradient(180deg, transparent, var(--bg-2) 12%, var(--bg-2) 88%, transparent); }
.band-glow { background: radial-gradient(50% 50% at 50% 0%, rgba(47, 123, 255, 0.12), transparent 75%); }
:root:root .band-glow { background: radial-gradient(50% 50% at 50% 0%, rgba(47, 123, 255, 0.12), transparent 75%); }

/* ---------------------------------------------------------------- FORMS */
.field { display: grid; gap: 8px; }
.field-label { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.field-hint { font-size: var(--fs-small); color: var(--ink-3); }
.input, .textarea, select.input {
  color: var(--ink); background: #0e0f12; border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 14px; font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
.input:focus, .textarea:focus { outline: none; border-color: rgba(74, 144, 255, 0.8); background: #101216; box-shadow: 0 0 0 4px rgba(47, 123, 255, 0.2); }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; -webkit-appearance: none; appearance: none; }
.counter { color: var(--ink-3); font-weight: 500; }
.seg { background: #0e0f12; border: 1px solid var(--line-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg-btn { border-radius: 10px; font-family: var(--font-body); font-weight: 600; color: var(--ink-2); }
.seg-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.seg-btn[aria-pressed="true"] { color: #fff; background: var(--grad-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px -6px rgba(29, 107, 255, 0.9); }
.seg-giant { background: #0e0f12; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 16px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; text-decoration: none;
  transition: color 0.2s, background 0.2s, box-shadow 0.25s; }
.tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.tab[aria-selected="true"], .tab[aria-current="page"], .tab.is-on { color: #fff; background: var(--grad-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 16px -6px rgba(29, 107, 255, 0.9); }
.tab .i { width: 1.05em; height: 1.05em; }
.tiles .tile, .tile { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: none; }
.tile:hover { border-color: rgba(74, 144, 255, 0.6); }
.tile[aria-pressed="true"] { border-color: var(--blue); background: rgba(47, 123, 255, 0.12); box-shadow: 0 0 0 1px var(--blue), 0 8px 24px -12px rgba(47, 123, 255, 0.8); }
.picker-btn { background: #0e0f12; border: 1px solid var(--line-2); border-radius: 12px; font-weight: 600; }
.switch .track { background: var(--surface-3); border: 1px solid var(--line-2); }
.switch input:checked + .track { background: var(--blue-d); border-color: var(--blue); }
.search .i { color: var(--ink-3); }
.advanced { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- ACCORDION (FAQ) */
.faq { max-width: 820px; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; box-shadow: none;
  transition: border-color 0.25s, background 0.25s; }
.faq details:hover { background: #141418; border-color: var(--line-2); }
.faq details[open] { background: #141418; border-color: rgba(74, 144, 255, 0.35); box-shadow: 0 18px 40px -26px rgba(47, 123, 255, 0.6); }
.faq summary { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; padding: 18px 0; color: var(--ink); }
.faq summary::after { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: none; font-weight: 400; }
.faq details[open] summary::after { background: var(--grad-blue); color: #fff; border-color: transparent; }
.faq details p { color: var(--ink-2); font-weight: 400; padding-bottom: 20px; line-height: 1.65; }

/* ---------------------------------------------------------------- TABLES */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: rgba(255, 255, 255, 0.02); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }

/* ---------------------------------------------------------------- OVERLAYS: modal, menu, toast, notes, success */
dialog.modal::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-box { background: #18191c; border: 1px solid var(--line-2); border-radius: 20px; padding: 24px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.modal-head { margin-bottom: 16px; }
.modal-head h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.modal-head .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.modal-box .btn-block { border-radius: 12px; }
dialog.modal:focus-visible { outline: none; }     /* the dialog takes focus as it opens: no ring round the whole box */
/* app.js's BM.modal icon (span.hero-icon, e.g. the upgrade card's crown): a round glossy blue badge, not app.css's tile */
.modal-head .hero-icon { border-radius: 50% !important; transform: none; color: #fff; background: var(--grad-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 6px rgba(47, 123, 255, 0.12), 0 12px 30px -10px rgba(47, 123, 255, 0.9); }
.modal-head .hero-icon .i { width: 24px; height: 24px; }
@media (max-width: 560px) { .modal-box { border-radius: 22px 22px 0 0; } }
.menu { background: #141518; border: 1px solid var(--line-2); border-radius: 14px; padding: 6px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.menu a, .menu button { border-radius: 9px; font-weight: 500; color: var(--ink); padding: 9px 12px; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; outline: none; }
.menu a .i, .menu button .i { color: var(--ink-2); width: 18px; height: 18px; stroke-width: 2; }
.menu .menu-head { border-bottom: 1px solid var(--line); }
.toast { background: #18191c; color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; font-weight: 500;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.95); }
.toast .i { color: var(--blue); }
.toast.ok { background: #18191c; color: var(--ink); border-color: rgba(52, 211, 153, 0.45); }
.toast.ok .i { color: var(--green); }
.toast.err { background: #18191c; color: var(--ink); border-color: rgba(255, 107, 107, 0.5); }
.toast.err .i { color: var(--red); }
.note { background: rgba(47, 123, 255, 0.08); border: 1px solid rgba(74, 144, 255, 0.28); border-radius: var(--r); color: var(--ink); }
.note-yellow { background: rgba(47, 123, 255, 0.08); border-color: rgba(74, 144, 255, 0.28); }
.note-yellow .i { color: var(--blue); }
.note-green { background: var(--green-soft); border-color: rgba(52, 211, 153, 0.35); }
.note-green .i { color: var(--green); }
.note-pink { background: var(--red-soft); border-color: rgba(255, 107, 107, 0.35); }
.note-pink .i { color: var(--red); }
.success-screen { display: grid; justify-items: center; gap: 12px; text-align: center; padding: clamp(32px, 6vw, 64px) 16px; }
.success-screen .success-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #fff; background: var(--grad-blue);
  box-shadow: 0 0 0 10px rgba(47, 123, 255, 0.12), 0 0 0 22px rgba(47, 123, 255, 0.06), 0 20px 60px -10px rgba(47, 123, 255, 0.9); margin-bottom: 14px; }
.success-screen .success-icon .i { width: 34px; height: 34px; stroke-width: 2.4; }
.success-screen h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.success-screen p { margin: 0 0 12px; color: var(--ink-2); max-width: 440px; }

/* ---------------------------------------------------------------- PLAN CARDS (pricing / upsell; their own pages restyle more) */
.plan, .mini-plan { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.plan.hot, .mini-plan.hot { border-color: rgba(74, 144, 255, 0.55); box-shadow: 0 0 0 1px rgba(74, 144, 255, 0.3), 0 24px 60px -30px rgba(47, 123, 255, 0.8); background: linear-gradient(180deg, rgba(47, 123, 255, 0.08), transparent 40%), var(--surface); }
.plan.gold { border-color: rgba(124, 108, 255, 0.5); box-shadow: 0 0 0 1px rgba(124, 108, 255, 0.25); }
.plan .price, .mini-plan .price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }
.plan li { font-weight: 500; }
.plan li .i { color: var(--blue); }
.free-try-option { background: var(--surface-2); border: 1px solid var(--line-2); }

/* ---------------------------------------------------------------- ANNOUNCEMENT BAR */
.announce { --a1: #071430; --a2: #0b2a6b; --a3: #0a5cff; background: linear-gradient(90deg, #06102a, #0a2a74 50%, #06102a); border-bottom: 1px solid rgba(74, 144, 255, 0.3); }
.announce::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
.announce-main { font-weight: 500; font-size: 0.92rem; }
.announce-pill { font-family: var(--font-body); font-weight: 700; background: var(--grad-blue); color: #fff; box-shadow: 0 0 12px rgba(47, 123, 255, 0.8); }
.announce-text { text-shadow: none; }
.announce-cta { font-family: var(--font-body); font-weight: 600; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); }

/* ---------------------------------------------------------------- HEADER (base.html) */
.site-header { background: rgba(7, 7, 8, 0.72); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.site-header .wrap { gap: 10px; }
.logo { gap: 10px; color: var(--ink); font-family: var(--font-body); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.03em; }
.logo:hover { color: #fff; }
.logo-mark { width: 34px; height: 34px; filter: drop-shadow(0 4px 14px rgba(47, 123, 255, 0.45)); }
.nav { margin-left: auto; gap: 2px; align-items: center; }
.nav a { font-family: var(--font-body); font-weight: 500; font-size: 0.94rem; color: var(--ink-2); padding: 8px 14px; border-radius: var(--r-pill);
  transition: color 0.2s, background 0.2s; display: inline-flex; align-items: center; gap: 7px; }
.nav a .i { width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav a:not(.nav-cta)::after { display: none; }   /* (the old sliding underline: the pill tint says it now) */
.site-header :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the header's one action: a small glossy blue pill, last in the row (it's first in the markup for the tests and
   screen readers: "Make a game" before "Gallery") */
.nav a.nav-cta { order: 10; margin: 0 0 0 8px; color: #fff; background: var(--grad-blue); padding: 8px 16px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 18px -6px rgba(29, 107, 255, 0.9), 0 0 0 1px rgba(61, 139, 255, 0.5); }
.nav a.nav-cta:hover, .nav a.nav-cta[aria-current="page"] { color: #fff; filter: none; transform: translateY(-1px); background: var(--grad-blue-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--glow-blue-lg); }
.nav a.nav-cta:active { transform: scale(0.98); }
.nav a.nav-mine { color: var(--ink); }
.header-right { margin-left: 6px; gap: 8px; }
.hdr-cta { display: none; }
.account-slot { min-width: 40px; min-height: 40px; }
.account-skel { width: 92px; height: 38px; border-radius: var(--r-pill); }
.account-slot .btn { min-height: 38px; padding: 6px 16px; font-size: 0.9rem; }
.avatar-btn { border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-weight: 600; box-shadow: none; padding: 3px 12px 3px 3px; }
.avatar-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); }
.avatar { background: var(--surface-3); }
@media (max-width: 760px) {
  .nav { position: absolute; left: 12px; right: 12px; top: calc(var(--header-h) - 4px); margin: 0; padding: 8px;
    background: #121316; border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.95); gap: 2px; }
  .nav a { padding: 13px 14px; font-size: 1.02rem; border-radius: 12px; min-height: 48px; }
  .nav a.nav-cta { order: 10; margin: 6px 0 0; justify-content: center; padding: 14px; font-size: 1.05rem; border-radius: var(--r-pill); }
  .hdr-cta { display: inline-flex; min-height: 38px; padding: 6px 14px; font-size: 0.86rem; white-space: nowrap; }
  .menu-toggle { display: inline-grid; }
  .logo { font-size: 1.08rem; }
  .logo-mark { width: 32px; height: 32px; }
}
/* phones: the Sign in button is its key icon (the words stay for screen readers) */
@media (max-width: 480px) {
  .account-slot #header-login { width: 40px; min-height: 40px; padding: 0; font-size: 0; gap: 0; border-radius: 12px; }
  .account-slot #header-login .i { width: 18px; height: 18px; }
  .site-header .wrap { gap: 8px; }
  .header-right { gap: 6px; }
}
@media (max-width: 350px) { .logo > span { display: none; } }

/* ---------------------------------------------------------------- FOOTER (base.html) */
.site-footer { margin-top: 0; background: linear-gradient(180deg, transparent, #050506 40%); border-top: 1px solid var(--line);
  padding: clamp(48px, 7vw, 80px) 0 32px; color: var(--ink-2); font-size: 0.94rem; }
.footer-grid { gap: 32px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-grid h4 { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.footer-grid ul { gap: 10px; }
.footer-grid a { color: var(--ink-2); font-weight: 400; transition: color 0.2s; }
.footer-grid a:hover { color: #fff; }
.footer-brand p { color: var(--ink-2); max-width: 340px; margin: 14px 0 18px; }
.footer-brand .logo { font-size: 1.15rem; font-weight: 800; color: #fff; }
.footer-brand .btn, .footer-brand .btn:hover { color: #fff; font-weight: 600; }
.footer-fine { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.8rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* ---------------------------------------------------------------- UTILITIES */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.stack-sm > * + * { margin-top: 8px; }
.stack-lg > * + * { margin-top: 24px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.text-center { text-align: center; }
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.hide-phone { display: initial; }
.only-phone { display: none !important; }
@media (max-width: 640px) { .hide-phone { display: none !important; } .only-phone { display: initial !important; } }

/* ---------------------------------------------------------------- APP SHELL (base_app.html + static/js/shell.js)
   .app = sidebar | main. The sidebar collapses to icons (html.side-min, remembered in this browser) and is a drawer on
   phones (html.side-open). The page scrolls normally; the sidebar and the top bar stick. */
.app-page { background-image: none; }
.app-page .site-footer { display: none; }
.app-grid-bg { background-color: #0e0f11;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; flex: 1 0 auto;
  /* the sidebar's colour runs the full height of the page (the sticky sidebar itself is one screen tall) */
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) calc(var(--side-w) - 1px), var(--line) 0, var(--line) var(--side-w), transparent 0) no-repeat; }
.side-min .app { grid-template-columns: var(--side-w-min) minmax(0, 1fr);
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) calc(var(--side-w-min) - 1px), var(--line) 0, var(--line) var(--side-w-min), transparent 0) no-repeat; }
.app-side { position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px;
  background: rgba(10, 10, 12, 0.92); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; z-index: 30; }
.app-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.app-side .logo { font-size: 1.1rem; }
.app-ws { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; color: var(--ink); text-decoration: none;
  background: linear-gradient(#141519, #141519) padding-box, var(--grad-ring) border-box; border: 1px solid transparent; }
.app-ws:hover { color: #fff; background: linear-gradient(#1a1b20, #1a1b20) padding-box, var(--grad-ring) border-box; }
.app-ws .avatar { width: 30px; height: 30px; }
.app-ws-text { display: grid; min-width: 0; line-height: 1.25; }
.app-ws-text b { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-ws-text span { font-size: 0.76rem; color: var(--ink-3); }
.app-nav { display: grid; gap: 2px; }
.app-nav-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 12px; border-radius: 12px; color: var(--ink-2);
  text-decoration: none; font-weight: 500; font-size: 0.94rem; transition: color 0.2s, background 0.2s, box-shadow 0.25s; white-space: nowrap; }
.app-nav-link .i { width: 19px; height: 19px; stroke-width: 2; flex: none; }
.app-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.app-nav-link[aria-current="page"] { color: #fff; background: var(--grad-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 22px -8px rgba(29, 107, 255, 0.95); }
.app-nav-link .app-nav-badge { margin-left: auto; }
.app-sec { display: grid; gap: 2px; }
/* a short window: the recent list scrolls inside itself so the plan card always shows whole at the bottom */
.app-side > * { flex: none; }
.app-side > .app-sec[open] { flex: 0 1 auto; min-height: 96px; overflow-y: auto; scrollbar-width: thin; }
.app-sec > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 8px 12px 6px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-radius: 8px; }
.app-sec > summary::-webkit-details-marker { display: none; }
.app-sec > summary:hover { color: var(--ink-2); }
.app-sec > summary .i { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.app-sec[open] > summary .i { transform: rotate(180deg); }
.app-recent { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.app-recent li { min-width: 0; }
.app-recent a { overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 0.88rem; min-height: 38px; }
.app-recent a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.app-recent img, .app-recent .app-recent-dot { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: none; background: var(--surface-3); }
.app-recent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-recent-empty { padding: 6px 12px; font-size: 0.84rem; color: var(--ink-3); }
.app-plan { margin-top: auto; display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(47, 123, 255, 0.1), rgba(47, 123, 255, 0.02)), #121317;
  border: 1px solid rgba(74, 144, 255, 0.22); }
.app-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-plan-head b { font-weight: 700; font-size: 0.95rem; }
.app-plan-line { font-size: 0.82rem; color: var(--ink-2); }
.app-plan-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.app-plan-bar > i { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: linear-gradient(90deg, #1d6bff, #6aa6ff);
  box-shadow: 0 0 12px rgba(74, 144, 255, 0.8); transition: width 0.6s var(--ease-out); }
.app-plan .btn { width: 100%; border-radius: var(--r-app); }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px;
  background: rgba(14, 15, 17, 0.78); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.app-title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-search { position: relative; flex: 1; max-width: 520px; margin: 0 auto; }
.app-search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.app-search input { width: 100%; height: 40px; padding: 0 14px 0 40px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: inherit; font-size: 0.92rem; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.app-search input::placeholder { color: var(--ink-3); }
.app-search input:focus { outline: none; border-color: rgba(74, 144, 255, 0.8); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 4px rgba(47, 123, 255, 0.18); }
.app-search-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: #141518;
  border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.95); z-index: 60; }
.app-search-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.app-search-list a:hover, .app-search-list a.is-active { background: rgba(255, 255, 255, 0.07); }
.app-search-list small { margin-left: auto; color: var(--ink-3); }
.app-top-links { display: flex; align-items: center; gap: 2px; }
.app-top-links a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 8px 10px; border-radius: 10px; }
.app-top-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.app-body { flex: 1; padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 36px) 48px; }
.app .btn { border-radius: var(--r-app); }
.app .btn.btn-pill, .app .pill { border-radius: var(--r-pill); }
.app-fine { padding: 18px clamp(16px, 3vw, 36px) 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.78rem; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.app-fine a { color: var(--ink-3); }
.app-fine a:hover { color: #fff; }
.app-scrim { display: none; }
.app-top-logo { display: none; flex: none; }     /* phones: the brand mark beside the menu button (the sidebar is a drawer) */
.app-top-logo .logo-mark { width: 30px; height: 30px; }
/* collapsed to icons */
.side-min .app-side { padding: 16px 10px; align-items: stretch; }
.side-min .app-side .logo > span, .side-min .app-ws-text, .side-min .app-sec, .side-min .app-plan,
.side-min .app-side-label { display: none; }
.side-min .app-nav-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.side-min .app-nav-link { justify-content: center; padding: 9px; }
.side-min .app-ws { justify-content: center; padding: 6px; }
.side-min .app-side-top { flex-direction: column; }
/* phones: the sidebar is a drawer */
@media (max-width: 900px) {
  .app, .side-min .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .app-side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform 0.3s var(--ease-out); box-shadow: 30px 0 80px rgba(0, 0, 0, 0.7); }
  .side-open .app-side { transform: none; }
  .side-min .app-side .logo > span, .side-min .app-ws-text, .side-min .app-plan { display: revert; }
  .side-min .app-nav-link > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .side-min .app-sec { display: grid; }
  .side-min .app-nav-link { justify-content: flex-start; }
  .app-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .side-open .app-scrim { display: block; }
  .app-top { padding: 0 12px; gap: 8px; }
  .app-top-links { display: none; }
  .app-title { display: none; }
  .app-top-logo { display: inline-flex; }
}
@media (max-width: 520px) { .app-search input { height: 38px; } }

/* the app home's prompt card: tool tabs, a big box, a glossy send button */
.app-hero { position: relative; isolation: isolate; border-radius: var(--r-xl); overflow: hidden; padding: clamp(36px, 7vw, 88px) clamp(16px, 4vw, 48px); text-align: center; }
.app-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: saturate(1.1); }
.app-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 40%, rgba(14, 15, 17, 0.35), rgba(14, 15, 17, 0.92)), linear-gradient(180deg, rgba(14, 15, 17, 0.2), #0e0f11); }
.app-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin: 0 0 22px; }
.app-prompt { max-width: 760px; margin: 0 auto; text-align: left; padding: 10px; border-radius: 22px; background: rgba(20, 21, 25, 0.82);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.app-prompt:focus-within { border-color: rgba(74, 144, 255, 0.7); box-shadow: var(--shadow-3), 0 0 0 4px rgba(47, 123, 255, 0.16); }
.app-prompt .tabs { margin: 2px 2px 6px; }
.app-prompt textarea { display: block; width: 100%; min-height: 96px; resize: none; padding: 12px 14px; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.06rem; line-height: 1.5; }
.app-prompt textarea:focus { outline: none; }
.app-prompt textarea::placeholder { color: var(--ink-3); }
.app-prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 2px 12px; }
.app-tools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 28px; }
.app-tool { position: relative; display: block; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.app-tool:hover { color: #fff; transform: translateY(-4px); border-color: rgba(74, 144, 255, 0.45); box-shadow: 0 22px 50px -24px rgba(47, 123, 255, 0.7); }
.app-tool img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.app-tool b { display: block; padding: 12px 14px 2px; font-weight: 600; }
.app-tool span { display: block; padding: 0 14px 14px; color: var(--ink-3); font-size: 0.86rem; }

/* ---------------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .chip:hover, .card-hover:hover, .map-card:hover, .shot-card:hover, .app-tool:hover { transform: none; transition: none; }
  .shot-card:hover .shot-pic img { transform: scale(1.01); }
  .marquee-track { animation: none !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .float-card { transform: rotate(var(--rot, 0deg)); }
  .app-side { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Button press feel (the owner, 2026-10-11: "remove the glow fx when I hover on buttons, make it just a scale 1 to 0.95
   and 0.9 on click"; then "the header blue button has hover fx"): hovering and pressing keep the button EXACTLY as it
   looks at rest (same background, shadow, border, colour, the chevron stays put); the only change is the scale:
   0.95 under the pointer, 0.9 while pressed. The html prefix outranks every page stylesheet's :hover / :active rules.
   --------------------------------------------------------------------------------------------------------------- */
html .btn, html .pill-blue, html .icon-btn { transition: transform 0.14s var(--ease); }
html .btn:hover, html .btn:active, html .btn-primary:hover, html .btn-go:hover, html .btn-yellow:hover,
html .btn-purple:hover, html .btn-primary:active, html .btn-go:active, html .btn-yellow:active, html .btn-purple:active {
  color: #fff; filter: none; animation: none; background: var(--grad-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), var(--glow-blue);
}
html .btn-secondary:hover, html .btn-ghost:hover, html .btn-dark:hover,
html .btn-secondary:active, html .btn-ghost:active, html .btn-dark:active {
  color: var(--ink); background: rgba(255, 255, 255, 0.05); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html .btn-quiet:hover, html .btn-quiet:active { color: var(--ink-2); background: transparent; box-shadow: none; }
html .btn-danger:hover, html .btn-pink:hover, html .btn-danger:active, html .btn-pink:active {
  color: #fff; background: linear-gradient(180deg, #ff6b6b, #e5484d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 20px -8px rgba(229, 72, 77, 0.8);
}
html .btn[disabled]:hover, html .btn.is-disabled:hover { color: var(--ink-3); background: var(--surface-3); box-shadow: none; }
html .pill-blue:hover, html .pill-blue:active { color: #fff; background: var(--grad-blue); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 16px -6px rgba(29, 107, 255, 0.8); }
html .icon-btn:hover, html .icon-btn:active { color: var(--ink-2); background: rgba(255, 255, 255, 0.03); border-color: var(--line-2); box-shadow: none; }
html .btn:hover .btn-chev { transform: none; }
html .btn:hover, html .pill-blue:hover, html .icon-btn:hover { transform: scale(0.95); }
html .btn:active, html .btn-sm:active, html .pill-blue:active, html .icon-btn:active { transform: scale(0.9); transition-duration: 0.06s; }
html .btn[disabled]:hover, html .btn.is-disabled:hover, html .btn[disabled]:active, html .btn.is-disabled:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html .btn:hover, html .pill-blue:hover, html .icon-btn:hover, html .btn:active, html .pill-blue:active, html .icon-btn:active { transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Transparent header (the owner, 2026-10-11: "make the header bg transparent but make the buttons still visible"):
   no band, line or blur behind the bar; each control carries its own legibility instead (a soft shadow under the
   logo and links, a dark glass pill on the account / menu buttons), so it reads over the hero and over content
   scrolling under it.
   --------------------------------------------------------------------------------------------------------------- */
html .site-header { background: transparent; border-bottom: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html .site-header .logo, html .site-header .nav a:not(.nav-cta) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.55); }
html .site-header .logo-mark { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 4px 14px rgba(47, 123, 255, 0.35)); }
html .site-header .nav a:not(.nav-cta) { color: #e6e8ec; }
html .site-header .nav a:not(.nav-cta):hover, html .site-header .nav a[aria-current="page"] {
  background: rgba(10, 10, 12, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html .site-header .avatar-btn, html .site-header .icon-btn, html .site-header .account-slot > a:not(.btn) {
  background: rgba(10, 10, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }