:root { --settings-surface: #fff; --settings-control: #f2f5fa; --settings-border: #e7edf5; --settings-subtle: #fafbfd; }
.settings-view { max-width: 1500px; padding: 27px 26px 0; }
.settings-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.settings-page-eyebrow { font-size: 10px; color: var(--quiet); letter-spacing: 1px; }
.settings-page-heading h1 { font-size: 25px; font-weight: 650; line-height: 1.4; margin-top: 3px; }
.settings-page-heading p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.settings-page-heading > button { color: var(--muted); }
.settings-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-secondary-grid { display: grid; grid-template-columns: 1.28fr 1fr 1fr; gap: 14px; margin-top: 14px; align-items: stretch; }
.settings-card { position: relative; min-width: 0; border: 1px solid var(--settings-border); background: var(--settings-surface); border-radius: 12px; padding: 17px 18px 12px; }
.settings-card-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; min-height: 47px; }
.settings-card-heading > .icon { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; }
.settings-card-heading h2 { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.settings-card-heading p { color: var(--muted); font-size: 10px; margin-top: 2px; line-height: 1.6; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 53px; border-top: 1px solid var(--settings-border); padding: 9px 0; margin: 0; font-weight: 400; }
.setting-copy { display: block; min-width: 0; text-align: left; }
.setting-copy strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--ink); }
.setting-copy small { display: block; font-size: 10px; line-height: 1.7; color: var(--muted); }
.settings-segments { display: flex; align-items: stretch; gap: 4px; flex: 0 0 auto; min-width: 0; border: 0; padding: 0; margin: 0; }
.settings-segments label { position: relative; display: flex; margin: 0; min-width: 60px; font-weight: 400; }
.settings-segments input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.settings-segments label > span { display: grid; place-items: center; width: 100%; min-height: 30px; padding: 5px 11px; border: 1px solid var(--settings-border); border-radius: 9px; font-size: 10px; line-height: 1.5; background: var(--settings-control); color: var(--muted); pointer-events: none; white-space: nowrap; }
.settings-segments input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 5px #00000008; }
.settings-segments input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.settings-view .theme-fieldset { margin: 0; }
.settings-view .theme-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.settings-view .theme-option { display: block; padding: 3px; border: 0; border-radius: 50%; margin: 0; }
.settings-view .theme-option:has(input:checked) { background: transparent; outline: 2px solid var(--accent); outline-offset: 0; }
.settings-view .theme-swatch { width: 22px; height: 22px; }
.theme-swatch-orange { --swatch-color: #bb5a0b; }
.settings-view .theme-option input:checked + .theme-swatch::after { display: none; }
:root[data-theme="orange"] { --accent: #bb5a0b; --theme-strong: #984508; }
.settings-view select { width: min(280px, 60%); min-width: 0; height: 33px; border-radius: 8px; background: var(--settings-control); border: 1px solid var(--settings-border); color: var(--ink); font: inherit; font-size: 10px; padding: 4px 9px; }
.settings-inline-note { font-size: 10px; line-height: 1.8; color: var(--quiet); margin-top: 8px; }
.setting-toggle-row { cursor: pointer; }
.setting-switch { flex-shrink: 0; position: relative; width: 33px; height: 19px; }
.setting-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; inset: 0; cursor: pointer; }
.setting-switch > span { display: block; height: 19px; width: 33px; border-radius: 20px; background: #c6ccd5; transition: background .16s; pointer-events: none; }
.setting-switch > span::before { content: ''; display: block; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; top: 3px; left: 3px; box-shadow: 0 1px 3px #0002; transition: transform .16s; }
.setting-switch input:checked + span { background: var(--accent); }
.setting-switch input:checked + span::before { transform: translateX(14px); }
.setting-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.setting-switch input:disabled { cursor: not-allowed; }
.setting-toggle-row:has(input:disabled) { cursor: default; opacity: .55; }
.settings-membership .settings-card-heading > .icon { color: #e7a427; fill: #e7a427; }
.settings-plan-summary { display: flex; align-items: center; gap: 14px; background: var(--settings-subtle); border: 1px solid var(--settings-border); border-radius: 10px; padding: 20px 15px; min-height: 119px; margin-top: 2px; }
.settings-plan-icon { display: grid; place-items: center; height: 45px; width: 45px; border-radius: 50%; color: #e7a427; background: #e7a4271c; flex-shrink: 0; }
.settings-plan-icon .icon { width: 25px; height: 25px; fill: #e7a427; }
.settings-plan-copy { min-width: 0; flex: 1; }
.settings-plan-copy > small { color: var(--quiet); font-size: 10px; }
.settings-plan-copy > h3 { font-size: 18px; margin: 3px 0; font-weight: 600; }
.settings-plan-copy > p { font-size: 10px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; }
.settings-plan-actions { display: grid; gap: 7px; width: 135px; padding-left: 14px; border-left: 1px solid var(--settings-border); }
.settings-plan-actions button { gap: 8px; width: 100%; min-height: 32px; padding: 5px 8px; border-radius: 7px; font-size: 11px; white-space: nowrap; }
.settings-plan-actions .icon { width: 14px; height: 14px; }
.settings-plan-benefits { display: flex; flex-wrap: wrap; gap: 6px 15px; align-items: center; margin-top: 13px; font-size: 10px; color: var(--muted); }
.settings-plan-benefits > span { display: flex; align-items: center; gap: 5px; }
.settings-plan-benefits .icon { width: 13px; height: 13px; }
.settings-plan-benefits button { margin-left: auto; padding: 0; color: var(--accent); font-size: 10px; }
.settings-account-note { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 10px; padding: 6px 0 10px; }
.settings-account-note > span { width: 6px; height: 6px; background: var(--quiet); border-radius: 50%; flex-shrink: 0; }
.settings-row-link { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 48px; border: 0; border-top: 1px solid var(--settings-border); background: transparent; padding: 8px 0; color: var(--ink); text-align: left; }
.settings-row-link:hover:enabled { background: var(--theme-faint); }
.settings-row-link > .setting-copy { flex: 1; }
.settings-row-link > .icon { color: var(--muted); width: 13px; height: 13px; }
.settings-row-value { margin-left: auto; font-size: 10px; color: var(--muted); white-space: nowrap; }
.settings-row-link:disabled { opacity: .55; cursor: not-allowed; }
.settings-version { position: absolute; top: 17px; right: 16px; font-size: 9px; color: var(--quiet); }
.settings-secondary-grid .settings-card:last-child .settings-card-heading { padding-right: 45px; }
.settings-secondary-grid .settings-card:first-child .settings-row-link { min-height: 41px; padding-block: 5px; }
.settings-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; padding: 15px 0 20px; background: var(--paper); border-top: 1px solid var(--settings-border); }
.settings-savebar > p { color: var(--muted); font-size: 11px; }
.settings-savebar > p.error { color: #db6b77; }
.settings-savebar > div { display: flex; gap: 10px; flex-shrink: 0; }
.settings-savebar button { min-width: 100px; min-height: 35px; border-radius: 8px; font-size: 12px; padding: 7px 18px; }
.settings-info-body { padding: 16px 0; font-size: 12px; line-height: 1.9; }
.settings-info-body section { margin-bottom: 17px; }
.settings-info-body h3 { font-size: 13px; margin-bottom: 6px; }
.settings-info-body p { color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 1001px) {
  .settings-view { padding-top: 21px; }
  .settings-page-heading { margin-bottom: 16px; }
  .settings-card { padding: 14px 16px 11px; }
  .settings-card-heading { min-height: 42px; padding-bottom: 10px; }
  .setting-row { min-height: 43px; padding-block: 5px; }
  .setting-copy strong { line-height: 1.45; }
  .setting-copy small { line-height: 1.45; }
  .settings-row-link { min-height: 41px; padding-block: 6px; }
  .settings-secondary-grid .settings-card:first-child .settings-row-link { min-height: 36px; padding-block: 4px; }
}

/* Dark mode applies to the whole workbench, including dialogs and stored results. */
:root[data-mode="dark"] { color-scheme: dark; --paper: #0d141e; --settings-surface: #151e29; --settings-control: #202b39; --settings-border: #263243; --settings-subtle: #1a2533; --ink: #e7edf7; --muted: #94a2b7; --quiet: #7e8da5; --line: #263243; --soft: #1b2736; --theme-soft: color-mix(in srgb, var(--accent) 16%, #151e29); --theme-faint: color-mix(in srgb, var(--accent) 3%, #101923); }
:root[data-mode="dark"] body, :root[data-mode="dark"] main { background: var(--paper); color: var(--ink); }
:root[data-mode="dark"] .sidebar, :root[data-mode="dark"] .studio-topbar { background: #101923; border-color: var(--line); }
:root[data-mode="dark"] .nav-item, :root[data-mode="dark"] .brand-wordmark, :root[data-mode="dark"] .top-account, :root[data-mode="dark"] .account-entry, :root[data-mode="dark"] .notification-button { color: var(--ink); }
:root[data-mode="dark"] .nav-item .icon { color: #9aabc8; }
:root[data-mode="dark"] .nav-item.active, :root[data-mode="dark"] .nav-item.active .icon { color: color-mix(in srgb, var(--accent) 65%, white); }
:root[data-mode="dark"] .studio-card, :root[data-mode="dark"] .card, :root[data-mode="dark"] .template-card, :root[data-mode="dark"] dialog, :root[data-mode="dark"] .legal-heading { background: var(--settings-surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
:root[data-mode="dark"] .brand-mark { border-radius: 8px; background: #fff; }
:root[data-mode="dark"] .brand-mark img { mix-blend-mode: normal; }
:root[data-mode="dark"] .studio-hero h1, :root[data-mode="dark"] .panel-heading h2, :root[data-mode="dark"] .recommendations-heading h2, :root[data-mode="dark"] .generation-options h3, :root[data-mode="dark"] .secondary-view .page-heading h1, :root[data-mode="dark"] .record-title, :root[data-mode="dark"] .notification-item h3, :root[data-mode="dark"] .template-card h2 { color: var(--ink); }
:root[data-mode="dark"] .hero-art { opacity: .1; }
:root[data-mode="dark"] .studio-hero .hero-copy > p { color: var(--muted); }
:root[data-mode="dark"] input, :root[data-mode="dark"] textarea, :root[data-mode="dark"] #jd-text, :root[data-mode="dark"] .greeting-text, :root[data-mode="dark"] #greeting-text { background: transparent; color: var(--ink); border-color: var(--line); }
:root[data-mode="dark"] input::placeholder, :root[data-mode="dark"] textarea::placeholder { color: var(--quiet); }
:root[data-mode="dark"] .jd-editor, :root[data-mode="dark"] .greeting-card, :root[data-mode="dark"] .recent-item, :root[data-mode="dark"] .highlight-item, :root[data-mode="dark"] .membership-status, :root[data-mode="dark"] .selected-template { background: var(--settings-subtle); border-color: var(--line); }
:root[data-mode="dark"] .highlight-item h3, :root[data-mode="dark"] .recent-item h3, :root[data-mode="dark"] .greeting-card-heading h3 { color: var(--ink); }
:root[data-mode="dark"] .greeting-card.recommended { border-color: var(--accent); }
:root[data-mode="dark"] .pill-options button, :root[data-mode="dark"] .greeting-actions button, :root[data-mode="dark"] .secondary-button, :root[data-mode="dark"] .add-keyword { background: var(--settings-control); border-color: var(--line); color: var(--ink); }
:root[data-mode="dark"] .pill-options button.selected { color: var(--ink); border-color: var(--accent); background: var(--theme-soft); box-shadow: none; }
:root[data-mode="dark"] .keyword-chip, :root[data-mode="dark"] .keyword-tip strong, :root[data-mode="dark"] .greeting-number, :root[data-mode="dark"] .greeting-actions .copy-action { color: color-mix(in srgb, var(--accent) 60%, white); }
:root[data-mode="dark"] .jd-counter { background: var(--settings-surface); }
:root[data-mode="dark"] .toast { background: #243145; border-color: var(--line); color: var(--ink); }
:root[data-mode="dark"] .plans-benefits, :root[data-mode="dark"] .plans-assurances, :root[data-mode="dark"] .plans-information, :root[data-mode="dark"] .plan-card { background: var(--settings-surface); border-color: var(--line); }
:root[data-mode="dark"] .plan-card.is-recommended { border-color: #b88a36; }
:root[data-mode="dark"] .plan-card .plan-feature-list li, :root[data-mode="dark"] .plan-card .plan-buy { color: var(--ink); }
:root[data-mode="dark"] .plan-card:not(.is-recommended) .plan-buy { background: var(--settings-control); }
:root[data-mode="dark"] .settings-segments input:checked + span { color: #fff; }
:root[data-mode="dark"] .upgrade-card { background: #362e20; }
:root[data-mode="dark"] .upgrade-title strong { color: #f6dfa4; }
:root[data-mode="dark"] .upgrade-card p { color: #bca97e; }
:root[data-density="comfortable"] .setting-row { min-height: 62px; }
:root[data-density="comfortable"] .settings-card { padding: 22px; }
:root[data-density="comfortable"] .nav-item { min-height: 50px; }
:root[data-density="compact"] .setting-row { min-height: 43px; padding-block: 6px; }
:root[data-density="compact"] .settings-card { padding: 13px 15px 10px; }
:root[data-density="compact"] .settings-row-link { min-height: 41px; padding-block: 5px; }
:root[data-density="compact"] .nav-item { min-height: 38px; }
@media (max-width: 1250px) { .settings-view { padding-inline: 19px; } .settings-segments label { min-width: 48px; } .settings-segments label > span { padding-inline: 8px; } .settings-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-secondary-grid .settings-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .settings-primary-grid { grid-template-columns: 1fr; } .settings-card { padding: 17px; } .settings-secondary-grid { grid-template-columns: 1fr; } .settings-secondary-grid .settings-card:last-child { grid-column: auto; } .settings-page-heading h1 { font-size: 23px; } }
@media (max-width: 600px) { .settings-view { padding: 18px 13px 0; } .settings-page-heading { align-items: flex-start; gap: 8px; } .settings-page-heading p { max-width: 240px; font-size: 11px; } .settings-page-heading > button { font-size: 10px; white-space: nowrap; } .settings-page-heading > button .icon { display: none; } .setting-row { gap: 9px; } .setting-copy small { max-width: 180px; font-size: 10px; } .settings-segments { gap: 3px; } .settings-segments label { min-width: 40px; } .settings-segments label > span { padding: 5px 6px; font-size: 10px; } .setting-row:has(input[name="default-tone"]) { flex-wrap: wrap; } .settings-plan-summary { gap: 9px; padding: 14px 10px; } .settings-plan-icon { height: 34px; width: 34px; } .settings-plan-copy > h3 { font-size: 16px; } .settings-plan-actions { width: 110px; padding-left: 10px; } .settings-savebar { flex-wrap: wrap; padding-bottom: 14px; } .settings-savebar > p { width: 100%; font-size: 10px; } .settings-savebar > div { margin-left: auto; } .settings-view select { max-width: 55%; } .settings-view .theme-colors { gap: 5px; } .settings-view .theme-swatch { width: 20px; height: 20px; } .setting-color-row { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .setting-switch > span, .setting-switch > span::before { transition: none; } }