@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap");:root{--bg-base:#07090e;--bg-card:#121620;--bg-raised:#1a1f2c;--bg-input:#22293a;--accent:#00ffb3;--accent-dim:#00cc8f;--accent-glow:rgba(0,255,179,0.15);--gold:#ffca28;--gold-dim:#d4a51c;--red:#ff4a6b;--orange:#ff8038;--t1:#f5f7fa;--t2:#94a1b8;--t3:#4f5e75;--border:rgba(255,255,255,0.05);--border-md:rgba(255,255,255,0.12);--border-glow:rgba(0,255,179,0.25);--font-display:"Bebas Neue",sans-serif;--font-body:"DM Sans",sans-serif;--font-mono:"DM Mono",monospace}*{box-sizing:border-box;padding:0;margin:0;font-family:var(--font-body);-webkit-tap-highlight-color:transparent}body{color:var(--t1);overflow-x:hidden}.app-shell,body{background:var(--bg-base)}.app-shell{max-width:480px;min-height:100vh;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;position:relative}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .2s ease,border-color .2s ease}.card:active{transform:scale(.99)}.label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t2);margin-bottom:8px;font-family:var(--font-mono)}.input-field{width:100%;background:var(--bg-input);border:1px solid var(--border-md);border-radius:12px;padding:14px 16px;color:var(--t1);font-size:15px;outline:none;transition:all .25s cubic-bezier(.4,0,.2,1)}.input-field:focus{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);background:var(--bg-card)}.btn-primary{width:100%;background:linear-gradient(135deg,var(--accent) 0,var(--accent-dim) 100%);color:#05070a;border:none;border-radius:14px;padding:18px;font-size:16px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px rgba(0,255,179,.25)}.btn-primary:disabled{background:var(--bg-raised);color:var(--t3);box-shadow:none;cursor:not-allowed}.btn-primary:not(:disabled):active{transform:scale(.97);filter:brightness(.9)}.grade-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;font-family:var(--font-display);font-size:18px;font-weight:700}.grade-a{background:rgba(0,255,179,.15);color:var(--accent);border:1px solid rgba(0,255,179,.3);box-shadow:0 0 10px rgba(0,255,179,.1)}.grade-b{background:rgba(255,202,40,.12);color:var(--gold);border:1px solid rgba(255,202,40,.3)}.grade-c{background:rgba(255,74,107,.1);color:var(--red);border:1px solid rgba(255,74,107,.25)}.section-title{font-family:var(--font-display);font-size:32px;letter-spacing:1.5px;background:linear-gradient(180deg,#ffffff 0,var(--t2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.fade-up-1{animation:fadeUp .4s cubic-bezier(.16,1,.3,1) forwards}.fade-up-2{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) forwards}.fade-up-3{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) forwards}.fade-up-4{animation:fadeUp .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes pulse-glow{0%,to{box-shadow:0 4px 20px rgba(0,255,179,.2)}50%{box-shadow:0 4px 30px rgba(0,255,179,.45)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border-md);border-radius:2px}