/* Settings · Hybrid Concept B — presentation only over existing preference APIs. */
.stb-frame {
  --stb-hero-min-height: 9.75rem;
  --stb-panel-padding: 1.25rem;
  --stb-touch-target: 2.75rem;
  --stb-type-hero: var(--mcb-type-management-hero);
  --stb-type-title: var(--mcb-type-panel-title);
  --stb-type-body: var(--mcb-type-control);
  --stb-type-meta: var(--mcb-type-meta);
  --stb-type-label: var(--mcb-type-label);
  --stb-leading-copy: var(--mcb-leading-management-copy);
  --stb-tracking-label: var(--mcb-tracking-management-label);
  --stb-copy-max: 38rem;
}
.stb-layout { align-items: start; }
.stb-center,
.stb-panel,
.stb-section,
.stb-card { min-width: 0; }
.stb-hero,
.stb-tabs,
.stb-section {
  border: var(--mcb-border-width) solid var(--border-subtle);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface-1-solid) 88%, transparent);
  box-shadow: var(--panel-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.stb-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  min-height: var(--stb-hero-min-height);
  padding: var(--space-6);
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--icon-blue) 12%, transparent), transparent 72%), color-mix(in srgb, var(--surface-1-solid) 88%, transparent);
}
.stb-eyebrow,
.stb-section > header span,
.stb-account-card > span,
.stb-boundary-card > span {
  color: var(--icon-blue);
  font-size: var(--stb-type-label);
  font-weight: 700;
  letter-spacing: var(--stb-tracking-label);
  text-transform: uppercase;
}
.stb-hero h1 { margin: var(--space-2) 0 0; font: 700 var(--stb-type-hero)/var(--mcb-leading-hero) "Manrope", var(--font-sans); letter-spacing: var(--mcb-tracking-hero); }
.stb-hero p { max-width: var(--stb-copy-max); margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--mcb-type-body); line-height: var(--stb-leading-copy); text-wrap: pretty; }
.stb-scope { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 18rem; min-height: var(--mcb-chip-height); padding: var(--space-2) var(--space-3); border: var(--mcb-border-width) solid var(--border-subtle); border-radius: var(--mcb-radius-tab); background: color-mix(in srgb, var(--surface-2) 44%, transparent); color: var(--text-secondary); font-size: var(--stb-type-meta); font-weight: 700; }
.stb-scope .ui-icon { width: var(--mcb-icon-small); height: var(--mcb-icon-small); color: var(--icon-blue); }
.stb-scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--space-2); }
.stb-tabs button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--stb-touch-target); padding: var(--space-2) var(--space-3); border: var(--mcb-border-width) solid transparent; border-radius: var(--mcb-radius-tab); background: transparent; color: var(--text-muted); font-size: var(--stb-type-body); font-weight: 700; cursor: pointer; }
.stb-tabs button:hover { background: var(--surface-2); color: var(--text-primary); }
.stb-tabs button.is-active { border-color: color-mix(in srgb, var(--icon-blue) 32%, var(--border-subtle)); background: color-mix(in srgb, var(--icon-blue) 10%, var(--surface-2)); color: var(--icon-blue); }
.stb-tabs .ui-icon { width: var(--mcb-icon-small); height: var(--mcb-icon-small); flex: none; }
.stb-panel[hidden] { display: none; }
.stb-panel { display: grid; gap: var(--space-4); }

