/* ============================================================
   Citation Gap AI — Design System (Sorontar Tools)
   Ported from the Claude Design handoff bundle. Dark, cool
   "AI coding tool" aesthetic: slate-black surfaces, violet→indigo
   brand, azure/cyan data accents.
   Single stylesheet: tokens + base + components.
   ============================================================ */

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

:root {
  /* ---- Neutral ramp (cool slate) ---- */
  --slate-1000:#070A10; --slate-950:#0A0D14; --slate-900:#10141E; --slate-850:#141925;
  --slate-800:#161B27; --slate-750:#1D2433; --slate-700:#28303F; --slate-600:#3A4252;
  --slate-500:#4E5868; --slate-400:#6B7488; --slate-300:#8A92A4; --slate-200:#A9B2C4;
  --slate-100:#CDD3DF; --slate-50:#EDF0F6; --white:#FFFFFF; --warm-white:#F3F0E9;

  /* ---- Brand: Sorontar violet ---- */
  --violet-900:#2C0E73; --violet-800:#3A12B0; --violet-700:#5A1ECF; --violet-600:#7117E8;
  --violet-500:#8B5CF6; --violet-400:#A483FF; --violet-300:#C4AEFF;
  --violet-tint:rgba(139,92,246,0.15); --violet-glow:rgba(123,60,230,0.55);
  --brand-grad-from:#7A10E5; --brand-grad-to:#1914B1;
  --brand-gradient:linear-gradient(135deg,var(--brand-grad-from) 0%,var(--brand-grad-to) 100%);

  /* ---- Secondary accents ---- */
  --azure-700:#2E6BE0; --azure-600:#3D7DF0; --azure-500:#5B9CFF; --azure-400:#7AB0FF;
  --azure-300:#A6CCFF; --azure-tint:rgba(91,156,255,0.14);
  --cyan-500:#3FD9C8; --cyan-400:#66E4D6; --cyan-tint:rgba(63,217,200,0.14);

  /* ---- Semantic ---- */
  --success-500:#3FD17E; --success-tint:rgba(63,209,126,0.14);
  --warning-500:#F5B544; --warning-tint:rgba(245,181,68,0.14);
  --danger-500:#FF6B6B;  --danger-tint:rgba(255,107,107,0.14);
  --info-500:#5B9CFF;    --info-tint:var(--azure-tint);

  /* ---- Severity / priority / bands ---- */
  --sev-critical:#FF6B6B; --sev-high:#FF9F45; --sev-medium:#F5C84B; --sev-low:#8A92A4;
  --prio-p0:#FF6B6B; --prio-p1:#FF9F45; --prio-p2:#F5C84B; --prio-p3:#8A92A4;
  --band-low:#FF6B6B; --band-partial:#F5B544; --band-good:#9BD64F; --band-high:#3FD17E;

  /* ---- Aliases ---- */
  --bg-app:var(--slate-950); --bg-sunken:var(--slate-1000);
  --surface-card:var(--slate-900); --surface-raised:var(--slate-800);
  --surface-hover:var(--slate-750); --surface-inset:var(--slate-1000);
  --text-primary:var(--slate-50); --text-secondary:var(--slate-200);
  --text-tertiary:var(--slate-400); --text-disabled:var(--slate-500);
  --text-on-accent:#FFFFFF; --text-link:var(--violet-300);
  --border-subtle:rgba(255,255,255,0.06); --border-default:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.16); --border-accent:var(--violet-500);
  --accent:var(--violet-500); --accent-hover:var(--violet-400); --accent-active:var(--violet-600);
  --accent-wash:var(--violet-tint); --ring:rgba(139,92,246,0.55);

  /* ---- Typography ---- */
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px;
  --text-lg:18px; --text-xl:22px; --text-2xl:28px; --text-3xl:36px; --text-4xl:48px;
  --leading-tight:1.12; --leading-snug:1.28; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.015em; --tracking-caps:0.08em;

  /* ---- Spacing / layout ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --container-max:1200px; --header-height:60px;

  /* ---- Effects ---- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --radius-2xl:20px; --radius-full:999px;
  --shadow-sm:0 2px 6px rgba(0,0,0,0.40); --shadow-md:0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.55);
  --highlight-top:inset 0 1px 0 rgba(255,255,255,0.05);
  --elevation-card:var(--highlight-top),var(--shadow-sm);
  --elevation-raised:var(--highlight-top),var(--shadow-md);
  --elevation-overlay:var(--highlight-top),var(--shadow-lg);
  --glow-soft:0 0 32px -8px var(--violet-glow);
  --ring-focus:0 0 0 2px var(--bg-app),0 0 0 4px var(--ring);
  --blur-md:16px;
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
  --grid-line:rgba(255,255,255,0.025);
}

/* ============================ Base ============================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg-app); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal);
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.cg-grid-bg{
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px; background-position:center top;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight); color:var(--text-primary); margin:0; }
h1{ font-size:var(--text-2xl); } h2{ font-size:var(--text-xl); } h3{ font-size:var(--text-lg); }
p{ margin:0; }
a{ color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); }
a:hover{ color:var(--azure-300); }
code,kbd,samp,pre{ font-family:var(--font-mono); font-size:0.92em; }
code{ background:var(--surface-inset); border:1px solid var(--border-subtle); color:var(--azure-300);
  padding:0.08em 0.4em; border-radius:var(--radius-sm); }
::selection{ background:var(--azure-tint); color:var(--text-primary); }
*{ scrollbar-width:thin; scrollbar-color:var(--slate-700) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--slate-700); border-radius:var(--radius-full);
  border:2px solid transparent; background-clip:content-box; }
.cg-tnum{ font-variant-numeric:tabular-nums; }
.cg-mono{ font-family:var(--font-mono); }

/* ============================ Layout shell ============================ */
.cg-appbar{
  height:var(--header-height); display:flex; align-items:center; gap:16px;
  padding:0 24px; border-bottom:1px solid var(--border-subtle);
  background:color-mix(in srgb,var(--bg-app) 80%,transparent);
  backdrop-filter:blur(var(--blur-md)); position:sticky; top:0; z-index:20;
}
.cg-appbar__nav{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:14px; }
.cg-appbar__nav a{ color:var(--text-tertiary); padding:7px 11px; border-radius:var(--radius-md);
  font-weight:500; transition:all var(--dur-fast) var(--ease-out); }
