:root{--bg:#050d1f;--card:rgba(20,50,110,.38);--bd:rgba(70,150,255,.4);--tx:#f2f7ff;--mu:#8fb0dc;--bl:#1e7bff;--cy:#37d6ff;--gd:#ffc83d;--gr:#2fd28a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 50% -10%,#123a8c 0,#07143a 45%,#040a1a 100%);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
#app{max-width:430px;margin:0 auto;padding:0 14px 96px}
.top{display:flex;align-items:center;gap:10px;padding:14px 0 10px}
.top b{font-size:14px}.top small{display:block;color:var(--mu);font-size:11px}
.back{background:none;border:0;color:var(--tx);font-size:22px;cursor:pointer;width:28px}
.lg{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#37d6ff,#1e5bff);display:grid;place-items:center}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 0 22px rgba(30,123,255,.22),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.user{display:flex;gap:12px;align-items:center}
.av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#243a7a,#0d1a44);border:2px solid var(--cy);display:grid;place-items:center;font-size:28px;flex:none}
.bar{height:8px;border-radius:9px;background:rgba(255,255,255,.12);margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;width:52%;background:linear-gradient(90deg,var(--cy),var(--bl))}
.pts{display:flex;align-items:center;gap:12px}.pts .n{font-size:34px;font-weight:800}.pts small{color:var(--mu);display:block;font-size:12px}
.sm{margin-left:auto;background:rgba(30,123,255,.25);border:1px solid var(--bd);color:var(--cy);border-radius:10px;padding:7px 12px;font-size:12px;cursor:pointer}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{text-align:center;cursor:pointer;min-height:112px;color:var(--tx);font:inherit}.tile .e{font-size:32px;display:block;margin-bottom:6px}.tile small{display:block;color:var(--mu);font-size:11px}
.btn{width:100%;border:1px solid var(--cy);background:linear-gradient(180deg,#2b8bff,#0f56d8);color:#fff;font-weight:700;font-size:15px;border-radius:14px;padding:13px;cursor:pointer;box-shadow:0 0 18px rgba(55,214,255,.4)}
.btn:disabled{opacity:.5;cursor:default}
h2{margin:0 0 4px;font-size:20px;text-align:center}.sub{color:var(--mu);font-size:12px;text-align:center;margin:0 0 12px}
.tabs{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto}.tabs button{flex:none;background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--mu);border-radius:12px;padding:8px 14px;font-size:12px;cursor:pointer}.tabs .on{background:var(--bl);color:#fff}
.wheel{position:relative;width:250px;height:250px;margin:6px auto 14px;border-radius:50%;border:6px solid #e8c15a;box-shadow:0 0 30px rgba(55,214,255,.5);transition:transform 3.4s cubic-bezier(.15,.7,.1,1)}
.wheel span{position:absolute;left:50%;top:50%;font-weight:800;font-size:15px;transform-origin:0 0}
.spin{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:radial-gradient(#3a9bff,#0d3fae);border:3px solid #fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.ptr{position:absolute;left:50%;top:-14px;margin-left:-10px;color:var(--gd);font-size:24px;z-index:2}
.row{display:flex;align-items:center;gap:12px}.row .i{font-size:26px;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;flex:none}
.row .t{flex:1;min-width:0;font-size:14px;font-weight:700}.row .t small{display:block;color:var(--mu);font-weight:400;font-size:11px}
.row .b{background:linear-gradient(180deg,#2b8bff,#0f56d8);border:0;color:#fff;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer}
.row .b.ow{background:none;border:1px solid var(--gr);color:var(--gr)}
.lb{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:12px;font-size:13px}.lb.me{background:rgba(30,123,255,.3);border:1px solid var(--cy)}.lb b{width:22px;text-align:center}.lb .v{margin-left:auto;color:var(--cy);font-weight:700}
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}.day{text-align:center;padding:10px 4px;border-radius:14px;border:1px solid var(--bd);background:var(--card);font-size:12px}.day.on{border-color:var(--gr);background:rgba(47,210,138,.18)}.day .e{display:block;font-size:24px;margin:4px 0}
.fr{display:flex;gap:10px;margin:8px 0 12px}.fr div{flex:1;text-align:center;font-size:11px;color:var(--mu)}.fr i{display:grid;place-items:center;font-style:normal;font-size:26px;height:54px;border-radius:12px;border:2px solid var(--bd);margin-bottom:4px;cursor:pointer}.fr .sel i{border-color:var(--cy);box-shadow:0 0 12px var(--cy)}
nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom,0px));width:min(406px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(6,16,42,.92);border:1px solid var(--bd);border-radius:18px;padding:5px;backdrop-filter:blur(14px);z-index:5}
nav button{background:none;border:0;color:var(--mu);padding:7px 0;font-size:10px;border-radius:13px;cursor:pointer}nav button span{display:block;font-size:19px}nav .on{color:var(--cy);background:rgba(30,123,255,.25)}
.toast{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:#0f56d8;border:1px solid var(--cy);padding:10px 18px;border-radius:14px;font-size:13px;z-index:9;display:none}
.note{color:var(--mu);font-size:11px;text-align:center;margin-top:10px}
#gm{position:fixed;inset:0;background:var(--bg);z-index:20;display:flex;flex-direction:column;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px}
.gtop{width:100%;max-width:360px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700}.gtop button{background:var(--card);border:1px solid var(--bd);color:var(--tx);border-radius:10px;padding:6px 12px}
#gm canvas{width:100%;max-width:360px;aspect-ratio:3/4;border:1px solid var(--bd);border-radius:16px;background:rgba(20,50,110,.3);touch-action:none}
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:360px}.mg button{aspect-ratio:1;font-size:30px;border-radius:12px;border:1px solid var(--bd);background:var(--card);color:var(--tx)}
#ad{position:fixed;inset:0;z-index:40;background:#020814;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}#ad small{color:var(--mu)}.adb{width:min(300px,80%);aspect-ratio:16/10;border:1px solid var(--bd);border-radius:16px;display:grid;place-items:center;text-align:center;font-size:42px;background:var(--card)}#ad .btn{max-width:300px}
.hs{display:flex;gap:10px;overflow-x:auto;margin:6px 0 12px;padding-bottom:4px}.hs .tile{flex:none;width:100px;min-height:96px;padding:10px;margin:0}.row .b.lk{background:linear-gradient(180deg,#ff9f1c,#e06a00)}
body{font-family:Inter,"SF Pro Display",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.005em}
.card{background:linear-gradient(160deg,rgba(28,62,130,.45),rgba(9,22,56,.6));border:1px solid rgba(120,170,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
.btn{background:linear-gradient(180deg,#3d8fff,#1a5ee6);border:0;box-shadow:0 8px 22px rgba(30,100,255,.4);letter-spacing:.01em}
nav button span{display:grid;place-items:center;margin-bottom:2px}nav{box-shadow:0 12px 34px rgba(0,0,0,.5)}
.tile{transition:transform .15s}.tile:active{transform:scale(.97)}