:root{--bg-primary:#070a11;--bg-secondary:#0e1424;--bg-card:#12192bbf;--bg-card-hover:#1c2641d9;--bg-input:#0a0e1acc;--border-subtle:#ffffff14;--border-active:#38bdf8b3;--border-glow:0 0 16px #38bdf859;--text-main:#f1f5f9;--text-muted:#94a3b8;--text-dim:#475569;--accent-cyan:#38bdf8;--accent-cyan-hover:#0ea5e9;--accent-emerald:#10b981;--accent-emerald-glow:0 0 20px #10b98166;--accent-crimson:#f43f5e;--accent-crimson-glow:0 0 20px #f43f5e66;--accent-amber:#f59e0b;--accent-violet:#a855f7;--card-shadow:0 12px 36px #00000073;--key-shadow:0 4px 10px #00000040;--modal-bg:#0d1322;--feedback-correct-bg:#081c14f2;--feedback-incorrect-bg:#240c12f2;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-heading:"Outfit", var(--font-sans);--font-mono:"JetBrains Mono", monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--ease-spring:cubic-bezier(.175, .885, .32, 1.275);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg-primary:#f8fafc;--bg-secondary:#e2e8f0;--bg-card:#ffffffe0;--bg-card-hover:#fffffffa;--bg-input:#fff;--border-subtle:#0f172a14;--border-active:#0284c7cc;--border-glow:0 0 16px #0284c740;--text-main:#0f172a;--text-muted:#64748b;--text-dim:#94a3b8;--accent-cyan:#0284c7;--accent-cyan-hover:#0369a1;--accent-emerald:#059669;--accent-emerald-glow:0 0 20px #05966940;--accent-crimson:#e11d48;--accent-crimson-glow:0 0 20px #e11d4840;--accent-amber:#d97706;--accent-violet:#9333ea;--card-shadow:0 12px 36px #0f172a14;--key-shadow:0 2px 6px #0f172a0f;--modal-bg:#fff;--feedback-correct-bg:#f0fdf4f7;--feedback-incorrect-bg:#fff1f2f7}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-primary);background-image:radial-gradient(ellipse at 50% -20%, #38bdf81f, transparent 70%), radial-gradient(ellipse at 80% 100%, #a855f70f, transparent 60%), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);width:100%;height:100%;color:var(--text-main);font-family:var(--font-sans);transition:background-color .25s,color .25s;position:fixed;overflow:hidden}[data-theme=light] html,[data-theme=light] body{background-image:radial-gradient(at 50% -20%,#0284c714,#0000 70%),linear-gradient(#f8fafc 0%,#e2e8f0 100%)}.app-container{width:100%;max-width:480px;height:100dvh;padding:10px 14px env(safe-area-inset-bottom,10px) 14px;flex-direction:column;justify-content:space-between;margin:0 auto;display:flex}.app-header{justify-content:space-between;align-items:center;padding-bottom:6px;display:flex}.brand{align-items:center;gap:8px;display:flex}.brand-icon{border-radius:var(--radius-md);background:linear-gradient(135deg,#0284c7,#0369a1);border:1px solid #ffffff26;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 4px 12px #0284c759}.brand-deg{font-family:var(--font-heading);color:#fff;letter-spacing:-.5px;font-size:14px;font-weight:800}.brand-title{font-family:var(--font-heading);letter-spacing:.5px;font-size:16px;font-weight:800;line-height:1.1}[data-theme=dark] .brand-title{background:linear-gradient(90deg,#f8fafc,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text}[data-theme=light] .brand-title{color:#0f172a}.header-actions{align-items:center;gap:6px;display:flex}.streak-badge{border-radius:var(--radius-full);font-family:var(--font-mono);color:var(--accent-amber);transition:transform .2s var(--ease-spring);background:#f59e0b1f;border:1px solid #f59e0b4d;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:700;display:flex}.streak-badge.bump{transform:scale(1.18)}.icon-btn{border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;background:#ffffff0a;justify-content:center;align-items:center;width:34px;height:34px;transition:all .15s;display:flex;position:relative}[data-theme=light] .icon-btn{background:#0f172a0a}.icon-btn:hover{color:var(--text-main);border-color:var(--accent-cyan);background:#ffffff1a}.icon-btn:active{transform:scale(.92)}.lang-btn{font-family:var(--font-mono);color:var(--accent-cyan);padding:0 4px;font-size:11px;font-weight:800}.svg-icon{width:17px;height:17px}.status-dot{background:var(--accent-emerald);width:6px;height:6px;box-shadow:0 0 6px var(--accent-emerald);border-radius:50%;position:absolute;top:5px;right:5px}.status-dot.pending{background:var(--accent-amber);box-shadow:0 0 6px var(--accent-amber)}.status-dot.offline{background:var(--text-dim);box-shadow:none}.difficulty-bar{background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);gap:4px;margin:4px 0 8px;padding:3px;display:flex}.diff-btn{color:var(--text-muted);border-radius:calc(var(--radius-md) - 3px);cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 4px;font-size:11px;font-weight:600;transition:all .2s;display:flex}.diff-tag{font-family:var(--font-mono);background:#ffffff14;border-radius:4px;padding:1px 4px;font-size:9px;font-weight:800}[data-theme=light] .diff-tag{background:#0f172a0f}.diff-btn.active{color:var(--text-main);background:#38bdf826;border:1px solid #38bdf859;box-shadow:0 2px 8px #00000014}.diff-btn.active .diff-tag{background:var(--accent-cyan);color:#fff}.practice-stage{flex-direction:column;flex:1;justify-content:center;min-height:0;margin:2px 0 8px;display:flex;position:relative}.problem-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);flex-direction:column;gap:10px;padding:16px 18px;display:flex;position:relative}.math-row{font-family:var(--font-mono);letter-spacing:.5px;justify-content:space-between;align-items:center;font-size:25px;font-weight:700;display:flex}.operand-row{color:var(--text-main);padding:2px 4px}.math-seg{text-align:center;font-variant-numeric:tabular-nums;flex:1}.math-seg.deg{text-align:right;padding-right:12px}.math-seg.min{text-align:center}.math-seg.sec{text-align:left;padding-left:12px}.operator-divider{align-items:center;gap:10px;margin:-4px 0;display:flex}.operator-badge{width:26px;height:26px;color:var(--accent-cyan);font-family:var(--font-mono);background:#38bdf81f;border:1px solid #38bdf84d;border-radius:7px;justify-content:center;align-items:center;font-size:16px;font-weight:800;display:flex}.divider-line{background:linear-gradient(90deg, #38bdf84d, var(--border-subtle));flex:1;height:1px}.calc-divider{background:linear-gradient(90deg, transparent, #38bdf880, var(--border-subtle), transparent);width:100%;height:2px;margin:2px 0 4px}.input-row{gap:8px;margin-top:2px;display:flex}.input-bucket{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:default;outline:none;flex:1;justify-content:center;align-items:center;height:56px;padding:0 6px;transition:all .2s;display:flex;position:relative}.input-bucket.active{border-color:var(--accent-cyan);box-shadow:var(--border-glow)}.input-bucket.correct{border-color:var(--accent-emerald)!important;box-shadow:var(--accent-emerald-glow)!important;background:#10b9811a!important}.input-bucket.incorrect{border-color:var(--accent-crimson)!important;box-shadow:var(--accent-crimson-glow)!important;background:#f43f5e1a!important}.bucket-digits{font-family:var(--font-mono);letter-spacing:1px;color:var(--text-main);font-variant-numeric:tabular-nums;font-size:25px;font-weight:800}.placeholder{color:var(--text-dim);letter-spacing:2px;font-weight:600}.bucket-unit{font-family:var(--font-mono);color:var(--accent-cyan);margin-left:2px;font-size:18px;font-weight:700}.bucket-cursor{background:var(--accent-cyan);border-radius:2px;width:20px;height:2px;animation:.9s ease-in-out infinite alternate cursorPulse;position:absolute;bottom:6px}@keyframes cursorPulse{0%{opacity:.2;transform:scaleX(.7)}to{opacity:1;transform:scaleX(1)}}.feedback-banner{border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(28px);z-index:10;animation:bannerEnter .22s var(--ease-spring);flex-direction:column;justify-content:space-between;padding:16px;display:flex;position:absolute;inset:0}@keyframes bannerEnter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.feedback-banner.correct{background:var(--feedback-correct-bg);border:2px solid var(--accent-emerald);box-shadow:0 16px 40px #10b98133}.feedback-banner.incorrect{background:var(--feedback-incorrect-bg);border:2px solid var(--accent-crimson);box-shadow:0 16px 40px #f43f5e33}.feedback-header{justify-content:space-between;align-items:center;display:flex}.feedback-badge{font-family:var(--font-heading);letter-spacing:1px;border-radius:var(--radius-full);text-transform:uppercase;padding:3px 10px;font-size:12px;font-weight:800}.feedback-banner.correct .feedback-badge{background:var(--accent-emerald);color:#fff}.feedback-banner.incorrect .feedback-badge{background:var(--accent-crimson);color:#fff}.feedback-time{font-family:var(--font-mono);color:var(--text-muted);font-size:12px}.feedback-title{font-family:var(--font-heading);margin-top:2px;font-size:18px;font-weight:800}.feedback-banner.correct .feedback-title{color:var(--accent-emerald)}.feedback-banner.incorrect .feedback-title{color:var(--accent-crimson)}.feedback-desc{color:var(--text-main);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#0000001a;padding:8px 10px;font-size:12px;line-height:1.45}.feedback-answer{font-family:var(--font-mono);color:var(--text-main);padding:4px 0;font-size:15px;font-weight:700}.btn-proceed{border-radius:var(--radius-md);width:100%;font-family:var(--font-heading);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-size:15px;font-weight:800;transition:all .15s;display:flex;box-shadow:0 4px 14px #00000026}.feedback-banner.correct .btn-proceed{color:#fff;background:linear-gradient(135deg,#10b981,#059669)}.feedback-banner.incorrect .btn-proceed{color:#fff;background:linear-gradient(135deg,#f43f5e,#be123c)}.btn-proceed:active{transform:scale(.98)}.numpad-container{width:100%;padding-top:2px}.numpad-grid{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.num-key{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);height:54px;color:var(--text-main);font-family:var(--font-mono);cursor:pointer;touch-action:manipulation;box-shadow:var(--key-shadow);justify-content:center;align-items:center;font-size:23px;font-weight:700;transition:transform 80ms,background-color .15s,border-color .15s;display:flex}.num-key:hover{background:var(--bg-card-hover);border-color:#38bdf84d}.num-key:active{border-color:var(--accent-cyan);background:#38bdf826;transform:scale(.94)}.key-util{color:var(--text-muted)}.key-backspace:hover{color:var(--accent-crimson)}.key-svg{width:20px;height:20px}.key-action{color:var(--accent-cyan);font-family:var(--font-heading);background:#38bdf824;border:1px solid #38bdf866;justify-content:center;align-items:center;gap:5px;font-size:16px;font-weight:800;display:flex}.key-action:hover{border-color:var(--accent-cyan);background:#38bdf83d}.key-action.submit-ready{animation:1.2s ease-in-out infinite alternate submitPulse;color:#fff!important;background:linear-gradient(135deg,#10b981,#059669)!important;border-color:#34d399!important;box-shadow:0 4px 16px #10b98159!important}@keyframes submitPulse{0%{transform:scale(1)}to{transform:scale(1.02)}}.app-modal{background:0 0;border:none;width:100%;max-width:440px;margin:auto;padding:16px}.app-modal::backdrop{backdrop-filter:blur(8px);background:#04070dbf}[data-theme=light] .app-modal::backdrop{background:#0f172a73}.modal-card{background:var(--modal-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-main);flex-direction:column;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 24px 60px #00000059}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.modal-title{font-family:var(--font-heading);font-size:17px;font-weight:800}.modal-close{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px 8px;font-size:18px}.modal-close:hover{color:var(--text-main)}.modal-body{flex-direction:column;gap:14px;padding:16px 18px;display:flex;overflow-y:auto}.stats-overview-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.stat-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff08;flex-direction:column;gap:3px;padding:10px 12px;display:flex}[data-theme=light] .stat-card{background:#0f172a08}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}.stat-val{font-family:var(--font-mono);color:var(--text-main);font-size:20px;font-weight:800}.stat-val.accent{color:var(--accent-cyan)}.stat-val.gold{color:var(--accent-amber)}.section-title{text-transform:uppercase;letter-spacing:1px;color:var(--accent-cyan);margin-top:2px;font-size:11px;font-weight:700}.diagnostics-breakdown{flex-direction:column;gap:8px;display:flex}.diag-bar-row{flex-direction:column;gap:3px;display:flex}.diag-meta{font-size:11px;font-family:var(--font-mono);justify-content:space-between;align-items:center;display:flex}.diag-tag{border-radius:4px;padding:2px 6px;font-weight:700}.diag-tag.modulo{color:#a855f7;background:#a855f726}.diag-tag.base10{color:#f43f5e;background:#f43f5e26}.diag-tag.cascade{color:#f59e0b;background:#f59e0b26}.diag-tag.arithmetic{color:var(--accent-cyan);background:#38bdf826}.diag-bar-track{background:var(--border-subtle);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.diag-bar-fill{border-radius:var(--radius-full);height:100%;transition:width .4s var(--ease-smooth)}.diag-bar-fill.modulo{background:var(--accent-violet)}.diag-bar-fill.base10{background:var(--accent-crimson)}.diag-bar-fill.cascade{background:var(--accent-amber)}.diag-bar-fill.arithmetic{background:var(--accent-cyan)}.history-list{flex-direction:column;gap:6px;max-height:180px;display:flex;overflow-y:auto}.history-item{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);justify-content:space-between;align-items:center;padding:7px 10px;font-size:12px;display:flex}.history-item.pass{border-left:3px solid var(--accent-emerald)}.history-item.fail{border-left:3px solid var(--accent-crimson)}.empty-history{color:var(--text-dim);text-align:center;padding:12px 0;font-size:12px}.device-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-direction:column;gap:4px;padding:10px 12px;display:flex}.device-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.device-id-code{font-family:var(--font-mono);color:var(--accent-cyan);word-break:break-all;font-size:11px}.cloud-status-card{border-radius:var(--radius-md);background:#38bdf80d;border:1px solid #38bdf833;flex-direction:column;gap:8px;padding:12px;display:flex}.cloud-status-header{align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.status-indicator-dot{background:var(--accent-emerald);border-radius:50%;width:7px;height:7px}.cloud-desc{color:var(--text-muted);font-size:12px;line-height:1.4}.hidden{display:none!important}@media (width>=600px){.app-container{border:1px solid var(--border-subtle);background:var(--bg-card);backdrop-filter:blur(20px);border-radius:24px;max-width:440px;height:90vh;margin:5vh auto;box-shadow:0 24px 80px #0003}}