/* ============================================================= AVNue · NEON
   Refined "Neon Avenue" system. Dark-first with a real light mode.
   Tweak-driven custom props (set by JS on the .av root):
     --accent-rgb   neon accent (teal default)
     --glowk        glow strength 0..~1.7  (slider/60)
     --fdisp        display font family
     --dk           density 0(compact)..1(comfortable) -> paddings
   ========================================================================= */

.av{
  /* brand constants */
  --primary-rgb:124 92 255;
  --accent-rgb:43 230 207;      /* tweakable */
  --accent2-rgb:255 77 157;
  --glowk:1;                    /* tweakable */
  --dk:1;                       /* tweakable density */
  --fdisp:'Chakra Petch',sans-serif;   /* tweakable */
  --fbody:'Hanken Grotesk',sans-serif;
  --fmono:'Space Mono',monospace;

  /* dark palette (default) */
  --bg:#07090F; --bg2:#0B0E1C; --bg3:#0E1224;
  --surface:#121733; --surface2:#19204A; --surface3:#212a59;
  --surface-rgb:18 23 51;       /* rgb of --surface, for translucent panels */
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.15);
  --ink:#ECEEFB; --muted:#99A0C4; --faint:#646B96;
  --glow-on:1; --shadow:0 20px 60px -18px rgba(0,0,0,.75); --shadow-sm:0 8px 26px -12px rgba(0,0,0,.7);
  --hero-wash:
    radial-gradient(46% 60% at 84% 14%,rgb(var(--primary-rgb) /.34),transparent 70%),
    radial-gradient(40% 52% at 98% 64%,rgb(var(--accent2-rgb) /.20),transparent 70%),
    radial-gradient(34% 44% at 66% 96%,rgb(var(--accent-rgb) /.16),transparent 70%);

  /* derived */
  --primary:rgb(var(--primary-rgb));
  --accent:rgb(var(--accent-rgb));
  --accent2:rgb(var(--accent2-rgb));
  --accent-soft:rgb(var(--accent-rgb) /.14);
  --primary-soft:rgb(var(--primary-rgb) /.16);
  --radius:16px; --radius-sm:11px; --radius-lg:22px; --pill:999px;

  --glow:0 0 0 1px rgb(var(--primary-rgb) /calc(.55*var(--glow-on))),
         0 0 calc(26px*var(--glowk)) -6px rgb(var(--primary-rgb) /calc(.6*var(--glowk)*var(--glow-on)));
  --glow-accent:0 0 calc(20px*var(--glowk)) -5px rgb(var(--accent-rgb) /calc(.7*var(--glowk)*var(--glow-on)));

  background:var(--bg); color:var(--ink); font-family:var(--fbody);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh;  /* fill the viewport so the page bg follows the theme */
}
.av.light{
  --bg:#EEF0F8; --bg2:#E7EAF4; --bg3:#DFE3F0;
  --surface:#FFFFFF; --surface2:#F2F4FB; --surface3:#EAEDF8;
  --surface-rgb:255 255 255;
  --border:rgba(18,22,48,.1); --border2:rgba(18,22,48,.17);
  --ink:#14172B; --muted:#565D82; --faint:#878FB4;
  --accent-rgb:13 148 136; --accent2-rgb:219 39 119;
  --glow-on:.6; --shadow:0 22px 50px -22px rgba(40,44,90,.34); --shadow-sm:0 10px 24px -16px rgba(40,44,90,.28);
  --hero-wash:
    radial-gradient(46% 60% at 86% 14%,rgb(var(--primary-rgb) /.14),transparent 70%),
    radial-gradient(40% 52% at 98% 70%,rgb(var(--accent2-rgb) /.10),transparent 70%);
}

.av *{ box-sizing:border-box; }
/* instant theme swap: kill transitions for the frame the dark/light toggle flips,
   so themed backgrounds don't fade through a wrong-mode state */
