/* ============================================================
   AX3 — active challenge redesign (page-scoped)
   Ported from 123123/isp_v4.html <style> block (design prototype v3).
   Visibility model: see 123123/visibility-matrix.md — role gating is
   server-side (Jinja), so no ax3-is-visitor body-class rules here.
   Dropped from prototype: .ax3-switch* preview switcher, local @font-face
   fallbacks, body.ax3-is-visitor hiding mechanism.
   ============================================================ */

body.ui-active-challenge-page main.container{ max-width:1288px; padding-top:32px; padding-bottom:90px; }
.challenge-shell--wide{ max-width:none; }
/* Grid track blowout guard: nowrap marquee/vt-log content must not widen
   the implicit auto column beyond the container. */
.challenge-board{ grid-template-columns:minmax(0,1fr); }
.challenge-board > *{ min-width:0; }

/* ---------- hero CTA row (back / share) ---------- */
.ax3-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* ============================================================
   HERO — visual language aligned with the snapshot showcase
   ============================================================ */
.ax3-hero{ position:relative; }
.ax3-hero__card{
  position:relative; overflow:hidden;
  border:1px solid var(--vt-line);
  border-radius:calc(var(--vt-r-lg) + 6px);
  background:linear-gradient(150deg, rgba(59,110,246,.12), rgba(18,22,39,.6) 45%, rgba(255,210,51,.05));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}

/* HUD corner brackets */
.ax3-corner{ position:absolute; width:22px; height:22px; border:2px solid var(--vt-yellow); opacity:.75; pointer-events:none; z-index:2; }
.ax3-corner--tl{ top:14px; left:14px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.ax3-corner--tr{ top:14px; right:14px; border-left:0; border-bottom:0; border-radius:0 6px 0 0; }
.ax3-corner--bl{ bottom:14px; left:14px; border-right:0; border-top:0; border-radius:0 0 0 6px; }
.ax3-corner--br{ bottom:14px; right:14px; border-left:0; border-top:0; border-radius:0 0 6px 0; }

.ax3-hero__grid{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:26px;
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,38px) 0;
  align-items:stretch;
}
@media (max-width:900px){
  .ax3-hero__grid{ grid-template-columns:1fr; gap:20px; padding:24px 18px 0; }
}

/* --- left column --- */
.ax3-headrow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.ax3-slug{
  font-family:var(--vt-mono); font-size:.64rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--vt-text-3);
  border:1px dashed var(--vt-line-soft); border-radius:999px; padding:5px 11px;
}
.ax3-led{ animation:ax3-led 1.6s ease-in-out infinite; }
@keyframes ax3-led{ 0%,100%{opacity:1} 50%{opacity:.25} }

.ax3-player{ display:inline-flex; align-items:center; gap:12px; margin-bottom:14px; text-decoration:none; color:inherit; border-radius:16px; }
.ax3-player:hover strong{ color:var(--vt-blue-2); }
.ax3-player:focus-visible{ outline:2px solid var(--vt-blue-2); outline-offset:4px; }
.ax3-player__avatar{
  position:relative; width:44px; height:44px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:14px;
  font-family:var(--vt-disp); font-weight:800; font-size:1.1rem;
  color:#fff; background:linear-gradient(135deg,var(--vt-blue),var(--vt-blue-2));
  box-shadow:0 6px 22px var(--vt-blue-glow);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1); /* overshoot spring */
}
.ax3-player:hover .ax3-player__avatar,
.ax3-player:focus-visible .ax3-player__avatar{ transform:rotate(14deg) scale(1.06); }
.ax3-player__avatar::after{
  content:""; position:absolute; inset:-4px;
  border:1px dashed rgba(109,155,255,.4); border-radius:19px;
  animation:ax3-orbit 14s linear infinite;
}
@keyframes ax3-orbit{ to{ transform:rotate(360deg); } }
.ax3-player small{ display:block; font-family:var(--vt-mono); font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--vt-text-3); }
.ax3-player strong{ display:block; color:var(--vt-text); font-size:1.08rem; transition:color .2s ease; }

.ax3-kicker{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  color:var(--vt-yellow); font-size:.74rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
}
.ax3-kicker::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--vt-yellow); }

.ax3-title{
  position:relative; margin:0 0 10px;
  font-family:var(--vt-disp); font-weight:700;
  font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.1; letter-spacing:-.02em;
  min-height:1.15em; color:var(--vt-text);
}
.ax3-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--vt-yellow),#fff 45%,var(--vt-yellow));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ax3-shimmer 4s linear infinite;
}
@keyframes ax3-shimmer{ to{ background-position:200% 0; } }
.ax3-caret{
  display:inline-block; width:.5em; height:1em; margin-left:4px;
  vertical-align:-.1em; background:var(--vt-yellow);
  box-shadow:0 0 14px var(--vt-yellow-glow);
  animation:ax3-blink 1s steps(2) infinite;
}
@keyframes ax3-blink{ 50%{ opacity:0; } }

.ax3-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:12px 0 0; color:var(--vt-text-3); font-size:.87rem;
}
.ax3-meta b{ color:var(--vt-text-2); font-family:var(--vt-mono); font-size:.82rem; }

.ax3-iconbtn{
  flex:none;
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--vt-line); background:transparent; color:var(--vt-text-2);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.ax3-iconbtn:hover{ color:var(--vt-yellow); border-color:rgba(255,210,51,.35); background:rgba(255,210,51,.06); }

/* description disclosure */
.ax3-desc{ margin-top:20px; padding-top:12px; border-top:1px solid var(--vt-line-soft); max-width:72ch; }
.ax3-desc summary{
  display:inline-flex; min-height:40px; align-items:center; gap:8px;
  cursor:pointer; list-style:none; user-select:none;
  font-size:14px; font-weight:600; color:var(--vt-text-2);
}
.ax3-desc summary::-webkit-details-marker{ display:none; }
.ax3-desc summary:hover{ color:var(--vt-text); }
.ax3-desc svg{ transition:transform 180ms cubic-bezier(.23,1,.32,1); }
.ax3-desc[open] summary svg{ transform:rotate(180deg); }
.ax3-desc__body{ max-width:72ch; padding-top:8px; font-size:14px; line-height:1.65; color:var(--vt-text-2); }

