/*
 * ══════════════════════════════════════════════════════════════════
 *  JIFFYCYBER DESIGN SYSTEM  v1.0
 *  Single source of truth for all pages.
 *  Inspired by: mikeoptimax/claude-frontend-skills-pack + 21st.dev
 *  Design principles: monochromatic dark, complementary cyan + purple,
 *  modular type scale (1.25×), 8 px spacing grid, atomic components.
 * ══════════════════════════════════════════════════════════════════
 */

/* ─── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Figtree:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Backgrounds — dark navy hierarchy */
  --jc-bg-base:     #060d1a;   /* page floor */
  --jc-bg-surface:  #0b1628;   /* default surface */
  --jc-bg-card:     #0e1e38;   /* card/panel */
  --jc-bg-elevated: #132445;   /* raised element */
  --jc-bg-raised:   #0f1c36;   /* slightly above card — for nested panels */
  --jc-bg-sunken:   rgba(2,6,23,0.75); /* inputs, inset areas */
  --jc-bg-overlay:  rgba(6,13,26,0.88);

  /* Borders */
  --jc-border-subtle: rgba(90,130,200,0.10);   /* faintest separator */
  --jc-border:        rgba(90,130,200,0.18);   /* default */
  --jc-border-md:     rgba(90,130,200,0.30);   /* medium emphasis */

  /* Primary — Cyan */
  --jc-cyan:        #00d4ff;
  --jc-cyan-light:  #7eeaff;

  /* Accent — Purple */
  --jc-purple:      #7c3aed;
  --jc-purple-light:#c4b5fd;

  /* ── Palette-aware alpha tokens (color-mix auto-inherits --jc-cyan / --jc-purple)
     These update automatically whenever a palette changes --jc-cyan or --jc-purple,
     including day theme and all user-selected colour themes.              ── */
  --jc-cyan-a03:  color-mix(in srgb, var(--jc-cyan)   3%, transparent);
  --jc-cyan-a04:  color-mix(in srgb, var(--jc-cyan)   4%, transparent);
  --jc-cyan-a05:  color-mix(in srgb, var(--jc-cyan)   5%, transparent);
  --jc-cyan-a06:  color-mix(in srgb, var(--jc-cyan)   6%, transparent);
  --jc-cyan-a07:  color-mix(in srgb, var(--jc-cyan)   7%, transparent);
  --jc-cyan-a08:  color-mix(in srgb, var(--jc-cyan)   8%, transparent);
  --jc-cyan-a10:  color-mix(in srgb, var(--jc-cyan)  10%, transparent);
  --jc-cyan-a11:  color-mix(in srgb, var(--jc-cyan)  11%, transparent);
  --jc-cyan-a12:  color-mix(in srgb, var(--jc-cyan)  12%, transparent);
  --jc-cyan-a14:  color-mix(in srgb, var(--jc-cyan)  14%, transparent);
  --jc-cyan-a15:  color-mix(in srgb, var(--jc-cyan)  15%, transparent);
  --jc-cyan-a16:  color-mix(in srgb, var(--jc-cyan)  16%, transparent);
  --jc-cyan-a18:  color-mix(in srgb, var(--jc-cyan)  18%, transparent);
  --jc-cyan-a20:  color-mix(in srgb, var(--jc-cyan)  20%, transparent);
  --jc-cyan-a22:  color-mix(in srgb, var(--jc-cyan)  22%, transparent);
  --jc-cyan-a25:  color-mix(in srgb, var(--jc-cyan)  25%, transparent);
  --jc-cyan-a28:  color-mix(in srgb, var(--jc-cyan)  28%, transparent);
  --jc-cyan-a30:  color-mix(in srgb, var(--jc-cyan)  30%, transparent);
  --jc-cyan-a35:  color-mix(in srgb, var(--jc-cyan)  35%, transparent);
  --jc-cyan-a40:  color-mix(in srgb, var(--jc-cyan)  40%, transparent);
  --jc-cyan-a45:  color-mix(in srgb, var(--jc-cyan)  45%, transparent);
  --jc-cyan-a50:  color-mix(in srgb, var(--jc-cyan)  50%, transparent);
  --jc-cyan-a55:  color-mix(in srgb, var(--jc-cyan)  55%, transparent);
  --jc-cyan-a60:  color-mix(in srgb, var(--jc-cyan)  60%, transparent);
  --jc-cyan-a70:  color-mix(in srgb, var(--jc-cyan)  70%, transparent);

  --jc-purple-a04: color-mix(in srgb, var(--jc-purple)  4%, transparent);
  --jc-purple-a05: color-mix(in srgb, var(--jc-purple)  5%, transparent);
  --jc-purple-a08: color-mix(in srgb, var(--jc-purple)  8%, transparent);
  --jc-purple-a10: color-mix(in srgb, var(--jc-purple) 10%, transparent);
  --jc-purple-a12: color-mix(in srgb, var(--jc-purple) 12%, transparent);
  --jc-purple-a13: color-mix(in srgb, var(--jc-purple) 13%, transparent);
  --jc-purple-a14: color-mix(in srgb, var(--jc-purple) 14%, transparent);
  --jc-purple-a15: color-mix(in srgb, var(--jc-purple) 15%, transparent);
  --jc-purple-a20: color-mix(in srgb, var(--jc-purple) 20%, transparent);
  --jc-purple-a22: color-mix(in srgb, var(--jc-purple) 22%, transparent);
  --jc-purple-a24: color-mix(in srgb, var(--jc-purple) 24%, transparent);
  --jc-purple-a30: color-mix(in srgb, var(--jc-purple) 30%, transparent);
  --jc-purple-a35: color-mix(in srgb, var(--jc-purple) 35%, transparent);
  --jc-purple-a40: color-mix(in srgb, var(--jc-purple) 40%, transparent);

  /* Semantic aliases that derive from the alpha tokens */
  --jc-border-hi:   var(--jc-cyan-a45);   /* accent/active border */
  --jc-cyan-dim:    var(--jc-cyan-a12);   /* tinted bg for active states */
  --jc-cyan-glow:   var(--jc-cyan-a25);   /* glow/halo effect */
  --jc-purple-dim:  var(--jc-purple-a13); /* tinted bg for purple states */

  /* Semantic status */
  --jc-success:     #10b981;
  --jc-success-dim: rgba(16,185,129,0.12);
  --jc-warning:     #f59e0b;
  --jc-warning-dim: rgba(245,158,11,0.12);
  --jc-danger:      #ef4444;
  --jc-danger-dim:  rgba(239,68,68,0.10);
  --jc-info:        #3b82f6;
  --jc-info-dim:    rgba(59,130,246,0.12);

  /* Text */
  --jc-text-primary:  #dce8ff;
  --jc-text-secondary:#8aaad4;
  --jc-text-muted:    #4d6a96;
  --jc-text-faint:    #2d4468;

  /* Typography — Sora display, Figtree body, JetBrains Mono code */
  --jc-font-display: 'Sora', 'Segoe UI', sans-serif;
  --jc-font-body:    'Figtree', 'Segoe UI', sans-serif;
  --jc-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Modular type scale — 1.25× ratio, base 14px */
  --jc-text-xs:   0.700rem;   /* 9.8px  — captions, labels */
  --jc-text-sm:   0.875rem;   /* 12.3px — secondary text */
  --jc-text-base: 0.875rem;   /* 14px   — body */
  --jc-text-md:   1.094rem;   /* 15.3px — subheading */
  --jc-text-lg:   1.375rem;   /* 19.3px — section heading */
  --jc-text-xl:   1.719rem;   /* 24px   — page title */
  --jc-text-2xl:  2.150rem;   /* 30px   — display */

  /* 8 px spacing grid */
  --jc-space-1:  8px;
  --jc-space-2:  16px;
  --jc-space-3:  24px;
  --jc-space-4:  32px;
  --jc-space-5:  40px;
  --jc-space-6:  48px;

  /* Radii */
  --jc-radius-sm:  5px;
  --jc-radius-md:  8px;
  --jc-radius-lg:  12px;
  --jc-radius-xl:  16px;
  --jc-radius-2xl: 24px;
  --jc-radius-3xl: 30px;
  --jc-radius-pill:9999px;

  /* Shadows */
  --jc-shadow-sm:   0 1px 4px rgba(0,0,0,0.22);
  --jc-shadow-md:   0 4px 16px rgba(0,0,0,0.35);
  --jc-shadow-lg:   0 8px 28px rgba(0,0,0,0.45);
  --jc-shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --jc-shadow-cyan:   0 0 16px var(--jc-cyan-a22);
  --jc-shadow-purple: 0 0 16px var(--jc-purple-a22);

  /* Transitions */
  --jc-transition: 160ms ease;
}

