/* ============================================
   kbMBS — Premium Finance UI v131
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ============================================
   Dark Theme (default)
   ============================================ */
:root {
  /* Backgrounds — warm neutral dark, not pitch black */
  --bg-primary:    #141418;
  --bg-secondary:  #1C1C22;
  --bg-card:       #1E1E26;
  --bg-card-hover: #242430;
  --bg-elevated:   #26262E;
  --bg-overlay:    rgba(10, 10, 14, 0.88);
  --bg-chrome:     #0F0F14;

  /* Amber accent */
  --accent:        #FF9D28;
  --accent-bright: #FFB84D;
  --accent-muted:  #C4720E;
  --accent-dim:    rgba(255, 157, 40, 0.12);
  --accent-glow:   rgba(255, 157, 40, 0.28);
  --accent-bloom:  rgba(255, 157, 40, 0.06);

  /* AI Blue */
  --ai:     #38BDF8;
  --ai-dim: rgba(56, 189, 248, 0.12);
  --ai-glow: rgba(56, 189, 248, 0.24);

  /* Semantic */
  --green:        #10B981;
  --green-bright: #34D399;
  --green-dim:    rgba(16, 185, 129, 0.14);
  --red:          #EF4444;
  --red-bright:   #F87171;
  --red-dim:      rgba(239, 68, 68, 0.14);

  /* Text */
  --text-primary:   #F0EEF8;
  --text-secondary: #9290A8;
  --text-tertiary:  #56546E;
  --text-muted:     #3A3850;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(255, 157, 40, 0.22);
  --border-hover:  rgba(255, 157, 40, 0.40);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-ai:     rgba(56, 189, 248, 0.22);

  /* Shadows */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.6);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.75);
  --shadow-accent: 0 4px 20px rgba(255,157,40,0.18);
  --shadow-ai:     0 4px 20px rgba(56,189,248,0.16);

  /* Typography */
  --font-ui:   'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;

  /* Easing */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 9999px;
}

/* ============================================
   Light Theme
   ============================================ */
[data-theme="light"] {
  --bg-primary:    #F8F8FA;
  --bg-secondary:  #F0F0F4;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F5F5F8;
  --bg-elevated:   #FFFFFF;
  --bg-overlay:    rgba(20, 20, 30, 0.65);
  --bg-chrome:     #EDEDF2;

  --accent-dim:    rgba(255, 157, 40, 0.10);
  --accent-glow:   rgba(255, 157, 40, 0.22);
  --accent-bloom:  rgba(255, 157, 40, 0.05);

  --ai-dim:  rgba(56, 189, 248, 0.10);
  --ai-glow: rgba(56, 189, 248, 0.18);

  --green-dim: rgba(16, 185, 129, 0.10);
  --red-dim:   rgba(239, 68, 68, 0.10);

  --text-primary:   #111118;
  --text-secondary: #52516A;
  --text-tertiary:  #9896B0;
  --text-muted:     #C4C2D8;

  --border:        rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.12);
  --border-accent: rgba(255, 157, 40, 0.28);
  --border-hover:  rgba(255, 157, 40, 0.50);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-ai:     rgba(56, 189, 248, 0.28);

  --shadow-sm:     0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-accent: 0 4px 20px rgba(255,157,40,0.18);
  --shadow-ai:     0 4px 20px rgba(56,189,248,0.16);
}

/* ============================================
   Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 157, 40, 0.22);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 157, 40, 0.44);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
}

/* ============================================
   Ambient Background
   ============================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  animation: ambient-breathe 30s ease-in-out infinite alternate;
}

@keyframes ambient-breathe {
  from {
    background:
      radial-gradient(ellipse 120% 50% at 10% 0%,  rgba(255,110,0,0.055) 0%, transparent 55%),
      radial-gradient(ellipse 80%  55% at 90% 100%, rgba(56,189,248,0.032) 0%, transparent 55%);
  }
  to {
    background:
      radial-gradient(ellipse 100% 60% at 65% 0%,  rgba(255,90,0,0.042) 0%, transparent 55%),
      radial-gradient(ellipse 90%  45% at 15% 100%, rgba(56,189,248,0.024) 0%, transparent 55%);
  }
}

[data-theme="light"] body::before {
  animation: none;
  background: none;
}

/* ============================================
   Glass Card
   ============================================ */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform    0.28s var(--ease-out),
    box-shadow   0.28s var(--ease-out),
    border-color 0.28s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.glass-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-accent);
}

