:root{--hqk-login-accent:#7c5cff;--hqk-login-accent-2:#25d9ff}
.hqk-login,.hqk-login *{box-sizing:border-box}
.hqk-login{--mx:72%;--my:26%;position:relative;left:50%;isolation:isolate;overflow:hidden;width:100vw;min-height:calc(100vh - 72px);margin-left:-50vw;color:#f7f8ff;background:radial-gradient(circle at 13% 15%,rgba(124,92,255,.21),transparent 35%),radial-gradient(circle at 88% 16%,rgba(37,217,255,.12),transparent 34%),linear-gradient(145deg,#050610 0%,#090b1a 56%,#050610 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hqk-login__particles,.hqk-login__grid,.hqk-login__spotlight{position:absolute;inset:0}
.hqk-login__particles{z-index:-3;width:100%;height:100%;pointer-events:none}
.hqk-login__grid{z-index:-4;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#000,transparent 95%)}
.hqk-login__spotlight{z-index:-2;pointer-events:none;background:radial-gradient(circle 540px at var(--mx) var(--my),rgba(124,92,255,.15),transparent 72%)}
.hqk-login__orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(18px);opacity:.58;animation:hqkFloat 9s ease-in-out infinite}
.hqk-login__orb--one{width:260px;height:260px;top:14%;left:-105px;background:rgba(124,92,255,.18)}
.hqk-login__orb--two{width:225px;height:225px;right:-75px;bottom:7%;background:rgba(37,217,255,.12);animation-delay:-4s}
.hqk-login__shell{width:min(1180px,calc(100% - 36px));min-height:inherit;display:grid;grid-template-columns:minmax(0,.95fr) minmax(470px,1.05fr);align-items:center;gap:84px;margin:0 auto;padding:74px 0 84px}
.hqk-login__intro{max-width:620px}.hqk-login__brand{display:flex;align-items:center;gap:11px;margin-bottom:30px;color:#fff;font-size:14px;font-weight:800}.hqk-login__brand-mark{width:43px;height:43px;display:grid;place-items:center;border:1px solid rgba(124,92,255,.35);border-radius:14px;background:linear-gradient(135deg,rgba(124,92,255,.24),rgba(37,217,255,.11));box-shadow:0 14px 34px rgba(124,92,255,.17);font-size:11px;letter-spacing:.06em}
.hqk-login__eyebrow{width:max-content;display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:#dce0ff;background:rgba(255,255,255,.045);font-size:10px;font-weight:850;letter-spacing:.14em}.hqk-login__eyebrow span,.hqk-login__system span,.hqk-login__secure span{width:7px;height:7px;border-radius:50%;background:#70ffb3;box-shadow:0 0 18px rgba(112,255,179,.72)}
.hqk-login__intro h1{margin:24px 0 0;max-width:680px;color:#fff;font-size:clamp(44px,5.2vw,74px);line-height:1.02;letter-spacing:-.055em;text-wrap:balance}.hqk-login__intro>p{max-width:570px;margin:22px 0 0;color:#979eba;font-size:17px}
.hqk-login__features{display:grid;gap:12px;margin-top:35px}.hqk-login__features div{display:flex;align-items:center;gap:12px;color:#d9ddf0;font-size:14px;font-weight:650}.hqk-login__features i{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border:1px solid rgba(37,217,255,.22);border-radius:10px;color:var(--hqk-login-accent-2);background:rgba(37,217,255,.07);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;font-size:10px}.hqk-login__system{display:flex;align-items:center;gap:8px;margin-top:34px;color:#69718e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.hqk-login__system span,.hqk-login__secure span{width:5px;height:5px}
.hqk-login__panel-wrap{perspective:1200px}.hqk-login__panel{position:relative;overflow:hidden;min-height:500px;padding:32px;border:1px solid rgba(255,255,255,.12);border-radius:29px;background:linear-gradient(150deg,rgba(24,28,55,.94),rgba(8,10,23,.88));box-shadow:0 46px 120px rgba(0,0,0,.50),0 0 82px rgba(124,92,255,.15),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(24px);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease}.hqk-login__panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.075),transparent 27%,transparent 72%,rgba(37,217,255,.04))}
.hqk-login__panel-head{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;margin-bottom:28px}.hqk-login__panel-head>div:first-child>span,.hqk-login__logged-in>span{color:var(--hqk-login-accent-2);font-size:10px;font-weight:850;letter-spacing:.15em}.hqk-login__panel-head h2,.hqk-login__logged-in h2{margin:6px 0 0;color:#fff;font-size:34px;line-height:1.1;letter-spacing:-.04em}.hqk-login__panel-head p,.hqk-login__logged-in p{margin:9px 0 0;color:#9299b6;font-size:13px}.hqk-login__status{display:flex;align-items:center;align-self:flex-start;gap:7px;padding:7px 10px;border:1px solid rgba(112,255,179,.20);border-radius:999px;color:#76ffae;background:rgba(112,255,179,.07);font-size:9px;font-weight:900;letter-spacing:.09em}.hqk-login__status span{width:6px;height:6px;border-radius:50%;background:#76ffae;box-shadow:0 0 12px rgba(118,255,174,.72)}
.hqk-login__form{position:relative;z-index:2}.hqk-login__field+.hqk-login__field{margin-top:16px}.hqk-login__field label{display:block;margin-bottom:8px;color:#b9bfd6;font-size:12px;font-weight:750}.hqk-login__input{position:relative}.hqk-login__input>span{position:absolute;left:15px;top:50%;z-index:2;transform:translateY(-50%);color:#79819f;font-size:13px}.hqk-login__input input{width:100%;min-height:52px;padding:0 48px 0 43px;border:1px solid rgba(255,255,255,.12);border-radius:14px;outline:none;color:#fff;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);font-size:14px;transition:.22s}.hqk-login__input input::placeholder{color:#66708e}.hqk-login__input input:focus{border-color:var(--hqk-login-accent-2);background:rgba(37,217,255,.05);box-shadow:0 0 0 3px rgba(37,217,255,.08);transform:translateY(-1px)}
.hqk-login__password-toggle{position:absolute;right:11px;top:50%;z-index:3;width:31px;height:31px;display:grid;place-items:center;padding:0;transform:translateY(-50%);border:0;border-radius:9px;color:#8a92af;background:transparent;cursor:pointer}.hqk-login__password-toggle:hover{color:#fff;background:rgba(255,255,255,.06)}
.hqk-login__options{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px}.hqk-login__options a,.hqk-login__register a,.hqk-login__text-link{color:var(--hqk-login-accent-2)!important;font-size:12px;font-weight:750;text-decoration:none!important}.hqk-login__remember{display:inline-flex;align-items:center;gap:8px;color:#9da4bf;cursor:pointer;font-size:12px}.hqk-login__remember input{position:absolute;opacity:0}.hqk-login__remember span{width:17px;height:17px;position:relative;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:rgba(255,255,255,.035)}.hqk-login__remember input:checked+span{border-color:var(--hqk-login-accent-2);background:linear-gradient(135deg,var(--hqk-login-accent),var(--hqk-login-accent-2))}.hqk-login__remember input:checked+span:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px}
.hqk-login__button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 21px;border:0;border-radius:14px;color:#fff!important;background:linear-gradient(135deg,var(--hqk-login-accent),#5e7cff 58%,var(--hqk-login-accent-2));box-shadow:0 14px 36px rgba(91,94,255,.28);cursor:pointer;font-weight:800;text-decoration:none!important;transition:.24s}.hqk-login__button:hover{color:#fff!important;transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 19px 48px rgba(91,94,255,.38)}.hqk-login__button:disabled{opacity:.52;cursor:not-allowed;transform:none;filter:saturate(.5);box-shadow:none}.hqk-login__button--full{width:100%;margin-top:12px}.hqk-login__message{min-height:23px;margin-top:12px;font-size:12px}.hqk-login__message.is-error{color:#ff9aaa}.hqk-login__message.is-loading{color:#9edfff}.hqk-login__message.is-success{color:#74ffae}
.hqk-login__register{position:relative;z-index:2;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);color:#8d94b1;text-align:center;font-size:12px}.hqk-login__secure{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin-top:22px;color:#69718e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.hqk-login__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.hqk-login__logged-in{position:relative;z-index:2;min-height:430px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.hqk-login__success-icon{width:66px;height:66px;display:grid;place-items:center;margin-bottom:19px;border:1px solid rgba(112,255,179,.26);border-radius:21px;color:#75ffae;background:rgba(112,255,179,.08);box-shadow:0 18px 48px rgba(112,255,179,.10);font-size:25px}.hqk-login__logged-in .hqk-login__button{margin-top:25px}.hqk-login__logged-in .hqk-login__text-link{margin-top:18px}
[data-hqk-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}[data-hqk-reveal].is-visible{opacity:1;transform:translateY(0)}
@keyframes hqkFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-18px,0) scale(1.05)}}
@media(max-width:980px){.hqk-login__shell{grid-template-columns:1fr;gap:54px;padding-top:62px}.hqk-login__intro{max-width:760px}.hqk-login__panel-wrap{width:min(680px,100%)}}
@media(max-width:640px){.hqk-login{min-height:100vh}.hqk-login__shell{width:min(100% - 20px,1180px);padding:42px 0 54px}.hqk-login__intro h1{font-size:clamp(38px,13vw,54px)}.hqk-login__intro>p{font-size:15px}.hqk-login__panel{min-height:475px;padding:21px;border-radius:21px}.hqk-login__options{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.hqk-login *,.hqk-login *:before,.hqk-login *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}[data-hqk-reveal]{opacity:1;transform:none}.hqk-login__panel{transform:none!important}}

/* HQK Neon Login 2.0 security modules */
.hqk-login__resend {
    width: 100%;
    min-height: 42px;
    margin: 0 0 8px;
    border: 1px solid rgba(37,217,255,.18);
    border-radius: 12px;
    color: var(--hqk-login-accent-2);
    background: rgba(37,217,255,.055);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.hqk-login__resend:hover {
    color: #fff;
    border-color: rgba(37,217,255,.32);
    background: rgba(37,217,255,.09);
}

.hqk-login__resend[hidden] {
    display: none !important;
}

.hqk-login-captcha {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background:
        radial-gradient(circle at 91% 8%, rgba(37,217,255,.09), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.022));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .22s ease, box-shadow .22s ease;
}

.hqk-login-captcha[hidden] {
    display: none !important;
}

.hqk-login-captcha__head,
.hqk-login-captcha__head > div {
    display: flex;
    align-items: center;
}

.hqk-login-captcha__head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.hqk-login-captcha__head > div {
    min-width: 0;
    gap: 10px;
}

.hqk-login-captcha__head > div > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.hqk-login-captcha__head strong {
    color: #f6f7ff;
    font-size: 12px;
}

.hqk-login-captcha__head small {
    overflow: hidden;
    color: #858dab;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hqk-login-captcha__shield {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border: 1px solid rgba(124,92,255,.25);
    border-radius: 10px;
    color: #ccc5ff;
    background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(37,217,255,.07));
    font-size: 9px;
}

.hqk-login-captcha__head button {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    color: #8e96b5;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font-size: 10px;
}

.hqk-login-captcha__puzzle {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2 / 1;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: #11162c;
}

.hqk-login-captcha__puzzle img:first-child {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
}

.hqk-login-captcha__puzzle img:nth-child(2) {
    position: absolute;
    z-index: 3;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(37,217,255,.24));
    will-change: left;
}

.hqk-login-captcha__loading {
    position: absolute;
    inset: 0;
    display: none;
    background: linear-gradient(100deg, rgba(255,255,255,.03) 20%, rgba(255,255,255,.09) 42%, rgba(255,255,255,.03) 64%);
    background-size: 200% 100%;
    animation: hqkLoginCaptchaLoading 1.15s linear infinite;
}

.hqk-login-captcha[data-state="loading"] .hqk-login-captcha__loading,
.hqk-login-captcha[data-state="checking"] .hqk-login-captcha__loading {
    display: block;
}

.hqk-login-captcha__track {
    position: relative;
    height: 46px;
    margin-top: 11px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: rgba(4,6,17,.58);
    box-shadow: inset 0 1px 7px rgba(0,0,0,.28);
}

.hqk-login-captcha__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, rgba(124,92,255,.22), rgba(37,217,255,.16));
}

