:root{
  --bg:#070A14;
  --surface:#0E1322;
  --line:rgba(255,255,255,0.08);
}

*{ -webkit-font-smoothing:antialiased }
html,body{ background:var(--bg) }
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(6,182,212,0.12), transparent 55%),
    radial-gradient(800px 500px at 50% 120%, rgba(244,63,94,0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:8px }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.18) }

/* ====== Glass ====== */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}

/* ====== Aurora background on login ====== */
.aurora{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.aurora::before, .aurora::after{
  content:""; position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  filter: blur(80px); opacity:0.55;
}
.aurora::before{
  top:-20%; left:-10%;
  background: radial-gradient(circle, #8B5CF6 0%, transparent 60%);
  animation: float1 14s ease-in-out infinite;
}
.aurora::after{
  bottom:-30%; right:-10%;
  background: radial-gradient(circle, #06B6D4 0%, transparent 60%);
  animation: float2 18s ease-in-out infinite;
}
@keyframes float1{
  0%,100%{ transform: translate(0,0) scale(1) }
  50%{ transform: translate(60px,40px) scale(1.1) }
}
@keyframes float2{
  0%,100%{ transform: translate(0,0) scale(1) }
  50%{ transform: translate(-50px,-30px) scale(1.15) }
}

/* Orbs inside cards */
.hero-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; pointer-events:none }
.hero-orb-1{ width:340px; height:340px; background:#8B5CF6; top:-100px; right:-80px; animation: float1 16s ease-in-out infinite; }
.hero-orb-2{ width:260px; height:260px; background:#06B6D4; bottom:-80px; left:-40px; animation: float2 20s ease-in-out infinite; }
.hero-orb-3{ width:300px; height:300px; background:#F43F5E; top:-80px; right:30%; opacity:0.25; animation: float1 22s ease-in-out infinite; }

/* ====== Form ====== */
.input{
  width:100%;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: #F8FAFC;
  transition: border .2s, background .2s, box-shadow .2s;
  outline:none;
}
.input:focus{ border-color: rgba(139,92,246,0.6); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 4px rgba(139,92,246,0.12) }
.input::placeholder{ color:#475569 }

/* ====== Buttons ====== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(135deg, #8B5CF6, #6366F1 50%, #06B6D4);
  background-size: 200% 100%;
  border:1px solid rgba(255,255,255,0.12);
  padding: 10px 16px; border-radius: 12px; font-weight:600; font-size:14px;
  color:#fff; cursor:pointer;
  transition: transform .15s, box-shadow .25s, background-position .4s;
  box-shadow: 0 10px 30px -10px rgba(139,92,246,0.5);
}
.btn-primary:hover{ background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 18px 40px -12px rgba(139,92,246,0.55) }
.btn-primary:active{ transform: translateY(0) }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  padding: 10px 14px; border-radius: 12px; font-weight:500; font-size:14px;
  color:#F8FAFC; cursor:pointer;
  transition: background .15s, transform .15s, border-color .15s;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18) }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  padding: 6px 12px; border-radius: 999px; font-size:12px; color:#cbd5e1;
  cursor:pointer; transition: background .15s, border .15s, color .15s;
}
.chip:hover{ background: rgba(255,255,255,0.08); color:#fff }
.chip.active-chip{ background:rgba(139,92,246,0.2); border-color:rgba(139,92,246,0.5); color:#fff }

.tag{
  display:inline-block; padding: 4px 10px; border-radius:999px; font-size:11px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#cbd5e1;
}

/* Login tabs */
.login-tab{ transition: background .15s, color .15s }
.login-tab.active{ background: rgba(255,255,255,0.12); color:#fff }

/* ====== Nav ====== */
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding: 9px 12px; border-radius: 10px; text-align:left; color:#cbd5e1;
  font-weight:500; transition: background .15s, color .15s;
}
.nav-item:hover{ background: rgba(255,255,255,0.05); color:#fff }
.nav-item.active{
  background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(6,182,212,0.08));
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.25);
}

/* ====== Cards ====== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 20px;
  position:relative; overflow:hidden;
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  margin-bottom: 10px;
}
.stat-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 12px;
}
.score-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 14px;
}
.score-bar{ margin-top:8px; height:4px; border-radius:2px; background: rgba(255,255,255,0.06); overflow:hidden }
.score-bar i{ display:block; height:100% }

.badge-amber{ display:inline-grid; place-items:center; height:28px; width:28px; border-radius:8px; background:rgba(245,158,11,0.12); color:#F59E0B; border:1px solid rgba(245,158,11,0.25)}
.badge-rose { display:inline-grid; place-items:center; height:28px; width:28px; border-radius:8px; background:rgba(244,63,94,0.12);  color:#F43F5E; border:1px solid rgba(244,63,94,0.25)}
.badge-cyan { display:inline-grid; place-items:center; height:28px; width:28px; border-radius:8px; background:rgba(6,182,212,0.12);  color:#06B6D4; border:1px solid rgba(6,182,212,0.25)}

/* ====== Poll bars ====== */
.poll-bar{
  position:relative; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03); overflow:hidden;
  display:flex; justify-content:space-between; align-items:center;
}
.poll-bar::before{
  content:""; position:absolute; inset:0; width:var(--p);
  background: linear-gradient(90deg, rgba(139,92,246,0.25), rgba(6,182,212,0.18));
  z-index:0;
}
.poll-bar span, .poll-bar b{ position:relative; z-index:1 }

/* ====== Marquee ====== */
.marquee{
  display:flex; gap: 1rem; white-space:nowrap; will-change: transform;
  animation: marquee 40s linear infinite;
}
@keyframes marquee{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-50%) }
}

/* ====== Simulation chain ====== */
.sim-node{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 12px; text-align:center;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.sim-node.lit{
  border-color: rgba(244,63,94,0.5);
  background: rgba(244,63,94,0.08);
  box-shadow: 0 0 30px -5px rgba(244,63,94,0.35);
  transform: translateY(-2px);
}
.sim-emoji{ font-size: 24px; line-height:1 }
.sim-label{ font-size: 11px; color:#94A3B8; margin-top: 6px }
.sim-arrow{ display:grid; place-items:center; color:#475569; font-weight:bold }

/* ====== Insights ====== */
.insight{
  display:flex; gap:12px; align-items:flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 14px; font-size: 14px;
}
.insight > div{ flex:1 }

.badge-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px;
}

/* ====== Services ====== */
.svc{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 20px;
  transition: transform .2s, border .2s, box-shadow .25s;
}
.svc:hover{ transform: translateY(-3px); border-color: rgba(139,92,246,0.4); box-shadow: 0 30px 60px -25px rgba(139,92,246,0.4) }
.svc h4{ font-size:18px; font-weight:700; margin: 12px 0 6px }
.svc ul{ font-size:14px; color:#cbd5e1 }
.svc ul li{ padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.05) }
.svc ul li:last-child{ border-bottom:0 }
.svc-icon{ height: 44px; width: 44px; border-radius: 12px; display:grid; place-items:center; font-size:22px }
.svc-cta{
  margin-top: 14px; width: 100%; padding: 10px; border-radius: 10px;
  background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.3); color:#cbd5e1;
  font-size: 13px; font-weight:600;
  transition: background .15s, color .15s;
}
.svc-cta:hover{ background: rgba(139,92,246,0.22); color:#fff }

.msg{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 18px; font-size: 16px; font-weight: 600; text-align:center;
}

/* CTA card (consultation view) */
.cta-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 24px; text-align:left;
  display:flex; flex-direction:column; gap:6px;
  transition: transform .2s, border .2s, box-shadow .25s;
}
.cta-card:hover{ transform: translateY(-3px); border-color: rgba(6,182,212,0.4); box-shadow: 0 30px 60px -25px rgba(6,182,212,0.4) }

/* Mood */
.mood{ transition: transform .15s }
.mood:hover{ transform: scale(1.15) }
.mood.selected{ background: rgba(139,92,246,0.18); border:1px solid rgba(139,92,246,0.4) }

/* Chat */
.chat-msg{ display:flex; gap:8px; }
.chat-msg .av{ height:24px; width:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; flex-shrink:0 }
.chat-msg .body{ background: rgba(255,255,255,0.03); border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height:1.35 }
.chat-msg .name{ font-size:11px; color:#94A3B8; margin-bottom:1px }

/* Assessment options */
.opt{
  padding: 14px; border-radius: 12px; cursor:pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  text-align:center; transition: background .15s, border .15s, transform .15s;
}
.opt:hover{ background: rgba(255,255,255,0.06); border-color: rgba(139,92,246,0.4) }
.opt.selected{ background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.5); transform: translateY(-1px) }
.opt .v{ font-size: 22px; font-weight: 800 }
.opt .l{ font-size: 11px; color:#94A3B8; margin-top: 2px }

.mini{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px;
}

/* Admin */
.kpi{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px;
}
.funnel{
  position:relative; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03); overflow:hidden;
  display:flex; justify-content:space-between; align-items:center;
}
.funnel i{ position:absolute; left:0; top:0; bottom:0; background: linear-gradient(90deg, rgba(139,92,246,0.25), rgba(6,182,212,0.18)) }
.funnel span, .funnel b{ position:relative; z-index:1 }

table th, table td{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05) }
table tbody tr:hover{ background: rgba(255,255,255,0.025) }

/* View transitions */
.view{ animation: fadeUp .35s ease both }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px) }
  to{ opacity:1; transform: none }
}

/* Pulse */
@keyframes softPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,63,94,0.5) }
  50%     { box-shadow: 0 0 0 8px rgba(244,63,94,0) }
}
.pulse-dot{ animation: softPulse 1.6s ease-out infinite }