/* FR Music Studio — design system v5.0.0. Token architecture mirrors
   portal/assets/app.css (same names, same values) so Studio and Portal read
   as one product family. See docs/superpowers/specs/2026-08-15-studio-visual-redesign-design.md. */

/* ============ Tokens ============ */
@font-face{font-family:"InterVariable";src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --canvas:#fafafa;--surface:#ffffff;--surface-2:#f4f4f6;--surface-3:#ececf0;
  --ink:#101014;--muted:#6b6b76;--faint:#9a9aa5;
  --line:#e4e4e9;--line-strong:#d3d3da;
  --accent:#5b5fef;--accent-strong:#4448c9;--accent-soft:#eef0ff;
  --green:#16794f;--green-soft:#e5f5ec;
  --red:#c0272a;--red-soft:#fbe7e7;
  --amber:#a15c00;--amber-soft:#fdf0dc;
  --blue:#2159c9;--blue-soft:#e7eefc;
  --radius-sm:6px;--radius:8px;--radius-lg:12px;--radius-full:999px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --shadow-xs:0 1px 2px rgba(16,16,20,.04);
  --shadow-sm:0 1px 3px rgba(16,16,20,.06),0 1px 2px rgba(16,16,20,.04);
  --shadow-md:0 4px 16px rgba(16,16,20,.08);
  --shadow-focus:0 0 0 3px var(--accent-soft);
  --sans:"InterVariable",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sidebar-w:196px;
  /* legacy aliases kept so any not-yet-migrated selector still resolves */
  --bg:var(--canvas);--sidebar:var(--surface);--panel:var(--surface);--panel2:var(--surface-2);
  --line2:var(--line-strong);--text:var(--ink);--soft:var(--faint);
  --accent2:var(--accent-strong);--warning:var(--amber);--warning-soft:var(--amber-soft);
  --shadow:var(--shadow-sm);--radius:var(--radius-lg);
}
body.dark-mode{
  --canvas:#0b0b0e;--surface:#131318;--surface-2:#1b1b21;--surface-3:#24242b;
  --ink:#f2f2f4;--muted:#a2a2ac;--faint:#6e6e78;
  --line:#29292f;--line-strong:#35353d;
  --accent:#7b80ff;--accent-strong:#9a9eff;--accent-soft:#23233f;
  --green:#3ed88f;--green-soft:#12291f;
  --red:#f06b6e;--red-soft:#331615;
  --amber:#e3a438;--amber-soft:#2e2410;
  --blue:#6fa0ff;--blue-soft:#17233d;
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);--shadow-md:0 4px 16px rgba(0,0,0,.5);
}

/* ============ Reset & base ============ */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--canvas);color:var(--ink);font-family:var(--sans)}
body{font-size:12.5px;line-height:1.5;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
svg[viewBox="0 0 24 24"]{width:15px;height:15px;flex:0 0 auto}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}

/* ============ Shell (sidebar + header) ============ */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:var(--space-4) var(--space-2);background:var(--canvas);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.brand{display:flex;align-items:center;gap:7px;padding:3px 6px var(--space-4)}
.brand img{width:20px;height:20px;border-radius:5px;object-fit:cover}
.brand strong{font-size:12px;font-weight:600;color:var(--ink)}
.brand small{display:none}
.sidebar nav{display:grid;gap:1px}
.sidebar nav a{display:flex;align-items:center;gap:9px;min-height:30px;padding:0 8px;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;font-size:11.5px;transition:.12s}
.sidebar nav a span{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto;color:var(--faint)}
.sidebar nav a span svg{width:14px;height:14px}
.sidebar nav a:hover{background:var(--surface-2);color:var(--ink)}
.sidebar nav a.active{background:var(--accent-soft);color:var(--accent)}
.sidebar nav a.active span{color:var(--accent)}
.nav-group-label{padding:var(--space-3) 8px 3px;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sidebar nav>.nav-group-label:first-child{padding-top:0}
.sidebar-footer{margin-top:auto;padding-top:var(--space-2);border-top:1px solid var(--line);display:flex;align-items:center;gap:7px}
.sidebar-footer strong{font-size:11px;font-weight:500;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer form{display:contents}
.sidebar-footer button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--faint);font-size:11px;padding:5px;border-radius:var(--radius-sm)}
.sidebar-footer button:hover{background:var(--surface-2);color:var(--ink)}
.sidebar-footer button svg{width:13px;height:13px}

