/*
 * Interface v4
 * One visual authority for density, hierarchy and responsive layout.
 * Color is semantic: page identity, evidence and status never rotate by DOM order.
 */

:root {
  --ui-bg: #071019;
  --ui-surface: #0c1622;
  --ui-surface-raised: #101c2a;
  --ui-surface-soft: #0a131e;
  --ui-line: rgba(166, 190, 219, 0.14);
  --ui-line-strong: rgba(178, 205, 235, 0.24);
  --ui-text: #edf5ff;
  --ui-muted: #91a4bb;
  --ui-subtle: #6f8299;
  --ui-positive: #42d392;
  --ui-warning: #f3b84b;
  --ui-danger: #f06f82;
  --ui-info: #65a5ff;
  --ui-r-1: 7px;
  --ui-r-2: 10px;
  --ui-r-3: 14px;
  --ui-r-4: 18px;
  --ui-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  --ui-shadow-soft: 0 7px 20px rgba(0, 0, 0, 0.14);
  --ui-chart-sm: 204px;
  --ui-chart-md: 248px;
  --ui-chart-lg: 330px;
  --ui-chart-xl: 448px;
  --tv-background: #0b0e11;
  --tv-surface: #11151c;
  --tv-toolbar: #131722;
  --tv-border: rgba(120, 138, 163, 0.22);
  --tv-grid: rgba(120, 138, 163, 0.10);
  --tv-grid-strong: rgba(120, 138, 163, 0.30);
  --tv-crosshair: rgba(178, 188, 203, 0.46);
  --tv-muted: #9aa4b2;
  --tv-primary: var(--page-primary);
  --tv-secondary: var(--page-secondary);
  --tv-warning: #f2c94c;
  --tv-positive: #26a69a;
  --tv-negative: #ef5350;
  --tv-cyan: #26c6da;
  --page-primary: #36c9b5;
  --page-secondary: #5a9df8;
  --page-tertiary: #f0b14a;
  --page-rgb: 54 201 181;
}

body[data-view="market"] {
  --page-primary: #35cbb6;
  --page-secondary: #5ca4ff;
  --page-tertiary: #f2b64d;
  --page-rgb: 53 203 182;
}

body[data-view="detail"] {
  --page-primary: #609cff;
  --page-secondary: #9b7cf7;
  --page-tertiary: #ee8a6f;
  --page-rgb: 96 156 255;
}

body[data-view="multi"] {
  --page-primary: #31c8cf;
  --page-secondary: #58cf8b;
  --page-tertiary: #9d7bf4;
  --page-rgb: 49 200 207;
}

body[data-view="ml"] {
  --page-primary: #9a79f5;
  --page-secondary: #4dc4df;
  --page-tertiary: #ed78ae;
  --page-rgb: 154 121 245;
}

body[data-view="success"] {
  --page-primary: #51ce8b;
  --page-secondary: #5f9df8;
  --page-tertiary: #f0b34e;
  --page-rgb: 81 206 139;
}

body[data-view="statistics"] {
  --page-primary: #35c9c0;
  --page-secondary: #7d8dff;
  --page-tertiary: #efa954;
  --page-rgb: 53 201 192;
}

body[data-view="alarms"] {
  --page-primary: #ef7486;
  --page-secondary: #f0b14a;
  --page-tertiary: #9b79ed;
  --page-rgb: 239 116 134;
}

body[data-view="data"] {
  --page-primary: #5ca5f3;
  --page-secondary: #41c7bd;
  --page-tertiary: #ee9b55;
  --page-rgb: 92 165 243;
}

/* Statistics evidence workspace */
.statistics-filters {
  display: grid;
  grid-template-columns: minmax(170px, 0.85fr) minmax(150px, 0.7fr) minmax(220px, 1.15fr) auto;
  gap: 9px;
  align-items: end;
}

.statistics-filters > div,
.statistics-detail-controls > div {
  min-width: 0;
}

.statistics-chart-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
}

.statistics-matrix-wrap {
  overflow-x: auto;
}

.statistics-matrix {
  min-width: 780px;
}

.statistics-matrix th:first-child {
  width: 180px;
}

.statistics-matrix td {
  padding: 5px !important;
}

.statistics-cell {
  width: 100%;
  min-height: 67px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-2);
  color: var(--ui-text);
  text-align: left;
  background: var(--ui-surface-soft);
}

.statistics-cell:hover {
  border-color: rgb(var(--page-rgb) / 0.55);
  transform: translateY(-1px);
}

.statistics-cell > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.statistics-cell > span b {
  font-size: 1.08rem;
}

.statistics-cell small,
.statistics-cell em {
  color: var(--ui-muted);
  font-size: 0.72rem;
  font-style: normal;
}

.statistics-cell > strong {
  font-size: 0.82rem;
}

.statistics-cell > em {
  grid-column: 1 / -1;
}

.statistics-cell.good {
  border-color: color-mix(in srgb, var(--ui-positive) 38%, transparent);
  background: color-mix(in srgb, var(--ui-positive) 7%, var(--ui-surface-soft));
}

.statistics-cell.bad {
  border-color: color-mix(in srgb, var(--ui-danger) 38%, transparent);
  background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-surface-soft));
}

.statistics-cell.warn {
  border-color: color-mix(in srgb, var(--ui-warning) 28%, transparent);
}

.statistics-cell.preview {
  border-color: color-mix(in srgb, var(--ui-warning) 32%, transparent);
  background: color-mix(in srgb, var(--ui-warning) 5%, var(--ui-surface-soft));
}

.statistics-cell.preview > span b {
  color: var(--ui-warning);
  font-size: 0.82rem;
}

.statistics-probability-note {
  margin: 10px 0 12px;
  padding: 9px 11px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.statistics-cell.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.58;
  pointer-events: none;
}

.statistics-detail-controls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
}

.statistics-detail-controls .panel-copy {
  margin: 0 !important;
}

.view[data-view="statistics"] .chart-host {
  --tv-chart-height: var(--ui-chart-md);
}

@media (max-width: 820px) {
  .statistics-filters {
    grid-template-columns: 1fr 1fr;
  }

  .statistics-chart-grid,
  .statistics-detail-controls {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .statistics-filters {
    grid-template-columns: 1fr;
  }

  .statistics-cell {
    min-height: 60px;
    padding: 7px;
  }

  .view[data-view="statistics"] .chart-host {
    --tv-chart-height: 224px;
  }
}

html {
  background: var(--ui-bg);
  color-scheme: dark;
}

body {
  color: var(--ui-text);
  background:
    linear-gradient(180deg, rgb(var(--page-rgb) / 0.045), transparent 220px),
    var(--ui-bg) !important;
  font-size: 14px;
  line-height: 1.42;
}

body::before {
  height: 2px !important;
  opacity: 0.78;
  background: linear-gradient(90deg, var(--page-primary), var(--page-secondary) 62%, var(--page-tertiary)) !important;
}

body::after {
  opacity: 0.18 !important;
  background-size: 52px 52px !important;
}

[hidden] {
  display: none !important;
}

.shell {
  width: min(1880px, calc(100% - 24px)) !important;
  padding: 10px 0 34px !important;
}

main {
  min-width: 0;
}

.section-gap {
  margin-top: 10px !important;
}

.view.active {
  min-width: 0;
}

/* Compact application chrome */
.hero {
  min-height: 88px !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
  gap: 16px !important;
  padding: 15px 17px !important;
  border: 1px solid rgb(var(--page-rgb) / 0.24) !important;
  border-radius: var(--ui-r-4) !important;
  background:
    linear-gradient(108deg, rgb(var(--page-rgb) / 0.11), transparent 46%),
    var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.hero::before {
  width: 3px !important;
  background: var(--page-primary) !important;
}

.hero::after {
  inset: auto 18px 0 18px !important;
  width: auto !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 2px 2px 0 0 !important;
  opacity: 0.62;
  background: linear-gradient(90deg, var(--page-primary), var(--page-secondary), transparent 88%) !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-spectrum {
  width: 150px !important;
  height: 3px !important;
  grid-template-columns: 2fr 1fr 1.4fr 0.6fr !important;
  opacity: 0.72;
}

.hero-identity {
  max-width: 860px !important;
}

.hero h1 {
  margin: 1px 0 3px !important;
  font-size: clamp(1.55rem, 2.1vw, 2.15rem) !important;
  letter-spacing: -0.045em !important;
}

.hero-copy {
  max-width: 700px !important;
  margin: 0 !important;
  color: var(--ui-muted) !important;
  font-size: 0.79rem !important;
}

.hero-context {
  gap: 6px !important;
  font-size: 0.69rem !important;
}

.hero-actions {
  min-width: 0 !important;
  grid-template-columns: minmax(136px, 1fr) minmax(116px, 0.72fr) !important;
  gap: 7px !important;
}

.hero-actions .status {
  min-height: 29px !important;
  padding: 5px 8px !important;
}

button,
select,
input,
textarea {
  min-height: 34px;
  border-radius: var(--ui-r-1) !important;
}

button {
  padding: 7px 11px;
  font-size: 0.76rem;
}

.primary {
  color: #061018 !important;
  border-color: transparent !important;
  background: linear-gradient(105deg, var(--page-primary), color-mix(in srgb, var(--page-secondary) 72%, white)) !important;
  box-shadow: none !important;
}

.secondary,
.compact-button {
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--page-primary) 60%, var(--ui-line-strong)) !important;
  filter: brightness(1.07);
  transform: none !important;
}

select,
input,
textarea {
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-line-strong) !important;
  background: #08121d !important;
  box-shadow: none !important;
}

