/* 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; }

/* 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 ── */
/* OPEN A STATION is a fixed tile OUTSIDE the scroll region (first child of
   .home-rail-viewport, before .home-rail-scroll) — only the station cards
   to its right scroll, so no sticky/overlap tricks are needed. */
.home-pick-new { cursor: pointer; text-decoration: none; }
.home-rail-viewport > .home-pick-new { align-self: flex-start; margin-top: 4px; }
.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; }
/* 这页原来没有出口,只能靠浏览器后退 —— CROWN 现在指过来了,门得看得见 */
.mg-back { margin-left: auto; align-self: center; }

/* 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; }

/* 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; }
/* the foot ink starts higher and lands deeper, so name + date sit fully
   inside it on any cover */
.mg-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.26) 0%, transparent 28%, transparent 40%, rgba(0,0,0,0.38) 62%, rgba(0,0,0,0.8) 82%, rgba(0,0,0,0.94) 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); }
/* 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: 4px 0 10px; }
.home-open-linc-slot .home-manage-btn { width: 100%; justify-content: center; }
.home-open-linc-slot .home-pick-new { flex: 1 1 auto; width: 100%; position: static; }

/* ── 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));
  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 4px; 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); }

/* ── 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;
}

/* CAST HISTORY rows carry FOUR fields — header + rows share one 4-col grid
   (STATUS · RECIPIENT · TOKEN · DATE); the base .manage-tree-row grid wrapped the date) */
.v2-inv-scroll .manage-tree-row {
  grid-template-columns: 0.85fr 1.7fr 1fr 0.85fr;
  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; }
/* the Creator gate — a quick one-line name capture the first time you cast
   without a name (the name that signs every star; shared with Realm) */
.v2-nameveil .ncp-panel { max-width: 440px; }
.v2-nv-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; padding: 30px 34px 30px; }
.v2-nv-star { font-size: 22px; color: #f5c542; text-shadow: 0 0 18px rgba(245,197,66,0.55); line-height: 1; }
.v2-nv-lead { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #f2f6ff; }
.v2-nv-sub { font-size: 12.5px; line-height: 1.55; color: rgba(200,216,240,0.62); max-width: 320px; }
.v2-nv-input {
  width: 100%; margin-top: 4px; box-sizing: border-box;
  background: rgba(10,16,30,0.6); border: 1px solid rgba(245,197,66,0.4);
  border-radius: 10px; padding: 11px 14px; outline: none;
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em;
  color: #fff; text-align: center; transition: border-color .2s ease, box-shadow .2s ease;
}
.v2-nv-input::placeholder { color: rgba(245,216,140,0.4); }
.v2-nv-input:focus { border-color: rgba(245,197,66,0.85); box-shadow: 0 0 0 3px rgba(245,197,66,0.14); }
.v2-nv-go { margin-top: 4px; }
.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);
}
.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; }

/* Standing spend limit for chat composes. Sits with the balance bars because it is
   about money, and reads as a setting rather than an offer: no gold call-to-action,
   no urgency — the calm default is 0, which is the behaviour that already existed. */
.v2-limit { padding: 2px 2px 16px; margin-bottom: 14px; border-bottom: 1px solid rgba(130,162,212,0.16); }
.v2-limit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-limit-row + .v2-limit-row { margin-top: 9px; }
.v2-limit-lbl { font-family: var(--font-mono); font-size: 13px; color: rgba(200,214,235,0.85); }
.v2-limit-state { font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.72); margin-left: auto; text-align: right; }
.v2-limit-state b { font-family: var(--font-pixel); font-size: 15px; font-weight: 400; color: #f5c542; margin: 0 3px; }
.v2-limit-in {
  width: 92px; font-family: var(--font-mono); font-size: 13px; color: #eef2fb;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(130,162,212,0.28);
  border-radius: 7px; padding: 5px 9px;
}
.v2-limit-in:focus { outline: none; border-color: rgba(245,197,66,0.5); }
.v2-limit-save {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: rgba(200,214,235,0.85); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(130,162,212,0.3); border-radius: 999px;
  padding: 5px 13px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.v2-limit-save:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: rgba(130,162,212,0.55); }
.v2-limit-save:disabled { opacity: 0.45; cursor: default; }
.v2-limit-hint { font-family: var(--font-mono); font-size: 10.5px; color: rgba(170,188,215,0.55); flex: 1 1 220px; }

/* 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: min(94vw, 1500px); }   /* wide enough for one long strip of 4 tiers */
/* THE PANEL FITS THE SCREEN, AND SCROLLS INSIDE ITSELF.
   On a phone this panel grew to ~1880px inside an 844px viewport, and the overlay
   it sits in is a fixed, backdrop-filtered, scrolling layer. Safari renders that
   combination as the frosted backdrop with NOTHING on it — the tap looked like the
   page had died (Zo 0805, reported from iPhone Safari). The cast modal in this same
   file (.v2-mg) already caps its height and scrolls its body; it was never reported
   broken. Same treatment here.
   It also fixes something plainly wrong on its own: the close button used to scroll
   away with the content, two and a half screens up. */
.v2-sub .ncp-panel {
  max-height: calc(100dvh - 28px);
  display: flex; flex-direction: column;
}
.v2-sub .ncp-panel-hdr { flex: 0 0 auto; }   /* the close stays put */
.v2-sub .ncp-panel-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;         /* momentum scroll on iOS */
  overscroll-behavior: contain;              /* don't chain into the page behind */
}
.v2-sub-body { padding: 32px 44px 30px; }
.v2-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }   /* desktop = one strip: Launch + the four plans. Narrower screens step down below. */
.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: 640px !important; }   /* payment confirms sit wide — no cramped wraps */
.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; }
/* Add-extra-credits: three fixed top-up packs, spread out (mirrors the plan cards' language) */
.v2-cf-sub { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: rgba(170,188,215,0.6); margin: -4px 0 2px; }
.v2-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.v2-pack {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 16px 15px 14px; cursor: pointer; text-align: left;
  background: rgba(20,32,58,0.5); border: 1px solid rgba(130,162,212,0.2); border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.v2-pack:hover { border-color: rgba(245,197,66,0.55); background: rgba(245,197,66,0.06); transform: translateY(-2px); }
.v2-pack-name { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; color: rgba(190,205,228,0.7); }
.v2-pack-cr { font-family: var(--font-pixel); font-size: 20px; color: #f5c542; }
.v2-pack-price { font-family: var(--font-mono); font-size: 13px; color: #e7eefb; }
/* Five cards need one more step than four did: at 1400 the strip gets cramped
   before it gets crowded, so it goes 5 → 3 → 2 rather than straight to 田字格. */
@media (max-width: 1400px) { .v2-plans { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1080px) { .v2-plans { grid-template-columns: repeat(2, 1fr); } }   /* tablet + mobile = 田字格 */
@media (max-width: 640px) { .v2-packs { 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; }
/* plain (station) wears the SAME gold as C// — equal rank, no lesser tier */
.v2-lead-plain 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-plain strong { color: #f5c542; }
.v2-lead-plain .ncp-detail-dot { background: #f5c542; box-shadow: 0 0 9px rgba(245,197,66,0.9); }
/* SOVEREIGN ASSET badge — both kind cards carry it, same gold.
   No extra margin: the card is a centered flex column with an even gap,
   so uniform spacing keeps the whole text block vertically centered. */
.v2-sov-tag {
  display: block;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: rgba(245,197,66,0.8);
}
/* the one-tree line under the C// drop line — quiet italic, gold core */
.v2-tree-line {
  margin: 4px 0 16px; font-family: var(--font-mono); font-size: 11px; font-style: italic;
  line-height: 1.7; color: rgba(200,214,235,0.75);
}
.v2-tree-line strong { color: #f5c542; font-style: normal; }
.v2-gold-note { color: #f5c542; }
/* footnote link (yucrown.earth) — white bold, white underline, ↗ marks the jump */
.v2-note-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.45); text-underline-offset: 2px; }
.v2-note-link:hover { text-decoration-color: #fff; }
.v2-note-link:hover strong { color: #fff; }
.v2-note-arr { margin-left: 3px; font-size: 10px; text-decoration: none; display: inline-block; }
.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; }
/* the station being minted — a mini echo of its rail card (same cover + name,
   selected-gold border) so the lane always answers "minting WHAT" */
.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);
}
.v2-lane-this-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* name wears the SAME face as the rail card label (.home-pick-label):
   pixel font · 8px · 400 · bottom gradient scrim */
.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) 0%, transparent 58%);
  font-family: var(--font-pixel); font-size: 8px; 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; text-align: left;
}
.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: 720px; }   /* the Crown sheet — wide, unhurried */
/* 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; }
  /* Zo 0723: at phone width the 2×2 田字格 can't fit — the pixel price type
     sets each card's min content width past half the screen, and the panel's
     overflow:hidden ate the right column. One column, full width. */
  .v2-plans { gap: 14px; grid-template-columns: 1fr; }
  .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; }
  .gallery-grid.mg-grid { margin: 16px 14px 40px; }
  .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; }
}

/* ══ 2026-07 spec alignment — model picker · style notes · refine · cast credits ·
      activity log · legal ticks (matches the production Stations screens) ══ */

/* style notes — quiet rounded field under the words hint */
.home-style-notes {
  width: 100%; margin-top: 12px; padding: 13px 16px;
  background: rgba(10,18,34,0.55); border: 1px solid rgba(120,140,170,0.28); border-radius: 14px;
  font-family: var(--font-mono); font-size: 13px; color: #dbe6f5; outline: none;
}
.home-style-notes::placeholder { color: rgba(150,166,192,0.55); }
.home-style-notes:focus { border-color: rgba(245,197,66,0.45); }

/* model picker — Navi 1.5 / 2.0, one always lit */
.home-model-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.home-model {
  padding: 12px 10px; border-radius: 12px; cursor: pointer;
  background: rgba(10,18,34,0.55); border: 1px solid rgba(120,140,170,0.28);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: rgba(200,214,235,0.8);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.home-model:hover { border-color: rgba(200,214,235,0.5); }
.home-model-on {
  background: rgba(245,197,66,0.08); border-color: #f5c542; color: #f5c542;
  box-shadow: 0 0 14px rgba(245,197,66,0.12);
}
.home-model-note { margin-top: 7px; font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.6); }

