*{box-sizing:border-box;margin:0;padding:0}
:root[data-theme="dark"]{--bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;--border2:#3d444d;--text:#e6edf3;--text2:#8d96a0;--text3:#57606a}
:root[data-theme="light"]{--bg:#f0f4f8;--bg2:#fff;--bg3:#f8fafc;--border:#e2e8f0;--border2:#cbd5e1;--text:#0f172a;--text2:#475569;--text3:#94a3b8}
:root{--amber:#f5a623;--red:#f85149;--green:#3fb950;--mono:'Share Tech Mono',monospace;--sans:'Barlow',sans-serif;--cond:'Barlow',sans-serif}
[data-theme="light"] body::before{display:none}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;transition:background .2s,color .2s}

.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg);position:relative}
.page::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(245,166,35,.06) 0%,transparent 70%);pointer-events:none}

.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;width:100%;max-width:400px;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,.3)}

.card-top{padding:36px 36px 28px;text-align:center;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}
.logo-icon{width:32px;height:32px}
.logo-text{font-family:var(--cond);font-size:20px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--amber)}
.subtitle{font-size:12px;color:var(--text3);font-family:var(--cond);letter-spacing:1px;text-transform:uppercase;margin-top:4px}
.app-version{font-size:11px;color:var(--text2);font-family:var(--cond);letter-spacing:1.2px;text-transform:uppercase;margin-top:6px}

.card-body{padding:28px 36px 36px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--cond);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.field input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:10px 14px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none;transition:.15s}
.field input:focus{border-color:var(--amber)}
.field input.error{border-color:var(--red)}

.btn-login{width:100%;padding:11px;background:var(--amber);color:#000;border:none;border-radius:6px;font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.btn-login:hover{background:#fbbf24}
.btn-login:disabled{opacity:.5;cursor:not-allowed}

.error-msg{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3);border-radius:6px;padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:16px;display:none}

.theme-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:.15s}
.theme-btn:hover{border-color:var(--amber);color:var(--amber)}

.spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .6s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}