/* Dark is the default and stays the default — light mode is opt-in per
   browser via the sidebar toggle (admin-nav.js writes data-theme="light" on
   <html> and remembers it in localStorage). Every rule below reads a token, so
   the whole panel inverts from this one block. Round 47 introduced the dark
   palette; round 49 (25 Aug 2026) made it two-way. */
:root{
  --bg:#0c0c0c; --fg:#ffffff; --muted:#9a9a9a; --line:#242424; --line-2:#333333;
  --accent:#2e6b45; --danger:#e2564c; --card:#141414; --hover:#1c1c1c; --hover-2:#232323;
  --success-bg:#132a1c; --success-fg:#5fcf8a; --success-line:#1d5a35;
  --warn-bg:#2b210f; --warn-fg:#e0a94a; --danger-bg:#301616;
  --neutral-bg:#1c1c1c; --neutral-fg:#c9ced4; --neutral-line:#3a3f45;
  --axis-band:#1e1e1e; --axis-band-alt:#252525;
  --shadow:rgba(0,0,0,.5);
  /* Round 50 (25 Aug 2026): the surfaces and accents that were still typed as
     literal hexes inside per-page <style> blocks. They stayed dark in light
     mode — the Members select bar was the one Raz caught, but it was never
     the only one. Anything below is a surface, not a brand colour. */
  --input-bg:#191919;      /* textarea / input wells */
  --sunken:#101010;        /* recessed strips: select bar, stat tiles, tabs */
  --raised:#181818;        /* buttons that sit above the card */
  --media-bg:#000000;      /* the square behind cover art and avatars */
  --overlay:rgba(0,0,0,.68);   /* full-screen modal scrim */
  --scrim:rgba(0,0,0,.62);     /* pill sitting on top of an image */
  --on-scrim:#ffffff;          /* text on that pill — white in both themes */
  --on-accent:#ffffff;         /* text on --accent, which is green in both */
  --inverse-fg:#0c0c0c;        /* text on a var(--fg) background */
  --accent-tint:#101d15;       /* drag-over and is-featured washes */
  --warn-line:#5a4a1e; --danger-line:#5a2a26;
  --info-bg:#132433; --info-fg:#6fb5e8; --info-line:#1d4a6b;
  --gold:#c9a227; --gold-bg:#0c0c0c; --gold-line:#c9a227;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f7f7f5; --fg:#141414; --muted:#66665f; --line:#e2e2dc; --line-2:#cfcfc7;
  --accent:#2e6b45; --danger:#c2382e; --card:#ffffff; --hover:#efefeb; --hover-2:#e6e6e0;
  --success-bg:#e2f2e8; --success-fg:#1c6b3d; --success-line:#a9d6bc;
  --warn-bg:#fbf2dd; --warn-fg:#8a6212; --danger-bg:#fbe8e6;
  --neutral-bg:#efefeb; --neutral-fg:#4a4a44; --neutral-line:#cfcfc7;
  --axis-band:#eeeee9; --axis-band-alt:#e4e4dd;
  --shadow:rgba(0,0,0,.16);
  --input-bg:#ffffff;
  --sunken:#f2f2ee;
  --raised:#efefeb;
  --media-bg:#e2e2dc;
  --overlay:rgba(28,28,26,.46);
  --scrim:rgba(0,0,0,.55);
  --on-scrim:#ffffff;
  --on-accent:#ffffff;
  --inverse-fg:#ffffff;
  --accent-tint:#e4efe7;
  --warn-line:#dfcb96; --danger-line:#e8b9b4;
  --info-bg:#e6eff8; --info-fg:#1b5480; --info-line:#b6d1e9;
  --gold:#8a6d12; --gold-bg:#f6ecc9; --gold-line:#e3cd8c;
  color-scheme:light;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
a{color:inherit;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--line);}
.topbar .brand{font-weight:700; font-size:14px;}
.topbar nav{display:flex; gap:20px; font-size:13px;}
.topbar nav a{text-decoration:none; color:var(--muted); font-weight:600;}
.topbar nav a.active{color:var(--fg);}
.topbar .logout{font-size:12px; color:var(--muted); cursor:pointer; background:none; border:1px solid var(--line); border-radius:6px; padding:6px 12px;}

.container{max-width:820px; margin:0 auto; padding:36px 24px 80px;}
.container.wide{max-width:1100px;}

