@import url('https://cdn.jsdelivr.net/npm/geist@1.0.3/dist/fonts/geist-sans/style.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* Grammar & Spelling Highlights */
.highlight-grammar {
  border-bottom: 2px wavy #ef4444;
  background: rgba(239, 68, 68, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.highlight-grammar:hover {
  background: rgba(239, 68, 68, 0.12);
}
.highlight-spelling {
  border-bottom: 2px wavy #f59e0b;
  background: rgba(245, 158, 11, 0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.highlight-spelling:hover {
  background: rgba(245, 158, 11, 0.12);
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #534AB7, #7F77DD, #5DCAA5);
  transform-origin: left;
  z-index: 9999;
  transform: scaleX(0);
}

/* Motion Toast */
#motionToastContainer {
  position: fixed;
  top: 68px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REZDER — Unified Design System v4
   Inspired by: rezder waitlist visual language
   Applies to: landing page, builder shell, dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────────────────── */
/* 1. DESIGN TOKENS (light + dark)                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand:            #534AB7;   /* Rezder-inspired violet — feels premium */
  --brand-light:      #7F77DD;
  --brand-dark:       #3d3690;
  --brand-subtle:     rgba(83,74,183,0.12);
  --brand-subtle-border: rgba(127,119,221,0.35);

  /* ── Accent ─────────────────────────────────────────── */
  --accent-green:     #1D9E75;
  --accent-green-dim: rgba(29,158,117,0.15);
  --accent-green-border: rgba(93,202,165,0.35);
  --accent-green-text: #5DCAA5;

  /* ── Semantic ───────────────────────────────────────── */
  --color-success:    #22c55e;
  --color-danger:     #ef4444;
  --color-warning:    #f59e0b;

  /* ── Typography ─────────────────────────────────────── */
  --font:        'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'DM Mono', 'Fira Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  52px;

  /* ── Spacing (8px grid) ─────────────────────────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s14: 56px; --s16: 64px; --s20: 80px;

  /* ── Radii ──────────────────────────────────────────── */
  --r-xs: 4px;  --r-sm: 6px;   --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px;  --r-2xl: 24px;
  --r-full: 9999px;

  /* ── Transitions ────────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     150ms;
  --dur-base:     220ms;
  --dur-slow:     350ms;

  /* ── Layout ─────────────────────────────────────────── */
  --container:    1200px;
  --sidebar-w:    228px;
  --sidebar-col:  64px;
  --topbar-h:     58px;
  --navbar-h:     68px;
}

/* ── LIGHT MODE SURFACES ──────────────────────────────────────────────────── */
:root,
body:not(.dark-mode) {
  --bg:           #f7f8fc;
  --bg-2:         #ffffff;
  --bg-3:         #eef0f8;
  --surface:      rgba(255,255,255,0.88);
  --surface-solid: #ffffff;
  --glass:        rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.30);

  --text:         #0f172a;
  --text-2:       #475569;
  --text-3:       #94a3b8;
  --text-inv:     #ffffff;

  --border:       rgba(148,163,184,0.25);
  --border-2:     rgba(148,163,184,0.15);

  --primary:      var(--brand);
  --primary-hover: var(--brand-dark);
  --primary-glow: rgba(83,74,183,0.30);

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow:       0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.14);

  /* glass palette for shell */
  --glass-50:     rgba(255,255,255,0.55);
  --glass-60:     rgba(255,255,255,0.65);
  --glass-70:     rgba(255,255,255,0.72);
  --glass-90:     rgba(255,255,255,0.88);
  --glass-blur:   blur(22px) saturate(180%);

  --radius: 12px;
  --radius-lg: 16px;
  --speed: 0.22s;
}

/* ── DARK MODE SURFACES ───────────────────────────────────────────────────── */
body.dark-mode {
  /* Base */
  --bg:           #07070e;    /* Hexscaler deep dark */
  --bg-2:         #0f0e1c;
  --bg-3:         #14131f;
  --surface:      rgba(15,14,28,0.95);
  --surface-solid: #0f0e1c;
  --glass:        rgba(15,14,28,0.75);
  --glass-border: rgba(83,74,183,0.20);

  --text:         #e8e6f8;
  --text-2:       #AFA9EC;    /* Hexscaler muted violet-white */
  --text-3:       rgba(255,255,255,0.35);
  --text-inv:     #07070e;

  --border:       rgba(83,74,183,0.22);
  --border-2:     rgba(255,255,255,0.08);

  --primary:      #7F77DD;    /* Lightened for dark bg */
  --primary-hover: #9d97e8;
  --primary-glow: rgba(127,119,221,0.35);

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.35);
  --shadow:       0 4px 20px rgba(0,0,0,0.45);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.6);

  /* glass palette for shell */
  --glass-50:     rgba(15,14,28,0.50);
  --glass-60:     rgba(15,14,28,0.65);
  --glass-70:     rgba(15,14,28,0.75);
  --glass-90:     rgba(15,14,28,0.92);
  --glass-blur:   blur(24px) saturate(180%);

  --radius: 12px;
  --radius-lg: 16px;
  --speed: 0.22s;

  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 2. RESET + BASE                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

a { color: var(--primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--primary-hover); }

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.02em;
}

