/* Cinematic autumn presentation. Product routes and data contracts stay intact. */
:root {
  color-scheme: dark;
  --bg: #0e0e10;
  --sidebar: #121113;
  --surface: #1a181a;
  --surface-raised: #242022;
  --line: #302627;
  --line-soft: #262124;
  --text: #f4efea;
  --muted: #b4a69c;
  --text-secondary: #b4a69c;
  --blue: #f09a59;
  --blue-light: #ffbb7f;
  --green: #9cbfa8;
  --red: #f3938d;
  --amber: #dcc08a;
  --radius: 19px;
  --studio-shadow: 0 9px 25px #0003, 0 2px 4px #0002, inset 0 1px 0 #ffffff06;
}
body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 93% 3%, #c36b343a, transparent 48%),
    radial-gradient(ellipse at 3% 85%, #9c283744, transparent 45%),
    linear-gradient(145deg, #120d10eb, #0e0e10f5 60%, #171014eb),
    url("./assets/autumn-studio-scene-v2.webp") center top / cover fixed;
}
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body::before {
  inset: 0;
  background:
    radial-gradient(circle at 20% 14%, #e8b26b70 0 1px, transparent 2px),
    radial-gradient(circle at 89% 32%, #d3835170 0 1px, transparent 2px),
    radial-gradient(circle at 69% 71%, #e8b26b55 0 1px, transparent 2px),
    radial-gradient(circle at 11% 64%, #e8b26b40 0 1px, transparent 2px),
    radial-gradient(circle at 38% 89%, #d3835150 0 1px, transparent 2px);
  background-size: 730px 610px;
  opacity: .56;
}
body::after {
  inset: 0;
  background: url("./assets/autumn-leaves.svg") center / 1100px 850px repeat;
  opacity: .22;
}
@keyframes studio-drift { to { transform: rotate(360deg); } }
.sidebar {
  background:
    radial-gradient(ellipse at -12% 9%, #d47c3c30, transparent 42%),
    linear-gradient(165deg, #201519de, #141114ed 58%, #30151eea),
    url("./assets/autumn-studio-scene-v2.webp") right center / auto 100dvh no-repeat;
  border-right-color: #79523938;
  box-shadow: 8px 0 35px #0004, inset 1px 0 #ffad5e16;
}
.brand-name { color: var(--text); }
.brand-name em { color: #ff9e50; }
.brand-product { color: #c59874; }
.brand { padding-bottom: 5px; }
.black-hole {
  width: 24px;
  height: 24px;
  overflow: visible;
  vertical-align: -4px;
  background: #150d09;
  box-shadow: 0 0 9px #dc852a40, inset 0 0 5px #ffb86260;
}
.black-hole::before {
  inset: -3px;
  background: conic-gradient(from 0deg, #3c1e10, #c76b28 20%, #ffce82 30%, #5c2916 44%, #25120e 62%, #d67c34 78%, #ffbe65 87%, #3c1e10);
  mask: radial-gradient(circle, transparent 43%, #000 49%, #000 65%, transparent 72%);
  animation: brand-art-spin 12s linear infinite;
}
.black-hole::after {
  inset: 3px;
  background: url("./assets/pumpkin-mark.svg") center / contain no-repeat;
  border: 0;
  box-shadow: none;
  transform: none;
}
@keyframes brand-art-spin { to { transform: rotate(360deg); } }
.workspace-switch {
  background: linear-gradient(135deg, #292022, #1c181a);
  border-color: #50392e;
  border-radius: 13px;
  box-shadow: var(--studio-shadow);
}
.workspace-avatar, .user-avatar {
  color: #ffc995;
  background: linear-gradient(140deg, #583323, #35231d);
  border-color: #855231;
}
.nav-label { color: #b5957e; }
.nav a, .nav > button { color: #bdb1a8; border-radius: 10px; }
.nav a:hover, .nav > button:hover { color: #fff0e1; background: #5430224d; }
.nav a.active {
  color: #ffc18a;
  background: linear-gradient(105deg, #71351d66, #48221c66);
  border-color: #ffad5e12;
  box-shadow: inset 0 1px #ffbb6c12, 0 3px 10px #0002;
}
.nav a.active::after { background: #ff9e50; box-shadow: 0 0 7px #c8773450; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #151214ed;
  border-bottom-color: #3e2e28;
  backdrop-filter: blur(16px);
  box-shadow: 0 3px 15px #0002;
}
.breadcrumb, .breadcrumb b { color: #e7dcd3; }
.breadcrumb b { font-weight: 650; }
.slash { color: #a88d79; }
.icon-button { color: #baaa9b; }
.icon-button:hover { color: #ffd3aa; background: #5a342833; border-color: #77503a; }
.primary-button {
  border-color: #dc8a42;
  border-radius: 10px;
  background: linear-gradient(160deg, #f9b35f, #e98735);
  color: #24140b;
  font-weight: 750;
  box-shadow: 0 5px 13px #db7d2520, inset 0 1px #ffe4bc80;
}
.primary-button:hover { background: linear-gradient(160deg, #ffc579, #f09b4e); box-shadow: 0 7px 18px #ce792a30; }
.secondary-button {
  border-color: #71513c;
  border-radius: 10px;
  background: #282021c9;
  color: #efc49e;
  box-shadow: inset 0 1px #ffffff08;
}
.secondary-button:hover { background: #3c2922; border-color: #b07348; }
.text-button { color: #f3ac75; font-weight: 550; }
.text-button:hover { color: #ffce9d; }
.text-button.danger, .form-error { color: #ffaca5; }
.skip-link { background: #ffbd7b; color: #24140b; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #ffba77;
  outline-offset: 4px;
}
.notice { background: #2b2119d9; border-color: #775332; border-radius: 12px; color: #d8b99b; }
.notice b { color: #f4d3b1; }
.notice.error { background: #381a1c; border-color: #94514b; color: #ffaca5; }
.section-topline, .eyebrow, .section-kicker { color: #ccaa8b; }
.section-kicker i { background: #f09a59; box-shadow: 0 0 7px #d4884260; }
.hero {
  min-height: 390px;
  grid-template-columns: 1fr 1.08fr;
  background: radial-gradient(ellipse at 84% 80%, #b1511b26, transparent 55%), linear-gradient(120deg, #221a1b, #141113 60%, #25171a);
  border-color: #50332966;
  border-radius: 24px;
  box-shadow: 0 15px 35px #0003, inset 0 1px #ffb7640c;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("./assets/autumn-leaves.svg") right center / 1000px auto no-repeat;
  opacity: .45;
}
.hero-copy { background: transparent; }
.hero h1 { color: #f8f1eb; font-size: clamp(32px, 2.9vw, 44px); font-weight: 750; }
.hero h1 strong { font-weight: 750; background: linear-gradient(90deg, #ffaf60, #dfa673 72%, #e2c08a); background-clip: text; }
.hero p { color: #c8b9ac; }
.hero-footnote { color: #b69c85; }
.hero-footnote span { color: #d6b276; }
.cosmos { min-height: 390px; display: block; }
.cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #171315, transparent 20%), linear-gradient(0deg, #141113 2%, transparent 20%);
  pointer-events: none;
}
.autumn-centerpiece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  margin: 0;
  filter: none;
}
.cosmos-caption {
  z-index: 1;
  color: #e1bd95;
  background: #171315b8;
  border: 1px solid #ffffff0c;
  border-radius: 999px;
  padding: 9px 12px;
  width: max-content;
  max-width: 90%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  letter-spacing: 1.2px;
  box-shadow: 0 3px 14px #0003;
}
.metric, .panel { box-shadow: var(--studio-shadow); }
.metric, .metric:nth-child(n), .panel, .account-card:nth-child(n) { border-color: #4a303333; }
.panel { background: linear-gradient(145deg, #242125e8, #19171bea); }
.account-card:nth-child(n) { background: linear-gradient(140deg, #272225, #1a181c); }
.panel:hover { border-color: #8f584c40; }
.metric { background: linear-gradient(125deg, #2d201b, #211b1a); border-color: #68452e; border-radius: 15px; }
.metric:nth-child(2) { background: linear-gradient(130deg, #27251d, #1e1d19); border-color: #5a5037; }
.metric:nth-child(3) { background: linear-gradient(130deg, #322119, #241b18); border-color: #7d4b2d; }
.metric:nth-child(4) { background: linear-gradient(130deg, #2c261b, #211e18); border-color: #6d5735; }
.metric:nth-child(5) { background: linear-gradient(130deg, #2d1c22, #21181c); border-color: #68414a; }
.metric > div { color: #d4bca6; font-size: 11px; }
.metric b { color: #f8efe5; font-weight: 750; }
.metric-dot { background: #db9256; }
.metric small { color: #bba695; font-size: 10px; }
.loading .metrics b { color: #ad927b; }
.panel { background: linear-gradient(135deg, #211b1d, #1a1719); border-color: #49362d; }
.account-card { border-radius: 18px; background: linear-gradient(140deg, #2b201c, #20191a); }
.account-card:nth-child(3n + 2) { background: linear-gradient(140deg, #25251d, #1c1f1c); border-color: #4e4e3a; }
.account-card:nth-child(3n) { background: linear-gradient(140deg, #2f1e21, #23191c); border-color: #5b373c; }
.feature-symbol, .empty-state .empty-icon, .section-title > span:first-child { background: linear-gradient(135deg, #5c3520, #38261d); color: #ffc590; border-color: #815430; }
.empty-state h4 { color: #e8dace; }
.connect-inline { background: #30221b; border-color: #795232; color: #f5b779; }
.connect-inline:hover { background: #422c20; }
.provider-mark { background: #38281e; border-color: #6d4b33; color: #eec197; }
.provider-mark.facebook, .provider-mark.linkedin, .provider-mark.linkedin-page { background: #232b30; color: #bdcfdb; border-color: #4b606a; }
.provider-mark.instagram, .provider-mark.instagram-standalone { background: #3b2524; color: #edb0a0; border-color: #774d45; }
.provider-mark.threads, .provider-mark.x { background: #252323; color: #e4d8cd; border-color: #615751; }
.provider-mark.tiktok { background: #22312e; color: #a5d4c8; border-color: #486d60; }
.provider-mark.youtube, .provider-mark.pinterest { background: #391e23; color: #f1aaa7; border-color: #7f4347; }
.badge { color: #efbe8c; background: #3c291d; border-color: #795336; border-radius: 6px; }
.badge.muted, .badge.cancelled, .badge.unknown, .badge.draft { color: #c2b3a5; background: #2b2525; border-color: #5b4a42; }
.badge.connected, .badge.published { color: #b0d5be; background: #22362b; border-color: #4b715b; }
.badge.failed { color: #ffb0a8; background: #411f23; border-color: #8f4b4b; }
.badge.awaiting-approval { color: #f6ce91; background: #3c2e18; border-color: #896a36; }
.badge.publishing { color: #e1b1b9; background: #37222c; border-color: #77505d; }
.badge.scheduled, .badge.queued { color: #e2c38e; background: #352b1d; border-color: #79603a; }
.workflow-strip { background: linear-gradient(120deg, #28221a, #251b1f); border-color: #604932; box-shadow: var(--studio-shadow); }
.workflow-strip b { color: #ead7c5; }
.workflow-icon { color: #f4b477; }
.workflow-strip li { color: #d1bca5; }
.workflow-strip li span { color: #bf996f; }
.page-footer, .page-footer i { color: #b29a84; }
.page-footer { border-color: #49352c; }
.page-heading h2 { color: #f2e8df; }
label, legend, .disclosure summary, .checkbox-label { color: #ddcfc2; }
label small, legend small, .field-footnote, .inline-note, .preview-note,
.account-meta, .platform-chip small, .range-label, .post-cell small,
.queue-table .subtle, .queue-table td[data-label]::before, .security-note,
.feature-list small, .receipt-card small { color: #b7a494; }
input, select, textarea, #authority-form input, #authority-form select,
#authority-form textarea, .one-time-secret { color: #f0e7df; background: #141214; border-color: #604a3d; border-radius: 9px; accent-color: #eea05e; }
input::placeholder, textarea::placeholder { color: #aa9685; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #d78e50; box-shadow: 0 0 0 3px #d78b3f20; }
.destination { background: #221a18; border-color: #624330; }
.destination:has(input:checked) { border-color: #c48249; background: #4a2c1c; }
.media-field { background: #241e18; border-color: #80613c; }
.media-field > span { color: #efb376; }
.post-preview { background: #1d181a; border-color: #684b34; }
.preview-media { background: radial-gradient(ellipse at 60% 30%, #a86b3333, transparent), #24201d; border-color: #5f4732; }
.preview-media > span { color: #dbb283; }
.preview-media small, .preview-reactions { color: #b49b7f; }
#preview-copy, .content-card p, .post-cell b, .queue-table td { color: #e0d3c6; }
.intelligence-card, .future-panel { background: radial-gradient(ellipse at 0 0, #a86b3322, transparent 65%), linear-gradient(130deg, #241d1b, #1a171b); }
.platform-chip { background: #30261e; color: #e0c19e; border-color: #6b5034; }
.queue-table th, .commercial-table th { color: #d0b392; background: #231c19; }
.queue-table tbody tr:hover { background: #6b472222; }
.receipt-card, .memory-result { background: #261f1a; border-color: #624a31; }
.receipt-card p, .memory-result p, .feature-list > div { color: #cbb59d; }
.memory-result em, .lane-grid span, .feature-list > div > span { color: #efb376; }
.lane-grid > div { border-color: #6d5138; }
.analytics-metric { background: #281f19; }
.tabs button.active, .settings-nav button.active { color: #ffd1a1; border-color: #a36a3d; background: #4b2c1e; }
.tabs button:hover, .settings-nav button:hover { color: #f2c298; background: #36271f; }
.workspace-choice, #workspace-options .workspace-choice { color: #e5d6c6; background: #2a211b; border-color: #725035; }
.workspace-choice > span:last-child { color: #f0b071; }
dialog { background: linear-gradient(135deg, #271f1e, #181517); border-color: #875c3d; border-radius: 22px; box-shadow: 0 30px 100px #0009, inset 0 1px #ffbd8010; }
dialog::backdrop { background: #0c080bb3; backdrop-filter: blur(9px); }
.dialog-head { background: linear-gradient(125deg, #33231b, #271b1c); border-color: #69452e; }
.provider-context { background: #2b221b; border-color: #694f35; }
.provider-context > span { background: #4b3421; color: #eec493; }
.provider-grid button { background: #271e19; border-color: #765337; border-radius: 12px; }
.provider-grid button:hover { background: #51321f; border-color: #b5804f; }
.provider-grid button > span { background: #4b3220; color: #f3c08c; border-color: #89633e; }
.provider-grid small { color: #c0a78b; }
.provider-status { color: #f4b679; }
.approval-copy, .post-detail-copy { color: #d9c3ac; background: #2b231a; }
#help-articles details { background: #271f18; }
#help-articles summary { color: #e8d7c5; }
#help-articles p { color: #c4ac92; }
.toast { background: #31231d; color: #fff0df; border-color: #a57449; box-shadow: 0 12px 40px #0005; }
.sidebar-scrim { background: #120c0bb3; backdrop-filter: blur(3px); }
.skeleton { background: linear-gradient(90deg, #2e231c, #423324, #2e231c); background-size: 200% 100%; }
.code-data { color: #dbc1a1; }
.create-card { color: #f5b679; }
.commercial-table th, .commercial-table td { border-color: #58402e; }
.onboarding-step { color: #c8b29a; }
.onboarding-step span { border-color: #6e5438; background: #2c2119; }
.onboarding-step.complete { color: #bdd0af; }
.onboarding-step.complete span { background: #2b3524; border-color: #67794e; }
.mode-pill i { background: #aa8b71; }
.mode-pill.live i { background: var(--green); box-shadow: 0 0 9px #9cbfa833; }
.search-field > span { color: #b89c80; }
.detail-list dt, .tabs button, .settings-nav button { color: #baa38e; }
.detail-list dd, .receipt-card h4, .memory-result h4 { color: #e9d8c6; }
.preview-header b, .preview-platform, .content-card h4, .campaign-card h3 { color: #ecdbc9; }
[hidden] { display: none !important; }
.login-gate {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 90px);
  padding: 42px clamp(32px, 6vw, 112px);
  background: #09080a url("./assets/autumn-studio-scene-v2.webp") 38% center / cover no-repeat;
  color: var(--text);
}
.login-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent 42%, #09080a26 65%), linear-gradient(0deg, #09080a4d, transparent 35%);
}
.login-art {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(100dvh - 84px);
  max-height: 1000px;
}
.login-art .brand { align-items: flex-start; align-self: flex-start; margin: 0; }
.login-art .brand-name { font-size: clamp(21px, 1.65vw, 29px); text-shadow: 0 2px 14px #000; }
.login-art .brand-product { color: #d3a176; font-size: 9px; letter-spacing: 5px; }
.login-scene { flex: 1; min-height: 285px; }
.login-statement { text-align: center; padding: 0 0 4px; transform: translateX(5vw); }
.login-art h1 { font-size: clamp(34px, 3.5vw, 62px); line-height: 1.06; letter-spacing: -1.8px; font-weight: 700; text-shadow: 0 4px 20px #000; }
.login-art h1 strong { color: #ffba67; font-weight: 700; white-space: nowrap; }
.login-statement > p { font-size: clamp(11px, 1vw, 14px); color: #d4c7be; margin-top: 17px; white-space: nowrap; text-shadow: 0 2px 9px #000; }
.login-card {
  justify-self: center;
  width: 100%;
  max-width: 470px;
  padding: 34px 38px;
  border: 1px solid #d6984b99;
  border-radius: 25px;
  background:
    radial-gradient(ellipse at 0 0, #b76b2947, transparent 48%),
    radial-gradient(ellipse at 100% 100%, #ac52283b, transparent 49%),
    linear-gradient(145deg, #21181ce0, #0c0b10ed 56%, #25150fdd);
  backdrop-filter: blur(25px) saturate(125%);
  box-shadow: 0 28px 85px #0009, 0 0 32px #f49e3311, inset 0 1px #ffda8b35, inset 0 -1px #ad5f2930;
}
.login-card .brand { align-items: center; padding: 0; margin: 0; gap: 13px; }
.login-card .brand-name { font-size: 28px; font-weight: 750; }
.login-card .black-hole { width: 35px; height: 35px; margin: 0 3px; box-shadow: 0 0 15px #e49a3755, inset 0 0 7px #ffb86280; }
.login-card .brand-product { font-size: 13px; letter-spacing: 6px; color: #eee0cf; font-weight: 650; padding-left: 6px; }
.login-card h2 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; font-weight: 650; letter-spacing: -.8px; margin: 28px 0 10px; text-align: center; }
.login-intro { text-align: center; color: #bcb0a8; font-size: 13px; line-height: 1.55; max-width: 315px; margin: 0 auto 25px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.login-card .login-field { position: relative; display: block; margin: 14px 0; }
.login-field > svg { position: absolute; width: 18px; height: 18px; left: 15px; top: 16px; fill: none; stroke: #e1d7cb; stroke-width: 1.5; pointer-events: none; }
.login-card .login-field input { width: 100%; height: 50px; padding: 14px 45px; border: 1px solid #cfbba53d; border-radius: 9px; background: linear-gradient(135deg, #ffffff0c, #ffffff07); color: #fff2e4; box-shadow: inset 0 1px #ffffff05, 0 3px 9px #0001; font-size: 13px; }
.login-card input::placeholder { color: #a3968e; opacity: 1; }
.login-card .login-field input:hover { border-color: #c18b6670; }
.login-card button { font-size: 13px; }
.login-card .password-toggle { display: grid; place-items: center; position: absolute; right: 6px; top: 4px; width: 42px; height: 42px; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; color: #d2c5b8; border-radius: 6px; }
.password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.password-toggle[aria-pressed="true"] { color: #ffc372; background: #ffaf5b10; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; }
.login-card .remember-option { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; color: #d1c6bc; cursor: pointer; }
.remember-option input { appearance: auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: #ffbd66; cursor: pointer; }
.login-card .login-link { width: auto; min-height: 28px; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #ffc071; font-size: 12px; box-shadow: none; }
.login-card .login-link:hover { color: #ffdda8; text-decoration: underline; text-underline-offset: 4px; }
.login-card #save-connection { width: 100%; min-height: 50px; margin: 0; border-radius: 9px; background: linear-gradient(145deg, #ffd077, #f5a642 65%, #e79334); color: #23150b; font-size: 14px; box-shadow: 0 7px 25px #e88a2c22, inset 0 1px #ffe8b999; }
.login-card #save-connection:hover { filter: brightness(1.08); }
#save-connection span { margin-left: 8px; font-size: 18px; font-weight: 400; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 27px 0 18px; color: #b9aba0; font-size: 9px; letter-spacing: 1.4px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, #c39a6a50, #c39a6a15); }
.login-divider::after { transform: rotate(180deg); }
.login-adapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.login-adapters button { display: grid; place-items: center; width: 100%; height: 48px; padding: 0; border: 1px solid #c9ac8b29; border-radius: 9px; background: linear-gradient(145deg, #ffffff0c, #ffffff06); color: #f5f0eb; box-shadow: inset 0 1px #ffffff06; }
.login-adapters button:hover { background: #a4652c26; border-color: #cb92525e; }
.login-adapters svg { width: 22px; height: 22px; stroke: none; }
.login-signup { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #b9aba0; margin: 25px 0 0; }
.login-signup .login-link { font-weight: 650; }
.login-help-dialog { width: min(420px, calc(100vw - 40px)); padding: 30px; }
.login-help-dialog h2 { font-size: 23px; margin-bottom: 14px; }
.login-help-dialog p { color: #c9bbae; line-height: 1.6; margin-bottom: 24px; font-size: 14px; }
.login-help-dialog .primary-button { width: 100%; padding: 12px 18px; }
.login-card .form-error { color: #ffaca5; font-size: 11px; line-height: 1.5; margin: 13px 0; }
.login-card .form-error:empty { display: none; }
.studio-pillars { display: flex; align-items: center; justify-content: center; }
.studio-pillars > div { display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 20px; text-align: left; }
.studio-pillars > div + div { border-left: 1px solid #ba9c774d; }
.studio-pillars svg { width: 26px; height: 26px; flex-shrink: 0; color: #ffc064; fill: none; stroke: currentColor; stroke-width: 1.8; }
.studio-pillars > div:first-child svg { fill: currentColor; stroke: none; }
.studio-pillars b { display: block; font-size: 10px; letter-spacing: 1.9px; font-weight: 650; color: #e8dbcc; }
.studio-pillars small { display: block; font-size: 10px; color: #b4a697; white-space: nowrap; margin-top: 4px; }
.login-pillars { margin: 31px auto 0; width: max-content; max-width: 100%; }
.login-pillars > div:first-child { padding-left: 0; }
.login-pillars > div:last-child { padding-right: 0; }
.footer-brand { align-items: flex-start; padding: 0; }
.footer-brand .brand-name { font-size: 12px; letter-spacing: .15px; }
.footer-brand .brand-product { font-size: 6px; letter-spacing: 3px; }
.footer-brand .black-hole { width: 16px; height: 16px; vertical-align: -3px; margin: 0 1px; }
.page-footer { align-items: center; }
.footer-pillars > div { gap: 7px; padding: 0 14px; }
.footer-pillars svg { width: 18px; height: 18px; }
.footer-pillars b { font-size: 8px; letter-spacing: 1.1px; }
.channels-upper { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(270px, .85fr); align-items: center; gap: 28px; margin-bottom: 24px; }
.channels-upper > .ownership-actions:empty { display: none; }
.channels-upper > .ownership-actions:not(:empty) { grid-column: 1 / -1; }
#channels .page-heading { margin-bottom: 18px; }
#channels .page-heading h2 { margin-top: 6px; }
#channel-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-content: start; }
#channel-list:has(.empty-state) { grid-template-columns: 1fr; }
#channel-list > .panel:has(.empty-state) { min-height: 294px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 30px 36px; background: radial-gradient(ellipse at 5% 10%, #87462920, transparent 75%), linear-gradient(140deg, #242125, #17161a); }
#channel-list .empty-state { padding: 0; text-align: left; }
#channel-list .empty-icon { margin-left: 0; border: 0; background: #a95e3024; }
#channel-list .empty-state h4 { font-size: 22px; letter-spacing: -.7px; margin-bottom: 10px; }
#channel-list .empty-state p { margin: 0; max-width: 350px; }
#channel-list .connect-inline { width: auto; margin: 23px 0 0; padding: 12px 20px; background: linear-gradient(150deg, #eea456, #d47b36); color: #24140b; border-color: transparent; font-weight: 700; }
.channel-atmosphere { position: relative; min-width: 0; margin: 0; height: 330px; }
.channel-atmosphere img { width: 100%; height: 100%; object-fit: cover; object-position: left center; mask-image: radial-gradient(ellipse at 48% 48%, #000 45%, transparent 75%); }
.channel-atmosphere figcaption { position: absolute; bottom: 5px; inset-inline: 0; text-align: center; font-size: 7px; letter-spacing: 2px; color: #d6b78f; }
/* Depth and tone carry cards; copper appears on hover rather than every edge. */
.metric:nth-child(n), .panel, .account-card:nth-child(n), .workflow-strip, .workspace-switch, .post-preview { border-color: #77494a26; }
.panel, .account-card:nth-child(n) { background: radial-gradient(ellipse at 0 0, #a4592b24, transparent 62%), linear-gradient(140deg, #2a2429ed, #1b191ff5); box-shadow: 0 12px 28px #0004, 0 3px 6px #0003, inset 0 1px #ffc58b0b; }
.metric:nth-child(n) { background: radial-gradient(ellipse at 0 0, #ad6b3830, transparent 75%), linear-gradient(135deg, #30252a, #201d24); box-shadow: 0 10px 22px #0004, inset 0 1px #ffd3a414; }
.metric:nth-child(2n) { background: radial-gradient(ellipse at 0 0, #b94f3630, transparent 75%), linear-gradient(135deg, #332328, #211c24); }
.metric:nth-child(3n) { background: radial-gradient(ellipse at 0 0, #ab823230, transparent 75%), linear-gradient(135deg, #302a23, #221e23); }
.form-section, .post-preview { background: radial-gradient(ellipse at 0 0, #a7583022, transparent 65%), linear-gradient(140deg, #292329e8, #19171bef); }
.panel:hover, .workspace-switch:hover { border-color: #ad785842; }
.secondary-button { border-color: #ffffff16; background: #ffffff05; }
.secondary-button:hover { border-color: #ad785860; }
.platform-chip { background: #ffffff04; border-color: #ffffff0c; }
.destination { background: #ffffff03; border-color: #ffffff10; }
.destination:has(input:checked) { background: #ac5d282e; border-color: #d088494d; }
input, select, textarea { border-color: #ffffff16; background: #141216; }
.provider-grid button { border-color: #ffffff14; background: #232025; }
.provider-grid button:hover { border-color: #ad785860; background: #392b27; }
@media (min-width: 1600px) {
  .hero { min-height: 425px; }
  .cosmos { min-height: 425px; }
}
@media (max-width: 1100px) {
  .login-gate { padding: 32px; gap: 24px; grid-template-columns: 1.15fr 1fr; }
  .login-art { height: calc(100dvh - 64px); }
  .login-card { padding: 28px; }
  .login-card .brand-name { font-size: 24px; }
  .login-pillars > div { padding: 0 12px; gap: 8px; }
  .channels-upper { gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr); }
  .channel-atmosphere { height: 285px; }
}
@media (max-width: 1100px) {
  .login-gate { grid-template-columns: 1fr; padding: 26px 24px 32px; gap: 22px; background-size: auto 760px; background-position: calc(50% + 216px) -90px; }
  .login-gate::before { background: linear-gradient(180deg, transparent 390px, #09080a 650px); }
  .login-art { height: auto; max-height: none; }
  .login-art .brand { align-self: center; align-items: center; }
  .login-art .brand-name { font-size: 24px; }
  .login-scene { flex: none; min-height: 0; height: 340px; }
  .login-statement { padding: 0; transform: none; }
  .login-art h1 { font-size: 38px; letter-spacing: -1.3px; }
  .login-statement > p { margin-top: 12px; font-size: 12px; }
  .login-card { max-width: 470px; padding: 30px 36px; }
  .login-card h2 { margin: 25px 0 10px; font-size: 25px; }
  .login-card .brand-name { font-size: 28px; }
  .login-pillars { margin-top: 24px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .login-gate { background-size: auto 920px; background-position: calc(50% + 262px) -120px; }
  .login-gate::before { background: linear-gradient(180deg, transparent 470px, #09080a 760px); }
  .login-scene { height: 430px; }
}
@media (max-width: 700px) {
  .channels-upper { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .channel-atmosphere { order: -1; height: 190px; width: 100%; max-width: 390px; justify-self: center; }
  .channel-atmosphere img { object-position: 8% center; }
  #channel-list > .panel:has(.empty-state) { min-height: 250px; padding: 26px; }
}
@media (max-width: 600px) {
  .login-gate { padding: 22px 24px 28px; gap: 20px; background-size: auto 430px; background-position: calc(50% + 123px) 20px; }
  .login-gate::before { background: linear-gradient(180deg, transparent 270px, #09080a 445px); }
  .login-scene { height: 244px; }
  .login-art .brand-name { font-size: 22px; }
  .login-art .brand-product { font-size: 7px; letter-spacing: 4px; }
  .login-art h1 { font-size: clamp(25px, 7.8vw, 34px); }
  .login-statement > p { font-size: 11px; }
  .login-card { padding: 28px 24px; border-radius: 21px; }
  .login-card .brand-name { font-size: 24px; }
  .login-card .brand-product { font-size: 11px; letter-spacing: 5px; }
  .login-card .black-hole { width: 30px; height: 30px; }
  .login-card h2 { font-size: 22px; margin: 25px 0 10px; }
  .login-intro { font-size: 12px; margin-bottom: 22px; }
  .login-pillars { margin-top: 24px; }
  .login-pillars > div { padding: 0 10px; gap: 7px; }
  .login-pillars svg { width: 20px; height: 20px; }
  .login-pillars b { font-size: 8px; letter-spacing: 1.1px; }
  .login-pillars small { font-size: 8px; }
  .footer-pillars > div { padding: 0 8px; }
  .hero { border-radius: 20px; min-height: 0; }
  .cosmos { min-height: 310px; margin-top: 0; }
  .autumn-centerpiece { object-position: 8% center; }
  .hero h1 { font-weight: 750; }
  .metric > div { font-size: 10px; }
  .metric small { font-size: 9px; }
}
@media (min-width: 501px) and (max-width: 600px) {
  .login-gate { background-position: left 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Composer density pass. Append-only presentation; form order and handlers stay intact. */
#composer .page-heading {
  margin: 0 0 16px;
}
#composer .page-heading h2 {
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.25;
}
#composer .page-heading > div > p:last-child {
  margin-top: 9px;
  line-height: 1.55;
}
#composer .composer-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  gap: 16px;
}
#composer .form-section {
  padding: 16px;
  gap: 10px;
}
#composer .section-title {
  gap: 8px;
  margin-bottom: 2px;
}
#composer .section-title > span:first-child {
  width: 23px;
  height: 23px;
}
#composer .section-title h3 {
  font-size: 14px;
}
#composer label {
  gap: 6px;
}
#composer input:not([type="checkbox"]):not([type="file"]),
#composer select {
  min-height: 36px;
  padding: 8px 10px;
}
#composer .field-grid {
  gap: 10px;
}
#composer select {
  padding-right: 25px;
}
#composer .form-section:first-child .field-grid.two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#composer legend {
  margin-bottom: 7px;
}
#composer legend small {
  margin-left: 6px;
}
#composer .destination-grid {
  gap: 7px;
}
#composer .destination {
  padding: 8px;
  gap: 7px;
}
#composer .destination .provider-mark {
  width: 24px;
  height: 24px;
}
#composer .destination b {
  max-width: 150px;
}
#composer .destination-grid .empty-state {
  padding: 8px 0;
}
#composer #caption {
  height: 108px;
  min-height: 108px;
  padding: 10px 12px;
  line-height: 1.6;
}
#composer .field-footnote {
  gap: 8px;
  margin-top: 0;
  font-size: 10px;
  line-height: 1.45;
}
#composer #character-count {
  flex: 0 0 auto;
}
#composer #network-variants {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff03;
}
#composer #network-variants > label:has(#threads-variant-enabled) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  line-height: 1.45;
  cursor: pointer;
}
#composer #threads-variant-enabled {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--blue);
}
#composer #threads-variant-field {
  grid-column: 1 / -1;
  margin-top: 9px;
}
#composer #threads-character-count {
  display: block;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-top: 0;
  font-size: 10px;
  color: var(--muted);
}
#composer #network-validation,
#composer #media-upload-status {
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#composer #network-validation {
  grid-column: 1 / -1;
}
#composer #network-validation:not(:empty),
#composer #media-upload-status:not(:empty) {
  margin-top: 7px;
}
#composer #native-media-controls {
  padding: 10px 12px 12px;
  border: 1px solid #80613c;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #241e18;
}
#composer #native-media-controls > legend {
  padding: 0 5px;
  margin-bottom: 4px;
}
#composer #native-media-controls > small {
  display: block;
  margin: 7px 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted);
}
#composer #media-file {
  padding: 5px;
  font-size: 11px;
}
#composer #media-file::file-selector-button {
  padding: 7px 9px;
  margin-right: 8px;
  border: 1px solid #71513c;
  border-radius: 6px;
  background: #33241d;
  color: var(--text);
  cursor: pointer;
}
#composer #native-media-controls .dialog-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
#composer #native-media-controls .secondary-button {
  min-height: 32px;
  padding: 7px 9px;
  font-size: 10px;
}
#composer .media-field {
  margin-top: -10px;
  padding: 11px 12px;
  gap: 9px;
  border-style: solid;
  border-top-color: #80613c66;
  border-radius: 0 0 10px 10px;
}
#composer .media-field > span {
  align-self: center;
  font-size: 22px;
}
#composer .disclosure summary {
  padding: 10px;
}
#composer .inline-note {
  font-size: 10px;
  line-height: 1.6;
}
#composer .composer-footer {
  gap: 10px;
  padding-top: 3px;
}
#composer .composer-footer .primary-button {
  flex-shrink: 0;
}
#composer .composer-aside {
  gap: 12px;
}
#composer .preview-panel .panel-heading {
  padding: 16px 16px 12px;
  gap: 8px;
}
#composer .preview-panel .panel-heading h3 {
  font-size: 16px;
}
#composer .post-preview {
  margin: 0 14px;
}
#composer .preview-author {
  padding: 12px;
}
#composer #preview-copy {
  padding: 0 12px 12px;
  line-height: 1.6;
}
#composer .preview-media {
  min-height: 92px;
}
#composer .preview-reactions {
  padding: 10px 12px;
}
#composer .preview-note {
  padding: 10px 16px 14px;
  line-height: 1.5;
}
#composer .intelligence-card {
  padding: 16px;
  gap: 8px;
}
#composer .intelligence-card .feature-symbol {
  width: 28px;
  height: 28px;
  font-size: 19px;
}
#composer .intelligence-card h3 {
  font-size: 17px;
}
#composer .intelligence-card p:not(.eyebrow) {
  font-size: 11px;
  line-height: 1.6;
}
#composer .intelligence-card .secondary-button {
  margin-top: 3px;
  min-height: 36px;
  padding: 9px 10px;
  font-size: 11px;
}
@media (max-width: 1020px) {
  #composer .composer-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #composer .composer-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  #composer .form-section {
    padding: 14px;
  }
  #composer .form-section:first-child .field-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  #composer .composer-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  #composer .field-footnote {
    flex-wrap: wrap;
  }
  #composer .field-footnote span:first-child {
    max-width: none;
  }
  #composer legend small {
    display: block;
    margin: 4px 0 0;
  }
}

/* Shared translucent surfaces and verified footer; no application behavior changes. */
body:has(.app-shell:not([hidden])) {
  background:
    radial-gradient(ellipse at 93% 3%, #c36b3426, transparent 48%),
    radial-gradient(ellipse at 3% 85%, #9c28372b, transparent 45%),
    linear-gradient(145deg, #120d10a6, #0e0e10c7 60%, #171014b3),
    url("./assets/autumn-studio-scene-v2.webp") center top / cover fixed;
}
.app-shell .panel {
  background: radial-gradient(ellipse at 0 0, #a4592b1c, transparent 62%), linear-gradient(140deg, #2a2429b8, #1b191fcb);
  backdrop-filter: blur(10px);
}
#composer .composer-form {
  background: transparent;
  backdrop-filter: none;
}
#composer .form-section {
  background: radial-gradient(ellipse at 0 0, #a7583019, transparent 65%), linear-gradient(140deg, #292329bd, #19171bc7);
  backdrop-filter: blur(8px);
}
#composer .post-preview {
  background: linear-gradient(140deg, #292329bf, #19171bd9);
}
#composer .studio-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #deb792;
}
#composer .field-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
#composer #native-media-controls {
  padding: 8px 10px 9px;
  background: linear-gradient(135deg, #a16d3410, #211b1a80);
  border-color: #a8815040;
}
#composer #native-media-controls > label {
  gap: 0;
}
#composer #native-media-controls > small {
  margin: 5px 0;
  font-size: 10px;
  line-height: 1.4;
}
#composer #media-file {
  min-height: 34px;
  padding: 3px;
}
#composer #media-file::file-selector-button {
  padding: 6px 9px;
}
#composer #native-media-controls .dialog-actions {
  gap: 5px;
  margin-top: 6px;
}
#composer #native-media-controls .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 7px;
  font-size: 10px;
}
#composer #native-media-controls .secondary-button .studio-icon {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}
#composer .media-field {
  padding: 9px 10px;
  gap: 8px;
  background: #211b1a80;
  border-color: #a8815040;
  border-top-color: #a8815026;
}
#composer .media-field > span {
  display: inline-flex;
}
#composer .media-field small {
  font-size: 10px;
  line-height: 1.4;
}
#composer .caption-editor {
  position: relative;
  display: block;
  min-width: 0;
}
#composer .caption-editor #caption {
  display: block;
  width: 100%;
}
#composer .caption-empty-brand {
  position: absolute;
  inset: 29px 14px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  user-select: none;
  color: #d9bba0;
  opacity: .72;
}
#composer #caption:not(:placeholder-shown) + .caption-empty-brand {
  display: none;
}
#composer .caption-editor:focus-within .caption-empty-brand {
  opacity: .28;
}
#composer .composer-brand-art {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 72px;
  height: 70px;
  background: url("./assets/autumn-studio-scene-v2.webp") left center / auto 70px no-repeat;
  mask-image: radial-gradient(ellipse at 48% 50%, #000 38%, transparent 74%);
}
#composer .composer-brand-wordmark {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 25px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .45px;
  white-space: nowrap;
  color: #edc994;
  text-shadow: 0 1px 12px #c68b3526;
}
.studio-avatar {
  padding: 4px;
  background: radial-gradient(circle, #b9882726, #1f171c 72%);
}
.studio-orbital-emblem {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.studio-orbital-emblem .orbital-glow { fill: #d4a7450d; stroke: #e6b45126; stroke-width: 3; }
.studio-orbital-emblem .orbital-core { fill: #100e14; stroke: #e9b44d; stroke-width: 1.3; }
.studio-orbital-emblem .orbital-ring { fill: none; stroke: #ddb25e; stroke-width: 1.4; stroke-linecap: round; }
.studio-orbital-emblem .orbital-ring-back { stroke: #9b752f; }
.studio-orbital-emblem .orbital-ring-front { stroke: #ffdc8a; stroke-width: 1.7; }
.studio-orbital-emblem .orbital-crescent { fill: #ffe1a0; }
.studio-orbital-emblem .orbital-star { fill: #ffe3a5; }
.studio-orbital-emblem .orbital-spark { fill: none; stroke: #d9b05f; stroke-width: 1; stroke-linecap: round; }
.app-shell .page-footer {
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: 22px 0 8px;
  color: #c5b29f;
}
.app-shell .studio-footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 0 100%;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid #c7966824;
}
.app-shell .studio-social-links,
.app-shell .studio-legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.app-shell .studio-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d7a57626;
  border-radius: 9px;
  background: #30241e66;
  color: #d9b898;
}
.app-shell .studio-social-links svg {
  width: 17px;
  height: 17px;
  --social-icon-bg: #211b1a;
}
.app-shell .studio-legal-links {
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0;
}
.app-shell .studio-legal-links a {
  color: #cfb9a5;
  padding: 8px 0;
}
.app-shell .studio-social-links a:hover,
.app-shell .studio-legal-links a:hover {
  color: #ffe0bc;
}
@media (max-width: 600px) {
  .app-shell .studio-footer-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  #composer #native-media-controls .dialog-actions {
    gap: 6px;
  }
}

/* The upload label is replaced by the existing media controller; a CSS SVG survives it. */
#composer #media-upload::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V3m-5 5 5-5 5 5M4 15v6h16v-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Verified provider SVG presentation; existing provider IDs and labels remain authoritative. */
.provider-mark.instagram,
#provider-grid button[data-provider="instagram"] > span:first-child,
.provider-mark.instagram-standalone,
#provider-grid button[data-provider="instagram-standalone"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.facebook,
#provider-grid button[data-provider="facebook"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.threads,
#provider-grid button[data-provider="threads"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M18.263%2011.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13%200-3.922.963-4.863%202.499l2.062%201.438c.535-.843%201.272-1.543%202.628-1.543%201.528%200%202.318.85%202.544%202.431a15%2015%200%200%200-2.236-.173c-4.125%200-6.068%201.867-6.068%204.336s1.943%203.99%204.804%203.99c3.139%200%205.013-2.115%205.781-4.735.798.361%201.348%201.204%201.348%202.47%200%203.387-3.907%205.232-7.22%205.232-4.885%200-8.077-3.207-8.077-8.424%200-6.392%204.223-10.487%209.9-10.487%203.808%200%205.69%201.671%206.97%203.914l2.108-1.475C21.44%202.078%2018.331%200%2013.663%200%206.227%200%201.168%205.277%201.168%2012.934c0%207%204.953%2011.066%2010.856%2011.066%204.878%200%209.809-2.846%209.809-7.716%200-2.545-1.46-4.231-3.569-5.187m-6.33%204.855c-1.077%200-2.026-.512-2.026-1.453%200-1.483%201.822-1.934%203.606-1.934.678%200%201.34.045%201.927.173-.422%201.927-1.671%203.215-3.508%203.214Z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.tiktok,
#provider-grid button[data-provider="tiktok"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12.525.02c1.31-.02%202.61-.01%203.91-.02.08%201.53.63%203.09%201.75%204.17%201.12%201.11%202.7%201.62%204.24%201.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01%202.92.01%205.84-.02%208.75-.08%201.4-.54%202.79-1.35%203.94-1.31%201.92-3.58%203.17-5.91%203.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9%201.12-3.72%202.58-4.96%201.66-1.44%203.98-2.13%206.15-1.72.02%201.48-.04%202.96-.04%204.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11%201.04-1.36%201.75-.21.51-.15%201.07-.14%201.61.24%201.64%201.82%203.02%203.5%202.87%201.12-.01%202.19-.66%202.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.youtube,
#provider-grid button[data-provider="youtube"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.x,
#provider-grid button[data-provider="x"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M14.234%2010.162%2022.977%200h-2.072l-7.591%208.824L7.251%200H.258l9.168%2013.343L.258%2024H2.33l8.016-9.318L16.749%2024h6.993zm-2.837%203.299-.929-1.329L3.076%201.56h3.182l5.965%208.532.929%201.329%207.754%2011.09h-3.182z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.linkedin,
#provider-grid button[data-provider="linkedin"] > span:first-child,
.provider-mark.linkedin-page,
#provider-grid button[data-provider="linkedin-page"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M0%201.146C0%20.513.526%200%201.175%200h13.65C15.474%200%2016%20.513%2016%201.146v13.708c0%20.633-.526%201.146-1.175%201.146H1.175C.526%2016%200%2015.487%200%2014.854zm4.943%2012.248V6.169H2.542v7.225zm-1.2-8.212c.837%200%201.358-.554%201.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4%203.226%202.4%203.934c0%20.694.521%201.248%201.327%201.248zm4.908%208.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878%201.232-.878.869%200%201.216.662%201.216%201.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274%200-1.845.7-2.165%201.193v.025h-.016l.016-.025V6.169h-2.4c.03.678%200%207.225%200%207.225z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.pinterest,
#provider-grid button[data-provider="pinterest"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12.017%200C5.396%200%20.029%205.367.029%2011.987c0%205.079%203.158%209.417%207.618%2011.162-.105-.949-.199-2.403.041-3.439.219-.937%201.406-5.957%201.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911%202.168-2.911%201.024%200%201.518.769%201.518%201.688%200%201.029-.653%202.567-.992%203.992-.285%201.193.6%202.165%201.775%202.165%202.128%200%203.768-2.245%203.768-5.487%200-2.861-2.063-4.869-5.008-4.869-3.41%200-5.409%202.562-5.409%205.199%200%201.033.394%202.143.889%202.741.099.12.112.225.085.345-.09.375-.293%201.199-.334%201.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646%200-3.776%202.748-7.252%207.92-7.252%204.158%200%207.392%202.967%207.392%206.923%200%204.135-2.607%207.462-6.233%207.462-1.214%200-2.354-.629-2.758-1.379l-.749%202.848c-.269%201.045-1.004%202.352-1.498%203.146%201.123.345%202.306.535%203.55.535%206.607%200%2011.985-5.365%2011.985-11.987C23.97%205.39%2018.592.026%2011.985.026L12.017%200z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.reddit,
#provider-grid button[data-provider="reddit"] > span:first-child {
  --provider-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12%200C5.373%200%200%205.373%200%2012c0%203.314%201.343%206.314%203.515%208.485l-2.286%202.286C.775%2023.225%201.097%2024%201.738%2024H12c6.627%200%2012-5.373%2012-12S18.627%200%2012%200Zm4.388%203.199c1.104%200%201.999.895%201.999%201.999%200%201.105-.895%202-1.999%202-.946%200-1.739-.657-1.947-1.539v.002c-1.147.162-2.032%201.15-2.032%202.341v.007c1.776.067%203.4.567%204.686%201.363.473-.363%201.064-.58%201.707-.58%201.547%200%202.802%201.254%202.802%202.802%200%201.117-.655%202.081-1.601%202.531-.088%203.256-3.637%205.876-7.997%205.876-4.361%200-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538%200-1.548%201.255-2.802%202.803-2.802.645%200%201.239.218%201.712.585%201.275-.79%202.881-1.291%204.64-1.365v-.01c0-1.663%201.263-3.034%202.88-3.207.188-.911.993-1.595%201.959-1.595Zm-8.085%208.376c-.784%200-1.459.78-1.506%201.797-.047%201.016.64%201.429%201.426%201.429.786%200%201.371-.369%201.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406%200c-.786%200-1.385.824-1.338%201.841.047%201.017.634%201.385%201.418%201.385.785%200%201.473-.413%201.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703%204.013c-.974%200-1.907.048-2.77.135-.147.015-.241.168-.183.305.483%201.154%201.622%201.964%202.953%201.964%201.33%200%202.47-.81%202.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z%22%2F%3E%3C%2Fsvg%3E");
}
.provider-mark.instagram,
#provider-grid button[data-provider="instagram"] > span:first-child,
.provider-mark.facebook,
#provider-grid button[data-provider="facebook"] > span:first-child,
.provider-mark.threads,
#provider-grid button[data-provider="threads"] > span:first-child,
.provider-mark.tiktok,
#provider-grid button[data-provider="tiktok"] > span:first-child,
.provider-mark.youtube,
#provider-grid button[data-provider="youtube"] > span:first-child,
.provider-mark.x,
#provider-grid button[data-provider="x"] > span:first-child,
.provider-mark.linkedin,
#provider-grid button[data-provider="linkedin"] > span:first-child,
.provider-mark.linkedin-page,
#provider-grid button[data-provider="linkedin-page"] > span:first-child,
.provider-mark.pinterest,
#provider-grid button[data-provider="pinterest"] > span:first-child,
.provider-mark.reddit,
#provider-grid button[data-provider="reddit"] > span:first-child,
.provider-mark.instagram-standalone,
#provider-grid button[data-provider="instagram-standalone"] > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.provider-mark.instagram::before,
#provider-grid button[data-provider="instagram"] > span:first-child::before,
.provider-mark.facebook::before,
#provider-grid button[data-provider="facebook"] > span:first-child::before,
.provider-mark.threads::before,
#provider-grid button[data-provider="threads"] > span:first-child::before,
.provider-mark.tiktok::before,
#provider-grid button[data-provider="tiktok"] > span:first-child::before,
.provider-mark.youtube::before,
#provider-grid button[data-provider="youtube"] > span:first-child::before,
.provider-mark.x::before,
#provider-grid button[data-provider="x"] > span:first-child::before,
.provider-mark.linkedin::before,
#provider-grid button[data-provider="linkedin"] > span:first-child::before,
.provider-mark.linkedin-page::before,
#provider-grid button[data-provider="linkedin-page"] > span:first-child::before,
.provider-mark.pinterest::before,
#provider-grid button[data-provider="pinterest"] > span:first-child::before,
.provider-mark.reddit::before,
#provider-grid button[data-provider="reddit"] > span:first-child::before,
.provider-mark.instagram-standalone::before,
#provider-grid button[data-provider="instagram-standalone"] > span:first-child::before {
  content: "";
  display: block;
  width: 64%;
  height: 64%;
  background: currentColor;
  mask: var(--provider-icon) center / contain no-repeat;
}

/* LinkedIn SVG: Bootstrap Icons 1.13.2. The original icon geometry is unchanged.
The MIT License (MIT)

Copyright (c) 2019-2024 The Bootstrap Authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/

/* Hide only the app's main and sidebar scrollbar chrome; scrolling remains native. */
html:has(.app-shell:not([hidden])),
.app-shell .sidebar .nav {
  scrollbar-width: none;
}
html:has(.app-shell:not([hidden]))::-webkit-scrollbar,
.app-shell .sidebar .nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@media (max-width: 600px) {
  #composer .composer-brand-wordmark { font-size: 22px; }
  #composer .composer-brand-art {
    right: 0;
    width: 48px;
    height: 48px;
    background-size: auto 48px;
  }
}

/* Overview density pass. Scoped presentation; existing runtime targets and routes are retained. */
#overview .section-topline { margin-bottom: 13px; }
#overview .hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-radius: 20px;
  background: radial-gradient(ellipse at 84% 80%, #b1511b20, transparent 55%), linear-gradient(120deg, #221a1be6, #141113d9 60%, #25171ae0);
}
#overview .hero-copy { padding: 23px 24px 20px; min-width: 0; }
#overview .hero h1.overview-brand-title {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 36px);
  line-height: 1.22;
  letter-spacing: -1px;
  font-weight: 750;
  color: #fff3e8;
}
#overview .overview-brand-title span {
  color: #f1bd75;
  font-style: italic;
  white-space: nowrap;
}
#overview .overview-promise {
  margin: 9px 0 18px;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.35;
  letter-spacing: -.6px;
  font-weight: 550;
  color: #f5e9dc;
}
#overview .overview-promise strong {
  font-weight: 650;
  color: #efb578;
  white-space: nowrap;
}
#overview .hero-actions { margin: 0; gap: 9px; align-items: center; flex-wrap: wrap; }
#overview .hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 10px 13px;
  font-size: 11px;
  font-weight: 650;
  border-radius: 9px;
}
#overview .hero-actions svg, #overview .metric-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
#overview .hero-actions .secondary-button { color: #edd1ad; background: #ffffff06; }
#overview .hero-actions .action-arrow { width: 12px; height: 12px; margin-left: 2px; opacity: .7; }
#overview #commercial-onboarding {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 15px 0 0;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid #d7a66b24;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#overview #commercial-onboarding h3 {
  margin: 0;
  color: #cdb69e;
  font-size: 10px;
  letter-spacing: .35px;
  font-weight: 600;
}
#overview #commercial-onboarding .onboarding-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 5px;
  margin: 0;
}
#overview #commercial-onboarding .onboarding-step {
  min-height: 22px;
  flex-direction: column;
  gap: 4px;
  font-size: 8px;
  line-height: 1.3;
  color: #cbb9a8;
}
#overview #commercial-onboarding .onboarding-step span {
  width: 19px;
  height: 19px;
  font-size: 9px;
  background: #c18c4020;
  border-color: #b78b4c5c;
  color: #d7bc94;
}
#overview #commercial-onboarding .onboarding-step.complete { color: #c5d3b8; }
#overview #commercial-onboarding .onboarding-step.complete span { background: #435c364f; border-color: #81966b88; color: #d9e6c8; }
#overview #commercial-onboarding a:focus-visible, #overview .hero-actions a:focus-visible { outline: 2px solid #efb578; outline-offset: 4px; }
#overview .cosmos { min-height: 0; height: 100%; margin: 0; }
#overview .autumn-centerpiece { object-position: 38% center; }
#overview .cosmos::after { background: linear-gradient(90deg, #171315, transparent 20%), linear-gradient(0deg, #141113aa, transparent 25%); }
#overview .cosmos-caption { bottom: 15px; font-size: 6px; padding: 6px 9px; letter-spacing: 1px; }
#overview .metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 13px 0 16px; }
#overview .metric {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 28px auto auto;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
}
#overview .metric .metric-icon {
  display: inline-grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  border: 1px solid #cf99583b;
  border-radius: 8px;
  color: #e4b981;
  background: linear-gradient(145deg, #d99a5124, #b9754610);
}
#overview .metric .metric-icon svg { width: 16px; height: 16px; }
#overview .metric b {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.7px;
  text-align: right;
}
#overview .metric > div { grid-column: 1 / -1; grid-row: 2; font-size: 10px; line-height: 1.3; margin-top: 3px; }
#overview .metric-dot { display: none; }
#overview .metric small { grid-column: 1 / -1; grid-row: 3; font-size: 8px; line-height: 1.35; color: #b7a695; }
#overview .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
#overview .dashboard-grid .panel-heading { padding: 17px 18px 13px; gap: 10px; }
#overview .dashboard-grid .eyebrow { margin-bottom: 5px; font-size: 8px; letter-spacing: 1.3px; }
#overview .dashboard-grid .panel-heading h3 { font-size: 16px; }
#overview .dashboard-grid .panel-heading .text-button { font-size: 10px; white-space: nowrap; }
#overview .account-row, #overview .recent-row { padding: 10px 18px; gap: 9px; }
#overview .account-row .provider-mark, #overview .recent-row .provider-mark { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; }
#overview .account-row b, #overview .recent-copy b { font-size: 11px; }
#overview .account-row small, #overview .recent-copy small { font-size: 9px; margin-top: 3px; }
#overview .account-row .badge, #overview .recent-row .badge { font-size: 8px; padding: 4px 7px; }
#overview .connect-inline { width: calc(100% - 36px); margin: 8px 18px 14px; padding: 8px; font-size: 10px; }
#overview .dashboard-grid .empty-state { padding: 20px 18px 28px; }
#overview .workflow-strip { margin-top: 16px; padding: 15px 18px; gap: 16px; }
@media (max-width: 1100px) and (min-width: 901px) {
  #overview .hero { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  #overview .hero-copy { padding: 20px; }
  #overview .hero h1.overview-brand-title { font-size: 25px; }
  #overview .overview-promise { font-size: 19px; }
  #overview #commercial-onboarding { grid-template-columns: 1fr; gap: 8px; }
  #overview .metric { padding: 10px; }
}
@media (max-width: 900px) {
  #overview .hero { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  #overview .hero h1.overview-brand-title { font-size: 28px; }
  #overview .overview-promise { font-size: 20px; }
}
@media (max-width: 700px) {
  #overview .hero { grid-template-columns: minmax(0, 1fr); }
  #overview .hero-copy { padding: 21px 19px 18px; }
  #overview .hero h1.overview-brand-title { max-width: 300px; font-size: 29px; }
  #overview .overview-promise { font-size: 20px; }
  #overview .cosmos { position: absolute; inset: 0 0 0 15%; opacity: .22; pointer-events: none; }
  #overview .cosmos::after { background: linear-gradient(90deg, #171315, #17131540), linear-gradient(0deg, #141113, transparent 70%); }
  #overview .cosmos-caption { display: none; }
  #overview .hero-actions { gap: 8px; }
  #overview .hero-actions a { padding: 10px; font-size: 10px; gap: 6px; }
  #overview #commercial-onboarding { margin-top: 16px; grid-template-columns: 1fr; gap: 9px; }
  #overview #commercial-onboarding .onboarding-step { flex-direction: row; font-size: 9px; }
  #overview #commercial-onboarding .onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 10px; }
  #overview .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 11px 0 14px; }
  #overview .metric { padding: 10px; grid-template-columns: 25px minmax(0, 1fr); gap: 5px; grid-column: auto; }
  #overview .metric .metric-icon { width: 25px; height: 25px; }
  #overview .metric b { font-size: 24px; }
  #overview .metric > div { font-size: 9px; }
  #overview .metric small { font-size: 8px; }
  #overview .metric:last-child { grid-column: auto; }
  #overview .metric:last-child b { grid-column: 2; grid-row: 1; }
  #overview .metric:last-child small { grid-column: 1 / -1; }
  #overview .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 380px) {
  #overview .hero h1.overview-brand-title { font-size: 27px; }
  #overview .hero-actions a { font-size: 9px; padding: 9px; }
  #overview .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Approved Content density and route-local footer. Other pages retain their live styles. */
#content-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}
#content-list .content-card {
  --platform-line: #c69b6338;
  --platform-tint: #a7783310;
  min-width: 0;
  padding: 14px;
  gap: 10px;
  border-radius: 12px;
}
#content-list .content-card:has(.provider-mark.facebook) { --platform-line: #448de9b3; --platform-tint: #1877f21f; }
#content-list .content-card:has(.provider-mark:is(.instagram, .instagram-standalone)) { --platform-line: #ec6073b3; --platform-tint: #e4405f1c; }
#content-list .content-card:has(.provider-mark.threads) { --platform-line: #f4f0e8a3; --platform-tint: #fff9ee0e; }
#content-list .content-card > header {
  margin: -14px -14px 0;
  padding: 10px 14px;
  border-top: 3px solid var(--platform-line);
  border-bottom: 1px solid #c99d7621;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(100deg, var(--platform-tint), transparent 85%);
}
#content-list .content-card > header .provider-mark { width: 30px; height: 30px; border-radius: 8px; }
#content-list .content-card > p {
  margin: 0;
  min-height: 0;
  line-height: 1.55;
  white-space: pre-wrap;
  -webkit-line-clamp: 5;
}
#content-list .content-card > small { line-height: 1.5; overflow-wrap: anywhere; }
#content-list .content-card > footer { padding-top: 8px; gap: 8px; }
#content-list .content-card > footer > small { min-width: 0; overflow-wrap: anywhere; }
#content-list .content-card > footer > button { flex-shrink: 0; min-height: 32px; }
#content-list > .empty-state { padding: 22px 16px; }
.app-shell:has(#content:not([hidden])) .page-footer { margin-top: 24px; padding: 16px 0 6px; gap: 12px 20px; }
.app-shell:has(#content:not([hidden])) .studio-footer-links { flex: 1 1 380px; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; padding-top: 0; border-top: 0; }
.app-shell:has(#content:not([hidden])) .studio-social-links { gap: 7px; }
.app-shell:has(#content:not([hidden])) .studio-social-links a { width: 32px; height: 32px; }
.app-shell:has(#content:not([hidden])) .studio-legal-links { gap: 14px; }
.app-shell:has(#content:not([hidden])) .footer-pillars > div { padding: 0 9px; }
@media (max-width: 1000px) {
.app-shell:has(#content:not([hidden])) .studio-footer-links { justify-content: flex-start; }
}
@media (max-width: 600px) {
#content-list { grid-template-columns: minmax(0, 1fr); }
.app-shell:has(#content:not([hidden])) .page-footer { align-items: flex-start; }
.app-shell:has(#content:not([hidden])) .studio-footer-links { flex: 0 1 auto; flex-direction: row; }
.app-shell:has(#content:not([hidden])) .studio-legal-links { flex-wrap: wrap; }
}
@media (pointer: coarse) {
#content-list .content-card > footer > button { min-height: 44px; }
.app-shell:has(#content:not([hidden])) .studio-social-links a { width: 44px; height: 44px; }
}

/* Content library: extend the existing category line; no enclosing filter tile. */
#content #content-tabs {
  position: relative;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 18px;
  padding-bottom: 10px;
}
#content #content-tabs > button[data-content-tab] { flex: 0 0 auto; }
#content .content-inline-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #baa38e;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}
#content .content-inline-filter select {
  appearance: none;
  width: auto;
  min-width: 42px;
  max-width: 112px;
  min-height: 34px;
  padding: 7px 18px 7px 1px;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c7ac92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 14px;
  background-repeat: no-repeat;
  color: #e4d3c2;
  font: inherit;
  cursor: pointer;
}
#content .content-inline-filter select option { background: #211c20; color: #eee1d3; }
#content .content-date-filter { position: relative; flex: 0 0 auto; margin: 0; color: #baa38e; font-size: 11px; }
#content .content-date-filter summary { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; list-style: none; cursor: pointer; }
#content .content-date-filter summary::-webkit-details-marker { display: none; }
#content #content-date-summary { color: #e4d3c2; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content .content-date-filter summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#content .content-date-options { position: absolute; z-index: 12; top: calc(100% + 6px); right: 0; width: 260px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid #8b614144; border-radius: 10px; background: #211c20; box-shadow: 0 12px 25px #0007; }
#content .content-date-options label { min-width: 0; font-size: 10px; gap: 6px; }
#content .content-date-options input { min-width: 0; padding: 7px; font-size: 11px; }
#content #content-tabs > .content-reset { padding: 5px 3px; min-height: 34px; font-size: 10px; border: 0; background: transparent; color: #b7a18d; }
#content .content-inline-search { display: inline-flex; align-items: center; gap: 5px; width: 140px; min-width: 100px; margin-left: auto; }
#content .content-inline-search svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #b9a18b; stroke-width: 1.8; stroke-linecap: round; }
#content .content-inline-search input { width: 100%; min-width: 0; min-height: 34px; padding: 6px 2px; border: 0; border-bottom: 1px solid #a27d4e33; border-radius: 0; background: transparent; color: #e8d9c9; font-size: 11px; }
#content .content-style-filter { flex: 0 0 auto; }
#content :is(.content-inline-filter select,.content-inline-search input,.content-date-filter summary):focus-visible { outline: 2px solid #e3aa65; outline-offset: 3px; }
#content #content-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-items: stretch; grid-auto-rows: 1fr; gap: 14px; }
#content #content-list .content-card { min-height: 282px; height: 100%; gap: 10px; }
#content #content-list .content-card > p { flex: 1; max-height: 93px; min-height: 93px; margin: 0; line-height: 1.55; -webkit-line-clamp: 5; white-space: pre-wrap; }
#content #content-list .content-card > small { min-height: 30px; line-height: 1.5; }
#content #content-list .content-card > footer { min-height: 43px; }
#content #content-list .content-card > footer > small { line-height: 1.5; }
#content .content-card .action-arrow { width: 13px; height: 13px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
#content #content-list[data-content-style="list"] { grid-template-columns: minmax(0,1fr); grid-auto-rows: auto; }
#content #content-list[data-content-style="list"] .content-card { display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(110px,.45fr) 145px; align-items: center; gap: 12px; min-height: 102px; height: auto; }
#content #content-list[data-content-style="list"] .content-card > header { margin: -14px 0 -14px -14px; padding: 12px; border-top: 0; border-left: 3px solid var(--platform-line); border-bottom: 0; border-radius: 12px 0 0 12px; height: calc(100% + 28px); flex-wrap: wrap; }
#content #content-list[data-content-style="list"] .content-card > p { min-height: 0; max-height: 74px; -webkit-line-clamp: 4; }
#content #content-list[data-content-style="list"] .content-card > small { min-height: 0; }
#content #content-list[data-content-style="list"] .content-card > footer { margin: 0; padding: 0; border: 0; flex-wrap: wrap; }
@media (max-width: 800px) {
  #content #content-tabs { gap: 5px 9px; }
  #content .content-inline-filter select { max-width: 100px; }
  #content #content-list[data-content-style="list"] .content-card { grid-template-columns: 95px minmax(0,1fr); }
  #content #content-list[data-content-style="list"] .content-card > header { grid-row: span 3; }
  #content #content-list[data-content-style="list"] .content-card > footer { grid-column: 2; }
}
@media (max-width: 600px) {
  #content #content-tabs > button[data-content-tab] { padding: 8px 9px; }
  #content .content-inline-filter { font-size: 11px; }
  #content .content-inline-filter select { max-width: 95px; }
  #content .content-inline-search { flex: 1 1 140px; max-width: 210px; margin-left: 0; }
  #content .content-date-filter { position: static; }
  #content .content-date-options { right: 0; left: auto; top: 100%; width: min(260px, 100%); }
  #content #content-list { grid-template-columns: minmax(0,1fr); }
  #content #content-list .content-card { min-height: 282px; }
}
@media (pointer: coarse) {
  #content :is(.content-inline-filter select,.content-inline-search input,.content-date-filter summary,.content-date-options input),
  #content #content-tabs > button { min-height: 44px; }
}

/* One compact Content category control; existing Media/Templates remain alongside. */
#content #content-tabs .content-category-filter {
  display: inline-grid;
  align-content: center;
  align-items: start;
  gap: 0;
  flex: 0 0 auto;
  min-width: 78px;
  padding: 1px 6px 1px 0;
}
#content .content-category-filter > span { font-size: 10px; line-height: 1.25; color: #baa38e; }
#content #content-category { width: 100%; max-width: 104px; min-height: 26px; padding-top: 3px; padding-bottom: 3px; font-size: 12px; line-height: 1.35; }
@media (pointer: coarse) {
  #content #content-category { min-height: 44px; }
}

/* Keep every Content navigation control on one baseline.
   Narrow viewports scroll this strip; the page and cards do not overflow. */
#content .content-nav-region { position: relative; min-width: 0; max-width: 100%; margin-bottom: 18px; }
#content #content-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 5px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding-bottom: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 8px;
  scrollbar-width: thin;
  scrollbar-color: #b4885e66 transparent;
}
#content #content-tabs > * { flex-shrink: 0; }
#content #content-tabs:focus-visible { outline: 2px solid #d6a56a; outline-offset: 3px; }
#content #content-tabs::-webkit-scrollbar { height: 4px; }
#content #content-tabs::-webkit-scrollbar-thumb { border-radius: 4px; background: #b4885e66; }
#content #content-tabs > button[data-content-tab] { padding-left: 12px; padding-right: 12px; }
#content #content-tabs .content-category-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
}
#content .content-category-filter > span { font-size: 11px; line-height: 1.4; }
#content #content-category { width: 70px; max-width: 70px; min-height: 34px; font-size: 11px; padding-top: 7px; padding-bottom: 7px; }
#content .content-inline-filter { gap: 4px; white-space: nowrap; }
#content .content-inline-filter select { width: 50px; max-width: 50px; }
#content .content-style-filter select { width: 54px; max-width: 54px; }
#content #content-tabs .content-inline-search { flex: 0 0 100px; width: 100px; min-width: 100px; max-width: 100px; margin-left: auto; }
#content .content-date-filter { position: static; }
#content #content-date-summary { max-width: 58px; }
#content .content-nav-region > .content-date-options {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: min(280px, 100%);
  margin: 0;
}
#content .content-nav-region:has(.content-date-filter[open]) > .content-date-options { display: grid; }
#content .content-nav-region > .content-date-options #content-reset { grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 5px 0; font-size: 11px; }
@media (max-width: 600px) {
  #content #content-tabs { flex-wrap: nowrap; gap: 0 5px; }
  #content #content-tabs > button[data-content-tab] { padding-left: 12px; padding-right: 12px; }
  #content #content-tabs .content-inline-search { flex: 0 0 100px; margin-left: 0; }
  #content .content-inline-filter select { max-width: 50px; }
  #content #content-category { max-width: 70px; }
  #content .content-style-filter select { max-width: 54px; }
}
@media (pointer: coarse) {
  #content #content-category,
  #content .content-nav-region > .content-date-options #content-reset { min-height: 44px; }
}
#content #content-tabs :focus-visible { outline: 2px solid #d6a56a; outline-offset: -2px; }

/* Channels review only. Existing account actions and permission logic are unchanged. */
#channels .channels-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 18px;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 0 0 9px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line-soft);
  scrollbar-width: thin;
  scrollbar-color: #b4885e66 transparent;
}
#channels .channels-toolbar > * { flex: 0 0 auto; }
#channels .channels-toolbar .channel-view-label { color: #e4d3c2; font-size: 11px; line-height: 34px; }
#channels .channels-toolbar .channel-connect { margin-left: auto; }
#channels .channels-toolbar .ownership-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; margin: 0; }
#channels .channels-toolbar .ownership-actions:empty { display: none; }
#channels .channels-toolbar button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #e4d3c2;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
#channels .channels-toolbar button:hover { color: #f0c393; }
#channels .channels-toolbar:focus-visible,
#channels .channels-toolbar :focus-visible { outline: 2px solid #d6a56a; outline-offset: -2px; }
#channels .channels-upper:has(.account-card) { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 18px; }
#channels .channels-upper:has(.account-card) > .channel-atmosphere { display: none; }
#channels #channel-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
  grid-auto-rows: auto;
  gap: 14px;
  margin-bottom: 0;
}
#channels #channel-list .account-card {
  --platform-line: #c69b6338;
  --platform-tint: #a7783310;
  min-width: 0;
  min-height: 0;
  height: auto;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  padding: 14px;
  gap: 8px;
  border-radius: 12px;
}
#channels #channel-list .account-card:has(.provider-mark.facebook) { --platform-line: #448de9b3; --platform-tint: #1877f21f; }
#channels #channel-list .account-card:has(.provider-mark:is(.instagram, .instagram-standalone)) { --platform-line: #ec6073b3; --platform-tint: #e4405f1c; }
#channels #channel-list .account-card:has(.provider-mark.threads) { --platform-line: #f4f0e8a3; --platform-tint: #fff9ee0e; }
#channels #channel-list .account-card > header {
  margin: -14px -14px 0;
  padding: 10px 14px;
  border-top: 3px solid var(--platform-line);
  border-bottom: 1px solid #c99d7621;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(100deg, var(--platform-tint), transparent 85%);
}
#channels #channel-list .account-card > header .provider-mark { width: 30px; height: 30px; border-radius: 8px; }
#channels #channel-list .account-card h3 { font-size: 15px; line-height: 1.35; margin: 0; }
#channels #channel-list .account-name { margin-top: 3px; font-size: 12px; line-height: 1.5; }
#channels #channel-list .account-meta { padding-top: 8px; gap: 8px; flex-wrap: wrap; line-height: 1.5; }
#channels #channel-list .account-meta > span { min-width: 0; overflow-wrap: anywhere; }
#channels #channel-list .account-actions { gap: 10px; padding-top: 0; min-height: 34px; }
#channels #channel-list .account-actions button { min-height: 34px; }
#channels #channel-list .account-actions .secondary-button { padding: 6px 0; border: 0; background: transparent; box-shadow: none; color: #e6b68b; }
#channels .supported-networks { padding: 16px; gap: 12px; border-radius: 12px; }
#channels .supported-networks h3 { font-size: 15px; }
#channels .supported-networks p { margin-top: 5px; }
#channels .platform-chips { gap: 7px; }
#channels .platform-chip { padding: 7px 10px; flex-wrap: wrap; }
#channels .platform-chip small { display: inline; }
@media (max-width: 600px) {
  #channels .channels-toolbar { gap: 0 16px; }
  #channels .channels-toolbar .ownership-actions { gap: 16px; }
  #channels #channel-list { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  #channels .channels-toolbar button,
  #channels #channel-list .account-actions button { min-height: 44px; }
  #channels .channels-toolbar .channel-view-label { line-height: 44px; }
}

#channels .action-arrow { width: 13px; height: 13px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
#channels #channel-list[data-collection-style="text"] { grid-template-columns: minmax(0,1fr); }
#channels #channel-list[data-collection-style="text"] .account-card { grid-template-columns: 120px minmax(0,1fr) minmax(140px,.7fr) 150px; align-items: center; gap: 12px; padding: 12px 14px; }
#channels #channel-list[data-collection-style="text"] .account-card > header { margin: -12px 0 -12px -14px; padding: 12px; border-top: 0; border-left: 3px solid var(--platform-line); border-bottom: 0; border-radius: 12px 0 0 12px; height: calc(100% + 24px); flex-wrap: wrap; gap: 8px; }
#channels #channel-list[data-collection-style="text"] .account-meta { border: 0; padding: 0; }
@media(max-width:800px) {
  #channels #channel-list[data-collection-style="text"] .account-card { grid-template-columns: 94px minmax(0,1fr); }
  #channels #channel-list[data-collection-style="text"] .account-card > header { grid-row: span 3; }
  #channels #channel-list[data-collection-style="text"] .account-actions { grid-column: 2; }
}

#channels .collection-style-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #baa38e;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}
#channels .collection-style-filter select {
  appearance: none;
  width: auto;
  min-width: 42px;
  max-width: 112px;
  min-height: 34px;
  padding: 7px 18px 7px 1px;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c7ac92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 14px;
  background-repeat: no-repeat;
  color: #e4d3c2;
  font: inherit;
  cursor: pointer;
}
#channels .collection-style-filter select option { background: #211c20; color: #eee1d3; }

#channels .collection-style-filter select { width: 54px; max-width: 54px; }
@media(pointer:coarse){ #channels .collection-style-filter select { min-height:44px; } }

/* Square Tiles: capped width, vertically stacked details, no stretched card row. */
#channels #channel-list[data-collection-style="tiles"] {
  grid-template-columns: repeat(3, minmax(0, 252px));
  grid-auto-rows: auto;
  align-items: start;
  justify-content: start;
}
#channels #channel-list[data-collection-style="tiles"] .account-card {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  min-height: min-content;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px;
  border-top: 3px solid var(--platform-line);
  text-align: center;
  background: linear-gradient(155deg, var(--platform-tint), transparent 60%), linear-gradient(140deg, #2a2429ed, #1b191ff5);
}
#channels #channel-list[data-collection-style="tiles"] .account-card > header { display: contents; }
#channels #channel-list[data-collection-style="tiles"] .account-card > header .provider-mark { order: 0; flex: 0 0 30px; }
#channels #channel-list[data-collection-style="tiles"] .account-card > header .badge { order: 2; max-width: 100%; }
#channels #channel-list[data-collection-style="tiles"] .account-card > div:not([class]) { order: 1; width: 100%; min-width: 0; }
#channels #channel-list[data-collection-style="tiles"] .account-card .account-name { line-height: 1.35; overflow-wrap: anywhere; }
#channels #channel-list[data-collection-style="tiles"] .account-card .account-meta { order: 3; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; line-height: 1.4; }
#channels #channel-list[data-collection-style="tiles"] .account-card .account-actions { order: 4; justify-content: center; gap: 18px; width: 100%; }
@media(max-width:900px) {
  #channels #channel-list[data-collection-style="tiles"] { grid-template-columns: repeat(auto-fill, minmax(0, 252px)); }
}
@media(max-width:600px) {
  #channels #channel-list[data-collection-style="tiles"] { grid-template-columns: minmax(0, min(100%, 252px)); justify-content: center; }
}

/* Queue review only. Existing search, status, refresh and Open routes are unchanged. */
#queue .queue-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 18px;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b4885e66 transparent;
}
#queue .queue-toolbar > * { flex: 0 0 auto; }
#queue .queue-status-label { display: inline-flex; align-items: center; gap: 4px; color: #baa38e; font-size: 11px; line-height: 1.4; white-space: nowrap; }
#queue #queue-status {
  appearance: none;
  width: 128px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 18px 7px 1px;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c7ac92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 14px;
  background-repeat: no-repeat;
  color: #e4d3c2;
  font: inherit;
  cursor: pointer;
}
#queue #queue-status option { background: #211c20; color: #eee1d3; }
#queue .queue-inline-search { display: inline-flex; align-items: center; gap: 5px; width: 180px; min-width: 180px; margin-left: auto; }
#queue .queue-inline-search svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #b9a18b; stroke-width: 1.8; stroke-linecap: round; }
#queue .queue-inline-search input { width: 100%; min-width: 0; min-height: 34px; padding: 6px 2px; border: 0; border-bottom: 1px solid #a27d4e33; border-radius: 0; background: transparent; color: #e8d9c9; font-size: 11px; }
#queue #queue-range { color: #b7a18d; font-size: 11px; line-height: 1.4; white-space: nowrap; }
#queue #queue-refresh { min-height: 34px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #e4d3c2; font-size: 11px; font-weight: 400; white-space: nowrap; }
#queue .queue-toolbar:focus-visible,
#queue .queue-toolbar :focus-visible { outline: 2px solid #d6a56a; outline-offset: -2px; }
#queue #queue-list { min-width: 0; border-radius: 12px; overflow: hidden; }
#queue #queue-list .queue-table { table-layout: fixed; }
#queue #queue-list .queue-table th { padding: 12px; font-size: 8px; letter-spacing: .65px; white-space: normal; }
#queue #queue-list .queue-table th:nth-child(1) { width: auto; }
#queue #queue-list .queue-table th:nth-child(2) { width: 18%; }
#queue #queue-list .queue-table th:nth-child(3) { width: 19%; }
#queue #queue-list .queue-table th:nth-child(4) { width: 20%; }
#queue #queue-list .queue-table th:nth-child(5) { width: 76px; }
#queue #queue-list .queue-table td { padding: 14px 12px; overflow-wrap: anywhere; }
#queue #queue-list .queue-table tbody tr { --platform-line: #c69b6338; --platform-tint: transparent; background: linear-gradient(90deg, var(--platform-tint), transparent 42%); }
#queue #queue-list .queue-table tbody tr:has(.provider-mark.facebook) { --platform-line: #448de9b3; --platform-tint: #1877f212; }
#queue #queue-list .queue-table tbody tr:has(.provider-mark:is(.instagram, .instagram-standalone)) { --platform-line: #ec6073b3; --platform-tint: #e4405f12; }
#queue #queue-list .queue-table tbody tr:has(.provider-mark.threads) { --platform-line: #f4f0e8a3; --platform-tint: #fff9ee09; }
#queue #queue-list .queue-table tbody tr > td:first-child { box-shadow: inset 3px 0 var(--platform-line); }
#queue #queue-list .post-cell { min-width: 0; max-width: none; gap: 9px; }
#queue #queue-list .post-cell b { max-width: none; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5; }
#queue #queue-list .post-cell small,
#queue #queue-list .subtle { margin-top: 4px; line-height: 1.5; }
#queue #queue-list .queue-table time { white-space: normal; line-height: 1.5; }
#queue #queue-list .queue-table .text-button { min-height: 34px; white-space: nowrap; }
#queue #queue-list .queue-table tbody tr:hover { background-color: #f5bd7c08; }
#queue #queue-list .empty-state { padding: 32px 18px; }
#queue .receipt-card { padding: 14px 16px; border-radius: 12px; }
#queue .page-note { line-height: 1.6; }
@media (max-width: 1100px) {
  #queue .queue-toolbar { gap: 0 14px; }
  #queue .queue-inline-search { width: 140px; min-width: 140px; }
}
@media (max-width: 1000px) {
  #queue #queue-list { border: 0; background: none; box-shadow: none; overflow: visible; }
  #queue #queue-list .queue-table,
  #queue #queue-list .queue-table tbody { display: block; width: 100%; }
  #queue #queue-list .queue-table thead { display: none; }
  #queue #queue-list .queue-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
  #queue #queue-list .queue-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px 14px; min-height: 0; padding: 14px; border: 1px solid #77494a26; border-top: 3px solid var(--platform-line); border-radius: 12px; background: linear-gradient(110deg, var(--platform-tint), transparent 75%), linear-gradient(140deg, #2a2429ed, #1b191ff5); box-shadow: 0 12px 28px #0004, 0 3px 6px #0003, inset 0 1px #ffc58b0b; }
  #queue #queue-list .queue-table td { border: 0; padding: 4px 0; min-width: 0; }
  #queue #queue-list .queue-table td:first-child { grid-column: 1 / -1; box-shadow: none; min-height: 68px; padding-bottom: 8px; }
  #queue #queue-list .queue-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 8px; letter-spacing: .5px; margin-bottom: 4px; }
  #queue #queue-list .queue-table td:last-child { text-align: right; align-self: end; }
  #queue #queue-list .queue-table tr:last-child { border-bottom: 1px solid #77494a26; }
  #queue #queue-list > .empty-state { border: 1px solid #77494a26; border-radius: 12px; background: linear-gradient(140deg, #2a2429ed, #1b191ff5); }
}
@media (max-width: 600px) {
  #queue .queue-toolbar { gap: 0 16px; }
  #queue .queue-inline-search { margin-left: 0; }
  #queue #queue-list .queue-table tbody { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  #queue #queue-status,
  #queue #queue-search,
  #queue #queue-refresh,
  #queue #queue-list .queue-table .text-button { min-height: 44px; }
}

/* Default medium tiles, retaining the exact existing record and action DOM. */
#queue #queue-list[data-collection-style="tiles"] { border: 0; background: none; box-shadow: none; overflow: visible; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table,
  #queue #queue-list[data-collection-style="tiles"] .queue-table tbody { display: block; width: 100%; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table thead { display: none; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px 14px; min-height: 0; padding: 14px; border: 1px solid #77494a26; border-top: 3px solid var(--platform-line); border-radius: 12px; background: linear-gradient(110deg, var(--platform-tint), transparent 75%), linear-gradient(140deg, #2a2429ed, #1b191ff5); box-shadow: 0 12px 28px #0004, 0 3px 6px #0003, inset 0 1px #ffc58b0b; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table td { border: 0; padding: 4px 0; min-width: 0; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table td:first-child { grid-column: 1 / -1; box-shadow: none; min-height: 68px; padding-bottom: 8px; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 8px; letter-spacing: .5px; margin-bottom: 4px; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table td:last-child { text-align: right; align-self: end; }
  #queue #queue-list[data-collection-style="tiles"] .queue-table tr:last-child { border-bottom: 1px solid #77494a26; }
  #queue #queue-list[data-collection-style="tiles"] > .empty-state { border: 1px solid #77494a26; border-radius: 12px; background: linear-gradient(140deg, #2a2429ed, #1b191ff5); }
#queue #queue-list[data-collection-style="tiles"] .queue-table tbody { grid-auto-rows: auto; align-items: start; }
#queue #queue-list[data-collection-style="tiles"] .queue-table tbody tr { height: auto; align-self: start; }
#queue #queue-list[data-collection-style="tiles"] .table-wrap { overflow: visible; }
#queue .action-arrow { width: 13px; height: 13px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
@media(max-width:1000px) { #queue #queue-list[data-collection-style="text"] .queue-table tbody tr { min-height: 0; } }

#queue .collection-style-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #baa38e;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}
#queue .collection-style-filter select {
  appearance: none;
  width: auto;
  min-width: 42px;
  max-width: 112px;
  min-height: 34px;
  padding: 7px 18px 7px 1px;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c7ac92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 14px;
  background-repeat: no-repeat;
  color: #e4d3c2;
  font: inherit;
  cursor: pointer;
}
#queue .collection-style-filter select option { background: #211c20; color: #eee1d3; }

#queue .collection-style-filter select { width: 54px; max-width: 54px; }
@media(pointer:coarse){ #queue .collection-style-filter select { min-height:44px; } }

/* Tile height follows its details, including narrow screens and long records. */
#queue #queue-list[data-collection-style="tiles"] .queue-table td:first-child { min-height: 0; padding-bottom: 4px; }

/* Campaigns collection review. No new data, filters, actions or permissions. */
#campaigns .campaigns-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 18px;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 0 0 9px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line-soft);
  scrollbar-width: thin;
  scrollbar-color: #b4885e66 transparent;
}
#campaigns .campaigns-toolbar > * { flex: 0 0 auto; }
#campaigns .campaigns-view-label { color: #e4d3c2; font-size: 11px; line-height: 34px; white-space: nowrap; }
#campaigns .campaigns-authority-actions { display: flex; align-items: center; margin-left: auto; }
#campaigns .campaigns-authority-actions:empty { display: none; }
#campaigns .campaigns-authority-actions:empty + .campaigns-compose { margin-left: auto; }
#campaigns .campaigns-toolbar :is(button, a) {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #e4d3c2;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
#campaigns .campaigns-toolbar :is(button, a):hover { color: #f0c393; }
#campaigns .campaigns-toolbar:focus-visible,
#campaigns .campaigns-toolbar :focus-visible { outline: 2px solid #d6a56a; outline-offset: -2px; }
#campaigns .collection-style-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #baa38e;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}
#campaigns .collection-style-filter select {
  appearance: none;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  min-height: 34px;
  padding: 7px 18px 7px 1px;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c7ac92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right center;
  background-size: 14px;
  background-repeat: no-repeat;
  color: #e4d3c2;
  font: inherit;
  cursor: pointer;
}
#campaigns .collection-style-filter select option { background: #211c20; color: #eee1d3; }
#campaigns #campaign-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
}
#campaigns #campaign-list .campaign-card {
  min-width: 0;
  min-height: 0;
  height: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
}
#campaigns #campaign-list .campaign-card > header {
  margin: -14px -14px 0;
  padding: 10px 14px;
  border-top: 3px solid #b98a5b7a;
  border-bottom: 1px solid #c99d7621;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(100deg, #b1845117, transparent 85%);
}
#campaigns .campaign-symbol { width: 25px; height: 25px; fill: none; stroke: #e6b68b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#campaigns #campaign-list .campaign-card h3 { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
#campaigns #campaign-list .campaign-card p { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#campaigns #campaign-list .campaign-card > small { color: #b7a18d; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
#campaigns #campaign-list .card-actions { min-width: 0; gap: 18px; padding-top: 2px; border-top: 1px solid var(--line-soft); }
#campaigns #campaign-list .card-actions button { min-height: 34px; padding: 6px 0; font-size: 11px; }
#campaigns #campaign-list:has(> .empty-state) { grid-template-columns: minmax(0, 1fr); }
#campaigns #campaign-list > .empty-state { padding: 28px 18px; border: 1px solid #77494a26; border-radius: 12px; background: linear-gradient(140deg, #2a2429ed, #1b191ff5); }
#campaigns .page-note { line-height: 1.6; }
#campaigns #campaign-list[data-collection-style="text"] { grid-template-columns: minmax(0, 1fr); }
#campaigns #campaign-list[data-collection-style="text"] .campaign-card { grid-template-columns: 84px minmax(0, 1fr) 142px; align-items: start; gap: 6px 16px; }
#campaigns #campaign-list[data-collection-style="text"] .campaign-card > header { grid-column: 1; grid-row: 1 / span 2; height: calc(100% + 28px); margin: -14px 0 -14px -14px; padding: 14px 10px; border-top: 0; border-bottom: 0; border-left: 3px solid #b98a5b7a; border-radius: 12px 0 0 12px; flex-direction: column; justify-content: flex-start; gap: 8px; }
#campaigns #campaign-list[data-collection-style="text"] .campaign-card h3 { grid-column: 2; grid-row: 1; }
#campaigns #campaign-list[data-collection-style="text"] .campaign-card p { grid-column: 2; grid-row: 2; }
#campaigns #campaign-list[data-collection-style="text"] .campaign-card > small { grid-column: 3; grid-row: 1; padding-top: 3px; }
#campaigns #campaign-list[data-collection-style="text"] .card-actions { grid-column: 3; grid-row: 2; border: 0; padding: 0; }
@media (max-width: 1000px) {
  #campaigns #campaign-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #campaigns #campaign-list { grid-template-columns: minmax(0, 1fr); }
  #campaigns .campaigns-toolbar { gap: 0 16px; }
  #campaigns #campaign-list[data-collection-style="text"] .campaign-card { grid-template-columns: 74px minmax(0, 1fr); gap: 6px 12px; }
  #campaigns #campaign-list[data-collection-style="text"] .campaign-card > header { grid-row: 1 / span 4; }
  #campaigns #campaign-list[data-collection-style="text"] .campaign-card > small { grid-column: 2; grid-row: 3; padding: 0; }
  #campaigns #campaign-list[data-collection-style="text"] .card-actions { grid-column: 2; grid-row: 4; }
}
@media (pointer: coarse) {
  #campaigns .campaigns-toolbar :is(button, a, select),
  #campaigns #campaign-list .card-actions button { min-height: 44px; }
  #campaigns .campaigns-view-label { line-height: 44px; }
}

/* Same compact Tiles height at every viewport; full information stays in Details. */
#campaigns #campaign-list[data-collection-style="tiles"] .campaign-card {
  box-sizing: border-box;
  height: 260px;
  min-height: 260px;
  max-height: 260px;
  grid-template-rows: 35px 42px minmax(0, 1fr) 15px 44px;
  gap: 8px;
}
#campaigns #campaign-list[data-collection-style="tiles"] .campaign-card h3,
#campaigns #campaign-list[data-collection-style="tiles"] .campaign-card > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
#campaigns #campaign-list[data-collection-style="tiles"] .campaign-card h3 { -webkit-line-clamp: 2; max-height: 42px; }
#campaigns #campaign-list[data-collection-style="tiles"] .campaign-card > p { -webkit-line-clamp: 3; max-height: 57.6px; }
#campaigns #campaign-list .card-actions { gap: 12px; flex-wrap: nowrap; align-items: center; }
#campaigns #campaign-list .card-actions button { min-height: 44px; white-space: nowrap; }
#campaigns #campaign-list .campaign-open { margin-right: auto; }
#campaigns #campaign-list[data-collection-style="text"] .campaign-card { grid-template-columns: 84px minmax(0, 1fr) 184px; }
#campaigns #campaign-dialog { max-height: calc(100dvh - 32px); }
#campaigns #campaign-dialog .dialog-head { align-items: flex-start; }
#campaigns #campaign-title { overflow-wrap: anywhere; font-size: 18px; line-height: 1.4; }
#campaigns #campaign-dialog .icon-button { flex: 0 0 44px; width: 44px; min-height: 44px; }
#campaigns .campaign-detail-copy { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
#campaigns #campaign-dialog .detail-list dd { overflow-wrap: anywhere; }
#campaigns #campaign-list :focus-visible { outline: 2px solid #d6a56a; outline-offset: 2px; }
@media (max-width: 700px) {
  #campaigns #campaign-list[data-collection-style="text"] .campaign-card { grid-template-columns: 74px minmax(0, 1fr); }
  #campaigns #campaign-list[data-collection-style="text"] .card-actions { flex-wrap: wrap; }
}

#campaigns .campaign-detail-name { margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }

/* Center the request and composition surfaces at a comfortable desktop width. */
#composer > .page-heading,
#composer > .composer-layout {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
#composer .composer-workbench { min-width: 0; overflow: hidden; }
#composer .composer-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 16px;
  gap: 20px;
}
#composer .composer-tabs [role="tab"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 17px 0 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
#composer .composer-tabs [aria-selected="true"] { color: #f4c38d; border-bottom-color: #eca44e; }
#composer .composer-tabs [role="tab"]:focus-visible { outline: 2px solid #eca44e; outline-offset: -4px; }
#composer .composer-workbench > .composer-form { margin: 0; border: 0; border-radius: 0; }
#composer .composer-workbench > #production-studio { width: 100%; margin: 0; padding: 20px; }
@media (max-width: 600px) {
  #composer .composer-tabs { padding-inline: 14px; gap: 14px; }
  #composer .composer-tabs [role="tab"] { font-size: 12px; }
  #composer .composer-workbench > #production-studio { padding: 14px; }
}

/* Compact, paired controls inside the shared composer workbench. */
#composer .composer-workbench { container: composer-workbench / inline-size; }
#composer .composer-media-sources { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
#composer .composer-media-sources #native-media-controls,
#composer .composer-media-sources .media-field { min-width: 0; margin: 0; border: 1px solid #a8815040; border-radius: 10px; padding: 12px; }
#composer .composer-media-sources .media-field { align-items: flex-start; padding-top: 20px; }
#composer .composer-media-sources .media-field label { min-width: 0; flex: 1; }
#composer .composer-metadata { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#composer .composer-metadata label { min-width: 0; }
#composer #production-connection { margin: 0 0 18px; padding: 10px 12px; border: 1px solid #a881502b; border-radius: 8px; background: #c4934b08; color: var(--muted); font-size: 12px; line-height: 1.5; }
#composer #production-form { gap: 18px; margin: 0; }
#composer .production-identity { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
#composer .production-brief { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
#composer #production-form label { min-width: 0; gap: 8px; font-size: 12px; }
#composer .production-prompt-field { display: flex; flex-direction: column; }
#composer #production-prompt { flex: 1; min-height: 180px; resize: vertical; line-height: 1.6; }
#composer .production-output { min-width: 0; margin: 0; padding: 12px; border: 1px solid #a8815038; border-radius: 10px; background: linear-gradient(135deg, #b78a4e0d, #15131850); }
#composer .production-output legend { padding: 0 6px; color: #d9ba97; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
#composer .production-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
#composer .production-format-field,
#composer .production-duration-field { grid-column: 1 / -1; }
#composer #production-form :is(input, select, textarea) { width: 100%; min-width: 0; }
#composer .production-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
#composer .production-form-footer p { margin: 0; max-width: 250px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#composer #production-studio button { margin: 0; width: auto; }
#composer .production-form-footer .primary-button { flex-shrink: 0; padding: 11px 18px; font-size: 12px; }
#composer #production-studio .production-video-option { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 22px; font-size: 12px; }
#composer #production-video { width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0; accent-color: #eca44e; }
#composer .production-video-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
#composer .production-requests-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#composer .production-requests-heading h3 { margin: 0; font-size: 13px; font-weight: 600; }
#composer .production-requests-heading button { padding: 7px 12px; font-size: 11px; }
#composer .production-request-tools { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
#composer .production-request-tools .text-button { min-height: 30px; padding: 4px 0; font-size: 11px; text-align: left; }
#composer #production-notice { font-size: 12px; line-height: 1.5; }
#composer #production-notice:empty { margin: 0; }
@container composer-workbench (max-width: 540px) {
  #composer .production-brief,
  #composer .composer-media-sources { grid-template-columns: 1fr; }
  #composer .composer-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #composer .composer-metadata > label:last-child { grid-column: 1 / -1; }
  #composer #production-prompt { min-height: 140px; }
}
@container composer-workbench (max-width: 350px) {
  #composer .production-identity,
  #composer .composer-metadata { grid-template-columns: 1fr; }
  #composer .production-form-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* A centered campaign workspace with a clear, comfortable creation flow. */
#campaigns > :is(.page-heading, .campaigns-toolbar, .campaign-grid, .page-note) { width: 100%; max-width: 1100px; margin-inline: auto; }
#campaigns .campaigns-toolbar { min-height: 68px; padding: 10px 16px; gap: 12px 18px; border: 1px solid #a8815038; border-radius: 12px; background: linear-gradient(135deg, #2a2429e8, #19171bef); }
#campaigns .campaigns-toolbar :is(button, a, select) { min-height: 40px; }
#campaigns #campaign-actions button { padding: 10px 14px; border: 1px solid #d59a5a66; border-radius: 8px; color: #f2c595; background: #b4773021; }
#campaigns #campaign-list > .empty-state { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px 24px; text-align: center; }
#campaigns #campaign-list > .empty-state p { max-width: 420px; line-height: 1.7; }
#campaigns > .page-note { margin-top: 18px; }
#authority-dialog:has(#campaign-name) { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 18px; }
#authority-dialog:has(#campaign-name) .dialog-head { padding: 22px 24px; }
#authority-dialog:has(#campaign-name) #authority-body { padding: 24px; }
#authority-dialog:has(#campaign-name) #authority-form { gap: 18px; }
#authority-dialog .campaign-create-intro { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
#authority-dialog .campaign-create-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
#authority-dialog .campaign-create-fields label { min-width: 0; }
#authority-dialog:has(#campaign-name) :is(input, textarea) { width: 100%; min-width: 0; padding: 12px; }
#authority-dialog:has(#campaign-name) input { min-height: 44px; }
#authority-dialog:has(#campaign-name) textarea { min-height: 140px; resize: vertical; }
#authority-dialog #campaign-slug-help { margin: -8px 0 0; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#authority-dialog .campaign-optional { color: var(--muted); font-size: 11px; font-weight: 400; }
#authority-dialog:has(#campaign-name) .dialog-actions { justify-content: flex-end; margin: 0; padding-top: 16px; border-top: 1px solid var(--line-soft); }
#authority-dialog:has(#campaign-name) .primary-button { min-height: 44px; padding-inline: 20px; }
#authority-dialog:has(#campaign-name) .form-error:empty { display: none; }
@media (max-width: 600px) {
  #campaigns .campaigns-toolbar { flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
  #campaigns #campaign-list > .empty-state { min-height: 280px; }
  #authority-dialog .campaign-create-fields { grid-template-columns: 1fr; }
  #authority-dialog:has(#campaign-name) #authority-body { padding: 18px; }
}