*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#0b1026;color:#eef3ff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",Roboto,sans-serif;min-height:100%}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:radial-gradient(1200px 600px at 50% -200px,#2a1b6b 0%,#0b1026 60%) fixed}
#app{max-width:720px;margin:0 auto;padding:16px 16px 40px}
.center{display:flex;align-items:center;justify-content:center;min-height:60vh;flex-direction:column;text-align:center;gap:12px}
.spinner{width:40px;height:40px;border:4px solid #ffffff33;border-top-color:#ffd84d;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
h1{font-size:28px;margin:6px 0}h2{font-size:22px;margin:4px 0 10px}
.muted{color:#9fb0d8;font-size:15px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.badge{display:flex;align-items:center;gap:10px}
.tierbox{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#ffd84d,#ff8a00);color:#1b1035;font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #b35c00}
.title{font-weight:800;font-size:20px}
.xpbar{height:12px;background:#ffffff1a;border-radius:8px;overflow:hidden;margin-top:6px;width:170px}
.xpbar>div{height:100%;background:linear-gradient(90deg,#4dd7ff,#7b5cff);border-radius:8px;transition:width .6s}
.streak{font-weight:800;font-size:20px;background:#ffffff12;padding:8px 12px;border-radius:12px}
.card{background:#151c3d;border:1px solid #ffffff14;border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 4px 0 #0007}
.note{background:#1f2a5c;border-left:5px solid #ffd84d}
.week{display:flex;gap:8px;justify-content:space-between;margin:10px 0}
.dot{flex:1;text-align:center;font-size:12px;color:#9fb0d8}
.dot .c{height:40px;border-radius:12px;background:#ffffff10;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:4px;border:2px solid transparent}
.dot.done .c{background:#1fbf75;color:#fff}.dot.today .c{border-color:#ffd84d}.dot.part .c{background:#1fbf7544}.dot.exc .c{background:#4d7cff}
.money{font-size:30px;font-weight:900;color:#5dff9e}
.quest{display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .1s}
.quest:active{transform:scale(.98)}
.quest .ic{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.quest .tx{flex:1}.quest .tx b{font-size:19px;display:block}
.quest.done{opacity:.6}.quest.done .ck{display:block}
.ck{display:none;font-size:26px}
.btn{appearance:none;border:0;border-radius:14px;padding:16px 20px;font-size:19px;font-weight:800;color:#1b1035;background:#ffd84d;box-shadow:0 4px 0 #b39400;cursor:pointer;font-family:inherit}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b39400}
.btn.alt{background:#2f3b74;color:#eef3ff;box-shadow:0 4px 0 #1a2250}
.btn.green{background:#1fbf75;color:#fff;box-shadow:0 4px 0 #11804d}
.btn.wide{width:100%;margin-top:10px}
.btn:disabled{opacity:.4}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>.btn{flex:1}
.prompt{font-size:26px;font-weight:800;text-align:center;margin:14px 0}
.visual{display:flex;justify-content:center;margin:8px 0 14px}.visual svg{width:100%;height:auto}
.answerbox{font-size:40px;font-weight:900;text-align:center;min-height:62px;background:#0b1026;border-radius:14px;padding:6px;letter-spacing:2px;border:2px solid #ffffff22}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.keypad button{font-size:28px;padding:16px 0;border-radius:14px;border:0;background:#2f3b74;color:#fff;font-weight:800;box-shadow:0 4px 0 #1a2250;font-family:inherit}
.keypad button:active{transform:translateY(3px);box-shadow:0 1px 0 #1a2250}
.mc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mc button{font-size:22px;padding:18px 8px;border-radius:14px;border:0;background:#2f3b74;color:#fff;font-weight:800;box-shadow:0 4px 0 #1a2250;font-family:inherit}
.progress{display:flex;gap:6px;margin:6px 0 4px}.progress span{flex:1;height:8px;border-radius:6px;background:#ffffff1a}.progress span.on{background:#ffd84d}
.feedback{border-radius:16px;padding:14px;margin-top:12px;font-size:18px;line-height:1.4}
.feedback.good{background:#103d2a;border:2px solid #1fbf75}.feedback.bad{background:#3d1a22;border:2px solid #ff5d7a}
.helpbtn{background:none;border:2px solid #7fd3ff;color:#7fd3ff;border-radius:12px;padding:8px 12px;font-weight:700;font-size:16px;font-family:inherit}
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal.hidden{display:none}
.modal-card{background:#151c3d;border-radius:20px;padding:20px;max-width:560px;width:100%;max-height:90vh;overflow:auto;font-size:18px;line-height:1.45}
.modal-card svg{width:100%;height:auto;max-width:360px;display:block;margin:8px auto}
.tip{background:#ffd84d22;border-radius:10px;padding:8px 10px}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:#1fbf75;color:#fff;padding:12px 20px;border-radius:14px;font-weight:800;font-size:20px;z-index:20;transition:opacity .3s}
.toast.hidden{opacity:0;pointer-events:none}
.big{font-size:56px;font-weight:900;text-align:center}
.move{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#0b1026;margin:8px 0;font-size:19px;cursor:pointer;border:2px solid transparent}
.move.on{border-color:#1fbf75;background:#103d2a}
.move .box{width:30px;height:30px;border-radius:8px;border:3px solid #ffffff55;display:flex;align-items:center;justify-content:center}
.move.on .box{background:#1fbf75;border-color:#1fbf75}
input,select{width:100%;font-size:19px;padding:14px;border-radius:12px;border:2px solid #ffffff22;background:#0b1026;color:#fff;font-family:inherit;margin:6px 0 12px}
label{font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}.chips button{flex:1;min-width:70px;padding:12px;border-radius:12px;border:2px solid #ffffff22;background:#0b1026;color:#fff;font-size:18px;font-weight:800;font-family:inherit}.chips button.on{border-color:#ffd84d;background:#3a3210}
.timer{font-size:44px;font-weight:900;text-align:center;color:#ffd84d}
.confetti{position:fixed;top:-10px;pointer-events:none;width:10px;height:14px;z-index:30;animation:fall 1.6s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.zone{display:flex;align-items:center;gap:10px;padding:8px 0}
.zone .bar{flex:1;height:10px;border-radius:6px;background:#ffffff14;overflow:hidden}.zone .bar>div{height:100%;background:#4dd7ff}
table{width:100%;border-collapse:collapse;font-size:15px}td,th{padding:6px;border-bottom:1px solid #ffffff14;text-align:left}