/* system log disclosure panel */
.ax3-disclosure{
  border:1px solid var(--vt-line); border-radius:var(--vt-r-md);
  background:rgba(18,22,39,.66); overflow:hidden;
}
.ax3-disclosure summary{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; cursor:pointer; list-style:none; user-select:none;
  transition:color .2s ease, background .2s ease;
}
.ax3-disclosure summary::-webkit-details-marker{ display:none; }
.ax3-disclosure summary:hover{ color:var(--vt-text); background:rgba(147,164,255,.05); }
.ax3-disclosure__title{ display:inline-flex; align-items:center; gap:8px; flex:1; min-width:0; }
.ax3-disclosure__title strong{ font-family:var(--vt-disp); font-weight:700; letter-spacing:.01em; color:var(--vt-text); }
.ax3-disclosure__chev{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  border:1px solid var(--vt-line); border-radius:8px; color:var(--vt-text-3);
  transition:transform 180ms cubic-bezier(.23,1,.32,1), color .2s ease, border-color .2s ease;
}
.ax3-disclosure[open] .ax3-disclosure__chev{
  transform:rotate(180deg); color:var(--vt-yellow); border-color:rgba(255,210,51,.35);
}
.ax3-panel--eventlog{ margin-top:10px; }
.ax3-panel--eventlog details[open] > .ax3-desc{ margin:4px 16px 12px; }
.ax3-panel--eventlog details[open] > .vt-chart-card{ margin:0 16px 16px; }

/* ============================================================
   TWIN TIMERS — snapshot-style stat cards
   ============================================================ */
.ax3-timers{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:12px; width:100%; min-width:0; }
.ax3-timer{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid rgba(255,210,51,.28); border-radius:var(--vt-r-lg);
  background:linear-gradient(160deg, rgba(255,210,51,.09), rgba(12,15,26,.4));
  padding:16px 20px 14px;
}
.ax3-timer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px 140px at 50% 0%, rgba(255,210,51,.12), transparent 70%);
}
.ax3-timer--wall{ border-color:rgba(109,155,255,.28); background:linear-gradient(160deg, rgba(59,110,246,.09), rgba(12,15,26,.4)); }
.ax3-timer--wall::before{ background:radial-gradient(340px 140px at 50% 0%, rgba(59,110,246,.14), transparent 70%); }
.ax3-timer--game{ color:var(--vt-yellow); }
.ax3-timer--wall{ color:var(--vt-blue-2); }
.ax3-timer__head{ position:relative; display:flex; align-items:center; justify-content:center; gap:8px; }
.ax3-timer__label{ font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--vt-text-2); }
.ax3-timer__led{
  width:8px; height:8px; border-radius:50%;
  background:var(--vt-green); box-shadow:0 0 10px var(--vt-green);
  animation:ax3-led 1.6s ease-in-out infinite;
}
.ax3-timer--wall .ax3-timer__led{ background:var(--vt-blue-2); box-shadow:0 0 10px var(--vt-blue-2); }
.ax3-timer--paused .ax3-timer__led{ background:var(--vt-red); box-shadow:0 0 12px rgba(248,113,113,.6); animation:none; }
.ax3-timer__value{
  position:relative; margin:8px 0 4px;
  font-family:var(--vt-mono); font-weight:700;
  font-size:clamp(1.9rem,3.1vw,2.6rem); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  background:linear-gradient(120deg,#fff 20%,var(--vt-yellow) 60%,var(--vt-yellow-2));
  background-size:180% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ax3-shimmer 5s linear infinite;
}
.ax3-timer--wall .ax3-timer__value{ background-image:linear-gradient(120deg,#fff 20%,var(--vt-blue) 60%,var(--vt-blue-2)); }
.ax3-timer__value .ax3-d{ font-size:.52em; font-weight:500; margin-right:.25em; opacity:.65; vertical-align:baseline; }
.ax3-timer--paused .ax3-timer__value{ animation:none; background:none; -webkit-text-fill-color:var(--vt-red); color:var(--vt-red); }

/* divider between timers */
.ax3-split{
  display:flex; align-items:center; gap:12px; padding:0 4px;
  font-family:var(--vt-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vt-text-3);
}
.ax3-split::before, .ax3-split::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--vt-line), transparent);
}
.ax3-split b{ color:var(--vt-text-2); font-weight:600; }

/* bottom chip strip (inside hero card) */
.ax3-hero__chips{
  position:relative; margin-top:26px;
  display:flex; flex-wrap:wrap; gap:8px;
  padding:14px clamp(22px,3vw,38px) 20px;
  border-top:1px solid var(--vt-line-soft);
}
.ax3-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--vt-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--vt-text-2);
  border:1px solid var(--vt-line); border-radius:999px;
  padding:8px 14px; background:rgba(147,164,255,.04);
}
.ax3-chip b{ color:var(--vt-yellow); font-weight:700; }

/* orbiting atom decoration — modernized triple orbit */
.ax3-atom{
  position:absolute; right:-64px; top:-64px; width:230px; height:230px;
  pointer-events:none; opacity:.28; z-index:0; color:var(--vt-yellow);
}
.ax3-atom g{ transform-origin:50px 50px; }
.ax3-atom--a{ animation:ax3-spin 24s linear infinite; }
.ax3-atom--b{ animation:ax3-spin 16s linear infinite reverse; }
.ax3-atom--c{ animation:ax3-spin 33s linear infinite; }
@keyframes ax3-spin{ to{ transform:rotate(360deg);} }