.av.notrans, .av.notrans *{ transition:none !important; }
.av h1,.av h2,.av h3,.av h4{ font-family:var(--fdisp); font-weight:600; letter-spacing:.005em;
  line-height:1.04; margin:0; }
.av p{ margin:0; } .av a{ color:inherit; text-decoration:none; }
/* text is selectable everywhere; only the actual controls opt out */
.av{ -webkit-user-select:text; user-select:text; }
.av .btn,.av button,.av .toggle,.av .iconbtn{ -webkit-user-select:none; user-select:none; }
/* clickable cards: whole card navigates, but text stays selectable (see base.html) */
.av [data-href]{ cursor:pointer; }
.mono{ font-family:var(--fmono); }
/* solid, high-contrast selection so it's clearly visible on white text + inputs */
.av ::selection{ background:var(--primary); color:#fff; }
.av ::-moz-selection{ background:var(--primary); color:#fff; }
.av input::selection,.av textarea::selection{ background:var(--primary); color:#fff; }
.av input::-moz-selection,.av textarea::-moz-selection{ background:var(--primary); color:#fff; }

/* ---------------------------------------------------------------- wordmark */
.brand{ display:inline-flex; align-items:baseline; font-family:var(--fdisp); font-weight:700;
  font-size:21px; letter-spacing:-.01em; color:var(--ink); }
.brand .avn{ color:var(--primary); text-shadow:0 0 16px rgb(var(--primary-rgb) /calc(.7*var(--glow-on))); }
.brand .dot{ width:7px; height:7px; border-radius:2px; background:var(--accent);
  margin-left:4px; align-self:center; box-shadow:var(--glow-accent); }

/* -------------------------------------------------------------------- atoms */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  padding:0 20px; border-radius:var(--pill); font-family:var(--fbody); font-weight:600;
  font-size:14.5px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .12s,background .15s,border-color .15s; }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--primary); color:#fff; box-shadow:var(--glow); }
.btn.accent{ background:var(--accent); color:#04201c; box-shadow:var(--glow-accent); }
.av.light .btn.accent{ color:#fff; }
.btn.ghost{ background:transparent; border-color:var(--border2); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--primary); }
.btn.discord{ background:#5865F2; color:#fff; }
.btn.sm{ height:36px; padding:0 14px; font-size:13px; }
.btn.tiny{ height:30px; padding:0 11px; font-size:12.5px; }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:default; }
/* Hover letter-roll (Uiverse.io · KINGFRESS/giant-deer-25), in our colors. The
   two-layer span structure is built by JS (keeps button icons static). */
.btn-roll{ position:relative; display:inline-flex; line-height:1.15; }
.btn-roll .span-mother, .btn-roll .span-mother2{ display:flex; overflow:hidden; }
.btn-roll .span-mother2{ position:absolute; inset:0; }
.btn-roll .span-mother span, .btn-roll .span-mother2 span{ display:inline-block; }
/* translate by the span's own height (110%) so the hidden copy fully clears the
   clip box instead of leaving a sliver poking above the button. */
.btn-roll .span-mother2 span{ transform:translateY(-110%); }
.btn:hover .span-mother span{ transform:translateY(110%); }
.btn:hover .span-mother2 span{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .btn-roll .span-mother2{ display:none; }
  .btn-roll .span-mother span{ transform:none !important; transition:none !important; }
}

.chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border-radius:var(--pill); border:1px solid var(--border2); background:var(--surface);
  color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.chip:hover{ color:var(--ink); }
.chip.on{ background:var(--primary-soft); border-color:var(--primary); color:var(--ink); }

.tag{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--pill);
  background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.eyebrow{ font-family:var(--fmono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); }
.stars{ color:var(--accent); font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }

.avatar{ border-radius:14px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
  font-family:var(--fdisp); font-weight:700; color:#fff; }
.avail{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--pill);
  display:inline-flex; align-items:center; gap:6px; }
.avail .pip{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.avail.open{ background:rgb(var(--accent-rgb) /.14); color:var(--accent); }
.avail.soon{ background:rgba(234,179,8,.16); color:#c79a16; }
.av.light .avail.soon{ color:#9a7b09; }
.avail.busy{ background:var(--surface2); color:var(--faint); }

.verify{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--primary); }

/* status pill */
.status{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px;
  border-radius:var(--pill); font-size:12.5px; font-weight:700; }
.status .pip{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.s-progress{ background:var(--primary-soft); color:var(--primary); }
.s-review{ background:rgb(var(--accent2-rgb) /.16); color:var(--accent2); }
.s-quoted{ background:var(--surface2); color:var(--muted); }
.s-accepted{ background:rgb(var(--accent-rgb) /.16); color:var(--accent); }
.s-completed{ background:rgba(34,197,94,.18); color:#37c46f; }
.av.light .s-completed{ color:#1f9d57; }

/* ============================================================ APP TOP BAR */
.topbar{ display:flex; align-items:center; gap:24px; padding:0 30px; height:66px;
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
  background:rgb(var(--primary-rgb) /0); backdrop-filter:blur(12px); }
.av:not(.light) .topbar{ background:linear-gradient(180deg,rgba(8,10,18,.86),rgba(8,10,18,.66)); }
.av.light .topbar{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7)); }
.topbar .links{ display:flex; gap:22px; margin-left:8px; }
.topbar .links a{ color:var(--muted); font-weight:500; font-size:14.5px; cursor:pointer; }
.topbar .links a:hover,.topbar .links a.on{ color:var(--ink); }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:12px; }

/* dark/light toggle */
.toggle{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 6px 0 12px;
  border:1px solid var(--border2); border-radius:var(--pill); color:var(--muted);
  font-size:12.5px; font-weight:600; cursor:pointer; user-select:none; }
.toggle .sw{ width:38px; height:20px; border-radius:99px; background:var(--surface2);
  border:1px solid var(--border2); position:relative; transition:.2s; }
.toggle .sw::after{ content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--primary); top:2px; left:2px; transition:.2s; box-shadow:0 0 10px rgb(var(--primary-rgb) /calc(.8*var(--glow-on))); }
.av:not(.light) .toggle .sw::after{ left:auto; right:2px; background:var(--accent); }

.iconbtn{ width:38px; height:38px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); display:grid; place-items:center; cursor:pointer;
  position:relative; transition:.15s; }
.iconbtn:hover{ color:var(--ink); border-color:var(--border2); }
.iconbtn .badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:99px; background:var(--accent2); color:#fff; font-size:10.5px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg); }
.iconbtn .badge[hidden]{ display:none; }

/* topbar dropdown previews (bell / chat) */
.navwrap{ position:relative; display:inline-flex; }
.navpop{ position:absolute; top:48px; right:0; width:340px; max-width:calc(100vw - 28px); z-index:70;
  background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:none; }
.navpop.open{ display:block; }
.navpop .nph{ display:flex; justify-content:space-between; align-items:center; padding:12px 15px; border-bottom:1px solid var(--border); }
.navpop .nph b{ font-family:var(--fdisp); font-size:14px; }
.navpop .npbody{ max-height:380px; overflow:auto; }
.navpop .npi{ display:flex; gap:11px; padding:12px 15px; border-bottom:1px solid var(--border); cursor:pointer; align-items:flex-start; }
.navpop .npi:last-child{ border-bottom:0; }
.navpop .npi:hover{ background:var(--surface2); }
.navpop .npi.unread{ background:var(--primary-soft); }
.navpop .npi .npt{ font-size:13px; color:var(--ink); line-height:1.35; }
.navpop .npi .npm{ font-size:11px; color:var(--faint); font-family:var(--fmono); margin-top:3px; }
.navpop .npempty{ padding:22px 15px; color:var(--muted); font-size:13px; text-align:center; }
.navpop .npf{ display:block; text-align:center; padding:11px; font-size:13px; font-weight:600; color:var(--primary); border-top:1px solid var(--border); }
.navpop .npf:hover{ background:var(--surface2); }
/* account dropdown */
.av-trigger{ background:none; border:0; padding:0; cursor:pointer; display:inline-flex; border-radius:50%; }
.av-trigger:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.navpop .acct-head{ display:flex; gap:11px; align-items:center; padding:14px 15px; border-bottom:1px solid var(--border); }
.navpop .npmenu{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 15px; background:none; border:0;
  border-bottom:1px solid var(--border); color:var(--ink); font:600 13.5px var(--fbody); cursor:pointer; text-align:left; }
.navpop form:last-child .npmenu,.navpop .npmenu:last-child{ border-bottom:0; }
.navpop .npmenu:hover{ background:var(--surface2); }
.navpop .npmenu svg{ color:var(--muted); flex:0 0 auto; }
/* availability slider off-state */
.cap-inline{ cursor:pointer; }
.cap-inline.off .sw{ background:var(--surface3); }
.cap-inline.off .sw::after{ right:auto; left:3px; }

/* page container */
.page{ max-width:1160px; margin:0 auto; padding:0 30px; }
.shell{ min-height:100%; }

/* ================================================================ HOMEPAGE */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero-art{ position:absolute; inset:0; z-index:0; background:var(--hero-wash); pointer-events:none; }
.hero-art::after{ content:""; position:absolute; inset:auto 0 -2px 0; height:260px;
  background-image:linear-gradient(rgb(var(--primary-rgb) /.16) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--primary-rgb) /.16) 1px,transparent 1px);
  background-size:46px 46px; -webkit-mask:linear-gradient(transparent,#000); mask:linear-gradient(transparent,#000);
  transform:perspective(440px) rotateX(62deg); transform-origin:bottom; opacity:.7; }
.av.light .hero-art::after{ background-image:linear-gradient(rgb(var(--primary-rgb) /.32) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--primary-rgb) /.32) 1px,transparent 1px); opacity:.7; }
.hero-inner{ position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:74px 30px 64px; }
.hero h1{ font-size:62px; margin:18px 0 0; max-width:760px; }
.hero h1 .hl{ color:var(--accent); text-shadow:0 0 26px rgb(var(--accent-rgb) /calc(.5*var(--glow-on))); }
.hero .lede{ font-size:19px; color:var(--muted); margin-top:20px; max-width:560px; line-height:1.55; }
.searchbar{ display:flex; align-items:center; gap:10px; margin-top:30px; background:var(--surface);
  border:1px solid var(--border2); border-radius:var(--radius); padding:8px 8px 8px 18px;
  box-shadow:var(--shadow-sm); max-width:580px; }