/* ---- Sidebar shell (phase 2 nav consolidation, round 32) ----
   Replaces the old horizontal .topbar on the 10 linked admin pages.
   .topbar rules above are left in place — the 5 unlinked fallback pages
   (upload.html, edit.html, album-details.html, bulk-producers.html,
   lyrics.html) still use them and are untouched by this round.
   Round 47: whole file re-themed dark to match the public site's
   #0c0c0c/#141414/white/green palette (player.css's :root) — was a
   light #fafafa/#fff theme since the admin panel was first built. */
.admin-shell{display:flex; min-height:100vh; align-items:flex-start;}
.sidebar-shell{
  width:212px; flex:none; background:var(--card); border-right:1px solid var(--line);
  padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar-shell .sidebar-brand{font-weight:700; font-size:13px; padding:6px 8px 12px; color:var(--fg);}

/* ---- Signed-in role badge (Primary vs Secondary Admin, 2026-08-16) ----
   Injected by admin-nav.js under the sidebar brand on every admin page,
   plus a fixed mobile chip since the sidebar is a closed drawer < 760px.
   Primary uses the brand green; secondary is deliberately neutral silver
   so the two can never be misread for each other at a glance. */
.admin-identity{padding:0 8px 14px; margin-bottom:2px; border-bottom:1px solid var(--line);}
.admin-identity-sub{
  font-size:10.5px; color:var(--muted); margin-top:5px; word-break:break-all; line-height:1.35;
}
.role-pill{
  display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.role-pill.primary{background:var(--success-bg); color:var(--success-fg); border:1px solid var(--success-line);}
.role-pill.secondary{background:var(--neutral-bg); color:var(--neutral-fg); border:1px solid var(--neutral-line);}
/* Shown in place of the page body when a secondary admin opens a section
   they don't have permission for (typed URL / old bookmark) — the nav link
   for it is already hidden. See applyPageAccessNotice in admin-nav.js. */
.no-access{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:28px; max-width:520px;}
.no-access h1{margin:0 0 8px; font-size:20px;}
.role-chip-mobile{display:none;}
@media (max-width:760px){
  .role-chip-mobile{
    display:block; position:fixed; top:20px; right:14px; z-index:120;
    box-shadow:0 2px 10px var(--shadow);
  }
}
.sidebar-shell .group-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:700; margin:16px 8px 6px;
}
.sidebar-shell .group-label:first-of-type{margin-top:2px;}
.sidebar-shell a{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--fg); text-decoration:none; margin-bottom:5px;
  background:var(--hover); border:1px solid var(--line);
}
.sidebar-shell a:hover{background:var(--hover-2); border-color:var(--line-2);}
.sidebar-shell a.active{background:var(--success-bg); color:var(--success-fg); border-color:var(--success-line);}
.sidebar-shell a .ic{width:18px; text-align:center; flex:none; font-size:13px;}
.sidebar-footer{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px;}
.theme-toggle{
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border-radius:8px;
  background:var(--hover); border:1px solid var(--line); color:var(--muted);
  font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; margin-bottom:8px;
}
.theme-toggle:hover{background:var(--hover-2); border-color:var(--line-2); color:var(--fg);}
.sidebar-footer .view-live{font-size:12px; color:var(--muted); font-weight:600; text-decoration:none; padding:6px 9px;}
.sidebar-footer .logout{
  font-size:12px; color:var(--muted); cursor:pointer; background:none; border:1px solid var(--line);
  border-radius:6px; padding:8px 12px; font-family:inherit; margin:0 9px;
}
.sidebar-toggle{
  display:none; position:fixed; top:14px; left:14px; z-index:120; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:16px;
  cursor:pointer; align-items:center; justify-content:center; box-shadow:0 2px 10px var(--shadow);
}
.sidebar-backdrop{display:none;}
.admin-main{flex:1; min-width:0;}
@media (max-width:760px){
  .sidebar-toggle{display:flex;}
  .sidebar-shell{
    position:fixed; top:0; left:0; height:100vh; z-index:121; width:240px;
    transform:translateX(-100%); transition:transform .18s ease;
  }
  .sidebar-shell.open{transform:translateX(0); box-shadow:8px 0 30px var(--shadow);}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:var(--overlay); z-index:119;}
  .sidebar-backdrop.show{display:block;}
  .admin-main{padding-top:58px;}
  .admin-main .container, .admin-main .container.wide{padding-left:14px; padding-right:14px;}
}

