/* Theme layer: accents are supplied by appearance.js; account data is untouched. */
:root {
  --ui-accent: #f58220;
  --ui-accent-hover: #dc6d12;
  --ui-accent-soft: #fff1e4;
  --ui-accent-soft-2: #fff8f0;
  --ui-accent-border: #efc9a8;
  --ui-accent-ink: #9b4707;
  --ui-on-accent: #30200d;
  --ui-focus: #f5822045;
  --ui-chart-accent: #e57518;
  --ui-text: #292b31;
  --ui-muted: #696d78;
  --ui-subtle: #858995;
  --ui-border: #e5e7eb;
  --ui-bg: #f7f8fa;
  --ui-surface: #fff;
  --ui-surface-soft: #fafbfc;
  --ui-surface-raised: #fff;
  --ui-shadow: 0 5px 20px #17223605, 0 1px 3px #17223603;
  --ui-shadow-raised: 0 18px 65px #17223622;
  --ui-overlay: #18202d60;
  --ui-success-bg: #edf9f3;
  --ui-success-border: #b9dfcc;
  --ui-success-text: #176448;
  --ui-warning-bg: #fff9e9;
  --ui-warning-border: #ead7a9;
  --ui-warning-text: #80601d;
  --ui-danger-bg: #fff1f3;
  --ui-danger-border: #efc1cb;
  --ui-danger-text: #a92f4c;
  --ui-highlight: var(--ui-accent-ink);
  --ui-tint: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface));
  --ui-tint-strong: color-mix(in srgb, var(--ui-accent) 15%, var(--ui-surface));
  --accent: var(--ui-accent);
  --accent-dark: var(--ui-highlight);
  --accent-soft: var(--ui-tint);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border);
  --canvas: var(--ui-bg);
  --white: var(--ui-surface);
  --blue: var(--ui-accent);
  --blue-soft: var(--ui-tint);
  --red: var(--ui-danger-text);
  --red-soft: var(--ui-danger-bg);
  --green: var(--ui-success-text);
  --green-soft: var(--ui-success-bg);
  --shadow: var(--ui-shadow);
  --radius: 17px;
  color-scheme: light;
}
:root[data-appearance="dark"] {
  --ui-text: #f1f1f3;
  --ui-muted: #b8bac2;
  --ui-subtle: #9296a2;
  --ui-border: #34373f;
  --ui-bg: #111215;
  --ui-surface: #1b1c20;
  --ui-surface-soft: #22242a;
  --ui-surface-raised: #272a31;
  --ui-shadow: 0 5px 20px #00000016, 0 1px 3px #00000012;
  --ui-shadow-raised: 0 20px 80px #00000080;
  --ui-overlay: #0000009c;
  --ui-success-bg: #173229;
  --ui-success-border: #285542;
  --ui-success-text: #ace1c7;
  --ui-warning-bg: #342d1d;
  --ui-warning-border: #67532d;
  --ui-warning-text: #f1d8a0;
  --ui-danger-bg: #371e27;
  --ui-danger-border: #713447;
  --ui-danger-text: #ffb9cb;
  --ui-highlight: color-mix(in srgb, var(--ui-accent) 35%, #fff);
  color-scheme: dark;
}
body {
  background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--ui-accent) 7%, transparent), transparent 42%), var(--ui-bg);
  color: var(--ui-text);
}
button, input, select, textarea { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
.sidebar {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
  border-top-color: var(--ui-accent);
  box-shadow: -4px 0 20px #00000003;
}
.brand { gap: 12px; }
.brand strong, .workspace-card strong { color: var(--ui-text); }
.brand small, .workspace-card small, .sidebar .nav-empty { color: var(--ui-muted); }
.brand-symbol {
  color: var(--ui-accent);
  filter: none;
  background: var(--ui-tint);
  border-radius: 14px;
}
.brand-symbol svg { width: 37px; height: 37px; }
.workspace-card {
  background: linear-gradient(125deg, var(--ui-tint), var(--ui-surface));
  border-color: var(--ui-accent-border);
  border-radius: 13px;
  box-shadow: none;
}
.workspace-icon { background: var(--ui-accent); color: var(--ui-on-accent); box-shadow: none; }
.workspace-dot { background: #22af7b; box-shadow: 0 0 0 4px #22af7b12; }
.nav-search { background: var(--ui-surface-soft); border-color: var(--ui-border); color: var(--ui-muted); }
.nav-search input { color: var(--ui-text); }
.nav-search input::placeholder { color: var(--ui-muted); }
.nav-search kbd { color: var(--ui-muted); background: var(--ui-surface); border-color: var(--ui-border); }
.sidebar nav { scrollbar-color: var(--ui-border) transparent; }
.sidebar .nav-group-title, .sidebar .nav-group[open] > .nav-group-title { color: var(--ui-muted); }
.sidebar .nav-group-title svg, .sidebar .nav-group[open] > .nav-group-title svg { color: var(--ui-subtle); }
.sidebar .nav-group-title:hover { background: var(--ui-surface-soft); color: var(--ui-text); }
.sidebar .nav-link { color: var(--ui-muted); border-radius: 11px; }
.sidebar .nav-link svg { color: var(--ui-subtle); }
.sidebar .nav-link:hover { background: var(--ui-tint); color: var(--ui-text); }
.sidebar .nav-link.active, .sidebar .nav-link.active:hover {
  background: linear-gradient(105deg, var(--ui-tint-strong), var(--ui-tint));
  color: var(--ui-highlight);
  border-inline-start-color: var(--ui-accent);
  box-shadow: none;
}
.sidebar .nav-link.active svg { color: var(--ui-highlight); }
.sidebar-footer { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }
.preview-indicator { background: var(--ui-accent); }
.topbar { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: 0 2px 12px #00000002; }
.breadcrumb, .breadcrumb svg { color: var(--ui-subtle); }
.breadcrumb span:last-child { color: var(--ui-text); }
.icon-button { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-muted); }
.icon-button:hover { background: var(--ui-tint); border-color: var(--ui-accent-border); color: var(--ui-highlight); }
.avatar { background: var(--ui-tint); color: var(--ui-highlight); border-color: var(--ui-accent-border); }
.topbar-divider { background: var(--ui-border); }
.design-badge { background: var(--ui-tint); border-color: var(--ui-accent-border); color: var(--ui-highlight); }
.topbar .topbar-end > .appearance-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--ui-highlight);
  border-color: var(--ui-accent-border);
  background: var(--ui-tint);
  min-width: 46px;
  min-height: 46px;
  width: auto;
  gap: 8px;
  padding-inline: 13px;
  white-space: nowrap;
}
.appearance-trigger-label { font-size: 15px; line-height: 1.5; font-weight: 600; }
.appearance-trigger::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent); top: 6px; left: 6px; box-shadow: 0 0 0 2px var(--ui-surface); }
.page-heading h1, .hero-copy h1, .hero-copy h2 { color: var(--ui-text); }
.eyebrow, .hero-kicker { color: var(--ui-highlight); }
.eyebrow::before { background: var(--ui-accent); }
.page-heading p, .hero-copy p { color: var(--ui-muted); }
.hero-copy { position: relative; }
.dashboard-hero { padding: 3px 0 5px; }
.button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
.button-primary, .hero-actions .button-primary {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ui-accent) 16%, transparent);
  font-weight: 700;
}
.button-primary:hover, .hero-actions .button-primary:hover {
  background: var(--ui-accent-hover);
  color: var(--ui-on-accent);
  border-color: var(--ui-accent-hover);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 21%, transparent);
}
.button-secondary, .hero-actions .button-secondary { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); box-shadow: none; }
.button-secondary:hover, .hero-actions .button-secondary:hover { background: var(--ui-tint); color: var(--ui-highlight); border-color: var(--ui-accent-border); }
.button-quiet { color: var(--ui-highlight); }
.button-quiet:hover { background: var(--ui-tint); }
.button-soft { background: var(--ui-tint); color: var(--ui-highlight); }
.card { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 17px; box-shadow: var(--ui-shadow); }
.metric-card, .metric-card:nth-child(2), .metric-card:nth-child(3) { background: linear-gradient(130deg, var(--ui-surface), var(--ui-tint)); border-color: var(--ui-border); }
.metric-top, .metric-bottom, .metric-value small { color: var(--ui-muted); }
.metric-value { color: var(--ui-text); }
.metric-trend { color: var(--ui-success-text); }
.segmented { border-color: var(--ui-border); background: var(--ui-surface-soft); }
.segmented button { color: var(--ui-muted); }
.segmented button.active { background: var(--ui-accent); color: var(--ui-on-accent); }
.card-header p, .table-subtitle, .recent-row small { color: var(--ui-muted); }
.sample-label { background: var(--ui-surface-soft); border-color: var(--ui-border); color: var(--ui-muted); }
.chart-card { background: var(--ui-surface); border-color: var(--ui-border); }
.chart-card .card-header h2 { display: flex; align-items: center; gap: 10px; }
.chart-card .card-header h2::before { content: ''; width: 4px; height: 20px; border-radius: 4px; background: var(--ui-accent); }
.chart-legend { color: var(--ui-muted); }
.chart-legend span:first-child i { background: var(--ui-chart-accent); }
.activity-chart text { fill: var(--ui-muted) !important; }
.activity-chart line { stroke: var(--ui-border); }
.activity-chart rect[fill="#e57518"] { fill: var(--ui-chart-accent); }
.recent-symbol { background: var(--ui-tint); color: var(--ui-highlight); }
.recent-row { border-color: var(--ui-border); }
.recent-row strong { color: var(--ui-text); }
.balance-card { background: linear-gradient(135deg, var(--ui-surface), var(--ui-tint)); border-color: var(--ui-border); }
.balance-value, .balance-value small { color: var(--ui-text); }
.page-footer { color: var(--ui-subtle); border-color: var(--ui-border); }
.page-footer span + span, .sample-caption { color: var(--ui-muted); }
.overview-item p { color: var(--ui-muted); }
.overview-item strong { color: var(--ui-text); }
.overview-item .section-symbol { background: var(--ui-tint); color: var(--ui-highlight); }
.automation-flow { background: var(--ui-tint); border-color: var(--ui-border); }
.flow-node, .flow-arrow { color: var(--ui-muted); }
.flow-node > span { background: var(--ui-surface); color: var(--ui-highlight); border-color: var(--ui-accent-border); }
.form-card-header {
  background: linear-gradient(110deg, var(--ui-tint), var(--ui-surface));
  border-color: var(--ui-border);
  border-radius: 17px 17px 0 0;
}
.form-card-header p { color: var(--ui-muted); }
.section-symbol { background: var(--ui-tint-strong); color: var(--ui-highlight); border-radius: 13px; }
.step-indicator { background: var(--ui-surface); border-color: var(--ui-border); }
.step { color: var(--ui-subtle); }
.step span { background: var(--ui-surface-soft); color: var(--ui-muted); }
.step.active { color: var(--ui-highlight); }
.step.active span { background: var(--ui-accent); color: var(--ui-on-accent); }
.field > label, .field-label { color: var(--ui-text); }
.required { color: var(--ui-highlight); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
.table-search input, .filter-select,
#connection-dialog input:not([type=checkbox]):not([type=radio]), #connection-dialog select,
.live-recipient-modes select, select.live-recipient-modes {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  border-radius: 11px;
  font-size: 16px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ui-accent-border); }