select:focus,
input:focus,
textarea:focus,
button:focus-visible {
  border-color: var(--page-primary) !important;
  outline: 2px solid rgb(var(--page-rgb) / 0.16) !important;
  outline-offset: 1px;
}

label {
  color: var(--ui-muted) !important;
  font-size: 0.7rem;
}

.toolbar {
  top: 5px !important;
  gap: 6px !important;
  margin: 8px 0 10px !important;
  padding: 7px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: var(--ui-r-3) !important;
  background: rgb(8 17 27 / 0.94) !important;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(12px) !important;
}

.toolbar::before {
  height: 1px !important;
  background: linear-gradient(90deg, var(--page-primary), transparent 82%) !important;
}

.toolbar > div {
  padding: 4px 6px 5px !important;
  border: 0 !important;
  border-radius: var(--ui-r-1) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

.toolbar > div::before {
  display: none !important;
}

.toolbar > div label {
  color: var(--ui-muted) !important;
}

/* Surface hierarchy */
.panel,
.insight,
.alarm {
  --panel-accent: var(--page-primary) !important;
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-3) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: none !important;
}

.panel {
  padding: 0 12px 12px !important;
}

.panel::before {
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--page-primary), transparent 42%) !important;
  opacity: 0.62;
}

.panel::after,
.insight::after,
.card::after {
  display: none !important;
}

.panel > *,
.insight > * {
  position: relative;
  z-index: 1;
}

.panel-head {
  min-height: 48px !important;
  margin: 0 -12px 10px !important;
  padding: 9px 12px 8px !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.014) !important;
  box-shadow: none !important;
}

.panel-head .eyebrow,
.eyebrow {
  margin-bottom: 2px !important;
  color: var(--page-primary) !important;
  font-size: 0.61rem !important;
  line-height: 1.1;
  letter-spacing: 0.115em !important;
}

.panel-head h2,
.panel-head h3 {
  font-size: clamp(0.94rem, 1.1vw, 1.12rem) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.018em !important;
}

.panel-copy,
.portfolio-copy,
.model-arena-note {
  max-width: 1180px;
  margin: 6px 0 10px !important;
  color: var(--ui-muted) !important;
  font-size: 0.76rem !important;
  line-height: 1.48 !important;
}

.status,
.badge,
.range-label,
.signal-pill,
.filter-flag {
  min-height: 24px;
  padding: 4px 7px !important;
  color: color-mix(in srgb, var(--page-primary) 45%, white) !important;
  border: 1px solid rgb(var(--page-rgb) / 0.2) !important;
  border-radius: 999px !important;
  background: rgb(var(--page-rgb) / 0.065) !important;
  font-size: 0.65rem !important;
  white-space: nowrap;
}

.status.good,
.badge.good,
.signal-pill.good,
.filter-flag.good,
.feedback.good {
  color: #75e2ae !important;
  border-color: color-mix(in srgb, var(--ui-positive) 34%, var(--ui-line)) !important;
  background: color-mix(in srgb, var(--ui-positive) 8%, var(--ui-surface-soft)) !important;
}

.status.warn,
.badge.warn,
.signal-pill.warn,
.filter-flag.warn,
.feedback.warn {
  color: #f5ca76 !important;
  border-color: color-mix(in srgb, var(--ui-warning) 34%, var(--ui-line)) !important;
  background: color-mix(in srgb, var(--ui-warning) 8%, var(--ui-surface-soft)) !important;
}

.status.bad,
.badge.bad,
.signal-pill.bad,
.filter-flag.bad,
.feedback.bad {
  color: #f69aaa !important;
  border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-line)) !important;
  background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface-soft)) !important;
}

/* Metric cards: compact and semantic, never rainbow by index. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
  gap: 7px !important;
  margin: 8px 0 !important;
}

.card,
.card[data-spectrum-slot] {
  --card-accent: var(--page-primary) !important;
  min-height: 66px !important;
  padding: 9px 10px 8px !important;
  overflow: hidden;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

.card::before {
  inset: 0 auto 0 0 !important;
  width: 2px !important;
  height: auto !important;
  background: var(--card-accent) !important;
  opacity: 0.75;
}

.card-label,
.card span,
.card small {
  color: var(--ui-muted) !important;
  font-size: 0.65rem !important;
}

.card-label::before {
  width: 5px !important;
  height: 5px !important;
  box-shadow: none !important;
}

.card strong,
.card-value {
  color: var(--ui-text) !important;
  font-size: clamp(1.02rem, 1.25vw, 1.3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

.card[data-tone="good"],
.card.tone-positive {
  --card-accent: var(--ui-positive) !important;
}

.card[data-tone="warn"],
.card.tone-warning {
  --card-accent: var(--ui-warning) !important;
}

.card[data-tone="bad"],
.card.tone-danger {
  --card-accent: var(--ui-danger) !important;
}

.card[data-tone="info"],
.card.tone-info {
  --card-accent: var(--ui-info) !important;
}

.card[data-tone="good"] .card-value,
.card.tone-positive strong { color: #75e2ae !important; }
.card[data-tone="warn"] .card-value,
.card.tone-warning strong { color: #f5ca76 !important; }
.card[data-tone="bad"] .card-value,
.card.tone-danger strong { color: #f69aaa !important; }

/* Dense analytical surfaces */
.candidate-tier[data-spectrum-slot],
.candidate-card[data-spectrum-slot],
.filter-learning-card[data-spectrum-slot],
.detail-metric[data-spectrum-slot],
.portfolio-model-card[data-spectrum-slot],
.portfolio-league-period[data-spectrum-slot],
.peer-insight-card[data-spectrum-slot],
.workflow-step[data-spectrum-slot],
.excel-guide > div[data-spectrum-slot],
.candidate-tier,
.candidate-card,
.filter-learning-card,
.detail-metric,
.portfolio-model-card,
.portfolio-league-period,
.peer-insight-card,
.workflow-step,
.excel-guide > div {
  --component-accent: var(--page-secondary) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--component-accent) 74%, transparent) !important;
}

.candidate-tier.tier-strong { --component-accent: var(--ui-positive) !important; }
.candidate-tier.tier-good { --component-accent: var(--page-secondary) !important; }
.candidate-tier.tier-watch { --component-accent: var(--ui-warning) !important; }

.portfolio-model-card.recommended {
  --component-accent: var(--ui-positive) !important;
  box-shadow: inset 2px 0 0 var(--ui-positive), inset 0 0 0 1px rgba(66, 211, 146, .16) !important;
}

.portfolio-model-card.active {
  --component-accent: var(--ui-info) !important;
  border-color: rgba(101, 165, 255, .58) !important;
  outline: 2px solid rgba(101, 165, 255, .25) !important;
  background: color-mix(in srgb, var(--ui-info) 8%, var(--ui-surface-soft)) !important;
}

.portfolio-model-card.active.recommended {
  box-shadow: inset 3px 0 0 var(--ui-info), inset -3px 0 0 var(--ui-positive) !important;
}

.candidate-tier,
.filter-learning-card,
.portfolio-model-card,
.portfolio-league-period,
.peer-insight-card {
  padding: 10px !important;
}