/* ---- Jump-to-anything command palette (phase 3, round 33) — ⌘G / Ctrl+G ---- */
.cmdk-overlay{
  position:fixed; inset:0; background:var(--overlay); z-index:300;
  display:flex; align-items:flex-start; justify-content:center; padding-top:14vh;
  opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.cmdk-overlay.show{opacity:1; pointer-events:auto;}
.cmdk-box{
  width:min(520px,92vw); background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px var(--shadow);
}
.cmdk-input{
  width:100%; border:none; border-bottom:1px solid var(--line); padding:16px 18px;
  font-size:14.5px; font-family:inherit; outline:none; border-radius:0; background:var(--card); color:var(--fg);
}
.cmdk-results{max-height:340px; overflow-y:auto; padding:6px;}
.cmdk-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:8px; font-size:13px; cursor:pointer; color:var(--fg);
}
.cmdk-item.hi{background:var(--success-bg);}
.cmdk-item .cmdk-title{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cmdk-item .cmdk-tag{font-size:10.5px; color:var(--muted); flex:none; white-space:nowrap; margin-left:10px;}
.cmdk-empty{padding:16px 12px; font-size:12.5px; color:var(--muted);}
.cmdk-hint{padding:9px 14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); background:var(--sunken);}
@media (max-width:760px){
  .cmdk-overlay{padding-top:8vh; padding-left:12px; padding-right:12px;}
}
h1{font-size:22px; margin:0 0 6px; color:var(--fg);}
.lede{color:var(--muted); font-size:13px; margin-bottom:26px;}

.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:20px;}
.instructions{background:var(--sunken); border:1px solid var(--line); border-radius:10px; padding:16px 18px; font-size:13px; color:var(--fg); margin-bottom:24px; line-height:1.6;}
.instructions ol{margin:6px 0 0; padding-left:18px;}

label{display:block; font-size:12.5px; font-weight:600; margin:14px 0 6px; color:var(--fg);}
label:first-child{margin-top:0;}
input[type=text], input[type=password], input[type=date], select, input[type=file]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; background:var(--input-bg); color:var(--fg);
}
input[type=color]{width:52px; height:38px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--input-bg);}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:14px;}
.checkbox-row input{width:auto;}
.checkbox-row label{margin:0; font-weight:500;}

button.primary{
  background:var(--accent); color:var(--on-accent); border:none; border-radius:8px; padding:11px 20px; font-size:13.5px; font-weight:600; cursor:pointer; margin-top:18px;
}
button.primary:disabled{opacity:.5; cursor:default;}
button.secondary{
  background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:11px 20px; font-size:13.5px; font-weight:600; cursor:pointer; margin-top:18px; margin-left:8px;
}
button.danger{background:none; border:none; color:var(--danger); font-size:12px; cursor:pointer; font-weight:600;}
button.danger.icon-x{
  width:24px; height:24px; border-radius:50%; padding:0; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; border:1px solid var(--line); color:var(--muted);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
button.danger.icon-x:hover{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }

.filter-row{margin-bottom:14px;}
.filter-row input{max-width:320px;}

.msg{font-size:13px; padding:10px 12px; border-radius:8px; margin-top:14px; display:none;}
.msg.error{background:var(--danger-bg); color:var(--danger); display:block;}
.msg.success{background:var(--success-bg); color:var(--success-fg); display:block;}

table{width:100%; border-collapse:collapse; margin-top:8px;}
th, td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:13px; color:var(--fg);}
th{color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;}
td.actions{white-space:nowrap; text-align:right;}
.badge{font-size:10.5px; padding:2px 8px; border-radius:999px; background:var(--line); color:var(--muted); font-weight:600;}
.badge.featured{background:var(--success-bg); color:var(--success-fg);}
.badge.hidden{background:var(--warn-bg); color:var(--warn-fg); margin-left:6px;}
/* Badges and chips for releases (2026-09-22) */
.badge.members{background:var(--info-bg); color:var(--info-fg); border:1px solid var(--info-line); margin-left:6px;}
.badge.deluxe{background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-line); font-weight:800; letter-spacing:.05em; margin-left:6px;}
.chip{display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; line-height:1.3; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em;}
.chip.chip-type{background:var(--neutral-bg); color:var(--neutral-fg); border:1px solid var(--neutral-line);}
.chip.chip-hidden{background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-line);}
.chip.chip-members{background:var(--info-bg); color:var(--info-fg); border:1px solid var(--info-line);}
.chip.chip-deluxe{background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-line); font-weight:800;}


