@layer components {
html[data-route="/nil"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted) */
  /* PALETTE FIX (2026-07-06): the Q0110/Q0111 pass (2026-06-30) unified NIL's ad-hoc
     greens into the sanctioned --green-positive token, but that's still green — not on
     the sitewide red/blue ramp. This sharpens that fix for the NIL cluster specifically:
     --nil-green now drives the "NIL identity / positive" role via --brand-blue,
     --nil-purple drives the BETA-pill + Social-deal-badge role via --brand-red. Also locally
     overrides --green-positive (used by nil.css + this page's inline styles) so nothing
     on /nil renders green. Var names kept as-is to avoid a 40-site rename. */
  --nil-green: var(--brand-blue, #00B7FF);
  --nil-green-bg: rgba(0,183,255,.12);
  --nil-green-border: rgba(0,183,255,.25);
  --nil-purple: var(--brand-red, #FF2D2D);
  --nil-purple-bg: rgba(255,45,45,.15);
  --nil-purple-border: rgba(255,45,45,.35);
  --green-positive: var(--brand-blue, #00B7FF);
  --bg-surface-2: #1A1A1A;
  --hairline: rgba(255,255,255,.06);
  --hairline-2: rgba(255,255,255,.10);

  /* === SKIP LINK === */
  .skip{position:absolute;top:-100px;left:0;padding:8px 16px;background:var(--red-primary);color:#fff;z-index:100;font-size:16px;}
  .skip:focus{top:0;}

  /* === LAYOUT === */

  /* === MOBILE NAV === */

  /* === PAGE HEADER === */
  .page-header{background:linear-gradient(135deg,#0d0d0d 0%,#0a0f1a 50%,#0d0d0d 100%);border-bottom:2px solid var(--nil-green);padding:32px 24px 20px;position:relative;overflow:hidden;flex-shrink:0;}
  .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 20px,rgba(0,183,255,.02) 20px,rgba(0,183,255,.02) 21px);pointer-events:none;}
  .page-header-inner{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .ph-left{flex:1;min-width:200px;}
  .page-eyebrow{font-family:var(--f-display);font-size:16px;letter-spacing:.2em;color:var(--nil-green);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .page-title{font-family:var(--f-display);font-size:clamp(28px,4vw,48px);letter-spacing:.04em;color:var(--white-bright);margin:0 0 4px;line-height:1;}
  .page-subtitle{font-size:16px;color:var(--gray-light);margin:0;}
  .ph-beta{display:inline-block;font-family:var(--f-display);font-size:16px;background:var(--nil-purple-bg);color:#FF6B6B;border:1px solid var(--nil-purple-border);border-radius:4px;padding:1px 6px;letter-spacing:.14em;vertical-align:middle;}

  /* === BALANCE CHIP === */
  .balance-chip{display:flex;align-items:center;gap:12px;background:var(--black-card);border:1px solid var(--nil-green);border-radius:12px;padding:14px 20px;white-space:nowrap;flex-shrink:0;}
  .bc-icon{font-size:22px;line-height:1;}
  .bc-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.12em;font-family:var(--f-display);}
  .bc-value{font-family:var(--f-display);font-size:28px;color:var(--nil-green);letter-spacing:.05em;line-height:1.1;}
  .bc-sub{font-size:16px;color:var(--nil-green);opacity:.7;margin-top:2px;}

  /* === PLAY MONEY BANNER === */
  .playmoney-bar{background:rgba(0,183,255,.06);border-bottom:1px solid rgba(0,183,255,.15);padding:8px 24px;font-size:16px;color:var(--nil-green);display:flex;align-items:center;gap:8px;}
  .pm-icon{font-size:16px;line-height:1;}

  /* === TAB BAR === */
  .tab-bar{display:flex;gap:4px;padding:0 24px;margin-top:0;border-bottom:2px solid var(--hairline);overflow-x:auto;background:var(--black-card);}
  .tab-btn{font-family:var(--f-display);font-size:16px;letter-spacing:.12em;padding:12px 20px;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--gray-light);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;}
  .tab-btn:hover{color:var(--white-bright);}
  .tab-btn.active{color:var(--nil-green);border-bottom-color:var(--nil-green);}
  .tab-btn:focus-visible{outline:2px solid var(--nil-green);outline-offset:-2px;}
  .tab-pane{display:none;padding:24px;}
  .tab-pane.active{display:block;animation:nil-fadeSlide .2s ease;}

  /* === CARD === */
  .card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;}
  .card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-border);gap:12px;flex-wrap:wrap;}
  .card-eyebrow{font-size:16px;font-family:var(--f-display);letter-spacing:.18em;color:var(--nil-green);text-transform:uppercase;}
  .card-title{font-family:var(--f-display);font-size:18px;letter-spacing:.06em;color:var(--white-bright);margin:0;}
  .card-body{padding:20px;}

  /* === SECTION HEADERS === */
  .section-title{font-family:var(--f-display);font-size:20px;letter-spacing:.08em;color:var(--white-bright);margin:0 0 4px;}
  .section-sub{color:var(--gray-light);font-size:16px;margin:0 0 16px;line-height:1.45;}

  /* === FILTER BAR === */
  .filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
  .filter-select{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:8px;color:var(--white-bright);font-size:16px;padding:8px 12px;cursor:pointer;appearance:none;min-width:140px;font-family:var(--f-body);}
  .filter-select:focus{outline:none;border-color:var(--nil-green);}
  .filter-chip{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:20px;color:var(--gray-light);font-size:16px;padding:6px 14px;cursor:pointer;transition:all .15s;white-space:nowrap;}
  .filter-chip.on{background:var(--nil-green-bg);border-color:var(--nil-green);color:var(--nil-green);}
  .filter-chip:hover{border-color:var(--white-bright);color:var(--white-bright);}
  .filter-spacer{flex:1;}
  .search-box{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:8px;color:var(--white-bright);font-size:16px;padding:8px 12px;width:200px;font-family:var(--f-body);}
  .search-box::placeholder{color:var(--gray-light);}
  .search-box:focus{outline:none;border-color:var(--nil-green);}

  /* === MARKETPLACE GRID === */
  .mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
  .mkt-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .18s,box-shadow .18s;cursor:pointer;position:relative;overflow:hidden;}
  .mkt-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(0,183,255,.02));pointer-events:none;}
  .mkt-card:hover{border-color:var(--nil-green);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(0,183,255,.15);}
  .mkt-card:focus-visible{outline:2px solid var(--nil-green);outline-offset:2px;}
  .mkt-card.owned{border-color:rgba(0,183,255,.35);background:rgba(0,183,255,.03);}
  .mkt-avatar{width:52px;height:52px;border-radius:50%;background:var(--bg-surface-2);border:2px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:18px;color:var(--gray-light);flex-shrink:0;overflow:hidden;}
  .mkt-avatar img{width:100%;height:100%;object-fit:cover;}
  .mkt-header{display:flex;align-items:center;gap:10px;}
  .mkt-name{font-weight:700;font-size:16px;line-height:1.2;}
  .mkt-meta{font-size:16px;color:var(--gray-light);}
  .mkt-pos{display:inline-block;font-family:var(--f-display);font-size:16px;padding:2px 6px;border-radius:4px;margin-top:2px;letter-spacing:.06em;}
  .mkt-pos-qb{background:var(--sns-pos-qb-bg);color:var(--sns-pos-qb-text);}
  .mkt-pos-rb{background:var(--sns-pos-rb-bg);color:var(--sns-pos-rb-text);}
  .mkt-pos-wr{background:var(--sns-pos-wr-bg);color:var(--sns-pos-wr-text);}
  .mkt-pos-te{background:var(--sns-pos-te-bg);color:var(--sns-pos-te-text);}
  .mkt-pos-k{background:var(--sns-pos-k-bg);color:var(--sns-pos-k-text);}
  .mkt-divider{border:none;border-top:1px solid var(--hairline);margin:0;}
  .mkt-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .mkt-stat{display:flex;flex-direction:column;gap:2px;}
  .mkt-stat-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-display);}
  .mkt-stat-val{font-family:'JetBrains Mono',var(--f-mono,monospace);font-size:16px;font-weight:700;color:var(--white-bright);}
  .mkt-stat-val.green{color:var(--nil-green);}
  .mkt-buy-btn{width:100%;padding:10px;border:none;border-radius:8px;background:var(--nil-green);color:#04141c;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .15s,transform .1s;font-family:var(--f-body);}
  .mkt-buy-btn:hover{opacity:.9;transform:scale(1.02);}
  .mkt-buy-btn:focus-visible{outline:2px solid var(--white-bright);outline-offset:2px;}
  .mkt-buy-btn:disabled{background:var(--gray-border);color:var(--gray-light);cursor:default;transform:none;}
  .mkt-owned-badge{text-align:center;font-size:16px;color:var(--nil-green);font-weight:600;padding:7px;background:var(--nil-green-bg);border-radius:6px;}

  /* === WALLET / TRANSACTION HISTORY === */
  .wallet-section{margin-bottom:24px;}
  .wallet-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
  .wallet-stat{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:16px 20px;}
  .wallet-stat-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-family:var(--f-display);}
  .wallet-stat-val{font-family:var(--f-display);font-size:32px;color:var(--white-bright);line-height:1;}
  .wallet-stat-val.up{color:var(--nil-green);}
  .wallet-stat-val.down{color:var(--red-primary);}
  .wallet-stat-sub{font-size:16px;color:var(--gray-light);margin-top:4px;}

  .tx-table{width:100%;border-collapse:collapse;font-size:16px;}
  .tx-table th{font-size:16px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-light);padding:10px 12px;text-align:left;border-bottom:1px solid var(--gray-border);font-family:var(--f-display);}
  .tx-table td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  .tx-table tr:hover td{background:rgba(255,255,255,.02);}
  .tx-type{display:inline-block;font-size:16px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;}
  .tx-credit{background:var(--nil-green-bg);color:var(--nil-green);}
  .tx-debit{background:rgba(255,26,26,.12);color:var(--red-primary);}
  .tx-amount{font-family:'JetBrains Mono',var(--f-mono,monospace);font-weight:700;}
  .tx-amount.positive{color:var(--nil-green);}
  .tx-amount.negative{color:var(--red-primary);}
  .tx-desc{color:var(--white-bright);}
  .tx-date{color:var(--gray-light);font-family:'JetBrains Mono',var(--f-mono,monospace);font-size:16px;}

  /* === SINGLE WALLET PANEL (NIL Bucks only; D-NIL2 tabled the Sparks/Points second currency) === */
  .wallet-panel{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:14px;}
  .wallet-bal{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;}
  .wallet-bal--nil{border-color:var(--nil-green-border);}
  .wallet-bal--nil::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--nil-green);}
  .wallet-bal-top{margin-bottom:10px;}
  .wallet-bal-val{font-family:var(--f-display);font-size:34px;line-height:1;letter-spacing:.04em;}
  .wallet-bal--nil .wallet-bal-val{color:var(--nil-green);}
  .wallet-bal-sub{font-size:16px;color:var(--gray-light);margin-top:6px;}
  .wallet-sep-note{font-size:16px;color:var(--gray-light);background:var(--hairline);border-radius:8px;padding:8px 12px;margin:0 0 24px;display:flex;align-items:center;gap:8px;line-height:1.4;}

  /* Source badge on each activity row (NIL Bucks only). */
  .src-badge{display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:700;padding:3px 9px 3px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;border:1px solid transparent;line-height:1.3;}
  .src-badge .src-ico{font-size:16px;line-height:1;}
  .src-badge--nil{background:var(--nil-green-bg);color:var(--nil-green);border-color:var(--nil-green-border);}
  /* Row accent: a thin left rule echoing the badge color on each activity row */
  .tx-table tr.tx-row-nil td:first-child{box-shadow:inset 3px 0 0 var(--nil-green);}
  .tx-src-sub{display:block;font-size:16px;color:var(--gray-light);margin-top:3px;letter-spacing:.04em;text-transform:none;}
  @media (max-width:560px){.wallet-panel{grid-template-columns:1fr;}}

  /* === PORTFOLIO === */
  .portfolio-header{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
  .port-stat{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:10px;padding:16px 20px;}
  .port-stat-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;font-family:var(--f-display);}
  .port-stat-val{font-family:var(--f-display);font-size:32px;color:var(--white-bright);line-height:1;}
  .port-stat-val.up{color:var(--nil-green);}
  .port-stat-val.down{color:var(--red-primary);}
  .port-stat-sub{font-size:16px;color:var(--gray-light);margin-top:4px;}

  .port-table{width:100%;border-collapse:collapse;font-size:16px;}
  .port-table th{font-size:16px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-light);padding:10px 12px;text-align:left;border-bottom:1px solid var(--gray-border);font-family:var(--f-display);}
  .port-table td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:middle;}
  .port-table tr:hover td{background:rgba(255,255,255,.02);}
  .port-player-cell{display:flex;align-items:center;gap:10px;}
  .port-mini-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-surface-2);border:1px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-light);flex-shrink:0;font-family:var(--f-display);}
  .port-name{font-weight:600;font-size:16px;}
  .port-school{font-size:16px;color:var(--gray-light);}
  .badge-type{display:inline-block;font-size:16px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;}
  .badge-end{background:rgba(255,45,45,.12);color:#FFFFFF;border:1px solid rgba(255,45,45,.25);}
  .badge-soc{background:rgba(139,0,0,.22);color:#FF6B6B;border:1px solid rgba(139,0,0,.45);}
  .badge-app{background:rgba(59,130,246,.12);color:#93c5fd;border:1px solid rgba(59,130,246,.25);}
  .pnl-up{color:var(--nil-green);font-family:'JetBrains Mono',var(--f-mono,monospace);font-weight:700;}
  .pnl-dn{color:var(--red-primary);font-family:'JetBrains Mono',var(--f-mono,monospace);font-weight:700;}
  .sell-btn{background:var(--bg-surface-2);border:1px solid var(--gray-border);border-radius:6px;color:var(--gray-light);font-size:16px;padding:6px 12px;cursor:pointer;transition:all .15s;font-family:var(--f-body);}
  .sell-btn:hover{border-color:var(--red-primary);color:var(--red-primary);}
  .sell-btn:focus-visible{outline:2px solid var(--nil-green);outline-offset:2px;}

  /* === INVENTORY (Equip/Unequip) === */
  .inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
  .inv-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s;}
  .inv-card.equipped{border-color:var(--nil-green);box-shadow:0 0 12px rgba(0,183,255,.08);}
  .inv-card-header{display:flex;align-items:center;gap:12px;}
  .inv-avatar{width:48px;height:48px;border-radius:50%;background:var(--bg-surface-2);border:2px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:17px;color:var(--gray-light);flex-shrink:0;}
  .inv-name{font-weight:700;font-size:16px;}
  .inv-school{font-size:16px;color:var(--gray-light);}
  .inv-status{display:flex;align-items:center;gap:6px;margin-left:auto;}
  .inv-status-dot{width:8px;height:8px;border-radius:50%;}
  .inv-status-dot.active{background:var(--nil-green);}
  .inv-status-dot.inactive{background:var(--gray-border);}
  .inv-status-label{font-size:16px;font-family:var(--f-display);letter-spacing:.1em;text-transform:uppercase;}
  .inv-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg-surface-2);border-radius:8px;padding:10px 12px;}
  .inv-detail{display:flex;flex-direction:column;gap:2px;}
  .inv-detail-label{font-size:16px;color:var(--gray-light);text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-display);}
  .inv-detail-val{font-family:'JetBrains Mono',var(--f-mono,monospace);font-size:16px;font-weight:700;}
  .inv-detail-val.gold{color:#FFFFFF;}
  .inv-actions{display:flex;gap:8px;}
  .inv-btn{flex:1;padding:9px;border-radius:8px;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s;font-family:var(--f-body);}
  .inv-btn.equip{background:rgba(0,183,255,.12);border:1px solid var(--nil-green);color:var(--nil-green);}
  .inv-btn.equip:hover{background:rgba(0,183,255,.22);}
  .inv-btn.unequip{background:rgba(255,26,26,.08);border:1px solid var(--red-primary);color:var(--red-primary);}
  .inv-btn.unequip:hover{background:rgba(255,26,26,.18);}
  .inv-btn:focus-visible{outline:2px solid var(--white-bright);outline-offset:2px;}

  /* === MODAL === */
  /* D-EXPCARD-0716 §2c: commerce confirm converges on exp-card scrim/✕/radius tokens (visual only) */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
  .modal-overlay.open{opacity:1;pointer-events:all;}
  .modal-box{background:var(--black-card);border:1px solid var(--gray-border,#2A2A2A);border-radius:12px;padding:28px;min-width:340px;max-width:440px;width:90%;transform:scale(.95);transition:transform .2s;position:relative;}
  .modal-overlay.open .modal-box{transform:scale(1);}
  .modal-close{position:absolute;top:6px;right:6px;width:44px;height:44px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--gray-light);font-size:20px;cursor:pointer;line-height:1;}
  .modal-close:hover{color:var(--white-bright);}
  .modal-close:focus-visible{outline:2px solid var(--nil-green);outline-offset:2px;}
  .modal-title{font-family:var(--f-display);font-size:26px;letter-spacing:.04em;margin-bottom:4px;}
  .modal-sub{font-size:16px;color:var(--gray-light);margin-bottom:20px;}
  .modal-detail{background:var(--bg-surface-2);border-radius:8px;padding:14px;margin-bottom:16px;}
  .modal-detail-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:16px;}
  .modal-detail-row+.modal-detail-row{border-top:1px solid var(--hairline);}
  .modal-detail-label{color:var(--gray-light);}
  .modal-detail-val{font-weight:600;}
  .modal-detail-val.green{color:var(--nil-green);}
  .modal-actions{display:flex;gap:10px;margin-top:4px;}
  .modal-confirm-btn{flex:1;padding:11px;border-radius:8px;border:none;background:var(--nil-green);color:#04141c;font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:opacity .15s;font-family:var(--f-body);}
  .modal-confirm-btn:hover{opacity:.9;}
  .modal-confirm-btn:focus-visible{outline:2px solid var(--white-bright);outline-offset:2px;}
  .modal-cancel-btn{padding:11px 20px;border-radius:8px;border:1px solid var(--gray-border);background:transparent;color:var(--gray-light);font-size:16px;cursor:pointer;transition:all .15s;font-family:var(--f-body);}
  .modal-cancel-btn:hover{border-color:var(--white-bright);color:var(--white-bright);}
  .modal-note{font-size:16px;color:var(--gray-light);text-align:center;margin-top:10px;}

  /* === TOAST === */
  .toast{position:fixed;bottom:24px;right:24px;background:var(--black-card);border:1px solid var(--nil-green);border-radius:10px;padding:14px 18px;font-size:16px;z-index:400;transform:translateY(80px);opacity:0;transition:all .3s;max-width:320px;}
  .toast.show{transform:translateY(0);opacity:1;}
  .toast-inner{display:flex;align-items:center;gap:10px;}
  .toast-icon{font-size:20px;}
  .toast-msg{line-height:1.4;}
  .toast-title{font-weight:700;color:var(--nil-green);}
  .toast-sub{font-size:16px;color:var(--gray-light);}

  /* === SKELETON LOADING === */
  .skeleton-line{background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;border-radius:4px;height:16px;margin-bottom:8px;}
  .skeleton-card{background:var(--black-soft);border:1px solid var(--gray-border);border-radius:12px;padding:16px;min-height:180px;}
  .skeleton-card .skeleton-line{margin-bottom:12px;}
  .skeleton-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(90deg,var(--black-soft) 25%,#1c1c1c 50%,var(--black-soft) 75%);background-size:200% 100%;}

  /* === EMPTY STATE === */
  .empty-state{text-align:center;padding:48px 20px;color:var(--gray-light);}
  .empty-icon{font-size:36px;margin-bottom:12px;}
  .empty-msg{font-family:var(--f-display);font-size:20px;letter-spacing:.06em;color:var(--gray-light);margin:0 0 8px;}
  .empty-sub{font-size:16px;color:var(--gray-light);margin:0;}
  .loading-text{color:var(--gray-light);font-size:16px;padding:32px;text-align:center;}

  /* === ANIMATIONS === */
  .stagger-in{opacity:0;animation:nil-fadeInUp .3s ease both;}
  .skeleton-line,.skeleton-avatar{animation:nil-shimmer 1.4s infinite;}

  /* === REDUCED MOTION === */
  @media(prefers-reduced-motion:reduce){
    .stagger-in{animation:none;opacity:1;}
    .skeleton-line,.skeleton-avatar{animation:none;background:var(--black-soft);}
    .mkt-card{transition:none;}
    .tab-pane.active{animation:none;}
    .modal-overlay{transition:none;}
    .modal-box{transition:none;}
    .toast{transition:none;}
    .inv-card{transition:none;}
  }

  /* === RESPONSIVE: TABLET (<=1024px) === */
  @media(max-width:1024px){
    .mkt-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
    .inv-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
    .wallet-summary,.portfolio-header{grid-template-columns:repeat(2,1fr);}
  }

  /* === RESPONSIVE: MOBILE (<=767px) === */
  @media(max-width:767px){
    .page-header{padding:16px 12px;}
    .page-header-inner{flex-direction:column;gap:12px;}
    .balance-chip{width:100%;}
    .tab-bar{padding:0 12px;}
    .tab-pane{padding:16px 12px;}
    .mkt-grid{grid-template-columns:1fr 1fr;}
    .inv-grid{grid-template-columns:1fr;}
    .wallet-summary,.portfolio-header{grid-template-columns:1fr;}
    .filter-bar{gap:8px;}
    .search-box{width:100%;}
    .port-table{font-size:16px;}
    .port-table th,.port-table td{padding:8px 6px;}
    .tx-table{font-size:16px;}
    .tx-table th,.tx-table td{padding:8px 6px;}
    .modal-box{min-width:auto;padding:20px;}
    .playmoney-bar{padding:8px 12px;}
  }

  /* === RESPONSIVE: PLAYMONEY BANNER STACK (<=480px) ===
     At narrow widths the icon+text flex-row squeezes the bold label into a
     ~120px column and produces ragged line breaks; stack icon above the
     single text run instead of two cramped flex columns. */
  @media(max-width:480px){
    .playmoney-bar{flex-direction:column;align-items:flex-start;gap:4px;}
    .pm-icon{font-size:18px;}
    .pm-text{width:100%;}
  }

  /* === RESPONSIVE: NARROW (<=359px) === */
  @media(max-width:359px){
    .page-header{padding:12px 8px;}
    .page-title{font-size:22px !important;}
    .tab-pane{padding:12px 8px;}
    .mkt-grid{grid-template-columns:1fr !important;}
    .mkt-stat-val{font-size:16px;}
    .wallet-stat-val,.port-stat-val{font-size:24px;}
    .bc-value{font-size:22px;}
    .inv-grid{grid-template-columns:1fr !important;}
    .hide-narrow{display:none !important;}
  }
}
html[data-route="/nil/redeem"]{
  --rd-gap: clamp(12px, 2.2vw, 22px);
  --rd-pad: clamp(14px, 2.6vw, 26px);
  --rd-radius: 14px;

  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--red-primary, #FF1A1A);
    color: #000;
    padding: 10px 16px;
    z-index: 100;
    font-weight: 700;
  }
  .skip:focus { left: 8px; top: 8px; }

  .app { min-height: 100vh; }

  .content {
    width: min(100% - 2 * clamp(12px, 4vw, 48px), 1320px);
    margin-inline: auto;
    padding-block: clamp(16px, 3vw, 32px);
  }

  /* Play-money banner */
  .playmoney-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--red-primary, #FF1A1A) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--red-primary, #FF1A1A) 45%, transparent);
    border-radius: 10px;
    padding: clamp(10px, 1.8vw, 14px) clamp(12px, 2vw, 18px);
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.4;
    margin-bottom: var(--rd-gap);
  }
  .pm-icon { font-size: 1.2em; flex: none; }

  /* Header */
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rd-gap);
    margin-bottom: clamp(16px, 2.6vw, 26px);
  }
  .ph-left { min-width: 0; }
  .page-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 16px;
    letter-spacing: .18em;
    color: var(--red-primary, #FF1A1A);
    text-transform: uppercase;
  }
  .page-title {
    font-family: var(--font-display, "Graduate", sans-serif);
    font-size: clamp(34px, 6vw, 58px);
    line-height: .95;
    margin: 4px 0 6px;
    letter-spacing: .01em;
  }
  .page-subtitle {
    margin: 0;
    max-width: 56ch;
    color: var(--gray-light, #b8b8c0);
    font-size: clamp(14px, 1.5vw, 17px);
  }

  /* Balance chip */
  .balance-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 12px;
    padding: 12px 18px;
    flex: none;
  }
  .bc-icon { font-size: 1.8em; }
  .bc-label {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gray-light, #9a9aa4);
  }
  .bc-value {
    font-family: var(--font-numerals, var(--font-mono, monospace));
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    color: var(--red-primary, #FF1A1A);
    line-height: 1.05;
  }
  .bc-sub { font-size: 16px; color: var(--gray-light, #8a8a94); }

  /* Filter bar */
  .filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--rd-gap);
  }
  .filter-btn {
    appearance: none;
    background: var(--black-card, #131318);
    color: var(--gray-light, #c8c8d0);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 999px;
    padding: 9px 18px;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .filter-btn:hover { border-color: var(--red-primary, #FF1A1A); }
  .filter-btn.is-active {
    background: var(--red-primary, #FF1A1A);
    color: #1a1207;
    border-color: var(--red-primary, #FF1A1A);
    font-weight: 700;
  }
  .filter-btn:focus-visible {
    outline: 3px solid var(--accent-bright, #5aa9ff);
    outline-offset: 2px;
  }

  /* Grid */
  .redeem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--rd-gap);
  }

  .redeem-card {
    display: flex;
    flex-direction: column;
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: var(--rd-radius);
    padding: var(--rd-pad);
    position: relative;
    overflow: hidden;
  }
  .redeem-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--red-primary, #FF1A1A);
    opacity: .8;
  }
  /* "boost" kind gets the blue half of the ramp so cosmetic (red) vs boost (blue) stay
     visually distinct — was --accent-bright, which resolves red sitewide and had
     collapsed this into a single color; set explicitly to brand-blue instead. */
  .redeem-card[data-kind="boost"]::before { background: var(--brand-blue, #00B7FF); }

  .rc-kind {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono, monospace);
    font-size: 16px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--red-primary, #FF1A1A) 18%, transparent);
    color: var(--red-primary, #FF1A1A);
  }
  .redeem-card[data-kind="boost"] .rc-kind {
    background: color-mix(in srgb, var(--brand-blue, #00B7FF) 18%, transparent);
    color: var(--brand-blue, #00B7FF);
  }
  .rc-name {
    font-family: var(--font-display, "Graduate", sans-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.05;
    margin: 0 0 6px;
  }
  .rc-desc {
    font-size: 16px;
    color: var(--gray-light, #b0b0ba);
    line-height: 1.45;
    margin: 0 0 14px;
    flex: 1;
  }
  .rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rc-cost {
    font-family: var(--font-numerals, var(--font-mono, monospace));
    font-weight: 700;
    font-size: clamp(16px, 2vw, 20px);
    color: var(--red-primary, #FF1A1A);
  }
  .rc-cost-sub { font-size: 16px; color: var(--gray-light, #8a8a94); display: block; }

  .btn {
    appearance: none;
    font: inherit;
    cursor: pointer;
    border-radius: 9px;
    padding: 10px 18px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform .12s ease, background .15s ease, opacity .15s ease;
  }
  .btn:focus-visible {
    outline: 3px solid var(--accent-bright, #5aa9ff);
    outline-offset: 2px;
  }
  .btn-redeem {
    background: var(--red-primary, #FF1A1A);
    color: #1a1207;
  }
  .btn-redeem:hover:not(:disabled) { transform: translateY(-1px); }
  .btn-redeem:disabled {
    background: var(--gray-border, #2a2a33);
    color: var(--gray-light, #7a7a84);
    cursor: not-allowed;
  }

  /* Skeleton */
  .skeleton-card {
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: var(--rd-radius);
    padding: var(--rd-pad);
    animation: nil-redeem-pulse 1.3s ease-in-out infinite;
  }
  .sk-line {
    height: 14px;
    border-radius: 5px;
    background: var(--gray-border, #2a2a33);
    margin-bottom: 12px;
  }

  .compliance-note {
    margin-top: clamp(20px, 3vw, 34px);
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--black-card, #131318);
    border: 1px solid var(--gray-border, #2a2a33);
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-light, #a8a8b2);
  }

  /* Empty / error state */
  .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    color: var(--gray-light, #9a9aa4);
  }

  /* Modal */
  /* D-EXPCARD-0716 §2c: converge on exp-card scrim/✕/radius tokens (visual only) */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 200;
  }
  .modal-overlay[hidden] { display: none; }
  .modal-box {
    background: var(--black-card, #16161c);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 12px;
    padding: clamp(20px, 3vw, 30px);
    width: min(100%, 440px);
    position: relative;
  }
  .modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--gray-light, #b0b0ba);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
  }
  .modal-close:focus-visible { outline: 3px solid var(--accent-bright, #5aa9ff); outline-offset: 2px; }
  .modal-title {
    font-family: var(--font-display, "Graduate", sans-serif);
    font-size: clamp(24px, 3vw, 30px);
    margin: 0 0 4px;
  }
  .modal-sub { margin: 0 0 16px; color: var(--gray-light, #a8a8b2); font-size: 16px; }
  .modal-detail {
    background: var(--bg-page, #0a0a0e);
    border: 1px solid var(--gray-border, #2a2a33);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
  }
  .modal-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 16px;
  }
  .modal-label { color: var(--gray-light, #9a9aa4); }
  .modal-val { font-weight: 700; text-align: right; }
  .modal-val.gold { color: var(--red-primary, #FF1A1A); font-family: var(--font-numerals, monospace); }
  .modal-actions { display: flex; gap: 10px; }
  .modal-actions .btn { flex: 1; }
  .btn-cancel { background: var(--gray-border, #23232b); color: var(--gray-light, #d0d0d8); }
  .btn-confirm { background: var(--red-primary, #FF1A1A); color: #1a1207; }
  .btn-confirm:disabled { opacity: .6; cursor: not-allowed; }
  .modal-note { margin: 14px 0 0; font-size: 16px; text-align: center; color: var(--gray-light, #7a7a84); }

  /* Toast */
  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(8px);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--black-card, #16161c);
    border: 1px solid var(--gray-border, #2a2a33);
    border-left: 4px solid var(--red-primary, #FF1A1A);
    border-radius: 12px;
    padding: 14px 18px;
    max-width: min(92vw, 420px);
    z-index: 300;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    animation: nil-redeem-toastIn .22s ease;
  }
  .toast[hidden] { display: none; }
  .toast.is-error { border-left-color: var(--danger, #e0556b); }
  .toast-icon { font-size: 1.3em; flex: none; }
  .toast-title { font-weight: 700; font-size: 16px; }
  .toast-sub { font-size: 16px; color: var(--gray-light, #a8a8b2); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
    .btn-redeem:hover:not(:disabled) { transform: none; }
  }
}
}
/* === D-EXPCARD-0716 §2c: commerce dialog mobile rects converge on the
   exp-card contract — width min(92vw,420px), radius 16px at <=880px. === */
@media (max-width: 880px) {
  .modal-overlay { padding: 12px; }
  .modal-box { width: min(92vw, 420px); min-width: 0; max-width: none; border-radius: 16px; }
}