:root {
  --background: 224 55% 97%;
  --foreground: 231 48% 9%;
  --primary: 258 92% 58%;
  --secondary: 189 92% 46%;
  --accent: 325 91% 60%;
  --muted: 230 16% 43%;
  --destructive: 350 86% 58%;
  --border: 232 25% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(230 44% 18% / 0.08);
  --shadow-md: 0 18px 48px hsl(230 44% 18% / 0.14);
  --shadow-lg: 0 30px 90px hsl(258 95% 42% / 0.24);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 30px;
}

.dark {
  --background: 232 48% 6%;
  --foreground: 210 40% 98%;
  --primary: 265 98% 70%;
  --secondary: 185 95% 56%;
  --accent: 325 92% 66%;
  --muted: 226 18% 72%;
  --destructive: 350 95% 66%;
  --border: 230 30% 24%;
  --card: 232 38% 12%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: -24%;
  z-index: -3;
  background:
    radial-gradient(circle at 14% 8%, hsl(var(--primary) / 0.38), transparent 26%),
    radial-gradient(circle at 88% 16%, hsl(var(--secondary) / 0.30), transparent 28%),
    radial-gradient(circle at 42% 88%, hsl(var(--accent) / 0.22), transparent 34%),
    linear-gradient(135deg, hsl(var(--background)), hsl(var(--background)));
  filter: saturate(1.18);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 22%, hsl(var(--secondary) / 0.08) 23%, transparent 46%),
    linear-gradient(hsl(var(--foreground) / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}
button, a, input, select, textarea { transition: var(--transition-smooth); }
button, a { min-height: 44px; }
button:disabled { opacity: 0.62; cursor: not-allowed; transform: none !important; }
input, select, textarea { font-size: max(16px, 1rem); }

.auth-bg, .app-shell { position: relative; overflow-x: hidden; }
.auth-bg::after, .app-shell::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(circle at center, hsl(var(--foreground) / 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.nav-shell {
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.76);
  backdrop-filter: blur(22px) saturate(1.3);
}
.nav-rail {
  padding: 5px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.42);
}
.glass-card {
  position: relative;
  border: 1px solid hsl(var(--border));
  background:
    linear-gradient(145deg, hsl(var(--card) / 0.84), hsl(var(--card) / 0.50)),
    linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--secondary) / 0.06));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(24px) saturate(1.25);
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.20), transparent 36%, hsl(var(--secondary) / 0.08));
}
.glass-card > * { position: relative; z-index: 1; }
.hero-shell {
  padding: 14px;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius-lg) + 10px);
  background: hsl(var(--card) / 0.32);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}
.login-showcase {
  min-height: 610px;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 56px);
  background:
    radial-gradient(circle at 24% 18%, hsl(var(--secondary) / 0.28), transparent 28%),
    radial-gradient(circle at 82% 78%, hsl(var(--primary) / 0.30), transparent 32%),
    linear-gradient(145deg, hsl(var(--card) / 0.66), hsl(var(--card) / 0.28));
  border: 1px solid hsl(var(--border));
  overflow: hidden;
}
.login-showcase::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  right: 8%;
  bottom: 12%;
  border-radius: 50%;
  border: 1px solid hsl(var(--secondary) / 0.32);
  box-shadow: inset 0 0 46px hsl(var(--secondary) / 0.16), 0 0 70px hsl(var(--primary) / 0.18);
}
.auth-panel { align-self: stretch; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
  border: 1px solid hsl(var(--primary) / 0.24);
  font-weight: 850;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.logo-orb {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: white;
  font-weight: 1000;
  background: conic-gradient(from 180deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent)), hsl(var(--primary)));
  box-shadow: 0 0 30px hsl(var(--primary) / 0.45), inset 0 0 14px hsl(0 0% 100% / 0.24);
}
.theme-toggle, .btn-primary, .btn-secondary, .btn-ghost, .mode-btn, .nav-pill, .bottom-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 850;
  text-decoration: none;
  padding: 0 18px;
  min-height: 48px;
  border: 1px solid transparent;
}
.theme-toggle {
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: hsl(var(--foreground));
  background: hsl(var(--card) / 0.56);
  border-color: hsl(var(--border));
}
.theme-toggle span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
}
.btn-primary {
  color: white;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)) 58%, hsl(var(--accent)));
  box-shadow: 0 16px 36px hsl(var(--primary) / 0.26);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-secondary {
  color: hsl(var(--foreground));
  background: hsl(var(--secondary) / 0.14);
  border-color: hsl(var(--secondary) / 0.30);
}
.btn-secondary:hover, .btn-ghost:hover, .theme-toggle:hover { transform: translateY(-1px); border-color: hsl(var(--primary) / 0.55); }
.btn-ghost, .nav-pill, .mode-btn {
  color: hsl(var(--foreground));
  background: hsl(var(--card) / 0.42);
  border-color: hsl(var(--border));
}
.mode-btn { min-height: 42px; font-size: 0.92rem; }
.mode-btn-active, .nav-pill-active {
  color: white;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  border-color: transparent;
  box-shadow: 0 10px 24px hsl(var(--primary) / 0.22);
}
.field-label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  color: hsl(var(--foreground));
}
.input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.72);
  color: hsl(var(--foreground));
  padding: 13px 14px;
  outline: none;
}
.input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.16);
}
.status-timeline, .workflow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.timeline-step, .workflow-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.58);
  font-weight: 850;
}
.timeline-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: hsl(var(--primary));
  font-size: 0.78rem;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}
