body{font-family:-apple-system,system-ui,sans-serif;background:#333;margin:0;color:#fff}
#login{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:env(safe-area-inset-top) 0 0}
h1{font-size:24px;font-weight:800;margin:0;color:#fff;text-align:center;text-transform:uppercase;padding:20px 0}
form{display:flex;flex-direction:column;gap:0;width:100%}
input{font-size:24px;padding:22px;font-family:Inter,-apple-system,system-ui,sans-serif;font-weight:800;background:#3c3c3c;color:#fff;border:none;border-bottom:1px solid #555;border-radius:0;margin:0;outline:none;text-align:center;text-transform:uppercase}input[type=password]{text-transform:none}
input::placeholder{color:#9a8f73;opacity:1;text-transform:uppercase}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #3c3c3c inset;-webkit-text-fill-color:#fff}
form button{cursor:pointer;background:#874314;color:#fff;border:none;font-family:Inter,-apple-system,system-ui,sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;padding:22px;border-radius:0;outline:none}
#app{display:none}
html.authed #login{display:none}
html.authed #app{display:block}
.menu{display:flex;flex-direction:column;min-height:100dvh;
padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.menu > *,#contacts button{width:100%;border:none;border-radius:0;cursor:pointer;font-family:Inter,-apple-system,system-ui,sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#who{background:#333;color:#fff;font-weight:800;text-align:center;padding:20px 0}
.addrow{position:relative;display:flex;width:100%}
#add{flex:1;min-width:0;background:#874314;color:#fff;font-weight:800;padding:22px 0;text-align:center;border:none;border-radius:0;caret-color:transparent;-webkit-appearance:none;appearance:none;outline:none}
#addbtn{position:absolute;top:0;right:0;bottom:0;background:none;border:none;color:#fff;font-size:24px;font-weight:800;padding:0 18px;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none;outline:none;animation:plusflip .65s cubic-bezier(.2,.7,.3,1)}
#addbtn.out{animation:plusflipback .65s cubic-bezier(.2,.7,.3,1)}
@keyframes plusflip{from{transform:translateX(-42vw) rotate(0deg);opacity:0}55%{opacity:1}to{transform:translateX(0) rotate(720deg);opacity:1}}
@keyframes plusflipback{from{transform:translateX(0) rotate(0deg);opacity:1}to{transform:translateX(-42vw) rotate(-720deg);opacity:1}}
#add::placeholder{color:#fff;opacity:1}
#contacts{display:flex;flex-direction:column}
#contacts button{background:#874314;color:#fff;font-weight:800;padding:22px 0}
#push{background:none;color:#9a8f73;padding:20px 0}
#out{background:#333;color:#cfc9bd;font-weight:800;padding:20px 0}
.menu button:active{filter:brightness(.85)}
.menu button:disabled{background:none;color:#c9bfa3}
#filler{flex:1}