:root{
  --ink:#16130f;
  --paper:#f2ede1;
  --paper-dim:#e7dfcd;
  --card:#fbf8f0;
  --rule:#c9bd9e;
  --brass:#8a6a2f;
  --brass-bright:#b4863b;
  --vinyl:#241f19;
  --vinyl-2:#332b21;
  --red:#7a2e1d;
  --green:#3c5a3a;
  --teal:#302915;
  --teal-bright:#463a1e;
  --mike-blue:#ad8848;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@font-face{
  font-family:'Playfair Display';
  src: local('Playfair Display');
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--vinyl);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

.wrap{
  max-width:1180px;
  margin:0 auto;
  background:var(--paper);
  min-height:100vh;
  box-shadow: 0 0 60px rgba(0,0,0,0.5);
}

/* ---------- HEADER ---------- */
header.masthead{
  background: linear-gradient(180deg, var(--vinyl) 0%, var(--vinyl-2) 100%);
  color:var(--paper);
  padding:34px 40px 26px;
  border-bottom:6px solid var(--brass);
  position:relative;
  overflow:hidden;
}
header.masthead::before{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:260px;height:260px;
  border-radius:50%;
  border:2px solid rgba(242,237,225,0.08);
  background:
    repeating-radial-gradient(circle at center, rgba(242,237,225,0.05) 0px, rgba(242,237,225,0.05) 1px, transparent 1px, transparent 6px);
}
.masthead-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.masthead-left{ max-width:560px; }
.brand-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
h1.brand{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(34px,5vw,54px);
  margin:2px 0 6px;
  letter-spacing:0.01em;
}
h1.brand em{
  font-style:italic;
  font-weight:500;
  color:var(--brass-bright);
}
.tagline{
  font-size:13.5px;
  color:#d8cfba;
  max-width:520px;
  line-height:1.5;
}
.brand-eyebrow.mixed-case{ text-transform:none; font-size:13px; }
.stat-strip{
  display:flex; gap:26px; flex-wrap:wrap;
  font-family:var(--mono);
  font-size:12px;
  color:#c8bd9f;
  margin-top:18px;
  position:relative; z-index:1;
}
.stat-strip b{
  color:var(--paper);
  font-size:16px;
  display:block;
  font-family:var(--serif);
  font-weight:700;
}

/* ---------- NAV TABS ---------- */
nav.tabs{
  display:flex;
  background:var(--paper-dim);
  border-bottom:1px solid var(--rule);
  padding:0 40px;
  gap:2px;
  overflow-x:auto;
}
nav.tabs button{
  appearance:none; border:none; background:none;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6b6250;
  padding:15px 18px 13px;
  cursor:pointer;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  transition: color .15s ease;
}
nav.tabs button:hover{ color:var(--ink); }
nav.tabs button.active{
  color:var(--ink);
  border-bottom-color:var(--brass);
  font-weight:700;
}

main{ padding:32px 40px 60px; }

