:root {
  --bg: #070710;
  --surface: #0e0e1c;
  --surface2: #141428;
  --accent: #8875ff;
  --accent2: #ff5fa0;
  --accent3: #50e8c0;
  --accent4: #ffb830;
  --text: #eeeaff;
  --text-muted: #6b6890;
  --card: rgba(255,255,255,0.035);
  --card-hover: rgba(255,255,255,0.065);
  --border: rgba(255,255,255,0.07);
  --border-active: rgba(136,117,255,0.5);
  --glow: rgba(136,117,255,0.35);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color:var(--accent); text-decoration:none; }

.bg-orbs { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }

.orb {
  position:absolute; border-radius:50%;
  filter:blur(100px); opacity:0.12;
  animation:float 10s ease-in-out infinite;
}

.orb1 { width:500px;height:500px;background:var(--accent);top:-150px;left:-150px;animation-delay:0s; }
.orb2 { width:350px;height:350px;background:var(--accent2);bottom:-80px;right:-80px;animation-delay:4s; }
.orb3 { width:300px;height:300px;background:var(--accent3);top:45%;left:45%;animation-delay:7s; }

@keyframes float {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-40px) scale(1.08); }
}

.page { display:none; }
.page.active { display:block; }

.app {
  position:relative; z-index:1;
  max-width:480px; margin:0 auto;
  padding:0 18px 110px;
}

header {
  padding:48px 0 24px; text-align:center;
  animation:slideDown 0.7s ease both;
}

.logo { display:inline-flex;align-items:center;gap:12px;margin-bottom:6px; }

.logo-icon {
  width:46px;height:46px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:0 0 28px var(--glow),0 8px 20px rgba(0,0,0,0.4);
}

.logo-text {
  font-family:'Syne',sans-serif;font-weight:800;font-size:28px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-0.5px;
}

.tagline { font-size:12px;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase; }

/* CLOCK */
.clock-widget {
  background:linear-gradient(135deg,rgba(136,117,255,0.12),rgba(255,95,160,0.08));
  border:1px solid rgba(136,117,255,0.25);
  border-radius:var(--radius-lg);
  padding:22px 24px 20px; margin-bottom:20px;
  animation:fadeUp 0.7s 0.05s ease both;
  position:relative; overflow:hidden;
}

.clock-widget::after {
  content:'';position:absolute;top:-60px;right:-60px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(136,117,255,0.15),transparent 70%);
  border-radius:50%;pointer-events:none;
}

.clock-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }

.clock-greeting { font-size:11px;font-weight:600;color:var(--accent);letter-spacing:0.12em;text-transform:uppercase; }

.clock-date-badge {
  background:rgba(136,117,255,0.15);border:1px solid rgba(136,117,255,0.3);
  border-radius:20px;padding:4px 12px;font-size:11px;color:var(--accent);font-weight:500;
}

.clock-time-row { display:flex;align-items:baseline;gap:8px;margin-bottom:6px; }

.clock-time {
  font-family:'Syne',sans-serif;font-size:56px;font-weight:800;
  letter-spacing:-3px;line-height:1;color:var(--text);
}

.clock-ampm { font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:var(--text-muted);padding-bottom:6px; }

.clock-subtitle { font-size:14px;color:rgba(238,234,255,0.55); }

/* STATS */
.streak-row { display:flex;gap:10px;margin-bottom:22px;animation:fadeUp 0.7s 0.15s ease both; }

.streak-card {
  flex:1;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:16px 12px;text-align:center;
  transition:border-color 0.2s,transform 0.2s;
}

.streak-card:hover { border-color:var(--border-active);transform:translateY(-2px); }

.streak-val {
  font-family:'Syne',sans-serif;font-size:26px;font-weight:800;
  background:linear-gradient(90deg,var(--accent3),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;
}

.streak-label { font-size:10px;color:var(--text-muted);margin-top:3px;font-weight:500; }

/* SECTION TITLE */
.section-title {
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  color:var(--text-muted);letter-spacing:0.12em;text-transform:uppercase;
  margin-bottom:12px;margin-top:6px;
  display:flex;align-items:center;gap:8px;
}

.section-title::after { content:'';flex:1;height:1px;background:var(--border); }

/* MOOD */
.mood-section { animation:fadeUp 0.7s 0.2s ease both;margin-bottom:22px; }

.mood-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:8px; }

.mood-btn {
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:14px 6px;text-align:center;
  cursor:pointer;transition:all 0.22s ease;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  position:relative;overflow:hidden;
}

.mood-btn:hover { border-color:var(--border-active);transform:translateY(-3px); }

.mood-btn.active {
  border-color:var(--accent);background:rgba(136,117,255,0.12);
  box-shadow:0 0 22px rgba(136,117,255,0.2),0 4px 16px rgba(0,0,0,0.3);
  transform:translateY(-3px) scale(1.04);
}

