:root {
  color-scheme: dark;
  --bg: #070b12;
  --surface: #0d131d;
  --surface-2: #111a27;
  --line: #223044;
  --text: #edf3fa;
  --muted: #8da0b7;
  --cyan: #33d1c6;
  --red: #ff6574;
  --green: #46df8b;
  --amber: #f3bd5b;
  --focus-ring: rgba(51,209,198,.3);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] { color-scheme:light; --bg:#eef3f7; --surface:#fff; --surface-2:#f6f9fb; --line:#bac8d4; --text:#172332; --muted:#52657a; --cyan:#087f78; --red:#bd2638; --green:#167849; --amber:#93600c; --focus-ring:rgba(8,127,120,.28); }

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(51, 209, 198, .13), transparent 32rem),
    radial-gradient(circle at 90% 10%, rgba(92, 141, 255, .11), transparent 30rem),
    var(--bg);
}

.auth-preferences { position:fixed; z-index:10; top:16px; right:18px; }
.preference-controls { display:flex; align-items:center; gap:7px; }
.language-control select,.theme-toggle { min-height:36px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--surface-2); font:700 11px inherit; }
.language-control select { max-width:132px; padding:0 28px 0 10px; }
.theme-toggle { width:38px; padding:0; font-size:17px; cursor:pointer; }
.preference-status { position:fixed; z-index:11; top:57px; right:18px; max-width:290px; margin:0; color:var(--muted); font-size:11px; }
.preference-status[data-kind="error"] { color:var(--red); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-ring); }
html[data-theme="light"] body { background:radial-gradient(circle at 15% 0%,rgba(8,127,120,.09),transparent 32rem),radial-gradient(circle at 90% 10%,rgba(49,95,187,.07),transparent 30rem),var(--bg); }
html[data-theme="light"] .auth-brand { border-color:rgba(23,35,50,.10); }
html[data-theme="light"] .auth-card { background:linear-gradient(160deg,#fff,#f7fafc); box-shadow:0 28px 70px rgba(31,52,70,.14); }
html[data-theme="light"] .auth-form label { color:#42566b; }
html[data-theme="light"] .auth-form input { color:var(--text); background:#fff; }
html[data-theme="light"] .security-strip span { color:#43596f; background:rgba(255,255,255,.72); }
html[data-theme="light"] .closed-box { color:#982738; background:rgba(189,38,56,.06); }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(390px, 1.1fr);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 6vw, 86px);
  border-right: 1px solid rgba(255,255,255,.06);
}

.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 18px; height: 18px; border: 3px solid var(--cyan); border-radius: 5px;
  box-shadow: 0 0 24px rgba(51, 209, 198, .4);
}
.brand-lockup strong { display: block; letter-spacing: .03em; }
.brand-lockup span { color: var(--muted); font-size: 12px; }
.auth-brand h1 { max-width: 650px; margin: 0; font-size: clamp(34px, 5vw, 66px); line-height: 1.02; }
.auth-brand p { max-width: 560px; color: var(--muted); line-height: 1.7; }
.security-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.security-strip span {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: #a9bbce; background: rgba(13,19,29,.7); font-size: 11px; font-weight: 700;
}

.auth-stage { display: grid; place-items: center; padding: 28px; }
.auth-card {
  width: min(100%, 480px);
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(17,26,39,.97), rgba(10,16,25,.98));
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
}
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.auth-card h2 { margin: 0 0 8px; font-size: 29px; }
.lead { margin: 0 0 26px; color: var(--muted); line-height: 1.55; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; color: #bac7d6; font-size: 12px; font-weight: 750; }
.auth-form input {
  width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line);
  border-radius: 10px; outline: none; color: var(--text); background: #0a1019;
  font: inherit; transition: border-color .16s, box-shadow .16s;
}
.auth-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(51,209,198,.1); }
.auth-form button {
  height: 47px; margin-top: 4px; border: 1px solid #43dfd2; border-radius: 10px;
  color: #061310; background: var(--cyan); font: inherit; font-weight: 850; cursor: pointer;
}
.auth-form button:disabled { opacity: .55; cursor: wait; }
.form-note { margin: -4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-error {
  min-height: 20px; margin: 2px 0 0; color: var(--red); font-size: 12px; line-height: 1.45;
}
.auth-links { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
.auth-links a { color: var(--cyan); text-decoration: none; }
.closed-box {
  padding: 14px; border: 1px solid #4d3840; border-radius: 10px;
  color: #e0a5ad; background: rgba(255,78,95,.06); line-height: 1.55;
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { min-height: 300px; padding: 30px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .auth-brand h1 { margin-top: 56px; font-size: 38px; }
  .auth-stage { padding: 20px; }
}

@media (max-width:480px) { .auth-preferences { top:10px; right:10px; } .language-control select { width:58px; max-width:58px; padding-left:6px; font-size:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; } }