:root{--kd-registration-width:560px}
.app-auth-gate{
  position:fixed;inset:0;z-index:19000;display:grid;place-items:center;align-items:safe center;
  min-height:100dvh;padding:var(--kd-layout-blocks);overflow-y:auto;
  background:
    radial-gradient(circle at 50% 18%,color-mix(in oklab,var(--kd-color-primary) 16%,transparent),transparent 38%),
    var(--kd-color-background);
  color:var(--kd-color-foreground);font-family:var(--kd-font-sans)
}
.app-auth-gate[hidden]{display:none}
.app-auth-card{
  width:min(var(--kd-registration-width),100%);max-width:calc(100% - var(--kd-card-out-left) - var(--kd-card-out-right));padding:var(--kd-card-top) var(--kd-card-right) var(--kd-card-bottom) var(--kd-card-left);overflow:visible;overflow-wrap:anywhere;
  background:color-mix(in oklab,var(--kd-color-surface) 96%,transparent)
}
.app-auth-brand{display:flex;align-items:center;gap:var(--kd-layout-icon);max-width:100%;width:max-content;color:var(--kd-color-foreground);text-decoration:none;font:var(--kd-type-title)}
.app-auth-brand img{width:48px;height:48px;object-fit:contain}
.app-auth-brand>span>span{color:var(--sidebar-primary)}
/* Login brand: display typography and responsive decorative logo. */
:is(#app-auth-gate,#app-entitlement-gate,.kd-welcome) .app-auth-brand{
  width:100%;flex-direction:row;justify-content:center;text-align:center;
  gap:0;margin-block:0;
  font:var(--kd-type-display);
}
#app-auth-gate{align-items:safe center}
#app-auth-gate .app-auth-card{min-height:calc(560px + var(--kd-layout-blocks) * 6);padding:calc(var(--kd-card-top) + var(--kd-layout-blocks) * 3) calc(var(--kd-card-right) * 2) calc(var(--kd-card-bottom) * 2) calc(var(--kd-card-left) * 2);display:flex;flex-direction:column;gap:calc(var(--kd-layout-blocks) * 3)}
#app-auth-gate .app-auth-card> :is(.app-auth-identity,.app-auth-drive-choice,.app-auth-stage-actions,.app-auth-account-switch,.app-auth-foot,.app-auth-error){margin-block:0}
#app-auth-gate .app-auth-card>.kdui-button{margin-block:0!important}
#app-auth-gate .app-auth-error:empty{display:none}
#app-auth-gate .app-auth-intro{display:grid;gap:var(--kd-layout-text);min-width:0}
#app-auth-gate .app-auth-intro>:is(h1,p,.app-auth-step){margin:0;min-height:0;text-align:left}
:is(#app-auth-gate,#app-entitlement-gate,.kd-welcome) .app-auth-brand img{width:calc(144px * .7);height:calc(144px * .7);max-width:calc(100% - var(--kd-layout-blocks) * 1.4);flex-shrink:0;margin:calc(var(--kd-layout-blocks) * .7)}
:is(#app-auth-gate,#app-entitlement-gate,.kd-welcome) .app-auth-brand>span{max-width:100%;font-size:calc(clamp(28px,10vw,var(--kd-type-display-size,56px)) * .7);line-height:1.05}
#app-auth-gate .app-auth-google{display:flex;margin-inline:auto!important;width:min(320px,100%)}
#app-auth-gate .app-auth-google[hidden]{display:none}
@media(max-width:600px){
  #app-auth-gate .app-auth-card h1{font:var(--kd-type-title)}
  :is(#app-auth-gate,#app-entitlement-gate,.kd-welcome) .app-auth-brand{flex-direction:column}
  :is(#app-auth-gate,#app-entitlement-gate,.kd-welcome) .app-auth-brand img{width:calc(96px * .7);height:calc(96px * .7)}
}
.account-onboarding-otp-host{width:min(var(--kd-registration-width),100%);max-width:calc(100% - var(--kd-card-out-left) - var(--kd-card-out-right))}
.account-onboarding-otp-host .kd-otp-card.kdui-card{width:100%;max-width:100%;margin:0}
.app-auth-account-switch{text-align:center;font:var(--kd-type-body);margin-block:16px;color:var(--kd-color-foreground)}
.app-auth-account-switch button{border:0;background:transparent;color:var(--kd-color-primary);font:inherit;padding:4px;cursor:pointer}
.app-auth-account-switch button:hover{text-decoration:underline}
.app-auth-account-switch button:focus-visible{outline:2px solid var(--kd-color-primary);outline-offset:2px}
.app-auth-badge{display:inline-flex;align-items:center;min-height:24px;margin:var(--kd-space-5) 0 var(--kd-space-3);padding:3px 9px;border:1px solid color-mix(in oklab,var(--sidebar-primary) 38%,transparent);border-radius:999px;background:color-mix(in oklab,var(--sidebar-primary) 10%,transparent);color:var(--sidebar-primary);font:var(--kd-type-label);text-transform:uppercase}
.app-auth-card h1{margin:0 0 var(--kd-layout-text);color:var(--kd-color-foreground);font:var(--kd-type-heading)}
.app-auth-card p{min-height:44px;margin:0 0 var(--kd-layout-text);color:var(--kd-color-muted);font:var(--kd-type-body)}
.app-auth-google{width:100%;border-color:var(--kd-color-border-strong);background:var(--kd-color-foreground);color:var(--kd-color-background)}
.app-auth-google:hover{background:color-mix(in oklab,var(--kd-color-foreground) 90%,var(--kd-color-background))}
.app-auth-google:disabled{cursor:wait;opacity:.6}
.app-auth-google svg{width:20px;height:20px;flex:0 0 auto}
.app-auth-error{min-height:20px;margin-top:var(--kd-layout-text);color:var(--kd-color-danger);font:var(--kd-type-caption)}
.app-auth-error:empty{visibility:hidden}
.app-auth-foot{margin-top:var(--kd-layout-text);padding-top:var(--kd-layout-text);border-top:1px solid var(--kd-color-border);color:var(--kd-color-subtle);font:var(--kd-type-caption)}
.app-auth-step.kdui-badge{display:flex;align-self:start;justify-self:start;width:max-content;max-width:100%;text-align:left;font:var(--kd-type-label)}
.app-auth-stage-actions{display:flex;flex-direction:column;gap:var(--kd-layout-inline);margin-block:var(--kd-layout-blocks)}
.app-auth-stage-actions>.kdui-button{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:normal}
.app-auth-identity{display:flex;align-items:center;gap:22px;margin-block:var(--kd-layout-blocks);font:var(--kd-type-body);color:var(--kd-color-foreground);overflow-wrap:anywhere}
.app-auth-identity-details{display:grid;gap:var(--kd-layout-text);min-width:0}
.app-auth-identity-details>strong{font:var(--kd-type-title);font-weight:750}
.app-auth-identity span{font:var(--kd-type-caption);color:var(--kd-color-muted)}
.app-auth-identity .app-auth-identity-avatar{display:grid;place-items:center;flex:none;width:calc(var(--kd-input-height) * 1.5);height:calc(var(--kd-input-height) * 1.5);overflow:hidden;border-radius:50%;background:var(--kd-color-surface-raised);color:var(--kd-color-primary);font:var(--kd-type-title)}
.app-auth-identity-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.app-auth-identity .app-auth-identity-avatar>span{font:inherit;color:inherit}
.app-auth-drive-choice{display:grid;grid-template-columns:var(--kd-space-5) minmax(0,1fr);align-items:center;gap:var(--kd-layout-text) var(--kd-layout-icon);margin-block:var(--kd-layout-blocks);font:var(--kd-type-body);color:var(--kd-color-foreground);cursor:pointer}
.app-auth-drive-choice input{width:var(--kd-space-5);height:var(--kd-space-5);margin:0;accent-color:var(--kd-color-primary);cursor:inherit}
.app-auth-drive-choice span{min-width:0}
.app-auth-drive-choice small{grid-column:2;font:var(--kd-type-caption);color:var(--kd-color-muted)}
#app-auth-gate [hidden]{display:none!important}
body.app-auth-pending{overflow:hidden}
body.app-auth-pending > :not(.app-auth-gate){pointer-events:none}
.app-entitlement-rules{margin:0 0 var(--kd-space-5);padding-left:20px;color:var(--kd-color-foreground);font:var(--kd-type-body)}
.app-entitlement-rules li+li{margin-top:var(--kd-space-2)}
.app-entitlement-accept{display:flex;gap:var(--kd-space-3);align-items:flex-start;margin:0 0 var(--kd-space-4);padding:var(--kd-space-3);border:1px solid var(--kd-color-border);border-radius:var(--kd-radius-sm);background:var(--kd-color-surface-raised);color:var(--kd-color-foreground);font:var(--kd-type-body)}
.app-entitlement-accept input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--kd-color-primary)}
.app-entitlement-accept a{color:var(--kd-color-primary);text-decoration:underline}
.app-entitlement-accept a:focus-visible{outline:2px solid var(--kd-color-focus);outline-offset:2px}
.app-entitlement-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--kd-space-3)}
.app-entitlement-primary,.app-entitlement-secondary{width:100%}
.app-entitlement-actions button:disabled{cursor:wait;opacity:.55}
.app-history-only-banner{position:fixed;z-index:12000;left:300px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:var(--kd-space-4);padding:var(--kd-space-3) var(--kd-space-4);border:1px solid color-mix(in oklab,var(--kd-color-warning) 55%,transparent);border-radius:var(--kd-radius-sm);background:color-mix(in oklab,var(--kd-color-warning) 12%,var(--kd-color-surface));color:var(--kd-color-foreground);font:var(--kd-type-caption);box-shadow:var(--kd-shadow-panel)}
.app-history-only-banner[hidden]{display:none}
.app-history-only-banner button{min-height:var(--kd-button-height);padding:0 var(--kd-space-4);border:0;border-radius:var(--kd-button-radius);background:var(--kd-color-primary);color:var(--kd-button-primary-foreground);font:var(--kd-button-weight) var(--kd-button-font-size)/1 var(--kd-type-label-font,var(--kd-font-sans));white-space:nowrap}
body.kd-history-only #home-upload-slot,body.kd-history-only #cloud-panel{opacity:.45;pointer-events:none;filter:grayscale(.35)}
@media(max-width:620px){
  .app-entitlement-actions{grid-template-columns:1fr}
  .app-history-only-banner{left:10px;right:10px;bottom:78px;align-items:flex-start;flex-direction:column}
  .app-history-only-banner button{width:100%}
}
@media(prefers-reduced-motion:reduce){.app-auth-google{transition:none}}
.account-onboarding{z-index:19001}
#account-onboarding-title:focus{outline:none}
body.account-onboarding-pending{overflow:hidden}
.account-onboarding .app-auth-card{display:grid;gap:var(--kd-layout-text)}
.account-onboarding .app-auth-card p{min-height:0;margin:0}
.account-onboarding .app-auth-card form,.account-onboarding .app-auth-card label{display:grid;gap:var(--kd-layout-text);min-width:0;font:var(--kd-type-body)}
.account-onboarding .app-auth-card input:not([type=checkbox]){box-sizing:border-box;width:100%;min-width:0;min-height:var(--kd-input-height);padding:var(--kd-layout-text) var(--kd-layout-icon);background:var(--kd-input-surface);color:var(--kd-input-foreground);border:1px solid var(--kd-input-outline);border-radius:var(--kd-input-radius);font:var(--kd-type-body)}
.account-onboarding .app-auth-card input:focus-visible{outline:2px solid var(--kd-color-focus);outline-offset:2px}
.account-onboarding .account-onboarding-confirm{display:flex;align-items:flex-start;gap:var(--kd-layout-icon);font:var(--kd-type-caption)}
.account-onboarding-confirm input{accent-color:var(--kd-color-primary);flex-shrink:0}
.account-onboarding-actions{display:flex;flex-wrap:wrap;gap:var(--kd-layout-inline)}
.account-onboarding .kdui-button{white-space:normal;max-width:100%}
.account-onboarding [hidden]{display:none!important}
.kd-phone-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--kd-layout-inline);min-width:0}
.kd-phone-entry>*{min-width:0}
.kd-phone-entry select{box-sizing:border-box;width:100%;min-width:0;min-height:var(--kd-input-height);padding:var(--kd-layout-text) var(--kd-layout-icon);background:var(--kd-input-surface);color:var(--kd-input-foreground);border:1px solid var(--kd-input-outline);border-radius:var(--kd-input-radius);font:var(--kd-type-body)}
.kd-phone-entry select:focus-visible{outline:2px solid var(--kd-color-focus);outline-offset:2px}
