/* Plumber - Login */
:root{ 
    --primary:#1e3a8a; 
    --accent:#22c55e; 
    --bg:#f3f4f6; 
    --text:#0f172a; 
    --bs-btn-hover-bg:#1e3a8a;
    --bs-btn-hover-color:#08b1ee;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container-login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.left{display:flex;align-items:center;justify-content:center;padding:40px}
.card{width:100%;max-width:440px;background:#fff;border-radius:20px;box-shadow:0 20px 40px rgba(15,23,42,.12);padding:26px 26px 22px;border:1px solid #e5e7eb}
.brand{text-align: center;}
.brand i{color:var(--primary)}
.card h1{margin:0 0 6px;font-size:24px}
.card p.sub{margin:0 0 18px;color:#6b7280}
.input,form-control {width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font-size:14px}
.btn{display:inline-block;width:100%;padding:12px 14px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-weight:600;cursor:pointer}
.btn.secondary{background:#111827}
.actions{display:grid;gap:10px;margin-top:8px}
.help{margin-top:12px;text-align:center}
.help a{color:var(--primary);text-decoration:none}
.badge-error{background:#fee2e2;color:#991b1b;padding:8px 10px;border-radius:10px;border:1px solid #fecaca;margin-bottom:12px}
.right{position:relative;background:linear-gradient(180deg,#0f1f33,#0b1a2b);display:flex;align-items:center;justify-content:center}
.right .mock{width:min(320px,50%); }
 .btn.secondary {
      background: #6c757d !important;
      border-color: #6c757d !important;
      margin-left: 10px;
    }
    .btn.secondary:hover {
      background: #5a6268 !important;
      border-color: #545b62 !important;
    }
    .alert {
      padding: 8px 12px;
      margin-bottom: 10px;
      border-radius: 4px;
      font-size: 14px;
    }
    .alert-success {
      background-color: #d4edda;
      border-color: #c3e6cb;
      color: #155724;
    }
    .alert-danger {
      background-color: #f8d7da;
      border-color: #f5c6cb;
      color: #721c24;
    }
    #step-otp, #step-password {
      animation: fadeIn 0.3s ease-in;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
@media(max-width:900px){.container-login{grid-template-columns:1fr}.right{display:none}}