/* Stations/css/preview.css
   Local styles for the NaviCanvas preview shell + the composer component.
   Base look (db-*, ed-*) comes from the local css/events.css (self-contained copy). */

/* ── board vocabulary overrides (guide: warm-gold tagline, Records label) ── */
.db-card-quote { color: #B88A3A !important; border-left-color: rgba(184,138,58,0.25) !important; }
html.theme-light .db-card-quote { color: #B88A3A !important; }

/* ── claim progress bar (replaces plain numbers) ─────────────────────────── */
.db-card-progress { margin: 10px 0 4px; }
.db-card-progress-bar {
  height: 4px; border-radius: 2px;
  background: rgba(31,55,107,0.12);
  overflow: hidden; margin-bottom: 7px;
}
.db-card-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #213f7a, #3a82c8);
  transition: width 0.6s ease;
  min-width: 2px;
}
html.theme-light .db-card-progress-bar { background: rgba(31,55,107,0.10); }
.db-card-progress-labels { display: flex; justify-content: space-between; }

/* ── palette (mirrors the JSX constants) ─────────────────────────────────── */
:root {
  --nc-cream:#ece3d0; --nc-paper:#e7ddc9; --nc-parch:#f6f0e2; --nc-panel:#fbf7ec;
  --nc-line:#ddd1ba; --nc-line-soft:#e8dec9;
  --nc-forest:#15294f; --nc-forest-deep:#0c1d3a; --nc-forest2:#244379;
  --nc-ink:#262019; --nc-ink-soft:#7a7060;
  --nc-mint:#3a82c8; --nc-mint-bright:#57b6ee; --nc-amber:#c98a2e; --nc-haze:#c7d2e6; --nc-terra:#c2703f;
}

/* ═══════════ DEEP SPACE — glitter-warp starfield behind translucent glass panels ═══════════ */
#warp-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
.ncp-body{
  background:
    radial-gradient(60% 54% at 20% 18%, rgba(42,92,184,0.28), transparent 70%),
    radial-gradient(54% 50% at 84% 56%, rgba(116,64,184,0.20), transparent 72%),
    radial-gradient(70% 60% at 56% 98%, rgba(20,102,164,0.20), transparent 72%),
    #090c11 !important;
  background-attachment:fixed;
  /* main surfaces become faint glass — starfield barely shows, never disrupts reading/input */
  --nc-panel: rgba(251,247,236,0.93);
  --nc-parch: rgba(246,240,226,0.94);
}
.ncp-body #view{position:relative;z-index:1;}            /* content above the warp (z0) */
/* the per-view containers were a solid cream backdrop — clear them so the starfield shows
   behind the panels (each panel keeps its own light surface). */
.ncp-body .view,
.ncp-body .dashboard-view,
.ncp-body .buy-view,
.ncp-body .event-page-view,
.ncp-body .event-detail-view { background: transparent !important; }
.ncp-show { display: block; }

/* top menu bar — always the frosted translucent glass (the page behind is dark now) */
.ncp-body .events-header,
.ncp-body .events-header.is-scrolled {
  padding: 0 40px !important;
  background: rgba(14,26,52,0.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 6px 24px rgba(8,18,40,0.22) !important;
}
/* text that used to sit on the cream body → light, so it reads over deep space */
.ncp-body .home-masthead-title { color: #dce8f7 !important; text-shadow: 0 0 14px rgba(24,176,245,0.25); }
.ncp-body .home-masthead-count { color: rgba(200,214,235,0.62) !important; }
/* the "Open a station" empty slot was navy-on-cream — lighten for deep space */
.ncp-body .home-pick-new-cover { background: linear-gradient(160deg, rgba(120,160,220,0.09), rgba(120,160,220,0.02)) !important;
  border-color: rgba(150,185,230,0.32) !important; }
.ncp-body .home-pick-new-bracket { border-color: rgba(150,185,230,0.42) !important; }
.ncp-body .home-pick-new-plus,
.ncp-body .home-pick-new-label { color: rgba(196,214,238,0.62) !important; }
/* the rail's right-edge fade was cream-coloured (ugly white strip on deep space) — remove it */
.ncp-body .home-rail-scroll::after { display: none !important; }

/* footer → homepage tech-line look (light on deep space, reused colours, no socials) */
.ncp-body .evt-footer { border-top: 1px solid rgba(24,176,245,0.12) !important; }
.ncp-body .evt-footer p,
.ncp-body .evt-footer p:first-child { color: rgba(240,245,243,0.46) !important;
  text-transform: uppercase; letter-spacing: 0.06em; }

/* ════════ FROSTED GLASS everywhere (esp. the blue surfaces) ════════ */
/* Panels: TOP strip (where the navy header sits) is left TRANSPARENT so the header frosts the
   deep space behind it — exactly like the Menu Bar. Below that, a clean OPAQUE cream so the
   content text stays crisp (fixes the grey-out). Heights ≈ each header's height. */
.ncp-body .home-deck    { background: linear-gradient(180deg, transparent 0 41px, rgba(249,246,238,0.96) 41px) !important;
  box-shadow: 0 6px 0 rgba(18,36,72,0.12) !important; }
.ncp-body .home-station { background: linear-gradient(180deg, transparent 0 37px, rgba(249,246,238,0.96) 37px) !important;
  box-shadow: 0 6px 0 rgba(18,36,72,0.12) !important; }
.ncp-body .ncp-panel    { background: linear-gradient(180deg, transparent 0 62px, rgba(249,246,238,0.96) 62px) !important;
  box-shadow: 0 24px 60px rgba(8,18,40,0.45) !important; }
/* navy header bars = the Menu Bar's frosted glass (translucent navy + heavy blur → deep space shows through) */
.ncp-body .home-deck-head,
.ncp-body .home-station-head,
.ncp-body .ncp-panel-hdr,
.ncp-body .new-event-modal .new-event-header {
  background: rgba(14,26,52,0.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(130,168,224,0.18);
}
/* every modal floats on FROSTED deep space — semi-transparent backdrop + heavy blur */
.ncp-body .manage-overlay,
.ncp-body .new-event-modal,
.ncp-body .br-overlay,
.ncp-body #claim-overlay {
  background: rgba(6,10,20,0.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important; backdrop-filter: blur(18px) saturate(1.1) !important;
}
.ncp-body .events-header-h1-text,
.ncp-body #events-header-event-name { color: #eef2fb !important; }

/* logo matches homepage nav (26px, no frame, flush left) */
.ncp-body .events-header-logo { height: 26px !important; }
.ncp-body .events-header-logo-btn { padding: 0 !important; }

/* logout button — exact replica of homepage .nav-enter "Log in →"
   (solid-blue clip-path frame wrapping a dark .btn-fill interior + glow) */
.ncp-body .header-logout-btn {
  position: relative;
  display: inline-block !important;
  background: #18B0F5 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  filter: drop-shadow(0 0 9px rgba(24,176,245,0.4));
  transition: filter .25s, transform .15s !important;
}
.ncp-body .header-logout-btn .btn-fill {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  background: #0d1c30; color: #cfe6ff;
  font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .04em;
  padding: 9px 15px; transition: background .25s, color .25s;
}
.ncp-body .header-logout-btn:hover {
  filter: drop-shadow(0 0 16px rgba(24,176,245,0.75));
  transform: translateY(-1px);
  background: #18B0F5 !important;
}
.ncp-body .header-logout-btn:hover .btn-fill { background: #102740; color: #eaf6ff; }
.ncp-body .header-logout-icon { font-size: 11px; line-height: 1; }
.ncp-body .header-logout-label { text-transform: none; letter-spacing: .04em; }

/* helper sub-line under a section label (e.g. ATTACH A DONATION) */
.ncp-panel-sec-sub {
  font-family: var(--font-sans); font-style: italic; font-size: 11px;
  color: var(--nc-ink-soft); line-height: 1.5; margin: -10px 0 16px;
}

/* ── detail page ─────────────────────────────────────────────────────────── */
.ncp-hero-btn {
  margin-left: auto; padding: 9px 16px; border: none; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,0.94); color: #15294f;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform 0.15s;
}
.ncp-hero-btn:hover { transform: translateY(-1px); }
.ncp-detail-actions { display: flex; justify-content: flex-end; margin: 18px 0 60px; }

/* ═══ NEW Detail page — vertical-card hero (cover ⇄ keepsake flip) ═══════════
   Card is the centrepiece (fixed portrait frame). Cover & keepsake are two
   fill states of the SAME frame; cockpit beside it never moves.             */
.edx-wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding: 38px 24px 70px; }
.edx-hero { display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }

/* ── card column ── */
.edx-cardcol { flex: 0 0 360px; display: flex; flex-direction: column; align-items: center; }
.edx-card-stage { width: 360px; height: 510px; perspective: 1600px; }
.edx-flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.4,.1,.2,1);
}
.edx-flip.edx-flipped { transform: rotateY(180deg); }
.edx-face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 20px 50px rgba(18,36,72,0.26);
}
/* front = cover */
.edx-front { background: var(--nc-forest-deep); }
.edx-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.edx-cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.42) 100%); }
.edx-cover-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.edx-root-tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  background: var(--root-mid, #213f7a); color: #fff; padding: 5px 11px; border-radius: 14px;
}
.edx-cover-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.82); }
.edx-cover-foot { position: absolute; bottom: 14px; left: 16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,0.7); }
/* back = keepsake */
.edx-back { transform: rotateY(180deg); background: var(--nc-forest-deep); }
.edx-keepsake-frame { width: 100%; height: 100%; border: none; display: block; }
.edx-keepsake-empty {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 32px 26px;
  background: linear-gradient(160deg, #1d3052, #0d1830);
  color: rgba(196,230,210,0.7); font-family: var(--font-mono);
}
.edx-ke-spark { font-size: 26px; color: #05FCC5; margin-bottom: 14px; }
.edx-ke-title { font-family: var(--font-pixel); font-size: 11px; color: #e6fff2; letter-spacing: 1px; margin-bottom: 10px; }
.edx-ke-sub { font-size: 11px; line-height: 1.7; opacity: 0.7; margin-bottom: 22px; }
.edx-ke-btn {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.06em;
  background: #05FCC5; color: #0a1a12; border: none; padding: 11px 16px; border-radius: 8px; cursor: pointer;
}
.edx-ke-btn:hover { filter: brightness(1.08); }

.edx-card-controls { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.edx-flip-btn {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.05em;
  background: #213f7a; color: #F5F0E5; border: none; padding: 11px 18px; border-radius: 8px; cursor: pointer;
  box-shadow: 0 3px 0 #0b1830; transition: transform 0.12s, box-shadow 0.12s;
}
.edx-flip-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 #0b1830; }
.edx-flip-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #0b1830; }
.edx-recompose {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px;
  background: none; border: none; color: rgba(31,55,107,0.55); cursor: pointer; text-decoration: underline;
}
.edx-recompose:hover { color: #213f7a; }

/* ── cockpit ── */
.edx-cockpit { flex: 1 1 420px; min-width: 340px; padding-top: 4px; }
.edx-evtnum { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--nc-ink-soft); margin-bottom: 12px; }
.edx-title { font-family: var(--font-pixel); font-size: 21px; line-height: 1.55; color: var(--nc-ink); margin: 0 0 14px; font-weight: 400; letter-spacing: 0.01em; }
/* eyebrow: date · type — lightest tier, wide-tracked uppercase */
.edx-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(95,86,70,0.95); margin-bottom: 18px; }
.edx-quote { font-style: italic; font-size: 15px; line-height: 1.7; color: #B88A3A; border-left: 2px solid rgba(184,138,58,0.32); padding-left: 14px; margin: 2px 0 30px; }

.edx-stats { display: flex; gap: 36px; padding: 20px 0; border-top: 1px solid var(--nc-line); border-bottom: 1px solid var(--nc-line); margin-bottom: 22px; }
/* stat value: strongest tier — ink pixel numerals (contrast vs the green accents) */
.edx-stat-val { font-family: var(--font-pixel); font-size: 16px; color: var(--nc-ink); margin-bottom: 8px; }
/* stat label: faint tracked uppercase — recedes behind the value */
.edx-stat-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.13em; color: rgba(95,86,70,0.9); text-transform: uppercase; line-height: 1.5; }

.edx-signal {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: rgba(31,55,107,0.12); border: 1px solid rgba(31,55,107,0.22);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 18px;
}
.edx-signal-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--nc-ink); line-height: 1.6; min-width: 0; }
.edx-signal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #05FCC5; margin-right: 7px; vertical-align: middle; box-shadow: 0 0 5px rgba(5,252,197,0.5); }
.edx-signal-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--nc-ink-soft); margin-top: 7px; }
.edx-signal-r { flex-shrink: 0; text-align: right; }
.edx-signal-lbl { font-family: var(--font-mono); font-size: 8px; color: rgba(5,252,197,0.7); letter-spacing: 0.18em; white-space: nowrap; }
.edx-signal-code { font-family: var(--font-pixel); font-size: 13px; color: #05FCC5; letter-spacing: 0.06em; margin-top: 6px; white-space: nowrap; }

.edx-broadcast {
  width: 100%; padding: 16px; border: none; border-radius: 10px; cursor: pointer;
  background: #213f7a; color: #F5F0E5; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px;
  box-shadow: 0 5px 0 #0b1830; transition: transform 0.12s, box-shadow 0.12s; margin-bottom: 16px;
}
.edx-broadcast:hover { transform: translateY(2px); box-shadow: 0 3px 0 #0b1830; }
.edx-broadcast:active { transform: translateY(5px); box-shadow: 0 0 0 #0b1830; }

.edx-progress-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 7px; }
.edx-progress-cap { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; }   /* total number + "Total" label, stacked + connected to the NaviStars dot by the rail */
.edx-progress-total { font-family: var(--font-pixel); font-size: 17px; font-weight: 400; letter-spacing: 0; color: #e0a040; }   /* TOTAL — gold + large = the focal stat */
.edx-total-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-ink-soft); }
.edx-progress-pct { font-family: var(--font-pixel); font-size: 13px; color: var(--nc-ink-soft); }   /* de-emphasised vs the gold total */
.edx-progress-bar { height: 9px; border-radius: 5px; background: rgba(31,55,107,0.14); overflow: hidden; margin-bottom: 9px; box-shadow: inset 0 1px 2px rgba(18,36,72,0.18); }
.edx-progress-fill { height: 100%; background: linear-gradient(90deg, #213f7a, #3a82c8 70%, #57b6ee); border-radius: 5px; box-shadow: 0 0 10px rgba(79,150,230,0.4); transition: width 0.5s ease; }
/* 0% — a faint gold seed breathes at the start of the track so the bar reads
   "live, waiting to cast" instead of dead/broken */
.edx-progress-zero .edx-progress-fill {
  width: 2.5% !important; min-width: 14px;
  background: linear-gradient(90deg, rgba(245,197,66,0.6), rgba(245,197,66,0.12));
  box-shadow: 0 0 8px rgba(245,197,66,0.3);
  animation: edxSeedPulse 2.4s ease-in-out infinite;
}
@keyframes edxSeedPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
.edx-progress-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: rgba(122,112,96,0.72); }
.edx-progress-labels strong { font-family: var(--font-pixel); font-size: 11px; color: var(--nc-ink); margin-right: 3px; font-weight: 400; }
/* only the Total is gold now (the focal stat). cast/still-to-cast stay neutral/dim — different colour AND size from the total */
.edx-pl-cast strong { color: var(--nc-ink); }
.edx-pl-wait, .edx-pl-wait strong { color: var(--nc-ink-soft); }

/* draft state (station not broadcast yet — pool_size 0) */
.edx-signal-draft { background: rgba(31,55,107,0.06); border: 1px dashed rgba(31,55,107,0.22); }
.edx-signal-draft .edx-signal-l { color: var(--nc-ink-soft); }
.edx-signal-dot-draft { background: var(--nc-ink-soft) !important; box-shadow: none !important; animation: none !important; }
.edx-signal-code-draft { color: var(--nc-ink-soft) !important; letter-spacing: 0.3em; }
/* DRAFT — prominent buy CTA (replaces the locked Broadcast as the real action) */
/* edx-buy-cta removed — buy button now standalone */
.edx-buy {
  width: 100%; padding: 16px; border: 2px solid #6e4a13; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg,#c98a2e,#a8701f); color: #fff;
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px;
  box-shadow: 0 5px 0 #6e4a13; transition: transform 0.12s, box-shadow 0.12s;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.edx-buy:hover { transform: translateY(2px); box-shadow: 0 3px 0 #6e4a13; }
.edx-buy:active { transform: translateY(5px); box-shadow: 0 0 0 #6e4a13; }
.edx-buy { margin-bottom: 8px; }
.edx-buy-hint {
  font-family: var(--font-mono); font-size: 9px; line-height: 1.55;
  color: var(--nc-ink-soft); margin-top: 11px; text-align: center;
  letter-spacing: 0;   /* tight enough to sit on one line on desktop; still wraps gracefully if narrower */
}
.edx-buy-hint .ns-star { color: #e0a040; }

/* LIVE — amber + button inside the SIGNAL block (right side) */
.edx-signal-r-add {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.edx-plus-btn {
  width: 48px; height: 48px;
  border: 2px solid #6e4a13; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg,#c98a2e,#a8701f); color: #fff;
  font-family: var(--font-pixel); font-size: 20px; line-height: 1;
  box-shadow: 0 4px 0 #6e4a13; transition: transform 0.1s, box-shadow 0.1s;
  clip-path: polygon(0 4px,4px 4px,4px 0,44px 0,44px 4px,48px 4px,48px 44px,44px 44px,44px 48px,4px 48px,4px 44px,0 44px);
  display: flex; align-items: center; justify-content: center;
}
.edx-plus-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #6e4a13; }

/* Broadcast overlay — buy section */
.mg-pool-line { color: var(--nc-ink-soft); }
.mg-pool-line strong { color: var(--nc-forest); }
.mg-pool-empty { color: var(--nc-terra); }
.mg-buy-cost { font-family: var(--font-mono); font-size: 13px; color: inherit; margin: 10px 0 4px; }
.mg-buy-cost strong { font-family: var(--font-pixel); font-size: 12px; }
.mg-buy-note { font-family: var(--font-mono); font-size: 10px; line-height: 1.5; opacity: 0.7; margin-bottom: 12px; }

.edx-onchain { display: flex; gap: 16px; margin-top: 20px; }
.edx-onchain .ed-onchain-bar-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; color: rgba(31,55,107,0.6);
}
.edx-onchain .ed-onchain-bar-link:hover { color: #213f7a; }

.edx-activity { margin-top: 54px; }

/* ═══ MERGED HOMEPAGE — Tuning Deck | Station ════════════════════════════════ */
.home-view { padding-top: 40px; }

/* ── page masthead — pixel title + dynamic down-arrow ── */
.home-masthead {
  max-width: 1560px; margin: 0 auto; padding: 0 24px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.home-masthead-l { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; }
/* blinking pixel "on-air" indicator */
.home-masthead-dot {
  width: 9px; height: 9px; flex: 0 0 9px; background: var(--nc-mint);
  box-shadow: 0 0 10px rgba(58,110,200,0.7), 0 0 0 1px rgba(31,55,107,0.25);
  animation: mastheadBlink 1.6s steps(1) infinite;
}
@keyframes mastheadBlink { 0%,68%{opacity:1} 70%,100%{opacity:0.32} }
.home-masthead-title {
  font-family: var(--font-pixel); font-size: 15px; line-height: 1.4;
  letter-spacing: 0.1em; color: var(--nc-forest); margin: 0; font-weight: 400;
  white-space: nowrap;
}
.home-masthead-rule { display: none; }
.home-masthead-count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--nc-ink-soft); text-transform: uppercase; white-space: nowrap; flex: 0 0 auto;
}
.home-masthead-arrow {
  flex: 0 0 auto; color: var(--nc-terra);
  animation: hmHop 0.9s steps(1) infinite;
}
@keyframes hmHop { 0% { transform: translateY(0); } 50% { transform: translateY(4px); } 100% { transform: translateY(0); } }

/* ── rail head — "Pick a Station" + Browse button sitting right beside it ── */
.home-rail-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.home-rail-head .home-step { margin-bottom: 0; }
.home-manage-btn {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.05em;
  text-decoration: none; color: #213f7a; white-space: nowrap;
  background: rgba(255,255,255,0.8); border: 1.5px solid rgba(31,55,107,0.22);
  padding: 9px 16px; border-radius: 9px;
  box-shadow: 0 2px 5px rgba(31,55,107,0.1); transition: all 0.15s; cursor: pointer;
}
.home-manage-btn:hover { transform: translateY(-1px); border-color: var(--nc-forest); box-shadow: 0 4px 10px rgba(31,55,107,0.16); }
/* smaller, sits next to the section title */
.home-browse-btn { font-size: 7px; padding: 6px 11px; }
.home-masthead-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* quick-add "+" — pops in (same masthead control look) when "Open a Station" is scrolled out of view */
.home-quickadd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; width: 0; flex: 0 0 auto; padding: 0; overflow: hidden;
  font-family: var(--font-pixel); font-size: 14px; line-height: 1; color: #213f7a;
  background: rgba(255,255,255,0.8); border: 1.5px solid rgba(31,55,107,0.22); border-radius: 9px;
  box-shadow: 0 2px 5px rgba(31,55,107,0.1); cursor: pointer;
  opacity: 0; transform: scale(0.4) rotate(-25deg); pointer-events: none;
  transition: opacity 0.2s ease, width 0.28s ease,
    transform 0.42s cubic-bezier(0.34,1.7,0.5,1) /* bouncy pop */, border-color 0.15s;
}
.home-quickadd.show { width: 30px; opacity: 1; transform: scale(1) rotate(0deg); pointer-events: auto; }
.home-quickadd:hover { border-color: #e0a040; color: #c79a3a; transform: scale(1.1) rotate(0deg); }

/* ══ FIRST-VISIT COACH-MARKS ══════════════════════════════════════════════ */
.ncp-coach { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.ncp-coach-catch { position: fixed; inset: 0; pointer-events: auto; }
/* spotlight: transparent box + huge outer shadow dims everything else */
.ncp-coach-ring {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8,20,14,0.70), 0 0 0 3px var(--nc-mint), 0 0 34px rgba(58,110,200,0.65);
  transition: left 0.34s cubic-bezier(.4,.1,.2,1), top 0.34s cubic-bezier(.4,.1,.2,1), width 0.34s cubic-bezier(.4,.1,.2,1), height 0.34s cubic-bezier(.4,.1,.2,1);
  will-change: left, top, width, height;
}
/* while the page scrolls a target into view, ring/tip track it frame-by-frame — kill transition */
.ncp-coach-snap .ncp-coach-ring, .ncp-coach-snap .ncp-coach-tip { transition: none !important; }
.ncp-coach-tip {
  position: fixed; width: 380px; pointer-events: auto;
  background: var(--nc-panel); border: 2px solid var(--nc-forest);
  box-shadow: inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px rgba(18,36,72,0.16), 0 18px 50px rgba(0,0,0,0.46);
  clip-path: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  padding: 22px 24px;
  transition: left 0.32s cubic-bezier(.4,.1,.2,1), top 0.32s cubic-bezier(.4,.1,.2,1);
  animation: ncReveal 0.3s ease both;
}
.ncp-coach-step { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.1em; color: #f5c542; text-shadow: 0 0 8px rgba(245,197,66,0.3); margin-bottom: 13px; }
.ncp-coach-text { font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--nc-ink); min-height: 66px; }
.ncp-coach-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.ncp-coach-skip { background: none; border: none; color: var(--nc-ink-soft); font-family: var(--font-mono); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 4px 0; }
.ncp-coach-skip:hover { color: var(--nc-forest); }
.ncp-coach-next {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.05em;
  background: var(--nc-forest); color: var(--nc-panel); border: none;
  padding: 10px 15px; border-radius: 7px; cursor: pointer; box-shadow: 0 3px 0 #0b1830; transition: transform 0.12s, box-shadow 0.12s;
}
.ncp-coach-next:hover { transform: translateY(1px); box-shadow: 0 2px 0 #0b1830; }

/* ── DEMO sample markers ── */
.nc-demo-tag {
  position: absolute; top: 9px; left: 9px; z-index: 3;
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.08em;
  background: rgba(201,138,46,0.92); color: #1a1206;
  padding: 4px 7px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.nc-demo-tag-sm { position: static; display: inline-block; padding: 2px 5px; font-size: 6px; vertical-align: middle; margin-left: 5px; box-shadow: none; }
/* delete × on sample cards — always visible (rail + browse grid) */
.home-pick-del, .mg-card-del {
  position: absolute; top: 7px; right: 7px; z-index: 5;
  width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,35,24,0.82); color: #fff; font-size: 15px; line-height: 1;
  border: 1px solid rgba(255,255,255,0.3); cursor: pointer;
  opacity: 0.92; transition: background 0.15s, transform 0.12s;
}
.home-pick-del:hover, .mg-card-del:hover { background: #a23b2f; transform: scale(1.12); opacity: 1; }
/* demo "hide" control on the rail — dismiss a read-only example (neutral, not delete-red) */
.home-pick-hide {
  position: absolute; top: 7px; right: 7px; z-index: 5;
  width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,19,38,0.82); color: #cdd8ef; font-size: 13px; line-height: 1;
  border: 1px solid rgba(255,255,255,0.22); cursor: pointer;
  opacity: 0; transition: background 0.15s, opacity 0.15s;
}
.home-pick:hover .home-pick-hide { opacity: 1; }
.home-pick-hide:hover { background: rgba(120,150,210,0.34); color: #fff; }
@media (pointer: coarse) { .home-pick-hide { opacity: 1; } }

/* locked compose / broadcast on samples — keep brand colour, just signal it's locked */
.home-compose-locked, .edx-broadcast-locked {
  cursor: not-allowed !important; opacity: 0.82;
  filter: saturate(0.85);
}
.home-compose-locked:hover, .edx-broadcast-locked:hover { transform: none !important; }

/* locked demo thumbnails — subtle lock affordance, no delete button */
.nc-thumb-locked { cursor: default; }
.nc-thumb-locked img { opacity: 0.92; }

/* empty state — all stations cleared */
.home-st-empty-all {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 360px; text-align: center; padding: 40px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: var(--nc-ink-soft);
}
.home-st-empty-all-spark { font-size: 26px; color: var(--nc-mint); }

/* host line under the station title */
.home-st-info .edx-meta { font-size: 14.5px; margin-bottom: 11px; margin-top: 4px; }
/* host: mid tier — slightly darker & larger than the eyebrow so the name reads as a signature */
.edx-host { font-family: var(--font-mono); font-size: 15.5px; letter-spacing: 0.02em; color: var(--nc-ink-soft); opacity: 1; margin-bottom: 26px; }
/* ── NEW LINC card in the rail ── */
.home-pick-new { cursor: pointer; text-decoration: none; }
.home-pick-new-cover {
  background: linear-gradient(160deg, rgba(31,55,107,0.06) 0%, rgba(31,55,107,0.02) 100%) !important;
  border: 1.5px dashed rgba(31,55,107,0.25) !important;
  border-radius: 12px; transition: border-color 0.18s, box-shadow 0.2s, background 0.2s;
  overflow: hidden;
}
.home-pick-new:hover .home-pick-new-cover {
  border-color: var(--nc-mint) !important;
  background: linear-gradient(160deg, rgba(58,110,200,0.10) 0%, rgba(31,55,107,0.05) 100%) !important;
  box-shadow: 0 6px 18px rgba(58,110,200,0.12);
}
/* pixel corner brackets */
.home-pick-new-bracket {
  position: absolute; width: 10px; height: 10px; z-index: 1;
}
.home-pick-new-tl { top: 8px; left: 8px; border-top: 2px solid rgba(31,55,107,0.3); border-left: 2px solid rgba(31,55,107,0.3); }
.home-pick-new-tr { top: 8px; right: 8px; border-top: 2px solid rgba(31,55,107,0.3); border-right: 2px solid rgba(31,55,107,0.3); }
.home-pick-new-bl { bottom: 8px; left: 8px; border-bottom: 2px solid rgba(31,55,107,0.3); border-left: 2px solid rgba(31,55,107,0.3); }
.home-pick-new-br { bottom: 8px; right: 8px; border-bottom: 2px solid rgba(31,55,107,0.3); border-right: 2px solid rgba(31,55,107,0.3); }
.home-pick-new:hover .home-pick-new-bracket { border-color: var(--nc-mint); }
/* subtle scanlines */
.home-pick-new-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(31,55,107,0.025) 3px 4px);
}
.home-pick-new-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.home-pick-new-plus {
  font-family: var(--font-pixel); font-size: 22px; color: rgba(31,55,107,0.4); line-height: 1;
  transition: color 0.15s;
}
.home-pick-new-label {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.1em; color: rgba(31,55,107,0.4);
  transition: color 0.15s;
}
.home-pick-new:hover .home-pick-new-plus,
.home-pick-new:hover .home-pick-new-label { color: var(--nc-mint); }

/* ══ MANAGE / BROWSE-ALL page ══ */
.mg-view { padding-top: 60px; }
.mg-hero-pb { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.mg-hero-pb canvas { opacity: 0.10; mix-blend-mode: screen; }
.mg-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }

/* filter bar */
.mg-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.mg-moments { border-bottom: none !important; padding-bottom: 0 !important; }
.mg-sort { display: flex; gap: 6px; flex: 0 0 auto; }
.mg-sort-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(31,55,107,0.2); background: rgba(255,255,255,0.7); color: rgba(31,55,107,0.6);
  transition: all 0.15s;
}
.mg-sort-btn:hover { color: #213f7a; }
.mg-sort-on { background: linear-gradient(180deg,#f5c542,#e0a040); color: #2a1c06; border-color: #6e4a13; }
/* S4(0702): Browse All status filter — same pill language as sort, sits at the right */
.mg-status { display: flex; gap: 6px; flex: 0 0 auto; }
.mg-status-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(31,55,107,0.2); background: rgba(255,255,255,0.7); color: rgba(31,55,107,0.6);
  transition: all 0.15s;
}
.mg-status-btn:hover { color: #213f7a; }
.mg-status-on { background: linear-gradient(180deg,#f5c542,#e0a040); color: #2a1c06; border-color: #6e4a13; }

/* card grid — browse only (no counts / no send) */
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.mg-card {
  position: relative; height: 260px; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--nc-line); background: var(--nc-forest-deep);
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}
.mg-card-cover { position: absolute; inset: 0; background-size: cover; background-position: center; transition: filter 0.15s ease-out; }
.mg-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 32%, transparent 50%, rgba(0,0,0,0.62) 100%); }
.mg-card-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.mg-card-num { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.8); }
.mg-card-foot { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.mg-card-name { font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.mg-card-meta { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.72); margin-top: 6px; letter-spacing: 0.04em; }
.mg-card:hover { transform: translateY(-4px); border-color: var(--nc-mint); box-shadow: 0 14px 34px rgba(18,36,72,0.28); }
.mg-card:hover .mg-card-cover { filter: brightness(1.07); }
.ncp-dark .mg-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.5); }
/* station lifecycle badge (#10) + quick delete/visibility on the card (B) */
.mg-card-status { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; color: #d8e0f0; background: rgba(13,22,44,0.66); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.18); }
.mg-st-minted { color: #6cc6ff; border-color: rgba(24,176,245,0.5); }
.mg-st-cast { color: #f5c542; border-color: rgba(245,197,66,0.5); }
.mg-st-demo { color: #aab6d2; }
.mg-card-acts { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 6; opacity: 0; transition: opacity 0.18s; }
.mg-card:hover .mg-card-acts { opacity: 1; }
/* touch has no hover — keep card actions (delete / hide / show) visible, like .home-pick-hide */
@media (pointer: coarse) { .mg-card-acts { opacity: 1; } }
.mg-card-act { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.22); background: rgba(13,19,38,0.85); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: transform 0.12s, background 0.12s; }
.mg-card-act:hover { transform: scale(1.12); }
.mg-act-del:hover { background: #a23b2f; border-color: #a23b2f; }
.mg-act-hide:hover { background: rgba(120,150,210,0.32); border-color: rgba(120,150,210,0.6); }  /* demo: hide, not delete */
.mg-act-on { background: rgba(245,197,66,0.22); border-color: rgba(245,197,66,0.5); }
/* station management row in the detail panel (A) */
.edx-manage { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(120,150,210,0.16); }
.edx-manage-status { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; border: 1px solid rgba(120,150,210,0.28); color: #5a6b8a; }
.edx-manage-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edx-manage-btn { font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(120,150,210,0.3); background: transparent; color: #2a3a5a; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.edx-manage-btn:hover { border-color: var(--nc-mint); }
.ncp-dark .edx-manage-btn { color: #cdd8ef; }
.edx-manage-del { color: #c0473a; border-color: rgba(192,71,58,0.4); }
.edx-manage-del:hover { background: #a23b2f; color: #fff; border-color: #a23b2f; }
.edx-manage-note { font-family: var(--font-mono); font-size: 10px; color: #8a96b2; }
/* hover overlay — quick jump to NaviCanvas */
.mg-card-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,35,24,0.62); opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(1px);
}
.mg-card:hover .mg-card-hover { opacity: 1; }
.mg-card-open {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.05em;
  background: #05FCC5; color: #0a1a12; padding: 12px 18px; border-radius: 9px;
  box-shadow: 0 4px 14px rgba(5,252,197,0.3);
}

.home-split {
  display: flex; gap: 0; align-items: stretch;
  max-width: 1560px; margin: 24px auto 0; padding: 0 24px 70px;
}
.home-left { flex: 0 0 460px; display: flex; }
.home-right { flex: 1 1 0; min-width: 460px; display: flex; }
/* Connector replaced by simple spacer — no wire visuals */
.home-connector-spacer { flex: 0 0 24px; }

/* shared pixel panel (deck + station) */
.home-deck, .home-station {
  width: 100%;
  background: var(--nc-panel);
  border: 2px solid var(--nc-forest);
  box-shadow: inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px rgba(18,36,72,0.16), 0 6px 0 rgba(18,36,72,0.10);
  clip-path: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  position: relative;
}

/* deck terminal header */
.home-deck-head { background: var(--nc-forest); padding: 11px 16px; display: flex; align-items: center; gap: 9px; }
.home-deck-dot { width: 7px; height: 7px; background: var(--nc-mintBright,#57b6ee); box-shadow: 9px 0 0 var(--nc-mint,#3a82c8); }
.home-deck-dot { margin-right: 9px; }
.home-deck-title { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1.5px; color: var(--nc-panel); }
.home-deck-hint { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-style: italic; color: rgba(245,240,229,0.55); }
.home-deck { display: flex; flex-direction: column; }
.home-deck-body { padding: 22px 26px 26px; flex: 1; display: flex; flex-direction: column; }

/* steps */
.home-step { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--nc-ink); margin-bottom: 12px; }
.home-step-mt { margin-top: 26px; }
.home-step-n { font-family: var(--font-pixel); font-size: 9px; color: var(--nc-terra); margin-right: 8px; }
.nc-dim { opacity: 0.5; font-weight: 400; font-style: italic; }

/* ── 01 top rail — RAIL_WINDOW cards fill the width; arrows page the window.
   No scroll/drag → clicks are reliable and the wire never leaves the wrap. ── */
.home-rail-wrap { max-width: 1560px; margin: 0 auto; padding: 0 24px; }

/* ── viewport: scroll region (left) + fixed OPEN A LINC slot (right) ── */
.home-rail-viewport { display: flex; align-items: stretch; gap: 20px; }
/* scroll region holds the cards + edge arrows + right fade; OPEN A LINC sits outside it */
.home-rail-scroll { position: relative; flex: 1 1 auto; min-width: 0; }
/* right-edge fade — cards dissolve before they reach the OPEN A LINC slot */
.home-rail-scroll::after {
  content: ''; position: absolute; top: 0; bottom: 10px; right: 0; width: 56px;
  background: linear-gradient(to right, rgba(245,240,229,0) 0%, rgba(245,240,229,0.95) 80%);
  pointer-events: none; z-index: 3;
}
/* fixed slot — OPEN A LINC always visible, never overlapped by scrolling cards */
.home-open-linc-slot { flex: 0 0 300px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 10px; }
.home-open-linc-slot .home-manage-btn { width: 100%; justify-content: center; }
/* Align the pinned OPEN card's top with the scrolling station cards. The shared `.home-pick`
   flex-basis is overridden to 226px by `.v2-page .home-pick` LATER in this file — in the
   horizontal scroll that's a 226px WIDTH, but this slot is a COLUMN, so there it becomes 226px
   of HEIGHT: the card balloons and its 96px cover ends up centred ~70px below the row cards.
   !important beats that later, same-specificity rule so the card is just its cover (top-aligned).
   The cover height (96px, from `.v2-page .home-pick-cover`) already matches the station cards. */
.home-open-linc-slot .home-pick-new { flex: 0 0 auto !important; width: 100%; position: static; }
/* S1(0702) mobile: a 300px fixed slot would starve the scroll region on a phone —
   shrink the pinned OPEN card so a peek of the scrolling cards stays visible beside it. */
@media (max-width: 640px) {
  .home-rail-viewport { gap: 12px; }
  .home-open-linc-slot { flex: 0 0 46vw; }
}

/* ── true-scroll rail ── */
.home-rail {
  display: flex; gap: 14px; padding: 4px 0 10px;
  overflow-x: auto; overflow-y: visible;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.home-rail::-webkit-scrollbar { display: none; }
.home-rail-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }

/* cards: fixed width so 3.5 show on a 1280px viewport, hinting overflow */
.home-pick {
  position: relative; flex: 0 0 300px;
  text-align: left; cursor: pointer; padding: 0; background: none;
  border: none; transition: transform 0.15s;
}

/* edge fade + arrow buttons */
.home-rail-edge {
  position: absolute; top: 50%; transform: translateY(-60%);
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 20px; font-weight: 700; line-height: 1;
  color: #213f7a; background: rgba(245,240,229,0.92);
  border: 1.5px solid rgba(31,55,107,0.22); border-radius: 50%;
  box-shadow: 0 2px 8px rgba(31,55,107,0.14); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.15s;
  z-index: 10;
}
.home-rail-edge.show { opacity: 1; pointer-events: auto; }
.home-rail-edge:hover { border-color: var(--nc-forest); box-shadow: 0 4px 12px rgba(31,55,107,0.2); }
.home-rail-edge-l { left: -18px; }
.home-rail-edge-r { right: 6px; }
.home-pick-cover {
  height: 140px; border-radius: 12px; position: relative; overflow: hidden;
  border: 2px solid var(--nc-line); transition: border-color 0.15s ease-out, box-shadow 0.2s, filter 0.15s ease-out;
}
/* event name — pixel font; small + clamped so long names don't blow out a 4-up card */
.home-pick-label {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 11px 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 58%);
  font-family: var(--font-pixel); font-size: 9px; font-weight: 400;
  color: #fff; line-height: 1.6; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* upload hint on gradient (no-image) cards — faint pixel text, top-center */
.home-pick-upload-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-pixel); font-size: 6px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.28); white-space: nowrap; pointer-events: none;
  text-transform: uppercase;
}

/* port nub hidden (wire removed) */
.home-pick-port { display: none; }
/* unified hover language (all card types): lift + border lighten + cover brightness */
.home-pick:hover { transform: translateY(-3px); }
.home-pick:hover:not(.home-pick-on) .home-pick-cover {
  border-color: rgba(130,162,212,0.6); filter: brightness(1.07);
}
/* selected card — elevated + mint outline + bottom indicator pip */
.home-pick-on {
  transform: translateY(-5px);
  transition: transform 0.15s;
}
.home-pick-on .home-pick-cover {
  border: 3px solid var(--nc-mint);
  box-shadow: 0 8px 24px rgba(5,252,197,0.18), 0 2px 8px rgba(18,36,72,0.18);
}
/* bottom pip — thin mint line below the selected card */
.home-pick-on::after {
  content: '';
  display: block;
  width: 28px; height: 3px;
  background: var(--nc-mint);
  border-radius: 2px;
  margin: 6px auto 0;
  box-shadow: 0 0 6px rgba(5,252,197,0.5);
}

/* 02 swatches */
.home-swatches { display: flex; gap: 8px; margin-top: 14px; }
.home-swatch { width: 38px; height: 38px; border-radius: 8px; border: 2px solid rgba(18,36,72,0.18); cursor: pointer; padding: 0; transition: all 0.15s; }
.home-swatch:hover { transform: translateY(-1px); }
.home-swatch-on { border-color: var(--nc-forest); box-shadow: 0 0 0 2px rgba(18,36,72,0.15); }
.home-swatch-on::after { content: '✓'; display: block; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.home-swatch-hint { font-family: var(--font-mono); font-size: 10px; color: var(--nc-ink-soft); margin-top: 9px; opacity: 0.8; }

.home-text { min-height: 200px !important; flex: 1 1 auto; }
/* pixel terminal hint — ▸ prefix + blinking cursor makes it feel alive */
.home-text-hint {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; line-height: 1.6;
  color: var(--nc-amber); font-weight: 700; margin-top: 8px; opacity: 1;
  display: flex; align-items: center; gap: 5px;
}
.home-text-hint-prompt { font-family: var(--font-mono); font-size: 9px; color: var(--nc-amber); font-weight: 700; }
.home-text-hint em { font-style: normal; color: var(--nc-amber); }

/* compose */
.home-genrow { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--nc-line-soft); }
.home-compose {
  width: 100%; padding: 15px; border: 2px solid #0b1830; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg,#c98a2e,#a8701f); color: #fff;
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px;
  box-shadow: 0 5px 0 #6e4a13; transition: transform 0.12s, box-shadow 0.12s;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.home-compose:hover { transform: translateY(2px); box-shadow: 0 3px 0 #6e4a13; }
.home-compose:active { transform: translateY(5px); box-shadow: 0 0 0 #6e4a13; }
.home-compose:disabled { cursor: wait; }
.home-compose-empty { background: rgba(201,138,46,0.12); color: var(--nc-amber); box-shadow: 0 5px 0 rgba(110,74,19,0.4); }
/* compose credits — pixel number + LEFT, subtle */
.home-genrow .nc-credits { display: flex; align-items: baseline; gap: 5px; margin-top: 18px; justify-content: center; opacity: 0.6; }
.nc-credits-num { font-family: var(--font-pixel); font-size: 11px; color: var(--nc-forest); line-height: 1; }
.nc-credits-label { font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.12em; color: var(--nc-ink-soft); }
.nc-credits-out { color: var(--nc-amber) !important; opacity: 1 !important; }
.home-topup { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.home-topup-title { font-family: var(--font-pixel); font-size: 9px; color: var(--nc-forest); letter-spacing: 1px; }
.home-topup-cancel { background: none; border: none; color: var(--nc-ink-soft); font-family: var(--font-mono); font-size: 10px; cursor: pointer; text-decoration: underline; }

/* ── RIGHT station ── */
.home-station { padding: 0 26px 28px; }
.home-station-head { background: var(--nc-forest); margin: 0 -26px 22px; padding: 11px 16px; display: flex; justify-content: space-between; align-items: center; }
.home-station-live { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px; color: var(--nc-panel); }
.home-station-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #05FCC5; margin-right: 6px; }
.home-station-rcv { font-family: var(--font-mono); font-size: 10px; font-style: italic; color: rgba(245,240,229,0.55); }

/* hero frame — fixed box, cover ⇄ keepsake */
.home-hero { position: relative; width: 100%; height: 300px; border-radius: 14px; overflow: hidden; background: var(--nc-forest-deep); margin-bottom: 22px; }
.home-hero-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.home-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), transparent 40%, transparent 55%, rgba(0,0,0,0.5)); }
.home-hero-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.home-hero-num { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.82); }
.home-hero-big { position: absolute; left: 18px; bottom: 16px; }
.home-hero-count { font-family: var(--font-pixel); font-size: 46px; color: #fff; line-height: 1; }
.home-hero-unit { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.7); margin-top: 6px; }
.home-hero-frame { width: 392px; height: 556px; border: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.5); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.home-hero-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: rgba(196,230,210,0.7); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.home-hero-empty-spark { font-size: 24px; color: #05FCC5; margin-bottom: 12px; }
.home-flip {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.05em;
  background: rgba(13,35,24,0.78); color: #05FCC5; border: 1px solid rgba(5,252,197,0.3);
  padding: 7px 10px; border-radius: 7px; cursor: pointer; backdrop-filter: blur(4px);
}
.home-flip:hover { background: rgba(13,35,24,0.92); }
.home-hero-top .edx-root-tag { position: static; }

.home-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.65; color: var(--nc-ink); margin: 0 0 22px; white-space: pre-wrap; }
.home-station .edx-title { margin-top: 0; }

/* ── station: event info (left, fills space) + keepsake card (right, native) ──
   Card is the deliverable, shown at full 392×556 in a neutral dark "screen"
   bezel so it reads as a framed display — not another green terminal panel. */
.home-station { padding: 0; }
.home-station-head { margin: 0; padding: 11px 22px; }
.home-st-body { display: flex; gap: 32px; align-items: center; padding: 24px 24px 28px; }

/* info column — centered but with capped vertical breathing room */
.home-st-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 0; }
.home-st-info .edx-title { margin-top: 0; }
.edx-action-group { margin-top: 20px; }
/* cert block (signal + progress) — relative wrapper for the DRAFT lock veil */
.edx-cert-block { position: relative; margin-bottom: 0; }
.edx-cert-locked .edx-signal,
.edx-cert-locked .edx-progress-attached { filter: grayscale(0.15); opacity: 0.85; }
/* lock veil — faint, icon only, no text */
.edx-lock-veil {
  position: absolute; inset: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,240,229,0.25);
}
.edx-lock-ico { font-size: 15px; opacity: 0.55; filter: grayscale(0.3); }
.home-station .edx-title { margin-top: 8px; }
/* moment tag sitting above the title in the info column */
.home-st-moment-tag { display: inline-flex; margin-bottom: 2px; }
/* narrower info column → tighten the 3 stats so numeric values stay on one line */
.home-st-info .edx-stats { gap: 14px; padding: 26px 0; }
.home-st-info .edx-stat { min-width: 0; flex: 1 1 0; }
.home-st-info .edx-stat-val { font-size: 12px; line-height: 1.5; }
/* signal box: compact but legible, roomier spacing */
.home-st-info .edx-signal { padding: 18px 18px; gap: 12px; margin-bottom: 0; border-radius: 10px 10px 0 0; border-bottom: none; }
/* progress bar directly attached below signal */
.home-st-info .edx-progress-attached {
  border: 1px solid rgba(31,55,107,0.22); border-top: none;
  border-radius: 0 0 10px 10px; padding: 18px 18px 20px; margin-bottom: 0;
  background: rgba(31,55,107,0.06);
}
/* progress internals — a touch more air */
.home-st-info .edx-progress-top { margin-bottom: 11px; }
.home-st-info .edx-progress-bar { height: 11px; margin-bottom: 13px; }
.home-st-info .edx-signal-sub { margin-top: 8px; }
.home-st-info .edx-signal-l { font-family: var(--font-pixel); font-size: 9px; line-height: 1.7; letter-spacing: 0.06em; }
.home-st-info .edx-signal-sub { font-size: 9px; margin-top: 6px; }
.home-st-info .edx-signal-lbl { font-size: 7.5px; }
.home-st-info .edx-signal-code { font-size: 12px; margin-top: 5px; }
/* Cast button welded to the bottom of the progress panel — reads as one card, not two */
.home-st-info .edx-progress-attached { border-radius: 0; }
.home-st-info .edx-action-group { margin-top: 0; }
.home-st-info .edx-broadcast,
.home-st-info .edx-buy { border-radius: 0 0 10px 10px; margin-bottom: 0; }

/* card column — fixed to native footprint */
.home-st-cardcol { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* share actions under the card — small, single-line, same width as the card */
.home-st-share { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
/* slate-blue family — calm, never-used hue, harmonizes with forest + cream */
.home-st-share-btn {
  flex: 1; padding: 9px 8px; cursor: pointer; border-radius: 0; white-space: nowrap;
  border: 2px solid #46587a; background: #e4e8f0; color: #3a4a68;
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.04em; line-height: 1;
  box-shadow: 0 3px 0 rgba(46,58,84,0.45); transition: transform 0.1s, box-shadow 0.1s;
  clip-path: polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
}
.home-st-share-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(46,58,84,0.45); }
/* primary (Broadcast) — deeper slate, filled */
.home-st-share-cast {
  background: linear-gradient(180deg,#536990,#3e5172); color: #fff;
  border-color: #2c3a54; box-shadow: 0 3px 0 #2c3a54;
}
.home-st-share-cast:active { box-shadow: 0 0 0 #2c3a54; }
/* "the page they'll receive" label — below the card */
.home-st-rcv-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; font-style: italic;
  font-weight: 700; color: var(--nc-ink); text-align: center; width: 100%;
}
.home-st-stage {
  position: relative;
  width: 412px; max-width: 100%; box-sizing: border-box; overflow: hidden;
  padding: 10px; border-radius: 18px;
  background: linear-gradient(160deg, #13203c, #0a0f20);
  box-shadow: 0 22px 50px rgba(18,36,72,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
}
.home-st-frame, .home-st-empty {
  width: 392px; height: 556px; border: none; display: block;
  border-radius: 10px; overflow: hidden;
}
/* preview only — links inside the generated canvas are demo/fake, so make the
   whole canvas non-interactive (no clicks reach the iframe's <a> tags) */
.home-st-frame { pointer-events: none; }
.home-st-empty {
  position: relative; /* PixelBlast canvas fills this */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px;
  background: linear-gradient(160deg, #1d3052 0%, #0d1830 55%, #17243f 100%);
}
/* PixelBlast canvas inserted by JS — behind the text */
.home-st-empty > canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0.16; mix-blend-mode: screen; pointer-events: none;
}
/* text layers above canvas */
.home-st-empty-spark, .home-st-empty-txt { position: relative; z-index: 1; }
.home-st-empty-spark { font-size: 26px; color: #05FCC5; margin-bottom: 14px; animation: ncCursorBlink 2.4s steps(1) infinite; }
.home-st-empty-txt { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1.5px; line-height: 2.2; color: rgba(217,189,110,0.5); }   /* very pale gold */

@media (max-width: 980px) {
  .home-split { flex-direction: column; }
  .home-connector { flex: 0 0 40px; flex-direction: row; padding: 0; }
  .home-left { flex: 1 1 auto; }
  /* stacked: the 460px side-by-side floor would force horizontal scroll on phones */
  .home-right { min-width: 0; }
}
/* masthead never overlaps: drop the count first, then let the title row breathe */
@media (max-width: 820px) {
  .home-masthead-count { display: none; }
}
@media (max-width: 560px) {
  .home-masthead { flex-wrap: wrap; row-gap: 8px; }
  .home-masthead-l { flex: 1 1 auto; overflow: hidden; }
  .home-masthead-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 900px) {
  .home-st-body { flex-direction: column-reverse; align-items: center; }
  /* stacked: let the card column take the full row so the stage can shrink + the card scales to fit */
  .home-st-cardcol { margin-left: 0; align-items: center; width: 100%; }
  .home-st-stage { width: 100%; }
  .home-st-info { width: 100%; }
}

/* ── Hero PixelBlast — subtle ambient background ────────────────────────── */
.db-hero canvas:not(#db-navi-canvas) {
  opacity: 0.10;
  mix-blend-mode: screen;
}

/* ── Typewriter shared ───────────────────────────────────────────────────── */
.ncp-tw-cursor {
  display: inline-block; color: #05FCC5;
  animation: ncCursorBlink 0.65s steps(1) infinite;
  font-style: normal;
}
@keyframes ncCursorBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── Hero typewriter copy ────────────────────────────────────────────────── */
.ncp-hero-tw {
  font-family: var(--font-pixel); font-size: 10px; line-height: 1.9;
  letter-spacing: 0.03em; color: rgba(230,255,242,0.78);
  margin-bottom: 26px; min-height: 40px;
  word-break: break-word;
}

/* ── Lens wrapper — sits between hero and db-section, own tight spacing ──── */
.ncp-lens-wrap {
  width: 100%; max-width: 1400px;
  padding: 18px 24px 0;
}

/* ── Lens navigation row ─────────────────────────────────────────────────── */
.ncp-lens-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31,55,107,0.10);
}
html.theme-light .ncp-lens-row { border-bottom-color: rgba(31,55,107,0.12); }

/* Chip — pressed-material pill, brand-tinted */
.ncp-lens-btn {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.08em;
  padding: 9px 18px; border-radius: 50px; cursor: pointer;
  /* Cream→forest-green-tint gradient — feels "of the brand" */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.88) 0%,
    rgba(220,238,228,0.72) 100%);
  border: 1px solid transparent;
  border-top-color:   rgba(255,255,255,0.95);
  border-bottom-color: rgba(31,55,107,0.16);
  border-left-color:  rgba(255,255,255,0.6);
  border-right-color: rgba(31,55,107,0.08);
  color: rgba(31,55,107,0.65);
  box-shadow:
    0 2px 6px rgba(31,55,107,0.11),
    0 1px 2px rgba(31,55,107,0.06),
    inset 0 1px 0 rgba(255,255,255,0.98);
  transition: all 0.15s; white-space: nowrap;
}
.ncp-lens-btn:hover {
  color: #213f7a;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(210,235,220,0.80) 100%);
  box-shadow:
    0 3px 10px rgba(31,55,107,0.14),
    0 1px 2px rgba(31,55,107,0.07),
    inset 0 1px 0 rgba(255,255,255,1);
  transform: translateY(-1px);
}
/* Active — forest deep + Navi cyan glow from within */
.ncp-lens-on {
  background: linear-gradient(160deg, #0b1830 0%, #213f7a 100%);
  color: #05FCC5;
  border-top-color:    rgba(5,252,197,0.20);
  border-bottom-color: rgba(0,0,0,0.40);
  border-left-color:   rgba(5,252,197,0.12);
  border-right-color:  rgba(0,0,0,0.28);
  box-shadow:
    0 0 18px rgba(5,252,197,0.08),
    0 3px 14px rgba(31,55,107,0.30),
    inset 0 1px 0 rgba(5,252,197,0.16),
    inset 0 0 20px rgba(5,252,197,0.05);
}
.ncp-lens-on:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Lens narration — pixel typewriter */
.ncp-lens-narration {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.06em;
  line-height: 1.9; color: rgba(31,55,107,0.72);
  padding: 12px 2px 2px; min-height: 32px;
}

/* ── plan B — centered segmented switch at top of content ────────────────── */
/* NaviCanvas bare page — header is 56px, view already has margin-top for it,
   so dashboard-view's extra 72px padding becomes a 72px blank gap. Collapse to 6px. */
.ncp-bare-page { padding-top: 6px !important; }

.ncp-tabs-wrap { display: flex; justify-content: center; padding: 0; }
.ncp-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(31,55,107,0.06); border: 1px solid rgba(31,55,107,0.18); border-radius: 12px;
}
.ncp-tab {
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.04em;
  color: #213f7a; text-decoration: none; padding: 12px 24px; border-radius: 9px;
  opacity: 0.6; transition: all 0.2s; cursor: pointer;
}
.ncp-tab:hover { opacity: 1; background: rgba(31,55,107,0.07); }
.ncp-tab-on { background: #213f7a; color: #F5F0E5; opacity: 1; box-shadow: 0 4px 12px rgba(31,55,107,0.25); }
.ncp-tab-on:hover { background: #213f7a; }

/* ── plan B — frameless full-width composer ──────────────────────────────── */
/* ── plan B bare layout — no panel frames, zoom-based scaling ───────────── */
.ncp-bare-wrap { width: 100%; padding: 0 0 80px; }
.nc-bare .nc-frame { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; animation: none; max-width: none; }
.nc-bare .nc-frame-head { display: none; }
.nc-bare .nc-cols {
  max-width: 1280px; margin: 0 auto; padding: 16px 60px 60px;
  gap: 56px;
  align-items: stretch;   /* both columns stretch to tallest */
}
/* COMPOSE — same flex ratio as Plan A, no panel frame, stretches to match right */
.nc-bare .nc-left {
  flex: 1 1 380px; min-width: 360px;
  background: none !important; border: none !important;
  box-shadow: none !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  display: flex; flex-direction: column;
}
/* PREVIEW — no frame, flex ratio matches Plan A right panel */
.nc-bare .nc-right {
  flex: 1 1 440px; min-width: 400px;
  border-left: none; background: none !important;
  border: none !important; border-radius: 0;
  padding: 0 !important;
}
/* Card — iframe stays at 392×556 so inner HTML viewport is exact.
   Scale enlarges visually with top-center origin so it stays centered
   under the PREVIEW label.                                            */
.nc-bare .nc-card-frame,
.nc-bare .nc-card-empty {
  width: 392px; height: 556px;
  transform: scale(1.12); transform-origin: top center;
}
.nc-bare .nc-card-zone {
  justify-content: center; margin-top: 8px;
  height: 623px;   /* 556 × 1.12 — reserve scaled height in flow */
}

/* ═══ Pixel-outline aesthetic — Plan B (.nc-bare) fields only ════════════════
   Light homage to retro-terminal UIs: stepped pixel corners + double-line
   frame + hard edges. Colours unchanged (cream/forest). Scoped to .nc-bare
   so it never touches the Plan-A modal / send-gifts overlay, and reverting
   = delete this block.                                                       */
.nc-bare {
  --nc-pix: 4px;   /* corner notch size */
}
.nc-bare .nc-evt-select,
.nc-bare .nc-drop,
.nc-bare .nc-text {
  border-radius: 0 !important;
  border: 2px solid var(--nc-forest) !important;
  border-left: 2px solid var(--nc-forest) !important;   /* override blue accent */
  background: var(--nc-panel) !important;
  box-shadow:
    inset 0 0 0 3px var(--nc-panel),
    inset 0 0 0 4px rgba(18,36,72,0.22) !important;       /* faint inner hairline */
  clip-path: polygon(
    0 var(--nc-pix), var(--nc-pix) var(--nc-pix), var(--nc-pix) 0,
    calc(100% - var(--nc-pix)) 0, calc(100% - var(--nc-pix)) var(--nc-pix), 100% var(--nc-pix),
    100% calc(100% - var(--nc-pix)), calc(100% - var(--nc-pix)) calc(100% - var(--nc-pix)), calc(100% - var(--nc-pix)) 100%,
    var(--nc-pix) 100%, var(--nc-pix) calc(100% - var(--nc-pix)), 0 calc(100% - var(--nc-pix))
  );
}
.nc-bare .nc-evt-select:focus,
.nc-bare .nc-text:focus {
  box-shadow:
    inset 0 0 0 3px var(--nc-panel),
    inset 0 0 0 4px var(--nc-mint) !important;            /* inner line lights up */
}
.nc-bare .nc-drop { border-style: solid !important; }     /* was dashed */
.nc-bare .nc-drop:hover { border-color: var(--nc-mint) !important; }

/* pixel select arrow — blocky chevron */
.nc-bare .nc-evt-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='2' fill='%2316321f'/%3E%3Crect x='10' y='0' width='2' height='2' fill='%2316321f'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%2316321f'/%3E%3Crect x='8' y='2' width='2' height='2' fill='%2316321f'/%3E%3Crect x='4' y='4' width='4' height='2' fill='%2316321f'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important;
}

/* pixel "+" + thumbnails — hard edges */
.nc-bare .nc-drop-plus { font-family: var(--font-pixel); font-size: 13px; }
.nc-bare .nc-drop-hint { letter-spacing: 1.5px; }
.nc-bare .nc-thumb img { border-radius: 0 !important; border-width: 2px !important; }
.nc-bare .nc-thumb-x { border-radius: 0 !important; }

/* section dots → pixel squares already; tighten label spacing */
.nc-bare .nc-seclabel { letter-spacing: 1.5px; }

/* ── Pixel node connector between COMPOSE and PREVIEW panels ─────────────── */
/* Flex child between nc-left and nc-right. Gap is 0 so this element owns the
   40px spacing. MutationObserver re-inserts it on every NC internal render,
   and since that fires as a microtask (before paint) there's no visible gap. */
.nc-connector {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 40px; width: 40px;
  padding-top: 22px;
  pointer-events: none; position: relative; z-index: 10;
}
.nc-conn-wire {
  width: 2px; flex: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--nc-forest) 0 5px,
    transparent 5px 9px
  );
  min-height: 18px;
}
.nc-conn-node-l,
.nc-conn-node-r {
  width: 10px; height: 10px;
  background: var(--nc-mint);
  border: 2px solid var(--nc-forest);
  flex: 0 0 10px;
}

/* Top node — horizontal arms stretching to both panel borders at header level */
.nc-conn-node-l {
  position: relative; z-index: 2;
}
.nc-conn-node-l::before,
.nc-conn-node-l::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 2px; background: var(--nc-forest);
  width: 15px;   /* spans from node edge → connector edge (gap = 40px, node = 10px, margin = 15px each side) */
}
.nc-conn-node-l::before { right: 100%; }   /* left arm → COMPOSE panel border */
.nc-conn-node-l::after  { left:  100%; }   /* right arm → PREVIEW panel border */
.nc-conn-mid {
  width: 10px; height: 10px;
  background: var(--nc-panel);
  border: 2px solid var(--nc-forest);
  flex: 0 0 10px;
  position: relative;
}
/* inner blink dot */
.nc-conn-mid::after {
  content: '';
  position: absolute; inset: 2px;
  background: var(--nc-mint);
  animation: ncConnPulse 1.8s steps(1) infinite;
}
@keyframes ncConnPulse { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Connector owns the gap; position:relative needed for header arm pseudo-els */
.nc-bare .nc-cols { gap: 0 !important; position: relative; }

/* ═══ BOLD pixel-terminal pass — Plan B (.nc-bare) ══════════════════════════
   Turns the two columns into retro-terminal panels: double-line pixel frame,
   notched corners, inverted header bars, chunky press-buttons, scanlines.
   Colours unchanged. Reverting = delete this block.                          */

/* Re-frame the two columns as terminal panels (bare mode stripped them) */
.nc-bare .nc-cols { gap: 40px; padding-top: 26px; }
.nc-bare .nc-left,
.nc-bare .nc-right {
  background: var(--nc-panel) !important;
  border: 2px solid var(--nc-forest) !important;
  box-shadow:
    inset 0 0 0 3px var(--nc-panel),
    inset 0 0 0 4px rgba(18,36,72,0.16),
    0 6px 0 rgba(18,36,72,0.10) !important;          /* hard pixel drop */
  padding: 0 26px 28px !important;
  position: relative;
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
}

/* Header → inverted terminal bar (bleed to panel edges) */
.nc-bare .nc-sechead {
  background: var(--nc-forest);
  margin: 0 -26px 22px; padding: 11px 16px;
  border-bottom: none !important;
}
.nc-bare .nc-seclabel { color: var(--nc-panel) !important; }
.nc-bare .nc-sechint  { color: rgba(245,240,229,0.55) !important; font-style: italic; }
.nc-bare .nc-secdot   { width: 7px; height: 7px; background: var(--nc-mintBright, #57b6ee) !important;
  box-shadow: 9px 0 0 var(--nc-mint, #3a82c8) !important; }

/* Chunky pixel GENERATE — hard offset shadow + press animation */
.nc-bare .nc-gen {
  border-radius: 0 !important;
  border: 2px solid #0b1830 !important;
  box-shadow: 0 5px 0 #0b1830, 0 7px 0 rgba(0,0,0,0.22) !important;
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
  );
}
.nc-bare .nc-gen:hover  { transform: translateY(2px); box-shadow: 0 3px 0 #0b1830, 0 4px 0 rgba(0,0,0,0.2) !important; }
.nc-bare .nc-gen:active { transform: translateY(5px); box-shadow: 0 0 0 #0b1830 !important; }
.nc-bare .nc-gen-empty {
  border-color: var(--nc-amber) !important;
  box-shadow: 0 5px 0 #8a5e1f, 0 7px 0 rgba(0,0,0,0.18) !important;
}

/* Chunky pixel SAVE — same press treatment */
.nc-bare .nc-save {
  border-radius: 0 !important; border: 2px solid var(--nc-forest) !important;
  box-shadow: 0 4px 0 rgba(18,36,72,0.55) !important; backdrop-filter: none !important;
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
  );
}
.nc-bare .nc-save:hover  { transform: translateY(2px); box-shadow: 0 2px 0 rgba(18,36,72,0.55) !important; }
.nc-bare .nc-save:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(18,36,72,0.55) !important; }

/* Credit dots → pixel squares */
.nc-bare .nc-dot { border-radius: 0 !important; width: 8px; height: 8px; }

/* Subtle CRT scanlines on the PREVIEW stage (behind the card) */
.nc-bare .nc-right::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(18,36,72,0.03) 3px 4px);
  clip-path: inherit;
}
.nc-bare .nc-right > * { position: relative; z-index: 1; }

/* ── send-gifts overlay — fix textarea + button layout ───────────────────── */
/* Mirrors #manage-emails + #manage-send-btn from the local css/events.css     */
#ncp-mg-emails {
  display: block; width: 100%; height: 100px; box-sizing: border-box;
  padding: 12px 14px; margin-bottom: 0;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-mid, rgba(255,255,255,0.12));
  border-radius: 6px; color: inherit;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px;
  resize: vertical;
}
html.theme-light #ncp-mg-emails {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.15); color: #1a1a1a;
}
.ncp-mg-panel .manage-btn {
  display: block; margin-top: 8px; width: auto;
  background: var(--accent, #05fcc4); color: var(--bg, #050607);
  border: none; font-family: var(--font-pixel, 'Press Start 2P', monospace);
  font-size: 8px; padding: 10px 20px; border-radius: 6px;
  cursor: pointer; letter-spacing: 0.06em;
}
.ncp-mg-panel .manage-btn:hover { opacity: 0.85; }
html.theme-light .ncp-mg-panel .manage-btn { background: #213f7a; color: #F5F0E5; }

.ncp-mg-open, .ncp-buy-open { display: flex !important; z-index: 1000; }

/* ── modal (方案一) ──────────────────────────────────────────────────────── */
.nc-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(20,18,14,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 16px 50px; overflow-y: auto;
}
.nc-modal { position: relative; width: 100%; max-width: 1080px; animation: ncFloatUp 0.4s ease both; }
.nc-modal-x {
  position: absolute; top: -12px; right: -12px; z-index: 5; width: 34px; height: 34px;
  border-radius: 50%; border: none; cursor: pointer; background: var(--nc-ink); color: var(--nc-cream);
  font-size: 18px; line-height: 34px; padding: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

/* ── the composer frame ──────────────────────────────────────────────────── */
.nc-frame {
  width: 100%; background: var(--nc-panel); border-radius: 22px; border: 1px solid var(--nc-line);
  box-shadow: 0 30px 70px rgba(40,30,15,0.16), 0 2px 0 rgba(255,255,255,0.6) inset;
  overflow: hidden; position: relative; animation: ncFloatUp 0.5s ease both;
}
.nc-frame-head {
  position: relative; text-align: center; padding: 22px 24px 18px;
  border-bottom: 1px solid var(--nc-line-soft);
  background: linear-gradient(var(--nc-panel), rgba(246,240,226,0.5));
}
.nc-seed { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); opacity: 0.85; }
.nc-live {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--nc-terra); opacity: 0.7;
}
.nc-title { font-family: var(--font-pixel); font-size: 18px; color: var(--nc-forest); letter-spacing: 1px; margin-bottom: 6px; }
.nc-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--nc-ink-soft); }

.nc-cols { display: flex; flex-wrap: wrap; }
.nc-left { flex: 1 1 380px; min-width: 340px; padding: 30px 34px 34px; display: flex; flex-direction: column; }
.nc-right {
  flex: 1 1 440px; min-width: 400px; padding: 28px 32px 32px; position: relative;
  background: linear-gradient(160deg, var(--nc-parch), #efe7d4);
  border-left: 1px solid var(--nc-line-soft);
}

.nc-sechead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--nc-line-soft);
}
.nc-sechead > span:first-child { display: flex; align-items: center; gap: 9px; }
.nc-secdot { width: 8px; height: 8px; display: inline-block; box-shadow: 3px 0 0 rgba(18,36,72,0.25); }
.nc-seclabel { font-family: var(--font-pixel); font-size: 13px; color: var(--nc-forest); letter-spacing: 1px; }
.nc-sechint { font-family: var(--font-mono); font-size: 10px; font-style: italic; color: var(--nc-ink-soft); letter-spacing: 0.5px; }

.nc-field-label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--nc-ink); margin-bottom: 9px;
}
.nc-field-label.nc-top { margin-top: 22px; }
.nc-fdot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.nc-dim { opacity: 0.5; font-weight: 400; font-style: italic; }