/* ---------- HIGHLIGHT RATERS (now inline inside the search controls card) ---------- */
.highlight-bar-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#7a7159; white-space:nowrap; margin-bottom:8px;
}
.highlight-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.highlight-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px;
  border-radius:20px; padding:4px 6px 4px 12px;
  color:#fff; cursor:pointer;
  border:1px solid rgba(0,0,0,0.15);
}
.highlight-chip.dragging{ opacity:0.4; }
.highlight-chip.drag-over{ outline:2px dashed var(--ink); outline-offset:2px; }
.highlight-chip .pin-star{ font-size:11px; opacity:0.85; }
.highlight-chip .remove-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  font-size:11px; line-height:1;
}
.highlight-chip .remove-x:hover{ background:rgba(255,255,255,0.45); }
.highlight-add-wrap{ position:relative; display:inline-block; }
.highlight-add-wrap input{
  font-family:var(--sans); font-size:13px;
  padding:6px 10px; border:1px solid var(--rule); border-radius:20px;
  background:#fff; min-width:160px;
}
.highlight-add-wrap input:focus{ outline:2px solid var(--brass-bright); outline-offset:1px; }
.highlight-add-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; z-index:20;
  background:#fff; border:1px solid var(--rule); border-radius:4px;
  min-width:220px; max-height:240px; overflow-y:auto;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  display:none;
}
.highlight-add-dropdown.open{ display:block; }
.highlight-add-dropdown .opt{
  padding:8px 12px; font-size:13px; cursor:pointer; font-family:var(--sans);
}
.highlight-add-dropdown .opt:hover{ background:var(--paper-dim); }
.highlight-add-dropdown .empty{
  padding:10px 12px; font-size:12.5px; color:#a09880; font-family:var(--mono);
}
.highlight-bar-hint{
  display:block; font-family:var(--mono); font-size:11px; color:#a09880; margin-top:8px;
}
.panel{ display:none; }
.panel.active{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* ---------- CONTROLS ---------- */
.controls-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:2px;
  margin-bottom:20px;
}
.controls{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  padding:18px 20px;
}
.controls-second-row{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  padding:0 20px 18px;
}
.advanced-filters{
  border-top:1px solid var(--rule);
  padding:16px 20px;
  background:var(--paper-dim);
}
.advanced-filters-section + .advanced-filters-section{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--rule);
}
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#7a7159;
}
.field input[type=text], .field input[type=number]{
  font-family:var(--sans);
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--rule);
  background:#fff;
  border-radius:2px;
  color:var(--ink);
  min-width:120px;
}
.field select{
  font-family:var(--sans);
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--rule);
  background:#fff;
  border-radius:2px;
  color:#7a7159;
  min-width:120px;
}
.field input::placeholder{ color:#a09880; opacity:1; }
.field textarea::placeholder{ color:#a09880; opacity:1; }
.field textarea{
  font-family:var(--sans); font-size:14px; padding:8px 10px; border:1px solid var(--rule);
  background:#fff; border-radius:2px; color:var(--ink); resize:vertical; min-height:44px;
}
.field input.is-default-value{ color:#7a7159; }
.field.grow{ flex:1; min-width:220px; }
.field.grow input{ width:100%; }
.field.narrow input, .field.narrow select{ min-width:80px; width:80px; }
.field input:focus, .field select:focus{ outline:2px solid var(--brass-bright); outline-offset:1px; }
.btn{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--vinyl); color:var(--paper);
  border:none; padding:9px 16px; border-radius:2px; cursor:pointer;
}
.btn:hover{ background:var(--brass); }
.btn.ghost{
  background:transparent; color:#7a7159; border:none; box-shadow:inset 0 0 0 1px var(--rule);
}
.btn.ghost:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }

.result-meta{
  font-family:var(--mono); font-size:12px; color:#7a7159;
  margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}

/* ---------- RESULTS "TABLE" (div/grid based, not a real <table>) ----------
   Previously a real <table>, but WebKit/Safari can still run its internal
   table-layout algorithm on <tr>/<td> elements even when CSS forces them to
   display:block — getComputedStyle reports the override correctly, but
   actual layout can silently ignore it. Real <div>s have no such ambiguity:
   display:grid on desktop, display:block on mobile, both always honored.
   --results-cols is set per-instance from JS (search/top-rated have 6-7
   columns, the rater-profile table has 5). */
.results{ width:100%; border:1px solid var(--rule); background:var(--card); }
.results-header{
  display:grid; grid-template-columns:var(--results-cols);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#7a7159; background:var(--paper-dim); border-bottom:1px solid var(--rule);
}
.results-header .cell{ padding:10px 12px; cursor:pointer; user-select:none; white-space:nowrap; }
.results-header .cell:hover{ color:var(--ink); }
.results-header .cell.sorted::after{ content:" ▾"; color:var(--brass); }
.results-header .cell.sorted.asc::after{ content:" ▴"; }
.results-row.row{
  display:grid; grid-template-columns:var(--results-cols);
  border-bottom:1px solid #e5ddc9;
  cursor:pointer;
}
.results-row.row:hover{ background:#f4efe1; }
.results .cell{ padding:10px 12px; font-size:13.5px; }
/* .results-header .cell inherits font-size:10.5px from its parent
   .results-header, but the rule above (.results .cell) also matches
   header cells — they're nested inside .results too — and an explicit
   font-size always beats inheritance regardless of specificity. Stated
   again here, after the conflicting rule, so it reliably wins. */
.results-header .cell{ font-size:10.5px; }
.cell.artist{ font-weight:600; }
.cell.title{ font-style:italic; color:#3a3428; }
.cell.num{ font-family:var(--mono); text-align:right; white-space:nowrap; }
.cell.avg{ font-weight:700; }
.avg-hi{ color:var(--green); }
.avg-lo{ color:var(--red); }
.pill{
  display:inline-block; font-family:var(--mono); font-size:10.5px;
  padding:1px 6px; border:1px solid var(--rule); border-radius:20px; color:#7a7159;
}

/* expand detail row — always a plain block, never part of the column grid */
.results .detail-row{
  background:#efe8d6; padding:16px 20px; border-bottom:2px solid var(--rule);
}
.detail-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.detail-col h4{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#7a7159; margin:0 0 8px;
}
.rating-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12.5px;
  background:#fff; border:1px solid var(--rule); border-radius:3px;
  padding:3px 8px; margin:2px 3px 2px 0;
}
.rating-chip b{ color:var(--brass); }
.rating-chip-pin{
  background:var(--mike-blue);
  border-color:var(--mike-blue);
  color:#fff;
}
.rating-chip-pin b{ color:#fff; }

.pagination{ display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; margin-top:18px; font-family:var(--mono); font-size:12.5px; color:#7a7159; }
.pagination > form{ display:contents; }
.pagination-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pagination button{ background:none; border:1px solid var(--rule); padding:6px 12px; border-radius:2px; cursor:pointer; font-family:var(--mono); font-size:12.5px; color:#7a7159; }
.pagination button:disabled{ opacity:.3; cursor:default; }
.pagination button:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.pagination-jump{ display:flex; align-items:center; gap:6px; }
.pagination-jump-input{
  width:52px; padding:5px 6px; border:1px solid var(--rule); border-radius:2px;
  font-family:var(--mono); font-size:12.5px; text-align:center; color:#7a7159;
}
.pagination-jump-input:hover, .pagination-jump-input:focus{ color:var(--ink); }
.pagination-perpage{ display:flex; align-items:center; gap:6px; color:#7a7159; }
.pagination-perpage .enhanced-select-trigger{
  min-width:56px; padding:5px 22px 5px 8px;
  font-family:var(--mono); font-size:12.5px; color:#7a7159;
}
.pagination-perpage .enhanced-select-trigger:hover{ color:var(--ink); }
.pagination-perpage select{
  padding:5px 8px; border:1px solid var(--rule); border-radius:2px;
  font-family:var(--mono); font-size:12.5px; color:#7a7159; background:#fff;
}

/* ---------- RATER PROFILE ---------- */
.rater-header{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.rater-name{ font-family:var(--serif); font-weight:900; font-size:30px; }
.rater-stats{ display:flex; gap:22px; flex-wrap:wrap; }
.rater-stats .stat{ font-family:var(--mono); font-size:11px; color:#7a7159; }
.rater-stats .stat b{ display:block; font-family:var(--serif); font-size:20px; color:var(--ink); font-weight:700; }

.histogram{ display:flex; align-items:flex-end; gap:4px; height:90px; margin:16px 0 24px; padding:10px 14px 0; background:var(--card); border:1px solid var(--rule); }
.histogram .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.histogram .bar{ width:100%; background:var(--brass); border-radius:2px 2px 0 0; min-height:2px; cursor:default; }
.histogram .bar:hover{ background:var(--brass-bright); }
.chart-tooltip{
  position:fixed; z-index:999; pointer-events:none;
  background:var(--vinyl); color:var(--paper);
  font-family:var(--mono); font-size:11.5px;
  padding:5px 10px; border-radius:3px; white-space:nowrap;
  display:none;
}
.histogram .bar-label{ font-family:var(--mono); font-size:9.5px; color:#7a7159; margin-top:4px; }

/* ---------- ABOUT ---------- */
.about-section{
  background:var(--card); border:1px solid var(--rule); border-radius:2px;
  padding:22px 26px; margin-bottom:24px;
}
.about-section h3{ font-family:var(--serif); font-size:22px; margin:0 0 8px; }
.about-section p{ line-height:1.65; font-size:14.5px; color:#3a3428; }
.about-archive-row{ display:flex; gap:40px; align-items:stretch; }
.about-archive-text{ max-width:600px; }
.about-archive-side{ flex:1; border-left:1px solid var(--rule); padding-left:32px; display:flex; flex-direction:column; gap:44px; }
.about-stats{ display:flex; justify-content:space-between; }
.about-stats .stat{ font-family:var(--mono); font-size:11px; color:#7a7159; }
.about-stats .stat b{ display:block; font-family:var(--serif); font-size:22px; color:var(--ink); font-weight:700; }
.about-quote{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:14.5px;
  color:var(--brass-bright); line-height:1.5; overflow-wrap:break-word;
}
.scale-table{ width:100%; border-collapse:collapse; margin:12px 0 0; font-size:13px; }
.scale-table td{ padding:5px 10px; border-bottom:1px solid var(--rule); }
.scale-table td:first-child{ font-family:var(--mono); font-weight:700; color:var(--brass); width:40px; }
.scale-table td.avg-hi:first-child{ color:var(--green); }
.scale-table td.avg-lo:first-child{ color:var(--red); }

.loading-screen{
  position:fixed; inset:0; background:var(--vinyl); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:999;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.disc{
  width:64px; height:64px; border-radius:50%;
  background: repeating-radial-gradient(circle at center, #444 0px, #444 1px, #222 1px, #222 4px);
  border:2px solid var(--brass);
  animation:spin 1.4s linear infinite;
  position:relative;
}
.disc::after{ content:""; position:absolute; inset:26px; background:var(--paper); border-radius:50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.empty-state{ padding:50px 20px; text-align:center; color:#7a7159; font-family:var(--mono); font-size:13px; }

::selection{ background:var(--brass-bright); color:#fff; }

@media(max-width:720px){
  header.masthead{ padding:24px 20px; }
  main{ padding:20px; }
  nav.tabs{ padding:0 20px; }

  /* Search/Top Rated/Individual Raters results: since .results-row is a
     real div (grid on desktop), just switching it to block on mobile is
     all that's needed — no table-model ambiguity to fight anymore. */
  .results-header{ display:none; }
  .results-row.row{ display:block; padding:10px 0; }
  .results .cell{ display:block; padding:2px 12px; }
  .cell.num{ text-align:left; }

  .about-section{ padding:18px 20px; }
  .about-archive-row{ flex-direction:column; gap:20px; }
  .about-archive-text{ max-width:none; }
  .about-archive-side{ border-left:none; border-top:1px solid var(--rule); padding-left:0; padding-top:20px; width:100%; }

  /* Ratings scale table: stack number above description instead of a
     two-column table row, so the number isn't vertically centered against
     a much taller paragraph. */
  .scale-table, .scale-table tbody{ display:block; width:100%; }
  .scale-table tr{ display:block; padding:8px 0; }
  .scale-table td{ display:block; padding:2px 0; border-bottom:none; }
  .scale-table tr:not(:last-child){ border-bottom:1px solid var(--rule); }
  .scale-table td:first-child{ width:auto; font-size:15px; margin-bottom:3px; }

  /* .admin-table is now div/grid-based, like .results — divs always honor
     display overrides, so this is just a straightforward switch instead
     of the table/tbody/tr/td-chain workaround real <table> elements need
     (see .results for why that workaround doesn't reliably work at all). */
  .admin-table-header{ display:none; }
  .admin-table-row{ display:block; padding:10px 0; }
  .admin-table .cell{ display:block; padding:2px 0; }
  .admin-table .pending-actions{ display:flex; }
  .admin-table .btn{ margin:4px 6px 0 0; }

  /* .activity-log-table is still a real <table> and likely has the same
     underlying issue .results and .admin-table did — not yet confirmed
     broken by a report, so left as-is for now rather than guessing. */
  .activity-log-table, .activity-log-table tbody{ display:block; width:100%; }
  .activity-log-table thead{ display:none; }
  .activity-log-table tr{ display:block; padding:10px 0; border-bottom:1px solid var(--rule); }
  .activity-log-table td{ display:block; padding:2px 0; border-bottom:none; }

  /* New For You list: name/album on the left, "added N days ago" on the
     right, with no wrap — on narrow screens the right side was getting
     squeezed against a long artist/title string instead of dropping down. */
  .new-for-you-item{ flex-wrap:wrap; gap:4px 10px; }

  /* Bar charts (Site Statistics decade/rating/raters-per-title, and the
     per-rater score histogram): .bar-col uses flex:1, but flex items
     default to min-width:auto, meaning each bar refuses to shrink below
     its label's text width. With 12-16 columns that's wider than a phone
     screen, so the chart was overflowing the ENTIRE page horizontally
     (not just itself) — that's what was pushing the whole layout wide
     and showing dark background on the right before scrolling/zooming.
     Scoping the overflow to the chart itself (with a floor so bars don't
     get illegibly thin) fixes the page-level shift. */
  .histogram{ overflow-x:auto; }
  .histogram .bar-col{ min-width:26px; }

  /* Custom dropdowns (enhanceSelect): the real <select> is hidden by
     shrinking it to 1px x 1px with opacity:0. iOS Safari has a known bug
     where a <select> that small can still paint its own native control
     (it renders select elements through a separate OS-level layer that
     doesn't always respect opacity/tiny sizing) — which is the gray pill
     showing up underneath the styled trigger. Sizing the hidden select to
     match the trigger instead of shrinking it to nothing avoids
     triggering that fallback. Desktop doesn't have this bug, hence
     scoping the fix here rather than changing the shared base rule. */
  .enhanced-select-wrapper select.enhanced-select-native{
    top:0; left:0; width:100%; height:100%;
  }

  /* Defensive restatement: these colors are untouched by any of our CSS
     changes and should already apply, but since this session has already
     turned up two genuine iOS-only rendering quirks, restating them
     explicitly for mobile costs nothing and rules out a similar quirk
     here if the plain-text rendering turns out to be more of the same. */
  .scale-table td.avg-hi:first-child{ color:var(--green); }
  .scale-table td.avg-lo:first-child{ color:var(--red); }
  .about-quote{ color:var(--brass-bright); font-style:italic; }

  /* Login bar: the Log in button uses background:var(--vinyl), the exact
     same color as the header it sits in — on desktop the row never wraps
     so this was never noticed, but on mobile the two inputs alone fill
     the row width, pushing the button onto its own line where it's
     effectively invisible against the matching background. Stack every
     child full-width and give the button a color that actually contrasts
     with the header instead of matching it. */
  .login-bar{ width:100%; }
  .login-bar > input, .login-bar > .btn{ flex:1 1 100%; width:100%; box-sizing:border-box; }
  .login-bar > .btn{ background:var(--brass-bright); color:#fff; }

  /* Deactivated & Deleted Albums: side-by-side columns on desktop don't
     have room on a phone screen, so fall back to stacked with the divider
     switched from a vertical rule to a horizontal one. */
  .admin-subsection-row{ flex-direction:column; gap:0; }
  .admin-subsection-row .admin-subsection{ padding-top:18px; }
  .admin-subsection-row .admin-subsection:first-child{ padding-top:0; }
  .admin-subsection-row .admin-subsection + .admin-subsection{
    border-left:none; border-top:1px dashed var(--rule); padding-left:0;
  }
}

/* ---------- LOGIN BAR ---------- */
.login-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  position:relative; z-index:2;
  flex-shrink:0;
}
.login-bar input{
  font-family:var(--sans); font-size:13px;
  padding:7px 10px; border:1px solid rgba(242,237,225,0.3); border-radius:2px;
  background:rgba(242,237,225,0.08); color:var(--paper); min-width:120px;
}
.login-bar input::placeholder{ color:#a89e86; }
.login-bar input:focus{ outline:2px solid var(--brass-bright); background:rgba(242,237,225,0.15); }
.login-bar .btn{ padding:7px 14px; }
.login-status{ font-family:var(--mono); font-size:12px; color:var(--paper); display:flex; align-items:center; gap:10px; }
.login-status .admin-badge{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
  background:var(--brass); color:#fff; padding:2px 6px; border-radius:10px;
}
.login-error{ color:#e8a58a; font-size:12px; font-family:var(--mono); }

/* ---------- INLINE RATING EDITOR ---------- */
.my-rating-box{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--rule); border-radius:4px;
  padding:10px 14px; margin-bottom:12px;
}
.my-rating-box label{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#7a7159;
}
.my-rating-box input[type=number]{
  width:60px; padding:6px 8px; border:1px solid var(--rule); border-radius:2px; font-family:var(--mono); font-size:14px;
}
.my-rating-box .btn{ padding:6px 12px; font-size:11px; }
.my-rating-hint{ font-family:var(--mono); font-size:11px; color:#a09880; }

/* ---------- ADD ALBUM FORM ---------- */
.add-album-panel{
  background:var(--card); border:1px solid var(--rule); padding:18px 20px; margin-bottom:20px; border-radius:2px;
}
.add-album-panel h4{ font-family:var(--serif); font-size:18px; margin:0 0 12px; }
.add-album-grid{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.add-album-grid .field input{ min-width:160px; }
/* Unlike the Admin Edit Album form (where the invisible label keeps Save/
   Cancel bottom-aligned with fields on the same row), Add Album's submit
   button commonly wraps onto its own line at in-between viewport widths,
   where that same invisible label becomes pure dead space above a button
   that has nothing left on its row to align with. Dropping it here trades
   a small amount of alignment precision (never specifically reported as
   an issue for this button) for removing that wasted gap. */
.add-album-grid .btn-field label{ display:none; }
.add-album-msg{ font-family:var(--mono); font-size:12px; margin-top:10px; }
.add-album-msg.ok{ color:var(--green); }
.add-album-msg.err{ color:var(--red); }
.add-album-msg.warn{
  color:var(--ink); background:var(--paper-dim); border:1px solid var(--rule);
  border-radius:3px; padding:12px 14px; max-width:520px;
}

/* ---------- ADMIN TAB ---------- */
.admin-subnav{
  display:flex; flex-wrap:wrap; gap:4px;
  position:sticky; top:0; z-index:10;
  background:var(--paper); border-bottom:1px solid var(--rule);
  padding:12px 0; margin-bottom:24px;
}
.admin-subnav a{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:#7a7159; text-decoration:none;
  padding:6px 12px; border:1px solid var(--rule); border-radius:20px;
  background:var(--card);
}
.admin-subnav a:hover{ color:var(--ink); border-color:var(--ink); }
.admin-section{
  scroll-margin-top:60px;
  background:var(--card); border:1px solid var(--rule); border-radius:2px;
  padding:22px 26px; margin-bottom:24px;
}
.admin-section h3{ font-family:var(--serif); font-size:22px; margin:0 0 16px; }
.admin-subsection-row{ display:flex; gap:32px; }
.admin-subsection-row .admin-subsection{ flex:1; min-width:0; padding-top:0; }
.admin-subsection-row .admin-subsection + .admin-subsection{
  border-top:none; border-left:1px dashed var(--rule); padding-left:32px;
}
.admin-subsection h4{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:#7a7159; margin:0 0 10px;
}
.admin-table{ width:100%; background:var(--card); border:1px solid var(--rule); }
.admin-table-header{
  display:grid; grid-template-columns:var(--admin-table-cols);
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:#7a7159; background:var(--paper-dim); border-bottom:1px solid var(--rule);
}
.admin-table-header .cell{ padding:10px 12px; cursor:pointer; user-select:none; }
.admin-table-header .cell:hover{ color:var(--ink); }
.admin-table-row{
  display:grid; grid-template-columns:var(--admin-table-cols); align-items:center;
  border-bottom:1px solid #e5ddc9;
}
.admin-table .cell{ padding:10px 12px; font-size:13.5px; }
/* .admin-table-header .cell inherits font-size:10.5px from its parent
   .admin-table-header, but the rule above (.admin-table .cell) also
   matches header cells — they're nested inside .admin-table too — and
   at equal specificity, source order wins over inheritance. Stated
   again here, after the conflicting rule, so it reliably wins. */
.admin-table-header .cell{ font-size:10.5px; }
.pending-actions{
  display:flex; flex-wrap:nowrap; align-items:center; gap:6px; white-space:nowrap;
}
.admin-table-note-row{
  padding:12px 12px 14px; font-size:13px; font-style:italic; color:#5b5340; background:var(--paper-dim);
  border-bottom:1px solid #e5ddc9;
}
.pending-note-label{ font-family:var(--mono); font-size:10.5px; font-style:normal; text-transform:uppercase; letter-spacing:.05em; color:#7a7159; margin-right:6px; }
.admin-table .btn{ padding:5px 10px; font-size:10.5px; margin-right:4px; }
.pending-footer{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:14px; }
.status-badge{ font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:10px; text-transform:uppercase; }
.status-badge.inactive{ background:#e8d9c8; color:var(--red); }
.status-badge.active{ background:#dbe8d8; color:var(--green); }
.status-badge.admin{ background:var(--brass); color:#fff; }

/* ---------- PASSWORD RESET MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,19,15,0.7); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:var(--paper); border:1px solid var(--rule); border-radius:4px;
  padding:28px; max-width:420px; width:100%;
}
.modal-box h3{ font-family:var(--serif); font-size:22px; margin:0 0 10px; }
.modal-box p{ font-size:13.5px; color:#3a3428; margin:0 0 16px; line-height:1.5; }
.modal-box .field{ margin-bottom:12px; }
.modal-box input{ width:100%; padding:9px 10px; border:1px solid var(--rule); border-radius:2px; font-family:var(--sans); font-size:14px; }

/* ---------- ADMIN ALBUM TOOLS (in the search detail row) ---------- */
.admin-tools{
  border-top:1px dashed var(--rule); margin-top:14px; padding-top:12px;
}
.admin-tools-label{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:#a08050; margin-bottom:8px;
}
.admin-tools-buttons .btn{ padding:5px 11px; font-size:11px; margin-right:6px; }
.admin-tools-buttons .btn.danger{ box-shadow:inset 0 0 0 1px var(--red); color:var(--red); }
.admin-edit-form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin-top:10px; padding:12px; background:#fff; border:1px solid var(--rule); border-radius:3px;
}
.admin-edit-form .field input{ min-width:140px; }
.admin-edit-form .field.narrow input{ min-width:80px; width:80px; }
.rating-chip-admin-edit{ font-size:11px; margin-left:4px; opacity:0.85; cursor:pointer; text-decoration:underline; }
.chip-fix-form{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--rule); border-radius:20px; padding:3px 6px 3px 10px;
  margin:2px 3px 2px 0; font-family:var(--mono); font-size:12px;
}
.chip-fix-form input{ width:44px; padding:3px 5px; border:1px solid var(--rule); border-radius:2px; }
.chip-fix-form button{ font-size:10.5px; padding:2px 7px; }

/* ---------- ADMIN PENDING EDIT ---------- */
.pending-edit-row td{ background:var(--paper-dim); padding:14px 20px; }

/* ---------- ADMIN ACTIVITY LOG ---------- */
.activity-log-table{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); font-size:13px; }
.activity-log-table th{
  text-align:left; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:#7a7159; background:var(--paper-dim); padding:8px 10px; border-bottom:1px solid var(--rule);
}
.activity-log-table td{ padding:8px 10px; border-bottom:1px solid #e5ddc9; vertical-align:top; }
.activity-log-table .action-tag{
  font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:10px;
  background:var(--paper-dim); border:1px solid var(--rule); white-space:nowrap;
}
.activity-log-table .log-time{ font-family:var(--mono); font-size:11.5px; color:#a09880; white-space:nowrap; }

/* ---------- BIO CARD (Individual Raters profile) ---------- */
.bio-card{
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  padding:16px 18px; margin:0 0 20px;
}
.bio-row{ font-size:13.5px; line-height:1.6; margin-bottom:10px; color:#3a3428; }
.bio-row:last-child{ margin-bottom:0; }
.bio-label{
  display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:#a08050; margin-bottom:2px;
}

/* ---------- MY PAGE ---------- */
.mypage-section{ margin-bottom:32px; }
.mypage-section h3{ font-family:var(--serif); font-size:22px; margin:0 0 14px; }
.bio-edit-grid{ display:flex; flex-direction:column; gap:14px; max-width:640px; }
.bio-edit-grid .field label{ display:flex; justify-content:space-between; }
.bio-edit-grid textarea{
  font-family:var(--sans); font-size:14px; padding:9px 10px; border:1px solid var(--rule);
  border-radius:2px; resize:vertical; min-height:70px;
}
.char-counter{ font-family:var(--mono); font-size:10.5px; color:#a09880; }
.char-counter.over{ color:var(--red); }
.new-for-you-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:var(--card); border:1px solid var(--rule);
}
.new-for-you-item + .new-for-you-item{ margin-top:-1px; }
.new-for-you-item .nfy-info{ font-size:13.5px; }
.new-for-you-item .nfy-added{ font-family:var(--mono); font-size:10.5px; color:#a09880; }

/* ---------- CUSTOM DROPDOWN (replaces native <select> popups, which
   can't be styled cross-browser) ---------- */
.enhanced-select-wrapper{ position:relative; display:inline-block; }
.enhanced-select-wrapper select.enhanced-select-native{
  position:absolute; opacity:0; pointer-events:none; width:1px; height:1px;
}
.enhanced-select-trigger{
  width:auto; text-align:left;
  font-family:var(--sans); font-size:14px;
  padding:8px 28px 8px 10px;
  border:1px solid var(--rule);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237a7159'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%237a7159' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size:14px;
  border-radius:2px;
  color:var(--ink);
  min-width:120px;
  cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.enhanced-select-trigger.is-placeholder{ color:#a09880; }
.enhanced-select-trigger:hover{ border-color:var(--ink); }
.enhanced-select-trigger.open{ border-color:var(--brass-bright); outline:2px solid var(--brass-bright); outline-offset:1px; }
.enhanced-select-dropdown{
  display:none;
  position:absolute; top:calc(100% + 4px); left:0; z-index:50;
  min-width:100%; width:max-content; max-width:320px; max-height:320px;
  background:#fff; border:1px solid var(--rule); border-radius:3px;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.enhanced-select-dropdown.open{ display:flex; flex-direction:column; }
.enhanced-select-search-wrap{ padding:8px; border-bottom:1px solid var(--rule); flex-shrink:0; }
.enhanced-select-search{
  width:100%; padding:6px 8px; border:1px solid var(--rule); border-radius:2px;
  font-family:var(--sans); font-size:13px; color:var(--ink);
}
.enhanced-select-options-list{ overflow-y:auto; max-height:280px; }
.enhanced-select-empty{ padding:10px 12px; font-family:var(--mono); font-size:12px; color:#a09880; }
.enhanced-select-option{
  padding:8px 12px; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  cursor:pointer;
}
.enhanced-select-option:hover{ background:var(--paper-dim); }
.enhanced-select-option.selected{ background:var(--brass); color:#fff; }