/* marquee */
.ax3-marquee{ overflow:hidden; border-top:1px solid var(--vt-line-soft); background:rgba(59,110,246,.05); }
.ax3-marquee__track{ display:inline-flex; white-space:nowrap; animation:ax3-slide 30s linear infinite; }
.ax3-marquee__group{ display:inline-flex; align-items:center; }
.ax3-marquee__group > span{
  display:inline-flex; align-items:center; padding:0 28px;
  font-family:var(--vt-mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vt-text-2);
}
.ax3-marquee__group > span::after{ content:"◆"; margin-left:28px; color:var(--vt-yellow); font-size:.7em; }
@keyframes ax3-slide{ to{ transform:translateX(-50%);} }
@media (hover:hover){ .ax3-marquee:hover .ax3-marquee__track{ animation-play-state:paused; } }

/* ============================================================
   COMMAND DECK (owner)
   ============================================================ */
.ax3-deck{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:16px;
  border:1px solid var(--vt-line); border-radius:var(--vt-r-md);
  background:linear-gradient(135deg, rgba(59,110,246,.08), rgba(18,22,39,.65) 45%, rgba(255,210,51,.04));
  padding:12px 16px;
}
.ax3-deck__state{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--vt-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vt-pip);
}
.ax3-deck__state i{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 10px currentColor; animation:ax3-led 1.6s infinite;
}
.ax3-deck__state.paused{ color:var(--vt-red); }
.ax3-deck__state.paused i{ animation:none; }
.ax3-deck__divider{ width:1px; height:22px; background:var(--vt-line); }
.ax3-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 20px; border-radius:12px;
  font-family:var(--vt-sans); font-size:.87rem; font-weight:650;
  border:1px solid var(--vt-line); color:var(--vt-text-2);
  white-space:nowrap; cursor:pointer;
  background:rgba(18,22,39,.5);
  transition:color .2s ease, border-color .2s ease, background .2s ease,
             box-shadow .2s ease, transform .15s ease;
}
.ax3-btn:hover{
  color:var(--vt-text); border-color:rgba(147,164,255,.25); transform:translateY(-1px);
}
.ax3-btn:active{ transform:translateY(1px); }
.ax3-btn--pause{ border-color:rgba(255,210,51,.35); color:var(--vt-yellow); }
.ax3-btn--pause:hover{
  color:var(--vt-yellow); background:var(--vt-yellow-glow);
  box-shadow:0 6px 24px rgba(255,210,51,.14); transform:translateY(-1px);
}
.ax3-btn--danger{ border-color:rgba(248,113,113,.38); color:var(--vt-red); }
.ax3-btn--danger:hover{
  color:#fca5a5; background:rgba(248,113,113,.08);
  box-shadow:0 6px 24px rgba(248,113,113,.16); transform:translateY(-1px);
}
.ax3-btn--ghost{ border-color:var(--vt-line); color:var(--vt-text-2); }
.ax3-btn--ghost:hover{ color:var(--vt-text); border-color:rgba(147,164,255,.3); }
.ax3-btn--yellow{
  background:linear-gradient(135deg,var(--vt-yellow),var(--vt-yellow-2));
  color:#101426; font-weight:700;
}
.ax3-btn--yellow:hover{ filter:brightness(1.05); }
.ax3-deck__spacer{ flex:1; }
/* command-deck session actions share one geometry regardless of variant */
.ax3-deck .ui-button{ min-height:44px; padding:0 20px; }
.ax3-hint{ font-family:var(--vt-mono); font-size:11px; color:var(--vt-text-3); letter-spacing:.06em; }

/* visitor notice — visibility is decided server-side ({% if not is_owner %}) */
.ax3-readonly{
  display:flex; align-items:center; gap:8px;
  margin-top:16px; padding:12px 16px;
  border:1px dashed var(--vt-line); border-radius:var(--vt-r-md);
  font-size:13px; color:var(--vt-text-2); background:rgba(18,22,39,.6);
}
.ax3-readonly strong{ color:var(--vt-yellow); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.ax3-sec{ margin-top:44px; }
.ax3-sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.ax3-sechead h2{
  margin:0; font-family:var(--vt-disp); font-weight:800;
  font-size:clamp(21px,2.6vw,27px); color:var(--vt-text); letter-spacing:-.01em;
}
.ax3-sechead h2 i{
  font-style:normal; font-family:var(--vt-mono); font-weight:400;
  font-size:.62em; color:var(--vt-text-3); letter-spacing:.08em; margin-left:10px;
}
.ax3-sechead p{ margin:4px 0 0; font-size:13px; color:var(--vt-text-2); }
.ax3-secside{
  font-family:var(--vt-mono); font-size:12px; color:var(--vt-text-2);
  letter-spacing:.1em; white-space:nowrap; padding-bottom:4px;
}
.ax3-secside b{ color:var(--vt-yellow); }

/* terminal card shell */
.ax3-term{
  position:relative;
  border:1px solid var(--vt-line); border-radius:var(--vt-r-lg);
  background:linear-gradient(150deg, rgba(59,110,246,.09), rgba(14,17,31,.92) 42%, rgba(255,210,51,.04));
  overflow:hidden;
}
.ax3-term::before{
  content:""; position:absolute; top:-64px; left:22%; width:52%; height:120px;
  background:radial-gradient(ellipse at center, var(--vt-blue), transparent 70%);
  opacity:.06; pointer-events:none;
}
.ax3-term__head{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--vt-line-soft);
  background:rgba(12,15,26,.55);
  font-family:var(--vt-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vt-text-2);
}
.ax3-term__led{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--vt-pip); box-shadow:0 0 10px rgba(61,255,136,.5);
  animation:ax3-led 1.6s infinite;
}
.ax3-term__side{ margin-left:auto; color:var(--vt-text-3); }

/* reveal on scroll */
.ax3-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.ax3-reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   STREAM BLOCK
   ============================================================ */
