/* ============================================================
   SENTIO — Base Styles
   Shared across all pages: variables, reset, topbar, nav,
   bottom nav, typography, scrollbar, common utilities
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --bg-base:       #080B0F;
  --bg-panel:      #0D1117;
  --bg-card:       #111820;
  --bg-hover:      #161E28;
  --border:        #1C2A38;
  --border-bright: #243040;

  --text-primary:  #E2EAF4;
  --text-secondary:#8899AA;
  --text-dim:      #445566;

  --accent-blue:   #00A8FF;
  --accent-green:  #00E676;
  --accent-red:    #FF3D57;
  --accent-amber:  #FFB300;
  --accent-purple: #AA80FF;
  --accent-teal:   #00BCD4;

  --green-dim:     #003D1A;
  --red-dim:       #3D0010;
  --amber-dim:     #3D2A00;
  --blue-dim:      #002A3D;
  --purple-dim:    #1A0D3D;
  --teal-dim:      #002A2F;

--font-mono:     'JetBrains Mono', monospace;
  --font-sans:     'DM Sans', sans-serif;
  --font-display:  'Bebas Neue', sans-serif;

  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;

  --topbar-height: 44px;
  --bottomnav-height: 56px;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html, body {
  background:  var(--bg-base);
  color:       var(--text-primary);
  font-family: var(--font-sans);
  font-size:   13px;
  line-height: 1.5;
  min-height:  100vh;
  overflow-x:  hidden;
}

a { text-decoration: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar         { width: 4px; height: 4px; }
::-webkit-scrollbar-track   { background: var(--bg-base); }
::-webkit-scrollbar-thumb   { background: var(--border-bright); border-radius: 2px; }

/* ── TOPBAR ── */
#topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 20px;
  height:          var(--topbar-height);
  background:      var(--bg-panel);
  border-bottom:   1px solid var(--border);
  position:        sticky;
  top:             0;
  z-index:         100;
  gap:             16px;
}

/* ── LOGO ── */
.logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

.logo-mark {
  width:           28px;
  height:          28px;
  background:      var(--accent-blue);
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  font-weight:     600;
  font-size:       12px;
  color:           #000;
  letter-spacing:  -0.5px;
}

.logo-name {
  font-family:    var(--font-mono);
  font-weight:    600;
  font-size:      15px;
  letter-spacing: 3px;
  color:          var(--text-primary);
}

.logo-sub {
  font-family:    var(--font-mono);
  font-size:      9px;
  color:          var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── NAV LINKS ── */
.nav-links {
  display: flex;
  gap:     4px;
}

.nav-link {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        6px 14px;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--text-secondary);
  border:         1px solid transparent;
  transition:     all 0.15s;
  white-space:    nowrap;
}

.nav-link:hover {
  background:   var(--bg-card);
  color:        var(--text-primary);
  border-color: var(--border);
}

.nav-link.active-dashboard {
  background:   var(--blue-dim);
  color:        var(--accent-blue);
  border-color: var(--accent-blue);
}

.nav-link.active-virtual {
  background:   var(--green-dim);
  color:        var(--accent-green);
  border-color: var(--accent-green);
}

.nav-link.active-learn {
  background:   var(--purple-dim);
  color:        var(--accent-purple);
  border-color: var(--accent-purple);
}

/* ── BOTTOM NAV ── */
#bottom-nav {
  position:      fixed;
  bottom:        0;
  left:          0;
  right:         0;
  background:    var(--bg-panel);
  border-top:    1px solid var(--border);
  display:       flex;
  z-index:       200;
  height:        var(--bottomnav-height);
}

.bottom-nav-item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         8px 0;
  color:           var(--text-dim);
  font-family:     var(--font-mono);
  font-size:       9px;
  letter-spacing:  1px;
  gap:             3px;
  border-top:      2px solid transparent;
  transition:      all 0.15s;
}

