*{box-sizing:border-box}body{color:#1f2328;background:#f4f5f7;margin:0;font-family:system-ui,-apple-system,sans-serif}h1{margin:0;font-size:1.25rem}h2{margin:0;font-size:1rem}button,input,textarea{font:inherit}button{cursor:pointer;background:#fff;border:1px solid #d0d4da;border-radius:8px;padding:6px 12px}button:hover{background:#f0f2f5}button.primary{color:#fff;background:#3b6ef6;border-color:#3b6ef6}button.primary:hover{background:#2f5bd6}button.link{color:#3b6ef6;background:0 0;border:none;padding:0}button.icon{color:#8a9099;background:0 0;border:none;padding:4px 8px}input{border:1px solid #d0d4da;border-radius:8px;width:100%;padding:8px 10px}label{flex-direction:column;gap:4px;font-size:.9rem;display:flex}.muted{color:#6b7280;font-size:.85rem}.error{color:#b42318;font-size:.9rem}.success{color:#067647;font-size:.9rem}.centered{place-items:center;min-height:100vh;padding:16px;display:grid}.card{background:#fff;border-radius:12px;padding:28px;box-shadow:0 4px 24px #00000014}.auth{flex-direction:column;gap:14px;width:100%;max-width:360px;display:flex}.auth p{margin:0}.links{justify-content:space-between;display:flex}.topbar{background:#fff;border-bottom:1px solid #e3e6ea;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.topbar-left,.topbar-right{align-items:center;gap:16px;display:flex}.back{color:#3b6ef6;font-size:.9rem;text-decoration:none}.boards{max-width:720px;margin:0 auto;padding:24px 16px}.new-board{gap:8px;margin-bottom:20px;display:flex}.board-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.board-list li{background:#fff;border:1px solid #e3e6ea;border-radius:10px;align-items:center;display:flex}.board-list a{color:inherit;flex-direction:column;flex:1;gap:2px;padding:14px 16px;text-decoration:none;display:flex}.board-page{flex-direction:column;height:100vh;display:flex}.banner{cursor:pointer;background:#fef3f2;margin:0;padding:8px 20px}.board-body{flex:1;min-height:0;display:flex}.palette{background:#fff;border-right:1px solid #e3e6ea;flex-direction:column;flex-shrink:0;align-items:center;gap:12px;width:120px;padding:16px;display:flex;overflow-y:auto}.palette p{text-align:center;margin:0}.palette-note{cursor:grab;touch-action:none;border-radius:2px;flex-shrink:0;width:64px;height:64px;transition:transform .1s;box-shadow:0 2px 6px #00000026}.palette-note:hover{transform:scale(1.06)rotate(-2deg)}.canvas-scroll{flex:1;overflow:auto}.canvas{background-color:#fbfbfc;background-image:radial-gradient(#d6d9de 1px,#0000 1px);background-size:24px 24px;position:relative}.note{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:2px;flex-direction:column;display:flex;position:absolute;box-shadow:0 2px 8px #00000026}.note.dragging{cursor:grabbing;z-index:1000;box-shadow:0 10px 24px #00000038}.note.editing{z-index:999;cursor:auto}.note.ghost{pointer-events:none;opacity:.85;z-index:2000;position:fixed;transform:rotate(-3deg)}.note-toolbar{opacity:0;align-items:center;gap:4px;padding:6px;transition:opacity .15s;display:flex}.note:hover .note-toolbar,.note.editing .note-toolbar{opacity:1}.swatch{border:1px solid #0003;border-radius:50%;width:14px;height:14px;padding:0}.swatch.selected{outline-offset:1px;outline:2px solid #1f2328}.note-delete{color:#00000080;background:0 0;border:none;margin-left:auto;padding:0 4px}.note-delete:hover{color:#b42318;background:0 0}.note-content,.note textarea{white-space:pre-wrap;word-break:break-word;flex:1;padding:0 12px;font-size:.95rem;line-height:1.35;overflow:hidden}.note textarea{resize:none;-webkit-user-select:text;user-select:text;background:0 0;border:none;outline:none}.placeholder{color:#00000059;font-style:italic}.note-author{color:#00000073;text-align:right;padding:4px 10px 8px;font-size:.72rem}.members{background:#fff;border-left:1px solid #e3e6ea;flex-direction:column;flex-shrink:0;gap:16px;width:280px;padding:16px;display:flex;overflow-y:auto}.members-header{justify-content:space-between;align-items:center;display:flex}.members ul{margin:0;padding:0;list-style:none}.members li{border-bottom:1px solid #eef0f3;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.members li:last-child{border-bottom:none}.members li div{flex-direction:column;display:flex}.members form{flex-direction:column;gap:8px;display:flex}@media (width<=700px){.palette{width:88px;padding:10px}.palette-note{width:52px;height:52px}.members{width:min(320px,100vw);position:fixed;inset:0 0 0 auto;box-shadow:-8px 0 24px #0000001f}}
