/* Alpha Cataso - gold options terminal
   ------------------------------------
   Palette taken from the logo: near-black ground, electric hologram blue,
   and brushed gold, with the two eye colours - red and green - kept for
   direction. Calls are the hologram blue, puts the rose that sits opposite
   it, and gold is reserved for the instrument and the current price, so a
   colour never means two things on the same screen. */

:root {
  --bg:        #05070c;
  --panel:     #0c1220;
  --panel-2:   #141d30;
  --line:      #1e2b45;
  --line-soft: #16203a;

  --text:      #e8eef7;
  --muted:     #8a9ab5;
  --dim:       #5a6b8a;

  --gold:      #f0c04a;
  --gold-2:    #d4a03c;
  --gold-dim:  #8a6520;
  --blue:      #3fa9f5;
  --blue-glow: #6fd6ff;
  --silver:    #b8cce0;

  --call:      #3fa9f5;
  --put:       #e8628f;
  --up:        #35e06a;
  --down:      #ff4d5e;
  --warn:      #f0a93d;

  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- shell ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px; height: 60px;
  background: linear-gradient(180deg, #0c1220 0%, #080d18 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(63,169,245,.14), 0 6px 22px rgba(0,0,0,.6);
  position: sticky; top: 0; z-index: 50;
}

.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
}
.brand:hover { text-decoration: none; }

/* The logo is a circular badge on black, so it sits on the bar with a thin
   gold ring and a blue halo rather than a box - anything square around it
   would fight the artwork's own ring. */
.brand img {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 0 12px rgba(63,169,245,.42), 0 0 3px rgba(240,192,74,.5);
  flex: none;
}
.brand .word {
  display: flex; flex-direction: column; line-height: 1.05;
}
.brand .word b {
  font-size: 15px; font-weight: 800; letter-spacing: .10em;
  background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 45%, #a97b23 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .word span {
  font-size: 10px; font-weight: 600; letter-spacing: .30em;
  color: var(--silver); text-transform: uppercase;
}

/* Eight screens plus the account block is more than a narrow window fits, so
   the nav is allowed to scroll sideways rather than push the sign-out link off
   the bar. The scrollbar itself is hidden - it would sit across the tabs. */
.nav {
  display: flex; gap: 4px; margin-left: 8px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 11px; border-radius: 6px;
  color: var(--muted); font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.on {
  background: var(--panel-2); color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold), 0 0 14px rgba(63,169,245,.16);
}
.nav .badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 9px; background: var(--warn); color: #14181f;
  font-size: 10px; font-weight: 700;
}

.spacer { flex: 1; }

.who {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted);
  flex: none; white-space: nowrap;
}
.who .role {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gold); border: 1px solid var(--gold-dim);
  padding: 2px 6px; border-radius: 4px;
}

.wrap { max-width: 1560px; margin: 0 auto; padding: 20px; }

/* ---------- contract selector strip ---------- */
.strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
}
.strip label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim); display: block; margin-bottom: 4px;
}
.strip select, .strip input {
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-family: var(--mono); font-size: 13px;
  padding: 7px 10px; border-radius: 6px; min-width: 210px;
}
.strip .fact { padding-right: 4px; }
.strip .fact .v {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text);
}
.strip .fact .v.gold { color: var(--gold); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 16px; }
.grid.k4 { grid-template-columns: repeat(4, 1fr); }
.grid.k3 { grid-template-columns: repeat(3, 1fr); }
.grid.k2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1200px) {
  .grid.k4 { grid-template-columns: repeat(2, 1fr); }
  .grid.k3, .grid.k2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .grid.k4 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px;
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.card h2 {
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.card h2 .sub {
  float: right; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--dim); font-family: var(--mono);
}

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dim);
}
.stat .n {
  font-family: var(--mono); font-size: 26px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.01em;
}
.stat .note { font-size: 11px; color: var(--muted); }
.n.gold { color: var(--gold); }
.n.call { color: var(--call); }
.n.put  { color: var(--put); }
.n.up   { color: var(--up); }
.n.down { color: var(--down); }

