.online-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .2rem;padding:.5rem .7rem;border-radius:14px;background:var(--paper,#fffdf7);border:1px solid var(--line,#e6ddc9);font-size:.85rem}.online-bar[hidden]{display:none}.online-bar b{letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.online-bar .online-dot{width:.6rem;height:.6rem;border-radius:50%;background:#c9c2b2;flex:none}.online-bar[data-status=online] .online-dot{background:#4f9d69}.online-bar[data-status=connecting] .online-dot,.online-bar[data-status=reconnecting] .online-dot{background:#d9a441}.online-bar[data-status=offline] .online-dot{background:#c4634f}.online-bar .online-bar-text{flex:1 1 8rem;min-width:0}.online-bar button{font-size:.8rem;padding:.3rem .6rem}.online-dialog{max-width:34rem;width:calc(100vw - 2rem)}.online-dialog h3{margin:1rem 0 .3rem;font-size:1rem}.online-dialog section{margin-bottom:.9rem}.online-dialog label{display:block;margin:.35rem 0}.online-dialog input,.online-dialog select,.online-dialog textarea{width:100%;box-sizing:border-box;font:inherit;padding:.45rem .55rem;border-radius:10px;border:1px solid var(--line,#e6ddc9);background:var(--paper,#fffdf7);color:inherit}.online-dialog textarea{min-height:5.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}.online-code{letter-spacing:.3em;text-transform:uppercase;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.15rem}.online-seats{display:grid;gap:.4rem;margin:.5rem 0}.online-seats button{display:flex;justify-content:space-between;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.55rem .7rem;min-height:44px}.online-seats button[aria-pressed=true]{outline:2px solid var(--accent,#4f9d69);outline-offset:1px}.online-seats small{opacity:.75}.online-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}.online-actions button{min-height:44px;flex:1 1 9rem}.online-note{font-size:.82rem;opacity:.8;margin:.3rem 0}.online-error{color:#a8412c;font-size:.85rem;min-height:1.2em}@media(max-width:420px){.online-dialog{padding:1rem .85rem}.online-actions button{flex:1 1 100%}}.online-dialog .online-actions{position:sticky;bottom:-1px;background:var(--paper,#fffdf7);padding:.65rem 0 .35rem;z-index:1;border-top:1px solid var(--line,#e6ddc9)}.online-dialog #online-start{min-height:48px;touch-action:manipulation}.online-dialog #online-start[aria-busy=true]{opacity:.85;cursor:progress}.online-bar{color:var(--ink,#35483e)}@media(prefers-color-scheme:dark){.online-bar{background:#22332c;color:#edf2e9;border-color:#65766a}.online-bar button{background:#32483c;color:#f0f4eb;border-color:#819886}.online-bar button:hover{background:#405c4b}.online-bar[data-status=online] .online-dot{background:#93d5a4}.online-dialog input,.online-dialog select{background:#22332c;color:#edf2e9;border-color:#65766a}.online-dialog .online-error{color:#ffb8a5}}.online-room-code{display:grid;gap:.25rem;text-align:center;padding:.8rem;margin:.65rem 0;border:2px solid var(--accent,#4f9d69);border-radius:14px;background:var(--paper,#fffdf7)}.online-room-code>span{font-size:.85rem;font-weight:700}.online-room-code>b{font:800 clamp(1.6rem,8vw,2.2rem)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;-webkit-user-select:all;user-select:all}.online-room-code>small{font-size:.75rem}.online-seating-note{padding:.7rem .8rem;border-radius:12px;border:1px solid var(--line,#e6ddc9);font-size:.9rem;line-height:1.5;margin:.7rem 0}.online-seating-note[data-choose=true]{border:2px solid var(--accent,#4f9d69);font-weight:700}.online-bar .online-bar-code{flex:none;letter-spacing:.08em}.online-bar[data-busy=true] .online-dot,#online-status[data-busy=true]:before{display:inline-block;width:.75rem;height:.75rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;background:transparent;animation:online-wait-spin 1s linear infinite;flex:none}#online-status[data-busy=true]:before{content:"";margin-right:.45rem;vertical-align:-.12rem}@keyframes online-wait-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.online-bar[data-busy=true] .online-dot,#online-status[data-busy=true]:before{animation:none}}@media(prefers-color-scheme:dark){.online-room-code,.online-seating-note{background:#22332c;color:#edf2e9;border-color:#93d5a4}.online-dialog .online-actions{background:#22332c}}