:root{
      --sat: env(safe-area-inset-top, 0px);
      --sar: env(safe-area-inset-right, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
      --sal: env(safe-area-inset-left, 0px);

      --bg:#0a1224;
      --bg-soft:#0f1930;
      --panel:rgba(16, 27, 51, .9);
      --panel-soft:rgba(22, 35, 64, .94);
      --text:#eef4ff;
      --muted:#a8b6d3;
      --muted-2:#7283a0;
      --border:rgba(157, 181, 230, .16);
      --border-strong:rgba(157, 181, 230, .26);
      --accent:#3b82f6;
      --accent-2:#2563eb;
      --accent-soft:rgba(59,130,246,.15);
      --success:#22c55e;
      --danger:#ef4444;
      --danger-soft:rgba(239,68,68,.10);
      --shadow:0 28px 64px rgba(2, 10, 24, .44);
      --shadow-soft:0 14px 28px rgba(6, 15, 33, .26);
      --radius-xl:32px;
      --radius-lg:26px;
      --radius-md:18px;
      --radius-sm:14px;
      --max:1360px;
    }

    html[data-theme="light"]{
      --bg:#edf2fb;
      --bg-soft:#f5f8fd;
      --panel:rgba(255,255,255,.90);
      --panel-soft:rgba(255,255,255,.96);
      --text:#16233e;
      --muted:#607492;
      --muted-2:#7585a0;
      --border:rgba(135, 159, 198, .22);
      --border-strong:rgba(135, 159, 198, .34);
      --accent:#2f7cf6;
      --accent-2:#1f6feb;
      --accent-soft:rgba(47,124,246,.12);
      --success:#22c55e;
      --danger:#e11d48;
      --danger-soft:rgba(225,29,72,.08);
      --shadow:0 24px 54px rgba(25, 47, 91, .16);
      --shadow-soft:0 12px 24px rgba(31, 53, 91, .12);
    }

    *{ box-sizing:border-box; }
    html, body{ min-height:100%; }
    html{
      background:
        radial-gradient(880px 520px at 10% 0%, rgba(59,130,246,.22), transparent 58%),
        radial-gradient(820px 460px at 100% 10%, rgba(35,211,238,.14), transparent 56%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
      background-attachment:fixed;
      background-repeat:no-repeat;
      color-scheme:dark;
    }
    html[data-theme="light"]{ color-scheme:light; }
    body{
      margin:0;
      min-height:100vh;
      font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--text);
      -webkit-tap-highlight-color:transparent;
    }
    a{ color:inherit; text-decoration:none; }
    button, input{ font:inherit; }

    .auth-shell{
      width:min(calc(100% - 32px), var(--max));
      margin:0 auto;
      padding:calc(10px + var(--sat)) calc(16px + var(--sar)) calc(36px + var(--sab)) calc(16px + var(--sal));
    }

    .auth-topbar{
      position:sticky; top:0; z-index:30; padding-bottom:16px;
    }
    .auth-topbar__inner{
      display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px;
      padding:16px 18px; border-radius:28px; border:1px solid var(--border);
      background:var(--panel); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-soft);
    }
    .auth-brand{ display:flex; align-items:center; gap:14px; min-width:0; }
    .auth-brand__logo{ width:44px; height:44px; border-radius:15px; object-fit:cover; border:1px solid var(--border-strong); background:#101b33; }
    .auth-brand__title{ font-size:18px; font-weight:800; line-height:1.06; letter-spacing:-.02em; }
    .auth-brand__sub{ margin-top:4px; color:var(--muted); font-size:14px; }
    .auth-topbar__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
    .auth-status{
      display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:0 14px;
      border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04);
      color:var(--muted); font-size:14px; font-weight:700; white-space:nowrap;
    }
    .auth-status__dot{ width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px rgba(34,197,94,.16); }
    .auth-btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
      border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text);
      font-size:14px; font-weight:800; transition:.18s ease; white-space:nowrap;
    }
    .auth-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.07); border-color:var(--border-strong); }
    .auth-btn--primary{ border-color:transparent; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color:#fff; box-shadow:0 16px 34px rgba(37,99,235,.28); }

    .auth-layout{
      display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(420px, .88fr); gap:24px; align-items:stretch;
    }
    .auth-panel,
    .auth-card{
      border-radius:32px; border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow);
      overflow:hidden; min-width:0;
    }
    .auth-panel{ padding:34px; display:flex; flex-direction:column; gap:22px; }
    .auth-badge{
      display:inline-flex; align-items:center; min-height:38px; width:max-content; max-width:100%;
      padding:0 14px; border-radius:999px; border:1px solid rgba(96,165,250,.34); background:var(--accent-soft); color:#8ab5ff;
      font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
    }
    .auth-title{ margin:0; font-size:clamp(40px, 4vw, 68px); line-height:.98; letter-spacing:-.05em; max-width:10ch; }
    .auth-text{
      margin:0; max-width:620px; color:var(--muted); font-size:18px; line-height:1.72;
    }
    .auth-info-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
    .auth-info{
      padding:22px; border-radius:24px; border:1px solid var(--border); background:var(--panel-soft); box-shadow:var(--shadow-soft);
    }
    .auth-info__label{ color:var(--muted-2); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .auth-info__value{ margin-top:12px; font-size:16px; line-height:1.55; font-weight:700; }
    .auth-info__value a{ color:inherit; }
    .auth-info__value a:hover{ text-decoration:underline; }
    .auth-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }

    .auth-card{ display:flex; flex-direction:column; }
    .auth-card__head{ padding:30px 28px 24px; border-bottom:1px solid var(--border); }
    .auth-card__eyebrow{
      display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--border);
      background:rgba(255,255,255,.04); color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    }
    .auth-card__title{ margin:16px 0 0; font-size:clamp(34px, 3vw, 54px); line-height:1.02; letter-spacing:-.05em; }
    .auth-card__text{ margin:12px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }

    .auth-form{ display:flex; flex-direction:column; gap:18px; padding:26px 28px 28px; }
    .auth-field{ display:grid; gap:10px; }
    .auth-field label{ color:var(--text); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .auth-input-wrap{ position:relative; }
    .auth-input{
      width:100%; min-height:56px; padding:0 18px; border-radius:16px; border:1px solid var(--border-strong);
      background:var(--panel-soft); color:var(--text); font-size:16px; font-weight:600; outline:none;
      transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
      appearance:none; -webkit-appearance:none;
    }
    .auth-input::placeholder{ color:var(--muted-2); }
    .auth-input:hover{ border-color:rgba(147, 178, 228, .40); }
    .auth-input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(59,130,246,.14); background:rgba(255,255,255,.06); }
    html[data-theme="light"] .auth-input:focus{ background:#fff; }
    .auth-input--password{ padding-right:120px; }

    .auth-password-toggle{
      position:absolute; right:8px; top:50%; transform:translateY(-50%);
      min-width:96px; min-height:40px; padding:0 14px; border-radius:12px; border:1px solid var(--border);
      background:rgba(255,255,255,.04); color:var(--text); font-size:14px; font-weight:800; cursor:pointer; transition:.18s ease;
    }
    .auth-password-toggle:hover{ background:rgba(255,255,255,.08); }

    .auth-error{
      padding:14px 16px; border-radius:16px; border:1px solid rgba(239,68,68,.28); background:var(--danger-soft); color:var(--danger); font-size:14px; line-height:1.55; font-weight:700;
    }

    .auth-submit{
      min-height:52px; border:0; border-radius:16px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      color:#fff; font-size:16px; font-weight:900; letter-spacing:.01em; cursor:pointer; box-shadow:0 16px 34px rgba(37,99,235,.28); transition:.18s ease;
    }
    .auth-submit:hover{ transform:translateY(-1px); filter:brightness(1.03); }
    .auth-submit[disabled]{ opacity:.75; cursor:default; transform:none; }
    .auth-note{ color:var(--muted); font-size:14px; line-height:1.6; }

    @media (max-width: 1120px){
      .auth-layout{ grid-template-columns:1fr; }
      .auth-title{ max-width:none; }
    }
    @media (max-width: 760px){
      .auth-shell{ width:100%; padding-left:12px; padding-right:12px; }
      .auth-topbar__inner{ grid-template-columns:1fr; align-items:flex-start; }
      .auth-topbar__actions{ width:100%; justify-content:stretch; }
      .auth-status, .auth-btn{ width:100%; }
      .auth-panel, .auth-card{ border-radius:24px; }
      .auth-panel, .auth-card__head, .auth-form{ padding-left:22px; padding-right:22px; }
      .auth-panel{ padding-top:24px; padding-bottom:24px; }
      .auth-info-grid{ grid-template-columns:1fr; }
      .auth-actions{ display:grid; grid-template-columns:1fr; }
      .auth-btn{ width:100%; }
    }
    @media (prefers-reduced-motion: reduce){
      *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
      html{ background-attachment:scroll; }
    }