.candidate-card {
  padding: 8px !important;
}

.candidate-list,
.diagnostic-grid,
.filter-learning-grid,
.peer-insight-grid,
.index-membership-grid,
.portfolio-arena-cards,
.portfolio-alternatives,
.portfolio-league-period-grid {
  gap: 7px !important;
}

.candidate-report-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.filter-learning-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.filter-learning-card h3,
.candidate-tier h3,
.portfolio-model-card h3,
.portfolio-league-period h3 {
  font-size: 0.84rem !important;
}

.filter-learning-card p,
.candidate-card p,
.candidate-card small,
.candidate-foot,
.portfolio-model-card p,
.portfolio-league-period p {
  font-size: 0.67rem !important;
  line-height: 1.38 !important;
}

/* Tables are readable instruments, not colored mosaics. */
.table-wrap,
.table-shell,
.table-wrap[data-spectrum-slot],
.table-shell[data-spectrum-slot] {
  --table-accent: var(--page-primary) !important;
  max-width: 100%;
  max-height: min(58vh, 520px);
  overflow: auto;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: #07111b !important;
  box-shadow: none !important;
  scrollbar-color: color-mix(in srgb, var(--page-primary) 48%, #233246) #07111b !important;
}

.table-wrap::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.table-wrap::-webkit-scrollbar-track {
  background: #07111b !important;
}

.table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid #07111b !important;
  border-radius: 99px !important;
  background: color-mix(in srgb, var(--page-primary) 48%, #233246) !important;
}

table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.72rem !important;
  font-variant-numeric: tabular-nums;
}

table th:nth-child(n),
table td:nth-child(n) {
  --column-accent: var(--page-primary) !important;
}

table thead th {
  top: 0;
  z-index: 4;
  min-height: 34px;
  padding: 8px 9px !important;
  color: #b9c8d9 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--ui-line-strong) !important;
  background: #101b28 !important;
  box-shadow: none !important;
  font-size: 0.64rem !important;
  line-height: 1.25;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

table th[data-sort-key]:hover,
table th[aria-sort="ascending"],
table th[aria-sort="descending"] {
  color: var(--ui-text) !important;
  background: color-mix(in srgb, var(--page-primary) 11%, #101b28) !important;
  box-shadow: inset 0 -2px 0 var(--page-primary) !important;
}

table tbody td {
  padding: 7px 9px !important;
  color: #c7d4e3;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(166, 190, 219, 0.075) !important;
  background-color: transparent !important;
  background-image: none !important;
  line-height: 1.28;
}

table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.012) !important;
}

table tbody tr:hover td {
  background-color: rgb(var(--page-rgb) / 0.07) !important;
  box-shadow: none !important;
}

table tbody td:first-child {
  color: var(--ui-text) !important;
  font-weight: 720;
  box-shadow: inset 2px 0 0 rgb(var(--page-rgb) / 0.42) !important;
}

table td.good,
table td.positive,
table td .good,
table td .positive { color: #64dda5 !important; }
table td.warn,
table td .warn { color: #f1c873 !important; }
table td.bad,
table td.negative,
table td .bad,
table td .negative { color: #f48b9d !important; }

.sub,
table td small {
  color: var(--ui-subtle) !important;
  font-size: 0.61rem !important;
}

/* Chart rhythm */
.chart-host,
.chart-host[data-spectrum-slot] {
  --chart-accent: var(--page-primary) !important;
  --tv-chart-height: var(--ui-chart-md);
  --tv-plot-height: calc(var(--tv-chart-height) - 29px);
  width: 100%;
  min-height: var(--tv-chart-height) !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--tv-border) !important;
  border-radius: 6px !important;
  background: var(--tv-background) !important;
  box-shadow: none !important;
}

.compact-chart,
.portfolio-mini-chart,
.portfolio-v2-chart.compact {
  --tv-chart-height: var(--ui-chart-sm);
  min-height: var(--ui-chart-sm) !important;
}

.signal-chart,
.portfolio-league-chart,
.portfolio-diagnostic-chart,
.portfolio-v2-chart,
.portfolio-context-chart,
.portfolio-arena-chart {
  --tv-chart-height: 228px;
  min-height: 228px !important;
}

.matrix-chart {
  --tv-chart-height: 310px;
  min-height: 310px !important;
}

.timeline-chart,
.portfolio-history-chart,
.portfolio-v2-equity,
.portfolio-chart {
  --tv-chart-height: 288px;
  min-height: 288px !important;
}

.tall-chart,
#historyPriceChart {
  --tv-chart-height: var(--ui-chart-xl);
  min-height: var(--ui-chart-xl) !important;
}

.tv-svg-terminal {
  display: grid;
  grid-template-rows: 29px minmax(0, 1fr);
  width: 100%;
  height: var(--tv-chart-height);
  min-width: 0;
  min-height: var(--tv-chart-height);
  overflow: hidden;
  background: var(--tv-background);
}

.tv-svg-topbar {
  position: relative;
  z-index: 9;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 5px 0 9px;
  color: var(--tv-muted);
  border-bottom: 1px solid var(--tv-border);
  background: var(--tv-toolbar);
  font-size: 0.61rem;
  line-height: 1;
}

.tv-svg-identity,
.tv-svg-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.tv-svg-identity b {
  color: #d8dde6;
  font-size: 0.59rem;
  letter-spacing: 0.08em;
}

.tv-svg-identity > span:last-child {
  overflow: hidden;
  color: var(--tv-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--tv-positive);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tv-positive) 15%, transparent);
}

.tv-svg-hint {
  white-space: nowrap;
}

.tv-svg-actions button {
  display: grid;
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 !important;
  place-items: center;
  color: var(--tv-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-size: 0.72rem !important;
}

.tv-svg-actions button:hover,
.tv-svg-actions button:focus-visible {
  color: #eef1f5 !important;
  border-color: var(--tv-border) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.tv-svg-stage {
  position: relative;
  display: grid;
  height: var(--tv-plot-height);
  min-width: 0;
  min-height: var(--tv-plot-height);
  place-items: center;
  overflow: hidden;
  background: var(--tv-background);
  cursor: crosshair;
}

.tv-svg-stage .chart-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none !important;
  box-sizing: border-box;
  padding: 5px;
}

.tv-svg-crosshair {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.tv-svg-crosshair.visible {
  opacity: 1;
}

.tv-svg-crosshair i {
  position: absolute;
  display: block;
  background: transparent;
}

.tv-crosshair-x {
  top: 0;
  bottom: 0;
  left: var(--crosshair-x);
  border-left: 1px dashed var(--tv-crosshair);
}

.tv-crosshair-y {
  right: 0;
  left: 0;
  top: var(--crosshair-y);
  border-top: 1px dashed var(--tv-crosshair);
}

.chart-svg .chart-mark.chart-hover,
.chart-svg .chart-mark.chart-selected,
.chart-mark:hover,
.chart-mark:focus,
.chart-mark.chart-selected {
  filter: brightness(1.12) !important;
}

body.chart-focus-active {
  overflow: hidden !important;
}

.chart-host.chart-expanded {
  position: fixed !important;
  z-index: 220 !important;
  inset: 0 !important;
  width: auto !important;
  height: 100vh !important;
  min-height: 0 !important;
  --tv-chart-height: 100vh !important;
  --tv-plot-height: calc(100vh - 29px) !important;
  border-color: color-mix(in srgb, var(--tv-primary) 58%, var(--tv-border)) !important;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.72) !important;
}

.chart-host.chart-expanded [data-chart-action="expand"] {
  color: #fff !important;
  background: color-mix(in srgb, var(--tv-primary) 22%, transparent) !important;
}

.chart-tooltip {
  z-index: 7 !important;
  color: #eef1f5 !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 4px !important;
  background: rgba(19, 23, 34, 0.96) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-weight: 650 !important;
}

.chart-empty,
.empty-state,
.empty-panel,
.detail.empty,
.feedback,
.feedback[data-spectrum-slot] {
  min-height: 38px;
  padding: 9px 10px !important;
  color: var(--ui-muted) !important;
  border: 1px dashed var(--ui-line-strong) !important;
  border-radius: var(--ui-r-2) !important;
  background: rgba(255, 255, 255, 0.014) !important;
}

.mini-chart-title {
  min-height: 32px;
  padding: 7px 9px !important;
  color: #c4d2e1 !important;
  border: 1px solid var(--ui-line) !important;
  border-bottom: 0 !important;
  border-radius: var(--ui-r-2) var(--ui-r-2) 0 0 !important;
  background: rgba(255, 255, 255, 0.018) !important;
  font-size: 0.7rem !important;
}

.mini-chart-title span {
  float: right;
  color: var(--ui-muted);
  font-size: 0.62rem;
  font-weight: 560;
}

.mini-chart-title + .chart-host {
  border-radius: 0 0 var(--ui-r-2) var(--ui-r-2) !important;
}

.tradingview-host,
.tv-terminal-chart {
  border-radius: 5px !important;
  background: var(--tv-background) !important;
}

.tv-chart-legend {
  top: 8px !important;
  left: 9px !important;
  gap: 7px !important;
  max-width: calc(100% - 84px) !important;
}

.tv-legend-chip {
  gap: 4px !important;
  padding: 2px 3px !important;
  color: var(--legend-color, #d8dde6) !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: rgba(11, 14, 17, 0.76) !important;
  backdrop-filter: blur(4px) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 0.6rem !important;
}

.tv-legend-chip b {
  color: var(--tv-muted) !important;
  font-weight: 600 !important;
}

.tv-legend-chip em {
  font-weight: 760 !important;
}

/* Navigation command layer */
.command-orb {
  right: 14px !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  min-width: 104px !important;
  min-height: 43px !important;
  gap: 7px !important;
  padding: 5px 9px 5px 5px !important;
  border: 1px solid rgb(var(--page-rgb) / 0.44) !important;
  background: rgb(8 17 27 / 0.94) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(12px) !important;
}

.command-orb::before {
  display: none !important;
}

.command-orb-wheel {
  width: 31px !important;
  height: 31px !important;
  flex-basis: 31px !important;
  background: conic-gradient(var(--page-primary), var(--page-secondary), var(--page-tertiary), var(--page-primary)) !important;
  box-shadow: none !important;
}

.command-orb-label {
  font-size: 0.68rem !important;
}

.command-menu {
  padding: 14px !important;
  background: rgb(3 7 12 / 0.78) !important;
  backdrop-filter: blur(12px) !important;
}

.command-backdrop {
  background: rgb(3 7 12 / 0.72) !important;
}

.command-dialog {
  width: min(1120px, 100%) !important;
  max-height: calc(100dvh - 28px) !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: var(--ui-r-4) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

.command-head {
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.012) !important;
}

.command-head h2 {
  font-size: 1.18rem !important;
}

.command-spectrum {
  height: 3px !important;
  gap: 3px !important;
}

.command-workspace-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 8px !important;
  padding: 8px !important;
}

.command-menu .desktop-rail {
  gap: 7px !important;
  padding: 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-3) !important;
  background: var(--ui-surface-soft) !important;
}

