:root{
  --ink:#11110f;
  --muted:#77756f;
  --line:#dedcd5;
  --paper:#fbfbf9;
  --page:#e9e7e1;
  --danger:#bd3030;
  --success:#18764e;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:32px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e8e6e0 0%,#f2f1ed 52%,#e3e1da 100%)}
.auth-page::before{content:"";position:absolute;inset:0;opacity:.28;background-image:radial-gradient(rgba(17,17,15,.22) .55px,transparent .55px);background-size:8px 8px;mask-image:linear-gradient(to bottom,black,transparent 70%)}
.auth-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.65;pointer-events:none}
.auth-orb-one{width:420px;height:420px;background:radial-gradient(circle,rgba(90,73,198,.22),rgba(90,73,198,0) 68%);top:-170px;right:-80px}
.auth-orb-two{width:460px;height:460px;background:radial-gradient(circle,rgba(42,120,214,.16),rgba(42,120,214,0) 70%);bottom:-220px;left:-110px}
.auth-shell{width:min(1080px,100%);min-height:650px;display:grid;grid-template-columns:.92fr 1.08fr;border:1px solid rgba(17,17,15,.1);border-radius:32px;overflow:hidden;background:var(--paper);box-shadow:0 35px 100px rgba(24,22,17,.18),0 2px 6px rgba(24,22,17,.05);position:relative;z-index:1}
.auth-story{padding:38px;color:#fff;background:#11110f;position:relative;display:flex;flex-direction:column;overflow:hidden}
.auth-story::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle at center,rgba(79,68,180,.72),rgba(38,33,89,.25) 42%,transparent 70%);left:-170px;bottom:-250px}
.auth-story::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 40%,rgba(255,255,255,.04));pointer-events:none}
.story-top,.story-copy,.story-foot{position:relative;z-index:1}
.story-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.story-brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.13em}
.story-brand-mark,.mobile-brand span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#fff;color:#111;font-size:14px;letter-spacing:0}
.private-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);border-radius:999px;padding:7px 11px;font-size:10px;font-weight:600;color:rgba(255,255,255,.72)}
.private-badge span{width:6px;height:6px;border-radius:50%;background:#63dda4;box-shadow:0 0 0 3px rgba(99,221,164,.12)}
.story-copy{margin:auto 0;max-width:390px;padding:42px 0}
.story-kicker{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);margin:0 0 18px}
.story-copy h1{font-size:clamp(42px,5vw,64px);letter-spacing:-.055em;line-height:.98;margin:0 0 25px;font-weight:750}
.story-copy>p:last-child{max-width:350px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.58);margin:0}
.story-foot{margin-top:auto}
.security-chip{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);border-radius:17px;backdrop-filter:blur(12px)}
.security-chip>svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;flex:0 0 auto}
.security-chip div{display:flex;flex-direction:column;gap:3px}.security-chip strong{font-size:11.5px}.security-chip span{font-size:9.5px;color:rgba(255,255,255,.45)}
.auth-panel{padding:54px 74px 34px;display:flex;flex-direction:column;justify-content:center;background:rgba(251,251,249,.92)}
.mobile-brand{display:none;font-size:12px;font-weight:800;letter-spacing:.13em;align-items:center;gap:9px;margin-bottom:44px}.mobile-brand span{background:#111;color:#fff}
.auth-form-view{width:100%;max-width:390px;margin:auto}
.auth-heading{margin-bottom:30px}.auth-heading .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin:0 0 12px}
.auth-heading h2{font-size:31px;line-height:1.14;letter-spacing:-.035em;margin:0 0 10px;font-weight:750}.auth-heading>p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0;max-width:350px}
.heading-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#f0efea;border:1px solid #e4e2dc;margin-bottom:19px}.heading-icon svg{width:22px;height:22px;fill:none;stroke:#111;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.field-label{display:block;font-size:11.5px;font-weight:650;margin:0 0 8px;color:#3d3c38}
.field-row{display:flex;justify-content:space-between;align-items:center;margin-top:19px}.field-row .field-label{margin:0 0 8px}
.field-wrap{height:52px;display:flex;align-items:center;gap:10px;background:#f3f2ee;border:1px solid transparent;border-radius:14px;padding:0 14px;transition:border-color .15s,background .15s,box-shadow .15s}
.field-wrap:focus-within{background:#fff;border-color:#aaa79f;box-shadow:0 0 0 4px rgba(17,17,15,.055)}
.field-wrap>svg{width:18px;height:18px;fill:none;stroke:#85827b;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.field-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#111;font-size:13px}.field-wrap input::placeholder{color:#aaa8a2}
.text-link,.back-button{border:0;background:none;padding:0;cursor:pointer;font-size:11.5px;font-weight:650}.text-link:hover,.back-button:hover{text-decoration:underline}
.back-button{display:inline-flex;align-items:center;gap:6px;color:var(--muted);margin-bottom:34px}.back-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.password-toggle{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;color:#85827b;flex:0 0 auto}.password-toggle svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.password-toggle .eye-closed{display:none}.password-toggle.is-visible .eye-open{display:none}.password-toggle.is-visible .eye-closed{display:block}
.primary-button{width:100%;height:52px;border:0;border-radius:999px;margin-top:9px;background:#11110f;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:700;cursor:pointer;transition:transform .1s,background .15s,box-shadow .15s}.primary-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}.primary-button:hover{background:#282824;box-shadow:0 9px 24px rgba(17,17,15,.16)}.primary-button:hover svg{transform:translateX(2px)}.primary-button:active{transform:scale(.985)}.primary-button:disabled{cursor:wait;opacity:.6;box-shadow:none}
.secondary-button{width:100%;height:46px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:650;cursor:pointer;margin-top:4px}.secondary-button:hover{color:#111}
.form-message{min-height:25px;font-size:11.5px;line-height:1.45;padding-top:8px;color:var(--danger)}.form-message.success{color:var(--success)}
.form-message.message-box{min-height:auto;margin:14px 0 5px;padding:13px 14px;border-radius:12px;background:#eef7f2;color:var(--success);border:1px solid #d8ebe0}
.auth-footer{text-align:center;color:#aaa8a1;font-size:10.5px;margin:36px 0 0}.auth-form-view[hidden]{display:none}
@media(max-width:860px){.auth-page{padding:18px}.auth-shell{grid-template-columns:1fr;max-width:560px;min-height:0}.auth-story{display:none}.auth-panel{padding:44px 56px 30px;min-height:660px}.mobile-brand{display:flex}}
@media(max-width:520px){.auth-page{padding:0;background:var(--paper)}.auth-page::before,.auth-orb{display:none}.auth-shell{min-height:100vh;border:0;border-radius:0;box-shadow:none}.auth-panel{padding:28px 24px 24px;min-height:100vh}.mobile-brand{margin-bottom:60px}.auth-heading h2{font-size:28px}.auth-footer{margin-top:auto;padding-top:30px}}
@media(max-width:340px){
  html,body,.auth-page,.auth-shell,.auth-panel{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  .auth-shell{min-height:100dvh}
  .auth-panel{padding:20px 14px calc(18px + env(safe-area-inset-bottom));min-height:100dvh}
  .auth-form-view{min-width:0;max-width:100%}
  .mobile-brand{margin-bottom:38px;font-size:11px}
  .auth-heading{margin-bottom:24px}
  .auth-heading h2{font-size:25px;overflow-wrap:anywhere}
  .auth-heading>p{font-size:12.5px}
  .field-wrap{height:50px;padding:0 11px}
  .field-wrap input{min-width:0;font-size:16px}
  .field-row{gap:8px}
  .field-row .text-link{flex:0 0 auto}
  .primary-button{height:50px}
  .back-button{margin-bottom:26px}
  .auth-footer{padding-top:20px;margin-top:auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* HOTLABE product auth, aligned with the Paper/Fog/Ember system. */
:root{--ink:#070707;--muted:#60646c;--line:#b9bbc6;--paper:#fff;--page:#f3f3f7;--ember:#ff5900;--abyss:#000710}
body{font-feature-settings:"calt" 0,"liga" 0,"ss03","cv01","cv05" 0,"cv10";letter-spacing:-.01em}
.auth-page{min-height:100dvh;background:var(--page);padding:24px}
.auth-page::before,.auth-orb{display:none}
.auth-shell{width:min(1120px,100%);min-height:680px;border:1px solid #e1e1e7;border-radius:12px;background:var(--paper);box-shadow:none}
.auth-story{padding:40px;background:var(--abyss)}
.auth-story::before{display:none}
.auth-story::after{background:linear-gradient(145deg,transparent 55%,rgba(255,89,0,.10))}
.story-brand-mark,.mobile-brand span{border-radius:10px}
.private-badge{border-radius:6px;background:rgba(255,255,255,.07);padding:7px 10px}
.private-badge span{background:var(--ember);box-shadow:none}
.story-copy h1{font-size:clamp(44px,5vw,68px);font-weight:600;letter-spacing:-.055em}
.story-kicker{color:rgba(255,255,255,.58)}
.security-chip{border-radius:12px;background:rgba(255,255,255,.05);backdrop-filter:none}
.auth-panel{padding:54px 72px 34px;background:var(--paper)}
.auth-heading h2{font-weight:600;letter-spacing:-.04em}
.auth-heading .eyebrow{color:var(--muted)}
.heading-icon{border-radius:12px;background:var(--page);border-color:#e1e1e7}
.field-wrap{height:52px;border:1px solid #e1e1e7;border-radius:12px;background:var(--page)}
.field-wrap:focus-within{background:#fff;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,89,0,.10)}
.primary-button{height:52px;border-radius:12px;background:var(--ember);font-weight:600}
.primary-button:hover{background:#df4d00;box-shadow:none}
.form-message.message-box{border-radius:12px}
button:focus-visible,input:focus-visible{outline:3px solid rgba(255,89,0,.26);outline-offset:2px}
@media(max-width:860px){.auth-panel{min-height:660px}.auth-shell{border-radius:12px}}
@media(max-width:520px){.auth-page{padding:0}.auth-shell{border-radius:0}.auth-panel{padding:28px 20px 24px}.mobile-brand{margin-bottom:52px}}
@media(max-width:340px){.auth-panel{padding-inline:12px}.mobile-brand{margin-bottom:34px}}