/* ============================================================================
   RIPZ — shared stylesheet.  MOBILE FIRST.
   ----------------------------------------------------------------------------
   Base rules target a phone. Wider screens are progressive enhancement via
   min-width queries. This is deliberate: most viewing happens on mobile, so the
   phone layout is the real design and desktop is the variant — not the reverse.

   Consequences worth knowing before editing:
     - No data tables. Tables cannot be read on a 380px screen without pinching.
       Use .list / .row instead: a stacked card that becomes tabular on desktop.
     - Touch targets are >= 44px. Do not shrink buttons/links below that.
     - Body text is 15-16px. Anything under 13px must be secondary information
       only — never something a person needs to read to use the page.
     - Horizontal scrolling is a bug, except for deliberately swipeable strips.
   ========================================================================== */

:root{
  /* ---- OFFICIAL RIPZ palette (brand board, 2026-07-27) ------------------
     Golds: Premium #D8B04A · Bright #F5D36B · Antique #B6862A · Bronze #7C5720
            · Dark Bronze #3C2912 · Glow #FFD86C
     Neutrals: Metallic Silver #D8D8D6 · Mid Silver #B9B9B8 · Dark Steel #6F7074
            · Charcoal #1F1F22 · Card Black #111111 · Soft White #F8F8F6
     Semantic data colours (emer/red/blue/violet/amber) are kept — they carry
     meaning (hot/cold, live, stacked) and aren't part of the identity palette. */
  --bg:#111111; --bg2:#17171a; --panel:#1f1f22; --panel2:#26262c;
  --line:#2c2c31; --line2:#3a3a41;
  --ink:#f8f8f6; --muted:#b9b9b8; --dim:#6f7074;
  --gold:#d8b04a; --gold-hi:#ffd86c; --gold-lo:#b6862a;
  --gold-bright:#f5d36b; --bronze:#7c5720; --bronze-dk:#3c2912;
  --silver:#d8d8d6; --silver-hi:#f8f8f6; --silver-lo:#b9b9b8;
  --emer:#37e0a0; --red:#ff6a75; --blue:#5aa9ff; --violet:#b18cff; --amber:#f2a65a;
  --radius:14px; --tap:44px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;overflow-x:clip}
body{
  background:
    radial-gradient(600px 320px at 80% -6%,rgba(216,176,74,.12),transparent 60%),
    radial-gradient(500px 400px at 0% 0%,rgba(216,216,214,.03),transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.wrap{padding:14px var(--pad) 72px;position:relative;z-index:1;max-width:1400px;margin:0 auto}

.metal-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* --- header --------------------------------------------------------------
   Phone: brand on one line, identity chip beneath. No cramming side by side. */
header{display:flex;flex-direction:column;gap:10px}
.brand{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.logo{font-family:'Quicksand',sans-serif;font-weight:700;font-size:25px;letter-spacing:1px;
  line-height:1;text-decoration:none;filter:drop-shadow(0 2px 10px rgba(232,182,76,.35))}
.tag{font-size:9.5px;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase;font-weight:600}
.who{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* .idchip is the HEADER identity pill. It has its own class so that pages which
   redefine .chip for their own small content badges (Holdings, Unclaimed, ...)
   can't accidentally shrink the header — which changed the header height and made
   the nav sit at different distances page to page. */
.chip, .idchip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 12px;
  border-radius:30px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);color:var(--silver)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--emer);
  box-shadow:0 0 10px var(--emer);animation:pulse 2.6s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.asof{font-size:11px;color:var(--dim)}

/* --- nav: a swipeable strip on phones, tabs on desktop -------------------- */
nav{display:flex;gap:4px;margin:14px calc(var(--pad) * -1) 0;padding:0 var(--pad) 2px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line)}
nav::-webkit-scrollbar{display:none}
nav a{flex:none;min-height:var(--tap);display:flex;align-items:center;
  font-size:13px;letter-spacing:1px;text-transform:uppercase;font-weight:600;
  color:var(--muted);text-decoration:none;padding:0 14px;border-radius:10px 10px 0 0;
  border:1px solid transparent;border-bottom:none;position:relative;top:1px;white-space:nowrap}
nav a.on{color:var(--gold-hi);background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-color:var(--line)}
nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
/* Desktop: there's no swipe and the scrollbar is hidden, so overflowing tabs (Admin was the
   casualty) became unreachable. On wide screens let the nav WRAP to as many rows as needed so
   every tab — including Admin — is always visible. Phones keep the single-row swipe strip. */
@media (min-width: 820px){
  nav{flex-wrap:wrap;overflow-x:visible;row-gap:2px}
}
/* Tools group: caret on the main tab + a secondary sub-tab row shown only inside Tools */
nav a .caret{font-size:9px;opacity:.65;margin-left:1px}
nav.subnav{margin-top:0;padding-top:6px;gap:2px}
nav.subnav a{font-size:12px;text-transform:none;letter-spacing:.4px;padding:0 13px;
  min-height:calc(var(--tap) - 8px);color:var(--muted)}
nav.subnav a.on{color:var(--gold-hi)}
/* Settings cog + Help ? as round icon buttons next to the name (tooltip on hover) */
.hicon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:50%;border:1px solid var(--line2);color:var(--muted);text-decoration:none;
  font-size:14px;line-height:1;margin-left:6px}