.command-menu .desktop-rail-block,
.command-menu .desktop-rail-metric {
  padding: 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: rgba(255, 255, 255, 0.014) !important;
}

#desktopViewNav [data-open-view],
#desktopSectionNav [data-rail-section] {
  min-height: 36px !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-radius: var(--ui-r-1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#desktopViewNav [data-open-view]:hover,
#desktopViewNav [data-open-view].active,
#desktopSectionNav [data-rail-section].active {
  color: var(--ui-text) !important;
  border-color: rgb(var(--page-rgb) / 0.2) !important;
  border-left-color: var(--page-primary) !important;
  background: rgb(var(--page-rgb) / 0.07) !important;
  box-shadow: none !important;
}

/* Login is focused and device-safe. */
.login-gate {
  padding: 20px !important;
  background:
    linear-gradient(145deg, rgb(var(--page-rgb) / 0.07), transparent 50%),
    var(--ui-bg) !important;
}

.login-stage {
  width: min(940px, 100%) !important;
  min-height: 520px !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr) !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 22px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
}

.login-story {
  padding: 36px 42px !important;
  background:
    linear-gradient(130deg, rgb(var(--page-rgb) / 0.1), transparent 58%),
    var(--ui-surface-soft) !important;
}

.login-story::before,
.login-story::after,
.login-card::after {
  display: none !important;
}

.login-story h1 {
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  letter-spacing: -0.055em !important;
}

.login-story p {
  max-width: 520px;
  color: var(--ui-muted) !important;
  font-size: 0.84rem !important;
}

.login-card {
  padding: 30px !important;
  background: var(--ui-surface) !important;
}

.login-form .primary {
  min-height: 42px !important;
  margin-top: 5px !important;
  border-radius: var(--ui-r-2) !important;
  background: linear-gradient(105deg, var(--page-primary), var(--page-secondary)) !important;
  box-shadow: none !important;
}

/* Market: decision first, inventory second, deep portfolio after the core screen. */
.view[data-view="market"].active {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.view[data-view="market"] > .signal-overview-panel { order: 10; }
.view[data-view="market"] > .market-decision-grid { order: 20; }
.view[data-view="market"] > .market-stock-panel { order: 30; }
.view[data-view="market"] > #periodEvidencePanel { order: 35; }
.view[data-view="market"] > #modelPortfolioPanel { order: 40; }
.view[data-view="market"] > #relationHelpCenter { order: 50; }

.view[data-view="market"] .grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr) !important;
  gap: 10px !important;
}

.signal-overview-panel .chart-host {
  min-height: 218px !important;
}

.period-evidence-panel {
  --evidence-accent: var(--page-secondary);
  border-top: 2px solid color-mix(in srgb, var(--evidence-accent) 55%, transparent) !important;
}

.period-evidence-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0;
}

.period-evidence-cards article {
  display: grid;
  gap: 2px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--ui-line);
  border-left: 2px solid var(--evidence-accent);
  border-radius: var(--ui-r-2);
  background: var(--ui-surface-soft);
}

.period-evidence-cards article.good { --evidence-accent: var(--ui-positive); }
.period-evidence-cards article.warn { --evidence-accent: var(--ui-warning); }
.period-evidence-cards article.bad { --evidence-accent: var(--ui-danger); }
.period-evidence-cards article.info { --evidence-accent: var(--page-primary); }
.period-evidence-cards article.neutral { --evidence-accent: var(--ui-muted); }
.period-evidence-cards span,
.period-evidence-cards small { color: var(--ui-muted); font-size: 0.59rem; }
.period-evidence-cards strong { color: var(--ui-text); font-size: 1.05rem; }

.period-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.period-evidence-chart {
  min-height: 270px !important;
  max-height: 390px;
}

.period-evidence-summary {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--page-secondary) 28%, var(--ui-line));
  border-radius: var(--ui-r-2);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--page-secondary) 5%, var(--ui-surface-soft));
  font-size: 0.68rem;
  line-height: 1.45;
}

.period-evidence-summary p { margin: 0; }
.period-evidence-table-wrap { max-height: 300px; }
.period-evidence-table-wrap table { font-size: 0.61rem; }

.bars {
  gap: 5px !important;
}