/* ============================================
   Tab Content Transition
   ============================================ */
.tab-content {
  animation: tab-enter 0.30s var(--ease-out) both;
}

@keyframes tab-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   App Shell — Header
   ============================================ */
.app-header {
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

[data-theme="light"] .app-header {
  background: var(--bg-chrome);
  border-bottom-color: var(--border);
}

.app-header-accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,157,40,0.35) 30%,
    rgba(255,157,40,0.55) 50%,
    rgba(255,157,40,0.35) 70%,
    transparent 100%
  );
}

.app-logo {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* ============================================
   Tab Bar
   ============================================ */
.app-tabbar {
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  position: relative;
  z-index: 9;
  align-items: center;
  height: 44px;
}

.app-tabbar::-webkit-scrollbar { display: none; }

.nav-tab {
  position: relative;
  padding: 6px 13px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color        0.20s var(--ease-smooth),
    background   0.20s var(--ease-smooth),
    border-color 0.20s var(--ease-smooth),
    transform    0.18s var(--ease-spring);
  outline: none;
  flex-shrink: 0;
}

.nav-tab:hover {
  color: var(--text-secondary);
  background: var(--accent-dim);
  transform: translateY(-1px);
}

.nav-tab-active {
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
  border-color: var(--border-accent) !important;
  box-shadow: 0 0 12px var(--accent-bloom);
}

/* Fed live nav tab — flashes red */
.nav-tab-fed-live {
  color: #EF4444 !important;
  border-color: rgba(239,68,68,0.35) !important;
  animation: fedTabFlash 1.4s ease-in-out infinite;
  position: relative;
}
.nav-tab-fed-live.nav-tab-active {
  background: rgba(239,68,68,0.12) !important;
}
@keyframes fedTabFlash {
  0%, 100% { color: #EF4444; box-shadow: none; }
  50%       { color: #FF6B6B; box-shadow: 0 0 10px rgba(239,68,68,0.5); }
}
.nav-tab-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #EF4444;
  margin-left: 5px;
  vertical-align: middle;
  animation: fedTabFlash 1.4s ease-in-out infinite;
}

@keyframes fedLivePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Live TV focus mode — all chrome cascades off-screen, backdrop dims */
.app-header     { transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0s; }
.app-tabbar     { transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.06s; }
.news-inner-tabbar { transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.12s; }

.tv-focus-mode .app-header,
.tv-focus-mode .app-tabbar,
.tv-focus-mode .news-inner-tabbar {
  transform: translateY(-400%);
}

/* ============================================
   Legend Bar
   ============================================ */
.legend-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.legend-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 0.18s,
    color        0.18s,
    background   0.18s,
    transform    0.16s var(--ease-spring);
}

.legend-btn:hover {
  transform: translateY(-1px);
  background: var(--bg-card);
}

/* ============================================
   Footer
   ============================================ */
.app-footer {
  background: var(--bg-chrome);
  border-top: 1px solid var(--border);
  padding: 6px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

/* ============================================
   Gauge
   ============================================ */
.gauge-container {
  position: relative;
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gauge-arc {
  width: 140px;
  height: 70px;
  position: relative;
  overflow: hidden;
}

.gauge-arc::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right,
    #10b981 0%, #10b981 28%,
    #f59e0b 48%, #FF9D28 65%,
    #ef4444 100%
  );
  border-radius: var(--r-pill);
}

.gauge-needle {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 2px;
  height: 52px;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.35));
  transform-origin: bottom center;
  transition: transform 0.85s var(--ease-spring);
  box-shadow: 0 0 10px rgba(255,255,255,0.45);
}

