/* ═══════════════════════════════════════════════
   MOTHERLAND FESTIVAL — STYLES
   Single source of truth. No inline style blocks.
   See docs/brand/MOTHERLAND_BRAND_KIT.md for the brand kit.
═══════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ── Motherland palette ─────────────────────────────────────
     Rooted in carved gold, deep forest, bark, and bone. */
  --motherland-black:    #0A0807;
  --root-charcoal:       #15110C;
  --bark-brown:          #3A2D1E;
  --ancestral-gold:      #C9A961;
  --burnished-bronze:    #8B6F3F;
  --sand-glow:           #E8D9B0;
  --forest-canopy:       #2D4A2B;
  --deep-olive:          #556B2F;
  --soft-bone:           #F0E6D2;
  --ember-glow:          #B8893D;

  /* RGB triplets for compositing rgba() backgrounds without re-hardcoding */
  --gold-rgb:    201, 169, 97;
  --bronze-rgb:  139, 111, 63;
  --forest-rgb:  45, 74, 43;
  --olive-rgb:   85, 107, 47;

  /* Status RGB triplets — mirror the warmed status tokens below so
     translucent status backgrounds composite from the brand palette
     instead of generic SaaS greens/reds/blues. */
  --success-rgb: 111, 161, 88;   /* --success #6FA158 */
  --danger-rgb:  212, 98, 75;    /* --danger  #D4624B */
  --warn-rgb:    212, 168, 71;   /* --warn    #D4A847 */
  --info-rgb:    107, 138, 168;  /* --info    #6B8AA8 */

  /* Dark ink for text/icons placed on a gold/bronze fill. Gold (#C9A961)
     under white is ~2.2:1 (fails WCAG); under this ink it is ~8.5:1. */
  --on-acc: #0A0807;             /* Motherland Black */

  /* ── Surface scale (mapped to brand) ───────────────────────── */
  --bg:  #0A0807;   /* Motherland Black */
  --bg2: #100D08;   /* Slight lift */
  --bg3: #16120D;   /* Card surface — warm charcoal */
  --bg4: #1E1812;   /* Inputs / inner panels */
  --bg5: #2A2118;   /* Hover surfaces */

  /* ── Accent aliases ─────────────────────────────────────────
     Existing markup uses --acc/--acc2/--acc3 everywhere. Those
     aliases now point at the Motherland palette so the entire
     site reskins without churn in 200+ inline references. */
  --acc:        #C9A961;   /* Ancestral Gold */
  --acc2:       #8B6F3F;   /* Burnished Bronze */
  --acc3:       #B8893D;   /* Ember Glow */
  --acc-border: rgba(201,169,97,.4);

  /* ── Text scale ─────────────────────────────────────────────
     Warmer off-white than the previous cool gray. */
  --text:  #F0E6D2;   /* Soft Bone — 16.1:1 AAA */
  --text2: #B8AC93;   /* Aged parchment — 8.9:1 AAA */
  --text3: #8E8270;   /* Muted bronze-gray — 4.9:1 AA */

  /* ── Borders ─────────────────────────────────────────────── */
  --border:  #2B2218;
  --border2: #3A2D1E;   /* Bark Brown */

  /* ── Status tokens (kept, slightly warmed to match palette) ── */
  --success: #6FA158;    /* Forest-leaning green — 6.6:1 AA */
  --warn:    #D4A847;    /* Warm honey — 9.0:1 AAA */
  --danger:  #D4624B;    /* Earth red — 5.4:1 AA */
  --info:    #6B8AA8;    /* Muted slate-blue — 5.5:1 AA */

  --radius:12px;--radius-sm:8px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'Space Mono',monospace;
  /* Elegant variable serif for homepage emotional display headings
     (hero title/tagline + landing section titles). Scoped to the
     landing surface so dashboards/tickets keep the condensed display. */
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
}

body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;min-height:100vh;overflow-x:hidden}

/* ── ICONS (inline SVG, currentColor) ───────────────
   Monochrome line icons replacing emoji glyphs. They inherit colour
   from the surrounding text/accent class and align to the baseline. */
.icon{display:inline-block;vertical-align:-0.14em;flex-shrink:0;stroke:currentColor}
.icon-acc{color:var(--acc)}
.icon-muted{color:var(--text3)}
.card-title .icon{vertical-align:-0.16em;margin-right:6px;color:var(--acc)}
.feature-icon .icon{width:20px;height:20px;color:var(--acc)}
.tx-icon .icon{width:18px;height:18px}

/* ── NAV ─────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(8,8,8,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--font-display);font-size:24px;letter-spacing:2px;color:var(--acc);cursor:pointer}
.nav-links{display:flex;gap:8px}
.nav-btn{background:none;border:1px solid var(--border2);color:var(--text2);padding:7px 15px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:12px;font-weight:500;transition:all .2s}
.nav-btn:hover{border-color:var(--acc);color:var(--acc)}
.nav-btn.active{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.nav-btn.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.nav-btn.primary:hover{background:var(--acc2)}

/* ── PAGES ───────────────────────────────────────── */
.page{display:none;opacity:0;transition:opacity .15s ease}
.page.active{display:block;opacity:1}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── HERO ────────────────────────────────────────── */
/* Mega Pass D: single dvh-aware height rule (the old duplicate override at
   the responsive block is gone) so mobile browser chrome never causes a
   jumpy or overflowing first screen. */
.hero{position:relative;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding:clamp(40px,7vh,84px) 24px clamp(48px,7vh,80px);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(var(--gold-rgb),.18) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(var(--bronze-rgb),.08) 0%,transparent 60%);pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;opacity:.18;pointer-events:none}
/* Emblem/seal is a VISIBLE, centered, in-flow element ABOVE the
   badge/title stack — never a ghost watermark behind the heading. */
.hero-emblem{display:block;width:clamp(80px,11vh,132px);height:auto;margin:0 auto clamp(14px,2.4vh,26px);opacity:1;pointer-events:none;filter:drop-shadow(0 0 14px rgba(var(--gold-rgb),.18))}
.hero-bg,.hero-grid{z-index:0}
.hero>*:not(.hero-bg):not(.hero-grid):not(.hero-glow-a):not(.hero-glow-b):not(.hero-fireflies){position:relative;z-index:1}
.hero-tagline{font-family:var(--font-serif);font-size:clamp(22px,3.2vw,32px);color:var(--acc);margin-top:16px;letter-spacing:.2px;font-style:italic;font-weight:400;text-transform:none;font-optical-sizing:auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.3);color:var(--acc);padding:6px 16px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:24px;text-transform:uppercase}
.hero-badge::before{content:'';width:6px;height:6px;background:var(--acc);border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(40px,11vw,128px);line-height:.96;letter-spacing:.5px;color:#fff;position:relative;font-optical-sizing:auto}
.hero-title span{color:var(--acc)}
.hero-sub{font-size:16px;color:var(--text2);max-width:520px;margin:20px auto 0;line-height:1.6;font-weight:300}
.hero-date{font-family:var(--font-mono);font-size:13px;color:var(--text3);margin-top:12px;letter-spacing:2px}
.hero-actions{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;justify-content:center}
.btn-primary{background:var(--acc);color:var(--on-acc);border:none;padding:14px 32px;border-radius:8px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px}
.btn-primary:hover{background:var(--acc2);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border2);padding:14px 32px;border-radius:8px;font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.btn-outline:hover{border-color:var(--acc);color:var(--acc)}
.hero-stats{display:flex;gap:40px;margin-top:clamp(28px,4.5vh,56px);flex-wrap:wrap;justify-content:center}
.hero-stat{text-align:center}
.hero-stat-num{font-family:var(--font-display);font-size:40px;color:var(--acc)}
.hero-stat-lbl{font-size:11px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-top:4px}

/* ── FEATURES ────────────────────────────────────── */
.section{padding:80px 24px;max-width:1100px;margin:0 auto}
.section-label{font-size:11px;color:var(--acc);letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.section-title{font-family:var(--font-display);font-size:clamp(36px,6vw,64px);line-height:1;margin-bottom:16px}
/* Homepage display headings adopt the elegant serif; scoped to the
   landing page so other routes keep the condensed display font. */
#page-landing .section-title{font-family:var(--font-serif);font-weight:600;letter-spacing:.3px;line-height:1.04}
.section-sub{color:var(--text2);max-width:480px;line-height:1.7;font-weight:300}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:48px}
.feature-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:border-color .3s}
.feature-card:hover{border-color:rgba(var(--gold-rgb),.4)}
.feature-icon{width:40px;height:40px;background:rgba(var(--gold-rgb),.12);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px}
.feature-title{font-weight:600;margin-bottom:6px;font-size:15px}
.feature-text{color:var(--text2);font-size:13px;line-height:1.6;font-weight:300}

/* ── TICKET CARDS ────────────────────────────────── */
.ticket-section{
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  /* Full-screen treatment with generous breathing room above
     and below so the cards don't crash into the footer. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:96px 24px 120px;
}
@media(max-width:768px){
  .ticket-section{min-height:auto;padding:80px 20px 96px}
}
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:800px;margin:48px auto 0}
.ticket-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;position:relative;transition:all .3s;cursor:pointer}
.ticket-card:hover{border-color:var(--acc);transform:translateY(-4px)}
.ticket-card.featured{border-color:var(--acc);background:linear-gradient(135deg,rgba(var(--gold-rgb),.08),var(--bg3))}
.ticket-card.featured::before{content:'MOST POPULAR';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc);color:var(--on-acc);font-size:10px;font-weight:700;letter-spacing:2px;padding:4px 12px;border-radius:100px}
.ticket-type{font-size:11px;color:var(--acc);letter-spacing:2px;text-transform:uppercase;font-weight:600}
.ticket-price{font-family:var(--font-display);font-size:52px;color:#fff;line-height:1;margin:8px 0}
.ticket-price sup{font-family:var(--font-body);font-size:18px;vertical-align:top;margin-top:8px}
.ticket-desc{color:var(--text2);font-size:13px;margin-bottom:20px;font-weight:300}
.ticket-features{list-style:none;margin-bottom:24px}
.ticket-features li{font-size:13px;color:var(--text2);padding:6px 0;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center}
.ticket-features li::before{content:'•';color:var(--success);font-weight:700;flex-shrink:0}

/* ── PURCHASE FLOW ───────────────────────────────── */
.flow-container{max-width:600px;margin:0 auto;padding:40px 24px}
.flow-steps{display:flex;gap:0;margin-bottom:40px}
.flow-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.flow-step::after{content:'';position:absolute;top:14px;left:50%;right:-50%;height:1px;background:var(--border2);z-index:0}
.flow-step:last-child::after{display:none}
.step-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--bg3);position:relative;z-index:1;transition:all .3s}
.step-dot.done{background:var(--success);border-color:var(--success);color:#fff}
.step-dot.active{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.step-lbl{font-size:11px;color:var(--text3);margin-top:6px;text-align:center}
.step-lbl.active{color:var(--acc)}
.form-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px}
.form-title{font-family:var(--font-display);font-size:28px;margin-bottom:4px;letter-spacing:1px}
.form-sub{color:var(--text2);font-size:13px;margin-bottom:28px;font-weight:300}
.form-row{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}
.form-input{width:100%;background:var(--bg4);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:10px 14px;font-family:var(--font-body);font-size:14px;transition:border-color .2s;outline:none}
.form-input:focus{border-color:var(--acc)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.selected-ticket{background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.3);border-radius:8px;padding:16px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center}
.selected-ticket-name{font-weight:600;font-size:15px}
.selected-ticket-price{font-family:var(--font-display);font-size:24px;color:var(--acc)}

/* ── PAYMENT SUCCESS ─────────────────────────────── */
.success-card{background:var(--bg3);border:1px solid rgba(var(--success-rgb),.3);border-radius:var(--radius-lg);padding:40px;text-align:center}
.success-icon{width:64px;height:64px;background:rgba(var(--success-rgb),.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px}
.success-title{font-family:var(--font-display);font-size:36px;color:var(--success);margin-bottom:8px;letter-spacing:1px}
.success-wristband{background:var(--bg4);border:1px solid var(--border);border-radius:8px;padding:16px;margin:20px 0;text-align:left}

/* ── DASHBOARD SHELL ─────────────────────────────── */
.dash-layout{display:grid;grid-template-columns:200px 1fr;min-height:calc(100vh - 56px)}
.sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:20px 0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
.sidebar-logo{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:8px;font-family:var(--font-display);font-size:18px;color:var(--acc);letter-spacing:2px;cursor:pointer}
.sidebar-logo-text{font-family:var(--font-display);font-size:17px;letter-spacing:1.5px;color:var(--acc);line-height:1;white-space:nowrap;overflow:hidden}
.sidebar-logo-sub{font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-top:4px}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;transition:all .2s;font-size:13px;font-weight:500;color:var(--text2);border-left:2px solid transparent}
.sidebar-item:hover{background:var(--bg3);color:var(--text)}
.sidebar-item.active{background:rgba(var(--gold-rgb),.08);color:var(--acc);border-left-color:var(--acc)}
.sidebar-section{font-size:10px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;padding:12px 20px 4px;font-weight:600}
.dash-main{background:var(--bg);overflow-y:auto}
.dash-header{padding:24px 28px 20px;border-bottom:1px solid var(--border)}
.dash-title{font-family:var(--font-display);font-size:32px;letter-spacing:1px}
.dash-subtitle{color:var(--text2);font-size:13px;font-weight:300;margin-top:4px}
.dash-content{padding:24px 28px}
.dash-section{display:none}
.dash-section.show{display:block}

/* ── METRIC CARDS ────────────────────────────────── */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.metric-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.metric-label{font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.metric-value{font-family:var(--font-display);font-size:32px;letter-spacing:1px;line-height:1}
.metric-change{font-size:11px;margin-top:6px;font-weight:500}
.metric-change.up{color:var(--success)}
.metric-change.down{color:var(--danger)}

/* ── CARDS ───────────────────────────────────────── */
.card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-title{font-size:14px;font-weight:600;letter-spacing:.3px}
.card-badge{font-size:10px;padding:3px 8px;border-radius:100px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.badge-active{background:rgba(var(--success-rgb),.15);color:var(--success);border:1px solid rgba(var(--success-rgb),.3)}
.badge-inactive{background:rgba(var(--danger-rgb),.15);color:var(--danger);border:1px solid rgba(var(--danger-rgb),.3)}
.badge-pending{background:rgba(var(--warn-rgb),.15);color:var(--warn);border:1px solid rgba(var(--warn-rgb),.3)}
.badge-info{background:rgba(var(--info-rgb),.15);color:var(--info);border:1px solid rgba(var(--info-rgb),.3)}

/* ── WALLET ──────────────────────────────────────── */
.wallet-card{background:linear-gradient(135deg,#15110C,#241A0F);border:1px solid rgba(var(--gold-rgb),.3);border-radius:var(--radius-lg);padding:24px;position:relative;overflow:hidden;margin-bottom:16px}
.wallet-bg{position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(var(--gold-rgb),.15),transparent);border-radius:50%}
.wallet-label{font-size:10px;color:rgba(var(--gold-rgb),.7);letter-spacing:2px;text-transform:uppercase;font-weight:600}
.wallet-amount{font-family:var(--font-display);font-size:48px;color:#fff;line-height:1;margin:8px 0}
.wristband-id{font-family:var(--font-mono);font-size:12px;color:var(--text3);margin-top:4px}

/* ── REWARDS ─────────────────────────────────────── */
.reward-bar-bg{background:var(--bg4);border-radius:100px;height:8px;margin:8px 0;overflow:hidden}
.reward-bar{background:linear-gradient(90deg,var(--acc3),var(--acc2));height:100%;border-radius:100px;transition:width .8s cubic-bezier(.4,0,.2,1)}

/* ── TRANSACTIONS ────────────────────────────────── */
.tx-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);gap:12px}
.tx-row:last-child{border-bottom:none}
.tx-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tx-info{flex:1;min-width:0}
.tx-vendor{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-time{font-size:11px;color:var(--text3);margin-top:2px}
.tx-amount{font-family:var(--font-mono);font-size:14px;font-weight:700;flex-shrink:0}
.tx-amount.debit{color:var(--danger)}
.tx-amount.credit{color:var(--success)}

/* ── POS ─────────────────────────────────────────── */
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pos-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pos-key{background:var(--bg4);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;font-size:18px;font-weight:600;transition:all .15s;user-select:none}
.pos-key:hover{background:var(--bg3);border-color:var(--border2)}
.pos-key:active{transform:scale(.95)}
.pos-key.acc{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
.pos-key.acc:hover{background:var(--acc2)}
.pos-display{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:16px;text-align:right;font-family:var(--font-mono);font-size:32px;color:var(--text);min-height:60px}
.pos-display .currency{font-size:16px;color:var(--text2)}

/* ── USER TABLE ──────────────────────────────────── */
.table{width:100%;border-collapse:collapse}
.table th{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:600;padding:0 12px 12px;text-align:left;border-bottom:1px solid var(--border)}
.table td{padding:12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(255,255,255,.02)}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--acc3),var(--acc2));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.lock-btn{background:none;border:1px solid var(--border2);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;font-family:var(--font-body);transition:all .2s;color:var(--text2)}
.lock-btn.locked{color:var(--danger);border-color:rgba(var(--danger-rgb),.4)}
.lock-btn:hover{border-color:var(--acc);color:var(--acc)}

/* ── LIVE TICKER ─────────────────────────────────── */
.live-ticker{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;max-height:200px;overflow-y:auto}
.ticker-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:center}
.ticker-row:last-child{border-bottom:none}
.ticker-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── MAP ─────────────────────────────────────────── */
.map-container{background:var(--bg4);border-radius:var(--radius);aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid var(--border)}
.map-zone{position:absolute;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:default}
.map-label{max-width:100%;padding:4px;font-size:9px;color:var(--text);text-align:center;line-height:1.3;overflow-wrap:anywhere}

/* ── TOGGLE ──────────────────────────────────────── */
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle-track{width:36px;height:20px;background:var(--border2);border-radius:10px;position:relative;transition:background .2s;flex-shrink:0}
.toggle-track.on{background:var(--success)}
.toggle-thumb{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s}
.toggle-track.on .toggle-thumb{transform:translateX(16px)}

/* ── BAR CHART ───────────────────────────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:80px}
.bar{flex:1;background:var(--acc);border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.4,0,.2,1);position:relative;min-height:4px}
.bar:hover{background:var(--acc2)}
.bar-lbl{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:9px;color:var(--text3)}

/* ── VENDOR PRODUCT ──────────────────────────────── */
.product-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.product-row:last-child{border-bottom:none}
.product-bar-bg{background:var(--bg4);height:4px;border-radius:2px;flex:1;margin:0 12px}
.product-bar{background:var(--acc);height:4px;border-radius:2px}

/* ── SEARCH ──────────────────────────────────────── */
.search-box{background:var(--bg4);border:1px solid var(--border);border-radius:8px;padding:8px 14px;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.search-input{background:none;border:none;color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;flex:1}
.search-icon{color:var(--text3);font-size:14px}

/* ── FOOTER ──────────────────────────────────────── */
.site-footer{background:var(--bg3);border-top:1px solid var(--border);padding:60px 24px 32px;margin-top:auto}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-brand-desc{font-size:13px;color:var(--text2);line-height:1.7;margin:12px 0 20px}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.social-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1px solid var(--border2);font-size:12px;color:var(--text2);cursor:pointer;transition:all .2s;background:var(--bg4)}
.social-pill:hover{border-color:var(--acc);color:var(--acc);background:rgba(var(--gold-rgb),.06);transform:translateY(-2px)}
.footer-heading{font-family:var(--font-display);font-size:11px;letter-spacing:3px;color:var(--text3);margin-bottom:16px;text-transform:uppercase}
.footer-link{display:block;font-size:13px;color:var(--text2);padding:5px 0;cursor:pointer;transition:color .2s;text-decoration:none}
.footer-link:hover{color:var(--acc)}
.footer-newsletter{background:var(--bg4);border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:8px}
.footer-input{display:flex;gap:8px;margin-top:10px}
.footer-input input{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:10px 14px;color:var(--text);font-size:12px;font-family:var(--font-body);outline:none}
.footer-input input:focus{border-color:var(--acc)}
.footer-bottom{max-width:1200px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom-link{font-size:11px;color:var(--text3);cursor:pointer;transition:color .2s}
.footer-bottom-link:hover{color:var(--text)}
.footer-venue-map{background:var(--bg4);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:12px;font-size:12px}
.footer-venue-map .venue-name{font-weight:600;margin-bottom:4px}
.footer-venue-map .venue-addr{color:var(--text3);font-size:11px;line-height:1.5}

/* ── AUTH ────────────────────────────────────────── */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
/* Living forest halo behind the auth card */
.auth-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(720px circle at 50% 50%,
      rgba(var(--canopy-deep-rgb), .55) 0%,
      rgba(var(--canopy-deep-rgb), .22) 35%,
      transparent 70%),
    radial-gradient(360px circle at 25% 80%,
      rgba(var(--firefly-rgb), .08) 0%,
      transparent 60%);
  pointer-events:none;
  z-index:0;
}
.auth-wrap > *{ position:relative; z-index:1; }

.auth-card{background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:40px;max-width:440px;width:100%;position:relative;overflow:hidden}
/* Existing gold corner glow kept as a heritage accent; the new
   forest halo behind the card is in .auth-wrap::before above. */
.auth-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(var(--gold-rgb),.1),transparent);border-radius:50%;pointer-events:none}
.google-btn{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border2);background:var(--bg4);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;font-family:var(--font-body)}
.google-btn:hover{border-color:var(--acc);background:rgba(var(--gold-rgb),.04)}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text3);font-size:11px;letter-spacing:1px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.otp-inputs{display:flex;gap:8px;justify-content:center;margin:20px 0}
.otp-input{width:44px;height:52px;border-radius:10px;border:2px solid var(--border2);background:var(--bg4);color:var(--text);font-size:20px;font-weight:700;text-align:center;font-family:var(--font-mono);transition:border-color .2s}
.otp-input:focus{outline:none;border-color:var(--acc)}
.demo-creds{background:rgba(var(--gold-rgb),.04);border:1px solid rgba(var(--gold-rgb),.15);border-radius:10px;padding:14px;margin-top:16px}
.demo-creds .cred-role{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
/* Stacked rows: role eyebrow over a mono credential line so the
   email + password never wrap into the label. Whole row auto-fills. */
.demo-cred-row{display:flex;flex-direction:column;gap:3px;padding:8px 10px;margin-bottom:6px;border-radius:8px;border:1px solid transparent;background:rgba(var(--gold-rgb),.03);cursor:pointer;transition:border-color .2s,background .2s}
.demo-cred-row:last-of-type{margin-bottom:0}
.demo-cred-row:hover{border-color:rgba(var(--gold-rgb),.28);background:rgba(var(--gold-rgb),.07)}
.demo-cred-row:focus-visible{outline:none;border-color:var(--acc)}
.demo-cred-role{font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--text2)}
.demo-cred-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-family:var(--font-mono);font-size:11.5px;line-height:1.3}
.demo-cred-email{color:var(--acc);word-break:break-all}
.demo-cred-sep{color:var(--text3)}
.demo-cred-pass{color:var(--text3)}