.nc-evt-select, .nc-evt-bound {
  width: 100%; padding: 14px 16px; border-radius: 11px; background: var(--nc-parch);
  border: 1px solid var(--nc-line); border-left: 3px solid rgba(90,107,158,0.55);
  font-family: var(--font-sans); font-size: 13px; color: var(--nc-ink); min-height: 50px;
}
.nc-evt-select { cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6b9e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.nc-evt-bound { display: flex; align-items: center; justify-content: space-between; }
.nc-evt-bound-name { font-weight: 600; }
.nc-evt-bound-moment {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  background: var(--nc-forest); color: var(--nc-panel); padding: 5px 10px; border-radius: 14px;
}

.nc-drop {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 13px; border-radius: 12px; background: var(--nc-parch);
  border: 1.5px dashed var(--nc-line); min-height: 78px; cursor: pointer; transition: border-color 0.2s;
}
.nc-drop:hover { border-color: var(--nc-mint); }
.nc-thumb { position: relative; cursor: default; }
.nc-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--nc-line); display: block; }
.nc-thumb:first-child img { border-color: var(--nc-mint); }
.nc-thumb-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 9px;
  border: none; background: var(--nc-forest); color: var(--nc-panel); cursor: pointer;
  font-size: 11px; padding: 0; line-height: 18px;
}
.nc-thumb-pal { position: absolute; bottom: -14px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.5px; }
.nc-drop-add { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--nc-ink-soft); padding: 0 10px; }
.nc-drop-plus { font-size: 24px; color: var(--nc-forest); line-height: 1; }
.nc-drop-hint { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; }