/* ─── GLOBAL RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--jc-bg-base); }

body {
  font-family: var(--jc-font-body);
  font-size: var(--jc-text-base);
  line-height: 1.6;
  color: var(--jc-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── BACKGROUND ────────────────────────────────────────────────── */
.jc-page-bg {
  background:
    radial-gradient(ellipse 900px 400px at 4%   -8%,  var(--jc-cyan-a10) 0%, transparent 65%),
    radial-gradient(ellipse 700px 360px at 96%  -6%,  var(--jc-purple-a10) 0%, transparent 65%),
    radial-gradient(ellipse 500px 250px at 50%  100%, var(--jc-cyan-a04) 0%, transparent 70%),
    linear-gradient(180deg, var(--jc-bg-surface) 0%, var(--jc-bg-base) 55%);
  min-height: 100vh;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
.jc-display   { font-family: var(--jc-font-display); font-size: var(--jc-text-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.jc-title     { font-family: var(--jc-font-display); font-size: var(--jc-text-xl);  font-weight: 700; letter-spacing: -0.02em;  line-height: 1.2; }
.jc-heading   { font-family: var(--jc-font-display); font-size: var(--jc-text-lg);  font-weight: 600; letter-spacing: -0.01em;  line-height: 1.3; }
.jc-subhead   { font-family: var(--jc-font-body);    font-size: var(--jc-text-md);  font-weight: 600; line-height: 1.4; }
.jc-body      { font-family: var(--jc-font-body);    font-size: var(--jc-text-base);font-weight: 400; line-height: 1.65; }
.jc-caption   { font-family: var(--jc-font-mono);    font-size: var(--jc-text-xs);  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.jc-mono      { font-family: var(--jc-font-mono);    font-size: var(--jc-text-sm);  font-weight: 400; }

/* Gradient title — white → cyan */
.jc-title-gradient {
  font-family: var(--jc-font-display);
  font-weight: 700;
  background: linear-gradient(120deg, #ffffff 25%, var(--jc-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── LAYOUT ────────────────────────────────────────────────────── */
.jc-container { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 var(--jc-space-3); }
.jc-container-sm { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--jc-space-3); }

.jc-stack   { display: flex; flex-direction: column; }
.jc-stack-1 { gap: var(--jc-space-1); }
.jc-stack-2 { gap: var(--jc-space-2); }
.jc-stack-3 { gap: var(--jc-space-3); }

.jc-row     { display: flex; align-items: center; }
.jc-row-between { display: flex; align-items: center; justify-content: space-between; }
.jc-wrap    { flex-wrap: wrap; }

/* ─── CARDS ─────────────────────────────────────────────────────── */
.jc-card {
  background: var(--jc-bg-card);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-card);
  overflow: hidden;
  transition: border-color var(--jc-transition);
}
.jc-card:hover { border-color: var(--jc-border-md); }

.jc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--jc-space-2) var(--jc-space-3);
  background: linear-gradient(135deg, var(--jc-bg-elevated) 0%, var(--jc-bg-card) 100%);
  border-bottom: 1px solid var(--jc-border);
}
.jc-card-body { padding: var(--jc-space-3); }
.jc-card-footer {
  padding: var(--jc-space-2) var(--jc-space-3);
  border-top: 1px solid var(--jc-border);
  background: rgba(6,13,26,0.3);
}

/* Elevated variant */
.jc-card-elevated {
  background: var(--jc-bg-elevated);
  border-color: var(--jc-border-md);
}

/* Glow variant — for active/highlighted cards */
.jc-card-glow {
  border-color: var(--jc-border-hi);
  box-shadow: var(--jc-shadow-card), var(--jc-shadow-cyan);
}

/* ─── SECTION PANELS (collapsible modules) ──────────────────────── */
.jc-panel {
  background: var(--jc-bg-card);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-lg);
  overflow: hidden;
  box-shadow: var(--jc-shadow-card);
}
.jc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jc-space-2);
  padding: var(--jc-space-2) var(--jc-space-3);
  background: linear-gradient(135deg, rgba(19,36,69,0.96) 0%, rgba(11,22,40,0.98) 100%);
  border-bottom: 1px solid var(--jc-border);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--jc-transition);
}
.jc-panel-header:hover { background: linear-gradient(135deg, rgba(22,40,78,1) 0%, rgba(14,28,50,1) 100%); }
.jc-panel-body { padding: var(--jc-space-3); }