.gauge-needle::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -5px;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.gauge-reading {
  font-family: var(--font-data);
  font-size: 24px;
  font-weight: 700;
  margin-top: 8px;
  text-shadow: 0 0 14px currentColor;
}

/* ============================================
   Spread Tracker
   ============================================ */
.spread-tracker { display: flex; flex-direction: column; gap: 10px; }

.spread-bar {
  position: relative;
  height: 5px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.spread-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: linear-gradient(to right, var(--green), var(--accent));
  border-radius: var(--r-pill);
  transition: width 0.7s var(--ease-out);
}

/* ============================================
   Nav Icon
   ============================================ */
.bottom-nav { height: 48px !important; padding: 8px 16px !important; }

.nav-icon {
  position: relative;
  cursor: pointer;
  transition: transform 0.20s var(--ease-spring), opacity 0.2s;
}
.nav-icon:hover { transform: translateY(-3px) scale(1.10); }

/* ============================================
   Tippy
   ============================================ */
.tippy-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}
.tippy-arrow { color: var(--bg-elevated); }

/* ============================================
   Weekly / Daily Cards
   ============================================ */
.weekly-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease-out);
}
.weekly-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}
.weekly-card-header {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.weekly-card-content {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.72;
  color: var(--text-secondary);
}

.daily-card {
  min-height: 140px;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s var(--ease-out);
}
.daily-card:hover {
  border-color: var(--border-accent);
  transform: translateX(2px);
  box-shadow: var(--shadow-accent);
}
.daily-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.daily-card-time {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ============================================
   Event Badges
   ============================================ */
.event-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.event-badge.high   { background: var(--red-dim);    color: var(--red-bright);    border: 1px solid rgba(239,68,68,0.22); }
.event-badge.medium { background: var(--accent-dim); color: var(--accent-bright); border: 1px solid rgba(255,157,40,0.22); }
.event-badge.low    { background: var(--border);     color: var(--text-secondary); }

/* ============================================
   Price Colors
   ============================================ */
.price-up  { color: var(--green)  !important; }
.price-down { color: var(--red)   !important; }
.rate-down  { color: var(--green) !important; }
.rate-up    { color: var(--red)   !important; }

/* ============================================
   Animated Gradient Text
   ============================================ */
.gradient-text {
  background: linear-gradient(90deg, #FF9D28, #FFD580, #FF9D28, #FF6B00);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   Live Pulse Dot
   ============================================ */
.pulse-dot { animation: pulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.82); }
}

/* ============================================
   Rate Graph Cards
   ============================================ */
.rate-graph {
  transform: translateZ(0);
  border-radius: var(--r-md) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform    0.26s var(--ease-out),
    box-shadow   0.26s var(--ease-out),
    border-color 0.26s var(--ease-out);
}
.rate-graph:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: var(--shadow-md), var(--shadow-accent);
}
.rate-graph.selected {
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-accent);
  border-color: var(--accent) !important;
}
.rate-graph svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 1.2s var(--ease-out) forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* ============================================
   Price Value Pulse
   ============================================ */
.price-value-pulse { animation: valuePulse 0.70s var(--ease-out); }
@keyframes valuePulse {
  0%   { transform: scale(1.12); color: var(--accent-bright); }
  55%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ============================================
   Trend / Volume
   ============================================ */
.trend-indicator { animation: trendBounce 1.6s ease-in-out infinite; }
@keyframes trendBounce {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-4px); }
}
.volume-bar { animation: volumePulse 2.8s ease-in-out infinite; }
@keyframes volumePulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

@keyframes alertSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Selection Highlight
   ============================================ */
.selected-graph-highlight { animation: highlightPulse 0.5s var(--ease-out); }
@keyframes highlightPulse {
  0%   { box-shadow: inset 0 0 0 0   rgba(255,157,40,0.5); }
  100% { box-shadow: inset 0 0 0 2px rgba(255,157,40,0.22); }
}