.ax3-stream-toggle{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 16px; cursor:pointer;
  background:transparent; border:0; color:inherit; text-align:left;
  font-family:var(--vt-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vt-text-2);
}
.ax3-stream-toggle:hover{ color:var(--vt-text); }
.ax3-rec{ display:inline-flex; align-items:center; gap:7px; color:var(--vt-red); font-weight:700; }
.ax3-rec i{
  width:9px; height:9px; border-radius:50%; background:currentColor;
  box-shadow:0 0 10px rgba(248,113,113,.7);
  animation:ax3-led 1.2s steps(2,start) infinite;
}
.ax3-stream-title strong{ color:var(--vt-text); font-weight:700; }
.ax3-stream-meta{
  margin-left:auto; display:flex; align-items:center; gap:12px;
  font-size:11px; color:var(--vt-text-3); letter-spacing:.1em;
}
.ax3-chevron{ transition:transform .3s ease; color:var(--vt-text-3); }
.ax3-stream.is-open .ax3-chevron{ transform:rotate(180deg); }

.ax3-stream-body-wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.3,1);
}
.ax3-stream.is-open .ax3-stream-body-wrap{ grid-template-rows:1fr; }
.ax3-stream-body{ overflow:hidden; }
.ax3-stream-inner{ padding:18px 16px 20px; border-top:1px solid var(--vt-line-soft); }

.ax3-videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.ax3-video{
  position:relative; aspect-ratio:16/9; border-radius:var(--vt-r-md);
  border:1px solid var(--vt-line); overflow:hidden; margin:0;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(59,110,246,.12), transparent),
    #0c0f1a;
}
.ax3-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* overlays are informational only — never block player controls */
.ax3-video__tag, .ax3-video__plat{ pointer-events:none; }
.ax3-video__tag{
  position:absolute; left:10px; top:10px;
  font-family:var(--vt-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vt-text-3);
  border:1px solid var(--vt-line); border-radius:6px; padding:3px 8px;
  background:rgba(12,15,26,.75);
}
.ax3-video__plat{
  position:absolute; right:10px; top:10px;
  font-family:var(--vt-mono); font-size:10px; font-weight:700; letter-spacing:.1em;
  color:var(--vt-text-2); text-transform:uppercase;
}

.ax3-proofrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }

/* moderator tools inside the REC panel — same language as ax3-disclosure */
.ax3-term .proof-moderation-details{ margin-top:12px; }
.ax3-term .proof-moderation-details > summary{
  display:inline-flex; align-items:center; gap:8px;
  min-height:32px; padding:0 10px; list-style:none; cursor:pointer;
  font-family:var(--vt-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vt-text-2);
  border:1px solid var(--vt-line); border-radius:8px;
  background:rgba(12,15,26,.5);
  transition:color .2s ease, border-color .2s ease;
}
.ax3-term .proof-moderation-details > summary::-webkit-details-marker{ display:none; }
.ax3-term .proof-moderation-details > summary::marker{ content:""; }
.ax3-term .proof-moderation-details > summary:hover{ color:var(--vt-yellow); border-color:rgba(255,210,51,.35); }
.ax3-term .proof-moderation-details > summary svg{ transition:transform .18s ease; }
.ax3-term .proof-moderation-details[open] > summary{ color:var(--vt-yellow); border-color:rgba(255,210,51,.35); }
.ax3-term .proof-moderation-details[open] > summary svg{ transform:rotate(180deg); }
.ax3-copybtn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--vt-mono); font-size:12px; letter-spacing:.06em;
  color:var(--vt-text-2); background:transparent;
  border:1px solid var(--vt-line); border-radius:9px; padding:8px 13px;
  cursor:pointer; transition:color .2s, border-color .2s, background .2s;
}
.ax3-copybtn:hover{ color:var(--vt-pip); border-color:rgba(61,255,136,.35); background:rgba(61,255,136,.05); }
.ax3-copyfeedback{ font-family:var(--vt-mono); font-size:11.5px; color:var(--vt-pip); opacity:0; transition:opacity .25s; }
.ax3-copyfeedback.show{ opacity:1; }

.ax3-addvideo{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.ax3-addvideo input.ax3-input{
  flex:1; min-width:220px;
  font-family:var(--vt-sans); font-size:13.5px; color:var(--vt-text);
  background:rgba(12,15,26,.8); border:1px solid var(--vt-line);
  border-radius:10px; padding:10px 14px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ax3-addvideo input.ax3-input:focus{ border-color:rgba(255,210,51,.5); box-shadow:0 0 0 3px var(--vt-yellow-glow); }
.ax3-addvideo input.ax3-input::placeholder{ color:var(--vt-text-3); }
.ax3-slots{ width:100%; font-family:var(--vt-mono); font-size:11px; color:var(--vt-text-3); letter-spacing:.08em; }

/* ============================================================
   SUBGOALS
   ============================================================ */
.ax3-progress{
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
  border:1px solid var(--vt-line); border-radius:var(--vt-r-md);
  background:rgba(18,22,39,.7); padding:14px 18px;
}
.ax3-progress__num{
  font-family:var(--vt-mono); font-weight:700; font-size:22px;
  font-variant-numeric:tabular-nums; color:var(--vt-text); white-space:nowrap;
}
.ax3-progress__num small{ font-size:12px; color:var(--vt-text-3); font-weight:400; }
.ax3-progress__track{
  position:relative; flex:1; height:10px; border-radius:999px;
  background:rgba(147,164,255,.1); overflow:hidden;
}
.ax3-progress__fill{
  height:100%; width:0; border-radius:999px; position:relative;
  background:linear-gradient(90deg, var(--vt-yellow), var(--vt-yellow-2));
  box-shadow:0 0 14px var(--vt-yellow-glow);
  transition:width 1.2s cubic-bezier(.22,1,.3,1);
}
.ax3-progress__fill::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-55deg, transparent 0 8px, rgba(16,20,38,.25) 8px 12px);
  animation:ax3-stripes 1.4s linear infinite;
}
@keyframes ax3-stripes{ to{ background-position:24px 0; } }
.ax3-progress__eta{
  font-family:var(--vt-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--vt-text-3); white-space:nowrap;
}
.ax3-progress__eta b{ color:var(--vt-text-2); }

