/* ============================================================
   ClearShot — Shared Design System
   clearshot.css
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --font-primary: 'Plus Jakarta Sans', -apple-system, sans-serif;

  --color-bg:            #f8f7ff;
  --color-primary:       #6F56D8;
  --color-primary-light: #E8E5FA;
  --color-primary-muted: rgba(111, 86, 216, 0.08);

  --color-dark:         #1a1a2e;
  --color-text:         #444;
  --color-text-muted:   #9990c4;

  --color-border-glass: rgba(255, 255, 255, 0.85);
  --color-card-glass:   rgba(255, 255, 255, 0.55);

  --shadow-glass: 0 4px 24px rgba(111, 86, 216, 0.08);
  --shadow-card:  0 4px 32px rgba(111, 86, 216, 0.07);

  --radius-card: 14px;
  --radius-pill: 20px;

  --grade-a: #1D9E75;
  --grade-b: #3EC9A7;
  --grade-c: #EF9F27;
  --grade-d: #F07030;
  --grade-f: #E24B4A;
}

/* ── BASE ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-primary);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── NAV ────────────────────────────────────────────────────── */
.cs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
}

.cs-nav-logo {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
}


.cs-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-nav-pill {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
}

.cs-nav-pill.primary {
  background: var(--color-primary);
  color: #fff;
}

.cs-nav-pill.ghost {
  background: var(--color-primary-muted);
  color: var(--color-primary);
}

.cs-nav-pill:hover {
  opacity: 0.85;
}

/* ── GLASS CARD ─────────────────────────────────────────────── */
.glass-card {
  background: var(--color-card-glass);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
}

/* ── STAT CARD ──────────────────────────────────────────────── */
.stat-card {
  background: var(--color-card-glass);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.1;
}

.stat-card-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── GRADE BADGE ────────────────────────────────────────────── */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  line-height: 1;
}

.grade-badge.a { background: rgba(29,158,117,0.12); color: var(--grade-a); }
.grade-badge.b { background: rgba(62,201,167,0.12); color: var(--grade-b); }
.grade-badge.c { background: rgba(239,159,39,0.12); color: var(--grade-c); }
.grade-badge.d { background: rgba(240,112,48,0.12); color: var(--grade-d); }
.grade-badge.f { background: rgba(226,75,74,0.12);  color: var(--grade-f); }

/* ── SOURCE BADGE ───────────────────────────────────────────── */
.src-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  white-space: nowrap;
}

/* ── STATUS PILL ────────────────────────────────────────────── */
.status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(0,0,0,0.05);
  color: #888;
  white-space: nowrap;
}

.status-pill.applied      { background: rgba(111,86,216,0.10); color: var(--color-primary); }
.status-pill.interviewing { background: rgba(62,201,167,0.12); color: #1a9e7d; }
.status-pill.offer        { background: rgba(29,158,117,0.12); color: var(--grade-a); }
.status-pill.rejected     { background: rgba(226,75,74,0.10); color: var(--grade-f); }

/* ── ORB SCENE ──────────────────────────────────────────────── */
.orb-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.45;
}

.orb-purple {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, #a78bfa, #6F56D8);
  top: -180px;
  right: -80px;
  opacity: 0.35;
}

.orb-peach {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #fca5a5, #f87171);
  top: -60px;
  right: 240px;
  opacity: 0.22;
}

.orb-blue {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, #93c5fd, #60a5fa);
  bottom: 80px;
  left: -60px;
  opacity: 0.2;
}