.relation-help-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.relation-help-grid details,
.relation-layer-guide article,
.relation-glossary span {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

.relation-help-grid details,
.relation-layer-guide article {
  padding: 9px !important;
}

.relation-help-grid p,
.relation-layer-guide p,
.relation-glossary span {
  font-size: 0.68rem !important;
  line-height: 1.42 !important;
}

/* Portfolio is a dense analytical workspace, not a stack of posters. */
.model-portfolio-panel {
  border-color: color-mix(in srgb, var(--page-secondary) 22%, var(--ui-line)) !important;
}

.portfolio-controls {
  grid-template-columns: repeat(6, minmax(118px, 1fr)) auto !important;
  gap: 6px !important;
  padding: 7px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
}

.portfolio-contract-summary,
.portfolio-execution-strip,
.portfolio-expectation,
.portfolio-insight,
.portfolio-note,
.portfolio-history-note,
.portfolio-arena-note,
.portfolio-context-note {
  padding: 8px 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: rgba(255, 255, 255, 0.014) !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
}

.portfolio-v2,
.portfolio-arena,
.portfolio-return-lab,
.portfolio-history,
.portfolio-league {
  margin-top: 9px !important;
  padding: 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-3) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

.portfolio-v2-toolbar,
.portfolio-arena-head,
.portfolio-return-lab-head,
.portfolio-history-head,
.portfolio-league-head,
.portfolio-section-head {
  min-height: 42px !important;
  margin-bottom: 8px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

.portfolio-v2-toolbar h3,
.portfolio-arena-head h3,
.portfolio-return-lab-head h3,
.portfolio-history-head h3,
.portfolio-league-head h3,
.portfolio-section-head h3 {
  font-size: 0.9rem !important;
}

.portfolio-objective-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.portfolio-v2-main-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important;
  gap: 8px !important;
}

.portfolio-v2-chart-stack,
.portfolio-grid,
.portfolio-v2-history-grid,
.portfolio-arena-layout,
.portfolio-league-charts {
  gap: 8px !important;
}

.portfolio-analytics-grid,
.portfolio-return-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.portfolio-chart-block {
  min-width: 0;
  border-radius: var(--ui-r-2) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.portfolio-objective-card,
.portfolio-alternative-card,
.portfolio-arena-card {
  padding: 9px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

/* Multi-period */
.view[data-view="multi"] > .chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.view[data-view="multi"] .chart-host {
  min-height: 238px !important;
}

.narrative,
.compact-narrative {
  margin-bottom: 9px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 2px solid var(--page-primary) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
  font-size: 0.72rem !important;
}

/* Alarms */
.alarm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.alarm,
.alarm[data-spectrum-slot] {
  --signal-color: var(--page-primary);
  min-height: 92px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 2px solid var(--signal-color) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

.alarm.good { --signal-color: var(--ui-positive); }
.alarm.warn { --signal-color: var(--ui-warning); }
.alarm.bad { --signal-color: var(--ui-danger); }
.alarm strong { color: var(--ui-text) !important; font-size: 0.82rem !important; }
.alarm p { color: var(--ui-muted) !important; font-size: 0.66rem !important; }

/* ML: model evidence and decision share the first screen. */
.view[data-view="ml"].active {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 10px;
}

.view[data-view="ml"] > #mlCards,
.view[data-view="ml"] > .chart-grid,
.view[data-view="ml"] > .panel:not(.model-arena-panel):not(.ml-decision-panel) {
  grid-column: 1 / -1;
}

.view[data-view="ml"] > .model-arena-panel {
  grid-column: 1;
}

.view[data-view="ml"] > .ml-decision-panel {
  grid-column: 2;
}

.view[data-view="ml"] > .chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.view[data-view="ml"] .period-model-panel {
  grid-column: 1 / -1;
}

.view[data-view="ml"] .compact-arena-table {
  max-height: 330px !important;
}

.view[data-view="ml"] .chart-host {
  min-height: 220px !important;
}

.operation-body,
.assistant-callout,
.file-row {
  gap: 8px !important;
}

.assistant-callout {
  padding: 9px 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
}

/* Success Lab: evidence hierarchy and compact calibration. */
.view[data-view="success"].active {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.view[data-view="success"] > * {
  min-width: 0;
}

.view[data-view="success"] > .success-filter-panel,
.view[data-view="success"] > #successCards,
.view[data-view="success"] > .success-learning-panel,
.view[data-view="success"] > .success-chart-grid,
.view[data-view="success"] > .detail-profile-panel {
  grid-column: 1 / -1;
}

.view[data-view="success"] > .success-report-panel {
  grid-column: span 8;
}

.view[data-view="success"] > .success-diagnostic-panel {
  grid-column: span 4;
}

.view[data-view="success"] > .success-counter-panel,
.view[data-view="success"] > .success-replay-panel {
  grid-column: span 6;
}

.success-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr)) auto auto !important;
  gap: 6px !important;
  align-items: end;
}

.success-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.view[data-view="success"] .chart-host {
  min-height: 218px !important;
}

.report-scope-note,
.detail-evidence {
  padding: 8px 10px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: rgba(255, 255, 255, 0.014) !important;
  font-size: 0.68rem !important;
}

/* Stock detail: controlled chart sizes and clear sub-workspaces. */
.history-controls {
  display: grid !important;
  grid-template-columns: minmax(140px, 0.8fr) minmax(110px, 0.55fr) minmax(150px, 0.8fr) minmax(190px, 1.1fr) auto !important;
  gap: 7px !important;
  align-items: end !important;
  padding: 9px !important;
}

.detail-subnav {
  position: sticky !important;
  top: 74px;
  z-index: 18;
  display: flex;
  gap: 5px !important;
  padding: 5px !important;
  overflow-x: auto;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: rgb(8 17 27 / 0.94) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.detail-subnav button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

.detail-subnav button.active {
  color: var(--ui-text) !important;
  border-color: rgb(var(--page-rgb) / 0.28) !important;
  background: rgb(var(--page-rgb) / 0.09) !important;
}

.detail-visual-grid,
.detail-analysis-grid,
.peer-analysis-grid,
.peer-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.detail-chart-block,
.peer-analysis-grid > div,
.peer-chart-grid > div {
  min-width: 0;
}

.view[data-view="detail"] .chart-host:not(#historyPriceChart) {
  min-height: 232px !important;
}

.detail-flow-block {
  grid-column: 1 / -1;
}

.detail-metrics,
.history-signal-summary,
.metadata-chips,
.memory-cards,
.development-cards,
.flow-cards,
.peer-cards {
  gap: 7px !important;
}

.detail-metric {
  min-height: 62px !important;
  padding: 8px 9px !important;
}

.detail-metric strong {
  font-size: 1.08rem !important;
}

.development-matrix,
.index-membership-panel,
.flow-interpretation,
.peer-interpretation {
  padding: 9px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
}

.history-chart-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.15fr) minmax(280px, 1.15fr) minmax(190px, 0.7fr) !important;
  gap: 6px !important;
  padding: 7px !important;
  position: relative;
  z-index: 16;
  overflow: visible;
  border: 1px solid var(--tv-border) !important;
  border-radius: 5px !important;
  background: var(--tv-toolbar) !important;
}

.history-chart-tool,
.history-chart-period,
.history-workspace-controls,
.history-layer-controls,
.history-indicator-menu,
.history-drawing-controls {
  min-width: 0;
  padding: 6px !important;
  border: 1px solid var(--tv-border) !important;
  border-radius: 4px !important;
  background: var(--tv-surface) !important;
}

.history-workspace-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(360px, 1.6fr) auto minmax(150px, 0.55fr) auto auto;
  gap: 6px;
  align-items: center;
}

.history-workspace-controls > span,
.history-workspace-controls .history-switch {
  color: var(--tv-muted) !important;
  font-size: 0.58rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.history-workspace-controls .history-switch {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 28px;
  margin: 0;
  padding: 4px 7px;
  border: 1px solid var(--tv-border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--tv-surface) 88%, var(--tv-primary));
  cursor: pointer;
}

.history-workspace-controls .history-switch:has(input:checked) {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--tv-primary) 54%, var(--tv-border));
  background: color-mix(in srgb, var(--tv-primary) 17%, var(--tv-surface));
}

.history-workspace-controls input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--tv-primary);
}

.history-layer-controls { grid-column: 1; }
.history-indicator-menu {
  grid-column: 2;
  position: relative;
  z-index: 24;
}
.history-drawing-controls { grid-column: 3; }

.history-indicator-menu[open] {
  z-index: 40;
  border-color: color-mix(in srgb, var(--tv-primary) 55%, var(--tv-border)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

.history-indicator-menu[open] > summary {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--tv-primary) 18%, var(--tv-surface)) !important;
}

.history-indicator-menu > .history-indicator-grid {
  z-index: 42;
  width: min(570px, 92vw);
  max-height: min(52vh, 360px);
  overflow: auto;
  border-color: var(--tv-border-strong) !important;
  background: color-mix(in srgb, var(--tv-background) 96%, black) !important;
}

.history-indicator-grid > strong,
.history-indicator-grid > small {
  grid-column: 1 / -1;
}

.history-indicator-grid > strong {
  padding: 4px 3px 1px;
  color: var(--tv-text);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-indicator-grid > small {
  padding: 5px 3px 1px;
  color: var(--tv-muted);
  font-size: 0.61rem;
}

.chart-segment {
  display: flex;
  width: 100%;
  min-width: 0 !important;
  flex-wrap: wrap;
  gap: 3px !important;
}

.history-interval-tool .chart-segment,
.history-window-tool .chart-segment {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}

.history-drawing-controls {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 4px !important;
  overflow: hidden;
}

.history-drawing-controls .chart-segment {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}

.history-drawing-controls small {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.chart-segment button {
  min-height: 28px !important;
  padding: 4px 7px !important;
  font-size: 0.63rem !important;
}

.chart-segment button.active {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--tv-primary) 58%, var(--tv-border)) !important;
  background: color-mix(in srgb, var(--tv-primary) 22%, var(--tv-surface)) !important;
  box-shadow: inset 0 -2px 0 var(--tv-primary) !important;
}

