/* base font */
body, button, input, textarea, select { font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* ===============================================================
   AGENTICS.CREDIT — CAMPAIGN STYLES
   Dark only · #080D16 base · #1D9E75 teal · Geist Mono
   =============================================================== */

:root[data-theme="dark"] {
  --cg-bg: #080D16;
  --cg-bg-2: #0E1422;
  --cg-bg-3: #141C2E;
  --cg-fg: #F0EEE8;
  --cg-muted: #64748B;
  --cg-accent: #1D9E75;
  --cg-accent-glow: rgba(29,158,117,0.45);
  --cg-border: rgba(255,255,255,0.07);
  --cg-border-2: rgba(255,255,255,0.04);
  --cg-pos: #2EE19E;
  --cg-neg: #FF6B6B;
  /* Subtle overlay tint used for card backgrounds. Swaps per theme so
     the same rules look right on paper or ink. */
  --cg-tint:      rgba(255,255,255,0.04);
  --cg-tint-2:    rgba(255,255,255,0.06);
  --cg-tint-3:    rgba(255,255,255,0.02);
}

/* LIGHT (paper) theme — palette mirrors marketing.css so the dashboard
   matches the marketing site's daytime look. Keep the teal accent
   readable on paper (--cg-accent slightly darker than dark theme). */
:root, :root[data-theme="light"] {
  --cg-bg: #F6F9F7;
  --cg-bg-2: #ECF1ED;
  --cg-bg-3: #DEE6E1;
  --cg-fg: #0A1814;
  --cg-muted: #5A6F69;
  --cg-accent: #047A5E;
  --cg-accent-glow: rgba(4, 122, 94, 0.28);
  --cg-border: rgba(4, 122, 94, 0.22);
  --cg-border-2: rgba(4, 122, 94, 0.10);
  --cg-pos: #047A5E;
  --cg-neg: #B13B3B;
  --cg-tint:      rgba(0,0,0,0.03);
  --cg-tint-2:    rgba(0,0,0,0.05);
  --cg-tint-3:    rgba(0,0,0,0.02);
}

body { background: var(--cg-bg) !important; color: var(--cg-fg) !important; }

/* ---------- LANDING ---------- */
.cg-landing { position: relative; min-height: calc(100vh - 32px); padding: 56px 32px 80px; max-width: 1280px; margin: 0 auto; }
.cg-landing-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 30%, rgba(29,158,117,0.10), transparent 60%),
    radial-gradient(rgba(29,158,117,0.04) 1px, transparent 1px);
  background-size: auto, 24px 24px;
  opacity: 0.7;
}
.cg-hero { position: relative; text-align: center; padding: 64px 0 32px; }
.cg-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border: 1px solid var(--cg-accent);
  background: rgba(29,158,117,0.08);
  color: var(--cg-accent);
  font-size: 11px; letter-spacing: 2px; font-weight: 700;
  border-radius: 4px;
  margin-bottom: 32px;
}
.cg-badge .led { width: 8px; height: 8px; background: var(--cg-accent); border-radius: 50%; box-shadow: 0 0 12px var(--cg-accent); }
.cg-h1 {
  font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -2px;
  font-weight: 800; color: var(--cg-fg); margin: 0;
}
.cg-h1 .accent { color: var(--cg-accent); }
.cg-sub { font-size: 18px; color: var(--cg-muted); line-height: 1.7; margin: 24px 0 36px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cg-statbar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--cg-border);
  border: 1px solid var(--cg-border);
  max-width: 900px; margin: 32px auto;
}
.cg-statbar-cell { background: var(--cg-bg-2); padding: 22px 24px; text-align: left; }
.cg-statbar-cell .k { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); margin-bottom: 8px; }
.cg-statbar-cell .v { font-size: 22px; font-weight: 700; color: var(--cg-accent); letter-spacing: -0.3px; }
.cg-cta-row { display: flex; gap: 14px; justify-content: center; margin: 36px 0 28px; flex-wrap: wrap; }
.cg-cta-primary {
  background: var(--cg-accent); color: #000; border: none;
  padding: 16px 32px; font-size: 14px; font-weight: 700; letter-spacing: 2px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 32px var(--cg-accent-glow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cg-cta-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 48px var(--cg-accent-glow); }
.cg-cta-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.cg-cta-ghost {
  background: transparent; color: var(--cg-fg);
  border: 1px solid var(--cg-border); padding: 14px 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.cg-cta-ghost:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-stats-live {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  font-size: 12px; color: var(--cg-muted); letter-spacing: 0.5px;
  font-family: 'Geist Mono', monospace;
  flex-wrap: wrap; margin-top: 24px;
}
.cg-stats-live .led { width: 6px; height: 6px; background: var(--cg-accent); border-radius: 50%; box-shadow: 0 0 8px var(--cg-accent); animation: pulse 2s infinite; }
.cg-stats-live .sep { opacity: 0.4; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.cg-flow-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 72px; position: relative;
}
.cg-flow-card {
  border: 1px solid var(--cg-border);
  background: var(--cg-bg-2);
  padding: 32px;
}
.cg-flow-card .step-num { font-size: 36px; color: var(--cg-accent); font-weight: 800; letter-spacing: -1px; }
.cg-flow-card .step-title { font-size: 13px; letter-spacing: 2px; color: var(--cg-fg); font-weight: 700; margin: 12px 0 16px; }
.cg-flow-card .step-body { font-size: 14px; color: var(--cg-muted); line-height: 1.7; min-height: 80px; }
.cg-flow-card .step-foot { font-size: 12px; color: var(--cg-accent); margin-top: 16px; letter-spacing: 0.5px; padding-top: 16px; border-top: 1px solid var(--cg-border-2); }

/* ---------- ONBOARDING MODAL ---------- */
.cg-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.cg-modal {
  background: var(--cg-bg-2);
  border: 1px solid var(--cg-border);
  width: 560px; max-width: 100%;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.cg-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px 24px 0;
}
.cg-modal-eyebrow { font-size: 10px; letter-spacing: 2px; color: var(--cg-accent); font-weight: 700; }
.cg-modal-title { font-size: 22px; font-weight: 700; color: var(--cg-fg); margin-top: 6px; letter-spacing: -0.3px; }
.cg-modal-x {
  background: none; border: 1px solid var(--cg-border); color: var(--cg-muted);
  width: 32px; height: 32px; font-size: 18px; cursor: pointer;
  font-family: inherit;
}
.cg-modal-x:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cg-field { display: flex; flex-direction: column; gap: 6px; }
.cg-field label { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); font-weight: 600; }
.cg-field label .opt { color: var(--cg-muted); opacity: 0.6; font-weight: 400; }
.cg-field input, .cg-field select, .cg-field textarea, .cg-textarea {
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  color: var(--cg-fg);
  font-family: 'Geist Mono', monospace; font-size: 13px;
  padding: 12px 14px;
  width: 100%;
  outline: none; transition: border-color 0.15s;
}
.cg-field input:focus, .cg-field select:focus, .cg-field textarea:focus, .cg-textarea:focus { border-color: var(--cg-accent); }
.cg-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.cg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cg-modal-note { font-size: 12px; color: var(--cg-muted); padding: 12px 14px; background: rgba(29,158,117,0.05); border-left: 2px solid var(--cg-accent); }
.cg-modal-note .accent { color: var(--cg-accent); font-weight: 600; }
.cg-modal-actions { display: flex; gap: 12px; margin-top: 8px; }
.cg-modal-actions .cg-cta-primary { flex: 1; }

.cg-helper-prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-prompt-chip {
  background: transparent; border: 1px dashed var(--cg-border);
  color: var(--cg-muted); padding: 8px 12px;
  font-family: inherit; font-size: 11px; letter-spacing: 0.5px;
  cursor: pointer; transition: all 0.15s;
}
.cg-prompt-chip:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-radio-row { display: flex; gap: 8px; }
.cg-radio {
  background: transparent; border: 1px solid var(--cg-border);
  color: var(--cg-muted); padding: 10px 14px;
  font-family: inherit; font-size: 12px; cursor: pointer; flex: 1;
}
.cg-radio.active, .cg-radio:hover { border-color: var(--cg-accent); color: var(--cg-accent); background: rgba(29,158,117,0.06); }

/* Turnstile widget */
.cg-turnstile { min-height: 65px; display: flex; align-items: center; border-radius: 6px; }
.cg-turnstile iframe { color-scheme: dark; }

/* Prompt shown when the email is valid but the captcha hasn't been ticked —
   points users to the security check so the code actually sends. */
.cg-captcha-hint {
  margin-top: 6px;
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  color: #D97706;
  cursor: pointer;
}
/* Pulse the security check when a user tries to send without ticking it. */
.cg-turnstile.cg-nudge {
  outline: 2px solid #D97706;
  outline-offset: 4px;
  animation: cg-captcha-pulse 0.6s ease-in-out 0s 3;
}
@keyframes cg-captcha-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,6,0.35); }
}

