:root{
    --brand:#E60012;
    --brand-dark:#b8000f;
    --red-bg:#fdecec;
    --red-border:#f5c6c6;
    --danger:#c62828;
    --bg:#f7f8fa;
    --card:#ffffff;
    --ink:#1a2332;
    --muted:#8a93a2;
    --hairline:#e8eaee;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  .card{
    width:360px;
    max-width:90vw;
    background:var(--card);
    border-radius:10px;
    border:1px solid var(--hairline);
  }
  .card-head{
    padding:48px 32px 8px;
    text-align:center;
  }
  .brand-logo-img{height:36px; display:block; margin:0 auto 18px;}
  .brand-logo-fallback{
    display:none; font-size:20px; font-weight:800; color:var(--brand);
    letter-spacing:.4px; margin-bottom:18px;
  }
  .card-head h1{margin:0; font-size:20px; font-weight:600; letter-spacing:.1px; color:var(--ink);}
  .card-head .subtitle{
    margin-top:6px; font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.06em;
  }
  .card-body{padding:32px;}
  label{
    display:block; font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
  }
  input[type=password]{
    width:100%;
    height:34px;
    padding:0 12px;
    font-size:14px;
    border:1px solid var(--hairline);
    border-radius:8px;
    outline:none;
    background:#fff;
    color:var(--ink);
    font-family:inherit;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input[type=password]:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(230,0,18,.14);}
  button{
    width:100%;
    height:32px;
    margin-top:24px;
    padding:0;
    background:var(--brand);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:background-color .15s ease;
  }
  button:hover{background:var(--brand-dark);}
  .error{
    margin:0 0 20px;
    padding:9px 12px;
    background:var(--red-bg);
    border:1px solid var(--red-border);
    color:var(--danger);
    font-size:13px;
    border-radius:8px;
    display:none;
  }
  .error.show{display:block;}
  .copyright{padding:0 32px 24px; color:var(--muted); font-size:10px; text-align:center;}