.cg-appbar__nav a:hover{ color:var(--text-primary); background:var(--surface-hover); }
.cg-container{ max-width:var(--container-max); margin:0 auto; padding:24px; }
.cg-container--narrow{ max-width:1080px; }
.cg-footer{ max-width:var(--container-max); margin:0 auto; padding:40px 24px;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-tertiary);
  border-top:1px solid var(--border-subtle); }

/* Brand logo lockup */
.cg-logo{ display:flex; align-items:center; gap:10px; }
.cg-logo img{ display:block; border-radius:7px; box-shadow:var(--shadow-sm); }
.cg-logo__name{ font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--text-primary); letter-spacing:-0.01em; line-height:1.05; }
.cg-logo__name span{ color:var(--violet-400); }
.cg-logo__by{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-tertiary); }

/* ============================ Typography helpers ============================ */
.cg-eyebrow{ font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500;
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-tertiary);
  display:inline-block; }
.cg-display{ font-family:var(--font-display); font-size:var(--text-3xl); font-weight:600;
  letter-spacing:-0.02em; line-height:1.08; }
.cg-lead{ color:var(--text-secondary); font-size:var(--text-md); line-height:var(--leading-relaxed); }
.cg-muted{ color:var(--text-tertiary); }

/* ============================ Card ============================ */
.cg-card{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--elevation-card); }
.cg-card--overlay{ box-shadow:var(--elevation-overlay); }
.cg-card--interactive{ cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out),
  transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cg-card--interactive:hover{ border-color:var(--border-strong); transform:translateY(-1px);
  box-shadow:var(--elevation-raised); }
.cg-card__header{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border-subtle); }
.cg-card__title{ font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--text-primary); letter-spacing:-0.01em; }
.cg-card__body{ padding:18px; }
.cg-card__body--tight{ padding:14px 18px; }

/* ============================ ScoreCard ============================ */
.cg-scorecard{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--elevation-card);
  display:flex; flex-direction:column; gap:10px; }
