/* LabSathi theme — original stylesheet.
   Dark premium system: deep navy background, glowing cyan primary,
   pink secondary accent. Light mode keeps the same accents on white. */

:root {
  --mc-bg: #0B0F1A;
  --mc-card: #141A2E;
  --mc-card-2: #1B2340;
  --mc-text: #F1F5F9;
  --mc-muted: #94A3B8;
  --mc-border: rgba(148, 163, 184, 0.28);
  --mc-cyan: #00E5FF;
  --mc-cyan-deep: #00C2E0;
  --mc-pink: #FF2E88;
  --mc-glow: rgba(0, 229, 255, 0.35);
}

/* ---------- Dark theme token overrides (beat CDN utilities) ---------- */
html.dark body {
  background: var(--mc-bg) !important;
  color: var(--mc-text) !important;
}
html.dark body .bg-white,
html.dark body .bg-slate-800 {
  background-color: var(--mc-card) !important;
  border-color: var(--mc-border) !important;
}
html.dark body .bg-slate-100 { background-color: var(--mc-card-2) !important; }
html.dark body .bg-slate-700 { background-color: var(--mc-card-2) !important; }
html.dark body .border-slate-200,
html.dark body .border-slate-300,
html.dark body .border-slate-600,
html.dark body .border-slate-700 { border-color: var(--mc-border) !important; }
html.dark body .text-slate-500,
html.dark body .text-slate-400 { color: var(--mc-muted) !important; }
html.dark body .text-slate-600 { color: #CBD5E1 !important; }
html.dark body .text-slate-800 { color: var(--mc-text) !important; }
html.dark body .hover\:bg-slate-50:hover,
html.dark body .hover\:bg-slate-700:hover { background-color: var(--mc-card-2) !important; }

/* Header */
html.dark body header {
  background: rgba(11, 15, 26, 0.92) !important;
  border-color: rgba(0, 229, 255, 0.18) !important;
  backdrop-filter: blur(8px);
}
html.dark body header a { color: var(--mc-text); }

/* Primary buttons: teal utilities become glowing cyan with dark text */
html.dark body .bg-teal-700,
html:not(.dark) body .bg-teal-700 {
  background-color: var(--mc-cyan) !important;
  color: #06202A !important;
  box-shadow: 0 0 18px var(--mc-glow);
}
html.dark body .bg-teal-700:hover,
html:not(.dark) body .bg-teal-700:hover {
  background-color: #5CEEFF !important;
  color: #06202A !important;
}
html.dark body .bg-teal-800:hover,
html:not(.dark) body .bg-teal-800:hover { background-color: #5CEEFF !important; }

/* Active nav pill: teal tint becomes cyan glow pill */
html.dark body .bg-teal-50,
html.dark body .dark\:bg-teal-900\/40 {
  background-color: rgba(0, 229, 255, 0.14) !important;
  border: 1px solid rgba(0, 229, 255, 0.35);
}
html.dark body .text-teal-700,
html.dark body .text-teal-400,
html.dark body .text-teal-300 {
  color: var(--mc-cyan) !important;
}
html:not(.dark) body .text-teal-700,
html:not(.dark) body .text-teal-400 {
  color: #0891B2 !important;
}
html.dark body .hover\:text-teal-600:hover,
html.dark body .hover\:text-teal-400:hover { color: var(--mc-cyan) !important; }

/* Links on auth pages */
.premium-link { color: var(--mc-pink); font-weight: 600; }
.premium-link:hover { text-decoration: underline; }
html:not(.dark) body .premium-link { color: #DB2777; }

/* Inputs: dark fill, cyan focus glow */
html.dark body input,
html.dark body select,
html.dark body textarea {
  background-color: #0B0F1A !important;
  border-color: var(--mc-border) !important;
  color: var(--mc-text) !important;
}
html.dark body input:focus,
html.dark body select:focus,
html.dark body textarea:focus {
  border-color: var(--mc-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.28), 0 0 18px rgba(0, 229, 255, 0.25) !important;
  outline: none !important;
}
html.dark body input::placeholder { color: #64748B; }

/* Badges: keep semantics, tuned for dark readability */
html.dark body .bg-amber-100 { background-color: rgba(251, 191, 36, 0.18) !important; color: #FCD34D !important; }
html.dark body .bg-emerald-100 { background-color: rgba(52, 211, 153, 0.18) !important; color: #6EE7B7 !important; }
html.dark body .bg-red-100 { background-color: rgba(248, 113, 113, 0.18) !important; color: #FCA5A5 !important; }
html.dark body .bg-blue-100 { background-color: rgba(96, 165, 250, 0.18) !important; color: #93C5FD !important; }
html.dark body .bg-teal-100 { background-color: rgba(0, 229, 255, 0.16) !important; color: var(--mc-cyan) !important; }

/* Banners */
html.dark body .bg-emerald-100 { border-color: rgba(52, 211, 153, 0.4) !important; }
html.dark body .text-emerald-800 { color: #A7F3D0 !important; }
html.dark body .text-red-800 { color: #FECACA !important; }

/* Cards: soft lift on hover (no glow spam) */
.premium-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.premium-card:hover {
  border-color: rgba(0, 229, 255, 0.45) !important;
  box-shadow: 0 8px 30px rgba(0, 229, 255, 0.12);
}

/* Gradient headline for landing */
.premium-gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, var(--mc-cyan), var(--mc-pink)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html:not(.dark) body .premium-gradient-text {
  background: linear-gradient(90deg, #0891B2, #DB2777) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---------- Glowing auth card (rotating beam, per the reference form) ----------
   Technique from the user's reference HTML: the wrapper is overflow-hidden
   with 4px padding, and a 180% ::before layer carries a rotating conic beam
   (transparent → pink → transparent → cyan → transparent). The inner card
   sits above it with a solid background, so the beam shows only as a glowing
   border that travels around the card. No @property, no padding-box trick. */
.glow-wrap {
  position: relative;
  border-radius: 28px;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 45px rgba(255, 46, 136, 0.15),
    0 0 45px rgba(0, 229, 255, 0.15);
}
.glow-wrap::before {
  content: '';
  position: absolute;
  width: 180%;
  height: 180%;
  background: conic-gradient(
    transparent,
    var(--mc-pink),
    transparent 35%,
    transparent 50%,
    var(--mc-cyan),
    transparent 85%
  );
  animation: mc-rotate-beam 5s linear infinite;
}
@keyframes mc-rotate-beam {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.glow-card {
  position: relative;
  width: 100%;
  border-radius: 25px;
  border: none;
  background: var(--mc-card);
  color: var(--mc-text);
  z-index: 2;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.08),
    inset 0 -4px 10px rgba(0, 0, 0, 0.7);
}
html:not(.dark) body .glow-card {
  background: #FFFFFF;
  color: #0F172A;
}
/* Pill inputs for auth forms */
.premium-input {
  width: 100%;
  border-radius: 9999px !important;
  padding: 0.65rem 1.1rem !important;
  border: 1px solid var(--mc-border) !important;
}
html.dark body .premium-input { background-color: #0B0F1A !important; color: var(--mc-text) !important; }
.premium-input:focus {
  border-color: var(--mc-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.28), 0 0 20px rgba(0, 229, 255, 0.3) !important;
  outline: none !important;
}

/* Glowing primary button */
.premium-btn {
  width: 100%;
  background: var(--mc-cyan) !important;
  color: #06202A !important;
  font-weight: 700;
  border-radius: 9999px !important;
  padding: 0.7rem 1rem;
  box-shadow: 0 0 22px var(--mc-glow);
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.premium-btn:hover { box-shadow: 0 0 32px rgba(0, 229, 255, 0.55); filter: brightness(1.08); }

/* Footer */
html.dark body footer { color: #64748B !important; }

/* ---------- Landing demo player (video-like, CSS-only) ---------- */
.demo-stage { min-height: 320px; }
@media (max-width: 640px) { .demo-stage { min-height: 360px; } }
.demo-scene { opacity: 0; animation: demo-cycle 15s linear infinite; }
.demo-s1 { animation-name: demo-s1; }
.demo-s2 { animation-name: demo-s2; }
.demo-s3 { animation-name: demo-s3; }
@keyframes demo-s1 { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes demo-s2 { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes demo-s3 { 0%, 63% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }
.demo-progress { width: 0%; animation: demo-progress 15s linear infinite; }
@keyframes demo-progress { 0% { width: 0%; } 100% { width: 100%; } }
.demo-bar { animation: demo-bar 15s linear infinite; transform-origin: bottom; }
@keyframes demo-bar { 0%, 63% { transform: scaleY(0.2); } 70%, 97% { transform: scaleY(1); } 100% { transform: scaleY(0.2); } }

/* ---------- Premium landing polish ---------- */
.premium-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.premium-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 229, 255, .18), 0 4px 14px rgba(0, 0, 0, .25); border-color: rgba(0, 229, 255, .55); }
.premium-cta { background: linear-gradient(120deg, #00b8d4 0%, #0e7490 45%, #be185d 130%); box-shadow: 0 18px 40px rgba(0, 229, 255, .22); }

/* CTA button must stay white-on-dark even under the dark .bg-white override above */
.premium-cta a.premium-cta-btn { background-color: #FFFFFF !important; color: #0B0F1A !important; border-color: #FFFFFF !important; }
.premium-cta a.premium-cta-btn:hover { background-color: #E0F7FF !important; color: #0B0F1A !important; }