button { font-family: var(--font); }
input,textarea,select { font-family: var(--font); font-size: var(--text-base); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 3. BACKGROUND SYSTEM                                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Animated orbs — used on landing + builder bg */
.rz-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.rz-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Light mode orbs */
body:not(.dark-mode) .rz-orb-a {
  top: -160px; left: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(83,74,183,0.12) 0%, transparent 70%);
}
body:not(.dark-mode) .rz-orb-b {
  top: 40%; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(29,158,117,0.10) 0%, transparent 70%);
}
body:not(.dark-mode) .rz-orb-c {
  bottom: 0; left: 35%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(83,74,183,0.08) 0%, transparent 70%);
}

/* Dark mode orbs (richer, from hexscaler) */
body.dark-mode .rz-orb-a {
  top: -120px; left: -100px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(83,74,183,0.40) 0%, transparent 70%);
  animation: orb-drift 20s ease-in-out infinite;
}
body.dark-mode .rz-orb-b {
  top: 300px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(29,158,117,0.22) 0%, transparent 70%);
  animation: orb-drift 25s ease-in-out infinite reverse;
}
body.dark-mode .rz-orb-c {
  bottom: 0; left: 30%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(83,74,183,0.15) 0%, transparent 70%);
}

@keyframes orb-drift {
  0%,100% { transform: translate(0,0); }
  33%      { transform: translate(20px,-15px); }
  66%      { transform: translate(-15px,20px); }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 4. LAYOUT HELPERS                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s6);
}
@media (min-width: 1280px) { .container { padding: 0 var(--s10); } }

.section { padding: var(--s20) 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }

.text-center  { text-align: center; }
.text-muted   { color: var(--text-3); }
.gradient-text {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 5. BUTTON SYSTEM                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 11px 20px;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-md);
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  text-decoration: none;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Primary — filled violet */
.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-light);
  border-color: var(--brand-light);
  box-shadow: 0 6px 20px var(--primary-glow);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: scale(0.97); }

/* Secondary — ghost with border */
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.18);
}
body:not(.dark-mode) .btn-secondary {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--brand-subtle);
  border-color: var(--brand-subtle-border);
  color: var(--primary);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
body:not(.dark-mode) .btn-ghost:hover:not(:disabled) {
  background: var(--bg-3);
}

/* Outline */
.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover:not(:disabled) {
  background: var(--brand-subtle);
}

/* Sizes */
.btn-sm  { padding: 7px 14px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn-lg  { padding: var(--s4) var(--s8); font-size: var(--text-md); border-radius: var(--r-lg); height: 52px; }
.btn-xl  { padding: 18px var(--s10); font-size: var(--text-lg); border-radius: var(--r-lg); height: 60px; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 6. FORM ELEMENTS                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

input, textarea, select {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.20);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

body:not(.dark-mode) input,
body:not(.dark-mode) textarea,
body:not(.dark-mode) select {
  background: var(--bg-2);
  border-color: var(--border);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

input::placeholder, textarea::placeholder { color: var(--text-3); }

select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
  border-color: var(--border);
  color: var(--text);
}

/* CRITICAL: Dropdown option backgrounds — no transparency artifacts */
select option {
  background: var(--surface-solid) !important;
  color: var(--text) !important;
}
body.dark-mode select option {
  background: #0f0e1c !important;
  color: #e8e6f8 !important;
}

/* Label */
label, .form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--s2);
  letter-spacing: -0.01em;
}

