/* Login variants share fields, actions, preferences and workspace tokens. */
.auth-page{color:var(--color-text);background:var(--color-surface);min-height:100dvh;display:flex;flex-direction:column}
.auth-header,.auth-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 40px}
.auth-tools{display:flex;align-items:center;gap:12px}
.auth-options{display:flex;gap:4px}
.auth-options a{padding:8px 12px;border-radius:6px;font-size:calc(12px * var(--ui-font-scale,1));color:var(--color-muted)}
.auth-options a[aria-current=page]{background:var(--color-accent-soft);color:var(--color-accent-text);font-weight:700}
.auth-page .auth-main{flex:1;display:grid;place-items:center;width:100%;padding:56px 24px;background:var(--color-surface)}
.auth-card{--form-control-font-size:calc(16px * var(--ui-font-scale,1));width:100%;max-width:360px;min-width:0}
.auth-card .btn{font-size:calc(16px * var(--ui-font-scale,1))}
.auth-card h1{font-size:calc(28px * var(--ui-font-scale,1));letter-spacing:-.7px;line-height:1.3;margin:0 0 8px}
.auth-subtitle{font-size:calc(13px * var(--ui-font-scale,1));color:var(--color-muted);line-height:1.7;margin-bottom:28px}
.auth-form{display:grid;gap:20px}

.auth-password{position:relative}
.auth-password .form-control{padding-right:94px}
.auth-reveal{position:absolute;right:6px;top:5px;min-height:34px;padding:4px 8px;background:transparent;border:0;color:var(--color-accent-text);font-size:calc(14px * var(--ui-font-scale,1));font-weight:650;border-radius:5px}
.auth-form>.btn{min-height:44px;width:100%}
.auth-demo{font-size:calc(11px * var(--ui-font-scale,1));line-height:1.6;color:var(--color-muted);text-align:center}
.auth-help{color:var(--color-muted);font-size:calc(12px * var(--ui-font-scale,1));line-height:1.7;text-align:center;margin-top:20px}
.auth-help summary{color:var(--color-accent-text);font-weight:600;list-style:none}
.auth-help p{margin-top:10px}
.auth-footer{font-size:calc(11px * var(--ui-font-scale,1));color:var(--color-muted)}
.auth-panel,.auth-panel .auth-main{background:var(--color-canvas)}
.auth-frame{display:grid;grid-template-columns:300px minmax(0,1fr);width:100%;max-width:860px;border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:var(--color-surface)}
.auth-identity{display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:36px;background:var(--color-primary);color:var(--color-auth-identity-text)}
.auth-identity>div{margin-block:auto}
.auth-identity img{width:145px;height:28px;object-fit:contain;object-position:left}
.auth-identity-label{font-size:calc(10px * var(--ui-font-scale,1));letter-spacing:.14em;margin-bottom:16px}
.auth-identity-title{font-size:calc(26px * var(--ui-font-scale,1));font-weight:650;line-height:1.4;letter-spacing:-.5px;margin-bottom:16px}
.auth-identity p:last-child:not(.auth-identity-title),.auth-identity-foot{font-size:calc(11px * var(--ui-font-scale,1));line-height:1.7}
.auth-panel .auth-card{max-width:none;padding:48px}
@media(max-width:700px){.auth-header,.auth-footer{padding:20px;flex-wrap:wrap}.auth-tools{gap:6px}.auth-options a{padding:8px}.auth-page .auth-main{padding:32px 20px}.auth-frame{grid-template-columns:1fr;max-width:420px}.auth-identity{padding:20px 24px;gap:0;flex-direction:row;align-items:center}.auth-identity>div{display:none}.auth-identity img{width:120px;height:24px}.auth-panel .auth-card{padding:28px 24px}.auth-footer{font-size:calc(10px * var(--ui-font-scale,1))}}