/* ── ARTIST DASHBOARD ────────────────────────────── */
.rider-tag{display:inline-flex;align-items:center;gap:6px;background:var(--bg4);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;margin:4px}
.rider-tag.checked{background:rgba(var(--success-rgb),.1);border-color:rgba(var(--success-rgb),.3);color:var(--success)}
.schedule-row{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.schedule-time{font-family:var(--font-mono);font-size:12px;color:var(--acc);width:60px;flex-shrink:0;padding-top:2px}
.schedule-event{flex:1}
.schedule-event-title{font-weight:600;font-size:13px;margin-bottom:2px}
.schedule-event-loc{font-size:11px;color:var(--text3)}
.payment-tier{background:var(--bg4);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}

/* ── EARN / AFFILIATE ────────────────────────────── */
.earn-hero{text-align:center;padding:80px 24px 60px;background:linear-gradient(180deg,rgba(var(--gold-rgb),.06),transparent)}
.earn-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:40px 0}
.earn-step{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:24px;text-align:center}
.earn-step-num{width:36px;height:36px;border-radius:50%;background:rgba(var(--gold-rgb),.15);color:var(--acc);font-family:var(--font-display);font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.affiliate-link-box{background:var(--bg4);border:1px solid var(--border2);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;margin:12px 0}
.affiliate-link-box span{flex:1;font-family:var(--font-mono);font-size:12px;color:var(--acc);word-break:break-all}
.progress-ticket{background:var(--bg4);border:2px solid var(--border2);border-radius:14px;padding:20px;text-align:center;position:relative;overflow:hidden}
.progress-ticket.earned{border-color:var(--success);background:rgba(var(--success-rgb),.04)}
.ticket-progress-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin:12px 0}
.ticket-progress-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:4px;transition:width 1s ease}
.spots-counter{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.2);border-radius:20px;padding:4px 14px;font-size:12px;font-weight:600;color:var(--acc)}

/* ── LINEUP CARDS ────────────────────────────────── */
.artist-grid-card{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.artist-grid-card:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 12px 32px rgba(var(--gold-rgb),.12)}
.artist-fav-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all .2s;z-index:2}
.artist-fav-btn:hover{border-color:rgba(var(--danger-rgb),.5);background:rgba(var(--danger-rgb),.08)}
.artist-fav-btn.active{background:rgba(var(--danger-rgb),.15);border-color:rgba(var(--danger-rgb),.4);color:var(--danger)}
.artist-preview-btn{position:absolute;bottom:12px;right:12px;background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.25);border-radius:20px;padding:4px 10px;font-size:10px;font-weight:600;color:var(--acc);cursor:pointer;transition:all .2s;letter-spacing:.5px}
.artist-preview-btn:hover{background:var(--acc);color:var(--on-acc)}

/* ── GNX BADGE ───────────────────────────────────── */
.gnx-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(var(--gold-rgb),.15),rgba(var(--gold-rgb),.05));border:1px solid rgba(var(--gold-rgb),.3);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;color:var(--acc);letter-spacing:.5px}
.gnx-badge::before{content:'◈';font-size:10px}

/* ── LIVE DOT ────────────────────────────────────── */
.live-dot{width:8px;height:8px;background:var(--success);border-radius:50%;display:inline-block;margin-right:6px;animation:pulse 1.5s infinite}

/* ── TOAST ───────────────────────────────────────── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── MODAL ───────────────────────────────────────── */
#modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s}
#modal-box{background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:28px;max-width:520px;width:100%;position:relative;max-height:90vh;overflow-y:auto}
#modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:4px;line-height:1;z-index:1}
#modal-close:hover{color:var(--text)}

/* ── SYSTEM SHELLS ───────────────────────────────── */
.system-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px}
.system-shell .system-code{font-family:var(--font-display);font-size:clamp(80px,15vw,160px);color:var(--acc);line-height:.85;opacity:.15;user-select:none}
.system-shell .system-msg{font-family:var(--font-display);font-size:clamp(24px,4vw,40px);margin-bottom:8px}
.system-shell .system-desc{font-size:14px;color:var(--text2);max-width:400px;line-height:1.6;margin-bottom:28px}
.system-shell .system-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ── SESSION-AWARE NAV ───────────────────────────── */
.nav-user-pill{display:inline-flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-full);padding:5px 12px 5px 5px;cursor:pointer;transition:all .2s}
.nav-user-pill:hover{border-color:var(--acc-border);background:var(--bg4)}
.nav-user-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.nav-user-name{font-size:12px;font-weight:500;color:var(--text)}
.nav-user-role{font-size:10px;color:var(--text3)}

/* ── ERROR BOUNDARY ──────────────────────────────── */
.section-error{background:rgba(var(--danger-rgb),.04);border:1px solid rgba(var(--danger-rgb),.15);border-radius:var(--radius-lg);padding:24px;text-align:center;color:var(--text2)}
.section-error .err-icon{font-size:28px;margin-bottom:10px}
.section-error .err-msg{font-size:13px;line-height:1.6;margin-bottom:14px}

/* ── SPINNER ─────────────────────────────────────── */
.spinner{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── PAGE LOADING BAR ────────────────────────────── */
.page-loading-bar{position:fixed;top:0;left:0;height:2px;background:var(--acc);z-index:9999;transition:width .3s ease;width:0}
.page-loading-bar.loading{width:70%}
.page-loading-bar.done{width:100%;opacity:0;transition:width .1s,opacity .3s .1s}

/* ── MOBILE NAV OVERLAY ──────────────────────────── */
/* Mega Pass D stacking fix: the OPEN menu must beat every ambient fixed
   layer (firefly prompt z-8900, mobile tab bar z-9200, cursor trail z-8500)
   so nothing can sit above it and swallow taps; toasts (z-9999) and the
   loading bar stay on top. While open, body.mnav-open ALSO hides ambient
   fixed chrome entirely — belt + braces with the z-band. */
.mobile-nav-overlay{position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,.95);backdrop-filter:blur(12px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .25s}
.mobile-nav-overlay.open{display:flex;opacity:1}
body.mnav-open .firefly-prompt,
body.mnav-open .mobile-tab-bar,
body.mnav-open .cursor-firefly{display:none!important}
.mobile-nav-overlay .mnav-link{font-family:var(--font-display);font-size:clamp(28px,6vw,48px);color:var(--text2);cursor:pointer;transition:color .15s;letter-spacing:2px;padding:8px 0;text-decoration:none;display:block}
.mobile-nav-overlay .mnav-link:hover{color:var(--acc)}
.mobile-nav-overlay .mnav-primary{color:var(--acc)}
.mobile-nav-close{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--text2);font-size:28px;cursor:pointer;padding:8px;line-height:1}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--text2);border-radius:2px;transition:all .2s}

/* ── SIDEBAR OVERLAY ─────────────────────────────── */
.sidebar-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.6);display:none;opacity:0;transition:opacity .25s}
.sidebar-overlay.open{display:block;opacity:1}

/* ── DASHBOARD MOBILE HAMBURGER ──────────────────── */
.dash-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;margin-right:8px}
.dash-hamburger span{display:block;width:20px;height:2px;background:var(--text2);border-radius:2px}

/* ── MOBILE BOTTOM TAB BAR ───────────────────────── */
.mobile-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9200;background:rgba(17,15,13,.96);border-top:1px solid var(--border2);padding:8px 0 max(8px,env(safe-area-inset-bottom));backdrop-filter:blur(12px);pointer-events:auto}
.mobile-tab-bar .tab-items{display:flex;justify-content:space-around;align-items:center}
.mobile-tab-bar .tab-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 12px;cursor:pointer;border-radius:8px;transition:all .15s;min-width:52px;pointer-events:auto}
.mobile-tab-bar .tab-item .tab-icon{font-size:18px;line-height:1}
.mobile-tab-bar .tab-item .tab-label{font-size:10px;color:var(--text3);font-weight:500;transition:color .15s}
.mobile-tab-bar .tab-item.active .tab-label{color:var(--acc)}
.mobile-tab-bar .tab-item.active .tab-icon{filter:drop-shadow(0 0 4px var(--acc))}

/* ── SKELETON LOADING ────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--bg4) 0%,var(--bg5) 50%,var(--bg4) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:var(--radius-md)}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-metric{height:80px;border-radius:var(--radius-lg)}
.skeleton-card{height:140px;border-radius:var(--radius-lg)}
.skeleton-row{height:48px;border-radius:6px;margin-bottom:8px}
.skeleton-text{height:14px;border-radius:4px;margin-bottom:8px}
.skeleton-text.w60{width:60%}
.skeleton-text.w80{width:80%}
.skeleton-text.w40{width:40%}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none;background:var(--bg4)}}

/* ── ARTIST PREVIEW MODAL ────────────────────────── */
.preview-artist-header{text-align:center;padding:20px 0 24px;border-bottom:1px solid var(--border)}
.preview-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--acc3),var(--acc2));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;margin:0 auto 12px}
.social-link-row{display:flex;gap:8px;margin-top:14px;justify-content:center;flex-wrap:wrap}
.social-chip{padding:5px 14px;border-radius:20px;border:1px solid var(--border2);font-size:11px;cursor:pointer;transition:all .2s;color:var(--text2)}
.social-chip:hover{border-color:var(--acc);color:var(--acc)}

/* ── FIELD ERROR ─────────────────────────────────── */
.field-error{font-size:11px;color:var(--danger);margin-top:4px;display:none}

/* ── SCROLL CONTENT ──────────────────────────────── */
.scroll-content{height:calc(100vh - 56px);overflow-y:auto}

/* ── SELECT ──────────────────────────────────────── */
select.form-input{cursor:pointer}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:900px){
  .hamburger{display:flex}
  .nav-links{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .nav-btn{font-size:11px;padding:6px 10px}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .25s;position:fixed;z-index:160;height:100vh;top:0}
  .sidebar.open{transform:translateX(0)}
  .dash-hamburger{display:flex}
  .dash-main{margin-left:0 !important;width:100% !important}
  .mobile-tab-bar{display:block}
  .dash-main{padding-bottom:80px !important}
  .pos-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .dash-layout{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .otp-inputs{gap:5px}
  .otp-input{width:38px;height:46px;font-size:18px}
}

/* ── Public Map & FAQ page ─────────────────────────────────── */
.map-fact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:8px;
}
.map-fact{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 12px;
  text-align:center;
}
.map-fact-label{
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:6px;
}
.map-fact-value{
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:.5px;
  color:var(--text);
}
@media(max-width:600px){
  .map-fact-grid{grid-template-columns:repeat(2,1fr)}
  .map-fact-value{font-size:16px}
}

.zone-list{display:flex;flex-direction:column;gap:8px}
.zone-list-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 12px;
  background:var(--bg4);
  border:1px solid var(--border);
  border-radius:10px;
}
.zone-list-icon{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.zone-list-body{flex:1;min-width:0}
.zone-list-name{font-size:13px;font-weight:600;margin-bottom:2px}
.zone-list-desc{font-size:12px;color:var(--text2);line-height:1.5}

.premium-locked{
  background:linear-gradient(135deg,rgba(var(--bronze-rgb),.06),rgba(var(--forest-rgb),.05));
  border:1px dashed var(--border2);
}
.premium-unlocked{
  background:linear-gradient(135deg,rgba(var(--success-rgb),.05),rgba(var(--gold-rgb),.05));
  border:1px solid rgba(var(--success-rgb),.3);
}
.premium-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
.premium-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;
  background:var(--bg4);
  border:1px solid var(--border);
  border-radius:10px;
}
.premium-lock{font-size:14px;opacity:.7;flex-shrink:0;margin-top:1px}
.premium-item-title{font-size:12px;font-weight:600;margin-bottom:2px}
.premium-item-desc{font-size:11px;color:var(--text2);line-height:1.5}

.faq-group{margin-bottom:16px}
.faq-group:last-child{margin-bottom:0}
.faq-group-title{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--acc);
  margin:14px 0 8px;
  font-weight:600;
}
.faq-row{border-bottom:1px solid var(--border);padding:0}
.faq-row:last-child{border-bottom:none}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13px;font-weight:500;
  padding:14px 0;
  cursor:pointer;user-select:none;
}
.faq-q:hover{color:var(--acc)}
.faq-chev{color:var(--acc);font-size:14px;transition:transform .2s ease;flex-shrink:0}
.faq-row.open .faq-chev{transform:rotate(180deg)}
.faq-a{
  font-size:12px;color:var(--text2);line-height:1.7;
  max-height:0;overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
  padding:0;
}
.faq-row.open .faq-a{max-height:400px;padding:0 0 14px 0}
.faq-row:hover{background:rgba(255,255,255,.015)}

/* ════════════════════════════════════════════════════════════
   PHASE 4 — POLISH PASS
   Accessibility, hover/touch gating, motion respect, viewport fit.
   No layout structure changes — corrections only.
═══════════════════════════════════════════════════════════════ */

/* ── Keyboard focus ring (a11y) ──────────────────────────────
   Every interactive element gets a visible focus ring for
   keyboard users. Mouse users see nothing (focus-visible). */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  border-radius:6px;
}
.form-input:focus-visible,
.search-input:focus-visible,
.footer-input input:focus-visible,
.otp-input:focus-visible{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18);
}

/* ── Hover effects gated to hover-capable devices ────────────
   Touch devices treat tap as hover, leaving sticky states. */
@media(hover:none){
  .btn-primary:hover{transform:none}
  .ticket-card:hover{transform:none;border-color:var(--border)}
  .ticket-card.featured:hover{border-color:var(--acc)}
  .artist-grid-card:hover{transform:none;box-shadow:none;border-color:var(--border)}
  .social-pill:hover{transform:none}
  .nav-btn:hover{border-color:var(--border2);color:var(--text2)}
  .btn-outline:hover{border-color:var(--border2);color:var(--text)}
  .feature-card:hover{border-color:var(--border)}
  .footer-link:hover{color:var(--text2)}
  .faq-q:hover{color:var(--text)}
}

/* ── Reduced-motion respect (a11y) ───────────────────────────
   Globally disable animations and transitions for users who
   request reduced motion. Keep functional state changes. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn-primary:hover{transform:none}
  .ticket-card:hover{transform:none}
  .artist-grid-card:hover{transform:none}
  .social-pill:hover{transform:none}
}

/* ── Viewport fit corrections ────────────────────────────────
   Hero now fits inside the nav-aware scroll-content. Use
   100dvh on mobile-affected surfaces so the dynamic browser
   chrome doesn't clip the bottom. */
/* (hero min-height consolidated into the base .hero rule — Mega Pass D) */
.scroll-content{height:calc(100vh - 56px);height:calc(100dvh - 56px)}
.auth-wrap{min-height:100vh;min-height:100dvh}
.mobile-nav-overlay{height:100vh;height:100dvh}

/* ── Mobile touch targets (WCAG 2.5.5 — min 44×44) ───────────
   Bump padding so tap targets meet spec without resizing
   visual content. */
.mobile-tab-bar .tab-item{min-height:44px;padding:6px 12px;justify-content:center}
.dash-hamburger{min-width:44px;min-height:44px;justify-content:center;align-items:center}
#modal-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.artist-fav-btn{width:36px;height:36px}
.lock-btn{min-height:32px}
.hamburger{min-width:44px;min-height:44px;justify-content:center;align-items:center}

/* ── Mobile sidebar width cap ────────────────────────────────
   On mobile the sidebar slides in from the left as an overlay.
   Without an explicit width it spans full screen; cap so the
   underlying dashboard remains partially visible. */
@media(max-width:768px){
  .sidebar{width:min(280px,80vw);max-width:280px}
}

