/* VAPORSTOCKS — after-hours trading floor
   ink navy / ticker-paper cream / amber breaking / green-red data */
:root {
  --ink: #0e1220;
  --panel: #161c2e;
  --panel-2: #1d2438;
  --line: #2a3350;
  --paper: #e9e4d6;
  --paper-dim: #9a96a8;
  --amber: #ffb020;
  --up: #37d67a;
  --down: #ff6161;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Archivo", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--amber); }

/* ---------- logo ---------- */
.logo {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 115%;
  letter-spacing: 0.02em;
  font-size: 34px;
  color: var(--paper);
}
.logo span { color: var(--amber); }
.logo.sm { font-size: 20px; }
.tagline { color: var(--paper-dim); margin: 4px 0 24px; }

/* ---------- auth ---------- */
#auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-card {
  width: 360px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 32px; text-align: center;
}
.auth-card input {
  width: 100%; margin-bottom: 10px; padding: 11px 12px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  color: var(--paper); font-family: var(--mono); font-size: 14px;
}
.auth-card input:focus { outline: 2px solid var(--amber); outline-offset: -1px; }
.auth-card button[type=submit] {
  width: 100%; padding: 12px; border: none; border-radius: 6px;
  background: var(--amber); color: var(--ink); font-weight: 700; font-size: 15px;
}
.auth-switch { margin-top: 16px; font-size: 13px; color: var(--paper-dim); }
.auth-error { color: var(--down); font-size: 13px; margin-top: 10px; min-height: 1em; }

/* ---------- ticker tape (signature) ---------- */
#tape-wrap {
  overflow: hidden; white-space: nowrap;
  background: #0a0d18; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; padding: 7px 0;
}
#tape { display: inline-block; animation: tape-scroll 45s linear infinite; will-change: transform; }
#tape-wrap:hover #tape { animation-play-state: paused; }
@keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #tape { animation: none; } }
.tape-item { margin: 0 18px; color: var(--paper-dim); }
.tape-item b { color: var(--paper); font-weight: 600; }
.tape-item .up { color: var(--up); }
.tape-item .down { color: var(--down); }
.tape-item.breaking { color: var(--amber); font-weight: 600; }

/* ---------- layout ---------- */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px 6px; max-width: 980px; margin: 0 auto; width: 100%;
}
.header-right { display: flex; gap: 10px; align-items: center; }
.cash-pill {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 999px; color: var(--amber);
}
.ghost {
  background: none; border: 1px solid var(--line); color: var(--paper-dim);
  border-radius: 6px; padding: 6px 12px; font-size: 13px;
}
.ghost:hover { color: var(--paper); border-color: var(--paper-dim); }

nav {
  display: flex; gap: 4px; padding: 8px 20px; max-width: 980px; margin: 0 auto; width: 100%;
  border-bottom: 1px solid var(--line);
}
.tab {
  position: relative; background: none; border: none; color: var(--paper-dim);
  padding: 10px 14px; font-size: 14px; font-weight: 600; border-radius: 6px 6px 0 0;
}
.tab.active { color: var(--paper); box-shadow: inset 0 -2px 0 var(--amber); }
.tab:hover { color: var(--paper); }
.dot {
  position: absolute; top: 8px; right: 4px; width: 8px; height: 8px;
  background: var(--down); border-radius: 50%;
}

main { max-width: 980px; margin: 0 auto; padding: 18px 20px 80px; }

/* ---------- market table ---------- */
.mkt-row {
  display: grid; grid-template-columns: 92px 1fr 110px 90px 120px;
  gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer; border-radius: 6px;
}
.mkt-row:hover { background: var(--panel); }
.mkt-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--paper-dim); cursor: default;
}
.mkt-head:hover { background: none; }
.tk { font-family: var(--mono); font-weight: 600; }
.co { color: var(--paper-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px, .chg { font-family: var(--mono); text-align: right; font-size: 14px; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }
.spark { justify-self: end; }

/* ---------- stock detail ---------- */
.stock-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.stock-head h2 { font-weight: 900; font-stretch: 110%; font-size: 26px; }
.stock-head .sector { color: var(--paper-dim); font-size: 13px; }
.big-px { font-family: var(--mono); font-size: 30px; font-weight: 600; }
.big-chg { font-family: var(--mono); font-size: 15px; margin-left: 10px; }
.big-chg.up { color: var(--up); } .big-chg.down { color: var(--down); }
.tf-row { display: flex; gap: 6px; margin: 14px 0 8px; }
.tf-row button {
  background: var(--panel); border: 1px solid var(--line); color: var(--paper-dim);
  border-radius: 6px; padding: 4px 12px; font-family: var(--mono); font-size: 12px;
}
.tf-row button.active { color: var(--ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }
#chart { width: 100%; height: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.trade-box {
  margin-top: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.trade-box input {
  width: 110px; padding: 9px 10px; background: var(--ink); color: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono);
}
.btn-buy, .btn-sell {
  border: none; border-radius: 6px; padding: 10px 22px; font-weight: 700; font-size: 14px; color: var(--ink);
}
.btn-buy { background: var(--up); }
.btn-sell { background: var(--down); }
.btn-buy:disabled, .btn-sell:disabled { opacity: 0.35; cursor: not-allowed; }
.trade-meta { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); width: 100%; }
.back { margin-bottom: 12px; }

/* ---------- portfolio ---------- */
.pf-summary {
  display: flex; gap: 26px; flex-wrap: wrap; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin-bottom: 18px;
}
.pf-summary .lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.pf-summary .val { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.val.up { color: var(--up); } .val.down { color: var(--down); }
.dead-tag { color: var(--down); font-family: var(--mono); font-size: 11px; border: 1px solid var(--down); border-radius: 4px; padding: 1px 6px; margin-left: 8px; }

/* ---------- news ---------- */
.news-item {
  display: flex; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.news-time { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); min-width: 86px; }
.news-tk { font-family: var(--mono); font-size: 12px; font-weight: 600; min-width: 52px; }
.news-text { flex: 1; }
.news-item.huge_up .news-tk, .news-item.up .news-tk { color: var(--up); }
.news-item.huge_down .news-tk, .news-item.down .news-tk, .news-item.bankrupt .news-tk { color: var(--down); }
.news-item.ipo .news-tk { color: var(--amber); }
.news-item.bankrupt .news-text { color: var(--down); }
.news-item.huge_up .news-text::before, .news-item.huge_down .news-text::before {
  content: "BREAKING "; color: var(--amber); font-family: var(--mono); font-size: 11px; font-weight: 600;
}

/* ---------- leaderboard ---------- */
.lb-row {
  display: grid; grid-template-columns: 44px 1fr 130px 100px; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: center;
}
.lb-rank { font-family: var(--mono); color: var(--paper-dim); }
.lb-row.me { background: var(--panel-2); border-radius: 6px; }
.lb-val { font-family: var(--mono); text-align: right; }

/* ---------- toasts ---------- */
#toast-stack { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast {
  background: var(--panel-2); border: 1px solid var(--amber); border-radius: 8px;
  padding: 12px 16px; max-width: 340px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: toast-in 0.25s ease;
}
.toast .t-label { color: var(--amber); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--paper-dim); font-family: var(--mono); }

h3.sec { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper-dim); margin: 4px 0 10px; }
.muted { color: var(--paper-dim); }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .mkt-row { grid-template-columns: 70px 1fr 84px 70px; }
  .spark { display: none; }
  main { padding: 14px 12px 80px; }
  nav { padding: 6px 8px; overflow-x: auto; }
  .pf-summary { gap: 16px; }
}