.cg-scorecard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cg-scorecard__num{ font-family:var(--font-display); font-weight:600; font-size:38px; line-height:1;
  letter-spacing:-0.025em; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.cg-scorecard__num--accent{ color:var(--violet-400); }
.cg-scorecard__suffix{ font-size:16px; color:var(--text-tertiary); font-weight:500; }
.cg-scorecard__foot{ font-size:12px; color:var(--text-tertiary); }
.cg-scorecard__foot b{ color:var(--text-secondary); font-weight:500; }

/* ============================ MeterBar ============================ */
.cg-meter{ display:flex; flex-direction:column; gap:6px; }
.cg-meter__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0; }
.cg-meter__label{ font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.cg-meter__val{ font-family:var(--font-mono); font-size:12px; color:var(--text-primary);
  font-variant-numeric:tabular-nums; }
.cg-meter__track{ height:6px; border-radius:var(--radius-full); background:var(--surface-inset); overflow:hidden; }
.cg-meter__fill{ height:100%; border-radius:var(--radius-full); background:var(--accent);
  transition:width var(--dur-slow) var(--ease-out); }
.cg-meter--thin .cg-meter__track{ height:4px; }
.cg-meter__fill--low{ background:var(--band-low); } .cg-meter__fill--partial{ background:var(--band-partial); }
.cg-meter__fill--good{ background:var(--band-good); } .cg-meter__fill--high{ background:var(--band-high); }

/* ============================ ScoreRing ============================ */
.cg-ring{ position:relative; display:inline-flex; }
.cg-ring svg{ display:block; transform:rotate(-90deg); }
.cg-ring__center{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.cg-ring__num{ font-family:var(--font-display); font-weight:600; line-height:1; font-size:48px;
  color:var(--text-primary); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.cg-ring__max{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); margin-top:2px; }

/* ============================ Badge ============================ */
.cg-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-weight:500; line-height:1; border:1px solid transparent; border-radius:var(--radius-full);
  white-space:nowrap; letter-spacing:.01em; font-size:12px; padding:4px 10px; color:var(--text-secondary);
  background:var(--surface-raised); border-color:var(--border-default); }
.cg-badge--sm{ font-size:11px; padding:3px 8px; }
.cg-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.cg-badge--neutral{ color:var(--text-secondary); background:var(--surface-raised); border-color:var(--border-default); }
.cg-badge--accent{ color:var(--azure-300); background:var(--azure-tint); border-color:color-mix(in srgb,var(--azure-500) 50%,transparent); }
.cg-badge--violet{ color:var(--violet-400); background:var(--violet-tint); border-color:color-mix(in srgb,var(--violet-500) 50%,transparent); }
.cg-badge--success{ color:var(--success-500); background:var(--success-tint); border-color:color-mix(in srgb,var(--success-500) 50%,transparent); }
.cg-badge--warning{ color:var(--warning-500); background:var(--warning-tint); border-color:color-mix(in srgb,var(--warning-500) 50%,transparent); }
.cg-badge--danger{ color:var(--danger-500); background:var(--danger-tint); border-color:color-mix(in srgb,var(--danger-500) 50%,transparent); }
.cg-badge--critical{ color:var(--sev-critical); background:var(--danger-tint); border-color:color-mix(in srgb,var(--sev-critical) 50%,transparent); }
.cg-badge--high{ color:var(--sev-high); background:var(--warning-tint); border-color:color-mix(in srgb,var(--sev-high) 50%,transparent); }
.cg-badge--medium{ color:var(--sev-medium); background:var(--warning-tint); border-color:color-mix(in srgb,var(--sev-medium) 50%,transparent); }
.cg-badge--low{ color:var(--sev-low); background:var(--surface-raised); border-color:var(--border-strong); }

/* ============================ Button ============================ */
.cg-btn{ --_bg:var(--accent); --_fg:var(--text-on-accent); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; line-height:1; border-radius:var(--radius-md);
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg); cursor:pointer;
  white-space:nowrap; text-decoration:none; height:38px; padding:0 16px; font-size:14px;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
.cg-btn:active{ transform:translateY(0.5px) scale(0.99); }
.cg-btn:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.cg-btn svg,.cg-btn i{ width:1.05em; height:1.05em; flex:none; }
.cg-btn--sm{ height:30px; padding:0 12px; font-size:13px; }
.cg-btn--lg{ height:46px; padding:0 22px; font-size:15px; }
.cg-btn--primary{ --_bg:var(--accent); --_fg:var(--text-on-accent); box-shadow:var(--highlight-top); }
.cg-btn--primary:hover{ --_bg:var(--accent-hover); box-shadow:var(--highlight-top),var(--glow-soft); }
.cg-btn--secondary{ --_bg:var(--surface-raised); --_fg:var(--text-primary); --_bd:var(--border-default); }
.cg-btn--secondary:hover{ --_bg:var(--surface-hover); --_bd:var(--border-strong); }
.cg-btn--ghost{ --_bg:transparent; --_fg:var(--text-secondary); }
.cg-btn--ghost:hover{ --_bg:var(--surface-hover); --_fg:var(--text-primary); }
.cg-btn--block{ width:100%; }

/* ============================ Input ============================ */
.cg-field{ display:flex; flex-direction:column; gap:6px; }
.cg-field__label{ font-size:13px; font-weight:500; color:var(--text-secondary); }
.cg-input,.cg-textarea{ width:100%; height:40px; padding:0 12px; background:var(--surface-inset);
  color:var(--text-primary); border:1px solid var(--border-default); border-radius:var(--radius-md);
  font-family:var(--font-sans); font-size:14px;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out); }
