:root{
  --bg:#050817;
  --panel:#0b1230;
  --panel-2:#0f193d;
  --cyan:#19e6ff;
  --blue:#3d7cff;
  --purple:#a64dff;
  --pink:#ff4fdd;
  --lime:#a7ff3f;
  --gold:#ffd45a;
  --text:#f7f9ff;
  --muted:#9da8ce;
  --danger:#ff5c7c;
  --shadow:0 18px 50px rgba(0,0,0,.42);
  --radius:24px;
  color-scheme:dark;
  font-family:Inter, ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(61,124,255,.22), transparent 34%),
    radial-gradient(circle at 100% 25%, rgba(166,77,255,.16), transparent 32%),
    linear-gradient(180deg,#070b1a 0%,#050817 100%);
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.15;
  background-image:linear-gradient(rgba(25,230,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(25,230,255,.08) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,#000,transparent 65%);
}
button,input{font:inherit}
button{border:0;color:inherit}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.app-shell{width:min(100%,520px);margin:0 auto;min-height:100vh;padding:calc(18px + env(safe-area-inset-top)) 16px calc(108px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 18px}
.eyebrow{margin:0 0 3px;font-size:.68rem;font-weight:900;letter-spacing:.18em;color:var(--cyan)}
h1,h2,p{margin-top:0}
h1{font-size:1.55rem;margin-bottom:0;letter-spacing:-.035em}
h2{font-size:1.25rem;margin-bottom:0}
.icon-button{
  width:44px;height:44px;border-radius:15px;background:rgba(15,25,61,.9);border:1px solid rgba(25,230,255,.22);
  box-shadow:inset 0 0 20px rgba(25,230,255,.08);font-size:1.4rem
}

.hero-card{
  position:relative;overflow:hidden;padding:20px 18px 18px;border-radius:30px;
  background:linear-gradient(155deg,rgba(15,25,61,.96),rgba(7,12,34,.96));
  border:1px solid rgba(92,139,255,.28);box-shadow:var(--shadow),inset 0 0 40px rgba(25,230,255,.04)
}
.hero-card::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-95px;
  background:radial-gradient(circle,rgba(255,79,221,.2),transparent 68%);pointer-events:none
}
.car-scene{height:70px;position:relative;margin:-8px -8px 4px}
.car{position:absolute;width:180px;right:0;top:0;filter:drop-shadow(0 0 9px rgba(25,230,255,.6))}
.road{position:absolute;right:-20px;top:57px;width:230px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan)}
.progress-wrap{display:grid;place-items:center;margin:2px 0 12px}
.progress-ring{
  --progress:0deg;
  width:190px;aspect-ratio:1;border-radius:50%;padding:11px;
  background:conic-gradient(var(--cyan) 0deg,var(--purple) var(--progress),rgba(107,127,190,.16) var(--progress) 360deg);
  box-shadow:0 0 32px rgba(25,230,255,.22),0 0 48px rgba(166,77,255,.16);
  transition:background .65s cubic-bezier(.2,.8,.2,1),transform .35s ease
}
.progress-ring.pulse{animation:ringPulse .8s ease}
.progress-inner{
  height:100%;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 50% 38%,#111d46,#070b1a 72%);
  border:1px solid rgba(255,255,255,.08)
}
.progress-inner strong{font-size:3.15rem;line-height:1;letter-spacing:-.07em}
.progress-inner small{font-size:1.2rem;color:var(--cyan);letter-spacing:-.03em}
.progress-inner span{margin-top:8px;color:var(--muted);font-size:.86rem}
.remaining-pill{
  display:flex;align-items:baseline;justify-content:center;gap:8px;padding:11px 14px;margin:0 auto 14px;width:max-content;max-width:100%;
  border:1px solid rgba(167,255,63,.7);border-radius:17px;background:rgba(12,23,32,.88);
  box-shadow:0 0 18px rgba(167,255,63,.16),inset 0 0 15px rgba(167,255,63,.05)
}
.remaining-pill strong{font-size:1.65rem;color:var(--lime)}
.remaining-pill span:last-child{font-size:.82rem;color:#dfffc0}
.mini-icon{color:var(--lime)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.summary-grid article{padding:12px 8px;text-align:center;border-radius:17px;background:rgba(6,12,35,.78);border:1px solid rgba(78,113,200,.35)}
.summary-grid span{display:block;font-size:.67rem;color:var(--muted);margin-bottom:5px}
.summary-grid strong{font-size:.8rem;color:var(--cyan)}
.summary-grid article:first-child strong{color:var(--lime)}
.summary-grid article:last-child strong{color:#ff8bea}
.level-track{margin-top:16px}
.track-labels,.track-foot{display:flex;justify-content:space-between;align-items:center}
.track-labels{font-size:.78rem;margin-bottom:7px}
.track-labels strong{color:var(--cyan)}
.track{height:10px;border-radius:999px;background:#05091b;overflow:hidden;border:1px solid rgba(94,121,192,.35)}
.track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--pink));box-shadow:0 0 15px var(--cyan);transition:width .65s cubic-bezier(.2,.8,.2,1)}
.track-foot{font-size:.68rem;color:var(--muted);margin-top:7px}

.action-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:14px;padding:15px;
  background:linear-gradient(120deg,rgba(21,28,68,.96),rgba(17,14,53,.96));border-radius:23px;
  border:1px solid rgba(255,79,221,.48);box-shadow:0 14px 35px rgba(0,0,0,.28),0 0 20px rgba(166,77,255,.08)
}
.mission-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:rgba(166,77,255,.16);box-shadow:inset 0 0 18px rgba(166,77,255,.18);font-size:1.35rem}
.mission-copy span,.mission-copy small{display:block}
.mission-copy span{font-size:.72rem;color:#ff92e8;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.mission-copy strong{display:block;font-size:.9rem;margin:3px 0}
.mission-copy small{font-size:.72rem;color:var(--muted)}
.check-button{
  padding:11px 13px;border-radius:14px;font-size:.72rem;font-weight:1000;letter-spacing:.06em;
  background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 0 19px rgba(255,79,221,.36);cursor:pointer
}
.check-button:active{transform:scale(.96)}
.check-button[disabled]{opacity:.5;filter:grayscale(.4);cursor:not-allowed}

.milestone-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 6px;gap:8px}
.milestone-strip div{padding:11px 8px;text-align:center;border-radius:17px;background:rgba(11,18,48,.72);border:1px solid rgba(75,98,165,.32)}
.milestone-strip span{font-size:.66rem;color:var(--muted);display:block}
.milestone-strip strong{font-size:1rem;color:var(--gold)}

