/* MOEX Booster UI 2026 — final cascade layer. */
:root {
  color-scheme: light;
  --md-sys-color-primary: #006c46;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #a7f2c9;
  --md-sys-color-on-primary-container: #002114;
  --md-sys-color-secondary: #4d6357;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #cfe9d9;
  --md-sys-color-on-secondary-container: #0a1f15;
  --md-sys-color-tertiary: #3d6472;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #c1e9fa;
  --md-sys-color-on-tertiary-container: #001f29;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #f6faf6;
  --md-sys-color-on-surface: #181d19;
  --md-sys-color-on-surface-variant: #404943;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f0f4f0;
  --md-sys-color-surface-container: #eaeFEB;
  --md-sys-color-surface-container-high: #e4e9e5;
  --md-sys-color-surface-container-highest: #dfe3df;
  --md-sys-color-outline: #707973;
  --md-sys-color-outline-variant: #bfc9c1;
  --md-sys-color-inverse-surface: #2d322e;
  --md-sys-color-inverse-on-surface: #eef1ed;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-headline-large-size: clamp(2rem, 3vw, 3rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --bg: var(--md-sys-color-surface);
  --panel: var(--md-sys-color-surface-container-lowest);
  --line: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --green: var(--md-sys-color-primary);
  --active-text: #005f3d;
  --control-border: #89938c;
  --surface-soft: var(--md-sys-color-surface-container-low);
  --card-shadow: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #8bd7ad;
  --md-sys-color-on-primary: #003823;
  --md-sys-color-primary-container: #005234;
  --md-sys-color-on-primary-container: #a7f2c9;
  --md-sys-color-secondary: #b3ccbd;
  --md-sys-color-on-secondary: #20352a;
  --md-sys-color-secondary-container: #364b3f;
  --md-sys-color-on-secondary-container: #cfe9d9;
  --md-sys-color-tertiary: #a5cddd;
  --md-sys-color-on-tertiary: #073542;
  --md-sys-color-tertiary-container: #244c59;
  --md-sys-color-on-tertiary-container: #c1e9fa;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #101411;
  --md-sys-color-on-surface: #dfe4df;
  --md-sys-color-on-surface-variant: #bfc9c1;
  --md-sys-color-surface-container-lowest: #0b0f0c;
  --md-sys-color-surface-container-low: #181d19;
  --md-sys-color-surface-container: #1c211d;
  --md-sys-color-surface-container-high: #272b27;
  --md-sys-color-surface-container-highest: #323632;
  --md-sys-color-outline: #89938c;
  --md-sys-color-outline-variant: #404943;
  --md-sys-color-inverse-surface: #dfe4df;
  --md-sys-color-inverse-on-surface: #2d322e;
  --bg: var(--md-sys-color-surface);
  --panel: var(--md-sys-color-surface-container-low);
  --line: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --green: var(--md-sys-color-primary);
  --active-text: var(--md-sys-color-primary);
  --control-border: var(--md-sys-color-outline);
  --surface-soft: var(--md-sys-color-surface-container);
}

* { box-sizing: border-box; }
html { background: var(--md-sys-color-surface); }
body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 78%, white);
  outline-offset: 3px;
}