/* ---------- ENGAGEMENT: pause banner + multi-agent grid ---------- */
.cg-pause-banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.45);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
}
.cg-pause-ico { color: #D97706; font-size: 15px; }
.cg-pause-txt { flex: 1; font-size: 13px; color: var(--cg-fg); }
.cg-pause-resume {
  background: #D97706; color: #0B0A08; border: none; border-radius: 5px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.cg-pause-resume:hover { background: #E8870D; }
.cg-pause-x { background: none; border: none; color: var(--cg-muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }

.cg-agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cg-agent-card {
  border: 1px solid var(--cg-border); border-radius: 8px; padding: 14px;
  background: var(--cg-bg); display: flex; flex-direction: column; gap: 8px;
}
.cg-agent-card.paused { border-color: rgba(217,119,6,0.4); background: rgba(217,119,6,0.04); }
.cg-agent-top { display: flex; justify-content: space-between; align-items: center; }
.cg-agent-name { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; color: var(--cg-fg); }
.cg-agent-status { font-size: 9px; letter-spacing: 1px; }
.cg-agent-status.active { color: var(--cg-accent); }
.cg-agent-status.paused { color: #D97706; }
.cg-agent-type { font-size: 10px; color: var(--cg-muted); letter-spacing: 0.5px; }
.cg-agent-reason { font-size: 11px; color: var(--cg-fg-soft, #A6B0BE); line-height: 1.5; min-height: 32px; }
.cg-agent-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--cg-border-2); }
.cg-agent-pnl { font-family: 'Geist Mono', monospace; font-size: 12px; }
.cg-agent-pnl.pos { color: var(--cg-accent); }
.cg-agent-pnl.neg { color: var(--cg-neg, #FF6B6B); }
.cg-agent-open { font-size: 11px; color: var(--cg-muted); }
.cg-agent-resume { background: none; border: 1px solid #D97706; color: #D97706; border-radius: 4px; font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; cursor: pointer; }
.cg-agent-resume:hover { background: #D97706; color: #0B0A08; }
.cg-agent-add {
  border: 1px dashed var(--cg-border); border-radius: 8px; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--cg-muted); cursor: pointer; font-family: inherit; font-size: 12px; min-height: 120px;
  transition: all 0.15s;
}
.cg-agent-add:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-agent-add-plus { font-size: 24px; line-height: 1; }

/* ---------- ONBOARDING (3-page flow) ---------- */
.cg-onb-logo {
  display: flex; align-items: center;
  padding: 20px 24px 0;
}
.cg-onb-logo .logo-lockup { pointer-events: none; }
.cg-modal.cg-onb { width: 640px; max-height: 90vh; display: flex; flex-direction: column; }
.cg-modal.cg-onb .cg-modal-body { overflow-y: auto; }
.cg-onb-welcome { font-size: 14px; line-height: 1.65; color: var(--cg-fg-soft, #A6B0BE); }
.cg-onb-welcome .accent { color: var(--cg-accent); font-weight: 600; }
.cg-connect-row { display: flex; gap: 8px; }
.cg-connect-row input { flex: 1; }
.cg-connect-btn {
  background: transparent; border: 1px solid var(--cg-border); color: var(--cg-muted);
  font-family: inherit; font-size: 11px; letter-spacing: 1px; padding: 0 16px; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
}
.cg-connect-btn:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-connect-btn.done { border-color: var(--cg-accent); color: var(--cg-accent); background: rgba(29,158,117,0.08); }

/* Email + Telegram verification states */
.cg-verify-done { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--cg-accent); background: rgba(29,158,117,0.06); border-radius: 6px; }
.cg-verify-badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--cg-accent); }
.cg-verify-email { font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--cg-fg); }
.cg-verify-code { display: flex; flex-direction: column; gap: 8px; }
.cg-verify-sent { font-size: 12px; color: var(--cg-fg-soft, #A6B0BE); }
.cg-verify-sent strong { color: var(--cg-fg); }
.cg-verify-err { font-size: 11px; color: var(--cg-neg, #FF6B6B); }
.cg-verify-resend { align-self: flex-start; background: none; border: none; color: var(--cg-muted); font-family: inherit; font-size: 11px; cursor: pointer; padding: 2px 0; }
.cg-verify-resend:not(:disabled):hover { color: var(--cg-accent); }
.cg-verify-resend:disabled { opacity: 0.5; cursor: default; }
.cg-tg-widget { min-height: 36px; }
.cg-check { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--cg-fg-soft, #A6B0BE); letter-spacing: 0; font-weight: 400; cursor: pointer; margin-top: 4px; }
.cg-check input { width: 14px; height: 14px; margin-top: 2px; accent-color: var(--cg-accent); flex-shrink: 0; }
.cg-check .opt { color: var(--cg-muted); }

.cg-onb-card { border: 1px solid var(--cg-border); padding: 24px; text-align: center; }
.cg-onb-card.highlight { border-color: var(--cg-accent); background: rgba(29,158,117,0.05); }
.cg-onb-card-big { font-size: 40px; font-weight: 800; color: var(--cg-fg); letter-spacing: -1px; }
.cg-onb-card-big .accent { color: var(--cg-accent); }
.cg-onb-card-sub { font-size: 13px; color: var(--cg-muted); margin-top: 8px; line-height: 1.6; }
.cg-onb-card-sub .accent { color: var(--cg-accent); font-weight: 600; }
.cg-onb-points { display: flex; flex-direction: column; gap: 14px; }
.cg-onb-point { display: flex; gap: 14px; }
.cg-onb-num { font-size: 12px; font-weight: 700; color: var(--cg-accent); border: 1px solid var(--cg-border); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cg-onb-point-h { font-size: 14px; font-weight: 700; color: var(--cg-fg); margin-bottom: 4px; }
.cg-onb-point p { font-size: 12px; color: var(--cg-muted); line-height: 1.6; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-chip {
  background: transparent; border: 1px solid var(--cg-border);
  color: var(--cg-muted); padding: 6px 12px;
  font-family: inherit; font-size: 11px; cursor: pointer;
  letter-spacing: 0.5px;
}
.cg-chip.active { border-color: var(--cg-accent); color: var(--cg-accent); background: rgba(29,158,117,0.06); }

.cg-launch-modal {
  background: var(--cg-bg-2); border: 1px solid var(--cg-border);
  width: 480px; padding: 36px;
}
.cg-launch-title { font-size: 14px; letter-spacing: 2px; color: var(--cg-muted); margin-bottom: 24px; }
.cg-launch-title .accent { color: var(--cg-accent); font-weight: 700; }
.cg-launch-feed { display: flex; flex-direction: column; gap: 10px; font-family: 'Geist Mono', monospace; font-size: 13px; }
.cg-launch-line { color: var(--cg-muted); }
.cg-launch-line.active { color: var(--cg-accent); }

/* ---------- HEADER (sticky) ---------- */
.cg-header {
  position: sticky; top: 28px; z-index: 40;
  background: rgba(8,13,22,0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cg-border);
  padding: 14px 32px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
.cg-header .cg-header-areas { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.cg-area {
  background: transparent; border: 1px solid transparent;
  color: var(--cg-muted); padding: 8px 14px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; cursor: pointer;
}
.cg-area:hover { color: var(--cg-fg); }
.cg-area.active { color: var(--cg-accent); border-color: var(--cg-accent); background: rgba(29,158,117,0.06); }
.cg-userbar { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.cg-userbar-rank { color: var(--cg-accent); font-weight: 700; }
.cg-userbar-name { color: var(--cg-fg); }
.cg-userbar-bal { color: var(--cg-muted); }
.cg-share-top { padding: 8px 14px !important; font-size: 11px !important; }
.cg-logout-top { padding: 8px 14px !important; font-size: 11px !important; margin-left: 6px; }
.cg-subnav, .cg-proto-subnav {
  grid-column: 1 / -1;
  display: flex; gap: 4px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--cg-border-2);
  flex-wrap: wrap;
}
.cg-subnav-tab {
  background: transparent; border: none; color: var(--cg-muted);
  padding: 8px 14px; font-family: inherit; font-size: 11px; letter-spacing: 1.5px; cursor: pointer;
}
.cg-subnav-tab:hover { color: var(--cg-fg); }
.cg-subnav-tab.active { color: var(--cg-accent); border-bottom: 2px solid var(--cg-accent); }

/* ---------- DASHBOARD ---------- */
.cg-dash { max-width: 1440px; margin: 0 auto; padding: 24px 32px 64px; }
.cg-dash-grid { display: grid; grid-template-columns: 1.05fr 1.4fr; gap: 16px; align-items: start; }
.cg-dash-left { display: flex; flex-direction: column; gap: 16px; }
.cg-dash-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 130px; }
.cg-dash-bottom { margin-top: 16px; }

/* override existing Card to use campaign tokens */
.cg-dash .card, .cg-myagent .card, .cg-leaderboard .card, .cg-refs .card, .cg-api .card {
  background: var(--cg-bg-2);
  border: 1px solid var(--cg-border);
}
.cg-dash .card .card-head, .cg-myagent .card .card-head, .cg-leaderboard .card .card-head, .cg-refs .card .card-head, .cg-api .card .card-head {
  border-bottom: 1px solid var(--cg-border-2);
  color: var(--cg-muted);
}

/* Agent panel */
.cg-agent-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--cg-border-2); }
.cg-agent-meta .k { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); margin-bottom: 4px; }
.cg-agent-meta .v { font-size: 14px; color: var(--cg-fg); font-weight: 600; }
.cg-agent-meta .v.accent { color: var(--cg-accent); }
.cg-balance { text-align: center; padding: 16px 0; border-bottom: 1px solid var(--cg-border-2); }
.cg-balance-k { font-size: 10px; letter-spacing: 2px; color: var(--cg-muted); margin-bottom: 6px; }
.cg-balance-v { font-size: 36px; font-weight: 800; color: var(--cg-accent); letter-spacing: -1px; }
.cg-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 16px; }
.cg-stat { display: flex; justify-content: space-between; padding: 6px 0; }
.cg-stat .k { font-size: 11px; color: var(--cg-muted); letter-spacing: 1px; }
.cg-stat .v { font-size: 13px; color: var(--cg-fg); font-weight: 600; }
.cg-stat .v.pos { color: var(--cg-pos); }
.cg-stat .v .pct { color: var(--cg-muted); font-size: 11px; font-weight: 400; margin-left: 4px; }

/* Score panel */
.cg-score-row { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.cg-signals { display: flex; flex-direction: column; gap: 10px; }
.cg-signal-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--cg-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
.cg-signal-head .v { color: var(--cg-fg); font-weight: 700; }
.cg-tier-line { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--cg-border-2); display: flex; align-items: center; gap: 12px; }
.cg-tier-trend { font-size: 11px; color: var(--cg-pos); }

/* Eligibility */
.cg-checks { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--cg-border-2); }
.cg-check { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; font-size: 13px; }
.cg-check .cg-check-mark { font-weight: 700; }
.cg-check.ok .cg-check-mark { color: var(--cg-accent); }
.cg-check.no .cg-check-mark { color: var(--cg-neg); }
.cg-check.no { opacity: 0.7; }
.cg-check-label { color: var(--cg-fg); }
.cg-check-val { color: var(--cg-muted); font-size: 12px; }
.cg-check-tag { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); padding: 2px 8px; border: 1px solid var(--cg-border); }
.cg-check.ok .cg-check-tag { color: var(--cg-accent); border-color: var(--cg-accent); }
.cg-progress { margin: 16px 0; }
.cg-progress-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--cg-muted); letter-spacing: 1px; margin-bottom: 8px; }
.cg-progress-top .v { color: var(--cg-accent); font-weight: 700; }
.cg-estimate { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--cg-border-2); }
.cg-estimate-v { font-size: 22px; color: var(--cg-accent); font-weight: 800; letter-spacing: -0.5px; }

/* Credit panel */
.cg-credit-grid { display: flex; flex-direction: column; gap: 12px; }
.cg-credit-grid > div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--cg-border-2); }
.cg-credit-grid > div:last-child { border-bottom: none; }
.cg-credit-grid .k { font-size: 11px; color: var(--cg-muted); letter-spacing: 1px; }
.cg-credit-grid .v { font-size: 14px; color: var(--cg-fg); font-weight: 600; }
.cg-credit-grid .v.accent { color: var(--cg-accent); font-size: 18px; }
.cg-credit-grid .total .v { font-size: 22px; }
.cg-credit-foot { font-size: 12px; color: var(--cg-muted); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--cg-border-2); }

/* Reasoning feed */
.cg-feed { background: var(--cg-bg-2); border: 1px solid var(--cg-border); }
.cg-feed-head { padding: 14px 18px; border-bottom: 1px solid var(--cg-border-2); display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 1.5px; color: var(--cg-muted); }
.cg-feed-head .led { display: inline-block; width: 6px; height: 6px; background: var(--cg-accent); border-radius: 50%; margin-right: 8px; box-shadow: 0 0 8px var(--cg-accent); animation: pulse 2s infinite; }
.cg-feed-sub { color: var(--cg-muted); opacity: 0.7; font-size: 10px; }
.cg-feed-list { max-height: 720px; overflow-y: auto; padding: 4px; }
.cg-feed-entry { padding: 14px 18px; border-bottom: 1px solid var(--cg-border-2); animation: slideIn 0.4s ease-out; }
.cg-feed-entry:last-child { border-bottom: none; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cg-feed-top { display: flex; gap: 14px; align-items: baseline; font-size: 12px; margin-bottom: 6px; }
.cg-feed-top .t { color: var(--cg-muted); font-family: 'Geist Mono', monospace; }
.cg-feed-top .a { font-weight: 700; letter-spacing: 0.5px; }
.cg-feed-entry.open .cg-feed-top .a { color: var(--cg-pos); }
.cg-feed-entry.close-win .cg-feed-top .a { color: var(--cg-accent); }
.cg-feed-entry.close-loss .cg-feed-top .a { color: var(--cg-neg); }
.cg-feed-entry.hold .cg-feed-top .a { color: var(--cg-muted); }
.cg-feed-body { font-size: 13px; color: var(--cg-fg); line-height: 1.65; font-style: italic; }
.cg-feed-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cg-share-btn {
  background: transparent; border: 1px solid var(--cg-border);
  color: var(--cg-muted); padding: 4px 10px;
  font-family: inherit; font-size: 10px; letter-spacing: 1px; cursor: pointer;
}
.cg-share-btn:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-credit-earned { font-size: 11px; color: var(--cg-accent); font-weight: 700; }

/* Score history chart */
.cg-chart-x { display: flex; justify-content: space-between; font-size: 10px; color: var(--cg-muted); margin-top: 8px; }

/* Recent trades table */
.cg-table { font-family: 'Geist Mono', monospace; font-size: 12px; }
.cg-table .cg-tr { display: grid; grid-template-columns: 60px 90px 60px 70px 90px 90px 70px 70px 84px; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--cg-border-2); align-items: center; }
/* Variant with an AGENT column inserted between TIME and MARKET — used
   by the dashboard's RecentTradesPanel when the user has multiple agents. */
.cg-table.cg-table-with-agent .cg-tr {
  grid-template-columns: 60px 1fr 70px 60px 70px 90px 90px 80px 70px 84px;
}
.cg-table .cg-tr.head { color: var(--cg-muted); font-size: 10px; letter-spacing: 1.5px; }
.cg-table .pos { color: var(--cg-pos); }
.cg-table .neg { color: var(--cg-neg); }
.cg-table .accent { color: var(--cg-accent); }
/* Trade-row share CTA — replaced the muted [↗] icon-button. Wins get a
   filled-green pill (they're the most viral); losses keep the outlined
   form so we don't visually celebrate a loss. Either way the button now
   clearly looks like an action, not dead UI. */
.cg-share-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.cg-share-cta.win {
  background: var(--cg-accent);
  border: 1px solid var(--cg-accent);
  color: #0B0A08;
  box-shadow: 0 0 12px rgba(29,158,117,0.35);
}
.cg-share-cta.win:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(29,158,117,0.55);
}
.cg-share-cta.loss {
  background: transparent;
  border: 1px solid var(--cg-border, rgba(255,255,255,0.16));
  color: var(--cg-fg-soft, #A6B0BE);
}
.cg-share-cta.loss:hover {
  border-color: var(--cg-accent);
  color: var(--cg-accent);
}
.cg-share-cta-arrow { font-size: 12px; line-height: 1; }

/* My Agent */
.cg-myagent { max-width: 1280px; margin: 0 auto; padding: 24px 32px 64px; }
.cg-myagent-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.cg-myagent-tabs button {
  background: transparent; border: 1px solid var(--cg-border);
  color: var(--cg-muted); padding: 10px 18px;
  font-family: inherit; font-size: 12px; letter-spacing: 1px; cursor: pointer;
}
.cg-myagent-tabs button.active, .cg-myagent-tabs button:hover { color: var(--cg-accent); border-color: var(--cg-accent); }
.cg-myagent-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.cg-myagent-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.cg-help { font-size: 11px; color: var(--cg-muted); }
.cg-export-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* Campaign API */
.cg-api { display: flex; flex-direction: column; gap: 16px; }
.cg-apikey-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cg-apikey {
  font-family: 'Geist Mono', monospace; font-size: 12px;
  background: var(--cg-bg); padding: 10px 14px;
  border: 1px solid var(--cg-border); color: var(--cg-accent);
  flex: 1; min-width: 200px;
  letter-spacing: 0.5px;
}
.cg-apikey-warn { margin-top: 10px; font-size: 11px; color: var(--cg-neg); }
.cg-lang-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--cg-border-2); padding-bottom: 8px; }
.cg-lang-tabs button {
  background: transparent; border: 1px solid transparent;
  color: var(--cg-muted); padding: 6px 12px;
  font-family: inherit; font-size: 11px; cursor: pointer;
}
.cg-lang-tabs button.active { color: var(--cg-accent); border-color: var(--cg-accent); }
.cg-code {
  background: var(--cg-bg); padding: 18px;
  border: 1px solid var(--cg-border); border-radius: 4px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--cg-fg); line-height: 1.65; overflow-x: auto;
}
.cg-install { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cg-install code {
  background: var(--cg-bg); padding: 8px 14px;
  border: 1px solid var(--cg-border);
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--cg-fg);
}

