/* ReelFusion workspace: shared visual system. Loaded last after feature styles. */
:root {
  --bg: #101113;
  --panel: #191a1e;
  --line: #303136;
  --border: var(--line);
  --text: #f2f3f7;
  --muted: #a0a7b8;
  --purple: #b5a0ff;
  --lime: #b4e8c7;
  --red: #ffa4ad;
  --radius: 16px;
  --surface-raised: #222328;
  --accent-soft: #b5a0ff12;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--bg); }
::selection { background: #b5a0ff44; color: #fff; }
button, .button { min-height: 40px; border-radius: 9px; font-size: 13px; font-weight: 600; padding: 11px 17px; transition: background .15s, border-color .15s, color .15s; }
button:hover, .button:hover { filter: brightness(1.06); }
button.secondary, .button.secondary { background: #27282e; border: 1px solid #3a3b42; }
button.secondary:hover, .button.secondary:hover { background: #323339; border-color: #666079; }
button.ghost, .text-button { color: #c1b3f0; }
button.small, .button.small { font-size: 12px; min-height: 36px; padding: 8px 12px; }
button.text-button, .text-button { min-height: 32px; font-size: 12px; line-height: 1.5; }
button:disabled { opacity: .48; }
:is(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid #c4b5ff; outline-offset: 3px; }
input, textarea, select { background: #121315; border-color: #3b3c44; min-height: 46px; font-size: 14px; border-radius: 10px; padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: #838b9f; }
input:focus, select:focus, textarea:focus { border-color: #ad98f6; }
input[type=checkbox], input[type=radio], input[type=hidden] { min-height: 0; }
label { font-size: 13px; color: #d0d5e1; }
small { line-height: 1.55; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.7px; }
.pill { padding: 5px 10px; font-size: 11px; font-weight: 550; line-height: 1.4; }
.pill.good { background: #163026; color: #b4e8c7; border-color: #2c4a3d; }
.pill.warning { background: #302719; color: #f5cf95; border-color: #51422b; }
.pill.purple { background: #292438; color: #d0c2ff; border-color: #423852; }
.card, .account-panel, .asset-card, .performer-card { background: var(--panel); border-color: var(--line); box-shadow: 0 1px 0 #ffffff03; }
.card { padding: 26px; }
.divider { margin: 22px 0; }
.empty { background: #191a1e70; border-color: #3b4050; padding: 52px 24px; }
.empty h3 { font-size: 21px; }
.empty p { color: #adb3c3; }
.notice { border-color: #57462c; background: #292317; color: #e3d0ac; font-size: 13px; }

/* A stable, scrollable navigation rail keeps every destination reachable. */
.sidebar { width: 228px; padding: 24px 14px 18px; background: #131416; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #36394a transparent; }
.sidebar > .brand { margin: 0 6px 28px; font-size: 22px; letter-spacing: -.7px; }
.brand-mark { width: 34px; height: 34px; }
.workspace { margin: 0 0 18px; padding: 13px 12px; background: #1e1f24; border-color: #303542; font-size: 12px; line-height: 1.5; }
.workspace > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.workspace .avatar { flex-shrink: 0; background: #332b49; }
.sidebar-create { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border-radius: 10px; margin: 0 0 25px; background: var(--purple); color: #201936; font-size: 13px; font-weight: 700; }
.sidebar-create:hover { background: #cbbdff; }
.sidebar-create { position: sticky; top: 0; z-index: 3; flex-shrink: 0; }
.sidebar > * { flex-shrink: 0; }
.sidebar-create svg { width: 19px; height: 19px; }
.sidebar > .eyebrow { padding: 0 13px; color: #848da2; font-size: 10px; letter-spacing: 1.5px; }
.side-link { padding: 11px 13px; min-height: 43px; font-size: 13px; margin: 3px 0; gap: 12px; color: #a9b0c2; border: 1px solid transparent; }
.side-link:hover { background: #222328; color: #f1edff; }
.side-link.active { color: #d9ceff; background: #302a41; border-color: #443951; }
.nav-icon { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; }
.nav-icon svg { display: block; width: 18px; height: 18px; }
.studio-tools { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.studio-tools summary { color: #939caf; font-size: 11px; padding: 10px 13px; cursor: pointer; }
.sidebar-bottom { padding-top: 24px; }
.credit-box { margin: 0 0 16px; padding: 17px 16px; background: #222128; border: 1px solid #3e374f; border-radius: 12px; }
.credit-box strong { font-size: 27px; font-weight: 650; font-variant-numeric: tabular-nums; }
.credit-box p { font-size: 11px; margin: 4px 0 12px; }
.credit-box a { font-size: 12px; }
.sidebar-bottom > .row { gap: 5px; }
.sidebar-bottom small { font-size: 12px; }
.main { margin-left: 228px; width: calc(100% - 228px); min-width: 0; }
.topbar { height: 72px; padding: 0 36px; background: #101113ef; border-color: #2b2c30; }
.topbar-create { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; min-height: 38px; }
.topbar-create svg { width: 17px; height: 17px; }

.breadcrumbs { font-size: 12px; }
.breadcrumbs span { padding: 0 9px; color: #555d70; }
.breadcrumbs b { color: #d4d9e5; }
.topbar .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: #292536; }
.notification-bell { width: 38px; height: 38px; min-height: 38px; border-radius: 11px; background: #202126; border-color: #343847; }
.notification-panel { background: #202126; border-color: #434959; }
.content { max-width: 1440px; padding: 38px 36px 64px; }
.page-heading { margin-bottom: 28px; align-items: center; gap: 24px; }
.page-heading h1 { font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -1.25px; font-weight: 650; line-height: 1.18; margin-bottom: 10px; }
.page-heading p { font-size: 14px; line-height: 1.7; max-width: 730px; }
.page-heading > div { min-width: 0; }
.page-heading > :is(button,.button) { flex-shrink: 0; }

/* Creator overview: portrait and account facts have room of their own. */
.agency-stats { gap: 12px; background: none; border: 0; border-radius: 0; margin: 26px 0 30px; overflow: visible; }
.agency-stats:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.agency-stats > div, .agency-stats > div:last-child { border: 1px solid var(--line); padding: 21px 23px; border-radius: 13px; background: #191a1e; }
.agency-stats span { font-size: 10px; letter-spacing: 1.2px; }
.agency-stats strong { font-size: 34px; font-weight: 600; letter-spacing: -.8px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.agency-stats .needs-attention { border-color: #4d4131; }
.creator-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.creator-card { display: grid; grid-template-columns: 168px minmax(0,1fr); border-radius: 16px; background: var(--panel); border-color: #34353b; }
.creator-card:hover { transform: none; border-color: #7e6ca3; box-shadow: 0 10px 32px #0003; }
.creator-portrait { height: 100%; min-height: 272px; background: #212431; border-right: 1px solid #363947; }
.creator-portrait img { object-position: center; }
.creator-open { top: 12px; right: 12px; height: 32px; width: 32px; font-size: 14px; }
.creator-card-body { padding: 24px; min-width: 0; display: flex; flex-direction: column; }
.creator-card-body > .row { gap: 10px; align-items: flex-start; }
.creator-card h2 { font-size: 25px; font-weight: 650; letter-spacing: -.75px; }
.creator-card .pill { font-size: 10px; }
.creator-card p { font-size: 12px; margin: 14px 0 24px; overflow-wrap: anywhere; }
.creator-counts { gap: 20px; font-size: 12px; }
.creator-counts b { font-size: 21px; font-weight: 600; }
.creator-card-footer { margin-top: auto; padding-top: 18px; flex-wrap: wrap; font-size: 11px; line-height: 1.5; }
.creator-heading { margin-bottom: 22px; gap: 18px; }
.creator-heading h1 { font-size: 38px; font-weight: 650; line-height: 1.15; }
.creator-heading p { font-size: 13px; }
.creator-avatar { width: 72px; height: 72px; border-radius: 18px; border: 1px solid #666074; }
.back-link { margin-bottom: 22px; font-size: 12px; }
.creator-tabs { gap: 4px; margin-bottom: 24px; }
.creator-tabs button { min-height: 48px; padding: 13px 16px; font-size: 13px; }
.creator-tabs button.active { color: #d5c6ff; background: #b5a0ff0a; }

/* Create and media: keep previews prominent, with a compact working surface. */
.create-modes { padding: 5px; background: #1e1f24; border-color: #34353b; margin: 0 0 24px; border-radius: 12px; }
.create-modes button { min-height: 42px; font-size: 13px; font-weight: 550; }
.create-modes button.active { background: #332b49; color: #e5dcff; box-shadow: inset 0 0 0 1px #554669; }
.create-grid { grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 22px; align-items: stretch; }
.source-form { padding: 26px; }
.source-form > label:first-child { margin-top: 0; }
.source-form .source-facts { margin: 20px 0; gap: 7px; }
.source-form .footer-note { font-size: 12px; line-height: 1.7; }
.source-form > button[type=submit] { min-height: 46px; }
.source-form h3 { font-size: 15px; margin-bottom: 12px; }
.source-form .row button { font-size: 13px; }
.preview-panel { padding: 23px; background: #171a24; border-color: #363348; }
.preview-panel .phone { width: 170px; margin: 20px auto; background: radial-gradient(ellipse at 50% 35%,#3d3155,#181923 80%); border-color: #574b6e; border-radius: 24px; box-shadow: 0 12px 32px #0004; }
.phone .frame { inset: 12px; border-color: #9d86c63b; border-radius: 15px; }
.phone-center { padding: 15px; }
.phone-center strong { font-size: 15px; line-height: 1.5; font-weight: 600; }
.phone-center p { font-size: 11px; line-height: 1.7; }
.phone-center .symbol { font-size: 31px; }
.preview-panel .flow { justify-content: center; gap: 5px; font-size: 11px; }
.preview-panel .flow span { padding: 7px; }
.creation-queue { margin-top: 32px; padding-top: 26px; }
.creation-heading h2 { font-size: 27px; letter-spacing: -.6px; }
.creation-item { background: #1e1f24; border-radius: 14px; border-color: #34353b; padding: 17px; }
.creation-media { flex-basis: 90px; height: 158px; }
.creation-info .eyebrow { font-size: 9px; }
.creation-info h3 { font-size: 16px; }
.creation-meta { font-size: 11px; }
.creation-info .pill { font-size: 10px; }
.creation-message { font-size: 12px; color: #acb3c3; }
.creation-filters button { background: #1e1f24; border-color: #323746; min-height: 38px; }
.creation-filters button.active { background: #2e263f; border-color: #8c74b4; }
.asset-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 20px; }
.asset-card, .performer-card { border-radius: 14px; }
.asset-cover { height: 285px; background: #0a0c11; }
.asset-info { padding: 18px; }
.asset-info h3 { font-size: 14px; }
.asset-info p { font-size: 12px; }
.asset-info .row { gap: 8px; }
.asset-info button { font-size: 12px; }
.media-publication { border: 1px solid #ffffff26; letter-spacing: .5px; box-shadow: 0 3px 14px #0006; }
.performer-media { height: 330px; }
.performer-rank { background: #201a30ed; color: #dfd3ff; padding: 7px 12px; }
.performer-body { padding: 22px; }
.performer-numbers { grid-template-columns: minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap: 12px; }
.performer-numbers > div { min-width: 0; }
.performer-numbers strong { font-size: 27px; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.performer-numbers small { font-size: 12px; }

/* Account health, publishing history and analytics share the same hierarchy. */
.account-filter-bar { background: #191a1e; border-color: #34353b; padding: 14px 16px; margin-bottom: 24px; border-radius: 13px; }
.account-filter-chip { padding: 9px 12px; font-size: 12px; }
.account-filter-chip.selected { background: #302740; border-color: #736089; color: #e0d4ff; }
.account-kind-filters { margin-top: 9px; padding-top: 9px; }
.account-filter-summary { margin-top: 11px; font-size: 12px; }
.account-category-heading h2 { font-size: 18px; font-weight: 600; }
.account-category-heading p { font-size: 12px; }
.account-panel { padding: 23px; border-radius: 16px; }
.account-panel > .row:first-child { padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.account-panel h3 { font-size: 17px; letter-spacing: -.2px; }
.account-panel small { font-size: 12px; }
.account-observation { grid-template-columns: 220px minmax(0,1fr); margin-top: 20px; gap: 22px; }
.account-preview { background: #131417; border-color: #34353b; border-radius: 12px; padding: 12px; }
.account-preview-image img { height: 280px; }
.account-preview-caption { font-size: 11px; }
.account-preview-caption small { font-size: 11px; }
.account-preview .small, .account-preview .text-button { font-size: 11px; }
.account-preview-heading .eyebrow { font-size: 9px; }
.health-strip { gap: 7px; }
.health-cell { font-size: 11px; padding: 10px 8px; gap: 6px; border-radius: 8px; }
.health-cell.good { background: #192b25; border-color: #2b4438; color: #b5d8c4; }
.health-cell.attention { background: #30271e; color: #efc994; }
.reel-settings-summary { padding: 15px 16px; margin-top: 18px; border: 1px solid #373449; border-radius: 11px; background: #b5a0ff05; }
.reel-settings-summary > strong { font-size: 13px; font-weight: 600; color: #e3ddef; }
.reel-settings-summary p { font-size: 12px; line-height: 1.9; margin: 9px 0; color: #a5aabd; }
.reel-settings-summary p strong { color: #d5c8ec; font-weight: 550; }
.reel-settings-summary > small { display: block; font-size: 11px; line-height: 1.6; }
.reel-settings-summary > button { padding: 8px 0 0; min-height: 32px; }
.account-insights { margin-top: 22px; }
.insight-metrics > div { background: #12161f; border-color: #34353b; padding: 17px; }
.insight-metrics strong { font-size: 29px; font-weight: 600; font-variant-numeric: tabular-nums; }
.insight-metrics small, .insight-facts { font-size: 12px; }
.performance-kpis article { background: var(--panel); border-color: #34353b; border-radius: 14px; }
.performance-kpis article.performance-primary { background: #262136; border-color: #625176; }
.performance-kpis strong { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.performance-kpis small { font-size: 12px; }
.table { font-size: 13px; }
.table th { font-size: 10px; letter-spacing: 1px; background: #141518; color: #a9b1c4; padding: 15px; }
.table td { padding: 18px 15px; border-color: #303136; }
.table tbody tr:hover { background: #ffffff03; }
.table td p, .table td small { font-size: 12px; line-height: 1.6; }
.planner-week { gap: 9px; }
.planner-day { background: #141518; border-color: #34353b; border-radius: 12px; padding: 17px 6px; }
.planner-day.selected { background: #30263f; border-color: #a18ac7; box-shadow: inset 0 3px #c7b0f7; }
.planner-day strong { font-size: 26px; font-weight: 650; }
.planner-day small, .planner-day-count { font-size: 11px; }
.planner-entry { background: #141518; border-color: #34353b; border-radius: 13px; }
.planner-copy h3 { font-size: 17px; }
.calendar-history { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.calendar-history > summary { margin-bottom: 0; color: #d1c1fc; font-weight: 550; }
.calendar-history[open] > summary { margin-bottom: 20px; }

/* Sheets: readable instructions, distinct controls and reachable close buttons. */
dialog { padding: 30px; border-radius: 18px; border-color: #4a455e; background: #191a1e; box-shadow: 0 32px 100px #0009; max-height: calc(100dvh - 48px); scrollbar-width: thin; scrollbar-color: #534861 transparent; }
dialog::backdrop { background: #060810c7; backdrop-filter: blur(5px); }
dialog .close { width: 36px; height: 36px; min-height: 36px; border-radius: 50%; top: 12px; right: 12px; background: #ffffff08; color: #ced0df; padding: 4px; }
dialog h2 { margin: 10px 32px 20px 0; font-size: 27px; line-height: 1.25; font-weight: 650; letter-spacing: -.7px; }
dialog p { font-size: 13px; line-height: 1.75; }
dialog .eyebrow { padding-right: 28px; }
dialog .setup-instruction { padding: 20px 0; }
dialog .setup-instruction h3 { font-size: 16px; margin-bottom: 10px; }
.setup-help { margin: 0 0 10px; }
.setup-help > summary { font-size: 12px; color: #b5a0ff; cursor: pointer; padding: 5px 0; }
.setup-help p { margin: 10px 0; color: #a9b0c2; }
.setup-instruction > small { font-size: 12px; }
.post-source-preview { background: #131417; border-color: #343948; }
#toast { background: #282430; border-color: #7b678f; padding: 15px 21px; border-radius: 12px; max-width: calc(100vw - 32px); width: max-content; }
.landing { max-width: 1320px; }
.landing-nav { height: 92px; }
.landing .hero h1 { font-weight: 600; }
.landing .hero p { color: #aeb5c7; line-height: 1.8; }
.join-shell .card { border-color: #3d4050; }

@media (min-width: 1600px) {
  .content { padding-top: 44px; }
  .creator-card { grid-template-columns: 180px minmax(0,1fr); }
  .creator-portrait { min-height: 300px; }
}
@media (max-width: 1200px) and (min-width: 721px) {
  .sidebar { width: 220px; padding-left: 14px; padding-right: 14px; }
  .sidebar > .brand { font-size: 20px; gap: 9px; }
  .main { margin-left: 220px; width: calc(100% - 220px); }
  .content { padding: 30px 26px 50px; }
  .topbar { padding: 0 26px; }
  .creator-grid { grid-template-columns: 1fr; }
  .creator-card { grid-template-columns: 170px minmax(0,1fr); }
  .creator-portrait { min-height: 255px; }
  .health-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1050px) {
  .create-grid { grid-template-columns: 1fr; }
  .account-observation { grid-template-columns: 190px minmax(0,1fr); gap: 18px; }
  .account-preview-image img { height: 260px; }
  .account-panel > .row:first-child { gap: 18px; }
}
@media (max-width: 850px) {
  .account-observation { grid-template-columns: 1fr; }
  .account-preview-image img { height: 300px; }
  .page-heading { align-items: flex-start; }
  .page-heading > :is(button,.button) { font-size: 12px; padding: 10px 13px; }
}
@media (max-width: 720px) {
  .sidebar { position: relative; inset: auto; width: 100%; padding: 17px 18px; overflow: visible; min-height: 72px; }
  .sidebar > .brand { font-size: 21px; margin: 0; }
  .brand-mark { width: 32px; height: 32px; }
  .main { margin: 0; width: 100%; }
  .sidebar:not(.nav-expanded) .sidebar-create { display: none; }
  .sidebar.nav-expanded .sidebar-create { margin: 18px 0 12px; }
  .sidebar.nav-expanded .side-link { min-height: 44px; white-space: normal; padding: 11px; font-size: 12px; }
  .sidebar.nav-expanded .workspace { margin: 18px 0 0; }
  .sidebar-bottom { display: none; }
  .mobile-menu { top: 17px; right: 18px; min-height: 38px; }
  .topbar { height: 58px; padding: 0 18px; }
  .topbar .breadcrumbs { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > .row { flex-shrink: 0; gap: 7px; }
  .topbar-create { padding: 8px 10px; font-size: 12px; }
  .content { padding: 27px 18px 44px; }
  .page-heading { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 23px; }
  .page-heading h1 { font-size: 29px; letter-spacing: -.9px; line-height: 1.2; }
  .page-heading p { font-size: 13px; }
  .page-heading .row { margin-top: 0; }
  .card { padding: 19px; }
  .agency-stats { gap: 10px; margin: 24px 0; }
  .agency-stats:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agency-stats:has(> div:nth-child(3):last-child) > div:last-child { grid-column: 1/-1; }
  .agency-stats > div, .agency-stats > div:last-child { border: 1px solid var(--line); padding: 18px 15px; }
  .agency-stats span { font-size: 9px; letter-spacing: .8px; }
  .agency-stats strong { font-size: 30px; margin-top: 10px; }
  .creator-grid { grid-template-columns: 1fr; gap: 16px; }
  .creator-card { grid-template-columns: 105px minmax(0,1fr); }
  .creator-portrait { min-height: 260px; }
  .creator-card-body { padding: 18px 16px; }
  .creator-card h2 { font-size: 23px; letter-spacing: -.6px; }
  .creator-card p { margin: 12px 0 18px; }
  .creator-counts { gap: 15px; }
  .creator-card-footer { margin-top: 20px; padding-top: 13px; font-size: 10px; }
  .creator-heading { gap: 15px; }
  .creator-heading h1 { font-size: 31px; }
  .creator-heading .eyebrow { font-size: 9px; }
  .creator-avatar { width: 60px; height: 60px; border-radius: 15px; }
  .creator-heading > .row { gap: 8px; }
  .creator-tabs { margin-bottom: 20px; gap: 2px; }
  .creator-tabs button { padding: 12px 13px; font-size: 12px; }
  .create-modes { gap: 3px; padding: 4px; }
  .create-modes button { padding: 9px 8px; font-size: 11px; line-height: 1.5; min-height: 48px; }
  .source-form { padding: 20px; }
  .source-form > .row { display: grid; grid-template-columns: 1fr; }
  .source-form .row button { width: 100%; min-height: 44px; }
  .creation-heading h2 { font-size: 25px; }
  .creation-item { padding: 14px; gap: 13px; }
  .creation-media { flex-basis: 77px; height: 137px; }
  .creation-info h3 { font-size: 14px; margin-top: 10px; }
  .creation-info .row { gap: 6px; }
  .creation-actions button { min-height: 40px; }
  .asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .asset-cover { height: 215px; }
  .asset-info { padding: 12px; }
  .asset-info h3 { font-size: 12px; }
  .asset-info p { font-size: 11px; }
  .asset-info button { min-height: 36px; padding: 7px 9px; font-size: 11px; }
  .performer-numbers strong { font-size: 24px; }
  .account-filter-bar { padding: 12px; }
  .account-filter-chip { font-size: 11px; padding: 8px 10px; }
  .account-filter-summary { font-size: 11px; }
  .account-panel { padding: 18px; }
  .account-panel h3 { font-size: 16px; overflow-wrap: anywhere; }
  .account-panel small { font-size: 11px; }
  .account-panel > .row:first-child > .row { gap: 9px; }
  .account-panel > .row:first-child > .row:last-child { width: 100%; }
  .health-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-cell { font-size: 12px; padding: 11px 10px; }
  .health-cell:last-child { grid-column: 1/-1; }
  .account-preview-image img { height: 300px; }
  .reel-settings-summary { margin-top: 17px; padding: 14px; }
  .account-insights .row { gap: 9px; }
  .insight-metrics > div { padding: 14px; }
  .insight-metrics strong { font-size: 27px; }
  .planner-week { gap: 4px; }
  .planner-day { padding: 12px 2px; border-radius: 8px; font-size: 10px; }
  .planner-day strong { font-size: 20px; }
  .planner-day small { font-size: 9px; }
  .planner-entry { grid-template-columns: 82px minmax(0,1fr); padding: 13px; gap: 12px; }
  .planner-copy h3 { font-size: 14px; }
  .planner-media { height: 142px; }
  .calendar-history { padding: 17px; }
  dialog { width: calc(100% - 24px); padding: 26px 21px; max-height: calc(100dvh - 28px); border-radius: 16px; }
  dialog h2 { font-size: 24px; }
  dialog .close { top: 10px; right: 10px; }
  dialog input, dialog select, dialog textarea { font-size: 16px; }
  dialog .submit-row { flex-wrap: wrap; }
  dialog .submit-row > button { flex: 1; min-height: 46px; }
  .notification-panel { right: 12px; width: calc(100vw - 24px); }
}
@media (max-width: 360px) {
  .creator-card { grid-template-columns: 85px minmax(0,1fr); }
  .creator-card-body { padding: 16px 13px; }
  .creator-card h2 { font-size: 21px; }
  .asset-grid { gap: 8px; }
  .creator-heading > div:last-child button { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Workspace rhythm. Keep the content prominent and controls subordinate. */
body { line-height: 1.5; }
button, .button { letter-spacing: -.1px; }
button:not(.secondary):not(.ghost):not(.text-button):not(.close):not(.photo-pick):not(.reference):not(.planner-day):not(.account-filter-chip):not(.notification-bell):not(.performer-period):not(.mobile-menu) { box-shadow: inset 0 1px 0 #ffffff0b; }
.sidebar { border-right-color: #292a2e; }
.sidebar > .brand { margin-bottom: 24px; }
.workspace { background: transparent; border-color: #34353a; padding: 11px 10px; }
.sidebar-create { margin-bottom: 20px; min-height: 42px; }
.side-link { position: relative; min-height: 40px; padding: 9px 12px; font-weight: 450; border-radius: 8px; }
.side-link.active { background: #b5a0ff13; border-color: transparent; color: #d4c6ff; }
.side-link.active::before { content: ''; position: absolute; left: -14px; top: 11px; bottom: 11px; width: 3px; background: var(--purple); border-radius: 0 3px 3px 0; }
.credit-box { background: #1c1b22; border-color: #37323f; padding: 14px; }
.credit-box strong { font-size: 25px; }
.credit-box p { margin-bottom: 6px; }
.topbar { height: 66px; background: #101113; }
.content { padding-top: 34px; }
.page-heading { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #292a2f; }
.page-heading h1 { font-weight: 620; }
.page-heading p { color: #a2a3b0; max-width: 680px; }
.card, .account-panel, .scorecard { border-radius: 14px; }
.card > h3:first-child { font-size: 17px; }
.card > p:last-child { margin-bottom: 0; }
.agency-stats { gap: 0; background: #191a1e; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.agency-stats > div, .agency-stats > div:last-child { background: transparent; border: 0; border-radius: 0; padding: 23px 25px; }
.agency-stats > div + div { border-left: 1px solid var(--line); }
.agency-stats strong { font-size: 32px; letter-spacing: -1px; }
.agency-stats span { color: #a5a5b0; font-size: 10px; }
.creator-card { box-shadow: none; border-color: #34343b; }
.creator-card-body > .row { align-items: center; }
.creator-card-body h2 { font-size: 27px; letter-spacing: -.7px; }
.creator-card-footer { color: #c0b4e0; }
.creator-tabs { padding: 4px; background: #1a1b20; border: 1px solid #2b2c31; border-radius: 10px; gap: 4px; }
.creator-tabs button { border: 0; border-radius: 7px; min-height: 39px; padding: 9px 15px; font-weight: 500; }
.creator-tabs button.active { background: #34303e; color: #e6defc; box-shadow: inset 0 0 0 1px #494052; }
.create-modes { max-width: 800px; margin: 0 0 24px; background: #1a1b20; }
.create-grid { grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 24px; }
.source-form { padding: 28px; }
.source-form input[type=url] { font-size: 15px; min-height: 50px; }
.source-form > button[type=submit] { width: 100%; margin-top: 18px; }
.preview-panel { background: #1a181f; border-color: #35303f; }
.preview-panel .phone { box-shadow: 0 15px 45px #0004; width: 178px; }
.preview-panel .flow { flex-wrap: wrap; }
.asset-grid { grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 18px; }
[data-form="library-search"] { margin-bottom: 24px; }
.asset-card { display: flex; flex-direction: column; }
.asset-cover { flex: none; }
.asset-info { display: flex; flex-direction: column; flex: 1; }
.asset-info > .row { margin-top: auto; }
.asset-cover { height: 310px; background: #0c0d0f; }
.asset-card { border-color: #313237; }
.asset-info h3 { font-size: 14px; font-weight: 600; }
.asset-info p { color: #a8a7b2; font-size: 11px; }
.asset-info .row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.asset-info .row > :only-child { grid-column: 1/-1; }
.asset-info .row > button, .asset-info .row > a { padding: 9px 8px; font-size: 11px; min-height: 38px; }
.asset-info .row > .text-button { background: transparent; border: 0; }
.media-publication { font-size: 10px; border-radius: 6px; padding: 6px 8px; font-weight: 700; letter-spacing: .4px; }
.creation-item { background: #191a1e; }
.creation-info h3 { margin-top: 12px; }
.creation-filters { gap: 6px; }
.review-card { grid-template-columns: 220px minmax(0,1fr); padding: 22px; gap: 28px; }
.review-card .review-media { height: 330px; background: #0f1012; }
.review-card h3 { font-size: 19px; margin-bottom: 4px; }
.review-copy { padding: 14px 16px; border: 1px solid #39343f; border-radius: 9px; background: #141418; margin: 16px 0; font-size: 14px; overflow-wrap: anywhere; }
.review-card .notice { background: #1f2025; border-color: #38383f; color: #bdbbc9; }
.review-card .divider { margin: 20px 0; }
.performance-kpis { gap: 14px; }
.performance-kpis article { background: #191a1e; border-color: #313237; }
.performance-kpis article.performance-primary { background: #25202f; border-color: #51425f; }
.scorecard { background: #191a1e; border-color: #313237; }
.score-metrics { gap: 18px; }
.score-metric dd { font-weight: 600; font-size: 28px; }
.scorecard footer { border-color: #323338; }
.insight-metrics > div { background: #141518; }
.account-preview { background: #141518; }
.account-panel > .row:first-child { border-color: #303136; }
.account-observation { grid-template-columns: 200px minmax(0,1fr); }
.account-preview-image img { height: 270px; }
.reel-settings-summary { background: #1c1b22; border-color: #36323f; }
.bio-link-panel { background: #141518; border-color: #33343b; }
.planner-day { min-height: 114px; background: #141518; }
.planner-day.selected { background: #30263f; border-color: #b5a0ff; box-shadow: none; }
.planner-entry { background: #151619; }
.planner-controls button { font-weight: 500; }
.planner-time { color: #e9e3f5; font-variant-numeric: tabular-nums; }
.table th { background: #151619; color: #a8a7b2; padding: 14px 16px; }
.table td { padding: 18px 16px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-wrap { border-radius: 10px; }
.setting-row { align-items: flex-start; padding: 22px 0; }
.setting-row .toggle { margin-top: 4px; }
.setting-row p { font-size: 13px; line-height: 1.65; max-width: 680px; }
.conversation-card { background: #191a1e; }
.conversation-card strong { font-size: 14px; }
.message { background: #131417; border-color: #313237; }
.notice { border-radius: 10px; }
.empty { border-style: solid; background: #191a1e; border-color: #303136; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 18px; border: 1px solid #494052; border-radius: 14px; background: #27222f; }
.join-shell { max-width: 570px; }
.join-shell .card { padding: 32px; }
.join-shell h1 { line-height: 1.12; }
.join-shell .setup-instruction { border-color: #33343b; }
.publication-receipts { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; }
.publication-receipts .card { padding: 16px; min-width: 0; }
.publication-receipts .publication-thumb { display: block; width: 100%; height: 180px; object-fit: contain; background: #101113; border-radius: 8px; margin: 14px 0; }

/* Publishing and preparation share a preview, details and one clear action area. */
dialog:has(.publish-sheet, .prepare-sheet) { width: min(940px,calc(100% - 48px)); max-width: 940px; padding: 0; border-color: #45404e; }
dialog:has(.publish-sheet, .prepare-sheet) .close { z-index: 4; top: 18px; right: 18px; background: #27262e; border: 1px solid #3b3843; }
.sheet-heading { padding: 28px 32px 22px; border-bottom: 1px solid var(--line); }
dialog .sheet-heading h2 { font-size: 28px; margin: 8px 28px 6px 0; letter-spacing: -.7px; }
.sheet-heading p { font-size: 13px; margin: 0; color: #aaa7b5; }
.publish-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 30px; padding: 26px 32px; align-items: start; }
.publish-layout > * { min-width: 0; }
.publish-preview { background: #121315; border: 1px solid #33323a; border-radius: 12px; overflow: hidden; }
.publish-preview-media { background: #0c0d0f; height: 310px; }
.publish-preview-media .media-preview { height: 100%; }
.publish-preview-media video, .publish-preview-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.publish-preview-media .carousel-slides { height: 100%; padding: 0; gap: 8px; }
.publish-preview-media .carousel-slides figure { flex: 0 0 100%; display: grid; grid-template-rows: minmax(0,1fr) 28px; }
.publish-preview-media .carousel-slides figcaption { padding: 4px 12px; text-align: center; font-size: 11px; }
.publish-preview-copy { padding: 18px; }
.publish-preview-copy .eyebrow { font-size: 9px; color: #b8accb; }
.publish-preview-copy h3 { font-size: 15px; line-height: 1.5; margin: 8px 0 14px; overflow-wrap: anywhere; }
.publish-preview-copy .notice { font-size: 11px; padding: 10px; margin-bottom: 0; }
.publish-options { min-width: 0; }
.trial-count-field { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #303036; }
.trial-count-field label { margin: 0 0 9px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #eee9f5; font-weight: 550; }
.trial-count-field label span { font-size: 11px; font-weight: 400; color: #a4a1b1; }
.trial-count-field select { height: 48px; font-size: 14px; background: #25212d; border-color: #605071; color: #e8dfff; }
.trial-count-field p { margin: 8px 0 0; font-size: 12px; color: #a4a1b1; }
.publish-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 12px; color: #aba7b5; }
.publish-plan-heading strong { color: #ded5ed; font-weight: 500; text-align: right; }
.publish-timeline { list-style: none; margin: 0; padding: 0; border: 1px solid #36333d; border-radius: 10px; overflow: hidden; }
.publish-timeline li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 14px; font-size: 12px; background: #151519; }
.publish-timeline li + li { border-top: 1px solid #2e2b35; }
.publish-timeline li span { color: #e1dce9; }
.publish-timeline time { font-variant-numeric: tabular-nums; color: #ada6bc; text-align: right; }
dialog .publish-note { margin: 10px 0 0; color: #a5a0b1; font-size: 11px; }
.publish-va-note { display: grid; gap: 5px; border-radius: 9px; background: #b5a0ff0b; border: 1px solid #3b3249; padding: 12px 14px; margin-top: 14px; }
.publish-va-note strong { color: #d1bff0; font-size: 12px; font-weight: 550; }
.publish-va-note span { color: #ada5bb; font-size: 11px; line-height: 1.6; }
.publish-no-caption { padding: 13px 0; margin-top: 8px; color: #aaa4b6; font-size: 12px; }
.publish-captions { margin-top: 12px; border-bottom: 1px solid #302d37; }
.publish-captions > summary { display: flex; justify-content: space-between; padding: 12px 0; font-size: 12px; list-style: none; }
.publish-captions > summary::after { content: '+'; margin-left: 8px; }
.publish-captions[open] > summary::after { content: '−'; }
.publish-captions > summary span { margin-left: auto; color: #928b9f; }
.publish-captions > div { max-height: 230px; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
.publish-captions article { padding: 12px; background: #131317; border: 1px solid #302c38; border-radius: 8px; margin-bottom: 8px; }
.publish-captions article strong { font-size: 11px; color: #b5a0d0; font-weight: 500; }
.publish-captions article p { margin: 6px 0 0; font-size: 13px; color: #e2dce9; white-space: pre-wrap; overflow-wrap: anywhere; }
dialog .publish-destination { margin: 9px 0 0; font-size: 11px; color: #aaa3b5; overflow-wrap: anywhere; }
.publish-help { margin-top: 10px; }
.publish-help summary { padding: 8px 0; font-size: 11px; color: #ada2c0; }
.publish-help p { font-size: 12px; color: #aaa3b5; margin: 6px 0; }
.sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 32px; border-top: 1px solid #38343f; background: #1f1c25; position: sticky; bottom: 0; z-index: 2; }
.sheet-footer > span { font-size: 11px; color: #b4abbd; }
.sheet-footer button { min-height: 44px; min-width: 156px; }
.sheet-footer [data-post-audience] { gap: 8px; justify-content: flex-end; }
.sheet-footer [data-post-audience] > small { flex-basis: 100%; }
.publish-sheet > .error:not(:empty), .prepare-sheet > .error:not(:empty) { padding: 0 32px 16px; margin: 0; }
.prepare-fields > label:first-child { margin-top: 0; }
.prepare-fields textarea { min-height: 116px; max-height: 240px; }
.prepare-fields label { font-size: 12px; margin-top: 18px; }
.prepare-fields .field-hint { display: block; font-size: 11px; margin-top: 7px; color: #a5a0b1; }
.prepare-fields .check { align-items: center; border-top: 1px solid #302e36; padding-top: 16px; }
.prepare-fields .check input { margin: 0; }
@media (max-width: 1100px) {
  .create-grid { grid-template-columns: 1fr; }
  .preview-panel { display: none; }
  .creator-grid { grid-template-columns: 1fr; }
  .creator-card { grid-template-columns: 170px minmax(0,1fr); }
  .creator-portrait { min-height: 240px; }
  .account-observation { grid-template-columns: 180px minmax(0,1fr); }
  .health-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .topbar { height: 58px; }
  .page-heading { padding-bottom: 20px; }
  .content { padding: 24px 16px 40px; }
  .side-link.active::before { display: none; }
  .agency-stats { gap: 0; }
  .agency-stats > div, .agency-stats > div:last-child { border: 0; border-radius: 0; padding: 18px; }
  .agency-stats > div:nth-child(even) { border-left: 1px solid var(--line); }
  .agency-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .creator-card { grid-template-columns: 105px minmax(0,1fr); }
  .creator-card-body h2 { font-size: 23px; }
  .creator-portrait { min-height: 235px; }
  .creator-tabs { border-radius: 9px; }
  .creator-tabs button { font-size: 12px; padding: 8px 12px; min-height: 38px; }
  .asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .asset-cover { height: 236px; }
  .asset-info { padding: 12px; }
  .asset-info .row { grid-template-columns: 1fr; gap: 7px; }
  .asset-info h3 { font-size: 12px; }
  .asset-info .row > button, .asset-info .row > a { font-size: 11px; min-height: 37px; }
  .review-card { display: grid; grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .review-card .review-media { margin: 0; height: 280px; }
  .review-card h3 { font-size: 17px; }
  .account-observation { grid-template-columns: 1fr; }
  .account-preview { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px 14px; }
  .account-preview-heading { grid-column: 1/-1; margin-bottom: 0; }
  .account-preview-image { grid-row: 2/4; }
  .account-preview-image img { height: 175px; }
  .account-preview-caption { margin: 0; align-self: end; }
  .account-preview > .row { align-self: start; align-items: start; gap: 6px; }
  .account-preview-placeholder { grid-column: 1/-1; min-height: 145px; }
  .health-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-cell:last-child { grid-column: 1/-1; }
  .planner-day { min-height: 96px; }
  .join-shell { margin: 28px auto; }
  .join-shell .card { padding: 24px; }
  dialog:has(.publish-sheet, .prepare-sheet) { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .sheet-heading { padding: 24px 20px 18px; }
  dialog .sheet-heading h2 { font-size: 24px; margin-right: 22px; }
  .sheet-heading p { font-size: 12px; }
  .publish-layout { grid-template-columns: 1fr; padding: 18px 20px; gap: 20px; }
  .publish-preview { display: grid; grid-template-columns: 92px minmax(0,1fr); }
  .publish-preview-media { height: 152px; }
  .publish-preview-copy { padding: 16px; align-self: center; }
  .publish-preview-copy h3 { font-size: 13px; margin-bottom: 9px; }
  .publish-preview-copy .eyebrow { font-size: 8px; }
  .publish-preview-copy .pill { font-size: 10px; padding: 4px 8px; }
  .publish-preview-media .media-publication { font-size: 7px; padding: 3px; top: 5px; left: 4px; }
  .publish-preview-media .carousel-slides figcaption { font-size: 9px; padding: 4px 0; }
  .trial-count-field { padding-bottom: 16px; margin-bottom: 16px; }
  .trial-count-field select { font-size: 16px; }
  .sheet-footer { padding: 16px 20px; flex-wrap: wrap; gap: 10px; }
  .sheet-footer > span { flex-basis: 100%; font-size: 10px; }
  .sheet-footer > button, .sheet-footer > .row { width: 100%; }
  .sheet-footer [data-post-audience] { display: grid; grid-template-columns: 1fr; }
  .sheet-footer button { width: 100%; min-height: 44px; }
  .publish-sheet > .error:not(:empty), .prepare-sheet > .error:not(:empty) { padding: 0 20px 14px; }
  .prepare-fields textarea { min-height: 105px; }
  .publication-receipts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 360px) {
  .asset-grid { grid-template-columns: 1fr; }
  .asset-cover { height: 330px; }
  .asset-info .row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sheet-heading, .publish-layout, .sheet-footer { padding-left: 16px; padding-right: 16px; }
  .publish-preview { grid-template-columns: 75px minmax(0,1fr); }
  .publish-preview-copy { padding: 12px; }
  .publication-receipts { grid-template-columns: 1fr; }
}