@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
:root{--color-bg:#f8f8fb;--color-surface:#fff;--color-surface-alt:#f1f1f6;--color-border:#e4e4ed;--color-text:#0f0f1a;--color-text-muted:#6b6b80;--color-accent:#6366f1;--color-accent-hover:#4f46e5;--color-accent-light:#eef2ff;--color-danger:#ef4444;--color-danger-light:#fef2f2;--color-success:#22c55e;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--shadow-sm:0 1px 3px #00000012,0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014,0 2px 4px #0000000a;--shadow-lg:0 12px 32px #0000001a,0 4px 8px #0000000d;--transition:.18s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background:var(--color-bg);color:var(--color-text);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}h1{letter-spacing:-.03em;font-size:2rem;font-weight:800;line-height:1.2}h2{letter-spacing:-.02em;font-size:1.5rem;font-weight:700;line-height:1.3}h3{font-size:1.125rem;font-weight:600}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:8px;padding:.65rem 1.4rem;font-family:inherit;font-size:.9rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 2px 8px #6366f14d}.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 14px #6366f166}.btn-primary:active{transform:translateY(0)}.btn-ghost{color:var(--color-text-muted);border:1.5px solid var(--color-border);background:0 0}.btn-ghost:hover{background:var(--color-surface-alt);color:var(--color-text);border-color:var(--color-text-muted)}.btn-danger{background:var(--color-danger-light);color:var(--color-danger);border:1.5px solid #0000}.btn-danger:hover{background:var(--color-danger);color:#fff}.btn-full{width:100%}.btn-sm{border-radius:var(--radius-sm);padding:.45rem 1rem;font-size:.82rem}.btn-icon{border-radius:var(--radius-sm);border:1.5px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;padding:.5rem;font-size:1rem;display:inline-flex}.btn-icon:hover{background:var(--color-surface-alt);color:var(--color-text)}.input{border-radius:var(--radius-md);border:1.5px solid var(--color-border);background:var(--color-surface);width:100%;color:var(--color-text);transition:border-color var(--transition),box-shadow var(--transition);outline:none;padding:.7rem 1rem;font-family:inherit;font-size:.9rem}.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #6366f11f}.input::placeholder{color:var(--color-text-muted)}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--color-text);font-size:.85rem;font-weight:600}.form-hint{color:var(--color-text-muted);font-size:.78rem}.form-error{color:var(--color-danger);font-size:.82rem;font-weight:500}.card{background:var(--color-surface);border-radius:var(--radius-lg);border:1.5px solid var(--color-border);box-shadow:var(--shadow-sm)}.page-center{justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.divider{color:var(--color-text-muted);align-items:center;gap:12px;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:var(--color-border);flex:1;height:1px}.badge{border-radius:var(--radius-full);background:var(--color-accent-light);color:var(--color-accent);align-items:center;gap:4px;padding:2px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.alert{border-radius:var(--radius-md);border:1.5px solid #0000;padding:.85rem 1.1rem;font-size:.88rem;font-weight:500}.alert-error{background:var(--color-danger-light);color:var(--color-danger);border-color:#fecaca}.alert-success{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}.spinner-dark{border-color:#6366f133;border-top-color:var(--color-accent)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:.4s forwards fadeUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:.3s forwards fadeIn}