/* Campaign leaderboard */
.cg-leaderboard { max-width: 1280px; margin: 0 auto; padding: 24px 32px 64px; }
.cg-lb-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--cg-border); border: 1px solid var(--cg-border); margin-bottom: 20px; }
.cg-lb-stat { background: var(--cg-bg-2); padding: 16px 18px; }
.cg-lb-stat .k { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); margin-bottom: 6px; }
.cg-lb-stat .v { font-size: 20px; font-weight: 800; color: var(--cg-fg); letter-spacing: -0.3px; }
.cg-lb-stat .v.accent { color: var(--cg-accent); }
.cg-lb-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.cg-lb-tabs button {
  background: transparent; border: 1px solid var(--cg-border);
  color: var(--cg-muted); padding: 8px 14px;
  font-family: inherit; font-size: 11px; letter-spacing: 1px; cursor: pointer;
}
.cg-lb-tabs button.active { color: var(--cg-accent); border-color: var(--cg-accent); }
.cg-lb-table {
  background: var(--cg-bg-2); border: 1px solid var(--cg-border);
  font-family: 'Geist Mono', monospace; font-size: 12px;
}
.cg-lb-tr {
  /* RANK · USERNAME · SCORE · TIER · QUALIFIED · VALUE — 6 columns total */
  display: grid;
  grid-template-columns: 60px 1.4fr 80px 110px 80px 1fr;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cg-border-2);
  align-items: center;
}
.cg-lb-tr.head { color: var(--cg-muted); font-size: 10px; letter-spacing: 1.5px; background: var(--cg-bg-3); }
.cg-lb-tr.me { background: rgba(29,158,117,0.08); border-left: 3px solid var(--cg-accent); }
.cg-lb-rank { color: var(--cg-muted); font-weight: 700; }
.cg-mono { font-family: 'Geist Mono', monospace; font-weight: 700; color: var(--cg-fg); }
.pos { color: var(--cg-pos); }
.neg { color: var(--cg-neg); }
.muted { color: var(--cg-muted); }
.accent { color: var(--cg-accent); }
.cg-lb-legend { font-size: 11px; color: var(--cg-muted); margin-top: 12px; text-align: center; }

