:root, [data-theme="light"] {
  --page-bg:#f5f6fa; --card:#fff; --card-border:#e9eaf2; --text:#1b1d27;
  --text-muted:#5c6070; --text-faint:#7d8293; --accent:#7c3aed; --accent-hover:#6a28d9;
  --accent-fg:#fff; --input-bg:#fafbff; --input-border:#e3e6f0;
  --red:#b91c1c; --red-bg:#fee2e2; --green:#166534; --green-bg:#dcfce7;
  --shadow:0 12px 40px rgba(18,20,33,.12);
}
[data-theme="dark"] {
  --page-bg:#0f1118; --card:#171a26; --card-border:#262a3b; --text:#e7e9f4;
  --text-muted:#a8adc2; --text-faint:#8b91a8; --accent:#a78bfa; --accent-hover:#8b6cf0;
  --accent-fg:#14101f; --input-bg:#1c2030; --input-border:#2d3248;
  --red:#fca5a5; --red-bg:#3b1a1a; --green:#86efac; --green-bg:#12311f;
  --shadow:0 12px 48px rgba(0,0,0,.55);
}
[data-theme="classic"] {
  --page-bg:linear-gradient(135deg,#016f6f 0%,#01CBCB 100%); --card:#fff; --card-border:transparent;
  --text:#14302f; --text-muted:#4a6362; --text-faint:#6f8988; --accent:#007d7f; --accent-hover:#006b6d;
  --accent-fg:#fff; --input-bg:#f6fdfd; --input-border:#9ccfd0;
  --red:#8a1720; --red-bg:#ffe6e8; --green:#075f2b; --green-bg:#def8e6;
  --shadow:0 12px 40px rgba(0,60,60,.28);
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; padding:24px; display:flex; align-items:center; justify-content:center;
  font-family:'Segoe UI Variable','Segoe UI',system-ui,Tahoma,sans-serif;
  background:var(--page-bg); color:var(--text);
}
.auth-box {
  width:420px; max-width:100%; padding:38px 34px; text-align:center;
  background:var(--card); border:1px solid var(--card-border); border-radius:20px; box-shadow:var(--shadow);
}
.auth-logo {
  width:56px; height:56px; margin:0 auto 15px; border-radius:50%; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; background:#000; color:#fff;
  font-size:1.55rem; font-weight:800; box-shadow:0 3px 10px rgba(0,0,0,.2);
}
h1 { margin:0 0 7px; color:var(--accent); font-size:1.35rem; line-height:1.25; }
.lead { margin:0 0 24px; color:var(--text-muted); font-size:.88rem; line-height:1.55; }
.field { margin-bottom:16px; text-align:left; }
.field label { display:block; margin-bottom:6px; color:var(--text-muted); font-size:.8rem; font-weight:700; }
.field input {
  width:100%; padding:11px 13px; border:2px solid var(--input-border); border-radius:10px;
  background:var(--input-bg); color:var(--text); font:inherit; font-size:.94rem;
}
.field input:focus { outline:none; border-color:var(--accent); }
.hint { margin:-5px 0 17px; color:var(--text-faint); font-size:.76rem; line-height:1.45; text-align:left; }
.auth-button {
  width:100%; padding:13px; border:0; border-radius:10px; background:var(--accent); color:var(--accent-fg);
  font:inherit; font-size:.96rem; font-weight:800; cursor:pointer;
}
.auth-button:hover { background:var(--accent-hover); }
.notice { margin-bottom:17px; padding:12px 14px; border-radius:10px; font-size:.84rem; line-height:1.5; text-align:left; }
.notice.error { background:var(--red-bg); color:var(--red); }
.notice.success { background:var(--green-bg); color:var(--green); }
.auth-link { display:inline-block; margin-top:18px; color:var(--accent); font-size:.86rem; font-weight:700; text-decoration:none; }
.auth-link:hover { text-decoration:underline; }
@media (max-width:520px) {
  body { padding:14px; align-items:flex-start; }
  .auth-box { margin-top:7vh; padding:30px 22px; }
}