.history-chart-tool > span,
.history-chart-period > span,
.history-drawing-controls > span {
  display: none;
}

.history-indicator-menu summary {
  color: #d8dde6 !important;
  font-size: 0.64rem !important;
}

.history-price-panel {
  overflow: hidden;
  border-color: var(--tv-border) !important;
  background: var(--tv-background) !important;
}

.history-technical-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 4px 9px 8px;
  border-bottom: 1px solid var(--tv-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tv-primary) 6%, var(--tv-background)), color-mix(in srgb, var(--tv-secondary) 5%, var(--tv-background)));
}

.history-technical-summary .history-signal-chip {
  min-height: 55px;
  padding: 7px 8px;
}

.history-technical-summary .history-signal-chip strong {
  font-size: 0.76rem;
}

.history-event-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  padding: 0 9px 7px;
  border-bottom: 1px solid var(--tv-border);
  background: var(--tv-background);
}

.history-event-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 6px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 7px;
  border-top: 2px solid var(--tv-border);
  background: color-mix(in srgb, var(--tv-surface) 86%, transparent);
}

.history-event-chip b,
.history-event-chip small {
  min-width: 0;
  overflow: hidden;
  color: var(--tv-muted);
  font-size: 0.56rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-event-chip strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--tv-text);
  font-size: 0.74rem;
}

.history-event-chip small {
  font-size: 0.51rem;
  font-weight: 520;
}

.history-event-chip.positive { border-top-color: var(--tv-positive); }
.history-event-chip.danger { border-top-color: var(--tv-negative); }
.history-event-chip.warning { border-top-color: var(--tv-warning); }
.history-event-chip.info { border-top-color: var(--tv-primary); }

.history-price-panel:fullscreen {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--tv-background) !important;
}

.history-price-panel:fullscreen .history-price-head {
  padding: 8px 12px !important;
}

.history-price-panel:fullscreen .history-chart-toolbar {
  margin: 0 8px;
}

.history-price-panel:fullscreen #historyPriceChart {
  align-self: stretch;
  min-height: 0 !important;
  height: auto !important;
}

.history-price-panel:fullscreen[data-fullscreen-tools="hidden"] {
  grid-template-rows: auto minmax(0, 1fr);
}

.history-price-panel:fullscreen[data-fullscreen-tools="hidden"] .history-chart-toolbar,
.history-price-panel:fullscreen[data-fullscreen-tools="hidden"] .history-signal-summary,
.history-price-panel:fullscreen[data-fullscreen-tools="hidden"] .history-technical-summary,
.history-price-panel:fullscreen[data-fullscreen-tools="hidden"] .history-event-summary {
  display: none !important;
}