/* Referrals page */
.cg-refs { max-width: 1280px; margin: 0 auto; padding: 24px 32px 64px; display: flex; flex-direction: column; gap: 16px; }
.cg-refs-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cg-refs-link code {
  font-family: 'Geist Mono', monospace; font-size: 13px;
  background: var(--cg-bg); padding: 10px 16px;
  border: 1px solid var(--cg-border); color: var(--cg-accent);
  flex: 1; min-width: 200px;
}
.cg-refs-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.cg-refs-tier { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.cg-refs-tier-now { font-size: 28px; font-weight: 800; color: var(--cg-accent); letter-spacing: -0.5px; }
.cg-refs-tier-meta { font-size: 12px; color: var(--cg-fg); }
.cg-refs-tier-meta .muted { color: var(--cg-muted); margin-top: 4px; }
.cg-refs-progress-foot { font-size: 11px; color: var(--cg-muted); margin-top: 8px; }
.cg-refs-stats { display: flex; flex-direction: column; gap: 12px; }
.cg-refs-stats > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--cg-border-2); }
.cg-refs-stats > div:last-child { border-bottom: none; }
.cg-refs-stats .k { font-size: 11px; color: var(--cg-muted); letter-spacing: 1px; }
.cg-refs-stats .v { font-size: 14px; color: var(--cg-fg); font-weight: 700; }
.cg-refs-stats .v.accent { color: var(--cg-accent); }

