:root{
  --ink:#E4DFD3;
  --paper:#15161A;
  --paper-2:#1E2024;
  --gold:#4AC5D9;
  --highlight:#4AC5D9;
  --highlight-rgb:74,197,217; /* same colour as --highlight, as R,G,B — used for see-through tints */
  /* Detail slide-out colours. "highlight" tints the panel, its accents
   * and the dimmed page behind it with --highlight. Change to "cover"
   * to go back to the old look: accents picked from each CD's cover art
   * and a plain grey page dim. */
  --panel-colours: highlight;
  --muted:#AFA99C;
  --line: rgba(228,223,211,0.12);
  --shadow: rgba(0,0,0,0.6);
  --danger:#C24C3D;
  --sell:#3F8F5B;
  --font-display:'Fraunces', serif;
  --font-hand:'Fraunces', cursive;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

button{ font-family:var(--font-body); cursor:pointer; }
input, select, textarea{ font-family:var(--font-body); }
:focus-visible{ outline:2px solid var(--highlight); outline-offset:2px; }

.wrap{ max-width:1440px; margin:0 auto; padding:28px 20px 80px; }

header.top{
  padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:26px;
  background:var(--paper);
}
@media (min-width:641px){
  header.top{ position:sticky; top:0; z-index:20; }
}
.header-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.header-row-1{ margin-bottom:18px; justify-content:flex-end; }
.header-row-2{ flex-wrap:nowrap; }
@media (max-width:900px){
  .header-row-2{ flex-wrap:wrap; }
}

.account-row{ display:flex; align-items:center; gap:14px; }

.header-icon-btn{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--ink); display:inline-flex; align-items:center; justify-content:center;
  transition:color 0.15s, transform 0.1s; text-decoration:none;
}
.header-icon-btn:hover{ color:var(--highlight); }
.header-icon-btn:active{ transform:scale(0.92); }
.header-icon-btn svg{ width:26px; height:26px; }
.header-icon-btn.plus-icon{ font-size:30px; line-height:1; font-weight:300; }

.page-title-row{ display:flex; flex-direction:column; gap:3px; flex:0 1 auto; min-width:0; }
.brand-title{ margin:0; }
.brand-title a{
  font-family:var(--font-hand); font-weight:400; font-size:clamp(26px,3.6vw,34px);
  letter-spacing:0.01em; color:var(--ink); text-decoration:none;
}
.brand-title a:hover{ color:var(--highlight); }
.page-subtitle-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.page-subtitle{
  font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--highlight);
}
.page-subtitle:empty{ display:none; }
.page-count{ font-size:13px; color:var(--muted); white-space:nowrap; }

.header-controls{ display:flex; flex-wrap:nowrap; align-items:center; gap:10px; justify-content:flex-end; }
.header-controls input[type="search"]{
  flex:0 1 180px; min-width:110px; padding:8px 11px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper-2); color:var(--ink); font-size:14px;
}
.header-controls select{
  flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper-2); color:var(--ink); font-size:14px;
}
.filter-count{ color:var(--muted); font-size:13px; white-space:nowrap; }

.view-toggle{
  display:flex; flex:0 0 auto; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--paper-2);
}
.view-toggle-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:none; background:transparent;
  color:var(--muted); cursor:pointer;
}
.view-toggle-btn + .view-toggle-btn{ border-left:1px solid var(--line); }
.view-toggle-btn svg{ width:16px; height:16px; }
.view-toggle-btn:hover{ color:var(--ink); }
.view-toggle-btn[aria-pressed="true"]{ color:var(--highlight); background:rgba(74,197,217,0.16); }