.hicon:hover{color:var(--gold-hi);border-color:var(--gold)}
/* name pill + the two icons stay together on one row (never wrap apart) */
.idgroup{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}

/* Uniform gap between the nav and the first block of content on EVERY page.
   Each page's first element carried its own margin-top (.hero 16px, .mnote,
   .cols, .titlebar, ...), so the menu-to-content spacing shifted page to page
   and the nav appeared to sit slightly higher or lower. Pinning the top padding
   on #rz-main and zeroing the first child's margin makes it identical everywhere. */
#rz-main{padding-top:16px}
#rz-main>*:first-child{margin-top:0}

/* --- tiles: 2-up on phone, auto-fit on desktop --------------------------- */
.hero{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px}
.hero .tier.wide{grid-column:1 / -1}
/* Tiles are a 3-row grid so the big numbers sit on the SAME baseline across the
   row regardless of whether a tile carries a toggle or how long its label wraps.
   Without this, a tile with a 7/30/90 toggle pushes its value down and the row
   looks broken. */
/* FOUR fixed rows: label / toggle / value / note.
   The toggle gets its OWN row on every tile, left empty when a tile has none.
   Putting the toggle inside the label made it wrap to a second line on the tiles
   that had one, so their values sat lower than the rest and the row looked
   broken. A dedicated row means every value lands on the same baseline. */
.tier{position:relative;border-radius:14px;padding:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  display:grid;grid-template-rows:16px 26px 1fr auto;gap:4px;min-height:132px}
.tier .lab{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center}
.tier .togrow{display:flex;align-items:center;min-height:26px}
.tier .val{font-family:var(--mono);font-size:23px;font-weight:700;letter-spacing:-.5px;
  overflow-wrap:anywhere;align-self:center;line-height:1.1;
  font-variant-numeric:tabular-nums}    /* digits share a width -> columns align */
.tier .note{font-size:11px;color:var(--dim);align-self:end;line-height:1.35}
.tier .spark{position:absolute;right:-8px;bottom:-12px;font-size:56px;opacity:.06;
  font-family:'Orbitron',sans-serif;pointer-events:none}