button, input, select, textarea { font: inherit; }
button, .panel-link {
  min-height: 44px;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color 180ms cubic-bezier(.2,0,0,1), color 180ms cubic-bezier(.2,0,0,1), transform 180ms cubic-bezier(.2,0,0,1);
}
button:not(.ghost):not(.secondary):not(:disabled) {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.secondary:not(:disabled) {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.ghost:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
}
input, select, textarea {
  min-height: 48px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

/* App shell */
.topbar {
  height: 72px;
  padding: 0 var(--space-6);
  border-bottom: 0;
  background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
  box-shadow: none;
  backdrop-filter: blur(20px);
}
.brand { gap: var(--space-3); font-size: 16px; letter-spacing: -.02em; }
.brand .mark {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.topbar-right { gap: var(--space-2); }
.topbar-right .ghost { border: 0; background: var(--md-sys-color-surface-container-low); }
.topbar .mode {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 0 14px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 10px;
}
.sidebar {
  top: 72px;
  width: 224px;
  padding: var(--space-4) var(--space-3);
  border-right: 0;
  background: var(--md-sys-color-surface);
  box-shadow: none;
}
.sidebar nav { gap: var(--space-1); }
.sidebar nav a[data-route] {
  min-height: 52px;
  padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  font-weight: 600;
}
.sidebar nav a[data-route] span {
  width: 28px;
  height: 28px;
  font-size: 17px;
}
.sidebar nav a[data-route]:hover { transform: none; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
.sidebar nav a[data-route].active,
:root[data-theme="light"] .sidebar nav a[data-route].active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  box-shadow: none;
}
.sidebar-foot { border-top: 0; color: var(--md-sys-color-on-surface-variant); }
body > main {
  margin-left: 224px;
  padding: var(--space-6) clamp(20px, 3vw, 48px) 80px;
  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 0;
  background: var(--md-sys-color-surface-container-low);
}
main > * { width: min(100%, 1240px); }

/* Content surfaces */
.card, .overview-card, .dashboard-panel, .dashboard-data-panel,
.overview-category-card, .metric, .visual-card, .category-capabilities article {
  border-color: transparent;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: none;
}
.overview-card.overview-total, .metric.primary,
:root[data-theme="light"] .overview-card.overview-total,
:root[data-theme="light"] .metric.primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.overview-card strong, .metric strong { letter-spacing: -.04em; }
.table-card { overflow: clip; }
.table-wrap { border-color: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); }
thead, :root[data-theme="light"] .table-wrap thead { background: var(--md-sys-color-surface-container); }
th { color: var(--md-sys-color-on-surface-variant); font-size: 10px; letter-spacing: .08em; }
td { border-bottom-color: var(--md-sys-color-outline-variant); }
.category-workspace {
  top: 84px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--md-sys-shape-corner-large) !important;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 94%, transparent) !important;
  box-shadow: none !important;
}
.category-tabs a { min-height: 40px; border-radius: var(--md-sys-shape-corner-full); }
.category-tabs a.active {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.advisor-mode-badge { border: 0; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.step, .eyebrow { color: var(--md-sys-color-primary); letter-spacing: .12em; }

.ai-drawer {
  width: min(520px, calc(100vw - 16px));
  padding: var(--space-6);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: -24px 0 64px rgba(0, 33, 20, .18);
}
.ai-drawer section, .ai-runtime-card, .ai-config-list {
  border-color: transparent;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
}
.ai-edge-tab { border-radius: var(--md-sys-shape-corner-large) 0 0 var(--md-sys-shape-corner-large); }

/* Sign-in: supporting pane on desktop, focused card on compact screens. */
.auth-gate {
  padding: clamp(16px, 4vw, 64px);
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--md-sys-color-primary-container) 54%, transparent), transparent 34%),
    var(--md-sys-color-surface-container-low);
}
:root[data-theme="light"] .auth-gate { background: radial-gradient(circle at 12% 12%, #c9f8dc 0, transparent 34%), var(--md-sys-color-surface-container-low); }
.auth-shell {
  width: min(1080px, 100%);
  min-height: min(680px, calc(100dvh - 80px));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  overflow: hidden;
  border-radius: 36px;
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: 0 24px 80px rgba(21, 54, 37, .12);
}
.auth-story {
  display: flex;
  flex-direction: column;
  padding: clamp(36px, 6vw, 72px);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}
.auth-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 750; }
.auth-logo {
  width: 46px;
  height: 46px;
  margin: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.auth-story .eyebrow { margin: auto 0 12px; color: var(--md-sys-color-primary-container); }
.auth-story h1 {
  max-width: 560px;
  margin: 0;
  color: var(--md-sys-color-inverse-on-surface);
  font-size: clamp(42px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
}
.auth-lead { max-width: 520px; margin: var(--space-6) 0 var(--space-8); color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 76%, transparent); font-size: 18px; }
.auth-benefits { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.auth-benefits li { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 14%, transparent); }
.auth-benefits li > span { color: var(--md-sys-color-primary-container); font-size: 11px; font-weight: 800; }
.auth-benefits strong, .auth-benefits small { display: block; }
.auth-benefits small { margin-top: 2px; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 68%, transparent); }
.auth-card,
:root[data-theme="light"] .auth-card {
  width: auto;
  align-self: center;
  padding: clamp(36px, 5vw, 64px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.auth-card .eyebrow { margin: 0 0 var(--space-3); }
.auth-card h2 { margin: 0 0 var(--space-4); font-size: clamp(32px, 4vw, 48px); line-height: 1.04; letter-spacing: -.045em; }
.auth-card > p:not(.eyebrow):not(.auth-trust) { margin: 0 0 var(--space-6); color: var(--md-sys-color-on-surface-variant); }
.auth-card button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 54px; margin: 0; }
.auth-card button span { font-size: 20px; }
.auth-card .status { min-height: 24px; margin: var(--space-3) 0 0; text-align: center; }
.auth-trust { margin: var(--space-8) 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 12px; text-align: center; }
.auth-trust span { color: var(--md-sys-color-primary); }
.auth-locked > .ai-edge-tab, .auth-locked > .ai-drawer, .auth-locked > .ai-drawer-backdrop { visibility: hidden; }

@media (min-width: 600px) and (max-width: 839px) {
  .sidebar { width: 88px; align-items: center; }
  .sidebar nav a[data-route] { width: 64px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px; font-size: 9px; text-align: center; }
  .sidebar-foot { display: none; }
  body > main, body > footer { margin-left: 88px; }
  .auth-shell { grid-template-columns: 1fr 360px; }
  .auth-story { padding: 40px; }
  .auth-story h1 { font-size: 46px; }
  .auth-benefits small { display: none; }
}

@media (max-width: 599px) {
  .topbar { height: 64px; padding: 0 var(--space-4); }
  .sidebar { top: 64px; width: min(88vw, 320px); }
  body > main { margin-left: 0; padding: var(--space-4) var(--space-4) 88px; border-radius: 0; }
  body > footer { margin-left: 0; }
  .category-workspace { top: 72px; }
  .auth-gate { padding: 0; place-items: stretch; }
  .auth-shell { min-height: 100dvh; grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
  .auth-story { min-height: 42dvh; padding: 28px 24px 32px; }
  .auth-story .eyebrow { margin-top: 48px; }
  .auth-story h1 { font-size: clamp(38px, 12vw, 52px); }
  .auth-lead { margin-bottom: 0; }
  .auth-benefits { display: none; }
  .auth-card { align-self: stretch; padding: 36px 24px 48px; }
  .auth-card h2 { font-size: 34px; }
  .ai-drawer { width: 100vw; border-radius: 0; }
}

@media (hover: hover) {
  .overview-card:hover, .dashboard-panel:hover, .overview-category-card:hover {
    background: var(--md-sys-color-surface-container-low);
  }
  button:not(:disabled):hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  button, input, select, textarea, .card, .metric { border: 1px solid CanvasText; }
}

/* Main workspace v2: compact analytical shell and supporting-pane builder. */
@media (min-width: 840px) {
  .topbar {
    height: 64px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
  }
  .brand .mark { width: 36px; height: 36px; }
  .sidebar {
    top: 64px;
    width: 208px;
    padding: 20px 12px;
    border-right: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
  }
  :root[data-theme="light"] .sidebar {
    border-right: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    box-shadow: none;
  }
  :root[data-theme="light"] .sidebar nav a[data-route] { color: var(--md-sys-color-on-surface-variant); }
  :root[data-theme="light"] .sidebar nav a[data-route]:hover { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }
  .sidebar nav a[data-route] { min-height: 48px; }
  .sidebar nav a[data-route].active,
  :root[data-theme="light"] .sidebar nav a[data-route].active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
  }
  body > main {
    margin-left: 208px;
    min-height: calc(100dvh - 64px);
    padding: 24px clamp(24px, 3vw, 44px) 72px;
    border-radius: 0;
    background: var(--md-sys-color-surface-container-low);
  }
  body > footer { margin-left: 208px; }
}

body[data-route="build"] .category-workspace { display: none !important; }
body[data-route="build"] main { padding-top: 24px; }
body[data-route="build"] .build-asset-switcher {
  width: fit-content;
  margin: 0 0 20px;
  padding: 4px;
  gap: 2px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container);
}
body[data-route="build"] .build-asset-switcher button {
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
}
body[data-route="build"] .build-asset-switcher button.active {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-primary);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
:root[data-theme="light"] body[data-route="build"] .build-asset-switcher button:not(.ghost):not(.secondary) {
  border-color: transparent;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
}
:root[data-theme="light"] body[data-route="build"] .build-asset-switcher button.active:not(.ghost):not(.secondary) {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-primary);
}

