:root {
  color-scheme: dark;
  --bg: #0b1016;
  --sidebar: #0e141c;
  --surface: #121b25;
  --surface-strong: #1a2633;
  --surface-soft: #0f1720;
  --line: #293644;
  --line-soft: #202c38;
  --text: #eaf1f7;
  --muted: #a0afbf;
  --faint: #7f90a2;
  --teal: #46d8bf;
  --teal-soft: rgba(45, 212, 191, .12);
  --amber: #f4b942;
  --amber-soft: rgba(244, 185, 66, .12);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, .12);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, .12);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, .12);
  --radius: 14px;
  --panel-shadow: 0 3px 14px rgba(0, 0, 0, .08);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button, input, select, textarea { font-family: var(--sans); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: rgba(70,216,191,.25); color: var(--text); }
section { scroll-margin-top: 24px; }

.shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 212px;
  padding: 28px 16px 20px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: var(--sidebar);
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(45, 212, 191, .35);
  border-radius: 9px;
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .06);
}
.brand-mark span {
  width: 12px;
  height: 12px;
  border: 3px solid var(--teal);
  border-left-color: transparent;
  transform: rotate(45deg);
}
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 12px; letter-spacing: .08em; }
.brand-copy small { color: var(--faint); font: 9px/1.4 var(--mono); letter-spacing: .03em; }

.nav-list { display: grid; gap: 7px; margin-top: 42px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  transition: color .18s ease, background .18s ease;
}
.nav-item:hover, .nav-item:focus-visible { color: var(--text); background: rgba(255,255,255,.035); outline: none; }
.nav-item.active { color: var(--teal); background: var(--teal-soft); font-weight: 600; }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 20px;
  border-radius: 999px;
  background: var(--teal);
}
.nav-icon, .button-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon { opacity: .8; }
.nav-item.active .nav-icon { opacity: 1; }