.tier.mkt{border-color:#1f5c46;box-shadow:0 0 34px -18px rgba(55,224,160,.6)}
.tier.mkt .val{color:var(--emer)}
.tier.top{box-shadow:0 0 34px -18px rgba(232,182,76,.5)}
.tier.top .val{color:var(--gold-hi)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:11px 8px;text-align:center}
.stat .n{font-family:var(--mono);font-size:17px;font-weight:700}
.stat .l{font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.3px}

/* toggle pills — sized for thumbs, not cursors */
.tog{display:inline-flex;gap:2px}
.tog span{font-size:11px;padding:5px 9px;border-radius:20px;cursor:pointer;
  color:var(--dim);border:1px solid transparent;min-height:28px;display:inline-flex;
  align-items:center}
.tog span.on{color:var(--gold-hi);border-color:var(--gold-lo);background:rgba(232,182,76,.08)}

/* --- section headings ---------------------------------------------------- */
.h2{display:flex;align-items:baseline;gap:9px;margin:24px 0 10px;flex-wrap:wrap}
.h2 b{font-family:'Orbitron',sans-serif;font-size:13.5px;letter-spacing:2px;
  text-transform:uppercase;font-weight:700}
.h2 .sub{font-size:11.5px;color:var(--dim)}
.h2 .right{font-size:11.5px;color:var(--dim)}   /* sits right after the sub; the injected ↑Top keeps margin-left:auto to hold the far right */

/* --- LIST: replaces tables. Stacked rows on phone, columns on desktop -----
   Each .row owns its labels via data-l attributes so the header can vanish on
   mobile without the numbers becoming meaningless. */
.list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.list .lhead{display:none}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:11px 13px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row:active{background:rgba(255,255,255,.03)}
.row .main{min-width:0}
.row .t{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{font-size:11.5px;color:var(--dim);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .v{font-family:var(--mono);font-size:14.5px;font-weight:700;text-align:right;white-space:nowrap}
.row .v small{display:block;font-size:10.5px;color:var(--dim);font-weight:400;margin-top:2px}
/* Extra columns exist only on desktop; on a phone the row shows the essentials.
   THIS MUST STAY ABOVE THE min-width:960px BLOCK. It previously sat below it
   with the same specificity, so it won everywhere and .extra never rendered at
   any width — which is why Serial, When and Owned were blank columns and why
   the value slid one column left into its neighbour's heading. */
.row .extra{display:none}
a.row{text-decoration:none;color:inherit}

/* --- card thumbnails ----------------------------------------------------- */
.thumb{width:40px;height:56px;border-radius:5px;object-fit:cover;background:var(--panel2);
  border:1px solid var(--line2);display:block;flex:none}
.thumb.lg{width:56px;height:78px}
.thumb.ph{display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--dim)}

/* --- Platform-wide "Image Coming Soon" placeholder ----------------------- *
   Any .ph element that is EMPTY renders a framed "Image Coming Soon" label.
   Pages size their own .ph (thumb / mimg / art / th); this adds the shared
   frame + the label so a missing image looks identical everywhere and never
   like an error. Emptying a .ph div (no text) triggers the label. */
.ph{border:1px solid var(--line2);border-radius:8px;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:var(--panel2);color:var(--dim);overflow:hidden}
.ph:empty::after{content:"Image Coming Soon";font-family:var(--mono);
    font-size:9px;line-height:1.25;letter-spacing:.2px;padding:4px}

/* --- badges -------------------------------------------------------------- */
.badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.7px;
  padding:2px 7px;border-radius:20px;text-transform:uppercase;vertical-align:middle;
  white-space:nowrap}
.badge.gold{background:rgba(232,182,76,.14);color:var(--gold-hi);border:1px solid var(--gold-lo)}
.badge.emer{background:rgba(55,224,160,.13);color:var(--emer);border:1px solid #1f5c46}
.badge.violet{background:rgba(177,140,255,.13);color:var(--violet);border:1px solid #4a3a73}
.badge.blue{background:rgba(90,169,255,.13);color:var(--blue);border:1px solid #2b4d75}
.badge.red{background:rgba(255,106,117,.12);color:var(--red);border:1px solid #6d2f36}
.badge.dim{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--line2)}

/* --- bars (sport split, set completion) ---------------------------------- */
.bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
.bar.emer i{background:linear-gradient(90deg,#1f5c46,var(--emer))}

/* --- states -------------------------------------------------------------- */
.loading{text-align:center;color:var(--dim);padding:40px 16px;font-size:13.5px}
.loading .sp{display:inline-block;width:16px;height:16px;border:2px solid var(--line2);
  border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;
  vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.err{background:rgba(255,106,117,.07);border:1px solid #6d2f36;color:#ffb4b4;
  padding:14px;border-radius:12px;font-size:13.5px}
.empty{text-align:center;color:var(--dim);padding:36px 16px;font-size:13.5px}

footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--dim);font-size:11px;line-height:1.8;text-align:center}

/* ==========================================================================
   TABLET  >= 640px
   ========================================================================== */
@media (min-width:640px){
  :root{--pad:18px}
  body{font-size:15.5px}
  header{flex-direction:row;align-items:flex-start;justify-content:space-between}
  .who{flex-direction:column;align-items:flex-end;gap:5px}
  .logo{font-size:27px}
  .hero{grid-template-columns:repeat(3,1fr);gap:12px}
  .hero .tier.wide{grid-column:auto}
  .tier{padding:17px 18px}
  .tier .val{font-size:27px}
  .stats{grid-template-columns:repeat(6,1fr)}
  .stat .n{font-size:19px}
}

/* ==========================================================================
   DESKTOP  >= 960px — only here do rows become tabular
   ========================================================================== */
@media (min-width:960px){
  .wrap{padding:22px 20px 90px}
  .logo{font-size:29px}
  .hero{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .tier .val{font-size:30px}

  /* HEADER AND BODY MUST SHARE EXACTLY THE SAME GEOMETRY.
     Two bugs made the columns drift apart:
     1. padding was 10px 14px here but 11px 13px on .row — a 1px shift on every
        list, which reads as "nothing lines up".
     2. alignment was positional: span 2 forced left, everything else right.
        That is only correct for lists whose second column is the card name
        (the ones with a thumbnail). In a Set / Owned / Cost list the second
        column is a number, so "Owned" sat left while its values sat right.
     Alignment is now declared in the markup with .l, so it cannot guess wrong. */
  .list .lhead{display:grid;grid-template-columns:var(--cols,auto 1fr repeat(3,110px));
    gap:12px;padding:10px 13px;background:#0b1017;color:var(--muted);
    font-size:10.5px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
  .list .lhead span{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .list .lhead span.l{text-align:left}
  .row{grid-template-columns:var(--cols,auto 1fr repeat(3,110px));gap:12px}
  .row .extra{display:block;font-family:var(--mono);font-size:13.5px;text-align:right}
  /* An .echo is a MOBILE-ONLY copy of a column that is hidden on phones.
     On desktop that column is visible in its own right, so the copy must go —
     otherwise the serial renders under VALUE and the completion % under COST
     TO FINISH, i.e. every sub-value sitting one column to the right of its
     own heading. Sub-values that genuinely belong to their column (profit %,
     for instance) are plain <small> and are untouched by this. */
  .row .v small.echo{display:none}
  .row .extra small{display:block;font-size:10.5px;color:var(--dim);font-weight:400;
    margin-top:2px;font-family:var(--mono)}
  .row:hover{background:rgba(255,255,255,.022)}
}



/* --- compact side-by-side panels -----------------------------------------
   A dashboard should be scannable, not a long scroll. Secondary breakdowns
   (by sport, by year) sit in a 2-up grid on wider screens and stack on phones.
   Rows inside are tighter than the main .list. */
.duo{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:860px){ .duo{grid-template-columns:1fr 1fr} }

.mini{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.mini .mh{display:flex;align-items:baseline;gap:8px;padding:11px 13px 8px}
.mini .mh b{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase}
.mini .mh .sub{font-size:10.5px;color:var(--dim);margin-left:auto}
.mrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:7px 13px;border-top:1px solid var(--line)}
.mrow .t{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.mrow .t span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .s{font-size:10.5px;color:var(--dim)}
.mrow .v{font-family:var(--mono);font-size:13px;font-weight:700;text-align:right;white-space:nowrap}
.mrow .bar{grid-column:1 / -1;margin:2px 0 1px}

/* dropdown used for "show N" controls */
select.pick{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);
  border-radius:8px;padding:5px 9px;font-size:11.5px;font-family:inherit;outline:none;
  min-height:30px}
select.pick:focus{border-color:var(--gold-lo)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* "all N >" link in a section header — the overview shows a teaser, the tab
   shows the ranked list */
.h2 .more{font-size:11px;color:var(--gold);text-decoration:none;border:1px solid var(--line2);
  padding:6px 11px;border-radius:8px;white-space:nowrap;min-height:32px;display:inline-flex;
  align-items:center}
.h2 .more:hover{color:var(--gold-hi);border-color:var(--gold-lo)}

/* sets page: affordability filter chips */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 4px}
.chips button{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  font-size:11.5px;font-weight:700;padding:8px 13px;border-radius:9px;cursor:pointer;
  min-height:34px;font-family:inherit}
.chips button.on{background:var(--panel2);border-color:var(--gold-lo);color:var(--gold-hi)}
.chips button:hover{color:var(--ink)}


/* --- value concentration --------------------------------------------------
   Header on top, then $ on the left and % on the right, so the eye reads
   "this much money / that share" in one movement. */
.conc2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.conc2 .cc{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  overflow:hidden}
.conc2 .ch{background:#0b1017;border-bottom:1px solid var(--line);padding:7px 10px;
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:center}
.conc2 .cb{display:grid;grid-template-columns:1fr 1fr}
.conc2 .cb div{padding:11px 8px;text-align:center}
.conc2 .cb .cv{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gold-hi);
  border-right:1px solid var(--line)}
.conc2 .cb .cp{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
.conc2 .cb small{display:block;font-size:9px;color:var(--dim);font-weight:400;
  margin-top:3px;letter-spacing:.4px;text-transform:uppercase}
@media (max-width:520px){
  .conc2{grid-template-columns:1fr}
}

/* --- two-column ledger (purchases | sales) -------------------------------- */
.duo2{display:grid;grid-template-columns:1fr;gap:12px;margin-top:9px}
@media (min-width:860px){ .duo2{grid-template-columns:1fr 1fr;gap:14px} }
.duo2 .dh{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.duo2 .dh b{font-family:'Orbitron',sans-serif;font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase}
.duo2 .dh .sub{font-size:11px;color:var(--dim)}
.duo2 .dh .in{color:var(--emer)} .duo2 .dh .out{color:var(--red)}
.pk{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--violet);border:1px solid #4a3a73;border-radius:20px;padding:1px 6px;
  margin-left:6px;vertical-align:middle}

/* outlier guard row — lives with the multipliers because both reprice the
   same headline number */
.orow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}
.orow .ol{flex:1;min-width:200px}
.orow .ol b{display:block;font-size:11px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.orow .ol span{display:block;font-size:11px;color:var(--dim);margin-top:2px;line-height:1.45}
.orow .pick{flex:none}


/* ===== shared card modal ===== */
  /* ---- card modal --------------------------------------------------------- */
  .ovl{position:fixed;inset:0;background:rgba(3,5,8,.72);backdrop-filter:blur(3px);
    z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0}
  @media (min-width:640px){ .ovl{align-items:center;padding:20px} }
  .modal{background:var(--panel);border:1px solid var(--line2);border-radius:16px 16px 0 0;
    width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
  @media (min-width:640px){ .modal{border-radius:16px} }
  .modal .mhead{display:flex;gap:14px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
  .modal .mimg{width:96px;height:128px;border-radius:10px;object-fit:cover;flex:none;
    background:var(--panel2);border:1px solid var(--line2)}
  .modal .mimg.ph{display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px}
  .modal .mtitle{min-width:0;flex:1}
  .modal .mtitle h3{font-size:18px;font-weight:700;margin:0 0 3px;line-height:1.15}
  .modal .mtitle .ms{font-size:12.5px;color:var(--dim)}
  .modal .mval{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--gold-hi);margin-top:8px}
  .modal .mx{position:absolute;top:12px;right:14px;background:var(--panel2);border:1px solid var(--line2);
    color:var(--ink);width:32px;height:32px;border-radius:8px;font-size:16px;cursor:pointer;z-index:2}
  .modal .sect{padding:14px 16px}
  .modal .sect h4{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
    margin:0 0 9px;font-weight:700}
  .own{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
  .own:first-child{border-top:0}
  .own .orank{font-family:var(--mono);font-size:11px;color:var(--dim);width:22px;flex:none}
  .own .oname{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .own .oname.me{color:var(--gold-hi)} .own .oname.sys{color:var(--muted);font-weight:400;font-style:italic}
  .own .ocount{font-family:var(--mono);font-size:13px;font-weight:700}
  .own .obar{flex:1;max-width:120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
  .own .obar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
.own.untraced .oname{font-style:italic}
.own.untraced .obar i{background:repeating-linear-gradient(45deg,var(--line2),var(--line2) 4px,transparent 4px,transparent 8px)}
.mnote{font-size:11px;color:var(--dim);line-height:1.55;margin-top:10px}
.mnote b{color:var(--gold-hi);font-family:var(--mono)}
  .mnote2{font-size:11px;color:var(--dim);padding:0 16px 16px;line-height:1.5}
  .modal .mbtn{display:inline-block;font-size:12px;font-weight:700;color:#06080c;
    background:linear-gradient(180deg,var(--gold),var(--gold-lo));border-radius:9px;
    padding:8px 14px;text-decoration:none;min-height:34px}
  .modal .mbtn:hover{filter:brightness(1.06)}


/* ===== tooltips (replace hard-to-read small print) ===== */
.lab{display:inline-flex;align-items:center;gap:6px}
.info{width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);
  background:var(--panel2);color:var(--muted);font-family:var(--mono);font-size:9.5px;
  font-weight:700;line-height:1;cursor:pointer;padding:0;display:inline-flex;
  align-items:center;justify-content:center;flex:none}
.info:hover{color:var(--gold-hi);border-color:var(--gold-lo)}
.tipbox{position:fixed;z-index:80;max-width:280px;background:var(--panel2);
  border:1px solid var(--gold-lo);border-radius:11px;padding:11px 13px;
  font-size:12px;line-height:1.5;color:var(--ink);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.tipbox b{color:var(--gold-hi)}

/* unpriced-cards link in a tile subline */
.tier .note .unl{color:var(--gold);text-decoration:none;font-weight:700}
.tier .note .unl:hover{color:var(--gold-hi)}

/* Premium CSV export button (Holdings; reused by Sets/Performance exports) */
.expbtn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.expbtn:hover{border-color:var(--gold);color:var(--gold-hi)}

/* Transient toast (R.toast) — replaces native alert() for gates + validation */
.rz-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--panel2,#141821);border:1px solid var(--gold,#d4af5a);color:var(--gold-hi,#f2d585);
  font-size:13px;font-weight:600;padding:11px 18px;border-radius:11px;z-index:9500;
  box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;max-width:80vw;text-align:center}
.rz-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* trust-pack footer links (#157) */
.footlinks{margin-top:9px;display:flex;gap:16px;flex-wrap:wrap}
.footlinks a{color:var(--muted,#8a93a6);font-size:11.5px;text-decoration:none;border-bottom:1px solid transparent}
.footlinks a:hover{color:var(--gold-hi,#f2d585);border-bottom-color:var(--gold-lo,#8a6d2f)}