/* refine — the blue retune lane under compose */
.home-refine-input {
  width: 100%; margin-top: 12px; padding: 13px 16px;
  background: rgba(10,18,34,0.55); border: 1px solid rgba(120,140,170,0.28); border-radius: 12px;
  font-family: var(--font-mono); font-size: 13px; color: #dbe6f5; outline: none;
}
.home-refine-input::placeholder { color: rgba(170,186,212,0.7); }
.home-refine-input:focus { border-color: rgba(74,158,222,0.55); }
.home-refine-btn {
  width: 100%; margin-top: 10px; padding: 15px; border: 2px solid #0b1830; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg,#4a90d0,#3672ac); color: #fff;
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px;
  box-shadow: 0 5px 0 #1d3f66; 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-refine-btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 #1d3f66; }
.home-refine-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #1d3f66; }

/* cast credits — second balance bar in Plan & Credits */
.v2-castbar { margin-top: 10px; }

/* RECENT ACTIVITY — under the plan cards */
.v2-act-lbl { margin: 26px 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(170,188,215,0.55); }
.v2-act-list { display: flex; flex-direction: column; }
.v2-act-row {
  display: flex; align-items: baseline; gap: 14px; padding: 13px 2px;
  border-bottom: 1px solid rgba(120,140,170,0.14);
}
.v2-act-what { font-family: var(--font-mono); font-size: 13px; color: #dbe6f5; flex: 1; }
.v2-act-when { font-family: var(--font-mono); font-size: 11px; color: rgba(170,188,215,0.55); white-space: nowrap; }
.v2-act-delta { font-family: var(--font-pixel); font-size: 13px; color: #e0784a; min-width: 44px; text-align: right; }
.v2-act-delta.v2-act-plus { color: #f5c542; }
/* where it was spent — this site, an assistant on the connector, or an API key.
   Quiet by design: it answers a question rather than announcing itself, and it is
   only present on rows that actually came from somewhere other than here. */
.v2-act-via {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(170,188,215,0.72); border: 1px solid rgba(120,140,170,0.24);
}
/* what a compose was priced on — the answer to "why was that one expensive" */
.v2-act-why {
  margin-top: 5px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: rgba(170,188,215,0.5);
}
.v2-act-empty {
  padding: 16px 2px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: rgba(170,188,215,0.55);
}

/* legal ticks — gate every paid confirm (top-up / cast pack / mint) */
.v2-tos-block { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.v2-tos { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.v2-tos span { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: #cdd9ea; }
.v2-tos span b { color: #e7eefb; }
.v2-tos-ck {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin-top: 1px;
  width: 17px; height: 17px; border-radius: 50%; cursor: pointer;
  background: #f2f5fa; border: 1px solid rgba(120,140,170,0.5);
}
.v2-tos-ck:checked { background: #f5c542; border-color: #f5c542; box-shadow: inset 0 0 0 3px #101a2e; }
.v2-tos-link { color: #f5c542; text-decoration: underline; text-underline-offset: 3px; }
.v2-tos-link:hover { color: #ffd766; }

/* disabled paid buttons — dimmed until every box is ticked */
.ncp-btn-anchor:disabled, .ncp-btn-anchor[disabled] {
  background: linear-gradient(180deg,#8a7a5e,#6f6350); color: rgba(255,245,230,0.5);
  border-color: #4a4335; box-shadow: 0 5px 0 #3d3729, inset 0 2px 0 rgba(255,255,255,0.08);
  cursor: not-allowed; transform: none;
}
.ncp-btn-anchor:disabled:hover { transform: none; box-shadow: 0 5px 0 #3d3729, inset 0 2px 0 rgba(255,255,255,0.08); }

/* mint fine print — italic, as on the production sheet */
.v2-mint-note { font-style: italic; }

/* mobile — additive only: new inputs must sit at ≥16px (iOS focus-zoom floor) */
@media (max-width: 640px) {
  .home-style-notes, .home-refine-input { font-size: 16px; }
  .v2-act-when { display: none; }
  .home-model { font-size: 12px; }
}

/* ══ Cast panel — global Cast-credit model (replaces per-station pool UI) ══ */
.v2-castcred-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.v2-castcred-big { font-family: var(--font-mono); font-size: 13px; color: rgba(200,214,235,0.8); }
.v2-castcred-big b { font-family: var(--font-pixel); font-size: 26px; font-weight: 400; color: #f5c542; margin: 0 6px; }
/* the + is always visible here (unlike the animated home-quickadd) → Buy Cast Pack */
.v2-castcred-add {
  width: 30px; height: 30px; opacity: 1; pointer-events: auto; overflow: visible;
  transform: none; box-shadow: none;
  background: rgba(245,197,66,0.08); border: 1.5px solid rgba(245,197,66,0.5);
  border-radius: 9px; color: #f5c542;
}
.v2-castcred-add:hover { background: rgba(245,197,66,0.16); border-color: #f5c542; color: #f5c542; transform: scale(1.08); }

/* ══ 03 Your Style — preset chips (six visible · ⟳ shuffles three batches) ══ */
.home-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.home-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(10,18,34,0.55); border: 1px solid rgba(120,140,170,0.28);
  font-family: var(--font-mono); font-size: 12px; color: rgba(200,214,235,0.8);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.home-chip:hover { border-color: rgba(245,197,66,0.55); color: #f5c542; background: rgba(245,197,66,0.06); }
.home-chip-shuffle {
  flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(245,197,66,0.1); border: 1px solid rgba(245,197,66,0.55);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: #f5c542;
  box-shadow: 0 0 12px rgba(245,197,66,0.14);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.home-shuffle-ico { display: inline-block; font-size: 14px; line-height: 1; transition: transform 0.5s ease; }
.home-chip-shuffle:hover { background: rgba(245,197,66,0.2); border-color: #f5c542; box-shadow: 0 0 16px rgba(245,197,66,0.32); }
.home-chip-shuffle:hover .home-shuffle-ico { transform: rotate(180deg); }
.home-chip-shuffle:active .home-shuffle-ico { transform: rotate(360deg); }

@media (max-width: 640px) {
  .home-chip { font-size: 12px; }   /* buttons are exempt from the 16px floor (no zoom on tap) */
}

/* ══ AB · V1b — the chain door + the chain page ══════════════════════════ */
/* door state 1 — ignited invite (composed, not minted): breathing gold */
.chain-door-lit {
  border-color: rgba(245,197,66,0.65) !important; color: #f5c542 !important;
  background: rgba(245,197,66,0.08) !important;
  animation: chainDoorBreathe 2.6s ease-in-out infinite;
}
@keyframes chainDoorBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,66,0.0); }
  50% { box-shadow: 0 0 18px 2px rgba(245,197,66,0.28); }
}
/* door state 2 — live badge (minted): quiet gold chrome, still clearly a button */
.chain-door-badge {
  border-color: rgba(245,197,66,0.5) !important; color: #f5c542 !important;
  background: rgba(245,197,66,0.06) !important;
  font-family: var(--font-mono);
}
.chain-door-badge:hover { background: rgba(245,197,66,0.14) !important; box-shadow: 0 0 14px rgba(245,197,66,0.25); }
.chain-door-arr { margin-left: 6px; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .chain-door-lit { animation: none; } }

/* the chain page header — back pill + tag */
.chain-head { display: flex; align-items: center; gap: 16px; padding-top: 26px; }
.chain-back {
  background: rgba(10,18,34,0.6); border: 1px solid rgba(120,140,170,0.35); border-radius: 999px;
  color: #dbe6f5; font-family: var(--font-mono); font-size: 13px; padding: 9px 16px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.chain-back:hover { border-color: #f5c542; color: #f5c542; }
.chain-head-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(245,197,66,0.75); }

/* ══ AB · V1 — gallery-first home (centered title · Browse parts inline) ══ */
.gallery-head { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 40px 0 6px; }
/* AB-CN: the docked ship — Navi aboard, idling beside MY STATIONS; click =
   fly home to the realm (same pixel ship as the realm's MY STATIONS prop) */
.nsp-home {
  background: rgba(24,176,245,0.08); border: 1px solid rgba(24,176,245,0.32); border-radius: 13px;
  padding: 8px 14px 7px; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nsp-home:hover { background: rgba(24,176,245,0.16); border-color: rgba(24,176,245,0.62); box-shadow: 0 0 18px rgba(24,176,245,0.28); }
.nsp-cap {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600;
  color: rgba(185,218,248,0.92); white-space: nowrap;
  transition: color .18s ease;
}
.nsp-home:hover .nsp-cap { color: #bfe2ff; }
.nsp-home svg {
  width: 40px; height: 40px; display: block; overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
  animation: nspBob 3.2s ease-in-out infinite;
  transition: filter .2s ease;
}
.nsp-home:hover svg {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(24,176,245,0.55));
}
@keyframes nspBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.nsp-dome { fill: #9ccdf0; opacity: 0.55; }
.nsp-hl { fill: #35608e; }
.nsp-bd { fill: #1e3d5d; }
.nsp-sh { fill: #142c46; }
.nsp-ft { fill: #0e2136; }
.nsp-pn { fill: #155a8a; }
.nsp-gr { fill: #0c1c30; }
.nsp-au { fill: #f5c542; }
.nsp-in { fill: #46c8e8; }                     /* Navi aboard — always, on this side */
.nsp-fl { fill: #ffd76a; opacity: 0; }
/* the flight home — rumble, flame, off to the left (where the realm lives) */
.nsp-going svg { animation: nspGoHome .7s cubic-bezier(.5, 0, .85, .5) forwards; }
.nsp-going { background: transparent; border-color: transparent; box-shadow: none; }
.nsp-going .nsp-cap { opacity: 0; transition: opacity .2s ease; }
.nsp-going .nsp-fl1 { opacity: 1; animation: nspFlame .12s steps(2) infinite; }
.nsp-going .nsp-fl2 { opacity: 1; animation: nspFlame .12s steps(2) .06s infinite; }
@keyframes nspFlame { 0% { opacity: 0.95; } 100% { opacity: 0.25; } }
@keyframes nspGoHome {
  14% { transform: translate(2px, 1px); }
  28% { transform: translate(-2px, -1px); }
  100% { transform: translate(-170px, -70px) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .nsp-home svg, .nsp-going svg { animation: none; } }
.gallery-head .v2-sec-title { text-align: center; }
/* the sort + Crowned row aligns to the search box edges (same 24px inset) */
/* the fixed separator under the chips — same seat in every view */
.gal-csep { height: 1px; background: rgba(130,172,228,0.1); margin: 16px 24px 0; }
/* ONE refined tool row — compact search left, crowned · | · sort right */
.mg-filterbar.gal-filterbar { width: auto; margin: 14px 24px 18px; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
.gal-search-wrap {
  flex: 0 1 260px; min-width: 150px; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  background: rgba(120,140,170,0.14); border: 1px solid rgba(150,190,225,0.22); border-radius: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.gal-search-wrap:focus-within { border-color: rgba(150,190,225,0.5); background: rgba(120,140,170,0.2); }
.gal-search-ico { color: rgba(205,221,242,0.4); font-size: 13px; }
.gal-search { flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none; background: transparent !important; background-image: none !important; border: none !important; outline: none; box-shadow: none !important; border-radius: 0; font-family: var(--font-mono); font-size: 12px; color: #e7eefb; }
.gal-search::placeholder { color: rgba(205,221,242,0.35); }
.gal-tool-sp { flex: 1 1 auto; }
.gal-tool-div { width: 1px; height: 18px; background: rgba(150,190,225,0.22); }
.gal-filterbar .mg-statebar { margin-left: 0; }
.gallery-grid.mg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 20px 24px 44px; padding: 0; }
/* uniform 4:3 tiles (shorter than the old squares — more rows per screen,
   especially on phones) — the NEW STATION card sits in the grid like any station */
.gallery-grid .mg-card, .gallery-grid .br-new-card { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
@media (max-width: 640px) {
  .gallery-head { padding-top: 26px; }
}

/* ══ AB · V2 — the step track (Compose | Mint & Cast) ════════════════════ */
.ws-steps { display: flex; align-items: center; gap: 14px; padding: 4px 0 0; }
.ws-step {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(10,18,34,0.6); border: 1px solid rgba(120,140,170,0.3); border-radius: 999px;
  color: rgba(200,214,235,0.75); font-family: var(--font-mono); font-size: 13px;
  padding: 10px 18px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ws-step-n { font-family: var(--font-pixel); font-size: 9px; color: rgba(245,197,66,0.7); }
.ws-step:hover { border-color: rgba(200,214,235,0.55); color: #dbe6f5; }
.ws-step-on { border-color: #f5c542; color: #f5c542; background: rgba(245,197,66,0.08); }
.ws-steps-line { flex: 0 0 26px; border-top: 1px dashed rgba(120,140,170,0.4); }
.ws-step-locked { opacity: 0.55; cursor: pointer; }
.ws-step-lit {
  border-color: rgba(245,197,66,0.65); color: #f5c542; background: rgba(245,197,66,0.06);
  animation: chainDoorBreathe 2.6s ease-in-out infinite;
}
.ws-step-badge { border-color: rgba(245,197,66,0.5); color: #f5c542; }
@media (prefers-reduced-motion: reduce) { .ws-step-lit { animation: none; } }
@media (max-width: 640px) { .ws-step { font-size: 12px; padding: 9px 13px; } .ws-steps { flex-wrap: wrap; } }

/* ══ Browse / gallery — production alignment: state filter · card actions ══ */
.mg-statebar { display: flex; gap: 8px; margin-left: auto; }
.mg-filterbar { display: flex; align-items: center; width: 100%; }
.mg-state-btn {
  height: 34px; padding: 0 15px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center;
  background: rgba(120,140,170,0.14); border: 1px solid rgba(150,190,225,0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 12.5px; color: rgba(200,214,235,0.7);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mg-state-btn:hover { color: #dbe6f5; border-color: rgba(200,214,235,0.5); }
.mg-state-btn.mg-state-on { background: #f5c542; border-color: #f5c542; color: #241b06; font-weight: 600; }

/* card actions — top-right on hover: hide-link (style only) + delete */
.mg-card-acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 7px; opacity: 0; transition: opacity 0.15s; z-index: 6; }
.mg-card:hover .mg-card-acts { opacity: 1; }
.mg-act {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,12,20,0.72); border: 1px solid rgba(120,140,170,0.35); color: #cdd9ea;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mg-act:hover { border-color: rgba(200,214,235,0.6); }
.mg-act-fs { font-size: 15px; }   /* the ⛶ glyph runs small at button size */
.mg-act-eye.mg-act-on { border-color: #f5c542; color: #f5c542; background: rgba(60,48,10,0.8); }
.mg-act-trash:hover { background: #b3362e; border-color: #b3362e; color: #fff; }

/* hidden-link state — the dimmed cover alone reads it; the eye icon
   (title="Switch link on") carries the rest */
.mg-card-linkhidden .mg-card-cover { filter: brightness(0.45) saturate(0.55); }

/* hover CTA — the solid gold pill from the production Browse */
.mg-card-hover .mg-card-open {
  background: linear-gradient(180deg,#f7cd5a,#e0a83a); color: #241b06;
  border: none; border-radius: 999px; padding: 13px 24px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.5px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
@media (max-width: 640px) {
  .mg-statebar { margin-left: 0; flex-wrap: wrap; }
  .gal-filterbar { margin-left: 14px; margin-right: 14px; flex-wrap: wrap; }
  .gal-search-wrap { flex: 1 1 100%; }
  .gal-search { font-size: 16px; }
  .gal-csep { margin: 14px 14px 0; }
  .mg-filterbar { flex-wrap: wrap; row-gap: 8px; }
  .mg-card-acts { opacity: 1; }   /* no hover on touch — keep actions reachable */
}

/* ══ AB — back-to-gallery pill: top-left, above the section title ═════════ */
.ws-back-row { padding-top: 26px; margin-bottom: -10px; display: flex; }

/* ══ AB — back link: quiet text control, clearly a level-up move ══════════ */
.nav-back-row { padding-top: 34px; margin-bottom: 26px; display: flex; }
.nav-back {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: rgba(170,188,215,0.6);
  transition: color 0.15s;
}
.nav-back-arr { font-size: 16px; line-height: 1; transition: transform 0.18s ease; }
.nav-back:hover { color: #f5c542; }
.nav-back:hover .nav-back-arr { transform: translateX(-4px); }

/* ══ AB — back pill: same family as the top-right plan pill / menu chrome.
   Fixed top-left, always visible; hides while the nav drawer is open. ══ */
.nav-back-row { padding: 0; margin: 0; height: 0; }
.nav-back {
  position: fixed; top: 23px; left: 24px; z-index: 419;
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px;
  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; letter-spacing: 0.03em;
  color: rgba(205,221,242,0.6); cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.nav-back-arr { font-size: 13px; line-height: 1; transition: transform 0.18s ease; }
.nav-back:hover {
  background: rgba(16,28,52,0.8); border-color: rgba(245,197,66,0.5); color: #f5c542;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(245,197,66,0.15);
}
.nav-back:hover .nav-back-arr { transform: translateX(-3px); }
body.ncp-nav-open .nav-back { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .nav-back { left: 14px; } }

/* ══ AB · V2 — segmented switcher (replaces the pill track) ═══════════════ */
.ws-seg-row { display: flex; justify-content: center; padding: 12px 0 4px; }
.ws-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(10,16,30,0.72); border: 1px solid rgba(120,140,170,0.22); border-radius: 999px;
}
.ws-seg-btn {
  border: none; background: none; cursor: pointer; border-radius: 999px;
  padding: 10px 28px; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.02em;
  color: rgba(200,214,235,0.6);
  transition: background 0.18s ease, color 0.18s ease;
}
.ws-seg-btn:hover { color: #dbe6f5; }
.ws-seg-btn.ws-seg-on { background: #f5c542; color: #241b06; font-weight: 600; }
.ws-seg-btn.ws-seg-on:hover { color: #241b06; }
.ws-seg-locked { opacity: 0.45; }
@media (max-width: 640px) { .ws-seg-btn { padding: 9px 18px; font-size: 12.5px; } }

/* ══ AB — minted door goes SOLID gold (Broadcast's own recipe) ════════════ */
.chain-door-minted, .ncp-dark .chain-door.chain-door-minted {
  font-family: var(--font-pixel) !important; font-size: 10px !important; letter-spacing: 1px;
  background: linear-gradient(180deg,#f5c542,#e0a040) !important; color: #2a1c06 !important;
  border: 2px solid #b9831f !important; box-shadow: 0 3px 0 #8f6416 !important;
}
.chain-door-minted:hover, .ncp-dark .chain-door.chain-door-minted:hover { transform: translateY(2px); box-shadow: 0 1px 0 #8f6416 !important; }

/* minted stamp above the canvas — gold seal with a slow shimmer sweep */
.v2-mint-banner {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 13px; padding: 10px 14px;
  border: 1px solid rgba(245,197,66,0.55); border-radius: 9px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 2px; color: #f5c542;
  background: linear-gradient(100deg, rgba(245,197,66,0.04) 32%, rgba(245,197,66,0.2) 50%, rgba(245,197,66,0.04) 68%);
  background-size: 240% 100%;
  animation: mintShimmer 4s ease-in-out infinite;
}
@keyframes mintShimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.v2-mb-d { animation: mintPulse 2.4s ease-in-out infinite; }
@keyframes mintPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2-mint-banner, .v2-mb-d { animation: none; } }

/* back pill — brighter: credit-pill border weight, white type, gold on hover */
.nav-back {
  color: rgba(231,238,251,0.92);
  border-color: rgba(200,214,235,0.35);
  font-weight: 600;
}

/* segment switcher — bolder frame, white type */
.ws-seg { border: 1.5px solid rgba(200,214,235,0.4); }
.ws-seg-btn { color: #e7eefb; font-weight: 600; }
.ws-seg-btn.ws-seg-on { color: #241b06; }

/* minted stamp → small tag, left-aligned above the canvas thumbnail only */
div.v2-mint-banner, .ncp-dark div.v2-mint-banner {
  width: fit-content !important; align-self: flex-start !important; justify-content: flex-start !important;
  margin: 0 0 10px !important; padding: 6px 12px !important; gap: 7px !important;
  border-radius: 7px !important; font-size: 7px !important; letter-spacing: 1.6px !important;
}

/* chain layer reads as ONE block — cast follows mint tightly (seam removed) */
#v2-cast-mount .v2-sec-rail { margin-top: 8px; }

/* ══ segmented switcher — control-sized, tied to its content by side rules ══ */
.ws-seg-row { display: flex; align-items: center; gap: 20px; }
.ws-seg-row::before, .ws-seg-row::after { content: ''; flex: 1; border-top: 1px solid rgba(120,140,170,0.16); }
.ws-seg { padding: 3px; gap: 3px; }
.ws-seg-btn { padding: 8px 22px; font-size: 12.5px; }

/* footer pins to the viewport bottom on short pages */
.dashboard-view { min-height: 100vh; display: flex; flex-direction: column; }
@supports (height: 100dvh) { .dashboard-view { min-height: 100dvh; } }
/* AB: margin-top:auto pins the footer on short pages (gallery), but on tall pages
   (Compose is always tall) it collapses to 0 and the divider jams against content.
   Move the divider + breathing gap into ::before so every view gets the same air
   above the line, while auto still pins short pages. overflow:hidden gives the
   footer its own BFC so the pseudo's margin can't collapse into the auto margin. */
.dashboard-view > .evt-footer { margin-top: auto; border-top: 0 !important; padding-top: 0 !important; overflow: hidden; }
.dashboard-view > .evt-footer::before { content: ''; display: block; margin-top: 48px; border-top: 1px solid rgba(24,176,245,0.12); }
.dashboard-view > .evt-footer > p:first-child { margin-top: 24px; }
/* flex-column children with auto margins shrink-wrap — force full width back */
.dashboard-view > * { width: 100%; }

/* schedule-send field (front-end only) — sits between emails and the Cast button */
.v2-sched-lbl { margin-top: 14px; }
.v2-sched-hint { color: rgba(170,188,215,0.4); letter-spacing: 0.04em; }
.v2-dis-sched {
  min-height: 0 !important; height: 46px; resize: none; margin-top: 7px;
  font-family: var(--font-mono); font-size: 13px; color: #dbe6f5;
  color-scheme: dark;
}
.v2-dis-sched::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
@media (max-width: 640px) { .v2-dis-sched { font-size: 16px; height: 50px; } }

/* ═══ AB-D4: the quiet composer — left–right stage. Left = ONE glass input
   box (the AI-input convention): text field, image chips, a toolbar of
   [+ images][✦ style]···[Navi ▾][Compose], with the ↳ Refine line under it.
   Middle = Navi herself (homepage pixel sprite), alive between the panels —
   press Compose and she lights up and hands a ✦ across. Right = the canvas
   (click = full screen, Broadcast rides on the page) + byline with the
   editable description. ═══ */

/* ── the row ── */
.home-split.d4-row { flex-direction: row; align-items: stretch; gap: 0; max-width: 1400px; padding-bottom: 46px; }
.v2-page .home-split.d4-row { margin-top: 46px; }   /* clear air below the Compose | Mint & Cast switcher */
.d4-row .home-left { flex: 1 1 42%; min-width: 380px; display: flex; flex-direction: column; }
.d4-row .home-right { flex: 1 1 46%; min-width: 0; display: block; }   /* AB-BX: narrowed — state 2 seats the rail in the slack */
/* the connector: Navi standing on the Compose orb (caption retired) */
.d4-link {
  flex: 0 0 112px; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 0 4px;
}
.d4-link canvas { width: 52px; height: 52px; image-rendering: pixelated; display: block; }
/* ── the Compose ORB — a SOLID raised button (same press physics as the
   pixel buttons), bigger than Navi, sitting clear below her (no overlap).
   Unlit until the writer writes; gold when ready. ── */
#d4-orb-mount { margin-top: 8px; }
.d4-orb {
  width: 84px; height: 64px; border-radius: 20px;   /* a rounded, near-square rectangle — roomy enough for "ADD CREDITS" */
  position: relative;                                 /* anchors the hover cost tip */
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0b1830;
  background: linear-gradient(180deg,#25314d,#141d33);
  color: rgba(190,205,228,0.85);
  cursor: not-allowed; font-size: 22px; line-height: 1;
  box-shadow: 0 5px 0 #0a1122, 0 9px 20px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.08);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.25s ease, transform 0.12s ease;
}
.d4-orb svg { width: 26px; height: 26px; display: block; }
/* the compose cost — a quiet custom hover tip (replaces the native title), low-key */
.d4-orb-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px); pointer-events: none; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px; z-index: 5;
  background: rgba(10,16,30,0.92); border: 1px solid rgba(120,150,190,0.2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: rgba(198,212,235,0.8);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
.d4-orb:hover .d4-orb-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.d4-orb-tip .d4-cost { color: rgba(245,197,66,0.82); }   /* gold = the credits */
/* over the plan ceiling: the price stops being ambient and gets loud (Ellen ruling
   2026-07-27 §3). --sun is the system's warm-warning token; no new colour invented. */
.d4-cost-over { color: var(--sun) !important; font-weight: 600; letter-spacing: .02em; }
.d4-orb-tip .d4-cost-over { color: #E39A4A !important; }   /* lifted for the dark tip */
.d4-gate-armed .d4-orb-tip { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
.d4-gate-armed { box-shadow: 0 0 0 2px var(--sun); }
.d4-orb-lit {
  cursor: pointer;
  border-color: #8f6416;
  background: linear-gradient(180deg,#f7cf58,#dd9c28); color: #241a04;
  box-shadow: 0 5px 0 #8f6416, 0 10px 24px rgba(245,197,66,0.4), inset 0 2px 0 rgba(255,255,255,0.4);
}
.d4-orb-lit:hover { transform: translateY(1px); box-shadow: 0 4px 0 #8f6416, 0 9px 22px rgba(245,197,66,0.45), inset 0 2px 0 rgba(255,255,255,0.4); }
.d4-orb-lit:active { transform: translateY(4px); box-shadow: 0 1px 0 #8f6416, 0 5px 14px rgba(245,197,66,0.4), inset 0 2px 0 rgba(255,255,255,0.3); }
/* composing — the orb stays GOLD and a bright arc sweeps around it (the demo's
   loading spinner; real generation swaps in progress/elapsed, see NOTES §后端).
   The icon inside dims out so the spinning ring reads as "working". */
.d4-orb-busy {
  cursor: wait;
  border-color: #8f6416;
  background: linear-gradient(180deg,#f7cf58,#dd9c28); color: #241a04;
  box-shadow: 0 5px 0 #8f6416, 0 8px 20px rgba(245,197,66,0.4), inset 0 2px 0 rgba(255,255,255,0.4);
  position: relative;
}
/* composing: the icon slot itself becomes the universal loader — a classic
   270° arc spinning smoothly */
.d4-orb.d4-orb-busy svg { animation: d4PxSpin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes d4PxSpin { to { transform: rotate(360deg); } }
/* the icon breathes while lit — the → nudges toward the canvas, the ↻ turns.
   (idle/dead orb stays still; hover pauses so the press feels deliberate) */
.d4-orb-lit.d4-orb-new svg { animation: d4Nudge 1.5s ease-in-out infinite; }
.d4-orb-lit.d4-orb-again svg { animation: d4Spin 2.6s cubic-bezier(0.6,0,0.2,1) infinite; transform-origin: 50% 50%; }
.d4-orb-lit:hover svg { animation: none; }
@keyframes d4Nudge {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(3px); }
}
@keyframes d4Spin {
  0%, 55% { transform: rotate(0deg); }
  90%, 100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .d4-orb-lit svg { animation: none !important; }
}
.d4-orb-locked { opacity: 0.55; font-size: 17px; }
.d4-orb-topup {
  cursor: pointer; color: #f5c542;
  background: linear-gradient(180deg,#31405f,#1b2742);
}
.d4-orb-topup:hover { transform: translateY(1px); box-shadow: 0 4px 0 #0a1122, 0 9px 20px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.08); }
/* two-line pixel wording inside the rounded-rect face — roomier now */
.d4-orb-txt {
  font-family: var(--font-pixel); font-size: 8px; line-height: 1.8;
  letter-spacing: 0.04em; text-align: center; display: block;
}
.ncp-body .d4-row .home-station {
  border: none !important; box-shadow: none !important; clip-path: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.v2-page .d4-row .home-station { display: block; }
/* the hand-over star (position + travel set inline by d4Packet) */
.d4-packet {
  position: fixed; z-index: 500; pointer-events: none;
  color: #f5c542; font-size: 22px; line-height: 1;
  text-shadow: 0 0 16px rgba(245,197,66,0.85);
  transform: translate(0,0) scale(1); opacity: 1;
  transition: transform 0.85s cubic-bezier(0.45,0,0.55,1), opacity 0.9s ease;
}

/* ── stage ── */
.d4-stage { position: relative; }
.v2-frame-wide { aspect-ratio: 16 / 9; width: 100%; border-radius: 14px; }
.d4-frame-live { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.d4-frame-live:hover { border-color: rgba(180,200,240,0.38); box-shadow: 0 22px 56px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
.d4-fs {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8,12,24,0.45); color: rgba(255,255,255,0.78);
  font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.5;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .18s ease, transform .18s ease;
}
.v2-frame-wide:hover .d4-fs { opacity: 1; }
.d4-fs:hover { transform: scale(1.08); }

/* ── on-canvas Broadcast — visible, born with the page ── */
.d4-bc-on {
  position: absolute; top: 12px; right: 12px; z-index: 3; cursor: pointer;
  background: rgba(8,12,24,0.6);
  border: 1px solid rgba(245,197,66,0.5); border-radius: 999px;
  color: #f5c542; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  padding: 8px 16px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.d4-bc-on .ns-star { color: #f5c542; }
.d4-bc-on:hover { background: rgba(30,24,8,0.75); border-color: rgba(245,197,66,0.85); transform: translateY(-1px); }

/* ── byline (name · kicker · editable description) ── */
.d4-byline { margin: 14px 4px 0; }
.d4-name {
  min-width: 0; margin: 0;
  font-family: var(--font-pixel); font-size: 15px; letter-spacing: 0.04em;
  color: #eef2fa; overflow-wrap: anywhere;
}
.d4-kicker {
  margin-top: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(140,165,205,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d4-desc {
  margin-top: 9px; font-family: var(--font-mono); font-size: 12px; font-style: italic;
  line-height: 1.6; color: rgba(205,217,234,0.72); overflow-wrap: anywhere;
  border-left: 2px solid rgba(245,197,66,0.35); padding-left: 10px;
}
.d4-desc-edit { cursor: text; transition: color .15s ease, border-color .15s ease; }
.d4-desc-edit:hover { color: rgba(225,235,248,0.95); border-left-color: rgba(245,197,66,0.65); }
.d4-desc-empty { color: rgba(140,165,205,0.45); border-left-color: rgba(120,162,220,0.25); font-style: normal; }
.d4-desc-input {
  width: 100%; background: rgba(10,18,34,0.5); border: 1px solid rgba(120,162,220,0.4);
  border-radius: 8px; padding: 8px 10px; outline: none;
  font-family: var(--font-mono); font-size: 12px; font-style: italic; color: #e6edf8;
}

/* ── the composer box ── */
.d4-composer {
  position: relative; margin: 0; width: 100%;
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: rgba(16,27,48,0.72);
  border: 1px solid rgba(130,172,228,0.34); border-radius: 16px;
  -webkit-backdrop-filter: blur(9px) saturate(1.05); backdrop-filter: blur(9px) saturate(1.05);
  padding: 14px 14px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: border-color .18s ease;
}
.d4-composer:focus-within { border-color: rgba(120,162,220,0.5); }
/* ── top image row: uploaded thumbs + the add-image control, no divider
   (immersive) ── */
/* Joey 0724: many uploads used to push the toolbar + compose orb out of the
   composer (the strip grew without bound). Cap it at ~2 rows and scroll inside
   — the container height stays stable, nothing below gets shoved down. The 6px
   top padding keeps the floating × (top:-6) from clipping at the scroll edge. */
/* Ansong 0724: on a short laptop screen the strip was the only flex item that
   could give (the writing area holds a min-height), so it collapsed to a sliver
   — photos sliced, only the top of the × showing. The strip is rigid now; the
   writing area yields instead (it scrolls its own text). */
.d4-imgrow {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px;
  flex: 0 0 auto;
  max-height: 130px; overflow-y: auto; overflow-x: hidden; padding-top: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(150,190,225,0.4) transparent;
}
.d4-imgrow::-webkit-scrollbar { width: 8px; }
.d4-imgrow::-webkit-scrollbar-thumb { background: rgba(150,190,225,0.4); border-radius: 8px; }
.d4-imgrow::-webkit-scrollbar-track { background: transparent; }
.d4-imgrow .nc-thumb { width: 54px; height: 54px; }   /* overflow VISIBLE so the × shows */
.d4-imgrow .nc-thumb img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: none; }
/* the × restored to a clean circle, floating on the corner (was clipped/squared) */
.ncp-body .d4-imgrow .nc-thumb-x {
  top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50% !important;
  background: #0b1830; color: #e6edf8; border: 1.5px solid rgba(200,214,235,0.5);
  font-size: 12px; line-height: 15px; z-index: 3; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ncp-body .d4-imgrow .nc-thumb-x:hover { background: #c0392b; border-color: #e0a0a0; }
/* ◈ cover — on the thumb's bottom edge, soft shadow keeps it readable */
.d4-imgrow .nc-thumb-pal {
  bottom: 3px; left: 0; right: 0; font-size: 6.5px; background: none; padding: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.65);
}
/* the add-image control: a wide dashed invite when empty, a mini +photo tile
   once photos exist */
.d4-add-top {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  height: 40px; padding: 0 15px; border-radius: 10px;
  border: 1.5px dashed rgba(120,162,220,0.4); background: rgba(255,255,255,0.03);
  color: #b9c9e2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.d4-add-top:hover { border-color: rgba(120,162,220,0.7); color: #e6edf8; background: rgba(255,255,255,0.06); }
.d4-add-top .d4-plus { font-size: 16px; line-height: 1; }
.d4-add-top .d4-img-ico { width: 15px; height: 15px; }
.d4-add-top .d4-add-hint { white-space: nowrap; }
.d4-add-mini { width: 54px; height: 54px; padding: 0; justify-content: center; gap: 3px; }
.d4-add-mini .d4-add-hint { display: none; }
/* AB-D4: the AI-images switch — a toolbar chip (style's twin) with a tiny
   track+knob. Decorative bridge, decoupled from uploading — NOTES §三-2. */
.d4-aimg { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; padding-left: 10px; padding-right: 10px; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
.d4-bar .d4-model-btn { white-space: nowrap; }
.d4-bar .d4-style-btn { white-space: nowrap; }
.d4-aimg-track {
  width: 28px; height: 15px; border-radius: 999px; position: relative; flex-shrink: 0;
  background: rgba(120,150,190,0.22); border: 1px solid rgba(140,170,210,0.32);
  transition: background .18s ease, border-color .18s ease;
}
.d4-aimg-knob {
  position: absolute; top: 1px; left: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: #b9c9e2; transition: transform .18s ease, background .18s ease;
}
.d4-aimg[aria-checked="true"] { color: #f5c542; border-color: rgba(245,197,66,0.55); }
.d4-aimg[aria-checked="true"] .d4-aimg-track { background: rgba(245,197,66,0.3); border-color: rgba(245,197,66,0.6); }
.d4-aimg[aria-checked="true"] .d4-aimg-knob { transform: translateX(13px); background: #f5c542; }
/* ✦ imagining tier — standard ◆30 · fine ◆40 (rate card v1.4). Joey 0722:
   a little dropdown trigger INSIDE the pill; options live in .d4-pop-imtier */
.d4-imtier {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 1px;
  font-size: 10px; padding: 2px 8px; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; flex-shrink: 0; cursor: pointer; white-space: nowrap;
  color: rgba(255,255,255,0.72); transition: color .15s, border-color .15s;
}
.d4-imtier:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.d4-aimg[aria-checked="true"] .d4-imtier { color: #f5c542; border-color: rgba(245,197,66,0.4); }
.d4-pop-imtier { left: 50%; transform: translateX(-50%); width: 180px; display: flex; flex-direction: column; gap: 8px; }
/* .ncp-body prefix outguns preview-dark's `.ncp-dark .nc-text` glass rule
   (equal specificity would lose on file order) — the box itself is the glass */
.ncp-body .d4-composer .d4-text {
  display: block; width: 100%; resize: none;
  flex: 1 1 auto; min-height: 220px !important;   /* the box is tall now — room to write */
  background: transparent !important; border: none !important; outline: none; box-shadow: none !important;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: #e6edf8;
  padding: 2px 4px; margin: 0;
}
.ncp-body .d4-composer .d4-text:focus { box-shadow: none !important; }

/* ── toolbar — a hairline separates it from the writing surface.
   NO wrap on desktop: flex wraps BEFORE shrink ever engages, so the row
   stays single-line and the style chip (the one shrinkable tool) squeezes
   to an ellipsis instead. Mobile re-enables wrap in its own block. ── */
.d4-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;   /* Zo 0722: wrap before crushing Style */
  margin-top: 10px; padding-top: 11px;
  border-top: 1px solid rgba(120,162,220,0.16);
}
.d4-sp { flex: 1 1 auto; }
.d4-tool {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,162,220,0.22); border-radius: 999px;
  color: #b9c9e2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  padding: 7px 12px; cursor: pointer; user-select: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.d4-tool:hover, .d4-tool-open { border-color: rgba(120,162,220,0.45); color: #e6edf8; background: rgba(255,255,255,0.07); }
.d4-tool-set { border-color: rgba(245,197,66,0.4); color: #f5c542; }
.d4-tool-set:hover { color: #f5c542; }
.d4-plus { font-size: 14px; line-height: 1; margin-top: -1px; }
.d4-img-ico { width: 13px; height: 13px; }
.d4-x { margin-left: 3px; opacity: 0.7; font-size: 12px; }
.d4-x:hover { opacity: 1; }
.d4-caret { font-size: 8px; opacity: 0.7; }
/* (Compose is the round orb in the connector — see .d4-orb above) */

/* ── popovers (style / model) — bloom just above the toolbar (proximity:
   the box is tall now, so anchoring to its top would strand them far away) ── */
.d4-pop {
  position: absolute; bottom: 68px; z-index: 30;
  background: rgba(11,18,34,0.97);
  border: 1px solid rgba(120,162,220,0.3); border-radius: 14px;
  padding: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.d4-pop-style { left: 10px; width: min(440px, calc(100% - 20px)); }
.d4-pop-style .home-style-notes { margin-top: 0; }
.d4-pop-style .home-chip-row { margin-top: 10px; }
.d4-pop-model { right: 10px; width: 272px; display: flex; flex-direction: column; gap: 8px; }
.d4-model-opt {
  text-align: left; cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,162,220,0.22); border-radius: 10px;
  padding: 10px 12px; color: #dbe6f5;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
  transition: border-color .15s ease;
}
.d4-model-opt:hover { border-color: rgba(120,162,220,0.45); }
.d4-model-on { border-color: rgba(245,197,66,0.55); color: #f5c542; }
.d4-model-sub { display: block; margin-top: 4px; font-size: 10px; color: rgba(170,188,215,0.6); }
/* how many pictures to paint (Zo 0728). Borrows the option skin above rather than
   inventing a second look inside the same popover; the running total sits on the
   right because the add-on is charged PER IMAGE and nobody should have to multiply. */
/* up to 12 buttons at standard — they wrap rather than push the total off the edge */
.d4-imn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.d4-imn {
  cursor: pointer; flex: 0 0 auto; min-width: 34px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,162,220,0.22); border-radius: 10px;
  padding: 8px 0; color: #dbe6f5;
  font-family: var(--font-mono); font-size: 12px;
  transition: border-color .15s ease;
}
.d4-imn:hover { border-color: rgba(120,162,220,0.45); }
.d4-imn-on { border-color: rgba(245,197,66,0.55); color: #f5c542; }
.d4-imn-sum {
  margin-left: auto; padding-right: 2px;
  font-family: var(--font-mono); font-size: 12px; color: #f5c542;
}

.d4-model-on .d4-model-sub { color: rgba(245,197,66,0.55); }
/* "FROM" prefix on the credit floor — small, uppercase, sans (distinct from the mono option) */
.d4-from { font-family: var(--font-sans); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: rgba(170,188,215,0.5); vertical-align: 1px; margin-right: 1px; }
.d4-model-on .d4-from { color: rgba(245,197,66,0.5); }
/* one quiet line so the floor never reads as an exact price */
.d4-model-note { font-family: var(--font-mono); font-size: 9.5px; line-height: 1.45; letter-spacing: 0.02em; color: rgba(170,188,215,0.42); padding: 3px 4px 0; }

/* ── ↳ refine — the follow-up line, continuing the current page ── */
/* ── refine, ONE piece: a quiet capsule; its send key is the Compose orb's
   little sibling (raised body, hard bottom edge, pixel →) — blue, small,
   unlit until the writer types. No label, no fold. ── */
.d4-refine {
  display: flex; align-items: center; gap: 8px; margin: 12px 6px 0 18px;
  padding: 6px 6px 6px 16px;
  background: rgba(16,27,48,0.72);
  border: 1px solid rgba(130,172,228,0.34); border-radius: 16px;
  transition: border-color .18s ease;
}
.d4-refine:focus-within { border-color: rgba(120,162,220,0.55); }
/* .ncp-body prefix out-specifies preview-dark's `.ncp-dark input[type=text]`
   glass (both !important — higher specificity must carry it) */
.ncp-body .d4-refine .home-refine-input {
  flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 11px 4px;
  background: none !important; border: none !important; outline: none; box-shadow: none !important;
  border-radius: 0; font-size: 13px;
}
/* history, in the refine capsule — quiet next to the lit blue Refine key: it
   costs nothing and must not compete with the action that does. */
.d4-ver-btn {
  flex: 0 0 auto; cursor: pointer; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; line-height: 1;
  background: rgba(34,74,120,0.28); border: 1px solid rgba(90,150,210,0.4); color: #9dc4e8;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.d4-ver-btn:hover { color: #e7eefb; border-color: rgba(120,180,235,0.7); background: rgba(34,74,120,0.5); }
.d4-refine-send {
  flex: 0 0 auto; cursor: pointer; padding: 8px 15px; border-radius: 11px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  /* unlit: a clear blue-tinted chip (input-box level, not near-disabled) */
  background: rgba(34,74,120,0.4); border: 1px solid rgba(90,150,210,0.55); color: #a8cef0;
  box-shadow: 0 3px 0 rgba(8,20,36,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.d4-refine-send .ns-star { color: #7cc0f0; }
.d4-refine-send .d4-refine-cr { opacity: 0.75; }
.d4-refine-send:disabled { cursor: default; }
.d4-refine-send:not(:disabled) {
  /* lit: solid blue */
  background: linear-gradient(180deg, #57b8ec, #2187c8); border-color: #4aa9e0; color: #06263e;
  box-shadow: 0 3px 0 #14507c, inset 0 1px 0 rgba(255,255,255,0.35);
}
.d4-refine-send:not(:disabled) .ns-star { color: #06263e; }
.d4-refine-send:not(:disabled):hover { transform: translateY(1px); box-shadow: 0 2px 0 #14507c, inset 0 1px 0 rgba(255,255,255,0.35); }
.d4-refine-send:not(:disabled):active { transform: translateY(3px); box-shadow: 0 0 0 #14507c, inset 0 1px 0 rgba(255,255,255,0.3); }

/* ── narrow: stack to a column — canvas, then Navi on her orb (she carries
   the Compose action, so the connector STAYS), then the composer ── */
@media (max-width: 980px) {
  .home-split.d4-row { flex-direction: column; }
  .d4-row .home-left { min-width: 0; }
  .d4-row .home-right { order: -2; margin-bottom: 14px; }
  .d4-link { order: -1; flex: none; margin-bottom: 14px; }
  .d4-link canvas { width: 44px; height: 44px; }
  .ncp-body .d4-composer .d4-text { min-height: 140px !important; }
}

/* ── mobile (additive only) ── */
@media (max-width: 640px) {
  .d4-composer .d4-text { font-size: 16px; }   /* iOS focus-zoom floor */
  .d4-bar { flex-wrap: wrap; }
  .d4-name { font-size: 12px; }
  .d4-refine { margin-left: 8px; }
  .d4-desc-input { font-size: 16px; }
}
/* demo decks: the + image tool is visible but inert */
.d4-tool-locked, .d4-tool-locked:hover {
  opacity: 0.35; cursor: not-allowed;
  border-color: rgba(120,162,220,0.22); color: #b9c9e2; background: rgba(255,255,255,0.04);
}
/* style popover: input + ✓ confirm in one row */
.d4-pop-style-row { display: flex; gap: 8px; align-items: stretch; }
.d4-pop-style-row .home-style-notes { flex: 1 1 auto; min-width: 0; }
.d4-pop-ok {
  flex: 0 0 40px; cursor: pointer;
  border: 1px solid rgba(245,197,66,0.55); border-radius: 10px;
  background: rgba(245,197,66,0.12); color: #f5c542;
  font-size: 15px; line-height: 1;
  transition: background .15s ease, transform .1s ease;
}
.d4-pop-ok:hover { background: rgba(245,197,66,0.25); }
.d4-pop-ok:active { transform: translateY(1px); }
/* engine cost — small dim figure inside the Navi selector pill */
.d4-cr { font-size: 9px; opacity: 0.6; letter-spacing: 0.04em; margin: 0 1px; }
/* the style chip may still shrink, but never below a readable floor — past
   that the bar wraps instead (Zo 0722: Style was getting crushed) */
.d4-style-btn { flex: 0 1 auto; min-width: 92px; overflow: hidden; white-space: nowrap; }
.d4-style-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d4-x { flex: 0 0 auto; }
/* byline row: title left, Broadcast right — action strip under the media */
.d4-byline-row { display: flex; align-items: center; gap: 16px; }
.d4-byline-row .d4-name { flex: 1 1 auto; }
/* the classic gold pixel Broadcast — same skin as the original share button */
.d4-bc2 {
  flex: 0 0 auto; cursor: pointer;
  background: linear-gradient(180deg,#f5c542,#e0a040); color: #2a1c06;
  border: 2px solid #b9831f; border-radius: 0;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.06em;
  padding: 10px 16px; box-shadow: 0 3px 0 #8f6416;
  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));
  transition: transform 0.12s, box-shadow 0.12s;
}
.d4-bc2 .ns-star { color: #2a1c06; }
.d4-bc2:hover { transform: translateY(1px); box-shadow: 0 2px 0 #8f6416; }
.d4-bc2:active { transform: translateY(3px); box-shadow: 0 0 0 #8f6416; }
.d4-bc2-locked, .d4-bc2-locked:hover {
  opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 #8f6416;
}
/* the Navi selector stays a quiet tool — ONLY the "Navi 1.5/2.0" words are
   gold; frame, cost figure and caret keep the muted tool voice */
.d4-model-btn { color: #f5c542; font-weight: 600; }
.d4-model-btn:hover, .d4-tool-open.d4-model-btn { color: #f5c542; border-color: rgba(245,197,66,0.4); background: rgba(255,255,255,0.06); }
.d4-model-btn .d4-cr { color: #b9c9e2; opacity: 0.8; font-weight: 400; }
.d4-model-btn .d4-caret { color: #b9c9e2; opacity: 0.7; }
/* drag-a-picture-over-the-box feedback */
.d4-composer.d4-dropping { border-color: rgba(245,197,66,0.75); box-shadow: 0 0 0 2px rgba(245,197,66,0.25), 0 14px 40px rgba(0,0,0,0.35); }

/* ── AB-D4 gallery card foot ── */
/* the foot (name · date) sits above the hover dim and stays crisp */
.mg-card-foot { z-index: 3; }

/* status badges, top-left (parity with the live site) */
.mg-card-top { gap: 8px; justify-content: flex-start; z-index: 3; }
.mg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(8,14,26,0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mg-badge-cast { color: #f5c542; border: 1px solid rgba(245,197,66,0.55); }
.mg-badge-cast .ns-star { color: #f5c542; font-size: 10px; }
.mg-badge-mint { color: #57b6ee; border: 1px solid rgba(87,182,238,0.55); }

/* ── AB-D4 identity pill — Realm's twin (recipe copied per the copy-don't-
   import law; only the suffix wording differs). Gallery view only. ── */
#stn-topleft { position: fixed; top: 23px; left: 22px; z-index: 419; display: flex; align-items: center; }
#stn-id {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 999px; background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25); position: relative;
}
.stn-id-star { color: #f5c542; font-size: 10px; text-shadow: 0 0 10px rgba(245,197,66,0.5); }
#stn-id-n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff; }
.stn-id-lbl {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin: 0;
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(200,216,240,0.55);
  transition: max-width .35s ease, opacity .25s ease;
}
#stn-id:hover .stn-id-lbl { max-width: 90px; opacity: 1; }
.stn-id-sep { width: 1px; height: 12px; background: rgba(120,170,230,0.3); flex-shrink: 0; }
.stn-id-name {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  color: rgba(245,216,140,0.7); text-transform: uppercase; line-height: 1;
  transition: color .2s ease;
}
.stn-id-name:hover { color: #f5d88c; }
.stn-name-edit { font-size: 12px; line-height: 1; opacity: 0; transition: opacity .2s ease; color: rgba(245,216,140,0.75); }
.stn-id-name:hover .stn-name-edit { opacity: .9; }
/* unnamed — a soft breathing invitation (the first-visit reminder) */
/* unnamed — WHOLE pill glows gold (twin of realm's rlm-unnamed), name text breathes with it */
#stn-id.stn-unnamed { border-color: rgba(245,197,66,0.5); animation: stnUnnamedGlow 3s ease-in-out infinite; }
#stn-id.stn-unnamed .stn-id-name { color: rgba(245,197,66,0.65); animation: stnNameAsk 3s ease-in-out infinite; }
#stn-id.stn-unnamed .stn-name-edit { opacity: .8; }
@keyframes stnNameAsk { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes stnUnnamedGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,197,66,0.15); }
  50%      { box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 18px 1px rgba(245,197,66,0.5); }
}
@media (prefers-reduced-motion: reduce) { #stn-id.stn-unnamed, #stn-id.stn-unnamed .stn-id-name { animation: none; } }
/* the confirm ✓ beside the name input while editing (twin of realm) */
.stn-name-ok {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.5); color: #f5c542; font-size: 11px;
  transition: background .15s ease, border-color .15s ease;
}
.stn-name-ok:hover { background: rgba(245,197,66,0.22); border-color: rgba(245,197,66,0.85); }
#stn-name-input {
  width: 120px; background: none; border: none; outline: none;
  border-bottom: 1px solid rgba(245,197,66,0.5); padding: 1px 2px 3px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #e6edf8;
}
#stn-name-input::placeholder { color: rgba(245,216,140,0.35); }
.stn-id-tip {
  position: absolute; top: calc(100% + 6px); left: 4px; z-index: 5;
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em;
  color: rgba(200,216,240,0.42); text-shadow: 0 1px 5px rgba(0,0,0,0.75);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
#stn-topleft { position: fixed; }
#stn-topleft:hover .stn-id-tip { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { #stn-topleft { top: 16px; left: 14px; } #stn-name-input { font-size: 16px; } }

/* ── AB-D4 naming veil (first Broadcast only) ── */
.d4-veil { max-width: 520px; }
.d4-veil-lbl {
  display: block; margin-bottom: -7px;   /* the form's own gap does the rest */
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(200,216,240,0.55);
}
.d4-veil-url {
  margin-top: 14px; font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  color: #e8eef8;
}
.d4-veil-url b { color: #f5c542; font-weight: 700; }
.d4-veil-id { color: rgba(200,216,240,0.5); }
.d4-veil-note {
  margin-top: 9px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em;
  color: rgba(245,216,140,0.55); text-transform: uppercase;
}

/* ── AB-D4 in-place rename on the byline title ── */
.d4-name-edit { cursor: text; transition: color .15s ease; }
.d4-name-edit:hover { color: #f5d88c; }
/* the ✎ affordance — ALWAYS visible (dim), brightens with its row on hover;
   sized to match its neighbouring text so it reads as an equal-weight cue */
.d4-pen {
  font-size: 0.92em; margin-left: 9px; vertical-align: baseline;
  color: rgba(245,216,140,0.45); transition: color .15s ease;
}
/* the station-name ✎ sits next to big pixel type — match its full size */
.d4-name .d4-pen { font-size: 1em; margin-left: 12px; }
.d4-name-edit:hover .d4-pen, .d4-desc-edit:hover .d4-pen { color: #f5c542; }
.d4-name-input {
  width: 100%; background: rgba(10,18,34,0.5); border: 1px solid rgba(245,197,66,0.4);
  border-radius: 8px; padding: 8px 10px; outline: none;
  font-family: var(--font-mono); font-size: 14px; color: #e6edf8;
}
@media (max-width: 640px) { .d4-name-input { font-size: 16px; } }

/* ══ AB-BX: THE BENCH — rail of workstations · panel · the canvas ══ */
.bx-wrap { position: relative; }
.nav-back-row { position: relative; z-index: 70; }
/* the DRAWER — a full-height glass sheet pulled from the left edge; not a
   solid wall: deep translucent navy, heavy frost, one hairline right edge */
.bx-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  transition: transform 0.5s cubic-bezier(0.24, 0.8, 0.24, 1);
  width: min(600px, 38vw);
  padding: 92px 34px 26px 112px;   /* clears the back pill above and the rail at left */
  background: linear-gradient(180deg, rgba(10,17,32,0.84), rgba(7,12,24,0.8));
  -webkit-backdrop-filter: blur(16px) saturate(1.06); backdrop-filter: blur(16px) saturate(1.06);
  border-right: 1px solid rgba(130,172,228,0.22);
  box-shadow: 30px 0 90px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
}
.bx-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bx-page .bx-pane {
  background: none; border: none; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  max-width: none; margin-top: 0;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.bx-page .bx-kicker {
  position: static; align-self: center; margin: 4px 0 28px;
  background: none; border: none; padding: 0;
}

/* 0830: crown 这格在手机上装不下,最后一行会被裁掉 —— 于是有了这条 overflow-y: auto。
   0921 才发现它从来没生效过:上面的 `.bx-page .bx-pane` 是两个类(0,2,0),这条只有一个
   类(0,1,0),被 `overflow: hidden` 干净地盖掉。四个面板一个都没能滚。
   写对一条规则不等于它在跑。加 `.bx-page` 前缀补齐权重,和被它盖住的那条平级后靠顺序取胜。 */
.bx-page .bx-pane-bc,
.bx-page .bx-pane-const,
.bx-page .bx-pane-crown,
.bx-page .bx-pane-compose2 { overflow-y: auto; }
/* compose page — compact box on top, the bar right under it, refine below;
   the ↳ arrow and the toolbar CR tag belong to state 1's floating stage */
.bx-pane-compose2 .home-left { display: contents; }
/* Ansong 0724: the box used to absorb every shortfall in screen height — and
   since the writing area holds a min-height, the photo strip was the only part
   that could give, so photos came back sliced. The box now keeps its natural
   height and the PANE scrolls instead (same as the broadcast/constellation
   panes). Overflow stays off the box itself — the style/model pops live in it. */
.bx-pane-compose2 .d4-composer { order: 1; flex: 0 0 auto; min-height: 0; width: 100%; }
/* compose2 的 overflow 现在写在上面那条带 `.bx-page` 前缀的规则里。这里原本有一条
   `.bx-pane-compose2 { overflow-y: auto; }`,权重不够、从未生效,删掉而不是留着 ——
   留着只会让下一个人以为这里已经管住了。 */
/* the writing area breathes with the screen: ~laptop = today's height,
   a tall iMac lets it grow (viewport-tied, capped) */
.bx-pane-compose2 .d4-composer .d4-text { min-height: clamp(212px, 24vh, 400px) !important; max-height: clamp(320px, 36vh, 560px); }
#bx-compose-bar { order: 2; margin-top: 16px; }
.bx-compose-btn { margin-top: 0; }
.bx-pane-compose2 .d4-refine { order: 3; margin: 14px 2px 0; }
/* AB-BX2: the connector in the drawer — Navi stands on the orb, centered
   under the composer (state 1 retired; the ritual moved home) */
.bx-pane-compose2 .d4-link {
  order: 2; flex: 0 0 auto; align-self: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 0; margin-top: 18px;
}
.bx-pane-compose2 .d4-refine-arr { display: none; }
.bx-pane-compose2 .d4-cr { display: none; }
/* folded: the drawer tucks away, the canvas breathes in the middle;
   the handle rides the drawer's right edge so it lands on the screen seam */
.bx-closed .bx-drawer { transform: translateX(-100%); box-shadow: none; }
.bx-rail { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.24,0.8,0.24,1); }
.bx-closed .bx-rail { opacity: 0; transform: translateX(-40px); pointer-events: none; }
.bx-closed .bx-stage { margin-left: 0; }
.bx-hd {
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 62px; padding: 0; cursor: pointer;
  background: rgba(14,24,42,0.92); border: 1px solid rgba(150,190,225,0.28); border-left: none;
  border-radius: 0 10px 10px 0;
  color: rgba(205,221,242,0.55); font-size: 13px; line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.bx-hd:hover { color: #f5c542; background: rgba(20,32,54,0.95); }
/* the rail floats over the drawer's left gutter */
.bx-rail { position: fixed; left: 26px; top: 96px; z-index: 65; }

.bx-stage {
  transition: margin-left 0.5s cubic-bezier(0.24, 0.8, 0.24, 1);
  margin-left: min(600px, 38vw);
  min-height: calc(100vh - 40px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 4vw 40px 5vw;
}
.bx-stage .home-station { width: min(660px, 84%); }
.bx-stage .v2-frame-wide { aspect-ratio: 4 / 3; }   /* composed pages sit square-ish — 4:3 wears them better here */
/* AB-BX: the live bench is a FIXED viewport — the canvas is pinned, the page
   never scrolls, the footer stays out of sight */
.home-view.bx-live { position: fixed; inset: 0; height: 100vh; overflow: hidden; padding-top: 0; }
.home-view.bx-live > .evt-footer { display: none; }
.home-view.bx-live .nav-back-row { position: absolute; top: 40px; left: 0; z-index: 70; }
.home-view.bx-live .bx-wrap { height: 100%; margin-top: 0; }
.home-view.bx-live .bx-stage { height: 100%; min-height: 0; }
/* the canvas sits bare on the bench — no glass box around stage + byline
   (the d4-row strip rule scoped to .d4-row; the bench needs its own) */
.ncp-body .bx-stage .home-station {
  border: none !important; box-shadow: none !important; clip-path: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.bx-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bx-rail-sep { width: 18px; height: 1px; background: rgba(160,190,230,0.25); margin: 2px 0; }
.bx-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,22,38,0.72); border: 1px solid rgba(150,190,225,0.3); color: #9fb4d4;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  /* opacity eases slowly (the lock lifting), everything else stays snappy */
  transition: transform 0.15s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, background 0.3s, opacity 0.6s ease;
}
.bx-btn svg { width: 20px; height: 20px; display: block; transition: filter 0.45s ease; }
.bx-btn:hover { transform: translateY(-2px); border-color: rgba(245,216,140,0.6); color: #e9d9a6; }
.bx-btn.bx-on {
  background: linear-gradient(180deg, #f5cf6b, #dfa843); border-color: #f5c542; color: #241a04;
  box-shadow: 0 5px 18px rgba(245,197,66,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.bx-btn.bx-locked { opacity: 0.32; cursor: default; }
.bx-btn.bx-locked:hover { transform: none; border-color: rgba(150,190,225,0.3); color: #9fb4d4; }
/* AB-BX2: the LIT next step — the whole button breathes a soft gold halo (not
   just a corner dot), so "it's your turn here" reads at a glance */
.bx-btn.bx-nudge {
  border-color: rgba(245,197,66,0.55);
  animation: bxNudgeGlow 2.7s ease-in-out infinite;
}
/* the icon keeps its normal tint — only the halo + border + dot signal "next";
   a gold icon on a gold glow just muddies (and the selected state already owns
   the dark-icon-on-gold look) */
.bx-btn.bx-nudge::after {
  content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%;
  background: #f5c542; box-shadow: 0 0 8px rgba(245,197,66,0.85);
  animation: bxNudge 2.4s ease-in-out infinite;
}
@keyframes bxNudge { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes bxNudgeGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 9px rgba(245,197,66,0.28); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 22px rgba(245,197,66,0.6); }
}
/* the unlock BLOOM — one-shot when a door goes locked→unlocked; placed after
   .bx-nudge so it wins the animation cascade for its brief run, then hands
   back to the breathing glow */
.bx-btn.bx-lit {
  animation: bxLit 1.05s cubic-bezier(0.22, 0.8, 0.28, 1) both;
  border-color: rgba(245,197,66,0.7);
}
@keyframes bxLit {
  0%   { transform: scale(0.9);  opacity: 0.32; box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 rgba(245,197,66,0); }
  45%  { transform: scale(1.14); opacity: 1;    box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 30px rgba(245,197,66,0.8); }
  100% { transform: scale(1);    opacity: 1;    box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 16px rgba(245,197,66,0.42); }
}
/* AB-BX2: the whisper — the next unlocked workstation says its one thing
   (go live / crown it / cast it) until visited; the dot alone carries on */
.bx-hint {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #f5c542; white-space: nowrap; pointer-events: none;
  background: rgba(11,20,36,0.92); border: 1px solid rgba(245,197,66,0.35);
  padding: 4px 8px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  animation: bxHintBreathe 2.7s ease-in-out infinite;
}
/* fade + drift in when the chip earns its place; fade out when it's done */
.bx-hint.bx-hint-in { animation: bxHintIn 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) both; }
.bx-hint.bx-hint-out { animation: bxHintOut 0.32s ease forwards; }
@keyframes bxHintBreathe { 0%, 100% { opacity: 0.58; } 50% { opacity: 1; } }
@keyframes bxHintIn { from { opacity: 0; transform: translateY(-50%) translateX(-7px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
@keyframes bxHintOut { from { opacity: 0.85; } to { opacity: 0; transform: translateY(-50%) translateX(-5px); } }
/* the gallery's one whisper — the NEW STATION tile, first visit only */
.br-new-card { position: relative; }
.br-new-card .bx-hint { left: auto; right: 12px; top: 12px; transform: none; }
/* first-visit invite — a stronger, more insistent pulse than the rail's
   whisper (brighter halo + a hair of scale + the border breathes too) */
.br-new-card.bx-nudge { animation: brNewInvite 2.1s ease-in-out infinite; }
@keyframes brNewInvite {
  0%, 100% {
    border-color: rgba(245,197,66,0.5);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 14px rgba(245,197,66,0.3);
    transform: scale(1);
  }
  50% {
    border-color: rgba(245,197,66,0.95);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 34px rgba(245,197,66,0.75), 0 0 12px rgba(245,197,66,0.5);
    transform: scale(1.015);
  }
}
.br-new-card.bx-nudge .br-new-plus, .br-new-card.bx-nudge .bx-hint { color: #f5d97a; }
@media (prefers-reduced-motion: reduce) {
  .br-new-card.bx-nudge { animation: none; border-color: rgba(245,197,66,0.7); box-shadow: 0 0 20px rgba(245,197,66,0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .bx-hint, .bx-hint.bx-hint-in, .bx-btn.bx-nudge, .bx-btn.bx-lit { animation: none; }
  .bx-hint { opacity: 0.85; }
}
.bx-badge {
  position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  /* a DARK chip with a gold number — gold-on-gold washed out against the
     nudge glow, so the badge goes dark and the digits stay bright */
  background: #0c1424; color: #f5c542; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  line-height: 18px; text-align: center;
  border: 1px solid rgba(245,197,66,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* the panel — one floating pane per workstation */
.bx-panel { min-width: 0; }
.bx-pane {
  position: relative; margin-top: 13px;
  background: rgba(16,27,48,0.72); border: 1px solid rgba(130,172,228,0.3); border-radius: 18px;
  padding: 28px 28px 28px; max-width: 620px;
  -webkit-backdrop-filter: blur(9px) saturate(1.05); backdrop-filter: blur(9px) saturate(1.05);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
}
.bx-pane-in { animation: bxPaneIn 0.28s ease; }
@keyframes bxPaneIn { from { opacity: 0; transform: translateX(-8px); } }
.bx-pane-bc .bx-note { margin-top: 16px; text-align: center; }
.bx-pane-bc .bx-cta { margin-top: 26px; }
/* AB-BC2: the name row — renaming lives in Broadcast (the name is the link's
   decorative segment). View = name + quiet pen; edit = input + one warning
   line + explicit RENAME (the second confirmation). */
.bx-bc-namerow { margin-bottom: 22px; }
.bx-bc-namerow .d4-veil-lbl { display: block; margin-bottom: 8px; }
.bx-bc-name {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  background: none; border: none; padding: 0; text-align: left;
  font-family: var(--font-pixel, var(--font-mono)); font-size: 17px; letter-spacing: 0.03em;
  color: #f2e7c8; transition: color .15s ease;
}
.bx-bc-name:hover { color: #fff; }
.bx-bc-name-ro { cursor: default; }
.bx-bc-name-ro:hover { color: #f2e7c8; }
.bx-bc-pen { font-style: normal; font-size: 12px; color: rgba(245,197,66,0.55); transition: color .15s ease; }
.bx-bc-name:hover .bx-bc-pen { color: #f5c542; }
.bx-bc-editing .new-event-input { width: 100%; }
.bx-bc-warn-RETIRED {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: #e8b34b;
}
.bx-bc-acts { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.bx-cta-sm { margin-top: 0 !important; width: auto; padding: 10px 18px; font-size: 11px; }
/* rename is minor — a quiet text button, not a gold CTA */
.bx-bc-save {
  cursor: pointer; padding: 9px 26px; border-radius: 999px;
  background: rgba(120,150,190,0.14); border: 1px solid rgba(150,190,225,0.45);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: #cfe0f5; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bx-bc-save:hover { background: rgba(130,165,205,0.24); border-color: rgba(180,210,240,0.65); color: #fff; }
/* the second-confirm dialog (the link-changes caution lives here) */
.bx-confirm-ov {
  position: fixed; inset: 0; z-index: 1150; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,16,0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.bx-confirm-ov.bx-confirm-in { opacity: 1; }
.bx-confirm {
  width: min(360px, 88vw); padding: 26px 26px 22px; border-radius: 16px;
  background: rgba(16,26,44,0.98); border: 1px solid rgba(150,190,225,0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(8px); transition: transform .22s cubic-bezier(0.2,0.8,0.28,1);
}
.bx-confirm-ov.bx-confirm-in .bx-confirm { transform: translateY(0); }
.bx-confirm-t { font-family: var(--font-pixel, var(--font-mono)); font-size: 15px; color: #f2e7c8; margin-bottom: 12px; }
.bx-confirm-b { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: #b9c9e2; margin-bottom: 22px; }
/* Joey 0727: the in-site replacement for window.prompt — one input row in the
   same skin (naming a collection) */
.bx-confirm-field {
  width: 100%; box-sizing: border-box; margin: 0 0 22px; display: block;
  background: rgba(8,16,30,0.9); border: 1px solid rgba(150,190,225,0.28);
  border-radius: 10px; padding: 10px 12px; outline: none;
  font-family: var(--font-mono); font-size: 13px; color: #e6edf8;
}
.bx-confirm-field:focus { border-color: rgba(245,197,66,0.6); }
.bx-confirm-field::placeholder { color: #6f819b; }
.bx-confirm-acts { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.bx-bc-cancel {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  color: rgba(190,205,228,0.6); transition: color .15s ease;
}
.bx-bc-cancel:hover { color: #e7eefb; }
/* ── page versions (2026-10-09) — the same confirm skin, one size wider
   because each row carries a date, the edit that made it, and its actions ── */
.bx-ver { width: min(460px, 92vw); }
.bx-ver-list {
  max-height: 46vh; overflow-y: auto; margin-bottom: 14px;
  border-top: 1px solid rgba(150,190,225,0.14);
}
.bx-ver-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid rgba(150,190,225,0.14);
}
.bx-ver-main { flex: 1 1 auto; min-width: 0; }
.bx-ver-when {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: #9fb4d2;
}
.bx-ver-now .bx-ver-when { color: #f2e7c8; }
.bx-ver-label {
  font-family: var(--font-mono); font-size: 12px; color: #f5c542; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bx-ver-note {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: #b9c9e2;
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bx-ver-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding-top: 1px; }
.bx-ver-a {
  background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: rgba(190,205,228,0.62); transition: color .15s ease;
}
.bx-ver-a:hover { color: #e7eefb; }
.bx-ver-restore { color: #7cc0f0; }
.bx-ver-restore:hover { color: #bfe2ff; }
.bx-ver-empty {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: #8fa2bd;
  padding: 14px 2px;
}
.bx-ver-foot {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  color: rgba(143,162,189,0.85); margin-bottom: 18px;
}
/* AB-BX2: Broadcast's pre-live timeform — the naming form (the veil, as a page) */
/* one quiet line where the big veil title used to shout */
.bx-golive-hint {
  font-family: var(--font-pixel, var(--font-mono)); font-size: 10.5px; letter-spacing: 0.08em;
  color: rgba(242,231,200,0.8); margin: -8px 0 24px; white-space: nowrap;
}
/* the go-live moment — the terminal takes one warm breath */
.bx-term-golive { animation: bxTermGolive 1s ease; }
@keyframes bxTermGolive {
  0%   { border-color: rgba(150,190,225,0.2); box-shadow: inset 0 2px 12px rgba(0,0,0,0.5); }
  35%  { border-color: rgba(245,197,66,0.75); box-shadow: inset 0 2px 12px rgba(0,0,0,0.5), 0 0 24px rgba(245,197,66,0.35); }
  100% { border-color: rgba(150,190,225,0.2); box-shadow: inset 0 2px 12px rgba(0,0,0,0.5); }
}
@media (prefers-reduced-motion: reduce) { .bx-term-golive { animation: none; } }
.bx-pane-bc .d4-veil-lbl { display: block; margin-bottom: 8px; color: #f5d97a; }
.bx-pane-bc .new-event-input {
  width: 100%;
  border-color: rgba(245,197,66,0.4) !important;
  box-shadow: 0 0 0 1px rgba(245,197,66,0.12), 0 6px 20px rgba(0,0,0,0.35) !important;
}
.bx-pane-bc .new-event-input:focus {
  border-color: rgba(245,197,66,0.85) !important;
  box-shadow: 0 0 0 3px rgba(245,197,66,0.2), 0 8px 26px rgba(0,0,0,0.4) !important;
}
/* the pre-live link is only a PREVIEW of what the name will make — quiet it so
   the name field clearly leads */
.bx-term-preview { opacity: 0.7; }
.bx-term-preview .bx-url-hero { font-size: 15px; }
.bx-pane-bc .d4-veil-url { margin-top: 14px; }
.bx-term {
  padding: 16px 14px 16px 20px; display: flex; align-items: center; gap: 10px;
  background: rgba(3,7,15,0.72);
  border: 1px solid rgba(150,190,225,0.2); border-radius: 12px;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.bx-term-in { flex: 1 1 auto; min-width: 0; text-align: center; }
/* the public-link eye — quiet by default, blue when the link is live, muted
   with a struck-through look when hidden */
.bx-eye {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(24,176,245,0.14); border: 1.5px solid rgba(24,176,245,0.55); color: #6fc4f2;
  box-shadow: 0 0 12px rgba(24,176,245,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.bx-eye:hover { transform: scale(1.08); border-color: rgba(24,176,245,0.85); background: rgba(24,176,245,0.22); }
.bx-eye:active { transform: scale(0.96); }
/* it only exists once the link is generated (go-live) — arrive gently, never pop */
.bx-eye-arrive { animation: bxPwrArrive .5s cubic-bezier(0.2,0.8,0.28,1) both; }
@keyframes bxPwrArrive { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bx-eye-arrive { animation: none; } }
.bx-eye.bx-eye-off {
  color: rgba(170,182,204,0.6); background: rgba(120,135,160,0.12); border-color: rgba(150,165,190,0.35);
  box-shadow: none;   /* off-air = no glow, clearly a different (inert) state */
}
.bx-eye.bx-eye-off:hover { color: rgba(210,222,240,0.85); border-color: rgba(180,195,220,0.55); background: rgba(150,165,190,0.2); }
.bx-eye:hover { background: rgba(24,74,116,0.45); border-color: rgba(120,180,235,0.7); color: #a8d8ff; }
.bx-eye.bx-eye-off {
  background: rgba(120,130,150,0.14); border-color: rgba(160,175,200,0.32); color: rgba(180,195,220,0.6);
}
.bx-eye.bx-eye-off:hover { color: #e7eefb; border-color: rgba(200,214,235,0.6); }
/* hidden link → the URL itself reads muted, reinforcing the state */
.bx-term:has(.bx-eye-off) { border-color: rgba(120,135,160,0.2); }
.bx-term:has(.bx-eye-off) .bx-url-hero { opacity: 0.4; text-decoration: line-through; text-decoration-thickness: 1px; }

.bx-term-p { color: rgba(245,197,66,0.5); font-family: var(--font-mono); font-size: 17px; font-weight: 700; margin-right: 9px; }
.bx-url-hero { font-family: var(--font-mono); font-size: 19px; font-weight: 700; line-height: 1.7; letter-spacing: 0.02em; color: #f2f6fc; word-break: break-all; }
.bx-url-hero b { color: #f5c542; }
.bx-url-id { color: rgba(200,216,240,0.5); }

@keyframes bxCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bx-term-caret { animation: none; } }
.bx-pane-crown { justify-content: flex-start; }
.bx-pane-crown .bx-kicker { margin-bottom: 20px; }
.bx-cs-wrap { display: flex; }
.bx-cs-wrap .bx-door { flex: 1 1 auto; }
.bx-pane-crown .bx-door { margin-top: 14px; min-height: 172px; }   /* both doors equal, content-safe */
.bx-pane-crown .bx-gift { margin-top: 20px; }
.bx-kicker {
  position: absolute; top: -13px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #0b1526; border: 1px solid rgba(245,197,66,0.45); border-radius: 8px;
  padding: 5px 12px 4px;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.1em;
  color: rgba(240,230,190,0.95);
}
.bx-kicker svg { width: 15px; height: 15px; display: block; color: #f5c542; }
.bx-note { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; color: rgba(200,216,240,0.45); margin-top: 10px; }
.bx-empty { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: rgba(200,216,240,0.6); }
.bx-cta {
  display: block; width: 100%; margin-top: 22px; cursor: pointer;
  background: linear-gradient(180deg, #f7d873, #e9b83f); color: #241a04;
  border: none; border-radius: 12px; padding: 15px 12px 14px;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.05em;
  box-shadow: 0 5px 0 #8f6416, 0 12px 24px rgba(245,197,66,0.22), inset 0 2px 0 rgba(255,255,255,0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.bx-cta:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 #8f6416, 0 9px 20px rgba(245,197,66,0.22), inset 0 2px 0 rgba(255,255,255,0.3); }
.bx-cta:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 #8f6416, 0 6px 16px rgba(245,197,66,0.2), inset 0 2px 0 rgba(255,255,255,0.25); }
.bx-cta:disabled { opacity: 0.45; cursor: default; }

/* compose workstation — state 1's anatomy beside the rail. The base
   .home-left is a flex ROW; here it stacks: composer full-width, refine under. */


/* broadcast pane */
.bx-bc-name { font-family: var(--font-sans); font-size: 19px; font-weight: 700; color: #eef2fa; line-height: 1.3; }
.bx-bc-url { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: rgba(200,216,240,0.6); word-break: break-all; }
.bx-bc-url b { color: #f5c542; }
.bx-bc-url span { color: rgba(200,216,240,0.4); }

/* crown pane — two doors, equal rank */
.bx-crownpix { width: 14px; height: auto; display: inline-block; color: #f5c542; }
.bx-crownpix-g { width: 17px; }
.bx-door {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 14px; width: 100%; text-align: left; margin-top: 14px; min-height: 132px;
  border: 1px solid rgba(150,190,225,0.2); border-radius: 16px; padding: 22px 24px; cursor: pointer; color: inherit;
  background: linear-gradient(152deg, rgba(34,48,74,0.5) 0%, rgba(14,22,38,0.5) 62%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.bx-door-main { min-width: 0; }
.bx-door:hover:not(:disabled):not(.bx-door-done) { border-color: rgba(245,197,66,0.55); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.3); }
.bx-door:disabled { opacity: 0.55; cursor: default; }
.bx-door-t { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: 0.03em; color: #eef2fa; line-height: 1.4; }
.bx-door-sub { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.65; color: rgba(200,216,240,0.6); }
.bx-door-price {
  flex: 0 0 auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #f7d873, #e9b83f); color: #241a04;
  border-radius: 10px; padding: 9px 14px 8px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.04em;
  box-shadow: 0 4px 0 #8f6416, inset 0 2px 0 rgba(255,255,255,0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.bx-door:active:not(:disabled):not(.bx-door-done) .bx-door-price { transform: translateY(3px); box-shadow: 0 1px 0 #8f6416, inset 0 2px 0 rgba(255,255,255,0.3); }
.bx-door-price .bx-crownpix { color: #241a04; width: 13px; }
.bx-door-cs { border-color: rgba(95,216,174,0.34);
  background: linear-gradient(152deg, rgba(30,60,52,0.5) 0%, rgba(13,26,24,0.5) 62%); }
.bx-door-pl { background: linear-gradient(152deg, rgba(46,40,20,0.42) 0%, rgba(16,20,32,0.5) 62%);
  border-color: rgba(226,190,110,0.3); }
.bx-door-pl:hover:not(:disabled) { border-color: rgba(245,197,66,0.55); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06); }
.bx-door-cs { border-color: rgba(95,216,174,0.34); }
.bx-door-cs:hover:not(:disabled) { border-color: rgba(95,216,174,0.62); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.3); }
.bx-door-tag { font-style: normal; font-size: 9px; letter-spacing: 0.1em; color: #5fd8ae; }
.bx-price-cs { background: linear-gradient(180deg, #8ce8c0, #41c08e); color: #05281a; box-shadow: 0 4px 0 #1c6b4a, inset 0 2px 0 rgba(255,255,255,0.35); }
.bx-price-cs .bx-crownpix { color: #05281a; }
.bx-door-cs:active:not(:disabled) .bx-door-price { box-shadow: 0 1px 0 #1c6b4a, inset 0 2px 0 rgba(255,255,255,0.3); }
.bx-door-done {
  align-items: center; justify-content: center; gap: 11px; text-align: center; cursor: default;
  background: linear-gradient(160deg, rgba(64,52,22,0.32), rgba(18,20,32,0.5));
  border-color: rgba(245,197,66,0.5);
}
.bx-done-cs { background: linear-gradient(160deg, rgba(26,62,52,0.38), rgba(12,24,22,0.5)); border-color: rgba(95,216,174,0.5); }
.bx-door-done .bx-crownpix { width: 26px; height: auto; }
.bx-done-tag { position: absolute; top: 18px; right: 20px; font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: #5fd8ae; }
.bx-door-done .bx-door-t { color: #f5c542; font-size: 12px; letter-spacing: 0.2em; }
.bx-door-date { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(200,216,240,0.45); }
.bx-cs-wrap { position: relative; }
.bx-clink {
  position: absolute; top: 20px; right: 22px; z-index: 3;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: rgba(95,216,174,0.85); text-decoration: none;
}
.bx-clink:hover { color: #5fd8ae; text-decoration: underline; }
.bx-gift { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 15px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; }
.bx-gift-lead { color: rgba(200,216,240,0.5); flex-basis: 100%; margin-bottom: 2px; }
.bx-gift-v { color: #f5c542; font-weight: 700; }
.bx-gift-dot { color: rgba(200,216,240,0.3); }
/* Ellen 0830:「一次 crown 好几个」的入口。第一版是 10px 半透明的一行小字 ——
   她说没看到,对的:那不像个能点的东西。现在做成一条看得见的横条(虚线框、
   带皇冠、右端箭头),但仍然比上面两扇 $3.99 的门轻:没有实底、没有金色填充,
   只在 hover 时转金。它是条去路,不是第三扇门。 */
.bx-many {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 16px;
  padding: 13px 16px; border: 1px dashed rgba(150,190,225,0.34); border-radius: 12px;
  background: rgba(255,255,255,0.02); cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: rgba(200,216,240,0.72); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.bx-many .bx-crownpix { flex: 0 0 auto; }
.bx-many-t { flex: 1 1 auto; }
.bx-many-arr { flex: 0 0 auto; opacity: 0.7; }
.bx-many:hover {
  border-color: rgba(245,197,66,0.6); color: #f5c542; background: rgba(245,197,66,0.06);
}

/* cast pane */
.bx-castcred { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 12px; color: rgba(200,216,240,0.75); }
.bx-cc-star { color: rgba(245,197,66,0.7); font-size: 11px; }
.bx-castcred b { font-family: var(--font-pixel); font-size: 21px; color: #f5c542; line-height: 1; transform: translateY(-1px); }
.bx-cc-lbl { letter-spacing: 0.04em; }
.bx-buypack {
  width: 27px; height: 27px; margin-left: 2px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(245,197,66,0.08); border: 1px solid rgba(245,197,66,0.65); border-radius: 9px;
  color: #f5c542; font-family: var(--font-pixel); font-size: 11px; line-height: 1;
  transition: background 0.15s ease, transform 0.12s ease;
}
.bx-buypack:hover { background: rgba(245,197,66,0.18); transform: translateY(-1px); }
.bx-buypack:active { transform: translateY(1px); }
.bx-kchips { display: flex; gap: 8px; margin-bottom: 10px; }
.bx-kchip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  background: rgba(10,17,30,0.5); border: 1px solid rgba(150,190,225,0.25); color: rgba(200,216,240,0.65);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bx-kchip-on { background: rgba(245,197,66,0.12); border-color: #f5c542; color: #f5c542; }
/* the drawer speaks rounded — the global .ncp-textarea is square (radius 0),
   so the cast fields and history round themselves to the drawer's 10px */
.bx-emails { min-height: 96px; width: 100%; resize: vertical; border-radius: 10px; }
.bx-hist-list { border-radius: 10px; }
.bx-sched { width: 100%; margin-top: 6px; min-height: 0; height: 42px; padding: 8px 12px; font-size: 11.5px; resize: none; border-radius: 10px; }
.bx-sched-note span { letter-spacing: 0.04em; text-transform: none; }
.bx-cast-realm { text-align: center; }
.bx-hist { margin-top: 20px; border-top: 1px solid rgba(150,190,225,0.14); padding-top: 14px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bx-hist-lbl { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.22em; color: rgba(200,216,240,0.4); margin-bottom: 8px; }
.bx-hist-list { flex: 1 1 auto; min-height: 90px; max-height: none; overflow-y: auto; }
.bx-hist-list .manage-tree-row { font-size: 10.5px; }

/* ── the CROWNED seal — one chip, state-derived, worn everywhere ── */
.bx-seal {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(9,15,28,0.72); border: 1px solid rgba(245,197,66,0.55); border-radius: 999px;
  padding: 5px 10px; color: #f5c542; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.bx-seal b { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; }
.bx-seal-dbl { border-color: rgba(245,197,66,0.85); box-shadow: 0 2px 12px rgba(245,197,66,0.25); }
/* inside a card's top row the chip flows with the badges */
.mg-card-top .bx-seal { position: static; }

/* the canvas wears the crown — gold frame; double-crowned adds the inner line */
.v2-canvas-frame.bx-crowned { border: 1px solid rgba(245,197,66,0.8); box-shadow: 0 0 16px rgba(245,197,66,0.1), 0 18px 44px rgba(0,0,0,0.4); }

/* gallery cards: uncrowned = blue always (hover brightens the blue) ·
   crowned = gold always (hover brightens the gold) — dark-layer rules in
   preview-dark.css carry the !important that wins */
.mg-state-crowned { display: inline-flex; align-items: center; gap: 7px; }
.mg-state-crowned .bx-crownpix { width: 13px; color: currentColor; }

/* ── ceremonies ── */
.v2-canvas-frame.bx-sweep { animation: bxSweep 1.3s ease; }
@keyframes bxSweep {
  0% { box-shadow: 0 0 0 0 rgba(245,197,66,0); }
  35% { box-shadow: 0 0 40px 5px rgba(245,197,66,0.5); }
  100% { box-shadow: 0 0 16px rgba(245,197,66,0.1), 0 18px 44px rgba(0,0,0,0.4); }
}
.v2-canvas-frame.bx-glint::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: 7;
  background: linear-gradient(115deg, transparent 32%, rgba(255,240,200,0.35) 50%, transparent 68%);
  background-size: 240% 100%;
  animation: bxGlint 1.1s ease both;
}
@keyframes bxGlint { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.bx-seal.bx-stamp { animation: bxStamp 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes bxStamp {
  0% { transform: scale(2.1) rotate(-14deg); opacity: 0; }
  55% { opacity: 1; }
  72% { transform: scale(0.94) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.bx-seal.bx-restamp { animation: bxRestamp 0.6s ease both; }
@keyframes bxRestamp { 35% { transform: scale(1.18); filter: brightness(1.6); } }
.bx-coin {
  position: fixed; z-index: 1250; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5c542 55%, #b9831f);
  box-shadow: 0 0 8px rgba(245,197,66,0.8); pointer-events: none;
  transform: translate(0, 0) scale(0.4);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.4, 1);
}
#plan-pill.bx-pill-hit { animation: bxPillHit 0.5s ease; }
@keyframes bxPillHit { 40% { transform: scale(1.1); } }

/* go-live arrival — the rail blooms, the canvas slides into its bench seat */
.bx-arrive .bx-btn { animation: bxPop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; }
.bx-arrive .bx-btn:nth-of-type(1) { animation-delay: 0.1s; }
.bx-arrive .bx-btn:nth-of-type(2) { animation-delay: 0.18s; }
.bx-arrive .bx-btn:nth-of-type(3) { animation-delay: 0.26s; }
.bx-arrive .bx-btn:nth-of-type(4) { animation-delay: 0.34s; }
.bx-arrive .bx-btn:nth-of-type(5) { animation-delay: 0.42s; }
@keyframes bxPop { from { opacity: 0; transform: scale(0.4); } }
.bx-arrive .bx-drawer { animation: bxDrawerIn 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes bxDrawerIn { from { transform: translateX(-102%); } }
.bx-arrive .bx-stage { animation: bxStageIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes bxStageIn { from { opacity: 0.3; transform: translateX(46px); } }
@media (prefers-reduced-motion: reduce) {
  .bx-arrive .bx-btn, .bx-arrive .bx-panel, .bx-arrive .bx-stage,
  .v2-canvas-frame.bx-sweep, .v2-canvas-frame.bx-glint::before,
  .bx-seal.bx-stamp, .bx-seal.bx-restamp, .bx-btn.bx-nudge::after,
  .bx-arrive .bx-drawer { animation: none; }
}

/* ── small screens: canvas on top, rail as a row, panel below (add-only) ── */
@media (max-width: 980px) {
  .bx-wrap { display: flex; flex-direction: column; gap: 18px; }
  .bx-stage { order: 0; width: 100%; margin-left: 0; min-height: 0; padding: 0; display: block; }
  .bx-stage .home-station { width: 100%; }
  .bx-rail { order: 1; position: static; flex-direction: row; justify-content: center; width: 100%; }
  .bx-rail-sep { width: 1px; height: 18px; margin: 0 2px; }
  .bx-drawer { order: 2; position: static; width: auto; padding: 22px 18px; border-right: none; border-top: 1px solid rgba(130,172,228,0.2); box-shadow: none; }
  .bx-hd { display: none; }
  .bx-closed .bx-drawer { transform: none; }
  .bx-hint { display: none; }   /* horizontal rail: the dot alone nudges */
}
@media (max-width: 640px) {
  .bx-emails, .bx-sched { font-size: 16px; }   /* iOS focus-zoom floor */
  .bx-btn { width: 42px; height: 42px; }
}

/* gallery time sort — Realm's .rn-sort-b, copied (copy-don't-import law) */
.gal-sort { display: flex; gap: 6px; }
.gal-sort-b {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(120,140,170,0.14); border: 1px solid rgba(150,190,225,0.22); border-radius: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(205,221,242,0.45); font-size: 14px; line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gal-sort-b:hover { color: rgba(205,221,242,0.8); border-color: rgba(150,190,225,0.45); }
.gal-sort-b.active { color: #14100a; background: rgba(245,197,66,0.85); border-color: rgba(245,197,66,0.9); }

/* ══ AB-CN: COLLECTIONS → CONSTELLATIONS ══ */
/* chips row — sits with the search box edges */
/* the row = [scrollable track of tabs] + [pinned + NEW COLLECTION] — the
   action never rides the scroll */
.gal-cchips-row { display: flex; align-items: center; gap: 19px; margin: 20px 24px 0; }
.gal-cchips {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; flex-wrap: nowrap; gap: 19px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 100%);
}
.gal-cchips::-webkit-scrollbar { display: none; }
.gal-cchips.can-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
}
.gal-cchips.can-l {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px);
}
.gal-cchips.can-l.can-r {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
/* AB: quiet underline tabs, firmly partitioned — wide gaps, a hairline
   between ALL and the groups, + NEW alone at the far right */
.gal-cchips-row .gal-cchip {
  flex: 0 0 auto; position: relative; cursor: pointer;
  background: none; border: none; border-radius: 0; padding: 4px 2px 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: rgba(160,180,210,0.72);
  transition: color 0.15s ease;
}
.gal-cchip i { font-style: normal; font-size: 10px; color: rgba(150,170,200,0.45); }
.gal-cchip:hover { color: #e7eefb; }
.gal-cchip.on { color: #f5c542; font-weight: 700; }
.gal-cchip.on::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: 2px; background: #f5c542; }
.gal-cchip.on i { color: rgba(245,197,66,0.55); }
/* 0921: 这两条(more / new)都写成了单类,被上面的 `.gal-cchips-row .gal-cchip`(两个类)
   压过 —— 两个本该更安静的按钮一直以普通标签的亮度显示。
   `.gal-cchip-new:hover` 反而是生效的:多一个伪类正好把权重补平、又写在后面。
   **hover 对、静止态不对**,是这类错的典型特征 —— 试一下 hover 看到变色,就以为整条通了。
   加上 `.gal-cchips-row` 前缀与被它压的那条平级,再靠顺序取胜。 */
.gal-cchips-row .gal-cchip-more { color: rgba(150,170,200,0.6); }
.gal-cdiv { flex: 0 0 auto; align-self: center; width: 1px; height: 14px; margin-bottom: 5px; background: rgba(255,255,255,0.1); }
.gal-cchips-row .gal-cchip-new { color: rgba(120,140,170,0.7); }
.gal-cchips-row .gal-cchip-new:hover { color: rgba(245,216,140,0.9); }
.gal-cnew-wrap { display: inline-flex; align-items: center; gap: 7px; }
.gal-cnew-in { width: 130px; outline: none; color: #f0e3bb; }
.gal-cnew-ok { width: 22px; height: 22px; font-size: 11px; }

/* the open collection's head */
.gal-chead { margin: 14px 24px 0; padding: 16px 20px; border: 1px solid rgba(130,172,228,0.24); border-radius: 14px; background: rgba(12,20,36,0.5); }
.gal-chead-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gal-cname { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: #eef2fa; cursor: pointer; }
.gal-cname .d4-pen { font-size: 11px; opacity: 0.5; }
.gal-cname-in { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: #eef2fa; background: none; border: none; border-bottom: 1px solid rgba(245,197,66,0.6); outline: none; width: 200px; }
.gal-chead-sp { flex: 1 1 auto; }
.gal-cact {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px dashed rgba(150,190,225,0.35); color: rgba(205,221,242,0.7);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.gal-cact:hover:not(:disabled) { border-color: rgba(150,190,225,0.6); color: #e7eefb; }
.gal-cform { border-style: solid; }
.gal-cform i { font-style: normal; font-size: 8px; letter-spacing: 0.14em; color: rgba(205,221,242,0.4); margin-left: 4px; }
.gal-cform:disabled { opacity: 0.4; cursor: default; }
.gal-cform.ready { border-color: rgba(245,197,66,0.7); color: #f5c542; }
.gal-cform.ready i { color: rgba(245,197,66,0.6); }
.gal-cdel { border: none; padding: 6px; color: rgba(205,221,242,0.4); }
.gal-cdel:hover { color: #e06a5a; }
.gal-cdel svg { width: 14px; height: 14px; display: block; }
.gal-cbar { margin-top: 12px; height: 4px; border-radius: 2px; background: rgba(150,190,225,0.14); overflow: hidden; }
.gal-cbar i { display: block; height: 100%; border-radius: 2px; background: #f5c542; transition: width 0.4s ease; }
.gal-cmeta { margin-top: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: rgba(205,221,242,0.5); }

/* workstation playlist page */
.bx-colchk {
  width: 16px; height: 16px; flex: 0 0 auto; border-radius: 5px;
  border: 1px solid rgba(150,190,225,0.4); color: #241a04;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.bx-colchk.on { background: #f5c542; border-color: #f5c542; }
.bx-colnew-wrap { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.bx-colnew {
  flex: 1 1 auto; min-width: 0; padding: 11px 4px;
  background: none; border: none; border-bottom: 1px dashed rgba(150,190,225,0.3); outline: none;
  font-family: var(--font-mono); font-size: 12px; color: #e7eefb;
}
/* the ✓ — hidden until there's something to commit... visible on touch always
   (no reliable Enter there); appears once the field has focus otherwise */
.bx-colnew-ok, .gal-cnew-ok {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: rgba(245,197,66,0.14); border: 1px solid rgba(245,197,66,0.5); color: #f5c542;
  font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.bx-colnew-ok:hover, .gal-cnew-ok:hover { background: rgba(245,197,66,0.28); border-color: rgba(245,197,66,0.8); }
.bx-colnew::placeholder { color: rgba(205,221,242,0.4); }

/* + ADD STATIONS picker */
.gal-cpick-panel { max-width: 560px; }
.gal-cpick-body { max-height: 60vh; overflow-y: auto; padding: 12px 22px 18px; }
.gal-cprow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid rgba(150,190,225,0.1);
  padding: 12px 4px; cursor: pointer; color: inherit;
}
.gal-cpname { font-family: var(--font-mono); font-size: 12.5px; color: #dfe8f6; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-cpfrom { flex: 0 0 auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: rgba(205,221,242,0.4); }
.gal-cpcrown { color: #f5c542; }
.gal-cpcrown svg { width: 14px; height: auto; display: block; }
@media (max-width: 640px) {
  .gal-cchips-row { margin: 14px 14px 2px; }
  .gal-chead { margin: 12px 14px 0; }
  .gal-cnew-in, .gal-cname-in, .bx-colnew, .mg-cm-search { font-size: 16px; }   /* iOS zoom floor */
}

/* AB-CN: the NEW STATION tile names its landing collection */
.br-new-sub { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: rgba(245,216,140,0.65); }

/* ── AB-CN: workstation Collection page — belonging first, immersive ── */
/* alone: the fact, the why, one verb — centered like everything here */
.bx-cst-alone { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 30px 2px 8px; }
.bx-cst-alone-star { color: rgba(245,197,66,0.55); font-size: 15px; animation: cstBreathe 3.4s ease-in-out infinite; }
@keyframes cstBreathe { 50% { opacity: 0.4; } }
.bx-cst-alone-t { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: #e7eefb; }
.bx-cst-alone-s { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: 0.03em; color: rgba(200,216,240,0.5); max-width: 340px; }
.bx-cst-act {
  margin-top: 12px; height: 34px; padding: 0 16px; cursor: pointer;
  background: rgba(245,197,66,0.07); border: 1px solid rgba(245,197,66,0.45); border-radius: 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: #f5c542;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bx-cst-act:hover { background: rgba(245,197,66,0.14); border-color: rgba(245,197,66,0.8); }
/* home: immersive — only one home can ever show, so no box. The name is
   the stage: centered, a soft gold halo behind it, the member cells as a
   little constellation underneath. */
.bx-cst-home { position: relative; margin-top: 18px; padding: 30px 8px 6px; text-align: center; }
.bx-cst-home::before {
  content: ''; position: absolute; left: 50%; top: 6px; width: 300px; height: 170px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(245,197,66,0.09), transparent 72%);
}
.bx-cst-home.rise::before { background: radial-gradient(closest-side, rgba(245,197,66,0.16), transparent 72%); }
.bx-cst-home-kick { position: relative; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.3em; color: rgba(200,216,240,0.45); }
.bx-cst-home-name { position: relative; margin-top: 16px; font-family: var(--font-pixel); font-size: 19px; letter-spacing: 0.06em; color: #f5c542; overflow-wrap: anywhere; }
.bx-cst-home.rise .bx-cst-home-name { text-shadow: 0 0 18px rgba(245,197,66,0.45); }
.bx-cst-home-prog { position: relative; margin-top: 20px; display: flex; justify-content: center; }
/* the crowning progress — one slim gold bar, jewel-finished */
.bx-cst-bar {
  position: relative; display: block; width: 240px; max-width: 82%; height: 6px;
  border-radius: 999px; overflow: hidden;
  background: rgba(130,172,228,0.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(150,190,225,0.14);
}
.bx-cst-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 999px;
  background: linear-gradient(90deg, #dfa843, #f7d873);
  box-shadow: 0 0 10px rgba(245,197,66,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.bx-cst-home.rise .bx-cst-bar i { box-shadow: 0 0 14px rgba(245,197,66,0.85), inset 0 1px 0 rgba(255,255,255,0.35); }
.bx-cst-home.solo .bx-cst-bar i { background: rgba(214,190,120,0.42); box-shadow: none; }
.bx-cst-home.solo .bx-cst-home-st { color: rgba(160,180,210,0.6); }
.bx-cst-home-st { position: relative; margin-top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(200,216,240,0.55); }
.bx-cst-home-st.rise { color: rgba(245,216,140,0.9); }
.bx-cst-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.bx-cst-shelf {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px;
  background: rgba(120,140,170,0.14); border: 1px solid rgba(150,190,225,0.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  color: #dbe6f5;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.bx-cst-shelf span { transition: transform 0.15s ease; }
.bx-cst-shelf:hover { color: #fff; border-color: rgba(200,225,255,0.5); background: rgba(120,140,170,0.22); }
.bx-cst-shelf:hover span { transform: translateX(3px); }
.bx-cst-shelf.rise {
  background: linear-gradient(180deg, #f7d873, #e9b83f); border-color: #f5c542; color: #241a04;
  box-shadow: 0 4px 0 #8f6416, inset 0 2px 0 rgba(255,255,255,0.35);
}
.bx-cst-shelf.rise:hover { color: #241a04; transform: translateY(2px); box-shadow: 0 2px 0 #8f6416, inset 0 2px 0 rgba(255,255,255,0.3); }
/* the CHANGE/MOVE TO toggle drops below the shelf button now */

.bx-cst-change {
  position: relative; margin-top: 22px; cursor: pointer;
  background: none; border: none; padding: 4px 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(150,170,200,0.5); transition: color 0.15s ease;
}
.bx-cst-change:hover { color: #e7eefb; }
/* the switch layer — icons, not sentences: + joins, × leaves */
.bx-cst-sw { margin-top: 14px; animation: galMastIn 0.24s ease; }
.bx-cstrow {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid rgba(150,190,225,0.1);
  padding: 11px 4px; border-radius: 6px;
  transition: background 0.14s ease;
}
.bx-cstrow:hover { background: rgba(150,190,225,0.07); }
.bx-cstrow-chk {
  flex: 0 0 auto; width: 16px; text-align: center;
  font-family: var(--font-mono); font-size: 12px; line-height: 1; color: #f5c542;
}
.bx-cstrow-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: #dfe8f6; }
.bx-cstrow-here .bx-cstrow-name { color: #f5c542; }
.bx-cstrow-meta { flex: 0 0 auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: rgba(205,221,242,0.45); }
.bx-cstrow-leave .bx-cstrow-chk, .bx-cstrow-leave .bx-cstrow-name { color: #eea3a3; }
.bx-cstrow-leave:hover { background: rgba(238,163,163,0.07); }

/* AB: gallery columns step down before the phone layout */
@media (max-width: 1180px) and (min-width: 981px) { .gallery-grid.mg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) and (min-width: 641px) { .gallery-grid.mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* AB-CN: masthead takeover — the collection IS the page title */
.gal-mast { display: flex; flex-direction: column; align-items: center; gap: 11px; animation: galMastIn 0.28s ease; }
.gal-mkick { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.24em; color: rgba(150,170,200,0.55); }
@keyframes galMastIn { from { opacity: 0; transform: translateY(4px); } }
.gal-crumb {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  color: rgba(140,160,190,0.55);
  transition: color 0.15s ease;
}
.gal-crumb:hover { color: #e7eefb; }
.gal-mast-name { color: #f0e3bb; cursor: pointer; }
.gal-mast-name:hover .gal-mast-pen { color: rgba(245,197,66,0.85); }
.gal-mast-name:hover > span {
  text-decoration: underline; text-decoration-style: dashed;
  text-decoration-color: rgba(245,197,66,0.45); text-underline-offset: 6px;
}
.gal-mast-pen { font-style: normal; font-size: 20px; color: rgba(245,216,140,0.55); transition: color 0.15s ease; }
.gal-mast-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(160,180,210,0.65); }
.gal-mast-status.rise { color: rgba(245,216,140,0.9); }
.gal-mast-acts { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.gal-mast-acts .gal-mbtn, .gal-mast-acts .gal-mact-form { font-weight: 800; }   /* + ADD STATIONS 与 FORM CONSTELLATION 用加粗字体 */
.gal-mbtn {
  height: 34px; padding: 0 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(120,140,170,0.14); border: 1px solid rgba(150,190,225,0.22); border-radius: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  color: rgba(205,221,242,0.75);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.gal-mbtn:hover:not(:disabled) { color: #fff; border-color: rgba(200,225,255,0.5); background: rgba(120,140,170,0.22); }
.gal-mbtn i { font-style: normal; font-size: 8px; letter-spacing: 0.14em; opacity: 0.6; }
.gal-mbtn-dim { opacity: 0.45; cursor: default; }
/* delete = a quiet icon-only trash at the end of the actions row —
   collection management belongs with ADD/FORM, not next to the page title */
.gal-mast-titlerow { display: inline-flex; align-items: center; gap: 12px; }
.gal-mdel {
  background: none; border: none; padding: 4px; margin-left: 8px; cursor: pointer; line-height: 0;
  color: rgba(150,170,200,0.42); transition: color 0.15s ease;
}
.gal-mdel:hover { color: #eea3a3; }
.gal-mdel svg { width: 15px; height: 15px; }
.gal-mact {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: rgba(170,188,214,0.7);
  transition: color 0.15s ease;
}
.gal-mact:hover { color: #e7eefb; }
.gal-mact-dim { color: rgba(120,140,170,0.45); cursor: default; }
.gal-mact-del:hover { color: #e08a8a; }
.gal-mact-form {
  background: linear-gradient(180deg, #f7d873, #e9b83f); color: #241a04;
  border-radius: 10px; padding: 9px 14px 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;   /* 同 .gal-mbtn 的字体字号 —— 解锁与未解锁一致,只是变金色 */
  box-shadow: 0 4px 0 #8f6416, inset 0 2px 0 rgba(255,255,255,0.35);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.gal-mact-form:hover { color: #241a04; transform: translateY(2px); box-shadow: 0 2px 0 #8f6416, inset 0 2px 0 rgba(255,255,255,0.3); }
.gal-mact-form .ns-star { color: #241a04; }
.gal-mact-form i { font-style: normal; font-size: 7px; opacity: 0.65; margin-left: 4px; }
/* AB-CN: Constellation 未上线 — 「未解锁」锁定态:褪金 + 弱发光保留 + 常规小字 "Coming soon"(非 🔒、无斜纹) + 无触发 */
.gal-mact-form.gal-const-locked {
  background: linear-gradient(180deg, #c3b273, #9a8a54);        /* 褪色的金,不再是激活的亮金 */
  color: rgba(36,26,4,0.72);
  box-shadow: 0 3px 0 #6b5d28, 0 0 12px rgba(245,197,66,0.2);   /* 发光弱化、只剩一丝 */
  cursor: default; pointer-events: none;                         /* 本身无任何触发 */
}
.gal-mact-form.gal-const-locked:hover { transform: none; box-shadow: 0 3px 0 #6b5d28, 0 0 12px rgba(245,197,66,0.2); }
.gal-mact-form.gal-const-locked i {                             /* "Coming soon" — 常规 mono 小字,和像素标题区分 */
  font-family: var(--font-mono); font-size: 8.5px; font-style: normal;
  text-transform: none; letter-spacing: 0; opacity: 0.82; margin-left: 5px;
}
.gal-mast .gal-cname-in {
  background: none; border: none; border-bottom: 1px solid rgba(245,197,66,0.6); outline: none;
  font-family: var(--font-pixel); font-size: 15px; letter-spacing: 0.1em; color: #f0e3bb;
  text-align: center; padding: 2px 6px;
}
/* crowning progress — one pixel cell per station, gold once crowned; the
   full row unlocks FORM CONSTELLATION right below it (>24 members → one bar) */
.gal-mast-prog { display: flex; align-items: center; gap: 12px; }
.gal-mprog-cells { display: flex; gap: 4px; }
.gal-mprog-cell {
  width: 16px; height: 7px; display: block;
  background: rgba(130,172,228,0.12); box-shadow: inset 0 0 0 1px rgba(150,190,225,0.28);
}
.gal-mprog-cell.lit { background: #f5c542; box-shadow: 0 0 8px rgba(245,197,66,0.5); }
/* a lone station can't rise — its progress wears a muted tone, never the glow */
.gal-mast-prog.solo .gal-mprog-cell.lit { background: rgba(214,190,120,0.42); box-shadow: inset 0 0 0 1px rgba(214,190,120,0.35); }
.gal-mast-prog.solo .gal-mast-status { color: rgba(160,180,210,0.6); }
.gal-mast-prog.rise .gal-mprog-cell.lit { animation: mprogRise 2.2s ease-in-out infinite; }
@keyframes mprogRise { 50% { box-shadow: 0 0 12px rgba(245,197,66,0.85); } }
@media (prefers-reduced-motion: reduce) { .gal-mast-prog.rise .gal-mprog-cell.lit { animation: none; } }
.gal-mprog-bar { position: relative; width: 180px; height: 7px; background: rgba(130,172,228,0.12); box-shadow: inset 0 0 0 1px rgba(150,190,225,0.28); }
.gal-mprog-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: #f5c542; box-shadow: 0 0 8px rgba(245,197,66,0.5); }

/* AB-CN: gallery card ⋯ menu (classic context menu) */
.mg-cardmenu {
  position: fixed; z-index: 1300; min-width: 210px; max-width: 260px;
  max-height: 72vh; display: flex; flex-direction: column; overflow: hidden; padding: 6px;
  background: rgba(14,22,38,0.97); border: 1px solid rgba(150,190,225,0.28); border-radius: 12px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.mg-cardmenu.on { opacity: 1; transform: none; }
.mg-cm-head { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em; color: rgba(150,170,200,0.5); padding: 8px 10px 4px; }
.mg-cm-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 8px; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 11.5px; color: #dbe6f5;
  transition: background 0.12s ease, color 0.12s ease;
}
.mg-cm-row:hover { background: rgba(120,140,170,0.16); }
.mg-cm-row.on { color: #f5c542; }
.mg-cm-chk { flex: 0 0 auto; width: 12px; text-align: center; color: #f5c542; font-size: 11px; }
.mg-cm-newrow { color: rgba(245,216,140,0.85); }
.mg-cm-leave { color: #e39a9a; }
.mg-cm-leave .mg-cm-chk { color: #e39a9a; }
.mg-cm-leave:hover { background: rgba(200,90,90,0.16); color: #f0b4b4; }
.mg-cm-del { color: #e39a9a; }
.mg-cm-del:hover { background: rgba(200,90,90,0.16); color: #f0b4b4; }
.mg-cm-sep { height: 1px; margin: 6px 8px; background: rgba(150,190,225,0.14); flex: 0 0 auto; }
.mg-cm-list { overflow-y: auto; min-height: 0; flex: 0 1 auto; max-height: 232px; }
.mg-cm-head, .mg-cm-search, .mg-cm-leave, .mg-cm-newrow, .mg-cm-del, .mg-cardmenu > [data-hide] { flex: 0 0 auto; }
.mg-cm-search {
  margin: 2px 6px 6px; padding: 7px 10px; width: calc(100% - 12px);
  background: rgba(120,140,170,0.14); border: 1px solid rgba(150,190,225,0.22); border-radius: 8px; outline: none;
  font-family: var(--font-mono); font-size: 11px; color: #e7eefb;
}
.mg-cm-search::placeholder { color: rgba(205,221,242,0.4); }
.mg-cm-search:focus { border-color: rgba(150,190,225,0.5); }

/* the CAST count chip mirrors the CROWNED seal exactly (siblings) */
.mg-badge-cast { padding: 5px 10px; background: rgba(9,15,28,0.72); box-shadow: 0 2px 10px rgba(0,0,0,0.35); font-size: 9px; letter-spacing: 0.14em; }
.mg-badge-cast .ns-star { font-size: 9px; }

/* Add-stations picker footer */
.gal-cpick-foot { padding: 14px 22px 18px; border-top: 1px solid rgba(150,190,225,0.12); display: flex; justify-content: flex-end; }
.gal-cpick-done { min-width: 130px; }

/* ═══════════════════ MOBILE — consolidated block, kept LAST in the file so
   source order always favors it over later desktop additions (the old
   scattered mobile rules kept losing exactly that race). Add-only. ═══════════ */

/* ── Cast badge vs the nudge dot: the ✦N badge and the corner nudge dot both
      live top-right — the dot (generated after the badge) paints ON TOP and
      eats the number. When a badge is present, drop the dot (the badge + the
      button's glow already say "here"). Belt: lift the badge above the dot. ── */
.bx-btn .bx-badge { z-index: 3; }
.bx-btn.bx-nudge:has(.bx-badge)::after { display: none; }

/* ── the bench (≤980): the WHOLE page scrolls (canvas, rail, drawer all in
      normal flow) — simpler than pinning the canvas. ── */
@media (max-width: 980px) {
  .home-view.bx-live { position: static; height: auto; overflow: visible; }
  .bx-wrap {
    display: flex; flex-direction: column; gap: 0;
    height: auto; box-sizing: border-box; padding-top: 62px;   /* clear the fixed chrome pills */
  }
  .bx-stage {
    order: 0; margin: 0; padding: 4px 14px 10px; min-height: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .bx-stage .home-station { width: min(92%, 520px); }
  .bx-rail {
    order: 1; position: static; flex-direction: row; justify-content: center;
    width: 100%; margin: 6px 0 0; opacity: 1; transform: none; pointer-events: auto;
  }
  .bx-rail-sep { width: 1px; height: 18px; margin: 0 2px; }
  .bx-drawer {
    order: 2; position: static; width: auto; min-height: 0;
    overflow: visible; transform: none !important;
    padding: 18px 18px 44px; margin-top: 12px;
    border-right: none; border-top: 1px solid rgba(130,172,228,0.2); box-shadow: none;
  }
  .bx-page .bx-pane { overflow: visible; flex: none; }
  .bx-page .bx-kicker { margin: 0 0 20px; }
  .bx-hd { display: none; }              /* no folding — the drawer is the page here */
  .bx-hint { display: none; }            /* horizontal rail: the dot alone nudges */
  .home-view.bx-live .evt-footer { display: none; }
}

/* ── the bench (≤640) ── */
@media (max-width: 640px) {
  .bx-btn { width: 42px; height: 42px; }
  .bx-wrap { padding-top: 58px; }
}

/* ── the gallery (≤640): 2-up compact cards, nothing overlaps ── */
@media (max-width: 640px) {
  .gallery-grid.mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 12px 40px; }
  /* phones: cards go squarer & a touch bigger (desktop keeps 4/3) */
  .gallery-grid .mg-card, .gallery-grid .br-new-card { aspect-ratio: 1 / 1; }
  .mg-card-foot { left: 10px; right: 10px; bottom: 10px; }
  .mg-card-name { font-size: 13px; line-height: 1.25; }
  .mg-card-meta { font-size: 8.5px; margin-top: 3px; }
  .mg-card-top { top: 8px; left: 8px; right: 44px; gap: 5px; }
  .mg-card .bx-seal b { display: none; }   /* the seal goes icon-only — the crown says it */
  .mg-badge { font-size: 8px; }
  .mg-card-acts { top: 6px; right: 6px; opacity: 1; }   /* no hover on touch */
  .mg-card-hover { display: none; }                     /* hover-open is a desktop gesture */
  /* filter row: search takes its own line; tools settle beneath */
  .mg-filterbar.gal-filterbar { flex-wrap: wrap; gap: 10px; margin: 12px 14px 14px; width: auto; }
  .gal-search-wrap { flex: 1 1 100%; }
  .gal-search { font-size: 16px; }   /* iOS focus-zoom floor */
  .gal-tool-sp, .gal-tool-div { display: none; }   /* desktop spacers squeeze the row here */
  .mg-statebar { margin-left: 0; margin-right: auto; }
  .gal-sort { margin-left: 0; }
  .gal-cchips-row { margin: 16px 14px 0; gap: 12px; }
  .gal-mast { padding: 0 14px; }
  .gal-mast-acts { flex-wrap: nowrap; gap: 10px; }
  .gal-mast-acts > button:not(.gal-mdel) { flex: 1 1 0; min-width: 0; }   /* ADD STATIONS 与 FORM CONSTELLATION 一行对半分,trash 不参与 */
  .mg-badge-cast { display: none; }   /* 手机端隐藏卡片上的 ✦ N CAST 标 —— 太 busy */
}

/* ── mobile small-text diet (≤640): hover-born hints have no life on touch,
      long captions yield — the icons and the layout already say it ── */
@media (max-width: 640px) {
  .stn-id-tip { display: none; }                 /* hover tip — no hover here */
  .gal-cchips-row .gal-cchip-new { font-size: 0; letter-spacing: 0; padding: 6px 12px; }   /* "+ NEW COLLECTION" → "+" (padded — a 13px tap target is no target) */
  .gal-cchips-row .gal-cchip-new::before { content: '+'; font-size: 15px; letter-spacing: 0; }
  .bx-note { display: none; }                    /* THE ID IS THE ADDRESS… — the rename confirm says it when it matters */
  .bx-gift-lead { display: none; }               /* the gift numbers speak for themselves */
}

/* ── AB-VIS: the visibility toggle — a bolder Private | Open segment + a ?
   that floats its explainer as a popover (never pushes the layout). Purely
   presentational; the real behaviour is the backend's. ── */
.bx-vis {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 16px;
}
.bx-vis-lbl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(205,220,242,0.7);
}
.bx-vis-seg {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(4,8,16,0.7); border: 1px solid rgba(150,190,225,0.3);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
}
.bx-vis-b {
  padding: 8px 20px; border-radius: 999px; cursor: pointer; border: none; background: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  color: rgba(190,205,228,0.55);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.bx-vis-b:hover { color: #e7eefb; }
.bx-vis-b.on {
  color: #eaf1fa; background: linear-gradient(180deg, rgba(150,170,200,0.4), rgba(110,132,166,0.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.4);
}
/* OPEN = the public-signal blue, unmistakable when selected */
.bx-vis-bo.on {
  color: #06263e; background: linear-gradient(180deg, #6fc4f2, #2894d4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 10px rgba(24,176,245,0.4);
}
.bx-vis-qwrap { position: relative; display: inline-flex; }
.bx-vis-q {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(150,190,225,0.4);
  font-family: var(--font-mono); font-size: 11px; color: rgba(190,205,228,0.65);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.bx-vis-q:hover { color: #e7eefb; border-color: rgba(220,232,250,0.65); }
/* the explainer FLOATS above the ? — a prompt-style tag, no layout shift */
.bx-vis-tip {
  position: absolute; bottom: calc(100% + 12px); right: -4px; left: auto;
  width: 270px; max-width: min(88vw, 360px); padding: 12px 15px; border-radius: 12px; z-index: 30;
  background: rgba(14,22,38,0.98); border: 1px solid rgba(150,190,225,0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.85;
  color: rgba(215,228,246,0.9); text-align: left; white-space: normal;
}
.bx-vis-tip b { color: #6fc4f2; font-weight: 700; }   /* Open = the public-signal blue */
.bx-vis-tip::after {   /* the little downward beak pointing at the ? */
  content: ''; position: absolute; top: 100%; right: 13px; transform: rotate(45deg);
  width: 10px; height: 10px; margin-top: -6px; background: rgba(14,22,38,0.98);
  border-right: 1px solid rgba(150,190,225,0.35); border-bottom: 1px solid rgba(150,190,225,0.35);
}
/* Zo 0722: the ? explainers float on HOVER — no click needed (click stays
   as the touch fallback; author display beats the UA [hidden] rule) */
.bx-vis-qwrap:hover .bx-vis-tip[hidden],
.bx-kq-wrap:hover .bx-ktip[hidden] { display: block; }


/* ── AB: on-chain, called out white+bold in the crown doors ── */
.bx-door-sub .bx-oc { color: #fff; font-weight: 700; }

/* ── AB-KQ: the kicker ? explainer — a small circle after the workstation
   name, tapping floats a one-line tag BELOW it (no layout shift). ── */
.bx-kq-wrap { position: relative; display: inline-flex; margin-left: 8px; vertical-align: middle; }
.bx-kq {
  width: 19px; height: 19px; border-radius: 50%; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(150,190,225,0.35);
  font-family: var(--font-mono); font-size: 9.5px; color: rgba(190,205,228,0.6);
  transition: color .15s ease, border-color .15s ease;
}
.bx-kq:hover { color: #e7eefb; border-color: rgba(220,232,250,0.65); }
.bx-ktip {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 240px; max-width: min(80vw, 300px); padding: 11px 14px; border-radius: 12px; z-index: 30;
  background: rgba(14,22,38,0.98); border: 1px solid rgba(150,190,225,0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.7;
  color: rgba(215,228,246,0.9); text-align: left; text-transform: none; font-weight: 400; white-space: normal;
}
.bx-ktip::before {   /* upward beak pointing at the ? */
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; margin-bottom: -6px; background: rgba(14,22,38,0.98);
  border-left: 1px solid rgba(150,190,225,0.35); border-top: 1px solid rgba(150,190,225,0.35);
}

/* ══ large-display scale (2026-07) — see realm.css for the rationale. Same
   conservative curve, capped 1.5, anchored at MacBook/phones = zoom 1. The
   two forced-height full-screen boxes get /zoom compensation so they stay one
   actual screen (.dashboard-view is the shell of every Stations view). ══ */
@media (min-width: 1560px) { :root { zoom: 1.15; } .dashboard-view { min-height: calc(100vh / 1.15); } .home-view.bx-live { height: calc(100vh / 1.15); } }
@media (min-width: 1920px) { :root { zoom: 1.30; } .dashboard-view { min-height: calc(100vh / 1.30); } .home-view.bx-live { height: calc(100vh / 1.30); } }
@media (min-width: 2400px) { :root { zoom: 1.50; } .dashboard-view { min-height: calc(100vh / 1.50); } .home-view.bx-live { height: calc(100vh / 1.50); } }

/* HOW MANY packs — the only thing this screen decides. The pack itself (size and
   price) is the rate card and is not repriced here; this multiplies it, and the
   server re-checks the number anyway. Zo 0804. */
.v2-qty {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 10px 12px; border-radius: 11px;
  background: rgba(12,20,30,0.4); border: 1px solid rgba(150,190,225,0.16);
}
.v2-qty-lbl {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: rgba(205,221,242,0.45); text-transform: uppercase; margin-right: auto;
}
.v2-qty-b {
  width: 28px; height: 28px; flex: 0 0 auto; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,20,30,0.5); border: 1px solid rgba(150,190,225,0.22);
  border-radius: 8px; color: #dbe7f6; font-size: 15px; line-height: 1;
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.v2-qty-b:hover:not(:disabled) { border-color: rgba(245,197,66,0.55); color: #f5d97a; }
.v2-qty-b:disabled { opacity: 0.3; cursor: default; }
.v2-qty-n {
  min-width: 26px; text-align: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #f2f6fc;
}
.v2-qty-each {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  color: rgba(205,221,242,0.35);
}

/* ══ BATCH CROWN — crowning several stations from the shelf (Zo 2026-08-27) ══
   The shelf's own light palette and the crown's gold; nothing new invented. The
   cards are unchanged — selection is a layer on top of them, so a station reads
   the same whether you are browsing or picking. */
.mgsel-cell { position: relative; }
.mgsel-cell .mg-card { cursor: pointer; }
.mgsel-tick {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel); font-size: 12px; line-height: 1;
  background: rgba(9,15,28,0.55); color: #2a1c06;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.14s, border-color 0.14s;
}
.mgsel-on .mgsel-tick { background: linear-gradient(180deg,#f5c542,#e0a040); border-color: #6e4a13; }
.mgsel-on .mg-card { outline: 3px solid #f5c542; outline-offset: -3px; }
/* not crownable in this tier — stays visible and says why. A card that vanished
   would read as a station gone missing. */
.mgsel-off { opacity: 0.42; pointer-events: none; }
.mgsel-why {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 4px 9px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  background: rgba(9,15,28,0.72); color: rgba(255,255,255,0.82);
}

/* the action bar — sticks to the bottom while picking */
.mgsel-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 420;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  padding: 14px 22px;
  background: rgba(252,253,255,0.96); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(31,55,107,0.14);
  box-shadow: 0 -6px 24px rgba(31,55,107,0.1);
}
.mgsel-kinds { display: flex; gap: 8px; }
.mgsel-kind {
  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;
}
.mgsel-kind.is-on { background: linear-gradient(180deg,#f5c542,#e0a040); color: #2a1c06; border-color: #6e4a13; }
.mgsel-count { font-family: var(--font-mono); font-size: 12px; color: rgba(31,55,107,0.7); }
.mgsel-count b { font-family: var(--font-pixel); font-size: 13px; color: #213f7a; }
.mgsel-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mgsel-cancel {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 9px 15px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(31,55,107,0.2); background: transparent; color: rgba(31,55,107,0.6);
}
.mgsel-cancel:hover { color: #213f7a; }
.mgsel-go {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.07em;
  padding: 12px 20px; cursor: pointer;
  border: 2px solid #6e4a13; border-radius: 0;
  background: linear-gradient(180deg,#d49636,#b07a1e); color: #fff5e6;
  box-shadow: 0 4px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22);
  transition: transform 0.12s, box-shadow 0.12s;
}
.mgsel-go:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22); }
.mgsel-go:disabled { opacity: 0.45; cursor: default; box-shadow: 0 4px 0 rgba(110,74,19,0.4); }
/* the bar covers the footer while it is up */
body.mgsel-mode .evt-footer { padding-bottom: 86px; }

/* the confirm panel's station list */
.v2-batch-list {
  list-style: none; margin: 0 0 16px; padding: 0;
  max-height: 190px; overflow-y: auto;
}
.v2-batch-row {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: #cdd9ea; padding: 6px 0; border-bottom: 1px solid rgba(120,140,170,0.16);
}
.v2-batch-row:last-child { border-bottom: none; }

/* ── 批量加冕的挑选器(Ellen 0830:「直接显示一个无图的简单竖向列表去点选」)──
   一竖列名字,没有封面。用的是这个弹窗一直在用的那套暗色:名字 #cdd9ea,
   分隔线 rgba(120,140,170,0.16),选中即金色 —— 没有新的视觉语言。 */
.v2-batchpick .ncp-panel { max-width: 620px; }
.bpk-kinds { display: flex; gap: 8px; margin-bottom: 20px; }
.bpk-kind {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 8px 15px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(150,190,225,0.28); background: rgba(255,255,255,0.03);
  color: rgba(205,217,234,0.66); transition: all 0.15s;
}
.bpk-kind:hover { color: #cdd9ea; border-color: rgba(150,190,225,0.5); }
.bpk-kind.is-on { background: linear-gradient(180deg,#f5c542,#e0a040); color: #2a1c06; border-color: #6e4a13; }
.bpk-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 46vh; overflow-y: auto;
  border-top: 1px solid rgba(120,140,170,0.16);
}
.bpk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; cursor: pointer;
  border-bottom: 1px solid rgba(120,140,170,0.16);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: #cdd9ea;
  transition: background 0.12s;
}
.bpk-row:hover:not(.bpk-off) { background: rgba(245,197,66,0.06); }
.bpk-tick {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid rgba(150,190,225,0.4); background: rgba(9,15,28,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: #2a1c06;
}
.bpk-on .bpk-tick { background: linear-gradient(180deg,#f5c542,#e0a040); border-color: #6e4a13; }
.bpk-on .bpk-name { color: #f5c542; }
.bpk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpk-date { flex: 0 0 auto; font-size: 10.5px; color: rgba(205,217,234,0.42); }
.bpk-why {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.04em;
  background: rgba(9,15,28,0.5); color: rgba(205,217,234,0.6);
}
/* 不能在这一档加冕的站:留着并写明原因。整行消失读起来像"站不见了"。 */
.bpk-off { opacity: 0.42; cursor: default; }
.bpk-empty {
  padding: 22px 4px; text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(205,217,234,0.45);
}
.bpk-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.bpk-count { font-family: var(--font-mono); font-size: 12px; color: rgba(205,217,234,0.7); }
.bpk-count b { font-family: var(--font-pixel); font-size: 13px; color: #f5c542; }
/* 勾着但这一档用不上的那些 —— 写出来,免得她勾了五个只看见三个,以为勾丢了 */
.bpk-held { display: block; margin-top: 4px; font-size: 10.5px; color: rgba(205,217,234,0.45); }
.bpk-go { margin-left: auto; }
@media (max-width: 560px) {
  .bpk-list { max-height: 52vh; }
  .bpk-go { margin-left: 0; width: 100%; }
}

/* Confirm-cast rows (0904) — one recipient per row, with what the sender's own
   cast history says about that address underneath it. */
.v2-cc-row { padding: 5px 0; }
.v2-cc-row + .v2-cc-row { border-top: 1px solid rgba(120,170,230,0.12); }
.v2-cc-mk { font-size: 10px; line-height: 1.5; color: rgba(205,217,234,0.45); margin-top: 2px; }
.v2-cc-warn { color: #f5c542; }