.section-heading p {
  max-width: 440px;
  color: hsl(var(--muted));
}
.metric-card, .mini-panel {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card) / 0.58);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.signal-card { backdrop-filter: blur(12px); }
.metric-card strong, .mini-panel strong { display: block; font-size: 1.55rem; line-height: 1.1; overflow-wrap: anywhere; }
.metric-card span, .mini-panel span { color: hsl(var(--muted)); font-size: 0.92rem; }
.upload-console, .dashboard-card, .score-panel, .editor-shell { isolation: isolate; }
.drop-zone {
  min-height: 238px;
  border: 1.5px dashed hsl(var(--primary) / 0.58);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, hsl(var(--secondary) / 0.16), transparent 42%),
    linear-gradient(145deg, hsl(var(--primary) / 0.11), hsl(var(--secondary) / 0.08));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  cursor: pointer;
}
.drop-zone:hover { transform: translateY(-2px); border-color: hsl(var(--secondary)); }
.drop-zone strong { display: block; font-size: 1.2rem; overflow-wrap: anywhere; }
.drop-zone small { color: hsl(var(--muted)); }
.drop-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  color: white;
  font-size: 2rem;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  box-shadow: 0 0 40px hsl(var(--secondary) / 0.30);
}
.stage-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--muted));
  font-size: 0.92rem;
}
.stage-line span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--secondary));
  box-shadow: 0 0 16px hsl(var(--secondary));
}
.score-ring {
  --score: 280deg;
  width: 118px;
  height: 118px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(hsl(var(--secondary)) var(--score), hsl(var(--border)) 0);
  position: relative;
  box-shadow: 0 0 34px hsl(var(--secondary) / 0.26);
}
.score-ring::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  background: hsl(var(--card));
}
.score-ring span, .score-ring small { z-index: 1; line-height: 1; }
.score-ring span { font-size: 2.1rem; font-weight: 1000; }
.score-ring small { display: block; color: hsl(var(--muted)); font-weight: 900; }
.heat-row { font-weight: 800; }
.heat-track {
  height: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: hsl(var(--border) / 0.55);
}
.heat-fill { height: 100%; border-radius: inherit; box-shadow: 0 0 20px currentColor; }
.heat-green { background: linear-gradient(90deg, hsl(145 76% 42%), hsl(151 88% 58%)); }
.heat-yellow { background: linear-gradient(90deg, hsl(42 96% 50%), hsl(55 98% 62%)); }
.heat-red { background: linear-gradient(90deg, hsl(var(--destructive)), hsl(18 95% 62%)); }
.suggestion, .pill-line, .link-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card) / 0.56);
  padding: 14px;
}
.suggestion { display: flex; gap: 12px; align-items: flex-start; }
.suggestion strong {
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
}
.pill-line { display: flex; align-items: flex-start; gap: 10px; }
.pill-line span { color: hsl(var(--primary)); font-weight: 1000; }
.link-card { display: grid; gap: 8px; }
.link-card p, .link-card small { color: hsl(var(--muted)); overflow-wrap: anywhere; }
.link-grade {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 0.82rem;
}
.grade-strong { color: hsl(145 76% 32%); background: hsl(145 76% 42% / 0.12); }
.grade-mid { color: hsl(42 96% 34%); background: hsl(42 96% 50% / 0.14); }
.grade-weak { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.12); }
.bottom-tab {
  min-height: 58px;
  flex-direction: column;
  gap: 2px;
  color: hsl(var(--muted));
  font-size: 0.82rem;
}
.bottom-tab-active { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); }
.pb-safe { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.loader {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .hero-shell { padding: 8px; }
  .login-showcase { min-height: auto; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 10px; }
  .theme-toggle strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}