:root{--brand: #0f6cbd;--brand-hover: #115ea3;--brand-pressed: #0c3b5e;--brand-tint: #ebf3fc;--brand-tint-2: #cfe4fa;--bg-canvas: #ffffff;--bg-surface: #ffffff;--bg-surface-2: #f5f5f5;--bg-surface-3: #ebebeb;--bg-app: #faf9f8;--fg-1: #242424;--fg-2: #424242;--fg-3: #616161;--fg-4: #707070;--fg-disabled: #bdbdbd;--stroke-1: #d1d1d1;--stroke-2: #e0e0e0;--stroke-accessible: #616161;--danger: #c50f1f;--success: #0e700e;--radius-s: 2px;--radius-m: 4px;--radius-l: 8px;--radius-xl: 12px;--radius-pill: 999px;--shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);--shadow-4: 0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);--shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);--shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);--shadow-28: 0 14px 28px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .2);--shadow-64: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .2);--font: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;--toolbar-h: 52px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font);color:var(--fg-1);background:var(--bg-app);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:none}button{font-family:inherit;font-size:14px;color:inherit;background:none;border:none;cursor:pointer}input,textarea{font-family:inherit}.board{position:fixed;inset:0;background:var(--bg-canvas)}.board canvas{position:absolute;inset:0;display:block;touch-action:none}.board canvas.overlay{pointer-events:none}.hit-layer{position:absolute;inset:0;touch-action:none}.surface{background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-16);border:1px solid rgba(0,0,0,.06)}.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:40px;height:40px;border-radius:var(--radius-m);color:var(--fg-2);position:relative;transition:background .08s ease,color .08s ease}.tbtn:hover{background:var(--bg-surface-2);color:var(--fg-1)}.tbtn:active{background:var(--bg-surface-3)}.tbtn.is-active{background:var(--brand-tint);color:var(--brand)}.tbtn.is-active:after{content:"";position:absolute;bottom:3px;left:50%;transform:translate(-50%);width:14px;height:2px;border-radius:1px;background:var(--brand)}.tbtn[disabled]{color:var(--fg-disabled);cursor:default;background:none}.tbtn.wide{width:auto;padding:0 12px}.topbar{position:fixed;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:30;gap:12px}.topbar>*{pointer-events:auto}.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;padding:6px;min-height:48px}.board-title{font-size:14px;font-weight:600;color:var(--fg-1);border:1px solid transparent;border-radius:var(--radius-m);padding:6px 10px;max-width:42vw;min-width:90px;background:transparent;outline:none;text-overflow:ellipsis}.board-title:hover{background:var(--bg-surface-2)}.board-title:focus{border-color:var(--brand);background:#fff}.presence{display:flex;align-items:center;padding-left:4px}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:600;border:2px solid #fff;margin-left:-8px;cursor:pointer;transition:transform .1s ease}.avatar:first-child{margin-left:0}.avatar:hover{transform:translateY(-2px)}.avatar.is-following{box-shadow:0 0 0 2px var(--brand)}.btn-primary{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-m);background:var(--brand);color:#fff;font-weight:600;font-size:14px}.btn-primary:hover{background:var(--brand-hover)}.btn-secondary{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-m);background:var(--bg-surface);border:1px solid var(--stroke-1);font-weight:600;font-size:14px;color:var(--fg-1)}.btn-secondary:hover{background:var(--bg-surface-2)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);margin:0 4px;flex:none}.status-dot.is-off{background:#d13438}.status-dot.is-wait{background:#eaa300}.toolbar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;height:var(--toolbar-h);padding:0 8px;z-index:40;max-width:calc(100vw - 24px)}.toolbar .sep{width:1px;height:24px;background:var(--stroke-2);margin:0 6px;flex:none}.tool-swatch{position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:16px;height:3px;border-radius:2px;border:.5px solid rgba(0,0,0,.15)}.tbtn.is-active .tool-swatch{bottom:3px}.tbtn.is-active.has-swatch:after{display:none}.flyout{position:fixed;z-index:60;padding:12px;min-width:200px;animation:pop .12s ease-out}@keyframes pop{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.flyout h4{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--fg-3);text-transform:none}.flyout+.flyout{margin-top:8px}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.swatches.notes{grid-template-columns:repeat(4,1fr)}.swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.14);position:relative;transition:transform .08s ease}.swatch:hover{transform:scale(1.12)}.swatch.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand)}.swatch.is-none{background:linear-gradient(45deg,transparent 44%,#d13438 44%,#d13438 56%,transparent 56%),#fff}.sizes{display:flex;align-items:center;gap:6px;margin-top:12px}.size-btn{width:34px;height:34px;border-radius:var(--radius-m);display:grid;place-items:center}.size-btn:hover{background:var(--bg-surface-2)}.size-btn.is-selected{background:var(--brand-tint)}.size-dot{background:var(--fg-1);border-radius:50%}.shape-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.shape-btn{width:38px;height:38px;border-radius:var(--radius-m);display:grid;place-items:center;color:var(--fg-2)}.shape-btn:hover{background:var(--bg-surface-2)}.shape-btn.is-selected{background:var(--brand-tint);color:var(--brand)}.menu-list{display:flex;flex-direction:column;min-width:240px;padding:4px}.menu-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--radius-m);font-size:14px;color:var(--fg-1);text-align:left;width:100%}.menu-item:hover{background:var(--bg-surface-2)}.menu-item .shortcut{margin-left:auto;color:var(--fg-4);font-size:12px}.menu-item.is-danger{color:var(--danger)}.menu-sep{height:1px;background:var(--stroke-2);margin:4px 6px}.switch{margin-left:auto;width:40px;height:20px;border-radius:999px;background:var(--bg-surface-3);border:1px solid var(--stroke-accessible);position:relative;flex:none;transition:background .1s ease}.switch:after{content:"";position:absolute;top:50%;left:3px;width:12px;height:12px;border-radius:50%;background:var(--fg-2);transform:translateY(-50%);transition:transform .1s ease,background .1s ease}.switch.is-on{background:var(--brand);border-color:var(--brand)}.switch.is-on:after{background:#fff;transform:translate(20px,-50%)}.zoombar{position:fixed;right:16px;bottom:16px;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px;z-index:40}.zoom-level{min-width:56px;text-align:center;font-size:13px;font-weight:600;color:var(--fg-2);height:32px;border-radius:var(--radius-m);padding:0 6px}.zoom-level:hover{background:var(--bg-surface-2)}.undo-bar{position:fixed;left:16px;bottom:16px;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px;z-index:40}.selection-toolbar{position:fixed;z-index:45;display:flex;align-items:center;gap:2px;height:44px;padding:0 6px}.mini-swatch{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.text-editor{position:absolute;z-index:50;margin:0;padding:0;border:none;outline:none;resize:none;overflow:hidden;background:transparent;color:var(--fg-1);line-height:1.25;text-align:center;caret-color:var(--brand);transform-origin:0 0;touch-action:auto}.scrim{position:fixed;inset:0;background:#0006;z-index:100;display:grid;place-items:center;padding:20px;animation:fade .12s ease-out}@keyframes fade{0%{opacity:0}to{opacity:1}}.dialog{background:var(--bg-surface);border-radius:var(--radius-l);box-shadow:var(--shadow-64);width:min(520px,100%);max-height:86vh;overflow:auto;padding:24px}.dialog h2{margin:0 0 4px;font-size:20px;font-weight:600}.dialog p.sub{margin:0 0 18px;color:var(--fg-3);font-size:14px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:13px;font-weight:600;color:var(--fg-2)}.input{height:36px;border-radius:var(--radius-m);border:1px solid var(--stroke-accessible);border-bottom-width:2px;border-bottom-color:var(--fg-4);padding:0 10px;font-size:14px;background:#fff;color:var(--fg-1);width:100%;outline:none}.input:focus{border-bottom-color:var(--brand)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.copy-row{display:flex;gap:8px;align-items:center}.copy-row .input{font-size:13px;color:var(--fg-3)}.role-pills{display:flex;gap:6px;margin:10px 0 4px}.pill{height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--stroke-1);font-size:13px;font-weight:600;color:var(--fg-2);background:#fff}.pill.is-active{background:var(--brand-tint);border-color:var(--brand);color:var(--brand)}.gallery{position:fixed;inset:0;overflow:auto;background:var(--bg-app);z-index:10}.gallery-inner{max-width:1240px;margin:0 auto;padding:32px 28px 80px}.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}.brand-mark{display:flex;align-items:center;gap:12px}.brand-mark .logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#0f6cbd,#2aa3d8);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-4)}.brand-mark h1{margin:0;font-size:20px;font-weight:600}.brand-mark span{display:block;font-size:12px;color:var(--fg-3);font-weight:400}.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:18px}.board-card{background:#fff;border:1px solid var(--stroke-2);border-radius:var(--radius-l);overflow:hidden;cursor:pointer;transition:box-shadow .12s ease,transform .12s ease;text-align:left;padding:0;display:block;position:relative}.board-card:hover{box-shadow:var(--shadow-8);transform:translateY(-2px)}.board-card .thumb{height:132px;background:#fff center/cover no-repeat;border-bottom:1px solid var(--stroke-2);display:grid;place-items:center;color:var(--fg-disabled)}.board-card .meta{padding:12px 14px 14px}.board-card .meta strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-card .meta small{color:var(--fg-3);font-size:12px}.board-card .card-menu{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:var(--radius-m);background:#ffffffeb;display:grid;place-items:center;opacity:0;color:var(--fg-2);box-shadow:var(--shadow-2)}.board-card:hover .card-menu{opacity:1}.new-board{border:1px dashed var(--brand);background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;min-height:190px;gap:8px;font-weight:600;font-size:14px;border-radius:var(--radius-l);cursor:pointer}.new-board:hover{background:var(--brand-tint-2)}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.template-card{border:1px solid var(--stroke-2);border-radius:var(--radius-l);padding:10px;background:#fff;text-align:left;cursor:pointer}.template-card:hover{border-color:var(--brand);background:var(--brand-tint)}.template-card .name{font-size:13px;font-weight:600;margin-top:8px}.template-card .desc{font-size:11px;color:var(--fg-3)}.toast-host{position:fixed;bottom:84px;left:50%;transform:translate(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{background:#323130;color:#fff;font-size:13px;padding:10px 16px;border-radius:var(--radius-m);box-shadow:var(--shadow-16);animation:pop .14s ease-out;max-width:80vw}.emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.emoji-btn{width:42px;height:42px;font-size:24px;border-radius:var(--radius-m);display:grid;place-items:center;line-height:1}.emoji-btn:hover{background:var(--bg-surface-2)}.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bg-card{height:56px;border-radius:var(--radius-m);border:2px solid var(--stroke-1);position:relative;overflow:hidden}.bg-card.is-selected{border-color:var(--brand)}.bg-card span{position:absolute;bottom:3px;left:5px;font-size:10px;color:var(--fg-3);background:#ffffffd9;padding:0 4px;border-radius:3px}.shortcut-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:13px}.shortcut-list div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--stroke-2)}.shortcut-list kbd{font-family:var(--font);font-size:11px;background:var(--bg-surface-2);border:1px solid var(--stroke-1);border-radius:3px;padding:1px 5px;color:var(--fg-2);white-space:nowrap}.login-card{width:min(400px,100%)}.hidden{display:none!important}body.canvas-dark .board-title{color:var(--fg-1)}@media(max-width:1024px){.toolbar{left:8px;right:8px;transform:none;max-width:none;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.toolbar::-webkit-scrollbar{display:none}.undo-bar,.zoombar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}.toast-host{bottom:calc(140px + env(safe-area-inset-bottom,0px))}}@media(max-width:720px){.toolbar{gap:0;padding:0 4px}.tbtn{width:40px}.topbar-left .board-title{max-width:34vw}.zoombar .zoom-level,.btn-primary span{display:none}.btn-primary span:first-child{display:flex}}@supports (padding: env(safe-area-inset-bottom)){.toolbar,.undo-bar,.zoombar{margin-bottom:0}}