/* ── Card hover consistency ──────────────────────────────────
   Clickable cards now share a subtle lift; static cards do not. */
.feature-card{transition:border-color .25s, transform .25s}
@media(hover:hover){
  .feature-card:hover{transform:translateY(-2px)}
}

/* ── Sticky dashboard header (mobile) ────────────────────────
   On mobile, dashboard header should stick to the top so the
   hamburger is reachable even after scroll. */
@media(max-width:768px){
  .dash-header{position:sticky;top:0;background:var(--bg);z-index:50}
}

/* ════════════════════════════════════════════════════════════
   PHASE 6 — MOTION & MOTIF POLISH
   Gold firefly cursor trail + tasteful root linework.
═══════════════════════════════════════════════════════════════ */

/* ── Cursor firefly trail ────────────────────────────────────
   Particles are pooled in JS. CSS handles paint + GPU motion.
   Defense-in-depth: also hidden on touch / reduced-motion at
   the CSS layer even if the JS guard ever misses. */
.cursor-firefly{
  position:fixed;
  width:7px;height:7px;
  background:radial-gradient(circle, var(--ancestral-gold) 0%, rgba(var(--gold-rgb),.4) 40%, transparent 75%);
  border-radius:50%;
  pointer-events:none;
  z-index:8500;
  opacity:0;
  transform:translate(-50%,-50%);
  filter:blur(.3px);
}
.cursor-firefly--forest{
  background:radial-gradient(circle, var(--moss-glow) 0%, rgba(var(--moss-glow-rgb),.45) 40%, transparent 75%);
}
.cursor-firefly.animate{
  /* will-change scoped to the active particle — at most 1–2 at a time
     instead of all 12 — keeps GPU memory bounded. */
  will-change:opacity,transform;
  animation:firefly-drift 1.2s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes firefly-drift{
  0%   { opacity:.9; transform:translate(-50%,-50%) scale(1); }
  60%  { opacity:.6; }
  100% { opacity:0; transform:translate(-50%,-180%) scale(.35); }
}
@media(hover:none){
  .cursor-firefly{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .cursor-firefly{display:none!important}
}

/* ── Footer root motif ───────────────────────────────────────
   Subtle topographic line texture across the top edge of the
   site footer. SVG inlined as data URI — no extra HTTP request.
   Opacity .08 so it reads as carved/engraved, not decorative. */
.site-footer{position:relative}
.site-footer::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:80px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><g fill='none' stroke='%23C9A961' stroke-width='1' opacity='.7'><path d='M0,40 Q150,20 300,40 T600,40 T900,40 T1200,40'/><path d='M0,55 Q150,38 300,55 T600,55 T900,55 T1200,55' opacity='.6'/><path d='M0,25 Q200,5 400,25 T800,25 T1200,25' opacity='.5'/></g></svg>");
  background-size:1200px 80px;
  background-repeat:no-repeat;
  opacity:.08;
  pointer-events:none;
}

/* ── Soft gold hover glow on interactive cards ───────────────
   Adds the "alive but grounded" feel from the brand kit motion
   spec. Only on hover-capable devices. */
@media(hover:hover){
  .ticket-card:hover,
  .feature-card:hover,
  .artist-grid-card:hover{
    box-shadow:0 8px 32px rgba(var(--gold-rgb),.08);
  }
}

/* ════════════════════════════════════════════════════════════
   MOTHERLAND BRAND-DEPTH SYSTEM
   Deep forest glow + ancestral gold edge lighting.
   Purely additive — opt-in via classes. Existing surfaces
   inherit nothing from this block.

   BRAND REVIEW TARGET — see docs/review/DESIGN_CRITIQUE_AREAS.md
   MOTION REVIEW TARGET — all motion below respects (prefers-reduced-motion).
═══════════════════════════════════════════════════════════════ */

:root{
  /* Forest greens — used for glow + status energy */
  --forest-deep:    #1A3A22;   /* Deep canopy night */
  --forest-mid:     #2D4A2B;   /* Forest Canopy (already in palette) */
  --moss-light:     #6FA158;   /* Living moss / success */
  --moss-glow:      #8EBF6F;   /* Highlight green */

  /* RGB triplets for compositing rgba() glows */
  --forest-deep-rgb: 26, 58, 34;
  --moss-rgb:        111, 161, 88;
  --moss-glow-rgb:   142, 191, 111;

  /* ── Glow tokens — the core of the brand-depth system ────── */
  --glow-green:        0 0 24px rgba(var(--moss-rgb), .18);
  --glow-green-soft:   0 0 16px rgba(var(--moss-rgb), .10);
  --glow-green-strong: 0 0 36px rgba(var(--moss-rgb), .28);
  --glow-gold:         0 0 24px rgba(var(--gold-rgb), .15);
  --glow-gold-soft:    0 0 14px rgba(var(--gold-rgb), .08);
  --glow-canopy:       0 4px 32px rgba(var(--forest-deep-rgb), .35),
                       0 0 0 1px rgba(var(--moss-rgb), .12);

  /* ── Edge tokens — for static borders + pointer-tracked edge light ── */
  --edge-forest:       rgba(var(--moss-rgb), .25);
  --edge-forest-soft:  rgba(var(--moss-rgb), .12);
  --edge-bronze:       rgba(var(--bronze-rgb), .35);
  --edge-gold:         rgba(var(--gold-rgb), .30);

  /* ── Root-surface tokens — for "rooted" card backgrounds ─── */
  --surface-root:      linear-gradient(180deg, var(--bg3) 0%, #14110B 100%);
  --surface-canopy:    linear-gradient(180deg, var(--bg3) 0%, #131C13 100%);

  /* ── Green-glass system (Phase 2 of brand-depth pass) ──────
     The "living forest under glass" layer. Used alongside (not
     replacing) the gold/bronze heritage. Green = interactive
     life; gold/bronze = heritage; brown = grounding; black = base. */
  --motherland-black-deep: #030503;
  --root-charcoal-deep:    #080B07;
  --canopy-deep:           #0F3D16;
  --moss-shadow:           #163315;
  --firefly-glow:          #4DFF18;
  --firefly-soft:          #8DFF5A;
  --root-brown:            #2A1D12;
  --muted-sand:            #BDA36D;
  --warm-bone:             #EDE4CF;

  --canopy-deep-rgb:       15, 61, 22;
  --firefly-rgb:           77, 255, 24;
  --firefly-soft-rgb:      141, 255, 90;
  --moss-shadow-rgb:       22, 51, 21;

  /* Glass surface fills — dark transparent over the forest glow */
  --glass-deep:            rgba(8, 18, 9, 0.72);
  --glass-forest:          rgba(10, 28, 12, 0.68);
  --glass-frost:           rgba(15, 25, 16, 0.55);
  --glass-edge:            rgba(var(--firefly-rgb), 0.18);
  --glass-edge-strong:     rgba(var(--firefly-rgb), 0.36);

  /* Green-glass glow tokens — layered shadows. Toned compared
     to the raw firefly hex because pure neon doesn't read as
     "living" — it reads as gaming UI. The .25–.42 alpha range
     keeps glow visible without becoming neon paint. */
  --glow-firefly-soft:     0 0 18px rgba(var(--firefly-rgb), .14);
  --glow-firefly:          0 0 28px rgba(var(--firefly-rgb), .25),
                           0 0 0 1px rgba(var(--firefly-rgb), .18);
  --glow-firefly-strong:   0 0 44px rgba(var(--firefly-rgb), .42),
                           0 0 0 1px rgba(var(--firefly-rgb), .28);
  --glow-canopy-deep:      0 8px 32px rgba(var(--canopy-deep-rgb), .55),
                           0 0 0 1px rgba(var(--firefly-rgb), .12);

  /* ── Pointer-light variables (read by JS edge-light, fallback safe) ── */
  --pointer-x:         50%;
  --pointer-y:         50%;
}

/* ── Motherland glow — the universal "alive surface" mixin ───
   Apply to cards, banners, modal edges, profile blocks.
   Combine with --glow-green-soft for ambient, --glow-green
   for hover, --glow-green-strong for focus/active states. */
.motherland-glow{
  box-shadow:var(--glow-green-soft);
  transition:box-shadow .35s cubic-bezier(.2,.6,.3,1);
}
@media(hover:hover){
  .motherland-glow:hover{ box-shadow:var(--glow-green); }
}
.motherland-glow:focus-within{ box-shadow:var(--glow-green); }

/* Card variant — for dashboard metric cards, ticket cards, wallet cards.
   Adds a thin forest edge in addition to the glow. */
.motherland-glow-card{
  position:relative;
  background:var(--surface-canopy);
  border:1px solid var(--edge-forest-soft);
  box-shadow:var(--glow-green-soft);
  transition:box-shadow .35s cubic-bezier(.2,.6,.3,1), border-color .25s, transform .25s;
}
@media(hover:hover){
  .motherland-glow-card:hover{
    box-shadow:var(--glow-green);
    border-color:var(--edge-forest);
  }
}
.motherland-glow-card:focus-within{
  box-shadow:var(--glow-green);
  border-color:var(--edge-forest);
}

/* Banner variant — for hero strips, CTAs, page-opening sections.
   Stronger ambient glow, dual-tone (forest + gold). */
.motherland-glow-banner{
  position:relative;
  box-shadow:var(--glow-green), var(--glow-gold-soft);
  transition:box-shadow .4s cubic-bezier(.2,.6,.3,1);
}

/* Profile variant — for identity blocks: profile cards, artist headers,
   wristband success seals. Bronze emphasis instead of forest. */
.motherland-glow-profile{
  box-shadow:var(--glow-gold-soft);
  border:1px solid var(--edge-bronze);
  transition:box-shadow .35s cubic-bezier(.2,.6,.3,1), border-color .25s;
}
@media(hover:hover){
  .motherland-glow-profile:hover{
    box-shadow:var(--glow-gold);
    border-color:var(--edge-gold);
  }
}

/* Active state — for selected/highlighted cards. Persistent glow,
   not just hover. Pair with .motherland-glow-card. */
.motherland-glow-active{
  box-shadow:var(--glow-green-strong) !important;
  border-color:var(--edge-forest) !important;
}

/* ── Root-edge light — pointer-tracked radial halo ───────────
   The surface gets a soft forest light that follows the cursor.
   Variables --pointer-x and --pointer-y are updated by JS.
   Pure CSS fallback: a static centered glow at 50%/50%. */
.root-edge-light{
  position:relative;
  isolation:isolate;
}
/* Uses ::after rather than ::before because some surfaces it's
   applied to (notably .ticket-card.featured with its "MOST POPULAR"
   ribbon) already own ::before. CSS allows one of each per element. */
.root-edge-light::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(
    220px circle at var(--pointer-x) var(--pointer-y),
    rgba(var(--moss-rgb), .22) 0%,
    rgba(var(--moss-rgb), .06) 40%,
    transparent 75%
  );
  pointer-events:none;
  opacity:0;
  transition:opacity .35s cubic-bezier(.2,.6,.3,1);
  z-index:0;
}
.root-edge-light > *{ position:relative; z-index:1; }
@media(hover:hover){
  .root-edge-light:hover::after{ opacity:1; }
}
.root-edge-light:focus-within::after{ opacity:1; }

/* ── Canopy hover — gentle lift + warmer edge on hover ──────
   Used on interactive items where a full glow is too much
   (e.g. small list rows, FAQ rows, vendor product rows). */
@media(hover:hover){
  .canopy-hover{
    transition:background .25s, border-color .25s, transform .2s;
  }
  .canopy-hover:hover{
    background:rgba(var(--moss-rgb), .04);
    border-color:var(--edge-forest-soft);
  }
}

/* ── Emblem seal — a tiny circular emblem for headers,
   confirmation cards, profile blocks, dashboard titles. */
.emblem-seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--bg4);
  border:1px solid var(--edge-gold);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.emblem-seal::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../assets/brand/favicon.svg") center/65% no-repeat;
  opacity:.85;
}
.emblem-seal.lg{
  width:56px;
  height:56px;
}
.emblem-seal.xl{
  width:88px;
  height:88px;
  border-width:2px;
  box-shadow:var(--glow-gold-soft);
}
.emblem-seal.stamp{
  /* Used on success confirmation — bronze "stamp" feel */
  border-color:var(--edge-bronze);
  background:linear-gradient(135deg, #1A140B, #251B0E);
  box-shadow:0 0 0 4px rgba(var(--gold-rgb), .06), var(--glow-gold);
}

/* ── Living status dot — replaces the bare .live-dot with a
   green halo. Used in dashboard live indicators. */
.status-alive{
  position:relative;
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--moss-light);
  vertical-align:middle;
  margin-right:6px;
}
.status-alive::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--moss-glow-rgb), .55), transparent 70%);
  animation:status-breathe 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes status-breathe{
  0%, 100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.4); }
}

/* ── Root divider — engraved gold line for section breaks ─── */
.root-divider{
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb), .25) 25%,
    rgba(var(--gold-rgb), .45) 50%,
    rgba(var(--gold-rgb), .25) 75%,
    transparent 100%
  );
  border:none;
  margin:24px 0;
}

/* ── Reduced-motion fallbacks ────────────────────────────────
   ACCESSIBILITY REVIEW TARGET — see docs/review/DESIGN_CRITIQUE_AREAS.md
   Glow itself stays (it's static color), but transitions and
   the breathing live-dot animation are flattened. */
@media(prefers-reduced-motion:reduce){
  .motherland-glow,
  .motherland-glow-card,
  .motherland-glow-banner,
  .motherland-glow-profile,
  .root-edge-light::after,
  .canopy-hover{
    transition:none !important;
  }
  .status-alive::after{
    animation:none !important;
    opacity:.5;
  }
}

/* ════════════════════════════════════════════════════════════
   MOTHERLAND SYSTEM STATES
   Branded loading / empty / error / success / maintenance.
   Built on the Phase 2 glow + emblem-seal primitives.
═══════════════════════════════════════════════════════════════ */

.motherland-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:32px 24px;
  background:var(--surface-canopy);
  border:1px solid var(--edge-forest-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--glow-green-soft);
  min-height:200px;
  position:relative;
}

.motherland-state .state-icon{
  font-size:32px;
  opacity:.85;
  margin-bottom:2px;
}

.motherland-state .state-title{
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:1px;
  color:var(--text);
  line-height:1.1;
}
.motherland-state .state-title--loading{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  color:var(--text2);
  letter-spacing:.2px;
  max-width:340px;
  margin-top:8px;
}

.motherland-state .state-body{
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
  max-width:380px;
}

.motherland-state .state-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:14px;
}

.motherland-state .state-ref{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text3);
  margin-top:8px;
  letter-spacing:.5px;
}

.motherland-state .state-meta{
  font-size:12px;
  color:var(--text3);
  margin-top:8px;
  letter-spacing:.5px;
}

/* ── Loading progress strip — slow organic growth line ───── */
.motherland-state .state-progress{
  width:140px;
  height:2px;
  background:rgba(var(--gold-rgb), .12);
  border-radius:2px;
  overflow:hidden;
  margin-top:14px;
}
.motherland-state .state-progress span{
  display:block;
  height:100%;
  width:30%;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--ancestral-gold) 40%,
    var(--moss-glow) 60%,
    transparent 100%
  );
  animation:state-progress-flow 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes state-progress-flow{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(450%); }
}

/* ── State variants — subtle tone shifts only ────────────── */
.state-error{
  border-color:rgba(var(--moss-rgb), .15);
  /* Earth-toned, not alarming. Same calm canopy bg as other states. */
}
.state-error .state-icon{
  filter:hue-rotate(-10deg) saturate(.7);
}

.state-success{
  border-color:var(--edge-bronze);
  box-shadow:var(--glow-gold-soft);
}

.state-maintenance{
  /* Warmer, slower feeling. Same structure. */
}

/* ── Inline mini-banner ──────────────────────────────────── */
.motherland-banner{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 14px;
  background:rgba(var(--gold-rgb), .05);
  border:1px solid rgba(var(--gold-rgb), .15);
  border-radius:var(--radius-md);
  font-size:13px;
  color:var(--text2);
  line-height:1.5;
  margin-bottom:12px;
}
.motherland-banner__icon{
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}
.motherland-banner__body{
  flex:1;
  min-width:0;
}
.motherland-banner--success{
  background:rgba(var(--moss-rgb), .06);
  border-color:rgba(var(--moss-rgb), .2);
}
.motherland-banner--warn{
  background:rgba(var(--warn-rgb), .06);
  border-color:rgba(var(--warn-rgb), .25);
}

/* ── Reduced-motion ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .motherland-state .state-progress span{
    animation:none !important;
    width:60%;
    transform:none;
  }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD BRAND-DEPTH — Phase 5
   Extends existing dashboard primitives (.metric-card, .wallet-card,
   .pos-display) with the Motherland glow + pointer halo without
   touching any HTML/JS templates. All dashboards inherit the
   effect uniformly.
   PERFORMANCE REVIEW TARGET — see docs/review/DESIGN_CRITIQUE_AREAS.md
═══════════════════════════════════════════════════════════════ */

/* ── Metric cards — ambient glow + pointer halo ──────────── */
.metric-card{
  position:relative;
  isolation:isolate;
  box-shadow:var(--glow-green-soft);
  transition:box-shadow .35s cubic-bezier(.2,.6,.3,1),
             border-color .25s,
             transform .25s;
}
.metric-card::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(
    200px circle at var(--pointer-x) var(--pointer-y),
    rgba(var(--moss-rgb), .12) 0%,
    rgba(var(--moss-rgb), .03) 35%,
    transparent 70%
  );
  pointer-events:none;
  opacity:0;
  transition:opacity .35s cubic-bezier(.2,.6,.3,1);
  z-index:0;
}
.metric-card > *{ position:relative; z-index:1; }
@media(hover:hover){
  .metric-card:hover{
    box-shadow:var(--glow-green);
    border-color:var(--edge-forest-soft);
  }
  .metric-card:hover::after{ opacity:1; }
}

/* ── Wallet card — softer "living" glow ──────────────────── */
.wallet-card{
  box-shadow:var(--glow-gold-soft);
}
@media(hover:hover){
  .wallet-card:hover{
    box-shadow:var(--glow-gold);
  }
}

/* ── POS display — calm forest edge while idle ───────────── */
.pos-display{
  box-shadow:inset 0 0 24px rgba(var(--moss-rgb), .04);
  transition:box-shadow .3s;
}
.pos-display:focus-within{
  box-shadow:inset 0 0 28px rgba(var(--moss-rgb), .08),
             0 0 0 1px rgba(var(--moss-rgb), .18);
}

/* ── Sidebar logo — gentle living seal ───────────────────── */
.sidebar-logo{
  position:relative;
  transition:color .25s;
}
.sidebar-logo::after{
  /* Sits at bottom:0 so the gold gradient OVERLAPS the existing
     border-bottom instead of stacking below it. The gradient is
     transparent at its edges, so the grey border shows through
     at the ends, with a warm gold "seal line" emerging in the
     middle. Single 1px divider, no doubling. */
  content:'';
  position:absolute;
  bottom:0;
  left:20px;
  right:20px;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb), .35) 30%,
    rgba(var(--gold-rgb), .55) 50%,
    rgba(var(--gold-rgb), .35) 70%,
    transparent 100%
  );
  pointer-events:none;
}

/* ── Dashboard header — subtle gold-line root divider ─────
   Adds the engraved-gold divider feel to the bottom of every
   dashboard header without touching any HTML. */
