:root{--blue:#1677ff;--blue2:#0b52d9;--navy:#071b4d;--text:#14244a;--muted:#71809d;--bg:#f5faff;--card:#fff;--line:#e4edf8;--green:#22b66b;--red:#f05252;--yellow:#ffc233;--shadow:0 16px 35px rgba(5,34,95,.12);--radius:28px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#fff 0,#f6fbff 45%,#eaf5ff 100%);color:var(--text)}a{text-decoration:none;color:inherit}.app{width:min(430px,100%);min-height:100vh;margin:0 auto;padding:22px 20px 96px;position:relative;overflow:hidden}.logo{height:72px;display:block;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px}.icon-btn,.xp-pill,.account-pill{height:52px;border:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800}.icon-btn{width:52px;font-size:28px}.xp-pill,.account-pill{padding:0 16px;gap:8px}.star{color:var(--yellow);font-size:25px}.hero{margin-top:8px;display:grid;grid-template-columns:1fr 168px;align-items:center}.hero h1{font-size:34px;margin:0 0 8px;color:var(--navy)}.hero p{font-size:18px;line-height:1.35;color:var(--muted);margin:0}.mascot{width:180px;filter:drop-shadow(0 16px 20px rgba(17,103,255,.2))}.card{background:rgba(255,255,255,.92);border:1px solid rgba(226,237,248,.9);box-shadow:var(--shadow);border-radius:var(--radius);padding:20px;margin:16px 0}.btn{width:100%;border:0;border-radius:22px;padding:19px 20px;font-size:20px;font-weight:850;cursor:pointer;transition:.18s transform,.18s opacity;display:flex;align-items:center;justify-content:center;gap:12px}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,var(--blue),#0967f2);color:#fff;box-shadow:0 14px 26px rgba(22,119,255,.28)}.btn-secondary{background:#fff;color:var(--blue);box-shadow:var(--shadow);border:1px solid var(--line)}.tiny{font-size:13px;color:var(--muted);text-align:center}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}.stat{padding:4px 8px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat .ico{font-size:26px}.stat strong{display:block;color:var(--blue);font-size:22px}.stat span{font-size:12px;color:var(--muted)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--navy);font-size:18px;font-weight:850}.link{color:var(--blue);font-weight:800}.leader{display:flex;align-items:center;gap:14px;margin-top:14px}.avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#d8ebff,#fff);display:grid;place-items:center;font-size:28px}.bar{height:10px;background:#e6eef9;border-radius:99px;overflow:hidden}.bar>i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--blue),#62a9ff);border-radius:99px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.chip{padding:7px 11px;border-radius:999px;background:#eaf7ef;color:#16834c;font-weight:800;font-size:13px}.chip.lock{background:#edf2f8;color:#71809d}.quote{display:flex;align-items:center;gap:14px;background:#eaf5ff}.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(430px,100%);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 -12px 25px rgba(5,34,95,.1);border-radius:26px 26px 0 0;padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);z-index:10}.nav-item{display:grid;place-items:center;gap:4px;color:#6b7895;font-size:12px;font-weight:800}.nav-item.active{color:var(--blue);background:#eef6ff;border-radius:18px;padding:8px}.login-panel{padding-top:24px;text-align:center}.login-panel .mascot{width:230px}.field{width:100%;border:1px solid var(--line);border-radius:18px;padding:16px 18px;font-size:16px;margin:8px 0;background:#fff}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#edf5ff;border-radius:18px;padding:4px;margin-bottom:12px}.tab{border:0;background:transparent;border-radius:15px;padding:12px;font-weight:850;color:var(--muted)}.tab.active{background:#fff;color:var(--blue);box-shadow:0 5px 15px rgba(5,34,95,.08)}.hidden{display:none!important}.error{color:var(--red);font-weight:700}.success{color:var(--green);font-weight:700}.progress-card h2{margin:0 0 12px}.quiz-header{margin-top:8px}.progress-line{height:8px;background:#e6eef9;border-radius:999px;margin-top:14px;position:relative}.progress-line i{height:100%;display:block;background:var(--blue);border-radius:999px}.progress-line .marker{position:absolute;top:-13px;transform:translateX(-50%);font-size:28px}.theme-card{display:flex;align-items:center;justify-content:space-between}.theme-card .left{display:flex;align-items:center;gap:16px}.bubble-icon{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:26px}.hole-wrap{text-align:center;margin:10px 0 -20px}.hole-wrap img{width:280px}.question-card{position:relative;z-index:2}.question-meta{display:flex;align-items:center;justify-content:space-between;color:var(--blue);font-weight:850}.timer{background:#edf6ff;border-radius:999px;padding:8px 13px;display:flex;gap:7px;align-items:center}.timer.danger{color:var(--red);background:#fff1f1}.question-title{font-size:28px;line-height:1.16;color:var(--navy);margin:18px 0}.answer{display:flex;align-items:center;gap:16px;width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px 18px;margin:10px 0;font-size:18px;font-weight:800;color:var(--navy);text-align:left}.answer .num{width:38px;height:38px;border-radius:50%;background:#edf4ff;display:grid;place-items:center}.answer.selected{border:2px solid var(--blue);color:var(--blue);background:#f8fcff}.answer.correct{border-color:var(--green);background:#eefaf4;color:var(--green)}.answer.wrong{border-color:var(--red);background:#fff3f3;color:var(--red)}.explanation{background:#f7fbff;border-radius:18px;padding:14px;margin-top:12px;color:var(--text);line-height:1.45}.list-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 0}.list-row:last-child{border-bottom:0}.toggle{border:0;border-radius:999px;padding:8px 12px;font-weight:800}.on{background:#eaf7ef;color:#16834c}.off{background:#fff0f0;color:#b91c1c}@media (max-width:380px){.app{padding-inline:14px}.hero{grid-template-columns:1fr 130px}.mascot{width:140px}.question-title{font-size:24px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}.stat{border-right:0}}
.speech-bubble{margin-top:-170px;margin-left:230px;background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:18px;font-weight:900;display:inline-block;color:var(--navy)}
.finish-card{text-align:center;padding-top:28px}.finish-mascot{width:150px;margin:0 auto 8px}.finish-card h1{color:var(--navy);font-size:30px;margin:12px 0 8px}.finish-card p{color:var(--muted);margin:0 0 18px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 22px}.result-grid div{background:#f3f8ff;border:1px solid var(--line);border-radius:18px;padding:14px 10px}.result-grid strong{display:block;color:var(--blue);font-size:24px}.result-grid span{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-top:3px}.btn:disabled{cursor:not-allowed;filter:saturate(.7)}
@media (max-width:380px){.speech-bubble{margin-left:185px;margin-top:-155px;padding:14px}.finish-mascot{width:130px}}
.done-today{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#f7fbff,#fff)}.done-today h2{margin:0 0 4px;color:var(--navy);font-size:20px}.done-today p{margin:0;color:var(--muted);line-height:1.35}.done-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#eaf7ef;font-size:26px;flex:0 0 52px}.btn-small{font-size:16px;padding:14px 18px;margin-top:12px}.page-title{margin:0 0 8px;color:var(--navy);font-size:30px}.muted{color:var(--muted);line-height:1.45}.setup-form label{display:block;font-weight:850;color:var(--navy);margin:14px 0 6px}.module-checks{display:grid;gap:8px;margin:8px 0 20px}.check-row{display:flex!important;align-items:center;gap:10px;background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:0!important}.check-row input{width:20px;height:20px;accent-color:var(--blue)}.answer .num{flex:0 0 38px;min-width:38px;max-width:38px;width:38px;height:38px;line-height:38px;text-align:center}.answer-text{display:block;min-width:0;line-height:1.25}.finish-card{text-align:center}.finish-mascot{width:150px}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.result-grid div{background:#f7fbff;border:1px solid var(--line);border-radius:18px;padding:12px}.result-grid strong{display:block;color:var(--blue);font-size:24px}.result-grid span{font-size:12px;color:var(--muted);font-weight:800}

.practice-link{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;color:#1677ff;font-weight:900;text-decoration:none;font-size:14px}.practice-link:hover{text-decoration:underline}.answer .num{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;border-radius:999px!important;display:inline-grid!important;place-items:center!important;flex:0 0 34px!important;line-height:1!important;box-sizing:border-box}

/* Login DA update */
body.login-page{background:#f7fbff url('/assets/login-bg.jpg') center bottom/cover no-repeat fixed;}
.login-page .app{background:transparent;}
.login-panel{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;}
.login-panel .logo{margin-top:10px;}
.login-panel .login-mascot{width:260px;max-width:82%;margin:18px auto 6px;filter:drop-shadow(0 20px 28px rgba(17,103,255,.22));}
.login-panel .card{backdrop-filter:blur(10px);background:rgba(255,255,255,.94)}
@media (max-width:380px){.login-panel .login-mascot{width:220px}}