/* ─────────────────────────────────────────────────────────────────────────────
   GALACTIC TRADE — STYLESHEET
   Color scheme derived from galacticflats.com
───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:         #0a0a12;
  --bg2:        #0e0e1a;
  --card:       #12121e;
  --card2:      #16162a;
  --border:     #2a2a3e;
  --border2:    #3a3a5e;
  --purple:     #7b2fbe;
  --purple-lt:  #9b4fde;
  --cyan:       #00d4ff;
  --cyan-dk:    #0099cc;
  --amber:      #ff8c00;
  --amber-lt:   #ffaa33;
  --green:      #00ff88;
  --green-dk:   #00cc66;
  --red:        #ff3355;
  --red-dk:     #cc1133;
  --text:       #f0f0ff;
  --text2:      #c0c0dd;
  --muted:      #8888aa;
  --muted2:     #5555777;

  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.6);
}

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

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Arial', sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ── LAYOUT ── */
.app-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.topbar-logo {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--muted);
}

.topbar-right a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.topbar-right a:hover { color: var(--cyan); }
/* ── TOPBAR ACCOUNT STATS ── */
.topbar-account {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: center;
}

.topbar-stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

.topbar-stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}

.topbar-stat-value {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--text2);
}

.topbar-stat-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  width: 80px;
  outline: none;
  padding: 2px 0;
  transition: border-color 0.2s, color 0.2s;
  text-align: right;
}

.topbar-stat-input:hover {
  border-bottom-color: var(--border2);
}

.topbar-stat-input:focus {
  border-bottom-color: var(--cyan);
  color: var(--cyan);
}

.topbar-stat-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

/* ── TOPBAR SESSION SELECTOR ── */
.topbar-session {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.topbar-date-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  outline: none;
  padding: 2px 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.topbar-date-input:hover { border-bottom-color: var(--border2); }
.topbar-date-input:focus { border-bottom-color: var(--cyan); color: var(--cyan); }

.topbar-instrument-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  outline: none;
  padding: 2px 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.topbar-instrument-select:hover { border-bottom-color: var(--border2); }
.topbar-instrument-select:focus { border-bottom-color: var(--cyan); }
.topbar-instrument-select option { background: var(--card); color: var(--text); }

/* ── MOBILE TOPBAR — two-row layout on small screens ── */
@media (max-width: 768px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 0 12px;
    gap: 0;
  }
  .topbar-logo {
    padding: 10px 0;
    font-size: 0.95rem;
  }
  .topbar-right {
    padding: 8px 0;
    gap: 10px;
    font-size: 0.75rem;
  }
  /* Session row spans full width below logo */
  .topbar-session {
    order: 3;
    width: 100%;
    padding: 6px 0 8px;
    border-top: 1px solid var(--border);
    gap: 10px;
    display: flex !important;
  }
  .topbar-date-input {
    font-size: 0.9rem;
    padding: 6px 4px;
  }
  .topbar-instrument-select {
    font-size: 0.9rem;
    padding: 6px 4px;
  }
  .topbar-account { display: none; }
  /* Hide less critical topbar-right items */
  .topbar-right a[href*="export"],
  .topbar-right button.btn-ghost { display: none; }
}

@media (max-width: 480px) {
  .topbar-right { gap: 8px; }
  /* On very small screens, hide feed dots and export */
  #feed-health { display: none !important; }
}


.nav-tabs {
  display: flex;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  overflow-x: auto;
  gap: 4px;
}

.nav-tab {
  padding: 12px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.2s;
  user-select: none;
}

.nav-tab:hover { color: var(--text2); }
.nav-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.main-content {
  flex: 1;
  padding: 24px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.tab-panel {
  display: block;
}

.tab-panel.hidden {
  display: none !important;
}

/* ── CARDS ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
}

.card-subtitle {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ── SECTION HEADS ── */
.section-head {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 8px 12px;
  background: rgba(0,212,255,0.08);
  border-left: 3px solid var(--cyan);
  border-radius: 0 4px 4px 0;
  margin-bottom: 12px;
  margin-top: 20px;
}

.section-head:first-child { margin-top: 0; }

/* ── GRID LAYOUTS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }

@media (max-width: 768px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-6 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .grid-2  { grid-template-columns: 1fr 1fr; }
  .grid-3  { grid-template-columns: 1fr 1fr; }
  .grid-4  { grid-template-columns: 1fr 1fr; }
  .grid-6  { grid-template-columns: 1fr 1fr 1fr; }  /* keep 3-col for level pills */
  .main-content { padding: 12px 10px; }
}

