.login-card { background: #111 !important; border: 1px solid var(--dirty-gold) !important; color: var(--parchment) !important; padding: 40px; clip-path: polygon( 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px ); box-shadow: 0 0 25px rgba(0,0,0,0.9); position: relative; } .login-card::before { content: ""; position: absolute; inset: 6px; border: 1px dashed #222; pointer-events: none; clip-path: inherit; } input.form-control { background-color: rgba(0,0,0,0.8) !important; border: 1px solid var(--plasteel) !important; color: var(--imperial-gold) !important; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; transition: 0.3s; } input.form-control:focus { background-color: #000 !important; border-color: var(--blood-god) !important; box-shadow: 0 0 10px rgba(138, 11, 11, 0.4) !important; color: var(--imperial-gold) !important; } .form-floating > label { font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px; color: var(--dirty-gold) !important; } .form-floating > label::after { background-color: transparent !important; } .login-button { font-family: 'Cinzel', serif !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 2px !important; background: #000 !important; border: 1px solid var(--imperial-gold) !important; color: var(--imperial-gold) !important; padding: 15px 40px !important; clip-path: polygon( 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px ); transition: 0.4s; } .login-button:hover { background: var(--blood-god) !important; color: #fff !important; border-color: var(--plasma-glow) !important; box-shadow: 0 0 20px var(--blood-god) !important; text-shadow: 0 0 5px #fff !important; } @media (max-width: 991.98px) { .login-card { padding: 28px; } } @media (max-width: 575.98px) { .login-card { padding: 20px; } .login-card h1 { font-size: 1.6rem; } .login-button { padding: 12px 24px !important; width: 100% !important; } }