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

    :root {
      --bg: #ffffff;
      --surface:  #1259cb;
      --border: rgba(255,255,255,0.12);
      --accent: #ff9317;
      --accent-glow: rgba(255, 145, 22, 0.12);
      --text: #ffffff;
      --muted: rgba(255,255,255,0.55);
      --error: #e92626;
      --success-bg: rgba(50, 210, 140, 0.1);
      --success-border: rgba(50, 210, 140, 0.35);
      --success-text: #44d4a0;
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Sans', sans-serif;
      padding: 1.5rem;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
    }

    /* Background texture */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    .card {
      width: 100%;
      max-width: 460px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 2.5rem 2.5rem 2rem;
      position: relative;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
      animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

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

    /* Gold accent line at top */
    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      border-radius: 2px;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      color: var(--muted);
      text-decoration: none;
      margin-bottom: 1.75rem;
      transition: color 0.2s;
    }
    .back-link:hover { color: var(--accent); }
    .back-link svg {
      width: 14px; height: 14px;
      stroke: currentColor; fill: none;
      stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    }

    .header {
      margin-bottom: 2rem;
    }

    .header .eyebrow {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.5rem;
    }

    .header h2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      color: var(--text);
      line-height: 1.1;
    }

    .header p {
      font-size: 0.875rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .alert {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      border-radius: 10px;
      padding: 0.85rem 1rem;
      margin-bottom: 1.25rem;
      font-size: 0.855rem;
      line-height: 1.55;
      animation: rise 0.3s ease both;
    }
    .alert svg {
      width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
    }
    .alert.error  { background: var(--error-bg);   border: 1px solid var(--error-border);   color: var(--error-text); }
    .alert.error svg { stroke: var(--error-text); }
    .alert.success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
    .alert.success svg { stroke: var(--success-text); }

    .errors {
      background: rgba(224,112,112,0.08);
      border: 1px solid rgba(224,112,112,0.3);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      margin-bottom: 1.25rem;
      font-size: 0.85rem;
      color: var(--error);
    }

    .input-group {
      margin-bottom: 1.25rem;
    }

    label {
      display: block;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }

    .input-wrap { position: relative; }
    .input-wrap .input-icon {
      position: absolute;
      left: 0.9rem; top: 50%;
      transform: translateY(-50%);
      width: 16px; height: 16px;
      stroke: var(--muted); fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      pointer-events: none;
      transition: stroke 0.2s;
    }
    .input-wrap:focus-within .input-icon { stroke: var(--accent); }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    

    input:focus {
      border-color: var(--accent);
      background: var(--accent-glow);
      box-shadow: 0 0 0 3px rgba(200,169,110,0.08);
    }

    input::placeholder { color: var(--muted); opacity: 0.6; }

    .btn {
      width: 100%;
      padding: 0.8rem 1rem;
      background: var(--accent);
      color: #0e0f13;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
      box-shadow: 0 4px 20px rgba(255,145,22,0.3);
    }

    .btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(255,145,22,0.4);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn svg {
      width: 16px; height: 16px;
      stroke: #1a1b4b; fill: none;
      stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    }

    
    .info-pills {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
    }
    .pill {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.4;
    }
    .pill svg {
      width: 15px; height: 15px; flex-shrink: 0;
      stroke: var(--accent); fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .pill strong { color: var(--text); font-weight: 500; }


    .forgot {
      text-align: center;
      margin-top: 1.25rem;
      font-size: 0.82rem;
      color: var(--muted);
    }

    .forgot a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.2s;
    }

    .forgot a:hover { opacity: 0.75; }
	
	.password-wrapper {
	  position: relative;
	  display: flex;
	  align-items: center;
	}

	.password-wrapper input {
	  width: 100%;
	  padding-right: 2.5rem;
	}

	.toggle-password {
	  position: absolute;
	  right: 0.6rem;
	  background: none;
	  border: none;
	  cursor: pointer;
	  color:#fff;
	  padding: 0;
	  display: flex;
	  align-items: center;
	  transition: color 0.2s;
	}

	.toggle-password:hover {
	  color: var(--accent);       /* glows orange on hover */
	}

	.toggle-password .material-icons {
	  font-size: 1.1rem;          /* slightly smaller, fits input height */
	  user-select: none;
	}

    /* Responsive */
    @media (max-width: 480px) {
      .card { padding: 2rem 1.5rem 1.75rem; }
      .header h2 { font-size: 1.6rem; }
    }