.cg-input--mono{ font-family:var(--font-mono); font-size:13px; }
.cg-input::placeholder,.cg-textarea::placeholder{ color:var(--text-disabled); }
.cg-input:hover,.cg-textarea:hover{ border-color:var(--border-strong); }
.cg-input:focus,.cg-textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--violet-tint); background:var(--bg-app); }
.cg-textarea{ height:auto; padding:10px 12px; line-height:1.5; resize:vertical; }

/* ============================ Tabs ============================ */
.cg-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border-default); overflow-x:auto;
  scrollbar-width:none; }
.cg-tabs::-webkit-scrollbar{ display:none; }
.cg-tab{ position:relative; flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:10px 14px; margin-bottom:-1px; background:none; border:none; border-bottom:2px solid transparent;
  font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--text-tertiary);
  cursor:pointer; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); }
.cg-tab:hover{ color:var(--text-primary); }
.cg-tab.is-active{ color:var(--text-primary); border-bottom-color:var(--accent); }
.cg-tab__count{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary);
  background:var(--surface-raised); border-radius:var(--radius-full); padding:1px 7px; }
.cg-tab.is-active .cg-tab__count{ color:var(--violet-300); background:var(--violet-tint); }

/* ============================ GapCard ============================ */
.cg-gap{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--elevation-card);
  display:flex; flex-direction:column; gap:8px; border-left:2px solid var(--_sev,var(--border-strong)); }
.cg-gap--critical{ --_sev:var(--sev-critical); } .cg-gap--high{ --_sev:var(--sev-high); }
.cg-gap--medium{ --_sev:var(--sev-medium); } .cg-gap--low{ --_sev:var(--sev-low); }
.cg-gap__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cg-gap__label{ font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--text-primary); letter-spacing:-0.01em; }
.cg-gap__obs{ font-size:13.5px; line-height:1.55; color:var(--text-secondary); }
.cg-gap__obs--target{ color:var(--text-tertiary); }
.cg-gap__rec{ font-size:13.5px; line-height:1.55; color:var(--violet-300); display:flex; gap:6px; }
.cg-gap__rec::before{ content:"\2192"; color:var(--accent); }
.cg-gap__meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); margin-top:2px; }

/* ============================ ActionCard ============================ */
.cg-action{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--elevation-card);
  display:flex; flex-direction:column; gap:9px; }
.cg-action__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cg-action__title{ font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--text-primary); letter-spacing:-0.01em; }
.cg-action__meta{ font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--text-tertiary);
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.cg-action__meta code{ color:var(--azure-300); }
.cg-action__desc{ font-size:13.5px; line-height:1.55; color:var(--text-secondary); }
.cg-action__ac{ margin:2px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.cg-action__ac li{ font-size:13px; line-height:1.5; color:var(--text-secondary); }

/* ============================ Utilities ============================ */
.cg-grid{ display:grid; gap:14px; }
.cg-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:12px; color:var(--text-secondary); background:var(--surface-raised);
  border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:4px 10px; }
.cg-chip__dot{ width:6px; height:6px; border-radius:50%; background:var(--violet-400); }
.cg-note{ border:1px solid color-mix(in srgb,var(--warning-500) 35%,transparent);
  background:var(--warning-tint); color:var(--warning-500); border-radius:var(--radius-lg);
  padding:12px 16px; font-size:13.5px; line-height:1.55; }
.cg-note--danger{ border-color:color-mix(in srgb,var(--danger-500) 40%,transparent);
  background:var(--danger-tint); color:var(--danger-500); }
.cg-hero-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 320px at 50% -8%,var(--violet-tint),transparent 70%); }
.cg-avatar{ width:28px; height:28px; border-radius:50%; background:var(--brand-gradient);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
  color:#fff; font-family:var(--font-display); }