@media (max-width: 760px) {
  .history-price-panel:fullscreen[data-fullscreen-tools="visible"] {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .history-price-panel:fullscreen[data-fullscreen-tools="visible"] .history-chart-toolbar {
    position: absolute;
    z-index: 90;
    top: var(--history-fullscreen-head, 72px);
    right: 5px;
    left: 5px;
    display: grid !important;
    max-height: calc(100vh - var(--history-fullscreen-head, 72px) - 8px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-color: var(--tv-border-strong) !important;
    background: color-mix(in srgb, var(--tv-background) 96%, black) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
  }

  .history-price-panel:fullscreen[data-fullscreen-tools="visible"] .history-signal-summary,
  .history-price-panel:fullscreen[data-fullscreen-tools="visible"] .history-technical-summary,
  .history-price-panel:fullscreen[data-fullscreen-tools="visible"] .history-event-summary {
    display: none !important;
  }
}

.history-price-head {
  border-bottom-color: var(--tv-border) !important;
  background: var(--tv-toolbar) !important;
}

.history-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.history-chart-grid .wide-chart {
  grid-column: 1 / -1;
}

/* Data Center: operational sequence first, technical tools stay secondary. */
.view[data-view="data"] .data-guide {
  min-height: 82px !important;
  padding: 13px 15px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: var(--ui-r-3) !important;
  background:
    linear-gradient(110deg, rgb(var(--page-rgb) / 0.09), transparent 52%),
    var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.data-guide h2 {
  font-size: 1.08rem !important;
}

.data-guide p {
  margin: 3px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 0.72rem !important;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 8px 0 !important;
}

.workflow-step {
  min-height: 64px !important;
  padding: 8px 9px !important;
}

.workflow-step b {
  width: 27px !important;
  height: 27px !important;
}

.workflow-step span {
  color: var(--ui-muted) !important;
  font-size: 0.65rem !important;
}

.data-protected {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.data-protected > * {
  min-width: 0;
  grid-column: 1 / -1;
}

.connection-body,
.cloud-runner-body,
.excel-guide,
.package-grid,
.technical-grid {
  gap: 8px !important;
}

.connection-fields {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto auto !important;
  gap: 6px !important;
  align-items: end !important;
}

.excel-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.excel-guide > div {
  min-height: 64px !important;
  padding: 8px !important;
}

.excel-cycle-row,
.float-upload-card,
.excel-submit-row,
.cloud-runner-body,
.telegram-center-grid {
  padding: 9px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-2) !important;
  background: var(--ui-surface-soft) !important;
}

.period-excel-grid {
  gap: 5px !important;
}

.period-excel-row {
  min-height: 46px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-1) !important;
  background: rgba(255, 255, 255, 0.012) !important;
}

.secondary-operation,
.technical-panel {
  border-color: color-mix(in srgb, var(--page-secondary) 18%, var(--ui-line)) !important;
}

.technical-panel {
  opacity: 0.91;
}

/* Tablet */
@media (max-width: 1240px) {
  .shell {
    width: min(100% - 18px, 1500px) !important;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
  }

  .portfolio-controls {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  }

  .filter-learning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .relation-help-grid,
  .alarm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .view[data-view="success"] > .success-report-panel,
  .view[data-view="success"] > .success-diagnostic-panel,
  .view[data-view="success"] > .success-counter-panel,
  .view[data-view="success"] > .success-replay-panel {
    grid-column: 1 / -1;
  }

  .view[data-view="ml"].active {
    grid-template-columns: 1fr;
  }

  .view[data-view="ml"] > .model-arena-panel,
  .view[data-view="ml"] > .ml-decision-panel {
    grid-column: 1 / -1;
  }

  .success-filters {
    grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
  }

  .history-chart-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .history-workspace-controls {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(140px, 0.45fr);
  }

  .history-workspace-controls .history-switch {
    justify-content: center;
  }

  .history-technical-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .history-layer-controls { grid-column: 1; }
  .history-indicator-menu { grid-column: 2; }
  .history-drawing-controls { grid-column: 1 / -1; }
}

/* Mobile and narrow tablet */
@media (max-width: 820px) {
  :root {
    --ui-chart-sm: 190px;
    --ui-chart-md: 220px;
    --ui-chart-lg: 280px;
    --ui-chart-xl: 330px;
  }

  body {
    font-size: 13px;
  }

  .shell {
    width: calc(100% - 12px) !important;
    padding-top: 6px !important;
  }

  .hero {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: var(--ui-r-3) !important;
  }

  .hero h1 {
    font-size: 1.42rem !important;
  }

  .hero-copy {
    display: none;
  }

  .hero-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  .toolbar {
    position: static !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  .panel {
    padding: 0 9px 9px !important;
    border-radius: var(--ui-r-2) !important;
  }

  .panel-head {
    min-height: 43px !important;
    margin-inline: -9px !important;
    padding: 8px 9px 7px !important;
  }

  .panel-head h2,
  .panel-head h3 {
    font-size: 0.91rem !important;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .period-evidence-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .period-evidence-grid {
    grid-template-columns: 1fr;
  }

  .period-evidence-chart {
    min-height: 220px !important;
  }

  .card,
  .card[data-spectrum-slot] {
    min-height: 60px !important;
    padding: 8px !important;
  }

  .card strong,
  .card-value {
    font-size: 1rem !important;
  }

  .view[data-view="market"] .grid,
  .view[data-view="multi"] > .chart-grid,
  .view[data-view="ml"] > .chart-grid,
  .success-chart-grid,
  .detail-visual-grid,
  .detail-analysis-grid,
  .peer-analysis-grid,
  .peer-chart-grid,
  .history-chart-grid,
  .portfolio-v2-main-grid,
  .portfolio-analytics-grid,
  .portfolio-return-grid,
  .portfolio-grid,
  .portfolio-v2-history-grid,
  .portfolio-arena-layout,
  .portfolio-league-charts {
    grid-template-columns: 1fr !important;
  }

  .candidate-report-grid,
  .filter-learning-grid,
  .relation-help-grid,
  .alarm-grid,
  .portfolio-objective-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .portfolio-controls,
  .success-filters,
  .history-controls,
  .history-chart-toolbar,
  .connection-fields,
  .excel-guide,
  .workflow-steps {
    grid-template-columns: 1fr 1fr !important;
  }

  .history-controls > button,
  .success-filters > button,
  .connection-fields > button,
  .connection-fields > .file-button {
    width: 100%;
  }

  .history-chart-grid .wide-chart,
  .detail-flow-block {
    grid-column: auto;
  }

  .tv-svg-hint {
    display: none;
  }

  .tv-svg-identity > span:last-child {
    max-width: 36vw;
  }

  .detail-subnav {
    top: 5px;
  }

  .chart-host,
  .chart-host[data-spectrum-slot],
  .view[data-view="detail"] .chart-host:not(#historyPriceChart),
  .view[data-view="multi"] .chart-host,
  .view[data-view="ml"] .chart-host,
  .view[data-view="success"] .chart-host {
    min-height: var(--ui-chart-md) !important;
  }

  #historyPriceChart,
  .tall-chart {
    min-height: var(--ui-chart-xl) !important;
  }

  .history-layer-controls { grid-column: 1; }
  .history-indicator-menu { grid-column: 2; }
  .history-drawing-controls { grid-column: 1 / -1; }

  .history-indicator-menu > .history-indicator-grid {
    position: static;
    width: 100%;
    max-height: 280px;
    margin-top: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-workspace-controls {
    grid-template-columns: 1fr 1fr;
  }

  .history-workspace-controls > span {
    grid-column: 1 / -1;
  }

  .history-workspace-controls .history-preset-segment,
  .history-workspace-controls .history-chart-type-segment {
    grid-column: 1 / -1;
  }

  .history-technical-summary {
    display: flex;
    gap: 6px;
    padding: 5px 8px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .history-technical-summary .history-signal-chip {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }

  .history-event-summary {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .history-event-chip {
    flex: 0 0 132px;
    scroll-snap-align: start;
  }

  .table-wrap,
  .table-shell {
    max-height: min(62vh, 480px) !important;
  }

  table {
    min-width: 680px;
  }

  table thead th {
    position: sticky !important;
  }

  .command-menu {
    padding: 6px !important;
  }

  .command-dialog {
    max-height: calc(100dvh - 12px) !important;
    border-radius: var(--ui-r-3) !important;
  }

  .command-workspace-grid {
    grid-template-columns: 1fr !important;
  }

  .command-menu .desktop-right-rail {
    display: none !important;
  }

  .login-gate {
    padding: 10px !important;
  }

  .login-stage {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    border-radius: var(--ui-r-4) !important;
  }

  .login-story {
    padding: 22px 22px 18px !important;
  }

  .login-story h1 {
    font-size: 2rem !important;
  }

  .login-story p,
  .login-story .login-proof-grid {
    display: none !important;
  }

  .login-card {
    padding: 22px !important;
  }
}

@media (max-width: 480px) {
  .shell {
    width: calc(100% - 8px) !important;
  }

  .hero-actions,
  .portfolio-controls,
  .history-chart-toolbar,
  .connection-fields,
  .excel-guide,
  .workflow-steps,
  .candidate-report-grid,
  .filter-learning-grid,
  .relation-help-grid,
  .alarm-grid {
    grid-template-columns: 1fr !important;
  }

  .period-evidence-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-objective-cards,
  .portfolio-learning-grid,
  .portfolio-model-weights {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .toolbar,
  .success-filters,
  .history-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .history-layer-controls,
  .history-indicator-menu,
  .history-drawing-controls {
    grid-column: 1 !important;
  }

  .tv-svg-identity > span:last-child {
    display: none;
  }

  .chart-host.chart-expanded {
    inset: 0 !important;
    height: 100vh !important;
    --tv-chart-height: 100vh !important;
    --tv-plot-height: calc(100vh - 29px) !important;
  }

  .toolbar > div:nth-child(2),
  .toolbar > div:last-child,
  .history-controls > button {
    grid-column: 1 / -1;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .panel-head {
    align-items: flex-start !important;
  }

  .panel-head .badge {
    max-width: 44%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .command-orb {
    min-width: 42px !important;
    padding-right: 5px !important;
  }

  .command-orb-label,
  .command-orb kbd {
    display: none !important;
  }

  .login-story {
    display: none !important;
  }

  .login-card {
    min-height: min(520px, calc(100dvh - 24px));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Editable portfolio workspace and cached market context. */
.portfolio-manual-toolbar {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto auto;
  gap: 7px;
  align-items: end;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--portfolio-main, var(--teal)) 18%, var(--line));
}

.portfolio-manual-toolbar label,
.portfolio-editor-controls label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portfolio-manual-toolbar label span,
.portfolio-editor-controls label span {
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portfolio-manual-toolbar select,
.portfolio-editor-controls input {
  width: 100%;
  min-height: 33px;
}

.portfolio-editor {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 96%, var(--blue) 4%);
}

.portfolio-editor-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.72fr) auto auto;
  gap: 8px;
  align-items: end;
}

.portfolio-editor-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.portfolio-editor-metrics article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--metric-color, var(--cyan)) 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 94%, var(--metric-color, var(--cyan)) 6%);
}

.portfolio-editor-metrics article.good { --metric-color: var(--teal); }
.portfolio-editor-metrics article.warn { --metric-color: var(--amber); }
.portfolio-editor-metrics article.bad { --metric-color: var(--coral); }
.portfolio-editor-metrics span { color: var(--muted); font-size: 0.51rem; }
.portfolio-editor-metrics strong { color: var(--text); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.portfolio-editor-metrics small { color: color-mix(in srgb, var(--muted) 80%, transparent); font-size: 0.48rem; }

.portfolio-editor-rows {
  display: grid;
  gap: 5px;
}

.portfolio-editor-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 110px 120px minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--row-color, var(--cyan));
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 95%, var(--row-color, var(--cyan)) 5%);
}

.portfolio-editor-row.evidence-missing { --row-color: var(--amber); }
.portfolio-editor-symbol { display: grid; gap: 1px; min-width: 0; }
.portfolio-editor-symbol strong { color: var(--text); font-size: 0.73rem; }
.portfolio-editor-symbol small,
.portfolio-editor-proof { overflow: hidden; color: var(--muted); font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-editor-weight { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.portfolio-editor-weight input { width: 100%; min-height: 31px; padding: 5px 7px; text-align: right; }
.portfolio-editor-weight span { color: var(--muted); font-size: 0.62rem; }
.portfolio-editor-amount { color: var(--text); font-size: 0.66rem; font-variant-numeric: tabular-nums; text-align: right; }
.portfolio-editor-remove { min-width: 31px !important; padding-inline: 8px !important; }

.portfolio-editor-warning {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--amber);
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.5;
  background: color-mix(in srgb, var(--amber) 6%, transparent);
}

.portfolio-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}

.detail-news-panel {
  border-color: color-mix(in srgb, var(--violet) 22%, var(--line)) !important;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--violet) 6%, transparent), transparent 38%),
    color-mix(in srgb, var(--panel) 97%, var(--blue) 3%) !important;
}

.detail-company-snapshot {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.detail-company-snapshot article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--snapshot-color, var(--violet)) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 94%, var(--snapshot-color, var(--violet)) 6%);
}

.detail-company-snapshot article:nth-child(3n + 2) { --snapshot-color: var(--cyan); }
.detail-company-snapshot article:nth-child(3n) { --snapshot-color: var(--amber); }
.detail-company-snapshot span { color: var(--muted); font-size: 0.5rem; font-weight: 740; }
.detail-company-snapshot strong { overflow: hidden; color: var(--text); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-company-snapshot small { color: var(--muted); font-size: 0.49rem; }

.detail-news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.detail-news-card {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--panel-strong) 95%, var(--news-color, var(--violet)) 5%);
}