.searchbar input{ flex:1; border:0; background:transparent; outline:0; color:var(--ink);
  font-family:var(--fbody); font-size:15px; }
.searchbar input::placeholder{ color:var(--faint); }
.hero-chips{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:24px; margin-top:32px; color:var(--muted); font-size:13.5px; align-items:center; }
.hero-meta b{ color:var(--ink); font-weight:700; }
.hero-meta .d{ width:5px; height:5px; border-radius:50%; background:var(--accent); }

.section{ padding:58px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }
.section-head h2{ font-size:30px; margin-top:10px; }

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat{ position:relative; padding:20px; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--border); min-height:132px; display:flex; flex-direction:column;
  justify-content:space-between; cursor:pointer; transition:.15s; overflow:hidden; }
.cat:hover{ border-color:var(--primary); transform:translateY(-2px); }
.cat .ic{ width:50px; height:50px; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); }
.cat h4{ font-size:17px; margin-top:14px; } .cat .sub{ color:var(--faint); font-size:12.5px; margin-top:3px; }
.cat .n{ position:absolute; top:18px; right:18px; font-family:var(--fmono); font-size:12px;
  color:var(--muted); font-weight:700; }

/* Supporter (premium) profile customization. */
.pcustom{ position:relative; min-height:calc(100vh - 66px); background-repeat:no-repeat; }
.pcustom > .appwrap{ position:relative; z-index:1; }
.pcustom.has-bgimg::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.55)); }
.prem{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:var(--pill); color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--accent2)); white-space:nowrap; }
.prem svg{ color:#fff; }
/* Customize page bits. */
/* Clean color swatch: the whole rounded shape is the color, no inner square. */
.swatch{ width:54px; height:36px; padding:0; border:1px solid var(--border2); border-radius:10px;
  background:none; cursor:pointer; overflow:hidden; }
.swatch::-webkit-color-swatch-wrapper{ padding:0; }
.swatch::-webkit-color-swatch{ border:none; border-radius:9px; }
.swatch::-moz-color-swatch{ border:none; border-radius:9px; }

.cz-wrap{ display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start; }
.cz-side{ position:sticky; top:84px; }
/* Live preview. No overflow clip (so glow blooms softly instead of being cut);
   the gradient still rounds because border-radius clips the background. */
.czprev{ display:flex; align-items:center; padding:20px; border-radius:var(--radius);
  margin-top:8px; min-height:128px; background:var(--surface); }
/* content sits inside a card-surface panel (like the profile name card), so the
   --ink text always contrasts the chosen card color. */
.czprev .czcard{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow-sm);
  display:flex; flex-wrap:wrap; align-items:center; gap:11px; }