.workspace{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--space-6) var(--space-10);min-width:0}
.toolbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--line);margin-bottom:var(--space-4);position:sticky;top:0;background:var(--canvas);z-index:6}
.global-search{flex:1;max-width:420px;height:30px;padding:0 var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--faint);display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:11px;transition:.15s}
.global-search span{display:flex;align-items:center;gap:7px;overflow:hidden}
.global-search:hover{border-color:var(--line-strong)}
.global-search kbd,.search-field kbd{font-size:9px;padding:2px 5px;border:1px solid var(--line);border-radius:4px;color:var(--faint);background:var(--surface-2);font-family:var(--sans)}
.mobile-menu{display:none}
.theme-toggle{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);font-size:12px;transition:.15s}
.theme-toggle:hover{border-color:var(--line-strong)}

.button,.icon-button,.menu-button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);padding:6px 11px;font-weight:500;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.12s;line-height:1.2}
.button:hover,.icon-button:hover,.menu-button:hover{border-color:var(--line-strong);background:var(--surface-2)}
.button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.button.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.button.danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.button.danger:hover{filter:brightness(.96)}
.button.full{width:100%}
.button svg,.icon-button svg,.menu-button svg{width:13px;height:13px}
.mobile-menu svg,.theme-toggle svg{width:16px;height:16px}

.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-4)}
.eyebrow,.section-kicker,.breadcrumb{display:block;color:var(--faint);font-size:9.5px;font-weight:600;letter-spacing:.04em;margin-bottom:3px}
.page-header h1,.campaign-title h1{margin:0;font-size:17px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.page-header p,.campaign-title p{margin:3px 0 0;color:var(--muted);font-size:11.5px}

/* ============ Buttons/inputs/badges shared with forms ============ */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.form-grid label{display:grid;gap:4px;color:var(--muted);font-size:10.5px;font-weight:500}
.form-grid .wide{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea,.auth-card input{width:100%;min-height:32px;padding:0 var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);outline:none;font-size:11.5px;transition:.12s}
.form-grid textarea{min-height:74px;padding:8px var(--space-2)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.auth-card input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus)}
.form-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-3)}
.form-card{max-width:820px}