.phases-section{margin-top:22px}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin:0 3px 12px}
.text-button{background:none;color:var(--cyan);font-size:.76rem;font-weight:800;padding:8px}
.phases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.phase{
  position:relative;aspect-ratio:1;border-radius:18px;background:rgba(12,20,50,.82);
  border:1px solid rgba(91,116,185,.35);display:grid;place-items:center;text-align:center;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease
}
.phase strong{font-size:.9rem}
.phase small{font-size:.58rem;color:var(--muted);display:block;margin-top:2px}
.phase.done{border-color:rgba(167,255,63,.72);box-shadow:inset 0 0 18px rgba(167,255,63,.08)}
.phase.done::after{content:"✓";position:absolute;top:6px;right:7px;color:var(--lime);font-weight:1000}
.phase.current{border-color:var(--pink);box-shadow:0 0 18px rgba(255,79,221,.23),inset 0 0 15px rgba(255,79,221,.08);transform:translateY(-2px)}
.phase.current strong{color:#ff91e7}
.phase.locked{opacity:.45}
.phase.hidden-phase{display:none}

.bottom-nav{
  position:fixed;z-index:20;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(calc(100% - 24px),496px);display:grid;grid-template-columns:repeat(4,1fr);padding:8px;
  border-radius:22px;background:rgba(7,12,32,.9);border:1px solid rgba(72,107,197,.4);
  box-shadow:0 18px 45px rgba(0,0,0,.48);backdrop-filter:blur(18px)
}
.nav-item{background:none;display:grid;place-items:center;gap:3px;padding:7px;border-radius:15px;color:var(--muted)}
.nav-item span{font-size:1.15rem}.nav-item small{font-size:.62rem}
.nav-item.active{color:var(--cyan);background:rgba(25,230,255,.08)}

dialog{
  border:0;color:var(--text);padding:0;background:transparent;
}
dialog::backdrop{background:rgba(0,3,15,.82);backdrop-filter:blur(9px)}
.success-dialog{
  width:min(calc(100% - 32px),390px);border-radius:30px;padding:28px 24px 22px;text-align:center;
  background:radial-gradient(circle at 50% 0%,rgba(166,77,255,.38),transparent 36%),linear-gradient(160deg,#101a42,#080b20);
  border:1px solid rgba(255,79,221,.48);box-shadow:0 0 50px rgba(166,77,255,.35)
}
.success-dialog[open]{animation:dialogIn .45s cubic-bezier(.18,.88,.25,1.2)}
.success-badge{width:74px;height:74px;border-radius:24px;margin:0 auto 15px;display:grid;place-items:center;font-size:2.1rem;color:var(--gold);background:linear-gradient(135deg,var(--purple),#2d6cff);box-shadow:0 0 30px rgba(166,77,255,.55);transform:rotate(-5deg)}
.success-dialog h2{font-size:2.05rem;margin-bottom:4px}
.success-plus{color:var(--cyan);font-weight:900}
.mini-ring{width:112px;aspect-ratio:1;border-radius:50%;margin:18px auto;display:grid;place-items:center;background:conic-gradient(var(--cyan),var(--purple),var(--pink),var(--cyan));padding:7px;box-shadow:0 0 24px rgba(25,230,255,.28)}
.mini-ring::before{content:"";grid-area:1/1;width:100%;height:100%;border-radius:50%;background:#09102b}
.mini-ring strong{grid-area:1/1;z-index:1;font-size:1.45rem}
.reward-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reward-row div{padding:13px;border-radius:17px;background:rgba(3,8,28,.55);border:1px solid rgba(109,91,202,.38)}
.reward-row strong,.reward-row span{display:block}.reward-row strong{font-size:1.05rem;color:var(--gold)}.reward-row span{font-size:.66rem;color:var(--muted)}
.success-dialog button{width:100%;margin-top:18px;padding:14px;border-radius:16px;background:linear-gradient(90deg,var(--cyan),var(--blue));font-weight:1000;box-shadow:0 0 20px rgba(25,230,255,.3)}

.settings-dialog{
  width:min(calc(100% - 32px),390px);border-radius:26px;padding:20px;background:linear-gradient(160deg,#10183a,#080c21);
  border:1px solid rgba(61,124,255,.4);box-shadow:var(--shadow)
}
.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.close-button{width:38px;height:38px;border-radius:13px;background:#141d45;font-size:1.4rem}
.settings-action{width:100%;display:block;text-align:center;padding:13px;margin-top:9px;border-radius:15px;background:#121c43;border:1px solid rgba(77,112,199,.4);font-weight:800;cursor:pointer}
.file-action input{display:none}
.settings-action.danger{color:#ffd7df;border-color:rgba(255,92,124,.4);background:rgba(255,92,124,.1)}
.settings-dialog p{font-size:.7rem;color:var(--muted);text-align:center;margin:14px 0 0}
.toast{
  position:fixed;z-index:50;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translate(-50%,-25px);
  opacity:0;pointer-events:none;background:#101a3d;border:1px solid rgba(25,230,255,.45);padding:10px 15px;border-radius:14px;
  font-size:.75rem;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:.3s ease
}
.toast.show{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

@keyframes ringPulse{50%{transform:scale(1.045);filter:brightness(1.2)}}
@keyframes dialogIn{from{opacity:0;transform:translateY(25px) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:370px){
  .summary-grid{grid-template-columns:1fr}.summary-grid article{display:flex;justify-content:space-between;align-items:center}
  .summary-grid span{margin:0}.phases-grid{grid-template-columns:repeat(3,1fr)}
  .action-card{grid-template-columns:auto 1fr}.check-button{grid-column:1/-1;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}