.ax3-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
/* filter chips */
.ax3-checkopt{
  position:relative;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--vt-mono); font-size:12px; letter-spacing:.05em;
  color:var(--vt-text-2); user-select:none;
  border:1px solid var(--vt-line); border-radius:999px;
  padding:8px 14px; background:rgba(12,15,26,.5);
  transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ax3-checkopt:hover{ color:var(--vt-text); border-color:rgba(147,164,255,.28); }
.ax3-checkopt input{ position:absolute; opacity:0; pointer-events:none; }
.ax3-checkopt i{
  width:15px; height:15px; flex:none;
  border:1.5px solid rgba(147,164,255,.4); border-radius:5px;
  display:grid; place-items:center;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ax3-checkopt i::after{
  content:""; width:7.5px; height:4.5px; margin-top:-1px;
  border-left:2px solid #101426; border-bottom:2px solid #101426;
  transform:rotate(-45deg) scale(0);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.ax3-checkopt input:checked + i{
  background:var(--vt-yellow); border-color:var(--vt-yellow);
  box-shadow:0 0 10px var(--vt-yellow-glow);
}
.ax3-checkopt input:checked + i::after{ transform:rotate(-45deg) scale(1); }
.ax3-checkopt:has(input:checked){
  color:var(--vt-yellow); border-color:rgba(255,210,51,.45);
  background:rgba(255,210,51,.05);
}
.ax3-toolbar .ax3-add{ margin-left:auto; }

/* category group */
.ax3-cats{ display:flex; flex-direction:column; gap:14px; }
.ax3-cat{
  position:relative; overflow:hidden;
  border:1px solid var(--vt-line); border-radius:var(--vt-r-md);
  background:rgba(18,22,39,.66);
  transition:border-color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.22,1,.3,1);
}
/* per-category accent (tints the decorative art) */
.ax3-cat:nth-child(4n+1){ --cat-accent:#5b8cff; }
.ax3-cat:nth-child(4n+2){ --cat-accent:#3dd688; }
.ax3-cat:nth-child(4n+3){ --cat-accent:var(--vt-yellow); }
.ax3-cat:nth-child(4n+4){ --cat-accent:#b48cff; }
.ax3-cat:hover{ border-color:rgba(147,164,255,.22); box-shadow:0 10px 36px -14px rgba(0,0,0,.6); }

/* thematic animated watermark on the right of each category card;
   size & position are set per-card from JS based on visible row count */
.ax3-cat__art{
  position:absolute;
  top:var(--art-top,50%); right:var(--art-right,-24px);
  width:var(--art-size,92px); height:var(--art-size,92px);
  pointer-events:none;
  color:var(--cat-accent,var(--vt-blue)); opacity:.17;
  animation:ax3-art-float 10s ease-in-out infinite;
}
.ax3-rows{ position:relative; z-index:1; }
.ax3-cat__head{ position:relative; z-index:2; }
.ax3-cat__art svg{
  width:100%; height:100%; display:block; overflow:visible;
  transform:rotate(var(--art-tilt,-10deg));
}
.ax3-cat__art svg :not([fill]){
  stroke-width:3.5px;
  vector-effect:non-scaling-stroke;
}
@keyframes ax3-art-float{
  0%,100%{ transform:translate(0,0); }
  33%{ transform:translate(-7px,6px); }
  66%{ transform:translate(5px,-6px); }
}
.ax3-art-spin{ transform-box:view-box; transform-origin:center; animation:ax3-art-spin 16s linear infinite; }
.ax3-art-dash{
  stroke-dasharray:9 7;
  animation:ax3-art-dash 2.8s linear infinite;
}
.ax3-art-pulse{ animation:ax3-art-pulse 2.8s ease-in-out infinite; }
.ax3-art-rise{ animation:ax3-art-rise 2.4s ease-in-out infinite; }
.ax3-art-spin--slow{ animation-duration:22s; }
.ax3-art-delay-055{ animation-delay:.55s; }
.ax3-art-delay-08{ animation-delay:.8s; }
.ax3-art-delay-11{ animation-delay:1.1s; }
.ax3-art-delay-15{ animation-delay:1.5s; }
@keyframes ax3-art-spin{ to{ transform:rotate(360deg); } }
@keyframes ax3-art-dash{ to{ stroke-dashoffset:-64; } }
@keyframes ax3-art-pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
@keyframes ax3-art-rise{
  0%{ transform:translateY(7px); opacity:0; }
  35%{ opacity:.9; }
  100%{ transform:translateY(-9px); opacity:0; }
}
@media (max-width:900px){ .ax3-cat__art{ display:none; } }
.ax3-cat.is-moving{ box-shadow:0 14px 40px rgba(0,0,0,.5); }
.ax3-cat__head{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--vt-line-soft);
}
.ax3-grip{ flex:none; display:grid; grid-template-columns:repeat(2,3px); gap:2.5px; opacity:.45; cursor:grab; touch-action:none; }
.ax3-grip i{ width:3px; height:3px; border-radius:50%; background:var(--vt-text-2); }
.ax3-cat:hover .ax3-grip{ opacity:1; }
.ax3-cat[draggable="true"]:active .ax3-grip{ cursor:grabbing; }
.ax3-cat__name{ margin:0; font-family:var(--vt-disp); font-size:15.5px; font-weight:700; color:var(--vt-text); letter-spacing:.01em; }
.ax3-cat__count{
  font-family:var(--vt-mono); font-size:11px; letter-spacing:.08em;
  color:var(--vt-text-2);
  border:1px solid var(--vt-line); border-radius:999px; padding:3px 10px;
  background:rgba(12,15,26,.6); font-variant-numeric:tabular-nums;
}
.ax3-cat__count.all-done{ color:var(--vt-green); border-color:rgba(74,222,128,.4); }
.ax3-cat__bar{
  flex:1; max-width:120px; height:4px; margin-left:auto;
  border-radius:999px; background:rgba(147,164,255,.12); overflow:hidden;
}
.ax3-cat__bar i{
  display:block; height:100%; border-radius:999px;
  background:var(--vt-pip); box-shadow:0 0 8px rgba(61,255,136,.3);
  transition:width .8s cubic-bezier(.22,1,.3,1);
}
.ax3-cat__move{ flex:none; display:flex; gap:4px; }
.ax3-movebtn{
  width:26px; height:26px; border-radius:7px; cursor:pointer;
  border:1px solid var(--vt-line); background:transparent; color:var(--vt-text-3);
  display:grid; place-items:center;
  transition:color .2s, border-color .2s, background .2s;
}
.ax3-movebtn:hover:not(:disabled){ color:var(--vt-yellow); border-color:rgba(255,210,51,.4); background:rgba(255,210,51,.05); }
.ax3-movebtn:disabled{ opacity:.3; cursor:default; }

/* subgoal rows */
.ax3-rows{ list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:4px; }
.ax3-row{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:11px 12px; border-radius:10px;
  border:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.ax3-row:hover{
  background:linear-gradient(0deg, rgba(17,21,39,.92), rgba(17,21,39,.92));
  border-color:rgba(147,164,255,.1);
}
.ax3-row::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  border-radius:2px; background:var(--vt-yellow);
  opacity:0; transform:scaleY(.5);
  transition:opacity .25s ease, transform .25s ease;
}
.ax3-row:hover::before{ opacity:.5; transform:scaleY(1); }
.ax3-row.is-done .ax3-row__name a,
.ax3-row.is-done .ax3-row__name span{ color:var(--vt-green); }
.ax3-row.is-done .ax3-tags{ opacity:.6; }

/* fallout checkbox */
.ax3-box{
  position:relative; width:26px; height:26px; flex:none;
  border:2px solid rgba(147,164,255,.35); border-radius:7px;
  background:rgba(12,15,26,.7); cursor:pointer; padding:0;
  transition:border-color .25s ease, background .25s ease, transform .15s ease;
}
.ax3-box:hover{ border-color:var(--vt-yellow); transform:scale(1.08); }
.ax3-box:disabled{ cursor:default; }
.ax3-box:disabled:hover{ border-color:rgba(147,164,255,.35); transform:none; }
.ax3-box svg{
  position:absolute; inset:0; margin:auto; width:16px; height:16px;
  stroke:var(--vt-green); stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24;
  transition:stroke-dashoffset .35s ease .05s;
  filter:drop-shadow(0 0 5px rgba(74,222,128,.6));
}
.ax3-row.is-done .ax3-box{ border-color:var(--vt-green); background:rgba(74,222,128,.1); }
.ax3-row.is-done .ax3-box svg{ stroke-dashoffset:0; }
.ax3-row.just-done{ animation:ax3-stamp .45s cubic-bezier(.22,1.4,.36,1); }
@keyframes ax3-stamp{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.015); background:rgba(74,222,128,.08); }
  100%{ transform:scale(1); }
}

.ax3-row__name{ font-size:14px; font-weight:500; line-height:1.35; }
.ax3-row__name a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--vt-text); text-decoration:none; border-bottom:1px dotted transparent;
  transition:color .2s, border-color .2s;
}
.ax3-row__name a:hover{ color:var(--vt-yellow-2); border-color:var(--vt-yellow); }
.ax3-row__name span{ color:var(--vt-text); }

