/* ═══════════════════════════════════════════════════════════════════════════════
   STYLE-MOBILE-RESPONSIVE-LATEST.CSS
   
   Complete mobile-first responsive stylesheet for WSB Terminal
   Includes all additions from ticker_routes and dd_routes refactoring
   
   Breakpoints:
   • Mobile:  0 - 639px  (1 column, 44x44px buttons)
   • Tablet:  640 - 1023px (2-3 columns)
   • Desktop: 1024px+    (4 columns, full layout)
   
   Last Updated: May 2025
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   BASE & RESET
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --orange: #ff6600;
  --green: #00ff41;
  --red: #ff3333;
  --yellow: #ffcc00;
  --cyan: #00ccff;
  --white: #fff;
  --gray: #9a958c;
  --dim: #6e6a64;
  --bg: #000;
  --bg1: #0a0a0a;
  --bg2: #111;
  --bg3: #1a1a1a;
  --border: #1e1e1e;
  --font-base: 16px;
}

@media (min-width: 640px) {
  :root {
    --font-base: 16px;
  }
}

@media (min-width: 1024px) {
  :root {
    --font-base: 16px;
  }
}

body {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--bg);
  color: #e8e8e8;
  font-size: var(--font-base);
  line-height: 1.5;
  padding-bottom: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--orange);
  color: var(--bg);
  padding: 3px 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nav {
  background: var(--bg2);
  border-bottom: 1px solid #222;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .nav {
    padding: 4px 12px;
    gap: 8px;
  }
}

.nav-brand {
  color: var(--orange);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--gray);
  font-size: 16px;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 6px 10px;
  min-height: 32px;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}

.nav-link:hover,
.nav-link.active {
  color: var(--orange);
}

.inline {
  display: inline;
}

.menubar {
  background: var(--bg2);
  border-bottom: 1px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  position: relative;
  z-index: 100;
}
.menu-title { color:var(--orange);font-size:21px;font-weight:700;letter-spacing:2px;white-space:nowrap; }
.menu-sub   { color:var(--gray);font-size:10px;letter-spacing:1px;white-space:nowrap; }

/* Desktop: normal inline row */
.menu-right { display:flex;align-items:center;gap:6px; }
.menu-right .btn.active { background:var(--orange);color:#000;border-color:var(--orange); }
.menu-hamburger { display:none; }

/* Mobile: hamburger + drawer */
@media (max-width: 640px) {
  .menubar { padding: 6px 10px; }
  .menu-title { font-size: 15px; }
  .menu-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--orange);
    color: var(--orange);
    font-size: 18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .menu-right {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg2);
    border-bottom: 1px solid var(--orange);
    padding: 8px 10px;
    /* Must clear .ticker-tape (190), .sysbar (101), .fkeybar/.menubar (100) —
       only .conf-banner (9999, a transient alert) should ever sit above this. */
    z-index: 500;
  }
  .menu-right.open { display: flex; }
  .menu-right .btn {
    width: 100%;
    justify-content: flex-start;
    font-size: 12px;
    padding: 10px 12px;
    min-height: 40px;  /* thumb-friendly tap target */
  }
  .menu-right form { width: 100%; }
  .menu-right form .btn { width: 100%; }
}