/* ============================================
   Modal
   ============================================ */
.zoomed-modal {
  animation: modalFadeIn 0.30s var(--ease-out);
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border-accent) !important;
  box-shadow: var(--shadow-lg), var(--shadow-accent) !important;
  background: var(--bg-elevated) !important;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-close-btn {
  cursor: pointer;
  opacity: 0.45;
  font-weight: 300;
  line-height: 1;
  transition: opacity 0.18s, transform 0.22s var(--ease-spring);
}
.modal-close-btn:hover { opacity: 1; transform: scale(1.18) rotate(90deg); }

/* ============================================
   Tooltip Content
   ============================================ */
.zoomed-graph-tooltip { z-index: 1000; }
.tooltip-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  min-width: 170px;
}
.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 9px;
}
.tooltip-row:last-child { margin-bottom: 0; }
.tooltip-label { font-family: var(--font-ui);   font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.tooltip-value { font-family: var(--font-data); font-size: 12px; font-weight: 600; color: var(--text-primary); }
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Data Flicker
   ============================================ */
@keyframes flickerGreen {
  0%   { background-color: rgba(16,185,129,0.25); }
  65%  { background-color: rgba(16,185,129,0.10); }
  100% { background-color: transparent; }
}
@keyframes flickerRed {
  0%   { background-color: rgba(239,68,68,0.25); }
  65%  { background-color: rgba(239,68,68,0.10); }
  100% { background-color: transparent; }
}
.flicker-green { animation: flickerGreen 400ms var(--ease-out) forwards; }
.flicker-red   { animation: flickerRed   400ms var(--ease-out) forwards; }

/* ============================================
   Thinking / Blink
   ============================================ */
@keyframes blink {
  0%, 20%  { opacity: 0; }
  40%, 60% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
.thinking-dots { animation: blink 1.5s infinite; }

/* ============================================
   Skeleton / Loading
   ============================================ */
@keyframes skeleton-loading {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
.skeleton-loading {
  animation: skeleton-loading 1.9s ease-in-out infinite;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
}

@keyframes data-highlight {
  0%   { background-color: rgba(255,157,40,0.22); border-radius: 4px; }
  100% { background-color: transparent; }
}
.data-highlight { animation: data-highlight 0.75s var(--ease-out); }

@keyframes loading-bar {
  0%   { width: 12%; }
  50%  { width: 82%; }
  100% { width: 12%; }
}
.loading-bar {
  animation: loading-bar 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--accent-muted), var(--accent), var(--accent-bright));
  border-radius: var(--r-pill);
}

.loading-state { position: relative; overflow: hidden; }
.loading-state::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,157,40,0.07), transparent);
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* ============================================
   Spin
   ============================================ */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================
   Stagger Delays
   ============================================ */
.stagger-delay-1 { animation-delay: 0.07s; animation-fill-mode: both; }
.stagger-delay-2 { animation-delay: 0.14s; animation-fill-mode: both; }
.stagger-delay-3 { animation-delay: 0.21s; animation-fill-mode: both; }
.stagger-delay-4 { animation-delay: 0.28s; animation-fill-mode: both; }
.stagger-delay-5 { animation-delay: 0.35s; animation-fill-mode: both; }
.stagger-delay-6 { animation-delay: 0.42s; animation-fill-mode: both; }
@media (max-width: 768px) {
  .stagger-delay-1, .stagger-delay-2, .stagger-delay-3,
  .stagger-delay-4, .stagger-delay-5, .stagger-delay-6 {
    animation-delay: 0s;
  }
}

/* ============================================
   AGintel Animations
   ============================================ */
@keyframes agintel-shake {
  0%, 100% { transform: translateX(0);   }
  20%       { transform: translateX(-9px); }
  40%       { transform: translateX(9px);  }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px);  }
}
.agintel-status-shake { animation: agintel-shake 0.5s var(--ease-out); }