.ax3-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.ax3-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--vt-mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--vt-text-2);
  border:1px solid var(--vt-line-soft); border-radius:6px; padding:2.5px 8px;
  background:rgba(12,15,26,.5);
}
.ax3-tag b{ color:var(--vt-yellow); font-weight:600; }
.ax3-tag svg{ color:var(--vt-text-3); }

.ax3-mini{ display:flex; align-items:center; gap:8px; margin-top:6px; max-width:300px; }
.ax3-mini__track{ flex:1; height:5px; border-radius:999px; background:rgba(147,164,255,.12); overflow:hidden; }
.ax3-mini__track i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--vt-blue),var(--vt-blue-2));
  transition:width .9s cubic-bezier(.22,1,.3,1);
}
.ax3-mini__num{ font-family:var(--vt-mono); font-size:10.5px; color:var(--vt-text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* row actions (owner) */
.ax3-actions{ display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .25s ease; }
.ax3-row:hover .ax3-actions, .ax3-row:focus-within .ax3-actions{ opacity:1; }
.ax3-act{
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:1px solid var(--vt-line); background:rgba(12,15,26,.6); color:var(--vt-text-3);
  display:grid; place-items:center;
  transition:color .2s, border-color .2s, background .2s, transform .15s;
}
.ax3-act:hover{ color:var(--vt-yellow); border-color:rgba(255,210,51,.4); }
.ax3-act--del:hover{ color:var(--vt-red); border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.07); }
.ax3-complete{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--vt-sans); font-size:12.5px; font-weight:600;
  color:var(--vt-green); background:rgba(74,222,128,.07);
  border:1px solid rgba(74,222,128,.4); border-radius:8px;
  padding:6px 12px; cursor:pointer; white-space:nowrap;
  transition:background .2s, transform .15s;
}
.ax3-complete:hover{ background:rgba(74,222,128,.14); }
.ax3-complete:active{ transform:translateY(1px); }
/* Canonical subgoal Complete buttons keep the terminal-row density:
   compact sizing only — colors and states stay the shared component's. */
