:root {
  color-scheme: dark;
  --bg: #07101f;
  --surface: #0d1729;
  --surface-2: #121f34;
  --border: #23344f;
  --text: #eef5ff;
  --muted: #91a2bc;
  --primary: #66e2b4;
  --primary-2: #4fc59a;
  --danger: #ff7b8a;
  --warning: #ffc86b;
  --blue: #72a7ff;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at top right,#12264a 0,transparent 32%),var(--bg); color: var(--text); font: 15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea { font: inherit; }
button,.button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 10px; padding: .72rem 1rem; cursor: pointer; transition: .18s ease; text-decoration: none; display: inline-flex; align-items:center; justify-content:center; gap:.45rem; }
button:hover,.button:hover { transform: translateY(-1px); border-color:#496482; }
button.primary,.button.primary { background: var(--primary); color:#06130f; border-color:transparent; font-weight:750; }
button.danger,.danger { border-color:rgba(255,123,138,.55); color:#ffd5da; }
.positive-button { color:#06130f; background:var(--primary); border-color:transparent; }
input,textarea { width:100%; color:var(--text); background:#07101f; border:1px solid var(--border); border-radius:10px; padding:.75rem; outline:none; }
input:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(102,226,180,.12); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.8rem,4vw,3rem); line-height:1.08; letter-spacing:-.035em; }
h2 { font-size:1.05rem; }
small,.muted { color:var(--muted); }
.eyebrow { color:var(--primary); letter-spacing:.14em; font-size:.7rem; font-weight:800; margin-bottom:.55rem; }
.splash { min-height:100vh; display:grid; place-items:center; color:var(--muted); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.login-card { width:min(460px,100%); background:rgba(13,23,41,.96); border:1px solid var(--border); border-radius:22px; padding:2rem; box-shadow:var(--shadow); }
.login-card form { display:grid; gap:.75rem; margin-top:1.3rem; }
.brand-mark { width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--primary);color:#06130f;font-size:1.8rem;font-weight:900;margin-bottom:1.4rem; }
.error { color:var(--danger); margin-top:1rem; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); }
aside { position:sticky; top:0; height:100vh; padding:1.3rem 1rem; border-right:1px solid var(--border); background:rgba(7,16,31,.94); display:flex; flex-direction:column; }
.logo { display:flex; align-items:center; gap:.8rem; padding:.4rem .45rem 1.5rem; }
.logo>div { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--primary);color:#07101f;font-weight:900; }
.logo span { display:grid; }
.logo small { font-size:.72rem; }
nav { display:grid; gap:.35rem; }
nav button { width:100%; justify-content:flex-start; background:transparent; border-color:transparent; color:var(--muted); }
nav button.active,nav button:hover { color:var(--text); background:var(--surface-2); border-color:var(--border); }
.aside-bottom { margin-top:auto; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.55rem; color:var(--muted); font-size:.82rem; }
.aside-bottom button { grid-column:1/-1; width:100%; background:transparent; }
.paper-dot { width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary); }
.content { width:min(1500px,100%); padding:2rem clamp(1rem,3vw,3rem) 4rem; overflow:hidden; }
.hero-row,.page-head,.panel-title { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.system-pill { padding:.55rem .8rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); white-space:nowrap; font-size:.8rem; }
.system-pill span { display:inline-block; width:8px;height:8px;border-radius:50%;background:var(--warning);margin-right:.45rem; }
.system-pill.success span { background:var(--primary); }
.system-pill.failed span { background:var(--danger); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.metric,.panel,.position-card { background:linear-gradient(145deg,rgba(18,31,52,.96),rgba(10,20,37,.96)); border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.metric { padding:1.15rem; display:grid; gap:.25rem; }
.metric span { color:var(--muted); font-size:.78rem; }
.metric strong { font-size:1.55rem; }
.panel { padding:1.15rem; margin-bottom:1rem; overflow:hidden; }
.split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.chart-panel { min-height:320px; }
.chart-wrap { height:235px; }
.simple-chart { width:100%; height:calc(100% - 28px); overflow:visible; }
.simple-chart polyline { stroke:var(--primary); stroke-width:2.2; filter:drop-shadow(0 0 4px rgba(102,226,180,.35)); }
.chart-caption { display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;padding-top:6px; }
.status-list,.position-card dl { margin:0; display:grid; gap:.1rem; }
.status-list div,.position-card dl div { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid rgba(35,52,79,.65); }
dt { color:var(--muted); } dd { margin:0; text-align:right; }
.table-wrap { overflow:auto; margin:0 -1.15rem -1.15rem; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { text-align:left; padding:.8rem 1rem; border-top:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; background:rgba(7,16,31,.55); }
tr.clickable { cursor:pointer; } tr.clickable:hover { background:rgba(102,226,180,.045); }
.detail-row td { background:#091427; }
.signal-detail { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:1.3rem; }
.signal-detail p { margin:.28rem 0; color:var(--muted); }
.warning { color:var(--warning)!important; }
.factor { display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid rgba(35,52,79,.5);text-transform:capitalize; }
.badge { display:inline-flex; border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:.2rem .55rem; font-size:.7rem; font-weight:750; }
.badge.buy,.badge.success,.badge.connected,.badge.active { color:var(--primary);border-color:rgba(102,226,180,.45);background:rgba(102,226,180,.08); }
.badge.sell,.badge.failed,.badge.missing,.badge.paused { color:var(--danger);border-color:rgba(255,123,138,.45);background:rgba(255,123,138,.08); }
.badge.hold,.badge.running,.badge.pending { color:var(--warning); }
.card-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem; }
.position-card { padding:1rem; }
.position-card h2 { margin:.6rem 0 1rem;font-size:1.6rem; }
.positive { color:var(--primary); } .negative { color:var(--danger); }
.weight-row { display:grid;grid-template-columns:140px 1fr;gap:.7rem;align-items:center;margin:.75rem 0;text-transform:capitalize; }
.weight-row>div { position:relative;height:24px;border-radius:999px;background:#07101f;overflow:hidden; }
.weight-row i { display:block;height:100%;background:linear-gradient(90deg,var(--primary-2),var(--blue)); }
.weight-row b { position:absolute;right:.6rem;top:.18rem;font-size:.75rem; }
pre { overflow:auto; background:#07101f; border:1px solid var(--border); border-radius:10px; padding:1rem; color:#bcd0ee; max-height:500px; }
.button-stack { display:grid;gap:.7rem; }
.secret-grid { display:grid;gap:.7rem; }
.secret { display:grid;grid-template-columns:minmax(180px,.6fr) 1fr;gap:1rem;align-items:center;padding:.8rem;border:1px solid var(--border);border-radius:12px; }
.secret>div:first-child { display:flex;align-items:center;justify-content:space-between;gap:.7rem; }
.secret-entry { display:grid;grid-template-columns:1fr auto auto;gap:.5rem; }
.config-editor { min-height:520px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; }
.notice,.error-banner { padding:.85rem 1rem;border-radius:10px;margin-bottom:1rem; }
.notice { background:rgba(102,226,180,.08);border:1px solid rgba(102,226,180,.4); }
.error-banner { background:rgba(255,123,138,.08);border:1px solid rgba(255,123,138,.4);color:#ffd5da; }
.empty { color:var(--muted);padding:1.5rem;text-align:center; }
.safety-list { color:var(--muted);padding-left:1.2rem; }
.ghost { background:transparent!important; }
@media (max-width:1000px) { .metric-grid { grid-template-columns:repeat(2,1fr); } .signal-detail { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .app-shell { grid-template-columns:1fr; }
  aside { position:sticky;z-index:20;height:auto;top:0;border-right:0;border-bottom:1px solid var(--border);padding:.65rem;display:block;overflow:auto; }
  .logo { display:none; } nav { display:flex;min-width:max-content; } nav button { width:auto; }
  .aside-bottom { display:none; }
  .content { padding:1.2rem .8rem 5rem; }
  .metric-grid,.split-grid { grid-template-columns:1fr; }
  .hero-row,.page-head,.panel-title { align-items:flex-start;flex-direction:column; }
  .system-pill { white-space:normal; }
  .secret { grid-template-columns:1fr; }
  .secret-entry { grid-template-columns:1fr; }
}

/* v2.0.5 Performance & Validation */
.performance-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.period-switch { display:flex; gap:.4rem; flex-wrap:wrap; }
.period-switch button { padding:.5rem .75rem; min-width:54px; }
.period-switch button.active { background:var(--primary); color:#06130f; border-color:transparent; font-weight:800; }
.performance-chart polyline { stroke-width:2.2; }
.performance-chart polyline.portfolio { stroke:var(--primary); }
.performance-chart polyline.stock-benchmark { stroke:var(--blue); }
.performance-chart polyline.crypto-benchmark { stroke:var(--warning); }
.chart-legend { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.78rem; padding-top:6px; }
.chart-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.chart-legend i { width:18px; height:3px; border-radius:999px; display:inline-block; }
.chart-legend i.portfolio { background:var(--primary); }
.chart-legend i.stock-benchmark { background:var(--blue); }
.chart-legend i.crypto-benchmark { background:var(--warning); }
.chart-legend b { margin-left:auto; font-weight:500; }
.compact-table table { min-width:620px; }
.validation-note { margin:1rem 0 0; }
.blocked-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; }
.blocked-grid>div { display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid var(--border); border-radius:12px; background:rgba(7,16,31,.45); }
.blocked-grid strong { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,200,107,.1); color:var(--warning); }
.blocked-grid span { color:var(--muted); text-transform:capitalize; }
@media (max-width:1000px) { .performance-metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .performance-metrics { grid-template-columns:1fr; } .chart-legend b { margin-left:0; width:100%; } }

/* SETTINGS UX PATCH V1 */

.settings-card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}

.execution-mode-card,
.strategy-settings-card {
  box-shadow:none;
}

.mode-choice-grid {
  display:grid;
  gap:.7rem;
  margin-top:1rem;
}

.mode-choice {
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.mode-choice strong {
  font-size:.95rem;
}

.mode-choice small,
.threshold-field small {
  opacity:.68;
  line-height:1.35;
}

.mode-choice.active {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(102,226,180,.10);
}

.mode-choice.danger-mode:not(.active) {
  opacity:.82;
}

.threshold-grid {
  display:grid;
  gap:.8rem;
  margin-top:.5rem;
}

.threshold-field {
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  align-items:center;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--border);
}

.threshold-field:last-child {
  border-bottom:0;
}

.threshold-field span {
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.threshold-field input {
  width:100%;
}

.settings-actions {
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
}

.compact-note {
  margin-top:.8rem;
  font-size:.82rem;
}

.advanced-config-panel {
  margin-top:1rem;
}

.advanced-config-panel > summary {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.advanced-config-body {
  margin-top:1.2rem;
}

@media (max-width: 900px) {
  .settings-card-grid {
    grid-template-columns:1fr;
  }
}

/* ML HEALTH UI V1 */

.ml-health-card {
  overflow:hidden;
}

.ml-health-title {
  align-items:flex-start;
}

.ml-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.38rem .65rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  white-space:nowrap;
  border:1px solid var(--border);
}

.ml-status.healthy {
  color:var(--primary);
  background:rgba(102,226,180,.08);
  border-color:rgba(102,226,180,.28);
}

.ml-status.collecting,
.ml-status.validating {
  color:#9fc5ff;
  background:rgba(112,164,255,.08);
  border-color:rgba(112,164,255,.25);
}

.ml-status.warning {
  color:#ffd58a;
  background:rgba(255,190,90,.08);
  border-color:rgba(255,190,90,.28);
}

.ml-health-headline {
  margin:.6rem 0 1.25rem;
  font-weight:700;
  font-size:.95rem;
}

.ml-observation-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-bottom:.55rem;
}

.ml-observation-row > div {
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.ml-observation-row span,
.ml-metrics span,
.ml-layer-grid span {
  color:var(--muted);
  font-size:.8rem;
}

.ml-progress {
  width:100%;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  margin-bottom:1.25rem;
}

.ml-progress i {
  display:block;
  height:100%;
  min-width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--primary),#6ea8ff);
  transition:width .3s ease;
}

.ml-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
}

.ml-metrics > div,
.ml-layer-grid > div {
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:.75rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,.12);
}

.ml-layer-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
  margin-top:.65rem;
}

.ml-layer-active {
  color:var(--primary);
}

.ml-layer-waiting {
  color:#9fc5ff;
}

.ml-reason {
  margin-top:1rem;
  padding:.7rem .8rem;
  border-left:3px solid var(--primary);
  background:rgba(255,255,255,.025);
  border-radius:0 8px 8px 0;
  font-size:.85rem;
}

.ml-explanation {
  margin:.9rem 0 0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.5;
}

@media (max-width:700px) {
  .ml-metrics {
    grid-template-columns:1fr;
  }

  .ml-layer-grid {
    grid-template-columns:1fr;
  }
}

/* TRADING UNIVERSE UI V1 */

.universe-card {
  box-shadow:none;
}

.universe-count {
  font-size:.82rem;
  white-space:nowrap;
}

.universe-presets {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:1rem 0;
}

.universe-search {
  width:100%;
  margin-bottom:.75rem;
}

.universe-options {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  max-height:430px;
  overflow:auto;
  padding-right:.3rem;
}

.universe-option {
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.65rem .7rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,.10);
  cursor:pointer;
}

.universe-option:hover {
  background:rgba(255,255,255,.035);
}

.universe-option input {
  flex:0 0 auto;
  width:auto;
}

.universe-option-main {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1;
}

.universe-option-main small {
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.universe-lock {
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#ffd58a;
  white-space:nowrap;
}

@media (max-width:700px) {
  .universe-option {
    align-items:flex-start;
  }

  .universe-lock {
    display:none;
  }
}

/* PERFORMANCE + OPPORTUNITY FILTERS V3 */

.filter-panel {
  margin-bottom: 1rem;
}

.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.4rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.filter-group > span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.filter-pill {
  min-width: auto;
  padding: .5rem .75rem;
  border-radius: 999px;
}

.filter-pill.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(102, 226, 180, .08);
}

.filter-search-group {
  flex: 1 1 200px;
}

.filter-search-group input {
  min-width: 190px;
  width: 100%;
}

.result-count {
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8rem;
  white-space: nowrap;
}

.date-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .7rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.date-range label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  color: var(--muted);
  font-size: .78rem;
}

.date-range input {
  min-width: 160px;
}

.chart-note {
  margin: .55rem 0 0;
  font-size: .76rem;
}

.performance-chart .portfolio {
  stroke: var(--primary);
  stroke-width: 2.8;
}

.performance-chart .benchmark-blended {
  stroke: #f3c969;
  stroke-width: 2.4;
}

.performance-chart .benchmark-spy {
  stroke: #6ea8ff;
  stroke-width: 1.8;
}

.performance-chart .benchmark-qqq {
  stroke: #bd8cff;
  stroke-width: 1.8;
  stroke-dasharray: 3 1.5;
}

.performance-chart .benchmark-btc {
  stroke: #ff9f6e;
  stroke-width: 1.8;
}

.chart-legend i.benchmark-blended {
  background: #f3c969;
}

.chart-legend i.benchmark-spy {
  background: #6ea8ff;
}

.chart-legend i.benchmark-qqq {
  background: #bd8cff;
}

.chart-legend i.benchmark-btc {
  background: #ff9f6e;
}

@media (max-width: 700px) {
  .filter-toolbar {
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
  }

  .date-range {
    align-items: stretch;
  }

  .date-range label,
  .date-range button {
    width: 100%;
  }

  .date-range input {
    width: 100%;
  }
}


/* PERFORMANCE CHART AXES + LABELS V4 */

.performance-chart-v4 {
  display: block;
  width: 100%;
  height: auto;
  min-height: 330px;
  overflow: visible;
}

.performance-grid-line {
  stroke: rgba(148, 163, 184, .16);
  stroke-width: 1;
}

.performance-grid-line.vertical {
  stroke: rgba(148, 163, 184, .09);
}

.performance-zero-line {
  stroke: rgba(226, 232, 240, .38);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.performance-axis-line {
  stroke: rgba(148, 163, 184, .42);
  stroke-width: 1.2;
}

.performance-axis-tick {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.performance-axis-title {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.performance-data-label {
  font-size: 12px;
  font-weight: 800;
}

.performance-endpoint {
  stroke-width: 2;
}

.performance-label-guide {
  fill: none;
  stroke-width: 1;
  opacity: .55;
}

.performance-data-label.portfolio { fill: var(--primary); }
.performance-data-label.benchmark-blended { fill: #f3c969; }
.performance-data-label.benchmark-spy { fill: #6ea8ff; }
.performance-data-label.benchmark-qqq { fill: #bd8cff; }
.performance-data-label.benchmark-btc { fill: #ff9f6e; }

.performance-endpoint.portfolio,
.performance-label-guide.portfolio { stroke: var(--primary); }
.performance-endpoint.benchmark-blended,
.performance-label-guide.benchmark-blended { stroke: #f3c969; }
.performance-endpoint.benchmark-spy,
.performance-label-guide.benchmark-spy { stroke: #6ea8ff; }
.performance-endpoint.benchmark-qqq,
.performance-label-guide.benchmark-qqq { stroke: #bd8cff; }
.performance-endpoint.benchmark-btc,
.performance-label-guide.benchmark-btc { stroke: #ff9f6e; }

.performance-endpoint.portfolio { fill: var(--primary); }
.performance-endpoint.benchmark-blended { fill: #f3c969; }
.performance-endpoint.benchmark-spy { fill: #6ea8ff; }
.performance-endpoint.benchmark-qqq { fill: #bd8cff; }
.performance-endpoint.benchmark-btc { fill: #ff9f6e; }

@media (max-width: 700px) {
  .performance-chart-v4 {
    min-height: 260px;
  }

  .performance-axis-tick,
  .performance-data-label {
    font-size: 11px;
  }
}


/* PERFORMANCE CHART LAYOUT FIX V5 */

/*
 * The generic .chart-wrap is intentionally compact for dashboard charts.
 * The Performance chart needs extra height for axes, tick labels and
 * right-side endpoint labels, so override only this panel.
 */
.performance-chart-panel {
  overflow: visible !important;
}

.performance-chart-panel .chart-wrap {
  height: auto !important;
  min-height: 460px !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 4px 8px 0;
}

.performance-chart-panel .performance-chart-v4 {
  display: block;
  width: 100% !important;
  height: 440px !important;
  min-height: 440px !important;
  max-height: none !important;
  overflow: visible !important;
}

.performance-chart-panel .chart-legend {
  flex-wrap: wrap;
  row-gap: .45rem;
  margin-top: .65rem;
}

.performance-chart-panel .chart-note {
  margin-bottom: 0;
  line-height: 1.45;
}

.performance-chart-panel svg text {
  dominant-baseline: auto;
}

@media (max-width: 900px) {
  .performance-chart-panel .chart-wrap {
    min-height: 410px !important;
  }

  .performance-chart-panel .performance-chart-v4 {
    height: 390px !important;
    min-height: 390px !important;
  }
}

@media (max-width: 700px) {
  .performance-chart-panel {
    overflow-x: auto !important;
  }

  .performance-chart-panel .chart-wrap {
    min-width: 720px;
    min-height: 370px !important;
  }

  .performance-chart-panel .performance-chart-v4 {
    height: 350px !important;
    min-height: 350px !important;
  }
}

/* DEGRADED RUN STATUS V1 */
.system-pill.degraded {
  border-color: rgba(245, 183, 66, .55);
  color: #f5b742;
  background: rgba(245, 183, 66, .08);
}

.system-pill.degraded > span {
  background: #f5b742;
  box-shadow: 0 0 12px rgba(245, 183, 66, .65);
}