.dash-header{
  border-bottom:1px solid transparent !important;
  background-image:linear-gradient(transparent, transparent),
                   linear-gradient(90deg,
                     transparent 0%,
                     rgba(var(--gold-rgb), .15) 25%,
                     rgba(var(--gold-rgb), .35) 50%,
                     rgba(var(--gold-rgb), .15) 75%,
                     transparent 100%
                   );
  background-origin:padding-box, border-box;
  background-clip:padding-box, border-box;
  background-position:0 0, 0 100%;
  background-size:100% 100%, 100% 1px;
  background-repeat:no-repeat;
}

/* ── Reduced-motion fallback for new dashboard glow ─────── */
@media(prefers-reduced-motion:reduce){
  .metric-card,
  .metric-card::after,
  .wallet-card,
  .pos-display{
    transition:none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOTHERLAND GREEN-GLASS SYSTEM — Phase 2 (brand-depth pass)
   Living forest under dark glass. Apply selectively in Phase 3.
   BRAND REVIEW TARGET       — see docs/review/DESIGN_CRITIQUE_AREAS.md
   MOTION REVIEW TARGET      — all motion respects (prefers-reduced-motion).
   PERFORMANCE REVIEW TARGET — CSS-only, GPU-only properties.
═══════════════════════════════════════════════════════════════ */

/* ── Page-level living forest backlight ──────────────────────
   A single low-saturation green halo sits behind the page,
   anchored to the bottom edge. Subtle enough that it doesn't
   recolour content; strong enough that the site feels rooted
   in green instead of pure black. Pseudo-element on body so
   no extra DOM. Pointer-events:none so it never blocks clicks. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px ellipse at 50% 110%,
      rgba(var(--canopy-deep-rgb), .45) 0%,
      rgba(var(--canopy-deep-rgb), .18) 35%,
      transparent 70%),
    radial-gradient(600px ellipse at 12% 10%,
      rgba(var(--firefly-rgb), .04) 0%,
      transparent 60%);
  z-index:-1;
}
@media(prefers-reduced-motion:reduce){
  /* No animation on the backlight to begin with — keeping as-is. */
}

/* ── Base glass panel ────────────────────────────────────────
   Apply to: ticket cards, dashboard cards, modals, auth card,
   FAQ containers, profile blocks, Firefly Initiative sections.
   Pair with .green-glow for interactivity. */
.motherland-glass{
  background:var(--glass-deep);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius-lg);
  box-shadow:var(--glow-canopy-deep);
  position:relative;
  isolation:isolate;
}

/* Denser variant — for auth card, modals, success seals.
   Less transparent so text-heavy content stays grounded. */
.motherland-glass-strong{
  background:var(--glass-frost);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  border:1px solid rgba(var(--firefly-rgb), .22);
  border-radius:var(--radius-lg);
  box-shadow:
    var(--glow-firefly-soft),
    0 12px 48px rgba(var(--canopy-deep-rgb), .6);
  position:relative;
  isolation:isolate;
}

/* Banner variant — for hero CTA strips, page-opening sections.
   Wider glow, more horizontal feel. */
.motherland-glass-banner{
  background:linear-gradient(180deg,
    var(--glass-forest) 0%,
    var(--glass-deep) 100%);
  backdrop-filter:blur(12px) saturate(110%);
  -webkit-backdrop-filter:blur(12px) saturate(110%);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius-lg);
  box-shadow:
    var(--glow-firefly-soft),
    inset 0 1px 0 rgba(var(--firefly-soft-rgb), .08);
  position:relative;
}

/* ── Green-glass primary CTA ─────────────────────────────────
   The new Motherland button. Dark forest glass base, warm bone
   text, gold edge accent, green glow on hover. Use for: Buy
   Tickets, Get Your Wristband, Sign In, Earn Ticket, Top Up,
   Confirm Payment, dashboard primary actions, Firefly contribute. */
.btn-glass-primary{
  background:linear-gradient(180deg,
    rgba(var(--firefly-rgb), .10) 0%,
    rgba(var(--canopy-deep-rgb), .92) 100%);
  color:var(--warm-bone);
  border:1px solid rgba(var(--firefly-rgb), .35);
  padding:14px 32px;
  border-radius:10px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  cursor:pointer;
  transition:box-shadow .25s cubic-bezier(.2,.6,.3,1),
             border-color .25s,
             background .25s;
  box-shadow:
    inset 0 1px 0 rgba(var(--firefly-soft-rgb), .15),
    var(--glow-firefly-soft);
  position:relative;
  text-shadow:0 1px 0 rgba(0, 0, 0, .25);
}
.btn-glass-primary:disabled{
  opacity:.55;
  cursor:not-allowed;
}
@media(hover:hover){
  .btn-glass-primary:hover:not(:disabled){
    background:linear-gradient(180deg,
      rgba(var(--firefly-rgb), .18) 0%,
      rgba(var(--canopy-deep-rgb), .95) 100%);
    border-color:rgba(var(--firefly-rgb), .55);
    box-shadow:
      inset 0 1px 0 rgba(var(--firefly-soft-rgb), .25),
      var(--glow-firefly);
  }
}
.btn-glass-primary:focus-visible{
  outline:none;
  border-color:rgba(var(--firefly-rgb), .65);
  box-shadow:
    inset 0 1px 0 rgba(var(--firefly-soft-rgb), .25),
    var(--glow-firefly),
    0 0 0 3px rgba(var(--firefly-rgb), .25);
}

/* ── Green-glass secondary CTA ───────────────────────────────
   Bronze-edged outline. Picks up a green-edge tint on hover so
   it stays tied to the green-glass family without being primary. */
.btn-glass-secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--edge-bronze);
  padding:14px 32px;
  border-radius:10px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .25s, color .25s, box-shadow .25s;
  letter-spacing:.5px;
}
@media(hover:hover){
  .btn-glass-secondary:hover{
    border-color:rgba(var(--firefly-rgb), .55);
    color:var(--firefly-soft);
    box-shadow:0 0 14px rgba(var(--firefly-rgb), .10);
  }
}
.btn-glass-secondary:focus-visible{
  outline:none;
  border-color:rgba(var(--firefly-rgb), .65);
  box-shadow:0 0 0 3px rgba(var(--firefly-rgb), .25);
}

/* ── Green-glow utility ──────────────────────────────────────
   Stack on any element to give it a soft ambient green glow
   that intensifies on hover. Compatible with existing
   .motherland-glow / .root-edge-light / .motherland-glass. */
.green-glow{
  box-shadow:var(--glow-firefly-soft);
  transition:box-shadow .35s cubic-bezier(.2,.6,.3,1);
}
@media(hover:hover){
  .green-glow:hover{ box-shadow:var(--glow-firefly); }
}
.green-glow:focus-within{ box-shadow:var(--glow-firefly); }

/* ── Firefly-active state ────────────────────────────────────
   For surfaces tied to The Firefly Initiative — impact cards,
   monument tiles, Firefly Grove zone, contribution buttons. */
.firefly-active{
  background:linear-gradient(180deg,
    rgba(var(--firefly-rgb), .06) 0%,
    var(--glass-deep) 100%);
  border:1px solid rgba(var(--firefly-rgb), .25);
  box-shadow:
    inset 0 0 32px rgba(var(--firefly-rgb), .04),
    var(--glow-firefly);
  position:relative;
  isolation:isolate;
}
.firefly-active::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:radial-gradient(
    240px circle at var(--pointer-x) var(--pointer-y),
    rgba(var(--firefly-rgb), .14) 0%,
    rgba(var(--firefly-rgb), .04) 35%,
    transparent 70%);
  pointer-events:none;
  opacity:.6;
  z-index:0;
}
.firefly-active > *{ position:relative; z-index:1; }

/* ── Monument tile ───────────────────────────────────────────
   Three states: locked / grey (issued) / glowing (activated).
   Each state communicates via shape + label, not glow alone
   (accessibility — see DESIGN_CRITIQUE_AREAS.md §15). */
.monument-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px 16px;
  background:var(--glass-deep);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  text-align:center;
  position:relative;
}
.monument-tile .monument-glyph{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:var(--bg4);
  border:1px solid var(--border2);
}
.monument-tile .monument-label{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:1.2px;
  color:var(--text2);
}
.monument-tile .monument-state{
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text3);
}
.monument-tile.is-locked{ opacity:.55; }
.monument-tile.is-issued{
  border-color:rgba(var(--muted-sand-rgb, 189, 163, 109), .45);
}
.monument-tile.is-issued .monument-glyph{
  filter:grayscale(60%);
}
.monument-tile.is-activated{
  background:var(--glass-forest);
  border-color:rgba(var(--firefly-rgb), .45);
  box-shadow:var(--glow-firefly);
}
.monument-tile.is-activated .monument-glyph{
  background:rgba(var(--firefly-rgb), .08);
  border-color:rgba(var(--firefly-rgb), .55);
  box-shadow:0 0 18px rgba(var(--firefly-rgb), .35);
}
.monument-tile.is-activated .monument-state{ color:var(--firefly-soft); }
.monument-tile.is-contributor::after{
  /* Extra ring for contributors — pure visual enhancement. */
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:1px solid rgba(var(--firefly-soft-rgb), .35);
  pointer-events:none;
}

/* ── Reduced-motion fallback for Phase 2 motion ────────────── */
@media(prefers-reduced-motion:reduce){
  .btn-glass-primary,
  .btn-glass-secondary,
  .green-glow,
  .motherland-glass,
  .motherland-glass-strong,
  .motherland-glass-banner,
  .firefly-active::after{
    transition:none !important;
  }
}

/* ── Mobile simplification ───────────────────────────────────
   On touch devices, the heavy backdrop-filter blur is expensive
   and the pointer halo never fires. Drop the blur, keep the
   color so the panels still read as glass-tinted. */
@media(hover:none){
  .motherland-glass,
  .motherland-glass-strong,
  .motherland-glass-banner{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .firefly-active::after{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 3 — GLOBAL GLASS APPLICATION
   Extends existing surface classes so dashboards, modals, footer,
   sidebars, and system states all pick up the green-glass language
   without touching any HTML/JS template. Selectors use the same
   specificity as the original rules so the cascade resolves cleanly.
═══════════════════════════════════════════════════════════════ */

/* ── Ticket card: tighten the override priority ──────────────
   .motherland-glass has the same specificity as .ticket-card.
   This rule resolves the property fight so the glass treatment
   wins for the GA card while .ticket-card.featured (higher
   specificity) keeps its gold gradient. */
.ticket-card.motherland-glass{
  background:var(--glass-deep);
  border:1px solid var(--glass-edge);
}
/* VIP keeps the gold gradient but inherits the firefly edge + glow */
.ticket-card.featured.motherland-glass{
  /* explicitly preserve the existing gold gradient */
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.08),var(--bg3));
  border:1px solid rgba(var(--firefly-rgb), .25);
  box-shadow:var(--glow-firefly-soft);
}
@media(hover:hover){
  .ticket-card.motherland-glass:hover{
    box-shadow:var(--glow-firefly);
    border-color:rgba(var(--firefly-rgb), .45);
  }
  .ticket-card.featured.motherland-glass:hover{
    border-color:rgba(var(--firefly-rgb), .55);
  }
}

/* ── Modal box — denser glass treatment ──────────────────── */
#modal-box{
  background:var(--glass-frost);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  border-color:rgba(var(--firefly-rgb), .22);
  box-shadow:
    var(--glow-firefly-soft),
    0 24px 64px rgba(var(--canopy-deep-rgb), .55);
}
#modal-overlay{
  /* Subtle green tint on the backdrop — keeps the forest-feel
     consistent during modal interactions. */
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--canopy-deep-rgb), .35) 0%,
    rgba(0, 0, 0, .85) 100%);
}
@media(hover:none){
  #modal-box{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--bg3);
  }
}

/* ── System state containers — tighten to glass ───────────── */
.motherland-state{
  background:var(--glass-forest);
  border-color:rgba(var(--firefly-rgb), .18);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
}
@media(hover:none){
  .motherland-state{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--surface-canopy);
  }
}

/* ── Footer — glass-tinted top edge ───────────────────────── */
.site-footer{
  background:linear-gradient(180deg,
    rgba(var(--canopy-deep-rgb), .15) 0%,
    var(--bg2) 30%,
    var(--bg2) 100%);
}
/* Strengthen the existing root linework at the top */
.site-footer::before{
  /* Pre-existing topographic line texture stays — keep it. */
  opacity:.12;
}

/* ── Dashboard sidebar — glass-tinted vertical strip ─────── */
.sidebar{
  background:linear-gradient(180deg,
    rgba(var(--canopy-deep-rgb), .12) 0%,
    var(--bg2) 80%);
  border-right:1px solid rgba(var(--firefly-rgb), .08);
}

/* ── Dashboard header — subtle green underglow line ───────
   Layers on top of the existing gold-fade root divider. */
.dash-header{
  position:relative;
}
.dash-header::after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--firefly-rgb), .15) 50%,
    transparent 100%);
  pointer-events:none;
}

/* ── Inputs — green focus tint to match the new CTA system ─
   Lifts the focus state from gold to a duo gold→green. Keeps
   the gold border (heritage) but adds a soft green box-shadow
   ring on focus so the new CTA + form fields feel related. */
.form-input:focus-visible,
.search-input:focus-visible,
.footer-input input:focus-visible{
  outline:none;
  border-color:rgba(var(--firefly-rgb), .55);
  box-shadow:0 0 0 3px rgba(var(--firefly-rgb), .20);
}
.otp-input:focus-visible{
  outline:none;
  border-color:rgba(var(--firefly-rgb), .65);
  box-shadow:0 0 0 3px rgba(var(--firefly-rgb), .22);
}

/* ── Nav user pill — glass tint on hover ─────────────────── */
@media(hover:hover){
  .nav-user-pill:hover{
    border-color:rgba(var(--firefly-rgb), .35);
    background:rgba(var(--canopy-deep-rgb), .25);
  }
}

/* ── Reduced-motion + mobile fallbacks ───────────────────── */
@media(prefers-reduced-motion:reduce){
  .ticket-card.motherland-glass,
  .ticket-card.featured.motherland-glass,
  #modal-box,
  .motherland-state{
    transition:none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   THE FIREFLY INITIATIVE — page-specific styles
   Used only on #/impact. All sections inherit Phase 2 glass +
   firefly tokens; this block adds layout + section-specific
   composition.
═══════════════════════════════════════════════════════════════ */

.impact-hero{
  text-align:center;
  padding:48px 32px 40px;
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
}
.impact-hero-title{
  font-family:var(--font-display);
  font-size:clamp(32px, 6vw, 56px);
  line-height:1.05;
  margin-bottom:14px;
  letter-spacing:.5px;
}
.impact-hero-tagline{
  font-family:var(--font-display);
  font-size:clamp(16px, 2.2vw, 22px);
  letter-spacing:3px;
  color:var(--firefly-soft);
  margin-bottom:16px;
  text-transform:uppercase;
}
.impact-hero-sub{
  font-size:14px;
  color:var(--text2);
  max-width:540px;
  margin:0 auto 28px;
  line-height:1.7;
}
.impact-hero-actions{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}

.impact-section{
  padding:32px 28px;
  border-radius:var(--radius-lg);
  position:relative;
}
.impact-section-label{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--firefly-soft);
  font-weight:600;
  margin-bottom:10px;
}
.impact-section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;flex-wrap:wrap;gap:8px;
}
.impact-section-title{
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 32px);
  line-height:1.15;
  margin-bottom:14px;
  letter-spacing:.5px;
}
.impact-body{
  font-size:14px;
  color:var(--text2);
  line-height:1.8;
  margin-bottom:12px;
}
.impact-foot-note{
  font-size:12px;
  color:var(--text3);
  margin-top:14px;
  font-style:italic;
  line-height:1.6;
}

/* How It Works grid */
.impact-how-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.impact-how-card{
  padding:22px 20px;
  border-radius:var(--radius);
}
.impact-how-icon{
  font-size:24px;
  margin-bottom:10px;
}
.impact-how-title{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  letter-spacing:.3px;
}
.impact-how-body{
  font-size:13px;
  color:var(--text2);
  line-height:1.7;
}

/* Live Impact Tracker */
.impact-tracker{
  padding:40px 32px;
  border-radius:var(--radius-lg);
}
.impact-tracker-headline{
  text-align:center;
  margin:8px 0 28px;
}
.impact-tracker-figure{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-display);
  letter-spacing:1px;
}
.impact-mtx-mark{
  font-size:clamp(28px, 5vw, 48px);
  color:var(--firefly-soft);
  filter:drop-shadow(0 0 12px rgba(var(--firefly-rgb), .45));
}
.impact-mtx-amount{
  font-size:clamp(48px, 9vw, 88px);
  color:var(--text);
  line-height:.95;
}
.impact-mtx-unit{
  font-size:clamp(18px, 2.4vw, 24px);
  color:var(--firefly-soft);
  letter-spacing:3px;
}
.impact-tracker-meta{
  margin-top:10px;
  font-size:13px;
  color:var(--text2);
  display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.impact-tracker-dot{ color:var(--text3); }

.impact-tracker-rows{
  display:flex;flex-direction:column;gap:10px;
  margin-top:12px;
}
.impact-track-row{
  display:grid;
  grid-template-columns:minmax(160px, 200px) 1fr minmax(120px, 140px);
  gap:14px;
  align-items:center;
}
.impact-track-label{
  font-size:12px;
  color:var(--text2);
}
.impact-track-bar{
  height:6px;
  background:rgba(var(--firefly-rgb), .06);
  border-radius:3px;
  overflow:hidden;
}
.impact-track-fill{
  height:100%;
  border-radius:3px;
  transition:width .6s cubic-bezier(.2,.6,.3,1);
}
.impact-track-fill--firefly{
  background:linear-gradient(90deg, var(--firefly-glow), var(--firefly-soft));
}
.impact-track-fill--gold{
  background:linear-gradient(90deg, var(--ancestral-gold), var(--burnished-bronze));
}
.impact-track-value{
  font-family:var(--font-mono);
  font-size:12px;
  text-align:right;
  color:var(--firefly-soft);
}
.impact-tracker-note{
  margin-top:18px;
  font-size:11px;
  color:var(--text3);
  text-align:center;
  letter-spacing:.5px;
}

@media(max-width:600px){
  .impact-track-row{ grid-template-columns:1fr; gap:4px }
  .impact-track-value{ text-align:left }
}

/* Milestones */
.impact-milestones{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}
.impact-milestone{
  padding:20px;
  border-radius:var(--radius);
  position:relative;
}
.impact-milestone.is-reached{
  border-color:rgba(var(--firefly-rgb), .35);
  box-shadow:var(--glow-firefly-soft);
}
.impact-milestone-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;flex-wrap:wrap;margin-bottom:8px;
}
.impact-milestone-title{
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:.5px;
}
.impact-milestone-check{
  display:inline-block;
  margin-left:6px;
  width:20px;height:20px;
  border-radius:50%;
  background:rgba(var(--firefly-rgb), .15);
  color:var(--firefly-soft);
  font-size:11px;
  line-height:20px;
  text-align:center;
  vertical-align:middle;
}
.impact-milestone-target{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text3);
}
.impact-milestone-body{
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
  margin-bottom:14px;
}
.impact-milestone-bar{
  height:5px;
  background:rgba(var(--firefly-rgb), .05);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:8px;
}
.impact-milestone-fill{
  height:100%;
  background:linear-gradient(90deg, var(--firefly-glow), var(--firefly-soft));
  border-radius:3px;
}
.impact-milestone-state{
  font-size:11px;
  color:var(--text3);
  letter-spacing:.5px;
}