.detail-news-card::before { content: ""; border-radius: 4px; background: var(--news-color, var(--violet)); }
.detail-news-card:nth-child(3n + 2) { --news-color: var(--cyan); }
.detail-news-card:nth-child(3n) { --news-color: var(--amber); }
.detail-news-card:hover { border-color: color-mix(in srgb, var(--news-color, var(--violet)) 46%, var(--line)); transform: translateY(-1px); }
.detail-news-card div { display: grid; gap: 5px; min-width: 0; }
.detail-news-card strong { color: var(--text); font-size: 0.68rem; line-height: 1.4; }
.detail-news-card span { color: var(--muted); font-size: 0.5rem; }
.detail-news-source { margin-top: 8px; color: var(--muted); font-size: 0.52rem; line-height: 1.45; }

.weekly-contest {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius: 15px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 32%),
    radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 28%),
    color-mix(in srgb, var(--panel) 97%, var(--amber) 3%);
}

.weekly-contest-head,
.contest-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.weekly-contest-head h3 { margin: 2px 0 4px; font-size: 0.94rem; }
.weekly-contest-head p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 0.58rem; line-height: 1.5; }
.weekly-contest-head-actions { display: flex; align-items: center; gap: 7px; }

.weekly-contest-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.weekly-contest-summary article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--contest-color, var(--amber)) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 94%, var(--contest-color, var(--amber)) 6%);
}

.weekly-contest-summary article:nth-child(3n + 2) { --contest-color: var(--cyan); }
.weekly-contest-summary article:nth-child(3n) { --contest-color: var(--violet); }
.weekly-contest-summary span { color: var(--muted); font-size: 0.49rem; }
.weekly-contest-summary strong { color: var(--text); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.weekly-contest-summary small { overflow: hidden; color: var(--muted); font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; }

.weekly-contest-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.28fr);
  gap: 9px;
}

.contest-race-card {
  min-width: 0;
  margin-bottom: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-strong) 96%, var(--cyan) 4%);
}

.contest-race-chart { min-height: 270px; margin-top: 7px; }
.contest-race-legend {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 1px 2px;
  scrollbar-width: thin;
}
.contest-race-legend span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--contest-line) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 94%, var(--contest-line) 6%);
}
.contest-race-legend i { width: 14px; height: 2px; border-radius: 9px; background: var(--contest-line); }
.contest-race-legend strong { color: var(--text); font-size: 0.5rem; }
.contest-race-legend em { font-size: 0.49rem; font-style: normal; font-variant-numeric: tabular-nums; }

.contest-entry-card,
.contest-leader-card,
.weekly-contest-history {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-strong) 96%, var(--contest-card-color, var(--cyan)) 4%);
}

.contest-entry-card { --contest-card-color: var(--amber); }
.contest-leader-card { --contest-card-color: var(--cyan); }
.contest-card-title > div { display: grid; gap: 2px; }
.contest-card-title span,
.contest-card-title label span { color: var(--muted); font-size: 0.49rem; font-weight: 740; }
.contest-card-title strong { color: var(--text); font-size: 0.75rem; }
.contest-card-title small { color: var(--muted); font-size: 0.49rem; text-align: right; }
.contest-card-title label { display: grid; gap: 3px; min-width: 120px; }
.contest-card-title select { min-height: 30px; padding: 4px 7px; }
.contest-entry-card > label { display: grid; gap: 4px; margin-top: 9px; }
.contest-entry-card > label span { color: var(--muted); font-size: 0.5rem; }

.contest-pick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0;
}

.contest-pick-grid label { position: relative; min-width: 0; }
.contest-pick-grid label span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 7px;
  color: var(--amber);
  font-size: 0.54rem;
  font-weight: 850;
  transform: translateY(-50%);
}
.contest-pick-grid input { width: 100%; min-height: 32px; padding: 5px 5px 5px 20px; font-size: 0.62rem; text-transform: uppercase; }
.contest-entry-card > button { width: 100%; min-height: 34px; }
.contest-entry-note { margin: 7px 0 0; color: var(--muted); font-size: 0.5rem; line-height: 1.45; }

.contest-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0;
}
.contest-podium article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--podium-color, var(--cyan)) 30%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 93%, var(--podium-color, var(--cyan)) 7%);
}
.contest-podium article:first-child { --podium-color: var(--amber); }
.contest-podium article:nth-child(3) { --podium-color: var(--violet); }
.contest-podium span { color: var(--muted); font-size: 0.46rem; }
.contest-podium strong { overflow: hidden; color: var(--text); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.contest-podium b { color: var(--podium-color, var(--cyan)); font-size: 0.66rem; }
.contest-table-wrap { max-height: 280px; }
.contest-table-wrap table,
.contest-my-history-wrap table { font-size: 0.57rem; }
.contest-table-wrap td:nth-child(3),
.contest-my-history-wrap td:nth-child(2) { max-width: 220px; white-space: normal; }
.contest-mine td { background: color-mix(in srgb, var(--cyan) 8%, transparent); }

.weekly-contest-history { margin-top: 9px; --contest-card-color: var(--violet); }
.contest-history-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.contest-history-chip {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  border-radius: 9px;
  color: inherit;
  text-align: left;
  background: color-mix(in srgb, var(--panel) 96%, var(--violet) 4%);
}
.contest-history-chip:hover,
.contest-history-chip.active { border-color: color-mix(in srgb, var(--violet) 42%, var(--line)); }
.contest-history-chip span { color: var(--muted); font-size: 0.47rem; }
.contest-history-chip strong { overflow: hidden; color: var(--text); font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.contest-history-chip small { color: var(--muted); font-size: 0.46rem; }
.contest-my-history-wrap { max-height: 250px; }

@media (max-width: 1080px) {
  .portfolio-editor-metrics,
  .detail-company-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-editor-row { grid-template-columns: minmax(110px, 1fr) 100px 105px minmax(130px, 1fr) auto; }
  .weekly-contest-grid { grid-template-columns: 1fr; }
  .weekly-contest-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .portfolio-manual-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-manual-toolbar label { grid-column: 1 / -1; }
  .portfolio-editor-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-editor-controls label { grid-column: 1 / -1; }
  .portfolio-editor-metrics,
  .detail-company-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-editor-row { grid-template-columns: minmax(100px, 1fr) 92px auto; }
  .portfolio-editor-amount { display: none; }
  .portfolio-editor-proof { grid-column: 1 / 3; grid-row: 2; white-space: normal; }
  .portfolio-editor-remove { grid-column: 3; grid-row: 1 / 3; }
  .detail-news-list { grid-template-columns: 1fr; }
  .weekly-contest-head { display: grid; }
  .weekly-contest-head-actions { justify-content: space-between; }
  .weekly-contest-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contest-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contest-pick-grid label:last-child { grid-column: 1 / -1; }
  .contest-history-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .portfolio-editor { padding: 9px; }
  .portfolio-editor-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .weekly-contest { padding: 9px; }
  .weekly-contest-summary { grid-template-columns: 1fr 1fr; }
  .contest-podium { grid-template-columns: 1fr; }
  .contest-history-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.portfolio-outcome-band {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(110px, .7fr));
  gap: 1px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid rgba(95, 174, 255, .18);
  border-radius: 12px;
  background: rgba(4, 12, 24, .72);
}

.portfolio-outcome-band > div,
.portfolio-outcome-band:not(:has(div)) {
  padding: 10px 12px;
}

.portfolio-outcome-band > div { background: rgba(10, 25, 43, .78); }
.portfolio-outcome-band span { display: block; color: var(--muted); font-size: .7rem; letter-spacing: .045em; text-transform: uppercase; }
.portfolio-outcome-band strong { display: block; margin-top: 3px; font-size: clamp(.86rem, 1vw, 1.02rem); line-height: 1.25; }
.portfolio-outcome-band.positive { border-color: rgba(45, 212, 191, .42); }
.portfolio-outcome-band.warning { border-color: rgba(251, 191, 36, .42); }
.portfolio-outcome-band.danger { border-color: rgba(251, 113, 133, .45); }

@media (max-width: 720px) {
  .portfolio-outcome-band { grid-template-columns: 1fr 1fr; }
  .portfolio-outcome-band > div:first-child { grid-column: 1 / -1; }
}