/* Form group */
.form-group { margin-bottom: var(--s4); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 7. CARD / SURFACE COMPONENTS                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  transition: all var(--dur-base) var(--ease);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.card:hover {
  border-color: var(--brand-subtle-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

body.dark-mode .card {
  background: rgba(15,14,28,0.70);
  border-color: rgba(83,74,183,0.18);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

body.dark-mode .card:hover {
  border-color: rgba(127,119,221,0.40);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(127,119,221,0.20);
}

/* Feat card (dark transparent — hexscaler style) */
.feat-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: var(--s4) var(--s5);
  transition: all var(--dur-base) var(--ease);
}
.feat-card:hover {
  background: var(--brand-subtle);
  border-color: var(--brand-subtle-border);
}

body:not(.dark-mode) .feat-card {
  background: var(--bg-2);
  border-color: var(--border);
}
body:not(.dark-mode) .feat-card:hover {
  border-color: var(--brand);
  background: rgba(83,74,183,0.04);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 8. BADGE / PILL / CHIP                                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.badge-brand {
  background: var(--brand-subtle);
  color: var(--primary);
  border: 0.5px solid var(--brand-subtle-border);
}

.badge-green {
  background: var(--accent-green-dim);
  color: var(--accent-green-text);
  border: 0.5px solid var(--accent-green-border);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--brand-subtle);
  border: 0.5px solid var(--brand-subtle-border);
  color: var(--primary);
  margin-bottom: var(--s4);
}

/* Live chip with dot (hexscaler) */
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(83,74,183,0.18);
  border: 0.5px solid rgba(175,169,236,0.40);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--text-2);
  letter-spacing: 0.05em;
}

.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-light);
  animation: blink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* Filter pill */
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.10);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
}
body:not(.dark-mode) .filter-pill {
  background: var(--bg-2);
  border-color: var(--border);
}
.filter-pill:hover {
  border-color: var(--brand-subtle-border);
  color: var(--primary);
  background: var(--brand-subtle);
}
.filter-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 9. SECTION HEADER                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.section-header {
  max-width: 640px;
  margin: 0 auto var(--s12);
}
.section-title {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.10;
  margin-bottom: var(--s4);
  color: var(--text);
}
.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-2);
  line-height: 1.65;
}
@media (max-width:768px) {
  .section-title { font-size: var(--text-3xl); }
  .section-subtitle { font-size: var(--text-md); }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 10. SCROLL ANIMATIONS                                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.scroll-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.scroll-animate.visible { opacity: 1; transform: translateY(0); }

.delay-100 { transition-delay: 80ms; }
.delay-200 { transition-delay: 160ms; }
.delay-300 { transition-delay: 240ms; }
.delay-400 { transition-delay: 320ms; }
.delay-500 { transition-delay: 400ms; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 11. TOAST / NOTIFICATIONS                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.toast, .rz-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 18px;
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: all 0.25s var(--ease);
  max-width: 320px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.toast.show, .rz-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.dark-mode .toast,
body.dark-mode .rz-toast {
  background: rgba(15,14,28,0.95) !important;
  border: 0.5px solid rgba(83,74,183,0.40) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

body:not(.dark-mode) .toast,
body:not(.dark-mode) .rz-toast {
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.toast.success, .rz-toast.success { border-color: rgba(29,158,117,0.5) !important; }
.toast.error,   .rz-toast.error   { border-color: rgba(239,68,68,0.5) !important; }

/* Toast container */
#toastContainer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 12. SPINNER                                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.20);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fpulse {
  0%,100%{transform:scale(.7);opacity:.7}
  50%{transform:scale(1.1);opacity:1}
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 13. SKELETON LOADER                                                          */
/* ─────────────────────────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-md);
}
body:not(.dark-mode) .skeleton {
  background: linear-gradient(90deg,
    var(--bg-3) 25%,
    var(--border) 50%,
    var(--bg-3) 75%
  );
  background-size: 400px 100%;
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 14. KEYWORD CHIPS (ATS style from hexscaler)                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.kw { font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 500; }
.kw-hit { background: var(--accent-green-dim); color: var(--accent-green-text); border: 0.5px solid var(--accent-green-border); }
.kw-miss { background: rgba(226,75,74,0.10); color: #F09595; border: 0.5px solid rgba(226,75,74,0.25); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 15. PROGRESS / SCORE BARS                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.progress-bar-bg {
  background: rgba(255,255,255,0.07);
  border-radius: var(--r-full);
  height: 5px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  transition: width 0.8s var(--ease-out);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 16. COUNTDOWN CELLS (hexscaler style)                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.cu {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: 14px 20px;
  text-align: center;
  min-width: 74px;
}
.cu-n {
  font-size: 30px;
  font-weight: 500;
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cu-l {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 17. SCROLLBARS                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(83,74,183,0.30);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(127,119,221,0.50);
}
body:not(.dark-mode) ::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.35);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 18. FOCUS / ACCESSIBILITY                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 19. RESPONSIVE HELPERS                                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hide-mobile  { display: none !important; }
  :root { --navbar-h: 60px; }
}
@media (min-width: 769px) { .hide-desktop { display: none !important; } }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 20. ANIMATIONS                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatY {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 21. FORM UTILITY CLASSES (.form-group, .form-label, .form-input etc.)       */
/* Used by: cover_letter.html, job_search.html, resume_optimizer.html, etc.   */
/* ─────────────────────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 16px;
}

.form-label, label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(83,74,183,0.14);
}

.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-3);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-select,
select {
  background-image: none;
  padding-right: 12px;
  cursor: pointer;
}

/* Dark mode form elements */
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
  background: rgba(15,14,28,0.90) !important;
  border-color: rgba(83,74,183,0.28) !important;
  color: var(--text) !important;
}
body.dark-mode .form-input::placeholder,
body.dark-mode .form-textarea::placeholder {
  color: rgba(255,255,255,0.28) !important;
}
body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus,
body.dark-mode .form-textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(83,74,183,0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 22. MISC UTILITIES USED ACROSS PAGES                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

/* --primary-bg used in some pages */
:root {
  --primary-bg: rgba(83,74,183,0.10);
  --green:  #16a34a;  --green-bg:  rgba(22,163,74,0.10);
  --red:    #ef4444;  --red-bg:    rgba(239,68,68,0.10);
  --yellow: #f59e0b;  --yellow-bg: rgba(245,158,11,0.10);
}

/* Score colours */
.score-good   { color: #16a34a !important; }
.score-avg    { color: #ca8a04 !important; }
.score-poor   { color: #dc2626 !important; }

/* Common page wrapper for shell pages */
.rz-shell { display: flex; height: 100vh; overflow: hidden; position: relative; z-index: 1; }

/* Dark mode: glass panel backgrounds used inline by some pages */
body.dark-mode .cl-input,
body.dark-mode .cl-output,
body.dark-mode [style*="background:rgba(255,255,255,0.72)"],
body.dark-mode [style*="background: rgba(255,255,255,0.72)"],
body.dark-mode [style*="background:rgba(255,255,255,0.50)"],
body.dark-mode [style*="background: rgba(255,255,255,0.50)"] {
  background: rgba(7,7,14,0.85) !important;
  border-color: rgba(83,74,183,0.20) !important;
}

body, button, input, textarea, select, .font-body-md, .font-sans, [class*="font-"] {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Glass panel styling from unified cinematic design */
.glass-panel {
  color: var(--rz-text, #e5e2e1);
}
body:not(.dark-mode) .glass-panel {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(83,74,183,0.15) !important;
  color: #1e1b3a !important;
}
.glass-panel .w-\[1px\], .glass-panel .h-\[1px\] {
  background: rgba(255,255,255,0.15) !important;
}
body:not(.dark-mode) .glass-panel .w-\[1px\],
body:not(.dark-mode) .glass-panel .h-\[1px\] {
  background: rgba(83,74,183,0.15) !important;
}