.builder-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  overflow: visible;
  border: 0;
  background: transparent;
}
.builder-workspace.page-active { display: grid !important; }
.builder-workspace.builder-workspace { box-shadow: none; }
.builder-header {
  grid-column: 1 / -1;
  display: block;
  padding: 8px 4px 16px;
  border: 0;
  background: transparent;
}
#strategy > .builder-header {
  margin-bottom: 0;
  padding: 4px 4px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.builder-header > div { width: 100%; }
.builder-header .step { margin: 0 0 6px; font-size: 10px; }
.builder-header h2 {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1;
  letter-spacing: -.05em;
}
.builder-header .build-flow-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: builder-step;
  gap: 8px !important;
  margin: 18px 0 14px !important;
}
.builder-header .build-flow-steps span {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}
.builder-header .build-flow-steps span:first-child {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.builder-header .ratings-freshness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  padding-top: 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.builder-header .ratings-freshness .muted { font-size: 11px; }
.builder-header .ratings-freshness button { flex: 0 0 auto; min-height: 36px; padding: 7px 12px; }

[data-builder-pane="controls"] {
  display: block;
  min-width: 0;
  margin: 0;
}
[data-builder-pane="controls"] .strategy-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: none;
}
[data-builder-pane="controls"] .strategy-form::before {
  content: "ПАРАМЕТРЫ СТРАТЕГИИ";
  color: var(--md-sys-color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
[data-builder-pane="controls"] .strategy-form > label { font-size: 12px; }
[data-builder-pane="controls"] .strategy-form input,
[data-builder-pane="controls"] .strategy-form select { height: 48px; background: var(--md-sys-color-surface-container-low); }
[data-builder-pane="controls"] .vdo-advanced {
  border-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
[data-builder-pane="controls"] .vdo-advanced summary { padding: 13px 14px; font-size: 13px; }
[data-builder-pane="controls"] .vdo-advanced-grid { grid-template-columns: 1fr; }
[data-builder-pane="controls"] .strategy-form > button[type="submit"] {
  width: 100%;
  min-height: 52px;
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: none;
}
[data-builder-pane="controls"] .strategy-progress { min-height: 160px; margin-top: 16px; border: 0; box-shadow: none; }
[data-builder-pane="controls"] .strategy-progress.hidden { display: none !important; }

[data-builder-pane="output"] {
  min-width: 0;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: none;
}
[data-builder-pane="output"]::before {
  content: "ПРОЕКТ ПОРТФЕЛЯ";
  padding: 22px 22px 4px;
  color: var(--md-sys-color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
[data-builder-pane="output"] > #vdo-status { min-height: 38px; padding: 10px 22px 4px !important; }
[data-builder-pane="output"] > #vdo-summary { padding: 0 22px 14px !important; }
[data-builder-pane="output"] > .table-wrap {
  flex: 1;
  margin: 0 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
[data-builder-pane="output"] table { min-width: 980px; }
[data-builder-pane="output"] tbody tr:only-child td { height: 200px; color: var(--md-sys-color-on-surface-variant); text-align: center; }
[data-builder-pane="output"] .strategy-save {
  margin-top: 14px;
  padding: 14px 18px 18px;
  border-top: 0;
  background: var(--md-sys-color-surface-container-low);
}

@media (max-width: 1050px) {
  .builder-workspace { grid-template-columns: 1fr; }
  .builder-header, [data-builder-pane="controls"], [data-builder-pane="output"] { grid-column: 1; }
  [data-builder-pane="controls"] .strategy-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-builder-pane="controls"] .strategy-form::before,
  [data-builder-pane="controls"] .vdo-advanced,
  [data-builder-pane="controls"] .strategy-form > button { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  body[data-route="build"] main { padding-top: 16px; }
  body[data-route="build"] .build-asset-switcher {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: var(--md-sys-shape-corner-full);
  }
  body[data-route="build"] .build-asset-switcher button { flex: 0 0 auto; }
  .builder-header { padding-inline: 0; }
  .builder-header .build-flow-steps { grid-template-columns: 1fr; }
  .builder-header .ratings-freshness { align-items: flex-start; flex-direction: column; }
  [data-builder-pane="controls"] .strategy-form { grid-template-columns: 1fr; padding: 18px; }
  [data-builder-pane="output"] { min-height: 380px; }
  .ai-edge-tab { display: none; }
}

/* Portfolio account selector: labelled, bounded and visually stable. */
.dashboard-head .actions { align-items: flex-end; }
.account-picker,
:root[data-theme="light"] .account-picker {
  width: min(360px, 100%);
  max-width: 360px;
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
}
.account-picker > span {
  padding-left: 4px;
  font-size: 11px;
  font-weight: 750;
}
.dashboard-head .actions .account-picker select,
:root[data-theme="light"] .dashboard-head .actions .account-picker select {
  width: 100%;
  min-width: 0;
  max-width: 360px;
  height: 48px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  box-shadow: none;
  appearance: auto;
}
.dashboard-head .actions .account-picker select:focus-visible {
  border-color: var(--md-sys-color-primary);
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .account-picker, :root[data-theme="light"] .account-picker { width: 100%; max-width: none; }
  .dashboard-head .actions .account-picker select,
  :root[data-theme="light"] .dashboard-head .actions .account-picker select { max-width: none; }
}

/* AI profile v4: compact settings dialog with inline guidance. */
#ai-profile-dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
#ai-profile-dialog::backdrop { background: color-mix(in srgb, var(--md-sys-color-inverse-surface) 72%, transparent); backdrop-filter: blur(5px); }
#ai-profile-dialog .manual-purchase-shell {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 32px);
  display: block;
  overflow-y: auto;
  padding: 0;
  background: var(--md-sys-color-surface-container-low);
}
#ai-profile-dialog .metric-dialog-head {
  top: 0;
  z-index: 3;
  align-items: center;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 94%, transparent);
}
#ai-profile-dialog .metric-dialog-head h2 {
  margin: 2px 0 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
#ai-profile-dialog .metric-dialog-head .step { margin: 0; font-size: 9px; }
#ai-profile-close { width: 40px; min-width: 40px; max-width: 40px; height: 40px; min-height: 40px; flex: 0 0 40px; overflow: hidden; padding: 0; font-size: 20px; }
.ai-profile-body { display: grid; gap: 16px; padding: 18px 24px 12px; }
.ai-profile-intro {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.ai-profile-intro > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-size: 11px;
  font-weight: 850;
}
.ai-profile-intro strong { display: block; font-size: 13px; }
.ai-profile-intro p { margin: 2px 0 0; font-size: 11px; line-height: 1.45; }
.ai-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#ai-profile-dialog .ai-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-weight: 700;
}
#ai-profile-dialog [hidden] { display: none !important; }
.ai-field-wide { grid-column: 1 / -1; }
#ai-profile-dialog .ai-field input,
#ai-profile-dialog .ai-field select {
  width: 100%;
  max-width: none;
  min-height: 46px;
  margin: 0;
  padding: 10px 13px;
  border-color: var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-lowest);
}
.ai-field-help {
  display: block;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 10px;
  font-weight: 450;
  line-height: 1.4;
}
.ai-key-status {
  display: block;
  min-height: 15px;
  color: var(--md-sys-color-primary);
  font-size: 10px;
  font-weight: 700;
}
.ai-profile-automation {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
}
.ai-profile-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ai-profile-section-head h3 { margin: 0; font-size: 15px; }
.ai-profile-section-head p { margin: 2px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 10px; }
.ai-profile-section-head > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}
#ai-profile-dialog label.ai-setting-toggle {
  min-height: 74px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}
