/* Bass Cover Tracker — frosted glass workspace. All assets are local. */
:root {
  color-scheme: light;
  --bg: #e3e5ed;
  --panel: rgba(255, 255, 255, .43);
  --border: rgba(255, 255, 255, .73);
  --line: rgba(91, 99, 127, .1);
  --text: #292b37;
  --muted: #697184;
  --accent: #735bbd;
  --gold: #735bbd;
  --gold-dim: #81729e;
  --green: #48865d;
  --purple: #8870c2;
  --shadow: 0 5px 22px rgba(57, 62, 88, .045), inset 0 1px 0 rgba(255,255,255,.65);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  color: var(--text);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0; font-size: 13px; line-height: 1.6; min-height: 100vh;
  position: relative; isolation: isolate; background: var(--bg);
}
/* Keep the gradients on one viewport-sized layer instead of repainting a
   fixed background through every scrolling panel. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  transform: translateZ(0);
  background:
    radial-gradient(ellipse at 3% 88%, rgba(239, 202, 185, .72), transparent 43%),
    radial-gradient(ellipse at 91% 4%, rgba(242, 205, 204, .6), transparent 39%),
    radial-gradient(ellipse at 86% 78%, rgba(200, 188, 224, .62), transparent 44%),
    radial-gradient(ellipse at 32% 35%, rgba(218, 232, 241, .85), transparent 50%),
    linear-gradient(130deg, #dce2e9, #e2e3ea 50%, #d4d9e4);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #8067c7; outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 31px; line-height: 1.25; letter-spacing: -1.1px; font-weight: 650; margin-bottom: 8px; }
h2 { font-size: 17px; line-height: 1.4; letter-spacing: -.35px; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: 15px; font-weight: 600; }
p { margin-bottom: 18px; }
.ui-icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.muted { color: var(--muted); }
.gold { color: var(--accent); }
.positive { color: #3e8056; font-weight: 600; }
.small { font-size: 11px; line-height: 1.65; display: block; }
.eyebrow, .tiny-label, .nav-label { font-size: 9px; font-weight: 600; letter-spacing: 1.35px; color: var(--muted); }
.eyebrow { display: block; margin-bottom: 10px; color: #82719f; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;top:-80px;left:20px;z-index:100;padding:12px 20px;background:white;border-radius:12px;color:var(--text); }
.skip-link:focus { top:10px; }

/* Translucent app shell */
.sidebar, .workspace, .panel, .stat, .filter-panel, .auth-card, .studio-banner {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Translucent fills retain the glass appearance without nested backdrop
   captures across the full document. Only the fixed sidebar needs blur. */
.sidebar, .auth-card {
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
}
.sidebar { width:226px;position:fixed;inset:20px auto 20px 20px;padding:21px 13px 0;background:rgba(243,245,250,.35);border-radius:24px;display:flex;flex-direction:column;z-index:10; }
.brand-row { display:flex;align-items:center;gap:10px;flex-shrink:0;margin-bottom:27px; }
.brand { display:flex;gap:10px;align-items:center;font-weight:650;font-size:16px;letter-spacing:-.35px;margin:0 7px; }
.brand-icon { width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#aa97e5,#7b68b9);box-shadow:0 3px 9px rgba(109,87,173,.14),inset 0 1px 0 rgba(255,255,255,.65);flex-shrink:0; }
.brand-icon .ui-icon { width:23px;height:23px; }
.brand-sub { display:block;font-size:10px;font-weight:400;letter-spacing:.1px;color:var(--muted);margin-top:1px; }
.nav-label { display:block;margin:0 12px 10px;font-size:9px;letter-spacing:1px;color:#7d8293; }
.sidebar nav { min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(115,104,148,.18) transparent; }
nav .nav-label { margin-top:25px; }
nav>a { display:flex;gap:12px;align-items:center;padding:10px 11px;margin-bottom:3px;color:#575e70;border-radius:12px;font-size:11px;border:1px solid transparent;transition:background .16s,box-shadow .16s,color .16s; }
nav>a>.ui-icon { width:17px;height:17px;color:#7b8190; }
nav>a.active { background:linear-gradient(110deg,rgba(255,255,255,.88),rgba(255,255,255,.48));color:#44404f;border-color:rgba(255,255,255,.82);box-shadow:0 3px 11px rgba(58,59,91,.065),inset 0 1px 0 white;font-weight:600; }
nav>a.active>.ui-icon { color:#937acb; }
nav>a:hover { background:rgba(255,255,255,.5); }
.sidebar-bottom { margin-top:auto;padding:22px 9px 18px;display:flex;gap:10px;align-items:center;flex-shrink:0; }
.sidebar-bottom>.ui-icon { color:#8d85ac;width:24px;height:24px; }
.sidebar-bottom strong { font-size:10px;font-weight:500; }
.sidebar-bottom .small { font-size:9px;margin-top:2px; }
.account { border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;padding:17px 5px;flex-shrink:0; }
.account strong { font-size:11px;font-weight:600; }
.account .small { font-size:9px; }
.account form { margin-left:auto; }
.avatar { width:33px;height:33px;display:inline-grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#f3e0d9,#d4c7df);border:2px solid rgba(255,255,255,.75);color:#7d677a;font-size:12px;font-weight:600;flex-shrink:0; }
.avatar img { width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block; }
.icon-button { border:0;background:transparent;color:#7b7d8e;cursor:pointer;display:inline-grid;place-items:center;padding:5px;border-radius:8px; }
.icon-button:hover { color:var(--accent);background:rgba(255,255,255,.5); }
.icon-button .ui-icon { width:17px;height:17px; }
.mobile-signout { display:none; }
.workspace { margin:20px 20px 20px 264px;min-height:calc(100vh - 40px);border-radius:26px;background:rgba(245,246,251,.18);overflow:hidden; }
.topbar { min-height:78px;display:flex;align-items:center;gap:24px;justify-content:space-between;padding:18px 30px;border-bottom:1px solid rgba(255,255,255,.35); }
.crumb { display:flex;align-items:center;gap:12px;font-size:11px;color:#666c7c;white-space:nowrap; }
.crumb>.ui-icon { width:16px;height:16px;color:#9699aa; }
.crumb>span { color:#a5a8b5; }
.global-search { display:flex;align-items:center;flex:1;max-width:410px;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.34);border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);min-width:100px; }
.global-search:focus-within { background:rgba(255,255,255,.65);border-color:#b6a5da;box-shadow:0 0 0 3px rgba(145,124,192,.08); }
.global-search input { min-height:38px;border:0;background:transparent;box-shadow:none;margin:0;padding:7px 0;font-size:11px;outline:none;min-width:0; }
.global-search input:focus-visible { outline:0; }
.global-search button { border:0;background:transparent;padding:9px 12px;color:#9799a7;cursor:pointer;display:grid;place-items:center; }
.global-search .ui-icon { width:16px;height:16px; }
.global-search kbd { font-family:inherit;font-size:10px;white-space:nowrap;color:#9093a3;padding:0 12px; }
.top-right { display:flex;align-items:center;gap:12px; }
.date-pill { font-size:10px;white-space:nowrap;color:#757989;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.38);border-radius:10px;padding:8px 11px; }
.small-avatar { width:31px;height:31px; }
.main-content { max-width:1570px;margin:auto;padding:27px 30px 0; }
.page-heading { display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px; }
.page-heading p { font-size:12px;margin-bottom:0; }
.button { border:1px solid rgba(255,255,255,.72);display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 15px;min-height:39px;border-radius:11px;font-size:11px;font-weight:550;cursor:pointer;white-space:nowrap;transition:background .16s,transform .16s,box-shadow .16s;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 5px rgba(57,52,83,.025); }
.button>.ui-icon { width:16px;height:16px; }
.button:hover { transform:translateY(-1px); }
.primary { background:linear-gradient(145deg,#9580d5,#7962bf);border-color:rgba(127,104,188,.35);color:white;box-shadow:0 4px 10px rgba(114,90,171,.15),inset 0 1px 0 rgba(255,255,255,.3); }
.primary:hover { background:linear-gradient(145deg,#8b75cb,#6c53b4);color:white; }
.secondary { background:rgba(255,255,255,.39);color:#5a596d; }
.secondary:hover { background:rgba(255,255,255,.75);color:#5d479d; }
.light { background:rgba(255,255,255,.7);color:#6b578e; }
.light:hover { background:white;color:#5d479d; }
.danger { background:#b95870;color:white;border-color:#b95870; }
.danger-link { color:#b04c68;font-size:12px; }
.wide { width:100%;justify-content:space-between; }
button:disabled { opacity:.5;cursor:not-allowed;transform:none; }
.text-link { color:var(--accent);font-size:11px;display:inline-flex;align-items:center;gap:8px; }
.text-link .ui-icon { width:15px;height:15px; }

/* Overview cards and charts */
.stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px; }
.stat { background:rgba(255,255,255,.44);padding:19px 20px 18px;border-radius:18px;min-width:0;position:relative; }
.stat-top { display:flex;justify-content:space-between;align-items:center;gap:8px; }
.stat-label { font-size:11px;font-weight:500;color:#5c6072; }
.stat-icon { width:36px;height:36px;border-radius:11px;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(80,72,107,.06);color:white;flex-shrink:0; }
.stat-icon .ui-icon { width:19px;height:19px; }
.lavender { background:linear-gradient(145deg,#b6a2ec,#8e79cf); }
.mint { background:linear-gradient(145deg,#b3d7ba,#80b48e); }
.sky { background:linear-gradient(145deg,#b3d3f1,#80afe0); }
.rose { background:linear-gradient(145deg,#dbb4e4,#b28acb); }
.peach { background:linear-gradient(145deg,#ebc5b4,#d4a68e); }
.stat>strong { font-size:30px;line-height:1.5;font-weight:650;letter-spacing:-.8px;display:block;margin-top:1px; }
.stat .small { font-size:9px;margin-top:7px;line-height:1.65; }
.overview-grid { display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:20px;margin-bottom:20px; }
.panel { background:var(--panel);border-radius:19px;min-width:0;overflow:hidden;margin-bottom:22px; }
.overview-grid .panel { margin-bottom:0; }
.panel-heading { padding:22px 23px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; }
.panel-heading>div { min-width:0;overflow-wrap:anywhere; }
.panel-body { padding:0 23px 18px;overflow-wrap:anywhere; }
.panel-body>:last-child { margin-bottom:0; }
.panel-footer { padding:16px 23px 20px;overflow-wrap:anywhere; }
.panel-footer .text-link { max-width:100%; }
.panel-footer .ui-icon { flex-shrink:0; }
.panel:not(.editor):not(.recommendation-card)>p:not(.empty):not(.panel-caption) { margin-left:23px;margin-right:23px; }
.panel-heading h2 { margin:0;font-size:14px;font-weight:600; }
.panel-heading a { display:inline-flex;align-items:center;gap:7px;font-size:10px;color:#78768c;white-space:nowrap; }
.panel-heading a .ui-icon { width:14px;height:14px; }
.panel-heading .tiny-label { font-size:8px;letter-spacing:.8px; }
.panel-caption { padding:0 23px;color:var(--muted);font-size:10px;margin-bottom:20px; }
.panel-heading .panel-caption { padding:0;margin:5px 0 0;font-size:10px; }
.period-pill { display:inline-flex;align-items:center;padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.55);font-size:9px;color:#7e7e91;white-space:nowrap; }
.chart-summary { display:flex;align-items:center;gap:12px;padding:0 23px;flex-wrap:wrap; }
.chart-summary>strong { font-size:29px;letter-spacing:-.7px;font-weight:650;line-height:1.3; }
.chart-summary .small { width:100%;font-size:10px;margin-top:-8px; }
.activity-chart { padding:12px 12px 0; }
.activity-chart svg { width:100%;height:auto;display:block;overflow:visible; }
.chart-gridline { stroke:rgba(104,106,133,.12);stroke-width:1;stroke-dasharray:3 6; }
.chart-line { stroke:#a18acb;stroke-width:2.2;fill:none;filter:drop-shadow(0 2px 2px rgba(154,133,196,.12)); }
.chart-point { fill:#a38dce;stroke:rgba(255,255,255,.85);stroke-width:1.4; }
.chart-point:hover { r:5.5;fill:#8066b7; }
.chart-label { font-family:inherit;font-size:10px;fill:#888699; }
.chart-footnote { display:flex;align-items:center;gap:6px;padding:0 23px 18px;font-size:9px;color:#888698; }
.chart-footnote>span:last-child { margin-left:auto; }
.legend-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#a48dcd; }
.quick-stack { display:grid;grid-template-rows:repeat(3,1fr);gap:13px; }
.quick-card { display:flex;align-items:center;gap:14px;padding:18px 19px; }
.quick-card h2 { font-size:14px;margin:3px 0 5px; }
.quick-card .small { font-size:10px; }
.quick-card .text-link { font-size:10px; }
.dashboard-grid { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-bottom:22px; }
.dashboard-grid .panel { margin-bottom:0; }
.video-list { padding:0 23px 7px; }
.video-row { display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line); }
.album-art, .artist-avatar { width:36px;height:38px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(145deg,rgba(210,223,236,.9),rgba(176,199,215,.7));color:#728ba7;border:1px solid rgba(255,255,255,.7);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 5px rgba(80,80,110,.035); }
.album-art .ui-icon { width:19px;height:19px; }
.tone-1 { background:linear-gradient(145deg,#eadde7,#cfc2db);color:#a187b4; }
.tone-2 { background:linear-gradient(145deg,#dbebe1,#bdd4c9);color:#729986; }
.tone-3 { background:linear-gradient(145deg,#f1e0d5,#dfc1b2);color:#b08c78; }
.video-name { min-width:0;flex:1; }
.video-name strong { font-size:11px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:550; }
.video-name .small { font-size:10px;margin-top:2px; }
.video-meta { text-align:right;flex-shrink:0; }
.video-meta .small { font-size:9px;margin-top:4px; }
.badge { display:inline-block;font-size:8px;padding:3px 7px;color:#72758a;background:rgba(219,224,234,.6);border-radius:7px;letter-spacing:.1px;line-height:1.6; }
.badge.purple { background:rgba(219,210,242,.7);color:#8a6fb4; }
.badge.green { background:rgba(207,232,207,.66);color:#5e8b58; }
.row-arrow { color:#a5a2b3;width:13px;height:13px;margin-left:1px; }
.artist-rank { display:flex;align-items:center;padding:0 23px;margin:17px 0;gap:12px; }
.artist-avatar { width:31px;height:33px;font-size:11px;font-weight:600; }
.artist-bar { flex:1;min-width:0; }
.artist-bar>span { display:flex;justify-content:space-between;gap:10px;font-size:11px; }
.artist-bar strong { font-weight:550; }
.artist-bar .muted { font-size:9px;white-space:nowrap; }
meter { appearance:none;-webkit-appearance:none;display:block;width:100%;height:4px;border:0;background:rgba(160,162,186,.13);border-radius:8px;margin-top:7px; }
meter::-webkit-meter-bar { background:rgba(160,162,186,.13);border:0;border-radius:8px;height:4px; }
meter::-webkit-meter-optimum-value { background:linear-gradient(90deg,#c6b7e4,#a38bcf);border-radius:8px; }
meter::-moz-meter-bar { background:#a58cce;border-radius:8px; }
.popular-row { margin:0 23px;display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--line);align-items:center; }
.rank { color:#9994aa;font-size:10px;min-width:16px; }
.view-number { text-align:right;font-size:12px;color:#76628e;font-weight:550; }
.view-number .small { font-size:8px;font-weight:400; }
.genre-row { display:flex;justify-content:space-between;gap:20px;margin:0 23px;padding:13px 0;border-top:1px solid var(--line);font-size:12px; }
.genre-row strong { color:var(--accent);font-weight:500; }
.genre-meter { margin:0 23px; }
.genre-note { margin-top:25px;max-width:370px;line-height:1.8; }
.studio-banner { display:flex;align-items:center;gap:18px;background:linear-gradient(110deg,rgba(226,222,244,.7),rgba(245,237,237,.45));border-radius:19px;padding:23px;margin:20px 0;overflow:hidden; }
.insight-icon { width:45px;height:48px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(145deg,#b4a0e6,#8a74c1);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);flex-shrink:0; }
.insight-icon .ui-icon { width:24px;height:24px; }
.studio-banner .eyebrow { font-size:8px;margin-bottom:4px; }
.studio-banner h2 { font-size:16px;margin-bottom:3px; }
.studio-banner p { font-size:10px;color:var(--muted);margin-bottom:0; }
.studio-banner .button { margin-left:auto;font-size:10px; }
.recent-recommendations { margin-top:20px; }
footer { border-top:1px solid rgba(128,128,155,.1);margin-top:28px;padding:21px 0;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#8b889b; }
footer>span:last-child { letter-spacing:0;display:flex;align-items:center;gap:7px; }
footer .ui-icon { width:15px;height:15px;color:#ab99c7; }

/* Catalogs, forms and shared states */
.notice { background:rgba(237,230,250,.7);color:#6e5b8f;border:1px solid rgba(255,255,255,.8);border-radius:14px;padding:17px 20px;margin-bottom:22px;font-size:12px;box-shadow:var(--shadow); }
.notice p { margin:7px 0 10px; }
.notice a { text-decoration:underline; }
.notice.error { background:rgba(249,225,230,.75);color:#9d4f68; }
.notice.success { background:rgba(223,241,226,.72);color:#4b7f59;display:flex;align-items:center;gap:10px; }
.notice.success>.ui-icon { width:17px;height:17px; }
.filter-panel { padding:21px;background:var(--panel);border-radius:19px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;align-items:end;margin-bottom:22px; }
.search-field { grid-column:span 2; }
.filter-actions { display:flex;gap:9px;flex-wrap:wrap; }
label { display:block;font-size:11px;color:#666578;font-weight:500; }
input, select, textarea { color:var(--text);background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.88);border-radius:10px;padding:11px 12px;width:100%;display:block;margin-top:7px;font-size:12px;min-height:41px;box-shadow:inset 0 1px 2px rgba(77,79,108,.025); }
input::placeholder, textarea::placeholder { color:#9490a3; }
input:hover, select:hover, textarea:hover { background:rgba(255,255,255,.6); }
input:focus, select:focus, textarea:focus { background:rgba(255,255,255,.8); }
input[type=file] { padding:13px 0;border:0;background:transparent;font-size:11px;box-shadow:none; }
input[type=file]::file-selector-button { border:1px solid rgba(255,255,255,.8);border-radius:8px;background:rgba(255,255,255,.5);color:#76638c;padding:7px 10px;margin-right:12px;cursor:pointer; }
select { cursor:pointer; }
option { color:#363443;background:#f8f7fb; }
textarea { resize:vertical; }
form>label { margin-bottom:20px; }
.table-scroll { overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(137,124,167,.2) transparent; }
table { border-collapse:collapse;width:100%;text-align:left; }
th { font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:#858096;font-weight:550;padding:16px 20px;border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(255,255,255,.13); }
td { font-size:11px;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:rgba(255,255,255,.28); }
.cell-title { font-size:12px;font-weight:550;display:block;max-width:500px; }
.empty { text-align:center;padding:40px 24px;color:var(--muted);font-size:12px; }
.empty>.ui-icon, .empty>span { width:34px;height:34px;font-size:34px;color:#b6a2d3;display:block;margin:0 auto 16px; }
.empty h3 { color:#60556f;font-weight:550; }
.empty p { max-width:390px;margin-left:auto;margin-right:auto; }
.editor { padding:25px; }
.editor>h2 { margin-bottom:14px; }
.editor>p { font-size:12px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px; }
.form-actions { display:flex;gap:15px;align-items:center;margin-top:24px;flex-wrap:wrap; }
.two-columns { display:grid;grid-template-columns:1fr 1fr;gap:22px; }
.two-columns .panel { height:fit-content; }
.narrow { max-width:700px; }
.recording { margin:0 23px;padding:18px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line); }
.recording strong { font-size:12px;font-weight:550; }
.recording .small { margin-top:5px;font-size:10px; }
.source-box { background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.6);padding:19px;margin:24px 0;border-radius:13px; }
.source-box p { margin:8px 0; }
.source-box h3 { font-size:13px; }
.file-drop { border:1px dashed rgba(159,139,196,.5);background:rgba(231,224,245,.38);border-radius:13px;padding:21px; }
.export-links { margin-top:24px; }
.export-links a { display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-top:1px solid var(--line);font-size:12px; }
.export-links a span+span { color:var(--accent);font-size:10px;white-space:nowrap; }
.preview-stats { display:flex;gap:26px;flex-wrap:wrap;margin:24px 0; }
.preview-stats span { font-size:11px;color:var(--muted); }
.preview-stats strong { display:block;color:var(--accent);font-size:27px;font-weight:550; }
.history-row { border-top:1px solid var(--line);padding:17px 23px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted); }
.pagination { display:flex;align-items:center;justify-content:center;gap:18px;margin:25px 0;font-size:11px; }
.pagination a { display:inline-flex;margin:0; }
.artist-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; }
.artist-tile { padding:23px 18px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:11px;margin-bottom:0;transition:background .16s,transform .16s; }
.artist-tile:hover { background:rgba(255,255,255,.65);transform:translateY(-2px); }
.artist-tile .avatar { width:41px;height:41px;font-size:15px;background:linear-gradient(145deg,#e9e0f6,#cfc5e5);color:#947bb7; }
.artist-tile strong { font-size:12px;font-weight:550; }
.future { padding:65px 40px;max-width:800px;margin:30px auto; }
.future-icon { display:block;font-size:65px;color:#a891cd;margin:20px 0; }
.future p { max-width:600px; }
.auth-page { min-height:100svh; }
.auth-shell { width:100%;max-width:560px;min-height:100svh;margin:0 auto;padding:48px 24px;display:flex;flex-direction:column;justify-content:center;gap:32px; }
.auth-brand { flex-direction:column;justify-content:center;text-align:center;margin:0;gap:18px;font-size:30px;line-height:1.2;letter-spacing:-.6px; }
.auth-brand .brand-sub { font-size:13px;line-height:1.6;margin-top:10px;letter-spacing:.15px; }
.auth-brand .brand-icon { width:80px;height:80px;border-radius:24px; }
.auth-brand .brand-icon .ui-icon { width:44px;height:44px; }
.auth-card { background:rgba(255,255,255,.4);padding:36px 40px;border-radius:28px; }
.auth-intro { text-align:center; }
.auth-intro .eyebrow { line-height:1.6;margin-bottom:12px; }
.auth-card h1 { font-size:32px;line-height:1.2;margin-bottom:12px; }
.auth-intro p { font-size:14px;line-height:1.6;margin:0; }
.auth-card form { margin:28px 0 24px; }
.auth-card form label { font-size:13px;margin-bottom:20px; }
.auth-card input { min-height:48px;font-size:16px;padding:12px 14px; }
.auth-card .button { min-height:48px;font-size:14px; }
.auth-card .auth-note { font-size:12px;line-height:1.6;text-align:center;margin:0; }

@media(max-height:800px) and (min-width:741px) { .auth-shell { padding-top:24px;padding-bottom:24px; } }

/* Synchronization and recommendation tools */
.sync-channel { display:flex;align-items:center;gap:13px;flex-wrap:wrap; }
.sync-channel h2 { margin:0; }
.sync-channel>.badge { margin-left:auto; }
.sync-detail { display:flex;justify-content:space-between;gap:20px;font-size:11px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap; }
.sync-detail:last-child { border:0; }
.sync-detail>span { color:var(--muted); }
.sync-detail strong { font-size:11px;font-weight:550; }
.checkbox-label { display:flex;align-items:center;gap:10px; }
.checkbox-label input { width:16px;min-height:16px;height:16px;margin:0;accent-color:#9a81ca;box-shadow:none;flex-shrink:0; }
.sync-progress { margin-top:23px;padding:17px;border:1px solid rgba(255,255,255,.65);background:rgba(234,226,247,.3);border-radius:12px;font-size:12px;color:#786293; }
.sync-progress p { margin:0; }
.sync-progress a { text-decoration:underline; }
.sync-feature { display:flex;gap:16px;margin:25px 0; }
.sync-feature>span { font-size:11px;color:#a58bbf;padding-top:3px; }
.sync-feature strong { font-size:12px;font-weight:550; }
.sync-feature p { font-size:11px;color:var(--muted);margin:5px 0 0; }
.video-description { white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;color:var(--muted);max-height:240px;overflow:auto; }
code { font-size:11px;overflow-wrap:anywhere;color:#7f6d96; }
.recommendation-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.recommendation-card { padding:25px;margin-bottom:0;display:flex;flex-direction:column; }
.rec-heading { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px; }
.rec-heading h2 { margin:0; }
.recommendation-card h2 { font-size:23px;line-height:1.3;margin-bottom:5px; }
.rec-artist { font-size:13px;color:var(--accent);margin-bottom:15px; }
.tag-list { display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 21px; }
.recommendation-card>p, .rec-detail p { font-size:12px;color:#6c667b; }
.rec-detail { padding-top:14px;border-top:1px solid var(--line);margin-bottom:8px; }
.rec-detail .eyebrow { font-size:8px;margin-bottom:8px; }
.recommendation-card form { border-top:1px solid var(--line);padding-top:20px;margin-top:auto; }
.recommendation-card form>label { margin-bottom:15px; }
.recommendation-card form .button { margin-top:8px; }
.request-summary .small { margin:15px 0 0; }
.request-summary .tag-list { margin-bottom:0; }
.request-summary p { overflow-wrap:anywhere; }
.response-form { margin-top:25px; }
details summary { cursor:pointer;color:var(--accent);font-size:12px;margin-bottom:14px; }
details textarea { font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px; }
.excluded-row { padding:14px 0;border-top:1px solid var(--line);font-size:12px; }
.standalone { padding-left:0;padding-top:0; }
.optional-filters { padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px; }
.optional-filters summary { margin-bottom:0; }
.optional-filters[open] summary { margin-bottom:20px; }

/* Smaller workspaces retain every action without a desktop-only sidebar. */
@media(min-width:1550px) {
  .main-content { padding:33px 40px 0; }
  .topbar { padding-left:40px;padding-right:40px; }
  .stat { padding:21px 23px; }
  .stat>strong { font-size:34px; }
}
@media(max-width:1250px) {
  .sidebar { width:209px;inset:15px auto 15px 15px;padding-left:10px;padding-right:10px; }
  .workspace { margin:15px 15px 15px 238px;min-height:calc(100vh - 30px); }
  .topbar { padding:16px 24px;gap:18px; }
  .main-content { padding:25px 24px 0; }
  .date-pill { display:none; }
  .stat { padding:16px; }
  .stats { gap:12px; }
  .stat .small { font-size:8px; }
  .stat-label { font-size:10px; }
  .stat-icon { width:31px;height:31px;border-radius:10px; }
  .overview-grid { grid-template-columns:minmax(0,1.7fr) minmax(210px,1fr);gap:16px; }
  .quick-card { padding:16px 15px;gap:11px; }
  .quick-card h2 { font-size:12px; }
  .quick-card .text-link { font-size:9px; }
  .chart-footnote>span:last-child { display:none; }
  .filter-panel { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .artist-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  h1 { font-size:28px; }
}
@media(max-width:1000px) {
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat { padding:18px; }
  .stat .small { font-size:10px; }
  .stat-label { font-size:11px; }
  .stat-icon { width:35px;height:35px; }
  .overview-grid { grid-template-columns:1fr; }
  .quick-stack { grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:12px; }
  .quick-card { display:block;padding:18px 15px; }
  .quick-card .stat-icon { margin-bottom:9px; }
  .quick-card .small { font-size:9px; }
  .quick-card h2 { font-size:12px;min-height:34px; }
  .dashboard-grid, .two-columns, .recommendation-grid { grid-template-columns:1fr; }
  .artist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-heading { align-items:flex-start; }
  .page-heading>.button { margin-top:4px; }
  .studio-banner { flex-wrap:wrap; }
  .studio-banner>.button { margin-left:63px; }
  .topbar { gap:12px; }
  .global-search { max-width:none; }
  .global-search kbd { display:none; }
}
@media(max-width:740px) {
  .sidebar, .auth-card { -webkit-backdrop-filter:none;backdrop-filter:none; }
  .sidebar { position:relative;inset:auto;width:auto;margin:12px 12px 0;padding:16px 14px 10px;border-radius:21px; }
  .brand-row { margin-bottom:14px;justify-content:space-between; }
  .brand { margin:0 4px;font-size:15px;gap:9px; }
  .brand-icon { width:31px;height:31px;border-radius:10px; }
  .brand-icon .ui-icon { width:20px;height:20px; }
  .brand-sub { font-size:9px; }
  .sidebar>.nav-label, .sidebar-bottom, .account, nav .nav-label { display:none; }
  .mobile-signout { display:block; }
  .sidebar nav { display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 0; }
  .sidebar nav::-webkit-scrollbar { display:none; }
  .sidebar nav>a { flex-shrink:0;white-space:nowrap;font-size:10px;padding:8px 10px;margin:0;gap:7px;border-radius:10px; }
  .sidebar nav>a>.ui-icon { width:14px;height:14px; }
  .workspace { margin:12px;min-height:calc(100vh - 145px);border-radius:22px; }
  .topbar { padding:14px 18px;min-height:65px; }
  .crumb { font-size:10px;gap:8px; }
  .crumb>.ui-icon { display:none; }
  .crumb>span { display:none; }
  .global-search input { font-size:10px; }
  .global-search button { padding:8px 9px; }
  .global-search .ui-icon { width:14px;height:14px; }
  .small-avatar { width:28px;height:28px;font-size:10px; }
  .main-content { padding:23px 20px 0; }
  .page-heading { display:flex;align-items:flex-start;gap:15px;margin-bottom:23px; }
  .page-heading .eyebrow { font-size:8px; }
  .page-heading h1 { font-size:26px; }
  .page-heading p { font-size:10px; }
  .page-heading>.button { margin-top:25px;font-size:10px;padding:9px 12px;min-height:36px; }
  .page-heading>.button>.ui-icon { width:14px;height:14px; }
  .stats { gap:12px; }
  .stat { padding:15px 16px;border-radius:16px; }
  .stat>strong { font-size:30px; }
  .stat .small { font-size:9px; }
  .quick-card { padding:16px 13px; }
  .quick-card .small { font-size:8px; }
  .quick-card .text-link { gap:3px;font-size:9px; }
  .quick-card .text-link .ui-icon { width:12px;height:12px; }
  .panel-heading { padding:20px 20px 15px; }
  .panel-body { padding:0 20px 16px; }
  .panel-footer { padding:16px 20px 20px; }
  .panel:not(.editor):not(.recommendation-card)>p:not(.empty):not(.panel-caption) { margin-left:20px;margin-right:20px; }
  .panel-heading .tiny-label { white-space:normal;font-size:8px; }
  .video-list { padding-left:20px;padding-right:20px; }
  .video-row { gap:11px; }
  .row-arrow { display:none; }
  .artist-rank { padding:0 20px; }
  .filter-panel { gap:12px;padding:18px; }
  .filter-actions { grid-column:span 2; }
  .editor { padding:22px; }
  .form-grid { gap:16px; }
  .history-row { display:block; }
  .history-row>span { display:block;margin:4px 0; }
  .pagination { gap:10px;font-size:9px; }
  .pagination .button { padding:8px;font-size:9px; }
  .auth-shell { margin:0 auto;padding:36px 20px;gap:28px; }
  .auth-brand { font-size:27px;gap:16px; }
  .auth-brand .brand-icon { width:72px;height:72px;border-radius:22px; }
  .auth-brand .brand-icon .ui-icon { width:40px;height:40px; }
  .auth-card { padding:28px 24px; }
  .auth-card h1 { font-size:28px; }
  .rec-heading { flex-wrap:wrap; }
  .rec-heading .tiny-label { white-space:normal; }
  .recommendation-card { padding:22px; }
  .recording { margin-left:20px;margin-right:20px; }
  .recent-recommendations .recording { display:flex; }
  .future { padding:35px 24px; }
  footer { font-size:7px;gap:12px; }
}
@media(max-width:480px) {
  .sidebar, .workspace { margin-left:8px;margin-right:8px; }
  .main-content { padding:22px 15px 0; }
  .topbar { padding-left:15px;padding-right:15px; }
  .top-right { display:none; }
  .page-heading { display:block; }
  .page-heading>.button { margin-top:16px; }
  .stat { padding:14px; }
  .stat-label { font-size:10px; }
  .stat .small { font-size:8px; }
  .stat-icon { width:30px;height:30px; }
  .stat-icon .ui-icon { width:16px;height:16px; }
  .quick-stack { grid-template-columns:1fr;gap:12px; }
  .quick-card { display:flex;gap:14px;padding:17px; }
  .quick-card .stat-icon { margin:0; }
  .quick-card h2 { min-height:0;margin:2px 0; }
  .quick-card .small { font-size:10px; }
  .quick-card .text-link { font-size:10px; }
  .panel-heading { padding:19px 17px 15px; }
  .panel-heading h2 { font-size:13px; }
  .chart-summary { padding-left:17px; }
  .chart-summary .small { margin-top:-6px; }
  .chart-footnote { font-size:8px;padding-left:17px;padding-right:17px; }
  .video-list { padding-left:17px;padding-right:17px; }
  .video-name strong { max-width:155px;font-size:10px; }
  .video-name .small { font-size:9px; }
  .video-meta .small { font-size:8px; }
  .album-art { width:31px;height:34px; }
  .popular-row { margin-left:17px;margin-right:17px;gap:10px; }
  .view-number .small { max-width:95px;font-size:7px; }
  .form-grid { grid-template-columns:1fr; }
  .artist-tile { padding:18px 12px; }
  .recording { display:block; }
  .recording>.button { margin-top:14px; }
  .recent-recommendations .recording { gap:12px; }
  .studio-banner { padding:20px;gap:13px; }
  .studio-banner .insight-icon { display:none; }
  .studio-banner h2 { font-size:15px; }
  .studio-banner>.button { margin-left:0; }
  .editor, .recommendation-card { padding:20px; }
  .auth-shell { padding:28px 18px; }
}
/* Keep supporting copy legible and avoid automatic input zoom on phones. */
@media(max-width:740px) {
  .sidebar nav>a, .page-heading p, .page-heading>.button,
  .stat-label, .stat .small, .quick-card .small, .quick-card .text-link,
  .video-name strong, .video-name .small, .video-meta .small,
  .view-number .small, .chart-footnote, .pagination, .pagination .button { font-size:12px; }
  .view-number .small { max-width:130px; }
  .global-search input, input, select, textarea { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}
@media(prefers-reduced-transparency:reduce) {
  .sidebar, .workspace, .panel, .stat, .filter-panel, .auth-card, .studio-banner { background:#f0eff5;backdrop-filter:none;-webkit-backdrop-filter:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .sidebar { background:rgba(237,238,246,.95); }
  .workspace { background:rgba(238,239,246,.92); }
  .panel, .stat, .filter-panel, .auth-card { background:rgba(250,249,253,.9); }
}
@media(prefers-contrast:more) {
  :root { --muted:#4f5367;--line:rgba(62,65,90,.3);--accent:#62469f; }
  .panel, .stat, .filter-panel { background:rgba(255,255,255,.82);border-color:#acacbd; }
  .small, .tiny-label, .eyebrow, .panel-caption, .chart-footnote { color:#575268; }
}

/* Artist workspaces and deliberate duplicate review. */
.profile-columns { align-items:start; }
.profile-facts { margin:0 0 18px; }
.profile-facts>div { display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line); }
.profile-facts dt { color:var(--muted); }
.profile-facts dd { margin:0;font-weight:600; }
.profile-related { margin-top:24px; }
.panel-heading-inline { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.panel-heading-inline h2 { margin:0; }
.duplicate-group .table-wrap { margin:18px 0; }
.merge-pair-form { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:16px; }
.merge-pair-form label { min-width:0;margin-bottom:0; }
.merge-pair-form select { width:100%; }
.merge-pair-form .button { margin-bottom:0; }
.merge-history-row { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--line); }
.merge-comparison-head { display:grid;grid-template-columns:130px 1fr 1fr;gap:16px;padding:0 0 14px;color:var(--muted); }
.merge-field { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;border:0;border-top:1px solid var(--line);margin:0;padding:16px 0 16px 146px;min-width:0; }
.merge-field legend { position:absolute;left:0;top:23px;width:130px;padding:0;font-weight:600; }
.merge-choice { display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.24);min-width:0;cursor:pointer;margin:0; }
.merge-choice:has(input:checked) { background:rgba(238,229,255,.65);border-color:#b4a1d5; }
.merge-choice input { flex:0 0 auto;margin-top:5px;width:16px;min-height:16px; }
.merge-choice>span { min-width:0; }
.merge-value { display:block;white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow-y:auto; }
.merge-comparison .checkbox { margin:20px 0; }
@media(max-width:1100px) { .merge-pair-form { grid-template-columns:1fr 1fr; }.merge-pair-form .button { justify-self:start;grid-column:1/-1; } }
@media(max-width:740px) {
  .merge-pair-form { grid-template-columns:1fr; }
  .merge-comparison-head { display:none; }
  .merge-field { padding:44px 0 16px;gap:10px; }
  .merge-field legend { top:12px;width:auto; }
  .merge-choice { padding:10px;gap:8px; }
  .merge-history-row { flex-wrap:wrap; }
  .profile-facts>div { flex-wrap:wrap;gap:8px; }
}

/* Catalog insights and musical taste. */
.analytics-range { display:flex;gap:10px;align-items:center;flex-shrink:0; }
.analytics-range select { width:auto;margin:0; }
.analytics-range .button { flex-shrink:0; }
.analytics-scope { margin:-6px 0 22px;max-width:860px; }
.analytics-chart { padding:0 20px; }
.analytics-chart svg { display:block;width:100%;height:auto; }
.analytics-data { padding:0 26px 22px; }
.analytics-data summary { cursor:pointer;color:var(--accent);font-size:12px; }
.analytics-data .table-scroll { max-height:320px;overflow:auto;margin-top:14px; }
.insight-progress { display:block;width:100%;height:6px;border:0;border-radius:10px;overflow:hidden;background:rgba(115,91,189,.09);margin:0 0 14px;accent-color:#ab94d2; }
.insight-progress::-webkit-progress-bar { background:rgba(115,91,189,.09);border-radius:10px; }
.insight-progress::-webkit-progress-value { background:linear-gradient(90deg,#c4b4e1,#9e88c5);border-radius:10px; }
.insight-progress::-moz-progress-bar { background:#ab94d2;border-radius:10px; }
.taste-columns { align-items:start; }
.taste-facts { margin:0 0 22px; }
.taste-facts>div { padding:10px 0;border-bottom:1px solid var(--line); }
.taste-facts dt { color:var(--muted);font-size:11px; }
.taste-facts dd { margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere; }
.taste-signal { padding:10px 0;border-top:1px solid var(--line); }
.taste-signal strong { font-size:12px; }
.quality-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:22px 0; }
.quality-grid>div,.quality-grid>a { padding:18px;border-radius:15px;background:rgba(255,255,255,.3); }
.quality-grid strong { display:block;font-size:28px;font-weight:600; }
.quality-grid span { font-size:11px;color:var(--muted);display:block; }
@media(max-width:1100px) { .analytics-range { flex-wrap:wrap; }.quality-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:740px) { .analytics-range { width:100%;margin-top:14px; }.analytics-range select { flex:1;min-width:0; }.analytics-chart { padding:0 6px; }.analytics-data { padding:0 18px 20px; }.quality-grid { gap:12px; }.quality-grid span { font-size:12px; }.taste-facts dt,.taste-signal strong { font-size:12px; }.analytics-scope { font-size:12px; }.page-heading:has(.analytics-range) { flex-wrap:wrap; } }

.recording-formats{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.recording-formats .badge{white-space:nowrap}

.video-format-filter{grid-template-columns:minmax(160px,280px) max-content}

.video-format-filter>label{margin-bottom:0}.recordings-table th:first-child,.recordings-table td:first-child{min-width:190px}

.playlist-section{margin-top:28px}.playlist-picker{margin-top:22px}.playlist-table td:first-child{min-width:210px}.playlist-picker>label{max-width:540px}