/* ═══════════════════════════════════════════
   QUANTISIQ — Shared Design System
   One file. Change here = updates everywhere.
   ═══════════════════════════════════════════ */

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

/* ── DESIGN TOKENS ── */
:root {
  /* FONTS */
  --font-d: 'Space Grotesk', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --font-m: 'JetBrains Mono', monospace;

  /* FONT SIZES — change these to resize everything */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;

  /* SPACING */
  --sp-xs:  6px;
  --sp-sm:  10px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  36px;

  /* DARK THEME COLORS (default) */
  --bg:       #0d0c0b;
  --bg2:      #030010;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.14);
  --accent:   #c67139;
  --accent2:  #7a8a5e;
  --text:     #eee7db;
  --muted:    rgba(238,231,219,0.60);
  --muted2:   rgba(238,231,219,0.35);
  --green:    #00e5a0;
  --red:      #ff4757;
  --amber:    #ffb800;
  --purple:   #a78bfa;
  --cyan:     #06b6d4;

  /* RADIUS */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  999px;
}

/* ── LIGHT THEME ── */
:root.light {
  --bg:       #f5ead8;
  --bg2:      #ede0c8;
  --surface:  rgba(255,255,255,0.60);
  --surface2: rgba(255,255,255,0.85);
  --border:   rgba(0,0,0,0.09);
  --border2:  rgba(0,0,0,0.16);
  --accent:   #b5612f;
  --text:     #201e1d;
  --muted:    #3d3530;
  --muted2:   #5a4f48;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--fs-base); }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

/* ── SHARED TOPBAR ── */
.q-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  padding: 0 var(--sp-lg);
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}
.q-logo {
  font-family: var(--font-d);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}
.q-logo span { color: var(--accent2); }
.q-nav { display: flex; align-items: center; gap: var(--sp-sm); }
.q-nav-link {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--muted);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: all .2s;
  font-family: var(--font-b);
}
.q-nav-link:hover { color: var(--text); border-color: var(--border2); }
.q-nav-link.active { color: var(--accent); border-color: var(--accent); }

/* ── ROLE PILLS ── */
.q-pill {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  padding: 3px 12px;
  border-radius: var(--r-xl);
  font-weight: 600;
}
.q-pill-super  { background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.3); color: #ffd700; }
.q-pill-admin  { background: rgba(198,113,57,.1); border: 1px solid rgba(198,113,57,.3); color: var(--accent); }
.q-pill-client { background: rgba(122,138,94,.1); border: 1px solid rgba(122,138,94,.3); color: var(--accent2); }

/* ── SHARED PAGE WRAPPER ── */
.q-page { max-width: 1100px; margin: 0 auto; padding: var(--sp-lg) var(--sp-md) var(--sp-xl); }

/* ── SECTION HEADING ── */
.q-sh {
  font-family: var(--font-m);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  margin: var(--sp-lg) 0 var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--border);
}

/* ── CARDS ── */
.q-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  transition: border-color .2s;
}
.q-card:hover { border-color: var(--border2); }
.q-card-accent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  position: relative;
  overflow: hidden;
}
.q-card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ── MOOD GRID ── */
.q-mood-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
@media(max-width:600px) { .q-mood-grid { grid-template-columns: repeat(3,1fr); } }
.q-mood-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-sm);
  text-align: center;
}
.q-mood-label {
  font-family: var(--font-m);
  font-size: var(--fs-xs);
  color: var(--muted2);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
}
.q-mood-val {
  font-family: var(--font-d);
  font-size: var(--fs-md);
  font-weight: 700;
}
.q-mood-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 3px;
  font-family: var(--font-m);
}

/* ── INTEL CARD ROWS ── */
.q-intel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md); }
.q-intel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border);
  gap: var(--sp-sm);
}
.q-intel-row:last-child { border-bottom: none; }
.q-intel-label { font-family: var(--font-m); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; flex-shrink: 0; }
.q-intel-val { font-family: var(--font-d); font-size: var(--fs-sm); font-weight: 700; text-align: right; }

/* ── OPPORTUNITY CARDS ── */
.q-opp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
  cursor: pointer;
  transition: border-color .2s;
}
.q-opp:hover { border-color: var(--border2); }
.q-opp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-sm); }
.q-opp-sym { font-family: var(--font-d); font-size: var(--fs-lg); font-weight: 700; letter-spacing: .06em; }
.q-opp-score { font-family: var(--font-d); font-size: var(--fs-2xl); font-weight: 700; margin-right: var(--sp-sm); }
.q-opp-badge {
  font-family: var(--font-m);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 14px;
  border-radius: var(--r-xl);
}
.q-opp-reason { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }

/* ── BUTTONS ── */
.q-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 10px 22px;
  border-radius: var(--r-xl);
  font-family: var(--font-b);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  border: none;
}
.q-btn-primary { background: var(--accent); color: #0d0c0b; }
.q-btn-primary:hover { background: #b5612f; transform: translateY(-1px); }
.q-btn-outline { background: transparent; border: 1px solid var(--border2); color: var(--muted); }
.q-btn-outline:hover { color: var(--text); border-color: var(--accent); }

/* ── FORM ELEMENTS ── */
.q-form-group { margin-bottom: var(--sp-md); }
.q-label {
  display: block;
  font-family: var(--font-m);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--muted2);
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
}
.q-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  color: var(--text);
  font-size: var(--fs-md);
  font-family: var(--font-b);
  outline: none;
  transition: border-color .2s, background .2s;
}
.q-input:focus { border-color: var(--accent); background: rgba(198,113,57,.03); }
.q-input::placeholder { color: var(--muted2); }

/* ── BADGES ── */
.q-badge {
  display: inline-block;
  font-family: var(--font-m);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: var(--r-xl);
}
.q-badge-green  { background: rgba(0,229,160,.1);  border: 1px solid rgba(0,229,160,.3);  color: var(--green); }
.q-badge-red    { background: rgba(255,71,87,.1);   border: 1px solid rgba(255,71,87,.3);   color: var(--red); }
.q-badge-amber  { background: rgba(255,184,0,.1);   border: 1px solid rgba(255,184,0,.3);   color: var(--amber); }
.q-badge-purple { background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.3); color: var(--purple); }
.q-badge-accent { background: rgba(198,113,57,.1);  border: 1px solid rgba(198,113,57,.3);  color: var(--accent); }

/* ── SECTOR BARS ── */
.q-sector-row { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm); }
.q-sector-name { font-size: var(--fs-sm); color: var(--text); width: 130px; flex-shrink: 0; }
.q-sector-track { flex: 1; height: 8px; background: var(--border); border-radius: var(--r-xl); overflow: hidden; }
.q-sector-fill { height: 8px; border-radius: var(--r-xl); }
.q-sector-label { font-family: var(--font-m); font-size: var(--fs-xs); font-weight: 700; width: 70px; text-align: right; flex-shrink: 0; }

/* ── INST ACTIVITY ── */
.q-inst-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-xs);
}
.q-inst-sym { font-family: var(--font-d); font-size: var(--fs-md); font-weight: 700; }
.q-inst-detail { font-size: var(--fs-sm); color: var(--purple); margin-top: 2px; }
.q-inst-ratio { font-family: var(--font-d); font-size: var(--fs-md); font-weight: 700; color: var(--purple); }

/* ── DISCLAIMER ── */
.q-disclaimer {
  font-size: var(--fs-xs);
  color: var(--muted2);
  text-align: center;
  margin-top: var(--sp-xl);
  line-height: 1.7;
  letter-spacing: .04em;
}

/* ── THEME TOGGLE BUTTON ── */
.q-theme-toggle {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 7px 16px;
  cursor: pointer;
  font-family: var(--font-b);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  transition: all .2s;
}
.q-theme-toggle:hover { color: var(--text); border-color: var(--accent); }

/* ── GREETING BAR ── */
.q-greeting {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-md) var(--sp-lg);
}
.q-greeting-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.q-greeting h1 {
  font-family: var(--font-d);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
}
.q-greeting h1 em { color: var(--green); font-style: normal; }
.q-greeting p { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }

/* ── TRIAL BANNER ── */
.q-trial {
  background: rgba(255,184,0,.08);
  border: 1px solid rgba(255,184,0,.2);
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-size: var(--fs-sm);
  color: var(--amber);
}

/* ── GRID LAYOUTS ── */
.q-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
@media(max-width:700px) { .q-grid2 { grid-template-columns: 1fr; } }

/* ── BIAS BANNER ── */
.q-bias {
  background: rgba(0,229,160,.05);
  border: 1px solid rgba(0,229,160,.15);
  border-radius: var(--r-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--green);
  margin-bottom: var(--sp-md);
  line-height: 1.6;
}

/* ── LOCK OVERLAY ── */
.q-lock {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: var(--sp-md);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-sm);
}

/* ── UPGRADE BOX ── */
.q-upgrade {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: var(--sp-lg);
  text-align: center;
  margin-top: var(--sp-md);
}
.q-upgrade h3 { font-family: var(--font-d); font-size: var(--fs-lg); color: var(--text); margin-bottom: var(--sp-xs); }
.q-upgrade p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-md); }

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

/* ── RESPONSIVE ── */
@media(max-width:480px) {
  .q-topbar { padding: 0 var(--sp-sm); }
  .q-page { padding: var(--sp-sm); }
}