:root{--bg: #1a2332;--bg-elev: #243044;--ink: #f2efe8;--muted: #9aa7b8;--accent: #3d9b8f;--accent-2: #e8a87c;--danger: #e06c75;--grid: rgba(255, 255, 255, .04);--shadow: 0 12px 40px rgba(0, 0, 0, .35);font-family:DM Sans,system-ui,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden}button,input,select,textarea{font:inherit}.screen{height:100%;display:grid;place-items:center;background:radial-gradient(ellipse at 20% 10%,rgba(61,155,143,.25),transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(232,168,124,.18),transparent 45%),var(--bg)}.card{width:min(420px,calc(100vw - 32px));background:var(--bg-elev);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.card h1{margin:0 0 8px;font-size:1.6rem;letter-spacing:-.02em}.card p{margin:0 0 20px;color:var(--muted);line-height:1.45}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:10px;padding:10px 14px;background:var(--accent);color:#06221f;font-weight:700;cursor:pointer}.btn.secondary{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.15)}.btn.danger{background:var(--danger);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.error{color:#ffb4b8;background:#e06c7526;border-radius:10px;padding:10px 12px;margin-bottom:16px;font-size:.92rem}.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-size:.85rem;color:var(--muted)}.field input,.field select{border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#00000040;color:var(--ink);padding:10px 12px}.pictogram-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.pictogram-grid button{height:44px;border-radius:10px;border:1px solid transparent;background:#ffffff0d;font-size:1.35rem;cursor:pointer}.pictogram-grid button.selected{border-color:var(--accent);background:#3d9b8f33}.board-shell{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr}.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#1a2332eb;border-bottom:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20}.topbar .brand{font-weight:700;letter-spacing:-.02em;margin-right:8px}.topbar .board-id{font-family:IBM Plex Mono,monospace;font-size:.82rem;color:var(--muted);padding:4px 8px;border-radius:8px;background:#ffffff0d}.spacer{flex:1}.presence-strip{display:flex;gap:6px;align-items:center;max-width:40vw;overflow-x:auto}.presence-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:#ffffff12;font-size:.78rem;white-space:nowrap}.canvas-viewport{position:relative;overflow:hidden;cursor:grab;background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--bg);background-size:32px 32px;touch-action:none}.canvas-viewport.panning{cursor:grabbing}.canvas-world{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0;will-change:transform}.board-object{position:absolute;-webkit-user-select:none;user-select:none;touch-action:none}.board-object.selected{outline:2px solid var(--accent);outline-offset:2px;z-index:9999!important}.postit{border-radius:4px;box-shadow:0 8px 24px #00000040;display:flex;flex-direction:column;overflow:hidden;min-width:120px;min-height:120px}.postit-body{flex:1;padding:10px 12px;overflow:hidden;outline:none;word-break:break-word;line-height:1.25}.postit-drag{height:14px;cursor:grab;background:#00000014;flex-shrink:0}.postit-body ul{margin:0;padding-left:1.1em}.image-obj img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;border-radius:8px;background:#0003}.board-link-obj{border-radius:12px;background:linear-gradient(145deg,#2f4058,#1e2a3c);border:1px solid rgba(255,255,255,.12);padding:14px;color:var(--ink);display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:var(--shadow)}.board-link-obj .label{font-weight:700}.board-link-obj .target{font-family:IBM Plex Mono,monospace;font-size:.8rem;color:var(--accent-2)}.resize-handle{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:3px;background:#00000059;cursor:nwse-resize}.cursor-remote{position:absolute;pointer-events:none;z-index:100000;transform:translate(-2px,-2px);transition:left 40ms linear,top 40ms linear}.cursor-remote .badge{display:inline-flex;align-items:center;gap:4px;margin-top:12px;margin-left:8px;padding:2px 6px;border-radius:6px;background:#000000a6;font-size:.72rem;white-space:nowrap}.format-bar{position:absolute;left:50%;bottom:18px;transform:translate(-50%);display:none;gap:6px;align-items:center;padding:8px;border-radius:12px;background:#243044f2;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow);z-index:30}.format-bar.visible{display:flex;flex-wrap:wrap;max-width:calc(100vw - 24px);justify-content:center}.format-bar button,.format-bar select,.format-bar input[type=color]{height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:var(--ink);padding:0 8px;cursor:pointer}.format-bar input[type=color]{width:36px;padding:2px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:50}.hidden{display:none!important}.status-dot{width:8px;height:8px;border-radius:50%;background:#666}.status-dot.online{background:#5bd6a2}.status-dot.offline{background:var(--danger)}