.czprev .czhead{ width:100%; font-family:var(--fdisp); font-weight:700; font-size:19px; color:var(--ink);
  text-shadow:0 0 calc(20px*var(--glowk)) rgb(var(--primary-rgb) / calc(.7*var(--glowk)*var(--glow-on))); }
.czprev .czsub{ width:100%; color:var(--muted); font-size:12.5px; margin-top:-4px; }
.czprev .czchip{ background:rgb(var(--primary-rgb)); color:#fff; border-radius:var(--pill);
  padding:5px 13px; font-size:12px; font-weight:700; box-shadow:var(--glow); }

/* Native file input + checkboxes, matched to the neon forms. */
.cz-wrap input[type=file]{ font-size:13px; color:var(--muted); max-width:100%; }
.cz-wrap input[type=file]::file-selector-button{ font:inherit; margin-right:10px; padding:7px 13px;
  border-radius:var(--pill); border:1px solid var(--border2); background:var(--surface2);
  color:var(--ink); cursor:pointer; transition:.15s; }
.cz-wrap input[type=file]::file-selector-button:hover{ border-color:var(--primary); }
.cz-wrap .ck{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); cursor:pointer; }
.cz-wrap .ck input[type=checkbox]{ width:16px; height:16px; accent-color:var(--primary); cursor:pointer; flex:0 0 auto; }
@media (max-width: 860px){ .cz-wrap{ grid-template-columns:1fr; } .cz-side{ position:static; } }

