:root {
  --primary: #0EA5E9;
  --primary-300: #38BDF8;
  --primary-600: #0284C7;
  --secondary: #14B8A6;
  --accent: #06B6D4;
  --background: #F3F8FC;
  --surface: #FFFFFF;
  --surface-100: #EAF2F8;
  --surface-raised: #FFFFFF;
  --border: #D0DFEB;
  --text: #0B1A2A;
  --muted: #5A7389;
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Manrope', ui-sans-serif, sans-serif;
  letter-spacing: -0.02em;
}

.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background-color: rgba(14,165,233,0.22); color: #0B1A2A; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.bg-grid-glow {
  background-image:
    radial-gradient(circle at 20% -10%, rgba(14,165,233,0.16), transparent 42%),
    radial-gradient(circle at 90% 10%, rgba(20,184,166,0.12), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(6,182,212,0.08), transparent 45%);
}

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

.bg-aurora {
  background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 48%, #14B8A6 100%);
  color: #fff;
}

.text-gradient {
  background: linear-gradient(135deg, #0284C7 0%, #06B6D4 45%, #14B8A6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(208, 223, 235, 0.85);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(208, 223, 235, 0.95);
}

/* Frosted glass for use on aurora / saturated media panels */
.glass-on-dark {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Play control for light thumbnail cards */
.play-on-light {
  background: rgba(11, 26, 42, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.shadow-soft { box-shadow: 0 2px 10px -2px rgba(11,26,42,0.08); }
.shadow-card { box-shadow: 0 10px 32px -10px rgba(11,26,42,0.12); }
.shadow-float { box-shadow: 0 20px 50px -18px rgba(14,165,233,0.28); }
.shadow-glow { box-shadow: 0 0 0 1px rgba(14,165,233,0.18), 0 10px 36px -10px rgba(14,165,233,0.35); }

/* Animations */
@keyframes floatY { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
.animate-float { animation: floatY 4s ease-in-out infinite; }

@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform: translateY(0);} }
.animate-fade-up { animation: fadeUp .5s ease-out both; }

@keyframes shimmerSweep { 100% { transform: translateX(100%); } }
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-100);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, rgba(14,165,233,0.08), transparent);
  animation: shimmerSweep 1.6s infinite;
}

@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,.45);} 100% { box-shadow: 0 0 0 12px rgba(14,165,233,0);} }
.animate-pulse-ring { animation: pulseRing 1.6s cubic-bezier(.4,0,.6,1) infinite; }

