/* Market Study — base.css */

/* ════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════ */
:root{
  --bg:#EEF1FA; --card:#fff; --ink:#0F172A; --ink2:#334155;
  --muted:#64748B; --faint:#94A3B8; --line:#E2E8F5; --line2:#F1F4FB;
  --brand:#4338CA; --brand2:#7C3AED;
  --bull:#16A34A; --bull-bg:#DCFCE7; --bull-line:#22C55E;
  --bear:#DC2626; --bear-bg:#FEE2E2; --bear-line:#EF4444;
  --warn:#D97706; --warn-bg:#FEF3C7;
  --teal:#0D9488; --sky:#0EA5E9; --amber:#F59E0B;
  --sh: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.07);
  --sh-lg: 0 20px 60px rgba(48,40,120,.18);
  --sh-xl: 0 32px 80px rgba(48,40,120,.24);
  --r:16px; --r2:12px;
  --dp:'Plus Jakarta Sans',sans-serif;
  --bd:'Inter',sans-serif;
  --nm:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--bd);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:var(--bd)}

/* ════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:72px 1fr;height:100vh;overflow:hidden}
.main{overflow-y:auto;display:flex;flex-direction:column}

/* ── SIDEBAR ── */
.sidebar{
  background:linear-gradient(180deg,#1E1B4B 0%,#2D2678 60%,#3730A3 100%);
  display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;z-index:20;
  box-shadow:4px 0 24px rgba(48,40,120,.25);
}
.sidebar .logo{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.1));
  border:1.5px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:#fff;font-size:20px;
  margin-bottom:12px;box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.nav-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:16px;color:rgba(255,255,255,.45);cursor:pointer;transition:.2s;position:relative;
}
.nav-ico:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.9)}
.nav-ico.active{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.nav-ico.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:22px;background:linear-gradient(#A5B4FC,#818CF8);
  border-radius:0 3px 3px 0;
}
.nav-ico .tip{
  position:absolute;left:60px;background:#1E1B4B;color:#fff;
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:99;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.nav-ico:hover .tip{opacity:1;left:56px}
.nav-divider{width:28px;height:1px;background:rgba(255,255,255,.1);margin:8px 0}
.nav-ico.mt{margin-top:auto}

/* ── TOP BAR ── */
.topbar{
  background:#fff;border-bottom:1px solid var(--line);
  padding:0 28px;height:60px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:10;
}
.topbar .tabs{display:flex;gap:2px;flex:1;overflow-x:auto}
.tab{
  font-family:var(--dp);font-weight:600;font-size:13px;padding:7px 14px;
  border-radius:9px;cursor:pointer;color:var(--muted);transition:.15s;
  border:none;background:transparent;white-space:nowrap;display:flex;align-items:center;gap:6px;
}
.tab:hover{color:var(--ink);background:#F5F6FB}
.tab.active{color:var(--brand);background:#EEF0FF}

/* Distinct colour per tab (icon + text) for quick visual scanning */
.tab[data-page="overview"]   i{color:#4338CA}
.tab[data-page="analytics"]  i{color:#7C3AED}
.tab[data-page="strikezone"] i{color:#0D9488}
.tab[data-page="market"]     i{color:#0EA5E9}
.tab[data-page="reputation"] i{color:#F59E0B}
.tab[data-page="reviews"]    i{color:#EC4899}
.tab[data-page="overview"]:hover,   .tab[data-page="overview"].active   {color:#4338CA;background:#EEF0FF}
.tab[data-page="analytics"]:hover,  .tab[data-page="analytics"].active  {color:#7C3AED;background:#F3EEFE}
.tab[data-page="strikezone"]:hover, .tab[data-page="strikezone"].active {color:#0D9488;background:#E7F8F4}
.tab[data-page="market"]:hover,     .tab[data-page="market"].active     {color:#0284C7;background:#E5F4FD}
.tab[data-page="reputation"]:hover, .tab[data-page="reputation"].active {color:#D97706;background:#FEF6E7}
.tab[data-page="reviews"]:hover,    .tab[data-page="reviews"].active    {color:#DB2777;background:#FDEEF6}
/* keep coloured icons even on hover/active */
.tab.active[data-page="overview"]   i,.tab[data-page="overview"]:hover i{color:#4338CA}
.tab.active[data-page="analytics"]  i,.tab[data-page="analytics"]:hover i{color:#7C3AED}
.tab.active[data-page="strikezone"] i,.tab[data-page="strikezone"]:hover i{color:#0D9488}
.tab.active[data-page="market"]     i,.tab[data-page="market"]:hover i{color:#0284C7}
.tab.active[data-page="reputation"] i,.tab[data-page="reputation"]:hover i{color:#D97706}
.tab.active[data-page="reviews"]    i,.tab[data-page="reviews"]:hover i{color:#DB2777}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.clock-pill{
  font-family:var(--nm);font-size:12.5px;font-weight:600;color:var(--ink2);
  background:#F5F6FB;padding:6px 12px;border-radius:8px;border:1px solid var(--line);
  display:flex;align-items:center;gap:6px;
}
.clock-pill i{color:var(--brand2);font-size:11px}
.tbtn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:13px;color:var(--ink2);transition:.15s;
}
.tbtn:hover{background:#F5F6FB}
.tbtn.primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;border:none;box-shadow:0 6px 16px rgba(99,72,222,.35);
}
.user-chip{
  display:flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;
  border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:13px;font-weight:600;cursor:pointer;transition:.15s;
}
.user-chip:hover{background:#F5F6FB}
.avatar{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;
}

/* ════════════════════════════════════════════
   PAGES
════════════════════════════════════════════ */
.page{display:none;padding:22px 26px 48px;animation:fadeUp .32s cubic-bezier(.2,.8,.2,1) both}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(16,24,40,.11)}

/* ════════════════════════════════════════════
   GRIDS
════════════════════════════════════════════ */
.g3{display:grid;grid-template-columns:1.1fr 1.6fr 1fr;gap:18px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g2l{display:grid;grid-template-columns:1.7fr 1fr;gap:18px}
.g3e{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mb18{margin-bottom:18px}