/* ─── BUTTONS ───────────────────────────────────────────────────── */
/* Base */
.jc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jc-space-1);
  font-family: var(--jc-font-body);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--jc-radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--jc-transition);
  -webkit-user-select: none;
  user-select: none;
}
.jc-btn:focus-visible {
  outline: 2px solid var(--jc-cyan);
  outline-offset: 2px;
}
.jc-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.jc-btn-sm  { font-size: 0.72rem; padding: 0.3rem 0.75rem;  border-radius: var(--jc-radius-sm); }
.jc-btn-md  { font-size: 0.82rem; padding: 0.52rem 1.1rem;  border-radius: var(--jc-radius-md); }
.jc-btn-lg  { font-size: 0.9rem;  padding: 0.68rem 1.5rem;  border-radius: var(--jc-radius-md); }

/* PRIMARY — Cyan fill, dark text. Main CTA. */
.jc-btn-primary {
  background: var(--jc-cyan);
  border-color: var(--jc-cyan);
  color: #030e1d;
}
.jc-btn-primary:hover {
  background: var(--jc-cyan-light);
  box-shadow: var(--jc-shadow-cyan);
  transform: translateY(-1px);
}
.jc-btn-primary:active { transform: translateY(0); }

/* SECONDARY — Purple tinted. Supporting actions. */
.jc-btn-secondary {
  background: var(--jc-purple-dim);
  border-color: var(--jc-purple-a40);
  color: var(--jc-purple-light);
}
.jc-btn-secondary:hover {
  background: var(--jc-purple-a22);
  box-shadow: var(--jc-shadow-purple);
  transform: translateY(-1px);
}