.stb-section { padding: var(--stb-panel-padding); }
.stb-section > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 25rem); gap: var(--space-5); align-items: end; }
.stb-section > header h2 { margin: var(--space-1) 0 0; font: 700 var(--stb-type-title)/var(--mcb-leading-panel) "Manrope", var(--font-sans); }
.stb-section > header p { margin: 0; color: var(--text-muted); font-size: var(--stb-type-meta); line-height: var(--stb-leading-copy); }
.stb-card { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3); border: var(--mcb-border-width) solid var(--border-subtle); border-radius: var(--r-control); background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
.stb-loading { padding: var(--space-4); color: var(--text-muted); font-size: var(--stb-type-body); }
.stb-card .setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--inset-gap); align-items: center; min-width: 0; padding: var(--inset-padding); border: var(--mcb-border-width) solid var(--inset-border); border-radius: var(--inset-radius); background: var(--inset-surface); box-shadow: var(--inset-shadow); }
.stb-card .setting-row > * { min-width: 0; }
.stb-card .setting-row + .setting-row { margin-top: 0; }
.stb-card .st-label { font-size: var(--stb-type-body); }
.stb-card .st-desc { max-width: var(--stb-copy-max); margin-top: var(--space-1); overflow-wrap: anywhere; font-size: var(--stb-type-meta); line-height: var(--stb-leading-copy); }
.stb-card :is(.field, input, select, textarea) { max-width: 100%; min-width: 0; }
.stb-card :is(.btn, button) { min-height: var(--stb-touch-target); }
.stb-card :is(code, pre, a, small, p, div) { overflow-wrap: anywhere; }
.stb-card .row { min-width: 0; flex-wrap: wrap; }
.brain-local-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: var(--mcb-border-width) solid color-mix(in srgb, var(--warning) 42%, var(--border-subtle));
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-1-solid));
}
.brain-local-warning-icon {
  display: grid;
  width: var(--stb-touch-target);
  height: var(--stb-touch-target);
  place-items: center;
  border-radius: var(--mcb-radius-tab);
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
  color: var(--warning);
  font-size: var(--stb-type-title);
  font-weight: 800;
}
.brain-local-warning-copy { min-width: 0; }
.brain-local-warning-copy strong { color: var(--text-primary); font-size: var(--stb-type-body); }
.brain-local-warning-copy p,
.brain-local-warning-copy small {
  display: block;
  max-width: var(--stb-copy-max);
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: var(--stb-type-meta);
  line-height: var(--stb-leading-copy);
}
.brain-local-warning-copy small { color: var(--text-muted); }
.brain-local-warning-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stb-card .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.stb-card .theme-tile { min-width: 0; height: auto; }
.stb-card .voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); }
.stb-card .voice-tile { min-width: 0; }

.stb-account-card strong,
.stb-boundary-card strong { display: block; margin-top: var(--space-2); overflow-wrap: anywhere; font: 700 var(--mcb-type-body)/var(--mcb-leading-panel) "Manrope", var(--font-sans); }
.stb-account-card small,
.stb-boundary-card small { display: block; margin-top: var(--space-1); overflow-wrap: anywhere; color: var(--text-muted); font-size: var(--stb-type-label); line-height: var(--stb-leading-copy); }
.stb-boundary-card > span { color: var(--icon-violet); }
.stb-shell :is(.stb-tabs button, .theme-tile, .voice-tile, .stb-card button, .stb-card input, .stb-card select, .mcb-eva-mark, .mcb-suggested button):focus-visible { outline: var(--mcb-focus-width) solid var(--focus-ring); outline-offset: var(--mcb-focus-width); }
html.reduce-transparency :is(.stb-hero, .stb-tabs, .stb-section) { background: var(--surface-1-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 767px) {
  .stb-frame { padding-top: var(--space-2); padding-bottom: calc(var(--space-10) * 2); }
  .stb-hero { min-height: 0; padding: var(--space-5) var(--space-4); }
  .stb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stb-section { padding: var(--space-4); }
  .stb-section > header { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}
@media (max-width: 480px) {
  .stb-hero { display: grid; }
  .stb-scope { max-width: 100%; }
  .stb-card { padding: var(--space-2); }
  .stb-card .setting-row { grid-template-columns: minmax(0, 1fr); }
  .stb-card .setting-row > :last-child { justify-self: start; }
  .stb-card .row > :is(.field, .input, input:not([type="checkbox"]):not([type="radio"]), select) { width: 100%; flex: 1 1 100%; }
  .stb-card .theme-grid,
  .stb-card .voice-grid { grid-template-columns: minmax(0, 1fr); }
  .brain-local-warning { grid-template-columns: auto minmax(0, 1fr); }
  .brain-local-warning-actions { grid-column: 1 / -1; }
  .brain-local-warning-actions .btn { flex: 1 1 auto; }
  .stb-shell .mcb-eva .eva-chat-btn { width: var(--stb-touch-target); height: var(--stb-touch-target); }
}
@media (prefers-reduced-motion: reduce) {
  .stb-shell * { scroll-behavior: auto; }
}