:root{
  --bg:#f3f7fb; --card:#fff; --accent:#2f6fd6; --muted:#6b7280; --good:#16a34a; --danger:#e11d48;
  --glass: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
body{ margin:0; font-family:Inter,system-ui,Segoe UI,Arial; background:linear-gradient(180deg,var(--bg),#eaf3ff); color:#0b1220; min-height:100vh; display:flex; flex-direction:column;}
.site-header{ display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:linear-gradient(90deg,#6ea8fe,#8fb7ff); color:#fff; position:sticky; top:0; z-index:10}
.brand{ font-weight:700; font-size:1.15rem}
.header-actions{ display:flex; gap:10px; align-items:center}
.container{ padding:18px; max-width:1100px; margin:0 auto; width:100%}
.card{ background:var(--card); border-radius:12px; padding:16px; box-shadow:0 8px 20px rgba(15,23,42,0.06); margin-bottom:14px}
.hero{ text-align:center; padding:24px}
.row{ display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap}
.btn{ background:var(--card); border-radius:9px; padding:8px 12px; color:var(--accent); border:1px solid rgba(47,111,214,0.12); text-decoration:none; cursor:pointer}
.btn.small{ padding:6px 8px; font-size:0.9rem}
.btn.large{ padding:12px 18px; font-weight:600}
.btn.alt{ background:linear-gradient(90deg,#e8f0ff,#d9ecff); color:var(--accent)}
.btn.red{ background:var(--danger); color:#fff; border:none}
.muted{ color:var(--muted); font-size:0.95rem}
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.chips button{ padding:6px 10px; border-radius:999px; border:1px solid #e6f0ff; background:#f8fbff; color:var(--accent); cursor:pointer}
.list{ background:#fafcff; padding:8px; border-radius:8px; margin-top:8px; max-height:200px; overflow:auto}
.progressBar{ height:12px; background:#eef6ff; border-radius:8px; overflow:hidden; margin-top:8px}
.progressBar div{ height:100%; background:linear-gradient(90deg,#7fb0ff,#2f6fd6)}
.chatBox{ height:200px; overflow:auto; background:#f8fbff; padding:8px; border-radius:8px; border:1px solid #eef6ff}
.largeText{ font-size:1rem; padding:8px}
.emotionsGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:220px; overflow:auto}
.emotionBtn{ background:#f6fbff; border:1px solid #e4f0ff; padding:8px; border-radius:8px; cursor:pointer; text-align:center}
.breathArea{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:10px}
.breathCircle{ width:120px; height:120px; border-radius:50%; background:linear-gradient(180deg,#e6f2ff,#cfe4ff); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(40,84,142,0.08); transition:transform 1s ease}
.muted a{ color:var(--accent)}
.tile{ text-align:left; padding:12px; border-radius:10px; background:linear-gradient(180deg,#fbfdff,#eef8ff); border:1px solid #eef6ff}
.small{ font-size:0.9rem; padding:6px 8px}
@media (max-width:900px){ .grid{ grid-template-columns:1fr } .emotionsGrid{ grid-template-columns:repeat(2,1fr)}}