/* GHOST — Transparent outline. Low-emphasis, navigation. */
.jc-btn-ghost {
  background: transparent;
  border-color: var(--jc-border-md);
  color: var(--jc-text-secondary);
}
.jc-btn-ghost:hover {
  border-color: var(--jc-border-hi);
  color: var(--jc-cyan);
  background: var(--jc-cyan-dim);
}

/* DANGER — Red tinted. Destructive actions. */
.jc-btn-danger {
  background: var(--jc-danger-dim);
  border-color: rgba(239,68,68,0.3);
  color: #fca5a5;
}
.jc-btn-danger:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.55);
}

/* SUCCESS — Green tinted. Confirm / send. */
.jc-btn-success {
  background: var(--jc-success-dim);
  border-color: rgba(16,185,129,0.3);
  color: #6ee7b7;
}
.jc-btn-success:hover {
  background: rgba(16,185,129,0.22);
  border-color: rgba(16,185,129,0.55);
}

/* ICON BUTTON — Square, small action icon */
.jc-btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--jc-radius-sm);
  background: var(--jc-cyan-dim);
  border-color: var(--jc-cyan-a25);
  color: var(--jc-cyan);
  font-size: 1rem;
  font-weight: 700;
}
.jc-btn-icon:hover {
  background: var(--jc-cyan-a20);
  border-color: var(--jc-border-hi);
}

/* ─── FORM ELEMENTS ─────────────────────────────────────────────── */
.jc-label {
  display: block;
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--jc-text-muted);
  margin-bottom: 6px;
}

.jc-input,
.jc-select {
  width: 100%;
  font-family: var(--jc-font-body);
  font-size: var(--jc-text-base);
  color: var(--jc-text-primary);
  background: rgba(6,13,26,0.75);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  padding: 0.58rem 0.9rem;
  transition: border-color var(--jc-transition), box-shadow var(--jc-transition);
  -webkit-appearance: none;
  appearance: none;
}
.jc-input::placeholder { color: var(--jc-text-faint); }
.jc-input:focus,
.jc-select:focus {
  outline: none;
  border-color: var(--jc-border-hi);
  box-shadow: 0 0 0 3px var(--jc-cyan-a10), 0 0 14px var(--jc-cyan-a07);
}
.jc-input:disabled,
.jc-select:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.jc-select option { background: var(--jc-bg-card); color: var(--jc-text-primary); }

/* Field group */
.jc-field { display: flex; flex-direction: column; gap: 6px; }