/* ---- album delete/hide modal ---- */
.ad-overlay{
  position:fixed; inset:0; background:var(--overlay); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.ad-overlay.show{opacity:1; pointer-events:auto;}
.ad-modal{
  position:fixed; inset:0; z-index:201; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  transform:scale(.97);
}
.ad-modal.show{opacity:1; pointer-events:auto; transform:scale(1);}
.ad-frame{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px;
  width:min(420px,92vw); box-shadow:0 20px 60px var(--shadow);
}
.ad-frame h3{margin:0 0 4px; font-size:16px; color:var(--fg);}
.ad-frame .lede{margin:0 0 18px;}
.ad-actions{display:flex; flex-direction:column; gap:8px;}
.ad-btn{
  width:100%; text-align:left; padding:11px 14px; border-radius:8px; font-size:13.5px;
  font-weight:600; cursor:pointer; font-family:inherit;
}
.ad-btn.danger{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line);}
.ad-btn.danger:hover{background:var(--danger-bg); border-color:var(--danger);}
.ad-btn.secondary{background:var(--card); color:var(--fg); border:1px solid var(--line);}
.ad-btn.secondary:hover{background:var(--hover);}

.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px;}
.theme-field{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
.theme-field span{font-size:12.5px; font-weight:600; color:var(--fg);}

.menu-row{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--card);}
.menu-row input[type=text]{flex:1 1 auto; width:auto; min-width:0;}
.menu-row select{flex:0 0 170px; width:170px;}
.menu-row .order-btns{display:flex; flex-direction:column; gap:2px; flex:0 0 auto;}
.menu-row .order-btns button{background:none; border:1px solid var(--line); border-radius:4px; width:22px; height:18px; font-size:10px; cursor:pointer; color:var(--fg);}

.preview-frame{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px;}
.preview-frame iframe{width:100%; height:520px; border:none; display:block;}

.setup-wrap{max-width:380px; margin:14vh auto 0; padding:0 20px;}
.setup-wrap .card{text-align:left;}