/* Activity feed */
.impact-feed{ display:flex;flex-direction:column;gap:8px }
.impact-feed-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.impact-feed-row:last-child{ border-bottom:none }
.impact-feed-dot{
  width:10px;height:10px;
  border-radius:50%;
  background:radial-gradient(circle, var(--firefly-soft), transparent 70%);
  flex-shrink:0;
  filter:drop-shadow(0 0 4px rgba(var(--firefly-rgb), .55));
}
.impact-feed-body{ flex:1;min-width:0 }
.impact-feed-source{
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.impact-feed-time{
  font-size:11px;
  color:var(--text3);
  margin-top:2px;
  font-family:var(--font-mono);
}
.impact-feed-amount{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--firefly-soft);
  font-weight:600;
  flex-shrink:0;
}

/* Monuments — re-uses .monument-tile from Phase 2 */
.impact-monument-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
}
.impact-monument-desc{
  font-size:12px;
  color:var(--text2);
  line-height:1.6;
  margin-top:10px;
}

/* Firefly Grove */
.impact-grove-features{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.impact-grove-pill{
  display:inline-flex;
  padding:8px 14px;
  background:rgba(var(--firefly-rgb), .06);
  border:1px solid rgba(var(--firefly-rgb), .2);
  border-radius:var(--radius-full);
  font-size:12px;
  color:var(--text);
  letter-spacing:.3px;
}

/* Transparency */
.impact-transparency-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.impact-trans-card{
  padding:18px;
  border-radius:var(--radius);
  background:rgba(var(--firefly-rgb), .03);
  border:1px solid rgba(var(--firefly-rgb), .12);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.impact-trans-title{
  font-size:14px;font-weight:600;letter-spacing:.3px;
}
.impact-trans-body{
  font-size:13px;color:var(--text2);line-height:1.6;flex:1;
}
.impact-trans-btn{
  align-self:flex-start;
  padding:8px 14px;
  font-size:12px;
}
.impact-trans-btn:disabled{ opacity:.55;cursor:not-allowed }

/* Update entries */
.impact-update{
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.impact-update:last-child{ border-bottom:none }
.impact-update-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  margin-bottom:4px;
}
.impact-update-body{
  font-size:12px;
  color:var(--text2);
  line-height:1.6;
  margin-bottom:6px;
}
.impact-update-meta{
  font-size:11px;
  color:var(--text3);
  font-family:var(--font-mono);
  letter-spacing:.3px;
}

/* Final CTA */
.impact-final-cta{
  border-radius:var(--radius-lg);
}

/* Preset buttons inside contribute modal — small variant */
.impact-preset-btn{
  padding:8px 14px;
  font-size:13px;
  border-radius:var(--radius);
}
.impact-preset-btn.motherland-glow-active{
  border-color:rgba(var(--firefly-rgb), .65);
  box-shadow:var(--glow-firefly);
  color:var(--firefly-soft);
}

/* ── Map page · Firefly Grove zone-list treatment ──────────── */
.zone-list-item--firefly{
  background:rgba(var(--firefly-rgb), .04);
  border:1px solid rgba(var(--firefly-rgb), .20);
  box-shadow:var(--glow-firefly-soft);
}
.zone-list-tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  background:rgba(var(--firefly-rgb), .12);
  border:1px solid rgba(var(--firefly-rgb), .3);
  border-radius:var(--radius-full);
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--firefly-soft);
  font-family:var(--font-body);
  font-weight:600;
  vertical-align:middle;
}
.zone-list-extra{
  font-size:12px;
  color:var(--firefly-soft);
  margin-top:6px;
  line-height:1.5;
  font-style:italic;
}
.zone-list-extra--locked{
  color:var(--text3);
  font-style:normal;
}
.zone-list-extra--locked::before{
  content:'';
  margin-right:2px;
}
.zone-list-cta{
  margin-top:10px;
  padding:6px 12px;
  font-size:11px;
  letter-spacing:.3px;
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE CAPTIVATION PASS
   Hero depth, CTA hierarchy, experience pill, section moods,
   Firefly teaser, scroll invite.
   PERFORMANCE: all GPU-only (opacity + transform). No JS loops.
═══════════════════════════════════════════════════════════════ */

/* Extra hero glow layers (behind text, in front of grid) */
.hero-glow-a,
.hero-glow-b{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(40px);
  z-index:0;
}
.hero-glow-a{
  inset:auto auto 5% 10%;
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(var(--firefly-rgb),.10) 0%, transparent 70%);
}
.hero-glow-b{
  inset:8% 8% auto auto;
  width:380px;height:380px;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.10) 0%, transparent 70%);
}
@media(prefers-reduced-motion:reduce){
  .hero-glow-a,.hero-glow-b{ filter:none; opacity:.35 }
}
@media(hover:none){
  .hero-glow-a,.hero-glow-b{ filter:blur(24px) }
}

/* ── Hero motion (Mega Pass D) ───────────────────────────────
   Brand-safe, GPU-only (transform/opacity), fully inert layers:
   every animated element is aria-hidden + pointer-events:none and
   lives at z-index:0 INSIDE the hero's overflow:hidden box, so
   nothing can ever cover or block the nav / mobile menu. Gold +
   firefly-green brand palette only. */

/* 1. Glow breathing — slow, alternating scale/opacity. */
.hero-glow-a{animation:hero-glow-breathe 16s ease-in-out infinite alternate}
.hero-glow-b{animation:hero-glow-breathe 13s ease-in-out 2s infinite alternate}
@keyframes hero-glow-breathe{
  from{opacity:.75;transform:scale(1)}
  to{opacity:1;transform:scale(1.12)}
}

/* 2. Ember/firefly drift — a handful of CSS-only particles rising
   through the hero on long offsets. */
.hero-fireflies{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-fireflies span{
  position:absolute;bottom:-4%;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.9) 0%, rgba(var(--gold-rgb),.25) 55%, transparent 75%);
  opacity:0;
  animation:hero-ember-rise 16s linear infinite;
}
.hero-fireflies span:nth-child(2n){
  background:radial-gradient(circle, rgba(var(--firefly-rgb),.8) 0%, rgba(var(--firefly-rgb),.2) 55%, transparent 75%);
}
.hero-fireflies span:nth-child(1){left:12%;animation-duration:18s;animation-delay:0s}
.hero-fireflies span:nth-child(2){left:28%;animation-duration:22s;animation-delay:5s;width:4px;height:4px}
.hero-fireflies span:nth-child(3){left:52%;animation-duration:17s;animation-delay:9s}
.hero-fireflies span:nth-child(4){left:71%;animation-duration:24s;animation-delay:3s;width:4px;height:4px}
.hero-fireflies span:nth-child(5){left:86%;animation-duration:20s;animation-delay:12s}
@keyframes hero-ember-rise{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.8)}
  8%{opacity:.85}
  55%{opacity:.5;transform:translateY(-52vh) translateX(14px) scale(1)}
  100%{opacity:0;transform:translateY(-96vh) translateX(-10px) scale(.6)}
}

/* 3. One-shot entrance — badge → title → tagline → actions rise in. */
.hero-badge,.hero-title,.hero-tagline,.hero-sub,.hero-experience-pill,.hero-date,.hero-actions,.hero-actions-tertiary,.hero-stats{
  animation:perf-rise .5s cubic-bezier(.2,.6,.3,1) both;
}
.hero-title{animation-delay:.06s}
.hero-tagline{animation-delay:.12s}
.hero-sub{animation-delay:.18s}
.hero-experience-pill{animation-delay:.24s}
.hero-date{animation-delay:.3s}
.hero-actions{animation-delay:.36s}
.hero-actions-tertiary{animation-delay:.42s}
.hero-stats{animation-delay:.48s}

/* Guards: motion off under reduced-motion; particles off on touch (GPU +
   battery), matching the cursor-trail policy. */
@media(prefers-reduced-motion:reduce){
  .hero-glow-a,.hero-glow-b{animation:none}
  .hero-fireflies{display:none}
  .hero-badge,.hero-title,.hero-tagline,.hero-sub,.hero-experience-pill,.hero-date,.hero-actions,.hero-actions-tertiary,.hero-stats{animation:none}
}
@media(hover:none){
  .hero-fireflies span{animation-duration:26s}
  .hero-fireflies span:nth-child(4),.hero-fireflies span:nth-child(5){display:none}
}

/* Hero mobile layout (Mega Pass D): full-width stacked CTAs and a 2×2
   stat grid so nothing overflows at narrow widths. */
@media(max-width:480px){
  .hero-actions{flex-direction:column;width:100%;max-width:340px}
  .hero-actions .btn-glass-primary,.hero-actions .btn-glass-secondary{width:100%}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;width:100%;max-width:340px}
  .hero-experience-pill{max-width:100%}
}

/* Slightly stronger emblem (was .08) */
.hero-emblem{ opacity:1 }

/* Hero experience summary pill */
.hero-experience-pill{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:12px;
  margin:18px auto 8px;
  padding:12px 22px;
  max-width:640px;
  background:rgba(var(--canopy-deep-rgb), .55);
  border:1px solid rgba(var(--firefly-rgb), .22);
  border-radius:var(--radius-full);
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  text-align:left;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--glow-firefly-soft);
}
.hero-experience-mark{
  flex-shrink:0;
  font-size:14px;
  color:var(--firefly-soft);
  filter:drop-shadow(0 0 6px rgba(var(--firefly-rgb), .55));
}
.hero-experience-text strong{
  color:var(--firefly-soft);
  font-weight:600;
}
@media(hover:none){
  .hero-experience-pill{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(var(--canopy-deep-rgb), .75);
  }
}

/* CTA hierarchy on the hero — primary larger + stronger glow */
.btn-hero-primary{
  padding:16px 36px;
  font-size:15px;
  letter-spacing:.7px;
  box-shadow:
    inset 0 1px 0 rgba(var(--firefly-soft-rgb), .25),
    var(--glow-firefly),
    0 6px 24px rgba(var(--canopy-deep-rgb), .45);
}
@media(hover:hover){
  .btn-hero-primary:hover:not(:disabled){
    box-shadow:
      inset 0 1px 0 rgba(var(--firefly-soft-rgb), .35),
      var(--glow-firefly-strong),
      0 8px 32px rgba(var(--canopy-deep-rgb), .55);
  }
}
.btn-hero-secondary{
  padding:14px 28px;
  font-size:14px;
  letter-spacing:.5px;
}

/* Tertiary text-link row */
.hero-actions-tertiary{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px;margin-top:14px;
  font-size:12px;
}
.hero-link{
  background:none;border:none;
  color:var(--text2);
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.4px;
  padding:6px 10px;
  cursor:pointer;
  transition:color .2s;
  border-radius:6px;
}
@media(hover:hover){
  .hero-link:hover{ color:var(--firefly-soft) }
}
.hero-link:focus-visible{
  outline:none;
  color:var(--firefly-soft);
  box-shadow:0 0 0 2px rgba(var(--firefly-rgb), .35);
}
.hero-link--firefly{ color:var(--firefly-soft) }
.hero-link-dot{ color:var(--text3); user-select:none }

/* Scroll invite */
.hero-scroll-invite{
  position:relative;z-index:1;
  margin-top:36px;
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  color:var(--text3);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--font-body);
  transition:color .2s;
}
.hero-scroll-arrow{
  font-size:18px;
  color:var(--firefly-soft);
  animation:scrollBounce 2.4s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%, 100% { transform:translateY(0); opacity:.7 }
  50%      { transform:translateY(6px); opacity:1 }
}
@media(prefers-reduced-motion:reduce){
  .hero-scroll-arrow{ animation:none }
}
@media(hover:hover){
  .hero-scroll-invite:hover{ color:var(--text2) }
}

/* ── Section moods — controlled gradient overlays ──────────── */

.section--experience{
  position:relative;
}
.section--experience::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(800px ellipse at 100% 0%,
    rgba(var(--bronze-rgb), .06) 0%,
    transparent 60%);
  pointer-events:none;
  z-index:-1;
}

.section--firefly{
  position:relative;
  padding:48px 24px;
  max-width:1100px;
  margin:0 auto;
}

.section--tickets{
  position:relative;
}
.section--tickets::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px ellipse at 0% 50%,
      rgba(var(--gold-rgb), .05) 0%,
      transparent 60%),
    radial-gradient(600px ellipse at 100% 50%,
      rgba(var(--firefly-rgb), .04) 0%,
      transparent 60%);
  pointer-events:none;
  z-index:0;
}
.section--tickets > *{ position:relative; z-index:1 }

/* ── Firefly Initiative homepage teaser ────────────────────── */
.firefly-teaser{
  display:flex;align-items:center;gap:24px;
  padding:32px;
  border-radius:var(--radius-lg);
}
.firefly-teaser-emblem{
  flex-shrink:0;
  width:72px;height:72px;
  border-radius:50%;
  background:rgba(var(--firefly-rgb), .08);
  border:1px solid rgba(var(--firefly-rgb), .35);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  color:var(--firefly-soft);
  filter:drop-shadow(0 0 14px rgba(var(--firefly-rgb), .35));
}
.firefly-teaser-body{ flex:1;min-width:0 }
.firefly-teaser-eyebrow{
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--firefly-soft);font-weight:600;
  margin-bottom:6px;
}
.firefly-teaser-title{
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 30px);
  line-height:1.15;letter-spacing:.5px;
  margin-bottom:8px;
}
.firefly-teaser-copy{
  font-size:13px;color:var(--text2);line-height:1.7;
  margin-bottom:14px;max-width:560px;
}
.firefly-teaser-actions{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
.firefly-teaser-cta{
  padding:10px 22px;font-size:13px;
}
@media(max-width:640px){
  .firefly-teaser{ flex-direction:column;text-align:center }
  .firefly-teaser-copy{ margin-left:auto;margin-right:auto }
  .firefly-teaser-actions{ justify-content:center }
}

/* ════════════════════════════════════════════════════════════
   LINEUP COLOR-CATEGORY SYSTEM
   .vibe-{gold|moss|amber|copper|plum|teal|sand} drives:
   - card halo color
   - avatar background gradient
   - genre / time text tone
   Defined via CSS custom-property triplets so a single rule
   composes the whole card without per-vibe duplication.
═══════════════════════════════════════════════════════════════ */

.vibe-gold   { --vibe-rgb: 201, 169, 97;  --vibe-deep-rgb: 139, 111, 63 }
.vibe-moss   { --vibe-rgb: 142, 191, 111; --vibe-deep-rgb: 45,  74,  43 }
.vibe-amber  { --vibe-rgb: 212, 168, 71;  --vibe-deep-rgb: 138, 103, 56 }
.vibe-copper { --vibe-rgb: 196, 110, 81;  --vibe-deep-rgb: 110, 60,  40 }
.vibe-plum   { --vibe-rgb: 162, 122, 142; --vibe-deep-rgb: 88,  60,  78 }
.vibe-teal   { --vibe-rgb: 96,  192, 168; --vibe-deep-rgb: 35,  90,  78 }
.vibe-sand   { --vibe-rgb: 189, 163, 109; --vibe-deep-rgb: 110, 92,  60 }

/* Lineup helper hint */
.lineup-helper-hint{
  font-size:12px;color:var(--text3);line-height:1.6;
  max-width:540px;margin-bottom:18px;
  letter-spacing:.2px;
  font-style:italic;
}

/* Featured artist card */
.lineup-featured{
  background:linear-gradient(135deg,
    rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .18),
    var(--bg3) 60%,
    var(--bg4));
  border:1px solid rgba(var(--vibe-rgb, var(--gold-rgb)), .25);
  border-radius:20px;
  padding:40px;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 12px 48px rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .15),
    inset 0 0 0 1px rgba(var(--vibe-rgb, var(--gold-rgb)), .08);
  transition:border-color .35s, box-shadow .35s;
}
.lineup-featured-aura{
  position:absolute;
  top:-80px;right:-80px;
  width:380px;height:380px;
  background:radial-gradient(circle,
    rgba(var(--vibe-rgb, var(--gold-rgb)), .18) 0%,
    transparent 65%);
  border-radius:50%;
  pointer-events:none;
  transition:background .35s;
}
.lineup-featured-avatar{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,
    rgba(var(--vibe-rgb, var(--gold-rgb)), .9),
    rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .9));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:28px;
  color:#fff;flex-shrink:0;
  box-shadow:0 0 18px rgba(var(--vibe-rgb, var(--gold-rgb)), .25);
}

/* Featured-card text follows the vibe too */
.lineup-featured #lineup-artist-genre{
  color:rgb(var(--vibe-rgb, var(--gold-rgb))) !important;
}

/* Artist grid cards — vibe accents */
.artist-grid-card{
  background:linear-gradient(180deg,
    rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .08),
    var(--bg3));
  border:1px solid rgba(var(--vibe-rgb, var(--gold-rgb)), .15);
  border-radius:14px;
  padding:16px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.artist-grid-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.artist-grid-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,
    rgba(var(--vibe-rgb, var(--gold-rgb)), 1),
    rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), 1));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
  box-shadow:0 0 10px rgba(var(--vibe-rgb, var(--gold-rgb)), .25);
}
.artist-grid-headliner{
  background:rgba(var(--gold-rgb), .15) !important;
  color:var(--ancestral-gold) !important;
  border:1px solid rgba(var(--gold-rgb), .3) !important;
  font-size:9px;
}
.artist-grid-name{
  font-weight:600;font-size:14px;
  margin-bottom:2px;
  padding-right:20px;
}
.artist-grid-genre{
  font-size:11px;
  color:rgb(var(--vibe-rgb, var(--gold-rgb)));
  margin-bottom:4px;
  letter-spacing:.2px;
}
.artist-grid-meta{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text3);
  margin-bottom:28px;
}
@media(hover:hover){
  .artist-grid-card:hover{
    transform:translateY(-2px);
    border-color:rgba(var(--vibe-rgb, var(--gold-rgb)), .45);
    box-shadow:
      0 14px 36px rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .2),
      0 0 22px rgba(var(--vibe-rgb, var(--gold-rgb)), .12);
  }
}

/* Favorite button — more noticeable */
.artist-fav-btn{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0, 0, 0, .35);
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:14px;
  transition:transform .2s, background .2s, border-color .2s;
  z-index:2;
}
@media(hover:hover){
  .artist-fav-btn:hover{
    transform:scale(1.08);
    background:rgba(0, 0, 0, .55);
    border-color:rgba(var(--vibe-rgb, var(--gold-rgb)), .55);
  }
}
.artist-fav-btn.active{
  background:rgba(var(--vibe-rgb, var(--gold-rgb)), .15);
  border-color:rgba(var(--vibe-rgb, var(--gold-rgb)), .55);
}

/* Preview button — clearer chip with vibe accent */
.artist-preview-btn{
  position:absolute;bottom:12px;right:12px;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;
  background:rgba(var(--vibe-rgb, var(--gold-rgb)), .14);
  border:1px solid rgba(var(--vibe-rgb, var(--gold-rgb)), .35);
  border-radius:var(--radius-full);
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgb(var(--vibe-rgb, var(--gold-rgb)));
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
}
@media(hover:hover){
  .artist-preview-btn:hover{
    background:rgba(var(--vibe-rgb, var(--gold-rgb)), .25);
    border-color:rgba(var(--vibe-rgb, var(--gold-rgb)), .55);
  }
}
.artist-preview-btn:active{ transform:scale(.96) }

