* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, sans-serif; line-height: 1.5; color: #1f1f1f; }

#login { max-width: 24rem; margin: 4rem auto; padding: 0 1rem; }
#login form { display: grid; gap: 1rem; }
#login label { display: grid; gap: .25rem; font-weight: 600; }
#login input { font: inherit; padding: .5rem .75rem; border: 1px solid #bbb; border-radius: .5rem; }
#login input[name=phone] { font-family: ui-monospace, monospace; letter-spacing: .1em; }
button { font: inherit; padding: .5rem 1rem; border: 0; border-radius: .5rem; background: #0b57d0; color: white; cursor: pointer; }
button:disabled { opacity: .5; cursor: progress; }
#status { min-height: 1.5em; color: #555; }
#status.error { color: #b3261e; }

#session { display: flex; flex-direction: column; height: 100%; }
#session[hidden] { display: none; }
#session header { display: flex; align-items: center; justify-content: space-between; padding: .25rem .75rem; background: #f3f3f3; border-bottom: 1px solid #ddd; font-size: .9em; }
#session header button { padding: .25rem .75rem; background: #555; }
#app { flex: 1; width: 100%; border: 0; }