.ax3-actions .subgoal-complete-button{
  min-height:0; padding:4px 10px;
  font-size:12.5px; gap:7px;
}
@media (hover:none){ .ax3-actions{ opacity:1; } }

/* add subgoal dashed card */
.ax3-addsub{
  margin-top:14px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; cursor:pointer;
  font-family:var(--vt-mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vt-text-2);
  border:1.5px dashed rgba(147,164,255,.28); border-radius:var(--vt-r-md);
  background:transparent;
  transition:color .25s, border-color .25s, background .25s;
}
.ax3-addsub:hover{ color:var(--vt-yellow); border-color:rgba(255,210,51,.55); background:rgba(255,210,51,.04); }

/* ---------- mobile: flat subgoals, no card chrome ---------- */
@media (max-width:640px){
  .ax3-cats{ gap:10px; }
  .ax3-cat,
  .ax3-cat:hover{
    border-color:var(--vt-line-soft); background:rgba(18,22,39,.5);
    overflow:hidden;
    box-shadow:none;
  }
  .ax3-cat__art{ display:none; }
  .ax3-cat__head{
    flex-wrap:wrap; row-gap:8px; padding:12px 12px 10px;
    border-bottom:1px dashed var(--vt-line-soft);
  }
  .ax3-grip{ display:none; }
  .ax3-cat__name{ flex:1 1 auto; min-width:0; font-size:15px; }
  .ax3-cat__count{ flex:none; }
  .ax3-movebtn{ width:34px; height:34px; border-radius:9px; }
  .ax3-cat__bar{ flex:1 1 100%; max-width:none; height:5px; margin-left:0; order:4; }
  .ax3-cat__move{ display:flex; }
  .ax3-rows{ padding:4px 6px 8px; gap:2px; }
  .ax3-row{
    grid-template-columns:auto minmax(0,1fr); gap:12px;
    padding:12px 10px; border-radius:0; border:0;
  }
  .ax3-row:hover{ background:transparent; }
  .ax3-row::before{ display:none; }
  .ax3-row__name{ font-size:15px; overflow-wrap:anywhere; }
  .ax3-mini{ max-width:none; }
  .ax3-actions{
    grid-column:2; justify-self:start; gap:8px; padding-top:4px;
    opacity:.85;
  }
  .ax3-addsub{ padding:15px 12px; }
}

/* filters applied via body classes */
body.ax3-hide-done .ax3-row.is-done{ display:none; }
body.ax3-hide-todo .ax3-row:not(.is-done){ display:none; }

/* ============================================================
   TIMELINE
   ============================================================ */
.ax3-log{ padding:8px 6px; font-family:var(--vt-mono); font-size:12.5px; }
.ax3-log-scroll{ max-height:260px; overflow:auto; }

/* owner visibility is server-side (Jinja gates) — see visibility-matrix.md */

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .ax3-atom--a, .ax3-atom--b, .ax3-atom--c, .ax3-timer__led,
  .ax3-player__avatar::after, .ax3-deck__state i, .ax3-rec i,
  .ax3-caret, .ax3-progress__fill::after,
  .ax3-marquee__track,
  .ax3-term__led,
  .ax3-cat__art, .ax3-art-spin, .ax3-art-dash, .ax3-art-pulse, .ax3-art-rise{ animation:none; }
  .ax3-title em, .ax3-timer__value{ animation:none; }
  .ax3-reveal{ opacity:1; transform:none; transition:none; }
  .ax3-player:hover .ax3-player__avatar,
  .ax3-player:focus-visible .ax3-player__avatar{ transform:none; }
  .ax3-page *{ transition-duration:.01ms; }
}

/* ---- content fidelity ---- */
.ax3-rows .ax3-row.is-done .subgoal-complete-button{display:none}
.ax3-title-count{color:var(--vt-amber);font-family:var(--font-mono);font-size:.72em;letter-spacing:.04em}
.competition-rules-warning{position:relative;display:inline-flex}
.ax3-chip--rank{cursor:default;color:var(--vt-green);border-color:rgba(74,222,128,.35);background:transparent}
.ax3-chip--rank:hover,.ax3-chip--rank:focus{border-color:var(--vt-green);box-shadow:0 0 10px rgba(74,222,128,.15)}
.ax3-rank-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:240px;padding:6px 8px;border-radius:6px;background:var(--vt-panel);border:1px solid var(--vt-line);color:var(--vt-muted);font-size:.72rem;line-height:1.45;pointer-events:none;opacity:0;transition:opacity .15s;z-index:20;text-align:center}
.competition-rules-warning:hover .ax3-rank-tip,.ax3-chip--rank:focus ~ .ax3-rank-tip,.competition-rules-warning[data-state="open"] .ax3-rank-tip{opacity:1}

/* ============================================================
   DIALOG SKIN — ax3 modal language, scoped to the active page
   (new.html / admin dialogs keep their workflow.css styling)
   ============================================================ */
@keyframes ax3-modal-in{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to{ opacity:1; transform:none; }
}

.ui-active-challenge-page .ui-challenge-dialog::backdrop{
  background:rgba(8,10,18,.7); backdrop-filter:blur(6px);
}
.ui-active-challenge-page .ui-challenge-dialog__surface{
  padding:22px 22px 18px;
  border:1px solid var(--vt-line); border-radius:calc(var(--vt-r-lg) + 4px);
  background:
    linear-gradient(150deg, rgba(59,110,246,.08), rgba(14,17,31,.96) 45%, rgba(255,210,51,.04)),
    var(--vt-panel);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);
  animation:ax3-modal-in .35s cubic-bezier(.34,1.56,.64,1);
}
.ui-active-challenge-page .ui-challenge-dialog__title{
  margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--vt-line-soft);
  font-family:var(--vt-disp); font-size:1.15rem; font-weight:700;
  letter-spacing:.01em; color:var(--vt-text);
}