/* ── Menubar command cursor (blinking caret next to active page label) ──── */
.menu-cmd {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.menu-cmd-cursor {
  display: inline-block;
  margin-left: 2px;
  animation: menu-cmd-blink 1s step-end infinite;
}
@keyframes menu-cmd-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT & CONTAINERS
   ───────────────────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

@media (max-width: 640px) {
  .wrap {
    padding: 12px;
  }
}

.container-center {
  max-width: 480px;
  margin: 40px auto;
  padding: 0 16px;
}

@media (max-width: 640px) {
  .container-center {
    margin: 20px auto;
    padding: 0 12px;
  }
}

.container-center.border-orange {
  border: 1px solid var(--orange);
  padding: 32px;
}

@media (max-width: 640px) {
  .container-center.border-orange {
    padding: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADERS & TITLES
   ───────────────────────────────────────────────────────────────────────────── */

.page-header {
  margin-bottom: 16px;
}

.page-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.page-header-title {
  color: var(--orange);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.page-header-sub {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .page-header-title {
    font-size: 16px;
  }
  .page-header-flex {
      flex-direction: column;
      align-items: flex-start;
  }
}

.ticker-symbol {
  font-size: 28px;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 2px;
  line-height: 1;
}

.ticker-name {
  font-size: 16px;
  color: var(--gray);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.ticker-sector {
  font-size: 16px;
  color: #8c8880;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .ticker-symbol {
    font-size: 35px;
  }
  .ticker-name {
    font-size: 16px;
  }
  .ticker-sector {
    font-size: 16px;
  }
}

.breadcrumb {
  font-size: 14px;
  color: #6e6a64;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.breadcrumb a {
  color: var(--orange);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS & FORMS
   ───────────────────────────────────────────────────────────────────────────── */

.btn {
  background: var(--orange);
  color: var(--bg);
  border: none;
  padding: 8px 18px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.btn:hover {
  background: #ff8833;
}

.btn:disabled {
  background: var(--dim);
  color: var(--gray);
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .btn {
    min-height: 40px;
  }
}

.btn-sm {
  padding: 3px 10px;
  font-size:13px;
}

.btn-outline {
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
}

.btn-outline:hover {
  background: var(--orange);
  color: var(--bg);
}

.btn-green {
  background: #00aa33;
  color: var(--white);
}

.btn-green:hover {
  background: #00cc44;
}

.btn-cancel {
  background: #333;
  color: var(--gray);
}

.btn-cancel:hover {
  background: #6e6a64;
}

.btn-danger {
  background: var(--red);
  color: var(--white);
}

.btn-danger:hover {
  background: #ff5555;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORMS & INPUTS
   ───────────────────────────────────────────────────────────────────────────── */

.frow {
  margin-bottom: 14px;
}
/*-- for the trading numebr of shares fields */
.stepper-row { 
  display:flex;
  align-items:center;
  border:1px solid #2a2a2a;
  overflow:hidden;
  height:44px; 
}
.sbtn { 
  width:48px;
  height:44px;
  background:#0a0a0a;
  border:none;
  cursor:pointer;
  font-size:18px;
  color:#9a958c;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-family:inherit;
  transition:background .1s; 
}
.sbtn:hover { 
  background:#1a1a1a;
  color:#ff6600; 
}
.sbtn:active { 
  background:#ff6600;
  color:#000; 
}
.sbtn-dbl { 
  font-size:12px;
  font-weight:700; 
}
.sdiv { 
  width:1px;
  height:24px;
  background:#2a2a2a;
  flex-shrink:0; 
}
.sinput { 
  flex:1;
  border:none;
  background:transparent;
  text-align:center;
  font-size:20px;
  font-family:inherit;
  color:#e8e8e8;
  outline:none;
  min-width:0;
  -moz-appearance:textfield; 
}
.sinput::-webkit-outer-spin-button,.sinput::-webkit-inner-spin-button { -webkit-appearance:none; }
.sinput:focus { color:var(--orange); }

label {
  display: block;
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 1.5px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  label {
    font-size: 13px;
  }
}

input[type=text],
input[type=email],
input[type=password],
select {
  width: 100%;
  background: var(--bg1);
  border: 1px solid var(--border);
  color: #e8e8e8;
  padding: 8px 10px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  margin-bottom: 4px;
  min-height: 36px;
}

input:focus,
select:focus {
  border-color: var(--orange);
}

textarea {
  width: 100%;
  background: var(--bg1);
  border: 1px solid var(--border);
  color: #e8e8e8;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  display: block;
}
textarea:focus { border-color: var(--orange); }

@media (max-width: 640px) {
  input[type=text],
  input[type=email],
  input[type=password],
  select {
    padding: 6px 8px;
    font-size: 16px;
    min-height: 40px;
  }
}

/* Password wrapper — positions the SHOW/HIDE button inside the input border */
.pw-wrap {
  position: relative;
  display: flex;
}
 
.pw-wrap input[type=password],
.pw-wrap input[type=text] {
  padding-right: 56px;  /* leave room for toggle button */
  flex: 1;
  margin-bottom: 0;     /* override default input margin; .frow handles spacing */
}
 
/* The SHOW / HIDE toggle — sits flush inside the right edge */
.pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: #8c8880;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: color 0.1s, border-left-color 0.1s, background 0.1s;
  outline: none;
}
 
.pw-toggle:hover {
  color: var(--orange);
  border-left-color: var(--orange);
  background: rgba(255, 102, 0, 0.04);
}
 
/* Active state — when password is currently visible */
.pw-toggle.pw-toggle-active {
  color: var(--orange);
  border-left-color: var(--orange);
}
 
/* Keep the toggle tappable on mobile */
@media (max-width: 640px) {
  .pw-toggle {
    width: 56px;
    font-size: 9px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GRID & LAYOUT UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

@media (min-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--orange);
  padding: 10px 12px;
}

@media (max-width: 640px) {
  .stat-box {
    padding: 8px 10px;
  }
  .stat-label{
    font-size: 14px;
  }
  .stat-value{
    font-size: 25px;
  }
  .stat-sub{
    font-size: 14px;
  }
}

.stat-label {
  font-size: 13px;
  color: #8c8880;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--orange);
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 18px;
  }
}

.stat-sub {
  font-size: 14px;
  color: #6e6a64;
  margin-top: 2px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Prevent grid children from blowing out their column when content
   (tables, nowrap text) is wider than the available space. Without
   this, grid children default to min-width:auto (content size) and
   ignore the 1fr constraint entirely. */
.two-col > *,
.trade-layout > *,
.admin-two-col > *,
.admin-three-col > * {
  min-width: 0;
}

.one-col {
  margin-bottom: 16px;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-between {
  justify-content: space-between;
}

.gap-5 {
  gap: 5px;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-20 {
  margin-bottom: 20px;
}

.p-8 {
  padding: 8px;
}

.p-10 {
  padding: 10px;
}

.p-12 {
  padding: 12px;
}

.p-14 {
  padding: 14px;
}

.p-16 {
  padding: 16px;
}

.p-20 {
  padding: 20px;
}

.p-32 {
  padding: 32px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PANELS & SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */

.panel-hdr {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 0;
}

.panel {
  margin-bottom: 16px;
}

.panel-title {
  background: var(--orange);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .panel-title {
    font-size: 18px;
    padding: 2px 8px;
  }
  .panel-body {
    padding: 10px;
  }
}

.panel-line {
  flex: 1;
  height: 1px;
  background: var(--orange);
  opacity: 0.3;
  min-width: 20px;
}

.panel-body {
  border: 1px solid var(--border);
  border-top: none;
  padding: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────────────────── */

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

thead tr {
  background: var(--bg2);
  border-bottom: 1px solid var(--orange);
}

th {
  padding: 6px 8px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

th.r,
td.r {
  text-align: right;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--white);
  background: var(--bg3);
}

tbody tr {
  border-bottom: 1px solid #181818;
}

tbody tr:hover {
  background: #0d0d00;
}

tbody tr:last-child {
  border-bottom: none;
}

td {
  padding: 7px 10px;
  color: #aaa;
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 640px) {
  td {
    padding: 4px 6px;
    font-size: 16px;
  }
  th {
    padding: 4px 6px;
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   DD FEED CARDS
   ───────────────────────────────────────────────────────────────────────────── */

.dd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dd-card {
  background: var(--bg1);
  /*background: #0a0a0a;*/
  border: 1px solid var(--border);
  border-left: 3px solid #333;
  padding: 12px;
  margin-bottom: 8px;
  transition: border-left-color 0.15s;
  word-break: break-word;
}

.dd-card:hover {
  border-left-color: var(--orange);
}

.dd-card.bull {
  border-left-color: #005522;
}

.dd-card.bear {
  border-left-color: #550000;
}

.dd-title {
  font-size: 16px;
  font-weight: 600;
  color: #e8e8e8;
  margin-bottom: 8px;
  line-height: 1.4;
  word-break: break-word;
}

.dd-title a {
  color: inherit;
  text-decoration: none;
}

.dd-title a:hover {
  color: var(--orange);
}

.dd-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
}

.meta-item {
  color: #8c8880;
}

.meta-author {
  color: var(--orange);
  font-weight: 600;
}

.meta-up {
  color: #818cf8;
}

.meta-sep {
  color: #333;
}

.dd-summary {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.7;
  word-break: break-word;
}

.dd-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #151515;
  flex-wrap: wrap;
  gap: 8px;
}

.dd-tickers {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.t-tag {
  font-size: 10px;
  font-weight: 700;
  color: #ffcc00;
  background: rgba(255,204,0,.08);
  border: 1px solid rgba(255,204,0,.25);
  padding: 2px 6px;
  letter-spacing: .5px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.t-tag:hover { background: rgba(255,204,0,.2); }
.t-tag.current { background: rgba(255,102,0,.15); border-color: #ff6600; color: #ff6600; }

@media (max-width: 640px) {
  .dd-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .dd-summary {
    font-size: 16px;
  }
    .dd-meta {
    gap: 4px;
    font-size: 16px;
  }
  .dd-title {
    font-size: 16px;
  }
  .dd-card {
    padding: 10px;
  }
}

.read-more {
  font-size: 14px;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
}

.read-more:hover {
  color: #ff8833;
}

.reddit-link {
  color: #ff4500;
  font-size: 13px;
  text-decoration: none;
}

.reddit-link:hover {
  color: #ff6622;
}

/* ─────────────────────────────────────────────────────────────────────────────
   POST BODY RENDERING
   ───────────────────────────────────────────────────────────────────────────── */

.post-body {
  color: #ccc;
  font-size: 16px;
  line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  word-break: break-word;
}

@media (max-width: 640px) {
  .post-body {
    font-size: 16px;
  }
}

.post-body h2,
.post-body h3 {
  color: var(--orange);
  margin: 16px 0 8px;
}

.post-body strong {
  color: var(--white);
}

.post-body a {
  color: var(--orange);
}

.post-body blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 12px;
  color: var(--gray);
  margin: 10px 0;
}

.post-body code,
.post-body pre {
  background: var(--bg2);
  color: var(--cyan);
  padding: 2px 6px;
  font-family: monospace;
}

.post-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-body th,
.post-body td {
  border: 1px solid #2a2a2a;
  padding: 7px 10px;
}

.post-body ul,
.post-body ol {
  padding-left: 20px;
  margin: 8px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EDITOR & FORMATTING
   ───────────────────────────────────────────────────────────────────────────── */

.editor-container {
  display: flex;
  flex-direction: column;
}

.toolbar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 6px 8px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .toolbar {
    gap: 2px;
    padding: 4px 6px;
  }
  
}

.tb-btn {
  background: var(--bg3);
  color: var(--gray);
  border: 1px solid var(--border);
  padding: 4px 7px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.5px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

.tb-btn:hover {
  background: var(--orange);
  color: var(--bg);
  border-color: var(--orange);
} 

#editor-area {
  min-height: 300px;
  background: var(--bg1);
  border: 1px solid var(--border);
  padding: 14px;
  color: #e8e8e8;
  outline: none;
  font-size: 16px;
  line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-bottom: 10px;
  word-break: break-word;
}

#editor-area:focus {
  border-color: var(--orange);
}

@media (max-width: 640px) {
  #editor-area {
    min-height: 200px;
    font-size: 16px;
    padding: 10px;
  }
  .tb-btn {
    padding: 3px 6px;
    font-size: 16px;
    min-height: 26px;
  }
}

#editor-area h2,
#editor-area h3 {
  color: var(--orange);
  margin: 12px 0 6px;
}

#editor-area strong {
  color: var(--white);
}

#editor-area a {
  color: var(--orange);
}

#editor-area blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 12px;
  color: var(--gray);
  margin: 8px 0;
}

#editor-area code,
#editor-area pre {
  background: var(--bg2);
  color: var(--cyan);
  padding: 2px 6px;
  font-family: monospace;
}

#editor-area table {
  border-collapse: collapse;
  width: 100%;
}

#editor-area th,
#editor-area td {
  border: 1px solid var(--border);
  padding: 6px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUMMARY & PREVIEW
   ───────────────────────────────────────────────────────────────────────────── */

.summary-box {
  background: #0d1a0d;
  border: 1px solid #1e3b1e;
  border-left: 3px solid var(--green);
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 16px;
  color: #9dc89d;
  line-height: 1.7;
  word-break: break-word;
}

@media (max-width: 640px) {
  .summary-box {
    padding: 8px 10px;
    font-size: 16px;
  }
  .summary-label {
    font-size: 16px;
  }
}

.summary-label {
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

.preview-box {
  background: var(--bg1);
  border: 1px solid var(--border);
  padding: 12px;
  font-size: 14px;
  color: var(--gray);
  white-space: pre-wrap;
  font-family: monospace;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  word-break: break-word;
}

@media (max-width: 640px) {
  .preview-box {
    padding: 8px;
    font-size: 15px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTION BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .action-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHIPS & TAGS
   ───────────────────────────────────────────────────────────────────────────── */

.chip {
  font-size: 16px;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid;
  letter-spacing: 0.5px;
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .chip {
    font-size: 16px;
    padding: 1px 5px;
  }
}

.chip-bull {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.06);
}

.chip-bear {
  color: var(--red);
  border-color: var(--red);
  background: rgba(255, 51, 51, 0.06);
}

.chip-neut {
  color: var(--yellow);
  border-color: var(--yellow);
  background: rgba(250, 204, 21, 0.06);
}

.chip-pend {
  color: var(--yellow);
  border-color: var(--yellow);
}

.chip-ok {
  color: var(--green);
  border-color: var(--green);
}

.chip-rej {
  color: var(--red);
  border-color: var(--red);
}

.ticker-tag {
  font-size: 16px;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(255, 204, 0, 0.08);
  border: 1px solid rgba(255, 204, 0, 0.25);
  padding: 2px 6px;
  letter-spacing: 1px;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
}

.ticker-tag:hover {
  background: rgba(255, 204, 0, 0.2);
}

.ticker-tag.current {
  background: rgba(255, 102, 0, 0.15);
  border-color: var(--orange);
  color: var(--orange);
}

@media (max-width: 640px) {
  .ticker-tag {
    font-size: 16px;
    padding: 1px 5px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   COLOR UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.color-orange {
  color: var(--orange);
}

.color-white {
  color: var(--white);
}

.color-gray {
  color: var(--gray);
}

.color-dim {
  color: var(--dim);
}

.color-cyan {
  color: var(--cyan);
}

.color-red {
  color: var(--red);
}

.color-yellow {
  color: var(--yellow);
}

.color-green {
  color: var(--green);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.font-small {
  font-size: 14px;
}

.font-base {
  font-size: var(--font-base);
}

.font-md {
  font-size: 16px;
}

.font-lg {
  font-size: 18px;
}

.font-xl {
  font-size: 20px;
}

.font-2xl {
  font-size: 22px;
}

@media (max-width: 640px) {
  .font-2xl {
    font-size: 20px;
  }
}

.font-3xl {
  font-size: 24px;
}

.font-bold {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.letter-sp-sm {
  letter-spacing: 0.5px;
}

.letter-sp-md {
  letter-spacing: 1px;
}

.letter-sp-lg {
  letter-spacing: 2px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.no-wrap {
  white-space: nowrap;
}

.muted {
  color: var(--gray);
  font-size:14px;
}

@media (max-width: 640px) {
  .muted {
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MESSAGES & STATES
   ───────────────────────────────────────────────────────────────────────────── */

.error-box {
  color: var(--red);
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--red);
  background: rgba(255, 51, 51, 0.06);
  margin-bottom: 14px;
  word-break: break-word;
}

@media (max-width: 640px) {
  .error-box {
    font-size: 16px;
    padding: 6px 8px;
  }
}

.empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--dim);
  font-size: 16px;
  border: 1px solid var(--border);
}

@media (max-width: 640px) {
  .empty {
    padding: 20px 15px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHARTS & DATA VIZ
   ───────────────────────────────────────────────────────────────────────────── */

.sent-bar-wrap {
  height: 8px;
  background: #1a1a1a;
  border: 1px solid #222;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  margin-top: 6px;
}

.sent-bar-bull {
  background: var(--green);
  height: 100%;
}

.sent-bar-bear {
  background: var(--red);
  height: 100%;
}

.sent-bar-neut {
  background: var(--gray);
  height: 100%;
}

.sent-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 8px;
}

.sent-bull {
  color: var(--green);
  font-size:14px;
  font-weight: 700;
}

.sent-bear {
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
}

.sent-neut {
  color: var(--gray);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .sent-labels {
    gap: 4px;
  }

  .sent-bull,
  .sent-bear,
  .sent-neut {
    font-size: 15px;
  }
}

.chart-container {
  position: relative;
  height: 130px;
  margin-top: 8px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .chart-container {
    height: 100px;
  }
}

/* Scoped away from #perf-chart's canvas — lightweight-charts sets its
   canvas width/height attributes precisely to match devicePixelRatio,
   and width:100%/height:auto here overrides that pairing, producing a
   vertical stretch (worse toward the bottom) plus blurry text. This
   rule likely intended to target .chart-container's own canvases only;
   scoping via :not() here rather than narrowing the original selector,
   since other canvases on the page may currently depend on the
   unscoped behavior and I can't confirm that without seeing where else
   `canvas` is used. */
canvas:not(#perf-chart canvas) {
  width: 100% !important;
  height: auto !important;
}

.pct-up {
  color: var(--green);
  font-weight: 700;
}

.pct-dn {
  color: var(--red);
  font-weight: 700;
}

.pct-flat {
  color: var(--gray);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABS & NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--orange);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab {
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  background: var(--bg2);
  color: var(--gray);
  border: none;
  font-family: inherit;
  white-space: nowrap;
}

.tab.active {
  background: var(--orange);
  color: var(--bg);
}

@media (max-width: 640px) {
  .tab {
    padding: 4px 10px;
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER & MISCELLANEOUS
   ───────────────────────────────────────────────────────────────────────────── */

.fkeybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--orange);
  display: flex;
  padding: 3px 8px;
  gap: 2px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .fkeybar {
    padding: 2px 4px;
    font-size: 16px;
  }
}

.fkey {
  white-space: nowrap;
  padding: 1px 5px;
}

.fkey-n {
  color: var(--orange);
}

.fkey-l {
  color: #8c8880;
  margin-right: 5px;
}

hr {
  border: none;
  border-top: 1px solid #1a1a1a;
  margin: 14px 0;
}

.expand-wrap {
  text-align: center;
  padding: 12px;
  border-top: 1px solid #1a1a1a;
}

.expand-btn {
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 6px 16px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.expand-btn:hover {
  background: var(--orange);
  color: var(--bg);
}

@media (max-width: 640px) {
  .expand-btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   VISIBILITY UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

.stack-mobile {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .stack-mobile {
    flex-direction: row;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END OF STYLESHEET
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   TRADING GAME — FANTASY TRADING LEAGUE
   All styles for: trade ticket, portfolio panel, leaderboard,
   achievements, onboarding memo, market status bar,
   confirmation banner, ticker tape, bankruptcy alert
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   MARKET STATUS BAR
   ───────────────────────────────────────────────────────────────────────────── */

.market-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  padding: 5px 16px;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.5px;
}

.market-bar-sep {
  color: var(--border);
}

.market-open {
  color: var(--green);
  font-weight: 700;
}

.market-closed {
  color: var(--red);
  font-weight: 700;
}

.market-queued-label {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .market-bar {
    padding: 4px 12px;
    gap: 6px;
    font-size: 13px;
  }
  .market-bar-desktop {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONFIRMATION BANNER
   Slides down from top of viewport on order submission
   ───────────────────────────────────────────────────────────────────────────── */

.conf-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  border-bottom: 2px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conf-banner.show {
  transform: translateY(0);
}

.conf-banner.conf-ok {
  background: rgba(0, 20, 0, 0.97);
  color: var(--green);
  border-color: var(--green);
}

.conf-banner.conf-err {
  background: rgba(20, 0, 0, 0.97);
  color: var(--red);
  border-color: var(--red);
}

.conf-banner.conf-info {
  background: rgba(15, 8, 0, 0.97);
  color: var(--yellow);
  border-color: var(--yellow);
}

@media (max-width: 640px) {
  .conf-banner {
    font-size: 12px;
    padding: 8px 12px;
    white-space: normal;
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TICKER TAPE — Achievement notifications
   ───────────────────────────────────────────────────────────────────────────── */

.ticker-tape {
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  height: 26px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 190;
}

.ticker-tape-inner {
  white-space: nowrap;
  animation: tickerScroll 30s linear infinite;
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding-left: 100%;
}

.ticker-tape-inner:hover {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 640px) {
  .ticker-tape {
    height: 24px;
  }
  .ticker-tape-inner {
    font-size: 12px;
    animation-duration: 20s;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PORTFOLIO SUMMARY BAR
   4-stat strip below market bar
   ───────────────────────────────────────────────────────────────────────────── */

.port-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.port-stat {
  background: var(--bg1);
  padding: 10px 14px;
}

.port-stat-label {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.port-stat-val {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.port-stat-val.large {
  font-size: 20px;
}

.port-stat-sub {
  font-size: 12px;
  color: #333;
  margin-top: 3px;
}

@media (max-width: 767px) {
  .port-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .port-bar {
    grid-template-columns: 1fr;
  }
  .port-stat {
    padding: 8px 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRADE PAGE LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.trade-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 16px;
  max-width: 1600px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .trade-layout {
    grid-template-columns: 360px 1fr;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .trade-layout {
    padding: 8px 12px;
    gap: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORDER TICKET
   ───────────────────────────────────────────────────────────────────────────── */

.ticket {
  background: var(--bg1);
  border: 1px solid var(--bg3);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--orange);
}

.ticket-time {
  color: var(--dim);
  font-size: 12px;
  font-weight: 400;
}

.ticket-body {
  padding: 12px;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #0d0d0d;
  font-size: 13px;
}

.ticket-row:last-child {
  border-bottom: none;
}

.ticket-label {
  color: #6e6a64;
  letter-spacing: 0.5px;
  font-size: 12px;
}

.ticket-val {
  color: var(--white);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QUOTE DISPLAY
   ───────────────────────────────────────────────────────────────────────────── */

.quote-bar {
  background: var(--bg);
  border: 1px solid var(--bg3);
  padding: 10px 12px;
  margin: 8px 0;
}

.quote-ticker-label {
  color: var(--orange);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}

.quote-price-display {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.quote-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--dim);
  align-items: center;
}

.quote-meta-sep {
  color: var(--bg3);
}

.quote-chg-up {
  color: var(--green);
  font-weight: 700;
}

.quote-chg-dn {
  color: var(--red);
  font-weight: 700;
}

.quote-ttl {
  font-size: 12px;
  color: #333;
}

.quote-ttl.warn {
  color: var(--yellow);
}

.quote-ttl.danger {
  color: var(--red);
}

.quote-error {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
  letter-spacing: 0.5px;
}

.quote-loading {
  color: var(--dim);
  font-size: 12px;
  padding: 8px 0;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUY / SELL TOGGLE
   ───────────────────────────────────────────────────────────────────────────── */

.side-toggle {
  display: flex;
  gap: 0;
  margin: 10px 0;
}

.side-btn {
  flex: 1;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border: 1px solid var(--bg3);
  background: var(--bg);
  color: #6e6a64;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  font-family: inherit;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-btn.active-buy {
  background: #003311;
  border-color: var(--green);
  color: var(--green);
}

.side-btn.active-sell {
  background: #1a0000;
  border-color: var(--red);
  color: var(--red);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORDER PREVIEW
   ───────────────────────────────────────────────────────────────────────────── */

.order-preview {
  background: var(--bg);
  border: 1px solid var(--bg3);
  padding: 10px 12px;
  margin: 8px 0;
  display: none;
}

.order-preview.show {
  display: block;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #0a0a0a;
  font-size: 13px;
}

.preview-row:last-child {
  border-bottom: none;
}

.preview-label {
  color: var(--dim);
  font-size: 12px;
}

.preview-val {
  color: var(--white);
  font-weight: 700;
}

.preview-total-row {
  border-top: 1px solid var(--bg3);
  margin-top: 4px;
  padding-top: 6px;
}

.preview-total-label {
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
}

.preview-comm {
  color: var(--yellow);
}

.preview-queue-note {
  font-size: 12px;
  color: #6e6a64;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUBMIT BUTTON STATES
   ───────────────────────────────────────────────────────────────────────────── */

.btn-submit-buy {
  background: #00aa33;
  color: var(--white);
  border: none;
  width: 100%;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  transition: background 0.1s;
}

.btn-submit-buy:hover:not(:disabled) {
  background: #00cc44;
}

.btn-submit-sell {
  background: #880000;
  color: var(--white);
  border: none;
  width: 100%;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  transition: background 0.1s;
}

.btn-submit-sell:hover:not(:disabled) {
  background: var(--red);
}

.btn-submit-queue {
  background: #443300;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  width: 100%;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  transition: background 0.1s;
}

.btn-submit-queue:hover:not(:disabled) {
  background: #554400;
}

.btn-submit-buy:disabled,
.btn-submit-sell:disabled,
.btn-submit-queue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ticket-disclaimer {
  font-size: 12px;
  color: #222;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOLDINGS TABLE
   ───────────────────────────────────────────────────────────────────────────── */

.holdings-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.holdings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.holdings-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
}

.holdings-table th.num,
.holdings-table td.num {
  text-align: right;
}

.holdings-table tbody tr {
  border-bottom: 1px solid #0d0d0d;
  transition: background 0.1s;
}

.holdings-table tbody tr:hover {
  background: #050505;
}

.holdings-table td {
  padding: 7px 10px;
  color: #aaa;
  white-space: nowrap;
}

.holdings-table .ticker-cell {
  color: var(--orange);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.holdings-table .ticker-cell:hover {
  text-decoration: underline;
}

.holdings-cash-row td {
  background: #030303;
  color: var(--dim);
  border-top: 1px solid var(--bg3);
}

.holdings-total-row td {
  background: var(--bg1);
  font-weight: 700;
  border-top: 2px solid var(--orange);
  color: var(--white);
}

.holdings-empty td {
  text-align: center;
  padding: 28px;
  color: #2a2a2a;
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PENDING ORDERS PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.pending-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pending-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 1px;
  font-weight: 700;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
}

.pending-table td {
  padding: 6px 10px;
  color: #aaa;
  border-bottom: 1px solid #0d0d0d;
  white-space: nowrap;
}

.pending-ref {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORDER HISTORY TABLE
   ───────────────────────────────────────────────────────────────────────────── */

.orders-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.orders-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 1px;
  font-weight: 700;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
  white-space: nowrap;
}

.orders-table th.num,
.orders-table td.num {
  text-align: right;
}

.orders-table tbody tr {
  border-bottom: 1px solid #0a0a0a;
}

.orders-table tbody tr:hover {
  background: #050505;
}

.orders-table td {
  padding: 6px 10px;
  color: #9a958c;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORDER STATUS CHIPS
   Extends existing .chip classes
   ───────────────────────────────────────────────────────────────────────────── */

.chip-buy {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.06);
}

.chip-sell {
  color: var(--red);
  border-color: var(--red);
  background: rgba(255, 51, 51, 0.06);
}

.chip-queued {
  color: var(--yellow);
  border-color: var(--yellow);
  background: rgba(255, 204, 0, 0.06);
}

.chip-filled {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.06);
}

.chip-cancelled {
  color: #6e6a64;
  border-color: #333;
  background: transparent;
}

.chip-rejected {
  color: var(--red);
  border-color: var(--red);
  background: rgba(255, 51, 51, 0.06);
}

.chip-halted {
  color: var(--yellow);
  border-color: var(--yellow);
  background: rgba(255, 204, 0, 0.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BANKRUPTCY ALERT
   ───────────────────────────────────────────────────────────────────────────── */

.bk-alert {
  background: rgba(20, 0, 0, 0.95);
  border: 1px solid var(--red);
  padding: 12px 16px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bk-title {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.bk-body {
  color: #8c8880;
  font-size: 12px;
  flex: 1;
  line-height: 1.6;
}

.bk-count {
  color: var(--red);
  font-size: 24px;
  font-weight: 700;
  border: 1px solid var(--red);
  padding: 2px 10px;
  letter-spacing: 1px;
  margin-left: auto;
}

@media (max-width: 640px) {
  .bk-alert {
    padding: 10px 12px;
  }
  .bk-count {
    font-size: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEADERBOARD
   ───────────────────────────────────────────────────────────────────────────── */

.lb-wrap {
  padding: 12px 16px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .lb-wrap {
    padding: 8px 12px;
  }
}

.lb-meta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--dim);
}

.lb-meta-sep {
  color: var(--border);
}

.lb-sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.lb-sort-label {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 1px;
}

.lb-sort-note {
  font-size: 12px;
  color: #333;
  margin-left: 6px;
}

@media (max-width: 640px) {
  .lb-sort-note {
    display: none;
  }
}

.lb-own-rank {
  background: rgba(10, 8, 0, 0.9);
  border: 1px solid #332200;
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lb-own-rank-label {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 1px;
}

.lb-own-rank-num {
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
}

.lb-own-username {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.lb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lb-table th {
  padding: 6px 12px;
  text-align: left;
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 1px;
  font-weight: 700;
  background: var(--bg1);
  border-bottom: 1px solid var(--bg3);
  white-space: nowrap;
}

.lb-table th.num,
.lb-table td.num {
  text-align: right;
}

.lb-table tbody tr {
  border-bottom: 1px solid #0a0a0a;
  transition: background 0.1s;
}

.lb-table tbody tr:hover {
  background: #050505;
}

.lb-table tbody tr.lb-own-row {
  background: rgba(8, 6, 0, 0.8);
}

.lb-table td {
  padding: 7px 12px;
  white-space: nowrap;
}

.lb-rank-num {
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
}

.lb-rank-change-up {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.lb-rank-change-dn {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}

.lb-rank-change-same {
  color: #1e1e1e;
  font-size: 12px;
}

.lb-username {
  color: #aaa;
  letter-spacing: 0.3px;
}

.lb-username.own {
  color: var(--orange);
  font-weight: 700;
}

.lb-bailouts {
  font-weight: 700;
}

.lb-bailouts.zero {
  color: var(--dim);
}

.lb-bailouts.warn {
  color: var(--yellow);
}

.lb-bailouts.danger {
  color: var(--red);
}

.lb-inactive-label {
  font-size: 11px;
  color: #2a2a2a;
  letter-spacing: 0.5px;
}

.lb-empty td {
  text-align: center;
  padding: 32px;
  color: #222;
  font-size: 13px;
}

/* Tier label colors */
.tier-partner { color: var(--white);  font-weight: 700; letter-spacing: 1px; }
.tier-md      { color: var(--cyan);   font-weight: 700; letter-spacing: 1px; }
.tier-vp      { color: var(--green);  font-weight: 700; letter-spacing: 1px; }
.tier-assoc   { color: #aaa;          letter-spacing: 1px; }
.tier-anlst   { color: var(--yellow); letter-spacing: 1px; }
.tier-bankrupt{ color: var(--red);    font-weight: 700; letter-spacing: 1px; }

/* Tier legend strip */
.tier-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.tier-legend-item {
  background: var(--bg1);
  border: 1px solid var(--border);
  padding: 8px 12px;
}

.tier-legend-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.tier-legend-desc {
  font-size: 11px;
  color: var(--dim);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACHIEVEMENTS — Profile page
   ───────────────────────────────────────────────────────────────────────────── */

.ach-section-header {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 2px;
  font-weight: 700;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg1);
}

.ach-count-bar {
  font-size: 12px;
  color: var(--dim);
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
}

.ach-count-bar span {
  margin-right: 14px;
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  padding: 0;
}

.ach-card {
  background: var(--bg1);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ach-card.ach-unlocked {
  background: #060606;
}

.ach-card.ach-locked {
  opacity: 0.35;
}

.ach-card.ach-nda {
  background: var(--bg1);
  opacity: 0.7;
}

.ach-card.ach-nda.ach-unlocked {
  opacity: 1;
}

.ach-icon-box {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
}

.ach-icon-box.ach-unlocked {
  border-color: var(--orange);
  color: var(--orange);
}

.ach-icon-box.ach-nda {
  border-color: #2a2a2a;
  color: #333;
}

.ach-body {
  flex: 1;
  min-width: 0;
}

.ach-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--orange);
  line-height: 1.3;
}

.ach-name.locked {
  color: #2a2a2a;
}

.ach-name.nda {
  color: #6e6a64;
}

.ach-desc {
  font-size: 11px;
  color: #6e6a64;
  margin-top: 2px;
  line-height: 1.5;
}

.ach-desc.nda {
  color: #333;
  font-style: italic;
}

.ach-date {
  font-size: 11px;
  color: #2a2a2a;
  margin-top: 4px;
}

.ach-date.unlocked {
  color: #333;
}

.ach-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.ach-status.unlocked {
  color: var(--green);
}

.ach-status.confidential {
  color: #333;
}

/* Eye toggle button */
.ach-eye-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  color: #333;
  font-family: inherit;
  transition: color 0.1s;
}

.ach-eye-btn:hover {
  color: var(--orange);
  background: none;
}

.ach-eye-btn.revealed {
  color: var(--orange);
}

.ach-eye-btn.locked-eye {
  color: #1a1a1a;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 640px) {
  .ach-grid {
    grid-template-columns: 1fr;
  }
  .ach-card {
    padding: 8px 10px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ONBOARDING MEMO
   ───────────────────────────────────────────────────────────────────────────── */

.memo-wrap {
  max-width: 600px;
  margin: 32px auto;
  padding: 0 16px;
}

@media (max-width: 640px) {
  .memo-wrap {
    margin: 16px auto;
    padding: 0 12px;
  }
}

.memo-box {
  border: 1px solid var(--border);
}

.memo-header {
  background: var(--orange);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.memo-header-title {
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
}

.memo-body {
  padding: 24px;
  background: var(--bg1);
}

@media (max-width: 640px) {
  .memo-body {
    padding: 16px;
  }
}

.memo-meta {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 1px;
  line-height: 2.2;
  margin-bottom: 14px;
}

.memo-meta-key {
  color: #6e6a64;
  display: inline-block;
  width: 52px;
}

.memo-headline {
  color: var(--orange);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 14px 0 10px;
}

.memo-intro {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.9;
  font-size: 13px;
}

.memo-intro strong {
  color: var(--white);
  font-weight: 700;
}

.memo-rules {
  margin: 14px 0 20px;
  line-height: 2.4;
  color: var(--dim);
  font-size: 13px;
}

.memo-rule-num {
  color: var(--orange);
  font-weight: 700;
  margin-right: 12px;
  font-size: 12px;
}

.memo-rule-text {
  color: #777;
}

.memo-rule-text strong {
  color: #aaa;
}

.memo-footer-text {
  color: #333;
  margin: 14px 0 20px;
  line-height: 1.9;
  font-size: 12px;
}

.memo-footer-text strong {
  color: var(--orange);
}

.memo-sig {
  font-size: 12px;
  color: #6e6a64;
  text-align: right;
  margin-bottom: 20px;
  font-style: italic;
}

.btn-memo-cta {
  width: 100%;
  background: var(--orange);
  color: var(--bg);
  border: none;
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-memo-cta:hover {
  background: #ff8822;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DISCLAIMER FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.trade-disclaimer {
  font-size: 11px;
  color: #1e1e1e;
  letter-spacing: 0.3px;
  border-top: 1px solid #0d0d0d;
  padding: 10px 0;
  margin-top: 24px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRADING STATS — Profile integration
   ───────────────────────────────────────────────────────────────────────────── */

.trade-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}

@media (min-width: 640px) {
  .trade-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trade-stat-cell {
  background: var(--bg1);
  padding: 10px 12px;
}

.trade-stat-label {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.trade-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}

.trade-stat-val.orange { color: var(--orange); }
.trade-stat-val.green  { color: var(--green); }
.trade-stat-val.red    { color: var(--red); }
.trade-stat-val.yellow { color: var(--yellow); }

/* ─────────────────────────────────────────────────────────────────────────────
   WSBDD BANK — Admin panel
   ───────────────────────────────────────────────────────────────────────────── */

.bank-balance-box {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-top: 2px solid var(--orange);
  padding: 16px;
  margin-bottom: 12px;
}

.bank-balance-label {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.bank-balance-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--orange);
}

.bank-balance-sub {
  font-size: 12px;
  color: #6e6a64;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PORTFOLIO CHART PLACEHOLDER
   For future sparkline / performance chart integration
   ───────────────────────────────────────────────────────────────────────────── */

.portfolio-chart-wrap {
  border: 1px solid var(--border);
  background: var(--bg1);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .portfolio-chart-wrap {
    height: 160px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END TRADING GAME STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   MISSING UTILITY CLASSES — patch
   ───────────────────────────────────────────────────────────────────────────── */

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.topbar-brand {
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 2px;
  font-size: 13px;
}

.white {
  color: var(--white);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRADING PAGE — additional utility classes
   Classes used in trade ticket and leaderboard templates
   ───────────────────────────────────────────────────────────────────────────── */

/* Color utilities */
.amber       { color: var(--yellow); }

/* Button variants */
.btn-full    { width: 100%; display: block; text-align: center; }
.btn-buy     { background: #003311; color: var(--green); border: 1px solid var(--green); }
.btn-buy:hover { background: #004418; }
.btn-ghost   { background: transparent; border: 1px solid #333; color: #666; }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.nav-logout  {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: 1px;
  color: #666; padding: 10px 12px;
}
.nav-logout:hover { color: var(--red); background: none; }

/* Chip extras */
.chip-amber  { color: var(--yellow); border-color: var(--yellow); background: rgba(255,204,0,.06); }
.chip-grey   { color: #8c8880; border-color: #333; background: transparent; }
.chip-red    { color: var(--red); border-color: var(--red); background: rgba(255,51,51,.07); }

/* Table extras */
.empty-row td {
  color: #2a2a2a;
  text-align: center;
  padding: 24px;
  font-size: 13px;
}

/* Trade page layout */
.page {
  padding: 12px 16px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Simple box */
.box      { max-width: 560px; margin: 40px auto; padding: 0; border: 1px solid var(--border); }
.box-body { padding: 24px; }

/* Disclaimer */
.disclaimer {
  color: #1e1e1e;
  font-size: 12px;
  letter-spacing: 0.3px;
  border-top: 1px solid #0d0d0d;
  padding: 10px 16px;
  margin-top: 24px;
  text-align: center;
}

/* Market status bar separator */
.market-sep { color: var(--border); }

/* Topbar user display */
.topbar-user { color: #666; font-size: 13px; }

/* Ticket header */
.ticket-hdr {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Quote display aliases (used in JS-populated spans) */
.quote-ticker { color: var(--orange); font-size: 16px; font-weight: 700; letter-spacing: 2px; }
.quote-price  { color: var(--white); font-size: 22px; font-weight: 700; }
.quote-meta   { color: var(--dim); font-size: 12px; margin-top: 4px; }

/* Order preview total row */
.preview-total {
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRADE PAGE — MOBILE OVERRIDES
   Migrated from trade.html's page_styles block (now global, since the trade
   ticket/quote bar/market bar render on other pages too, e.g. the ticker
   page). Placed after every base rule above for these selectors so it wins
   the cascade.

   Two things from the original block were intentionally NOT carried over,
   since they aren't trade-specific and the values were too small once
   applied site-wide:
     - bare `table`/`th`/`td` sizing (10px) — the existing mobile table rule
       above (16px / 4px 6px) already covers every table, trade included.
     - `.page{padding:0 4px}` — `.page` wraps content on other pages too;
       stripping its padding site-wide felt like a bigger call than "move
       the CSS", so it's left at the default 12px 16px for now. Happy to add
       a trade-scoped version if you want it back.
   A few other sizes (port-stat label/sub, ticket-hdr, quote-meta,
   preview-row) were nudged up a couple px from the original for the same
   readability reason — flagged in chat.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Market bar: keep the size/spacing already set above, just stop it from
     wrapping now that it shows on every page, not only trade */
  .market-bar {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .market-sep {
    margin: 0 2px;
  }

  /* Trade/ticket layout */
  .trade-layout,
  .two-col {
    display: block !important;
  }
  .ticket {
    padding: 8px;
  }
  .ticket-hdr {
    font-size: 11px;
    padding: 6px 8px;
  }

  /* Quote bar */
  .quote-bar {
    padding: 6px 8px;
  }
  .quote-price {
    font-size: 16px;
  }
  .quote-meta {
    font-size: 11px;
    flex-wrap: wrap;
    gap: 2px;
  }

  /* Buy/sell toggle */
  .side-toggle {
    margin: 6px 0;
  }
  .side-btn {
    font-size: 11px;
    padding: 10px 0;
    min-height: 40px;
  }

  /* Order preview */
  .order-preview {
    padding: 6px 8px;
  }
  .preview-row {
    font-size: 12px;
    padding: 3px 0;
  }

  /* Submit button */
  #submit-btn {
    font-size: 11px;
    padding: 10px;
    min-height: 40px;
  }

  /* Hide secondary columns on narrow holdings/orders/pending tables */
  .holdings-col-avgcost,
  .holdings-col-daychg,
  .holdings-col-pnl,
  .orders-col-ref,
  .orders-col-comm,
  .orders-col-time,
  .pending-col-ref,
  .pending-col-submitted {
    display: none;
  }

  .panel-hdr {
    margin-top: 8px;
  }

  .port-stat-label {
    font-size: 10px;
  }
  .port-stat-val {
    font-size: 14px;
  }
  .port-stat-sub {
    font-size: 10px;
  }

  /* Volume tape — seamless loop (overrides the default single-pass
     achievement-tape animation for the trade-page volume ticker) */
  @keyframes volumeTapeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  #volume-tape .ticker-tape-inner {
    padding-left: 0;
    animation-name: volumeTapeScroll;
    animation-duration: 35s;
  }
}

/* Portfolio summary bar: tight bordered 2-up grid, 401–640px only — bounded
   so it doesn't fight the existing single-column rule at ≤400px above */
@media (max-width: 640px) and (min-width: 401px) {
  .port-bar {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .port-stat {
    padding: 6px 8px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .port-stat:nth-child(2n) {
    border-right: none;
  }
  .port-stat:nth-child(3),
  .port-stat:nth-child(4) {
    border-bottom: none;
  }
}

/* Rank change arrows */
.rank-up   { color: var(--green); font-size: 12px; font-weight: 700; }
.rank-down { color: var(--red);   font-size: 12px; font-weight: 700; }
.rank-same { color: #1e1e1e;      font-size: 12px; }

/* empty-row — table rows with no data */
.empty-row td {
  color: #2a2a2a;
  text-align: center;
  padding: 24px 10px;
  font-size: 13px;
  font-style: italic;
}

/* Direct selector so tooling can find the class */
.empty-row { }

/* ═══════════════════════════════════════════════════════════════════════════════
   ADMIN PANEL — OPS CONSOLE
   All styles for: admin nav, topbar, stat grid, panels, tables,
   forms, buttons, charts, bot management, moderation, analytics
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */

.admin-body {
  font-size: 12px;
  padding-bottom: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN TOPBAR & NAV
   ───────────────────────────────────────────────────────────────────────────── */

.admin-topbar {
  background: var(--orange);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.admin-nav {
  background: var(--bg2);
  border-bottom: 1px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-nav-brand {
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
}

.admin-nav-brand:hover {
  color: #ff8833;
}

.admin-nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-nav-link {
  color: var(--gray);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 1px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.admin-nav-link:hover,
.admin-nav-link.active {
  color: var(--orange);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN MAIN CONTENT WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */

.admin-main {
  padding: 12px 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN STAT ROW — Top KPI strip
   ───────────────────────────────────────────────────────────────────────────── */

.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--bg2);
  margin-bottom: 14px;
}

.admin-stat-cell {
  background: #0d0d0d;
  border-top: 2px solid var(--orange);
  padding: 10px 14px;
}

.admin-stat-label {
  font-size: 10px;
  color: #8c8880;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.admin-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--orange);
}

.admin-stat-val.green  { color: var(--green); }
.admin-stat-val.red    { color: var(--red); }
.admin-stat-val.yellow { color: var(--yellow); }
.admin-stat-val.cyan   { color: var(--cyan); }
.admin-stat-val.orange { color: var(--orange); }
.admin-stat-val.white  { color: var(--white); }

.admin-stat-sub {
  font-size: 10px;
  color: #6e6a64;
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN PANELS
   ───────────────────────────────────────────────────────────────────────────── */

.admin-panel {
  margin-bottom: 14px;
}

.admin-panel-hdr {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
}

.admin-panel-title {
  background: var(--orange);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 10px;
  text-transform: uppercase;
}

.admin-panel-line {
  flex: 1;
  height: 1px;
  background: var(--orange);
  opacity: 0.3;
}

.admin-panel-body {
  border: 1px solid var(--border);
  padding: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN FORMS & INPUTS
   ───────────────────────────────────────────────────────────────────────────── */

.admin-frow {
  margin-bottom: 12px;
}

.admin-frow label {
  display: block;
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.admin-frow input[type=text],
.admin-frow input[type=number],
.admin-frow input[type=password],
.admin-frow select,
.admin-frow textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  color: #e8e8e8;
  padding: 7px 10px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

.admin-frow input:focus,
.admin-frow select:focus,
.admin-frow textarea:focus {
  border-color: var(--orange);
}

.admin-frow select option {
  background: #111;
}

.admin-frow textarea {
  resize: vertical;
  min-height: 80px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.admin-save-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-saved-msg {
  color: var(--green);
  font-size: 11px;
  letter-spacing: 1px;
}

.admin-err-msg {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.admin-btn {
  background: var(--orange);
  color: var(--bg);
  border: none;
  padding: 5px 14px;
  font-size: 10px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
}

.admin-btn:hover {
  background: #ff8833;
}

.admin-btn-sm {
  padding: 3px 10px;
  font-size: 10px;
}

.admin-btn-danger {
  background: var(--red);
  color: var(--white);
}

.admin-btn-danger:hover {
  background: #ff5555;
}

.admin-btn-green {
  background: #004411;
  color: var(--green);
  border: 1px solid var(--green);
}

.admin-btn-green:hover {
  background: #005522;
}

.admin-btn-grey {
  background: #1a1a1a;
  color: var(--gray);
  border: 1px solid #333;
}

.admin-btn-grey:hover {
  background: #222;
  color: #aaa;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN TABLE
   ───────────────────────────────────────────────────────────────────────────── */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.admin-table thead tr {
  background: #111;
  border-bottom: 1px solid var(--orange);
}

.admin-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 1px;
  white-space: nowrap;
}

.admin-table th.r,
.admin-table td.r {
  text-align: right;
}

.admin-table tbody tr {
  border-bottom: 1px solid #181818;
}

.admin-table tbody tr:hover {
  background: #0d0d00;
}

.admin-table td {
  padding: 6px 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Table cell state colours */
.td-ok     { color: var(--green); font-weight: 700; }
.td-fail   { color: var(--red);   font-weight: 700; }
.td-run    { color: var(--yellow); font-weight: 700; }
.td-dim    { color: #6e6a64; font-size: 10px; }

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN ALERTS
   ───────────────────────────────────────────────────────────────────────────── */

.admin-alert {
  padding: 8px 12px;
  border: 1px solid;
  font-size: 11px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.admin-alert-ok {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 204, 68, 0.06);
}

.admin-alert-err {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 51, 51, 0.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN TWO AND THREE COLUMN GRIDS
   ───────────────────────────────────────────────────────────────────────────── */

.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 960px) {
  .admin-three-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .admin-two-col,
  .admin-three-col { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN ANALYTICS CHARTS
   ───────────────────────────────────────────────────────────────────────────── */

.admin-chart-wrap {
  position: relative;
  width: 100%;
}

.admin-chart-tip {
  position: absolute;
  background: #111;
  border: 1px solid var(--orange);
  padding: 6px 10px;
  font-size: 10px;
  pointer-events: none;
  display: none;
  white-space: nowrap;
  z-index: 10;
  color: #aaa;
}

.admin-hbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.admin-hbar-label {
  font-size: 10px;
  color: #777;
  width: 90px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-hbar-track {
  flex: 1;
  background: #0a0a0a;
  height: 11px;
  border: 1px solid #1a1a1a;
}

.admin-hbar-fill {
  height: 100%;
  background: var(--orange);
  opacity: 0.75;
}

.admin-hbar-val {
  font-size: 10px;
  color: #6e6a64;
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}

.admin-prog-row {
  margin-bottom: 9px;
}

.admin-prog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #8c8880;
  margin-bottom: 3px;
}

.admin-prog-track {
  background: #0a0a0a;
  height: 5px;
  border: 1px solid #1a1a1a;
}

.admin-prog-fill {
  height: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN DONUT CHART
   ───────────────────────────────────────────────────────────────────────────── */

.admin-donut-wrap {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}

.admin-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.admin-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #666;
}

.admin-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN PILLS — inline status badges
   ───────────────────────────────────────────────────────────────────────────── */

.admin-pill {
  font-size: 9px;
  padding: 1px 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.admin-pill-ok {
  background: rgba(0, 204, 68, 0.1);
  color: var(--green);
  border: 1px solid rgba(0, 204, 68, 0.2);
}

.admin-pill-fail {
  background: rgba(255, 51, 51, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 51, 51, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN SPARK ROW — mini bar chart in scan history
   ───────────────────────────────────────────────────────────────────────────── */

.admin-spark-row {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 26px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN BOT — personality chips
   ───────────────────────────────────────────────────────────────────────────── */

.admin-bot-label {
  font-size: 9px;
  border: 1px solid #2a2a2a;
  color: #6e6a64;
  padding: 1px 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

.admin-personality-chip {
  font-size: 10px;
  padding: 2px 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.admin-p-conservative { color: var(--cyan);   border: 1px solid var(--cyan);   background: rgba(0,204,255,.06); }
.admin-p-momentum     { color: var(--orange);  border: 1px solid var(--orange);  background: rgba(255,102,0,.06); }
.admin-p-yolo         { color: var(--red);     border: 1px solid var(--red);     background: rgba(255,51,51,.06); }
.admin-p-contrarian   { color: #cc44ff;        border: 1px solid #cc44ff;        background: rgba(204,68,255,.06); }
.admin-p-accumulator  { color: var(--green);   border: 1px solid var(--green);   background: rgba(0,204,68,.06); }
.admin-p-scalper      { color: var(--yellow);  border: 1px solid var(--yellow);  background: rgba(255,204,0,.06); }

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN BOT — status labels
   ───────────────────────────────────────────────────────────────────────────── */

.admin-status-active  { color: var(--green);  font-size: 10px; }
.admin-status-paused  { color: var(--yellow); font-size: 10px; }
.admin-status-created { color: var(--gray);   font-size: 10px; }
.admin-status-deleted { color: var(--red);    font-size: 10px; }

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN BOT — run log action colours
   ───────────────────────────────────────────────────────────────────────────── */

.action-bought    { color: var(--green);  font-weight: 700; }
.action-sold      { color: var(--red);    font-weight: 700; }
.action-buy       { color: var(--green);  font-weight: 700; }
.action-sell      { color: var(--red);    font-weight: 700; }
.action-hold      { color: var(--gray); }
.action-skip      { color: #6e6a64; }
.action-error     { color: var(--red); }
.action-bankruptcy{ color: var(--red);    font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN BADGES — user management
   ───────────────────────────────────────────────────────────────────────────── */

.admin-badge-ok     { color: var(--green); font-weight: 700; font-size: 10px; }
.admin-badge-no     { color: var(--red);   font-size: 10px; }
.admin-badge-banned { color: var(--red);   font-weight: 700; font-size: 10px; border: 1px solid var(--red); padding: 1px 5px; }
.admin-badge-bk     { color: var(--yellow); font-size: 10px; font-weight: 700; }
.admin-badge-reddit { background: #ff4500; color: var(--white); font-size: 9px; padding: 1px 5px; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN MODERATION CARD
   ───────────────────────────────────────────────────────────────────────────── */

.admin-mod-card {
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 14px;
  margin-bottom: 10px;
}

.admin-mod-card-title {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.admin-mod-card-meta {
  font-size: 10px;
  color: #8c8880;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.admin-mod-card-body {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
  background: #050505;
  padding: 10px;
  border: 1px solid #1a1a1a;
}

.admin-mod-actions {
  display: flex;
  gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN INLINE FORM — balance adjust row
   ───────────────────────────────────────────────────────────────────────────── */

.admin-form-inline {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-form-inline input[type=number],
.admin-form-inline input[type=text] {
  background: #0a0a0a;
  border: 1px solid #333;
  color: var(--white);
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

.admin-form-inline input[type=number] { width: 130px; }
.admin-form-inline input[type=text]   { width: 100px; }

.admin-form-inline input:focus {
  border-color: var(--orange);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN LOGIN PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-box {
  width: 380px;
  border: 1px solid var(--orange);
  padding: 32px;
}

.admin-login-logo {
  color: var(--orange);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 4px;
}

.admin-login-sub {
  color: #6e6a64;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 28px;
}

.admin-login-footer {
  margin-top: 20px;
  font-size: 10px;
  color: #333;
  text-align: center;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */

.admin-empty {
  text-align: center;
  padding: 60px;
  color: #333;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END ADMIN PANEL STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   ADMIN UTILITY — repeated one-liners extracted from templates
   ───────────────────────────────────────────────────────────────────────────── */

/* Scan control select styling */
.admin-select {
  background: #0a0a0a;
  color: var(--orange);
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  font-size: 11px;
  font-family: inherit;
}

/* Scan control + config flex rows */
.admin-flex-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-flex-row-spread {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Hint / sub-label text */
.admin-hint {
  font-size: 10px;
  color: #6e6a64;
  letter-spacing: 0.5px;
}

.admin-section-label {
  font-size: 10px;
  color: #2a2a2a;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

/* Bar chart day label + daily stats */
.admin-bar-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #6e6a64;
  margin-top: 6px;
  text-align: right;
}

/* Color overrides for dynamic Jinja conditionals */
/* Used as: class="admin-dyn-color-{{ 'red' if x > 5 else 'ok' }}" */
.admin-dyn-ok   { color: var(--green);  }
.admin-dyn-warn { color: var(--yellow); }
.admin-dyn-err  { color: var(--red);    }
.admin-dyn-dim  { color: #6e6a64;          }
.admin-dyn-cyan { color: var(--cyan);   }

/* Action bar — bot controls horizontal strip */
.admin-action-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #111;
}

.admin-action-bar-label {
  font-size: 10px;
  color: #8c8880;
  letter-spacing: 1px;
  margin-right: 4px;
}

/* Bot detail breadcrumb row */
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-breadcrumb-back {
  color: #6e6a64;
  font-size: 11px;
  text-decoration: none;
}

.admin-breadcrumb-back:hover {
  color: var(--orange);
}

/* Password / note text below forms */
.admin-form-note {
  font-size: 10px;
  color: #6e6a64;
  margin: 8px 0;
}

/* Personality reference table description cells */
.admin-ref-desc {
  color: #8c8880;
  font-size: 10px;
}

/* Scan health spark bar */
.admin-spark-bar {
  flex: 1;
  opacity: 0.65;
  align-self: flex-end;
}

.admin-spark-bar-ok   { background: var(--orange); }
.admin-spark-bar-err  { background: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════════════
   DD SUBMIT PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   PANELS
   ───────────────────────────────────────────────────────────────────────────── */

.dd-panel { border: 1px solid var(--border); margin-bottom: 10px; }

.dd-panel-hdr {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 7px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dd-panel-label { font-size: 10px; font-weight: 700; color: var(--orange); letter-spacing: 2px; }
.dd-panel-hint  { font-size: 10px; color: #6e6a64; letter-spacing: 0.5px; }

.dd-pad   { padding: 14px; }
.dd-pad-t { padding: 14px 14px 0; }
.dd-pad-b { padding: 0 14px 14px; }

/* ─────────────────────────────────────────────────────────────────────────────
   4-COLUMN RESPONSIVE GRID
   ───────────────────────────────────────────────────────────────────────────── */

.dd-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 16px;
  padding: 14px;
}
@media (max-width: 1023px) { .dd-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .dd-grid-4 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   TICKER LOOKUP
   ───────────────────────────────────────────────────────────────────────────── */

.dd-ticker-row {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dd-ticker-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--bg1);
  transition: border-color .15s;
}
.dd-ticker-group:focus-within { border-color: var(--orange); }
.dd-ticker-sigil { padding: 0 10px; color: var(--orange); font-size: 18px; font-weight: 700; user-select: none; }
.dd-ticker-group input {
  border: none !important; background: transparent !important;
  width: 140px; font-size: 22px; font-weight: 700; letter-spacing: 2px;
  color: #e8e8e8; padding: 8px 10px 8px 0; outline: none;
  margin-bottom: 0 !important; min-height: 0 !important;
}
.dd-ticker-status { font-size: 11px; letter-spacing: 0.5px; }
.dd-ticker-status.loading { color: var(--orange); }
.dd-ticker-status.ok      { color: var(--green);  }
.dd-ticker-status.err     { color: var(--red);    }

@media (max-width: 640px) {
  .dd-ticker-group input { width: 100px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECURITY STRIP
   ───────────────────────────────────────────────────────────────────────────── */

.dd-strip {
  margin: 0 14px 14px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid #1e1e1e;
  border-left: 3px solid var(--orange);
  display: flex; align-items: center;
  gap: 0 18px; flex-wrap: wrap;
}
.dd-strip-ticker { font-size: 16px; font-weight: 700; color: var(--orange); letter-spacing: 2px; }
.dd-strip-pipe   { color: #2a2a2a; font-size: 16px; flex-shrink: 0; }
.dd-strip-name   { font-size: 12px; color: #bbb; flex: 1; min-width: 100px; }
.dd-strip-price  { font-size: 15px; font-weight: 700; color: #e8e8e8; }
.dd-strip-chg    { font-size: 12px; font-weight: 700; margin-left: 5px; }
.dd-strip-chg.up { color: var(--green); }
.dd-strip-chg.dn { color: var(--red);   }
.dd-strip-kv     { display: flex; flex-direction: column; gap: 1px; }
.dd-strip-k      { font-size: 9px; color: #8c8880; letter-spacing: 1.5px; }
.dd-strip-v      { font-size: 12px; color: #ccc; font-weight: 600; }
.dd-strip-pricegroup { display: flex; align-items: baseline; }

@media (max-width: 640px) {
  .dd-strip-pipe { display: none; }
  .dd-strip { gap: 8px 14px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   $ PREFIX INPUT
   ───────────────────────────────────────────────────────────────────────────── */

.dd-pfx-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  background: var(--bg1);
  transition: border-color .15s;
}
.dd-pfx-wrap:focus-within { border-color: var(--orange); }
.dd-pfx { padding: 0 8px; color: #8c8880; font-size: 14px; flex-shrink: 0; user-select: none; }
.dd-pfx-wrap input {
  flex: 1; border: none !important; background: transparent !important;
  padding: 8px 8px 8px 0; outline: none;
  margin-bottom: 0 !important; min-height: 0 !important; min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPUTED DISPLAY & R/R BAR
   ───────────────────────────────────────────────────────────────────────────── */

.dd-computed {
  background: var(--bg2); border: 1px solid #1a1a1a;
  padding: 8px 10px; font-size: 15px; font-weight: 700;
  color: #6e6a64; letter-spacing: 1px;
  min-height: 36px; display: flex; align-items: center;
}
.dd-computed.up { color: var(--green); }
.dd-computed.dn { color: var(--red);   }

.dd-rr-bar {
  padding: 9px 14px; background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.dd-rr-k   { font-size: 9px; color: #8c8880; letter-spacing: 1.5px; }
.dd-rr-v   { font-size: 13px; font-weight: 700; color: #e8e8e8; }
.dd-rr-dot { color: #2a2a2a; }

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */

.dd-cc { font-size: 10px; color: #6e6a64; text-align: right; margin-top: 3px; }
.dd-cc.warn { color: var(--orange); }

.dd-hint { font-size: 10px; color: #8c8880; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }

.dd-optional {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: #6e6a64; border: 1px solid #2a2a2a;
  padding: 1px 5px; margin-left: 6px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATALYST / RISK ROWS
   ───────────────────────────────────────────────────────────────────────────── */

.dd-list-body  { padding: 10px 14px 14px; }
.dd-list-row   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dd-list-num   { font-size: 10px; color: var(--orange); font-weight: 700; letter-spacing: 1px; width: 20px; flex-shrink: 0; }
.dd-list-row input { flex: 1; margin-bottom: 0; min-height: 36px; }

/* ─────────────────────────────────────────────────────────────────────────────
   EXECUTIVE SUMMARY — CLAUDE-GENERATED BLOCK
   ───────────────────────────────────────────────────────────────────────────── */

.dd-summary-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 14px 10px;
}
.dd-summary-actions .muted { font-size: 11px; }
.dd-summary-display {
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid #222;
  border-left: 3px solid var(--orange);
  font-size: 13px; color: #ccc; line-height: 1.7;
  display: none;
}
.dd-summary-display.visible { display: block; }
.dd-summary-controls {
  display: none; align-items: center; gap: 8px;
  padding: 0 14px 14px;
}
.dd-summary-controls.visible { display: flex; }
.dd-summary-error {
  margin: 0 14px 10px;
  font-size: 11px; color: var(--red); display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EDITOR OVERRIDES & NOTES
   ───────────────────────────────────────────────────────────────────────────── */

.dd-toolbar-wrap { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.dd-editor-note  {
  padding: 6px 14px; font-size: 10px; color: #333;
  letter-spacing: 0.5px; border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUBMIT BAR
   ───────────────────────────────────────────────────────────────────────────── */

.dd-submit-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--orange);
  margin-top: 4px; gap: 12px; flex-wrap: wrap;
}
.dd-submit-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.dd-echo-ticker { color: var(--orange); font-weight: 700; letter-spacing: 1px; }
.dd-echo-rec    { color: #e8e8e8; font-weight: 600; }
.dd-echo-sep    { color: #2a2a2a; }

@media (max-width: 640px) {
  .dd-submit-bar { flex-direction: column; align-items: stretch; }
  .dd-submit-bar .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREAMBLE TABLE — injected into editor body on submit
   ───────────────────────────────────────────────────────────────────────────── */

.dd-preamble-table {
  width: 100%;
  border-collapse: collapse;
}
.dd-preamble-table th,
.dd-preamble-table td {
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Override table display so CSS grid reflow works */
  .dd-preamble-table,
  .dd-preamble-table tbody { display: block; width: 100%; }
  /* 4 cells per <tr> reflow into 2 stacked key-value rows naturally */
  .dd-preamble-table tr {
    display: grid;
    grid-template-columns: 110px 1fr;
    border-bottom: 1px solid #1a1a1a;
    padding: 2px 0;
  }
  .dd-preamble-table th,
  .dd-preamble-table td {
    padding: 3px 6px;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   END DD SUBMIT PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   DD POST DETAIL
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .post-body table,
  .post-body tbody { display: block; width: 100%; }
  .post-body tr {
    display: grid;
    grid-template-columns: 150px 1fr;
    border-bottom: 1px solid #1a1a1a;
    padding: 2px 0;
  }
  .post-body th,
  .post-body td {
    padding: 3px 6px;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
  }
}

/* ════════════════════════════════════════════════════════════
   SYSTEM STATUS BAR (ticker pages)
   ════════════════════════════════════════════════════════════ */
.sysbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #080808;
  border-bottom: 1px solid #1a1a1a;
  padding: 0 16px;
  height: 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6e6a64;
  position: relative;
  z-index: 101;
}
.sysbar-left  { display: flex; gap: 16px; align-items: center; }
.sysbar-right { display: flex; gap: 16px; align-items: center; }
.sysbar-item  { color: #6e6a64; }
.sysbar-item span { color: #8c8880; }

.market-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border-radius: 2px;
}
.market-pill.open   { background: rgba(0,255,65,0.12); color: #00ff41; border: 1px solid rgba(0,255,65,0.25); }
.market-pill.closed { background: rgba(100,100,100,0.12); color: #8c8880; border: 1px solid #222; }
.market-pill.pre    { background: rgba(255,200,0,0.10); color: #ffc800; border: 1px solid rgba(255,200,0,0.2); }
.market-pill.after  { background: rgba(130,100,255,0.12); color: #a78bfa; border: 1px solid rgba(130,100,255,0.25); }
.market-pill .dot   { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.market-pill.open .dot { animation: blink 2s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

#sysClock { color: #8c8880; font-variant-numeric: tabular-nums; min-width: 64px; }

/* ════════════════════════════════════════════════════════════
   TICKER PAGE (/ticker/<symbol>)
   ════════════════════════════════════════════════════════════ */
/* ── Quote header ──────────────────────────────────────────── */
.quote-header {
  background: #050505;
  border-bottom: 1px solid #1a1a1a;
  padding: 16px 20px 0;
}
.quote-identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.quote-symbol {
  font-size: 22px;
  font-weight: 700;
  color: #ff6600;
  letter-spacing: 0.06em;
}
.quote-name {
  font-size: 13px;
  color: #999;
  letter-spacing: 0.04em;
}
.quote-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border: 1px solid #2a2a2a;
  color: #8c8880;
  border-radius: 2px;
}
.quote-badge.sector { color: #ff6600; border-color: rgba(255,102,0,0.3); background: rgba(255,102,0,0.06); }

/* ── Price block ───────────────────────────────────────────── */
.quote-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 32px;
  align-items: start;
  padding-bottom: 16px;
}
@media (max-width: 640px) {
  .quote-grid { grid-template-columns: 1fr; gap: 12px; }
}
.price-hero {
  min-width: 200px;
  border-right: 1px solid #1a1a1a;
  padding-right: 32px;
}
.price-last {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-change {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.price-change .abs { font-size: 14px; font-variant-numeric: tabular-nums; }
.price-change .pct { font-size: 13px; font-variant-numeric: tabular-nums; }
.price-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #6e6a64;
  margin-top: 8px;
}

/* ── Quote detail table ─────────────────────────────────────── */
.quote-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 480px) { .quote-detail { grid-template-columns: 1fr; } }
.qd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #0f0f0f;
  gap: 12px;
}
.qd-row:nth-child(odd) { padding-right: 16px; }
.qd-label { font-size: 10px; color: #8c8880; letter-spacing: 0.08em; white-space: nowrap; }
.qd-val   { font-size: 11px; color: #ccc; font-variant-numeric: tabular-nums; text-align: right; }

/* ── 52-week range bar ─────────────────────────────────────── */
.range-bar-wrap {
  margin-top: 2px;
}
.range-bar-track {
  height: 3px;
  background: #1a1a1a;
  border-radius: 2px;
  position: relative;
  margin: 4px 0;
}
.range-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #333, #ff6600);
  border-radius: 2px;
}
.range-bar-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #000;
}
.range-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #6e6a64;
  font-variant-numeric: tabular-nums;
}

/* ── Secondary stat row ────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid #1a1a1a;
  border-bottom: 2px solid #111;
  background: #070707;
}
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-cell {
  padding: 10px 14px;
  border-right: 1px solid #111;
  position: relative;
}
.stat-cell:last-child { border-right: none; }
.stat-cell-label { font-size: 9px; letter-spacing: 0.1em; color: #6e6a64; margin-bottom: 4px; }
.stat-cell-val   { font-size: 15px; font-weight: 600; color: #e0e0e0; font-variant-numeric: tabular-nums; line-height: 1; }
.stat-cell-sub   { font-size: 9px; color: #6e6a64; margin-top: 3px; letter-spacing: 0.06em; }
.stat-cell.highlight { border-left: 2px solid #ff6600; padding-left: 12px; }

/* ── Section panels ────────────────────────────────────────── */
.ticker-body { padding: 16px 20px; }
.section { margin-bottom: 20px; }
.section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a1a1a;
}
.section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff6600;
  white-space: nowrap;
}
.section-rule { flex: 1; height: 1px; background: #111; }
.section-meta { font-size: 9px; color: #333; letter-spacing: 0.06em; white-space: nowrap; }
.section-body { padding: 12px 0 0; }


/* ── Data table ────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table td { padding: 5px 0; font-size: 11px; border-bottom: 1px solid #0d0d0d; }
.data-table td:last-child { text-align: right; }
.data-table tr:last-child td { border-bottom: none; }
.dt-label { color: #8c8880; letter-spacing: 0.06em; }
.dt-val   { color: #ccc; font-variant-numeric: tabular-nums; }

/* ── Chart ─────────────────────────────────────────────────── */
.chart-outer {
  border: 1px solid #111;
  background: #040404;
  border-radius: 2px;
  padding: 8px;
  margin-top: 10px;
}
.chart-label {
  font-size: 9px;
  color: #333;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
#sparkChart { display: block; width: 100%; }


/* ── DD wire feed ──────────────────────────────────────────── */
.wire-feed { display: flex; flex-direction: column; gap: 0; }
.wire-item {
  display: grid;
  grid-template-columns: 86px 44px 1fr;
  gap: 0 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid #0d0d0d;
  cursor: pointer;
  transition: background 0.1s;
}
.wire-item:hover { background: #0a0a0a; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.wire-item:last-child { border-bottom: none; }
@media (max-width: 480px) {
  .wire-item {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "time tag tag"
      "content content content";
    gap: 2px 8px;
  }
  .wire-item .wire-time    { grid-area: time; overflow: visible; }
  .wire-item .wire-tag     { grid-area: tag; justify-self: start; }
  .wire-item .wire-content { grid-area: content; }
}
.wire-time {
  font-size: 9px;
  color: #6e6a64;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
  padding-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wire-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.wire-tag.bull { color: #00c851; }
.wire-tag.bear { color: #ff3333; }
.wire-tag.neut { color: #8c8880; }
.wire-content {}
.wire-title {
  font-size: 12px;
  color: #ccc;
  line-height: 1.35;
  margin-bottom: 2px;
}
.wire-title a { color: inherit; text-decoration: none; }
.wire-title a:hover { color: #ff6600; }
.wire-meta {
  display: flex;
  gap: 10px;
  font-size: 9px;
  color: #6e6a64;
  flex-wrap: wrap;
  letter-spacing: 0.04em;
}
.wire-meta-val { color: #8c8880; }
.wire-summary {
  font-size: 11px;
  color: #8c8880;
  margin-top: 4px;
  line-height: 1.5;
  border-left: 2px solid #1a1a1a;
  padding-left: 8px;
}
.wire-tickers { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }


/* ── Empty state ───────────────────────────────────────────── */
.wire-empty { font-size: 11px; color: #333; padding: 20px 0; text-align: center; letter-spacing: 0.08em; }


/* ── Trade ticket ──────────────────────────────────────────── */
.trade-panel {
  background: #050505;
  border-bottom: 2px solid #111;
  border-top: 1px solid #1a1a1a;
}
.trade-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) { .trade-inner { grid-template-columns: 1fr; } }

.trade-col {
  padding: 14px 20px;
}
.trade-col + .trade-col {
  border-left: 1px solid #111;
}
@media (max-width: 700px) {
  .trade-col + .trade-col { border-left: none; border-top: 1px solid #111; }
}

.trade-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.trade-hdr-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff6600;
}
.trade-hdr-rule { flex: 1; height: 1px; background: #1a1a1a; }


/* Quote context row */
.trade-quote-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #0d0d0d;
  font-size: 11px;
}
.trade-quote-row:last-child { border-bottom: none; }
.tq-label { color: #6e6a64; letter-spacing: 0.06em; }
.tq-val   { color: #ccc; font-variant-numeric: tabular-nums; }
.tq-val.up   { color: #00c851; }
.tq-val.down { color: #ff3333; }

/* Refresh button */
.quote-refresh-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #6e6a64;
  background: none;
  border: 1px solid #1a1a1a;
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.12s, border-color 0.12s;
}
.quote-refresh-btn:hover { color: #ff6600; border-color: rgba(255,102,0,0.4); }
.quote-refresh-btn.spinning { color: #ff6600; }

/* Shares input */
.shares-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.shares-label {
  font-size: 10px;
  color: #6e6a64;
  letter-spacing: 0.08em;
  white-space: nowrap;
  min-width: 48px;
}
.shares-input {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  border-radius: 2px;
  padding: 6px 10px;
  width: 80px;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.12s;
}
.shares-input:focus { border-color: rgba(255,102,0,0.5); }

/* Quick-set buttons */
.quick-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.quick-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6e6a64;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  padding: 3px 7px;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.1s, border-color 0.1s;
}
.quick-btn:hover { color: #ff6600; border-color: rgba(255,102,0,0.4); }

/* Cost / proceeds estimate */
.order-estimate {
  background: #080808;
  border: 1px solid #111;
  border-radius: 2px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.oe-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 2px 0;
}
.oe-label { color: #6e6a64; letter-spacing: 0.06em; }
.oe-val   { color: #9a958c; font-variant-numeric: tabular-nums; }
.oe-total-val { color: #e0e0e0; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Execute button */
.execute-btn {
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 10px 0;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.15s, filter 0.15s;
}
.execute-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.execute-btn.buy-btn  { background: rgba(0,200,81,0.18); color: #00c851; border: 1px solid rgba(0,200,81,0.35); }
.execute-btn.sell-btn { background: rgba(255,51,51,0.18); color: #ff3333; border: 1px solid rgba(255,51,51,0.35); }
.execute-btn:not(:disabled):hover { filter: brightness(1.2); }

/* Order status */
.order-status {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  min-height: 16px;
  padding: 0 2px;
}
.order-status.ok      { color: #00c851; }
.order-status.queued  { color: #ffc800; }
.order-status.err     { color: #ff3333; }
.order-status.loading { color: #8c8880; }

/* Position box */
.position-box {
  background: #080808;
  border: 1px solid #111;
  border-radius: 2px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.pb-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid #0a0a0a;
}
.pb-row:last-child { border-bottom: none; }
.pb-label { color: #6e6a64; letter-spacing: 0.06em; }
.pb-val   { color: #ccc; font-variant-numeric: tabular-nums; }
.pb-pnl-pos { color: #00c851; }
.pb-pnl-neg { color: #ff3333; }

.trade-login-prompt {
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: #333;
  letter-spacing: 0.06em;
}
.trade-login-prompt a {
  color: #ff6600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,102,0,0.3);
}

.pb-20 { padding-bottom: 60px; }
/* ════════════════════════════════════════════════════════════
   TICKER SECTION OVERRIDES (scoped to .ticker-page)
   Institutional restyling of shared site-wide classes
   (color-*, pct-*, sent-*, t-tag, two-col, expand-*, fkey*,
   side-*, breadcrumb) — applies only inside the ticker section
   (/ticker/ and /ticker/<symbol>), leaving the same class names
   untouched everywhere else on the site.
   ════════════════════════════════════════════════════════════ */

/* ── Two-column layout ─────────────────────────────────────── */
.ticker-page .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .ticker-page .two-col { grid-template-columns: 1fr; } }

/* ── Sentiment bar ─────────────────────────────────────────── */
.ticker-page .sent-bar-wrap {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin: 12px 0 6px;
  background: #111;
}
.ticker-page .sent-bar-bull { background: #00c851; }
.ticker-page .sent-bar-bear { background: #ff3333; }
.ticker-page .sent-bar-neut { background: #6e6a64; }
.ticker-page .sent-labels { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.06em; margin-top: 2px; }
.ticker-page .sent-bull { color: #00c851; }
.ticker-page .sent-bear { color: #ff3333; }
.ticker-page .sent-neut { color: #8c8880; }

/* ── Ticker tag chips ──────────────────────────────────────── */
.ticker-page .t-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8c8880;
  border: 1px solid #1a1a1a;
  padding: 1px 5px;
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
}
.ticker-page .t-tag:hover { color: #ff6600; border-color: rgba(255,102,0,0.4); }
.ticker-page .t-tag.current { color: #ff6600; border-color: rgba(255,102,0,0.5); background: rgba(255,102,0,0.06); }

/* ── Expand button ─────────────────────────────────────────── */
.ticker-page .expand-wrap { text-align: center; padding: 12px 0; border-top: 1px solid #111; }
.ticker-page .expand-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8c8880;
  background: none;
  border: 1px solid #1e1e1e;
  padding: 6px 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.ticker-page .expand-btn:hover { color: #ff6600; border-color: rgba(255,102,0,0.5); }

/* ── Fkey bar ─────────────────────────────────────────────── */
.ticker-page .fkeybar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: #080808;
  border-top: 1px solid #1a1a1a;
  z-index: 100;
}
.ticker-page .fkey { display: flex; flex: 1; font-size: 10px; border-right: 1px solid #111; }
.ticker-page .fkey:last-child { border-right: none; }
.ticker-page .fkey-n { background: #1a1a1a; color: #8c8880; padding: 4px 6px; white-space: nowrap; letter-spacing: 0.04em; }
.ticker-page .fkey-l { padding: 4px 6px; color: #6e6a64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.06em; }

/* ── Side toggle (trade ticket) ──────────────────────────────── */
.ticker-page .side-toggle {
  display: flex;
  gap: 0;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
  width: 100%;
}
.ticker-page .side-btn {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 7px 0;
  border: none;
  cursor: pointer;
  background: #0d0d0d;
  color: #333;
  transition: background 0.12s, color 0.12s;
}
.ticker-page .side-btn.active-buy  { background: rgba(0,200,81,0.15); color: #00c851; }
.ticker-page .side-btn.active-sell { background: rgba(255,51,51,0.15); color: #ff3333; }
.ticker-page .side-btn:not(.active-buy):not(.active-sell):hover { color: #666; }

/* ── Color & percent utility classes ─────────────────────────── */
.ticker-page .color-red    { color: #ff3333 !important; }
.ticker-page .color-yellow { color: #ffc800 !important; }
.ticker-page .color-green  { color: #00c851 !important; }
.ticker-page .color-orange { color: #ff6600 !important; }
.ticker-page .color-gray   { color: #8c8880 !important; }
.ticker-page .pct-up   { color: #00c851; }
.ticker-page .pct-dn   { color: #ff3333; }
.ticker-page .pct-flat { color: #8c8880; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.ticker-page .breadcrumb { font-size: 10px; color: #333; letter-spacing: 0.08em; margin-bottom: 0; padding: 8px 20px; border-bottom: 1px solid #0d0d0d; background: #050505; }
.ticker-page .breadcrumb a { color: #6e6a64; text-decoration: none; }
.ticker-page .breadcrumb a:hover { color: #ff6600; }

/* ── Dense data tables (e.g. ticker directory) ───────────────── */
.ticker-page table {
  font-size: 11px;
}
.ticker-page thead tr {
  background: #070707;
  border-bottom: 1px solid #1a1a1a;
}
.ticker-page th {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8c8880;
  text-transform: uppercase;
  padding: 8px 10px;
}
.ticker-page td {
  padding: 6px 10px;
  color: #ccc;
  font-variant-numeric: tabular-nums;
}
.ticker-page tbody tr {
  border-bottom: 1px solid #0d0d0d;
}
.ticker-page tbody tr:hover {
  background: #0a0a0a;
}
.ticker-page tbody tr:last-child {
  border-bottom: none;
}

/* ── Chip colors (signal badges) ─────────────────────────────── */
.ticker-page .chip-bull { color: #00c851; border-color: #00c851; background: rgba(0,200,81,0.06); }
.ticker-page .chip-bear { color: #ff3333; border-color: #ff3333; background: rgba(255,51,51,0.06); }
.ticker-page .chip-neut { color: #8c8880; border-color: #8c8880; background: rgba(140,136,128,0.06); }
.ticker-page .chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 2px;
}

/* ── Directory subtitle ───────────────────────────────────────── */
.ticker-page .dir-subtitle {
  font-size: 10px;
  color: #6e6a64;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOMEPAGE (index.html) — migrated from style.css
   These are genuinely homepage-only components with no equivalent elsewhere
   in this file (status bar/live feed indicator, sentiment table cells, vote
   bars, overall-summary callout, empty-state placeholder). A few other
   classes index.html used (panel-header, stats-row, disc, main) were renamed
   in index.html itself to the equivalents already defined above (panel-hdr,
   stats-grid, disclaimer, page) instead of being duplicated here — see chat.

   Font sizes below were bumped up a couple px from style.css's originals
   (most were 9-11px) to match this stylesheet's general mobile-readability
   floor — same reasoning as the trade-page migration.
   ───────────────────────────────────────────────────────────────────────────── */

/* Fixed function-key bar needs extra bottom clearance so content doesn't
   hide behind it. Pair with .page on the wrapper: class="page main". */
.main {
  padding-bottom: 80px;
}

@media (max-width: 640px) {
  .main {
    padding-bottom: 100px;
  }
}

@media (min-width: 1024px) {
  .main {
    padding-bottom: 60px;
  }
}

/* Live feed status bar */
.statusbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  letter-spacing: 0.5px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .statusbar {
    padding: 4px 8px;
    font-size: 12px;
    min-height: 28px;
  }
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: blink 1s infinite;
  flex-shrink: 0;
}

.status-dot.idle {
  background: var(--dim);
  animation: none;
}

.status-log {
  font-size: 12px;
  color: var(--dim);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

@media (min-width: 640px) {
  .status-log {
    max-width: 300px;
  }
}

@media (max-width: 640px) {
  .status-log {
    max-width: 120px;
  }
}

/* Market Intelligence summary callout */
.overall-box {
  display: none;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 10px 12px;
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 13px;
  line-height: 1.7;
}

.overall-label {
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

/* "N/A" placeholder cells */
.na {
  color: var(--dim);
  font-size: 12px;
}

/* Sentiment monitor table cells */
.td-rank     { color: var(--dim); font-size: 12px; width: 24px; }
.td-ticker   { font-weight: 700; font-size: 13px; color: var(--yellow); letter-spacing: 1px; width: 90px; }
.td-co       { font-size: 12px; color: var(--white); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.td-sector   { font-size: 12px; color: var(--gray); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.td-mentions { color: var(--cyan); font-size: 12px; }
.td-mktcap   { font-size: 12px; color: var(--cyan); font-weight: 600; }
.td-user     { color: var(--orange); font-size: 12px; font-weight: 600; }
.td-price    { font-size: 12px; color: var(--white); }
.td-size     { font-size: 12px; color: var(--cyan); }
.td-assumed  { font-size: 11px; color: var(--dim); font-style: italic; }
.td-date     { font-size: 12px; color: var(--gray); }

/* Short-float color tiers */
.sf-hi  { color: var(--red);    font-weight: 700; }
.sf-mid { color: var(--yellow); font-weight: 600; }
.sf-lo  { color: var(--gray); }

/* PnL coloring (portfolio / author PnL tables) */
.pnl-pos { color: var(--green); font-weight: 700; }
.pnl-neg { color: var(--red);   font-weight: 700; }

@media (max-width: 640px) {
  .td-co {
    max-width: 100px;
  }
  .td-sector {
    max-width: 80px;
  }
}

/* Short-interest vote bar */
.vote-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bar-bg {
  width: 70px;
  height: 3px;
  background: var(--bg3);
  border: 1px solid var(--border);
}

.bar-fill {
  height: 100%;
}

.bar-green {
  background: var(--green);
}

.bar-red {
  background: var(--red);
}

.bar-pct {
  font-size: 12px;
  color: var(--gray);
}

th.sort-asc::after {
  content: ' \25B2';
  color: var(--orange);
  font-size: 11px;
}

th.sort-desc::after {
  content: ' \25BC';
  color: var(--orange);
  font-size: 11px;
}

/* Blinking "NEW" badge on the DD feed */
.new-badge {
  background: var(--green);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  letter-spacing: 0.5px;
  margin-left: 6px;
  animation: blink 1s infinite;
}

/* New-DD-card flash-in highlight */
@keyframes flashin {
  0%   { background: rgba(255, 102, 0, 0.15); }
  100% { background: transparent; }
}

.dd-card.new-flash {
  animation: flashin 0.8s ease-out;
}

.dd-summary.loading {
  color: var(--dim);
  font-style: italic;
}

/* DD feed empty-state placeholder */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--dim);
}

.empty-state pre {
  font-size: 11px;
  color: #444;
  line-height: 1.4;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .empty-state {
    padding: 20px 15px;
  }
  .empty-state pre {
    font-size: 10px;
  }
}