/* ─── RADIO PILLS ───────────────────────────────────────────────── */
/* Usage: <input type="radio" id="x" class="jc-radio-input"> <label for="x" class="jc-radio-pill">Label</label> */
.jc-radio-input { display: none; }
.jc-radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--jc-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--jc-text-secondary);
  background: rgba(11,22,40,0.9);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-sm);
  padding: 0.36rem 0.82rem;
  cursor: pointer;
  transition: all 0.14s ease;
  -webkit-user-select: none;
  user-select: none;
}
.jc-radio-pill:hover {
  border-color: var(--jc-cyan-a30);
  color: var(--jc-text-primary);
  background: var(--jc-cyan-a05);
}
.jc-radio-input:checked + .jc-radio-pill {
  background: var(--jc-cyan-a12);
  border-color: var(--jc-cyan);
  color: var(--jc-cyan);
  box-shadow: 0 0 10px var(--jc-cyan-a16);
}

/* ─── BADGES ────────────────────────────────────────────────────── */
.jc-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--jc-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--jc-radius-sm);
  padding: 0.18rem 0.55rem;
  border: 1px solid;
}
.jc-badge-cyan    { background: var(--jc-cyan-dim);    border-color: var(--jc-cyan-a30);    color: var(--jc-cyan); }
.jc-badge-purple  { background: var(--jc-purple-dim);  border-color: var(--jc-purple-a35);  color: var(--jc-purple-light); }
.jc-badge-success { background: var(--jc-success-dim); border-color: rgba(16,185,129,0.3);   color: #6ee7b7; }
.jc-badge-warning { background: var(--jc-warning-dim); border-color: rgba(245,158,11,0.35);  color: #fcd34d; }
.jc-badge-danger  { background: var(--jc-danger-dim);  border-color: rgba(239,68,68,0.3);    color: #fca5a5; }
.jc-badge-muted   { background: rgba(11,22,40,0.7);    border-color: var(--jc-border);        color: var(--jc-text-muted); }

/* MODULE / SECTION badges (header pills) */
.jc-module-badge {
  font-family: var(--jc-font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.18rem 0.52rem;
  border: 1px solid;
}

/* ─── CONTEXT RIBBON ────────────────────────────────────────────── */
.jc-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jc-space-1);
  padding: 0.6rem var(--jc-space-2);
  background: rgba(6,13,26,0.65);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.jc-ribbon-chip {
  font-family: var(--jc-font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--jc-text-muted);
  background: rgba(11,22,40,0.8);
  border: 1px solid var(--jc-border);
  border-radius: 4px;
  padding: 0.22rem 0.6rem;
}

/* ─── STATUS INDICATOR ──────────────────────────────────────────── */
.jc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--jc-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid;
}
.jc-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.jc-status-active   { background: var(--jc-success-dim); border-color: rgba(16,185,129,0.3);  color: #6ee7b7; }
.jc-status-active::before { background: var(--jc-success); box-shadow: 0 0 5px var(--jc-success); }
.jc-status-pending  { background: var(--jc-warning-dim); border-color: rgba(245,158,11,0.3);  color: #fcd34d; }
.jc-status-pending::before { background: var(--jc-warning); }
.jc-status-error    { background: var(--jc-danger-dim);  border-color: rgba(239,68,68,0.3);   color: #fca5a5; }
.jc-status-error::before { background: var(--jc-danger); }
.jc-status-inactive { background: rgba(11,22,40,0.7);   border-color: var(--jc-border);        color: var(--jc-text-muted); }
.jc-status-inactive::before { background: var(--jc-text-faint); }

/* ─── TABLE ─────────────────────────────────────────────────────── */
.jc-table { width: 100%; border-collapse: collapse; }
.jc-table th {
  font-family: var(--jc-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jc-text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--jc-border);
  text-align: left;
  white-space: nowrap;
}
.jc-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--jc-border);
  font-size: var(--jc-text-base);
  color: var(--jc-text-primary);
}
.jc-table tr:hover td { background: var(--jc-cyan-a03); }
.jc-table tr:last-child td { border-bottom: none; }

/* ─── PAGE HEADER ───────────────────────────────────────────────── */
.jc-page-header { padding: var(--jc-space-4) 0 var(--jc-space-3); }

/* Step breadcrumb */
.jc-breadcrumb {
  font-family: var(--jc-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jc-text-faint);
  margin-bottom: var(--jc-space-2);
}

/* ─── NAV FOOTER ────────────────────────────────────────────────── */
.jc-nav-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--jc-space-3);
  border-top: 1px solid var(--jc-border);
  margin-top: var(--jc-space-2);
}

/* ─── EMPTY STATE ───────────────────────────────────────────────── */
.jc-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--jc-space-3) var(--jc-space-2);
  border: 1px dashed rgba(90,130,200,0.15);
  border-radius: var(--jc-radius-md);
  background: rgba(6,13,26,0.3);
  color: var(--jc-text-muted);
  font-size: var(--jc-text-sm);
}