.rows { display: flex; flex-direction: column; gap: 0; }
.rows .r {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.rows .r:last-child { border-bottom: 0; }
.rows .r .k { color: var(--muted); font-size: 13px; }
.rows .r .v { font-family: var(--mono); font-size: 14px; font-weight: 500; }

/* ---------- expected range ladder ---------- */
.band {
  display: grid; grid-template-columns: 88px 1fr 88px;
  align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.band:last-child { border-bottom: 0; }
.band .lo, .band .hi { font-family: var(--mono); font-size: 14px; }
.band .lo { color: var(--down); text-align: left; }
.band .hi { color: var(--up); text-align: right; }
.band .mid { text-align: center; }
.band .mid .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim);
}
.band .mid .rng { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); color: var(--muted);
  font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  padding: 9px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th.grp {
  text-align: center; font-size: 11px; letter-spacing: .12em;
  border-bottom: 1px solid var(--line);
}
thead th.grp.c { color: var(--call); }
thead th.grp.p { color: var(--put); }
tbody td {
  padding: 6px 8px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft); color: var(--text);
}
tbody tr:hover td { background: rgba(232,182,76,.05); }
td.k, th.k {
  text-align: center; font-weight: 700; color: var(--gold);
  background: var(--panel-2); border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
tr.atm td { background: rgba(232,182,76,.10); }
tr.atm td.k { background: var(--gold); color: #14181f; }
td.zero { color: var(--dim); }
.itm { background: rgba(255,255,255,.022); }

.wall-c { box-shadow: inset 3px 0 0 var(--call); }
.wall-p { box-shadow: inset -3px 0 0 var(--put); }

/* ---------- refresh schedule ---------- */
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot {
  font-family: var(--mono); font-size: 11px;
  padding: 5px 9px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--gold);
}

/* ---------- pricing sheet ---------- */
.quote {
  font-size: 15px; line-height: 1.7; color: var(--muted);
  padding: 10px 14px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.quote b { color: var(--text); font-family: var(--mono); }
.quote b.gold { color: var(--gold); font-size: 17px; }
.quote .up { color: var(--up); font-family: var(--mono); }
.quote .down { color: var(--down); font-family: var(--mono); }

.nudge { display: flex; gap: 4px; }
.nudge .btn { padding: 6px 9px; }

/* The two theoretical columns are the point of the sheet: they carry the
   hologram blue so the eye separates "what it would be worth" from the
   settlement columns beside them. */
#ps-table th.th-live { color: var(--blue); }
#ps-table td.live {
  color: var(--blue); font-weight: 600;
  background: rgba(63,169,245,.055);
}
#ps-table tr.settlerow td { background: rgba(63,169,245,.13); }
#ps-table tr.settlerow td.live { background: rgba(63,169,245,.19); }
#ps-table tr.atm td.live { background: rgba(240,192,74,.16); }

/* ---------- open-interest matrix ---------- */
/* A dense grid: many columns, one row per strike. Both the header and the
   strike column stay pinned, because reading a cell means knowing its
   expiration and its strike at the same time. */
.matrixwrap {
  overflow: auto; max-height: 74vh;
  border: 1px solid var(--line); border-radius: 8px;
}
table.matrix {
  border-collapse: separate; border-spacing: 0;
  font-family: var(--mono); font-size: 11px; width: max-content; min-width: 100%;
}
table.matrix th, table.matrix td {
  padding: 4px 7px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
table.matrix thead th {
  position: sticky; background: var(--panel-2); z-index: 3;
  border-bottom: 1px solid var(--line);
}
table.matrix thead tr:nth-child(1) th { top: 0; }
table.matrix thead tr:nth-child(2) th { top: 40px; }
table.matrix thead tr:nth-child(3) th { top: 62px; }

table.matrix th.exp {
  text-align: center; color: var(--gold);
  border-left: 1px solid var(--line); font-weight: 700;
}
table.matrix th.exp .f {
  display: block; font-size: 9px; font-weight: 400; color: var(--muted);
}
table.matrix th.exp .d {
  display: block; font-size: 9px; font-weight: 400; color: var(--dim);
}
table.matrix th.side {
  font-size: 9px; letter-spacing: .1em; color: var(--muted); font-weight: 600;
}
table.matrix th.side.c { color: var(--call); }
table.matrix th.side.p { color: var(--put); }
table.matrix td.cl, table.matrix th.cl { border-left: 1px solid var(--line); }

/* The pinned strike column. Sticky in both axes, so it needs a higher stack
   level than the header cells it scrolls under. */
table.matrix th.kcol, table.matrix td.kcol {
  position: sticky; left: 0; z-index: 4;
  background: var(--panel-2); color: var(--gold);
  text-align: center; font-weight: 700;
  border-right: 1px solid var(--line);
}
table.matrix thead th.kcol { z-index: 6; }
table.matrix tr.atm td.kcol { background: var(--gold); color: #0a0d14; }
table.matrix tr.atm td { background: rgba(240,192,74,.07); }
table.matrix td.v { color: var(--text); }
table.matrix td.empty { color: var(--line); }
table.matrix tbody tr:hover td { outline: 1px solid rgba(63,169,245,.18); }

.legend {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--dim); font-family: var(--mono);
}
.legend .sw {
  width: 15px; height: 12px; border-radius: 2px; display: inline-block;
}

/* ---------- forms / auth ---------- */
.authwrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* The logo's own blue halo, continued behind the sign-in card. */
  background:
    radial-gradient(circle at 50% 34%, rgba(63,169,245,.13) 0%, transparent 55%),
    radial-gradient(circle at 50% 34%, rgba(240,192,74,.07) 0%, transparent 38%);
}
.authcard {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px;
  box-shadow: 0 0 0 1px rgba(63,169,245,.08), 0 22px 60px rgba(0,0,0,.7);
}
.authcard .mark {
  display: block; width: 128px; height: 128px; margin: 0 auto 16px;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(63,169,245,.35), 0 0 8px rgba(240,192,74,.32);
}
.authcard .name {
  text-align: center; font-size: 24px; font-weight: 800; letter-spacing: .12em;
  background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 45%, #a97b23 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.authcard .name span {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .34em;
  color: var(--silver); -webkit-text-fill-color: var(--silver); margin-top: 2px;
}
.authcard .tag {
  text-align: center; color: var(--dim); font-size: 11px;
  font-family: var(--mono); letter-spacing: .10em;
  text-transform: uppercase; margin: 10px 0 26px;
}

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text); font-size: 14px; font-family: var(--sans);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-dim);
}

