:root { --bg:#0d1420; --panel:#16202e; --panel-2:#1a2735; --field-bg:#111b27; --border:#243140; --border-strong:#2f3d4e; --text:#e7edf4; --text-2:#c2ccd8; --muted:#8a98a8; --accent:#2f7bf6; --accent-2:#1f6ae8; --accent-soft:rgba(47,123,246,.16); --err:#f87171; --err-soft:rgba(248,113,113,.14); --brand-grad:linear-gradient(100deg,#2A588E 14%,#0FB286 58%,#FB8C00 100%); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 12px 32px rgba(0,0,0,.45); --radius-sm:8px; --radius-lg:16px; }
html[data-theme="light"] { --bg:#eef1f6; --panel:#fff; --panel-2:#f4f6fa; --field-bg:#fff; --border:#e3e8f0; --border-strong:#cdd5e1; --text:#18222f; --text-2:#3f4a59; --muted:#76828f; --accent-soft:rgba(47,123,246,.12); --err-soft:rgba(248,113,113,.12); --shadow-sm:0 1px 2px rgba(16,24,40,.06); --shadow-md:0 18px 40px rgba(16,24,40,.18); }
* { box-sizing: border-box; }
[disabled] { opacity: .45; cursor: not-allowed; }
body { margin:0; font-family:'MADE Tommy',-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button { font-family:inherit; cursor:pointer; }
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:1px solid var(--border-strong); background:var(--panel); color:var(--text-2); border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; transition:.15s ease; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.field { margin-bottom:16px; }
label.lbl { display:block; margin-bottom:6px; font-size:12.5px; font-weight:700; color:var(--text-2); letter-spacing:.01em; }
input[type=text], input[type=password] { width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--field-bg); color:var(--text); font-family:inherit; font-size:13.5px; transition:.15s ease; }
input::placeholder { color:#5f6e7e; }
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-gate { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box { width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:26px; animation:login-in .18s ease; }
@keyframes login-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.login-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.login-ico { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; border-radius:13px; background:var(--brand-grad); color:#fff; font-size:22px; box-shadow:var(--shadow-sm); }
.login-head-txt h2 { margin:0; font-size:17px; font-weight:700; }
.login-head-txt p { margin:2px 0 0; font-size:12.5px; color:var(--muted); }
.login-error { display:none; align-items:center; gap:8px; margin-bottom:16px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--err-soft); border:1px solid rgba(248,113,113,.35); color:var(--err); font-size:13px; }
.login-error.show { display:flex; }
.login-pass { position:relative; display:flex; align-items:center; }
.login-pass input { padding-right:44px; }
.login-toggle { position:absolute; right:6px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; background:transparent; color:var(--muted); border-radius:8px; font-size:16px; }
.login-toggle:hover { background:var(--panel-2); color:var(--text-2); }
.login-submit { width:100%; justify-content:center; margin-top:6px; padding:12px; font-size:14.5px; }
.login-note { display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 0; font-size:11.5px; color:var(--muted); text-align:center; }