/* Autumn studio: presentation only. Existing routes, authority and actions remain intact. */
:root {
  color-scheme: light;
  --bg: #f4eadc;
  --sidebar: #f9f2e8;
  --surface: #fffaf2;
  --surface-raised: #f5e5d2;
  --line: #ddcbb4;
  --line-soft: #e9dcca;
  --text: #30352e;
  --muted: #6c6052;
  --text-secondary: #6c6052;
  --blue: #a7471c;
  --blue-light: #964018;
  --green: #32614c;
  --red: #a3333d;
  --amber: #8d591b;
  --radius: 19px;
  --studio-shadow: 0 9px 25px #7254370a, 0 2px 4px #72543706, inset 0 1px 0 #fff9;
}
body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 85% 3%, #ffbc7930, transparent 48%),
    radial-gradient(ellipse at 6% 88%, #adbfab38, transparent 45%),
    linear-gradient(145deg, #f9f3e9, #f3e5d2 60%, #edf0e3);
}
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  background: conic-gradient(from 40deg, transparent 12%, #e6904960 20%, #ffcd9170 30%, transparent 41%, #94ac9550 60%, #c2d0ac60 69%, transparent 81%);
  mask-image: radial-gradient(circle, transparent 48%, #0009 49%, #000 51%, transparent 53%, transparent 56%, #0008 57%, transparent 59%);
  animation: studio-drift 65s linear infinite;
}
body::before { right: -30vmax; top: -42vmax; }
body::after { left: -30vmax; bottom: -55vmax; opacity: .65; animation-direction: reverse; }
@keyframes studio-drift { to { transform: rotate(360deg); } }
.sidebar {
  background: linear-gradient(165deg, #fff8eef5, #f3e8d7f5 65%, #e7eddef5);
  border-right-color: #d8c8b1;
  box-shadow: 5px 0 25px #6c4a2205;
}
.brand-name { color: #30372e; }
.brand-name em { color: #a7471c; }
.brand-product { color: #79613f; }
.brand { padding-bottom: 5px; }
.black-hole {
  width: 24px;
  height: 24px;
  overflow: hidden;
  vertical-align: -4px;
  background: #241d18;
  box-shadow: 0 0 9px #dc852a40, inset 0 0 5px #ffb86280;
}
.black-hole::before {
  inset: -3px;
  background: url("./assets/BH-yellow.webp") 65% 43% / auto 180% no-repeat;
  mask: none;
  animation: brand-art-spin 12s linear infinite;
}
.black-hole::after {
  inset: 0;
  border: 1px solid #bd842f;
  box-shadow: inset 0 0 3px #3c230770;
  transform: none;
}
@keyframes brand-art-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.workspace-switch {
  background: linear-gradient(135deg, #fffbf4, #f2e5d3);
  border-color: #d5c1a5;
  border-radius: 13px;
  box-shadow: var(--studio-shadow);
}
.workspace-avatar, .user-avatar {
  color: #704020;
  background: linear-gradient(140deg, #ffddb0, #efd0a7);
  border-color: #cfac7c;
}
.nav-label { color: #78664f; }
.nav a, .nav > button { color: #5e6356; border-radius: 10px; }
.nav a:hover, .nav > button:hover { color: #4e3927; background: #e8d8c24d; }
.nav a.active {
  color: #703510;
  background: linear-gradient(105deg, #ffd79f, #ffe8c5);
  border-color: #e5b178;
  box-shadow: inset 0 1px #fff8, 0 3px 10px #bc76320c;
}
.nav a.active::after { background: #ae4b19; box-shadow: 0 0 7px #c8773430; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #faf3e8e8;
  border-bottom-color: #dacbb6;
  backdrop-filter: blur(16px);
  box-shadow: 0 3px 15px #694a2005;
}
.breadcrumb b { color: #3b4436; font-weight: 650; }
.slash { color: #84705a; }
.primary-button {
  border-color: #e1873a;
  border-radius: 10px;
  background: linear-gradient(160deg, #ffb55e, #ff963d);
  color: #492408;
  font-weight: 750;
  box-shadow: 0 5px 13px #db7d2525, inset 0 1px #ffe4bc;
}
.primary-button:hover { background: linear-gradient(160deg, #ffbe74, #ffa04c); box-shadow: 0 7px 18px #ce792a35; }
.secondary-button {
  border-color: #cdb797;
  border-radius: 10px;
  background: #fff9efb3;
  color: #66503a;
  box-shadow: inset 0 1px #fff;
}
.secondary-button:hover { background: #f7e6cf; border-color: #b39571; }
.text-button { color: #a2451c; font-weight: 550; }
.text-button:hover { color: #703613; }
.skip-link { background: #ffce95; color: #472909; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #995024;
  outline-offset: 4px;
}
.notice {
  background: #f6efdfd9;
  border-color: #d6c1a0;
  border-radius: 12px;
  color: #71604c;
}
.notice b { color: #524432; }
.notice.error { background: #ffe9e5; border-color: #daa8a1; color: #8c3037; }
.section-topline, .eyebrow, .section-kicker { color: #765531; }
.section-kicker i { background: #be6425; box-shadow: 0 0 7px #d4884260; }
.hero {
  background: #fff0dc url("./assets/BH-yellow.webp") center 45% / cover no-repeat;
  border-color: #d8b995;
  border-radius: 24px;
  box-shadow: 0 15px 35px #8e5c2210, inset 0 1px #fff9;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #fff0dc 0%, #fff0dc 36%, #fff0dcf5 47%, #fff0dcba 55%, #fff0dc00 69%);
}
.hero-copy { background: linear-gradient(90deg, #fff0dc 80%, #fff0dc00); }
.hero h1 { color: #36402f; font-weight: 750; }
.hero h1 strong {
  font-weight: 750;
  background: linear-gradient(90deg, #b4491f, #a35d27 72%, #687049);
  background-clip: text;
}
.hero p { color: #695846; }
.hero-footnote { color: #635039; }
.hero-footnote span { color: #54734e; }
.cosmos-caption {
  color: #614824;
  background: #fff0dce8;
  border: 1px solid #e7c586;
  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 #4c2d2420;
}
.metric, .panel { box-shadow: var(--studio-shadow); }
.metric { background: linear-gradient(125deg, #fff5e5, #f5e5d0); border-color: #d8c4a9; border-radius: 15px; }
.metric:nth-child(2) { background: linear-gradient(130deg, #edf2e5, #e0e7d5); border-color: #c5ceb5; }
.metric:nth-child(3) { background: linear-gradient(130deg, #ffebd6, #f7d8b6); border-color: #e3c29d; }
.metric:nth-child(4) { background: linear-gradient(130deg, #f6f0db, #ece5c5); border-color: #d5cda8; }
.metric:nth-child(5) { background: linear-gradient(130deg, #f5e8df, #eadace); border-color: #d6bfaf; }
.metric > div { color: #675440; font-size: 11px; }
.metric b { color: #3b4333; font-weight: 750; }
.metric-dot { background: #ab683b; }
.metric small { color: #645340; font-size: 10px; }
.loading .metrics b { color: #9a805f; }
.panel { background: linear-gradient(135deg, #fffbf5, #faf0e3); border-color: #ddcbb4; }
.account-card { border-radius: 18px; background: linear-gradient(140deg, #fff7ed, #f7e6cf); }
.account-card:nth-child(3n + 2) { background: linear-gradient(140deg, #f4f6ec, #e4ebd8); border-color: #cbd3bb; }
.account-card:nth-child(3n) { background: linear-gradient(140deg, #fff2e3, #f7d9bf); border-color: #ddbea2; }
.feature-symbol, .empty-state .empty-icon, .section-title > span:first-child {
  background: linear-gradient(135deg, #ffddb0, #f4c68e);
  color: #773c18;
  border-color: #d1a777;
}
.empty-state h4 { color: #4d503f; }
.connect-inline { background: #f2e7d4; border-color: #c8ad86; color: #8b4d25; }
.connect-inline:hover { background: #eddab8; }
.provider-mark { background: #f5e6d1; border-color: #ceb999; color: #705136; }
.provider-mark.facebook, .provider-mark.linkedin, .provider-mark.linkedin-page { background: #e5ecdf; color: #3a614b; border-color: #bccbb2; }
.provider-mark.instagram, .provider-mark.instagram-standalone { background: #f7dfce; color: #945139; border-color: #dbbba4; }
.provider-mark.threads, .provider-mark.x { background: #e6e5d9; color: #41473a; border-color: #c1c3b1; }
.provider-mark.tiktok { background: #dcebe4; color: #34605b; border-color: #b2ccbe; }
.provider-mark.youtube, .provider-mark.pinterest { background: #f7ddda; color: #953c41; border-color: #dab4b0; }
.badge { color: #885326; background: #f8e4c9; border-color: #dabe97; border-radius: 6px; }
.badge.muted, .badge.cancelled, .badge.unknown, .badge.draft { color: #69614f; background: #ede6d8; border-color: #d0c4ae; }
.badge.connected, .badge.published { color: #2d6149; background: #dcebdc; border-color: #aac5ab; }
.badge.failed { color: #96353f; background: #fbe0df; border-color: #d9acac; }
.badge.awaiting-approval { color: #835117; background: #ffebbd; border-color: #d4bb86; }
.badge.publishing { color: #66517b; background: #ece4ef; border-color: #c7b5d1; }
.badge.scheduled, .badge.queued { color: #436252; background: #e4ecda; border-color: #b8c9a5; }
.workflow-strip { background: linear-gradient(120deg, #eee7d3, #e7ebd9); border-color: #cfc6a9; box-shadow: var(--studio-shadow); }
.workflow-icon { color: #9e5924; }
.workflow-strip li { color: #646044; }
.workflow-strip li span { color: #896c43; }
.page-footer, .page-footer i { color: #826a4c; }
.page-footer { border-color: #d7c6ab; }
.page-heading h2 { color: #3b4334; }
label, legend, .disclosure summary, .checkbox-label { color: #5d5343; }
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: #74614b; }
input, select, textarea, #authority-form input, #authority-form select,
#authority-form textarea, .one-time-secret {
  color: #37382f;
  background: #fffaf2;
  border-color: #cebb9e;
  border-radius: 9px;
}
input::placeholder, textarea::placeholder { color: #86745d; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #b86b31; box-shadow: 0 0 0 3px #d78b3f20; }
.destination { background: #fff4e5; border-color: #d8c4a7; }
.destination:has(input:checked) { border-color: #ce925b; background: #ffdfb4; }
.media-field { background: #f9eedb; border-color: #c6a573; }
.media-field > span { color: #a96428; }
.post-preview { background: #fffcf7; border-color: #d7c4a7; }
.preview-media { background: radial-gradient(ellipse at 60% 30%, #f0d7ad77, transparent), #eee8da; border-color: #c5af89; }
.preview-media > span { color: #8b6135; }
.preview-media small, .preview-reactions { color: #776349; }
#preview-copy, .content-card p, .post-cell b, .queue-table td { color: #4e4e3f; }
.intelligence-card, .future-panel { background: radial-gradient(ellipse at 0 0, #efd4af66, transparent 65%), linear-gradient(130deg, #fff8ed, #edf0df); }
.platform-chip { background: #f4ecd9; color: #675538; border-color: #d2c0a0; }
.queue-table th, .commercial-table th { color: #736044; background: #f4ead8; }
.queue-table tbody tr:hover { background: #f5e8d244; }
.receipt-card, .memory-result { background: #f5eedc; border-color: #cbb894; }
.receipt-card p, .memory-result p, .feature-list > div { color: #655841; }
.memory-result em, .lane-grid span, .feature-list > div > span { color: #985623; }
.lane-grid > div { border-color: #cab28f; }
.analytics-metric { background: #f6ebd6; }
.tabs button.active, .settings-nav button.active {
  color: #7e451a;
  border-color: #d3ac78;
  background: #ffe0b5;
}
.tabs button:hover, .settings-nav button:hover { color: #775335; background: #eedec5; }
.workspace-choice, #workspace-options .workspace-choice { color: #484834; background: #f7e9d0; border-color: #ccb391; }
.workspace-choice > span:last-child { color: #9a5d27; }
dialog {
  background: linear-gradient(135deg, #fffbf3, #f7ebd9);
  border-color: #cdb491;
  border-radius: 22px;
  box-shadow: 0 30px 100px #34271945, inset 0 1px #fff;
}
dialog::backdrop { background: #363a2f66; backdrop-filter: blur(9px); }
.dialog-head { background: linear-gradient(125deg, #f8e8d2, #efdfc4); border-color: #d5bea0; }
.provider-context { background: #f2e4cc; border-color: #ceba94; }
.provider-context > span { background: #e6cda4; color: #725025; }
.provider-grid button { background: #fff6e7; border-color: #d3c09f; border-radius: 12px; }
.provider-grid button:hover { background: #ffddb0; border-color: #c1945b; }
.provider-grid button > span { background: #f5d6a8; color: #7e4c22; border-color: #d5ad79; }
.provider-grid small { color: #766148; }
.provider-status { color: #945323; }
.approval-copy, .post-detail-copy { color: #56503f; background: #f8efd9; }
#help-articles details { background: #fff6e6; }
#help-articles summary { color: #4b4939; }
#help-articles p { color: #6e5d43; }
.toast { background: #394738; color: #fff6e7; border-color: #718064; box-shadow: 0 12px 40px #49351e30; }
.sidebar-scrim { background: #403a2b66; backdrop-filter: blur(3px); }
.skeleton { background: linear-gradient(90deg, #ebddc6, #f8efde, #ebddc6); background-size: 200% 100%; }
.code-data { color: #68573f; }
.create-card { color: #925121; }
.commercial-table th, .commercial-table td { border-color: #ddcbb4; }
.onboarding-step { color: #796446; }
.onboarding-step span { border-color: #c7b48e; background: #fff6e6; }
.onboarding-step.complete { color: #496744; }
.onboarding-step.complete span { background: #dfe8ce; border-color: #a8ba8a; }
@media (max-width: 600px) {
  .hero {
    border-radius: 20px;
    background-size: 100% auto;
    background-position: center bottom;
  }
  .hero::before { background: linear-gradient(180deg, #fff0dc 0%, #fff0dc 62%, #fff0dc00 76%); }
  .hero-copy { background: #fff0dc; }
  .cosmos { min-height: clamp(165px, 57vw, 215px); margin-top: 0; }
  .hero h1 { font-weight: 750; }
  .metric > div { font-size: 10px; }
  .metric small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}