/* Profile theme presets (move away from full Neon). Scoped to the profile
   wrapper + the customize preview; only structural tokens + fonts change, so
   light/dark palettes are respected. */
.pcustom.theme-minimal, .czprev.theme-minimal{ --glow-on:0; --shadow:none; --shadow-sm:none; }
.pcustom.theme-soft, .czprev.theme-soft{ --glow-on:.5; --radius:22px; --radius-sm:16px; --radius-lg:28px; }
.pcustom.theme-mono, .czprev.theme-mono{ --glow-on:0; --shadow:none; --shadow-sm:none;
  --fdisp:var(--fmono); --fbody:var(--fmono); --radius:6px; --radius-sm:5px; --radius-lg:8px; }

/* On a custom background, back the name/handle/meta with a translucent theme
   surface so the text stays readable in either theme (text is --ink, which the
   surface is built to contrast). */
/* Ghost action buttons are transparent with theme-colored text, so on a custom
   background they can go dark-on-dark (or light-on-light). Back them with a
   translucent theme surface so they stay readable in either theme. */
.pcustom.has-bg .pf-actions .btn.ghost{ background:rgb(var(--surface-rgb) / var(--card-a, .82));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:var(--border); }

/* Banner hidden: the avatar no longer overlaps a cover, so drop the negative
   pull and give it breathing room under the topbar. */