.agintel-browser-window {
  border-radius: var(--r-lg);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.agintel-browser-window:hover {
  transform: translateY(-3px) scale(1.006);
  box-shadow: 0 12px 35px rgba(255,157,40,0.22);
}

@keyframes agintel-browser-loading {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.agintel-browser-loading {
  background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-elevated) 50%, var(--bg-secondary) 100%);
  background-size: 200% 100%;
  animation: agintel-browser-loading 1.9s ease-in-out infinite;
}

@keyframes agintel-fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.agintel-fadeInUp { animation: agintel-fadeInUp 0.52s var(--ease-out) both; }

@keyframes agintel-fadeInScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.agintel-fadeInScale { animation: agintel-fadeInScale 0.42s var(--ease-out) both; }

@keyframes agintel-countUp {
  from { opacity: 0; transform: scale(0.72); }
  55%  { transform: scale(1.07); }
  to   { opacity: 1; transform: scale(1); }
}
.agintel-countUp { animation: agintel-countUp 0.7s var(--ease-spring) both; }

@keyframes agintel-celebratePulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255,157,40,0.28); }
  50%       { box-shadow: 0 0 55px rgba(255,157,40,0.60), 0 0 90px rgba(255,157,40,0.16); }
}
.agintel-celebratePulse { animation: agintel-celebratePulse 2.2s ease-in-out infinite; }

@keyframes agintel-progressGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.45); }
  50%       { box-shadow: 0 0 24px rgba(16,185,129,0.85), 0 0 48px rgba(16,185,129,0.22); }
}
.agintel-progressGlow { animation: agintel-progressGlow 1.9s ease-in-out infinite; }

@keyframes agintel-buttonPulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0   rgba(255,157,40,0.65); }
  50%       { transform: scale(1.028); box-shadow: 0 0 0 11px rgba(255,157,40,0); }
}
.agintel-cta-pulse { animation: agintel-buttonPulse 2.3s ease-in-out infinite; }

@keyframes confetti-fall {
  0%   { transform: translateY(-100vh) rotate(0deg);   opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(100vh)  rotate(800deg); opacity: 0; }
}
.confetti-particle {
  position: absolute;
  width: 8px; height: 8px;
  animation: confetti-fall 4.5s cubic-bezier(0.2,0,0.8,1) forwards;
  pointer-events: none;
  border-radius: 2px;
}

.agintel-transition-wrapper { animation: agintel-fadeInScale 0.42s var(--ease-out) both; }

@keyframes agintel-loadingDot {
  0%, 20% { opacity: 0.22; transform: scale(0.72); }
  50%      { opacity: 1;    transform: scale(1.22); }
  100%     { opacity: 0.22; transform: scale(0.72); }
}
.agintel-loading-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: agintel-loadingDot 1.4s ease-in-out infinite;
}
.agintel-loading-dot:nth-child(1) { animation-delay: 0.00s; }
.agintel-loading-dot:nth-child(2) { animation-delay: 0.18s; }
.agintel-loading-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes agintel-slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.agintel-status-message { animation: agintel-slideDown 0.32s var(--ease-out); }

.agintel-drop-active {
  border: 2px dashed var(--green) !important;
  background: var(--green-dim) !important;
  transform: scale(1.02);
  transition: all 0.22s var(--ease-out);
}

/* ============================================
   Settings Page
   ============================================ */
.settings-page {
  padding: 32px 24px;
  max-width: 560px;
}
.settings-title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}
.settings-subtitle {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 32px 0;
}
.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.settings-section-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 16px 20px 10px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  transition: background 0.15s;
}
.settings-row:hover { background: rgba(255,157,40,0.03); }
.settings-row-label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-row-desc {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
  cursor: pointer;
}
.theme-option {
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: all 0.22s var(--ease-smooth);
  cursor: pointer;
  user-select: none;
}
.theme-option-active {
  background: var(--accent);
  color: #000;
  box-shadow: 0 2px 8px rgba(255,157,40,0.35);
}

/* ============================================
   Global Site-Wide Component Styles
   — Ensures all pages match settings page aesthetic
   ============================================ */

