:root{
  --bg:#F6F4EF;
  --surface:#FFFFFF;
  --ink:#1E1B2E;
  --ink-soft:#6E6A80;
  --ink-faint:#A6A2B8;
  --primary:#5B4FE8;
  --primary-light:#EDEBFC;
  --flame:#FF7A45;
  --flame-light:#FFE7DA;
  --success:#22C55E;
  --success-light:#E3FBEC;
  --coin:#F5A623;
  --coin-light:#FFF3DC;
  --danger:#FF5C5C;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:#DAD6E8;
  overscroll-behavior:none;
}

.phone-backdrop{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 10%, #efe9ff 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #ffe7d6 0%, transparent 40%),
    #DAD6E8;
  padding:24px 0;
}

.app{
  position:relative;
  width:402px;
  height:874px;
  max-height:100dvh;
  background:var(--bg);
  border-radius:54px;
  box-shadow:0 30px 60px -20px rgba(30,27,46,.35), 0 0 0 10px #0d0c14, 0 0 0 12px #2a2836;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

@media (max-width:430px){
  .phone-backdrop{padding:0;}
  .app{
    width:100vw;
    height:100dvh;
    max-height:none;
    border-radius:0;
    box-shadow:none;
  }
}

.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--safe-top) + 14px);
  animation:fadeIn .25s ease;
}
.screen[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- Auth screen ---------- */
.auth-screen{padding-top:0;justify-content:center;background:var(--bg);}
.auth-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 28px;text-align:center;}
.auth-flame{font-size:56px;margin-bottom:6px;}
.auth-title{font-size:30px;font-weight:900;margin:0;}
.auth-sub{font-size:13px;color:var(--ink-soft);font-weight:600;margin:6px 0 26px;}
.auth-segmented{width:100%;margin:0 0 20px;}
.auth-form{width:100%;display:flex;flex-direction:column;gap:10px;}
.auth-input{
  width:100%;padding:15px 16px;border-radius:var(--radius-sm);border:1.5px solid #E4E1F0;
  background:var(--surface);font-size:14px;font-weight:600;color:var(--ink);font-family:inherit;
}
.auth-input:focus{outline:none;border-color:var(--primary);}
.auth-err{color:var(--danger);font-size:12px;font-weight:700;margin:2px 0 0;min-height:16px;text-align:left;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 20px 10px;
  flex-shrink:0;
}
.topbar-simple{justify-content:space-between;}
.topbar-simple h1{font-size:22px;margin:0;font-weight:800;}

