:root{
      --navy-deep:   #0B1F3A;
      --navy-mid:    #132C52;
      --gold:        #C9A227;
      --gold-soft:   #E4C766;
      --paper:       #F6F7FA;
      --ink:         #17233B;
      --ink-soft:    #5B6A88;
      --line:        #E2E6EF;
      --err-bg:      #FCEAEA;
      --err-text:    #A3352C;
      --err-line:    #F1C6C2;
      --ok-bg:       #E8F5EE;
      --ok-text:     #17724A;
      --ok-line:     #C3E6D3;
    }

    *{box-sizing:border-box;}
    html,body{height:100%;}
    body{
      margin:0;
      font-family:'Inter',sans-serif;
      color:var(--ink);
      background:
        radial-gradient(900px 500px at 15% -10%, rgba(19,44,82,0.06), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(201,162,39,0.08), transparent 60%),
        var(--paper);
    }

    /* ---------- Centered login panel ---------- */
    .panel{
      min-height:100vh;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px 20px;
    }

    .card{
      width:100%;
      max-width:400px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      box-shadow:0 20px 45px -20px rgba(11,31,58,0.18);
      padding:40px 36px;
    }

    .brandmark{
      display:flex;
      align-items:center;
      gap:8px;
      font-family:'Space Grotesk',sans-serif;
      font-size:17px;
      font-weight:600;
      color:var(--navy-deep);
      margin-bottom:28px;
    }
    .brandmark span{ color:var(--gold); }
    .brandmark i{ color:var(--gold); font-size:15px; }

    .card .eyebrow{
      font-size:12.5px;
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:var(--ink-soft);
      font-weight:600;
      margin:0 0 8px;
    }
    .card h2{
      font-family:'Space Grotesk',sans-serif;
      font-size:26px;
      font-weight:600;
      margin:0 0 8px;
      color:var(--ink);
    }
    .card .sub{
      font-size:14px;
      color:var(--ink-soft);
      margin:0 0 28px;
    }

    .alert-custom{
      padding:12px 14px;
      margin-bottom:20px;
      border-radius:8px;
      font-size:13.5px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .alert-error{ background:var(--err-bg); color:var(--err-text); border:1px solid var(--err-line); }
    .alert-success{ background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-line); }

    .field{ margin-bottom:18px; }
    .field label{
      display:block;
      font-size:13px;
      font-weight:600;
      color:var(--ink);
      margin-bottom:6px;
    }
    .input-shell{
      display:flex;
      align-items:center;
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
      transition:border-color .15s, box-shadow .15s;
    }
    .input-shell:focus-within{
      border-color:var(--navy-mid);
      box-shadow:0 0 0 3px rgba(19,44,82,0.10);
    }
    .input-shell i{
      width:40px;
      text-align:center;
      color:var(--ink-soft);
      font-size:14px;
    }
    .input-shell input{
      flex:1;
      min-width:0;
      border:0;
      outline:0;
      padding:11px 12px 11px 0;
      font-size:14.5px;
      font-family:'Inter',sans-serif;
      background:transparent;
      color:var(--ink);
    }
    .input-shell.is-invalid{ border-color:var(--err-text); }

    .row-between{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin:20px 0 26px;
    }
    .remember{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); }
    .remember input{ accent-color:var(--navy-mid); }

    .btn-signin{
      width:100%;
      border:0;
      border-radius:8px;
      padding:12px 16px;
      background:var(--navy-deep);
      color:#fff;
      font-size:14.5px;
      font-weight:600;
      font-family:'Inter',sans-serif;
      cursor:pointer;
      transition:background .15s, transform .05s;
    }
    .btn-signin:hover{ background:var(--navy-mid); }
    .btn-signin:active{ transform:translateY(1px); }
    .btn-signin:focus-visible{ outline:3px solid var(--gold-soft); outline-offset:2px; }

    .foot-note{
      text-align:center;
      font-size:12.5px;
      color:var(--ink-soft);
      margin-top:24px;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 480px){
      .panel{ padding:24px 14px; }
      .card{
        padding:28px 22px;
        border-radius:14px;
        box-shadow:0 12px 30px -16px rgba(11,31,58,0.2);
      }
      .card h2{ font-size:22px; }
      .card .sub{ font-size:13.5px; margin-bottom:22px; }
      .btn-signin{ padding:13px 16px; }
    }

    @media (max-width: 340px){
      .card{ padding:22px 16px; }
      .brandmark{ font-size:15.5px; }
    }