/* Page wrapper — consistent padding across all tab pages */
.page-wrapper {
  padding: 28px 24px;
  max-width: 1100px;
}

/* Page-level headings */
.page-title {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 28px 0;
}

/* Card — matches settings-card exactly */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.22s, box-shadow 0.22s;
}

.card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
}

/* Card section label — matches settings-section-title */
.card-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 16px 20px 10px;
}

/* Card row — matches settings-row */
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  transition: background 0.15s;
}

.card-row:hover {
  background: rgba(255, 157, 40, 0.028);
}

.card-row-label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.card-row-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Card body — padded content block */
.card-body {
  padding: 20px;
}

/* Form inputs — consistent across all pages */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-bloom) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

select option {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Generic button styling — catch-all for un-classed buttons */
button:not(.nav-tab):not(.legend-btn):not(.theme-option):not([class]) {
  font-family: var(--font-ui);
}

/* Table cells across pages */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}

th {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  transition: background 0.12s;
}

tr:hover td {
  background: rgba(255, 157, 40, 0.028);
}

/* h2/h3 headings within page content */
h2, h3 {
  font-family: var(--font-ui) !important;
  color: var(--text-primary) !important;
}

h4 {
  font-family: var(--font-ui) !important;
  color: var(--text-primary) !important;
}

/* Paragraph/body text */
p {
  font-family: var(--font-ui);
  color: var(--text-secondary);
}

/* ============================================
   Utility Classes
   ============================================ */
.data-mono {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.val-large {
  font-family: var(--font-data);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--text-primary);
}
.val-medium {
  font-family: var(--font-data);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.stat-block { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat-value {
  font-family: var(--font-data);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.012em;
}
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.section-header {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.chip-accent { background: var(--accent-dim); color: var(--accent-bright); border-color: rgba(255,157,40,0.22); }
.chip-ai     { background: var(--ai-dim);     color: var(--ai);           border-color: rgba(56,189,248,0.22); }
.chip-green  { background: var(--green-dim);  color: var(--green-bright); border-color: rgba(16,185,129,0.22); }
.chip-red    { background: var(--red-dim);    color: var(--red-bright);   border-color: rgba(239,68,68,0.22); }

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ai-dim);
  border: 1px solid var(--border-ai);
  color: var(--ai);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.progress-bar { height: 3px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 0.65s var(--ease-out);
}

.code-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.72;
  overflow-x: auto;
}

.chat-bubble-user {
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 85%;
  align-self: flex-end;
}
.chat-bubble-ai {
  background: var(--ai-dim);
  border: 1px solid var(--border-ai);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 95%;
  align-self: flex-start;
}

.num-accent { color: var(--accent);       font-family: var(--font-data); font-weight: 700; }
.num-green  { color: var(--green-bright); font-family: var(--font-data); font-weight: 700; }
.num-red    { color: var(--red-bright);   font-family: var(--font-data); font-weight: 700; }

/* Responsive */
@media (max-width: 768px) {
  .app-header  { padding: 0 12px; height: 46px; }
  .app-tabbar  { padding: 0 10px; height: 40px; }
  .nav-tab     { padding: 5px 10px; font-size: 10px; }
  .app-footer  { padding: 5px 12px; }
  .settings-page { padding: 20px 16px; }
}

/* ============================================
   File Library (v209)
   ============================================ */

/* Library wrapper */
.file-library {
  box-sizing: border-box;
}

/* Document card grid */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 36px;
}

/* Document card with stacked-paper effect */
.doc-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 10 / 13;
}

.doc-card::before,
.doc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  border-radius: 6px;
  z-index: -1;
  border: 1px solid var(--border);
}

.doc-card::before {
  transform: rotate(-2.5deg) translate(-3px, 3px);
  background: var(--bg-secondary);
}

.doc-card::after {
  transform: rotate(-1.2deg) translate(-1.5px, 1.5px);
  background: var(--bg-elevated);
}

.doc-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  z-index: 1;
}

