/* === R89 aesthetic pass (16 Aug 2026) ================================== */

/* --- 1. Item photo sits in a lit case ---------------------------------- */
/* Catalogue photographs have WHITE backgrounds, and the frame let them run
   edge to edge, so opening an item dropped a bright white slab into a dark
   app. The photograph itself is never touched - filtering it would misreport
   a coin's real colour, which is the last thing a valuation app should do.
   Instead the image is inset into a dark mat with a warm pool of light
   behind it, the way a piece sits in a display case. */
.pv-hero{
  background:
    radial-gradient(ellipse 62% 48% at 50% 38%, rgba(230,180,80,.13), transparent 70%),
    linear-gradient(160deg,#17171c,#0e0e11) !important;
}
.pv-hero .pv-hero-frame{ padding:16px; }
.pv-hero img{ border-radius:8px; box-shadow:0 8px 26px rgba(0,0,0,.55); }
.pv-hero .pv-hero-tag,
.pv-hero .pv-hero-more{ background:rgba(0,0,0,.58); border:1px solid var(--hairline-strong); }

/* A missing photograph was an empty rectangle that read as a loading
   failure. Twenty-one of thirty-six catalogue items are in that state. */
.pv-hero .pv-hero-empty{
  opacity:1 !important;
  border:1px dashed rgba(230,180,80,.3);
  border-radius:12px;
  margin:12px;
  gap:7px;
  align-content:center;
}
.pv-hero .pv-hero-empty svg{ opacity:.5 }
.pv-hero .pv-hero-empty .pv-empty-cap{
  color:var(--text-3); font-size:11.5px; font-weight:500; letter-spacing:.1px;
}

/* --- 2. Duplicate cards: one clear action ------------------------------ */
.dup-actions{ display:flex; align-items:center; gap:18px; margin-top:11px;
  padding-top:10px; border-top:1px solid var(--hairline); }
.dup-act{ font-size:12.5px; font-weight:600; color:var(--text-2); cursor:pointer;
  background:none; border:none; padding:0; font-family:inherit; }
.dup-act.danger{ color:#ff8a8a; margin-left:auto }
.dup-act.gold{ color:var(--gold) }
.dup-primary{ width:100%; margin-top:12px; padding:12px; border:none; border-radius:12px;
  background:var(--cta-bg); color:var(--cta-text); font-weight:800; font-size:13.5px;
  font-family:inherit; cursor:pointer }
.dup-primary.quiet{ background:rgba(90,169,230,.12); color:#5aa9e6;
  border:1px solid rgba(90,169,230,.45) }
.dup-primary.sold{ background:rgba(230,180,80,.12); color:var(--gold);
  border:1px solid rgba(230,180,80,.45) }

/* --- 3. Empty states --------------------------------------------------- */
.ttc-empty{ display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 18px; }
.ttc-empty .ic{ width:62px; height:62px; border-radius:18px; background:var(--card);
  border:1px solid var(--hairline); display:grid; place-items:center; margin-bottom:14px;
  color:var(--gold); }
.ttc-empty .ic svg{ width:26px; height:26px; opacity:.75 }
.ttc-empty .t{ font-size:15px; font-weight:700; color:var(--text) }
.ttc-empty .b{ font-size:12.5px; color:var(--text-2); margin-top:6px; line-height:1.55;
  max-width:270px }
/* The bare class name `cta` already belongs to the big home "Add a
   collectible" card (line ~142: width:100%, display:flex, text-align:left).
   The empty state reuses the name, so it inherited all three: the button
   stretched to the full 292px and its label sat hard left - 53px off centre
   in a box that was itself perfectly centred. Everything the outer rule
   imposes has to be undone explicitly here. */
.ttc-empty .cta{ margin-top:15px; padding:10px 18px; border-radius:11px;
  border:1px solid rgba(230,180,80,.45); background:transparent; color:var(--gold);
  font-weight:700; font-size:12.5px; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; align-self:center; text-align:center; gap:0 }

/* --- 4. Invite card back inside the palette ---------------------------- */
/* Gold is the action colour here; green and red carry meaning (keeper, sold,
   remove). A solid WhatsApp-green panel outranked Account, Verification and
   Privacy underneath it. The green survives as the small status dot. */
.invite{
  background:linear-gradient(135deg, rgba(230,180,80,.16), rgba(230,180,80,.03)) !important;
  border:1px solid rgba(230,180,80,.45);
}
.invite-ic{ background:rgba(230,180,80,.18) !important; color:var(--gold) !important;
  position:relative }
.invite-ic::after{ content:''; position:absolute; right:-1px; top:-1px; width:11px; height:11px;
  border-radius:50%; background:#25d366; border:2px solid #14140f }
.invite .it{ color:var(--text) !important }
.invite .is{ color:var(--text-2) !important }
.invite .chev{ color:var(--gold) !important }
.invite > div{ flex:1; min-width:0 }

/* --- 5. Browse rows ---------------------------------------------------- */
/* The thumb was cut to 46px because year/metal/country and the rarity chip
   overflowed the text column at 320px. Country now shares the detail line and
   the chip is one short word, which buys back more width than the larger
   tile spends. Verified by measurement at 320px, not by eye. */
.br-card .thumb{ width:62px; height:62px; border:1px solid var(--hairline) }
.br-card .thumb.thumb-note{ width:74px; height:44px }
.br-card .item-sub{ font-size:10.5px }
.rar-chip{ display:inline-block; margin-top:6px; font-size:10px; font-weight:700;
  letter-spacing:.4px; padding:2px 7px; border-radius:6px; border:1px solid currentColor }

/* --- 6. Leaderboard: keep the shield on the alias line ----------------- */
.lb-alias{ display:flex; align-items:center; gap:2px; min-width:0 }
.lb-alias > .ttc-alias-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0 }
.lb-alias .ttc-vshield{ flex:none; display:inline-flex; align-items:center }
.lb-alias .ttc-you-suffix{ flex:none; white-space:nowrap }