* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #ffffff; }
.wrapper { display: grid; grid-template-rows: auto 1fr; height: 100%; }
header { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
header h1 { font-size: 20px; margin: 0; }
header .left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
header .right { margin-left:auto; display:flex; align-items:center; gap:8px; }
header .role { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #1e40af; }
.small { font-size: 12px; color: #6b7280; }
.colorpicker { display:flex; align-items:center; gap:8px; }
.colorpicker input[type="color"] { width: 32px; height: 24px; border: none; background: transparent; padding: 0; }
.icon-btn { border: none; background: transparent; font-size: 20px; cursor: pointer; color: #374151; line-height: 1;
  width: 28px; height: 28px; border-radius: 6px; display:inline-flex; align-items:center; justify-content:center; }
.icon-btn:hover { color: #111827; background: #f3f4f6; }
main { height: 100%; position: relative; }
.controls { display: flex; gap: 8px; align-items: center; margin: 8px 12px; flex-wrap: wrap; }
.controls input[type="text"], .controls textarea { flex: 1 1 320px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 16px; }
.controls button { padding: 10px 14px; border: 0; border-radius: 12px; background: #111827; color: white; cursor: pointer; }
#board { position: relative; height: calc(100vh - 64px); overflow: hidden; background: radial-gradient(circle at 25% 25%, #f8fafc, #f1f5f9);
  border: 8px solid #111827; border-radius: 16px; margin: 12px; }
#board .item { position: absolute; max-width: 40%; padding: 10px 12px; background: #fffef1; border: 1px solid #e5e7eb; border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08), 0 2px 0 #e5e7eb inset; user-select: none; transition: box-shadow 0.2s ease, transform 0.06s ease; }
#board .item.dragging { box-shadow: 0 16px 30px rgba(0,0,0,0.18); }
#board .item .text { white-space: pre-wrap; word-break: break-word; outline: none; }
.item.note { z-index: 3; } .item.text { z-index: 2; } .item.title { z-index: 2; }
.item.rect { z-index: 1; background: transparent !important; border: 2px dashed #9ca3af !important; box-shadow: none !important;
  width: 20%; height: 15%; transform: translate(-50%, -50%) !important; }
.item.rect .resize-handle { position:absolute; right:-8px; bottom:-8px; width:16px; height:16px; border-radius:50%; background:#111827; box-shadow:0 2px 6px rgba(0,0,0,0.2); cursor: nwse-resize; }
.item.line { background: transparent !important; border: none !important; box-shadow: none !important; width: 0; height: 0; }
.item.title, .item.text { background: transparent; border: none; box-shadow: none; color:#111827; }
.item.title .text { font-weight:700; font-size:22px; } .item.text .text { font-size:20px; }
#board svg.overlay { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.bigurl { font-weight: 700; font-size: 24px; color:#111827; margin-left: 16px; }