* { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #000; color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .card {
    background: #1c1c1e;
    border: .5px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    max-width: 360px;
  }
  h1 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
  p.sub { font-size: 12px; color: rgba(235,235,245,.30); margin-bottom: 20px; }
  label { display: block; font-size: 11px; font-weight: 600; color: rgba(235,235,245,.6); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .3px; }
  input[type=password] {
    width: 100%;
    background: #2c2c2e;
    border: .5px solid rgba(255,255,255,.10);
    border-radius: 8px;
    padding: 11px 12px;
    color: #fff;
    font-size: 14px;
    font-family: -apple-system, monospace;
  }
  input[type=password]:focus { outline: none; border-color: #0A84FF; }
  .remember {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: rgba(235,235,245,.6);
    margin: 16px 0 8px;
    cursor: pointer;
    user-select: none;
  }
  .remember input { width: 16px; height: 16px; accent-color: #0A84FF; cursor: pointer; }
  button {
    width: 100%;
    background: #0A84FF;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px; font-weight: 600;
    margin-top: 16px;
    cursor: pointer;
  }
  button:hover { background: #0974e0; }
  .error {
    background: rgba(255,69,58,.10);
    border: .5px solid rgba(255,69,58,.3);
    border-radius: 8px;
    padding: 8px 12px;
    color: #FF453A;
    font-size: 12px;
    margin-bottom: 12px;
  }
  .footer {
    margin-top: 14px;
    text-align: center;
    font-size: 10px;
    color: rgba(235,235,245,.30);
  }