/* One native input preserves paste/autofill; six decorative lines mark digit slots. */
.auth-otp{--preview-font-body:"IBM Plex Mono",monospace;--otp-step:calc((100cqi - 32px) / 6);font-size:calc(26px * var(--ui-font-scale,1));position:relative;display:block;container-type:inline-size;overflow:hidden;padding-bottom:14px}
.auth-otp::before{content:"";position:absolute;inset:0 0 14px;border:1px solid var(--color-muted);border-radius:6px;background:var(--color-surface);pointer-events:none}
.auth-otp-lines{position:absolute;inset:auto auto 0 16px;width:calc(6 * var(--otp-step));height:2px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));pointer-events:none}
.auth-otp-lines>span{margin:0 6px;border-bottom:2px solid var(--color-border)}
.auth-otp:focus-within .auth-otp-lines>span{border-color:var(--color-focus)}
.auth-otp .auth-otp-input{--preview-font-body:"IBM Plex Mono",monospace;display:block;position:relative;width:100%;height:60px;padding:0 16px 0 calc(16px + (var(--otp-step) - 1ch) / 2);border:0;border-radius:0;background:transparent;color:var(--color-text);font-size:calc(26px * var(--ui-font-scale,1));font-weight:500;letter-spacing:calc(var(--otp-step) - 1ch);caret-color:var(--color-accent-text);outline:none}
.auth-otp:focus-within::before{border-color:var(--color-focus);box-shadow:inset 0 0 0 1px var(--color-focus)}

.auth-header{justify-content:flex-end}

/* Verification keeps one native input for paste, autofill and recovery codes. */
.auth-verification .auth-main{background:var(--color-canvas);padding:40px 20px 64px}
.auth-verification-shell{width:100%;max-width:560px}
.auth-workspace{text-align:center;font-size:calc(14px * var(--ui-font-scale,1));font-weight:650;color:var(--color-text);margin-bottom:24px;overflow-wrap:anywhere}
.auth-verification .auth-card{max-width:none;padding:40px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;box-shadow:var(--color-shadow)}
.auth-steps{display:flex;align-items:center;gap:16px;list-style:none;padding:0;margin:0 0 32px;font-size:calc(11px * var(--ui-font-scale,1));font-weight:650;color:var(--color-muted)}
.auth-steps li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.auth-steps li:first-child{flex:1}
.auth-steps li:first-child::after{content:"";height:1px;background:var(--color-border);flex:1;margin-left:8px}
.auth-steps li>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--color-border);border-radius:50%;flex:none}
.auth-steps .ico{width:14px;height:14px}
.auth-steps [aria-current=step]{color:var(--color-accent-text)}
.auth-steps [aria-current=step]>span{border-color:var(--color-accent-text);background:var(--color-accent-soft)}
.auth-steps .auth-step-complete>span{color:var(--color-success);background:var(--color-success-soft);border-color:transparent}
.auth-verification-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--color-accent-soft);color:var(--color-accent-text);margin-bottom:24px}
.auth-verification-mark .ico{width:28px;height:28px;stroke-width:1.5}
.auth-verification .auth-card h1{font-size:calc(26px * var(--ui-font-scale,1));margin:0 0 12px}
.auth-verification-instruction{font-size:calc(13px * var(--ui-font-scale,1));line-height:1.7;color:var(--color-muted);margin-bottom:28px}
.auth-verification .auth-code-input{--preview-font-body:"IBM Plex Mono",monospace;--form-control-height:60px;--form-control-font-size:calc(28px * var(--ui-font-scale,1));--form-control-radius:10px;--form-control-padding:6px 16px;--ui-surface:var(--color-surface-soft);--ui-border:var(--color-muted);letter-spacing:.24em;text-align:center}
.auth-verification .auth-code-input::placeholder{color:var(--color-muted);opacity:.65}
.auth-verification .auth-code-input:focus{--ui-surface:var(--color-surface);--ui-border:var(--color-accent-text)}
.auth-verification .form-field-invalid .auth-code-input{--ui-border:var(--color-danger)}
.auth-verification .auth-form>.btn{display:flex;justify-content:center;align-items:center;gap:12px;min-height:48px}
.auth-verification-back{display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border);font-size:calc(12px * var(--ui-font-scale,1));font-weight:650;color:var(--color-muted)}
.auth-verification-back .ico{width:16px;height:16px}
.auth-verification-back:hover{color:var(--color-accent-text)}
@media(max-width:480px){.auth-verification .auth-main{padding:24px 16px 40px}.auth-verification .auth-card{padding:24px}.auth-verification .auth-card h1{font-size:calc(24px * var(--ui-font-scale,1))}.auth-steps{gap:12px}.auth-verification .auth-code-input{--form-control-font-size:calc(26px * var(--ui-font-scale,1))}}