/* Per-referral earnings ledger */
.cg-reftable { font-family: 'Geist Mono', monospace; font-size: 12px; }
.cg-reftable-tr {
  display: grid; grid-template-columns: 1.2fr 80px 90px 110px 110px 90px;
  gap: 12px; padding: 11px 6px;
  border-bottom: 1px solid var(--cg-border-2); align-items: center;
}
.cg-reftable-tr.head { color: var(--cg-muted); font-size: 10px; letter-spacing: 1.5px; }
.cg-reftable-tr.total { border-top: 1px solid var(--cg-border); border-bottom: none; color: var(--cg-fg); font-weight: 700; }
.cg-reftable-name { color: var(--cg-fg); font-weight: 600; }
.cg-ref-status { font-size: 10px; letter-spacing: 1px; }
.cg-ref-status.active { color: var(--cg-pos); }
.cg-ref-status.idle { color: var(--cg-muted); }
.cg-ref-status.pending { color: #D97706; }
.cg-reftable-foot { font-size: 11px; color: var(--cg-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cg-border-2); line-height: 1.5; }

/* Share modal */
.cg-share-modal {
  background: var(--cg-bg-2); border: 1px solid var(--cg-border);
  width: 480px; max-width: 100%;
}
.cg-share-head { display: flex; justify-content: space-between; padding: 24px 24px 0; }
/* Share modal — live canvas preview */
.cg-share-canvas-wrap { margin: 20px 24px 0; border: 1px solid var(--cg-border); background: var(--cg-bg); }
.cg-share-canvas { display: block; width: 100%; height: auto; }
.cg-share-hint { font-size: 11px; color: var(--cg-muted); text-align: center; margin: 10px 24px 0; line-height: 1.5; }

/* Graduation */
.cg-grad { padding: 32px 32px 64px; display: flex; justify-content: center; }
.cg-grad-card {
  max-width: 720px; width: 100%;
  background: var(--cg-bg-2); border: 2px solid var(--cg-accent);
  padding: 48px;
  box-shadow: 0 0 64px var(--cg-accent-glow);
}
.cg-grad-target { font-size: 32px; font-weight: 800; color: var(--cg-fg); letter-spacing: -0.5px; }
.cg-grad-target .accent { color: var(--cg-accent); }
.cg-grad-sub { font-size: 14px; color: var(--cg-muted); margin-top: 8px; }
.cg-grad-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--cg-border-2); border-bottom: 1px solid var(--cg-border-2); }
.cg-grad-stats .k { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); }
.cg-grad-stats .v { font-size: 22px; font-weight: 800; color: var(--cg-fg); margin-top: 4px; letter-spacing: -0.3px; }
.cg-grad-stats .v.pos { color: var(--cg-pos); }
.cg-grad-stats .v.accent { color: var(--cg-accent); }
.cg-grad-stats .t { font-size: 10px; color: var(--cg-muted); margin-top: 2px; }
.cg-grad-eligible { font-size: 14px; letter-spacing: 2px; color: var(--cg-accent); font-weight: 700; margin-top: 16px; }
.cg-grad-credit { margin: 14px 0; }
.cg-grad-credit-row, .cg-grad-credit-total { display: flex; justify-content: space-between; padding: 8px 0; font-family: 'Geist Mono', monospace; font-size: 18px; }
.cg-grad-credit-row span:first-child { color: var(--cg-fg); font-weight: 700; }
.cg-grad-credit-row .muted { color: var(--cg-muted); font-size: 12px; }
.cg-grad-credit-divider { height: 1px; background: var(--cg-border); margin: 4px 0; }
.cg-grad-credit-total span:first-child { color: var(--cg-accent); font-weight: 800; font-size: 28px; }
.cg-grad-terms { font-size: 13px; color: var(--cg-fg); margin-top: 8px; letter-spacing: 0.5px; }
.cg-grad-note { font-size: 12px; color: var(--cg-muted); margin-top: 16px; line-height: 1.6; padding-top: 16px; border-top: 1px solid var(--cg-border-2); }
.cg-grad-actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.cg-grad-actions .cg-cta-primary { flex: 1; min-width: 240px; }

