:root{--bg: #f4f5f7;--surface: #ffffff;--border: #dfe1e6;--text: #1f2328;--muted: #656d76;--accent: #0b66e4;--accent-text: #ffffff;--danger: #c9372c;--ok: #1f845a;--warn: #b65c02;--radius: 8px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}a{color:var(--accent)}h1,h2{margin:0}button,.button{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}button:hover,.button:hover{border-color:#b3b9c4}button:disabled{opacity:.6;cursor:default}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}button.danger{color:var(--danger)}button.active{background:#e9f2ff;border-color:var(--accent);color:var(--accent)}.button.ghost{border-color:transparent;background:transparent}input{font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.card.narrow{max-width:380px;display:grid;gap:12px}.muted{color:var(--muted)}.small{font-size:13px}.error{color:var(--danger);background:#ffeceb;border-radius:6px;padding:8px 10px;font-size:14px}.center{min-height:100%;display:grid;place-items:center;padding:16px}.brand{font-weight:700;font-size:18px;letter-spacing:-.01em}.auth-wrap{min-height:100%;display:grid;place-items:center;padding:16px}.auth-card{width:100%;max-width:360px;display:grid;gap:14px;padding:28px}.auth-card h1{font-size:22px}.auth-card label{display:grid;gap:6px;font-size:14px;font-weight:500}.auth-card button.primary{justify-content:center;padding:10px}.auth-card p{margin:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}.page{min-height:100%}.content{max-width:1040px;margin:0 auto;padding:24px 16px 48px;display:grid;gap:32px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-head h2{font-size:18px}.empty{padding:24px;border:1px dashed var(--border);border-radius:var(--radius);text-align:center}.draft-grid{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.draft-card{display:grid;gap:6px}.draft-title{font-weight:600;font-size:16px;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draft-title:hover{color:var(--accent)}.draft-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.editor{height:100%;display:flex;flex-direction:column}.title{font-size:16px;font-weight:600}.title-input{font-weight:600;border-color:transparent;background:transparent;min-width:0;width:260px;max-width:50vw}.title-input:hover,.title-input:focus{border-color:var(--border);background:var(--surface)}.presence{display:flex}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;border:2px solid var(--surface);margin-left:-6px}.avatar:first-child{margin-left:0}.pill{font-size:12px;padding:4px 10px;border-radius:999px;background:#f1f2f4;color:var(--muted);white-space:nowrap}.pill.ok{color:var(--ok);background:#dcfff1}.pill.warn{color:var(--warn);background:#fff3eb}.toolbar{display:flex;gap:16px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}.tool-group{display:flex;gap:6px;align-items:center}.swatch{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid var(--border)}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.toolbar input[type=color]{width:32px;height:28px;padding:2px}.size{width:34px;height:30px;justify-content:center;padding:0}.size span{display:block;border-radius:50%;background:currentColor}.canvas-wrap{position:relative;flex:1;min-height:0;padding:16px;display:grid;place-items:center;overflow:hidden}.board{background:#fff;border-radius:4px;box-shadow:0 1px 3px #091e4226,0 0 0 1px #091e420f;touch-action:none;cursor:crosshair}.board.eraser{cursor:cell}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#f4f5f799;color:var(--muted);font-weight:500}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1f2328;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px}@media (max-width: 640px){.toolbar{gap:10px;padding:8px}.canvas-wrap{padding:8px}}