/* Shared neutral gray / blue identity. Production controls and creative colors stay intact. */
.studio-page,
.modal {
  --paper: #f5f5f7;
  --white: #fff;
  --ink: #15151b;
  --muted: #777780;
  --line: #e4e4e9;
  --sidebar: #202127;
  --accent: #4159ed;
  --accent-hover: #3047d0;
  --accent-soft: #eef0ff;
  --soft: #f2f2f5;
  --red: #b64148;
  --green: #4159ed;
  --shadow: 0 8px 32px #15151b04;
  font-family: Onest, "Golos Text", "Segoe UI", sans-serif;
  color: var(--ink);
}
.studio-page { background: var(--paper); }
.studio-page button:focus-visible,
.studio-page a:focus-visible,
.studio-page summary:focus-visible,
.studio-page .tab-panel:focus-visible,
.modal button:focus-visible,
.modal a:focus-visible { outline-color: var(--accent); }
.studio-page input:focus-visible,
.studio-page textarea:focus-visible,
.studio-page select:focus-visible,
.modal input:focus-visible { outline-color: var(--accent); }

/* Navigation */
.studio-page .sidebar { background: var(--sidebar); color: #b5b5c0; }
.studio-page .brand,
.auth-art .brand { font-family: Onest, "Golos Text", sans-serif; color: #fff; }
.studio-page .brand-mark,
.auth-art .brand-mark {
  padding: 0;
  border-color: #696b7d;
  color: #c0c8ff;
  font-family: Onest, "Golos Text", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1px;
}
.studio-page .brand-dot,
.auth-art .brand-dot { color: #8999ff; }
.studio-page .sidebar-label { color: #898995; }
.studio-page .nav-item { color: #b3b3be; }
.studio-page .nav-item:hover { background: #ffffff08; color: #fff; }
.studio-page .nav-item.active { background: #4159ed29; color: #ced4ff; }
.studio-page .nav-plus { color: #abb7ff; }
.studio-page .nav-count { border-color: #ffffff20; color: #c0c2cf; }
.studio-page .note-orbit { color: #9aa7ff; }
.studio-page .sidebar-note p { color: #e2e2e8; }
.studio-page .sidebar-note > span:last-child { color: #9898a6; }
.studio-page .key-dot { background: #d7a568; }
.studio-page .key-dot.configured { background: #9aa7ff; }
.studio-page .avatar { background: #383d5a; color: #d5daff; }
.studio-page .user-copy strong { color: #e9e9f0; }
.studio-page .user-copy span,
.studio-page .logout { color: #9898a6; }
.studio-page .icon-button:hover,
.modal .icon-button:hover { background: #83839714; }

/* Workspace */
.studio-page .topbar { background: #fff; border-color: var(--line); }
.studio-page .breadcrumbs,
.studio-page .topbar-caption { color: #8a8a95; }
.studio-page .breadcrumbs strong { color: #50505d; }
.studio-page .breadcrumb-separator { color: #c1c1ca; }
.studio-page .topbar-caption i { background: var(--accent); }
.studio-page .mobile-settings { color: #707080; }
.studio-page .page-heading h1 {
  font-family: Onest, "Golos Text", sans-serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -1.1px;
  line-height: 1.3;
}
.studio-page .eyebrow,
.modal .eyebrow { color: #777784; letter-spacing: 1.3px; }
.studio-page .heading-dot { color: var(--accent); }
.studio-page .page-description { color: #777782; font-size: 12px; }
.studio-page .format-chip { border-color: var(--line); color: #60606d; }
.studio-page .format-chip > span:last-child { color: #90909b; border-color: var(--line); }
.studio-page .brief-panel { border-color: var(--line); box-shadow: var(--shadow); }
.studio-page .section-number,
.studio-page .panel-heading > span svg { color: #a3a3af; }
.studio-page .setup-notice { background: var(--accent-soft); border-color: #dce1ff; color: #5262a8; }
.studio-page .setup-notice .text-button { color: var(--accent); }

/* Forms */
.studio-page .kind-switch { background: var(--soft); }
.studio-page .kind-switch label > span { color: #858590; }
.studio-page .kind-switch input:checked + span { color: var(--accent); box-shadow: 0 1px 4px #15151b0b; }
.studio-page .kind-switch input:focus-visible + span,
.studio-page .variant-switch input:focus-visible + span,
.studio-page .color-choice input:focus-visible + span { outline-color: var(--accent); }
.studio-page .field label,
.studio-page .materials-heading h3,
.studio-page .variants-field legend,
.studio-page .color-field legend,
.modal .field label { color: #4d4d59; }
.studio-page .field label > span,
.studio-page .color-field legend > span { color: #8d8d99; }
.studio-page .field input,
.studio-page .field textarea,
.studio-page .field select,
.modal .field input { border-color: #dedee6; color: #383843; background-color: #fff; }
.studio-page .field select {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 5 3 3 3-3' fill='none' stroke='%23858595' stroke-width='1.4'/%3E%3C/svg%3E");
}
.studio-page .field input:hover,
.studio-page .field textarea:hover,
.studio-page .field select:hover,
.modal .field input:hover { border-color: #b6b8c8; }
.studio-page input::placeholder,
.studio-page textarea::placeholder,
.modal input::placeholder { color: #a0a0ad; }
.studio-page .input-with-icon > span { color: #aaaab6; }
.studio-page .more-fields summary,
.studio-page .materials-heading p,
.studio-page .optional-label,
.studio-page .form-hint { color: #888894; }
.studio-page .form-divider { background: var(--line); }
.studio-page .upload-zone { background: #fafafd; border-color: #cfd2e3; }
.studio-page .upload-zone:hover,
.studio-page .upload-zone.dragging { background: var(--accent-soft); border-color: #8997f6; }
.studio-page .upload-zone:focus-within { outline-color: var(--accent); }
.studio-page .upload-icon { background: var(--accent-soft); color: #6878df; }
.studio-page .upload-zone strong { color: #5b5c73; }
.studio-page .upload-zone small,
.studio-page .upload-plus { color: #9090a0; }
.studio-page .asset-item img { border-color: var(--line); }
.studio-page .asset-item button { background: var(--sidebar); }
.studio-page .variant-switch span { border-color: var(--line); color: #90909e; }
.studio-page .variant-switch input:checked + span { background: var(--accent-soft); border-color: #b6bfff; color: var(--accent); }
.studio-page .custom-color { border-color: #c3c5d2; color: #9093a6; }
.studio-page .custom-color.active { outline-color: var(--accent); }
.studio-page .color-value,
.studio-page .generation-note { color: #92929f; }
.studio-page .button-primary,
.modal .button-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px #4159ed15; }
.studio-page .button-primary:hover,
.modal .button-primary:hover { background: var(--accent-hover); }
.studio-page .button-secondary,
.modal .button-secondary { border-color: #dadce8; color: #606477; background: #fff; }
.studio-page .button-secondary:hover,
.modal .button-secondary:hover { background: var(--soft); }
.studio-page .generate-button svg,
.studio-page .button-arrow { color: #fff; }

/* Preview and saved creative states */
.studio-page .status-badge { border-color: #dddfe8; color: #8a8b9a; }
.studio-page .status-badge.running,
.studio-page .status-badge.queued { color: #9a7233; background: #fff8ea; border-color: #f1e2c7; }
.studio-page .status-badge.completed { color: #5468c9; background: var(--accent-soft); border-color: #dce1ff; }
.studio-page .status-badge.failed { color: #b64148; background: #fff0f1; border-color: #f3d7da; }
.studio-page .status-badge.needs_review,
.studio-page .status-badge.cancelled { color: #987944; background: #fff8ec; border-color: #eee1c9; }
.studio-page .result-tabs { border-color: var(--line); }
.studio-page .result-tab { color: #93939f; }
.studio-page .result-tab.active { color: var(--accent); }
.studio-page .result-tab.active:after { background: var(--accent); }
.studio-page .result-tab > span { background: var(--soft); color: #8f8f9d; }
.studio-page .canvas-toolbar,
.studio-page .canvas-footer { border-color: var(--line); color: #9393a0; }
.studio-page .toolbar-dot { background: #b6b7c6; }
.studio-page .canvas-area {
  background-color: #ededf2;
  background-image: radial-gradient(#c9cbd8 .65px, transparent .65px);
  border-color: #dddfe8;
}
.studio-page .art-orbit { border-color: #c4c8e1; }
.studio-page .art-card-back { background: #ced5fb; border-color: #b8c2f4; box-shadow: 0 5px 10px #4159ed18; }
.studio-page .art-card-front { background: #fff; border-color: #e1e3ef; box-shadow: 4px 7px 15px #15151b14; }
.studio-page .art-card-front > i { background: #8c9af2; }
.studio-page .art-card-front > b { background: #d1d7f1; }
.studio-page .art-card-front > em { background: #dfe4ff; }
.studio-page .art-card-front > span {
  font-family: Onest, "Golos Text", sans-serif;
  font-size: 41px;
  font-weight: 500;
  letter-spacing: -3px;
  font-style: normal;
  color: var(--accent);
}
.studio-page .art-spark { color: #7385ed; }
.studio-page .art-dot { background: #a9b4ef; box-shadow: 150px 32px 0 -2px #c8cce1; }
.studio-page .empty-kicker,
.studio-page .empty-format { color: #9698ab; }
.studio-page .canvas-empty h3 {
  font-family: Onest, "Golos Text", sans-serif;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.35;
  color: #55596f;
  letter-spacing: -.9px;
}
.studio-page .canvas-empty p { color: #9093a5; }
.studio-page .canvas-area > img { background: #ededf2; }
.studio-page .footer-asterisk { color: #b3bae3; }
.studio-page .studio-principles > div > span { color: #9b9dad; }
.studio-page .studio-principles p { color: #9394a2; }
.studio-page .studio-principles strong { color: #737688; }
.studio-page .variant-button { border-color: var(--line); color: #75798f; }
.studio-page .variant-button.active { border-color: #8a99f5; background: var(--accent-soft); }
.studio-page .output-review { border-color: #dfe3fa; background: #f5f6ff; }
.studio-page .output-review h3 { color: #6172bd; }
.studio-page .output-review p { color: #8a8da3; }
.studio-page .output-review.warning { border-color: #eee0c6; background: #fff9ef; }
.studio-page .output-review.warning h3,
.studio-page .output-review.warning ul { color: #9a7942; }
.studio-page .progress-heading { color: #8c8e9e; }
.studio-page .progress-heading strong { color: #666d8f; }
.studio-page .progress-track { background: #eff0f8; }
.studio-page .progress-track > span { background: var(--accent); }
.studio-page .stage-list li { color: #a1a3b3; }
.studio-page .stage-marker { background: #fafafe; border-color: #e2e4ee; }
.studio-page .stage-list li.done { color: #7281c7; }
.studio-page .stage-list li.done .stage-marker { background: #f0f2ff; border-color: #dce1fc; }
.studio-page .stage-list li.active { color: var(--accent); }
.studio-page .stage-list li.active .stage-marker { background: #e3e8ff; border-color: #aebafa; box-shadow: 0 0 0 3px #f0f2ff; }
.studio-page .job-warning { background: #fff8ed; border-color: #eee0c7; color: #987b4b; }
.studio-page .job-actions .text-button { color: #84889d; }

/* Facts, sources, usage, and history */
.studio-page .tab-empty,
.studio-page .tab-empty > span svg,
.studio-page .tab-empty p { color: #9699aa; }
.studio-page .tab-empty h3,
.studio-page .history-empty h2 { color: #666b82; }
.studio-page .fact-headline { color: #454a61; }
.studio-page .fact-description,
.studio-page .usage-intro { color: #8b8e9f; }
.studio-page .fact-label { color: #9d9faf; }
.studio-page .fact-value { color: #646b83; }
.studio-page .feature-list li { color: #7b8198; border-color: var(--line); }
.studio-page .feature-list blockquote { color: #979bad; border-color: #e1e4f0; }
.studio-page .source-attribution,
.studio-page .source-card a { color: #7885bf; }
.studio-page .source-card { border-color: var(--line); }
.studio-page .source-card img { background: var(--soft); }
.studio-page .source-card h3 { color: #70758b; }
.studio-page .source-card p { color: #989cad; }
.studio-page .source-role { background: var(--accent-soft); color: #7885bf; }
.studio-page .usage-entry { border-color: var(--line); }
.studio-page .usage-entry strong { color: #6f7794; }
.studio-page .usage-entry-head span { color: #979db4; background: #f4f5fa; }
.studio-page .usage-entry p { color: #979bad; }
.studio-page .usage-entry time { color: #a4a7b6; }
.studio-page .page-footer { color: #a0a1ad; border-color: var(--line); }
.studio-page .history-card { border-color: var(--line); }
.studio-page .history-card:hover { border-color: #b3bdf5; box-shadow: 0 8px 24px #4159ed0c; }
.studio-page .history-preview { background: #ededf3; color: #bec3dd; }
.studio-page .history-card h3 { color: #5c647f; }
.studio-page .history-card time { color: #a0a4b5; }
.studio-page .history-empty { border-color: #d6dae9; color: #969bad; }

/* Account and settings dialogs also open above the public landing page. */
.modal { background: #fff; border-color: var(--line); box-shadow: 0 25px 100px #15151b35; }
.modal::backdrop { background: #181920cc; }
.modal-heading .icon-button { color: #9294a5; }
.modal-intro,
.settings-note,
.confirm-modal > p { color: #858a9f; }
.settings-note { background: #f3f4f8; }
.modal .field small { color: #989daf; }
.key-status { color: #9c804f; background: #fff8eb; border-color: #eee1c9; }
.key-status.configured { color: #6478c6; background: var(--accent-soft); border-color: #dce2fd; }
.modal-message { color: #5c71bb; background: var(--accent-soft); }
.modal-message.error { color: #b64148; background: #fff0f1; }
.auth-modal { background: #fff; }
.auth-art { background: #23252f; color: #c4cae3; }
.auth-art .eyebrow { color: #9ba6ce; }
.auth-art h2 {
  font-family: Onest, "Golos Text", sans-serif;
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -1.6px;
  line-height: 1.2;
  color: #f4f5fc;
}
.auth-art h2 em { font-family: inherit; font-size: inherit; letter-spacing: inherit; font-style: normal; color: #9faeff; }
.auth-art > div > p:last-child { color: #a4abc6; }
.auth-art .auth-asterisk { color: #90a0f8; }
.auth-art-footer { color: #919bbd; }
.auth-content { position: relative; }
.auth-close { position: absolute; top: 13px; right: 13px; color: #969aad; }
.auth-content h2 {
  font-family: Onest, "Golos Text", sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.8px;
  line-height: 1.4;
}
.auth-content > p:not(.eyebrow):not(.auth-footnote) { color: #898fa6; }
.auth-tabs { background: #fff; border-color: var(--line); }
.auth-tabs button { color: #9a9eb0; }
.auth-tabs button.active { color: var(--accent); }
.auth-tabs button.active:after { background: var(--accent); }
.auth-footnote,
.settings-logout { color: #9b9fb1; }
.toast { background: #292e45; color: #e9edff; border-color: #6373b0; box-shadow: 0 5px 25px #15151b20; }
.toast.error { background: #fff1f2; color: #aa4b53; border-color: #edcdd1; }
.connection-message { color: #987a4b; }
.fact-note { color: #9b804b; background: #fff9ed; }

@media (min-width: 1500px) {
  .studio-page .page-heading h1 { font-size: 34px; }
  .studio-page .canvas-empty h3 { font-size: 35px; }
}
@media (max-width: 1150px) {
  .studio-page .page-heading h1 { font-size: 26px; }
  .studio-page .canvas-empty h3 { font-size: 27px; }
}
@media (max-width: 940px) {
  .studio-page .canvas-empty h3 { font-size: 24px; }
}
@media (max-width: 750px) {
  .studio-page .page-heading h1 { font-size: 27px; }
  .studio-page .canvas-empty h3 { font-size: 31px; }
  .auth-content h2 { font-size: 27px; }
}
@media (max-width: 400px) {
  .studio-page .page-heading h1 { font-size: 25px; }
  .studio-page .canvas-empty h3 { font-size: 28px; }
}