/* ── Short desktop / landscape viewport tuning ───────────────
   On wide-but-short viewports (e.g. 1280×720) the elegant serif
   hero is tall enough to clip the CTAs and push the support
   links below the fold. Only here — min-width 900px AND max-height
   760px — trim the title cap, hero padding, and a few vertical
   gaps so title, tagline, pill, date, both CTAs, and the support
   links all fit. 1440×900 (height > 760) and mobile (width < 900)
   are unaffected. No copy or structure changes. */
@media (min-width:900px) and (max-height:760px){
  .hero{padding-top:clamp(18px,3vh,30px);padding-bottom:clamp(28px,4vh,40px)}
  .hero-emblem{width:clamp(54px,7.5vh,82px);margin-bottom:clamp(8px,1.4vh,14px)}
  .hero-title{font-size:clamp(52px,8.6vw,96px);line-height:.95}
  .hero-sub{margin-top:14px}
  .hero-experience-pill{margin-top:12px;margin-bottom:6px}
  .hero-date{margin-top:10px}
  .hero-actions{margin-top:24px}
  .hero-actions-tertiary{margin-top:10px}
  .hero-stats{margin-top:22px}
  .hero-scroll-invite{margin-top:18px}
}

/* ════════════════════════════════════════════════════════════
   ADMIN COMMAND CENTER POLISH v1
   Refines the dashboard primitives (metric cards, tables, cards,
   sidebar) for a calmer, denser, operational feel on top of the
   existing brand-depth captivation pass. CSS-only; no markup
   changes; shared dashboard primitives so every role dashboard
   inherits the same restraint.
═══════════════════════════════════════════════════════════════ */

/* — Metric cards: tighter rhythm, tabular numerics, gold top edge — */
.metric-card{padding:20px 22px}
.metric-card::before{
  content:'';
  position:absolute;
  top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb),.18) 30%,
    rgba(var(--gold-rgb),.32) 50%,
    rgba(var(--gold-rgb),.18) 70%,
    transparent 100%);
  pointer-events:none;
  z-index:0;
  opacity:.7;
}
.metric-label{margin-bottom:10px;letter-spacing:1.5px}
.metric-value{font-variant-numeric:tabular-nums;letter-spacing:.5px}
.metric-change{font-family:var(--font-mono);font-size:11px;letter-spacing:.3px;font-weight:600}

/* — Dashboard tables: calmer header, subtle zebra, tabular nums — */
.table th{font-size:10.5px;letter-spacing:1.5px;padding-bottom:14px;color:var(--text3)}
.table td{padding:14px 12px;font-variant-numeric:tabular-nums}
.table tr:nth-child(even) td{background:rgba(255,255,255,.012)}
.table tr:hover td{background:rgba(var(--gold-rgb),.04)}

/* — Cards inside dashboards: subtle interactive lift — */
.dash-content .card{transition:border-color .25s,box-shadow .25s}
@media(hover:hover){
  .dash-content .card:hover{
    border-color:rgba(var(--gold-rgb),.18);
    box-shadow:0 6px 20px rgba(0,0,0,.22);
  }
}

/* — Card titles in dashboard surfaces: stronger leading — */
.dash-content .card-title{font-size:14.5px;letter-spacing:.4px}

/* — Sidebar active item: stronger gold left accent — */
.sidebar-item.active{border-left-width:3px;background:rgba(var(--gold-rgb),.10)}

/* — Dashboard subtitle: slightly quieter, more breathing — */
.dash-subtitle{font-size:13.5px;color:var(--text2);font-weight:400;letter-spacing:.2px}

/* — Reduced-motion respect for new transitions — */
@media(prefers-reduced-motion:reduce){
  .dash-content .card{transition:none}
}

/* ════════════════════════════════════════════════════════════
   TICKET FLOW POLISH v1
   Premium festival-ticketing feel layered on the existing glass +
   brand-depth pass. CSS-only; no markup changes. Demo-safe payment-
   preview behaviour and ticket business rules unchanged. Avoids
   pseudos already used by .root-edge-light (::after) and the
   featured "MOST POPULAR" ribbon (::before).
═══════════════════════════════════════════════════════════════ */

/* — Mobile ticket-grid stacking fix:
   .ticket-section is a flex column container; its inner wrapper
   defaults to min-width:auto (flex-item default) and was sizing
   itself to grid content = 2*280+gap, pushing the second card
   off-screen at 375. Setting min-width:0 lets the wrapper shrink
   to the flex container's cross-axis. The grid width:100% then
   lets auto-fit minmax(280,1fr) collapse to a single column on
   narrow widths. Desktop wrapper is still capped by its inline
   max-width:1100 and the grid by its own max-width:800. — */
.ticket-section > div{min-width:0;width:100%}
.ticket-grid{width:100%}

/* — Ticket cards: deeper interior, refined feature dividers — */
.ticket-card{padding:32px 30px}
.ticket-card .ticket-features li{border-bottom-color:rgba(var(--gold-rgb),.10)}
.ticket-card .ticket-features li:last-child{border-bottom:none;padding-bottom:0}

/* — Premium price typography — */
.ticket-price{font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* — Flow step indicator: stronger active state — */
.step-dot.active{box-shadow:0 0 0 4px rgba(var(--gold-rgb),.16)}
.step-lbl.active{font-weight:600;letter-spacing:.6px}

/* — Form card: gold "command-panel" top edge — */
.form-card{position:relative}
.form-card::before{
  content:'';
  position:absolute;
  top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb),.18) 30%,
    rgba(var(--gold-rgb),.32) 50%,
    rgba(var(--gold-rgb),.18) 70%,
    transparent 100%);
  pointer-events:none;
  opacity:.7;
}

/* — Form inputs: subtle gold focus ring — */
.form-input{transition:border-color .2s,box-shadow .2s}
.form-input:focus,.form-input:focus-visible{
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.14);
  border-color:var(--acc);
}

/* — Selected-ticket summary pill: slightly more breathing + tabular — */
.selected-ticket{padding:18px 20px}
.selected-ticket-price{font-variant-numeric:tabular-nums}

/* — Success card: living forest/gold ring after demo-payment preview — */
.success-card{
  box-shadow:0 0 0 1px rgba(var(--success-rgb),.18),
             0 12px 36px rgba(0,0,0,.28);
}
.success-icon{box-shadow:0 0 0 4px rgba(var(--success-rgb),.10)}

/* — Reduced-motion — */
@media(prefers-reduced-motion:reduce){
  .form-input,.step-dot{transition:none}
}

/* ════════════════════════════════════════════════════════════
   UI PERCEIVED PERFORMANCE LAYER v1
   Skeletons, staged route progress, content reveal, optimistic
   preview chips. Builds on the existing .skeleton primitives and
   #page-loading-bar. All motion respects prefers-reduced-motion.
   No layout shift, no emoji, demo/preview-safe.
═══════════════════════════════════════════════════════════════ */

/* — Skeleton groups + variant blocks (match card geometry) — */
.skeleton-group{display:flex;flex-direction:column;gap:14px}
.skeleton-group--metric,.skeleton-group--ticket,.skeleton-group--lineup{display:grid;gap:14px}
.skeleton-group--metric{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.skeleton-group--ticket{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.skeleton-group--lineup{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.skeleton-block{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px}
.skeleton-metric-block{min-height:96px}
.skeleton-wallet{min-height:150px;background:linear-gradient(135deg,#15110C,#241A0F);border-color:rgba(var(--gold-rgb),.18)}
.skeleton-ticket{min-height:220px}
.skeleton-pos{min-height:140px}
.skeleton-lineup{padding:14px}
.skeleton-logrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.skeleton-logrow:last-child{border-bottom:none}
/* Skeletons inside the gold wallet block read against a darker base */
.skeleton-wallet .skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%}

/* — Staged route progress label (paired with #page-loading-bar) — */
.perf-progress{position:fixed;top:8px;left:50%;transform:translateX(-50%) translateY(-6px);z-index:9998;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.6px;color:var(--text3);
  background:rgba(8,8,8,.7);border:1px solid var(--border);border-radius:var(--radius-full);
  padding:4px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.perf-progress.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.perf-progress{font-size:10px;padding:3px 12px;max-width:86vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* — Page content reveal (smooth materialise, no blank snap) — */
.perf-reveal{animation:perf-rise .26s cubic-bezier(.2,.6,.3,1) both}
@keyframes perf-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* — Optimistic preview-only states — */
.optimistic-pending{position:relative;opacity:.72;transition:opacity .2s ease}
.optimistic-pending::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.6),transparent);
  background-size:200% 100%;animation:perf-scan 1s linear infinite}
.optimistic-done{animation:perf-confirm .5s ease}
@keyframes perf-scan{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes perf-confirm{0%{color:var(--success)}100%{color:inherit}}

/* — Preview chip: tiny additive acknowledgement near an anchor — */
.preview-chip{display:inline-flex;align-items:center;gap:6px;margin-left:10px;
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.3px;
  color:var(--success);background:rgba(var(--success-rgb),.12);
  border:1px solid rgba(var(--success-rgb),.3);border-radius:var(--radius-full);
  padding:2px 10px;vertical-align:middle;animation:perf-rise .2s ease both}
.preview-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0}
.preview-chip--out{opacity:0;transition:opacity .28s ease}

@media(prefers-reduced-motion:reduce){
  .perf-reveal{animation:none}
  .optimistic-pending::after{animation:none;background:rgba(var(--gold-rgb),.4)}
  .optimistic-done{animation:none}
  .preview-chip{animation:none}
  .perf-progress{transition:opacity .2s ease}
}

/* ════════════════════════════════════════════════════════════
   UI MOBILE + PERCEIVED PERFORMANCE COMPLETION v1
   Static frontend-only polish: compact Firefly access, artist
   image cards, mobile overflow containment, expanded skeletons.
═══════════════════════════════════════════════════════════════ */

/* — Homepage emblem hierarchy: bigger, still in-flow — */
.hero-emblem{
  width:clamp(118px,16vw,218px);
  max-width:min(48vw,218px);
  margin-bottom:clamp(18px,3vh,32px);
  filter:drop-shadow(0 0 18px rgba(var(--gold-rgb),.22));
}
@media(max-width:640px){
  .hero-emblem{width:clamp(104px,34vw,150px);max-width:46vw;margin-bottom:18px}
}
@media (min-width:900px) and (max-height:760px){
  .hero-emblem{width:clamp(70px,9.5vh,104px);margin-bottom:clamp(10px,1.6vh,16px)}
}

/* — Artist photo-card pattern — */
.artist-photo-card{
  display:flex;
  flex-direction:column;
  min-height:280px;
  padding:0;
  border-radius:16px;
  overflow:hidden;
}
.artist-photo-wrap{
  position:relative;
  aspect-ratio:1/1;
  min-height:160px;
  overflow:hidden;
  background:linear-gradient(135deg,
    rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .88),
    rgba(var(--vibe-rgb, var(--gold-rgb)), .72));
}
.artist-photo{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(135deg,
      rgba(var(--vibe-rgb, var(--gold-rgb)), .95),
      rgba(var(--vibe-deep-rgb, var(--bronze-rgb)), .96));
}
.artist-photo span{
  font-family:var(--font-display);
  font-size:clamp(40px,9vw,64px);
  letter-spacing:2px;
  color:rgba(255,255,255,.88);
  text-shadow:0 10px 28px rgba(0,0,0,.35);
}
.artist-photo-gradient{
  position:absolute;inset:auto 0 0;height:44%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  pointer-events:none;
}
.artist-headliner-stripe{
  position:absolute;left:12px;bottom:12px;
  padding:5px 10px;border-radius:var(--radius-full);
  background:rgba(var(--gold-rgb),.88);
  color:var(--on-acc);
  font-size:9px;font-weight:800;letter-spacing:1.3px;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.artist-photo-card .artist-fav-btn{
  top:12px;right:12px;
  width:36px;height:36px;
  background:rgba(0,0,0,.46);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.artist-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:5px;
  padding:16px;
  min-width:0;
}
.artist-photo-card .artist-grid-name{
  padding-right:0;
  margin-bottom:0;
  overflow-wrap:anywhere;
}
.artist-photo-card .artist-grid-meta{margin-bottom:12px}
.artist-photo-card .artist-preview-btn{
  position:static;
  width:max-content;
  max-width:100%;
  margin-top:auto;
  white-space:normal;
  text-align:center;
}
@media(max-width:520px){
  .artist-photo-card{min-height:0}
  .artist-photo-wrap{min-height:142px}
  .artist-card-body{padding:14px}
  .artist-photo-card .artist-fav-btn{width:40px;height:40px}
}

/* — Compact Firefly access + respectful prompt — */
.firefly-access-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  background:linear-gradient(135deg,rgba(var(--firefly-rgb),.045),var(--bg3));
  border-color:rgba(var(--firefly-rgb),.18);
}
.firefly-access-mark{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--firefly-soft);
  background:rgba(var(--firefly-rgb),.08);
  border:1px solid rgba(var(--firefly-rgb),.25);
  box-shadow:var(--glow-firefly-soft);
  flex-shrink:0;
}
.firefly-access-body{min-width:0}
.firefly-access-kicker{
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--firefly-soft);font-weight:700;margin-bottom:3px;
}
.firefly-access-title{font-weight:700;font-size:14px;margin-bottom:3px}
.firefly-access-body p{margin:0;color:var(--text2);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.firefly-access-side{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.firefly-access-total{font-family:var(--font-mono);font-size:12px;color:var(--firefly-soft);white-space:nowrap}
.firefly-prompt{
  position:fixed;right:18px;bottom:18px;z-index:8900;
  width:min(360px,calc(100vw - 32px));
  padding:18px;
  background:linear-gradient(135deg,rgba(12,18,12,.96),rgba(18,16,12,.96));
  border:1px solid rgba(var(--firefly-rgb),.25);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.42),var(--glow-firefly-soft);
  opacity:0;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease;
  /* Mega Pass D mobile-menu fix: while hidden (opacity 0, pre-.show and
     during dismissal) this fixed, near-full-width layer must NEVER
     intercept taps meant for content beneath it — that invisible box was
     exactly the "layer above the mobile menu" bug. Interactive only when
     visibly shown. */
  pointer-events:none;
}
.firefly-prompt.show{opacity:1;transform:none;pointer-events:auto}
.firefly-prompt-close{
  position:absolute;top:9px;right:10px;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border2);background:rgba(255,255,255,.04);
  color:var(--text2);cursor:pointer;font-size:18px;line-height:1;
}
.firefly-prompt-close:focus-visible{outline:2px solid var(--firefly-soft);outline-offset:2px}
.firefly-prompt-title{
  padding-right:32px;
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:1px;
  color:var(--text);
}
.firefly-prompt p{margin:8px 0 14px;color:var(--text2);font-size:13px;line-height:1.55}
.firefly-prompt-actions{display:flex;gap:8px;flex-wrap:wrap}
.firefly-prompt-actions button{flex:1;min-width:120px}

/* — Mobile leak cleanup across dashboard/card/table surfaces — */
.dash-main,.dash-content,.card,.wallet-card,.metric-card,.tx-row,.schedule-row,.table{max-width:100%}
.dash-main,.dash-content,.card,.wallet-card,.metric-card,.tx-info,.schedule-event{min-width:0}
.card-title,.dash-title,.dash-subtitle,.metric-label,.metric-value,.tx-vendor,.tx-time,.schedule-event-title,.schedule-event-loc{
  overflow-wrap:anywhere;
}
.card-badge,.gnx-badge{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
}
@media(max-width:768px){
  .dash-main{overflow-x:hidden}
  .dash-header,.dash-content{padding-left:16px;padding-right:16px}
  .dash-header > div{min-width:0}
  .card,.wallet-card,.metric-card{padding:18px}
  .card-header{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .metrics-grid{grid-template-columns:1fr}
  #att-rewards-wristband-row{grid-template-columns:1fr!important}
  .firefly-access-card{grid-template-columns:auto minmax(0,1fr)}
  .firefly-access-side{grid-column:1/-1;justify-content:flex-start}
  .firefly-prompt{bottom:calc(86px + env(safe-area-inset-bottom))}
  .tx-row{align-items:flex-start;flex-wrap:wrap}
  .tx-info{flex:1 1 180px}
  .tx-row > div[style*="align-items:flex-end"]{align-items:flex-start!important;width:100%}
  .schedule-row{gap:10px;flex-wrap:wrap}
  .schedule-time{width:auto;min-width:58px}
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table th,.table td{white-space:nowrap}
  #lineup-grid{grid-template-columns:1fr!important}
  .map-container{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    max-width:100%;
    height:auto!important;
    min-height:0;
    aspect-ratio:auto;
    padding:8px;
    overflow:hidden;
  }
  .map-zone{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:auto!important;height:auto!important;
    min-height:82px;
    padding:10px;
    letter-spacing:.5px;
  }
  /* Zone names read as legible card labels (not micro uppercase) on
     the contained mobile grid. */
  .map-zone .map-label{font-size:11px;line-height:1.3;font-weight:600}
  #page-map,#page-map .scroll-content,#map-content{max-width:100%;overflow-x:hidden}
}
@media(max-width:480px){
  .dash-header,.dash-content{padding-left:12px;padding-right:12px}
  .card,.wallet-card,.metric-card{padding:16px}
  .wallet-amount{font-size:clamp(24px,10vw,38px);overflow-wrap:anywhere}
  .pos-display{font-size:clamp(30px,14vw,48px)}
  .firefly-prompt{right:12px;bottom:calc(86px + env(safe-area-inset-bottom))}
  .firefly-prompt-actions{flex-direction:column}
  .map-container{grid-template-columns:1fr}
}

/* — Additional reusable skeleton surfaces — */
.skeleton-group--artist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.skeleton-group--charge,.skeleton-group--table,.skeleton-group--adminlog{display:flex;flex-direction:column;gap:10px}
.skeleton-table-row,.skeleton-admin-log{
  display:grid;grid-template-columns:1.2fr .8fr .7fr;gap:10px;align-items:center;
  background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px;
}
.skeleton-charge-panel{min-height:190px}
.skeleton-artist-card{padding:0;overflow:hidden}
.skeleton-artist-card .skeleton-photo{height:150px;border-radius:0}
@media(prefers-reduced-motion:reduce){
  .firefly-prompt,.artist-grid-card,.artist-preview-btn,.artist-fav-btn{transition:none}
}

/* ════════════════════════════════════════════════════════════
   WIREFRAME INTEGRATION — HOMEPAGE MAP / FESTIVAL-INFO TEASER
   Static, preview-only. Sits between the ticket section and the
   Firefly teaser so the homepage narrative reads:
     hero → experience → tickets → map/festival info → Firefly.
   Styled to match the Firefly teaser rhythm but in the gold/bronze
   festival tone (Firefly keeps the green glow as the quieter,
   optional initiative at the very end). No live data, no real-time
   crowd claim — copy says "live-style festival map preview".
═══════════════════════════════════════════════════════════════ */
.section--map-teaser{
  position:relative;
  padding:56px 24px 28px;
  max-width:1100px;
  margin:0 auto;
}
.map-teaser{
  display:flex;align-items:center;gap:24px;
  padding:32px;
  border-radius:var(--radius-lg);
}
.map-teaser-body{ flex:1;min-width:0 }
.map-teaser-eyebrow{
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--acc);font-weight:600;
  margin-bottom:6px;
}
.map-teaser-title{
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 30px);
  line-height:1.15;letter-spacing:.5px;
  margin-bottom:8px;
}
.map-teaser-copy{
  font-size:13px;color:var(--text2);line-height:1.7;
  margin-bottom:14px;max-width:560px;
}
.map-teaser-actions{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
}
@media(max-width:640px){
  .map-teaser{ flex-direction:column;text-align:center }
  .map-teaser-copy{ margin-left:auto;margin-right:auto }
  .map-teaser-actions{ justify-content:center }
}