/* Featured Releases admin card */
.admin-counter{font-size:10.5px; padding:3px 10px; border-radius:999px; background:var(--success-bg); color:var(--success-fg); font-weight:700; white-space:nowrap;}
.admin-warning{display:none; background:var(--danger-bg); color:var(--danger); font-size:12px; padding:9px 12px; border-radius:8px; margin-bottom:14px; font-weight:600;}
.admin-warning.show{display:block;}
.admin-release-rows{margin-top:14px;}
.admin-release-row{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:var(--card);}
.admin-release-row.is-featured{border-color:var(--success-line); background:var(--accent-tint);}
.admin-release-row input[type=checkbox]{width:17px; height:17px; margin-top:3px; flex-shrink:0; accent-color:var(--accent);}
.admin-release-row .thumb{width:44px; height:44px; border-radius:7px; background-size:cover; background-position:center; flex-shrink:0; background-color:var(--line);}
.admin-release-row .row-main{flex:1; min-width:0;}
.admin-release-row .row-title-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.admin-release-row .row-title{font-weight:700; font-size:13px; color:var(--fg);}
.admin-release-row .row-kicker{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.admin-release-row .order-btns{display:flex; gap:4px; margin-left:auto;}
.admin-release-row .order-btns button{background:var(--card); border:1px solid var(--line); border-radius:5px; width:22px; height:22px; font-size:11px; cursor:pointer; color:var(--fg);}
.admin-release-row .order-btns button:disabled{opacity:.3; cursor:default;}
.admin-release-row .row-caption{width:100%; margin-top:9px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; font-family:inherit; resize:vertical; min-height:44px; color:var(--fg); background:var(--input-bg);}
.admin-release-row .row-caption:focus{outline:2px solid var(--accent); outline-offset:1px;}
.admin-release-row .row-counter{font-size:10.5px; color:var(--muted); margin-top:4px; text-align:right;}
.admin-release-row .row-counter.over{color:var(--warn-fg);}
.admin-release-row .row-save-state{font-size:10.5px; color:var(--accent); margin-top:4px; text-align:right; height:13px;}

.admin-preview-card{background:var(--card);}
.admin-preview-tag{font-size:10.5px; color:var(--muted); font-family:'SF Mono',monospace;}
.admin-preview-frame{background:#0c0c0c; border:1px solid var(--line); border-radius:12px; padding:22px;}
.admin-preview-frame .preview-section-title{color:#fff; font-size:14px; font-weight:700; margin:0 0 14px;}
.admin-preview-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.admin-preview-grid .featured-card{background:linear-gradient(135deg, #16221a 0%, #0c0c0c 70%); border:1px solid #1f1f1f; border-radius:14px; padding:20px; display:flex; gap:16px; align-items:flex-start;}
.admin-preview-grid .featured-card .art{width:88px; height:88px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#222;}
.admin-preview-grid .featured-card .meta p.kicker{margin:0; color:#9a9a9a; font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.admin-preview-grid .featured-card .meta h3{margin:4px 0 6px; font-size:17px; line-height:1.25; color:#fff;}
.admin-preview-grid .featured-card .meta .caption{margin:0 0 12px; font-size:12px; color:#a9c9b4; line-height:1.5; font-style:italic;}
.admin-preview-grid .featured-card .meta .caption.empty{color:#5a5a5a; font-style:italic;}
.admin-preview-grid .featured-card .play-btn{background:var(--accent); color:#fff; border:none; border-radius:999px; padding:8px 16px; font-weight:700; font-size:12px; display:inline-flex; align-items:center; gap:6px;}
.admin-empty-slot{border:1.5px dashed #333; border-radius:14px; padding:20px; display:flex; align-items:center; justify-content:center; color:#5a5a5a; font-size:12px; min-height:128px; text-align:center;}
@media (max-width:640px){ .admin-preview-grid{grid-template-columns:1fr;} }

/* Bulk album upload */
.bulk-dropzone{
  border:2px dashed var(--line); border-radius:10px; padding:26px 20px; text-align:center; background:var(--sunken); transition:border-color .15s, background .15s;
}
.bulk-dropzone.dragover{ border-color:var(--accent); background:var(--accent-tint); }
.bulk-dropzone p{ margin:0 0 6px; font-size:13.5px; color:var(--fg); }
.bulk-browse-link{ display:inline; margin:0; color:var(--accent); font-weight:700; text-decoration:underline; cursor:pointer; }
.bulk-dropzone-hint{ color:var(--muted); font-size:12px; margin-top:8px !important; line-height:1.5; }
.bulk-track-list{ margin-top:14px; }
.bulk-track-row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:6px; background:var(--card); cursor:grab;
}
.bulk-track-row.drag-ghost{ opacity:.35; }
.bulk-track-num{
  flex:0 0 24px; height:24px; border-radius:6px; background:var(--line); color:var(--muted); font-weight:700; font-size:11.5px; display:flex; align-items:center; justify-content:center;
}
.bulk-drag-handle{ flex:0 0 auto; color:var(--muted); font-size:14px; cursor:grab; user-select:none; }
.bulk-track-title{
  flex:1 1 auto; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:13px; font-family:inherit; background:var(--input-bg); color:var(--fg);
}
.bulk-track-filename{ flex:0 1 auto; min-width:0; color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.bulk-track-remove{ flex:0 0 auto; background:none; border:none; color:var(--danger); font-size:16px; cursor:pointer; line-height:1; padding:2px 4px; }
.bulk-track-status{ flex:0 0 18px; font-size:14px; text-align:center; }
@media (max-width:640px){ .bulk-track-filename{ display:none; } }

/* Analytics tab */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px;}
.stat-tile{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.stat-tile .stat-value{font-size:24px; font-weight:800; line-height:1.1; color:var(--fg);}
.stat-tile .stat-label{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600; margin-top:4px;}
.tab-toggle{display:flex; gap:8px; margin-bottom:14px;}
.tab-toggle button{
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-size:12.5px; font-weight:600; cursor:pointer; color:var(--muted); font-family:inherit;
}
.tab-toggle button.active{background:var(--fg); color:var(--bg); border-color:var(--fg);}
/* Bar chart. The x-axis labels used to be writing-mode:vertical-rl, which
   made every date read sideways — replaced 25 Aug 2026 with a horizontal
   two-row axis (weekday over M/D) sitting on its own banded chip so the dates
   separate from the page background instead of floating on it. */
.bar-chart{display:flex; align-items:stretch; gap:4px; margin-top:10px;}
.bar-chart .bar-col{flex:1; display:flex; flex-direction:column; min-width:0;}
.bar-chart .bar-wrap{height:120px; display:flex; align-items:flex-end;}
.bar-chart .bar{width:100%; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px;}
.bar-chart .bar-x{
  margin-top:6px; padding:5px 2px; border-radius:6px; text-align:center; line-height:1.2;
  background:var(--axis-band); border:1px solid var(--line); overflow:hidden;
}
.bar-chart .bar-col.is-weekend .bar-x{background:var(--axis-band-alt);}
.bar-chart .bar-dow{display:block; font-size:9.5px; font-weight:700; color:var(--fg);
  text-transform:uppercase; letter-spacing:.02em;}
.bar-chart .bar-date{display:block; font-size:9.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; margin-top:1px;}
/* Below ~560px a 30-column axis cannot fit two legible rows, so the weekday
   drops out and only the date survives. */
@media (max-width:560px){
  .bar-chart{gap:2px;}
  .bar-chart .bar-dow{display:none;}
  .bar-chart .bar-x{padding:4px 1px;}
  .bar-chart .bar-date{font-size:8.5px;}
}
.analytics-empty{color:var(--muted); font-size:13px; padding:10px 0;}

/* Release grid, filter bar & view toggle (2026-09-22) */
.release-controls{margin-bottom:18px; display:flex; flex-direction:column; gap:10px;}
.release-controls-top{display:flex; gap:10px; align-items:center;}
.release-controls-top .search-wrap{flex:1; min-width:0;}
.release-controls-top .search-wrap input{margin:0; width:100%;}
.release-controls-top .add-release-btn{flex:0 0 auto; width:auto; margin:0; padding:10px 16px;}
.release-filters-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:space-between;}
.filter-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.filter-select{
  padding:7px 10px; font-size:12.5px; font-weight:600; border-radius:8px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  font-family:inherit; cursor:pointer; width:auto; min-width:105px;
}
.filter-chip{
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  font-size:12px; font-weight:600; cursor:pointer; color:var(--muted); font-family:inherit;
  user-select:none; transition:all .12s ease;
}
.filter-chip:hover{color:var(--fg); border-color:var(--line-2);}
.filter-chip.active{background:var(--fg); color:var(--inverse-fg); border-color:var(--fg);}
.release-count{font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap;}
.view-toggle{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card);}
.view-toggle-btn{
  background:none; border:none; padding:6px 11px; font-size:13px; line-height:1;
  color:var(--muted); cursor:pointer; font-family:inherit; transition:background .12s ease, color .12s ease;
}
.view-toggle-btn:hover{color:var(--fg); background:var(--hover);}
.view-toggle-btn.active{background:var(--fg); color:var(--inverse-fg);}

.release-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px;}
@media (max-width:760px){
  .release-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .release-controls-top{flex-direction:column; align-items:stretch;}
  .release-controls-top .add-release-btn{width:100%;}
  .release-filters-bar{flex-direction:column; align-items:stretch;}
  .filter-select{flex:1 1 calc(50% - 4px); min-width:0;}
  .filter-group{width:100%;}
  .filter-group.view-group{justify-content:space-between;}
}

.release-card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.release-card:hover{border-color:var(--line-2); background:var(--hover); transform:translateY(-2px); box-shadow:0 4px 14px var(--shadow);}
.release-card.active{border-color:var(--accent); background:var(--accent-tint);}
.release-card .thumb-wrap{position:relative; width:100%; aspect-ratio:1/1; background:var(--sunken); overflow:hidden;}
.release-card .thumb{width:100%; height:100%; background-size:cover; background-position:center; background-color:var(--line);}
.release-card .card-body{padding:10px 12px 12px; display:flex; flex-direction:column; flex:1; min-width:0;}
.release-card .card-title{font-size:13px; font-weight:700; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 2px;}
.release-card .card-artist{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 4px;}
.release-card .card-tracks{font-size:11px; color:var(--muted); margin-bottom:8px;}
.release-card .card-chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:auto; align-items:center;}

.release-list-wrap{display:flex; flex-direction:column; gap:4px;}
.release-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; margin-bottom:2px;}
.release-row:hover{background:var(--hover);}
.release-row.active{background:var(--success-bg);}
.release-row .thumb{width:34px; height:34px; border-radius:6px; flex:none; background-size:cover; background-position:center; background-color:var(--line);}
.release-row .meta{min-width:0; flex:1;}
.release-row .title{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.release-row .sub{font-size:11px; color:var(--muted);}
.release-row-chips{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-left:auto; flex-shrink:0;}

/* Deluxe panel styling (2026-09-22) */
.deluxe-panel{border-top:1px solid var(--line); margin-top:32px; padding-top:22px;}
.deluxe-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.deluxe-title-wrap{display:flex; align-items:center; gap:8px;}
.deluxe-direct-link{font-size:12px; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:4px;}
.deluxe-direct-link:hover{color:var(--fg); text-decoration:underline;}

