/* layout */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
#tabs .brand{display:none}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--muted);font-weight:800;font-size:.68rem;min-height:52px;border-radius:14px;position:relative}
#tabs button.on{color:var(--acc)}
#tabs .ic{width:25px;height:25px}
#tabs button.dot::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
main{padding:0 16px calc(100px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 0 12px}
.top h1{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.who{display:flex;gap:6px;flex:none}
.who-b{display:flex;align-items:center;gap:6px;border:2px solid transparent;background:var(--surface);border-radius:99px;padding:3px 10px 3px 3px;font-weight:800;font-size:.8rem;box-shadow:var(--shadow);color:var(--muted)}
.who-b span:not(.av){display:none}
.who-b.on{border-color:var(--c);color:var(--ink)}.who-b.on span{display:inline}
#fab{position:fixed;right:calc(max(0px,(100vw - 640px)/2) + 16px);bottom:calc(84px + env(safe-area-inset-bottom));z-index:15;width:58px;height:58px;border-radius:50%;border:0;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;box-shadow:0 4px 0 var(--acc-shade),0 10px 20px rgba(0,0,0,.2)}
#fab .ic{width:28px;height:28px;stroke-width:2.6}