/* Toasts (override existing) */
.toast-stack { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: var(--cg-bg-2); border: 1px solid var(--cg-accent);
  padding: 14px 18px;
  box-shadow: 0 0 32px var(--cg-accent-glow);
  animation: toastIn 0.4s ease-out;
  min-width: 220px;
}
.toast .title { font-size: 14px; color: var(--cg-pos); font-weight: 700; }
.toast .meta { font-size: 12px; color: var(--cg-accent); margin-top: 4px; letter-spacing: 0.5px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Responsive */
@media (max-width: 1100px) {
  .cg-dash-grid { grid-template-columns: 1fr; }
  .cg-dash-right { position: relative; top: 0; }
  .cg-myagent-grid { grid-template-columns: 1fr; }
  .cg-refs-grid { grid-template-columns: 1fr; }
  .cg-grad-stats { grid-template-columns: repeat(2, 1fr); }
  .cg-lb-stats { grid-template-columns: repeat(2, 1fr); }
  /* Mobile leaderboard — hide TIER + QUALIFIED columns to keep the row readable */
  .cg-lb-tr { grid-template-columns: 44px 1fr 70px 80px; }
  .cg-lb-tr > :nth-child(4),
  .cg-lb-tr > :nth-child(5) { display: none; }
  .cg-flow-row { grid-template-columns: 1fr; }
  .cg-statbar { grid-template-columns: 1fr; }
  .cg-table .cg-tr { grid-template-columns: 60px 90px 60px 70px 70px 70px 36px; }
  .cg-table .cg-tr > :nth-child(5), .cg-table .cg-tr > :nth-child(6) { display: none; }
  .cg-reftable-tr { grid-template-columns: 1fr 80px 100px 100px; }
  .cg-reftable-tr > :nth-child(2), .cg-reftable-tr > :nth-child(6) { display: none; }
  .cg-trades-table .cg-tt-row { grid-template-columns: 1fr 60px 64px 80px; }
  .cg-trades-table .cg-tt-row > :nth-child(5), .cg-trades-table .cg-tt-row > :nth-child(6), .cg-trades-table .cg-tt-row > :nth-child(8) { display: none; }
  .cg-ledger-row { grid-template-columns: 78px 1fr 70px; }
  .cg-ledger-row > :nth-child(3) { display: none; }
  .cg-credit-hero { grid-template-columns: 1fr; }
}

/* ── TRADES page ──────────────────────────────────────────── */
.cg-trades-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.cg-tstat { border: 1px solid var(--cg-border); border-radius: 8px; padding: 14px; background: var(--cg-bg); }
.cg-tstat .k { font-size: 10px; letter-spacing: 1px; color: var(--cg-muted); }
.cg-tstat .v { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 600; color: var(--cg-fg); margin-top: 4px; }
.cg-tstat .v.pos { color: var(--cg-accent); } .cg-tstat .v.neg { color: var(--cg-neg, #FF6B6B); }
.cg-trades-filters { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cg-trades-filters label { font-size: 10px; letter-spacing: 1px; color: var(--cg-muted); display: flex; flex-direction: column; gap: 5px; }
.cg-trades-sel { background: var(--cg-bg); border: 1px solid var(--cg-border); color: var(--cg-fg); font-family: inherit; font-size: 12px; padding: 7px 10px; border-radius: 5px; }
.cg-trades-table { font-family: 'Geist Mono', monospace; font-size: 12px; }
.cg-tt-row { display: grid; grid-template-columns: 1.1fr 60px 64px 80px 84px 84px 1.1fr 84px; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--cg-border-2); align-items: center; }
.cg-tt-row.head { color: var(--cg-muted); font-size: 10px; letter-spacing: 1px; }
.cg-tt-agent { color: var(--cg-fg); font-weight: 600; }
.cg-tt-side.long { color: var(--cg-accent); } .cg-tt-side.short { color: #D97706; }
.cg-tt-pct { color: var(--cg-muted); font-size: 10px; }
.cg-tt-status.open { color: var(--cg-accent); } .cg-tt-status.closed { color: var(--cg-muted); }
.cg-mono.pos, .pos { color: var(--cg-accent); } .cg-mono.neg, .neg { color: var(--cg-neg, #FF6B6B); }
.cg-trades-empty { padding: 28px; text-align: center; color: var(--cg-muted); font-size: 13px; }

/* ── CREDIT page ──────────────────────────────────────────── */
.cg-credit-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cg-credit-big { font-family: 'Geist Mono', monospace; font-size: 40px; font-weight: 700; color: var(--cg-accent); letter-spacing: -1px; }
.cg-credit-big span { font-size: 16px; color: var(--cg-muted); }
.cg-credit-sub { font-size: 12px; color: var(--cg-fg-soft, #A6B0BE); margin-top: 8px; line-height: 1.6; }
.cg-credit-sub .accent { color: var(--cg-accent); }
.cg-vest-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cg-vest-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--cg-border-2); }
.cg-vest-row .k { color: var(--cg-muted); } .cg-vest-row .v { font-family: 'Geist Mono', monospace; color: var(--cg-fg); }
.cg-vest-note { font-size: 11px; color: var(--cg-muted); margin-top: 12px; line-height: 1.55; }
.cg-ledger { font-family: 'Geist Mono', monospace; font-size: 12px; }
.cg-ledger-row { display: grid; grid-template-columns: 90px 120px 1fr 90px; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--cg-border-2); align-items: center; }
.cg-ledger-row.head { color: var(--cg-muted); font-size: 10px; letter-spacing: 1px; }
.cg-ledger-type { font-size: 11px; }
.cg-ledger-type.trade_profit { color: var(--cg-accent); }
.cg-ledger-type.referral_bonus { color: #5BA8FF; }
.cg-ledger-type.seed { color: var(--cg-muted); }
.cg-ledger-note { color: var(--cg-fg-soft, #A6B0BE); }
.cg-ledger-row > :last-child { text-align: right; }

/* ── SETTINGS page ────────────────────────────────────────── */
.cg-settings { display: flex; flex-direction: column; gap: 16px; }
.cg-set-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cg-border-2); font-size: 13px; }
.cg-set-row:last-child { border-bottom: none; }
.cg-set-row .k { color: var(--cg-muted); } .cg-set-row .v { color: var(--cg-fg); font-family: 'Geist Mono', monospace; }
.cg-set-tg-copy { font-size: 13px; color: var(--cg-fg-soft, #A6B0BE); line-height: 1.6; margin-bottom: 14px; }
.cg-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cg-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cg-fg); cursor: pointer; }
.cg-toggle input { width: 16px; height: 16px; accent-color: var(--cg-accent); }
.cg-danger { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cg-border-2); }
.cg-danger:last-child { border-bottom: none; }
.cg-danger-h { font-size: 14px; font-weight: 600; color: var(--cg-fg); }
.cg-danger-p { font-size: 12px; color: var(--cg-muted); margin-top: 3px; }
.cg-danger-btn { background: none; border: 1px solid var(--cg-neg, #FF6B6B); color: var(--cg-neg, #FF6B6B); border-radius: 5px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 7px 14px; cursor: pointer; }
.cg-danger-btn:hover { background: var(--cg-neg, #FF6B6B); color: #0B0A08; }

/* ── ADD AGENT — preset picker ────────────────────────────────── */
.cg-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cg-preset-card {
  background: var(--cg-tint-3);
  border: 1px solid var(--cg-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: inherit;
  color: var(--cg-fg);
  transition: border-color 120ms, transform 120ms, background 120ms;
}
.cg-preset-card:hover { border-color: var(--cg-accent); }
.cg-preset-card.selected {
  border-color: var(--cg-accent);
  background: rgba(29,158,117,0.07);
  box-shadow: 0 0 0 1px var(--cg-accent) inset;
}
.cg-preset-card.risky { border-color: rgba(220,38,38,0.4); }
.cg-preset-card.risky.selected { border-color: var(--cg-neg, #FF6B6B); box-shadow: 0 0 0 1px var(--cg-neg, #FF6B6B) inset; background: rgba(255,107,107,0.07); }
.cg-preset-top { display: flex; justify-content: space-between; align-items: baseline; }
.cg-preset-name { font-weight: 700; letter-spacing: 0.5px; font-size: 14px; }
.cg-preset-lev { font-family: 'Geist Mono', monospace; color: var(--cg-accent); font-size: 13px; font-weight: 700; }
.cg-preset-card.risky .cg-preset-lev { color: var(--cg-neg, #FF6B6B); }
.cg-preset-tier { font-size: 10px; letter-spacing: 1px; color: var(--cg-muted); text-transform: uppercase; }
.cg-preset-row { display: flex; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--cg-fg-soft, #A6B0BE); }
.cg-preset-row span:first-child { color: var(--cg-muted); }
.cg-preset-warning { font-size: 10px; letter-spacing: 0.5px; color: var(--cg-neg, #FF6B6B); margin-top: 2px; font-weight: 600; }
.cg-preset-detail {
  background: var(--cg-tint-3);
  border-left: 2px solid var(--cg-accent);
  padding: 10px 14px;
  margin-top: 4px;
}
.cg-preset-detail-label { font-size: 10px; letter-spacing: 1.5px; color: var(--cg-muted); font-weight: 600; margin-bottom: 4px; }
.cg-preset-detail-body { font-size: 12px; color: var(--cg-fg-soft, #A6B0BE); line-height: 1.55; }
.cg-modal-error { color: var(--cg-neg, #FF6B6B); font-size: 12px; padding: 8px 12px; background: rgba(255,107,107,0.08); border-left: 2px solid var(--cg-neg, #FF6B6B); }

/* Confirm step for high-risk preset (SURGE) */
.cg-confirm-block { display: flex; flex-direction: column; gap: 12px; }
.cg-confirm-block p { font-size: 13px; color: var(--cg-fg-soft, #A6B0BE); line-height: 1.6; margin: 0; }
.cg-confirm-block p strong { color: var(--cg-neg, #FF6B6B); font-weight: 700; }
.cg-confirm-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }
.cg-cta-secondary {
  background: none;
  border: 1px solid var(--cg-border, rgba(255,255,255,0.16));
  color: var(--cg-fg-soft, #A6B0BE);
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 9px 16px;
  cursor: pointer;
}
.cg-cta-secondary:hover { border-color: var(--cg-accent); color: var(--cg-accent); }

@media (max-width: 600px) {
  .cg-presets-grid { grid-template-columns: 1fr; }
}

/* ── LOAN PROGRESS STRIP ──────────────────────────────────────
   Slim, two-column hero above YOUR_AGENTS. Left = progress %,
   right = approved loan ceiling. Clicking jumps to the full
   LOAN_ELIGIBILITY card via scrollIntoView. */
.cg-loan-strip {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: linear-gradient(90deg, rgba(29,158,117,0.06), rgba(29,158,117,0.02));
  border: 1px solid var(--cg-border, rgba(255,255,255,0.08));
  border-left: 3px solid var(--cg-accent);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  cursor: pointer;
  font: inherit;
  color: var(--cg-fg);
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.cg-loan-strip:hover {
  border-color: var(--cg-accent);
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(29,158,117,0.18);
}
.cg-loan-strip-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--cg-muted);
  margin-bottom: 6px;
}
.cg-loan-strip-left { min-width: 0; }
.cg-loan-strip-bar {
  height: 8px;
  background: var(--cg-tint-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cg-loan-strip-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cg-accent), #4ED4A7);
  transition: width 320ms ease-out;
}
.cg-loan-strip-pct {
  font-family: 'Geist Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--cg-accent);
}
.cg-loan-strip-tier {
  margin-left: 10px;
  color: var(--cg-fg-soft, #A6B0BE);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.cg-loan-strip-right { text-align: right; }
.cg-loan-strip-amt {
  font-family: 'Geist Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--cg-fg);
  letter-spacing: -0.5px;
}
.cg-loan-strip-ccy { color: var(--cg-muted); font-weight: 400; font-size: 13px; }
.cg-loan-strip-cta { color: var(--cg-accent); font-size: 11px; margin-top: 4px; letter-spacing: 0.5px; }

@media (max-width: 600px) {
  .cg-loan-strip { grid-template-columns: 1fr; }
  .cg-loan-strip-right { text-align: left; }
}

/* ── PINE SCRIPT IMPORTER ─────────────────────────────────────
   Used in the AddAgentModal "Pine Script" tab and in the signup
   wizard's "Bring your own strategy" path. Shows a textarea →
   translates via /strategy/translate-pine → shows a summary +
   warnings → hands the JSON back to the parent. */
.cg-pine-importer { display: flex; flex-direction: column; gap: 14px; }
.cg-pine-textarea {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  min-height: 200px;
  white-space: pre;
  overflow-x: auto;
}
.cg-pine-foot { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cg-pine-hint {
  flex: 1 1 240px;
  font-size: 11px;
  color: var(--cg-fg-soft, #A6B0BE);
  line-height: 1.5;
}
.cg-pine-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.cg-pine-review { display: flex; flex-direction: column; gap: 12px; }
.cg-pine-review-eyebrow { font-size: 10px; letter-spacing: 2px; color: var(--cg-accent); font-weight: 700; }
.cg-pine-summary {
  background: rgba(29,158,117,0.05);
  border-left: 2px solid var(--cg-accent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cg-pine-summary-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
}
.cg-pine-summary-row span:first-child { color: var(--cg-muted); }
.cg-pine-summary-row span:last-child { color: var(--cg-fg); font-weight: 700; }
.cg-pine-raw summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--cg-muted);
  letter-spacing: 1px;
  padding: 6px 0;
}
.cg-pine-raw summary:hover { color: var(--cg-accent); }
.cg-pine-raw-pre {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  background: var(--cg-tint-3);
  border: 1px solid var(--cg-border, rgba(255,255,255,0.08));
  border-radius: 4px;
  padding: 10px;
  max-height: 240px;
  overflow: auto;
  color: var(--cg-fg-soft, #A6B0BE);
}
.cg-pine-warnings {
  background: rgba(220,38,38,0.06);
  border-left: 2px solid var(--cg-neg, #FF6B6B);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--cg-fg-soft, #A6B0BE);
}
.cg-pine-warnings-head {
  color: var(--cg-neg, #FF6B6B);
  font-weight: 700;
  margin-bottom: 6px;
}
.cg-pine-warnings ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.cg-pine-quota { font-size: 11px; color: var(--cg-muted); text-align: right; }

/* AddAgentModal — wider variant for the pine importer textarea */
.cg-modal-wide { width: 680px; max-width: 100%; }

/* Mode tabs at the top of the add-agent modal — Preset / Pine Script. */
.cg-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--cg-tint);
  padding: 4px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.cg-mode-tab {
  background: transparent;
  border: 0;
  color: var(--cg-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.cg-mode-tab.active {
  background: var(--cg-bg);
  color: var(--cg-accent);
  box-shadow: 0 0 0 1px var(--cg-accent) inset;
}
.cg-mode-tab:hover:not(.active) { color: var(--cg-fg-soft, #A6B0BE); }

/* Existing-user entry on the landing — sits below the CTA row.
   Keep visually quiet so it doesn't compete with the JOIN button. */
.cg-login-link-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--cg-muted);
  margin-top: 14px;
  letter-spacing: 0.5px;
}
.cg-login-link {
  background: none;
  border: 0;
  color: var(--cg-accent);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  padding: 4px 8px;
}
.cg-login-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Sub-line under the ACCOUNT_EQUITY headline — surfaces the split
   between free cash and margin currently locked in open positions.
   Both numbers always sum to the big equity figure above; keeping
   them visible eliminates the "paper_balance doesn't match equity"
   confusion users hit when free cash != total account value. */
.cg-balance-breakdown {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--cg-fg-soft, #A6B0BE);
  letter-spacing: 0.3px;
}
.cg-balance-breakdown .k { color: var(--cg-muted); margin-right: 4px; }
.cg-balance-breakdown .sep { color: var(--cg-muted); opacity: 0.5; }

/* My Agent — agent picker. Tabs across the top of the STRATEGY pane
   so the user can switch between the (up to 3) agents they own. Every
   form action below targets the selected agent. */
.cg-agent-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px;
  background: var(--cg-tint-3);
  border: 1px solid var(--cg-border, rgba(255,255,255,0.08));
  border-radius: 6px;
}
.cg-agent-picker-empty {
  font-size: 12px;
  color: var(--cg-muted);
  padding: 6px 10px;
  font-style: italic;
}
.cg-agent-tab {
  background: transparent;
  border: 1px solid var(--cg-border, rgba(255,255,255,0.08));
  color: var(--cg-fg-soft, #A6B0BE);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.cg-agent-tab:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-agent-tab.active {
  background: rgba(29,158,117,0.10);
  border-color: var(--cg-accent);
  color: var(--cg-accent);
}
.cg-agent-tab.paused { opacity: 0.65; }

/* Strategy timeline — visual strip sitting above the decision journal.
   One row per agent, each row is a horizontal track of small coloured
   nodes (one per strategy review). Click a node to expand its delta in
   the text feed below. Newest is on the right; track scrolls when more
   than ~12 nodes exist. */
.cg-strat-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 14px;
  border-bottom: 1px dashed var(--cg-border-2);
  margin-bottom: 8px;
}
.cg-strat-timeline-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}
.cg-strat-timeline-label {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--cg-fg);
  font-size: 11px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.cg-strat-timeline-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 0;
}
.cg-strat-timeline-empty {
  font-size: 10px;
  color: var(--cg-muted);
  font-style: italic;
}
.cg-strat-node {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cg-border, rgba(255,255,255,0.10));
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: transform 120ms, border-color 120ms, box-shadow 120ms;
}
.cg-strat-node:hover {
  transform: scale(1.15);
  border-color: var(--cg-accent);
}
.cg-strat-node.selected {
  border-color: var(--cg-accent);
  box-shadow: 0 0 0 2px var(--cg-accent), 0 0 12px rgba(29,158,117,0.4);
  transform: scale(1.15);
}

@media (max-width: 600px) {
  .cg-strat-timeline-row { grid-template-columns: 80px 1fr; }
  .cg-strat-timeline-label { font-size: 10px; }
}