:root{
  --bg1:#0b1020;
  --bg2:#121a33;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 22px;
  --primary: #8b5cf6;
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 12% 10%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(1000px 800px at 88% 25%, rgba(34,197,94,.18), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.container{width:min(1100px, calc(100% - 40px)); margin:0 auto}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background: rgba(10,14,28,.55);
  border-bottom: 1px solid var(--stroke);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.logo{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.28);
}
.top-actions{display:flex; gap:10px; align-items:center}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero{
  margin: 26px 0 18px;
  padding: 26px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 20px;
  position:relative;
  overflow:hidden;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-weight:700;
  font-size: 13px;
}
.pill::before{content:"💌"}
h1{font-size: clamp(34px, 4vw, 54px); line-height:1.02; margin: 14px 0 10px; letter-spacing:-.04em}
h2{margin:0 0 10px; letter-spacing:-.02em}
p{margin:0; line-height:1.55}
.muted{color:var(--muted)}
.note{margin-top:12px; font-size: 13px}

.hero-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}

.hero-right{
  display:flex; flex-direction:column; justify-content:space-between;
  gap: 14px;
  border-left: 1px solid rgba(255,255,255,.10);
  padding-left: 20px;
}
.meter{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
}
.meter-top{display:flex; justify-content:space-between; align-items:center}
.meter-title{font-weight:800}
.meter-badge{
  font-weight:900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.26);
}
.meter-bar{
  margin-top: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meter-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(34,197,94,.90));
}
.meter-hint{margin-top:10px; font-size: 13px}

.emoji-cloud{
  display:flex; flex-wrap:wrap; gap:10px;
  align-content:flex-end;
  opacity:.9;
}
.emoji-cloud span{
  font-size: 22px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  animation: floaty 3.6s ease-in-out infinite;
}
.emoji-cloud span:nth-child(2){animation-delay:.3s}
.emoji-cloud span:nth-child(3){animation-delay:.6s}
.emoji-cloud span:nth-child(4){animation-delay:.9s}
.emoji-cloud span:nth-child(5){animation-delay:1.2s}
.emoji-cloud span:nth-child(6){animation-delay:1.5s}
.emoji-cloud span:nth-child(7){animation-delay:1.8s}
.emoji-cloud span:nth-child(8){animation-delay:2.1s}
@keyframes floaty{0%,100%{transform: translateY(0)}50%{transform: translateY(-10px)}}

.flow{padding: 18px; margin: 14px 0 18px}
.flow-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.flow-title{font-weight:900; letter-spacing:-.02em}
.flow-steps{display:flex; gap:8px; flex-wrap:wrap}
.dot{
  width: 28px; height: 28px; border-radius: 999px;
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
}
.dot.on{background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.35); color: rgba(255,255,255,.92)}
.flow-body{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; margin-top: 14px}
.panel{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.panel-title{font-weight:900; margin-bottom: 8px}
.breath-row{display:flex; gap:10px; align-items:center; margin-top: 12px; flex-wrap:wrap}
.breath-timer{font-weight:900; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.12)}

.moods, .missions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px}
.chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  display:inline-flex; gap:8px; align-items:center;
}
.chip:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22)}
.chip.on{background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.28)}

.mood-msg{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
  font-weight: 800;
  color: rgba(255,255,255,.88);
}

.question{padding: 22px; position:relative; overflow:hidden}
.btn-row{display:flex; gap:12px; margin-top:14px; align-items:center; flex-wrap:wrap}
.no-wrap{position:relative}

.btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0)}
.btn.primary{background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.35)}
.btn.primary:hover{background: rgba(139,92,246,.28)}
.btn.danger{background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.30)}
.btn.ghost{background: transparent; border-color: rgba(255,255,255,.18)}

.result{margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12)}
.result-actions{display:flex; gap:10px; margin-top: 14px; flex-wrap:wrap}
.pick{margin-top: 12px}
.pick-title{font-weight:900; margin-bottom: 8px}

.footer{padding: 22px 4px 36px; text-align:center}

.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  font-weight: 800;
}

.modal{
  position: fixed; inset:0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  display:grid; place-items:center;
  padding: 18px;
}
.modal-card{width:min(520px, 100%); padding: 18px; position: relative; z-index: 10000}
.modal-title{font-weight: 950; font-size: 20px; letter-spacing:-.02em}
.modal-actions{margin-top: 14px; display:flex; justify-content:flex-end}

#confetti{position: fixed; inset: 0; pointer-events:none; z-index: 10}

.bg-orb{
  position: fixed;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(40px);
  opacity:.35;
  z-index:-1;
}
.orb1{left:-260px; top:-220px; background: rgba(139,92,246,.45)}
.orb2{right:-280px; top:-120px; background: rgba(34,197,94,.35)}
.orb3{left: 35%; bottom:-320px; background: rgba(59,130,246,.25)}

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; padding: 20px}
  .hero-right{border-left:none; padding-left:0}
  .flow-body{grid-template-columns: 1fr}
}


/* Force-hide modal when hidden attribute exists */
.modal[hidden]{display:none !important;}