.site-nav{ display:flex; gap:8px; flex-wrap:nowrap; }
.nav-btn{ background:#26282D; text-decoration:none; }
.nav-btn.active{ border-color:var(--highlight); color:var(--highlight); }

.hamburger-btn{ display:none; }
.mobile-nav-menu{ display:none; }

@media (max-width:640px){
  .header-controls{ flex-direction:column; align-items:stretch; width:100%; }
  .header-controls input[type="search"],
  .header-controls select{ flex:1 1 auto; width:100%; }
  .site-nav{ display:none; }

  /* header-row-1 no longer needs reserved height now that account-row
     is fixed to the bottom — it was only holding that space open so
     header-row-2 didn't jump up while account-row still sat at the
     top. Now it can collapse away entirely. */
  .header-row-1{ min-height:0; margin-bottom:0; }

  /* Keep the account icons (account/export/sign-out/scan/+) visible
     while scrolling a long list, rather than scrolling away with the
     rest of the header. Fixed to the bottom (easier thumb reach),
     spanning full width the same way the record flyout's own bottom
     action row (.panel-foot) does, rather than floating as a pill. */
  .account-row{
    position:fixed; bottom:0; left:0; right:0; z-index:30;
    background:var(--paper); border-top:1px solid var(--line);
    padding:16px 20px; border-radius:0; justify-content:flex-end;
  }

  /* Page navigation (All/Artists/Years/Labels/Wishlist/Selling)
     collapses into a hamburger fixed to the top-right corner instead
     of a page-jump dropdown sitting inline in the controls row. */
  .hamburger-btn{
    display:flex; position:fixed; top:16px; right:16px; z-index:31;
    background:var(--paper); padding:9px; border-radius:50%;
    box-shadow:0 2px 10px rgba(0,0,0,0.45);
  }
  .hamburger-btn svg{ width:20px; height:20px; }
  .mobile-nav-menu{
    display:none; flex-direction:column; position:fixed; top:64px; right:16px; z-index:31;
    background:var(--paper); border:1px solid var(--line); border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,0.5); overflow:hidden; min-width:160px;
  }
  .mobile-nav-menu.open{ display:flex; }
  .mobile-nav-link{
    padding:12px 16px; color:var(--ink); text-decoration:none; font-size:14px;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav-link:last-child{ border-bottom:none; }
  .mobile-nav-link:hover{ background:var(--paper-2); }
  .mobile-nav-link.active{ color:var(--highlight); background:var(--paper-2); }

  /* The grid/list toggle lives in the hamburger menu on mobile instead
     of the header — the header-controls copy (desktop) hides here, and
     the mobile-nav-menu copy (hidden by default, see below) takes over. */
  .header-controls > .view-toggle{ display:none; }
  .mobile-nav-view-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 16px; border-bottom:1px solid var(--line);
  }
  .mobile-nav-view-label{ font-size:13px; color:var(--muted); }

  /* Extra clearance so the last row of content/random picks doesn't
     end up hidden behind the fixed bottom bar. */
  .wrap{ padding-bottom:96px; }
}

.artist-list{
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper-2);
  margin-top:4px;
}
.artist-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line); transition:background 0.12s;
}
.artist-row:last-child{ border-bottom:none; }
.artist-row:hover{ background:var(--paper); color:var(--highlight); }
button.artist-row{ background:none; border:none; border-bottom:1px solid var(--line); width:100%; font:inherit; cursor:pointer; text-align:left; }
button.artist-row:last-child{ border-bottom:none; }
.artist-row-name{ font-weight:500; font-size:15px; }
.artist-row-count{ color:var(--muted); font-size:13px; white-space:nowrap; }

/* ---------- Artists page accordion ---------- */
.artist-acc-item:last-child > .artist-row{ border-bottom:none; }
.artist-row-right{ display:flex; align-items:center; gap:10px; }
.artist-row-chevron{ width:16px; height:16px; color:var(--muted); flex:none; transition:transform 0.18s ease; }
.artist-row[aria-expanded="true"] .artist-row-chevron{ transform:rotate(90deg); color:var(--cover-accent, var(--highlight)); }
.artist-row[aria-expanded="true"] .artist-row-name{ color:var(--cover-accent, var(--highlight)); }
.artist-acc-panel{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:6px 16px 6px calc(16px + 0px);
}
.artist-acc-item:last-child .artist-acc-panel{ border-bottom:none; }
.artist-panel-status{ color:var(--muted); font-size:13.5px; padding:10px 0; margin:0; }
.artist-album-row{
  display:flex; align-items:center; gap:12px; padding:8px 0;
  text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line);
}
.artist-album-row:last-child{ border-bottom:none; }
button.artist-album-row{ background:none; border:none; border-bottom:1px solid var(--line); width:100%; font:inherit; cursor:pointer; text-align:left; }
button.artist-album-row:last-child{ border-bottom:none; }
.artist-album-row:hover .artist-album-title{ color:var(--cover-accent, var(--highlight)); }
.artist-album-cover{
  width:40px; height:40px; flex:none; border-radius:3px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--paper-2);
}
/* Accordion albums follow the header's grid/list toggle: cover-only
 * cards five across in grid view (two on phones), the compact rows in list view. */