.auth-code-control{position:relative;container-type:inline-size;padding-bottom:16px}
.auth-code-control[data-code-format=otp] .auth-code-input{--auth-code-step:calc((100cqi - 34px) / 6);--form-control-padding:6px 0 6px calc(16px + (var(--auth-code-step) - 1ch) / 2);text-align:left;letter-spacing:calc(var(--auth-code-step) - 1ch)}
.auth-code-indicators{--auth-code-step:calc((100cqi - 34px) / 6);position:absolute;left:17px;bottom:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:calc(6 * var(--auth-code-step));height:3px;font-family:"IBM Plex Mono",monospace;font-size:var(--form-control-font-size,calc(28px * var(--ui-font-scale,1)))}
.auth-code-indicators>span{height:3px;margin:0 6px;border-radius:2px;background:var(--color-border)}
.auth-code-indicators>.is-filled{background:var(--color-accent-text)}
.auth-code-control:focus-within .auth-code-indicators>.is-current{background:var(--color-focus)}
.auth-code-control{--form-control-font-size:calc(28px * var(--ui-font-scale,1));font-family:"IBM Plex Mono",monospace;font-size:var(--form-control-font-size)}
@media(max-width:480px){.auth-code-control{--form-control-font-size:calc(26px * var(--ui-font-scale,1))}}

/* The login panel shares the verification card's rounded frame and quiet key mark. */
.auth-panel .auth-main{align-items:start;padding-top:24px}
.auth-panel .auth-frame{grid-template-columns:320px minmax(0,1fr);max-width:920px;border-radius:20px;box-shadow:var(--color-shadow)}
.auth-panel .auth-identity{position:relative;isolation:isolate;overflow:hidden;padding:40px;gap:40px;min-height:560px}
.auth-panel .auth-identity::before,.auth-panel .auth-identity::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:320px;height:320px;border:1px solid currentColor;border-radius:50%;opacity:.12;right:-220px;bottom:-100px}
.auth-panel .auth-identity::after{width:420px;height:420px;right:-270px;bottom:-150px}
.auth-company-name{font-size:calc(22px * var(--ui-font-scale,1));font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.auth-panel .auth-identity-content{margin-block:auto}
.auth-identity-symbol{display:grid;place-items:center;width:72px;height:72px;margin-bottom:32px;border:1px solid currentColor;border-radius:20px}
.auth-identity-symbol svg{width:40px;height:40px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.auth-panel .auth-identity-label{font-size:calc(10px * var(--ui-font-scale,1));font-weight:650;letter-spacing:.18em;margin-bottom:12px}
.auth-panel .auth-identity-title{font-size:calc(32px * var(--ui-font-scale,1));line-height:1.25;font-weight:650;letter-spacing:-.8px;margin:0}
.auth-capabilities{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:calc(10px * var(--ui-font-scale,1));font-weight:650}
.auth-capabilities li{padding:6px 10px;border:1px solid currentColor;border-radius:6px}
.auth-panel .auth-card{padding:48px}
.auth-login-mark{margin-bottom:20px}
.auth-panel .auth-card h1{margin:0 0 28px;font-size:calc(30px * var(--ui-font-scale,1))}
.auth-panel .auth-form>.btn{min-height:48px}
.auth-panel .auth-help{text-align:left;margin-top:20px}
.auth-login-preview{border-top:1px solid var(--color-border);padding-top:20px;margin-top:24px;text-align:center}
@media(max-width:700px){.auth-panel .auth-main{padding-top:16px}.auth-panel .auth-frame{grid-template-columns:1fr;max-width:440px;border-radius:16px}.auth-panel .auth-identity{min-height:0;padding:24px;gap:16px}.auth-panel .auth-identity-content,.auth-panel .auth-capabilities{display:none}.auth-panel .auth-card{padding:28px 24px}.auth-panel .auth-identity::before,.auth-panel .auth-identity::after{display:none}.auth-panel .auth-card h1{font-size:calc(26px * var(--ui-font-scale,1))}.auth-company-name{font-size:calc(20px * var(--ui-font-scale,1))}.auth-login-mark{margin-bottom:16px}}