/* Kelmo sign-in, dark (11i). Loaded only by login.blade.php and login-code.blade.php. Blade markup is unchanged. */
:root{--kl-ink:#0A0709;--kl-ink2:#140D12;--kl-band:#321228;--kl-dam:#82326C;--kl-dam2:#672654;--kl-cloud:#F7F5F2;--kl-mute:#D8D1D5;--kl-d3:#E2A4CD;--kl-err:#F3B9D9;--kl-line:rgba(247,245,242,.1)}
html,body.kau-body{background:var(--kl-ink) !important;color:var(--kl-cloud) !important;color-scheme:dark}
body.kau-body{margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.kau-body .skip-link{position:absolute;left:-9999px}.kau-body .skip-link:focus{left:16px;top:16px;z-index:99;background:var(--kl-cloud);color:var(--kl-ink);padding:10px 14px;border-radius:10px}

/* left column */
.kau-body .kau{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100dvh;padding:96px clamp(24px,5vw,72px) 32px;background:none !important;box-sizing:border-box;min-width:0}
.kau-body .kau-logo{position:absolute;top:36px;left:clamp(24px,5vw,72px);display:inline-flex;align-items:center;min-height:44px;color:var(--kl-cloud) !important}
.kau-body .kau-logo svg{height:26px;width:auto}
.kau-body .kau-logo svg *{fill:var(--kl-cloud)}
.kau-body .kau-back{position:absolute;top:36px;left:auto;right:clamp(24px,5vw,72px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(247,245,242,.18);background:rgba(247,245,242,.05);color:var(--kl-cloud) !important}
.kau-body .kau-back svg{width:18px;height:18px}
.kau-body .kau-card{width:100%;max-width:420px;margin:0;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;display:flex;flex-direction:column;gap:22px;animation:klrise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes klrise{from{opacity:0;transform:translateY(12px)}}
.kau-body .kau-head{display:flex;flex-direction:column;gap:10px;margin:0;text-align:left}
.kau-body .kau-head .h1{margin:0;font-weight:500;font-size:clamp(36px,3.4vw,50px);line-height:1;letter-spacing:-.04em;color:var(--kl-cloud)}
.kau-body .sub{color:var(--kl-cloud) !important;font-size:17px;margin:0;opacity:1}
.kau-body .sub b,.kau-body .lbl b{font-weight:600;color:var(--kl-cloud) !important;opacity:1}
.kau-body .lbl{color:var(--kl-mute) !important;font-size:14px;margin:0}
.kau-body a{color:var(--kl-cloud);text-decoration:underline;text-decoration-color:rgba(247,245,242,.35);text-underline-offset:4px}
.kau-body a:hover{text-decoration-color:var(--kl-d3)}
.kau-body form{display:flex;flex-direction:column;gap:16px;margin:0}

/* fields */
.kau-body .fld{display:flex;flex-direction:column;gap:8px;margin:0}
.kau-body .fld>span,.kau-body .fld>label,.kau-body .kau-code legend{font-size:14px;font-weight:500;color:var(--kl-mute) !important;padding:0}
.kau-body .fld input,.kau-body .kau-pw input,.kau-body input[type="email"],.kau-body input[type="password"],.kau-body input[type="text"]:not(.km-otp__input){
  width:100%;box-sizing:border-box;min-height:56px;padding:0 18px;border-radius:14px !important;border:1px solid rgba(247,245,242,.18) !important;background:rgba(247,245,242,.05) !important;color:var(--kl-cloud) !important;font-size:17px;font-weight:400;font-family:inherit;box-shadow:none !important;transition:border-color .18s,background .18s,box-shadow .18s}
.kau-body input::placeholder{color:rgba(216,209,213,.45)}
.kau-body input:hover{border-color:rgba(247,245,242,.3) !important}
.kau-body input:focus{outline:none;border-color:var(--kl-d3) !important;background:rgba(247,245,242,.08) !important;box-shadow:0 0 0 3px rgba(226,164,205,.18) !important}
.kau-body input[aria-invalid="true"]{border-color:var(--kl-err) !important}
.kau-body .kau-pw{position:relative;display:block}
.kau-body .kau-pw input{padding-right:56px}
.kau-body .kau-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--kl-mute);display:grid;place-items:center;cursor:pointer}
.kau-body .kau-pw button:hover{color:var(--kl-cloud)}
.kau-body .kau-pw button svg{width:20px;height:20px}

/* buttons */
.kau-body .btn{font-family:inherit}
.kau-body .btn.p{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 24px;border-radius:999px !important;border:0 !important;background:var(--kl-dam) !important;color:var(--kl-cloud) !important;font-weight:600;font-size:16px;cursor:pointer;box-shadow:none !important;transition:background .18s,transform .12s}
.kau-body .btn.p:hover{background:var(--kl-dam2) !important}
.kau-body .btn.p:active{transform:scale(.985)}
.kau-body .btn:focus-visible,.kau-body a:focus-visible{outline:2px solid var(--kl-d3);outline-offset:3px}
.kau-body .btn.q,.kau-body .kau-q{display:inline;padding:0;min-height:44px;border:0 !important;background:none !important;color:var(--kl-cloud) !important;font-size:14px;font-weight:500;font-family:inherit;text-decoration:underline;text-decoration-color:rgba(247,245,242,.35);text-underline-offset:4px;cursor:pointer;box-shadow:none !important}
.kau-body .kau-links,.kau-body .kau-foot,.kau-body .kau-foot p,.kau-body .kau-links p,.kau-body .kau-c{text-align:left !important;justify-content:flex-start}
.kau-body .kau-links{display:flex;flex-direction:column;align-items:flex-start !important;gap:10px;padding-top:6px;border-top:1px solid var(--kl-line)}
.kau-body .kau-links form{display:block}
.kau-body .kauth__resend{color:var(--kl-mute)}
.kau-body .kau-c{display:flex;align-items:center;gap:8px}
.kau-body .kau-c::before{content:"";flex:0 0 14px;height:14px;background:var(--kl-d3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}

/* alerts */
.kau-body .alert{margin:0;padding:12px 16px;border-radius:14px;font-size:15px;background:rgba(243,185,217,.1) !important;border:1px solid rgba(243,185,217,.4) !important;color:var(--kl-err) !important}

/* six code boxes (kelmo-motion.js) */
.kau-body .kau-code{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kau-body .km-otp{position:relative}
.kau-body .km-otp__boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.kau-body .km-otp__boxes span{display:grid;place-items:center;aspect-ratio:1/1.12;min-height:52px;border-radius:14px;border:1px solid rgba(247,245,242,.18);background:rgba(247,245,242,.05);color:var(--kl-cloud);font-weight:600;font-size:clamp(22px,2.4vw,28px);font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.kau-body .km-otp__boxes span.is-filled{border-color:rgba(226,164,205,.55);animation:klpop .18s ease}
.kau-body .km-otp__boxes span.is-active{border-color:var(--kl-d3);background:rgba(247,245,242,.09);box-shadow:0 0 0 3px rgba(226,164,205,.18)}
.kau-body .km-otp.is-ok .km-otp__boxes span{border-color:var(--kl-d3);background:rgba(130,50,108,.35)}
.kau-body .km-otp.is-error .km-otp__boxes span{border-color:var(--kl-err)}
@keyframes klpop{50%{transform:scale(1.06)}}
.kau-body .km-otp__input{position:absolute !important;inset:0;width:100% !important;height:100% !important;opacity:0;border:0 !important;background:none !important;color:transparent !important;caret-color:transparent;cursor:text}
.kau-body .km-loadbar{background:linear-gradient(90deg,var(--kl-dam),var(--kl-d3)) !important}

/* footer lines */
.kau-body .kau-foot{margin:32px 0 0;align-items:flex-start;max-width:420px;display:flex;flex-direction:column;gap:8px;color:var(--kl-mute) !important;font-size:14px}
.kau-body .kau-foot .sub{color:var(--kl-mute) !important;font-size:14px}

/* right column: stage added by kelmo-login.js */
.kl-stage{position:relative;overflow:hidden;margin:12px;border-radius:28px;min-width:0;
  background:radial-gradient(60% 55% at 50% 42%, rgba(130,50,108,.55) 0%, rgba(50,18,40,.7) 48%, #120A10 100%);box-shadow:inset 0 0 0 1px var(--kl-line);display:flex;flex-direction:column;justify-content:flex-end;animation:klfade .9s ease .1s both}
@keyframes klfade{from{opacity:0;transform:scale(.985)}}
.kl-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(247,245,242,.09) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 80%);pointer-events:none}
.kl-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;font-size:13px;color:var(--kl-mute)}
.kl-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.kl-hint{display:inline-flex;align-items:center;gap:8px;transition:opacity .4s}.kl-hint.gone{opacity:0}
.kl-orb{position:absolute;left:50%;top:42%;width:min(48%,380px);aspect-ratio:1/1;transform:translate(-50%,-50%);cursor:grab;touch-action:pan-y}
.kl-orb.dragging{cursor:grabbing}
.kl-orb canvas,.kl-orb svg{display:block;width:100%;height:100%}
.kl-orb svg{width:44%;height:auto;margin:28%}
.kl-feed{position:relative;z-index:2;padding:0 28px 40px;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:140px;justify-content:flex-end}
.kl-toast{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(28,18,25,.42);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(247,245,242,.14);box-shadow:0 10px 30px rgba(0,0,0,.25);width:320px;max-width:100%;box-sizing:border-box;color:var(--kl-cloud);animation:kltin .5s cubic-bezier(.2,.8,.2,1) both}
.kl-toast.out{animation:kltout .4s ease forwards}
@keyframes kltin{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes kltout{to{opacity:0;transform:translateY(-10px)}}
.kl-toast .kl-ic{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:rgba(130,50,108,.6);display:grid;place-items:center;color:var(--kl-cloud)}
.kl-toast .kl-ic svg{display:block;width:18px;height:18px}
.kl-toast b{display:block;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.kl-tx{min-width:0;flex:1}
.kl-tx b,.kl-tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-tx span{display:block;font-size:13px;opacity:.85}

@media (max-width:960px){
  body.kau-body{grid-template-columns:1fr}
  .kl-stage{order:-1;margin:10px 10px 0;min-height:220px;border-radius:22px}
  .kl-orb{top:54%;width:min(52%,190px)}
  .kl-feed,.kl-top .kl-mono,.kl-hint{display:none}
  .kl-top{padding:16px 18px}
  .kau-body .kau{min-height:0;padding:32px 24px 40px;justify-content:flex-start}
  .kau-body .kau-logo{position:fixed;top:22px;left:24px;z-index:5}
  .kau-body .kau-back{position:fixed;top:20px;right:20px;z-index:5}
  .kau-body .kau-card,.kau-body .kau-foot{margin-inline:auto}
}
@media (max-width:380px){.kau-body .km-otp__boxes{gap:6px}}
@media (prefers-reduced-motion:reduce){.kau-body *,.kl-stage,.kl-toast{animation-duration:.001s !important;transition-duration:.001s !important}}

/* align column to the logo */
.kau-body .kau{align-items:flex-start !important}
.kau-body .kau-card,.kau-body .kau-foot{margin-left:0 !important;margin-right:0 !important;align-self:flex-start}
@media (max-width:960px){.kau-body .kau{align-items:stretch !important}.kau-body .kau-card,.kau-body .kau-foot{align-self:center;margin-inline:auto !important}}

/* 11u: no hint line; terms line only, quiet */
.kau-body .kau-c,.kau-body .kau-foot .sub{display:none !important}
.kau-body .kau-foot{margin:4px 0 0 !important;max-width:420px;width:100%}
.kau-body .kau-foot .lbl{font-size:13px;line-height:1.5;color:rgba(216,209,213,.6) !important}
.kau-body .kau-foot .lbl a{color:rgba(247,245,242,.85);font-weight:500;text-decoration-color:rgba(247,245,242,.2)}
.kau-body .kau-foot .lbl a:hover{color:var(--kl-cloud);text-decoration-color:var(--kl-d3)}
@media (max-width:960px){.kau-body .kau{position:static}.kau-body .kau-logo{position:absolute;top:26px;left:30px;min-height:32px;z-index:5}.kau-body .kau-logo svg{height:20px !important;width:auto !important}.kau-body .kau-back{position:absolute;top:24px;right:24px}}

/* 11w: calmer "Check your email" and password steps. On phones the 3D panel is hidden on these steps so the form starts at the top. */
.kau-body .kau-to{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:17px;line-height:1.35}
.kau-body .kau-to b{font-weight:600;color:var(--kl-cloud) !important;opacity:1;overflow-wrap:anywhere}
.kau-body .kau-head .sub+.kau-to{margin-top:-6px}
.kau-body .kau-to a,.kau-body .kau-alt a{font-size:14px;font-weight:500;color:var(--kl-d3);text-decoration:none}
.kau-body .kau-to a:hover,.kau-body .kau-alt a:hover,.kau-body .kau-alt .kau-q:hover{text-decoration:underline;text-underline-offset:4px}
.kau-body .kau-code legend.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kau-body .kau-alt{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:-6px}
.kau-body .kau-alt form{display:block}
.kau-body .kau-alt .kau-q{min-height:44px;color:var(--kl-d3) !important;text-decoration:none;font-size:14px;font-weight:500}
.kau-body .kau-alt a{display:inline-flex;align-items:center;min-height:44px}
.kau-body .kau-note{margin:0;font-size:13px;line-height:1.5;color:rgba(216,209,213,.6)}
.kau-body .kau-alt+.kau-note{margin-top:-14px}
@media (max-width:960px){
  body.kau-body:has(.kau--sub) .kl-stage{display:none}
  .kau-body .kau.kau--sub{padding-top:96px}
  .kau-body .kau--sub .kau-logo{display:inline-flex !important}
  .kau-body .kau--sub .kau-head .h1{font-size:34px}
}