.acc-album-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; padding:10px 0; }
@media (min-width:640px){
  .acc-album-grid{ grid-template-columns:repeat(5, 1fr); }
}
body:not(.view-list) .acc-album-rows{ display:none; }
.wishlist-card-cover.cover-only::after{ display:none; } /* no text to keep legible */
body.view-list .acc-album-grid{ display:none; }
.artist-album-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.artist-album-title{
  font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color 0.15s ease;
}
.artist-album-year{ font-size:12px; color:var(--muted); }

.btn{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:8px 13px; border-radius:3px; font-size:14.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px; transition:background 0.15s, transform 0.1s;
  text-decoration:none;
}
.btn:hover{ background:var(--paper-2); }
.btn:active{ transform:scale(0.98); }
.btn.primary{ background:var(--highlight); border-color:var(--highlight); color:#0B1606; }
.btn.primary:hover{ filter:brightness(0.9); }
.btn.danger{ border-color:var(--danger); color:var(--danger); }
.btn.danger:hover{ background:rgba(163,57,46,0.12); }
.btn.sell{ border-color:var(--sell); color:var(--sell); }
.btn.sell:hover{ background:rgba(63,143,91,0.12); }
.btn.ghost{ border-color:transparent; color:var(--muted); }
.btn.ghost:hover{ background:var(--paper-2); color:var(--ink); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn svg{ width:16px; height:16px; flex:none; }

.icon-btn{
  width:42px; height:42px; padding:0; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; font-weight:400;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn img{ width:19px; height:19px; object-fit:contain; }
.panel-foot .icon-btn{ border-radius:3px; }

/* ---------- login page ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  width:min(340px, 100%); background:var(--paper-2); border:1px solid var(--line);
  border-radius:6px; padding:30px 26px; text-align:left;
}
.login-card h1{
  font-family:var(--font-hand); font-weight:400; font-size:30px; margin:0 0 6px;
}
.login-card .sub{ color:var(--muted); font-size:14px; margin:0 0 20px; }
.login-error{
  background:rgba(163,57,46,0.12); color:var(--danger); border:1px solid var(--danger);
  border-radius:3px; padding:9px 12px; font-size:13.5px; margin:0 0 16px;
}
.login-submit{ width:100%; justify-content:center; margin-top:4px; }
/* data-size="flexible" (set in login.php) makes Cloudflare size the
   widget's iframe to this element's own width via a ResizeObserver —
   the default fixed 300px-wide widget was wider than the login card's
   content area on small phones, so it overflowed/overlapped the card
   edge. width:100% here is what that flexible mode measures against. */
.cf-turnstile{ margin:14px 0 4px; width:100%; overflow:hidden; }

.rack{
  display:flex; flex-direction:column; gap:26px; min-height:160px;
}
.artist-group{
  position:relative;
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:22px 18px 20px; margin-top:14px;
}
/* The home page's copy of Random Picks (#home-random-group) sits as a
 * plain sibling above #artist-list rather than inside .rack's flex
 * column, so it needs its own bottom margin for breathing room before
 * the accordion — the rack's own copy gets that for free from .rack's
 * gap. */
#home-random-group{
  margin-bottom:22px;
}
/* The "tape tag" look for these two labels is switched off for now —
 * they're plain text instead. To bring the tape back, swap each rule
 * below for its commented-out original.
 *
 * .artist-tab (original):
 *   position:absolute; top:-13px; left:20px; z-index:2;
 *   font-family:var(--font-hand); font-size:16px; line-height:1;
 *   color:#2B0A1A; background:rgba(255,46,147,0.96);
 *   padding:6px 18px 8px; border-radius:2px;
 *   transform:rotate(-2.6deg); box-shadow:0 2px 5px rgba(0,0,0,0.4);
 */
.artist-tab{
  display:block; margin:-6px 0 12px;
  font-family:var(--font-hand); font-size:16px; line-height:1.2;
  color:var(--ink);
}
.wishlist-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
@media (min-width:640px){
  .wishlist-grid{ grid-template-columns:repeat(5, 1fr); }
}
.wishlist-card{
  background:var(--paper-2); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
/* .wishlist-card-tab (original tape look):
 *   position:absolute; top:10px; left:10px; z-index:2; max-width:calc(100% - 20px);
 *   font-family:var(--font-hand); font-size:13px; line-height:1.2;
 *   color:#2B0A1A; background:rgba(255,46,147,0.96);
 *   padding:5px 12px 7px; border-radius:2px;
 *   transform:rotate(-2.6deg); box-shadow:0 2px 5px rgba(0,0,0,0.4);
 *   white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 * Now plain text over the cover, so the artist name is still shown. */
.wishlist-card-tab{
  position:absolute; top:10px; left:10px; z-index:2; max-width:calc(100% - 20px);
  font-family:var(--font-hand); font-size:13px; line-height:1.2; font-weight:600;
  color:#FFFFFF; text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wishlist-card-cover{
  aspect-ratio:1/1; border:none; padding:0; width:100%; position:relative; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:flex-end; cursor:pointer;
  transition:transform 0.15s ease;
}
.wishlist-card-cover:hover{ transform:translateY(-2px); }
.wishlist-card-cover::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(4,4,4,0.9), rgba(4,4,4,0) 55%);
}
.wishlist-card-title{
  position:relative; z-index:1; width:100%; padding:10px;
  font-family:var(--font-body); font-weight:600; font-size:12.5px; line-height:1.3;
  color:#FFFFFF; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:left; text-shadow:0 1px 3px rgba(0,0,0,0.55);
}
.wishlist-card-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:10.5px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  color:#EAF6EC; background:rgba(58,122,74,0.92);
  padding:4px 8px; border-radius:3px; white-space:nowrap;
  box-shadow:0 2px 5px rgba(0,0,0,0.35);
}
body.view-list .wishlist-card-badge{
  position:static; margin-left:8px; box-shadow:none;
}
.wishlist-card-badge-sold{
  color:#F5EAEA; background:rgba(122,58,58,0.92);
}
.wishlist-card-links{ display:flex; flex-wrap:wrap; gap:6px; padding:10px; }
.wishlist-card-links a{
  font-size:11.5px; padding:5px 9px; border-radius:3px; background:#26282D; color:var(--ink);
  text-decoration:none; border:1px solid var(--line); white-space:nowrap;
}
.wishlist-card-links a:hover{ color:var(--highlight); border-color:var(--highlight); }