.ai-setting-toggle input { flex: 0 0 18px; width: 18px !important; height: 18px; min-height: 18px !important; margin: 2px 0 0 !important; }
.ai-setting-toggle span, .ai-setting-toggle strong, .ai-setting-toggle small { display: block; }
.ai-setting-toggle strong { font-size: 11px; }
.ai-setting-toggle small { margin-top: 3px; color: var(--md-sys-color-on-surface-variant); font-size: 9px; font-weight: 450; line-height: 1.35; }
.ai-hour-field { padding: 0 4px; }
.ai-hour-field input { height: 42px; min-height: 42px !important; }
.ai-profile-safety {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 32%, var(--md-sys-color-outline-variant));
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 10px;
  line-height: 1.45;
}
.ai-profile-safety > span:first-child { color: var(--md-sys-color-primary); font-weight: 900; }
.ai-profile-safety strong { color: var(--md-sys-color-on-surface); }
#ai-profile-status { min-height: 22px; margin: 0; padding: 4px 24px 8px; }
#ai-profile-dialog .ai-profile-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 96%, transparent);
  backdrop-filter: blur(12px);
}
#ai-profile-dialog .ai-profile-actions button { min-width: 190px; }

@media (max-width: 700px) {
  #ai-profile-dialog { width: 100vw; max-height: 100dvh; border-radius: 0; }
  #ai-profile-dialog .manual-purchase-shell { max-height: 100dvh; }
  #ai-profile-dialog .metric-dialog-head { padding: 14px 16px 12px; }
  .ai-profile-body { padding: 14px 16px 10px; }
  .ai-profile-grid { grid-template-columns: 1fr; }
  .ai-field-wide, .ai-profile-automation { grid-column: 1; }
  .ai-profile-automation { grid-template-columns: 1fr; }
  .ai-profile-section-head, .ai-profile-automation > * { grid-column: 1; }
  #ai-profile-status { padding-inline: 16px; }
  #ai-profile-dialog .ai-profile-actions { padding: 10px 16px 14px; }
  #ai-profile-dialog .ai-profile-actions button { flex: 1 1 180px; min-width: 0; }
}

