/* ═══════════════════════════════════════════════════════════════
   QFM.Science — Shared App Styles
   Financial Wave Mechanics — all three workspaces
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:      #111111;
  --paper:    #f9f9f9;
  --surface:  #ffffff;
  --border:   rgba(17,17,17,.10);
  --border-s: rgba(17,17,17,.065);
  --yellow:   #EAB308;
  --yellow-d: #CA8A04;
  --yellow-h: #fbbf24;
  --gold:     #c88728;
  --dim:      #6b6b6b;
  --muted:    #9ca3af;
  --danger:   #b03010;
  --safe:     #3a7050;
  --f-ui:     'Inter', sans-serif;
  --f-serif:  'Playfair Display', serif;
  --f-mono:   'DM Mono', monospace;
  --r:        14px;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.07);
  --shadow-lg: 0 24px 70px rgba(17,17,17,.18);
  --gradient-1: linear-gradient(135deg, #EAB308 0%, #D97706 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  overflow: hidden;
  background: #050505;
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 14px;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 62%);
  z-index: 0;
}
a { color: inherit; text-decoration: none; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── TOP NAV ──────────────────────────────────────────────────── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  height: 68px;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0 1.5rem;
  background: rgba(17,17,17,.93);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px);
}
.topnav-back {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.72);
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .15s;
}
.topnav-back:hover { color: #fff; }
.topnav-sep { width: 1px; height: 22px; background: rgba(255,255,255,.13); }
.topnav-app {
  color: #fff; font-family: var(--f-ui);
  font-size: 1rem; font-weight: 800; letter-spacing: .01em;
}
.topnav-right {
  margin-left: auto; display: flex; align-items: center; gap: .85rem;
}
.topnav-dash-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--yellow);
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(234,179,8,.22);
  border-radius: 999px; padding: .25rem .75rem;
  transition: all .15s;
}
.topnav-dash-link:hover { background: rgba(234,179,8,.08); color: #fff; border-color: rgba(234,179,8,.5); }

.usage-chips { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; }
.chip {
  flex: none;
  width: 8px !important; height: 8px !important;
  min-width: 8px; max-width: 8px;
  min-height: 8px; max-height: 8px;
  border-radius: 50% !important;
  background: var(--yellow);
  align-self: center;
  padding: 0; margin: 0; border: none;
}
.chip.empty { background: rgba(255,255,255,.18); }
.usage-label { color: rgba(255,255,255,.72); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; }

/* ── SECTION TABS ─────────────────────────────────────────────── */
.section-tabs {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: .4rem; padding: 1rem 1.15rem .6rem;
}
.sec-tab {
  padding: .55rem .4rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: transparent; color: rgba(255,255,255,.5);
  font-family: var(--f-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: all .18s;
}
.sec-tab:hover { border-color: rgba(234,179,8,.3); color: #fff; }
.sec-tab.active {
  border-color: transparent;
  background: var(--gradient-1);
  color: #fff;
  box-shadow: 0 6px 18px rgba(234,179,8,.25);
}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 360px) 1fr;
  height: calc(100vh - 68px);
  margin-top: 68px;
  padding: 16px; gap: 16px;
}
.sidebar {
  position: relative; overflow-y: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(8,8,8,.92);
  backdrop-filter: blur(16px);
}
.sidebar-block {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-block:last-child { border-bottom: 0; }
.sidebar-section { display: none; }
.sidebar-section.active { display: block; }

.blk-label {
  color: rgba(255,255,255,.42);
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .85rem;
}
.blk-label-note {
  font-size: .58rem; letter-spacing: .06em; text-transform: none;
  color: var(--yellow); opacity: .7; font-style: italic;
}

/* ── LOCKED PARAMS (hedging from pricing) ─────────────────────── */
.locked-params {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  padding: .55rem .65rem;
  margin-bottom: .5rem;
}
.lk-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .22rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.lk-row:last-child { border-bottom: none; }
.lk-key {
  font-family: var(--f-mono); font-size: .64rem;
  color: rgba(255,255,255,.35); letter-spacing: .04em;
}
.lk-val {
  font-family: var(--f-mono); font-size: .68rem;
  color: rgba(255,255,255,.75); text-align: right;
}
.lk-hint {
  font-size: .62rem; color: rgba(255,255,255,.22);
  font-style: italic; text-align: center;
  margin-bottom: .3rem;
}

/* ── PRICING SUB-TABS (DATA / RESULT) ────────────────────────── */
.pst-tabs {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: .4rem; padding: 1rem 1.15rem .6rem;
  max-width: 248px;
}
.pst-tab {
  padding: .55rem .4rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: all .18s;
}
.pst-tab:hover  { border-color: rgba(234,179,8,.3); color: #fff; }
.pst-tab.active {
  border-color: transparent;
  background: var(--gradient-1);
  color: #fff;
  box-shadow: 0 6px 18px rgba(234,179,8,.25);
}
.pst-panel { display: none; flex-direction: column; gap: 1.2rem; }
.pst-panel.active { display: flex; }
.pst-compute-row {
  padding: 1rem 1.5rem .2rem;
  max-width: 720px;
}
.pst-compute-row .run-btn { width: 100%; max-width: 260px; }
.pst-params-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .8rem; padding: .4rem 1.5rem .6rem;
  max-width: 720px;
}
.pst-param-col {
  padding: .75rem .9rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
}
.pst-param-col input[type="number"] { color-scheme: dark; }
.pst-col-label {
  color: rgba(255,255,255,.42);
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .7rem;
}
.pst-barrier-section {
  padding: 0 1.5rem .6rem;
  max-width: 720px;
}
.pst-barrier-title {
  margin-bottom: .5rem;
}
.pst-barrier-grid {
  grid-template-columns: minmax(0, 420px) 1fr;
  padding: 0;
}

/* ── FIELDS ───────────────────────────────────────────────────── */
.field { margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .38rem;
  color: var(--dim);
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em;
}
.field-hint { color: var(--muted); white-space: nowrap; }
.inp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }

.inp {
  width: 100%; min-height: 42px;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  font-family: var(--f-mono); font-size: .78rem;
  outline: none; padding: .62rem .8rem;
  transition: border-color .18s, box-shadow .18s;
}
.inp:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(234,179,8,.12);
}
.inp.readonly {
  background: rgba(234,179,8,.08);
  color: var(--yellow-h);
}
.inp select, select.inp {
  color-scheme: dark;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  cursor: pointer;
}

/* parameter grid rows */
.param-header {
  display: grid; grid-template-columns: minmax(0,1fr) 90px;
  gap: .65rem; padding: 0 0 .35rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.param-header span {
  color: rgba(255,255,255,.34);
  font-family: var(--f-mono); font-size: .55rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.param-row {
  display: grid; grid-template-columns: minmax(0,1fr) 90px;
  align-items: center; gap: .65rem; padding: .34rem 0;
}
.param-label {
  min-width: 0; color: rgba(255,255,255,.68);
  font-family: var(--f-mono); font-size: .66rem; line-height: 1.35;
}
.param-label .hint { color: rgba(255,255,255,.34); font-size: .58rem; white-space: nowrap; }
.param-row .inp {
  min-height: 28px; border: 0; border-radius: 0; background: transparent;
  padding: .12rem 0; text-align: center;
}
.param-row .inp:focus { box-shadow: inset 0 -1px 0 rgba(234,179,8,.65); }
.param-row .inp.readonly { background: transparent; color: var(--yellow-h); }
.sidebar input[type="number"] { color-scheme: dark; }
.sidebar input[type="number"]::-webkit-outer-spin-button,
.sidebar input[type="number"]::-webkit-inner-spin-button { opacity: .32; filter: invert(1) grayscale(1); }
.sidebar input[type="number"]:hover::-webkit-outer-spin-button,
.sidebar input[type="number"]:hover::-webkit-inner-spin-button,
.sidebar input[type="number"]:focus::-webkit-outer-spin-button,
.sidebar input[type="number"]:focus::-webkit-inner-spin-button { opacity: .52; }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.run-btn, .pro-go {
  border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--f-ui); font-size: .78rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  transition: box-shadow .2s, transform .2s, background .2s;
}
.run-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; min-height: 44px; padding: 0 1.1rem;
  background: var(--gradient-1); color: #fff;
  box-shadow: 0 10px 24px rgba(234,179,8,.25);
}
.sidebar .run-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(234,179,8,.32); }
.run-btn:disabled { cursor: not-allowed; opacity: .62; transform: none; }
.spin-icon { display: none; animation: spin .7s linear infinite; }
.run-btn.loading .run-icon { display: none; }
.run-btn.loading .spin-icon { display: inline; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── MAIN AREA ────────────────────────────────────────────────── */
.main { min-width: 0; overflow: hidden; background: transparent; }
.content {
  height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: .5rem 0 1rem 1rem;
}

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.empty {
  min-height: 360px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem; color: var(--dim); text-align: center;
}
.empty-wave { color: rgba(234,179,8,.45); font-family: var(--f-serif); font-size: 4rem; line-height: 1; }
.empty-title { color: rgba(255,255,255,.7); font-size: 1.3rem; font-weight: 800; }
.empty-sub { color: rgba(255,255,255,.38); font-family: var(--f-mono); font-size: .72rem; line-height: 1.7; }

/* ── RESULT WRAPPERS ──────────────────────────────────────────── */
.rw { display: none; flex-direction: column; gap: 1.2rem; }
.rw.show { display: flex; }

.result-context {
  min-height: 46px; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: rgba(8,8,8,.92);
}
.result-context span {
  color: rgba(255,255,255,.42);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}
.result-context strong { color: var(--yellow-h); font-size: .95rem; font-weight: 800; }

/* ── KPI STRIP ────────────────────────────────────────────────── */
.kpi-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.kpi {
  min-height: 130px; padding: 1.2rem 1.1rem;
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: rgba(8,8,8,.92);
}
.kpi-meta {
  display: flex; align-items: center; gap: .42rem;
  margin-bottom: .75rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
}
.kpi-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kpi-val { color: #fff; font-family: var(--f-ui); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.kpi-val.accent { color: var(--yellow-h); }
.kpi-val.gold    { color: var(--gold); }
.kpi-val.safe    { color: #4ade80; }
.kpi-val.danger  { color: #f87171; }
.kpi-unit { margin-top: .55rem; color: rgba(255,255,255,.38); font-family: var(--f-mono); font-size: .62rem; line-height: 1.35; }

/* ── CARDS ────────────────────────────────────────────────────── */
.card {
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: rgba(255,255,255,.93); overflow: hidden;
}
.card.dark { background: rgba(8,8,8,.92); border-color: rgba(255,255,255,.08); }
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-s);
}
.card.dark .card-head { border-bottom-color: rgba(255,255,255,.06); }
.card-title { color: var(--ink); font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.card.dark .card-title { color: rgba(255,255,255,.6); font-weight: 400; }
.card-subtitle { color: var(--dim); font-family: var(--f-mono); font-size: .6rem; }
.chart-area { padding: 1rem; }
.chart-wrap { position: relative; height: 230px; }
.chart-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }

/* ── TABLES ───────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: .5rem .9rem;
  border-bottom: 1px solid var(--border); text-align: right; font-weight: 400;
}
.data-table th:first-child { text-align: left; }
.data-table td {
  font-family: var(--f-mono); font-size: .73rem; padding: .6rem .9rem;
  color: var(--ink); border-bottom: 1px solid var(--border-s); text-align: right;
}
.data-table td:first-child { text-align: left; color: var(--dim); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: rgba(234,179,8,.03); }
.data-table tr.hl-row td:first-child { color: var(--yellow-d); font-weight: 700; }
.td-accent { color: var(--yellow-d) !important; font-weight: 700; }
.td-gold   { color: var(--gold) !important; font-weight: 700; }
.td-safe   { color: var(--safe) !important; }
.td-danger { color: var(--danger) !important; }

/* ── BAR INLINE ───────────────────────────────────────────────── */
.bar-cell { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.bar-bg { width: 60px; height: 4px; background: rgba(17,17,17,.1); border-radius: 2px; }
.bar-fill { height: 100%; border-radius: 2px; background: var(--yellow); }
.bar-fill.muted { background: var(--muted); }

/* ── INTERPRETATION BOX ───────────────────────────────────────── */
.interp {
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: rgba(8,8,8,.92);
}
.interp-lbl {
  margin-bottom: .9rem;
  color: var(--yellow-h);
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
}
.interp-body { color: rgba(255,255,255,.62); font-size: .92rem; line-height: 1.75; }
.interp-body strong { color: #fff; }

/* ── INFO GRID (3-col summary) ────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.info-item {
  padding: .9rem; border-radius: 14px; background: rgba(17,17,17,.035);
  border: 1px solid var(--border-s);
}
.info-lbl { margin-bottom: .35rem; color: var(--dim); font-family: var(--f-mono); font-size: .64rem; }
.info-val { color: var(--ink); font-size: 1.2rem; font-weight: 800; }
.info-val.accent { color: var(--yellow-d); }
.info-val.gold   { color: var(--gold); }
.info-unit { margin-top: .25rem; color: var(--muted); font-family: var(--f-mono); font-size: .6rem; line-height: 1.45; }

/* status badges */
.status-ok      { border: 1px solid rgba(58,112,80,.22); background: rgba(58,112,80,.08); color: var(--safe); }
.status-warn    { border: 1px solid rgba(234,179,8,.22); background: rgba(234,179,8,.06); color: var(--yellow-d); }
.status-bad     { border: 1px solid rgba(176,48,16,.22); background: rgba(176,48,16,.08); color: var(--danger); }
.status-msg     { margin-top: .85rem; padding: .68rem .8rem; border-radius: 14px; font-family: var(--f-mono); font-size: .68rem; line-height: 1.5; }

/* ── PRO OVERLAY ──────────────────────────────────────────────── */
.pro-veil {
  display: none; position: fixed; inset: 0; z-index: 900;
  align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(17,17,17,.36); backdrop-filter: blur(10px);
}
.pro-veil.show { display: flex; }
.pro-card {
  width: min(430px,100%); padding: 2.2rem; border-radius: 22px;
  background: #111; color: #fff; text-align: center;
  box-shadow: 0 30px 90px rgba(0,0,0,.36);
}
.pro-ico { margin-bottom: 1rem; font-size: 2.2rem; }
.pro-h   { margin-bottom: .65rem; font-size: 1.8rem; font-weight: 800; }
.pro-p   { margin-bottom: 1.45rem; color: rgba(255,255,255,.68); font-size: .92rem; line-height: 1.7; }
.pro-go  {
  width: 100%; min-height: 46px;
  background: var(--gradient-1); color: #fff;
}
.pro-go:hover { transform: translateY(-1px); }
.pro-skip {
  display: inline-block; margin-top: 1rem;
  color: rgba(255,255,255,.48); cursor: pointer;
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.pro-skip:hover { color: rgba(255,255,255,.78); }

/* ── BOOK REF ─────────────────────────────────────────────────── */
.book-ref {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .08em; color: rgba(255,255,255,.3); line-height: 1.7;
}
.book-ref span { color: var(--gold); }

/* ── SECTION PANELS (shown/hidden) ───────────────────────────── */
.result-panel { display: none; }
.result-panel.active { display: flex; flex-direction: column; gap: 1.2rem; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-strip, .chart-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  body { overflow: auto; }
  .topnav { height: auto; min-height: 68px; flex-wrap: wrap; padding: .8rem 1rem; gap: .75rem; }
  .topnav-right { width: 100%; margin-left: 0; justify-content: flex-end; }
  .layout { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 68px); margin-top: 92px; }
  .main { overflow: visible; }
  .content { height: auto; overflow: visible; }
  .info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .topnav-sep { display: none; }
  .layout { padding: 10px; gap: 10px; margin-top: 108px; }
  .inp-row, .kpi-strip, .chart-row, .info-grid { grid-template-columns: 1fr; }
}