/* ---------- list view ----------
 * Same cards, same data — the info block below is always in the DOM
 * and just hidden in grid mode, so no re-render is needed to switch
 * views, only a class on <body>. */
.wishlist-card-info{ display:none; }
body.view-list .wishlist-grid{
  display:block;
}
/* Random picks keeps a 3-column layout in list view on desktop —
 * unlike the rest of the collection, it's a short, fixed-length
 * teaser section, and a single full-width column of it leaves a lot
 * of a wide screen empty. Mobile still stacks it single-column, same
 * as everything else in list view. */
@media (min-width:640px){
  body.view-list .random-picks-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    column-gap:28px;
  }
}
body.view-list .wishlist-card{
  flex-direction:row; align-items:center; gap:12px;
  background:transparent; border-radius:0; overflow:visible;
  border-bottom:1px solid rgba(228,223,211,0.14);
  padding:8px 2px;
}
body.view-list .wishlist-card:last-child{ border-bottom:none; }
body.view-list .wishlist-card-cover{
  width:52px; height:52px; flex:0 0 52px; border-radius:4px;
}
body.view-list .wishlist-card-cover::after{ display:none; }
body.view-list .wishlist-card-tab,
body.view-list .wishlist-card-title{ display:none; }
body.view-list .wishlist-card-info{
  display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto;
  border:none; background:transparent; padding:0; margin:0; text-align:left; cursor:pointer;
}
body.view-list .wishlist-card-info-artist{
  font-family:var(--font-hand); font-size:15px; color:var(--ink); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.view-list .wishlist-card-info-title{
  font-family:var(--font-body); font-size:12.5px; color:var(--muted); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.view-list .wishlist-card-links{ flex:0 0 auto; width:auto; padding:0; }
/* On narrow screens there's no room for four full-text link buttons
 * next to the cover + info block in list view, so instead of hiding
 * them entirely, each shrinks to a small lettered circle (first
 * initial only) — still clickable, still labeled for screen readers
 * (the full "eBay"/"Amazon"/etc. text is still there, just visually
 * collapsed via font-size:0 + ::first-letter), just compact enough to
 * fit the row. Grid view and wider list view keep the full-text
 * buttons as before. */
@media (max-width:640px){
  body.view-list .wishlist-card-links{ display:flex; gap:6px; padding:0; }
  body.view-list .wishlist-card-links a{
    display:block; width:22px; height:22px; line-height:22px; flex:0 0 22px;
    padding:0; border-radius:50%; text-align:center;
    font-size:0; white-space:nowrap; overflow:hidden;
  }
  body.view-list .wishlist-card-links a::first-letter{
    font-size:11px; font-weight:700; text-transform:uppercase;
  }
}

.empty-rack{ width:100%; text-align:center; padding:36px 12px; color:var(--muted); }
.empty-rack svg{ width:56px; height:56px; opacity:0.5; margin-bottom:10px; }
.empty-rack p{ margin:4px 0; font-size:15px; }
.empty-rack .btn{ margin-top:14px; }

.scrim{
  position:fixed; inset:0; background:rgba(20,20,20,0.4); opacity:0; pointer-events:none;
  transition:opacity 0.18s ease; z-index:40;
}
.scrim.open{ opacity:1; pointer-events:auto; }
:root[data-panel-colours="highlight"] .scrim{ background:rgba(var(--highlight-rgb),0.18); }

.panel{
  position:fixed; top:0; right:0; height:100%; width:50vw;
  background:var(--paper); border-left:1px solid var(--line); z-index:41;
  transform:translateX(100%); transition:transform 0.22s ease;
  display:flex; flex-direction:column; box-shadow:-8px 0 24px var(--shadow);
}
.panel.open{ transform:translateX(0); }
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.panel-head h2{
  font-family:var(--font-hand); font-size:24px; font-weight:400; margin:0;
  color:var(--ink);
}
.panel-close{ background:none; border:none; color:var(--muted); font-size:22px; line-height:1; padding:4px 8px; }
.panel-body{
  padding:20px; overflow-y:auto; flex:1;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:background-image 0.2s ease;
}
.panel-foot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.panel-foot-left{ display:flex; gap:8px; margin-right:auto; }
.dup-warning-text{ align-self:center; color:var(--muted); font-size:13.5px; margin-right:auto; }

.detail-meta-row{ margin-bottom:20px; }
.detail-columns{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.detail-col-stack{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.detail-panel-card{
  background:var(--paper-2); border-radius:6px; padding:18px;
  display:flex; flex-direction:column; min-width:0;
}
.detail-notes-row{ margin-top:20px; }
.detail-empty-note{ color:var(--muted); font-size:13.5px; margin:0; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:5px; font-weight:500; }
.field input, .field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper-2); color:var(--ink); font-size:14.5px;
}
.field textarea{ resize:vertical; min-height:64px; }
.field.mono input{ font-family:var(--font-mono); letter-spacing:0.02em; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.checkbox-field label{
  display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink);
  font-weight:normal; margin-bottom:0; cursor:pointer;
}
.checkbox-field input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--highlight); flex:none; }