.nc-text {
  width: 100%; min-height: 150px; flex: 1 1 auto; padding: 13px; border-radius: 11px;
  background: var(--nc-parch); color: var(--nc-ink); font-family: var(--font-sans);
  font-size: 13px; line-height: 1.55; resize: vertical; outline: none;
  border: 1px solid var(--nc-line); transition: border 0.2s, box-shadow 0.2s; box-sizing: border-box;
}
.nc-text:focus { border-color: var(--nc-forest); box-shadow: 0 0 0 3px rgba(18,36,72,0.1); }
.nc-text::placeholder { color: #b3a890; }

.nc-genrow { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--nc-line-soft); }
.nc-credits { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nc-dots { display: flex; gap: 5px; }
.nc-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--nc-line); background: transparent; transition: background 0.3s; }
.nc-dot.on { background: var(--nc-forest); border-color: var(--nc-forest); }
.nc-credits-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--nc-ink-soft); }

.nc-gen {
  width: 100%; padding: 15px; border-radius: 12px; border: none; outline: none; cursor: pointer;
  background: var(--nc-forest); color: var(--nc-panel);
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: 1px;
  box-shadow: 0 6px 16px rgba(18,36,72,0.28); transition: transform 0.12s, opacity 0.2s;
}
.nc-gen:hover { transform: translateY(-1px); }
.nc-gen:disabled { opacity: 0.45; cursor: wait; transform: none; }
.nc-gen-empty { background: rgba(201,138,46,0.1); border: 1px solid var(--nc-amber); color: var(--nc-amber); font-size: 11px; box-shadow: none; }
.nc-gen-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; color: var(--nc-ink-soft); margin-top: 9px; text-align: center; opacity: 0.8; }

.nc-card-zone { display: flex; justify-content: center; padding-top: 6px; }
.nc-card-frame {
  width: 392px; height: 556px; max-width: 100%; border: none; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.24); background: var(--nc-forest-deep);
  animation: ncReveal 0.5s ease both;
}
.nc-card-empty {
  width: 392px; height: 556px; max-width: 100%; border-radius: 14px;
  /* dark forest gradient + subtle pixel grid — same tone as generated cards */
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 4px),
    linear-gradient(160deg, #1d3052 0%, #0d1830 55%, #17243f 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 18px 48px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; color: rgba(140,190,155,0.45); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2px; line-height: 2; box-sizing: border-box;
}
.nc-card-empty.loading {
  animation: ncPulse 1.2s ease-in-out infinite;
}