.bottom-nav-item:hover        { color: var(--text-secondary); }
.bottom-nav-item .nav-icon    { font-size: 16px; }

.bottom-nav-item.active-dashboard {
  color:        var(--accent-blue);
  border-color: var(--accent-blue);
}

.bottom-nav-item.active-virtual {
  color:        var(--accent-green);
  border-color: var(--accent-green);
}

.bottom-nav-item.active-learn {
  color:        var(--accent-purple);
  border-color: var(--accent-purple);
}

/* ── PANEL BASE ── */
.panel {
  background:   var(--bg-panel);
  border:       1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:     hidden;
}

.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 16px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

.panel-title {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--text-secondary);
}

.panel-dot {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--accent-blue);
}

.panel-badge {
  font-family:    var(--font-mono);
  font-size:      9px;
  padding:        2px 6px;
  border-radius:  3px;
  background:     var(--bg-card);
  color:          var(--text-dim);
  border:         1px solid var(--border);
}

/* ── TABLE ── */
.sentio-table {
  width:           100%;
  border-collapse: collapse;
}

.sentio-table th {
  padding:        8px 12px;
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--text-dim);
  border-bottom:  1px solid var(--border);
  text-align:     left;
  background:     var(--bg-panel);
}

.sentio-table td {
  padding:       9px 12px;
  border-bottom: 1px solid var(--border);
  font-family:   var(--font-mono);
  font-size:     12px;
}

.sentio-table tr:hover td { background: var(--bg-hover); cursor: pointer; }

/* ── BADGES ── */
.badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 7px;
  border-radius:  3px;
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family:    var(--font-mono);
}

.badge-green  { background: var(--green-dim);  color: var(--accent-green);  border: 1px solid var(--accent-green);  }
.badge-red    { background: var(--red-dim);    color: var(--accent-red);    border: 1px solid var(--accent-red);    }
.badge-amber  { background: var(--amber-dim);  color: var(--accent-amber);  border: 1px solid var(--accent-amber);  }
.badge-blue   { background: var(--blue-dim);   color: var(--accent-blue);   border: 1px solid var(--accent-blue);   }
.badge-purple { background: var(--purple-dim); color: var(--accent-purple); border: 1px solid var(--accent-purple); }

/* ── P&L COLORS ── */
.pnl-pos { color: var(--accent-green); }
.pnl-neg { color: var(--accent-red);   }

/* ── RISK COLORS ── */
.risk-LOW      { color: var(--accent-green); }
.risk-MODERATE { color: var(--accent-amber); }
.risk-HIGH     { color: var(--accent-red);   }
.risk-EXTREME  { color: var(--accent-red); animation: blink 1s step-end infinite; }

/* ── ANIMATIONS ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

@keyframes blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.3; }
}

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeUp {
  0%   { opacity: 1; transform: translateY(0);    }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ── LOADING ── */
.shimmer {
  background:      linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation:       shimmer 1.5s infinite;
  border-radius:   var(--radius-sm);
  height:          14px;
}

/* ── EMPTY STATE ── */
.empty-state {
  padding:    40px;
  text-align: center;
  color:      var(--text-dim);
  font-family:var(--font-mono);
  font-size:  11px;
  line-height:1.6;
}

/* ── BUTTONS ── */
.btn {
  padding:        10px 20px;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  cursor:         pointer;
  border:         none;
  transition:     all 0.15s;
  text-transform: uppercase;
}