.field input:focus, .field select:focus, .field textarea:focus,
#connection-dialog .field input:focus, #connection-dialog input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-focus);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ui-subtle); }
.field .field-hint, .message-meta { color: var(--ui-muted); }
.message-meta strong { color: var(--ui-highlight); }
.field-error { color: var(--ui-danger-text); }
.field [aria-invalid=true] { color: var(--ui-text); background: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; }
.form-actions { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 0 0 17px 17px; }
.form-actions small { color: var(--ui-muted); }
.schedule-panel { background: var(--ui-surface); border-color: var(--ui-border); }
.schedule-toggle { color: var(--ui-text); }
.schedule-toggle svg { color: var(--ui-highlight); }
.switch span { background: var(--ui-border); }
.switch input:checked + span { background: var(--ui-accent); }
.switch input:focus-visible + span { outline-color: var(--ui-focus); }
.side-card h3 svg { color: var(--ui-highlight); }
.context-card, .profile-summary { background: var(--ui-surface); border-color: var(--ui-border); }
.context-card p, .tip-list li { color: var(--ui-muted); }
.tip-list li::before { background: var(--ui-accent); }
.context-card .context-icon { background: var(--ui-tint); color: var(--ui-highlight); }
.phone-preview { background: var(--ui-surface-soft); border-color: var(--ui-border); }
.phone-top, .phone-time, .preview-stats { color: var(--ui-muted); }
.phone-top::before { background: var(--ui-accent); }
.message-bubble { background: var(--ui-tint-strong); color: var(--ui-text); border-color: var(--ui-accent-border); }
.preview-stats b { color: var(--ui-highlight); }
.table-toolbar, .table-footer { background: var(--ui-surface); border-color: var(--ui-border); }
.table-search svg, .table-count, .table-footer { color: var(--ui-muted); }
.table-scroll, .live-table-scroll { scrollbar-color: var(--ui-border) var(--ui-surface-soft); }
.data-table { color: var(--ui-text); }
.data-table thead { background: var(--ui-surface-soft); color: var(--ui-muted); }
.data-table th { border-color: var(--ui-border); }
.data-table td, .data-table td:first-child { color: var(--ui-text); border-color: var(--ui-border); }
.data-table tbody tr:nth-child(even) { background: var(--ui-surface); }
.data-table tbody tr:hover { background: var(--ui-tint); }
.data-table td .row-detail { background: var(--ui-tint); color: var(--ui-highlight); }
.empty-state { background: none; }
.empty-state .empty-icon { background: var(--ui-tint); border-color: var(--ui-accent-border); color: var(--ui-highlight); }
.summary-list dt { color: var(--ui-muted); }
.summary-list dd { color: var(--ui-text); }
.check-field { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }
.check-field input { accent-color: var(--ui-accent); }
.file-field { background: var(--ui-surface-soft) !important; border-color: var(--ui-accent-border) !important; }
.resource-preview { background: var(--ui-tint); border-color: var(--ui-accent-border); }
.resource-preview strong { color: var(--ui-text); }
.resource-preview small { color: var(--ui-muted); }
.help-hero, .catalog-card, .catalog-card.featured, .unavailable-card { background: var(--ui-surface); border-color: var(--ui-border); }
.help-hero .section-symbol { background: var(--ui-tint); color: var(--ui-highlight); }
.help-hero p, .help-article p, .help-article ol { color: var(--ui-muted); }
.help-links a { color: var(--ui-highlight); }
.help-links a:hover { background: var(--ui-tint); color: var(--ui-highlight); }
.faq-item summary { color: var(--ui-text); }
.faq-item p { color: var(--ui-muted); }
.route-reference { color: var(--ui-muted); }
.route-reference code { color: var(--ui-text); background: var(--ui-surface-soft); }
.featured-label { background: var(--ui-tint); color: var(--ui-highlight); }
.catalog-price { color: var(--ui-highlight); }
.amount-chip { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
.amount-chip:hover, .amount-chip.active { color: var(--ui-highlight); background: var(--ui-tint); border-color: var(--ui-accent-border); }
.billing-summary { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); }
.billing-summary h3, .billing-summary .balance-value, .billing-summary .summary-list dd { color: var(--ui-text); }
.billing-summary p, .billing-summary .balance-value small, .billing-summary .summary-list dt { color: var(--ui-muted); }
.billing-summary .sample-label { background: var(--ui-tint); color: var(--ui-highlight); border-color: var(--ui-accent-border); }
.billing-summary .summary-list, .billing-summary .summary-list > div { border-color: var(--ui-border); }
.overlay, #connection-overlay, .sidebar-scrim { background: var(--ui-overlay); }
.dialog, #connection-dialog { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-raised); }
.dialog-heading, .dialog-footer { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.dialog-heading p { color: var(--ui-muted); }
.review-message { color: var(--ui-text); background: var(--ui-surface-soft); border-color: var(--ui-border); }
.review-note, .notice { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning-text); }
.notice svg { color: var(--ui-warning-text); }
.form-feedback { background: var(--ui-danger-bg); color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
.pill { color: var(--ui-muted); background: var(--ui-surface-soft); border-color: var(--ui-border); }
.pill.green, .live-badge, .live-state { color: var(--ui-success-text); background: var(--ui-success-bg); border-color: var(--ui-success-border); }
.pill.red, .live-error, .live-state.error, .live-state[data-state="error"] { color: var(--ui-danger-text); background: var(--ui-danger-bg); border-color: var(--ui-danger-border); }
.pill.orange, .live-warning, .live-state.pending, .live-state[data-state="pending"] { color: var(--ui-warning-text); background: var(--ui-warning-bg); border-color: var(--ui-warning-border); }
.pill.blue { color: var(--ui-highlight); background: var(--ui-tint); border-color: var(--ui-accent-border); }
.connection-bar { background: linear-gradient(110deg, var(--ui-tint), var(--ui-surface)); border-color: var(--ui-accent-border); border-inline-start-color: var(--ui-accent); box-shadow: var(--ui-shadow); }
.connection-bar:not([data-state="connected"]):not([data-state="error"]),
.connection-bar:not([data-state="connected"]):not([data-state="error"]) .connection-status p { color: var(--ui-muted); }
.connection-bar .connection-status strong { color: var(--ui-text); }
.connection-bar .connection-status-dot { background: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-tint-strong); border-color: var(--ui-surface); }
.connection-actions button:not(.button) { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
.connection-bar[data-state="connected"], .connection-bar.is-connected { color: var(--ui-success-text); background: var(--ui-success-bg); border-color: var(--ui-success-border); border-inline-start-color: var(--ui-success-text); }
.connection-bar[data-state="connected"] .connection-status p, .connection-bar[data-state="connected"] .connection-status small, .connection-bar.is-connected .connection-status p, .connection-bar.is-connected .connection-status small { color: var(--ui-success-text); }
.connection-bar[data-state="connected"] .connection-status-dot, .connection-bar.is-connected .connection-status-dot { background: var(--ui-success-text); box-shadow: 0 0 0 4px var(--ui-success-bg); }
.connection-bar[data-state="connecting"], .connection-bar.is-connecting { color: var(--ui-highlight); background: var(--ui-tint); border-color: var(--ui-accent-border); border-inline-start-color: var(--ui-accent); }
.connection-bar[data-state="connecting"] .connection-status-dot, .connection-bar.is-connecting .connection-status-dot { background: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-tint-strong); }
.connection-bar[data-state="error"], .connection-bar.has-error { color: var(--ui-danger-text); background: var(--ui-danger-bg); border-color: var(--ui-danger-border); border-inline-start-color: var(--ui-danger-text); }
.connection-bar[data-state="error"] .connection-status p, .connection-bar[data-state="error"] .connection-status small, .connection-bar.has-error .connection-status p, .connection-bar.has-error .connection-status small { color: var(--ui-danger-text); }
.connection-bar[data-state="error"] .connection-status-dot, .connection-bar.has-error .connection-status-dot { background: var(--ui-danger-text); box-shadow: 0 0 0 4px var(--ui-danger-bg); }
.live-empty { background: var(--ui-surface-soft); border-color: var(--ui-border); color: var(--ui-muted); }
.live-empty h2, .live-empty h3 { color: var(--ui-text); }
.live-group-list { scrollbar-color: var(--ui-border) var(--ui-surface-soft); }
.live-group-list label { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
.live-group-list label:has(input:checked) { color: var(--ui-highlight); background: var(--ui-tint); border-color: var(--ui-accent-border); }
.live-group-list input[type=checkbox] { accent-color: var(--ui-accent); }
.live-group-list small { color: var(--ui-muted); }
.live-review-summary { color: var(--ui-text); background: var(--ui-surface-soft); border-color: var(--ui-border); }
.live-review-summary dt { color: var(--ui-muted); }
.live-review-summary dd { color: var(--ui-text); }
.live-review-summary pre, .live-review-summary .review-message { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.live-account-card, .live-account-card:nth-child(3n+2), .live-account-card:nth-child(3n+3) { color: var(--ui-text); background: linear-gradient(130deg, var(--ui-surface), var(--ui-tint)); border-color: var(--ui-border); box-shadow: var(--ui-shadow); }
.live-account-card h2, .live-account-card h3, .live-account-card > strong, .live-account-card .live-value { color: var(--ui-text); }
.live-account-card small { color: var(--ui-muted); }
.toast { color: var(--ui-on-accent); background: var(--ui-accent); }

/* Color studio drawer. */
.appearance-overlay { position: fixed; inset: 0; z-index: 240; background: var(--ui-overlay); backdrop-filter: blur(5px); }
.appearance-panel { position: absolute; top: 16px; bottom: 16px; left: 16px; width: min(460px, calc(100% - 32px)); display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 22px; box-shadow: var(--ui-shadow-raised); outline: none; }
.appearance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 25px 20px; border-bottom: 1px solid var(--ui-border); background: linear-gradient(110deg, var(--ui-tint), var(--ui-surface)); }
.appearance-header h2 { font-size: 23px; line-height: 1.6; margin: 0; color: var(--ui-text); }
.appearance-kicker { display: block; font-size: 14px; line-height: 1.8; color: var(--ui-highlight); margin-bottom: 3px; }
.appearance-intro { font-size: 14px; line-height: 1.9; color: var(--ui-muted); margin: 0 0 23px; }
.appearance-hint { font-size: 14px; line-height: 1.85; color: var(--ui-muted); margin: 10px 0 0; }
.appearance-header p { margin: 5px 0 0; font-size: 14px; line-height: 1.9; color: var(--ui-muted); }
.appearance-header .icon-button { flex: 0 0 44px; }
.appearance-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 25px; scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent; }
.appearance-section { padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--ui-border); min-width: 0; }
.appearance-section:last-of-type { margin-bottom: 0; padding-bottom: 0; border: 0; }
.appearance-section h3, .appearance-section > label, .appearance-section > legend { display: block; font-size: 16px; font-weight: 700; color: var(--ui-text); margin: 0 0 12px; }
.appearance-section > p, .appearance-section small, .appearance-feedback { font-size: 14px; line-height: 1.85; color: var(--ui-muted); }
.appearance-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.appearance-swatch { display: flex; gap: 10px; align-items: center; min-width: 0; min-height: 77px; padding: 12px; text-align: right; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 13px; color: var(--ui-text); cursor: pointer; }
.appearance-swatch:hover { background: var(--ui-surface-soft); border-color: var(--ui-accent-border); }
.appearance-swatch[aria-pressed="true"] { background: var(--ui-tint); border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.appearance-swatch-dot { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: var(--swatch); box-shadow: inset 0 0 0 1px #0000000c, 0 3px 8px #0000000c; }
.appearance-swatch > span:not(.appearance-swatch-dot):not(.appearance-check) { min-width: 0; }
.appearance-swatch strong { display: block; font-size: 15px; line-height: 1.7; color: var(--ui-text); white-space: nowrap; }
.appearance-swatch small { display: block; direction: ltr; text-align: right; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ui-muted); }
.appearance-check { margin-inline-start: auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; color: transparent; border: 1px solid var(--ui-border); flex-shrink: 0; }
.appearance-swatch[aria-pressed="true"] .appearance-check { color: var(--ui-on-accent); background: var(--ui-accent); border-color: var(--ui-accent); }
.appearance-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.appearance-mode { min-height: 79px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ui-border); border-radius: 11px; color: var(--ui-muted); background: var(--ui-surface); font-size: 14px; padding: 10px 6px; }
.appearance-mode svg { width: 19px; height: 19px; }
.appearance-mode:hover { background: var(--ui-surface-soft); }
.appearance-mode[aria-pressed="true"] { color: var(--ui-highlight); background: var(--ui-tint); border-color: var(--ui-accent); }
.appearance-custom { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.appearance-custom label { font-size: 14px; line-height: 1.8; color: var(--ui-muted); display: grid; gap: 6px; min-width: 0; }
.appearance-custom input[type="color"] { display: block; height: 50px; width: 100%; padding: 5px; border: 1px solid var(--ui-border); background: var(--ui-surface); border-radius: 10px; cursor: pointer; }
.appearance-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.appearance-custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.appearance-custom input[type="text"], #appearance-hex { width: 100%; min-width: 0; min-height: 50px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); font: 16px ui-monospace, monospace; padding: 11px 14px; direction: ltr; text-align: left; }
.appearance-custom input[aria-invalid="true"] { border-color: var(--ui-danger-text); background: var(--ui-danger-bg); }
.appearance-preview { padding: 18px; background: var(--ui-surface-soft); border: 1px solid var(--ui-border); border-radius: 15px; margin-top: 18px; }
.appearance-preview-card { padding: 18px; border: 1px solid var(--ui-accent-border); border-inline-start: 4px solid var(--ui-accent); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.appearance-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; }
.appearance-section-heading h3 { margin-bottom: 0; }
.appearance-section-heading .appearance-hint { margin-top: 0; }
.appearance-preview-label { color: var(--ui-highlight); font-size: 14px; }
.appearance-preview-title { display: block; color: var(--ui-text); font-size: 16px; line-height: 1.75; font-weight: 700; margin: 4px 0 0; }
.appearance-preview-text { color: var(--ui-muted); margin: 5px 0 14px; font-size: 14px; line-height: 1.85; }
.appearance-preview .button { min-height: 45px; padding: 8px 14px; font-size: 14px; }
.appearance-preview-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.appearance-preview-footer > span { font: 13px ui-monospace, monospace; color: var(--ui-muted); }
.appearance-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 18px 25px; border-top: 1px solid var(--ui-border); background: var(--ui-surface); }
.appearance-actions > div { display: flex; gap: 8px; }
.appearance-actions .button { min-height: 47px; padding: 9px 15px; font-size: 15px; }
.appearance-actions > :first-child { margin-inline-end: auto; }
.appearance-feedback { margin: 10px 0 0; }
.appearance-feedback[role="alert"] { color: var(--ui-danger-text); }