.nc-save-slot { height: 62px; margin-top: 18px; display: flex; justify-content: center; align-items: center; }
.nc-save {
  width: 392px; max-width: 100%; padding: 12px 16px; border-radius: 11px; outline: none; cursor: pointer;
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px; color: var(--nc-forest);
  border: 1px solid rgba(18,36,72,0.45); background: rgba(251,247,236,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(40,30,15,0.08); transition: all 0.3s; animation: ncFloatUp 0.4s ease both;
}
.nc-save:hover { transform: translateY(-1px); }
.nc-save:disabled { cursor: default; transform: none; }
.nc-save.saved { border-color: rgba(58,110,200,0.6); background: rgba(58,110,200,0.14); }

.nc-topup {
  position: absolute; inset: 0; z-index: 20; background: rgba(239,231,212,0.97);
  padding: 30px; display: flex; flex-direction: column; justify-content: center;
  animation: ncReveal 0.25s ease both;
}
.nc-topup-title { font-family: var(--font-pixel); font-size: 13px; color: var(--nc-forest); margin-bottom: 7px; }
.nc-topup-sub { font-size: 12px; color: var(--nc-ink-soft); margin-bottom: 16px; line-height: 1.5; max-width: 320px; font-family: var(--font-sans); }
.nc-pack {
  display: flex; justify-content: space-between; align-items: center; max-width: 320px;
  padding: 13px 16px; border-radius: 10px; margin-bottom: 9px; cursor: pointer;
  border: 1px solid var(--nc-line); background: var(--nc-panel);
  font-family: var(--font-mono); font-size: 12px; color: var(--nc-ink); transition: border 0.2s;
}
.nc-pack:hover { border-color: var(--nc-forest); }
.nc-pack-price { color: var(--nc-amber); font-weight: 700; }
.nc-topup-cancel {
  margin-top: 8px; background: none; border: none; color: var(--nc-ink-soft); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; align-self: flex-start; padding: 4px 0;
}

@keyframes ncFloatUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes ncReveal { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes ncPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (max-width: 860px) {
  .nc-right { border-left: none; border-top: 1px solid var(--nc-line-soft); }
  .nc-card-frame, .nc-card-empty, .ncp-canvas-frame { transform-origin: top center; }
}

/* ═══ BROWSE-ALL overlay — in-place event picker (rail "⊞ Browse all") ═══════
   Scales up from top-right (where the button lives) so it reads as the button
   "opening up"; Esc / backdrop / × all close. No page navigation.            */
/* OPEN A LINC modal opened from inside Browse — stacks above it */
.new-event-modal.nl-on-top { z-index: 1100; }

/* ═══ OPEN A STATION modal — pixel-terminal restyle (matches the home panels) ══ */
.new-event-modal .new-event-panel {
  background: var(--nc-panel) !important;
  border: 2px solid var(--nc-forest) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px rgba(18,36,72,0.16), 0 24px 60px rgba(18,36,72,0.28) !important;
  padding: 0 0 36px !important;
  clip-path: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  max-width: 780px !important;
}
/* header → forest terminal bar */
.new-event-modal .new-event-header {
  background: var(--nc-forest); margin: 0 0 24px; padding: 16px 24px !important;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.new-event-modal .new-event-title-main { color: var(--nc-panel) !important; font-size: 15px !important; letter-spacing: 0.08em; }
.new-event-modal .new-event-title-sub { color: rgba(245,240,229,0.6) !important; font-size: 11px !important; margin-top: 6px; }
.new-event-modal .new-event-close { color: rgba(245,240,229,0.7) !important; opacity: 1; font-family: var(--font-mono); font-size: 11px !important; letter-spacing: 0.5px; background: none !important; padding: 0 !important; border-radius: 0 !important; transition: color 0.15s !important; }
.new-event-modal .new-event-close:hover,
.new-event-modal .new-event-close:focus,
.new-event-modal .new-event-close:active { background: none !important; outline: none !important; box-shadow: none !important; }
.new-event-modal .new-event-close:hover { color: var(--nc-panel) !important; }
.new-event-modal .new-event-form { padding: 0 36px !important; }
.new-event-modal .new-event-field { margin-bottom: 22px; }
/* labels — pixel-terminal */
.new-event-modal .new-event-label { font-family: var(--font-pixel) !important; font-size: 9px !important; letter-spacing: 0.1em !important; color: var(--nc-forest) !important; }
/* inputs — hard pixel edges + notched corners + forest focus */
.new-event-modal .new-event-input {
  border-radius: 0 !important; border: 2px solid var(--nc-forest) !important;
  background: var(--nc-panel) !important; color: var(--nc-ink) !important;
  font-family: var(--font-sans) !important; font-size: 14px !important; margin-top: 7px;
  box-shadow: inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px rgba(18,36,72,0.16) !important;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.new-event-modal .new-event-input:focus { box-shadow: inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px var(--nc-mint) !important; }
/* helper caption, NOT a field — no box, no pixel-label look (reads as a quiet hint) */
.new-event-modal .new-event-summary { margin-top: 10px; padding: 0; background: transparent; border: none; }
.new-event-modal .new-event-summary-row { padding: 0; }
.new-event-modal .new-event-summary-note {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--nc-ink-soft); font-style: italic; letter-spacing: 0.01em; text-transform: none;
  display: flex; align-items: flex-start; gap: 7px;
}
/* buttons — chunky pixel press */
.new-event-modal .new-event-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.new-event-modal .new-event-btn-primary {
  border-radius: 0 !important; border: 2px solid #0b1830 !important;
  background: var(--nc-forest) !important; color: var(--nc-panel) !important;
  font-family: var(--font-pixel) !important; font-size: 9px !important; letter-spacing: 0.05em; padding: 13px 18px !important;
  box-shadow: 0 4px 0 #0b1830 !important; transition: transform 0.12s, box-shadow 0.12s;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.new-event-modal .new-event-btn-primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 #0b1830 !important; }
.new-event-modal .new-event-btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 #0b1830 !important; }
/* ── Primary CTA — bright GOLD (confirm/commit; warms an otherwise cool modal).
   Higher specificity than the .new-event-btn-primary forest rule so gold wins. ── */
.new-event-modal .new-event-btn-primary.new-event-btn-amber {
  background: linear-gradient(180deg,#f5c542,#e0a040) !important;
  border-color: #6e4a13 !important; color: #0e1830 !important;
  box-shadow: 0 4px 0 #6e4a13 !important;
}
.new-event-modal .new-event-btn-primary.new-event-btn-amber:hover { box-shadow: 0 2px 0 #6e4a13 !important; }
.new-event-modal .new-event-btn-primary.new-event-btn-amber:active { box-shadow: 0 0 0 #6e4a13 !important; }
/* gold marker before the title — a warm brand pop in the header */
.new-event-modal .new-event-title-main { display: inline-flex; align-items: center; gap: 9px; }
.new-event-modal .new-event-title-main::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 8px;
  background: #f5c542; box-shadow: 0 0 9px rgba(245,197,66,0.7);
}
/* gold ✦ in the helper caption (the rest of the caption stays quiet) */
.new-event-modal .ne-note-star { color: #f5c542; font-style: normal; }
.new-event-btn-amber:active { box-shadow: 0 0 0 #6e4a13 !important; }
.new-event-modal .new-event-btn-secondary {
  border-radius: 0 !important; font-family: var(--font-pixel) !important; font-size: 9px !important; letter-spacing: 0.05em;
  border: 2px solid rgba(31,55,107,0.3) !important; padding: 13px 16px !important; color: var(--nc-ink-soft) !important;
}

.br-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,18,14,0.62); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10px 6px 16px; overflow-y: auto;
  animation: brFade 0.15s ease both;
}
.br-overlay.br-closing { animation: brFadeOut 0.15s ease both; }
.br-panel {
  width: 100%; max-width: none;
  /* a constant full-height sheet — the station count never resizes it */
  height: calc(100dvh - 26px);
  background: var(--nc-panel);
  border: 2px solid var(--nc-forest);
  box-shadow:
    inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px rgba(18,36,72,0.16),
    0 24px 64px rgba(18,36,72,0.30);
  clip-path: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  /* the panel is a FIXED-height sheet with a clip-path — anything past one
     viewport of cards gets clipped invisible unless the panel itself scrolls
     (the outer overlay scrolling just exposes the dark backdrop). Same fix
     the ≤640px block already carries. (Zo 0708) */
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 28px;
  /* grows out of the Browse button (transform-origin set inline in JS) */
  animation: brZoom 0.30s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}
.br-overlay.br-closing .br-panel { animation: brZoomOut 0.20s cubic-bezier(0.5, 0, 0.75, 0.4) both; }
/* quiet sign-off under the grid — fills the sparse state with intent */
.br-foot {
  margin-top: 30px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: rgba(140,160,195,0.55); text-transform: uppercase;
}
@keyframes brFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes brFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes brZoom    { from { transform: scale(0.05); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes brZoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.05); opacity: 0; } }

/* inverted terminal header bar (matches deck/station heads) */
.br-head {
  background: var(--nc-forest); padding: 13px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.br-head-l { display: flex; align-items: baseline; gap: 12px; }
.br-title { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1.5px; color: var(--nc-panel); }
.br-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; color: rgba(245,240,229,0.55); }
.br-close {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px;
  color: rgba(245,240,229,0.7); background: none; border: none; cursor: pointer; padding: 4px 2px;
}
.br-close:hover { color: #05FCC5; }

/* search row — pixel-framed input */
.br-search-row {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 24px 16px; padding: 0 14px;
  border: 1.5px solid rgba(31,55,107,0.22); background: rgba(31,55,107,0.04); border-radius: 8px;
}
.br-search-ico { font-size: 15px; color: var(--nc-ink-soft); }
.br-search {
  flex: 1; border: none; outline: none; background: none;
  padding: 14px 0; font-family: var(--font-mono); font-size: 13px; color: var(--nc-ink);
}
.br-search::placeholder { color: #b3a890; }

.br-filterbar { margin: 0 20px 16px; }
/* smaller chips inside browse modal — similar visual weight to sort buttons */
.br-filterbar .ncp-lens-btn { font-size: 7px; padding: 7px 12px; letter-spacing: 0.06em; }
/* fixed min-height so panel doesn't resize when filter returns fewer cards */
.br-grid { margin: 0 20px; }
/* larger cards inside browse overlay */
.br-grid.mg-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.br-grid .mg-card, .br-new-card { height: 300px; }
.br-empty {
  padding: 56px 20px; text-align: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--nc-ink-soft);
}

/* selected event — cyan ring; hover label reads "select" not "open/→" */
/* NEW LINC card inside Browse modal — same grid slot as mg-card */
.br-new-card {
  position: relative; height: 300px; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 2px dashed rgba(31,55,107,0.28); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: border-color 0.18s, box-shadow 0.2s;
}
.br-new-card:hover { border-color: var(--nc-mint); box-shadow: 0 12px 30px rgba(58,110,200,0.12); }
.br-new-plus { font-family: var(--font-pixel); font-size: 20px; color: rgba(31,55,107,0.3); line-height: 1; }
.br-new-label { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.08em; color: rgba(31,55,107,0.35); }
.br-new-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(31,55,107,0.3); }
.br-new-card:hover .br-new-plus, .br-new-card:hover .br-new-label, .br-new-card:hover .br-new-sub { color: var(--nc-mint); }

.br-card-on { border-color: var(--nc-mint) !important; box-shadow: 0 0 0 2px var(--nc-mint), 0 12px 30px rgba(18,36,72,0.26) !important; }
.br-grid .mg-card-open { font-size: 0; }
.br-grid .mg-card-open::after { content: '✦ Select this station'; font-size: 9px; letter-spacing: 0.05em; }

@media (max-width: 560px) {
  .br-overlay { padding: 40px 14px 30px; }
  .br-panel { transform-origin: top center; }
}

/* ═══ NEW LINC MODAL ════════════════════════════════════════════════════════ */
.nl-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(20,18,14,0.60); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 16px 40px; overflow-y: auto;
  animation: brFade 0.15s ease both;
}
.nl-overlay.br-closing { animation: brFadeOut 0.15s ease both; }
.nl-panel {
  width: 100%; max-width: 960px;
  background: #FAFAF7; border-radius: 6px;
  border: 1px solid rgba(18,36,72,0.14);
  box-shadow: 0 24px 64px rgba(18,36,72,0.22);
  padding: 0 0 40px; overflow: hidden;
  animation: brZoom 0.28s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}
.nl-overlay.br-closing .nl-panel { animation: brZoomOut 0.18s cubic-bezier(0.5,0,0.75,0.4) both; }

.nl-head {
  background: #fff; border-bottom: 1px solid rgba(18,36,72,0.08);
  padding: 24px 32px; display: flex; align-items: flex-start; justify-content: space-between;
}
.nl-title { font-family: var(--font-pixel); font-size: 18px; color: var(--nc-forest); letter-spacing: 1px; margin-bottom: 6px; }
.nl-sub { font-family: var(--font-sans); font-size: 14px; font-style: italic; color: var(--nc-ink-soft); }
.nl-close { font-family: var(--font-mono); font-size: 14px; color: var(--nc-ink-soft); background: none; border: none; cursor: pointer; padding: 4px 8px; }
.nl-close:hover { color: var(--nc-ink); }

.nl-section-lbl {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.12em;
  color: var(--nc-forest); padding: 22px 32px 12px; display: flex; align-items: center; gap: 12px;
}
.nl-section-hint { font-family: var(--font-mono); font-size: 11px; font-style: italic; color: var(--nc-ink-soft); letter-spacing: 0; }
.nl-divider { border: none; border-top: 1px solid rgba(18,36,72,0.08); margin: 4px 0; }

.nl-type-row { display: flex; gap: 16px; padding: 0 32px 4px; }
.nl-type-btn {
  flex: 1; text-align: left; padding: 16px 20px; border-radius: 10px;
  border: 1.5px solid rgba(18,36,72,0.14); background: #fff; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nl-type-btn:hover { border-color: rgba(18,36,72,0.30); }
.nl-type-on { border-color: var(--nc-forest) !important; box-shadow: 0 0 0 3px rgba(18,36,72,0.08); }
.nl-type-name { display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--nc-ink); margin-bottom: 4px; }
.nl-type-sub { font-family: var(--font-mono); font-size: 11px; color: var(--nc-ink-soft); }

.nl-moment-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 0 32px;
}
.nl-moment {
  text-align: left; cursor: pointer; padding: 0 0 12px; background: none;
  border: 1.5px solid rgba(18,36,72,0.10); border-radius: 12px; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nl-moment:hover { border-color: rgba(18,36,72,0.28); }
.nl-moment-on { border-color: var(--nc-forest) !important; box-shadow: 0 0 0 3px rgba(18,36,72,0.08); }
.nl-moment-name { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--nc-ink); padding: 10px 14px 2px; }
.nl-moment-chip { font-family: var(--font-mono); font-size: 11px; color: var(--nc-ink-soft); padding: 0 14px; }

.nl-moment-callout {
  font-family: var(--font-sans); font-size: 14px; font-style: italic;
  color: var(--nc-ink-soft); padding: 14px 32px 4px;
  border-left: 3px solid rgba(18,36,72,0.12); margin: 12px 32px 4px;
}

.nl-form { padding: 0 32px; display: flex; flex-direction: column; gap: 14px; }
.nl-label { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.12em; color: var(--nc-ink-soft); display: block; margin-bottom: 6px; }
.nl-input {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(18,36,72,0.18); border-radius: 8px;
  background: #fff; font-family: var(--font-sans); font-size: 14px; color: var(--nc-ink);
  outline: none; transition: border-color 0.15s;
}
.nl-input:focus { border-color: var(--nc-forest); box-shadow: 0 0 0 3px rgba(18,36,72,0.08); }
.nl-textarea { min-height: 80px; resize: vertical; }
.nl-trees { max-width: 140px; }
.nl-row { display: flex; gap: 16px; }
.nl-col { flex: 1; }
.nl-error { font-family: var(--font-mono); font-size: 12px; color: #c0392b; padding: 8px 12px; background: rgba(192,57,43,0.06); border-radius: 6px; }
.nl-submit {
  width: 100%; padding: 16px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--nc-forest); color: var(--nc-panel);
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px;
  box-shadow: 0 5px 0 #0b1830; transition: transform 0.12s, box-shadow 0.12s;
}
.nl-submit:hover { transform: translateY(2px); box-shadow: 0 3px 0 #0b1830; }

/* ═══════════════════════════════════════════════════════════════════
   NCP-PANEL — shared pixel-terminal overlay for Buy + Broadcast
   (replaces the plain manage-panel for these two overlays)
   ═══════════════════════════════════════════════════════════════════ */
.manage-overlay.ncp-mg-open,
.manage-overlay.ncp-buy-open {
  padding: 40px 24px;
  align-items: flex-start;
}

/* outer panel shell */
.ncp-panel {
  background: var(--nc-panel);
  border: 2px solid var(--nc-forest);
  border-radius: 0;
  width: 100%; max-width: 820px;
  box-shadow: inset 0 0 0 3px var(--nc-panel), inset 0 0 0 4px rgba(18,36,72,0.14),
              0 32px 80px rgba(18,36,72,0.32);
  clip-path: polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  overflow: hidden;
}

/* NO CSS `zoom` anywhere. `zoom` is non-standard: (1) it makes getBoundingClientRect() report
   zoomed-vs-logical coords differently across browsers → mis-positions the tour/hint overlays;
   (2) it does NOT scale an <iframe>'s inner document in all browsers → the 392px card body
   overflowed the shrunk iframe and clipped. Everything stays at natural scale; compactness is done
   with real sizing, and the keepsake/preview cards scale-to-fit via transform (see .nc-fit-*). */

/* forest terminal header */
.ncp-panel-hdr {
  background: var(--nc-forest);
  padding: 20px 36px;
  display: flex; align-items: center; gap: 18px;
}
.ncp-panel-hdr-tag {
  font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.14em;
  color: rgba(245,240,229,0.55); white-space: nowrap;
}
.ncp-panel-hdr-name {   /* station context only — kept small so it reads as context, not a title */
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.06em;
  color: var(--nc-panel); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* close control — unified across all overlays to match Browse's "[ × close ]" */
.ncp-panel-close {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: rgba(245,240,229,0.7);
  letter-spacing: 0.5px; white-space: nowrap;
  margin-left: auto;   /* always pin the close control to the top-right */
}
.ncp-panel-close:hover { color: var(--nc-panel); }

/* single-column vertical body — roomy, stacked top→bottom */
.ncp-panel-body {
  display: flex; flex-direction: column;
  padding: 44px 52px;
}
.ncp-panel-left { padding: 0; border: none; margin-bottom: 0; }
.ncp-panel-left .ncp-panel-sec-lbl { text-align: center; }
.ncp-panel-right { padding: 0; border: none; border-top: 1px solid rgba(31,55,107,0.15); padding-top: 22px; margin-top: 22px; }

/* section label */
.ncp-panel-sec-lbl {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.13em;
  color: var(--nc-forest); margin-bottom: 16px; text-transform: uppercase;
}

/* canvas preview — proportions match a typical vertical phone/card page */
/* canvas preview — identical to the homepage stage: native 392×556 in a green bezel */
.ncp-mg-canvas {
  width: 412px; max-width: 100%; box-sizing: border-box; overflow: hidden;
  margin: 0 auto 24px; padding: 10px; border-radius: 18px;
  background: linear-gradient(160deg, #13203c, #0a0f20);
  box-shadow: 0 22px 50px rgba(18,36,72,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ncp-mg-canvas iframe {
  width: 392px; height: 556px; border: none; border-radius: 10px;
  display: block; overflow: hidden; pointer-events: none;
}
.ncp-mg-canvas-empty {
  width: 412px; height: 576px; margin: 0 auto 24px; padding: 10px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-mono); font-size: 12px; color: rgba(196,230,210,0.7);
  background: linear-gradient(160deg, #1d3052 0%, #0d1830 55%, #17243f 100%);
}

/* planting region box */
.ncp-region-box {
  background: rgba(31,55,107,0.04); border: 1px solid rgba(31,55,107,0.16);
  padding: 18px 20px; margin-bottom: 8px;
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
.ncp-region-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 26px; margin-bottom: 18px;
  align-items: start; text-align: center;
}
.ncp-region-sel {
  width: 100%; border: 1px solid rgba(31,55,107,0.22);
  background: var(--nc-panel); color: var(--nc-ink);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; padding: 8px 9px;
  border-radius: 0; cursor: pointer; margin-top: -2px; text-align: center;
}
.ncp-region-val {
  font-family: var(--font-mono); font-size: 12px; color: var(--nc-ink); line-height: 1.5;
  padding-top: 6px;
}
.ncp-region-note {
  font-family: var(--font-sans); font-style: italic; font-size: 10.5px; color: var(--nc-ink-soft);
  line-height: 1.55;
  padding-top: 15px; border-top: 1px solid rgba(31,55,107,0.14);
}
.ncp-region-note strong { font-style: normal; }
.ncp-brand-link {
  font-weight: 700; color: var(--nc-forest); opacity: 1;
  letter-spacing: 0.01em;
}

/* ── EACH PERSON RECEIVES — big pixel title + one quiet inline sub-row ────── */
.ncp-receives { text-align: center; }
.ncp-receives-hero {
  font-family: var(--font-pixel); font-size: 15px; letter-spacing: 0.04em;
  line-height: 1.25; color: var(--nc-forest);
}
.ncp-receives-sub {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 0 10px; margin-top: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.01em; color: var(--nc-ink-soft);
}
.ncp-perk { display: inline-flex; align-items: center; gap: 5px; }
.ncp-perk-ico { color: var(--nc-mint); font-size: 11px; line-height: 1; }
.ncp-perk-sep { color: rgba(31,55,107,0.28); }

/* ── CAST opening — a first-level title with a left spine that threads down into the sections ── */
.ncp-cast-open { text-align: left; position: relative; padding-left: 15px; margin-bottom: 22px; }
.ncp-cast-open::before {   /* the spine — connects the title down to CHOOSE A MISSION */
  content: ''; position: absolute; left: 0; top: 2px; bottom: -20px; width: 2px;
  background: linear-gradient(180deg, rgba(206,219,238,0.5) 0%, rgba(206,219,238,0.12) 72%, transparent 100%);
}
.ncp-cast-h1 {
  font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.08em;
  color: var(--nc-ink); line-height: 1.3;
}
.ncp-cast-lede {
  margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  font-style: italic; color: var(--nc-ink-soft); letter-spacing: 0.01em;
}
/* addition diagram — reuses the mission detail-box structure (lead sentence + left-right grid) for
   visual consistency. Blue is the emphasis (the Cast path), not gold. */
.ncp-region-box.ncp-addn { margin: 8px 0 22px; }
.ncp-addn-grid { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.ncp-addn-dot { background: #d9bd6e; box-shadow: 0 0 6px rgba(217,189,110,0.5); }   /* pale gold */
.ncp-addn-lead-strong { color: var(--nc-ink) !important; font-weight: 700; }        /* first half — white/ink, bold */
/* the Cast cell — the emphasized path, the whole cell in pale gold */
.ncp-addn-cast-cell .ncp-stat-lbl,
.ncp-addn-cast-cell .ncp-stat-val { color: #c79a3a; }
.ncp-addn-cast-cell .ncp-stat-sub { color: #c79a3a; opacity: 0.8; }
/* closing "together" line under the Support button */
.ncp-cast-closing { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  font-style: italic; color: var(--nc-ink-soft); text-align: center; }
/* first-cast confirm gate — "is this the page they'll receive?" */
.ncp-confirm { margin-top: 16px; padding: 16px 18px; border: 1px solid rgba(224,160,64,0.45);
  background: linear-gradient(180deg, rgba(245,197,66,0.08), rgba(245,197,66,0.02));
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.ncp-confirm-q { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.06em; color: var(--nc-ink); line-height: 1.4; }
.ncp-confirm-actions { display: flex; align-items: center; gap: 16px; }
.ncp-confirm .ncp-btn-anchor { width: auto; flex: 0 0 auto; }
.ncp-confirm-later { background: none; border: none; cursor: pointer; font-family: var(--font-mono);
  font-size: 12px; color: var(--nc-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.ncp-confirm-later:hover { color: var(--nc-ink); }
.ncp-confirm-note { font-family: var(--font-mono); font-size: 10.5px; font-style: italic; color: var(--nc-ink-soft); line-height: 1.5; }
/* "Later" path — pulse + hint pointing at the home Cast button */
.ncp-point-pulse { animation: ncpPointPulse 1.1s ease-in-out 3; }
@keyframes ncpPointPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); }
  50% { box-shadow: 0 0 0 4px rgba(245,197,66,0.5), 0 6px 22px rgba(245,197,66,0.45); } }
/* the Later hint is appended to <body> and fixed-positioned (left/top set in JS) so NO ancestor
   overflow can clip it — that clipping is why the bubble showed up empty before. */
.ncp-point-hint { position: fixed; transform: translate(-50%, -100%); z-index: 9999;
  white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: #2a1c06;
  background: linear-gradient(180deg,#f5c542,#e0a040); padding: 7px 12px; border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45); pointer-events: none;
  opacity: 0; margin-top: 7px; transition: opacity 0.3s ease, margin-top 0.3s ease; }
.ncp-point-hint.on { opacity: 1; margin-top: 0; }
.ncp-point-hint.ncp-hint-below { transform: translate(-50%, 0); margin-top: -7px; }
.ncp-point-hint.ncp-hint-below.on { margin-top: 0; }
/* per-person constants now sit under the slider (each = one NaviStar) */
.ncp-howmany-perks { margin-top: 12px; }
/* CAST overlay: the left spine replaces the horizontal divider above the flow */
.ncp-panel-body-buy .ncp-panel-right { border-top: none; margin-top: 0; padding-top: 0; }
/* breathing room between the stacked sections in the right-hand flow */
.ncp-sec-spaced { margin-top: 26px; }
/* the quiet on-chain footnote — mint stays a mechanism, never a headline */
.ncp-cast-quiet {
  font-family: var(--font-mono); font-style: italic; font-size: 10px; line-height: 1.55;
  color: var(--nc-ink-soft); text-align: center; margin: 13px 0 4px;
}

/* ── project chooser — each button themed in its partner's own colours ────── */
.ncp-proj-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;
}
.ncp-proj-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; min-height: 128px; padding: 20px 16px; cursor: pointer; text-align: center; overflow: hidden;
  border-radius: 0; transition: transform 0.14s, box-shadow 0.14s, opacity 0.2s, filter 0.18s;
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
/* grainy cover layer — same language as the no-image station covers */
.ncp-proj-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  filter: url(#nc-grain); pointer-events: none;
}
/* Trees tile: green-tinted grain so the noise reads as forest, not blue */
.ncp-proj-trees::before { filter: url(#nc-grain-green); }
/* program name = hero, riding above the grain */
.ncp-proj-main { position: relative; z-index: 1; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.05em; line-height: 1.4; }

/* Restoration — a living forest cover */
.ncp-proj-trees {
  background: #06231a;
  border: 2px solid #2f7a4e; box-shadow: 0 5px 0 #154a30, inset 0 1px 0 rgba(255,255,255,0.12);
}
.ncp-proj-trees::before { background: radial-gradient(ellipse 130% 110% at 38% 30%, #36a86a 0%, #15643f 46%, #06231a 100%); }
.ncp-proj-trees .ncp-proj-main { color: #eaf7d2; text-shadow: 0 1px 5px rgba(0,0,0,0.45); }
.ncp-proj-trees .ncp-proj-check { background: #6b9b2e; color: #fff; }

/* C// — the human line on the chain: near-black with a green ember */
.ncp-proj-cslash {
  background: #020706;
  border: 2px solid #1f3c30; box-shadow: 0 5px 0 #0c1f16, inset 0 1px 0 rgba(255,255,255,0.08);
}
.ncp-proj-cslash::before { background: radial-gradient(ellipse 130% 110% at 38% 30%, #1b4d38 0%, #0a1f16 47%, #020706 100%); }
.ncp-proj-cslash .ncp-proj-main { color: #36e08a; text-shadow: 0 0 14px rgba(46,207,120,0.45); }
.ncp-proj-cslash .ncp-proj-check { background: #2ecf78; color: #050505; }

/* hover / press / selected — pixel-button feel (same hover language as the card rails) */
.ncp-proj-card:hover { transform: translateY(-2px); filter: brightness(1.07); }
.ncp-proj-card:active { transform: translateY(3px); }
.ncp-proj-cards.has-sel .ncp-proj-card:not(.is-on) { opacity: 0.4; filter: saturate(0.55); }
.ncp-proj-cards.has-sel .ncp-proj-card:not(.is-on):hover { opacity: 0.85; filter: saturate(0.9) brightness(1.05); }
.ncp-proj-card.is-on { transform: translateY(3px); }
.ncp-proj-trees.is-on { border-color: #8caf4f; box-shadow: 0 2px 0 #8caf4f, inset 0 1px 0 rgba(255,255,255,0.6); }
.ncp-proj-cslash.is-on { border-color: #2ecf78; box-shadow: 0 2px 0 #1f7d4b, inset 0 1px 0 rgba(255,255,255,0.07); }
/* selected check badge — top-right corner */
.ncp-proj-check {
  position: absolute; top: 0; right: 0; z-index: 2; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
  opacity: 0; transform: translate(3px,-3px); transition: opacity 0.15s, transform 0.15s;
}
.ncp-proj-card.is-on .ncp-proj-check { opacity: 1; transform: none; }

/* unified detail box — lead unit line sits above the stat cells */
.ncp-detail-lead {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--nc-ink-soft);
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(31,55,107,0.14);
}
.ncp-detail-lead strong { color: var(--nc-forest); font-weight: 700; }
.ncp-detail-dot {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--nc-mint); box-shadow: 0 0 6px rgba(79,150,230,0.5);
}
.ncp-detail-dot-amber { background: #c98a2e; box-shadow: 0 0 6px rgba(201,138,46,0.5); }

/* stat cells — airy eyebrow → confident value → whisper sub */
.ncp-stat-lbl {
  font-family: var(--font-pixel); font-size: 6.5px; letter-spacing: 0.16em;
  color: rgba(31,55,107,0.55); text-transform: uppercase; margin-bottom: 13px;
}
.ncp-stat-val { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--nc-ink); line-height: 1.25; }
.ncp-stat-sub {
  display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--nc-ink-soft);
  margin-top: 7px; letter-spacing: 0.01em; line-height: 1.4; opacity: 0.85;
}

/* Buy panel body — single column, stacked steps */
.ncp-panel-body-buy { align-items: start; }
.ncp-receipt-mt { margin-top: 22px; }

/* slider */
.ncp-slider-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ncp-slider { flex: 1; }
/* count — an editable number field disguised as the pixel value (click to type) */
.ncp-slider-val {
  font-family: var(--font-pixel); font-size: 15px; color: var(--nc-forest);
  width: 72px; text-align: right;
  background: transparent; border: none; border-bottom: 1px dashed rgba(31,55,107,0.35);
  padding: 2px 2px 3px; border-radius: 0; cursor: text; -moz-appearance: textfield;
}
.ncp-slider-val::-webkit-outer-spin-button,
.ncp-slider-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ncp-slider-val:focus { outline: none; border-bottom-color: #e0a040; }

/* unified support block — the receipt rows, the fine print, and the Support
   button read as ONE card (the "support table"), set clearly apart from the
   closing line below it. */
.ncp-support-block {
  background: rgba(31,55,107,0.04); border: 1px solid rgba(31,55,107,0.16);
  padding: 18px 20px; margin-bottom: 16px; border-radius: 0;
  /* match the upper mission table's crisp pixel-cut corners */
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
/* fine print lives inside the card now — a hairline separates it from the
   totals above, and it sits snug above the action button */
.ncp-support-block .ncp-receipt-note {
  margin: 0 0 14px; padding-top: 14px;
  border-top: 1px solid rgba(31,55,107,0.12);
}
/* the receipt total no longer needs a bottom gap — the payee line + the note's
   own divider handle the rhythm below it */
.ncp-support-block .ncp-receipt-total { margin-bottom: 0; }
/* payee — who the money goes to, tucked right under the total */
.ncp-receipt-payee {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--nc-ink-soft); margin: 4px 0 14px;
}
.ncp-receipt-payee strong { font-weight: 700; color: var(--nc-ink); }
.ncp-receipt-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--nc-ink);
  margin-bottom: 8px;
}
.ncp-receipt-incl em { font-style: italic; color: var(--nc-ink-soft); }
.ncp-receipt-divider { border: none; border-top: 1px solid rgba(31,55,107,0.2); margin: 12px 0; }
.ncp-receipt-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--nc-ink);
}
.ncp-receipt-total strong {
  font-family: var(--font-pixel); font-size: 16px; color: var(--nc-forest);
}
.ncp-receipt-note {
  font-family: var(--font-sans); font-style: italic; font-size: 11px; color: var(--nc-ink-soft);
  line-height: 1.6; margin-bottom: 20px; text-align: center;
}
.ncp-receipt-note strong { font-style: normal; }
/* what you receive — prominent gold row inside the support table */
.ncp-receipt-gift {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; padding: 12px 15px;
  border: 1px solid rgba(245,197,66,0.45);
  background: linear-gradient(90deg, rgba(245,197,66,0.12), rgba(245,197,66,0.03));
}
.ncp-receipt-gift-l {
  font-family: var(--font-mono); font-size: 13px; color: var(--nc-ink);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.ncp-receipt-gift-l strong {
  font-family: var(--font-pixel); font-size: 15px; color: #9a6a0d; margin: 0 3px; font-weight: 400;
}
.ncp-gift-star { color: #e0a040; font-size: 14px; }
.ncp-receipt-gift-r {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--nc-ink-soft); white-space: nowrap;
}

/* pool status in buy panel */
.ncp-buy-pool {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--nc-ink-soft);
  margin-bottom: 14px; line-height: 1.5;
}
.ncp-buy-pool strong { color: var(--nc-forest); }

/* CTA button — pay & anchor (label · live total · arrow) */
.ncp-btn-anchor {
  width: 100%; padding: 16px 20px; border: 2px solid #6e4a13; border-radius: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg,#d49636,#b07a1e); color: #fff5e6;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.07em;
  box-shadow: 0 5px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22);
  transition: transform 0.12s, box-shadow 0.12s;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.ncp-btn-anchor:hover { transform: translateY(2px); box-shadow: 0 3px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22); }
.ncp-btn-anchor:active { transform: translateY(5px); box-shadow: 0 0 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.18); }
.ncp-btn-anchor-amt {
  padding: 4px 10px; background: rgba(0,0,0,0.22); color: #fff;
  border-radius: 0; letter-spacing: 0.04em;
}
.ncp-btn-anchor-arr { font-family: var(--font-mono); font-size: 13px; }
/* locked — demo stations: Cast is read-only */
.ncp-btn-anchor-locked,
.ncp-btn-anchor-locked:hover,
.ncp-btn-anchor-locked:active {
  background: rgba(31,55,107,0.22); color: rgba(31,55,107,0.55);
  border-color: rgba(31,55,107,0.3); box-shadow: 0 5px 0 rgba(31,55,107,0.18);
  cursor: not-allowed; transform: none;
}
.ncp-btn-anchor-locked .ncp-btn-anchor-amt { background: rgba(31,55,107,0.18); color: rgba(31,55,107,0.6); }

/* send button — right-aligned, clean pixel press */
.ncp-btn-send {
  flex-shrink: 0; padding: 12px 24px; border: 2px solid #0b1830; border-radius: 0; cursor: pointer;
  background: var(--nc-forest); color: var(--nc-panel);
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.08em;
  box-shadow: 0 4px 0 #0b1830; transition: transform 0.1s, box-shadow 0.1s;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.ncp-btn-send:active { transform: translateY(4px); box-shadow: 0 0 0 #0b1830; }
.ncp-btn-send-locked { background: rgba(31,55,107,0.25) !important; color: rgba(31,55,107,0.55) !important; box-shadow: 0 4px 0 rgba(31,55,107,0.2) !important; cursor: not-allowed; }
/* section sub-label — "via Email" small note after a section title */
.ncp-sec-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--nc-ink-soft); text-transform: none; opacity: 0.75; margin-left: 6px; }

/* textarea in Broadcast */
.ncp-textarea {
  width: 100%; min-height: 100px; padding: 12px 14px; margin: 8px 0 12px;
  border: 1px solid rgba(31,55,107,0.28); border-radius: 0;
  background: var(--nc-panel); color: var(--nc-ink);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  resize: vertical; box-sizing: border-box;
}
.ncp-textarea:focus { outline: none; border-color: var(--nc-mint); }

/* pool status in broadcast */
.ncp-pool-status { font-family: var(--font-mono); font-size: 12px; color: var(--nc-ink); margin-bottom: 4px; line-height: 1.5; }
.ncp-pool-status strong { color: var(--nc-forest); font-weight: 700; }
.ncp-pool-status.mg-pool-empty { color: var(--nc-terra); }

/* send area — textarea full-width, footer row with hint + button */
.ncp-send-row { margin-bottom: 36px; }
.ncp-send-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 16px;
}
.ncp-send-hint {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--nc-ink-soft); line-height: 1.5;
}

/* pool title row — label + filters inline */
.ncp-pool-title-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.ncp-pool-title-row .manage-tree-filters { display: flex; gap: 8px; }

/* progress bar inside broadcast overlay */
.ncp-pool-progress { margin-bottom: 20px; }

/* responsive — stack on narrow */
@media (max-width: 680px) {
  .ncp-panel-body { grid-template-columns: 1fr; }
  .ncp-panel-left { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(31,55,107,0.16); padding-bottom: 24px; margin-bottom: 24px; }
  .ncp-panel-right { padding-left: 0; }
  .ncp-proj-cards { grid-template-columns: 1fr 1fr; }
}

/* ── space pixel-animations — NaviStar twinkle · Cast signal · Station radar ── */
@keyframes nsTwinkle {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.42; transform: scale(0.8); }
}
.ns-star { display: inline-block; animation: nsTwinkle 2.4s steps(3, jump-none) infinite; }
.ncp-perk-ico.ns-star { display: inline-flex; }
.edx-broadcast .ns-star { animation-delay: 0.5s; }
.home-st-share-cast .ns-star { animation-delay: 0.9s; }
.edx-buy .ns-star { animation-delay: 0.2s; }

/* Cast / Broadcast — a pixel signal ring blooms from the button on hover */
@keyframes nsSignal {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0.5; }
  100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}
.edx-broadcast, .home-st-share-cast, .ncp-btn-anchor { position: relative; overflow: hidden; }
.edx-broadcast::after, .home-st-share-cast::after,
.ncp-btn-anchor:not(.ncp-btn-anchor-locked)::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
  transform: translate(-50%,-50%) scale(0.3); pointer-events: none;
}
.edx-broadcast:hover::after, .home-st-share-cast:hover::after,
.ncp-btn-anchor:not(.ncp-btn-anchor-locked):hover::after { animation: nsSignal 0.7s steps(6); }

/* Station — the live signal dot emits a slow radar ping */
@keyframes nsRadarPing {
  0%       { transform: translate(-50%,-50%) scale(1);   opacity: 0.6; }
  70%,100% { transform: translate(-50%,-50%) scale(3.4); opacity: 0; }
}
.edx-signal-dot { position: relative; }
.edx-signal-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid #05FCC5; opacity: 0;
  transform: translate(-50%,-50%) scale(1); pointer-events: none;
  animation: nsRadarPing 2.6s steps(8) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ns-star, .edx-signal-dot::after,
  .edx-broadcast::after, .home-st-share-cast::after, .ncp-btn-anchor::after,
  .home-masthead-dot, .home-st-empty-spark,
  .edx-progress-zero .edx-progress-fill,
  .v2-seam .v2-seam-line::after, .v2-seam .v2-seam-node,
  .v2-lane-in, .v2-pop { animation: none !important; }
}

/* ═══ BUY/CAST overlay layout stability (fixes width-jump on project toggle +
   off-centre hero) ═══════════════════════════════════════════════════════════
   `align-items:start` made the stacked columns shrink to their content width, so
   the Trees vs C// detail (different natural widths) resized the panel and the
   centred hero sat left-of-centre. Stretch → full, stable width; hero truly centred.
   scrollbar-gutter keeps the centred panel from shifting when content height
   toggles the overlay scrollbar. */
.ncp-panel-body-buy { align-items: stretch; }
.manage-overlay.ncp-mg-open,
.manage-overlay.ncp-buy-open { scrollbar-gutter: stable both-edges; }

/* ═══ v2 flow (Stations/v2.html) ═══════════════════════════════════════════
   Principle: everything on-chain lives BELOW the two cards. The station panel
   above is purely the page layer — a SQUARE frame of the composed webpage (the
   same proportions as the cast modal's preview) sitting beside the station's
   own words and the free Broadcast layer ("this layer ends here"). The bottom
   strip (#v2-strip-mount) carries the unlock CTA while draft, and the signal +
   progress + Cast block once live. */

/* ── station panel: square frame | words ── */
.v2-canvas { padding: 18px 22px 22px; }
.v2-canvas-cols {
  display: grid; grid-template-columns: minmax(0, 440px) 1fr;
  gap: 26px; align-items: start;
}
.v2-canvas-frame {
  position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(130,162,212,0.18);
  background: #0a0f20;
  box-shadow: 0 18px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.v2-hero-frame { width: 100%; height: 100%; border: none; display: block; pointer-events: none; }
.v2-canvas-frame .home-st-empty { width: 100%; height: 100%; }
/* side column — one coherent text block (words → share row → note), vertically
   centred against the square frame; the share row follows the quote at a close,
   constant distance instead of drifting to the floor */
.v2-canvas-side {
  min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
.v2-canvas-side .edx-title { margin-top: 0; }
.v2-canvas-side .edx-quote { margin-bottom: 0; }
/* runaway words (no spaces) wrap instead of escaping the panel; a very long
   story becomes a quiet inner scroll — the frame itself never moves */
.v2-canvas-side .edx-title, .v2-canvas-side .edx-meta, .v2-canvas-side .edx-quote { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.v2-canvas-side .edx-quote { max-height: 168px; overflow-y: auto; }
/* date and host on their own lines — the text block flows taller, naturally */
.v2-canvas-side .v2-meta-host { margin-top: 5px; }
/* stacked, full-width share buttons; the note annotates Broadcast right below it */
.v2-canvas-side .home-st-share.v2-share-stack {
  margin-top: 20px; max-width: none;   /* stretch with the column, like Compose */
  flex-direction: column; gap: 9px;
}
.v2-share-stack .home-st-share-btn { width: 100%; padding: 11px 10px; }
.v2-share-stack .v2-bc-note,
.v2-share-stack .v2-compose-hint { margin-top: 2px; }
/* locked share — visible from day one, openly waiting for a canvas */
.v2-share-locked, .v2-share-locked:hover, .v2-share-locked:active {
  opacity: 0.45; cursor: not-allowed; transform: none;
}
/* the prominent "go compose" pointer (replaces the note until a canvas exists)
   — same one-line annotation family as the broadcast note, centred, gold */
.v2-compose-hint {
  margin-top: 9px; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.02em; line-height: 1.5; color: #e0a040; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-compose-hint .ns-star { color: #f5c542; }
@media (max-width: 980px) {
  .v2-canvas-cols { grid-template-columns: 1fr; }
  .v2-canvas-frame { max-width: 480px; }
}

/* ── module title rails — number tick · title · functional right slot ──
   ONE dim note line follows (always visible — no hover dance) */
.v2-sec-wrap { max-width: 1560px; margin: 0 auto; padding: 0 24px; }
.v2-sec-rail { display: flex; align-items: center; gap: 14px; margin: 28px 0 5px; min-width: 0; }
.v2-sec-num {
  flex: 0 0 auto; padding: 4px 7px 3px; line-height: 1;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.04em;
  border: 1px solid; border-radius: 0;
}
.v2-sec-blue .v2-sec-num { color: #57b6ee; border-color: rgba(24,176,245,0.4); }
.v2-sec-gold .v2-sec-num { color: #f5c542; border-color: rgba(245,197,66,0.4); }
.v2-sec-title { font-family: var(--font-pixel); font-size: 15px; letter-spacing: 0.05em; color: #eef4fb; flex: 0 0 auto; }
.v2-sec-blue .v2-sec-title { text-shadow: 0 0 16px rgba(24,176,245,0.25); }
.v2-sec-gold .v2-sec-title { text-shadow: 0 0 16px rgba(245,197,66,0.22); }
.v2-sec-right {
  margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(170,188,215,0.6);
}
.v2-sec-count { white-space: nowrap; }
.v2-sec-count b { font-family: var(--font-pixel); font-size: 11px; font-weight: 400; color: #f5c542; margin-right: 2px; }
.v2-sec-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(170,188,215,0.45); }
.v2-sec-note {
  margin: 0 0 14px; padding-left: 2px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em;
  color: rgba(170,188,215,0.5);
}

/* ── the seam — your page flows down into the chain (blue → gold) ──
   LIT: a light travels the wire to the star, looping gently.
   UNLIT (no page yet): wire + star dim — visible, waiting, no padlocks. */
.v2-seam { display: flex; flex-direction: column; align-items: center; margin: 2px 0 -10px; position: relative; z-index: 3; }
.v2-seam-line {
  position: relative; width: 1px; height: 44px; overflow: visible;
  /* feathered ends — the wire fades in from the panel and melts into the star */
  background: linear-gradient(180deg,
    rgba(24,176,245,0) 0%, rgba(24,176,245,0.45) 32%,
    rgba(245,197,66,0.5) 68%, rgba(245,197,66,0) 100%);
  transition: opacity 0.6s ease;
}
.v2-seam-line::after {
  content: ''; position: absolute; left: -1px; top: 0;
  width: 3px; height: 9px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, #f5c542);
  box-shadow: 0 0 6px rgba(245,197,66,0.8);
  opacity: 0;
}
.v2-seam.v2-lit .v2-seam-line::after { animation: v2Flow 2.6s linear infinite; }
@keyframes v2Flow {
  0% { transform: translateY(-6px); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(32px); opacity: 0; }
}
.v2-seam-node {
  margin-top: 2px; font-size: 10px; line-height: 1; color: #f5c542;
  text-shadow: 0 0 9px rgba(245,197,66,0.6);
  transition: color 0.6s ease, text-shadow 0.6s ease;
}
/* once lit, the star STAYS alive — a slow breathing glow */
.v2-seam.v2-lit .v2-seam-node { animation: v2NodeBreathe 2.6s ease-in-out infinite; }
@keyframes v2NodeBreathe {
  0%, 100% { text-shadow: 0 0 8px rgba(245,197,66,0.5); }
  50% { text-shadow: 0 0 16px rgba(245,197,66,0.95), 0 0 30px rgba(245,197,66,0.35); }
}
/* unlit — dimmed, but plainly there */
.v2-seam.v2-unlit .v2-seam-line { opacity: 0.25; }
.v2-seam.v2-unlit .v2-seam-node { color: rgba(245,197,66,0.28); text-shadow: none; }
/* ignition — ONE stronger pulse + a BIG star flare: the real unlock */
.v2-seam.v2-ignite .v2-seam-line::after { animation: v2FlowIgnite 0.45s ease-in 1; }
@keyframes v2FlowIgnite {
  0% { transform: translateY(-6px); opacity: 1; height: 14px; box-shadow: 0 0 12px rgba(245,197,66,1); }
  100% { transform: translateY(32px); opacity: 1; height: 14px; box-shadow: 0 0 12px rgba(245,197,66,1); }
}
.v2-seam.v2-ignite .v2-seam-node { animation: v2NodeFlare 1.5s ease-out 0.4s 1; }
@keyframes v2NodeFlare {
  0% { transform: scale(1); }
  28% { transform: scale(5.2); text-shadow: 0 0 46px rgba(245,197,66,1), 0 0 110px rgba(245,197,66,0.8), 0 0 180px rgba(245,197,66,0.45); }
  58% { transform: scale(3); text-shadow: 0 0 30px rgba(245,197,66,0.95), 0 0 80px rgba(245,197,66,0.55), 0 0 130px rgba(245,197,66,0.3); }
  100% { transform: scale(1); }
}
/* module two breathes with the wire — dim until the page exists */
#v2-acquire-mount, #v2-cast-mount { transition: opacity 0.7s ease, filter 0.7s ease; }
#v2-acquire-mount.v2-unlit, #v2-cast-mount.v2-unlit { opacity: 0.45; filter: saturate(0.55); }

/* ── module two: the on-chain stratum (lens + lane) ── */
#v2-acquire-mount {
  /* a whisper of gold ground — the bloom lives fully INSIDE the section,
     zero at its edges, so no boundary line can ever show */
  background: radial-gradient(55% 220px at 50% 250px, rgba(245,197,66,0.05), transparent 72%);
}
.v2-acquire .v2-buy-cols { margin-top: 0; }
/* 02 never breathes on kind switch — both columns lock to the tallest kind's
   height (Standard's lighter detail no longer shrinks the module) */
@media (min-width: 981px) { .v2-acquire .v2-buy-cols { min-height: 500px; } }
/* the carried page — words left, a live miniature of the canvas right */
.v2-carry-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.v2-carry-words { min-width: 0; }
.v2-mini-frame {
  flex: 0 0 52px; width: 52px; height: 52px; margin-bottom: 6px;
  border: 1px solid rgba(130,162,212,0.28); border-radius: 8px;
  overflow: hidden; background: #0a0f20; position: relative;
}
.v2-mini-frame iframe { border: none; display: block; pointer-events: none; }
/* the charitable destination — visible BEFORE the money modal */
.v2-drop-line {
  margin: 12px 0 8px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.03em; color: #b88a24;
}
.v2-drop-line strong { color: #e0a040; }
/* three kind-cards in one row */
.v2-proj-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ncp-proj-price {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.62);
}
/* plain card — structure blue (canon): no mission, just the on-chain star */
.ncp-proj-plain {
  background: #0b1430;
  border: 2px solid #2c4a8a; box-shadow: 0 5px 0 #16264e, inset 0 1px 0 rgba(255,255,255,0.08);
}
.ncp-proj-plain::before { background: radial-gradient(ellipse 130% 110% at 38% 30%, #3c4148 0%, #23262b 47%, #121417 100%); }
.ncp-proj-plain .ncp-proj-main { color: #d4dae2; text-shadow: 0 0 12px rgba(220,228,240,0.28); }
.ncp-proj-plain .ncp-proj-check { background: #aab3bf; color: #14161a; }
.ncp-detail-dot-blue { background: #3a82c8; }

/* ── per-type chips (cast-as + add modal) ── */
.v2-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border: 1px solid rgba(130,162,212,0.22); border-radius: 7px;
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono); font-size: 10px; color: rgba(200,214,235,0.75);
}
.v2-chip b { font-family: var(--font-pixel); font-size: 9px; font-weight: 400; color: #dce8f7; }
.v2-chip-glyph { font-size: 11px; line-height: 1; }
.v2-chip-cslash .v2-chip-glyph { font-family: var(--font-pixel); font-size: 8px; color: #36e08a; }
.v2-chip-plain .v2-chip-glyph { color: #f5c542; }

/* cast-as selector — which kind goes out */
.v2-castas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; }
.v2-castas-lbl { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.08em; color: var(--nc-ink-soft); margin-right: 2px; }
.v2-castas-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid rgba(130,162,212,0.25); border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(200,214,235,0.8);
  transition: border-color 0.12s, background 0.12s;
}
.v2-castas-chip b { font-family: var(--font-pixel); font-size: 9px; font-weight: 400; margin-left: 2px; }
.v2-castas-chip.active { border-color: #e0a040; background: rgba(245,197,66,0.08); color: #f5c542; }
.v2-castas-chip:disabled { opacity: 0.35; cursor: not-allowed; }

.v2-pool-empty { padding: 20px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--nc-ink-soft); }

/* ── the LANE — the selected kind's inventory + dispatch (right column) ── */
.v2-lane {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 18px 20px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(130,162,212,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
/* the lane wears its kind's colour — same object as the selected card */
.v2-lane-trees { border-color: rgba(54,168,106,0.5); }
.v2-lane-cslash { border-color: rgba(58,130,200,0.55); }
/* lens switch: the lane answers the card */
.v2-lane-in { animation: v2LaneIn 0.18s ease-out; }
@keyframes v2LaneIn { from { opacity: 0.25; transform: translateX(7px); } to { opacity: 1; transform: none; } }
/* the lens row — top-aligned with the lane box across the gutter */
.v2-lens { margin-bottom: 14px; }
.v2-carry-row { margin: 16px 0 10px; }
/* lane head left group — count with its ＋ beside it */
.v2-lane-left { display: inline-flex; align-items: center; gap: 14px; }
.v2-lens .v2-proj-cards { margin-bottom: 0; }
/* head: the COUNT leads, the kind badge + ＋ hold the corner */
.v2-lane-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.v2-lane-count { font-family: var(--font-mono); font-size: 12px; color: rgba(200,214,235,0.75); display: inline-flex; align-items: baseline; gap: 8px; }
.v2-lane-count b { font-family: var(--font-pixel); font-size: 18px; font-weight: 400; color: #f5c542; }
.v2-lane-side { display: inline-flex; align-items: center; gap: 12px; }
/* kind badge — bold pixel chip, FIXED colours: trees green · C// blue */
.v2-lane-kind {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.06em;
  padding: 6px 11px; border-radius: 7px; border: 1px solid; line-height: 1.4;
}
.v2-lane-kind-trees { color: #6fe09a; border-color: rgba(54,168,106,0.6); background: rgba(54,168,106,0.13); }
.v2-lane-kind-cslash { color: #57b6ee; border-color: rgba(58,130,200,0.6); background: rgba(58,130,200,0.13); }
.v2-lane-glyph-cslash { font-family: var(--font-pixel); font-size: 8px; color: #36e08a; }
.v2-lane-glyph-plain { color: #f5c542; }
/* peek — the three most recent rows, always visible (the lane never feels bare) */
.v2-lane-inv { margin-top: 14px; }
.v2-inv-title { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.09em; color: rgba(238,244,251,0.92); margin-bottom: 9px; }
.v2-inv-filters { justify-content: flex-start; margin-bottom: 8px; }
/* the ledger — read-only record, collapsed by default */

/* mint modal kind chip — solid, loud, ONE plan colour per kind */
.v2-add .v2-chip { border-width: 1px; font-weight: 700; }
.v2-add .v2-chip-trees { background: #6fe09a; border-color: #6fe09a; color: #0b2818; }
.v2-add .v2-chip-cslash { background: #f5c542; border-color: #f5c542; color: #2b2008; }
.v2-add .v2-chip-plain { background: #e9eff8; border-color: #e9eff8; color: #1a2233; }
.v2-add .v2-chip .v2-chip-glyph { color: inherit; }
.v2-lane-pool-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 8px; }
.v2-lane-list { height: 240px; overflow-y: auto; margin-bottom: 0; }
/* % sits alone above its bar — keep it on the right edge */
.edx-progress-top-pct { justify-content: flex-end; }
/* the small ＋ — original gold pixel button at lane scale */
.v2-lane-plus {
  width: 34px; height: 34px; font-size: 16px;
  box-shadow: 0 3px 0 #6e4a13;
  clip-path: polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
}
.v2-lane-progress { margin-bottom: 0; }
.v2-lane-progress .edx-progress-bar { height: 6px; margin-bottom: 7px; }
.v2-lane-progress .edx-progress-pct { font-size: 12px; }
.v2-lane-note {
  margin: 12px 0 14px; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.03em; color: rgba(170,188,215,0.45);
}
/* ══ 02 STATUS PLATE — the lane after minting: an on-chain certificate.
   No counts, no lists (03 owns those). Kind accent + ceremony. ══ */
.v2-plate {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  padding: 16px 22px 14px; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.045), transparent 60%),
    rgba(10,16,32,0.55);
  border: 1px solid rgba(130,162,212,0.22);
}
.v2-plate-trees { border-color: rgba(111,224,154,0.32); }
.v2-plate-cslash { border-color: rgba(245,197,66,0.5); }
.v2-plate-plain { border-color: rgba(245,197,66,0.3); }
.v2-plate-corner { position: absolute; width: 10px; height: 10px; border: 1px solid rgba(245,197,66,0.55); }
.v2-pc-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.v2-pc-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.v2-pc-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.v2-pc-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.v2-plate-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,0.022) 3px 4px);
}
.v2-plate-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.14em; color: #f5c542;
}
.v2-plate-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #f5c542;
  animation: v2PlateBreathe 2.6s ease-in-out infinite;
}
@keyframes v2PlateBreathe {
  0%, 100% { box-shadow: 0 0 4px rgba(245,197,66,0.5); }
  50% { box-shadow: 0 0 12px rgba(245,197,66,0.95), 0 0 22px rgba(245,197,66,0.35); }
}
.v2-plate-core { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: auto 0 2px; padding-top: 6px; }
/* the mission table, bisected: blue half (voice) | green half (tree) */
.v2-mission-cols { display: flex; gap: 0; margin: 4px 0 2px; }
.v2-mc { flex: 1 1 0; min-width: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.v2-mc-voice { border-right: 1px solid rgba(130,162,212,0.18); }
.v2-mc-title { font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.14em; }
.v2-mc-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v2-yt-tiny { padding: 4px 8px; font-size: 9.5px; margin: -4px 0; }
.v2-yt-tiny .v2-yt-arr { font-size: 9.5px; }
.v2-mc-voice .v2-mc-title { color: #5fc9d8; text-shadow: 0 0 8px rgba(95,201,216,0.4); }
.v2-mc-tree .v2-mc-title { color: #5fd8ae; text-shadow: 0 0 8px rgba(95,216,174,0.4); }
.v2-mc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; }
.v2-mc-row span { color: rgba(170,188,215,0.5); }
.v2-mc-row b { color: rgba(225,234,247,0.92); font-weight: 600; text-align: right; min-width: 0; }

/* ── minted lens cards wear the station's own cover — quieted hard, text first.
   SAME image, two gradings: C// keeps a moody trace of colour; Standard goes
   monochrome. The grain rides ON the photo so the pixel texture survives. ── */
.v2-card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.v2-card-bg::after { content: ''; position: absolute; inset: 0; }
.ncp-proj-card.v2-has-bg::before { display: none; }   /* photo replaces the gradient ground */
.v2-has-bg .ncp-proj-main, .v2-has-bg .ncp-proj-price { position: relative; z-index: 1; }
.v2-has-bg .ncp-proj-check, .v2-has-bg .v2-minted-tag { z-index: 2; }
.ncp-proj-cslash .v2-card-bg { filter: url(#nc-grain-gold) saturate(0.45) brightness(0.62) contrast(1.05); }
.ncp-proj-cslash .v2-card-bg::after { background: linear-gradient(180deg, rgba(10,16,34,0.5), rgba(10,16,34,0.84)); }
.ncp-proj-plain .v2-card-bg { filter: url(#nc-grain-cool) grayscale(1) brightness(0.58) contrast(1.12); }
.ncp-proj-plain .v2-card-bg::after { background: linear-gradient(180deg, rgba(8,10,14,0.52), rgba(8,10,14,0.86)); }

/* C// detail cells carry the mission colours — Standard's stay plain slate */
.v2-cell-gold .ncp-stat-lbl { color: rgba(245,197,66,0.85); text-shadow: 0 0 8px rgba(245,197,66,0.3); }
.v2-cell-voice .ncp-stat-lbl { color: #5fc9d8; text-shadow: 0 0 8px rgba(95,201,216,0.3); }
.v2-cell-tree .ncp-stat-lbl { color: #5fd8ae; text-shadow: 0 0 8px rgba(95,216,174,0.3); }

/* S3(0702): 02 MINT copy — gold accents so station ranks EQUAL to C//; sovereign badge;
   glow title bolds; the stamp line + footnote link. */
.v2-gold { color: #f5c542; font-weight: 700; text-shadow: 0 0 9px rgba(245,197,66,0.3); }
.v2-gold-ni { color: #f5c542; font-weight: 700; font-style: normal; }   /* gold bold inside an italic run */
.v2-tail { font-style: italic; color: rgba(200,214,235,0.62); }
.v2-proj-sov {
  position: relative; z-index: 1; font-family: var(--font-mono); font-size: 7px;
  letter-spacing: 0.18em; color: rgba(245,197,66,0.9); text-shadow: 0 0 8px rgba(245,197,66,0.3);
}
.v2-stamp-line { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; margin: 10px 0 16px; }   /* S2-02 tweak: breathing room before the footnote rule below */
.v2-note-link {
  color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.7);
  text-underline-offset: 2px; white-space: nowrap; transition: color 0.15s, text-decoration-color 0.15s;
}
.v2-note-link:hover { color: #fff; text-decoration-color: #fff; }

/* Checkout consent gate (Ellen 0701/0703) — disabled-until-checked rows + linked terms.
   Sits inside the dark confirm panels; the pay button locks until every box is ticked. */
.v2-consent { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; text-align: left; }
.v2-consent-row { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.v2-consent-cb { flex: 0 0 auto; width: 15px; height: 15px; margin: 1px 0 0; accent-color: #e0a040; cursor: pointer; }
.v2-consent-txt { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: rgba(200,214,235,0.82); }
.v2-consent-link { color: #f5c542; text-decoration: underline; text-underline-offset: 2px; }
.v2-consent-link:hover { color: #ffd968; }
.v2-consent-row.is-checked .v2-consent-txt { color: rgba(214,226,244,0.95); }
.v2-btn-locked { opacity: 0.4; filter: saturate(0.4); cursor: not-allowed; }

/* ── C// plate: big title · tagline · wave only · two object tags ── */
.v2-plate-cs-tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(245,197,66,0.7); }
/* ONE caption line under the wave — same teal as the wave, nothing else */
.v2-plate-objline {
  margin-top: 12px; font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.12em;
  color: #5fc9d8; text-shadow: 0 0 9px rgba(95,201,216,0.5); white-space: nowrap;
}
.v2-plate-wave.v2-plate-wave-big { height: 100px; gap: 7px; }
.v2-plate-wave.v2-plate-wave-big i { width: 7px; border-radius: 3px; }


/* the duo — no frame, no divider: two groups simply apart, each on a soft
   borderless glow that fades to nothing */
.v2-plate-duo { display: flex; align-items: flex-end; gap: 52px; }
.v2-duo-half {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 11px; padding: 14px 10px 2px;
}
.v2-duo-word { font-family: var(--font-pixel); font-size: 7.5px; letter-spacing: 0.12em; white-space: nowrap; }
.v2-plate-cs-title {
  font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.12em; color: #f5c542;
  text-shadow: 0 0 12px rgba(245,197,66,0.5), 0 0 26px rgba(245,197,66,0.22);
  margin-bottom: 10px;
}
.v2-duo-word-voice { color: #5fc9d8; text-shadow: 0 0 10px rgba(95,201,216,0.55); }
.v2-duo-word-tree { color: #5fd8ae; text-shadow: 0 0 10px rgba(95,216,174,0.55); }
.v2-duo-voice { background: none; }
.v2-duo-tree { background: none; }
.v2-plate-core-lbl { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.12em; color: rgba(238,244,251,0.85); }
.v2-plate-trees .v2-plate-core-lbl { color: #6fe09a; }
.v2-plate-cslash .v2-plate-core-lbl { color: #57b6ee; }
.v2-plate-plain .v2-plate-core-lbl { color: #f5c542; }
.v2-plate-glyph { font-size: 36px; line-height: 1; }
.v2-plate-tree { line-height: 0; animation: v2TreeGlow 3.2s ease-in-out infinite; }
@keyframes v2TreeGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(95,216,174,0.5)); }
  50% { filter: drop-shadow(0 0 19px rgba(95,216,174,0.85)); }
}
.v2-px-tree { transform-origin: 50% 92%; animation: v2TreeSway 4.6s ease-in-out infinite; }
@keyframes v2TreeSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.v2-px-s { opacity: 0; animation: v2PxSpark 3.6s ease-in-out infinite; }
.v2-px-s2 { animation-delay: 1.2s; }
.v2-px-s3 { animation-delay: 2.4s; }
@keyframes v2PxSpark { 0%, 70%, 100% { opacity: 0; } 78%, 88% { opacity: 1; } }
.v2-plate-wave { display: flex; align-items: center; gap: 5px; height: 54px; }
.v2-plate-wave i {
  width: 5px; height: 100%; border-radius: 2px; background: #5fc9d8;
  box-shadow: 0 0 11px rgba(95,201,216,0.65);
  animation: v2Wave 1.5s ease-in-out infinite; transform-origin: center;
}
.v2-plate-wave i:nth-child(1) { animation-delay: 0s; } .v2-plate-wave i:nth-child(2) { animation-delay: 0.14s; }
.v2-plate-wave i:nth-child(3) { animation-delay: 0.28s; } .v2-plate-wave i:nth-child(4) { animation-delay: 0.42s; }
.v2-plate-wave i:nth-child(5) { animation-delay: 0.56s; } .v2-plate-wave i:nth-child(6) { animation-delay: 0.7s; }
.v2-plate-wave i:nth-child(7) { animation-delay: 0.84s; }
.v2-plate-wave i:nth-child(8) { animation-delay: 0.98s; }
.v2-plate-wave i:nth-child(9) { animation-delay: 1.12s; }
.v2-plate-wave i:nth-child(10) { animation-delay: 1.26s; }
.v2-plate-wave i:nth-child(11) { animation-delay: 1.4s; }
@keyframes v2Wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.v2-plate-orbit {
  position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(245,197,66,0.45); border-radius: 50%;
  animation: v2Orbit 14s linear infinite;
}
.v2-plate-orbit .v2-plate-star { font-size: 22px; color: #f5c542; text-shadow: 0 0 12px rgba(245,197,66,0.7); animation: v2OrbitCounter 14s linear infinite; }
@keyframes v2Orbit { to { transform: rotate(360deg); } }
@keyframes v2OrbitCounter { to { transform: rotate(-360deg); } }
.v2-plate-rows { width: 100%; max-width: 360px; margin: 12px auto auto; }
.v2-plate-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 2px; border-bottom: 1px solid rgba(130,162,212,0.12);
  font-family: var(--font-mono); font-size: 11.5px;
}
.v2-plate-row:last-child { border-bottom: none; }
.v2-plate-k { font-size: 9px; letter-spacing: 0.16em; color: rgba(170,188,215,0.5); }
.v2-plate-v { color: rgba(225,234,247,0.92); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-plate-tx { color: #f5c542; }
.v2-plate-more {
  margin-top: auto; padding: 8px 16px; margin-bottom: 2px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(130,162,212,0.3); border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(210,223,242,0.85); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.v2-plate-more:hover { color: #f5c542; border-color: rgba(245,197,66,0.5); }
.v2-plate .v2-plate-more, .v2-plate .v2-lane-demo { margin-top: 16px; }
/* first mint — the plate STAMPS in, then its lines light one by one */
.v2-plate-fresh { animation: v2Stamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes v2Stamp {
  0% { transform: scale(1.05); filter: brightness(1.7); }
  100% { transform: scale(1); filter: brightness(1); }
}
.v2-plate-fresh .v2-plate-anim, .v2-plate-fresh .v2-plate-row { opacity: 0; animation: v2RowIn 0.4s ease forwards; }
.v2-plate-fresh .v2-plate-status { animation-delay: 0.15s; }
.v2-plate-fresh .v2-plate-core { animation-delay: 0.3s; }
.v2-plate-fresh .v2-plate-row:nth-child(1) { animation-delay: 0.45s; }
.v2-plate-fresh .v2-plate-row:nth-child(2) { animation-delay: 0.55s; }
.v2-plate-fresh .v2-plate-row:nth-child(3) { animation-delay: 0.65s; }
.v2-plate-fresh .v2-plate-row:nth-child(4) { animation-delay: 0.75s; }
.v2-plate-fresh .v2-plate-row:nth-child(5) { animation-delay: 0.85s; }
.v2-plate-fresh .v2-plate-row:nth-child(6) { animation-delay: 0.95s; }
.v2-plate-fresh .v2-plate-more, .v2-plate-fresh .v2-lane-demo { animation-delay: 1.05s; }
@keyframes v2RowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ══ 03 INVENTORY PANEL — the station's whole stock, beside the act ══ */
.v2-inv-panel {
  display: flex; flex-direction: column;
  padding: 18px 20px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(130,162,212,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
.v2-inv-views { display: flex; gap: 2px; }
.v2-inv-v {
  padding: 4px 8px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: rgba(170,188,215,0.55); border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.v2-inv-v:hover { color: rgba(220,230,245,0.85); }
.v2-inv-v.active { color: #f5c542; border-bottom-color: rgba(245,197,66,0.6); }
.v2-inv-t {
  padding: 5px 10px; background: rgba(255,255,255,0.03); cursor: pointer;
  border: 1px solid rgba(130,162,212,0.25); border-radius: 7px;
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(200,214,235,0.75);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.v2-inv-t.active { background: rgba(245,197,66,0.92); border-color: #f5c542; color: #2b2008; font-weight: 700; }
.v2-inv-t-trees.active { background: #6fe09a; border-color: #6fe09a; color: #0b2818; }
.v2-inv-t-cslash.active { background: #57b6ee; border-color: #57b6ee; color: #07233a; }
.v2-inv-g { font-size: 11px; flex: 0 0 22px; }
.v2-cast-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; margin-top: 12px; }
.v2-cast-cols .v2-cast-one { width: auto; max-width: none; margin: 0; justify-content: center; }
@media (max-width: 980px) { .v2-cast-cols { grid-template-columns: 1fr; } }

/* floating Menu button — positioning lives HERE too as a safety net: if a
   stale preview-dark.css ever loads, the button must still pin to the corner */
.ncp-nav-toggle { position: fixed !important; top: 16px !important; right: 18px !important; z-index: 460 !important; }

/* sync toast — non-blocking, floats above everything, says one thing */
.v2-sync-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px);
  padding: 10px 18px; border-radius: 9px; z-index: 1200; pointer-events: none;
  background: rgba(12,18,36,0.92); border: 1px solid rgba(245,197,66,0.45);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 18px rgba(245,197,66,0.15);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: #f2d98c;
  opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap; max-width: calc(100vw - 40px); overflow: hidden; text-overflow: ellipsis;
}
.v2-sync-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the EMPTY lane borrows the plate's ceremony — staggered light-up + a
   breathing mint button that asks to be pressed */
.v2-zero-fresh .v2-lane-pitch, .v2-zero-fresh .v2-lane-mint, .v2-zero-fresh .v2-lane-demo {
  opacity: 0; animation: v2RowIn 0.45s ease forwards;
}
.v2-zero-fresh .v2-lane-pitch { animation-delay: 0.12s; }
.v2-zero-fresh .v2-lane-demo { animation-delay: 0.3s; }
.v2-zero-fresh .v2-lane-mint {
  animation: v2RowIn 0.45s ease 0.3s forwards, v2MintBeckon 2.8s ease-in-out 1.2s infinite;
}
@keyframes v2MintBeckon {
  0%, 100% { box-shadow: 0 5px 0 #8a5e14; filter: brightness(1); }
  50% { box-shadow: 0 5px 0 #8a5e14, 0 0 22px rgba(245,197,66,0.4); filter: brightness(1.12); }
}

/* leaves — small pixels let go of the canopy and flutter down */
.v2-px-leaf { opacity: 0; transform-box: fill-box; transform-origin: center; }
.v2-px-l1 { animation: v2LeafFall 4.2s linear 0.4s infinite; }
.v2-px-l2 { animation: v2LeafFall 4.8s linear 1.8s infinite; }
.v2-px-l3 { animation: v2LeafFall 4.5s linear 3s infinite; }
.v2-px-l4 { animation: v2LeafFall 5.2s linear 2.4s infinite; }
@keyframes v2LeafFall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: 0.95; }
  30% { transform: translate(7px, 12px) rotate(95deg); }
  55% { transform: translate(-4px, 24px) rotate(190deg); opacity: 0.85; }
  80% { transform: translate(6px, 36px) rotate(280deg); opacity: 0.5; }
  100% { opacity: 0; transform: translate(-2px, 46px) rotate(360deg); }
}

/* NaviStar — the word's ONE appearance, gold and starred */
.v2-ns-gold { color: #f5c542; font-weight: 700; }

/* ── module three: just the act — a small centred deck, the button is the point ── */
.v2-seam-2 .v2-seam-line { height: 26px; }
/* the lens remembers: a kind already minted wears its proof */
.v2-minted-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 6px; border: 1px solid rgba(245,197,66,0.5); border-radius: 4px;
  background: rgba(12,18,36,0.72);
  font-family: var(--font-pixel); font-size: 6px; letter-spacing: 0.1em; color: #f5c542;
}

/* v2 inventory rows carry FIVE fields — give header + rows one shared 5-col grid
   (the base .manage-tree-row grid is 4-col and silently wrapped the date) */
.v2-inv-scroll .manage-tree-row {
  grid-template-columns: 0.55fr 0.75fr 1.45fr 1fr 0.75fr;
  gap: 12px; padding: 10px 12px;
}
.v2-inv-mail {
  font-family: var(--font-mono); font-size: 11px; color: rgba(200,214,235,0.8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.v2-inv-mail-none { color: rgba(170,188,215,0.35); }
/* inside the table, no kind theatrics — both types share one quiet tone */
.v2-inv-scroll .v2-inv-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
}
.v2-inv-scroll .v2-k-cslash { color: #f5c542; }
.v2-inv-scroll .v2-k-plain { color: rgba(235,242,251,0.92); }
.v2-inv-scroll .v2-inv-k { flex: none; }
/* inventory table header — INSIDE the scroll area so columns share one geometry;
   sticky, so the names stay while the rows roll under them */
.v2-inv-thead {
  position: sticky; top: 0; z-index: 2;
  padding: 5px 2px 7px; margin-bottom: 2px; pointer-events: none;
  background: #10172b;
  border-bottom: 1px solid rgba(130,162,212,0.18);
}
.v2-inv-thead span {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em;
  color: rgba(170,188,215,0.45);
}
.v2-inv-thead .manage-tree-status::before { display: none; }

/* ── 03: ONE panel, one top-down flow — scope · cast · pool breakdown ── */
.v2-cast-panel {
  display: flex; flex-direction: column; gap: 11px;
  margin: 12px 0 0; padding: 24px 26px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(130,162,212,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
.v2-cp-rule { height: 1px; background: rgba(130,162,212,0.16); margin: 3px 0; }
.v2-cast-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-scope-lbl { margin-right: 6px; }
.v2-cast-scope .v2-inv-quickadd { margin-left: auto; }
.v2-cast-scope .v2-dis-chip { padding: 7px 14px; }
.v2-cast-scope .v2-dis-chip.active { transform: translateY(-1px); font-weight: 700; }
.v2-cast-scope .v2-dis-chip.active::before { content: '✓ '; }
.v2-cast-scope .v2-dis-trees.active { box-shadow: 0 0 16px rgba(111,224,154,0.45); }
.v2-cast-scope .v2-dis-cslash.active { box-shadow: 0 0 16px rgba(245,197,66,0.45); }
.v2-cast-scope .v2-dis-plain.active { box-shadow: 0 0 16px rgba(233,239,248,0.35); }
.v2-dis-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* inside the one box: the act left, the books right, one hairline between */
.v2-cp-cols { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; }
.v2-cp-left { display: flex; flex-direction: column; gap: 11px; padding-right: 38px; min-width: 0; }
.v2-cp-left .v2-dis-emails { flex: 1 1 auto; }
.v2-cp-right { display: flex; flex-direction: column; gap: 13px; padding-left: 38px; border-left: 1px solid rgba(130,162,212,0.16); min-width: 0; }
.v2-cp-right .v2-inv-head { margin-bottom: 0; }
/* the one gap the eye needs: progress bar ⇢ table */
.v2-cp-right .v2-lane-progress { margin-bottom: 14px; }
.v2-cast-panel .v2-realm-gold { margin-top: 12px; }
@media (max-width: 980px) {
  .v2-cp-cols { grid-template-columns: 1fr; }
  .v2-cp-right { border-left: none; padding-left: 0; margin-top: 14px; }
  .v2-cp-left { padding-right: 0; }
}
.v2-dis-emails { min-height: 96px; resize: none; }
.v2-cast-panel .v2-cast-btn { margin-bottom: 0; }
/* the cast confirm — a small modal beat between writing and sending */
.v2-castcf .ncp-panel { max-width: 520px; }
.v2-ccf-body { display: flex; flex-direction: column; gap: 11px; padding: 24px 30px 22px; }
.v2-ccf-body .v2-cc-list { max-height: 168px; }
.v2-cc-title { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.1em; color: #f5c542; }
.v2-cc-list { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: rgba(210,223,242,0.85); max-height: 96px; overflow-y: auto; overflow-wrap: anywhere; }
.v2-cc-actions { display: flex; align-items: stretch; gap: 10px; }
.v2-cc-edit {
  padding: 8px 14px; background: rgba(255,255,255,0.03); cursor: pointer;
  border: 1px solid rgba(130,162,212,0.3); border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(210,223,242,0.85);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.v2-cc-edit:hover { color: #f5c542; border-color: rgba(245,197,66,0.5); }
.v2-cc-go { flex: 1 1 auto; padding-top: 12px; padding-bottom: 12px; }
.v2-cast-panel .v2-cast-note { white-space: nowrap; }
.v2-cast-panel .v2-lane-demo { text-align: center; }
.v2-cast-panel .v2-lane-list { height: 290px; }
/* the left column's own head: the scoped held count, LOUD, with the ＋ */
.v2-held-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.v2-held-big { font-family: var(--font-mono); font-size: 13px; color: rgba(200,214,235,0.8); }
.v2-held-big b { font-family: var(--font-pixel); font-size: 26px; font-weight: 400; color: #f5c542; margin-right: 8px; }
.v2-dis-emails { min-height: 160px; }
@media (max-width: 980px) { .v2-cast-panel .v2-cast-note { white-space: normal; } }
.v2-dis-as { font-family: var(--font-mono); font-size: 11.5px; color: rgba(200,214,235,0.8); }
.v2-dis-as b { font-weight: 600; }

/* the Plan pill — quiet by default (just ⚡ N), unfolds on hover */
.v2-plan-pill {
  position: fixed; top: 23px; right: 72px; z-index: 419;
  display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 11px;
  background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  font-family: var(--font-mono); font-size: 11px; color: rgba(205,221,242,0.5); cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.v2-plan-pill b {
  font-family: var(--font-pixel); font-size: 9.5px; font-weight: 400;
  color: rgba(245,197,66,0.65); margin-left: 5px;
  transition: color 0.25s ease;
}
.v2-pp-sep {
  width: 0; height: 12px; background: rgba(120,170,230,0.3); margin: 0;
  transition: width 0.3s ease, margin 0.3s ease;
}
.v2-pp-tier {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-weight: 600; color: #e7eefb;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.3s ease;
}
.v2-plan-pill:hover {
  background: rgba(16,28,52,0.8); border-color: rgba(245,197,66,0.5);
  color: rgba(205,221,242,0.9);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(245,197,66,0.15);
}
.v2-plan-pill:hover b { color: #f5c542; }
body.ncp-nav-open .v2-plan-pill { opacity: 0; pointer-events: none; }
.v2-plan-pill:hover .v2-pp-sep { width: 1px; margin: 0 9px; }
.v2-plan-pill:hover .v2-pp-tier { max-width: 90px; opacity: 1; }
/* out of credits (free tier): the pill stays unfolded and glows warm */
.v2-plan-pill.v2-pp-out { border-color: rgba(224,160,64,0.55); color: rgba(232,200,150,0.9); animation: v2PillDry 2.6s ease-in-out infinite; }
.v2-plan-pill.v2-pp-out b { color: #e0a040; }
.v2-plan-pill.v2-pp-out .v2-pp-sep { width: 1px; margin: 0 9px; }
.v2-plan-pill.v2-pp-out .v2-pp-tier { max-width: 90px; opacity: 1; color: #f5c542; }
@keyframes v2PillDry {
  0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,0.25); }
  50% { box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 14px rgba(224,160,64,0.45); }
}

/* the merged Plan modal: balance bar above the cards */
.v2-balbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 4px 2px 16px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(130,162,212,0.16);
}
/* credit consumption history (#3) — the user's own ledger inside Plan & Credits */
.v2-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(130,162,212,0.16); }
.v2-hist-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(170,188,215,0.7); margin-bottom: 8px; }
.v2-hist-load, .v2-hist-empty { font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.55); padding: 6px 2px; }
.v2-hist-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(130,162,212,0.08); font-family: var(--font-mono); font-size: 12px; }
.v2-hist-k { color: rgba(205,216,239,0.92); }
.v2-hist-when { color: rgba(170,188,215,0.5); font-size: 10.5px; margin-left: auto; white-space: nowrap; }
.v2-hist-d { font-family: var(--font-pixel); font-size: 15px; min-width: 48px; text-align: right; }
.v2-hist-neg { color: #e0896b; }
.v2-hist-pos { color: #5fd8ae; }
.v2-balbar-n { font-family: var(--font-mono); font-size: 13px; color: rgba(200,214,235,0.85); white-space: nowrap; }
.v2-balbar-n b { font-family: var(--font-pixel); font-size: 25px; font-weight: 400; color: #f5c542; margin: 0 4px; }
.v2-balbar-meta { font-family: var(--font-mono); font-size: 10.5px; color: rgba(170,188,215,0.6); text-align: right; margin-left: auto; }
.v2-balbar-add {
  align-self: center; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: rgba(245,197,66,0.85); background: rgba(245,197,66,0.07);
  border: 1px solid rgba(245,197,66,0.30); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.v2-balbar-add:hover { background: rgba(245,197,66,0.14); border-color: rgba(245,197,66,0.55); color: #f5c542; }

/* the C// concept note — bolds in WHITE, not grey */
.v2-note-c strong { color: #eef2fb; font-weight: 700; }

/* the plans sheet — three cards side by side, the Pro card lit */
.v2-sub .ncp-panel { max-width: 1120px; }
.v2-sub-body { padding: 32px 44px 30px; }
.v2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.v2-plan {
  position: relative; display: flex; flex-direction: column; gap: 11px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(130,162,212,0.25); border-radius: 12px;
  background: rgba(255,255,255,0.025);
}
.v2-plan-hl { border-color: rgba(245,197,66,0.55); box-shadow: 0 0 20px rgba(245,197,66,0.12); }
.v2-plan-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border: 1px solid rgba(245,197,66,0.6); border-radius: 999px;
  background: #131a30; font-family: var(--font-pixel); font-size: 6px; letter-spacing: 0.1em; color: #f5c542;
  white-space: nowrap;
}
.v2-plan-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; color: rgba(170,188,215,0.5); }
.v2-plan-name { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: #e7eefb; }
.v2-plan-price { font-family: var(--font-pixel); font-size: 22px; color: #f5c542; }
.v2-plan-per { font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.6); margin-left: 5px; }
.v2-plan-rule { height: 1px; background: rgba(130,162,212,0.16); margin: 2px 0; }
.v2-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.v2-plan-feats li { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: rgba(190,205,228,0.7); }
.v2-plan-feats b { color: #eef2fb; font-weight: 700; }
.v2-plan-feats li::before { content: '· '; color: rgba(245,197,66,0.6); }
.v2-plan-go { margin-top: auto; padding-top: 12px; padding-bottom: 12px; font-size: 8px; }
.v2-plan-current {
  margin-top: auto; padding: 10px; text-align: center;
  border: 1px dashed rgba(130,162,212,0.3); border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.55);
}
.v2-sub-note { text-align: center; margin-top: 16px; }
/* manage row under the current card + the two quiet state buttons */
.v2-plan-manage { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; color: rgba(170,188,215,0.65); }
.v2-plan-manage b { color: #e7eefb; font-weight: 600; }
.v2-plan-cancel {
  align-self: flex-start; padding: 7px 12px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(130,162,212,0.32); border-radius: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: rgba(210,223,242,0.85);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.v2-plan-cancel:hover { color: #f5c542; border-color: rgba(245,197,66,0.5); background: rgba(245,197,66,0.05); }
.v2-plan-go-quiet, .v2-plan-pending {
  margin-top: auto; padding: 10px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(130,162,212,0.3); border-radius: 7px;
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(210,223,242,0.8);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.v2-plan-go-quiet:hover { color: #f5c542; border-color: rgba(245,197,66,0.5); }
.v2-plan-pending { border-style: dashed; border-color: rgba(245,197,66,0.5); color: #e8c25c; }
/* the confirm screen — one decision, spelled out, then a single button */
.v2-sub-cf-panel { max-width: 470px !important; }
.v2-sub-cf { display: flex; flex-direction: column; gap: 12px; }
.v2-cf-title { font-family: var(--font-pixel); font-size: 13px; color: #e7eefb; margin-bottom: 2px; }
.v2-cf-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 8px 2px; border-bottom: 1px solid rgba(130,162,212,0.14);
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(170,188,215,0.65);
}
.v2-cf-row b { color: #e7eefb; font-weight: 600; text-align: right; }
.v2-cf-go { margin-top: 8px; }
.v2-cf-danger {
  margin-top: 8px; padding: 13px; cursor: pointer; text-align: center;
  background: rgba(224,90,90,0.08); border: 1px solid rgba(224,90,90,0.45); border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #e89a9a;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.v2-cf-danger:hover { border-color: rgba(224,90,90,0.8); background: rgba(224,90,90,0.14); }
.v2-cf-back {
  align-self: center; padding: 6px 10px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.6);
  transition: color 0.15s ease;
}
.v2-cf-back:hover { color: #f5c542; }
@media (max-width: 780px) { .v2-plans { grid-template-columns: 1fr; } }
.v2-onetime { font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.6); font-weight: 400; }

/* the two header glyphs are ALIVE — same family as the seam star & plate dot:
   a slow breathing glow + the occasional twinkle (filter wraps the box-shadow
   square too, so BOTH deck pixels light up) */
.home-deck-dot { animation: v2DeckBreathe 2.8s ease-in-out infinite; }
@keyframes v2DeckBreathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(24,176,245,0.45)); opacity: 0.88; }
  50% { filter: drop-shadow(0 0 7px rgba(24,176,245,0.95)); opacity: 1; }
  76% { opacity: 0.55; }
  82% { opacity: 1; }
}
.home-station-dot { animation: v2StDotBreathe 2.8s ease-in-out 0.9s infinite; }
@keyframes v2StDotBreathe {
  0%, 100% { box-shadow: 0 0 3px rgba(245,197,66,0.45); opacity: 0.88; }
  50% { box-shadow: 0 0 9px rgba(245,197,66,0.95), 0 0 18px rgba(245,197,66,0.35); opacity: 1; }
  76% { opacity: 0.5; }
  82% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-deck-dot, .home-station-dot { animation: none; }
}

/* C// — hear the real thing: a quiet themed link row, never crowded */
.v2-yt-btn {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  margin: 10px 0 2px; padding: 7px 13px;
  border: 1px solid rgba(95,201,216,0.4); border-radius: 7px;
  background: rgba(95,201,216,0.06); text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: #8fd9e4;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.v2-yt-btn:hover { color: #b5e8f0; border-color: rgba(95,201,216,0.75); box-shadow: 0 0 12px rgba(95,201,216,0.25); }
.v2-yt-arr { font-size: 12px; }
/* mini variant rides the note line — one row, no extra height */
.v2-note-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.v2-note-row .ncp-region-note { flex: 1 1 auto; min-width: 0; margin: 0; }
.v2-yt-mini { flex: 0 0 auto; margin: 0; padding: 5px 10px; font-size: 10px; white-space: nowrap; }
.v2-yt-mini .v2-yt-arr { font-size: 10px; }

/* the Drop's opening clause — gold, lit */
.v2-drop-glow {
  color: #f5c542;
  text-shadow: 0 0 10px rgba(245,197,66,0.55), 0 0 26px rgba(245,197,66,0.25);
}

/* the mission promise GLOWS in its theme colour — Standard stays plain */
.v2-lead-glow span:last-child { font-weight: 500; }
.v2-lead-trees span:last-child {
  color: #8ee8ad;
  text-shadow: 0 0 10px rgba(111,224,154,0.55), 0 0 26px rgba(111,224,154,0.25);
}
.v2-lead-trees strong { color: #aef2c4; }
.v2-lead-trees .ncp-detail-dot { background: #6fe09a; box-shadow: 0 0 9px rgba(111,224,154,0.9); }
.v2-lead-cslash span:last-child {
  color: #f2d98c;
  text-shadow: 0 0 10px rgba(245,197,66,0.55), 0 0 26px rgba(245,197,66,0.25);
}
.v2-lead-cslash strong { color: #f5c542; }
.v2-lead-cslash .ncp-detail-dot { background: #f5c542; box-shadow: 0 0 9px rgba(245,197,66,0.9); }

/* ── 03 head: the held total IS the table's title; ＋ mints more ── */
.v2-inv-count { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: rgba(200,214,235,0.8); }
.v2-inv-count .ns-star { color: #f5c542; }
.v2-inv-count b { font-family: var(--font-pixel); font-size: 19px; font-weight: 400; color: #f5c542; }
.v2-inv-quickadd { width: 30px; opacity: 1; transform: none; pointer-events: auto; }
.v2-inv-more {
  padding: 6px 12px; background: rgba(255,255,255,0.03); cursor: pointer;
  border: 1px solid rgba(130,162,212,0.3); border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(210,223,242,0.85);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.v2-inv-more:hover { color: #f5c542; border-color: rgba(245,197,66,0.5); }
.v2-inv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.v2-inv-head .v2-inv-views { margin-left: auto; }
/* kind shown as TEXT — colour does the talking, no icons */
.v2-inv-k { flex: 0 0 56px; font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.06em; }
.v2-k-trees { color: #6fe09a; }
.v2-k-cslash { color: #57b6ee; }
.v2-k-plain { color: #f5c542; }
/* the dispatch panel — pick a kind, write the people, cast */
.v2-dispatch {
  display: flex; flex-direction: column; gap: 11px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(245,197,66,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px));
}
.v2-dis-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: rgba(170,188,215,0.5); }
.v2-dis-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.v2-dis-chip {
  padding: 6px 11px; background: rgba(255,255,255,0.03); cursor: pointer;
  border: 1px solid rgba(130,162,212,0.28); border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(200,214,235,0.8);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.v2-dis-chip b { font-family: var(--font-pixel); font-size: 9px; font-weight: 400; }
.v2-dis-chip:disabled { opacity: 0.35; cursor: default; }
.v2-dis-zero { opacity: 0.5; }
.v2-dis-zero.active { opacity: 1; }
.v2-dis-trees.active { background: #6fe09a; border-color: #6fe09a; color: #0b2818; }
.v2-dis-cslash.active { background: #f5c542; border-color: #f5c542; color: #2b2008; }
.v2-dis-plain.active { background: #e9eff8; border-color: #e9eff8; color: #1a2233; }
.v2-dis-none { font-family: var(--font-mono); font-size: 11px; font-style: italic; color: rgba(170,188,215,0.45); }
.v2-dis-emails { flex: 1 1 auto; min-height: 110px; resize: none; }
.v2-dispatch .v2-cast-btn { margin-bottom: 0; }
.v2-dispatch .v2-cast-note { white-space: nowrap; }
.v2-cast-panel .v2-realm-gold { text-align: center; color: rgba(245,197,66,0.75); }
.v2-realm-gold b { color: #f5c542; font-weight: 600; }
.v2-dispatch .v2-lane-demo { text-align: center; }
@media (max-width: 980px) { .v2-dispatch .v2-cast-note { white-space: normal; } }
.v2-cast-ready { font-family: var(--font-mono); font-size: 12.5px; color: rgba(200,214,235,0.85); }
.v2-cast-ready b { font-family: var(--font-pixel); font-size: 21px; font-weight: 400; color: #f5c542; }
.v2-cast-kmini { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: rgba(200,214,235,0.7); }
.v2-cast-kmini b { font-family: var(--font-pixel); font-size: 10px; font-weight: 400; }
.v2-cast-note { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; color: rgba(170,188,215,0.5); }
.v2-page #v2-cast-mount { padding-bottom: 44px; }
/* the count pops when fresh stars arrive */
.v2-pop { display: inline-block; animation: v2Pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes v2Pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* empty lane — the kind's pitch + the mint invitation */
.v2-lane-zero { align-items: center; justify-content: center; text-align: center; gap: 14px; min-height: 250px; }
/* S2(0702): mini "YOU'RE MINTING" card — tells the user which station this mint applies to.
   Cover + name come from the same source as the top rail card (coverStyle / display_name).
   +14px margin under the card group so total gap to the pitch is 28px (14 gap + 14 margin). */
.v2-lane-this { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 14px; }
.v2-lane-this-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; color: rgba(245,197,66,0.78); }
.v2-lane-this-card {
  position: relative; width: 212px; height: 118px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid rgba(245,197,66,0.55); box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  background-size: cover; background-position: center;
}
.v2-lane-this-name {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 10px 9px;
  background: linear-gradient(to top, rgba(0,0,0,0.62), transparent 58%);
  font-family: var(--font-pixel); font-size: 8px; font-weight: 400; letter-spacing: 0.02em;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); line-height: 1.6;
}
.v2-zero-fresh .v2-lane-this { opacity: 0; animation: v2RowIn 0.45s ease 0.04s forwards; }
.v2-lane-pitch { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: rgba(200,214,235,0.8); max-width: 380px; }
.v2-lane-mint { width: 100%; max-width: 300px; margin-top: 4px; }
.v2-lens-locked .ncp-proj-card { cursor: default; }
.v2-lens-locked .ncp-proj-card:hover { transform: none; box-shadow: none; }
/* the mission rides a second, quieter line — never squeezed into the first */
.v2-mint-sub { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 0.08em; opacity: 0.85; }
.v2-lane-demo { font-family: var(--font-mono); font-size: 10px; font-style: italic; color: rgba(170,188,215,0.4); }
@media (max-width: 980px) { .v2-lane-zero { min-height: 200px; } }

/* ── the Add modal — small sheet; the kind was chosen on the page ── */
.v2-add .ncp-panel { max-width: 560px; }
/* EVERY popup centres vertically: auto margins inside the flex-start+scroll
   overlays = centred when it fits, scrollable (never clipped) when it doesn't.
   This codebase grew FOUR hand-rolled overlay families, each copying the same
   top-pinned flex-start pattern — cover them all here in one place. */
.manage-overlay > .ncp-panel,
.new-event-modal > .new-event-panel,
.br-overlay > .br-panel,
.nc-overlay > *,
.nl-overlay > * { margin-top: auto; margin-bottom: auto; }
.v2-add .ncp-panel-body { padding: 26px 34px 24px; }
.v2-add-kind { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-add-price { font-family: var(--font-mono); font-size: 11px; color: var(--nc-ink-soft); }
.v2-add-price strong { color: #b8860b; }
.v2-add .v2-mint-line { margin-top: 14px; }

/* broadcast explainer — one small annotation line under the buttons */
.v2-bc-note {
  margin-top: 9px; max-width: 412px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.02em;
  line-height: 1.5; color: var(--nc-ink-soft); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-bc-note strong { color: var(--nc-ink); }

/* ── v2 modals: wide panel, two columns ── */
.v2-mg.manage-overlay { padding-top: 24px; padding-bottom: 24px; }
.v2-mg .ncp-panel { max-width: 1080px; }
/* cast modal never exceeds the viewport — the panel caps its height and the
   POOL BREAKDOWN list scrolls INSIDE its column instead of growing the page */
.v2-mg:not(.ncp-buy-open) .ncp-panel {
  max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column;
}
.v2-mg:not(.ncp-buy-open) .ncp-panel-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.v2-buy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; margin-top: 4px; }
/* the two 02 boxes always level up to the TALLER side: the lane already
   stretches (flex column); the detail box must too */
#acq-detail-wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
#acq-detail-wrap .ncp-region-box { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 0; }
#acq-detail-wrap .ncp-region-box .ncp-region-foot { margin-top: auto; }
.v2-mint-line {
  margin-top: 10px; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.6;
  color: var(--nc-ink-soft);
}
/* cast modal: preview | action column side by side. The confirm gate uses the
   SAME geometry — preview left, confirm right — so Yes only swaps the right
   column's content and the page never jumps. */
.v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  padding: 30px 40px;
}
.v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) .ncp-panel-left { padding-right: 30px; min-height: 0; }
.v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) .ncp-panel-right {
  border-top: none; margin-top: 0; padding-top: 0;
  border-left: 1px solid rgba(31,55,107,0.15); padding-left: 30px;
  display: flex; flex-direction: column; min-height: 0;
}
/* the recipient column's pool list takes whatever height is left and scrolls */
.v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) .manage-tree-list {
  flex: 1 1 auto; min-height: 120px; max-height: none; overflow-y: auto;
}
/* confirm column — no box, no edge: a soft gold halo diffuses out from behind
   the Yes button and fades to nothing. Question → Yes → Later, stacked, centred. */
.v2-confirm-col { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.v2-confirm-col .ncp-confirm {
  margin-top: 0; padding: 40px 28px; border: none; gap: 20px;
  background: radial-gradient(ellipse 88% 64% at 50% 46%, rgba(245,197,66,0.13), rgba(245,197,66,0.05) 48%, rgba(245,197,66,0) 74%);
}
.v2-confirm-col .ncp-confirm-q { font-size: 12px; line-height: 1.6; }
.v2-confirm-col .ncp-confirm-actions { flex-direction: column; gap: 14px; }
.v2-confirm-col .ncp-confirm .ncp-btn-anchor { width: 100%; max-width: 320px; }
.v2-confirm-col .ncp-confirm-note { margin-top: 2px; }
/* the preview — square frame, centred in its column (same as the home panel).
   The iframe inside renders at the 556×556 internal viewport and is scaled to
   fit by fitV2Frame (JS) — CSS only shapes the box. */
.v2-mg .ncp-mg-canvas {
  width: 100%; max-width: min(460px, 58vh); margin-left: auto; margin-right: auto;
  aspect-ratio: 1 / 1;
}
.v2-mg .ncp-mg-canvas iframe { width: 100%; height: 100%; border: none; display: block; pointer-events: none; }
.v2-mg .ncp-mg-canvas-empty { width: 100%; max-width: min(460px, 58vh); margin-left: auto; margin-right: auto; }
@media (max-width: 980px) {
  .v2-buy-cols { grid-template-columns: 1fr; gap: 0; }
  .v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) { grid-template-columns: 1fr; }
  .v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) .ncp-panel-left { padding-right: 0; }
  .v2-mg .ncp-panel-body:not(.ncp-panel-body-buy) .ncp-panel-right {
    border-left: none; padding-left: 0;
    border-top: 1px solid rgba(31,55,107,0.15); padding-top: 22px; margin-top: 22px;
  }
}

/* ── v2 Support modal: a full-screen take-over ─────────────────────────────
   The panel fills the viewport (16px frame all round); inner content is capped
   at a readable measure and centred; the vertical slack flows BETWEEN the
   sections, and both column floors align at the bottom edge. */
.v2-mg.ncp-buy-open { padding: 16px; }
.v2-mg.ncp-buy-open .ncp-panel {
  max-width: none; width: 100%;
  height: calc(100dvh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
}
.v2-mg.ncp-buy-open .ncp-panel-body-buy {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* readable measure inside the full-bleed sheet */
.v2-mg .ncp-panel-body-buy .ncp-panel-left,
.v2-mg .ncp-panel-body-buy .ncp-panel-right {
  width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto;
}
.v2-mg .ncp-panel-body-buy .ncp-panel-right { flex: 1 1 auto; display: flex; flex-direction: column; }
.v2-mg .ncp-panel-body-buy .v2-buy-cols { flex: 1 1 auto; }
.v2-mg .ncp-panel-body-buy { padding: 26px 40px 24px; }
/* the sign-off — one long full-width band pinned to the very bottom, ignoring
   the column structure above it */
.v2-buy-foot {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(31,55,107,0.14);
  text-align: center;
}
.v2-buy-foot .v2-mint-line { margin: 0 0 6px; }
.v2-buy-foot .ncp-cast-closing { margin-top: 0; }
/* the comparison box collapses to ONE slim row — thesis left, the two modes right */
.v2-mg .ncp-panel-body-buy .ncp-addn.v2-addn-row {
  display: flex; align-items: center; gap: 34px;
  padding: 12px 20px; margin-bottom: 22px;
}
.v2-mg .ncp-panel-body-buy .v2-addn-row .ncp-detail-lead {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 0; border-bottom: none;
}
.v2-mg .ncp-panel-body-buy .v2-addn-row .ncp-region-grid {
  display: flex; flex: 0 0 auto; gap: 38px; margin: 0;
}
@media (max-width: 1180px) {
  .v2-mg .ncp-panel-body-buy .ncp-addn.v2-addn-row { flex-direction: column; align-items: stretch; gap: 14px; }
}
.v2-mg .ncp-panel-body-buy .ncp-cast-h1 { margin-bottom: 6px; }
.v2-mg .ncp-panel-body-buy .ncp-addn-grid { margin-bottom: 6px; }
.v2-mg .ncp-panel-body-buy .ncp-panel-sec-lbl { margin-bottom: 12px; }
.v2-mg .ncp-panel-body-buy .ncp-sec-spaced { margin-top: 20px; }
/* HOW MANY now heads the right column — no top gap as a column head */
.v2-mg .v2-buy-col > .ncp-sec-spaced:first-child { margin-top: 0; }
.v2-mg .ncp-panel-body-buy .ncp-proj-card { min-height: 104px; gap: 12px; padding: 16px 14px; }
.v2-mg .ncp-panel-body-buy .ncp-region-box { padding: 15px 17px; }
.v2-mg .ncp-panel-body-buy .ncp-slider-wrap { margin-bottom: 12px; }
.v2-mg .ncp-panel-body-buy .ncp-support-block { padding: 16px 18px; margin-bottom: 12px; }
.v2-mg .ncp-panel-body-buy .ncp-support-block .ncp-receipt-note { margin-bottom: 12px; padding-top: 12px; }
.v2-mg .ncp-panel-body-buy .ncp-support-block .ncp-receipt-total { margin-bottom: 0; }
.v2-mg .ncp-panel-body-buy .ncp-cast-closing { margin-top: 10px; }
/* columns: equal height, each a clean vertical stack */
.v2-buy-cols { align-items: stretch; }
.v2-buy-col { display: flex; flex-direction: column; min-width: 0; }

/* ═══ v2 page density — the homepage reads ~85% scale WITHOUT any zoom/transform
   (zoom breaks tour positioning + iframe canvases; every value here is a real
   size). Modals are untouched — they were right at 100%. ═══════════════════ */
.v2-page .home-masthead { padding-bottom: 6px; }
.v2-page .home-masthead-title { font-size: 13px; }
.v2-page .home-pick { flex: 0 0 226px; }
.v2-page .home-pick-cover { height: 96px; border-radius: 10px; }
.v2-page .home-pick-label { font-size: 8px; padding: 0 9px 8px; }
/* gap below the cards = gap between the cards (24px spacer) — one rhythm */
.v2-page .home-split { margin-top: 12px; padding-bottom: 0; }
/* a wider deck — the compose surface earns the space, and the canvas panel
   tightens to a balanced frame+words pair instead of sprawling */
.v2-page .home-left { flex: 0 0 560px; }
.v2-page .home-deck-body { padding: 14px 20px 16px; }
.v2-page .home-step { font-size: 12px; margin-bottom: 8px; }
.v2-page .home-text { min-height: 96px !important; }
.v2-page .nc-drop { min-height: 56px; padding: 9px; }
.v2-page .home-station-head { padding: 8px 16px; }
/* the canvas block centres in whatever height the deck sets — never flush-top */
.v2-page .home-station { display: flex; flex-direction: column; }
.v2-page .v2-canvas { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.v2-page .edx-title { font-size: 16px; margin-bottom: 8px; }
.v2-page .edx-quote { font-size: 13px; }
.v2-page .v2-canvas { padding: 15px 18px 18px; }
.v2-page .v2-canvas-cols { grid-template-columns: minmax(0, 392px) 1fr; gap: 22px; }
.v2-page .v2-sec-rail { margin: 24px 0 4px; }
.v2-page .home-view > .v2-sec-wrap:first-child .v2-sec-rail { margin-top: 14px; }
.v2-page .v2-sec-note { margin-bottom: 12px; }
.v2-page #v2-acquire-mount { padding-bottom: 14px; }
/* internal panel headers step back so the rails lead */
.v2-page .home-deck-title { font-size: 10px; opacity: 0.85; }
.v2-page .home-station-live { font-size: 8px; opacity: 0.85; }
.v2-page .evt-footer { padding-top: 8px; }

/* ═══ Payment processing overlay (demo loading) ════════════════════════════
   Full-screen fake loading animation shown after Cast payment button click.
   Phase 1: spinning ring + "Processing…"
   Phase 2 (.pl-done): ring fades, checkmark bounces in + "Payment confirmed"
   Phase 3: JS fades out, removes, then calls the real callback.             */
.pay-loading-ov {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 22, 0.93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: plOvIn 0.28s ease both;
}
@keyframes plOvIn { from { opacity: 0 } to { opacity: 1 } }

.pay-loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 0 40px; user-select: none;
}

/* icon wrap holds ring + check stacked */
.pl-icon-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }

.pl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(245, 197, 66, 0.13); border-top-color: #f5c542;
  animation: plSpin 0.85s linear infinite;
  transition: opacity 0.25s ease;
}
.pay-loading-ov.pl-done .pl-ring { opacity: 0; animation: none; }
@keyframes plSpin { to { transform: rotate(360deg) } }

.pl-check {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(245, 197, 66, 0.09); border: 2.5px solid #f5c542;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #f5c542;
  opacity: 0; transform: scale(0.25);
}
.pay-loading-ov.pl-done .pl-check {
  animation: plCheckBounce 0.42s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes plCheckBounce {
  from { opacity: 0; transform: scale(0.2) }
  to   { opacity: 1; transform: scale(1)   }
}

/* amount — dim → gold on confirm */
.pl-amt {
  font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700;
  letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.16);
  transition: color 0.5s ease;
}
.pay-loading-ov.pl-done .pl-amt { color: rgba(245, 197, 66, 0.72); }

/* status line */
.pl-status {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.07em;
  color: rgba(200, 215, 235, 0.55); transition: color 0.35s ease; text-align: center;
}
.pay-loading-ov.pl-done .pl-status { color: #f5c542; }

/* mission line — which real thing this payment supports */
.pl-mission {
  margin-top: -12px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em;
  color: rgba(170, 190, 220, 0.45); text-align: center;
  transition: color 0.35s ease;
}
.pay-loading-ov.pl-done .pl-mission { color: rgba(245, 197, 66, 0.5); }

/* sub line */
.pl-sub {
  font-family: 'Inter', sans-serif; font-size: 11.5px; letter-spacing: 0.04em;
  color: rgba(150, 170, 210, 0.28); text-align: center; line-height: 1.5;
  transition: color 0.35s ease;
}
.pay-loading-ov.pl-done .pl-sub { color: rgba(245, 197, 66, 0.32); }

/* fake tx hash — types itself out on confirm; reserved height so nothing shifts */
.pl-tx {
  min-height: 14px; margin-top: -8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.05em;
  color: rgba(150, 170, 210, 0.3); text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   FULL SCREEN + ON-CHAIN IDENTITY LAYER (nfs-*) — the page fills the screen;
   the layer is a corner orb (chat-widget convention: read as platform UI on
   any full-bleed page, never as page content). Open = scrim + the page steps
   back + a glass card blooms from the corner.
   Owner/broadcast view here. (Realm carries the recipient actions.)
   ════════════════════════════════════════════════════════════════════════════ */
#nfs-overlay {
  position: fixed; inset: 0; z-index: 640;
  display: flex; align-items: center; justify-content: center;
  background: #04070d;
}
#nfs-overlay .nfs-shell { position: relative; overflow: hidden; background: #04070d; }
#nfs-frame {
  position: absolute; top: 0; left: 0; width: 556px; height: 556px;
  border: 0; transform-origin: 0 0; display: block; background: #04070d;
}
.nfs-exit {
  position: fixed; top: 18px; right: 22px; z-index: 650; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .16em;
  color: #dce8f7; background: rgba(12,20,38,0.62); border: 1px solid rgba(120,170,230,0.3);
  border-radius: 999px; padding: 9px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s;
}
.nfs-exit:hover { border-color: rgba(130,185,255,0.6); background: rgba(16,28,52,0.8); }
/* the scrim — the page steps back when the card opens */
.nfs-scrim {
  position: fixed; inset: 0; z-index: 642;
  background: rgba(2,5,10,0.55);
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
#nfs-overlay.nfs-open .nfs-scrim { opacity: 1; pointer-events: auto; }
#nfs-overlay .nfs-shell { transition: transform .38s ease, filter .38s ease; }
#nfs-overlay.nfs-open .nfs-shell { transform: scale(0.965); filter: brightness(0.62) saturate(0.92); }
/* the dock — orb anchored bottom-right, card blooms from the corner */
.nfs-dock { position: fixed; right: 22px; bottom: 22px; z-index: 646; }
/* the orb — ghost-glass at rest (all idle motion stays INSIDE the circle);
   solid on hover / while the card is open */
.nfs-orb {
  position: relative; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, rgba(46,70,116,0.42), rgba(8,14,28,0.38) 72%);
  border: 1px solid rgba(150,195,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform .22s, border-color .25s, background .25s, box-shadow .25s;
}
.nfs-orb::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 16px rgba(245,197,66,0.22);
  animation: nfsInnerBreath 3.6s ease-in-out infinite;
}
.nfs-orb:hover, .nfs-dock.open .nfs-orb {
  background: radial-gradient(circle at 34% 28%, rgba(46,70,116,0.92), rgba(8,14,28,0.9) 72%);
  border-color: rgba(175,212,255,0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.nfs-orb:hover { transform: translateY(-2px) scale(1.04); }
.nfs-orb-ic {
  color: #ffd969; font-size: 19px; line-height: 1; text-shadow: 0 0 10px rgba(245,197,66,0.8);
  animation: nfsIcTwinkle 3.2s ease-in-out infinite;
}
.nfs-orb-badge {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,197,66,0.92); color: #1a1206;
  font-family: var(--font-pixel); font-size: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
@keyframes nfsInnerBreath { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes nfsIcTwinkle {
  0%, 100% { opacity: .62; transform: scale(.93); }
  50%      { opacity: 1; transform: scale(1.08); }
}
/* hover tag — the full identity at a glance, still small */
.nfs-orb-tag {
  position: absolute; right: 64px; bottom: 2px; transform: translateX(6px);
  opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(8,14,28,0.74); border: 1px solid rgba(130,180,240,0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  transition: opacity .2s, transform .2s;
}
.nfs-dock:not(.open) .nfs-orb:hover ~ .nfs-orb-tag { opacity: 1; transform: none; }
.nfs-tag-row { font-family: var(--font-pixel); font-size: 7px; letter-spacing: .12em; color: #dce8f7; white-space: nowrap; }
.nfs-tag-gold { color: #f5c542; }
.nfs-tag-cs { color: #f5c542; text-shadow: 0 0 8px rgba(245,197,66,0.45); }
.nfs-tag-pl { color: #7fc3ff; text-shadow: 0 0 8px rgba(91,170,255,0.4); }
/* the glass card — gradient hairline border + top inner highlight */
.nfs-card {
  position: absolute; right: 0; bottom: 68px; overflow: hidden;
  width: min(480px, calc(100vw - 44px)); padding: 8px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,19,38,0.72), rgba(6,10,22,0.84));
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transform-origin: 100% 100%;
  transition: opacity .28s ease, transform .3s cubic-bezier(.2,.9,.3,1.18);
}
.nfs-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.07) 45%, rgba(245,197,66,0.10) 52%, transparent 66%);
  transform: translateX(-130%);
}
.nfs-dock.open .nfs-card::after { animation: nfsSheen 1.1s ease .18s forwards; }
@keyframes nfsSheen { to { transform: translateX(130%); } }
.nfs-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(170,210,255,0.5), rgba(245,197,66,0.26) 45%, rgba(120,150,210,0.10));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.nfs-dock.open .nfs-card { opacity: 1; transform: none; pointer-events: auto; }
.nfs-sec {
  position: relative; padding: 14px 0;
  display: flex; flex-direction: column; gap: 9px;
}
/* distinct dividers — gradient hairline (no text), drawn in on open */
.nfs-sec + .nfs-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,200,250,0.32) 18%, rgba(245,197,66,0.42) 50%, rgba(170,200,250,0.32) 82%, transparent);
}
.nfs-dock.open .nfs-sec + .nfs-sec::before { animation: nfsDivGrow .7s ease .2s both; }
@keyframes nfsDivGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* micro-motion when the card opens: sections drift in staggered,
   the constellation line draws itself, stars pop in, halos pulse */
.nfs-dock.open .nfs-sec { animation: nfsSecIn .45s cubic-bezier(.2,.8,.3,1) both; }
.nfs-dock.open .nfs-sec:nth-child(2) { animation-delay: .07s; }
.nfs-dock.open .nfs-sec:nth-child(3) { animation-delay: .14s; }
.nfs-dock.open .nfs-sec:nth-child(4) { animation-delay: .2s; }
@keyframes nfsSecIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.nfs-sky polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nfs-dock.open .nfs-sky polyline { animation: nfsLineDraw 1.4s ease .25s forwards; }
@keyframes nfsLineDraw { to { stroke-dashoffset: 0; } }
.nfs-dock.open .nfs-sky circle { animation: nfsHalo 3.2s ease-in-out infinite; }
@keyframes nfsHalo { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.nfs-stamps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nfs-stamp { font-family: var(--font-pixel); font-size: 8px; letter-spacing: .14em; color: rgba(233,239,248,0.88); }
.nfs-verify {
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: .14em;
  color: #7fc3ff; text-decoration: none;
  border-bottom: 1px dashed rgba(127,195,255,0.5); padding-bottom: 1px;
}
.nfs-verify:hover { color: #fff; border-bottom-color: #fff; }
/* the arc star map — kind lives on each star: gold = C//, blue = station */
.nfs-sky { width: 100%; height: auto; display: block; }
.nfs-sg {
  font-size: 9px;
  -webkit-user-select: none; user-select: none; cursor: pointer;
  transform-box: fill-box; transform-origin: center;
}
.nfs-sg-cs { fill: rgba(245,197,66,0.5); }
.nfs-sg-pl { fill: rgba(127,195,255,0.5); }
/* hover → twinkle in place (no size jump); beats the open-state twinkle */
.nfs-sg:hover, .nfs-dock.open .nfs-sg:hover { animation: nfsFlash .5s ease-in-out infinite; }
@keyframes nfsFlash {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,240,200,0.95)); }
  50%      { opacity: .3; filter: drop-shadow(0 0 1px rgba(255,240,200,0.3)); }
}
.nfs-sg-lit { font-size: 12px; }
.nfs-sg-lit.nfs-sg-cs { fill: #ffe9a8; filter: drop-shadow(0 0 4px rgba(245,197,66,0.9)); }
.nfs-sg-lit.nfs-sg-pl { fill: #bfe3ff; filter: drop-shadow(0 0 4px rgba(91,170,255,0.9)); }
.nfs-sg-yours { font-size: 13.5px; }
.nfs-dock.open .nfs-sg {
  animation: nfsPopIn .5s cubic-bezier(.2,.9,.3,1.5) backwards, nfsTwinkle 3.4s ease-in-out infinite;
}
.nfs-dock.open .nfs-sg-burst {
  animation: nfsBurst .9s cubic-bezier(.2,.9,.3,1.4), nfsTwinkle 3.4s ease-in-out infinite;
}
.nfs-sg-more {
  font-size: 8px; fill: rgba(245,197,66,0.55); font-family: var(--font-mono);
  -webkit-user-select: none; user-select: none;
}
@keyframes nfsPopIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes nfsTwinkle { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes nfsBurst {
  0%   { transform: scale(0.3); }
  45%  { transform: scale(2.2); }
  100% { transform: scale(1); }
}
/* the emphasized numbers — pixel numerals, counted up on open */
.nfs-stats { display: flex; align-items: flex-end; gap: 22px; }
.nfs-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.nfs-stat b { font-family: var(--font-pixel); font-size: 14px; font-weight: 400; color: #e7eefb; line-height: 1; }
.nfs-stat i { font-style: normal; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .16em; color: #8fa3c0; }
.nfs-stat-cs b { color: #f5c542; text-shadow: 0 0 10px rgba(245,197,66,0.4); }
.nfs-stat-pl b { color: #7fc3ff; text-shadow: 0 0 10px rgba(91,170,255,0.35); }
.nfs-stat-lit b { color: #ffe9a8; text-shadow: 0 0 10px rgba(245,197,66,0.4); }
.nfs-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: #8fa3c0; }
/* words from the holders — each line signed */
.nfs-words-h { font-family: var(--font-pixel); font-size: 7px; letter-spacing: .18em; color: #c9a85f; }
.nfs-echo { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: rgba(233,239,248,0.85); }
.nfs-echo i { font-style: normal; font-size: 8px; letter-spacing: .1em; color: #8fa3c0; margin-left: 8px; }
.nfs-echo em { font-style: normal; color: #f5d88c; }
.nfs-hint { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; color: rgba(143,163,192,0.6); }
/* hover affordance on the page preview — appears over the canvas itself */
.nfs-peek {
  position: absolute; top: 50%; left: 50%; z-index: 5; cursor: pointer;
  transform: translate(-50%,-50%) scale(.96); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .1em; color: #fff;
  background: rgba(4,8,16,0.78); border: 1px solid rgba(255,255,255,0.30); border-radius: 12px;
  padding: 13px 18px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: opacity .2s, transform .2s, border-color .2s;
}
.v2-canvas-frame:hover .nfs-peek, .home-st-stage:hover .nfs-peek {
  opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto;
}
.nfs-peek:hover { border-color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE (additive only — desktop rules untouched)
   ════════════════════════════════════════════════════════════════════════════ */
/* the .v2-page two-column override (declared late in this file) must not undo
   the ≤980 single-column stack — without this the side column collapses to a
   few px and the title renders one character per line */
@media (max-width: 980px) {
  .v2-page .v2-canvas-cols { grid-template-columns: 1fr; }
}
/* phones: the page pans vertically ONLY — any stray horizontal overflow is
   clipped instead of letting the whole UI drag sideways */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; overflow-x: clip; }
  /* the module title rails were the overflow source — let them wrap */
  .v2-sec-rail { flex-wrap: wrap; row-gap: 6px; }

  /* iOS Safari zooms the viewport whenever a focused field's font-size is
     < 16px — that's the "jump-in on tap" the user hit. Floor EVERY text-entry
     control at 16px on phones (covers Tuning Deck words, Open-a-Station fields,
     cast emails, Browse search, and anything added later). Not a default we
     must live with — this is the canonical fix. */
  input[type="text"], input[type="email"], input[type="search"],
  input[type="number"], input[type="tel"], input[type="url"], input[type="date"],
  textarea, select { font-size: 16px !important; }
  /* the input value must stay 16px (iOS zoom fuse), but the placeholder is just
     a hint — shrink it to normal-text size so it doesn't shout on a phone */
  input::placeholder, textarea::placeholder { font-size: 13px !important; }

  /* photo uploader: the "◈ cover" caption hangs at bottom:-14px below the first
     thumbnail. On a phone the thumbnails wrap to a second row that sits right on
     top of it. Tuck the caption inside the thumbnail bottom so it can never be
     covered by a wrapped row. */
  .nc-thumb-pal { bottom: 1px !important; left: 1px; right: 1px;
    background: rgba(0,0,0,0.55); color: #fff !important; border-radius: 0 0 7px 7px;
    padding: 2px 0; font-size: 7px; }

  /* ── modal surfaces: desktop padding eats the whole phone screen ── */
  .manage-overlay.ncp-mg-open,
  .manage-overlay.ncp-buy-open { padding: 14px 8px; }
  .ncp-panel-hdr { padding: 14px 16px; }
  .ncp-panel-body { padding: 20px 16px 22px; }

  /* Plan & Credits: the balance bar stacks; its meta small print goes —
     "renews · compose 20 · retune 2" is detail the plan cards already carry */
  .v2-sub-body { padding: 18px 14px 20px; }
  .v2-balbar { flex-wrap: wrap; row-gap: 9px; }
  .v2-balbar-n b { font-size: 21px; }
  .v2-balbar-meta { display: none; }
  .v2-plans { gap: 14px; }
  .v2-plan { padding: 20px 16px 18px; }
  .v2-sub-cf-panel { max-width: none !important; }

  /* Browse all stations: ONE column, tighter filter row; head stays one line.
     Stability: the overlay must NOT scroll (that's what bled into the page
     behind) — kill its scroll + contain overscroll, and let the PANEL scroll
     internally, capped to the viewport so it's never a full-bleed slab. */
  .br-overlay { overflow: hidden; padding: 12px 10px; align-items: center;
    overscroll-behavior: contain; touch-action: none; }
  .br-panel { height: auto; max-height: calc(100dvh - 24px); overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .mg-grid, .br-grid.mg-grid { grid-template-columns: 1fr; gap: 14px; }
  .mg-filterbar { gap: 10px; margin-bottom: 16px; }
  .br-head { padding: 12px 14px; gap: 10px; }
  .br-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .br-title { font-size: 9px; white-space: nowrap; }
  .br-count { white-space: nowrap; }
  .br-close { white-space: nowrap; flex-shrink: 0; }
  .br-search-row { margin: 16px 14px 12px; }
  .br-new-card { height: 132px; }   /* refined "+" tile, not a full slab */
  .br-foot { margin-top: 18px; }

  /* fine print inside modals reads as noise at this size — drop it
     (receipt-style demo notes; the controls above them say what matters) */
  .manage-overlay .ncp-receipt-note { display: none; }

  /* Open a Station — same stability + a tighter, no-overflow body.
     The pixel-terminal skin sets paddings with !important, so match it. */
  .new-event-modal { overflow: hidden; padding: 12px 10px; align-items: center;
    overscroll-behavior: contain; touch-action: none; }
  .new-event-modal .new-event-panel { max-height: calc(100dvh - 24px) !important;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .new-event-modal .new-event-header { padding: 13px 16px !important; margin-bottom: 18px !important; }
  .new-event-modal .new-event-form { padding: 0 16px !important; }
  .new-event-modal .new-event-title-main { font-size: 11px !important; }
  .new-event-modal .new-event-title-sub { font-size: 10.5px !important; }
  .new-event-modal .new-event-field { margin-bottom: 14px; }
  .new-event-modal .new-event-input { font-size: 16px !important; padding: 10px 12px !important;
    width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; }
  /* the 3-line placeholder was being clipped by the notched box — give it room */
  .new-event-modal .new-event-textarea { min-height: 74px; }
  .new-event-modal .new-event-close { white-space: nowrap; }
  .new-event-modal .new-event-summary { margin-top: 6px; }

  /* page small print that only decorates on a desktop — on a phone it
     truncates or wraps into noise, so it goes: the section hint line under
     each module title, the deck's "you compose · Navi navigates" aside, and
     the per-step italic asides ("· the colour signal") */
  .v2-sec-note { display: none; }
  .home-deck-hint { display: none; }
  .home-step .nc-dim { display: none; }
}

/* ═══ 03 STYLE PRESET CHIPS (Tuning Deck) — 0706 ═══════════════════════════ */
/* 6 chips shown at a time + a gold ⟳ "more" that cycles the 9 batches.       */
.home-style-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;}
.nc-style-chip-row{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto;min-width:0;}
.nc-style-chip{
  padding:5px 11px;border-radius:999px;cursor:pointer;
  font:500 12px/1.2 Inter,system-ui;
  color:#c4cde0;background:rgba(255,255,255,.045);
  border:1px solid rgba(150,165,205,.28);
  transition:border-color .15s,color .15s,background .15s;
}
.nc-style-chip:hover{border-color:#f5c542;color:#f5c542;background:rgba(245,197,66,.08);}
.nc-style-chip-on{border-color:#f5c542;color:#f5c542;background:rgba(245,197,66,.14);}
.nc-style-more{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;cursor:pointer;
  font:600 12px/1.2 Inter,system-ui;color:#f5c542;
  background:rgba(245,197,66,.10);
  border:1px solid rgba(245,197,66,.55);
  box-shadow:0 0 10px rgba(245,197,66,.18);
  transition:background .18s,box-shadow .18s;
}
.nc-style-more:hover{background:rgba(245,197,66,.16);box-shadow:0 0 16px rgba(245,197,66,.32);}
.nc-style-more-ico{display:inline-block;transition:transform .5s ease;}
.nc-style-more:hover .nc-style-more-ico{transform:rotate(180deg);}   /* hover: ⟳ half-turn */
.nc-style-more-ico.nc-spin360{animation:ncSpin360 .5s ease;}          /* click: ⟳ full turn */
@keyframes ncSpin360{from{transform:rotate(0);}to{transform:rotate(360deg);}}