/* ── FORM FIELDS ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.field-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.field-input:focus { border-color: var(--purple); }
.field-input::placeholder { color: var(--muted); }

select.field-input { cursor: pointer; }

textarea.field-input {
  resize: vertical;
  min-height: 80px;
  font-family: Arial, sans-serif;
}

/* ── LEVEL PILLS ── */
.level-pill {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.level-pill .lbl {
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.level-pill input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--cyan);
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  width: 100%;
  padding: 0;
}

.level-pill.highlight { border-color: var(--amber); }
.level-pill.highlight input { color: var(--amber); }
.level-pill.gatekeeper { border-color: var(--purple); }
.level-pill.gatekeeper input { color: var(--purple-lt); }

/* ── LEVEL COLOR CODING — matches chart colors ── */
.level-pill.lp-teal   { border-color: #00aaff; }
.level-pill.lp-teal input { color: #00aaff; }
.level-pill.lp-orange { border-color: #ff8c00; }
.level-pill.lp-orange input { color: #ff8c00; }
.level-pill.lp-orange-hot { border-color: #ff4500; }
.level-pill.lp-orange-hot input { color: #ff4500; }
.level-pill.lp-purple { border-color: #9b4fde; }
.level-pill.lp-purple input { color: #9b4fde; }
.level-pill.lp-green  { border-color: #00ff88; }
.level-pill.lp-green input { color: #00ff88; }
.level-pill.lp-cyan   { border-color: var(--cyan); }
.level-pill.lp-cyan input { color: var(--cyan); }
.level-pill.lp-blue  { border-color: #4d8eff; }
.level-pill.lp-blue input { color: #4d8eff; }
.level-pill.lp-yellow { border-color: #ffd700; }
.level-pill.lp-yellow input { color: #ffd700; }
.level-pill.lp-white { border-color: rgba(255,255,255,0.8); }
.level-pill.lp-white input { color: #ffffff; font-weight:900; }

/* ── STOP CALC BOX ── */
.stop-calc {
  background: rgba(0,170,255,0.05);
  border: 1px solid rgba(0,170,255,0.25);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 8px;
}

.stop-calc .calc-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.stop-calc .calc-note {
  font-size: 0.75rem;
  color: #00aaff;
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid rgba(0,170,255,0.2);
}

@media (max-width: 600px) {
  .stop-calc .calc-row { grid-template-columns: 1fr 1fr; }
}

/* ── MARKET STATE ── */
.state-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.state-btn {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  user-select: none;
}

.state-btn.trending     { color: var(--green);  border-color: var(--green);  }
.state-btn.failed       { color: var(--cyan);   border-color: var(--cyan);   }
.state-btn.chop         { color: var(--amber);  border-color: var(--amber);  }

.state-btn.trending.active  { background: rgba(0,255,136,0.15); }
.state-btn.failed.active    { background: rgba(0,212,255,0.15); }
.state-btn.chop.active      { background: rgba(255,140,0,0.15); }

.state-btn .state-desc {
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
  opacity: 0.7;
}

/* ── SCENARIO ROWS ── */
.scenario-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
  align-items: start;
}

.scenario-label {
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scenario-label.bull { background: rgba(0,255,136,0.12); color: var(--green); border: 1px solid rgba(0,255,136,0.3); }
.scenario-label.bear { background: rgba(255,51,85,0.12);  color: var(--red);   border: 1px solid rgba(255,51,85,0.3);  }
.scenario-label.neut { background: rgba(255,140,0,0.12);  color: var(--amber); border: 1px solid rgba(255,140,0,0.3);  }

@media (max-width: 600px) {
  .scenario-row { grid-template-columns: 60px 1fr; }
  .scenario-row .field-group:last-child { grid-column: 2; }
}

/* ── STRATEGY CHECK ── */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

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

.check-box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.15s;
  user-select: none;
}

.check-box.checked {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
}

.check-label {
  font-size: 0.85rem;
  color: var(--text2);
  flex: 1;
}

/* ── TRADE LOG TABLE ── */
.trade-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.trade-table th {
  background: var(--card2);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.trade-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

.trade-table tr:last-child td { border-bottom: none; }
.trade-table tr:hover td { background: rgba(255,255,255,0.02); }

.trade-table td input, .trade-table td select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.82rem;
  width: 100%;
  min-width: 60px;
  font-family: Arial, sans-serif;
}

.trade-table td input:focus {
  background: rgba(123,47,190,0.1);
  border-radius: 3px;
  padding: 1px 4px;
}

.pnl-pos { color: var(--green); font-weight: 700; }
.pnl-neg { color: var(--red);   font-weight: 700; }

.grade-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.grade-a { background: rgba(0,255,136,0.15); color: var(--green); }
.grade-b { background: rgba(0,212,255,0.15); color: var(--cyan); }
.grade-c { background: rgba(255,51,85,0.15);  color: var(--red); }

/* ── BUTTONS ── */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary   { background: var(--purple); color: white; }
.btn-primary:hover { background: var(--purple-lt); }
.btn-cyan      { background: var(--cyan-dk); color: white; }
.btn-cyan:hover { background: var(--cyan); color: var(--bg); }
.btn-amber     { background: rgba(255,140,0,0.2); color: var(--amber); border: 1px solid var(--amber); }
.btn-amber:hover { background: rgba(255,140,0,0.35); }
.btn-ghost     { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--border2); }
.btn-danger    { background: rgba(255,51,85,0.2); color: var(--red); border: 1px solid var(--red); }
.btn-danger:hover { background: rgba(255,51,85,0.35); }
.btn-sm        { padding: 4px 10px; font-size: 0.7rem; }
.btn-icon      { padding: 6px 8px; }

/* ── SAVE STATUS ── */
.save-status {
  font-size: 0.7rem;
  color: var(--muted);
  transition: color 0.3s;
}

.save-status.saving { color: var(--amber); }
.save-status.saved  { color: var(--green); }
.save-status.error  { color: var(--red); }

/* ── SCREENSHOT UPLOAD ── */
.upload-zone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--muted);
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--purple);
  background: rgba(123,47,190,0.06);
  color: var(--text2);
}

.upload-zone .upload-icon { font-size: 2rem; margin-bottom: 8px; }
.upload-zone p { font-size: 0.85rem; }
.upload-zone span { font-size: 0.7rem; color: var(--muted); }

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.screenshot-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}

.screenshot-item:hover { border-color: var(--cyan); }

.screenshot-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.screenshot-meta {
  padding: 6px 8px;
  background: var(--card2);
}

.screenshot-meta .ts {
  font-size: 0.65rem;
  color: var(--muted);
  font-family: 'Courier New', monospace;
}

.screenshot-meta .cap {
  font-size: 0.75rem;
  color: var(--text2);
  margin-top: 2px;
}

/* ── CALENDAR ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day-header {
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 4px;
  text-transform: uppercase;
}

.cal-day {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  padding: 4px;
  min-height: 44px;
}

.cal-day:hover { border-color: var(--border2); }
.cal-day.empty { border-color: transparent; cursor: default; }
.cal-day.today { border-color: var(--purple); }

.cal-day.win  { background: rgba(0,255,136,0.1);  border-color: rgba(0,255,136,0.3);  color: var(--green); }
.cal-day.loss { background: rgba(255,51,85,0.1);   border-color: rgba(255,51,85,0.3);   color: var(--red); }
.cal-day.obs  { background: rgba(255,140,0,0.08);  border-color: rgba(255,140,0,0.2);   color: var(--amber); }

.cal-day .day-num { font-weight: 700; }
.cal-day .day-pnl { font-size: 0.6rem; margin-top: 2px; }

/* ── ANALYTICS ── */
.stat-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.stat-val {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Courier New', monospace;
}

.stat-val.pos { color: var(--green); }
.stat-val.neg { color: var(--red); }
.stat-val.neu { color: var(--cyan); }

.stat-lbl {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}

.modal img {
  max-width: 100%;
  display: block;
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: 0.85rem;
  z-index: 2000;
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.3s;
  max-width: 300px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.success { border-color: var(--green); color: var(--green); }
.toast.error   { border-color: var(--red);   color: var(--red); }
.toast.info    { border-color: var(--cyan);  color: var(--cyan); }

/* ── HISTORY LIST ── */
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.history-item:hover { background: rgba(255,255,255,0.02); }
.history-item:last-child { border-bottom: none; }

.history-item .hi-date {
  font-weight: 700;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.history-item .hi-instrument {
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--cyan);
  background: rgba(0,212,255,0.1);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
}

.history-item .hi-state {
  font-size: 0.7rem;
  color: var(--muted);
}

.history-item .hi-pnl {
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* ── MISC ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.text-muted  { color: var(--muted); }
.text-cyan   { color: var(--cyan); }
.text-amber  { color: var(--amber); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-small  { font-size: 0.75rem; }
.text-mono   { font-family: 'Courier New', monospace; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.ml-auto     { margin-left: auto; }
.mt-8        { margin-top: 8px; }
.mt-16       { margin-top: 16px; }
.mb-8        { margin-bottom: 8px; }
.mb-16       { margin-bottom: 16px; }

.hidden { display: none !important; }

/* ── COLLAPSIBLE CARDS ── */
.collapsible-card .card-header { cursor: pointer; user-select: none; }
.collapsible-card .card-header:hover { background: rgba(255,255,255,0.02); border-radius: 8px; }

/* Card accent borders — visual separation */
#card-trades    { border-left: 3px solid var(--cyan); }
#card-premarket { border-left: 3px solid var(--amber); }
#card-longterm  { border-left: 3px solid #7b2fbe; }
#card-debrief   { border-left: 3px solid var(--green); }
.collapse-icon { font-size: 1.1rem; color: var(--muted); transition: transform 0.2s; margin-left: 8px; }
.collapse-icon.collapsed { transform: none; }
.card-toggle { display: flex; align-items: center; justify-content: space-between; }

/* ── MINI UPLOAD ZONE ── */
.mini-upload {
  padding: 12px 16px;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  transition: all 0.2s;
  text-align: center;
}
.mini-upload:hover, .mini-upload.drag-over {
  border-color: var(--purple);
  background: rgba(123,47,190,0.06);
  color: var(--text2);
}

/* ── LEVELS TABS ── */
.levels-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  transition: all 0.15s;
  user-select: none;
}
.levels-tab.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,212,255,0.1);
}
.levels-tab:hover:not(.active) {
  border-color: var(--border2);
  color: var(--text2);
}

/* ── TRADE SCREENSHOT SECTION ── */
.trade-screenshots {
  padding: 12px 16px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.trade-screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

/* Hide number input spinners on trade rows */
#trade-tbody input[type="number"]::-webkit-inner-spin-button,
#trade-tbody input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#trade-tbody input[type="number"] { -moz-appearance: textfield; }

/* Hide number input spinners on trade rows */
#trade-tbody input[type="number"]::-webkit-inner-spin-button,
#trade-tbody input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#trade-tbody input[type="number"] { -moz-appearance: textfield; }


/* ── PROFILE PAGE BUTTON FIX ─────────────────────────────────────────────── */
#tab-profile .btn {
  background: var(--purple);
  color: white !important;
  border: none;
  padding: 10px 24px;
  cursor: pointer;
}
#tab-profile .btn:hover {
  background: var(--purple-lt);
}


/* ── FEED HEALTH DOTS ─────────────────────────────────────────────────────── */
.feed-dot {
  color: var(--muted);
  font-size: 0.65rem;
  cursor: default;
  transition: color 0.3s;
}
.feed-dot.live    { color: #00ff88; }
.feed-dot.stale   { color: #ff8c00; }
.feed-dot.offline { color: #ff3355; }
.feed-dot.unknown { color: var(--muted); }

/* ── ORRERY TAB ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

@keyframes orrery-scan {
  0%{top:0;opacity:0}5%{opacity:1}95%{opacity:.2}100%{top:100%;opacity:0}
}
.orr-btn {
  background:transparent;border:1px solid rgba(0,180,255,.15);color:#334455;
  font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.08em;
  padding:3px 9px;cursor:pointer;transition:all .2s;text-transform:uppercase;
}
.orr-btn:hover,.orr-btn.active {
  border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,.06);
}
.orr-dot {
  width:5px;height:5px;border-radius:50%;background:#334455;
  display:inline-block;transition:all .5s;
}
.orr-dot.live   { background:#00ff88;box-shadow:0 0 5px #00ff88; }
.orr-dot.stale  { background:#ff8c00; }
.orr-dot.offline{ background:#ff4444; }
.orr-card {
  border:1px solid rgba(0,180,255,.12);margin-bottom:7px;overflow:hidden;
  transition:border-color .4s;
}
.orr-card.bull { border-color:rgba(0,212,255,.3); }
.orr-card.bear { border-color:rgba(255,68,68,.3); }
.orr-card-head {
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 7px;background:rgba(255,255,255,.02);
  font-family:'Orbitron',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.1em;
}
.orr-card-price { padding:2px 7px 3px;font-size:.85rem;font-weight:700; }
.orr-card-meta {
  padding:3px 7px 5px;font-family:'Space Mono',monospace;font-size:.58rem;
  color:#88aabb;line-height:1.9;border-top:1px solid rgba(0,180,255,.08);
}
.orr-card-meta span { float:right; }
.orr-card-bar { height:2px;background:rgba(255,255,255,.05);margin:0 7px 5px; }
.orr-card-bar-fill { height:100%;transition:width 1s ease;opacity:.7; }

/* ── CLAUDE CHAT PANEL ───────────────────────────────────────────────────── */
.claude-msg{padding:8px 11px;border-radius:10px;font-size:.8rem;line-height:1.5;max-width:92%;word-break:break-word;}
.claude-msg-user{background:rgba(124,58,237,.25);border:1px solid rgba(124,58,237,.3);align-self:flex-end;margin-left:auto;}
.claude-msg-assistant{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);align-self:flex-start;}
.claude-typing span{display:inline-block;animation:claude-bounce .8s infinite;margin:0 1px;color:#a78bfa;}
.claude-typing span:nth-child(2){animation-delay:.15s;}.claude-typing span:nth-child(3){animation-delay:.3s;}
@keyframes claude-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

/* ── ALERTS TAB ──────────────────────────────────────────────────────────── */
.alert-row{padding:10px 12px;border:1px solid transparent;border-radius:6px;cursor:pointer;margin-bottom:4px;transition:background .15s,border-color .15s;}
.alert-row:hover{background:rgba(0,212,255,.05);border-color:rgba(0,212,255,.15);}
.alert-row-active{background:rgba(0,212,255,.08)!important;border-color:rgba(0,212,255,.3)!important;}
.alert-label{display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-family:Orbitron,sans-serif;}
.alert-field-row{margin-bottom:14px;}

/* ── TOOLTIP ─────────────────────────────────────────────────────────────── */
.gt-tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:.65rem;color:#aaa;cursor:help;position:relative;flex-shrink:0;}
.gt-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1a2535;border:1px solid rgba(255,255,255,.15);color:#ccc;font-size:.7rem;line-height:1.4;padding:6px 10px;border-radius:6px;white-space:normal;width:220px;text-align:left;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999;font-family:inherit;font-weight:400;text-transform:none;letter-spacing:0;}
.gt-tooltip:hover::after{opacity:1;}


/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Added for iPad/iPhone RTH use
   Target: iPad Pro 10" (768px) and iPhone (390px)
══════════════════════════════════════════════════════════════════════════════ */

/* ── iOS touch improvements ── */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, select, textarea, button {
  -webkit-tap-highlight-color: transparent;
}

/* Momentum scrolling for scrollable containers */
.trade-table-wrap,
.nav-tabs,
.main-content {
  -webkit-overflow-scrolling: touch;
}

/* ── Touch-friendly tap targets (min 44px height) ── */
@media (max-width: 768px) {
  .btn {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 0.8rem;
  }
  .btn-sm {
    min-height: 36px;
    padding: 8px 12px;
  }
  .nav-tab {
    padding: 14px 16px;
    font-size: 0.75rem;
  }
  .levels-tab {
    padding: 10px 16px;
    font-size: 0.8rem;
    min-height: 40px;
  }
  .field-input {
    font-size: 1rem;    /* prevent iOS auto-zoom on focus (must be >= 16px to prevent) */
    padding: 10px 12px;
    min-height: 44px;
  }
  select.field-input {
    min-height: 44px;
  }
  textarea.field-input {
    min-height: 80px;
  }
  .level-pill input {
    font-size: 1rem;
    min-height: 32px;
  }
  /* Card padding tighter on mobile */
  .card {
    padding: 14px;
    margin-bottom: 14px;
  }
  .card-header {
    padding-bottom: 10px;
    margin-bottom: 12px;
  }
}

/* ── Trade table — scrollable on mobile, don't hide core columns ── */
@media (max-width: 768px) {
  .trade-table-wrap {
    overflow-x: auto;
    /* Show scroll hint with gradient */
    background:
      linear-gradient(to right, var(--card) 30%, rgba(18,18,30,0)),
      linear-gradient(to left,  var(--card) 30%, rgba(18,18,30,0)) 100% 0,
      linear-gradient(to right, rgba(0,212,255,0.15), rgba(0,212,255,0)),
      linear-gradient(to left,  rgba(0,212,255,0.15), rgba(0,212,255,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .trade-table {
    min-width: 700px;  /* force horizontal scroll rather than wrapping */
  }
  .trade-table th,
  .trade-table td {
    padding: 10px 8px;
    font-size: 0.78rem;
  }
}

/* ── Pre-market instrument tab bar — scrollable if too many tabs ── */
@media (max-width: 768px) {
  #body-premarket > div:first-child {    /* instrument tab row */
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .levels-tab {
    flex-shrink: 0;
  }
}

/* ── Section heads — smaller on mobile ── */
@media (max-width: 768px) {
  .section-head {
    font-size: 0.65rem;
    padding: 6px 10px;
    margin-top: 16px;
    margin-bottom: 10px;
  }
}

/* ── Upload zones — bigger tap target on mobile ── */
@media (max-width: 768px) {
  .upload-zone,
  .mini-upload {
    padding: 20px 16px;
    font-size: 0.9rem;
  }
  .upload-zone .upload-icon {
    font-size: 2.4rem;
  }
}

/* ── Screenshot grid — 2 col on mobile ── */
@media (max-width: 768px) {
  .screenshot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .screenshot-item img {
    height: 100px;
  }
}

/* ── Stop calc — 2 col on mobile ── */
@media (max-width: 768px) {
  .stop-calc .calc-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Analytics stat cards ── */
@media (max-width: 768px) {
  .stat-val {
    font-size: 1.4rem;
  }
}

/* ── Collapsible card toggle — bigger hit area on mobile ── */
@media (max-width: 768px) {
  .collapsible-card .card-header {
    padding: 14px 0;
    min-height: 52px;
  }
}

/* ── Safe area insets — iPhone notch / home bar ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ── Prevent font size inflation on iOS landscape ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* overscroll-behavior not supported on iOS Safari — PTR handled in JS */
}

/* ── Toast position — above home bar on iPhone ── */
@media (max-width: 768px) {
  .toast {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* ── Modal — full-height friendly on mobile ── */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;  /* slide up from bottom, more native-feeling */
  }
  .modal {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ── Scenario row — stack confirmed-by on mobile ── */
@media (max-width: 480px) {
  .scenario-row {
    grid-template-columns: 60px 1fr;
  }
  .scenario-row .field-group:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Nav tabs — horizontal scroll, no wrapping ── */
@media (max-width: 768px) {
  .nav-tabs {
    padding: 0 10px;
    gap: 0;
  }
  .nav-tab {
    flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE TRADE ENTRY MODAL
══════════════════════════════════════════════════════════════════════════════ */

/* Trade modal overrides base .modal */
.trade-modal {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
}

.trade-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card2);
}

.trade-modal-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.trade-modal-section:last-child {
  border-bottom: none;
}

.trade-modal-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.trade-modal-4col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}

/* ── Direction buttons ── */
.dir-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dir-btn {
  padding: 14px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 52px;
  color: var(--muted);
}

.dir-btn.dir-long  { border-color: rgba(0,255,136,0.3);  color: rgba(0,255,136,0.5); }
.dir-btn.dir-short { border-color: rgba(255,51,85,0.3);   color: rgba(255,51,85,0.5); }

.dir-btn.dir-long.active {
  background: rgba(0,255,136,0.15);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0,255,136,0.2);
}

.dir-btn.dir-short.active {
  background: rgba(255,51,85,0.15);
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 12px rgba(255,51,85,0.2);
}

/* ── Grade buttons ── */
.grade-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grade-btn {
  padding: 12px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: transparent;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 48px;
  color: var(--muted);
}

.grade-btn-a { border-color: rgba(0,255,136,0.3);  color: rgba(0,255,136,0.5); }
.grade-btn-b { border-color: rgba(0,212,255,0.3);  color: rgba(0,212,255,0.5); }
.grade-btn-c { border-color: rgba(255,51,85,0.3);  color: rgba(255,51,85,0.5); }

.grade-btn-a.active { background: rgba(0,255,136,0.15);  border-color: var(--green);  color: var(--green); }
.grade-btn-b.active { background: rgba(0,212,255,0.15);  border-color: var(--cyan);   color: var(--cyan);  }
.grade-btn-c.active { background: rgba(255,51,85,0.15);  border-color: var(--red);    color: var(--red);   }

/* ── Calc row ── */
.trade-modal-calc-row {
  display: flex;
  gap: 20px;
  background: rgba(255,255,255,0.02);
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal-calc-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-calc-label {
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-calc-val {
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--text2);
}

/* ── Modal on mobile — slide up from bottom ── */
@media (max-width: 768px) {
  #trade-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .trade-modal {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .trade-modal-4col {
    grid-template-columns: 1fr 1fr;  /* 2x2 on small screens */
    gap: 8px;
  }
}

/* ── FAB — floating action button ── */
.mobile-fab {
  display: none;  /* hidden on desktop */
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--purple);
  border: none;
  color: white;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 20px rgba(123,47,190,0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}

.mobile-fab:active {
  transform: scale(0.93);
  box-shadow: 0 2px 10px rgba(123,47,190,0.4);
}

@media (max-width: 768px) {
  .mobile-fab {
    display: flex;
  }
  /* Push content up so FAB doesn't cover the last card item */
  .main-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Pre-Market Recipe Box ─────────────────────────────────────────── */
.pm-tabs{display:flex;gap:0;margin-bottom:0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;padding:0}
.pm-tabs::-webkit-scrollbar{display:none}
.pm-tab{padding:11px 20px;font-family:Orbitron,sans-serif;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s;user-select:none}
.pm-tab:hover{color:var(--text2)}
.pm-tab[data-pmtab="longterm"].active{color:#a78bfa;border-color:#a78bfa}
.pm-tab[data-pmtab="composite"].active{color:var(--amber);border-color:var(--amber)}
.pm-tab[data-pmtab="prior"].active{color:#ff8c00;border-color:#ff8c00}
.pm-tab[data-pmtab="overnight"].active{color:#00aaff;border-color:#00aaff}
.pm-tab[data-pmtab="liverefs"].active{color:#4d8eff;border-color:#4d8eff}
.pm-panel{padding:20px 0 0}
.pm-card{border-radius:8px;padding:20px 20px 24px;border-left:3px solid;margin-bottom:0}
.pm-card-lt{border-color:#a78bfa;background:rgba(124,58,237,.04)}
.pm-card-composite{border-color:var(--amber);background:rgba(245,158,11,.03)}
.pm-card-prior{border-color:#ff8c00;background:rgba(255,140,0,.03)}
.pm-card-overnight{border-color:#00aaff;background:rgba(0,170,255,.03)}
.pm-card-liverefs{border-color:#4d8eff;background:rgba(77,142,255,.03)}
.pm-statement{margin-top:20px;border-top:1px solid var(--border);padding-top:16px}
.pm-statement-lbl{display:block;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:Orbitron,sans-serif;margin-bottom:6px}
.pm-instrument-bar{display:flex;gap:6px;margin-bottom:0;flex-wrap:wrap;align-items:center;padding:12px 0 0}
@media(max-width:768px){
  .pm-tab{padding:9px 12px;font-size:.52rem}
  .pm-card{padding:14px 14px 18px}
}