/* ── Equity financial layer — product touchpoints ───────────
   Equity is the money layer across wallet top-ups, vendor POS,
   and post-event withdrawals. Frontend presentation and
   interaction only. */
.section--equity{
  position:relative;
  padding:44px 24px 28px;
  max-width:1100px;
  margin:0 auto;
}
.equity-layer{
  display:grid;
  grid-template-columns:1.1fr 1.3fr;
  gap:28px;align-items:center;
  padding:32px;
  border-radius:var(--radius-lg);
}
.equity-wordmark{
  display:inline-block;
  font-family:var(--font-display);
  font-size:13px;letter-spacing:4px;
  color:var(--acc);
  padding:5px 14px;
  border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:8px;
  background:rgba(var(--gold-rgb),.05);
  margin-bottom:16px;
}
.equity-layer-title{
  font-family:var(--font-display);
  font-size:clamp(20px,3vw,28px);
  line-height:1.18;letter-spacing:.4px;margin-bottom:12px;
}
.equity-layer-copy{
  font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:18px;
}
.equity-loop{ display:flex;flex-direction:column;gap:10px }
.equity-loop-row{
  display:flex;align-items:center;gap:14px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
}
.equity-loop-row:hover{ border-color:rgba(var(--gold-rgb),.4) }
.equity-loop-num{
  font-family:var(--font-mono);font-size:11px;color:var(--acc);
  width:20px;flex-shrink:0;
}
.equity-loop-label{ font-weight:600;font-size:13px }
.equity-loop-sub{ font-size:11px;color:var(--text3);margin-top:2px }

/* Operational / admin Equity cards */
.equity-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.equity-card{
  text-align:left;width:100%;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;cursor:pointer;
  transition:border-color .2s, transform .15s;
}
.equity-card:hover{ border-color:rgba(var(--gold-rgb),.45);transform:translateY(-2px) }
.equity-card-label{ font-size:13px;font-weight:600;margin-bottom:4px }
.equity-card-value{ font-family:var(--font-mono);font-size:18px;color:var(--acc) }
.equity-card-sub{ font-size:11px;color:var(--text3);margin-top:2px }

/* Equity action buttons (wallet / vendor / dashboards) */
.equity-actions{ display:flex;gap:10px;flex-wrap:wrap }
.btn-equity{
  flex:1;min-width:150px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:10px;cursor:pointer;
  font-size:13px;font-weight:600;
  background:rgba(var(--gold-rgb),.08);
  border:1px solid rgba(var(--gold-rgb),.35);
  color:var(--text);
}
.btn-equity:hover{ background:rgba(var(--gold-rgb),.14);border-color:var(--acc) }
.btn-equity .equity-tag{ font-size:9px;letter-spacing:1px;color:var(--acc);text-transform:uppercase }

/* Stepper modal */
.equity-modal-kicker{
  font-family:var(--font-display);font-size:11px;letter-spacing:4px;
  color:var(--acc);text-transform:uppercase;margin-bottom:6px;
}
.equity-modal-title{
  font-family:var(--font-display);font-size:24px;letter-spacing:.5px;margin-bottom:18px;
}
.equity-step-rail{ display:flex;gap:8px;margin-bottom:18px }
.equity-step-dot{
  flex:1;height:4px;border-radius:2px;background:var(--border2);
}
.equity-step-dot.active{ background:var(--acc) }
.equity-step-dot.done{ background:rgba(var(--gold-rgb),.5) }
.equity-step-label{ font-weight:600;font-size:15px;margin-bottom:10px }
.equity-step-text{ font-size:13px;color:var(--text2);line-height:1.7 }
.equity-chips{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px }
.equity-chip{
  padding:12px 6px;border-radius:10px;cursor:pointer;font-size:13px;
  background:var(--bg4);border:1px solid var(--border2);color:var(--text);
}
.equity-chip.on{ border-color:var(--acc);background:rgba(var(--gold-rgb),.1);color:var(--acc) }
.equity-amount-note{ font-size:12px;color:var(--text3);line-height:1.6 }
.equity-accts{ display:flex;flex-direction:column;gap:10px }
.equity-acct{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px;border-radius:10px;cursor:pointer;text-align:left;
  background:var(--bg4);border:1px solid var(--border2);color:var(--text);
}
.equity-acct.on{ border-color:var(--acc);background:rgba(var(--gold-rgb),.08) }
.equity-acct-name{ font-weight:600;font-size:13px }
.equity-acct-num{ font-family:var(--font-mono);font-size:12px;color:var(--text3) }

@media(max-width:760px){
  .equity-layer{ grid-template-columns:1fr;gap:20px }
}

/* ── Admin role switcher (frontend role dashboards) ─────────── */
.role-switch{ display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px }
.role-chip{
  padding:8px 14px;border-radius:100px;cursor:pointer;
  font-size:12px;font-weight:600;
  background:var(--bg4);border:1px solid var(--border2);color:var(--text2);
  transition:all .2s;
}
.role-chip:hover{ border-color:rgba(var(--gold-rgb),.4);color:var(--text) }
.role-chip.active{
  background:rgba(var(--gold-rgb),.12);
  border-color:var(--acc);color:var(--acc);
}

/* Role session bar (active role + sign out / switch role) */
.role-session{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:16px;
}
.role-session-id{ display:flex;align-items:center;gap:12px;min-width:0 }
.role-session-id .user-avatar{ width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0 }
.role-session-name{ font-weight:600;font-size:14px }
.role-session-meta{ font-size:11px;color:var(--text3) }
.role-session-actions{ display:flex;gap:8px;flex-wrap:wrap }
.role-session-btn{ font-size:12px;padding:8px 14px }

/* Role quick actions */
.role-actions{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px }
.role-action-btn{ font-size:13px;padding:11px 14px }

/* Login page — operational role access (mirrors the Quick Sign-In card) */
.role-access{ background:rgba(var(--gold-rgb),.04);border:1px solid rgba(var(--gold-rgb),.15);border-radius:10px;padding:14px;margin-top:16px }
.role-access .cred-role{ font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:10px }
.role-access-sub{ font-size:12px;color:var(--text2);margin:-4px 0 10px }
.role-access-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;margin-bottom:6px;border-radius:8px;
  border:1px solid transparent;background:rgba(var(--gold-rgb),.03);
  cursor:pointer;transition:border-color .2s,background .2s;
}
.role-access-row:hover{ border-color:rgba(var(--gold-rgb),.28);background:rgba(var(--gold-rgb),.07) }
.role-access-row:focus-visible{ outline:none;border-color:var(--acc) }
.role-access-meta{ min-width:0 }
.role-access-name{ font-size:12px;font-weight:600;color:var(--text) }
.role-access-desc{ font-size:10.5px;color:var(--text2);margin-top:1px }
.role-access-cred{ font-family:var(--font-mono);font-size:10.5px;color:var(--text3);margin-top:3px;word-break:break-all }
.role-access-enter{
  flex-shrink:0;background:var(--acc);color:var(--on-acc);
  padding:7px 11px;border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.2px;
  white-space:nowrap;min-width:88px;text-align:center;
  transition:filter .2s;
}
.role-access-row:hover .role-access-enter{ filter:brightness(1.08) }
.role-access-note{ font-size:10px;color:var(--text3);margin-top:10px;line-height:1.5 }

/* ════════════════════════════════════════════════════════════════
   Phase 8A — Firefly Initiative impact platform (Motherland × Equity)
   Dark-green glass + antique gold + firefly glow. No orange.
   ════════════════════════════════════════════════════════════════ */

/* Joint-venture positioning banner */
.ff-positioning{ display:flex;align-items:center;gap:14px;padding:16px 20px;margin-top:24px;
  border-radius:var(--radius);border:1px solid rgba(var(--firefly-rgb),.22);
  background:linear-gradient(135deg,rgba(var(--firefly-rgb),.06),rgba(201,169,97,.05)) }
.ff-positioning--compact{ padding:12px 16px;margin-top:0 }
.ff-positioning-mark{ width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 34%,var(--firefly-glow),rgba(var(--firefly-rgb),.25) 60%,transparent 72%);
  box-shadow:0 0 18px rgba(var(--firefly-rgb),.4) }
.ff-positioning-body{ display:flex;flex-direction:column;gap:2px;min-width:0 }
.ff-positioning-name{ font-family:var(--font-display);font-size:16px;letter-spacing:.6px;color:var(--firefly-soft) }
.ff-positioning-powered{ font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold) }
.ff-positioning-note{ margin-left:auto;font-size:11px;color:var(--text3);letter-spacing:.4px;text-align:right }

/* Platform metric cards */
.ff-metrics-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px }
.ff-metric-card{ padding:16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg3) }
.ff-metric-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin-bottom:8px }
.ff-metric-value{ font-family:var(--font-display);font-size:24px;color:var(--firefly-soft);line-height:1 }
.ff-metric-sub{ font-size:11px;color:var(--text3);margin-top:6px }

/* Giving shell */
.ff-trust-row{ display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px }
.ff-trust-pill{ font-size:11px;letter-spacing:.4px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(var(--firefly-rgb),.28);color:var(--firefly-soft);background:rgba(var(--firefly-rgb),.05) }
.ff-give-amounts{ display:flex;flex-wrap:wrap;gap:8px }
.ff-give-preset{ padding:8px 16px;font-size:13px }
.ff-give-foot{ margin-top:12px;font-size:11px;color:var(--text3);letter-spacing:.3px }

/* Giving modal */
.ff-give-modal{ padding:4px 2px }
.ff-give-modal-kicker{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:8px }
.ff-give-modal-title{ font-family:var(--font-display);font-size:22px;letter-spacing:.5px;margin-bottom:6px }
.ff-give-modal-account{ font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:14px }
.ff-give-modal-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin:10px 0 8px }
.ff-give-modal-amounts,.ff-give-modal-sources{ display:flex;flex-wrap:wrap;gap:8px }
.ff-give-chip,.ff-give-source{ padding:8px 14px;font-size:13px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s }
.ff-give-chip:hover,.ff-give-source:hover{ border-color:rgba(var(--firefly-rgb),.4) }
.ff-give-chip.on,.ff-give-source.on{ border-color:var(--firefly-soft);color:var(--firefly-soft);background:rgba(var(--firefly-rgb),.08) }
.ff-give-modal-foot{ margin-top:14px;font-size:10px;color:var(--text3);letter-spacing:.4px;text-align:center }

/* Project categories */
.ff-cat-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px }
.ff-cat-card{ padding:18px;border-radius:var(--radius);border:1px solid var(--border) }
.ff-cat-title{ font-family:var(--font-display);font-size:16px;letter-spacing:.5px;color:var(--gold);margin-bottom:12px }
.ff-cat-list{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px }
.ff-cat-list li{ font-size:13px;color:var(--text2);padding-left:16px;position:relative }
.ff-cat-list li::before{ content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;
  background:var(--firefly-soft);box-shadow:0 0 8px rgba(var(--firefly-rgb),.5) }

/* Project cards */
.ff-project-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px }
.ff-project-card{ padding:18px;border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column }
.ff-project-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px }
.ff-project-cat{ font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:4px }
.ff-project-title{ font-family:var(--font-display);font-size:18px;letter-spacing:.4px }
.ff-verified-badge{ flex:none;font-size:10px;letter-spacing:.5px;padding:4px 10px;border-radius:999px;white-space:nowrap }
.ff-verified-badge--on{ color:var(--firefly-soft);border:1px solid rgba(var(--firefly-rgb),.4);background:rgba(var(--firefly-rgb),.08) }
.ff-verified-badge--pending{ color:var(--gold);border:1px solid rgba(201,169,97,.35);background:rgba(201,169,97,.06) }
.ff-project-summary{ font-size:13px;color:var(--text2);line-height:1.6;margin:6px 0 14px }
.ff-project-progress{ margin-bottom:12px }
.ff-project-bar{ height:6px;border-radius:3px;overflow:hidden;background:rgba(var(--firefly-rgb),.08);margin-bottom:8px }
.ff-project-fill{ height:100%;background:linear-gradient(90deg,var(--firefly-glow),var(--firefly-soft));border-radius:3px }
.ff-project-figures{ font-size:12px;color:var(--text3);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline }
.ff-project-figures strong{ color:var(--firefly-soft);font-family:var(--font-mono) }
.ff-project-dot{ color:var(--text3);opacity:.6 }
.ff-project-meta{ font-size:12px;color:var(--text3);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px }
.ff-project-actions{ display:flex;gap:8px;flex-wrap:wrap;margin-top:auto }

/* Project detail modal */
.ff-project-modal{ padding:4px 2px }
.ff-project-modal-title{ font-family:var(--font-display);font-size:22px;letter-spacing:.5px }
.ff-project-modal-sub{ font-size:12px;color:var(--text3);margin-top:4px }
.ff-project-modal-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin-bottom:10px }

/* Evidence timeline */
.ff-timeline{ position:relative;padding-left:6px }
.ff-timeline-step{ display:flex;gap:12px;padding-bottom:14px;position:relative }
.ff-timeline-step::before{ content:'';position:absolute;left:5px;top:14px;bottom:-2px;width:1px;background:var(--border) }
.ff-timeline-step:last-child::before{ display:none }
.ff-timeline-dot{ width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px;background:var(--bg4);border:1px solid var(--border);z-index:1 }
.ff-timeline-step.is-done .ff-timeline-dot{ background:var(--firefly-soft);border-color:var(--firefly-soft);box-shadow:0 0 10px rgba(var(--firefly-rgb),.5) }
.ff-timeline-stage{ font-size:13px;font-weight:600 }
.ff-timeline-step.is-pending .ff-timeline-stage{ color:var(--text3) }
.ff-timeline-date{ font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:2px }

.ff-verify-line{ display:flex;align-items:center;gap:10px;flex-wrap:wrap }
.ff-verify-note{ font-size:12px;color:var(--text2) }
.ff-media-mini{ display:flex;flex-direction:column;gap:6px }
.ff-media-mini-row{ display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text2) }
.ff-media-type{ font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);min-width:96px }
.ff-media-len{ margin-left:auto;font-family:var(--font-mono);color:var(--text3) }

/* Public impact feed */
.ff-feed{ display:flex;flex-direction:column }
.ff-feed-row{ display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border) }
.ff-feed-row:last-child{ border-bottom:none }
.ff-feed-kind{ flex:none;font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:999px;height:fit-content;
  color:var(--gold);border:1px solid rgba(201,169,97,.3);background:rgba(201,169,97,.05) }
.ff-feed-kind--completion{ color:var(--firefly-soft);border-color:rgba(var(--firefly-rgb),.4);background:rgba(var(--firefly-rgb),.07) }
.ff-feed-title{ font-size:14px;font-weight:600;margin-bottom:3px }
.ff-feed-text{ font-size:13px;color:var(--text2);line-height:1.55 }
.ff-feed-meta{ font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:5px }

/* Homeland Media */
.ff-media-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px }
.ff-media-card{ padding:18px;border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column }
.ff-media-card-type{ font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:8px }
.ff-media-card-title{ font-family:var(--font-display);font-size:16px;letter-spacing:.3px;margin-bottom:6px }
.ff-media-card-meta{ font-size:11px;color:var(--text3);margin-bottom:14px }
.ff-media-card-btn{ margin-top:auto;font-size:12px;padding:7px 14px }
.ff-story-frame{ margin-top:14px;height:160px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(var(--firefly-rgb),.2);background:linear-gradient(135deg,rgba(var(--firefly-rgb),.08),rgba(0,0,0,.2)) }
.ff-story-frame span{ font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--firefly-soft) }

/* Sponsor panel */
.ff-sponsor-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px }
.ff-sponsor-option{ text-align:left;padding:14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);transition:all .15s;display:flex;flex-direction:column;gap:5px }
.ff-sponsor-option:hover{ border-color:rgba(var(--firefly-rgb),.4) }
.ff-sponsor-option-label{ font-size:13px;font-weight:600;color:var(--firefly-soft) }
.ff-sponsor-option-note{ font-size:11px;color:var(--text3);line-height:1.5 }

/* Evidence upload shell */
.ff-evidence-types{ display:flex;flex-wrap:wrap;gap:8px;margin-top:12px }
.ff-evidence-type{ padding:8px 14px;font-size:12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s }
.ff-evidence-type:hover{ border-color:rgba(var(--firefly-rgb),.4) }
.ff-evidence-type.on{ border-color:var(--firefly-soft);color:var(--firefly-soft);background:rgba(var(--firefly-rgb),.08) }

/* Verification flow */
.ff-verify-flow{ display:flex;flex-wrap:wrap;gap:8px;align-items:center }
.ff-verify-flow-step{ display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);
  padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg3) }
.ff-verify-flow-num{ width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-family:var(--font-mono);color:var(--firefly-soft);border:1px solid rgba(var(--firefly-rgb),.4) }

/* Analytics bars */
.ff-bar-track{ height:6px;border-radius:3px;overflow:hidden;background:var(--bg4) }
.ff-bar-fill{ height:100%;border-radius:3px;background:linear-gradient(90deg,var(--firefly-glow),var(--firefly-soft)) }
.ff-bar-fill--gold{ background:linear-gradient(90deg,rgba(201,169,97,.5),var(--gold)) }

/* Homepage teaser — Equity layer */
.firefly-teaser-powered{ font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin:10px 0 4px }

@media (max-width:640px){
  .ff-positioning-note{ display:none }
  .ff-metric-value{ font-size:20px }
}

/* ════════════════════════════════════════════════════════════════
   Phase 8B — Equity branch ticket pickup. Same dark-green glass +
   gold + firefly palette. No orange.
   ════════════════════════════════════════════════════════════════ */

/* Checkout: deliver vs pick up selector */
.pickup-method-label{ font-size:12px;letter-spacing:.4px;color:var(--text2);margin:4px 0 8px }
.pickup-method-row{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px }
.pickup-method{ text-align:left;padding:14px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;
  border:2px solid var(--border2);background:var(--bg3);transition:all .15s }
.pickup-method:hover{ border-color:rgba(201,169,97,.4) }
.pickup-method.on{ border-color:var(--acc);background:rgba(201,169,97,.05) }
.pickup-method-title{ font-size:14px;font-weight:600 }
.pickup-method-sub{ font-size:11px;color:var(--text2) }

/* Branch picker */
.pickup-branch-block{ margin-bottom:14px }
.pickup-branch-list{ display:flex;flex-direction:column;gap:8px;margin:8px 0 }
.pickup-branch{ text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer;
  border:2px solid var(--border2);background:var(--bg3);transition:all .15s }