.mood-emoji { font-size:26px; }
.mood-label { font-size:9px;color:var(--text-muted);font-weight:600;letter-spacing:0.04em;text-transform:uppercase; }
/* FORM */
.checkin-section { animation:fadeUp 0.7s 0.25s ease both;margin-bottom:22px; }
.input-group { margin-bottom:12px; }

.input-label {
  font-size:11px;font-weight:600;color:var(--text-muted);
  margin-bottom:8px;display:block;letter-spacing:0.08em;text-transform:uppercase;
}

textarea, input[type="text"] {
  width:100%;background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:16px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:15px;resize:none;outline:none;
  transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;line-height:1.6;
}

textarea { height:108px; }

textarea:focus, input[type="text"]:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(136,117,255,0.12);
  background:rgba(136,117,255,0.04);
}

textarea::placeholder, input::placeholder { color:var(--text-muted); }

/* STEPPER */
.stepper-card {
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:14px 16px;
  display:flex;align-items:center;gap:16px;
  transition:border-color 0.2s;
}

.stepper-card:focus-within { border-color:var(--border-active); }

.stepper-icon { font-size:22px;flex-shrink:0; }

.stepper-btn {
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--border-active);
  background:rgba(136,117,255,0.1);
  color:var(--accent);font-size:24px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,transform 0.15s;
  flex-shrink:0;line-height:1;
  font-family:'Syne',sans-serif;
}

.stepper-btn:hover { background:rgba(136,117,255,0.25);transform:scale(1.1); }
.stepper-btn:active { transform:scale(0.92); }

.stepper-val {
  flex:1;text-align:center;
  font-family:'Syne',sans-serif;
  font-size:32px;font-weight:800;color:var(--text);
}

/* TOGGLES */
.toggle-row { display:flex;gap:10px; }

.toggle-btn {
  flex:1;padding:13px;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-muted);font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;
}

.toggle-btn.active {
  border-color:var(--accent);background:rgba(136,117,255,0.1);
  color:var(--text);box-shadow:0 0 16px rgba(136,117,255,0.15);
}

/* ANALYZE BUTTON */
.analyze-btn {
  width:100%;padding:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none;border-radius:var(--radius-md);color:white;
  font-family:'Syne',sans-serif;font-size:16px;font-weight:700;
  cursor:pointer;transition:all 0.25s ease;letter-spacing:0.02em;margin-top:6px;
  box-shadow:0 6px 28px rgba(136,117,255,0.4),0 2px 8px rgba(0,0,0,0.3);
}

.analyze-btn:hover { transform:translateY(-3px);box-shadow:0 12px 36px rgba(136,117,255,0.5); }
.analyze-btn:active { transform:translateY(-1px); }
.analyze-btn:disabled { opacity:0.55;cursor:not-allowed;transform:none; }

/* LOADING */
.loading { display:none;text-align:center;padding:48px 20px; }
.loading.show { display:block;animation:fadeUp 0.4s ease both; }

.spinner {
  width:48px;height:48px;
  border:3px solid rgba(136,117,255,0.15);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.75s linear infinite;margin:0 auto 16px;
}

.loading-text { font-size:14px;color:var(--text-muted);letter-spacing:0.04em; }
.loading-dots::after { content:'';animation:dots 1.5s infinite; }

/* RESULT CARD */
.result-card {
  display:none;background:rgba(255,255,255,0.03);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;margin-top:22px;backdrop-filter:blur(10px);
}

.result-card.show { display:block;animation:fadeUp 0.5s ease both; }

.result-header {
  padding:22px 24px;display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,rgba(136,117,255,0.08),rgba(255,95,160,0.05));
  border-bottom:1px solid var(--border);
}

.result-score-circle {
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:20px;font-weight:800;flex-shrink:0;
}

.score-great { background:rgba(80,232,192,0.12);color:var(--accent3);border:2px solid rgba(80,232,192,0.5);box-shadow:0 0 20px rgba(80,232,192,0.15); }
.score-ok    { background:rgba(255,184,48,0.12);color:var(--accent4);border:2px solid rgba(255,184,48,0.5);box-shadow:0 0 20px rgba(255,184,48,0.15); }
.score-low   { background:rgba(255,95,160,0.12);color:var(--accent2);border:2px solid rgba(255,95,160,0.5);box-shadow:0 0 20px rgba(255,95,160,0.15); }

.result-title { font-family:'Syne',sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.3px; }
.result-subtitle { font-size:13px;color:var(--text-muted);margin-top:3px;line-height:1.4; }

.result-body { padding:22px 24px; }
.result-section { margin-bottom:22px; }
.result-section:last-child { margin-bottom:0; }

.result-section-title {
  font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px;
}

.result-text { font-size:14px;line-height:1.75;color:rgba(238,234,255,0.8); }

/* TIPS */
.tips-list { list-style:none; }

.tips-list li {
  display:flex;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;line-height:1.55;color:rgba(238,234,255,0.8);align-items:flex-start;
}

.tips-list li:last-child { border-bottom:none;padding-bottom:0; }

.tip-icon {
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(136,117,255,0.18),rgba(255,95,160,0.1));
  border:1px solid rgba(136,117,255,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}

