:root{--paper:#f5f5f9;--ink:#171621;--sub:#74788b;--violet:#7147f8;--purple:#9a42ee;--soft-line:#e5e4ed}
html{background:#171127}
body{background:radial-gradient(circle at 50% 0,#4b287a 0,#1d1530 52%,#12101b 100%);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}
.app-shell{max-width:520px;min-height:100vh;padding:0 0 118px;background:var(--paper);box-shadow:0 0 80px rgba(0,0,0,.38);overflow:hidden}
.topbar{min-height:120px;padding:calc(18px + env(safe-area-inset-top)) 22px 25px;color:#fff;background:linear-gradient(125deg,#6545ef 0%,#9d4eea 56%,#5d61e9 100%);position:relative;overflow:hidden}
.topbar:after{content:"";position:absolute;width:190px;height:190px;border:38px solid rgba(255,213,46,.96);border-radius:50%;right:-126px;top:46px;transform:rotate(-18deg);opacity:.95}
.brand-lockup{display:flex;align-items:center;gap:12px;position:relative;z-index:2;min-width:0}.brand-orb{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:25px;color:#6845ed;background:linear-gradient(150deg,#aef4ff,#63d5fa);box-shadow:0 10px 24px rgba(33,31,110,.25)}
.topbar .eyebrow{color:rgba(255,255,255,.65);font-size:8px;letter-spacing:.16em}.topbar h1{margin:3px 0 1px;font-size:18px}.topbar small{font-size:9px;color:rgba(255,255,255,.72)}
.balance-pill{position:relative;z-index:3;flex:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.13);color:#fff;box-shadow:none;backdrop-filter:blur(12px)}.balance-pill small{color:rgba(255,255,255,.7)}
main{padding:0 16px}.page{padding-top:0}.page:not([data-page="cases"]){padding-top:20px}
.hero{min-height:235px;margin:-1px -16px 0;border:0;border-radius:0 0 32px 32px;background:linear-gradient(140deg,#7049f2 0%,#a947e8 48%,#5b65e6 100%);box-shadow:0 22px 42px rgba(70,43,134,.24);overflow:hidden}
.hero:before{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-76px;top:-38px;box-shadow:0 0 0 28px rgba(255,255,255,.035),0 0 0 58px rgba(255,255,255,.025)}
.hero::after{background:linear-gradient(90deg,rgba(91,59,217,.96) 0%,rgba(106,64,226,.68) 46%,transparent 76%)}
.hero-copy{width:58%;padding:39px 0 31px 24px}.hero-kicker{color:#f6da63}.hero h2{font-size:34px;color:#fff}.hero p{color:rgba(255,255,255,.78);font-size:11px}.hero-art{right:-13%;top:-3%;width:76%;height:108%;background:url('./assets/stellar-mascot-v2.png?v=7') center/contain no-repeat;filter:drop-shadow(0 14px 18px rgba(53,14,88,.32))}
.streak-strip{margin-top:18px;padding:13px 15px;border:0;border-radius:18px;background:#fff;box-shadow:0 9px 24px rgba(45,37,84,.08)}.streak-strip b{font-size:11px}.streak-strip small{color:var(--sub);font-size:8px}.streak-days i{background:#ebeaf1;border-color:#e1e0e8}.streak-days i.on{background:#7650f5;border-color:#7650f5;box-shadow:none}
.quick-promo{margin-top:10px;padding:13px 12px;border-radius:19px;display:grid;grid-template-columns:40px 1fr 32px;align-items:center;gap:10px;color:#fff;background:linear-gradient(105deg,#422286,#6f2fd0 55%,#9543df);box-shadow:0 12px 26px rgba(92,43,174,.18)}.quick-promo-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#ffcf48,#ff8b55);font-size:20px}.quick-promo div{display:grid;gap:2px}.quick-promo b{font-size:11px}.quick-promo small{font-size:8px;color:rgba(255,255,255,.72)}.quick-promo button{width:31px;height:31px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:24px}
.section-heading{margin:25px 1px 13px}.section-heading .eyebrow,.page-title .eyebrow{color:#8a8998}.section-heading h3{font-size:23px}.ready-count{background:#e9e2ff;color:#6e46ec;border:0}
.case-list{grid-template-columns:1fr 1fr;gap:10px}.case-card{min-width:0;min-height:240px;display:flex;flex-direction:column;border:0;border-radius:24px;background:#fff!important;box-shadow:0 9px 28px rgba(41,34,68,.08)}.case-card:before{left:auto;right:-42px;top:-50px;opacity:.22}.case-art{width:100px;height:112px;margin:14px auto 0}.case-copy{padding:8px 14px 15px;display:flex;flex-direction:column;flex:1}.case-topline{display:block}.case-card h4{color:var(--ink);font-size:15px}.case-card p{color:var(--sub);font-size:9px;min-height:27px}.status-badge{display:inline-flex;margin-bottom:6px;background:#eee8ff;color:#7148ed;border:0}.case-meta{margin-top:auto;align-items:flex-end;flex-direction:column}.reward-range{align-self:flex-start;color:#7047ec;background:#eee9ff}.open-button{width:100%;padding:10px;border-radius:12px;background:linear-gradient(120deg,#7147f8,#a943e4);color:#fff}.open-button:disabled{background:#ecebf1;color:#a2a0ad}
.bonus-case{border:0;border-radius:24px;background:linear-gradient(120deg,#e7a72b,#d88724);box-shadow:0 12px 27px rgba(201,128,27,.19)}.bonus-label,.bonus-copy h3,.bonus-copy p,.bonus-copy small{color:#fff}.bonus-copy p,.bonus-copy small{opacity:.78}.bonus-case .progress{background:rgba(255,255,255,.28)}.bonus-case .progress i{background:#fff}.bonus-case .open-button{background:#fff;color:#b97116}
.page-title{margin:0 -16px 18px;padding:26px 22px 35px;color:#fff;background:linear-gradient(135deg,#7147f8,#a948e5);border-radius:0 0 30px 30px}.page-title .eyebrow{color:rgba(255,255,255,.65)}.title-icon{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.18);color:#fff}.task-summary>div,.creator-card,.panel,.history-block,.profile-card,.stats-grid div,.info-row,.admin-hero{border:0;background:#fff;color:var(--ink);box-shadow:0 9px 26px rgba(38,31,66,.07)}.task-summary span,.panel p,.panel li,.profile-card span,.stats-grid span{color:var(--sub)}
.segment-control{background:#e9e8ee}.segment-control button{color:#7e7d88}.segment-control button.active{background:#fff;color:#7047ec;box-shadow:0 5px 15px rgba(45,37,84,.08)}
.task-card,.task-card.user-task{border:0;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(40,33,67,.065);color:var(--ink)}.task-card p{color:var(--sub)}.task-reward button{background:#eee9ff;color:#7147ee}.task-logo{color:#fff}.task-chip{background:#eee9ff!important;color:#7047ec!important}.empty-state{background:#fff;color:var(--sub);border-color:#e5e4ed}
.creator-card label,.creator-card .form-hint{color:var(--sub)}input{background:#f2f1f6!important;border-color:#e2e0e9!important;color:var(--ink)!important}.budget-box{background:#f1edff;border-color:#e2d9ff;color:var(--ink)}.primary-button{background:linear-gradient(120deg,#7047f5,#a945e2);color:#fff}
.wallet-card{background:linear-gradient(135deg,#6945ed,#a245e6);color:#fff}.balance-card p,.wallet-stats span{color:rgba(255,255,255,.72)}.wallet-stats{background:rgba(255,255,255,.13)}.history-item{border-color:var(--soft-line)}.history-item span{color:var(--sub)}
.profile-card{border-radius:24px;background:linear-gradient(135deg,#7147f8,#a446df);color:#fff}.profile-card .eyebrow,.profile-card span{color:rgba(255,255,255,.68)}.avatar{background:#fff;color:#7147f8}.stats-grid strong{color:#6f47ec}.referral-panel{background:linear-gradient(135deg,#278f68,#176b57);color:#fff}.referral-panel p{color:rgba(255,255,255,.72)}.ref-milestones span{color:rgba(255,255,255,.78)}.link-box{background:#fff}.info-row{color:var(--ink)}
.admin-hero{border-radius:24px}.admin-hero .eyebrow{color:#7147f8}.admin-hero p:last-child{color:var(--sub)}pre{background:#f2f1f6;color:#292535}
.bottom-nav{left:50%;bottom:calc(12px + env(safe-area-inset-bottom));width:min(444px,calc(100% - 34px));transform:translateX(-50%);padding:7px;border:1px solid rgba(30,25,50,.08);border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 16px 45px rgba(30,22,56,.24);backdrop-filter:blur(18px)}.bottom-nav button{color:#a2a1aa;border-radius:19px}.bottom-nav button.active{background:#eee8ff;color:#7148ed}.bottom-nav button.active span{color:#7148ed}
.modal-backdrop{background:rgba(25,16,46,.58)}.reward-dialog,.sheet-dialog{background:#f7f6fb;color:var(--ink);border-color:#fff}.reward-dialog p,.sheet-dialog p,.sheet-dialog li{color:var(--sub)}.reel-reward{background:#fff;border-color:#e6e2ef;box-shadow:0 7px 22px rgba(46,34,84,.08)}.reel-reward strong{text-shadow:none;color:var(--ink)}
@media(max-width:390px){.topbar{padding-left:16px;padding-right:16px}.brand-orb{width:42px;height:42px}.topbar h1{font-size:15px}.hero-copy{width:62%;padding-left:18px}.hero h2{font-size:30px}.case-art{width:86px;height:100px}.case-copy{padding-left:11px;padding-right:11px}.case-card h4{font-size:14px}.bottom-nav{width:calc(100% - 24px)}}