/* ─── DIVIDER ───────────────────────────────────────────────────── */
.jc-divider { border: none; border-top: 1px solid var(--jc-border); margin: 0; }

/* ─── ALERTS / BANNERS ──────────────────────────────────────────── */
.jc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--jc-space-2);
  padding: var(--jc-space-2) var(--jc-space-2);
  border-radius: var(--jc-radius-md);
  border: 1px solid;
  font-size: var(--jc-text-sm);
}
.jc-alert-info    { background: var(--jc-info-dim);    border-color: rgba(59,130,246,0.3);  color: #93c5fd; }
.jc-alert-success { background: var(--jc-success-dim); border-color: rgba(16,185,129,0.3);  color: #6ee7b7; }
.jc-alert-warning { background: var(--jc-warning-dim); border-color: rgba(245,158,11,0.3);  color: #fcd34d; }
.jc-alert-danger  { background: var(--jc-danger-dim);  border-color: rgba(239,68,68,0.3);   color: #fca5a5; }

/* ─── MODAL OVERLAY ─────────────────────────────────────────────── */
.jc-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(6,13,26,0.82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.jc-modal {
  background: var(--jc-bg-elevated);
  border: 1px solid var(--jc-border-md);
  border-radius: var(--jc-radius-xl);
  padding: var(--jc-space-3);
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.jc-modal-title {
  font-family: var(--jc-font-display);
  font-size: var(--jc-text-md);
  font-weight: 700;
  color: var(--jc-text-primary);
  margin: 0 0 var(--jc-space-1);
}
.jc-modal-body {
  font-size: var(--jc-text-sm);
  color: var(--jc-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--jc-space-3);
}
.jc-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--jc-space-1);
}

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--jc-bg-elevated); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--jc-text-faint); }

/* ══════════════════════════════════════════════════════════════════
 *  DESIGN SYSTEM EXTENSIONS  v1.1
 *  A. Theme system  B. Font scale  C. Tooltips  D. Ripple
 *  E. Backdrop/Modal  F. Responsive  G. Field focus animations
 * ══════════════════════════════════════════════════════════════════ */

/* ─── A. THEME SYSTEM (night / day / auto) ──────────────────────── */

/* Night is the default — mirrors the root tokens already defined.
   Explicit [data-theme="night"] restores them if day was applied. */
[data-theme="night"] {
  --jc-bg-base:     #060d1a;
  --jc-bg-surface:  #0b1628;
  --jc-bg-card:     #0e1e38;
  --jc-text-primary:  #dce8ff;
  --jc-text-secondary:#8aaad4;
}

/* Day overrides — lighter navy/slate palette */
[data-theme="day"] {
  --jc-bg-base:       #e8f0fe;
  --jc-bg-surface:    #f0f5ff;
  --jc-bg-card:       #ffffff;
  --jc-bg-elevated:   #eaf0fa;
  --jc-bg-raised:     #f4f8ff;   /* nested panels in day */
  --jc-bg-sunken:     rgba(230,238,254,0.8); /* inputs in day */
  --jc-border-subtle: rgba(30,80,180,0.08);
  --jc-border:        rgba(30,80,180,0.15);
  --jc-border-md:     rgba(30,80,180,0.28);
  /* Day uses 50% opacity for accent border (slightly stronger than night's 45%) */
  --jc-border-hi:     var(--jc-cyan-a50);
  --jc-text-primary:  #0d1e3a;
  --jc-text-secondary:#2a4a7f;
  --jc-text-muted:    #4a6fa5;
  --jc-text-faint:    #7a9fd4;
  --jc-cyan:          #0077cc;
  --jc-cyan-light:    #4fa8e0;
  /* --jc-cyan-dim / --jc-cyan-glow / --jc-purple-dim: auto-derive from --jc-cyan-a* tokens */
  --jc-success:       #059669;
  --jc-warning:       #d97706;
  --jc-danger:        #dc2626;
  --jc-success-dim:   rgba(5,150,105,0.1);
  --jc-warning-dim:   rgba(217,119,6,0.1);
  --jc-danger-dim:    rgba(220,38,38,0.08);
  --jc-shadow-sm:     0 1px 3px rgba(20,60,160,0.07);
  --jc-shadow-md:     0 2px 10px rgba(20,60,160,0.09);
  --jc-shadow-lg:     0 6px 20px rgba(20,60,160,0.12);
  --jc-shadow-card:   0 2px 12px rgba(20,60,160,0.10);
  /* Day glow is subtler (12px/15% vs night's 16px/22%) — palette-aware via var */
  --jc-shadow-cyan:   0 0 12px var(--jc-cyan-a15);
}

/* Smooth theme transition on the html element */
html {
  transition: background 0.4s ease, color 0.3s ease;
}

/* ─── B. FONT SCALE SYSTEM ──────────────────────────────────────── */
:root { --jc-scale: 1; }

[data-font="md"] { --jc-scale: 1; }

[data-font="lg"] {
  /* Base font-size bump: ALL rem values scale proportionally — including every !important override */
  font-size: 119%;   /* ≈ 19px at 16px base */
  --jc-scale: 1.18;
  --jc-text-xs:   calc(0.700rem * 1.18);
  --jc-text-sm:   calc(0.875rem * 1.18);
  --jc-text-base: calc(0.875rem * 1.18);
  --jc-text-md:   calc(1.094rem * 1.18);
  --jc-text-lg:   calc(1.375rem * 1.18);
  --jc-text-xl:   calc(1.719rem * 1.18);
  --jc-text-2xl:  calc(2.150rem * 1.18);
}

[data-font="xl"] {
  /* Accessible large mode: ~42% bigger for elderly / low-vision users */
  font-size: 143%;   /* ≈ 23px at 16px base */
  --jc-scale: 1.42;
  --jc-text-xs:   calc(0.700rem * 1.42);
  --jc-text-sm:   calc(0.875rem * 1.42);
  --jc-text-base: calc(0.875rem * 1.42);
  --jc-text-md:   calc(1.094rem * 1.42);
  --jc-text-lg:   calc(1.375rem * 1.42);
  --jc-text-xl:   calc(1.719rem * 1.42);
  --jc-text-2xl:  calc(2.150rem * 1.42);
}

/* ─── C. TOOLTIP COMPONENT ──────────────────────────────────────── */
/* Usage: <span data-tooltip="Tooltip text">element</span> */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(11,22,42,0.96);
  border: 1px solid var(--jc-cyan-a25);
  color: #dce8ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Day theme tooltip — light background, dark text */
[data-theme="day"] [data-tooltip]::after {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,119,204,0.25);
  color: #0d1e3a;
}