.btn {
  display: inline-block; padding: 10px 18px; border: 0; border-radius: 6px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #0a0d14;
  font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--sans);
  box-shadow: 0 0 14px rgba(240,192,74,.22);
}
.btn:hover { filter: brightness(1.08); }
.btn.wide { width: 100%; }
.btn.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
}
.btn.ghost:hover { color: var(--text); border-color: var(--dim); }
.btn.sm { padding: 5px 10px; font-size: 11px; }
.btn.danger { background: var(--down); color: #fff; }

.flash { padding: 11px 14px; border-radius: 7px; margin-bottom: 14px; font-size: 13px; }
.flash.error { background: rgba(239,95,107,.12); border: 1px solid rgba(239,95,107,.4); color: #ffc2c7; }
.flash.ok    { background: rgba(62,207,142,.10); border: 1px solid rgba(62,207,142,.35); color: #b6f0d5; }

.notice {
  background: rgba(232,163,61,.10); border: 1px solid rgba(232,163,61,.35);
  color: #f3d9a8; padding: 10px 14px; border-radius: 7px;
  margin-bottom: 16px; font-size: 13px;
}

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.right { text-align: right; }
.center { text-align: center; }

.footnote {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  color: var(--dim); font-size: 11px; line-height: 1.6;
}

/* ---------- charts ---------- */
.chartbox { position: relative; height: 300px; }
.chartbox.tall { height: 400px; }

.tvbox {
  height: calc(100vh - 210px); min-height: 460px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}

/* Chart beside its levels panel. Below 1100px the panel stops being a margin
   column and stacks under the chart - squeezing a 300px sidebar out of a
   narrow screen leaves the chart itself too small to read. */
.chartgrid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
@media (max-width: 1100px) {
  .chartgrid { grid-template-columns: 1fr; }
  .tvbox { height: 60vh; }
}

/* ---------- admin ---------- */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .06em;
}
.pill.active     { background: rgba(62,207,142,.15); color: var(--up); }
.pill.pending    { background: rgba(232,163,61,.15); color: var(--warn); }
.pill.unverified { background: rgba(63,169,245,.15); color: var(--blue); }
.pill.suspended { background: rgba(239,95,107,.15); color: var(--down); }
.pill.admin     { background: rgba(232,182,76,.15); color: var(--gold); }
.pill.member    { background: var(--panel-2); color: var(--muted); }

table.admin { font-family: var(--sans); font-size: 13px; }
table.admin td, table.admin th { text-align: left; padding: 9px 10px; }
table.admin td.acts { text-align: right; white-space: nowrap; }
table.admin form { display: inline; }

.loading { padding: 40px; text-align: center; color: var(--dim); font-family: var(--mono); }
.err {
  padding: 14px; border-radius: 7px; font-size: 13px;
  background: rgba(239,95,107,.10); border: 1px solid rgba(239,95,107,.35);
  color: #ffc2c7;
}