.avatar-btn{
  position:relative;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--primary-light);
  border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.level-badge{
  position:absolute;bottom:-4px;right:-4px;
  background:var(--primary);
  color:#fff;font-size:10px;font-weight:800;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}
.topbar-mid{flex:1;display:flex;justify-content:center;}
.streak-pill,.coin-pill{
  display:flex;align-items:center;gap:5px;
  background:var(--flame-light);
  color:#B5480F;
  font-weight:800;font-size:14px;
  padding:7px 12px;border-radius:20px;
}
.coin-pill{background:var(--coin-light);color:#9A6300;}
.coin-icon{color:var(--coin);font-size:10px;}

/* ---------- XP bar ---------- */
.xp-track{
  height:6px;background:var(--primary-light);
  margin:0 20px 16px;border-radius:4px;overflow:hidden;flex-shrink:0;
}
.xp-track-fill{height:100%;background:linear-gradient(90deg,var(--primary),#8A7CFF);border-radius:4px;transition:width .5s ease;}

/* ---------- Check-in ---------- */
.checkin-row{padding:0 20px;flex-shrink:0;margin-bottom:16px;}
.checkin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.checkin-label{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft);}
.checkin-value{display:flex;align-items:baseline;gap:7px;}
.checkin-num{font-size:20px;font-weight:900;color:var(--energy-color, var(--primary));transition:color .2s ease;}
.checkin-mood{font-size:11px;font-weight:800;color:var(--energy-color, var(--ink-faint));letter-spacing:.02em;transition:color .2s ease;}
.checkin-scale{display:flex;gap:4px;}
.energy-seg{
  flex:1;height:40px;border-radius:10px;border:none;
  background:var(--surface);font-size:12px;font-weight:800;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.energy-seg.active{background:var(--seg-color);color:#fff;transform:scaleY(1.12);}

/* ---------- Coach bubble ---------- */
.coach-bubble{
  margin:0 20px 20px;padding:18px 18px;
  background:var(--surface);border-radius:var(--radius-md);
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  border:none;text-align:left;
}
.coach-flame{font-size:24px;flex-shrink:0;}
.coach-bubble p{margin:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;}

/* ---------- Sections ---------- */
.section-row{display:flex;justify-content:space-between;align-items:baseline;padding:0 20px;flex-shrink:0;margin-bottom:8px;}
.section-row h2{font-size:16px;margin:0;font-weight:800;}
.section-sub{font-size:12px;font-weight:700;color:var(--ink-faint);}

/* ---------- Quest list ---------- */
.quest-list{padding:0 20px;display:flex;flex-direction:column;gap:12px;flex:0 0 auto;overflow:hidden;}
.quest-list-full{flex:1;overflow-y:auto;padding-bottom:16px;}
.quest-card{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border-radius:var(--radius-md);
  padding:16px 16px;flex-shrink:0;
}
.quest-card.done{background:var(--success-light);}
.quest-check{
  width:30px;height:30px;border-radius:50%;
  border:2.5px solid var(--ink-faint);
  background:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:900;
}
.quest-card.done .quest-check{background:var(--success);border-color:var(--success);}
.quest-icon{font-size:20px;width:30px;text-align:center;flex-shrink:0;}
.quest-info{flex:1;min-width:0;}
.quest-title{font-size:14px;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.quest-meta{font-size:11px;color:var(--ink-faint);font-weight:600;display:flex;align-items:center;gap:6px;}
.freq-chip{font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;background:var(--primary-light);color:var(--primary);letter-spacing:.02em;}
.freq-chip.freq-done{background:var(--success-light);color:var(--success);}
.quest-xp{font-size:12px;font-weight:800;color:var(--primary);flex-shrink:0;}

.empty-quests{
  background:var(--surface);border-radius:var(--radius-md);
  padding:22px 16px;text-align:center;flex-shrink:0;
}
.empty-quests .e-icon{font-size:28px;display:block;margin-bottom:6px;}
.empty-quests p{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft);}

/* ---------- Week row (dashboard) ---------- */
.week-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;margin-top:auto;margin-bottom:14px;flex-shrink:0;
}
.week-row-label{font-size:12px;font-weight:700;color:var(--ink-faint);}
.week-dots{display:flex;gap:8px;}
.week-dot{width:15px;height:15px;border-radius:50%;background:var(--primary-light);}
.week-dot.done{background:var(--flame);}
.week-dot.today{outline:2px solid var(--primary);outline-offset:2px;}

/* ---------- Epic card (dashboard) ---------- */
.epic-card{
  margin:0 20px 10px;
  background:linear-gradient(135deg,var(--primary),#8A7CFF);
  border:none;border-radius:var(--radius-lg);
  padding:16px;display:flex;align-items:center;gap:10px;
  color:#fff;flex-shrink:0;text-align:left;
}
.epic-left{flex:1;min-width:0;}
.epic-tag{font-size:10px;font-weight:900;letter-spacing:.06em;opacity:.85;}
.epic-card h3{margin:4px 0 10px;font-size:15px;font-weight:800;}
.epic-bar{height:6px;background:rgba(255,255,255,.3);border-radius:4px;overflow:hidden;}
.epic-bar.big{background:var(--primary-light);margin:16px 0;}
.epic-bar-fill{height:100%;background:#fff;border-radius:4px;transition:width .5s ease;}
.epic-bar.big .epic-bar-fill{background:linear-gradient(90deg,var(--primary),#8A7CFF);}
.epic-arrow{font-size:26px;opacity:.85;flex-shrink:0;}

/* ---------- Tabbar ---------- */
.tabbar{
  display:flex;flex-shrink:0;
  padding:8px 10px calc(var(--safe-bottom) + 8px);
  background:var(--surface);
  border-top:1px solid rgba(30,27,46,.06);
}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--ink-faint);
  font-size:10px;font-weight:700;padding:4px;
}
.tab-btn svg{width:22px;height:22px;fill:var(--ink-faint);stroke:none;}
.tab-btn .ring-inner{fill:var(--bg);}
.tab-btn .ring-dot{fill:var(--ink-faint);}
.tab-btn .bag-handle{fill:none;stroke:var(--ink-faint);stroke-width:2;}
.tab-btn.active{color:var(--primary);}
.tab-btn.active svg{fill:var(--primary);}
.tab-btn.active .ring-inner{fill:var(--bg);}
.tab-btn.active .ring-dot{fill:var(--primary);}
.tab-btn.active .bag-handle{stroke:var(--primary);}

/* ---------- Segmented control ---------- */
.segmented{
  display:flex;margin:0 20px 14px;background:var(--primary-light);
  border-radius:var(--radius-sm);padding:4px;flex-shrink:0;
}
.seg-btn{flex:1;border:none;background:none;padding:9px 0;border-radius:10px;font-weight:800;font-size:13px;color:var(--primary);}
.seg-btn.active{background:var(--surface);color:var(--ink);}

.epic-list-full{padding:0 20px;display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto;}
.epic-card-full{width:100%;margin:0;}

/* ---------- Stats screen ---------- */
.stats-scroll{flex:1;overflow-y:auto;padding:0 20px 16px;display:flex;flex-direction:column;gap:12px;}
.card{background:var(--surface);border-radius:var(--radius-md);padding:14px;flex-shrink:0;}
.card-title{margin:0 0 12px;font-size:13px;font-weight:800;color:var(--ink-soft);}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:90px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.bar-fill{width:100%;border-radius:6px 6px 3px 3px;background:var(--primary-light);}
.bar-fill.has-xp{background:linear-gradient(180deg,#8A7CFF,var(--primary));}
.bar-day{font-size:10px;font-weight:700;color:var(--ink-faint);}

.card-row{display:flex;gap:12px;}
.mini-card{flex:1;background:var(--surface);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:2px;}
.mini-num{font-size:22px;font-weight:900;color:var(--primary);}
.mini-label{font-size:11px;font-weight:700;color:var(--ink-faint);}

.heatmap{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;}
.heat-dot{aspect-ratio:1;border-radius:5px;background:var(--primary-light);}
.heat-dot.h1{background:#CFC9FF;}
.heat-dot.h2{background:#9C8DFF;}
.heat-dot.h3{background:var(--primary);}

.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.badge{display:flex;flex-direction:column;align-items:center;gap:4px;}
.badge-icon{width:44px;height:44px;border-radius:50%;background:var(--coin-light);display:flex;align-items:center;justify-content:center;font-size:20px;}
.badge.locked .badge-icon{background:var(--bg);filter:grayscale(1);opacity:.4;}
.badge small{font-size:9px;font-weight:700;color:var(--ink-faint);text-align:center;}

/* ---------- Boutique ---------- */
.shop-grid{flex:1;overflow-y:auto;padding:0 20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;}
.shop-item{background:var(--surface);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:8px;border:none;text-align:left;}
.shop-swatch{height:54px;border-radius:12px;}
.shop-name{font-size:13px;font-weight:800;margin:0;}
.shop-price{font-size:12px;font-weight:800;color:var(--coin);display:flex;align-items:center;gap:4px;}
.shop-item.owned .shop-price{color:var(--success);}
.shop-item.equipped{outline:2px solid var(--primary);}

/* ---------- Sheets (overlays) ---------- */
.sheet{
  position:absolute;inset:0;background:var(--bg);
  display:flex;flex-direction:column;z-index:10;
  padding-top:calc(var(--safe-top) + 10px);
  animation:slideUp .28s cubic-bezier(.32,.72,0,1);
}
.sheet[hidden]{display:none;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px;flex-shrink:0;}
.sheet-header h2{font-size:16px;margin:0;font-weight:800;}
.close-btn{width:32px;height:32px;border-radius:50%;background:var(--surface);border:none;font-size:14px;color:var(--ink-soft);font-weight:700;}

.profile-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 24px;overflow:hidden;}
.profile-avatar-ring{position:relative;width:120px;height:120px;margin-bottom:14px;flex-shrink:0;}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:var(--primary-light);stroke-width:8;}
.ring-fg{fill:none;stroke:var(--primary);stroke-width:8;stroke-linecap:round;stroke-dasharray:339;transition:stroke-dashoffset .6s ease;}
.profile-avatar-flame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;}
.profile-body h3{margin:0;font-size:19px;font-weight:900;}
.profile-level{margin:2px 0 20px;font-size:13px;color:var(--ink-soft);font-weight:600;}
.profile-stats-row{display:flex;gap:10px;width:100%;margin-bottom:24px;flex-shrink:0;}
.pstat{flex:1;background:var(--surface);border-radius:var(--radius-md);padding:14px 8px;text-align:center;}
.pstat span{display:block;font-size:19px;font-weight:900;color:var(--primary);}
.pstat small{font-size:10px;font-weight:700;color:var(--ink-faint);}
.profile-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;width:100%;flex-shrink:0;}
.ghost-btn{background:none;border:1.5px solid #EBD5D5;color:var(--danger);font-weight:700;font-size:12px;padding:12px;border-radius:var(--radius-sm);width:100%;}
.secondary-btn{background:var(--primary-light);border:none;color:var(--primary);font-weight:800;font-size:13px;padding:13px;border-radius:var(--radius-sm);width:100%;}

.epic-body{flex:1;display:flex;flex-direction:column;padding:0 22px 16px;overflow:hidden;}
.epic-desc{font-size:13px;color:var(--ink-soft);line-height:1.4;margin:8px 0 0;}
.step-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.step-item{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius-md);padding:12px;border:none;text-align:left;}
.step-item.done{background:var(--success-light);}
.step-check{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--ink-faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:12px;}
.step-item.done .step-check{background:var(--success);border-color:var(--success);}
.step-item span.step-label{font-size:13px;font-weight:700;}
.step-item.done span.step-label{text-decoration:line-through;color:var(--ink-faint);}

.sheet-small .coach-body{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 26px;}
.coach-flame-big{font-size:52px;margin-bottom:10px;}
.coach-tone-label{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--flame);margin:0 0 10px;}
.coach-big-text{font-size:17px;font-weight:700;line-height:1.45;margin:0;}
.primary-btn{margin-top:auto;background:var(--primary);color:#fff;border:none;font-weight:800;font-size:14px;padding:15px;border-radius:var(--radius-sm);width:100%;flex-shrink:0;}

/* ---------- XP toast ---------- */
.xp-toast{
  position:absolute;left:50%;top:40%;
  transform:translate(-50%,0);
  background:var(--ink);color:#fff;font-weight:800;font-size:15px;
  padding:10px 18px;border-radius:20px;
  pointer-events:none;opacity:0;z-index:50;
}
.xp-toast.show{animation:xpFly 1.1s ease forwards;}
@keyframes xpFly{
  0%{opacity:0;transform:translate(-50%,20px) scale(.8);}
  15%{opacity:1;transform:translate(-50%,0) scale(1.05);}
  30%{transform:translate(-50%,0) scale(1);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-40px) scale(.95);}
}