.btn-primary   { background: var(--accent-blue);   color: #000; }
.btn-success   { background: var(--accent-green);  color: #000; }
.btn-danger    { background: var(--accent-red);    color: #fff; }
.btn-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); }

.btn-primary:hover   { opacity: 0.85; }
.btn-success:hover   { opacity: 0.85; }
.btn-danger:hover    { opacity: 0.85; }
.btn-secondary:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

/* ── NOTIFICATION TOAST ── */
#toast {
  position:      fixed;
  bottom:        70px;
  right:         24px;
  background:    var(--bg-panel);
  border:        1px solid var(--accent-amber);
  border-radius: var(--radius-lg);
  padding:       14px 20px;
  font-family:   var(--font-mono);
  font-size:     12px;
  color:         var(--accent-amber);
  z-index:       1000;
  transform:     translateY(100px);
  transition:    transform 0.3s;
  max-width:     300px;
  pointer-events:none;
}

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

/* ── XP GAIN POPUP ── */
.xp-popup {
  position:      fixed;
  top:           60px;
  right:         24px;
  background:    var(--accent-purple);
  color:         #fff;
  padding:       8px 16px;
  border-radius: var(--radius-md);
  font-family:   var(--font-mono);
  font-weight:   600;
  font-size:     13px;
  z-index:       1000;
  animation:     fadeUp 2s ease forwards;
  pointer-events:none;
}

/* ── UTILITY ── */
.text-mono    { font-family: var(--font-mono); }
.text-dim     { color: var(--text-dim); }
.text-secondary { color: var(--text-secondary); }
.text-green   { color: var(--accent-green); }
.text-red     { color: var(--accent-red); }
.text-amber   { color: var(--accent-amber); }
.text-blue    { color: var(--accent-blue); }
.text-purple  { color: var(--accent-purple); }
.fw-600       { font-weight: 600; }
.fs-10        { font-size: 10px; }
.fs-11        { font-size: 11px; }
.fs-12        { font-size: 12px; }
.fs-13        { font-size: 13px; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
.mt-16        { margin-top: 16px; }
.mb-8         { margin-bottom: 8px; }
.mb-12        { margin-bottom: 12px; }
.mb-16        { margin-bottom: 16px; }
.gap-8        { gap: 8px; }
.gap-12       { gap: 12px; }
.gap-16       { gap: 16px; }

/* ============================================================
   MOBILE RESPONSIVE — All breakpoints
   ============================================================ */

/* ── TABLET (max 1024px) ── */
@media (max-width: 1024px) {
  #main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto;
  }

  #panel-brain   { grid-column: 1; grid-row: 2; }
  #panel-sector  { grid-column: 1 / 3; grid-row: 1; }
  #panel-traps   { grid-column: 2; grid-row: 2; }
  #panel-opps    { grid-column: 1 / 3; grid-row: 3; }
  #panel-liq     { grid-column: 1; grid-row: 4; }
  #panel-anomaly { grid-column: 2; grid-row: 4; }

  .heatmap-grid { grid-template-columns: repeat(7, 1fr); }
  .topbar-center { gap: 12px; }
  .topbar-stat-label { font-size: 8px; }
}