.wishlist-mode-field{
  background:var(--paper-2); border:1px solid var(--line); border-radius:5px;
  padding:11px 13px; margin-bottom:16px;
}
.wishlist-mode-field label{ color:var(--highlight); font-weight:500; }

.lookup-row{ display:flex; gap:8px; align-items:flex-end; margin-bottom:16px; }
.lookup-row .field{ flex:1; margin-bottom:0; }
.lookup-status{ font-size:13px; color:var(--muted); margin-top:8px; min-height:18px; }
.lookup-status.hit{ color:var(--gold); }
.lookup-status.err{ color:var(--danger); }
.lookup-matches{ margin-top:8px; }
.lookup-matches select{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper-2); color:var(--ink); font-size:13.5px;
}

.cover-editor{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.cover-preview{
  width:96px; height:96px; border-radius:4px; overflow:hidden; flex:none;
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.cover-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-preview.empty span{ color:var(--muted); font-size:12px; text-align:center; padding:0 8px; }
.cover-actions{ display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.cover-upload-btn{ cursor:pointer; text-align:center; }

.detail-cover{
  width:100%; aspect-ratio:1/1; border-radius:4px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

.spotify-embed{ width:100%; border-radius:8px; margin-top:8px; display:block; }
.purchase-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.purchase-links .btn{ background:#26282D; }
.youtube-embed{ width:100%; border-radius:8px; margin-top:8px; display:block; aspect-ratio:16/9; height:auto; }
.spotify-open-btn{ flex:1 1 auto; justify-content:center; }
/* On mobile this button replaces the iframe embed entirely (see
   renderSpotifySection() in app.js), so it's the one place worth
   carrying the cover accent — falls back to the site's usual highlight
   color when there's no cover or extraction didn't find anything. The
   .btn.primary base rule sets the same two properties from --highlight
   directly, so this needs the matching two-class specificity to win. */
.btn.spotify-open-btn{
  background:var(--cover-accent, var(--highlight)); border-color:var(--cover-accent, var(--highlight));
  transition:background-color 0.3s ease, border-color 0.3s ease;
}
.spotify-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.spotify-status{ font-size:13px; color:var(--muted); margin-top:8px; min-height:16px; }
.spotify-status.err{ color:var(--danger); }

.detail-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.detail-meta div{ font-size:13.5px; }
.detail-meta span{ display:block; color:var(--muted); font-size:11.5px; margin-bottom:2px; }
.detail-meta a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--cover-accent, var(--gold)); transition:color 0.3s ease, border-bottom-color 0.3s ease; }
.detail-meta a:hover{ color:var(--cover-accent, var(--gold)); }
.detail-meta div.mono{ font-family:var(--font-mono); letter-spacing:0.02em; }
.detail-notes{ font-size:14px; line-height:1.55; color:var(--ink); white-space:pre-wrap; }
.detail-notes strong{ font-weight:600; color:var(--cover-accent, var(--gold)); transition:color 0.3s ease; }
.detail-notes > div + div{ margin-top:4px; }
.detail-tracklist{ margin:0; padding-left:0; list-style:none; font-size:14px; line-height:1.7; color:var(--ink); }
.detail-tracklist li{ padding:2px 0; }
.detail-tracklist .track-num{ color:var(--cover-accent, var(--gold)); font-weight:600; transition:color 0.3s ease; }

.modal{
  position:fixed; inset:0; background:rgba(10,10,10,0.72); display:none;
  align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal.open{ display:flex; }
.modal-card{
  background:var(--paper); border-radius:6px; width:min(440px, 100%);
  padding:22px; border:1px solid var(--line);
}
.modal-card h2{ font-family:var(--font-display); font-size:20px; margin:0 0 4px; font-weight:600; }
.modal-card .sub{ color:var(--muted); font-size:13.5px; margin:0 0 14px; }
.scan-video-wrap{
  background:#000; border-radius:4px; overflow:hidden; aspect-ratio:4/3; position:relative;
  margin-bottom:12px;
}
.scan-video-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame{
  position:absolute; inset:18%; border:2px solid var(--gold); border-radius:6px; opacity:0.85;
  pointer-events:none;
}
.scan-status{ font-size:13.5px; color:var(--muted); min-height:18px; margin-bottom:14px; }
.scan-status.err{ color:var(--danger); }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; }
.manual-barcode{ display:flex; gap:8px; margin-top:4px; }
.manual-barcode input{ flex:1; padding:9px 11px; border:1px solid var(--line); border-radius:3px; background:var(--paper-2); color:var(--ink); font-family:var(--font-mono); }

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:4px;
  font-size:14px; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s;
  z-index:60; max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:640px){
  .panel{ width:100%; }
  .detail-columns{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- insights page ---------- */
.stat-tile-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-bottom:18px; }
.stat-tile{
  background:var(--paper-2); border-radius:6px; padding:18px;
  display:flex; flex-direction:column; gap:4px;
}
.stat-tile-value{ font-family:var(--font-display); font-size:32px; font-weight:600; color:var(--highlight); line-height:1; }
.stat-tile-label{ font-size:13px; color:var(--muted); }

.insight-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.insight-card-title{
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink);
  margin:0 0 14px;
}
.insight-empty-note{ color:var(--muted); font-size:13.5px; margin:0; }

.insight-bar-list{ display:flex; flex-direction:column; gap:9px; }
.insight-bar-row{
  display:grid; grid-template-columns:104px 1fr 30px; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
.insight-bar-row-link:hover .insight-bar-label{ color:var(--highlight); }
.insight-bar-label{
  font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.insight-bar-track{ background:var(--paper); border-radius:3px; height:8px; overflow:hidden; }
.insight-bar-fill{ background:var(--gold); height:100%; border-radius:3px; min-width:3px; }
.insight-bar-value{ font-size:12.5px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }

.insight-columns{
  display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:18px;
}
.insight-col{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  height:100%; min-width:0;
}
.insight-col-value{ font-size:11px; color:var(--muted); margin-bottom:4px; font-variant-numeric:tabular-nums; }
.insight-col-bar{
  width:60%; background:var(--gold); border-radius:3px 3px 0 0; min-height:2px;
}
.insight-col-label{ font-size:10.5px; color:var(--muted); margin-top:6px; white-space:nowrap; }

.insight-ebay-summary{ font-size:14px; color:var(--ink); margin:0; }

.insight-bar-row-link:focus-visible{ outline:2px solid var(--highlight); outline-offset:2px; border-radius:3px; }
.insight-more-btn{
  align-self:flex-start; margin-top:2px; padding:0; border:0; background:none;
  font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; text-decoration:underline;
}
.insight-more-btn:hover{ color:var(--highlight); }

.insight-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.insight-card-head .insight-card-title{ margin:0; }
.insight-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.insight-toggle-btn{
  border:0; background:none; color:var(--muted); font:inherit; font-size:12px;
  padding:5px 10px; cursor:pointer;
}
.insight-toggle-btn + .insight-toggle-btn{ border-left:1px solid var(--line); }
.insight-toggle-btn.is-active{ background:var(--paper-2); color:var(--ink); }

.value-range{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:12px 0 16px; }
.value-range-item{ background:var(--paper); border-radius:4px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.value-range-label{ font-size:12px; color:var(--muted); }
.value-range-amount{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--highlight); font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .insight-grid{ grid-template-columns:1fr; }
  .insight-bar-row{ grid-template-columns:84px 1fr 26px; gap:8px; }
}

/* ---------- prices: collection value, wishlist prices, shop check ---------- */
/* Longer labels ("Artist — Title") and £ amounts need more room than the
 * count-style bar rows above. */
#value-top .insight-bar-row{ grid-template-columns:minmax(110px,42%) 1fr 62px; }
.insight-bar-value-wide{ min-width:62px; }
.value-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.value-progress{ font-size:13px; color:var(--muted); }

.price-badge{
  display:inline-block; font-size:11px; font-weight:600; line-height:1;
  padding:4px 8px; border-radius:3px; white-space:nowrap;
  color:var(--ink); background:#26282D; border:1px solid var(--line);
}
.wishlist-card-cover .price-badge{ position:absolute; top:10px; right:10px; z-index:2; box-shadow:0 2px 5px rgba(0,0,0,0.35); }
body.view-list .wishlist-card-cover .price-badge{ display:none; }
.wishlist-card-info-price{ display:none; }
body.view-list .wishlist-card-info-price{ display:block; font-size:12px; color:var(--muted); line-height:1.3; }
.price-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.price-status{ font-size:13px; color:var(--muted); flex:1 1 220px; }

.detail-price-line{ font-size:13px; color:var(--muted); margin:6px 0 0; }
.detail-price-line strong{ color:var(--ink); font-weight:600; }

/* Shop check: the result shown inside the scan modal. */
.scan-mode-toggle{ display:flex; gap:6px; margin:0 0 12px; }
.scan-mode-toggle button{
  flex:1; font:inherit; font-size:13px; padding:7px 10px; border-radius:4px; cursor:pointer;
  background:#26282D; color:var(--muted); border:1px solid var(--line);
}
.scan-mode-toggle button[aria-pressed="true"]{ color:var(--ink); border-color:var(--highlight); }
.shop-result{ display:none; }
.shop-result.open{ display:block; }
.shop-verdict{
  border-radius:6px; padding:12px 14px; margin:0 0 12px; font-size:14px; line-height:1.4;
  background:#26282D; border:1px solid var(--line);
}
.shop-verdict strong{ display:block; font-size:15px; margin-bottom:2px; }
.shop-verdict.own{ border-color:rgba(190,120,60,0.6); }
.shop-verdict.wish{ border-color:rgba(58,122,74,0.8); }
.shop-verdict.new{ border-color:var(--line); }
.shop-id{ font-size:13px; color:var(--muted); margin:0 0 10px; }
.shop-id b{ color:var(--ink); font-weight:600; }
.shop-price{ font-size:14px; margin:0 0 12px; }
.shop-price-range{ margin-top:-6px; }
.shop-price-note{ color:var(--muted); font-size:12px; }
.shop-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
/* While a shop-check result is showing, hide the camera/manual-entry
 * parts of the scan modal and show just the result. */
.modal-card.shop-showing-result > *:not(h2):not(.shop-result):not(.modal-foot){ display:none; }