:root{--bg:#f7faf9;--surface:#fff;--primary:#2f7a63;--primary-dark:#235c4b;--primary-light:#e5f3ee;--accent:#4a90b8;--accent-light:#eaf3f8;--warm:#e8a458;--warm-light:#fdf1e2;--text:#23342f;--text-muted:#667772;--border:#e1e8e5;--success:#3f9268;--success-bg:#e7f5ee;--caution:#c98a2e;--caution-bg:#fbf1e0;--radius:16px;--shadow:0 2px 12px #23342f0f}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100vh}.container{max-width:1080px;margin:0 auto;padding:0 20px}.btn{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--surface);color:var(--primary);border:1.5px solid var(--primary)}.btn-secondary:hover{background:var(--primary-light)}.btn-ghost{color:var(--text-muted);background:0 0}.btn-ghost:hover{background:var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-block{width:100%}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.input{border:1.5px solid var(--border);background:var(--surface);width:100%;color:var(--text);border-radius:12px;padding:13px 16px;font-size:15px}.input:focus{border-color:var(--primary);outline:none}.badge{border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;display:inline-block}.badge-normal{background:var(--accent-light);color:var(--accent)}.badge-hard{background:var(--warm-light);color:var(--warm)}.top-nav{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:28px;padding:16px 0;display:flex}.logo{color:var(--primary-dark);font-size:20px;font-weight:800}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.center-screen{justify-content:center;align-items:center;min-height:60vh;display:flex}.error-text{color:#b3453a;margin-top:4px;font-size:14px}