*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #142F52;
      --surface:  #191714;
      --border:   #2e2b26;
      --text:     #ffffff;
      --muted:    #ffffff;
      --accent:   #ED1F37;
      --error:    #c46a4e;
      --pass:     #000000;

    }


    body {
      font-family: var(--font-serif);
      background-color: var(--bg);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 1.5rem;

    }

    
    .card {
      width: 100%;
      max-width: 380px;
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 2.75rem 2.5rem 2.5rem;
      animation: fadeUp 0.45s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }


    h1 {
      font-size: 1.55rem;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.01em;
      text-align: center;
      margin-bottom: 0.35rem;
      color: var(--text);
      line-height: 1.2;
    }

    .subtitle {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      margin-bottom: 2.25rem;
    }

    .rule {
      border: none;
      border-top: 1px solid var(--text);
      margin-bottom: 2rem;
    }

    .field {
      position: relative;
      margin-bottom: 1.25rem;
    }

    .field label {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.55rem;
    }

    .field input[type="password"] {
      width: 100%;
     
      border: 1px solid var(--border);
      color: var(--pass);
      font-family: var(--font-mono);
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      padding: 0.7rem 0.85rem;
      outline: none;
      transition: border-color 0.2s;
      -webkit-appearance: none;
      border-radius: 0;
    }

    .field input[type="password"]:focus {
      border-color: var(--border-lit);
    }

    .field input[type="password"]::placeholder {
      color: var(--border-lit);
      letter-spacing: 0.04em;
    }

    .alert {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      padding: 0.65rem 0.8rem;
      margin-bottom: 1.25rem;
      border-left: 2px solid var(--error);
      background: rgba(196, 106, 78, 0.08);
      color: var(--error);
      line-height: 1.55;
      animation: shake 0.35s ease;
    }

    .alert.lockout {
      border-color: var(--muted);
      background: rgba(107, 100, 88, 0.1);
      color: var(--muted);
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25%       { transform: translateX(-5px); }
      75%       { transform: translateX(5px); }
    }

    button[type="submit"] {
      width: 100%;
      background: transparent;
      border: 1px solid var(--text);
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.8rem 1rem;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      border-radius: 0;
      -webkit-appearance: none;
    }

    button[type="submit"]:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
    }

    button[type="submit"]:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .card-footer {
      margin-top: 1.75rem;
  
      font-size: 0.6rem;
      letter-spacing: 0.06em;
      color: var(--text);
      text-align: center;
      line-height: 1.6;
    }
    img.cpc_logo_login {
      margin:auto;
      display:block;
      width:50px;
      margin-bottom: 2em;
    }