.sidebar-meta { margin-top: auto; padding: 17px 8px 0; border-top: 1px solid var(--line-soft); }
.meta-row { display: grid; gap: 6px; margin-bottom: 16px; }
.meta-row span { color: var(--faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.meta-row strong { overflow: hidden; color: var(--muted); font: 11px var(--mono); text-overflow: ellipsis; }
.sidebar-meta a { color: var(--muted); font-size: 12px; transition: color .18s ease; }
.sidebar-meta a:hover { color: var(--teal); }

.workspace { min-width: 0; margin-left: 212px; padding: 30px clamp(20px, 2.4vw, 40px) 32px; }
/* Every top-level panel shares the workspace edges, including on ultrawide screens. */
.workspace > * { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-intro { min-width: 0; }
.eyebrow, .panel-kicker { margin: 0 0 7px; color: var(--teal); font: 10px var(--mono); letter-spacing: .16em; }
h1 { margin: 0; font-size: 28px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; }
.page-description { max-width: 620px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; font-size: 12px; }
.service-pill, .refresh-button, .config-button, .logout-button, .restart-button, .reset-data-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.service-pill { padding: 0 13px; color: var(--muted); font-size: 12px; }
.service-pill.offline .pulse-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.refresh-button, .config-button, .logout-button, .restart-button { padding: 0 14px; color: var(--text); cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.refresh-button:hover, .config-button:hover, .logout-button:hover, .restart-button:hover { border-color: #354658; background: var(--surface-strong); }
.refresh-button:focus-visible, .config-button:focus-visible, .logout-button:focus-visible, .restart-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.refresh-button:disabled { cursor: wait; opacity: .65; }
.refresh-icon { color: var(--teal); font-size: 18px; transition: transform .35s ease; }
.refresh-button.loading .refresh-icon { transform: rotate(360deg); }
.config-button { color: var(--muted); font-size: 12px; }
#config-button { color: var(--text); background: var(--surface-strong); border-color: #405162; }
#config-button:hover { border-color: var(--teal); }
.logout-button { color: var(--muted); }
.restart-button { color: var(--amber); }
.restart-button:disabled { cursor: wait; opacity: .55; }
.reset-data-button { padding: 0 13px; color: var(--danger); cursor: pointer; }
.reset-data-button:hover { border-color: rgba(251,113,133,.5); background: var(--danger-soft); }
.reset-data-button:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.reset-data-button:disabled { cursor: not-allowed; opacity: .48; }

.utility-menu { position: relative; }
.utility-menu > summary { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); list-style: none; cursor: pointer; }
.utility-menu > summary::-webkit-details-marker { display: none; }
.utility-menu[open] > summary, .utility-menu > summary:hover { color: var(--text); background: var(--surface-strong); }
.utility-menu-items { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 190px; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.utility-menu-label { padding: 5px 10px; color: var(--faint); font-size: 11px; }
.utility-menu-items button { justify-content: flex-start; width: 100%; border-color: transparent; background: transparent; font-size: 13px; }
.utility-menu-items button:hover { background: var(--surface-soft); }

.reset-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.reset-dialog::backdrop { background: rgba(3,8,13,.78); backdrop-filter: blur(3px); }
.reset-dialog form { padding: 23px; }
.reset-dialog h2 { margin: 0; font-size: 20px; }
.reset-warning { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.reset-warning strong { color: var(--danger); }
.reset-target { margin: 14px 0; padding: 10px 12px; border-left: 3px solid var(--danger); color: var(--text); background: var(--danger-soft); font-size: 12px; }
.reset-dialog label { display: block; color: var(--muted); font-size: 12px; }
.reset-dialog label code { color: var(--danger); font-family: var(--mono); }
.reset-dialog input { width: 100%; height: 42px; margin-top: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--text); background: var(--surface-soft); font: 12px var(--mono); }
.reset-dialog input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.reset-result { min-height: 20px; margin: 10px 0 0; color: var(--danger); font-size: 11px; }
.reset-result.success { color: var(--teal); }
.reset-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.reset-dialog-actions button { min-height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface-strong); cursor: pointer; }
.reset-dialog-actions .dialog-confirm { border-color: rgba(251,113,133,.4); color: #fff; background: #a9273e; }
.reset-dialog-actions .dialog-confirm:disabled { cursor: not-allowed; opacity: .4; }
.restart-dialog .panel-kicker { color: var(--amber); }
.restart-dialog .reset-warning strong { color: var(--amber); }
.restart-note { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--amber); color: var(--text); background: rgba(251,191,36,.08); font-size: 12px; }
.restart-dialog .reset-result { color: var(--amber); }
.restart-dialog .reset-result.success { color: var(--teal); }
.restart-dialog .dialog-confirm { border-color: rgba(251,191,36,.45); color: #160f02; background: var(--amber); font-weight: 750; }
.login-dialog { border-color: rgba(96,165,250,.32); }
.login-dialog .panel-kicker { color: var(--blue); }
.login-description { margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.transport-warning { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--amber); color: var(--amber); background: var(--amber-soft); font-size: 11px; line-height: 1.55; }
.login-dialog .reset-result { color: var(--danger); }
.login-dialog .dialog-confirm { min-width: 138px; border-color: rgba(96,165,250,.45); color: #06111d; background: var(--blue); font-weight: 750; }

.config-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: min(92vh, 920px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
}
.config-dialog::backdrop { background: rgba(3,8,13,.82); backdrop-filter: blur(4px); }
.config-dialog form { max-height: min(92vh, 920px); display: grid; grid-template-rows: auto auto auto minmax(120px, 1fr) auto; }
.config-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line-soft); }
.config-dialog-header h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.config-dialog-header > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.config-close-button { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 23px; line-height: 1; }
.config-close-button:hover { color: var(--text); border-color: #354658; }
.config-close-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.config-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px 24px; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }
.config-view-tabs { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(86px, 1fr)); gap: 6px; }
.config-view-tabs button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 10px; }
.config-view-tabs button:hover { color: var(--text); border-color: #354658; }
.config-view-tabs button.active { border-color: rgba(45,212,191,.42); color: var(--teal); background: var(--teal-soft); font-weight: 750; }
.config-search-wrap { display: flex; align-items: center; gap: 9px; }
.config-search-wrap[hidden] { display: none; }
.config-toolbar label { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.config-toolbar input, .config-toolbar select { min-width: 180px; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: var(--surface); font-size: 10px; }
.config-toolbar input:focus, .config-toolbar select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.config-view-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.config-safety-note { display: flex; align-items: center; gap: 12px; padding: 11px 24px; border-bottom: 1px solid var(--line-soft); color: var(--muted); background: var(--amber-soft); font-size: 10px; line-height: 1.55; }
.config-safety-note strong { flex: 0 0 auto; color: var(--amber); }
.config-load-state { display: grid; place-items: center; min-height: 160px; color: var(--muted); font-size: 12px; }
.config-load-state[hidden] { display: none; }
.config-load-state.error { color: var(--danger); }
.config-groups { min-height: 0; overflow-y: auto; padding: 8px 24px 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.config-groups::-webkit-scrollbar { width: 8px; }
.config-groups::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line); }
.config-group { padding-top: 20px; }
.config-group[hidden], .config-field[hidden] { display: none; }
.config-group-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
details.config-group > summary { list-style: none; cursor: pointer; user-select: none; }
details.config-group > summary::-webkit-details-marker { display: none; }
details.config-group > summary::before { content: "›"; flex: 0 0 auto; color: var(--faint); font-size: 18px; line-height: 1; transform: rotate(0deg); transition: transform .16s ease, color .16s ease; }
details.config-group[open] > summary::before { color: var(--teal); transform: rotate(90deg); }
details.config-group:not([open]) > summary { margin-bottom: 0; }
details.config-group > summary:hover h3 { color: var(--teal); }
.config-group-header h3 { margin: 0; font-size: 13px; }
.config-group.current-exchange-config .config-group-header h3 { color: var(--teal); }
.config-group-header span { color: var(--faint); font: 9px var(--mono); }
.config-group-header::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }
.config-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.config-field { min-width: 0; display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-soft); transition: border-color .16s ease, background .16s ease; }
.config-field-wide { grid-column: 1 / -1; }
.config-field.dirty { border-color: rgba(45,212,191,.42); background: rgba(45,212,191,.045); }
.config-field.cleared { border-color: rgba(251,113,133,.42); background: rgba(251,113,133,.045); }
.config-field-label { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.config-key { color: var(--text); font: 10px var(--mono); overflow-wrap: anywhere; }
.config-field-tag { padding: 3px 6px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font: 8px var(--mono); }
.config-field-tag.locked { color: var(--faint); background: rgba(130,147,163,.09); }
.config-field-description { min-height: 32px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.config-control input:not([type="checkbox"]), .config-control select, .config-control textarea { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: var(--surface); font: 11px var(--mono); }
.config-control textarea { min-height: 78px; padding: 10px 11px; resize: vertical; line-height: 1.5; }
.config-control input:not([type="checkbox"]):focus, .config-control select:focus, .config-control textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.config-control input[readonly] { color: var(--faint); cursor: not-allowed; background: rgba(130,147,163,.05); }
.secret-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.secret-control.single { grid-template-columns: minmax(0, 1fr); }
.secret-clear-button { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--danger); background: var(--surface); cursor: pointer; font-size: 10px; }
.secret-clear-button:hover { border-color: rgba(251,113,133,.45); background: var(--danger-soft); }
.secret-clear-button.restore { color: var(--muted); }
.exchange-account-manager { display: grid; gap: 12px; }
.exchange-account-notice { margin: 0; padding: 10px 12px; border: 1px solid rgba(96,165,250,.2); border-radius: 8px; color: var(--muted); background: rgba(96,165,250,.055); font-size: 10px; line-height: 1.6; }
.exchange-account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exchange-account-section-heading strong { font-size: 11px; }
.exchange-account-section-heading span { color: var(--faint); font-size: 9px; }
.exchange-account-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.exchange-account-list[hidden], .exchange-account-section-heading[hidden] { display: none; }
.exchange-account-empty { grid-column: 1 / -1; margin: 0; padding: 11px; border: 1px dashed var(--line); border-radius: 8px; color: var(--faint); text-align: center; font-size: 10px; }
.exchange-account-card { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.exchange-account-card.pending-upsert { border-color: rgba(45,212,191,.35); background: rgba(45,212,191,.045); }
.exchange-account-card.pending-remove { border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.045); }
.exchange-account-card > div { min-width: 0; display: grid; gap: 3px; }
.exchange-account-card strong { overflow: hidden; color: var(--text); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.exchange-account-card span { color: var(--muted); font-size: 9px; }
.exchange-account-card button { flex: 0 0 auto; min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 9px; }
.exchange-account-card button:hover { border-color: rgba(96,165,250,.4); color: var(--text); }
.exchange-account-builder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }
.exchange-account-builder > .exchange-account-section-heading { grid-column: 1 / -1; }
.exchange-account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.exchange-account-form-grid.credential-grid { grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exchange-account-form-grid label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.exchange-account-form-grid input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: var(--surface-strong); font: 11px var(--mono); transition: border-color .16s ease, box-shadow .16s ease; }
.exchange-account-form-grid input::placeholder { color: var(--faint); opacity: 1; }
.exchange-account-form-grid input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.exchange-account-builder-actions { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.exchange-account-add { min-height: 38px; padding: 0 14px; border: 1px solid rgba(45,212,191,.42); border-radius: 7px; color: #061512; background: var(--teal); cursor: pointer; font-size: 10px; font-weight: 750; white-space: nowrap; transition: filter .16s ease, transform .16s ease; }
.exchange-account-add:hover { filter: brightness(1.06); }
.exchange-account-add:active { transform: translateY(1px); }
.exchange-account-result { grid-column: 1 / -1; margin: 0; color: var(--teal); font-size: 9px; line-height: 1.5; }
.exchange-account-result:empty { display: none; }
.exchange-account-result.error { color: var(--danger); }
.account-display-name-manager { display: grid; gap: 10px; }
.account-display-name-notice { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.account-display-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-display-name-field { min-width: 0; display: grid; grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.account-display-name-heading { min-width: 0; display: grid; gap: 3px; }
.account-display-name-heading strong { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-display-name-heading code { overflow: hidden; color: var(--faint); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.account-display-name-field input { box-sizing: border-box; min-width: 0; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: var(--surface-strong); font: 11px var(--mono); }
.account-display-name-field input::placeholder { color: var(--faint); opacity: 1; }
.account-display-name-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.config-switch { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.config-switch input { position: absolute; opacity: 0; pointer-events: none; }
.config-switch-copy { color: var(--muted); font-size: 11px; }
.config-switch-track { position: relative; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 999px; background: #2b3946; transition: background .16s ease; }
.config-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #a9b6bf; transition: transform .16s ease, background .16s ease; }
.config-switch input:checked + .config-switch-track { background: rgba(45,212,191,.35); }
.config-switch input:checked + .config-switch-track::after { transform: translateX(15px); background: var(--teal); }
.config-switch input:focus-visible + .config-switch-track { outline: 2px solid var(--teal); outline-offset: 3px; }
.config-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; border-top: 1px solid var(--line); color: inherit; background: var(--surface-strong); font: inherit; letter-spacing: normal; }
.config-dialog-footer > div:first-child { min-width: 0; display: grid; gap: 4px; }
.config-dialog-footer strong { font-size: 11px; }
.config-dialog-footer span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.config-dialog-footer span.error { color: var(--danger); }
.config-dialog-footer span.success { color: var(--teal); }
.config-dialog-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.config-dialog-actions button { min-height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); cursor: pointer; }
.config-dialog-actions .config-save-button { border-color: rgba(45,212,191,.38); color: #061512; background: var(--teal); font-weight: 750; }
.config-dialog-actions .config-save-button:disabled { cursor: not-allowed; opacity: .4; }

/* Configuration uses the same readable controls as the main workspace. */
.config-view-tabs button { min-height: 38px; font-size: 13px; }
.config-view-note, .config-safety-note, .config-field-description,
.exchange-account-notice, .account-display-name-notice { font-size: 12px; line-height: 1.65; }
.config-field-key { font-size: 11px; overflow-wrap: anywhere; }
.config-group h3 { font-size: 15px; }
.config-field-title { font-size: 13px; }
.config-control input:not([type="checkbox"]), .config-control select,
.config-control textarea, .exchange-account-form-grid input,
.account-display-name-field input { min-height: 42px; font-size: 13px; background: var(--surface-soft); }
.config-control textarea { min-height: 88px; }
.exchange-account-form-grid label, .config-switch-copy,
.exchange-account-section-heading strong, .account-display-name-heading strong { font-size: 12px; }
.exchange-account-card strong { font-size: 12px; }
.exchange-account-card span, .exchange-account-card button,
.exchange-account-section-heading span, .exchange-account-result { font-size: 11px; }
.exchange-account-add { min-height: 42px; font-size: 12px; }
.config-dialog-footer span { font-size: 12px; }
.config-dialog-footer strong { font-size: 13px; }

.exchange-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}
.exchange-switcher-copy { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.exchange-switcher-copy .panel-kicker { display: none; }
.exchange-switcher-copy h2 { margin: 0; font-size: 14px; font-weight: 600; }
.exchange-switcher-copy > p:last-child { min-width: 0; margin: 0 0 0 auto; color: var(--faint); font-size: 11px; line-height: 1.6; }
.exchange-selector { min-width: 0; display: grid; gap: 12px; }
.selector-block { min-width: 0; display: grid; gap: 7px; }
.selector-label { color: var(--muted); font-size: 11px; letter-spacing: .03em; }
.exchange-selector > .selector-block:first-child > .selector-label { display: none; }
.exchange-buttons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.exchange-button {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.exchange-button:hover { color: var(--text); border-color: #354658; background: var(--surface-strong); }
.exchange-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.exchange-button[aria-pressed="true"] { color: var(--text); border-color: rgba(45,212,191,.48); background: var(--teal-soft); box-shadow: inset 0 0 0 1px rgba(45,212,191,.08); }
.exchange-button:disabled { cursor: wait; opacity: .62; }
.exchange-name { font-size: 13px; font-weight: 600; }
.exchange-state { color: var(--faint); font-size: 10px; }
.exchange-state::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px 0; border-radius: 50%; background: currentColor; }
.exchange-button.configured .exchange-state { color: var(--blue); }
.exchange-button.ready .exchange-state, .exchange-button[aria-pressed="true"] .exchange-state { color: var(--teal); }
.exchange-button.blocked .exchange-state,
.exchange-button.blocked[aria-pressed="true"] .exchange-state { color: var(--amber); }
.exchange-button.blocked[aria-pressed="true"] { border-color: rgba(244,185,66,.44); background: var(--amber-soft); }
.exchange-button.unconfigured { background: transparent; border-color: var(--line-soft); }
.account-selector {
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.account-selector[hidden] { display: none; }
.account-selector-heading { min-width: 0; display: grid; gap: 5px; }
.account-selector-heading small { color: var(--faint); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.account-buttons { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.account-button {
  min-width: 112px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.account-button:hover { color: var(--text); border-color: #354658; background: var(--surface-strong); }
.account-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.account-button[aria-pressed="true"] { color: var(--text); border-color: rgba(45,212,191,.55); background: var(--teal-soft); }
.account-button:disabled { cursor: wait; opacity: .62; }
.account-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.account-state { color: var(--faint); font-size: 10px; white-space: nowrap; }
.account-button.configured .account-state { color: var(--blue); }
.account-button.ready .account-state, .account-button[aria-pressed="true"] .account-state { color: var(--teal); }
.account-button.blocked .account-state { color: var(--amber); }
.account-button.blocked[aria-pressed="true"] { border-color: rgba(244,185,66,.44); background: var(--amber-soft); }
.account-button.unconfigured { opacity: .68; }
.overview-button { border-color: rgba(167,139,250,.24); background: rgba(167,139,250,.055); }
.overview-button .exchange-name { color: #c4b5fd; }
.overview-button[aria-pressed="true"] { border-color: rgba(167,139,250,.55); background: rgba(167,139,250,.13); }
.overview-button[aria-pressed="true"] .exchange-state { color: #c4b5fd; }

.accounts-overview-page { display: grid; gap: 14px; margin-bottom: 18px; }
.accounts-overview-page[hidden] { display: none; }
#overview-content { display: grid; gap: 14px; }
.overview-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(167,139,250,.08), var(--surface) 42%); box-shadow: var(--panel-shadow); }
.overview-page-heading h2 { margin: 2px 0 0; font-size: 21px; }
.overview-page-heading p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.overview-updated { flex: 0 0 auto; display: grid; gap: 5px; text-align: right; }
.overview-updated span { color: var(--faint); font-size: 9px; letter-spacing: .08em; }
.overview-updated strong { color: var(--teal); font: 12px var(--mono); }
.overview-load-state { min-height: 180px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); font-size: 12px; }
.overview-load-state[hidden] { display: none; }
.overview-load-state.error { color: var(--danger); }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.overview-metrics article { min-width: 0; min-height: 106px; display: grid; align-content: space-between; gap: 7px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--panel-shadow); }
.overview-metrics span { color: var(--muted); font-size: 11px; }
.overview-metrics strong { font: 25px var(--mono); }
.overview-metrics small { color: var(--faint); font: 8px var(--mono); letter-spacing: .12em; }
.overview-money-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.overview-money-grid > article { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--panel-shadow); }
.overview-money-grid > article > span { color: var(--muted); font-size: 11px; }
.overview-money-grid > article > small { display: block; margin-top: 10px; color: var(--faint); font-size: 11px; line-height: 1.6; }
.overview-money-grid > .overview-total-profit { border-color: rgba(45,212,191,.25); background: linear-gradient(120deg, rgba(45,212,191,.045), var(--surface) 75%); }
.overview-money-values { min-height: 31px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px 16px; margin-top: 10px; }
.overview-money-values > div { display: flex; align-items: baseline; gap: 6px; }
.overview-money-values strong { font: 20px var(--mono); }
.overview-money-values span { color: var(--faint); font: 9px var(--mono); }
.overview-account-section { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow); }
.overview-section-header { border-bottom: 1px solid var(--line-soft); }
.overview-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.overview-account-card { min-width: 0; display: grid; gap: 18px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 11px; color: var(--text); text-align: left; background: var(--surface-soft); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.overview-account-card:hover { border-color: #354658; background: var(--surface-strong); transform: translateY(-1px); }
.overview-account-card:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.overview-account-card.ready { border-color: rgba(45,212,191,.2); }
.overview-account-card.blocked { border-color: rgba(244,185,66,.3); }
.overview-account-header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.overview-account-header > div { min-width: 0; display: grid; gap: 4px; }
.overview-account-header > div span { color: var(--teal); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.overview-account-header > div strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.overview-account-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 6px; color: var(--muted); background: rgba(145,161,175,.1); font-size: 11px; }
.overview-account-state.ready { color: var(--teal); background: var(--teal-soft); }
.overview-account-state.blocked { color: var(--amber); background: var(--amber-soft); }
.overview-account-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.overview-account-metrics > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px; padding: 9px; border-radius: 8px; background: rgba(255,255,255,.025); }
.overview-account-metrics span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; white-space: nowrap; }
.overview-account-metrics strong { min-width: 0; font: 13px var(--mono); overflow-wrap: anywhere; }
.overview-account-metrics small { grid-column: 1 / -1; color: var(--faint); font: 10px var(--mono); }
.overview-account-footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.overview-account-footer span { min-width: 0; overflow: hidden; color: var(--faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.overview-account-footer strong { flex: 0 0 auto; color: var(--teal); font-size: 11px; }
.overview-positions-panel { overflow: hidden; }

.tradingview-setup { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.tradingview-setup > summary { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px 18px; list-style: none; cursor: pointer; }
.tradingview-setup > summary::-webkit-details-marker { display: none; }
.tradingview-setup > summary:hover { background: rgba(255,255,255,.02); }
.setup-title { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 550; }
.setup-title .button-icon { color: var(--teal); }
.setup-hint { margin-left: auto; color: var(--faint); font-size: 12px; }
.setup-chevron { flex: 0 0 auto; width: 7px; height: 7px; margin-left: 4px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); transition: transform .18s ease; }
.tradingview-setup[open] .setup-chevron { transform: rotate(225deg); }
.tradingview-tools {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 31%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: none;
}
.tradingview-tools-copy, .copy-control { padding: 17px 18px; background: var(--surface); }
.tradingview-tools-copy { grid-row: 1 / 3; border-right: 1px solid var(--line-soft); }
.tradingview-tools-copy h2 { margin: 0; font-size: 16px; }
.tradingview-tools-copy > p:last-child { max-width: 310px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.copy-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 8px 14px; }
.copy-control-url { border-bottom: 1px solid var(--line-soft); }
.copy-control > span { grid-column: 1 / -1; color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }
.copy-control code, .copy-control strong { min-width: 0; overflow: hidden; color: var(--text); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.copy-control-url code { color: var(--teal); }
.copy-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--surface-strong);
  cursor: pointer;
  font-size: 11px;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.copy-button:hover { border-color: #354658; background: #172433; }
.copy-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.copy-button.primary { border-color: rgba(45,212,191,.3); color: var(--teal); background: var(--teal-soft); }
.template-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.template-buttons .copy-button { width: 100%; padding-inline: 9px; white-space: nowrap; }
.copy-button:disabled { cursor: wait; opacity: .55; }
.copy-feedback { grid-column: 2; min-height: 0; margin: 0; color: var(--teal); background: var(--surface); font: 10px var(--mono); }
.copy-feedback:not(:empty) { padding: 9px 18px; border-top: 1px solid var(--line-soft); }
.copy-feedback.error { color: var(--danger); }

.load-error, .risk-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}
.load-error { border-color: rgba(251,113,133,.35); background: var(--danger-soft); }
.load-error[hidden] { display: none; }
.load-error strong { font-size: 13px; }
.load-error span { color: var(--muted); font-size: 12px; }
.risk-banner { border-color: rgba(244,185,66,.22); background: linear-gradient(90deg, var(--amber-soft), var(--surface) 72%); }
.risk-banner.ready { border-color: rgba(45,212,191,.2); background: linear-gradient(90deg, var(--teal-soft), var(--surface) 72%); }
.risk-signal { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--amber-soft); }
.risk-signal span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(244,185,66,.55); }
.risk-banner.ready .risk-signal { background: var(--teal-soft); }
.risk-banner.ready .risk-signal span { background: var(--teal); box-shadow: 0 0 12px rgba(45,212,191,.55); }
.risk-title { margin: 0 0 4px; font-size: 13px; font-weight: 750; }
.risk-copy { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.mode-tag { flex: 0 0 auto; margin-left: auto; padding: 6px 9px; border: 1px solid rgba(244,185,66,.32); border-radius: 6px; color: var(--amber); font: 10px var(--mono); letter-spacing: .06em; }
.risk-banner.ready .mode-tag { border-color: rgba(45,212,191,.28); color: var(--teal); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow); }
.metric-card { position: relative; min-width: 0; overflow: hidden; min-height: 105px; padding: 16px 18px; }
.metric-card::after { content: ""; position: absolute; top: 19px; left: 0; width: 3px; height: 14px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: .8; }
.accent-teal { --accent: var(--teal); }
.accent-amber { --accent: var(--amber); }
.accent-blue { --accent: var(--blue); }
.accent-violet { --accent: var(--violet); }
.metric-head { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.metric-code { color: var(--faint); font: 9px var(--mono); letter-spacing: .11em; }
.metric-value { display: block; margin-top: 12px; font: 500 25px/1 var(--mono); letter-spacing: -.04em; overflow-wrap: anywhere; }
.metric-card p { margin: 9px 0 0; color: var(--faint); font-size: 11px; line-height: 1.5; }

.fund-stat { min-width: 0; padding: 22px 20px; }
.fund-stat + .fund-stat { border-left: 1px solid var(--line); }
.fund-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.fund-stat-head span:last-child { color: var(--faint); font: 9px var(--mono); letter-spacing: .11em; }
.fund-stat-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 20px; }
.fund-stat-value strong { min-width: 0; font: clamp(18px, 1.7vw, 24px)/1 var(--mono); letter-spacing: -.04em; overflow-wrap: anywhere; }
.fund-stat-value span { color: var(--muted); font: 10px var(--mono); }
.fund-stat p { margin: 14px 0 0; color: var(--faint); font-size: 11px; line-height: 1.6; }
.fund-stat.today { background: rgba(96,165,250,.025); }

.account-profit-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.profit-card { min-width: 0; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--panel-shadow); }
.profit-card.funds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; border-color: rgba(45,212,191,.24); background: linear-gradient(120deg, rgba(45,212,191,.07), var(--surface) 60%); }
.profit-card > span { display: block; color: var(--muted); font-size: 12px; }
.profit-card strong { display: inline-block; max-width: 100%; margin-top: 20px; font: 500 clamp(22px, 1.85vw, 30px)/1.15 var(--mono); letter-spacing: -.05em; overflow-wrap: anywhere; }
.profit-card.funds .fund-stat-value strong { margin-top: 0; font-size: clamp(22px, 1.85vw, 30px); }
.profit-card small { margin-left: 8px; color: var(--faint); font: 9px var(--mono); }
.profit-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: var(--faint); font-size: 11px; }
.profit-rate { min-height: 27px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 6px; color: var(--text); background: rgba(130,147,163,.1); font: 750 14px/1 var(--mono); }
.profit-rate.profit-positive { background: var(--teal-soft); }
.profit-rate.profit-negative { background: var(--danger-soft); }
.profit-currency { color: var(--muted); font-size: 10px; }
.profit-card.realized, .profit-card.unrealized { border-color: var(--line); }

.profit-curve-panel { overflow: hidden; border-color: rgba(45,212,191,.17); }
.profit-curve-panel > summary {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 15px 20px;
  border-bottom: 0 solid var(--line-soft);
  cursor: pointer;
  list-style: none;
}
.profit-curve-panel[open] > summary { border-bottom-width: 1px; }
.profit-curve-panel > summary::-webkit-details-marker { display: none; }
.profit-curve-panel > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.profit-curve-panel > summary strong { display: block; font-size: 16px; }
.curve-summary-value { padding: 7px 10px; border: 1px solid rgba(45,212,191,.15); border-radius: 7px; background: rgba(45,212,191,.055); font: 700 14px var(--mono); }
.curve-toggle { color: var(--muted); font: 10px var(--mono); }
.curve-toggle::before { content: "＋"; display: inline-block; margin-right: 6px; color: var(--teal); }
.profit-curve-panel[open] > summary .curve-toggle::before { content: "－"; }
.profit-curve-panel { scroll-margin-top: 24px; }
.profit-curve-panel > [role="tabpanel"][hidden], .curve-summary-value[hidden] { display: none; }
.profit-view-tabs { display: flex; gap: 4px; width: fit-content; max-width: calc(100% - 40px); margin: 16px 20px 0; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.profit-view-tabs button { border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; padding: 9px 20px; font-size: 13px; }
.profit-view-tabs button[aria-selected="true"] { color: var(--teal); border-color: rgba(45,212,191,.25); background: var(--teal-soft); }
.profit-view-tabs button:hover { color: var(--text); }
.profit-view-tabs button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.profit-curve-content { padding: 18px 20px 15px; }
.chart-wrap {
  position: relative;
  min-height: 274px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
#profit-curve-chart { display: block; width: 100%; height: 274px; }
.chart-grid { stroke: rgba(84,106,122,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-zero { stroke: rgba(145,161,175,.42); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.chart-axis-label { fill: var(--muted); font: 11px var(--mono); }
.chart-time-label { fill: var(--faint); font: 10px var(--mono); letter-spacing: .02em; }
.chart-area { fill: url(#profit-area-positive); }
.chart-line { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(45,212,191,.16)); }
.chart-area.negative { fill: url(#profit-area-negative); }
.chart-line.negative { stroke: var(--danger); }
.chart-point { fill: #0d1720; stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: r .16s ease, opacity .16s ease; }
.chart-point:not(.current) { opacity: .72; }
.chart-point:not(.current):hover { r: 4.5px; opacity: 1; }
.chart-point.current { fill: var(--violet); stroke: #e1d8ff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(167,139,250,.55)); }
.chart-current-halo { fill: rgba(167,139,250,.12); stroke: rgba(167,139,250,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 145px;
  max-width: 230px;
  padding: 9px 11px;
  border: 1px solid rgba(92,119,138,.42);
  border-radius: 8px;
  color: var(--text);
  background: rgba(8,14,20,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  font: 10px/1.55 var(--mono);
  white-space: nowrap;
}
.chart-tooltip.align-left { transform: translate(0, calc(-100% - 12px)); }
.chart-tooltip.align-right { transform: translate(-100%, calc(-100% - 12px)); }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { display: block; margin-bottom: 2px; color: var(--teal); font-size: 12px; }
.chart-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.chart-empty[hidden] { display: none; }
.chart-empty strong { font-size: 13px; }
.chart-empty p { margin: 7px 0 0; color: var(--faint); font-size: 11px; }
.chart-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; padding: 13px 3px 0; color: var(--faint); font-size: 10px; }
.chart-footer > span { display: inline-flex; align-items: center; gap: 7px; }
.chart-footer > span:last-child { margin-left: auto; font-family: var(--mono); }
.legend-line { width: 18px; height: 2px; background: var(--teal); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

.history-panel { overflow: hidden; }
.history-panel > summary {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
}
.history-panel[open] > summary { border-bottom: 1px solid var(--line-soft); }
.history-panel > summary::-webkit-details-marker { display: none; }
.history-panel > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.history-panel summary > span:first-child > strong { display: block; font-size: 16px; }
.history-summary { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); }
.history-summary strong { color: var(--text); font: 18px/1 var(--mono); }
.history-summary small { color: var(--faint); font-size: 10px; }
.history-toggle { color: var(--muted); font: 10px var(--mono); }
.history-toggle::before { content: "＋"; display: inline-block; margin-right: 6px; color: var(--teal); }
.history-panel[open] .history-toggle::before { content: "－"; }
.history-content { padding: 0 0 2px; }
.history-note { margin: 0; padding: 11px 20px; border-bottom: 1px solid var(--line-soft); color: var(--muted); background: rgba(96,165,250,.045); font-size: 11px; line-height: 1.65; }
.empty-state.compact { padding-block: 32px; }

.portfolio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.portfolio-grid .panel { min-width: 0; margin-top: 0; }
.performance-summary { display: grid; gap: 1px; padding: 12px 18px; background: var(--line-soft); }
.performance-primary { position: relative; min-width: 0; padding: 17px 15px; background: var(--surface); }
.performance-primary span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; }
.performance-primary strong { font: 25px/1 var(--mono); letter-spacing: -.04em; overflow-wrap: anywhere; }
.performance-primary small { margin-left: 7px; color: var(--faint); font: 9px var(--mono); }
.performance-breakdown { margin: 0; padding: 5px 18px; }
.performance-breakdown div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.performance-breakdown div:last-child { border-bottom: 0; }
.performance-breakdown dt { color: var(--muted); font-size: 11px; }
.performance-breakdown dd { min-width: 0; margin: 0; color: var(--text); font: 10px var(--mono); text-align: right; overflow-wrap: anywhere; }
.calculation-note { margin: 4px 13px 13px; padding: 12px 13px; border-radius: 8px; color: var(--muted); background: var(--surface-soft); font-size: 10px; line-height: 1.65; }
.profit-positive { color: var(--teal) !important; }
.profit-negative { color: var(--danger) !important; }
.profit-flat { color: var(--muted) !important; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.panel { min-width: 0; margin-top: 14px; overflow: hidden; }
.content-grid .panel { margin-top: 0; }
.panel-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--line-soft); }
.panel-header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.panel-kicker { margin-bottom: 5px; color: var(--faint); font-size: 9px; }
.panel-note, .last-updated { color: var(--faint); font-size: 10px; white-space: nowrap; }
.last-updated { display: flex; align-items: center; gap: 8px; }
.last-updated strong { color: var(--muted); font: 10px var(--mono); }
.status-guidance { margin: 0; padding: 11px 20px; border-bottom: 1px solid var(--line-soft); color: var(--muted); background: rgba(96,165,250,.045); font-size: 11px; line-height: 1.65; }
.status-guidance strong:first-child { color: var(--blue); }
.status-guidance strong:last-child { color: var(--teal); }

.table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line); }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 13px 14px; color: var(--muted); background: var(--surface-soft); font: 500 11px var(--sans); letter-spacing: .02em; text-align: left; }
td { padding: 18px 14px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
tbody tr:first-child td { border-top: 0; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgba(160,190,220,.045); }
.cell-main { color: var(--text); font: 12px var(--mono); }
.cell-muted { color: var(--muted); font: 11px var(--mono); }
.history-merged-count { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.direction, .status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 9px; border-radius: 6px; font: 500 11px var(--sans); }
.direction.long { color: var(--teal); background: var(--teal-soft); }
.direction.short { color: var(--danger); background: var(--danger-soft); }
.status-badge.pending { color: var(--amber); background: var(--amber-soft); }
.status-badge.submitted { color: var(--blue); background: var(--blue-soft); }
.status-badge.confirmed { color: var(--teal); background: var(--teal-soft); }
.status-badge.unknown { color: var(--amber); background: var(--amber-soft); }
.status-badge.failed { color: var(--danger); background: var(--danger-soft); }
.status-badge.open { color: var(--blue); background: var(--blue-soft); }
.status-badge.closed { color: var(--muted); background: rgba(130,147,163,.1); }
.latency-submit { color: var(--blue); }
.latency-final { color: var(--teal); }

.settings-list { margin: 0; padding: 6px 18px; }
.settings-list div { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); align-items: start; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.settings-list div:last-child { border-bottom: 0; }
.settings-list dt { color: var(--muted); font-size: 11px; line-height: 1.55; }
.settings-list dd { min-width: 0; margin: 0; font: 10px/1.55 var(--mono); text-align: right; overflow-wrap: anywhere; }
#size-mode { color: var(--text); white-space: pre-line; }
.settings-foot { margin: 4px 13px 13px; padding: 13px; border-radius: 9px; background: var(--surface-soft); }
.settings-foot span { display: block; margin-bottom: 7px; color: var(--faint); font: 9px var(--mono); letter-spacing: .1em; }
.settings-foot code { display: block; overflow: hidden; color: var(--teal); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }

/* Wide tables keep the full workspace; supporting summaries sit beneath them. */
.performance-panel { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 2fr) minmax(210px, 1.2fr); align-items: center; }
.performance-panel .panel-header { border-bottom: 0; }
.performance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; background: transparent; }
.performance-primary { padding: 12px; border-left: 1px solid var(--line-soft); background: transparent; }
.performance-primary strong { font-size: 23px; }
.performance-primary small { display: block; margin: 7px 0 0; font-size: 11px; }
.performance-breakdown dd { font-size: 11px; }
.performance-panel > .calculation-note { grid-column: 1 / -1; }
.settings-panel { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; }
.settings-panel .panel-header { border-bottom: 0; }
.settings-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding-block: 8px; }
.settings-list div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 12px; }
.settings-list dd { text-align: left; font-size: 12px; }
.settings-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-block: 10px; }
.settings-foot span { margin: 0; }
.settings-foot code { font-size: 11px; }
.positions-panel th:nth-child(n+3), .positions-panel td:nth-child(n+3),
.history-panel th:nth-child(n+5):nth-child(-n+10), .history-panel td:nth-child(n+5):nth-child(-n+10) { text-align: right; }
.panel-wide th:nth-child(n+6):nth-child(-n+10), .panel-wide td:nth-child(n+6):nth-child(-n+10) { text-align: right; }

.empty-state { padding: 38px 20px; text-align: center; }
.empty-state[hidden] { display: none; }
.empty-glyph { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--faint); font: 11px var(--mono); }
.empty-state strong { display: block; font-size: 13px; }
.empty-state p { margin: 7px 0 0; color: var(--faint); font-size: 11px; }

.log-list { display: grid; }
.log-row { display: grid; grid-template-columns: 78px 122px minmax(0, 1fr) 58px; gap: 15px; align-items: start; padding: 13px 20px; border-top: 1px solid var(--line-soft); }
.log-row:first-child { border-top: 0; }
.log-time, .log-source, .log-level { padding-top: 2px; font: 11px/1.6 var(--mono); }
.log-time { color: var(--faint); }
.log-source { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.log-message { min-width: 0; color: #b8c5ce; font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.log-level { justify-self: end; color: var(--teal); text-transform: uppercase; }
.log-level.warning { color: var(--amber); }
.log-level.error, .log-level.critical { color: var(--danger); }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 2px 0; color: var(--faint); font: 9px var(--mono); letter-spacing: .08em; }

@media (max-width: 1250px) {
  .overview-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-grid, .content-grid { grid-template-columns: 1fr; }
  .performance-summary { grid-template-columns: 1fr 1fr; }
  .topbar { flex-wrap: wrap; gap: 16px; }
  .topbar-actions { justify-content: flex-start; }
  .account-profit-grid { grid-template-columns: 1fr 1fr; }
  .profit-card.funds { grid-column: 1 / -1; }
  .performance-panel { grid-template-columns: 1fr 1fr; }
  .performance-panel .panel-header { grid-column: 1 / -1; border-bottom: 1px solid var(--line-soft); }
  .settings-panel { grid-template-columns: 1fr; }
}

@media (max-width: 1060px) {
  .exchange-switcher { grid-template-columns: 1fr; gap: 16px; }
  .exchange-switcher-copy { max-width: 620px; }
  .tradingview-tools { grid-template-columns: 1fr; }
  .tradingview-tools-copy { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .tradingview-tools-copy > p:last-child { max-width: none; }
  .copy-feedback { grid-column: 1; }
  .exchange-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .overview-account-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 840px) {
  .sidebar { position: static; width: auto; height: auto; padding: 17px 18px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .brand { padding: 0; }
  .nav-list { grid-template-columns: repeat(7, max-content); gap: 4px; margin-top: 17px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
  .nav-item { min-height: 40px; padding: 0 12px; font-size: 13px; }
  .nav-item.active::before { inset: auto 10px 0; width: auto; height: 2px; }
  .nav-icon { width: 16px; height: 16px; }
  .sidebar-meta { display: none; }
  .workspace { margin-left: 0; padding: 24px 18px 28px; }
  .topbar { align-items: flex-start; }
  .risk-banner { align-items: flex-start; }
  .mode-tag { flex: 0 0 auto; }
  .log-row { grid-template-columns: 70px 92px minmax(130px, 1fr) 52px; gap: 10px; }
  .profit-curve-panel > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .curve-toggle { display: none; }
  .history-panel > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .history-toggle { display: none; }
  .overview-money-grid { grid-template-columns: minmax(0, 1fr); }
  .account-selector { grid-template-columns: minmax(0, 1fr); }
  .account-buttons { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .topbar { display: grid; }
  .topbar-actions { width: 100%; justify-content: flex-start; gap: 8px; }
  .topbar-actions .service-pill { flex-basis: 100%; min-height: 28px; padding: 0 4px; border: 0; background: transparent; }
  .page-description { font-size: 12px; }
  .account-profit-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .profit-card { padding: 18px 14px; }
  .profit-card strong { font-size: 22px; }
  .profit-card.funds .fund-stat-value strong { font-size: 23px; }
  .fund-stat { padding: 16px 14px; }
  .fund-stat-head span:last-child { display: none; }
  .fund-stat-value strong { font-size: clamp(21px, 7vw, 27px); }
  .fund-stat p { font-size: 11px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 94px; padding: 15px; }
  .metric-value { margin-top: 14px; font-size: 25px; }
  .metric-card p { display: none; }
  .performance-panel { grid-template-columns: minmax(0, 1fr); }
  .performance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 6px; }
  .performance-primary strong { font-size: 23px; }
  .profit-curve-content { padding-inline: 12px; }
  .chart-wrap, #profit-curve-chart { min-height: 230px; height: 230px; }
  .chart-footer > span:last-child { width: 100%; margin-left: 0; }
  .risk-copy { line-height: 1.55; }
  .exchange-switcher { padding: 14px; }
  .exchange-switcher-copy { display: grid; }
  .exchange-switcher-copy > p:last-child { margin-left: 0; }
  .exchange-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .exchange-button { min-width: 0; }
  .exchange-name { font-size: 12px; }
  .exchange-state { font-size: 11px; }
  .setup-hint { display: none; }
  .setup-chevron { margin-left: auto; }
  .settings-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-page-heading { align-items: flex-start; flex-direction: column; padding: 17px; }
  .overview-updated { text-align: left; }
  .overview-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .overview-metrics article { min-height: 96px; padding: 13px; }
  .overview-account-grid { padding: 9px; }
  .overview-account-metrics { grid-template-columns: 1fr 1fr; }
  .account-selector-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .account-selector-heading small { white-space: normal; }
  .account-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .account-button { min-width: 0; }
  .copy-control { grid-template-columns: 1fr auto; padding: 15px; }
  .copy-control-template { grid-template-columns: 1fr; }
  .copy-control-template > span, .copy-control-template > strong, .copy-control-template > .template-buttons { grid-column: 1; }
  .template-buttons { grid-template-columns: 1fr; }
  .copy-feedback:not(:empty) { padding-inline: 15px; }
  .history-note { padding-inline: 15px; }
  .config-dialog { width: calc(100vw - 18px); max-height: 96vh; }
  .config-dialog form { max-height: 96vh; }
  .config-dialog-header { padding: 18px 16px 15px; }
  .config-dialog-header h2 { font-size: 20px; }
  .config-toolbar { grid-template-columns: 1fr; gap: 9px; padding: 11px 16px; }
  .config-view-tabs { grid-template-columns: 1fr 1fr; }
  .config-search-wrap { align-items: stretch; flex-direction: column; }
  .config-toolbar input, .config-toolbar select { width: 100%; min-width: 0; }
  .config-view-note { grid-column: 1; }
  .config-safety-note { align-items: flex-start; padding: 10px 16px; }
  .config-groups { padding: 5px 14px 18px; }
  .config-field-grid { grid-template-columns: 1fr; }
  .config-field-description { min-height: 0; }
  .account-display-name-grid { grid-template-columns: minmax(0, 1fr); }
  .account-display-name-field { grid-template-columns: minmax(96px, .4fr) minmax(0, 1fr); }
  .exchange-account-list, .exchange-account-form-grid, .exchange-account-form-grid.credential-grid { grid-template-columns: minmax(0, 1fr); }
  .exchange-account-builder { grid-template-columns: minmax(0, 1fr); }
  .exchange-account-builder-actions { grid-column: 1; align-items: stretch; flex-direction: column; }
  .exchange-account-add { width: 100%; }
  .config-dialog-footer { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; padding: 13px 16px; gap: 12px; }
  .config-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .config-dialog-actions button { min-height: 42px; white-space: nowrap; }
  .panel-header { padding-inline: 15px; }
  th, td { padding-inline: 15px; }
  .log-source { display: none; }
  .log-row { grid-template-columns: 1fr auto; gap: 7px 12px; padding-inline: 15px; }
  .log-message { grid-column: 1 / -1; }
  footer { display: grid; }
}

@media (max-width: 390px) {
  .workspace { padding-inline: 13px; }
  .metric-code { display: none; }
  .exchange-button { padding-inline: 10px; }
  .refresh-button, .config-button, .logout-button, .restart-button, .reset-data-button { flex: 1 1 auto; justify-content: center; }
  .risk-banner { display: grid; grid-template-columns: auto 1fr; }
  .mode-tag { grid-column: 1 / -1; width: max-content; margin-left: 0; }
  .profit-curve-panel > summary { gap: 12px; }
  .curve-summary-value { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
:root { --account-control-border: rgba(95, 140, 169, .25); }
.account-control-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:0; margin-bottom:14px; padding:15px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.account-control-bar[hidden] { display:none; }
.account-control-bar > div { flex:1; min-width:230px; }
.account-control-bar p { margin:7px 0 0; color:var(--muted, #8da5b7); font-size:12px; }
.account-control-bar strong { font-size: 13px; font-weight: 600; }
.account-control-bar .config-button { min-height: 36px; padding-inline: 12px; }
.account-control-bar p#account-control-note { margin: 0; color: var(--faint); font-size: 11px; line-height: 1.6; }
#account-control-note { width:100%; }
.risk-resume-button:not(:disabled) { border-color:rgba(245, 183, 71, .5); color:#f5c778; }
.risk-resume-button:disabled { opacity:.45; cursor:not-allowed; }
.account-parameter-panel { border-top:1px solid var(--account-control-border); margin-top:14px; padding-top:12px; }
.account-parameter-panel > summary { cursor:pointer; font-weight:650; padding:6px 0 14px; }
.account-parameter-item { display:flex; flex-direction:column; gap:9px; min-width:0; padding:12px; border:1px solid var(--account-control-border); border-radius:9px; }
.account-parameter-label { display:flex; gap:8px; align-items:center; font-size:12px; }
.account-parameter-item input[type=checkbox] { width:16px; height:16px; accent-color:#2dd4bf; flex-shrink:0; }
.account-parameter-item input[type=number], .account-parameter-item select { width:100%; min-height:38px; padding:8px 10px; color:#dcebf5; background:#0b131c; border:1px solid #294151; border-radius:7px; }
.account-parameter-item input:disabled, .account-parameter-item select:disabled { opacity:.55; }
.account-parameter-item small { color:var(--muted, #8da5b7); font-size:11px; }
.signal-detail-button { display:inline-block; margin-left:10px; padding:5px 8px; color:#2dd4bf; border:1px solid #294151; border-radius:6px; background:transparent; cursor:pointer; }
.signal-detail-dialog { width:min(960px, calc(100vw - 28px)); max-height:88vh; box-sizing:border-box; padding:24px; color:#dcebf5; background:#101b25; border:1px solid #294151; border-radius:14px; overflow:auto; }
.signal-detail-dialog::backdrop { background:rgba(2, 7, 12, .78); }
.signal-detail-dialog header { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.signal-detail-dialog h2 { margin:4px 0 10px; font-size:19px; overflow-wrap:anywhere; }
.signal-detail-dialog h3 { margin:24px 0 12px; font-size:14px; }
.signal-detail-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0; }
.signal-detail-grid > div { padding:12px; background:#0b131c; border:1px solid #213543; border-radius:8px; min-width:0; }
.signal-detail-grid dt { font-size:11px; color:#8da5b7; margin-bottom:7px; }
.signal-detail-grid dd { margin:0; font-size:13px; overflow-wrap:anywhere; }
@media(max-width:680px) { .signal-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .signal-detail-dialog { padding:16px; } }
@media(max-width:420px) { .signal-detail-grid { grid-template-columns:1fr; } }
/* Online updates share the existing management dialog visual language. */
.update-dialog { width: min(620px, calc(100vw - 32px)); }
.update-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 12px; }
.update-versions > div { padding: 14px; border: 1px solid var(--border, #243746); border-radius: 10px; min-width: 0; }
.update-versions span { display: block; color: #91a6b7; font-size: 12px; margin-bottom: 8px; }
.update-versions strong { display: block; color: #d9eef7; font-size: 15px; overflow-wrap: anywhere; }
.update-notes-section { margin: 18px 0; }
.update-notes-section h3 { margin: 0 0 10px; color: #d9eef7; font-size: 14px; }
.update-notes { white-space: pre-wrap; overflow-wrap: anywhere; max-height: min(320px, 38vh); overflow: auto; color: #c2d1dc; font: inherit; font-size: 13px; line-height: 1.75; margin: 0; padding: 14px; background: #0b141c; border: 1px solid var(--border, #243746); border-radius: 8px; }
.update-dialog .reset-dialog-actions { flex-wrap: wrap; }
.update-versions small { display: block; color: #91a6b7; font-size: 12px; margin-top: 7px; }
.update-hint, .update-help { color: #a9bdcc; font-size: 13px; line-height: 1.65; }
.update-help { margin: 12px 0; padding: 12px; border: 1px solid var(--border, #243746); border-radius: 8px; }
.update-help summary { cursor: pointer; color: #d9eef7; }
.update-help code { overflow-wrap: anywhere; }
#update-confirm-area { padding: 12px; border: 1px solid #a87930; border-radius: 8px; margin-top: 12px; }