:root {
      --bg: #f8f9fb;
      --surface: #fff;
      --ink: #1d2939;
      --muted: #738198;
      --border: #e5eaf0;
      --nav: #172236;
      --nav-soft: #22304a;
      --accent: #4361df;
      --accent-soft: #f2f5ff;
      --green: #13846d;
      --green-soft: #eaf8f1;
      --red: #c04850;
      --red-soft: #fdf0f1;
      --amber: #aa721a;
      --amber-soft: #fff6e8;
      --shadow: 0 14px 42px #1b2b4410;
      --radius: 12px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1100px 500px at 85% -10%, #22304a 0%, transparent 60%),
        var(--nav);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    button, input { font: inherit; color: inherit; }
    h1 { margin: 0; }

    .loginwrap {
      width: 100%; max-width: 400px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 24px 70px #0b152666;
      padding: 30px 30px 26px;
    }
    .loginbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
    .loginlogo {
      width: 44px; height: 44px; border-radius: 12px;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 850; color: #fff; flex: none;
    }
    .logintitle { font-size: 17px; font-weight: 820; letter-spacing: -.3px; }
    .loginmeta { font-size: 10px; letter-spacing: 1.1px; font-weight: 800; color: #8793a6; margin-top: 3px; }

    .loginhead { margin-bottom: 18px; }
    .loginhead h1 { font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
    .loginhead p { margin-top: 6px; color: var(--muted); font-size: 13px; }

    form { display: flex; flex-direction: column; gap: 14px; }
    .field { display: block; }
    .field label { display: block; font-size: 12px; font-weight: 600; color: #4b5c73; margin-bottom: 6px; }
    .input {
      border: 1px solid #d8e0ea; border-radius: 9px;
      padding: 11px 12px; font-size: 13px;
      background: #fff; width: 100%;
    }
    .input:focus { outline: 2px solid #b9c8f5; border-color: var(--accent); }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      min-height: 42px; border-radius: 10px;
      font-size: 13px; font-weight: 750; cursor: pointer;
      background: var(--accent); border: 1px solid var(--accent); color: #fff;
      width: 100%;
    }
    .btn:hover { background: #3550c9; border-color: #3550c9; }
    .btn:disabled { opacity: .55; cursor: not-allowed; }
    .btn:disabled:hover { background: var(--accent); border-color: var(--accent); }

    .loginerr {
      display: none;
      background: var(--red-soft); color: #a33d46;
      border: 1px solid #f1cbd0; border-radius: 10px;
      padding: 10px 12px; font-size: 12.5px; font-weight: 600;
    }
    .loginerr.show { display: block; }

    .loginfoot {
      margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
      font-size: 11px; color: #8793a6; line-height: 1.6;
    }
    .loginfoot .caps { display: block; letter-spacing: 1.4px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; color: #9aa6b8; margin-bottom: 5px; }