/* AI workspace v5: dense supporting panel with details on demand. */
.ai-drawer {
  width: min(480px, 100vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-drawer > header {
  flex: 0 0 auto;
  align-items: center;
  padding: 18px 18px 10px;
  background: var(--md-sys-color-surface-container-low);
}
.ai-drawer > header .step { margin: 0 0 2px; font-size: 9px; }
.ai-drawer > header h2 { margin: 0; font-size: 25px; line-height: 1.08; letter-spacing: -.035em; }
.ai-drawer > header .ghost { width: 40px; min-width: 40px; max-width: 40px; min-height: 40px; flex: 0 0 40px; overflow: hidden; padding: 0; border-radius: var(--md-sys-shape-corner-full); font-size: 22px; }
.right-workspace-tabs {
  flex: 0 0 auto;
  gap: 4px;
  margin: 0 18px 10px;
  padding: 4px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container);
}
.right-workspace-tabs button { min-width: 0; min-height: 38px; padding: 7px 10px; border: 0; border-radius: var(--md-sys-shape-corner-full); font-size: 12px; }
#right-panel-ai,
.monitoring-workspace {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 18px 24px;
  overflow-x: hidden;
  overflow-y: auto;
}
#right-panel-ai { display: flex; flex-direction: column; gap: 10px; }
#right-panel-ai > * { min-width: 0; margin-block: 0; }
#right-panel-ai > .ai-runtime-card { order: 1; }
#right-panel-ai > .ai-chat-workspace { order: 2; }
#right-panel-ai > .ai-config-details { order: 3; }
#right-panel-ai > section:not(.ai-chat-workspace):not(.guardian-workspace):not(.ai-workspace) { order: 4; }
#right-panel-ai > .guardian-workspace { order: 5; }
#right-panel-ai > .ai-workspace { order: 6; }
#right-panel-ai > .ai-drawer-note { order: 7; }
.ai-drawer section,
.ai-runtime-card,
.ai-config-details { padding: 13px 14px; border: 0; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-lowest); }
.ai-drawer h3 { margin: 0 0 8px; font-size: 14px; }
.ai-runtime-card { color: var(--tone-color, var(--md-sys-color-on-surface)); }
.ai-runtime-details summary,
.ai-config-details > summary { display: grid; align-items: center; grid-template-columns: auto auto 1fr auto; gap: 8px; cursor: pointer; list-style: none; }
.ai-runtime-details summary::-webkit-details-marker,
.ai-config-details > summary::-webkit-details-marker { display: none; }
.ai-runtime-details summary::after,
.ai-config-details > summary::after { content: "⌄"; color: var(--md-sys-color-on-surface-variant); font-size: 18px; }
.ai-runtime-details[open] summary::after,
.ai-config-details[open] > summary::after { transform: rotate(180deg); }
.ai-runtime-details summary small,
.ai-config-details > summary small { color: var(--md-sys-color-on-surface-variant); font-size: 10px; }
.ai-runtime-details p { margin: 10px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 11px; line-height: 1.45; }
.ai-status-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--tone-color, var(--md-sys-color-primary)); box-shadow: 0 0 0 4px var(--tone-bg, var(--md-sys-color-primary-container)); }
.ai-config-details > summary { grid-template-columns: 1fr auto auto; font-size: 13px; font-weight: 750; }
.ai-config-list {
  grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
  gap: 5px 10px;
  margin-top: 12px;
  padding: 12px 0 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  background: transparent;
}
.ai-config-list dt,
.ai-config-list dd { min-width: 0; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.ai-chat-workspace .ai-section-head { align-items: center; }
.ai-chat-intro { margin: 0 0 8px; font-size: 11px; line-height: 1.4; }
.ai-provider-badge { padding: 5px 9px; font-size: 10px; }
.ai-chat-log { min-height: 76px; max-height: 220px; padding: 10px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); }
.ai-chat-log > .muted { margin: 0; font-size: 11px; line-height: 1.45; }
.ai-chat-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.ai-chat-form label { grid-column: 1 / -1; margin: 0; font-size: 10px; }
.ai-chat-form textarea { min-width: 0; min-height: 58px; height: 58px; resize: vertical; }
.ai-chat-form button { min-height: 48px; padding-inline: 16px; }
.ai-chat-workspace > .ai-drawer-note { margin-top: 8px; font-size: 9px; }
.ai-section-head #ai-drawer-refresh { min-height: 34px; padding: 5px 10px; font-size: 10px; }
.ai-queue-summary { gap: 5px; }
.ai-queue-summary article { padding: 6px; }

@media (max-width: 599px) {
  .ai-drawer > header { padding: 14px 14px 8px; }
  .ai-drawer > header h2 { font-size: 22px; }
  .right-workspace-tabs { margin-inline: 14px; }
  #right-panel-ai, .monitoring-workspace { padding-inline: 14px; }
  .ai-runtime-details summary small { display: none; }
  .ai-chat-form { grid-template-columns: 1fr; }
  .ai-chat-form label { grid-column: auto; }
  .ai-chat-form button { min-height: 42px; }
}