:root{--vvh: 100dvh;--vvt: 0px;--ink: #ecebf0;--paper: #101014;--panel: rgba(28, 28, 34, .86);--panel-border: rgba(236, 235, 240, .1);--accent: #5f96e8;--danger: #ef6a60;--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px)}body.mode-white{--ink: #1c1b22;--paper: #fbfaf7;--panel: rgba(255, 255, 255, .88);--panel-border: rgba(28, 27, 34, .12);--accent: #3873c9;--danger: #d6453d}*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#app{position:fixed;inset:0;height:var(--vvh, 100dvh);transform:translateY(var(--vvt))}.board-host{position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}.board-layer{position:absolute;inset:0;display:block}.text-editor{position:absolute;min-width:2ch;max-width:80vw;outline:1.5px dashed var(--accent);outline-offset:3px;background:transparent;z-index:30;padding:0;caret-color:var(--accent)}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) 8px calc(var(--sal) + 10px);z-index:20;pointer-events:none}.topbar>*{pointer-events:auto}.topbar.offline .board-name:after{content:" · reconnecting…";opacity:.6;font-weight:400}.board-name{border:1px solid var(--panel-border);background:var(--panel);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;padding:7px 12px;font-size:14px;font-weight:600;cursor:pointer;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spacer{flex:1}.chip{border:1px solid var(--panel-border);background:var(--panel);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;padding:7px 10px;font-size:13px;cursor:pointer;white-space:nowrap}.chip.active{border-color:var(--accent);color:var(--accent)}.chip.danger{color:var(--danger)}.roster{display:flex;gap:5px;overflow:hidden}.peer-chip{border:1px solid var(--panel-border);background:var(--panel);border-radius:999px;padding:5px 10px;font-size:12px;white-space:nowrap;opacity:.55}.peer-chip.direct{opacity:1}.peer-chip.relayed{opacity:.85}.toolbar{position:absolute;left:50%;transform:translate(-50%);bottom:calc(var(--sab) + 10px);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:20;max-width:calc(100vw - 16px)}.tool-rail,.style-rail{display:flex;align-items:center;gap:2px;border:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;padding:5px;max-width:100%;overflow-x:auto}.tool-btn{width:42px;height:42px;border:none;background:transparent;color:var(--ink);font-size:19px;border-radius:10px;cursor:pointer;flex:0 0 auto}.tool-btn.active{background:var(--accent);color:#fff}.style-rail{gap:8px;padding:5px 10px}.color-row,.width-row{display:flex;gap:5px;align-items:center}.color-btn{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;flex:0 0 auto}.color-btn.active{border-color:var(--accent);transform:scale(1.15)}.color-btn[data-c="0"]{background:var(--ink)}.color-btn[data-c="1"]{background:#ef6a60}.color-btn[data-c="2"]{background:#f0a44e}.color-btn[data-c="3"]{background:#59c274}.color-btn[data-c="4"]{background:#5f96e8}.color-btn[data-c="5"]{background:#ab7ce4}.color-btn[data-c="6"]{background:#ee74ab}.color-btn[data-c="7"]{background:#4fc3d0}body.mode-white .color-btn[data-c="1"]{background:#d6453d}body.mode-white .color-btn[data-c="2"]{background:#e08b2d}body.mode-white .color-btn[data-c="3"]{background:#3d9950}body.mode-white .color-btn[data-c="4"]{background:#3873c9}body.mode-white .color-btn[data-c="5"]{background:#8a51c7}body.mode-white .color-btn[data-c="6"]{background:#d64d8c}body.mode-white .color-btn[data-c="7"]{background:#2d9da8}.width-btn{width:30px;height:26px;border:1px solid transparent;background:transparent;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center}.width-btn span{display:block;width:16px;border-radius:2px;background:var(--ink)}.width-btn.active{border-color:var(--accent)}.fill-chip{font-size:12px;padding:5px 9px}.sel-caption{position:absolute;left:50%;transform:translate(-50%);bottom:calc(var(--sab) + 118px);display:flex;align-items:center;gap:8px;border:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;padding:6px 10px;font-size:13px;z-index:21}.export-menu{position:fixed;display:flex;flex-direction:column;border:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:12px;overflow:hidden;z-index:40}.menu-item{border:none;background:transparent;color:var(--ink);padding:11px 16px;font-size:13px;text-align:left;cursor:pointer}.menu-item:hover{background:#7f7f7f26}.toasts{position:absolute;top:calc(var(--sat) + 58px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;z-index:50;pointer-events:none;width:max-content;max-width:92vw}.toast{background:var(--panel);border:1px solid var(--panel-border);color:var(--ink);border-radius:10px;padding:9px 14px;font-size:13px;opacity:0;transition:opacity .3s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.toast.show{opacity:1}.overlay{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:100;padding:calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px);overflow-y:auto}.modal{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;text-align:center}.modal h2{font-size:26px;letter-spacing:.5px}.modal p{font-size:13px;opacity:.7;line-height:1.5}.modal input{border:1px solid var(--panel-border);background:transparent;color:var(--ink);border-radius:10px;padding:12px 14px;font-size:16px;flex:1;min-width:0}.primary{border:none;background:var(--accent);color:#fff;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}.primary.ghosty{background:transparent;border:1px solid var(--panel-border);color:var(--ink)}.new-room-form{display:flex;gap:8px}.room-list{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow-y:auto}.room-row{display:flex;gap:6px;align-items:stretch}.room-open{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--panel-border);background:transparent;color:var(--ink);border-radius:10px;padding:11px 14px;font-size:14px;cursor:pointer;min-width:0}.room-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-ago{font-size:11px;opacity:.5;flex:0 0 auto}.icon-btn{border:1px solid var(--panel-border);background:transparent;color:var(--ink);border-radius:10px;cursor:pointer;padding:0 12px;font-size:14px}.icon-btn.forget.armed{border-color:var(--danger);color:var(--danger);font-size:11px}.rename-in{flex:1;border:1px solid var(--accent);background:transparent;color:var(--ink);border-radius:10px;padding:11px 14px;font-size:16px}.hint{font-size:12px;opacity:.55;line-height:1.5}.hint.ver{opacity:.35}.name-box{gap:10px}.access-slot{display:flex}.req-row{display:flex;align-items:center;gap:10px;border:1px solid var(--panel-border);border-radius:10px;padding:10px 12px;text-align:left}.req-label{font-weight:600;font-size:14px;flex:0 0 auto}.req-msg{flex:1;font-size:13px;opacity:.75;overflow:hidden;text-overflow:ellipsis;min-width:0}.req-btns{display:flex;gap:6px;flex:0 0 auto}.req-btns .primary,.req-row .primary{padding:8px 12px;font-size:13px}.primary.danger{color:var(--danger);border-color:var(--danger)}.access-sheet .modal{gap:10px}.lockout .modal input{width:100%}.update-banner{position:fixed;top:calc(var(--sat) + 10px);left:50%;transform:translate(-50%);z-index:200;border:none;background:var(--accent);color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 24px #00000059}