.badge{display:inline-flex;max-width:100%;padding:2px 8px;border-radius:var(--radius-full);font-size:10px;font-weight:600;line-height:1.6;border:none;background:var(--surface-3);color:var(--muted);text-align:center}
.badge.success{background:var(--green-soft);color:var(--green)}
.badge.warning{background:var(--amber-soft);color:var(--amber)}
.badge.danger{background:var(--red-soft);color:var(--red)}
.deadline{display:inline-flex;padding:2px 8px;border-radius:var(--radius-full);font-size:10px;font-weight:600;background:var(--surface-3);color:var(--muted)}
.deadline.warning{background:var(--amber-soft);color:var(--amber)}
.deadline.danger{background:var(--red-soft);color:var(--red)}
.msg-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;margin-left:5px;border-radius:var(--radius-full);background:var(--blue-soft);color:var(--blue);font-size:9.5px;font-weight:600;vertical-align:middle}
.smart-label{font-size:9px;color:var(--muted);padding:3px 7px;border:1px solid var(--line);border-radius:var(--radius-full)}
.danger-text{color:var(--red)!important}
.notice{padding:9px 11px;border-radius:var(--radius-sm);font-size:11.5px;margin-bottom:var(--space-3);border:1px solid transparent}
.notice.success{background:var(--green-soft);color:var(--green);border-color:transparent}
.notice.danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.notice.warning{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.link-button{border:0;background:none;padding:0;color:var(--accent);font-weight:500;font-size:inherit;cursor:pointer;text-decoration:underline}
.link-button:hover{color:var(--accent-strong)}

/* ============ Hairline table pattern (used by every list page) ============ */
/* No overflow:hidden here — it was clipping the absolutely-positioned
   .context-menu dropdown for any row near the table's own bottom edge
   (effectively most rows), making the "..." menu invisible instead of just
   unstyled. Corners are rounded via the first/last row instead, so the
   visual stays identical without clipping anything. */
.data-table{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.data-table>*:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
.data-table>*:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.data-row,.ui-row,.campaign-row,.partner-row,.playlist-row,.submission-row,.artist-row,.partner-directory-row,.picker-row{
  border:0;border-radius:0;background:none;padding:9px var(--space-3);border-bottom:1px solid var(--line);transition:.1s
}
.data-row:last-child,.ui-row:last-child,.campaign-row:last-child,.partner-row:last-child,.playlist-row:last-child,
.submission-row:last-child,.artist-row:last-child,.partner-directory-row:last-child,.picker-row:last-child{border-bottom:0}
.data-row:hover,.ui-row:hover,.campaign-row:hover,.partner-row:hover,.playlist-row:hover,
.submission-row:hover,.artist-row:hover,.partner-directory-row:hover,.picker-row:hover{background:var(--surface-2);border-color:var(--line)}
.data-row b,.campaign-row b{font-size:11px;font-weight:500}
.table-header,.playlist-table-head,.submission-table-head{padding:7px var(--space-3);color:var(--faint);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cell-label{display:block;color:var(--faint);font-size:9px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:2px}
.table-panel{padding:0}
.table-panel .data-table{border:0;border-radius:0}
.campaign-row,.partner-row,.artist-row,.partner-directory-row{display:grid;grid-template-columns:minmax(220px,1.5fr) 110px 100px 90px 100px 88px;gap:var(--space-2);align-items:center}
.campaign-row.compact{grid-template-columns:minmax(200px,1.5fr) 110px 100px 74px 90px 44px}

.identity-cell{display:flex;align-items:center;gap:9px;min-width:0}
.identity-text{min-width:0}
.identity-text strong,.identity-text small,.identity-text a{display:block}
.identity-text strong{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.identity-text small{color:var(--muted);font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cover{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;overflow:hidden;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:10.5px;flex:0 0 auto}
.cover.large{width:38px;height:38px;border-radius:9px;font-size:13px}
.cover img{width:100%;height:100%;object-fit:cover}
.avatar{width:28px;height:28px;border-radius:var(--radius-sm);object-fit:cover;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:600}
.large-avatar{width:52px;height:52px;border-radius:10px}
.avatar-fallback{background:var(--accent-soft);color:var(--accent)}

/* Row actions stay visible — some rows (e.g. the submissions matrix) put a
   genuinely primary CTA in here ("Enviar para revisão"), not just secondary
   icons, so hiding until hover would hide the only way to act on that row.
   Quietness comes from the smaller, bordered icon-button style itself. */
.row-actions{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:4px}
.icon-button,.menu-button{min-height:26px;padding:5px 7px;font-size:10px}
.icon-button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.icon-button.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.context-menu{display:none;position:absolute;right:0;top:30px;z-index:50;width:150px;padding:4px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-md)}
.context-menu.open{display:grid}
.context-menu a,.context-menu button{width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:7px 8px;border-radius:var(--radius-sm);font-size:11px;cursor:pointer}
.context-menu a:hover,.context-menu button:hover{background:var(--surface-2)}

.filter-tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:var(--space-3);border-bottom:1px solid var(--line);padding-bottom:0}
.filter-tabs a{padding:7px 3px;margin-right:var(--space-4);color:var(--muted);font-size:11.5px;font-weight:500;border-bottom:2px solid transparent}
.filter-tabs a.active{color:var(--ink);border-color:var(--accent)}
.playlist-filters,.finance-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--space-3)}
.playlist-filters input,.playlist-filters select,.finance-filter input,.finance-filter select{min-height:30px;padding:0 var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:11px}
.playlist-filters input{flex:1 1 160px;min-width:120px}
.playlist-filters select,.finance-filter select{min-width:130px}
.finance-filter select{flex:1 1 130px}
.finance-filter input[type=date]{min-width:120px}

.playlist-table-head,.playlist-row{display:grid;grid-template-columns:minmax(220px,1.6fr) 120px 90px 90px minmax(130px,1fr) 100px 210px;gap:var(--space-2);align-items:center}
.playlist-table-head span[data-sort]{cursor:pointer;user-select:none}
.playlist-table-head span[data-sort]:hover{color:var(--ink)}
.playlist-table-head span[data-sort].sorted::after{content:' \25BE'}
.playlist-pagination{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.playlist-pagination button{min-height:28px;padding:4px 9px;font-size:10.5px}
.playlist-pagination button:disabled{opacity:.4;cursor:default}

.submission-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.submission-table-inner{display:grid;gap:0;min-width:900px}
.submission-table-head,.submission-row{display:grid;grid-template-columns:20px minmax(180px,1.4fr) 96px minmax(120px,1fr) 100px 140px 120px 170px;gap:var(--space-2);align-items:center}

.picker-results{display:grid;gap:0;margin-top:var(--space-2);max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.picker-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(140px,1fr) auto;gap:var(--space-2);align-items:center}
.picker-add-form{display:flex;gap:5px;align-items:center}
.playlist-picker-modal{width:min(760px,calc(100vw - 24px))}

.welcome-actions{display:flex;gap:6px}
.partner-table{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.partner-identity{display:flex;gap:8px;align-items:center;min-width:0}
.partner-identity strong,.partner-identity small,.partner-identity a{display:block}
.partner-identity small{font-size:10px;color:var(--muted)}
.match-list{display:grid;gap:6px}
.match-card{display:grid;gap:5px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.match-panel{max-width:340px}
.profile-upload{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);padding:9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.smart-import{padding:10px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-2)}
.quick-import{display:flex;gap:7px}
.quick-import input{flex:1}
.finance-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.finance-list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.finance-list a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:9px var(--space-3);border-bottom:1px solid var(--line)}
.finance-list a:last-child{border-bottom:0}
.finance-list a:hover{background:var(--surface-2)}
.finance-list a small{color:var(--muted)}

/* ============ Empty states ============ */
.empty-state{padding:var(--space-8) var(--space-4);text-align:center;color:var(--muted);font-size:11.5px}
.empty-state strong{display:block;color:var(--ink);font-size:12.5px;font-weight:600;margin-bottom:3px}
.empty-state p{margin:4px 0 0}

/* ============ Skeleton loader ============ */
.skeleton-row{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);border-bottom:1px solid var(--line)}
.skeleton-row:last-child{border-bottom:0}
.skeleton-block{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skeleton-pulse 1.4s ease infinite}
@keyframes skeleton-pulse{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ============ Entity detail: header + tabs + side panel ============ */
.detail-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.detail-toolbar>a{font-size:11.5px;color:var(--muted);font-weight:500}
.detail-toolbar>a:hover{color:var(--ink)}
.entity-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:var(--space-3)}
.entity-header .entity-title{flex:1;min-width:0}
.entity-header .entity-title strong{display:block;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entity-header .entity-title small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.entity-header .entity-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
/* legacy alias — retained so any not-yet-migrated markup keeps a readable layout */
.campaign-summary{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:var(--space-3)}
.campaign-title h1{font-size:15px}

.entity-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:var(--space-4);align-items:start}
.campaign-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--space-4);align-items:start}
.entity-tabs{display:flex;gap:var(--space-4);margin-bottom:var(--space-3);border-bottom:1px solid var(--line)}
.entity-tabs a{padding:0 0 8px;font-size:11.5px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.entity-tabs a.active{color:var(--ink);border-color:var(--accent);font-weight:600}
.entity-tabs a:hover{color:var(--ink)}
.side-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:var(--space-3)}
.side-panel .stat{margin-bottom:var(--space-3)}
.side-panel .stat:last-child{margin-bottom:0}
.side-panel .stat span{display:block;font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.side-panel .stat b{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-top:2px}

.profile-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-4);align-items:start}
.profile-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:var(--space-4)}
.profile-card .large-avatar{margin-bottom:var(--space-2)}
.profile-stats{display:grid;gap:6px;margin:var(--space-3) 0;padding:var(--space-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.profile-stats div{display:flex;justify-content:space-between;font-size:11px}
.profile-stats span{color:var(--muted)}
.danger-zone{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);display:flex;gap:6px}

.stat-row{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin-bottom:var(--space-3)}
.stat-row>div{flex:1 1 140px;padding:var(--space-3) var(--space-4);border-right:1px solid var(--line)}
.stat-row>div:last-child{border-right:0}
.stat-row span{display:block;color:var(--faint);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.stat-row strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:3px;color:var(--ink)}
.stat-row small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.metric-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2);margin-bottom:var(--space-3)}
.metric-strip article{min-height:0;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;gap:4px}
.metric-strip span{color:var(--faint);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.metric-strip strong{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

.progress-bar{height:3px;border-radius:var(--radius-full);background:var(--surface-3);overflow:hidden;margin-top:4px}
.progress-bar>i{display:block;height:100%;background:var(--accent);border-radius:var(--radius-full)}

.activity-feed{display:grid;gap:0;list-style:none;margin:0;padding:0}
.activity-feed li{display:flex;gap:9px;align-items:flex-start;padding:8px 2px;border-bottom:1px solid var(--line)}
.activity-feed li:last-child{border-bottom:0}
.activity-feed .activity-icon{width:22px;height:22px;border-radius:var(--radius-sm);background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto;color:var(--muted)}
.activity-feed .activity-icon svg{width:12px;height:12px}
.activity-feed p{margin:0;font-size:11.5px}
.activity-feed time{margin-left:auto;padding-left:var(--space-2);font-size:9.5px;color:var(--faint);white-space:nowrap}

.section-nav{position:sticky;top:0;z-index:5;display:flex;gap:3px;padding:8px 0;margin-bottom:var(--space-3);background:var(--canvas);border-bottom:1px solid var(--line);overflow-x:auto}
.section-nav a{padding:6px 9px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.section-nav a:hover{color:var(--ink);background:var(--surface-2)}

.priority-groups{display:grid;gap:var(--space-3)}
.priority-group h3{margin:0 0 7px;font-size:11px;font-weight:600;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);min-width:0}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.panel-head h2{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.panel-head p{margin:2px 0 0;color:var(--muted);font-size:10.5px}
.panel-head>a{color:var(--accent);font-size:10.5px;font-weight:500}
.atelier-dashboard{display:grid;gap:var(--space-3)}
.dashboard-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--space-3)}

/* ============ Modals / drawers / toasts ============ */
.modal{width:min(560px,calc(100vw - 24px));max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);padding:var(--space-4);box-shadow:var(--shadow-md)}
.modal::backdrop{background:rgba(16,16,20,.32)}
.modal-head{margin-bottom:var(--space-3)}
.modal-head h2{font-size:14px;font-weight:600;margin:0}
.modal-head p{margin:3px 0 0;color:var(--muted);font-size:11px}
.modal-close{position:absolute;top:var(--space-2);right:var(--space-2)}
.modal-close button{width:26px;height:26px;border:0;background:none;color:var(--faint);font-size:15px;border-radius:var(--radius-sm)}
.modal-close button:hover{background:var(--surface-2);color:var(--ink)}
.drawer-preview{display:flex;align-items:center;gap:var(--space-2);padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.drawer-new-curator{}
.bulk-import-textarea{width:100%;min-height:150px;padding:8px var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:11.5px;font-family:ui-monospace,monospace}
.bulk-import-results{margin:var(--space-2) 0 0;padding-left:0;list-style:none;font-size:11px;max-height:210px;overflow:auto;display:grid;gap:3px}
.bulk-import-results li{display:flex;justify-content:space-between;gap:7px;padding:5px 7px;border-radius:var(--radius-sm);background:var(--surface-2)}
.review-queue-list{display:grid;gap:5px;margin:var(--space-2) 0}
.review-queue-list label{display:flex;align-items:center;gap:7px;padding:7px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);font-size:11px}

