@font-face { font-family: "B612"; src: url("/assets/fonts/b612/B612-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "B612"; src: url("/assets/fonts/b612/B612-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
:root { --bg:#07100f; --panel:#0e1917; --panel-2:#12211e; --line:#243531; --muted:#91a19d; --text:#eef5f2; --accent:#d9ff45; --danger:#ff6b62; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0%, rgba(130,164,33,.11), transparent 28rem),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } button,input { font:inherit; } button { cursor:pointer; }
.login-shell { position:relative; min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; }.login-visual { padding:48px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg,transparent 35%,rgba(5,13,11,.92)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cdefs%3E%3Cpattern id='g' width='42' height='42' patternUnits='userSpaceOnUse'%3E%3Cpath d='M42 0H0V42' fill='none' stroke='%23253c36' stroke-width='1'/%3E%3C/pattern%3E%3CradialGradient id='r'%3E%3Cstop stop-color='%23384e45'/%3E%3Cstop offset='1' stop-color='%2307110f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='900' height='900' fill='url(%23r)'/%3E%3Crect width='900' height='900' fill='url(%23g)'/%3E%3Cpath d='M0 680 Q180 530 350 650 T700 570 T950 650V900H0Z' fill='%230b1714'/%3E%3C/svg%3E"); background-size:cover; }.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.12em; }.brand-mark { width:35px; height:35px; display:block; }.brand-mark img { display:block; width:100%; height:100%; }.hero-copy { max-width:700px; }.eyebrow { color:var(--accent); text-transform:uppercase; font-size:12px; letter-spacing:.16em; font-weight:750; }.hero-copy h1 { margin:16px 0; font-size:clamp(42px,6vw,78px); line-height:.98; letter-spacing:-.055em; }.hero-copy p { max-width:580px; color:#bdcbc6; font-size:18px; line-height:1.55; }
.login-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px; overflow-y:auto; }.login-card { width:min(410px,100%); }.login-card h2 { margin:0 0 8px; font-size:30px; }.login-card>p { margin:0 0 32px; color:var(--muted); }.pin-login-card h2 { font-size:22px; }.pin-login-card>p { margin-bottom:18px; }.login-divider { width:min(410px,100%); display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }.login-divider::before,.login-divider::after { content:""; height:1px; flex:1; background:var(--line); }.field { display:grid; gap:8px; margin-bottom:17px; }.field label { color:#c5d0cc; font-size:13px; font-weight:650; } input { width:100%; color:var(--text); background:#0b1513; border:1px solid var(--line); border-radius:10px; padding:12px 13px; outline:none; } input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,255,69,.1); }.btn { border:0; border-radius:10px; padding:11px 16px; font-weight:750; background:var(--panel-2); color:var(--text); }.btn:hover { filter:brightness(1.12); }.btn-primary { background:var(--accent); color:#111800; }.btn-ghost { border:1px solid var(--line); background:transparent; }.btn-wide { width:100%; }.error { margin:0 0 18px!important; padding:10px 12px; color:#ffd5d0!important; border:1px solid rgba(255,107,98,.42); border-radius:10px; background:rgba(255,107,98,.09); font-size:13px; line-height:1.4; }.check-item { display:flex; align-items:center; gap:10px; margin:2px 0 12px; padding:9px 10px; border-radius:8px; background:#0b1513; text-align:left; }.check-item input { width:auto; accent-color:var(--accent); }.check-item span { display:grid; gap:2px; }.check-item small { color:var(--muted); font-size:11px; line-height:1.35; }
.mfa-login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }.mfa-login-panel { width:min(480px,100%); }.mfa-login-card { width:100%; padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }.mfa-login-card form { margin-top:18px; }.mfa-login-card input[name="code"] { font-size:26px; font-weight:800; letter-spacing:.28em; text-align:center; }.mfa-qr { display:grid; justify-items:center; gap:9px; margin:18px 0 12px; color:var(--muted); font-size:13px; text-align:center; }.mfa-qr img { width:min(260px,100%); padding:8px; border-radius:14px; background:#fff; }.mfa-setup-key { display:grid; gap:5px; margin:18px 0 12px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#08120f; }.mfa-setup-key span { color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.mfa-setup-key strong { overflow-wrap:anywhere; letter-spacing:.09em; }
.login-about-trigger { position:absolute; z-index:3; top:24px; right:24px; min-height:42px; padding:9px 14px; color:var(--text); background:rgba(8,24,20,.9); border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:750; }.login-about { position:fixed; z-index:5; inset:0; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.68); }.login-about[hidden] { display:none; }.login-about-card { width:min(620px,100%); padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 22px 70px rgba(0,0,0,.42); }.login-about-card h2 { margin:10px 0; }.login-about-card p { color:var(--muted); line-height:1.55; }.login-about-card ul { padding-left:20px; color:#c5d0cc; line-height:1.65; }.login-about-card .btn { margin-top:8px; }.boot-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }.boot-card { display:grid; justify-items:center; gap:14px; color:var(--muted); text-align:center; }.boot-spinner { width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } @media (max-width:800px) { .login-shell { grid-template-columns:1fr; }.login-visual { display:none; }.login-panel { padding:78px 18px 36px; }.login-about-trigger { top:16px; right:18px; }.mfa-login-card { padding:20px 15px; } }