.hqk-login-captcha__track-text {
    position: absolute;
    inset: 0 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #69718f;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.hqk-login-captcha__track button {
    position: absolute;
    z-index: 4;
    top: 3px;
    left: 0;
    width: 40px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(124,92,255,.36);
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, var(--hqk-login-accent), #5d7cff 58%, var(--hqk-login-accent-2));
    box-shadow: 0 8px 24px rgba(91,94,255,.32), inset 0 1px 0 rgba(255,255,255,.22);
    cursor: grab;
    touch-action: none;
    user-select: none;
    will-change: left;
}

.hqk-login-captcha.is-dragging .hqk-login-captcha__track button {
    cursor: grabbing;
}

.hqk-login-captcha__track button.is-success {
    border-color: rgba(105,255,168,.55);
    background: linear-gradient(135deg, #32c97a, #69ffa8);
}

.hqk-login-captcha__foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: #616988;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
}

.hqk-login-captcha__foot span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #68708f;
}

.hqk-login-captcha[data-state="success"] {
    border-color: rgba(105,255,168,.34);
    box-shadow: 0 0 0 3px rgba(105,255,168,.035);
}

.hqk-login-captcha[data-state="success"] small {
    color: #70ffad;
}

.hqk-login-captcha[data-state="success"] .hqk-login-captcha__foot span {
    background: #70ffad;
    box-shadow: 0 0 11px rgba(112,255,173,.7);
}

.hqk-login-captcha[data-state="error"],
.hqk-login-captcha[data-state="expired"] {
    border-color: rgba(255,103,126,.34);
}

.hqk-login-captcha[data-state="error"] small,
.hqk-login-captcha[data-state="expired"] small {
    color: #ff9eae;
}

.hqk-login-captcha.is-shaking {
    animation: hqkLoginCaptchaShake .36s ease;
}

@keyframes hqkLoginCaptchaLoading {
    to { background-position: -200% 0; }
}

@keyframes hqkLoginCaptchaShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}
