/* Login + Register. Prefix kau-. Loader palette from knx.css, website layout. */
main:has(> .page[data-page="login"].active),main:has(> .page[data-page="register"].active){max-width:none;padding:0}
.page[data-page="login"].active,.page[data-page="register"].active{animation:none}
body:has(.page.active > .kau){background-image:none;animation:none}

.kau{position:relative;color:var(--knx-txt);font-family:var(--knx-font);-webkit-font-smoothing:antialiased}
.kau *,.kau *::before,.kau *::after{box-sizing:border-box}
.kau-cv{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

.kau-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(32px,6vw,110px);align-items:center;width:100%;max-width:1320px;min-height:calc(100vh - 110px);margin:0 auto;padding:clamp(24px,4vh,48px) clamp(20px,4vw,48px)}

/* ---------- headline side ---------- */
.kau-intro{min-width:0}
.kau-eyebrow{display:flex;align-items:center;gap:11px;font:700 11px/1 var(--knx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--knx-mut)}
.kau-eyebrow i{font-style:normal;color:var(--knx-dim)}
.kau-eyebrow b{font-weight:700;color:var(--knx-ac2)}
.kau-h{margin:clamp(20px,3vh,32px) 0 0;font:800 clamp(52px,8.6vw,136px)/.9 var(--knx-font);letter-spacing:-.045em;color:#fff}
.kau-h span{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.kau-h span>em{display:block;font-style:normal}
.kau-h .kau-ac{color:var(--knx-ac)}
.kau-lead{margin:clamp(18px,3vh,28px) 0 0;max-width:430px;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--knx-mut)}

/* ---------- sheet ---------- */
.kau-sheet{min-width:0;background:var(--knx-p1);border:1px solid var(--knx-ln2);border-radius:12px;box-shadow:0 40px 90px -30px #000}
.kau-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--knx-ln2)}
.kau-tabs button{height:58px;padding:0 12px;background:none;border:0;cursor:pointer;font:700 11.5px/1 var(--knx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--knx-dim);transition:color .16s}
.kau-tabs button:hover{color:var(--knx-txt)}
.kau-tabs button.on{color:#fff;cursor:default}
.kau-tabs button:focus-visible{outline:2px solid var(--knx-ac);outline-offset:-4px;border-radius:8px}
.kau-tabs::after{content:"";position:absolute;left:0;bottom:-1px;width:50%;height:2px;background:var(--knx-ac)}
.kau-tabs[data-on="register"]::after{left:50%}
.page.active .kau-tabs[data-on="login"]::after{animation:kauTabL .42s var(--knx-ease)}
.page.active .kau-tabs[data-on="register"]::after{animation:kauTabR .42s var(--knx-ease)}
@keyframes kauTabL{from{transform:translateX(100%)}to{transform:none}}
@keyframes kauTabR{from{transform:translateX(-100%)}to{transform:none}}
.kau-body{padding:clamp(20px,2.4vw,30px)}

.kau-btn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:52px;padding:0 18px;border-radius:8px;border:1px solid var(--knx-ln2);background:transparent;color:var(--knx-txt);font:700 11.5px/1 var(--knx-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s}
.kau-btn svg{width:19px;height:19px;flex-shrink:0;transition:transform .25s var(--knx-ease)}
.kau-btn:active{transform:scale(.985)}
.kau-btn:focus-visible{outline:2px solid var(--knx-ac2);outline-offset:2px}
.kau-btn.dc svg{fill:currentColor}
.kau-btn.dc:hover{background:#5865f2;border-color:#5865f2;color:#fff}
.kau-btn.pri{margin-top:20px;background:var(--knx-ac);border-color:var(--knx-ac);color:#fff}
.kau-btn.pri:hover{background:#4f90ff;border-color:#4f90ff}
.kau-btn.pri:hover svg{transform:translateX(5px)}

.kau-or{display:flex;align-items:center;gap:14px;margin:20px 0 6px;font:700 10px/1 var(--knx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--knx-dim)}
.kau-or::before,.kau-or::after{content:"";flex:1;height:1px;background:var(--knx-ln)}

/* ---------- fields ---------- */
.kau-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kau-f{min-width:0;margin-top:14px}
.kau-fh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-height:14px;margin-bottom:8px}
.kau form label{display:block;margin:0;font:700 10.5px/1.3 var(--knx-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--knx-mut)}
.kau-opt{font:600 10px/1.3 var(--knx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--knx-dim)}
.kau-forgot{padding:0;background:none;border:0;cursor:pointer;font:600 12px/1.2 var(--knx-font);color:var(--knx-ac2)}
.kau-forgot:hover{color:#fff;text-decoration:underline}
.kau-forgot:focus-visible{outline:2px solid var(--knx-ac);outline-offset:3px;border-radius:3px}
.kau-in{position:relative}
.kau form .kau-in input:not([type=range]){display:block;width:100%;height:48px;margin:0;padding:0 14px;background:var(--knx-bg);border:1px solid var(--knx-ln2);border-radius:8px;color:#fff;font:500 15px/1 var(--knx-font);transition:border-color .14s,background .14s}
.kau form .kau-in input::placeholder{color:var(--knx-dim);font-weight:400}
.kau form .kau-in input:not([type=range]):hover{border-color:var(--knx-ln3)}
.kau form .kau-in input:not([type=range]):focus{outline:0;border-color:var(--knx-ac);background:#070b12;box-shadow:0 0 0 1px var(--knx-ac)}
.kau form .kau-in input:-webkit-autofill,.kau form .kau-in input:-webkit-autofill:hover,.kau form .kau-in input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 40px #070b12 inset;transition:background-color 9999s}
.kau form .kau-in.pw input:not([type=range]){padding-right:46px}
.kau-eye{position:absolute;right:5px;top:5px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:6px;cursor:pointer;color:var(--knx-dim);transition:color .14s}
.kau-eye:hover,.kau-eye[aria-pressed="true"]{color:var(--knx-ac2)}
.kau-eye:focus-visible{outline:2px solid var(--knx-ac)}
.kau-eye svg{width:18px;height:18px}
.kau-caps{margin-top:7px;font:600 11px/1.3 var(--knx-mono);letter-spacing:.06em;color:var(--knx-warn)}
.kau-2fa label{color:var(--knx-warn)!important}
.kau form .kau-2fa .kau-in input:not([type=range]){font:700 20px/1 var(--knx-mono);letter-spacing:.5em;text-align:center;border-color:var(--knx-warn)}

.kau-rules{display:flex;flex-wrap:wrap;gap:7px 16px;margin:11px 0 0;padding:0;list-style:none;font:600 10.5px/1.2 var(--knx-mono);letter-spacing:.04em;color:var(--knx-dim)}
.kau-rules li{display:flex;align-items:center;gap:7px;transition:color .16s}
.kau-rules li::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--knx-ln3);transition:background .16s,box-shadow .16s}
.kau-rules li.ok{color:var(--knx-ok)}
.kau-rules li.ok::before{background:var(--knx-ok);box-shadow:0 0 8px var(--knx-ok)}
.kau-rules li.bad{color:var(--knx-bad)}
.kau-rules li.bad::before{background:var(--knx-bad)}

/* ---------- entrance ---------- */
.page.active .kau-h span>em{animation:kauUp .85s var(--knx-ease) both}
.page.active .kau-h span:nth-child(2)>em{animation-delay:.07s}
.page.active .kau-h span:nth-child(3)>em{animation-delay:.14s}
.page.active .kau-eyebrow,.page.active .kau-lead{animation:kauFade .7s .16s ease both}
.page.active .kau-sheet{animation:kauSheet .7s .05s var(--knx-ease) both}
@keyframes kauUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes kauFade{from{opacity:0}to{opacity:1}}
@keyframes kauSheet{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

@media (max-width:980px){
  .kau-grid{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0;max-width:560px;padding-top:26px;padding-bottom:40px}
  .kau-h{font-size:clamp(46px,13vw,76px)}
  .kau-h span{display:inline-block;vertical-align:top;margin-right:.2em}
  .kau-lead{margin-top:14px}
}
@media (max-width:440px){
  .kau-row{grid-template-columns:minmax(0,1fr);gap:0}
}