.pcustom.no-banner .pf-head{ margin-top:30px; }

/* Animated gradient cover banner. */
.pcustom .pf-cover.cover-anim{ background:linear-gradient(120deg,
  rgb(var(--primary-rgb)), var(--accent2), rgb(var(--primary-rgb)), var(--accent));
  background-size:300% 300%; animation:cover-flow 14s ease infinite; }
@keyframes cover-flow{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
@media (prefers-reduced-motion: reduce){ .pf-cover.cover-anim{ animation:none; } }

/* Currency symbol on headline rates: render in the body font so the euro glyph
   isn't shrunk by Space Mono. */
/* Body-font currency symbol; bumped a touch since the body glyph reads shorter
   than the mono digits beside it. em so it scales with each price context. */
.rsym{ font-family:var(--fbody); font-weight:700; font-size:1.22em; margin-right:1px;
       vertical-align:-.05em; }

/* Native <dialog> modal (report form). */
.modal{ border:0; background:transparent; padding:0; color:var(--ink); max-width:92vw; }
.modal::backdrop{ background:rgba(7,9,15,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* 18+ age gate overlay (shown only while html.age-gate-on is set). */
.agegate{ display:none; }
.age-gate-on{ overflow:hidden; }
.age-gate-on .agegate{ display:flex; position:fixed; inset:0; z-index:200; padding:20px;
  align-items:center; justify-content:center; background:rgba(7,9,15,.93);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.agegate-card{ max-width:460px; width:100%; background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius); padding:32px 30px; text-align:center; box-shadow:var(--shadow); }
.agegate-card h2{ margin:18px 0 10px; font-size:25px; }
.agegate-card p{ color:var(--muted); font-size:14px; line-height:1.6; margin:0; }
.agegate-actions{ display:flex; gap:10px; justify-content:center; margin:22px 0 16px; flex-wrap:wrap; }
.agegate-fine{ font-size:12px; color:var(--faint); }
.agegate-fine a{ color:var(--accent); }

/* Toasts: fixed top-right, slide in, auto-dismiss or click X. */
.toasts{ position:fixed; top:78px; right:20px; z-index:90; display:flex; flex-direction:column;
  gap:10px; max-width:360px; pointer-events:none; }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:11px; padding:12px 14px;
  border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border2);
  border-left:3px solid var(--accent); box-shadow:var(--shadow); color:var(--ink); font-size:13.5px;
  animation:toast-in .25s cubic-bezier(.2,.8,.2,1); }
.toast.toast-warn{ border-left-color:var(--accent2); }
.toast-m{ flex:1; line-height:1.4; }
.toast-x{ background:none; border:0; color:var(--faint); cursor:pointer; font-size:20px; line-height:1;
  padding:0 2px; flex:0 0 auto; }
.toast-x:hover{ color:var(--ink); }
.toast.hide{ animation:toast-out .2s ease forwards; }
@keyframes toast-in{ from{ transform:translateX(24px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes toast-out{ to{ transform:translateX(24px); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .toast{ animation:none } .toast.hide{ animation:none } }

/* Sticky-footer layout: footer sits at the viewport bottom on short pages and
   is pushed down naturally on long ones. */
.av{ display:flex; flex-direction:column; min-height:100vh; }
.av-main{ flex:1 0 auto; }

/* Site footer. */
.site-foot{ flex-shrink:0; border-top:1px solid var(--border); background:var(--bg2); margin-top:48px; }
.foot-in{ max-width:1120px; margin:0 auto; padding:34px 24px; display:flex; flex-wrap:wrap;
  gap:28px 48px; align-items:flex-start; }
.foot-brand{ display:flex; flex-direction:column; gap:8px; max-width:300px; min-width:220px; }
.foot-tag{ color:var(--muted); font-size:13px; margin:0; line-height:1.5; }
.foot-note{ color:var(--faint); font-size:11.5px; margin:0; line-height:1.5; }
.foot-cols{ display:flex; gap:48px; margin-left:auto; flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:9px; }
.foot-col h4{ margin:0 0 4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-family:var(--fmono); }
.foot-col a{ color:var(--muted); font-size:13.5px; }
.foot-col a:hover{ color:var(--ink); }

/* Legal / prose pages. */
.legal{ max-width:760px; }
.legal h1{ margin-bottom:4px; }
.legal .updated{ color:var(--faint); font-size:12px; margin:0 0 22px; }
.legal h2{ font-size:18px; margin:26px 0 8px; }
.legal p, .legal li{ color:var(--muted); line-height:1.6; }
.legal b{ color:var(--ink); }
.legal ul{ padding-left:20px; } .legal li{ margin:5px 0; }

/* "Keep me signed in" checkbox row. */
.remember{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px;
  color:var(--muted); user-select:none; }
.remember input{ width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }

/* Live "Avenue" activity ticker (home). */
.avenue{ display:flex; align-items:stretch; gap:0; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); background:
    linear-gradient(90deg, rgb(var(--primary-rgb) /.10), transparent 30%, transparent 70%, rgb(var(--accent2-rgb) /.08)),
    var(--bg2); overflow:hidden; }
.ave-label{ display:flex; align-items:center; gap:7px; flex:0 0 auto; padding:0 18px;
  font:700 11px/1 var(--fmono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:rgb(var(--accent-rgb) /.07);
  border-right:1px solid var(--border); white-space:nowrap; }
.ave-label svg{ color:var(--accent); }
.ave-live{ width:7px; height:7px; border-radius:var(--pill); background:var(--accent);
  box-shadow:0 0 0 0 rgb(var(--accent-rgb) /.6); animation:ave-pulse 1.8s ease-out infinite; }
@keyframes ave-pulse{ 0%{ box-shadow:0 0 0 0 rgb(var(--accent-rgb) /.55) }
  70%{ box-shadow:0 0 0 7px rgb(var(--accent-rgb) /0) } 100%{ box-shadow:0 0 0 0 rgb(var(--accent-rgb) /0) } }
.ave-vp{ flex:1 1 auto; overflow:hidden; position:relative;
  -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ave-track{ display:inline-flex; align-items:center; gap:0; width:max-content;
  animation:ave-scroll 65s linear infinite; padding:11px 0; }
.ave-track:hover{ animation-play-state:paused; }
@keyframes ave-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.ave-item{ display:inline-flex; align-items:center; gap:8px; padding:0 20px; white-space:nowrap;
  color:var(--muted); position:relative; font-size:13px; }
.ave-item::after{ content:""; position:absolute; right:-2px; top:50%; width:4px; height:4px;
  transform:translateY(-50%) rotate(45deg); background:var(--border2); }
.ave-item:hover{ color:var(--ink); }
.ave-item:hover .ave-tx{ text-decoration:underline; text-underline-offset:2px; }
.ave-ic{ display:flex; }
.ave-ic.tone-primary{ color:var(--primary); } .ave-ic.tone-accent{ color:var(--accent); }
.ave-ic.tone-accent2{ color:var(--accent2); }
.ave-tag{ font-size:11px; color:var(--ink); font-weight:700; }
.ave-when{ font-size:11px; color:var(--faint); }
@media (prefers-reduced-motion: reduce){ .ave-track{ animation:none; } .ave-live{ animation:none; } }

/* Dashboard quick-action tiles. */
.qa-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.qa{ display:flex; align-items:center; gap:12px; padding:16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); color:var(--ink); transition:.15s; }
.qa:hover{ border-color:var(--primary); transform:translateY(-2px); }
.qa svg{ color:var(--primary); flex:0 0 auto; }
.qa b{ display:block; font-size:14px; } .qa span{ color:var(--faint); font-size:12px; }

.creator-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ccard{ padding:18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);
  cursor:pointer; transition:.15s; }
.ccard:hover{ border-color:var(--primary); transform:translateY(-2px); }
.ccard .top{ display:flex; align-items:center; gap:12px; }
.ccard .nm{ font-family:var(--fdisp); font-weight:600; font-size:15.5px; }
.ccard .hd{ color:var(--faint); font-size:12.5px; }
.ccard .role{ color:var(--muted); font-size:13.5px; margin-top:13px; }
.ccard .tags{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.ccard .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--border); }
.ccard .rate{ font-family:var(--fmono); font-weight:700; font-size:13.5px; }

/* pipeline (full) */
.pipe{ display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.pstep{ display:flex; align-items:center; }
.pstep .node{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--pill);
  background:var(--surface2); border:1px solid var(--border); font-size:12px; font-weight:600;
  color:var(--muted); white-space:nowrap; }
.pstep.done .node{ background:var(--primary); color:#fff; border-color:transparent; box-shadow:var(--glow); }
.pstep.now .node{ border-color:var(--accent); color:var(--ink); box-shadow:var(--glow-accent); }
.pstep .bar{ width:16px; height:2px; background:var(--border2); }
.pstep.done .bar{ background:var(--primary); }

.trust{ display:grid; grid-template-columns:1.1fr 1fr; gap:42px; align-items:center;
  padding:44px; border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--border); }
.trust h2{ font-size:32px; } .trust p{ color:var(--muted); margin-top:14px; font-size:15.5px; max-width:430px; }
.trust-stats{ display:flex; gap:30px; margin-top:26px; }
.trust-stats b{ font-family:var(--fdisp); font-size:26px; display:block; }
.trust-stats span{ color:var(--faint); font-size:12.5px; }

/* mutual completion */
.mutual{ display:flex; gap:10px; }
.check{ flex:1; display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface2); cursor:pointer; transition:.15s; }
.check:hover{ border-color:var(--border2); }
.check .box{ width:21px; height:21px; border-radius:6px; border:2px solid var(--border2); flex:0 0 auto;
  display:grid; place-items:center; color:transparent; transition:.15s; }
.check.ticked{ border-color:var(--accent); background:rgb(var(--accent-rgb) /.08); }
.check.ticked .box{ background:var(--accent); border-color:var(--accent); color:#04201c; box-shadow:var(--glow-accent); }
.av.light .check.ticked .box{ color:#fff; }
.check .ct{ font-size:13.5px; font-weight:700; } .check .cs{ font-size:11.5px; color:var(--faint); margin-top:1px; }
.check.ticked .cs{ color:var(--accent); }

.footer{ display:flex; align-items:center; justify-content:space-between; padding:30px;
  border-top:1px solid var(--border); color:var(--faint); font-size:13px; max-width:1160px; margin:0 auto; }
.footer .lk{ display:flex; gap:20px; } .footer .lk a{ cursor:pointer; } .footer .lk a:hover{ color:var(--ink); }

/* screen switcher (demo nav) */
.switcher{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 32px);
  padding:5px; border-radius:var(--radius-lg); background:var(--surface);
  border:1px solid var(--border2); box-shadow:var(--shadow); }
.switcher button{ border:0; background:transparent; color:var(--muted); font-family:var(--fbody);
  font-weight:600; font-size:13px; padding:8px 15px; border-radius:var(--pill); cursor:pointer; transition:.15s; }
.switcher button:hover{ color:var(--ink); }
.switcher button.on{ background:var(--primary); color:#fff; box-shadow:var(--glow); }