:root {
    --login-pointer-x: 0;
    --login-pointer-y: 0;
    --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body {
    font-family: var(--font-primary);
    line-height: 1.5;
}

.paused-exchanges button,
.paused-exchanges .btn,
.paused-exchanges input[type="submit"],
.paused-exchanges .exchange-toggle {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.login-body {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background:#010503;
    overflow:hidden;
    margin:0;
    padding:0;
}
.login-body canvas.login-trails {
    width:100%;
    height:100%;
}
.login-trails {
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}
.login-body::before,
.login-body::after {
    content:"";
    position:fixed;
    top:-30%;
    left:-30%;
    width:160%;
    height:160%;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.35), transparent 60%),
      radial-gradient(1.5px 1.5px at 80% 40%, rgba(255,255,255,0.5), transparent 55%),
      radial-gradient(2px 2px at 35% 80%, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(1.5px 1.5px at 65% 60%, rgba(255,255,255,0.45), transparent 60%),
      radial-gradient(2px 2px at 10% 70%, rgba(255,255,255,0.3), transparent 60%);
    opacity:0.45;
    animation:login-aurora 40s linear infinite;
    pointer-events:none;
}
.login-body::after {
    animation-direction:reverse;
    animation-duration:55s;
    opacity:0.35;
}
@keyframes login-aurora {
    0% { transform:translate3d(0,0,0) scale(1); }
    25% { transform:translate3d(8%, -6%, 0) scale(1.05); }
    50% { transform:translate3d(-6%, 4%, 0) scale(1.08); }
    75% { transform:translate3d(5%, 8%, 0) scale(1.03); }
    100% { transform:translate3d(0,0,0) scale(1); }
}
.login-wrapper {
    width:100%;
    max-width:460px;
    padding:48px 20px 32px;
    box-sizing:border-box;
    position:relative;
    z-index:2;
    margin:0 auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:24px;
}
.login-card {
    width:100%;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
    display:flex;
    flex-direction:column;
    gap:28px;
    align-items:stretch;
}
.login-brand { text-align:center; color:#f1f5f9 }
.login-brand .login-subtitle { margin:6px 0 0; font-size:13px; color:rgba(226,232,240,0.75); letter-spacing:0.08em; text-transform:uppercase }
.login-logo { width:240px; height:auto; display:inline-block; filter: drop-shadow(0 10px 32px rgba(15,23,42,0.55)); }
.login-form { display:flex; flex-direction:column; gap:18px }
.login-form label { display:flex; flex-direction:column; gap:6px; color:#e2e8f0; font-size:13px; text-align:left; letter-spacing:0.02em }
.login-form input[type="text"], .login-form input[type="password"] {
    background:rgba(2,8,23,0.55);
    color:#f8fafc;
    border:1px solid rgba(248,250,252,0.16);
    border-radius:14px;
    padding:14px 16px;
    font-size:15px;
    transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    backdrop-filter:blur(8px);
}
.login-form input[type="text"]:focus, .login-form input[type="password"]:focus {
    border-color:rgba(56,189,248,0.95);
    outline:none;
    box-shadow:0 0 0 3px rgba(56,189,248,0.25);
    background:rgba(2,8,23,0.72);
}
.login-form input[type="text"]::placeholder,
.login-form input[type="password"]::placeholder { color:rgba(226,232,240,0.55) }
.login-form button {
    margin-top:8px;
    background:linear-gradient(130deg,#16a34a 0%,#22c55e 45%,#14b8a6 100%);
    border:none;
    color:#020805;
    font-weight:600;
    font-size:16px;
    letter-spacing:0.06em;
    padding:13px;
    border-radius:14px;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.login-form button:hover { transform:translateY(-2px); box-shadow:0 18px 32px rgba(34,197,94,0.35); }
.login-error { background:rgba(80,18,18,0.85); color:#fecaca; border:1px solid rgba(248,113,113,0.55); border-radius:10px; padding:10px 12px; font-size:13px }
.login-remember { flex-direction:row; align-items:center; gap:8px; color:rgba(226,232,240,0.7); font-size:13px }
.login-remember input[type="checkbox"] { width:16px; height:16px; accent-color:#22c55e }
.login-footer { text-align:center; color:#94a3b8; font-size:12px }
.login-footer span { opacity:0.85 }

@media (max-width: 680px) {
    .login-wrapper { padding:32px 18px; min-height:auto; }
    .login-logo { width:190px; }
}

@media (max-width: 480px) {
    .login-body { padding:32px 12px; }
    .login-card { gap:20px; }
    .login-form { gap:14px; }
    .login-form input[type="text"], .login-form input[type="password"] { font-size:16px; }
    .login-form button { font-size:15px; padding:12px; }
    .login-brand .login-subtitle { font-size:13px; }
}