/* Reveal-on-scroll (JS toggles .is-visible) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Component-level helpers not easily done with pure Tailwind utility classes */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; border-radius:.875rem; font-weight:600; font-size:.875rem; letter-spacing:-0.01em; transition:all .2s ease; }
.btn:active { transform: scale(0.98); }
.btn-aurora {
  background: linear-gradient(135deg,#0EA5E9,#06B6D4 50%,#14B8A6);
  color:#fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 28px -8px rgba(14,165,233,.55);
}
.btn-aurora:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 36px -10px rgba(14,165,233,.6);
  transform: translateY(-1px);
}
.btn-aurora:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--primary); color:#fff; box-shadow: 0 6px 20px -8px rgba(14,165,233,.55); }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background: var(--surface); border:1px solid var(--border); color: var(--text); box-shadow: 0 1px 2px rgba(11,26,42,.04); }
.btn-secondary:hover { background: var(--surface-100); border-color: #B8CEDF; }
.btn-outline { border:1px solid var(--border); background:transparent; color: var(--text); }
.btn-outline:hover { background: var(--surface-100); border-color: #B8CEDF; }
.btn-ghost { background:transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-100); }
.btn-destructive { background: var(--error); color:#fff; }

.input, .textarea, .select {
  width:100%; border-radius:.875rem; border:1px solid var(--border); background: var(--surface);
  color: var(--text); font-size:.875rem; padding: .55rem .9rem; transition: border-color .2s, box-shadow .2s;
}
.input:focus, .textarea:focus, .select:focus {
  outline:none; border-color: rgba(14,165,233,.55); box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }

.card { border-radius:1.25rem; border:1px solid var(--border); background: var(--surface); box-shadow: 0 2px 10px -2px rgba(11,26,42,.08); }

.badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; border:1px solid; padding:.15rem .65rem; font-size:.72rem; font-weight:500; }
.badge-default { border-color: rgba(14,165,233,.28); background: rgba(14,165,233,.1); color:#0284C7; }
.badge-secondary { border-color: rgba(20,184,166,.28); background: rgba(20,184,166,.1); color:#0F766E; }
.badge-accent { border-color: rgba(6,182,212,.28); background: rgba(6,182,212,.1); color:#0E7490; }
.badge-success { border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.12); color:#15803D; }
.badge-warning { border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.12); color:#B45309; }
.badge-error { border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.12); color:#B91C1C; }
.badge-outline { border-color: var(--border); color: var(--muted); background:transparent; }
.badge-muted { border-color: var(--border); background: var(--surface-100); color: var(--muted); }

.switch { position:relative; width:44px; height:24px; border-radius:999px; background: var(--surface-100); border:2px solid transparent; cursor:pointer; transition: background .2s; display:inline-block; flex-shrink:0; }
.switch.checked { background: var(--primary); }
.switch .thumb { position:absolute; top:1px; left:1px; height:18px; width:18px; border-radius:999px; background:#fff; transition: transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.switch.checked .thumb { transform: translateX(20px); }

.progress { position:relative; height:.5rem; width:100%; overflow:hidden; border-radius:999px; background: var(--surface-100); }
.progress > span { display:block; height:100%; border-radius:999px; background: linear-gradient(135deg,#0EA5E9,#06B6D4 50%,#14B8A6); transition: width .6s ease; }

.tabs-list { display:inline-flex; align-items:center; gap:.25rem; border-radius:.875rem; background: var(--surface-100); border:1px solid var(--border); padding:.25rem; }
.tab-trigger { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; border-radius:.55rem; padding:.375rem .75rem; font-size:.875rem; font-weight:500; color: var(--muted); cursor:pointer; transition: all .15s; border:none; background:transparent; }
.tab-trigger.active { background: var(--primary); color:#fff; box-shadow: 0 4px 12px -4px rgba(14,165,233,.45); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

.dropdown { position:relative; display:inline-block; }
.dropdown-menu { position:absolute; z-index:50; min-width:11rem; margin-top:.5rem; border-radius:.875rem; padding:.4rem; display:none; }
.dropdown.open .dropdown-menu { display:block; }
.dropdown-item { display:flex; align-items:center; gap:.5rem; border-radius:.5rem; padding:.5rem .65rem; font-size:.875rem; cursor:pointer; transition: background .15s; }
.dropdown-item:hover { background: var(--surface-100); }

dialog.modal { border:none; padding:0; background:transparent; max-width:32rem; width:92vw; }
dialog.modal::backdrop { background: rgba(11,26,42,.35); backdrop-filter: blur(4px); }
dialog.modal .modal-body { border-radius:1.25rem; padding:1.5rem; }

.toast-stack { position:fixed; bottom:1.25rem; right:1.25rem; z-index:100; display:flex; flex-direction:column; gap:.65rem; width:360px; max-width:90vw; }
.toast { border-radius:1rem; padding:1rem; box-shadow: 0 16px 40px -12px rgba(11,26,42,.18); display:flex; align-items:flex-start; gap:.75rem; animation: toastIn .3s ease; }
@keyframes toastIn { from { opacity:0; transform: translateY(16px) scale(.95);} to { opacity:1; transform:none; } }

.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; border-radius:1.5rem; border:2px dashed var(--border); background: rgba(234,242,248,.65); padding: 4rem 1.5rem; text-align:center; cursor:pointer; transition: all .3s; }
.dropzone:hover, .dropzone.dragover { border-color: rgba(14,165,233,.45); background: rgba(14,165,233,.06); }

.donut-wrap svg circle { transition: stroke-dasharray .6s ease; }

.sidebar-link { display:flex; align-items:center; gap:.75rem; border-radius:.75rem; padding:.5rem .75rem; font-size:.875rem; font-weight:500; color: var(--muted); transition: all .15s; }
.sidebar-link:hover { background: var(--surface-100); color: var(--text); }
.sidebar-link.active { background: rgba(14,165,233,.1); color:#0284C7; box-shadow: inset 0 0 0 1px rgba(14,165,233,.28); }

@media (max-width: 1023px) {
  #sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .25s ease; z-index: 60; width: 264px; }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(11,26,42,.35); z-index:55; }
  #sidebar-overlay.open { display:block; }
}