/* ── MOBILE (max 768px) ── */
@media (max-width: 768px) {

  /* Topbar */
  #topbar {
    padding:  0 12px;
    height:   auto;
    min-height: var(--topbar-height);
    flex-wrap:wrap;
    gap:      8px;
    padding-top:   6px;
    padding-bottom:6px;
  }

  .logo-sub       { display: none; }
  .logo-name      { font-size: 13px; letter-spacing: 2px; }
  .nav-links      { display: none; }

  /* Show hamburger menu instead */
  #mobile-menu-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    background:      var(--bg-card);
    border:          1px solid var(--border);
    border-radius:   var(--radius-sm);
    cursor:          pointer;
    font-size:       16px;
  }

  /* Mobile nav drawer */
  #mobile-nav-drawer {
    display:    none;
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    bottom:     0;
    background: rgba(0,0,0,0.85);
    z-index:    500;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:        16px;
  }

  #mobile-nav-drawer.open { display: flex; }

  .mobile-nav-link {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        16px 40px;
    font-family:    var(--font-mono);
    font-size:      16px;
    font-weight:    600;
    color:          var(--text-primary);
    text-decoration:none;
    border:         1px solid var(--border);
    border-radius:  var(--radius-lg);
    background:     var(--bg-panel);
    width:          240px;
    transition:     all 0.15s;
  }

  .mobile-nav-link:hover { border-color: var(--accent-blue); }
  .mobile-nav-link.active-dashboard { border-color: var(--accent-blue);   color: var(--accent-blue);   }
  .mobile-nav-link.active-virtual   { border-color: var(--accent-green);  color: var(--accent-green);  }
  .mobile-nav-link.active-learn     { border-color: var(--accent-purple); color: var(--accent-purple); }

  .mobile-nav-close {
    position:   absolute;
    top:        20px;
    right:      20px;
    font-size:  24px;
    cursor:     pointer;
    color:      var(--text-dim);
    padding:    8px;
  }

  /* Dashboard grid — single column */
  #main {
    grid-template-columns: 1fr;
    grid-template-rows:    auto;
  }

  #rec-bar        { grid-column: 1; flex-wrap: wrap; gap: 6px; font-size: 10px; }
  #panel-brain    { grid-column: 1; grid-row: auto; }
  #panel-sector   { grid-column: 1; grid-row: auto; }
  #panel-opps     { grid-column: 1; grid-row: auto; }
  #panel-traps    { grid-column: 1; grid-row: auto; }
  #panel-liq      { grid-column: 1; grid-row: auto; }
  #panel-anomaly  { grid-column: 1; grid-row: auto; }

  /* Heatmap — fewer columns */
  .heatmap-grid { grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 8px; }

  /* Topbar stats — hide some on small screens */
  .topbar-center  { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  #tb-adv-dec     { display: none; }

  /* Opportunity table — hide less important columns */
  .sentio-table th:nth-child(6),
  .sentio-table td:nth-child(6),
  .sentio-table th:nth-child(7),
  .sentio-table td:nth-child(7) { display: none; }

  /* Brain panel */
  .score-ring-wrap { width: 120px; height: 120px; }
  .score-ring-number { font-size: 28px; }

  /* Anomaly grid — single column */
  .anomaly-grid { grid-template-columns: 1fr; }

  /* Bottom nav */
  #bottom-nav { height: 60px; }
  .bottom-nav-item { font-size: 8px; }

  /* Content padding */
  #virtual-main { padding: 12px; }
  #learn-content{ padding: 16px; }

  /* Trade grid — single column */
  .trade-grid { grid-template-columns: 1fr; }

  /* Stats grid — 2 columns */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Concept grid — single column */
  .concept-grid { grid-template-columns: 1fr; }

  /* Journal scores — 2 columns */
  .journal-scores { grid-template-columns: 1fr 1fr; }

  /* Learn stats */
  .learn-stats-row { grid-template-columns: 1fr 1fr; }

  /* Learn layout — single column */
  #learn-main { grid-template-columns: 1fr; }

  #learn-sidebar {
    position: static;
    height:   auto;
    border-right:  none;
    border-bottom: 1px solid var(--border);
    display:  none;
  }

  #learn-sidebar.mobile-open { display: block; }

  /* Mobile sidebar toggle */
  #sidebar-toggle {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 16px;
    background:      var(--bg-card);
    border-bottom:   1px solid var(--border);
    font-family:     var(--font-mono);
    font-size:       11px;
    color:           var(--text-secondary);
    cursor:          pointer;
  }

  /* Leaderboard — simplify */
  .lb-header,
  .lb-row {
    grid-template-columns: 36px 1fr 80px 70px;
  }

  .lb-header-cell:nth-child(4),
  .lb-row > div:nth-child(5),
  .lb-header-cell:nth-child(5),
  .lb-row > div:nth-child(6),
  .lb-header-cell:nth-child(6) { display: none; }
}

