/* NOX QUANT — VISUAL SYSTEM v1
   Drop-in stylesheet: load AFTER the project's existing CSS.
   All functional input IDs, form controls, JS bindings and endpoint URLs remain untouched.
*/
:root {
  color-scheme: dark;
  --bg: #080d15;
  --panel: #101723;
  --panel-raised: #151e2c;
  --border: #273246;
  --border-strong: #344259;
  --text: #f1f5fb;
  --muted: #a2afc1;
  --quiet: #8190a6;
  --blue: #457ffe;
  --blue-soft: rgba(69,127,254,.15);
  --green: #26d9a0;
  --amber: #fbb862;
  --red: #ff7186;
  --sans: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  font: 400 14px/1.6 var(--sans);
  color: var(--text);
  letter-spacing: -.012em;
  background:
    radial-gradient(ellipse 62% 30% at 85% -12%, rgba(44,95,194,.12), transparent 80%),
    linear-gradient(180deg, #090e17 0%, #090d15 32%, #080c14 100%);
}
.page-width {
  width: calc(100% - 80px) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
}
.topbar {
  height: 72px;
  background: rgba(8,13,21,.91);
  border-bottom: 1px solid rgba(96,115,147,.2);
  backdrop-filter: blur(16px);
}
.topbar-inner { gap: 24px; }
.brand { gap: 12px; }
.brand-icon {
  width: 38px; height: 38px;
  font-size: 19px;
  border-radius: 10px;
  background: linear-gradient(145deg, #4d87ff, #2862e8);
  box-shadow: 0 5px 24px rgba(53,111,245,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.045em; }
.topbar-note { color: #adbdce; font-size: 12px; gap: 10px; }
.status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(38,217,160,.10); }
.license-badge, .license-logout { font-size: 11px; }
main { padding-block: 52px 75px; }
.intro { position: relative; margin-bottom: 32px; align-items: flex-end; gap: 30px; }
.intro > div:first-child { max-width: 830px; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  color: #81aeff; font-size: 11px;
  letter-spacing: .14em; font-weight: 700;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--blue); border-radius: 20px; }
h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(32px, 3.4vw, 47px);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.058em;
}
.intro-copy { max-width: 690px; font-size: 15px; line-height: 1.75; color: #a7b4c8; margin-top: 17px; }
.intro-aside {
  width: 225px; min-width: 210px;
  display: flex; flex-direction: column;
  gap: 5px;
  padding-left: 18px;
  border-left: 1px solid var(--border-strong);
  margin-bottom: 7px;
}
.intro-aside-label { font: 700 10px var(--mono); letter-spacing: .075em; color: #75a0ef; }
.intro-aside strong { font-size: 13px; line-height: 1.4; color: #e0eaf7; font-weight: 600; }
.intro-aside small { font-size: 11px; line-height: 1.4; color: #8191a9; }
.workspace {
  display: grid !important;
  grid-template-columns: minmax(348px, 390px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 22px !important;
  width: 100% !important;
}
.workspace > .panel { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }
.workspace > .panel:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
.workspace > .panel:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
.panel {
  overflow: hidden;
  border: 1px solid #263246;
  border-radius: 15px;
  background: #111824;
  box-shadow: 0 12px 38px rgba(0,0,0,.16);
}
.panel-head {
  min-height: 88px;
  padding: 21px 24px 19px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(34,55,89,.12), transparent 58%);
}
.panel-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.035em; }
.panel-subtitle { color: #91a1b8; font-size: 12px; line-height: 1.6; margin-top: 6px; }
.card-content { padding: 24px; }
.field-group { margin: 0 0 23px; }
.field-label { font-size: 13px; margin-bottom: 10px; font-weight: 650; color: #dce5f3; }
.field-hint { font-size: 11px; color: #93a3ba; }
.text-input {
  height: 45px; padding: 0 13px;
  font-size: 13px;
  color: #e9effb;
  border: 1px solid #364259;
  border-radius: 8px;
  background: #0c121e;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.text-input::placeholder { color: #8190a6; }
.text-input:hover { border-color: #4a5972; }
.text-input:focus { border-color: #538dff; box-shadow: 0 0 0 3px rgba(69,127,254,.14); }
.quick-row, .chip-row { gap: 7px; margin-top: 10px; }
.quick-chip, .indicator-chip {
  min-height: 33px; border: 1px solid #303e54;
  border-radius: 7px; padding: 7px 11px;
  background: #111b2a; color: #b6c7e1;
  font-size: 11px;
}
.quick-chip:hover, .indicator-chip:hover { color: #fff; border-color: #5283df; background: #18263e; }
.indicator-chip[aria-pressed="true"] { color: #dce9ff; background: #1a3055; border-color: #507dcb; }
.segmented { gap: 8px; }
.pill {
  min-height: 43px;
  padding: 8px 6px;
  background: #0d1624;
  border: 1px solid #34435b;
  border-radius: 8px;
  color: #bfcbda;
  font-size: 12px;
  font-weight: 600;
}
.pill[aria-pressed="true"] {
  color: #ebf3ff;
  border-color: #4e84e9;
  background: linear-gradient(135deg, #203c67, #162a46);
  box-shadow: inset 0 0 0 1px rgba(93,151,255,.08);
}
.account-pill { padding: 11px 9px; min-height: 65px; gap: 4px; }
.account-pill strong { font-size: 11px; }
.account-pill small { font-size: 10px; color: #91a5bc; }
.pill .quant { font-size: 12px; }
.personal-limit { background: #0d1420; border-radius: 9px; padding: 14px; }
.separator { margin: 22px 0; background: #2d3a50; }
.history-grid, .assumption-row, .objective-config { gap: 12px; }
.history-field label { font-size: 12px; margin-bottom: 8px; color: #d0ddec; }
.history-field .text-input { height: 43px; font-size: 13px; }
.history-help, .mode-copy { font-size: 12px; color: #92a1b8; line-height: 1.7; }
.objective-toggle { font-size: 12px; padding: 15px; border-color: #314054; border-radius: 9px; background: #0d1420; line-height: 1.55; }
.objective-toggle input { width: 17px; height: 17px; margin: 2px 0 0; }
.run-button {
  min-height: 52px; margin-top: 22px; border: 1px solid #6698ff;
  border-radius: 9px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #4687ff, #3266de);
  box-shadow: 0 8px 20px rgba(55,112,243,.19);
}
.run-button:hover:not(:disabled) { background: linear-gradient(135deg, #5b97ff,#3972ec); }
.validation-message { font-size: 12px; padding: 11px; }
/* Output column — balanced before and after the first simulation */
.workspace > .panel:nth-child(2) { background: #101723; }
.radar-stage {
  min-height: 345px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(rgba(68,116,171,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(68,116,171,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 49%, rgba(9,145,115,.09), rgba(14,23,35,.3) 36%, #0d1420 77%);
  background-size: 40px 40px,40px 40px,auto;
}
.radar-stage::before {
  content: 'LIVE RISK ENGINE';
  position: absolute; z-index: 3; top: 22px; left: 24px;
  font: 600 10px var(--mono); letter-spacing: .12em; color: #6f859f;
}
.radar-stage::after {
  content: 'MONTE CARLO  /  LOCAL';
  position: absolute; z-index: 3; right: 24px; bottom: 23px;
  font: 500 10px var(--mono); letter-spacing: .04em; color: #60748f;
}
.radar-wrap { width: 305px; height: 305px; }
.radar-wrap::before { inset: 28px; border-color: rgba(34,216,161,.21); }
.radar-wrap::after { inset: 41px; border-color: rgba(34,216,161,.16); }
#risk-radar { z-index: 2; width: 240px; height: 240px; }
.radar-label {
  bottom: 7px;
  z-index: 5;
  padding: 6px 11px;
  border: 1px solid rgba(44,188,142,.25);
  border-radius: 999px;
  background: #111d29;
  color: #b9d5cf;
  font: 600 10px var(--mono);
  letter-spacing: .05em;
}
.radar-ambient {
  position: absolute; inset: 34px; z-index: 1; border-radius: 50%;
  pointer-events: none; opacity: .82;
  border: 1px solid rgba(38,217,160,.22);
  background:
    radial-gradient(circle, transparent 0 16%, rgba(38,217,160,.22) 16.3% 16.7%, transparent 17% 34%,rgba(38,217,160,.16) 34.3% 34.7%,transparent 35% 52%,rgba(38,217,160,.18) 52.3% 52.7%, transparent 53% 72%,rgba(38,217,160,.12) 72.3% 72.7%,transparent 73%),
    repeating-conic-gradient(from 0deg, rgba(38,217,160,.20) 0deg .7deg, transparent .7deg 15deg),
    radial-gradient(circle at center, rgba(26,181,142,.08), transparent 74%);
  box-shadow: 0 0 32px rgba(15,152,120,.10), inset 0 0 28px rgba(12,160,124,.07);
}
.radar-ambient::before {
  position: absolute; inset: 1px;
  border-radius: 50%; content: '';
  background: conic-gradient(from 0deg, rgba(30,216,162,.01) 0deg,rgba(30,216,162,.04) 240deg, rgba(32,223,170,.31) 340deg,transparent 360deg);
  animation: nq-sweep 8s linear infinite;
}
.radar-ambient::after {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
  transform: translate(-50%,-50%);
  content: ''; border-radius: 50%; background: #35e3b0;
  box-shadow: 0 0 20px 5px rgba(46,226,169,.28);
}
.radar-stage.is-processing .radar-ambient { filter: hue-rotate(-65deg); }
.radar-stage.is-processing .radar-ambient::before { animation-duration: 3s; }
@keyframes nq-sweep { to { transform: rotate(360deg); } }
.empty-state { min-height: 270px; padding: 30px 30px 34px; background: radial-gradient(ellipse 70% 90% at 50% 0,rgba(35,61,101,.12),transparent 80%); }
.empty-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 10px var(--mono); color: #87b0f5; letter-spacing: .11em; }
.empty-kicker::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #4d8bfa; }
.empty-title { font-size: 21px; font-weight: 650; letter-spacing: -.04em; line-height: 1.4; }
.empty-copy { font-size: 13px; max-width: 480px; margin-top: 9px; color: #9dadc4; }
.empty-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 23px; }
.empty-benefits span { padding: 7px 11px; background: #172237; border: 1px solid #263754; border-radius: 999px; color: #aec6e9; font-size: 11px; }
.results-content { padding: 20px; }
.results-status { margin-bottom: 16px; }
.results-status strong { font-size: 14px; }
.source-badge { font-size: 11px; padding: 7px 9px; }
.metrics-grid,.challenge-grid { gap: 12px; }
.metric-card,.challenge-card,.analysis-card,.streak-card,.chart-card,.sensitivity-card { background: #0d1420; border-color: #27354a; border-radius: 11px; }
.metric-card { min-height: 138px; padding: 17px; }
.metric-label { font-size: 11px; color: #a7b5ca; }
.metric-value { font-size: clamp(21px, 2.4vw, 31px); margin-top: 15px; }
.metric-detail { font-size: 10px; margin-top: 9px; color: #8192ac; }
.metric-detail .quant { font-size: 10px; }
.target-label,.target-detail { font-size: 11px; }
.target-value { font-size: 21px; }
.challenge-card, .analysis-card, .streak-card, .chart-card, .sensitivity-card { padding: 18px; }
.section-title { font-size: 15px; }
.section-description, .analysis-text { font-size: 12px; }
.analysis-label { font-size: 11px; }
.streak-stat strong { font-size: 22px; }
.streak-stat small { font-size: 11px; }
.chart-footnote, .chart-legend, .sensitivity-note { font-size: 11px; }
.sensitivity-table th { font-size: 10px; }
.sensitivity-table td { font-size: 11px; }
.risk-recommendation { padding: 18px; border-radius: 11px; }
.risk-recommendation-title { font-size: 13px; }
.risk-recommendation-copy,.risk-recommendation-stops { font-size: 11px; }
.risk-recommendation-value { font-size: 27px; }
/* Premium should look like part of the product, not an interstitial ad */
.pro-card { padding: 20px; border-radius: 11px; }
.pro-eyebrow { font-size: 11px; }
.pro-title { font-size: 16px; }
.pro-copy, .pro-suite-head p { font-size: 12px; }
.pro-button, .pro-tab, .license-activate { min-height: 41px; font-size: 12px; }
.pro-suite-head { padding: 19px; }
.pro-suite-head h3 { font-size: 15px; }
.pro-preview-card strong, .pro-unlocked-view, .pro-locked-shell, .pro-control label { font-size: 12px; }
.pro-preview-card p, .pro-lock-overlay > p, .pro-tool-intro, .pro-footnote, .pro-roadmap-copy { font-size: 12px; }
.pro-lock-overlay strong { font-size: 14px; }
.pro-controls-grid { gap: 12px; }
.pro-control .text-input { font-size: 12px; height: 42px; }
.pro-control small { font-size: 11px; }
.pro-result span, .pro-roadmap-item span { font-size: 11px; }
.pro-result strong { font-size: 19px; }
.pro-roadmap-item strong { font-size: 12px; }
.pine-code { font-size: 11px; }
.checkout-primary,.copy-report-button { min-height: 44px; font-size: 12px; }
.dialog-content { padding: 25px; }
.dialog-content p,.pro-features li { font-size: 12px; }
.footer { margin-top: 30px; font-size: 11px; padding-top: 18px; color: #8494aa; }
@media (max-width: 1120px) {
  .page-width { width: calc(100% - 44px) !important; }
  .workspace { grid-template-columns: minmax(310px, 350px) minmax(0,1fr) !important; gap: 16px !important; }
  .card-content { padding: 20px; }
  .intro-aside { display: none; }
  .metrics-grid { gap: 7px; }
  .metric-card { padding: 12px; }
}
@media (max-width: 850px) {
  .page-width { width: calc(100% - 32px) !important; }
  .workspace {
    display: grid !important;
    grid-template-columns: minmax(170px, .34fr) minmax(0, .66fr) !important;
    gap: 12px !important;
  }
  .workspace > .panel { width: 100% !important; max-width: none !important; }
  .radar-wrap { width: min(305px, 100%); }
  .intro { flex-direction: column; align-items: flex-start; }
  main { padding-top: 38px; }
  .intro-copy { max-width: 690px; }
  .panel-head { min-height: 76px; }
  .radar-stage { min-height: 314px; }
}
@media (max-width: 540px) {
  .page-width { width: calc(100% - 24px) !important; }
  .topbar { height: 62px; }
  .brand-icon { width: 34px; height: 34px; }
  .brand-name { font-size: 15px; }
  .topbar-note { font-size: 10px; }
  main { padding-top: 30px; padding-bottom: 50px; }
  h1 { font-size: clamp(29px, 8vw, 36px); }
  .intro-copy { font-size: 13px; margin-top: 12px; }
  .intro { margin-bottom: 25px; }
  .panel-head { padding: 18px; }
  .card-content { padding: 18px; }
  .field-label { font-size: 12px; }
  .text-input { font-size: 13px; }
  .segmented.accounts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .segmented.compact { gap: 5px; }
  .pill { min-height: 45px; font-size: 11px; }
  .account-pill { padding: 8px 6px; min-height: 62px; }
  .account-pill strong { font-size: 10px; }
  .account-pill small { font-size: 9px; }
  .radar-wrap { width: 268px; height: 268px; }
  .radar-stage { min-height: 300px; }
  .radar-stage::before { left: 16px; top: 18px; font-size: 9px; }
  .radar-stage::after { right: 14px; bottom: 15px; font-size: 9px; }
  .empty-state { padding: 25px 16px; }
  .empty-title { font-size: 19px; }
  .empty-copy { font-size: 12px; }
  .empty-benefits { gap: 6px; }
  .empty-benefits span { font-size: 10px; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-card:last-child { grid-column: 1/-1; }
  .metric-card { min-height: 120px; }
  .risk-recommendation { grid-template-columns: 1fr; }
  .analysis-grid, .streak-grid, .challenge-grid { grid-template-columns: 1fr; }
  .pro-controls-grid, .pro-roadmap-grid { grid-template-columns: 1fr 1fr; }
  .footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .workspace { display: flex !important; flex-direction: column !important; gap: 18px !important; }
  .workspace > .panel { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .radar-ambient::before { animation: none; }
}