/* ─── D. RIPPLE EFFECT FOR BUTTONS ─────────────────────────────── */
.jc-btn { overflow: hidden; }

.jc-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: ripple-expand 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ─── E. BACKDROP OVERLAY FOR MODALS ───────────────────────────── */
.jc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4,8,18,0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade-in 0.2s ease forwards;
}

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

.jc-modal {
  animation: modal-in 0.28s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ─── F. RESPONSIVE UTILITIES ───────────────────────────────────── */

/* Mobile-first: < 768px */
@media (max-width: 767px) {
  .jc-container { padding: 0 1rem; }
  .jc-card-header { padding: 0.85rem 1rem; }
  .jc-card-body { padding: 1rem; }
  .jc-panel-body { padding: 1rem; }
  .jc-nav-footer { flex-direction: column; gap: 0.75rem; }
  .jc-nav-footer .jc-btn { width: 100%; justify-content: center; }
  .jc-btn-lg { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
}

/* Tablet: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .jc-container { padding: 0 1.5rem; }
}

/* ─── G. CINEMATIC FIELD FOCUS ANIMATIONS ───────────────────────── */
/* Wrap inputs in .jc-field-wrap for the animated underline effect */
.jc-field-wrap { position: relative; }

.jc-field-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--jc-cyan);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.22,1,0.36,1);
  border-radius: 1px;
}

.jc-field-wrap:focus-within::after { width: 100%; }

.jc-field-wrap:focus-within .jc-label { color: var(--jc-cyan); transform: none; }

.jc-label { transition: color 0.2s ease; }