/* ── SMALL MOBILE (max 480px) ── */
@media (max-width: 480px) {
  .heatmap-grid { grid-template-columns: repeat(3, 1fr); }

  .stats-grid      { grid-template-columns: 1fr 1fr; }
  .learn-stats-row { grid-template-columns: 1fr 1fr; }

  /* Hide topbar stats entirely */
  .topbar-center { display: none; }

  #topbar-right-slot .capital-display { gap: 10px; }
  .cap-item:last-child { display: none; }

  .lesson-title    { font-size: 18px; }
  .lesson-subtitle { font-size: 12px; }
  .quiz-question   { font-size: 13px; }
  .quiz-option     { font-size: 12px; }

  .ritual-step { gap: 10px; }
  .ritual-step-num { width: 28px; height: 28px; font-size: 11px; }

  .breathing-circle { width: 130px; height: 130px; }
  .breathing-count  { font-size: 28px; }

  /* Path items */
  .path-item { padding: 12px; }
  .path-icon { font-size: 18px; width: 32px; }
  .path-title{ font-size: 12px; }
  .path-desc { font-size: 10px; }
}
/* ── DISPLAY FONT USAGE ── */

/* Panel titles use display font */
.panel-title {
  font-family: var(--font-display);
  font-size:   13px;
  letter-spacing: 3px;
}

/* Section headings */
.lesson-section-title {
  font-family: var(--font-display);
  font-size:   14px;
  letter-spacing: 3px;
}

/* Topbar stat labels */
.topbar-stat-label {
  font-family: var(--font-display);
  font-size:   10px;
  letter-spacing: 2px;
}

/* Bottom nav labels */
.bottom-nav-item span:last-child {
  font-family: var(--font-display);
  font-size:   10px;
  letter-spacing: 2px;
}

/* Tab labels */
.tab {
  font-family: var(--font-display);
  letter-spacing: 2px;
  font-size: 13px;
}

/* Sidebar section titles */
.sidebar-section-title {
  font-family: var(--font-display);
  font-size:   11px;
  letter-spacing: 3px;
}

/* Score ring number */
.score-ring-number {
  font-family: var(--font-display);
  font-size:   42px;
  letter-spacing: 2px;
}

/* Brain state text */
.brain-state {
  font-family: var(--font-display);
  font-size:   16px;
  letter-spacing: 4px;
}

/* Panel badge */
.panel-badge {
  font-family: var(--font-mono);
  font-size:   10px;
}

/* Stat values on dashboard */
.stat-mini-val,
.stat-value,
.brain-stat-value {
  font-family: var(--font-display);
}

/* Learning path titles */
.path-title {
  font-family: var(--font-display);
  font-size:   15px;
  letter-spacing: 1px;
}

/* Recommended box title */
.recommended-title {
  font-family: var(--font-display);
  font-size:   20px;
  letter-spacing: 1px;
}

/* Lesson titles */
.lesson-title {
  font-family: var(--font-display);
  font-size:   28px;
  letter-spacing: 2px;
}

/* Profile level */
.profile-level {
  font-family: var(--font-display);
  letter-spacing: 2px;
}

/* XP value */
.xp-value {
  font-family: var(--font-display);
  font-size:   14px;
  letter-spacing: 1px;
}

/* Alert type badges */
.alert-type-badge {
  font-family: var(--font-display);
  letter-spacing: 2px;
}

/* Rec bar label */
.rec-label {
  font-family: var(--font-display);
  font-size:   10px;
  letter-spacing: 3px;
}

/* Trap level badge */
.trap-level-badge {
  font-family: var(--font-display);
  letter-spacing: 2px;
}

/* Market pill */
.market-pill {
  font-family: var(--font-display);
  letter-spacing: 3px;
  font-size: 13px;
}

/* ── SENTIO ICON FIXES ── */
.tab-icon svg,
.nav-icon svg,
.nav-link svg,
.mobile-nav-link svg,
.path-card-icon svg {
  display:        inline-block;
  vertical-align: middle;
}