/* ═══ OCP IA v5 — Login Styles ════════════════════════════════════════════════
   Extracted from login.html
   ═══════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0f;color:#e0e0e0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bg-grid{position:fixed;inset:0;background:linear-gradient(rgba(0,255,136,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}
.login-box{position:relative;z-index:1;width:400px;padding:36px;background:rgba(15,15,25,.95);border:1px solid rgba(0,255,136,.2);border-radius:12px;box-shadow:0 0 60px rgba(0,255,136,.08)}
.logo{text-align:center;margin-bottom:24px}
.logo h1{font-size:28px;font-weight:700;background:linear-gradient(135deg,#00ff88,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo p{color:#666;font-size:13px;margin-top:4px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;color:#888;margin-bottom:5px;text-transform:uppercase;letter-spacing:1px}
.field input{width:100%;padding:11px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:14px;outline:none;transition:border .2s}
.field input:focus{border-color:#00ff88}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,#00ff88,#00cc6a);color:#000;font-size:15px;font-weight:700;border:none;border-radius:8px;cursor:pointer;margin-top:6px;transition:opacity .2s}
.btn-login:hover{opacity:.9}
.btn-register{width:100%;padding:13px;background:transparent;color:#00ff88;font-size:14px;font-weight:600;border:1px solid rgba(0,255,136,.3);border-radius:8px;cursor:pointer;margin-top:8px;transition:all .2s}
.btn-register:hover{background:rgba(0,255,136,.08);border-color:#00ff88}
.error{background:rgba(255,60,60,.15);color:#ff6b6b;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;border:1px solid rgba(255,60,60,.2)}
.success{background:rgba(0,255,136,.1);color:#00ff88;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;border:1px solid rgba(0,255,136,.2)}
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid rgba(255,255,255,.1)}
.tab{flex:1;padding:10px;text-align:center;cursor:pointer;font-size:14px;font-weight:600;color:#888;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:#00ff88;border-bottom-color:#00ff88}
.tab:hover{color:#ccc}
.form-panel{display:none}.form-panel.active{display:block}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 60px rgba(0,255,136,.08)}50%{box-shadow:0 0 80px rgba(0,255,136,.15)}}
.tier-info{display:flex;gap:8px;margin-top:10px;font-size:11px;color:#666}
.tier-info span{padding:3px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.field-2fa{border:1px solid rgba(0,255,136,.3);padding:12px;border-radius:8px;margin-top:4px}
.field-2fa label{color:#00ff88}
.field-2fa input{text-align:center;font-size:20px;letter-spacing:8px}
.remember-row{display:flex;align-items:center;gap:8px;margin:10px 0}
.remember-row input[type=checkbox]{width:16px;height:16px;accent-color:#00ff88;cursor:pointer}
.remember-row label{font-size:13px;color:#999;cursor:pointer}
.btn-google{width:100%;padding:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#e0e0e0;font-size:14px;cursor:pointer;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.btn-google:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

/* ── Mobile Responsive ──────────────────────────────────────────────────── */
@media(max-width:480px){
  body{overflow:auto;padding:16px}
  .login-box{width:100%;max-width:400px;padding:24px 20px}
  .logo h1{font-size:22px}
  .logo p{font-size:12px}
  .field input{padding:13px 14px;font-size:16px}
  .field label{font-size:10px}
  .btn-login{padding:14px;font-size:16px}
  .btn-register{padding:14px;font-size:14px}
  .tab{padding:12px 8px;font-size:13px}
  .field-2fa input{font-size:18px;letter-spacing:6px}
  .bg-grid{display:none}
}
@media(max-width:768px){
  body{overflow:auto;padding:20px}
  .login-box{width:100%;max-width:420px;padding:28px 24px}
  .field input{font-size:16px}
}