.pickup-branch:hover{ border-color:rgba(201,169,97,.4) }
.pickup-branch.on{ border-color:var(--acc);background:rgba(201,169,97,.05) }
.pickup-branch-head{ display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px }
.pickup-branch-name{ font-size:14px;font-weight:600 }
.pickup-branch-avail{ font-size:10px;letter-spacing:.5px;padding:3px 8px;border-radius:999px }
.pickup-branch-avail--open{ color:var(--success);border:1px solid rgba(var(--success-rgb),.35);background:rgba(var(--success-rgb),.06) }
.pickup-branch-avail--limited{ color:var(--warn);border:1px solid rgba(var(--warn-rgb),.35);background:rgba(var(--warn-rgb),.06) }
.pickup-branch-avail--closed{ color:var(--text3);border:1px solid var(--border) }
.pickup-branch-meta{ font-size:11px;color:var(--text2);margin-top:2px }
.pickup-branch-note{ font-size:11px;color:var(--text3);line-height:1.5;margin-top:4px }

/* Checkout summary card */
.pickup-summary-card{ background:rgba(201,169,97,.05);border:1px solid rgba(201,169,97,.25);
  border-radius:8px;padding:12px;margin-top:8px }
.pickup-summary-title{ font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--acc);margin-bottom:4px }
.pickup-summary-branch{ font-size:14px;font-weight:600 }
.pickup-summary-meta{ font-size:12px;color:var(--text2);margin-top:3px;line-height:1.5 }

/* Attendee pickup status card */
.pickup-status-track{ display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px }
.pickup-status-node{ display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text3);
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg3) }
.pickup-status-node.is-done{ color:var(--firefly-soft);border-color:rgba(var(--firefly-rgb),.4);background:rgba(var(--firefly-rgb),.07) }
.pickup-status-dot{ width:8px;height:8px;border-radius:50%;background:var(--bg4) }
.pickup-status-node.is-done .pickup-status-dot{ background:var(--firefly-soft);box-shadow:0 0 8px rgba(var(--firefly-rgb),.5) }
.pickup-status-detail{ border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px }
.pickup-status-row{ display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:4px 0;color:var(--text2) }
.pickup-status-row strong{ color:var(--text) }
.pickup-status-msg{ font-size:13px;color:var(--text2);line-height:1.6 }

/* Admin pickup controls */
.pickup-admin-actions{ display:flex;gap:6px;flex-wrap:wrap }

@media (max-width:640px){
  .pickup-method-row{ grid-template-columns:1fr }
}

/* ════════════════════════════════════════════════════════════════
   Phase 8C — Role workspaces. Login workspace selector + Super Admin
   workspace launcher. Dark glass, gold, green. No orange.
   ════════════════════════════════════════════════════════════════ */

/* Login: workspace selector — single-column compact list fully
   contained inside .auth-card (no two-column overflow / clipping). */
.workspace-select-grid{ display:flex;flex-direction:column;gap:8px;margin-top:10px;width:100% }
.workspace-card{ box-sizing:border-box;width:100%;max-width:100%;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg2);transition:border-color .15s,background .15s,transform .12s }
.workspace-card:hover,.workspace-card:focus-visible{ border-color:rgba(201,169,97,.45);background:rgba(201,169,97,.05);transform:translateY(-1px);outline:none }
.workspace-card-avatar{ width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.5px;color:#1a1408 }
.workspace-card-meta{ display:flex;flex-direction:column;gap:1px;min-width:0 }
.workspace-card .role-access-name{ font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.workspace-card .role-access-desc{ font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.workspace-card .role-access-enter{ font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--acc);
  flex:none;white-space:nowrap;opacity:.75;padding:4px 10px;border:1px solid rgba(201,169,97,.3);border-radius:999px }
.workspace-card:hover .role-access-enter,.workspace-card:focus-visible .role-access-enter{ opacity:1;border-color:rgba(201,169,97,.6) }

/* Super Admin: workspace launcher grid */
.workspace-launch-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px }
.workspace-launch-card{ display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid var(--border);background:var(--bg3);transition:border-color .15s,background .15s }
.workspace-launch-card:hover{ border-color:rgba(201,169,97,.45);background:rgba(201,169,97,.05) }
.workspace-launch-avatar{ width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:.5px;color:#1a1408 }
.workspace-launch-meta{ display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 }
.workspace-launch-name{ font-size:14px;font-weight:600 }
.workspace-launch-access{ font-size:11px;color:var(--text3) }
.workspace-launch-enter{ font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--acc);flex:none }

/* ════════════════════════════════════════════════════════════════
   Phase 8D — Wallet top-up. Method + amount chips, confirm panel.
   Dark glass, gold, green. No orange.
   ════════════════════════════════════════════════════════════════ */
.topup-modal{ padding:4px 2px }
.topup-modal-kicker{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:6px }
.topup-modal-title{ font-family:var(--font-display);font-size:22px;letter-spacing:.5px;margin-bottom:14px }
.topup-modal-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin:12px 0 8px }
.topup-method-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px }
.topup-method{ box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:border-color .15s,background .15s;text-align:left }
.topup-method:hover{ border-color:rgba(201,169,97,.4) }
.topup-method.on{ border-color:var(--acc);background:rgba(201,169,97,.06);color:var(--text) }
.topup-method-avatar{ width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;letter-spacing:.3px;color:#1a1408;background:linear-gradient(135deg,#C9A961,#8B6F3F) }
.topup-method.on .topup-method-avatar{ background:linear-gradient(135deg,#C9A961,#6FA158) }
.topup-method-label{ font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.topup-amt-row{ display:flex;flex-wrap:wrap;gap:8px }
.topup-amt{ padding:8px 14px;font-size:13px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:border-color .15s,background .15s }
.topup-amt:hover{ border-color:rgba(201,169,97,.4) }
.topup-amt.on{ border-color:var(--acc);color:var(--acc);background:rgba(201,169,97,.06) }
.topup-modal-foot{ margin-top:14px;font-size:10px;color:var(--text3);letter-spacing:.4px;text-align:center }
/* Mega Pass D: honest status note inside the top-up modal — states plainly
   that provider payments are not enabled and no money moves. */
.topup-modal-honesty{ margin-top:14px;font-size:12px;line-height:1.6;color:var(--text2);
  background:var(--bg4);border:1px solid var(--border);border-radius:10px;padding:10px 12px }
.topup-modal-honesty strong{ color:var(--text) }

/* ════════════════════════════════════════════════════════════════
   Phase 8E — Map checkpoints + connected-friend pings. Animation/UI
   only (no GPS, no real-time, no tracking). Dark glass, gold, green.
   ════════════════════════════════════════════════════════════════ */

/* Interactive checkpoint map */
.checkpoint-map{ position:relative;width:100%;height:280px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 30% 30%,rgba(var(--forest-rgb),.12),transparent 60%),
    radial-gradient(circle at 75% 70%,rgba(var(--gold-rgb),.08),transparent 60%),
    var(--bg2);
  margin-bottom:14px }
.checkpoint-pin{ position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:0;z-index:1 }
.checkpoint-pin-dot{ width:14px;height:14px;border-radius:50%;background:var(--acc);
  border:2px solid rgba(0,0,0,.35);box-shadow:0 0 0 4px rgba(201,169,97,.16);transition:transform .15s,box-shadow .15s }
.checkpoint-pin:hover .checkpoint-pin-dot{ transform:scale(1.15) }
.checkpoint-pin-label{ font-size:10px;letter-spacing:.3px;color:var(--text2);background:rgba(0,0,0,.45);
  padding:2px 7px;border-radius:999px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis }
.checkpoint-pin.is-active{ z-index:3 }
.checkpoint-pin.is-active .checkpoint-pin-dot{ background:var(--firefly-soft);box-shadow:0 0 0 5px rgba(var(--firefly-rgb),.22) }
.checkpoint-pin.is-active .checkpoint-pin-label{ color:var(--text);background:rgba(var(--firefly-rgb),.18) }
/* Friend-ping pulse — UI animation only */
.checkpoint-pin.is-pulsing{ z-index:4 }
.checkpoint-pin.is-pulsing .checkpoint-pin-dot::after{ content:'';position:absolute;left:50%;top:8px;width:14px;height:14px;
  transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--firefly-soft);animation:checkpointPulse 1.3s ease-out 2 }
@keyframes checkpointPulse{ 0%{ transform:translate(-50%,-50%) scale(1);opacity:.85 } 100%{ transform:translate(-50%,-50%) scale(4.2);opacity:0 } }

/* Selected-checkpoint card */
.checkpoint-card{ border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;background:var(--bg3) }
.checkpoint-card-head{ display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap }
.checkpoint-card-name{ font-family:var(--font-display);font-size:18px;letter-spacing:.4px }
.checkpoint-card-zone{ font-size:11px;color:var(--text3) }
.checkpoint-card-purpose{ font-size:13px;color:var(--text2);line-height:1.55;margin:8px 0 12px }
.checkpoint-card-rows{ display:flex;flex-direction:column;gap:6px }
.checkpoint-card-row{ display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--text2) }
.checkpoint-card-row span:first-child{ color:var(--text3);flex:none }
.checkpoint-card-row span:last-child{ text-align:right;min-width:0 }

/* Friends + pings two-up */
.checkpoint-friends-grid{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
.checkpoint-panel{ border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--bg2) }
.checkpoint-panel-head{ display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px }
.checkpoint-panel-title{ font-size:13px;font-weight:600 }
.checkpoint-checkin-btn{ font-size:11px;padding:5px 12px }

/* Connected friend rows */
.friend-row{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--border) }
.friend-row:last-child{ border-bottom:none }
.friend-avatar{ width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#1a1408;background:linear-gradient(135deg,#C9A961,#6FA158) }
.friend-meta{ min-width:0 }
.friend-name{ font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.friend-ticket{ font-size:9px;letter-spacing:.5px;color:var(--acc);border:1px solid rgba(201,169,97,.3);border-radius:999px;padding:1px 6px;margin-left:4px }
.friend-sub{ font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.friend-status{ font-size:11px;color:var(--firefly-soft) }
.friend-battery{ display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none }
.friend-battery-bar{ width:42px;height:5px;border-radius:3px;background:var(--bg4);overflow:hidden;display:block }
.friend-battery-bar span{ display:block;height:100%;background:linear-gradient(90deg,var(--firefly-glow),var(--firefly-soft)) }
.friend-battery-pct{ font-size:10px;font-family:var(--font-mono);color:var(--text3) }

/* Ping feed */
.ping-row{ display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border) }
.ping-row:last-child{ border-bottom:none }
.ping-dot{ width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px;background:var(--firefly-soft);box-shadow:0 0 8px rgba(var(--firefly-rgb),.5) }
.ping-body{ min-width:0 }
.ping-line{ font-size:13px;color:var(--text2) }
.ping-meta{ font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:2px }

/* Privacy note */
.checkpoint-privacy{ margin-top:16px;border:1px solid rgba(var(--firefly-rgb),.2);border-radius:var(--radius);
  padding:12px 16px;background:rgba(var(--firefly-rgb),.04) }
.checkpoint-privacy-title{ font-size:12px;font-weight:600;color:var(--firefly-soft);margin-bottom:6px }
.checkpoint-privacy ul{ margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px }
.checkpoint-privacy li{ font-size:12px;color:var(--text2);line-height:1.5 }

@media (max-width:640px){
  .checkpoint-friends-grid{ grid-template-columns:1fr }
  .checkpoint-pin-label{ max-width:84px }
}
@media (prefers-reduced-motion:reduce){
  .checkpoint-pin.is-pulsing .checkpoint-pin-dot::after{ animation:none }
}

/* ════════════════════════════════════════════════════════════════
   Phase 9B — My Pass (universal credential module). Dark glass, gold,
   green. Pass-style credential, not a real scannable QR.
   ════════════════════════════════════════════════════════════════ */
.mypass-card{ position:relative;overflow:hidden;margin-bottom:16px;
  border:1px solid rgba(201,169,97,.28);
  background:
    radial-gradient(circle at 88% 0%,rgba(201,169,97,.10),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(var(--firefly-rgb),.08),transparent 46%),
    var(--bg2) }
.mypass-card--empty{ text-align:center }
.mypass-empty{ font-size:13px;color:var(--text2);padding:10px 0 4px }
.mypass-kicker{ font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold) }
.mypass-top{ display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap }
.mypass-id{ display:flex;gap:12px;align-items:center;min-width:0 }
.mypass-avatar{ width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;letter-spacing:.5px;color:#1a1408 }
.mypass-id-meta{ min-width:0 }
.mypass-name{ font-family:var(--font-display);font-size:20px;letter-spacing:.4px;line-height:1.1;margin-top:2px }
.mypass-account{ font-size:12px;color:var(--text3);margin-top:2px }
.mypass-passtype{ text-align:right;flex:none }
.mypass-passtype-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3) }
.mypass-passtype-value{ font-family:var(--font-display);font-size:15px;color:var(--acc);margin-top:3px }
.mypass-badges{ display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px }
.mypass-badge{ font-size:11px;letter-spacing:.3px;padding:5px 11px;border-radius:999px }
.mypass-badge--role{ color:var(--firefly-soft);border:1px solid rgba(var(--firefly-rgb),.35);background:rgba(var(--firefly-rgb),.07) }
.mypass-badge--clearance{ color:var(--acc);border:1px solid rgba(201,169,97,.35);background:rgba(201,169,97,.06) }
.mypass-section-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin:16px 0 8px }
.mypass-zones{ display:flex;flex-wrap:wrap;gap:7px }
.mypass-zone{ font-size:12px;color:var(--text2);padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg3) }
.mypass-rows{ display:flex;flex-direction:column;gap:6px;margin-top:16px }
.mypass-row{ display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--text2) }
.mypass-row span:first-child{ color:var(--text3);flex:none }
.mypass-row span:last-child{ text-align:right;min-width:0 }
.mypass-ref{ font-family:var(--font-mono);color:var(--text) }
.mypass-credential{ position:relative;margin-top:16px;border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(0,0,0,.18) }
.mypass-credential-grid{ width:64px;height:64px;border-radius:10px;
  background-image:linear-gradient(45deg,rgba(201,169,97,.5) 25%,transparent 25%,transparent 75%,rgba(201,169,97,.5) 75%),
    linear-gradient(45deg,rgba(201,169,97,.5) 25%,transparent 25%,transparent 75%,rgba(201,169,97,.5) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;opacity:.55;border:1px solid rgba(201,169,97,.3) }
.mypass-credential-note{ font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3) }
.mypass-credential-ref{ font-family:var(--font-mono);font-size:12px;color:var(--acc) }
.mypass-support{ width:100%;margin-top:16px;font-size:13px }

/* ════════════════════════════════════════════════════════════════
   Phase 9C — Account Access (creation + assignment shell). Dark glass,
   gold, green.
   ════════════════════════════════════════════════════════════════ */
.access-modal{ padding:4px 2px }
.access-modal-label{ font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin:14px 0 8px }
.access-chips{ display:flex;flex-wrap:wrap;gap:7px }
.access-chip{ font-size:12px;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:border-color .15s,background .15s,color .15s }
.access-chip:hover{ border-color:rgba(201,169,97,.4) }
.access-chip.on{ border-color:var(--acc);color:var(--acc);background:rgba(201,169,97,.07) }
.access-row-actions{ display:flex;gap:6px;flex-wrap:wrap }

/* ════════════════════════════════════════════════════════════════
   Phase 9D — Unified activity feed. Dark glass, gold, green. OS-style
   activity rail. No real-time / no backend.
   ════════════════════════════════════════════════════════════════ */
.activity-card{ margin-top:16px }
.activity-scope{ font-size:11px;color:var(--text3);font-family:var(--font-mono) }
.activity-filter{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px }
.activity-chip{ font-size:11px;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:border-color .15s,color .15s,background .15s }
.activity-chip:hover{ border-color:rgba(201,169,97,.4) }
.activity-chip.on{ border-color:var(--acc);color:var(--acc);background:rgba(201,169,97,.07) }
.activity-list{ display:flex;flex-direction:column }
.activity-row{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--border) }
.activity-row:last-child{ border-bottom:none }
.activity-row.is-reviewed{ opacity:.62 }
.activity-cat{ flex:none;font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,169,97,.28);background:rgba(201,169,97,.05);border-radius:999px;padding:4px 9px;
  height:fit-content;white-space:nowrap }
.activity-body{ min-width:0 }
.activity-title{ font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.activity-reviewed{ font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--firefly-soft);
  border:1px solid rgba(var(--firefly-rgb),.35);border-radius:999px;padding:1px 7px }
.activity-detail{ font-size:13px;color:var(--text2);line-height:1.5;margin-top:2px }
.activity-meta{ font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:5px }
.activity-side{ display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none }
.activity-actions{ display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end }
.activity-detail-rows{ display:flex;flex-direction:column;gap:6px;margin-top:14px }
.activity-detail-row{ display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--text2) }
.activity-detail-row span:first-child{ color:var(--text3) }

@media (max-width:640px){
  .activity-row{ grid-template-columns:1fr;gap:6px }
  .activity-side{ align-items:flex-start }
}

/* ════════════════════════════════════════════════════════════════
   Phase 9E — Command Center · System Status. Dark glass, gold, green.
   Frontend operational sample state — no real monitoring.
   ════════════════════════════════════════════════════════════════ */
.status-filter{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px }
.status-chip{ font-size:11px;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:border-color .15s,color .15s,background .15s }
.status-chip:hover{ border-color:rgba(201,169,97,.4) }
.status-chip.on{ border-color:var(--acc);color:var(--acc);background:rgba(201,169,97,.07) }

.status-area-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px }
.status-area{ border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--bg3);display:flex;flex-direction:column }
.status-area-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px }
.status-area-name{ font-size:13px;font-weight:600;min-width:0 }
.status-area-line{ font-size:12px;color:var(--text2);line-height:1.5 }
.status-area-meta{ font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:8px }
.status-area-actions{ display:flex;gap:6px;flex-wrap:wrap;margin-top:12px }

.status-attn{ display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border) }
.status-attn:last-child{ border-bottom:none }
.status-attn.is-ack{ opacity:.6 }
.status-attn-body{ min-width:0 }
.status-attn-title{ font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.status-attn-done{ font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--firefly-soft);border:1px solid rgba(var(--firefly-rgb),.35);border-radius:999px;padding:1px 7px }
.status-attn-detail{ font-size:12px;color:var(--text2);margin-top:2px;line-height:1.5 }
.status-attn-side{ display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none }
.status-attn-actions{ display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end }

.status-checklist{ display:flex;flex-direction:column;gap:6px }
.status-check{ display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  border:1px solid var(--border);background:var(--bg3);border-radius:10px;padding:9px 12px;transition:border-color .15s,background .15s }
.status-check:hover{ border-color:rgba(201,169,97,.4) }
.status-check.is-done{ border-color:rgba(var(--firefly-rgb),.4);background:rgba(var(--firefly-rgb),.06) }
.status-check-box{ width:18px;height:18px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#1a1408;border:1px solid var(--border);background:var(--bg4) }
.status-check.is-done .status-check-box{ background:var(--firefly-soft);border-color:var(--firefly-soft) }
.status-check-label{ font-size:13px;color:var(--text);min-width:0 }
.status-check.is-done .status-check-label{ color:var(--text2) }

.status-next-grid{ display:flex;flex-direction:column;gap:8px }
.status-next{ text-align:left;font-size:13px;cursor:pointer;border:1px solid var(--border);background:var(--bg3);
  border-radius:10px;padding:11px 12px;color:var(--text);transition:border-color .15s,background .15s }
.status-next:hover{ border-color:var(--acc);background:rgba(201,169,97,.06);color:var(--acc) }

@media (max-width:760px){ .status-bottom{ grid-template-columns:1fr !important } }

/* Phase 9E repair — System Status filter row labels */
.status-filter-label{ font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin:4px 0 6px }