/* PDF selectable text layer (OCR overlay) */
.pdf-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  line-height: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.pdf-text-layer span,
.pdf-text-layer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  pointer-events: all;
  user-select: text;
  -webkit-user-select: text;
}
.pdf-text-layer span::selection {
  background-color: rgba(0, 120, 255, 0.25);
  color: transparent;
}

/* PDF Viewer overlay */
.pdf-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.pdf-viewer-sidebar {
  flex-shrink: 0;
}


/* USB badge */
.usb-badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #000;
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
}

/* Responsive grid adjustments */
@media (max-width: 1024px) {
  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .file-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  DAILY BRIEFING TAB                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Animations */
@keyframes briefingAIPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 7px #A78BFA; }
  50%       { opacity: 0.3; box-shadow: 0 0 2px #A78BFA; }
}
@keyframes briefingRateFlash {
  0%   { background-color: var(--bg-card); }
  18%  { background-color: #10B98114; }
  100% { background-color: var(--bg-card); }
}
@keyframes briefingSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes briefingShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes briefingTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes briefingWave {
  from { transform: scaleY(0.15); }
  to   { transform: scaleY(1.1); }
}
@keyframes briefingSpinAnim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Date heading */
.briefing-date-heading {
  margin: 0;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  animation: briefingSlideIn 0.4s ease both;
}

/* Base widget card */
.briefing-widget {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}

/* Clickable widget — hover glow */
.briefing-widget-clickable {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.briefing-widget-clickable:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), var(--shadow-sm);
}
.briefing-rate-card.briefing-widget-clickable:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

/* Widget label */
.briefing-widget-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

/* Small pill tags */
.briefing-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Rate card */
.briefing-rate-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color 0.3s;
}
.briefing-rate-flash {
  animation: briefingRateFlash 0.65s ease;
}

/* Skeleton */
.briefing-skeleton-wrap { padding: 0; }
.briefing-skel {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);
  background-size: 400px 100%;
  animation: briefingShimmer 1.4s infinite linear;
}
.briefing-skel-date  { height: 34px; width: 58%; max-width: 460px; margin-bottom: 10px; }
.briefing-skel-sub   { height: 14px; width: 36%; max-width: 260px; }
.briefing-skel-card  { height: 86px; flex: 1 1 140px; min-width: 130px; }
.briefing-skel-gauge { height: 180px; width: 220px; flex-shrink: 0; }
.briefing-skel-block { height: 180px; flex: 1 1 260px; }

/* Header */
.briefing-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  animation: briefingSlideIn 0.35s ease both;
}

/* Headline hover */
.briefing-headline-link:hover { opacity: 0.8; }
.briefing-headline-link:hover > div > div:first-child { text-decoration: underline; }

/* Spinner for podcast load state */
.briefing-spin {
  width: 18px;
  height: 18px;
  border: 2px solid #A78BFA44;
  border-top-color: #A78BFA;
  border-radius: 50%;
  animation: briefingSpinAnim 0.7s linear infinite;
}

/* Mobile */
@media (max-width: 768px) {
  .briefing-date-heading { font-size: 20px; }
  .briefing-widget { padding: 12px 14px; }
}

/* ============================================
   MOBILE RESPONSIVE — kbMBS v2
   All breakpoints target mobile only.
   Desktop layout is completely unchanged.
   ============================================ */

