:root{--bg:#f1f2f6;--panel:#fff;--ink:#0f1729;--muted:#6b7385;--faint:#9aa1b2;--line:#e8eaf0;--box:#f3f4f8;
  --brand:#5b5bd6;--brand-soft:#eeeefc;--ok:#0f9d58;--ok-bg:#e3f5ea;--warn:#a16207;--warn-bg:#fdf3d7;
  --bad:#c0392b;--bad-bg:#fdeaea;--r:18px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0c0f15;--panel:#141821;--ink:#e9edf5;--muted:#8e98ad;--faint:#6b7488;--line:#222836;--box:#1b202b;
  --brand:#8183f5;--brand-soft:#1e2140;--ok:#4ade80;--ok-bg:#12281d;--warn:#fbbf24;--warn-bg:#2b2213;
  --bad:#ff7070;--bad-bg:#2c1818}}
:root[data-theme=dark]{--bg:#0c0f15;--panel:#141821;--ink:#e9edf5;--muted:#8e98ad;--faint:#6b7488;
  --line:#222836;--box:#1b202b;--brand:#8183f5;--brand-soft:#1e2140;--ok:#4ade80;--ok-bg:#12281d;
  --warn:#fbbf24;--warn-bg:#2b2213;--bad:#ff7070;--bad-bg:#2c1818}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  display:flex;flex-direction:column}
.themebtn{position:fixed;top:20px;right:22px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;z-index:5}
.wrap{flex:1;display:grid;place-items:center;padding:28px 20px}
.card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px;
  box-shadow:0 18px 50px rgba(15,23,41,.07)}
.head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.head .grow{flex:1}
h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.02em}
.sub{margin:4px 0 0;color:var(--muted);font-size:14px}
.logo{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1}
.logo span{color:var(--brand)}
label{display:block;font-size:13px;font-weight:600;margin:18px 0 7px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid > label{margin-top:0}
.field{position:relative}
input,select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:14.5px}
input:focus,select:focus{outline:none;border-color:var(--brand)}
input[readonly]{color:var(--muted)}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--muted);cursor:pointer;font-size:15px;padding:4px}
.phone{display:flex;gap:8px;align-items:center}
.phone .cc{padding:13px 12px;border:1px solid var(--line);border-radius:12px;background:var(--box);
  color:var(--muted);font-size:14.5px;font-weight:600}
.act{width:100%;padding:14px;border:0;border-radius:12px;background:var(--brand);color:#fff;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer;margin-top:24px}
.act:hover{filter:brightness(1.08)} .act:disabled{opacity:.55;cursor:not-allowed}
.act.ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.link{color:var(--brand);text-decoration:none;font-size:14px;font-weight:600}
.link:hover{text-decoration:underline}
.center{text-align:center;margin-top:18px}
.note{padding:14px 16px;border-radius:12px;font-size:13.5px;line-height:1.6;margin-top:18px;background:var(--ok-bg)}
.note.bad{background:var(--bad-bg)} .note.warn{background:var(--warn-bg)}
.note b{display:block;margin-bottom:3px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
footer{text-align:center;padding:22px;color:var(--faint);font-size:13px}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px}
@media(max-width:560px){.grid{grid-template-columns:1fr}.card{padding:26px}}