/* =============================================================================
   THEME TOKENS
   ========================================================================== */
:root{
  /* palette */
  --bg-base:        #060e1e;
  --bg-base-darker: #040a16;
  --bg-noise:       rgba(255,255,255,.045);
  --bg-navy-700:    #001E37;
  --bg-navy-800:    #012E31;
  --bg-navy-900:    #031625;

  /* Primary brand gradient (teal spectrum) */
  --brand-teal:     #00D3BD;
  --brand-teal-600: #00AD84;
  --brand-teal-bright: #00F5D4;
  --brand-cyan:     #00B4D8;
  --brand-green:    #09b05c;
  --brand-red:      #e74c3c;

  /* Gradient definitions */
  --gradient-primary: linear-gradient(135deg, #00D3BD 0%, #00AD84 100%);
  --gradient-accent: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(0,211,189,0.15) 0%, rgba(0,173,132,0.05) 100%);
  --gradient-glow: linear-gradient(135deg, rgba(0,245,212,0.2) 0%, rgba(0,211,189,0.1) 50%, transparent 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-border: linear-gradient(135deg, rgba(0,211,189,0.4) 0%, rgba(0,173,132,0.2) 50%, rgba(0,211,189,0.1) 100%);

  --ink-100:        #ffffff;
  --ink-80:         #e8ffe9;
  --ink-60:         #b4d7c4;
  --ink-40:         #B6F3FE;
  --ink-muted:      #97b2d4;
  --ink-20:         #999;

  --border-1:       #11394A;
  --divider-1:      #033B3F;

  /* radii & shadows */
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      24px;

  --shadow-1:       0 8px 22px rgba(0,0,0,.30);
  --shadow-2:       0 4px 20px rgba(0,211,189,0.1), 0 8px 32px rgba(0,0,0,0.3);
  --shadow-glow:    0 0 20px rgba(0,211,189,0.15), 0 0 40px rgba(0,211,189,0.05);
  --shadow-inset-1: inset 0 0 0 1px rgba(255,255,255,.06);

  /* component tokens */
  --chip-height:    36px;
  --btn-height:     40px;

  /* chart */
  --avg-line-color:     #ff0000;
  --movable-line-color: #00ff00;

  /* icon glow */
  --neon:       #14e5a3;
  --neon-soft:  #14e5a37a;
}

/* =============================================================================
   GLOBAL RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; max-width:100%;
  overflow-x:hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;

  /* Clean solid background - professional deep navy */
  background: var(--bg-base);
}

body{
  font-family: "Avenir", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: var(--ink-80);
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}

/* Subtle gradient accent at top of page */
body::before{
  content:"";
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,211,189,0.03) 0%, transparent 100%);
  z-index: 0;
}

/* =============================================================================
   LOADER
   ========================================================================== */
#loading-animation{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  background: var(--bg-navy-900);
}
.loader-wrapper{
  display:flex; flex-direction:column; align-items:center;
}
.bouncing-spheres{
  display: flex;
  gap: 14px;
}
.sphere{
  width: 24px;
  height: 24px;
  background: var(--brand-teal);
  border-radius: 50%;
  animation: bounce 0.75s ease-in-out infinite;
}
.sphere:nth-child(2){ animation-delay: 0.12s; }
.sphere:nth-child(3){ animation-delay: 0.24s; }
@keyframes bounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-20px); }
}

/* =============================================================================
   LAYOUT SHELL
  ============================================================================== */
.main-content{ display:flex; flex-wrap:nowrap; margin-top:10px; }
#content-section{ flex:1; display:flex; flex-direction:column; }

/* Hide until populated */
#search-results,#search-results-table,#sidebar{ display:none; }


/* =============================================================================
   THEME DROPDOWN (hidden by default)
   ========================================================================== */
#theme-dropdown{ display:none; }