:root{--bg:#08040e;--s1:#12081e;--s2:#1b0f2c;--ln:rgba(255,255,255,.09);--gold:#f5b800;--gold2:#ffd24a;--tx:#f7f2ff;--mut:#9d8eb4;--ink:#1b1100}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--tx);min-height:100vh;padding-bottom:120px;background:radial-gradient(600px 380px at 85% -60px,rgba(190,40,230,.35),transparent 70%),radial-gradient(500px 400px at -10% 30%,rgba(100,20,160,.28),transparent 70%),var(--bg);background-attachment:fixed;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}button{font-family:inherit}
.ic{flex:none;display:block}.wrap{max-width:480px;margin:auto;padding:16px 16px 0}
/* header */
.bar{position:sticky;top:0;z-index:30;max-width:480px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(8,4,14,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--ln)}
.brand{display:flex;gap:11px;align-items:center;font-size:17px;letter-spacing:.01em}.bar-r{display:flex;gap:10px;align-items:center}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#4a0e75,#8a1cb0);border:1px solid rgba(255,255,255,.18);color:var(--gold);font-weight:800;font-size:16px;box-shadow:0 6px 16px -6px rgba(180,40,230,.7)}
.logo.big{width:60px;height:60px;border-radius:18px;font-size:26px}
.ib,.av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--s2);border:1px solid var(--ln);color:#e9d9ff}
.av{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--ink);font-weight:800;font-size:13px;border:0;border-radius:50%}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:20px;margin-bottom:12px;color:#fff;background:linear-gradient(135deg,#6a1596 0%,#a81fcc 55%,#d82ef0 100%);box-shadow:0 22px 44px -18px rgba(210,40,240,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 14px);pointer-events:none}
.hero:after{content:"";position:absolute;right:-60px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.hero>*{position:relative;z-index:1}
.lbl{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;opacity:.92}
.hero h1{font-size:38px;font-weight:800;letter-spacing:-.03em;margin:12px 0 4px;line-height:1.1}.hero p{font-size:13px;opacity:.85;margin-bottom:18px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.eye{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* buttons — text colour always explicit */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:14px 16px;border-radius:13px;border:0;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;line-height:1;transition:transform .12s,filter .12s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--ink);box-shadow:0 10px 22px -10px rgba(245,184,0,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn.ghost{background:var(--s2);color:var(--tx);border:1px solid var(--ln)}
.btn.full{width:100%;margin-top:18px;padding:16px}
/* strips */
.strip{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;margin-bottom:12px;background:linear-gradient(135deg,#5d138a,#9a1bbd);border:1px solid rgba(255,255,255,.12)}
.strip .t{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center}.strip div{flex:1}.strip small{display:block;font-size:12px;opacity:.85}.strip b{font-size:19px;letter-spacing:-.01em}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.32);padding:8px 12px;border-radius:10px;font-size:12px;font-weight:700;letter-spacing:.04em}
/* cards */
.card{background:var(--s1);border:1px solid var(--ln);border-radius:18px;padding:16px;margin-bottom:12px}
.card h3{font-size:16px;margin-bottom:12px}
.card.light{background:#fff;color:#241236;border:0;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}.card.light .row b{color:#241236}
.link{color:#9c19c0;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:2px}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.svc a{display:grid;justify-items:center;gap:8px;font-size:11px;font-weight:700;color:#3a2252;line-height:1.25}
.tile{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 18px -10px rgba(90,20,140,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.t1{background:linear-gradient(145deg,#6a1596,#9a2ac4)}.t2{background:linear-gradient(145deg,#c026d3,#e879f9)}.t3{background:linear-gradient(145deg,#d99a00,#ffc928)}.t4{background:linear-gradient(145deg,#a21caf,#d946ef)}
.promo{display:flex;align-items:center;gap:13px;padding:14px;border-radius:18px;margin-bottom:12px;background:linear-gradient(135deg,#8a1cb0,#c026d3);border:1px solid rgba(255,255,255,.14)}
.promo .t{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.promo div{flex:1}.promo b{display:block;font-size:14px;line-height:1.3}.promo small{font-size:12px;opacity:.9;line-height:1.4;display:block;margin-top:2px}
.promo .go{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.q{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.q a{background:#faf5ff;border:1px solid #efe1fa;border-radius:15px;padding:12px;display:grid;gap:3px;color:#241236;font-size:14px;font-weight:700}
.q a .tile{width:38px;height:38px;border-radius:11px;margin-bottom:8px}.q small{color:#8f7aa8;font-weight:500;font-size:12px}
.cap{font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.12em;margin:20px 2px 10px;text-transform:uppercase}
/* tabs */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;border:1px solid var(--ln);background:var(--s1);border-radius:15px;margin:16px 0}
.seg a{text-align:center;padding:12px;border-radius:11px;color:var(--mut);font-weight:700;font-size:14px}.seg a.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--ink)}
/* forms */
label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:16px 0 8px;color:#dccdf0}label small{color:var(--mut);text-transform:none;letter-spacing:0;font-weight:500}
input{width:100%;padding:15px;border-radius:13px;border:1px solid var(--ln);background:#0e0716;color:var(--tx);font-family:inherit;font-weight:500;font-size:15px}
input::placeholder{color:#76668d}input:focus{outline:0;border-color:#c026d3;box-shadow:0 0 0 3px rgba(192,38,211,.22)}
.auth{padding-top:5vh;text-align:center}.auth h2{margin:18px 0 6px;font-size:24px;letter-spacing:-.02em}.auth form{text-align:left}
.mut{color:var(--mut);font-size:14px;line-height:1.5}.c{text-align:center;padding:30px 0}.fine{color:var(--mut);font-size:12px;line-height:1.55;margin-top:24px}
.err{background:#2d0c1b;border:1px solid #6e1d38;color:#ff9fb7;padding:12px 14px;border-radius:12px;font-size:14px;text-align:left}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;gap:10px;align-items:center;width:calc(100% - 32px);max-width:440px;background:#0c0714;border:1px solid rgba(245,184,0,.45);border-radius:14px;padding:13px 15px;font-size:14px;font-weight:600;box-shadow:0 18px 44px #000b}.toast .ic{color:var(--gold)}
/* tasks */
.prog{height:6px;border-radius:6px;background:var(--s2);overflow:hidden;margin-top:12px}.prog i{display:block;height:100%;background:linear-gradient(90deg,#c026d3,var(--gold))}
.task{background:var(--s1);border:1px solid var(--ln);border-radius:18px;padding:14px;margin-bottom:12px}
.th{display:flex;align-items:center;gap:12px;margin-bottom:12px}.th .tile{width:44px;height:44px;border-radius:13px}.th div{flex:1}.th b{display:block;font-size:15px}.th small{color:var(--mut);font-size:12px}
.rw{background:rgba(245,184,0,.12);color:var(--gold2);border:1px solid rgba(245,184,0,.3);padding:6px 10px;border-radius:9px;font-weight:800;font-size:13px}
.task form{display:grid;gap:10px}.done{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,.12);color:#6ee7b7;border:1px solid rgba(52,211,153,.3);padding:8px 12px;border-radius:10px;font-weight:700;font-size:13px}
/* nav */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:40;display:flex;justify-content:space-around;align-items:center;padding:10px 10px calc(12px + env(safe-area-inset-bottom));background:rgba(18,8,30,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--ln);border-radius:24px 24px 0 0}
.nav a:not(.fab){display:grid;justify-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--mut);padding:8px 14px;border-radius:14px;min-width:64px}
.nav a.on{color:var(--ink);background:linear-gradient(180deg,var(--gold2),var(--gold))}
.fab{width:58px;height:58px;border-radius:50%;margin-top:-40px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#d946ef,#9a1bbd);border:4px solid var(--bg);box-shadow:0 12px 26px -6px rgba(217,70,239,.75)}
/* profile / wallet */
.pf{text-align:center;margin:8px 0 18px}.pf .big{width:84px;height:84px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;color:var(--ink);background:linear-gradient(145deg,var(--gold2),var(--gold));box-shadow:0 0 0 5px rgba(245,184,0,.18)}.pf h2{margin:14px 0 4px;font-size:21px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.stats div{background:var(--s1);border:1px solid var(--ln);border-radius:15px;padding:13px 10px;text-align:center}.stats b{display:block;font-size:16px;margin-bottom:3px}.stats small{color:var(--mut);font-size:11px;line-height:1.3;display:block}.gd{color:var(--gold2)}
.menu{border:1px solid var(--ln);border-radius:18px;overflow:hidden;background:var(--s1)}.menu a{display:flex;align-items:center;gap:14px;padding:15px;border-bottom:1px solid var(--ln);font-weight:600;font-size:15px}.menu a:last-child{border:0}
.menu .mi{width:38px;height:38px;border-radius:11px;background:var(--s2);border:1px solid var(--ln);display:grid;place-items:center;color:#e7c5ff}.menu .r{margin-left:auto;color:var(--mut)}
.tx{display:flex;align-items:center;gap:12px;padding:12px;background:var(--s1);border:1px solid var(--ln);border-radius:15px;margin-bottom:8px}
.tx .mi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}.in{background:rgba(52,211,153,.13);color:#6ee7b7}.out{background:rgba(251,113,133,.13);color:#fda4af}
.tx div{flex:1;min-width:0}.tx b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx small{color:var(--mut);font-size:12px}.tx em{font-style:normal;font-weight:800;font-size:14px}.pos{color:#6ee7b7}.neg{color:#fda4af}
.empty{text-align:center;color:var(--mut);padding:26px 10px;border:1px dashed var(--ln);border-radius:16px;font-size:14px;display:grid;justify-items:center;gap:8px}