/* CRISIS */
.crisis-banner {
  display:none;background:rgba(255,95,160,0.08);
  border:1px solid rgba(255,95,160,0.35);border-radius:var(--radius-md);
  padding:18px 20px;margin-top:16px;font-size:14px;line-height:1.65;
  color:rgba(255,210,225,0.9);
}

.crisis-banner.show { display:block;animation:fadeUp 0.4s ease both; }
.crisis-banner strong { color:var(--accent2); }

.crisis-link {
  display:inline-block;margin-top:12px;padding:11px 22px;
  background:linear-gradient(135deg,var(--accent2),#ff3d8a);
  color:white;border-radius:var(--radius-sm);font-weight:700;font-size:13px;
  box-shadow:0 4px 16px rgba(255,95,160,0.35);transition:transform 0.2s;
}

.crisis-link:hover { transform:translateY(-2px);color:white; }

/* PROGRESS */
.progress-header { text-align:center;padding:32px 0 24px; }

.big-score {
  font-family:'Syne',sans-serif;font-size:80px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;letter-spacing:-3px;
}

.score-label { font-size:13px;color:var(--text-muted);margin-top:8px; }

.week-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:12px 0; }

.day-bar { display:flex;flex-direction:column;align-items:center;gap:6px; }

.bar-wrap {
  width:100%;height:90px;background:var(--card);border-radius:10px;
  border:1px solid var(--border);display:flex;align-items:flex-end;overflow:hidden;
}

.bar-fill {
  width:100%;border-radius:8px 8px 0 0;
  transition:height 1.2s cubic-bezier(0.34,1.56,0.64,1);
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}

.day-label { font-size:9px;color:var(--text-muted);text-align:center;font-weight:600;letter-spacing:0.05em;text-transform:uppercase; }

.history-item {
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px 18px;margin-bottom:8px;
  transition:border-color 0.2s,transform 0.2s;
}

.history-item:hover { border-color:var(--border-active);transform:translateX(3px); }
.history-emoji { font-size:26px; }
.history-info { flex:1; }
.history-mood { font-size:14px;font-weight:600;text-transform:capitalize; }
.history-date { font-size:11px;color:var(--text-muted);margin-top:2px; }

.history-score {
  font-family:'Syne',sans-serif;font-size:18px;font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.empty-msg { color:var(--text-muted);font-size:14px;text-align:center;padding:30px;line-height:1.7; }

/* RESOURCES */
.resource-card {
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:20px;margin-bottom:12px;
  display:flex;gap:16px;align-items:flex-start;
  transition:border-color 0.22s,transform 0.22s,background 0.22s;
}

.resource-card:hover { border-color:var(--border-active);transform:translateY(-3px);background:var(--card-hover); }

.resource-icon { width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }

.bg-pink   { background:rgba(255,95,160,0.12);border:1px solid rgba(255,95,160,0.2); }
.bg-teal   { background:rgba(80,232,192,0.12);border:1px solid rgba(80,232,192,0.2); }
.bg-purple { background:rgba(136,117,255,0.12);border:1px solid rgba(136,117,255,0.2); }
.bg-yellow { background:rgba(255,184,48,0.12);border:1px solid rgba(255,184,48,0.2); }

.resource-title { font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px; }
.resource-desc { font-size:13px;color:var(--text-muted);line-height:1.55; }

.resource-tag {
  display:inline-block;margin-top:10px;padding:5px 12px;border-radius:20px;
  font-size:11px;font-weight:600;background:rgba(136,117,255,0.12);
  border:1px solid rgba(136,117,255,0.25);color:var(--accent);cursor:pointer;
  transition:background 0.2s,transform 0.2s;
}

.resource-tag:hover { background:rgba(136,117,255,0.22);transform:translateY(-1px); }

/* BOTTOM NAV */
.bottom-nav {
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;
  background:rgba(7,7,16,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);display:flex;padding:10px 16px 24px;z-index:100;gap:4px;
}

.nav-btn {
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px;background:none;border:none;cursor:pointer;
  color:var(--text-muted);transition:color 0.2s,transform 0.2s;
  font-family:'DM Sans',sans-serif;border-radius:var(--radius-sm);position:relative;
}

.nav-btn::before {
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:2px;background:var(--accent);border-radius:2px;
  opacity:0;transition:opacity 0.2s;
}

.nav-btn svg { width:22px;height:22px;stroke:currentColor;fill:none;display:block; }
.nav-btn.active { color:var(--accent); }
.nav-btn.active::before { opacity:1; }
.nav-btn:hover:not(.active) { color:rgba(136,117,255,0.6);transform:translateY(-1px); }
.nav-btn span { font-size:10px;font-weight:600;letter-spacing:0.04em; }

/* ANIMATIONS */
@keyframes slideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(18px)}  to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }

@keyframes dots {
  0%   { content:''; }
  33%  { content:'.'; }
  66%  { content:'..'; }
  100% { content:'...'; }
}