.toast{position:fixed;left:50%;bottom:var(--space-4);transform:translateX(-50%);padding:9px 14px;border-radius:var(--radius-sm);background:var(--ink);color:var(--canvas);font-size:11.5px;font-weight:500;box-shadow:var(--shadow-md);z-index:200}
.toast[hidden]{display:none}

.messages-panel{margin-top:var(--space-3)}
.message-thread{display:grid;gap:7px;max-height:400px;overflow:auto;padding:3px;margin-bottom:var(--space-3)}
.message-bubble{max-width:82%;padding:8px 10px;border-radius:10px 12px 12px 3px;background:var(--surface-2);font-size:11.5px}
.message-bubble.from-admin{justify-self:end;border-radius:10px 12px 3px 12px;background:var(--blue-soft)}
.message-bubble header{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:3px;font-size:9.5px;color:var(--muted);font-weight:600}
.message-composer{display:grid;grid-template-columns:1fr auto;gap:var(--space-2)}
.message-composer textarea{grid-column:1/-1;min-height:56px}

/* ============ Search overlay ============ */
.search-overlay[hidden]{display:none}
.search-overlay{position:fixed;inset:0;z-index:100;background:rgba(16,16,20,.28);padding-top:10vh;display:flex;justify-content:center}
.search-dialog{width:min(560px,92vw);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md);max-height:70vh;overflow:auto}
.search-field{display:flex;align-items:center;gap:var(--space-2);padding:7px 9px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.search-field input{flex:1;border:0;background:none;color:var(--ink);outline:none;font-size:12.5px}
.search-results{display:grid;gap:2px;margin-top:var(--space-2)}
.search-group-label{padding:8px 8px 3px;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.search-result{display:grid;grid-template-columns:60px 1fr;gap:var(--space-2);padding:7px 8px;border-radius:var(--radius-sm)}
.search-result:hover{background:var(--surface-2)}
.search-result em{font-style:normal;font-size:9px;color:var(--faint);text-transform:uppercase;font-weight:600}
.search-result strong{display:block;font-size:11.5px;color:var(--ink);font-weight:500}
.search-result small{display:block;font-size:10px;color:var(--muted)}

.auth-page{min-height:100vh;display:grid;place-items:center;background:var(--canvas)}
.auth-card{width:min(360px,92vw);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md)}
.auth-card img{display:block;width:52px;height:52px;border-radius:var(--radius);margin:0 auto var(--space-3)}
.auth-card form{display:grid;gap:var(--space-2)}
.theme-options{display:flex;gap:6px}
.integration-status .badge{font-size:10px}
/* Settings reads better as a vertical field list than the generic 2-column
   form-grid used by campaign/artist/partner forms — spec §7. IDs below are
   Settings-page section anchors, unique to that page. */
.form-card .form-grid,#security .form-grid,#message-templates .form-grid{grid-template-columns:1fr;max-width:420px}
.form-card .form-grid .wide,#security .form-grid .wide,#message-templates .form-grid .wide{max-width:none}

/* ============ Responsive ============ */
@media(max-width:1240px){
  .campaign-layout,.entity-layout,.dashboard-grid,.profile-layout{grid-template-columns:1fr}
  .metric-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:calc(-1 * var(--sidebar-w) - 20px);z-index:90;width:var(--sidebar-w);background:var(--surface)}
  .sidebar.open{left:0;box-shadow:var(--shadow-md)}
  .workspace{padding:0 var(--space-3) var(--space-6)}
  .mobile-menu{display:inline-flex}
  .page-header{align-items:flex-start;flex-direction:column;gap:var(--space-2)}
  .metric-strip{grid-template-columns:repeat(2,1fr)}
  .campaign-row,.partner-directory-row,.artist-row,.playlist-row{grid-template-columns:1fr 1fr}
  .playlist-table-head,.table-header{display:none}
  .form-grid{grid-template-columns:1fr}
  .form-grid .wide{grid-column:auto}
  .finance-grid{grid-template-columns:1fr}
  .picker-row{grid-template-columns:1fr}
}
@media(max-width:520px){
  .metric-strip,.stat-row{grid-template-columns:1fr}
  .stat-row{flex-direction:column}
  .quick-import{flex-direction:column}
  .finance-filter select,.finance-filter input{flex:1 1 100%}
}