@media (max-width: 800px) {
  .sidebar { background: var(--ui-surface); }
  .appearance-trigger { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .topbar-end { gap: 9px; }
  .topbar .topbar-end > .appearance-trigger { width: 48px; min-width: 48px; height: 48px; padding: 0; }
  .appearance-trigger-label { display: none; }
  .appearance-panel { top: 8px; bottom: 8px; left: 8px; right: 8px; width: auto; border-radius: 18px; }
  .appearance-header { padding: 21px 20px 18px; }
  .appearance-header h2 { font-size: 22px; }
  .appearance-body { padding: 21px 20px; }
  .appearance-actions { padding: 16px 20px; gap: 8px; }
  .appearance-actions .button { flex: 1 1 auto; font-size: 14px; padding-inline: 11px; }
  .appearance-actions > :first-child { margin-inline-end: 0; }
  .appearance-actions > div { flex: 1 1 100%; }
  .appearance-swatch { padding: 10px; gap: 8px; }
  .appearance-swatch-dot { width: 28px; height: 28px; flex-basis: 28px; }
  .appearance-swatch strong { font-size: 14px; }
  .appearance-section { margin-bottom: 22px; padding-bottom: 22px; }
}
@media (max-width: 480px) {
  .topbar .design-badge { display: none; }
}
@media (max-width: 360px) {
  .appearance-presets { grid-template-columns: minmax(0, 1fr); }
  .appearance-modes { gap: 6px; }
  .appearance-mode { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}