*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--canvas);color:var(--text);font-family:var(--font-sans)}
body{min-height:100dvh}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}

[data-ui="app"]{min-height:100dvh}
[data-ui="shell"]{min-height:100dvh}
[data-ui="page"]{width:min(calc(100% - 28px),var(--page-max));margin:0 auto;padding:0 0 calc(var(--dock-height) + 34px + env(safe-area-inset-bottom))}
[data-ui="view"]{display:none}
[data-ui="view"][data-active="true"]{display:block}

[data-ui="topbar"]{position:sticky;top:0;z-index:50;width:min(calc(100% - 28px),var(--page-max));margin:0 auto}
[data-ui="dock"]{position:fixed;left:0;right:0;bottom:0;z-index:80;padding-bottom:env(safe-area-inset-bottom)}
[data-ui="dock-inner"]{width:min(100%,620px);margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}

[data-ui="stack"]{display:grid}
[data-ui="row"]{display:flex}
[data-ui="divider"]{height:1px;background:var(--border)}
[data-ui="progress"]{overflow:hidden}
[data-ui="progress"]>i{display:block;height:100%}

[data-ui="auth-screen"]{min-height:100dvh;display:grid;place-items:center;padding:28px}
[data-ui="auth-card"]{width:min(100%,420px)}
[data-ui="auth-form"]{display:grid}
[data-ui="auth-2fa"]{display:grid}

@media(min-width:900px){
  :root{--page-max:900px}
}