/* field labels → terminal mono */
.ui-active-challenge-page .ui-challenge-dialog .ui-label,
.ui-active-challenge-page .ui-challenge-dialog .ui-active-challenge-goal-modal__label{
  margin-bottom:6px;
  font-family:var(--vt-mono); font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--vt-text-3);
}

/* inputs / selects → ax3-input look */
.ui-active-challenge-page .ui-challenge-dialog .ui-input,
.ui-active-challenge-page .ui-challenge-dialog .ui-active-challenge-goal-modal__input,
.ui-active-challenge-page .ui-challenge-dialog .ui-active-challenge-goal-modal__native-select,
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__input{
  min-height:44px; border-radius:var(--vt-r-md);
  border:1px solid var(--vt-line); background:rgba(12,15,26,.8); color:var(--vt-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ui-active-challenge-page .ui-challenge-dialog .ui-input:focus,
.ui-active-challenge-page .ui-challenge-dialog .ui-active-challenge-goal-modal__input:focus,
.ui-active-challenge-page .ui-challenge-dialog .ui-active-challenge-goal-modal__native-select:focus,
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__input:focus{
  outline:none; border-color:rgba(255,210,51,.5); box-shadow:0 0 0 3px var(--vt-yellow-glow);
}
.ui-active-challenge-page .ui-challenge-dialog .ui-input::placeholder,
.ui-active-challenge-page .ui-challenge-dialog .ui-active-challenge-goal-modal__input::placeholder{
  color:var(--vt-text-3);
}

/* custom goal select → dark panel + yellow accents */
.ui-active-challenge-page .ui-active-challenge-goal-select__button{
  border-color:var(--vt-line); border-radius:10px;
  background:rgba(12,15,26,.8); color:var(--vt-text);
}
.ui-active-challenge-page .ui-active-challenge-goal-select__button[aria-expanded="true"]{
  border-color:rgba(255,210,51,.45); background:rgba(255,210,51,.05); color:var(--vt-yellow);
}
.ui-active-challenge-page .ui-active-challenge-goal-select__caret{ color:var(--vt-text-3); }
.ui-active-challenge-page .ui-active-challenge-goal-select__list{
  border-color:var(--vt-line); background:#0c0f1a;
}
.ui-active-challenge-page .ui-active-challenge-goal-select__option:hover{
  background:rgba(147,164,255,.07); color:var(--vt-text);
}
.ui-active-challenge-page .ui-active-challenge-goal-select__option[aria-selected="true"]{
  background:rgba(255,210,51,.08); color:var(--vt-yellow);
}
.ui-active-challenge-page .autocomplete-results{
  border-color:var(--vt-line); background:#0c0f1a;
}

/* footer buttons */
.ui-active-challenge-page .ui-challenge-dialog__footer{ gap:9px; }
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button{
  min-height:42px;
}
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button--secondary{
  border-color:var(--vt-line); background:transparent; color:var(--vt-text-2);
}
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button--secondary:hover{
  border-color:rgba(147,164,255,.3); color:var(--vt-text);
}
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button--primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--vt-yellow),var(--vt-yellow-2));
  color:#101426; font-weight:700;
}
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button--primary:hover{ filter:brightness(1.05); }
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button--quiet{
  background:transparent; border-color:transparent; color:var(--vt-text-3);
}
.ui-active-challenge-page .ui-challenge-dialog__footer .ui-button--quiet:hover{ color:var(--vt-text); }

/* acquisition methods → ax-methods tiles */
.ui-active-challenge-page .ui-challenge-acquisition-methods{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px;
}
.ui-active-challenge-page .ui-challenge-acquisition-method{
  flex-direction:column; gap:6px; min-height:70px; justify-content:center;
  padding:10px 4px; white-space:normal;
  border-radius:var(--vt-r-md);
  border:1px solid var(--vt-line); background:transparent; color:var(--vt-text-2);
  font-size:.74rem; font-weight:650;
}
.ui-active-challenge-page .ui-challenge-acquisition-method:hover{
  border-color:rgba(109,155,255,.4); background:rgba(59,110,246,.05); color:var(--vt-text);
}
.ui-active-challenge-page .ui-challenge-acquisition-method[aria-pressed="true"]{
  border-color:var(--vt-yellow); background:rgba(255,210,51,.06); color:var(--vt-yellow);
}
@media (max-width:640px){
  .ui-active-challenge-page .ui-challenge-acquisition-methods{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .ui-active-challenge-page .ui-challenge-dialog__surface{ animation:none; }
}

/* stepper inside dialogs → ax3 terminal look */
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper{
  min-width:8.5rem;
  border:1px solid var(--vt-line); border-radius:10px;
  background:rgba(12,15,26,.8);
}
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__button{
  width:42px; color:var(--vt-text-3);
  transition:color .2s ease, background .2s ease;
}
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__button:first-child{ border-right:1px solid var(--vt-line-soft); }
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__button:last-child{ border-left:1px solid var(--vt-line-soft); }
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__button:hover{
  background:rgba(255,210,51,.06); color:var(--vt-yellow);
}
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__button:focus-visible{
  outline:2px solid rgba(255,210,51,.6); outline-offset:-2px;
}
.ui-active-challenge-page .ui-challenge-dialog .ui-challenge-stepper__input{
  font-family:var(--vt-mono); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--vt-text);
}

/* command deck on mobile: state row + full-width stacked buttons */
@media (max-width:640px){
  .ax3-deck{
    flex-direction:column; align-items:stretch; gap:10px;
    padding:12px 14px;
  }
  .ax3-deck__divider{ display:none; }
  .ax3-deck__state{ justify-content:center; padding-bottom:10px; border-bottom:1px dashed var(--vt-line-soft); }
  .ax3-deck__spacer{ display:none; }
  .ax3-deck form{ width:100%; }
  .ax3-deck .ui-button{
    width:100%; min-height:44px;
  }
}