@media (max-width: 768px) {

  /* ── Shell ── */
  body { -webkit-text-size-adjust: 100%; }

  /* Prevent iOS font-size zoom on inputs */
  input, select, textarea, button { font-size: 16px; }
  input[type="number"] { font-size: 16px; }

  /* Header: tighter on mobile */
  .app-header { padding: 0 12px; height: 46px; }
  .app-logo   { font-size: 15px; }

  /* Tab bar: slightly shorter, touch-friendly */
  .app-tabbar { padding: 0 8px; height: 38px; }
  .nav-tab    { padding: 4px 9px; font-size: 10px; min-height: 30px; }

  /* ── Common layout utilities ── */
  /* Any flex row that should stack on mobile */
  .mob-stack { flex-direction: column !important; }
  .mob-full  { width: 100% !important; max-width: 100% !important; flex: 1 !important; }
  .mob-hide  { display: none !important; }
  .mob-p0    { padding: 0 !important; }
  .mob-p8    { padding: 8px !important; }

  /* ── Glass cards ── */
  .glass-card { padding: 14px 12px; }

  /* ── Buttons: minimum tap target ── */
  button:not(.nav-tab) { min-height: 36px; }

  /* ── Settings page ── */
  .settings-page { padding: 16px 12px; }

  /* ── File library grid ── */
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }

  /* ── Briefing article layout ── */
  .bf-article { padding: 0 12px 40px; }
  .bf-masthead { padding: 16px 0 14px; }
  .bf-masthead-date { font-size: 18px !important; }
  .bf-body    { flex-direction: column-reverse !important; gap: 0 !important; }
  .bf-sidebar { width: 100% !important; position: static !important; display: flex; flex-wrap: wrap; gap: 0 24px; }
  .bf-widget  { flex: 1 1 160px; }
  .bf-widget:first-child { padding-top: 14px; }
  .bf-news-grid { grid-template-columns: 1fr !important; }
  .bf-rates-bar { flex-wrap: nowrap; overflow-x: auto; }
  .bf-rate-item { min-width: 80px; padding: 8px 10px 7px; }
  .bf-rate-val  { font-size: 14px; }
  .bf-outlook-strip { grid-template-columns: 1fr 1fr 1fr; }

  /* ── Chat / loGPT ── */
  .chat-bubble-user { max-width: 92%; }
  .chat-bubble-ai   { max-width: 100%; }

  /* ── Tables: horizontal scroll wrapper ── */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  table { min-width: 480px; }

  /* ── Modals: slide up from bottom on mobile ── */
  /* Generic modal overlay */
  [style*="position: fixed"][style*="inset: 0"],
  [style*="position:fixed"][style*="inset:0"] {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  /* ── Home tab cards ── */
  .home-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── Admin table rows ── */
  .admin-table-row { flex-wrap: wrap; }

  /* ── Calculator / amortization ── */
  .calc-grid { grid-template-columns: 1fr !important; }
  .calc-result-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Marketing email preview ── */
  .marketing-preview { max-width: 100% !important; }

  /* ── News feed cards ── */
  .news-card-grid { grid-template-columns: 1fr !important; }

  /* ── PDF tools panels ── */
  .pdf-panel { flex-direction: column !important; }
  .pdf-preview { min-height: 200px; }

  /* ── Converter tool ── */
  .converter-row { flex-direction: column !important; gap: 8px !important; }

  /* ── Treasury / charts ── */
  .treasury-grid { grid-template-columns: 1fr !important; }

  /* ── Agent signup / LO signup forms ── */
  .signup-two-col { grid-template-columns: 1fr !important; }
  .signup-card    { padding: 20px 16px !important; }

  /* ── AGintel ── */
  .agintel-panels { flex-direction: column !important; }
  .agintel-panel  { width: 100% !important; max-width: 100% !important; }

  /* ── Fed page ── */
  .fed-grid { grid-template-columns: 1fr !important; }

  /* ── Channel ── */
  .channel-layout { flex-direction: column !important; }
}

@media (max-width: 480px) {
  /* Extra small phones */
  .app-header  { height: 42px; }
  .app-tabbar  { height: 36px; }
  .nav-tab     { padding: 3px 8px; font-size: 9px; }

  .bf-article  { padding: 0 8px 32px; }
  .bf-masthead-date { font-size: 16px !important; }
  .bf-rate-item { min-width: 70px; padding: 6px 8px 5px; }
  .bf-rate-val  { font-size: 13px; }

  .glass-card  { padding: 12px 10px; }

  /* Stack badges/pills on very small screens */
  .pill-row { flex-wrap: wrap !important; gap: 4px !important; }

  /* Full-width buttons on very small screens */
  .btn-full-mobile { width: 100% !important; }
}