#toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0d1b2a;border-bottom:1px solid #1a2a44}.toolbar-link{color:#8ac;font-size:13px;text-decoration:none;padding:4px 10px;background:#1e3a5f;border:1px solid #2a5080;border-radius:6px}.toolbar-link:hover{background:#2a5080}.toolbar-title{color:gold;font-weight:800;font-size:16px;letter-spacing:2px;flex:1}#toolbar select,#toolbar button{padding:5px 12px;background:#1e3a5f;color:#ccc;border:1px solid #2a5080;border-radius:6px;cursor:pointer;font-size:13px}#toolbar button:hover,#toolbar select:hover{background:#2a5080}#canvas-container{position:relative;flex:1;overflow:auto;background:#112240;min-height:500px}#canvas{position:relative;width:100%;height:800px;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}.placed-tile{position:absolute;cursor:grab;-webkit-user-select:none;user-select:none;z-index:1;transition:box-shadow .1s;touch-action:none}.placed-tile .tile-half,.placed-tile .pip,.placed-tile .divider-h,.placed-tile .divider-v{pointer-events:none}.placed-tile .rotate-btn,.placed-tile .delete-btn{pointer-events:auto}.placed-tile:hover{box-shadow:0 0 0 2px #ffd70088;z-index:5}.placed-tile.dragging{cursor:grabbing;z-index:100;box-shadow:0 4px 20px #00000080;opacity:.9}.placed-tile.selected{box-shadow:0 0 0 2px gold;z-index:10}.rotate-btn{position:absolute;top:-24px;right:-4px;width:22px;height:22px;background:gold;color:#0a1628;border:none;border-radius:50%;font-size:13px;font-weight:900;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;z-index:20}.placed-tile.selected .rotate-btn{display:flex}.delete-btn{position:absolute;top:-24px;left:-4px;width:22px;height:22px;background:#f44;color:#fff;border:none;border-radius:50%;font-size:13px;font-weight:900;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;z-index:20}.placed-tile.selected .delete-btn{display:flex}#snap-guides{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:50}.snap-guide-h{position:absolute;left:0;right:0;height:1px;background:#f48;opacity:.7}.snap-guide-v{position:absolute;top:0;bottom:0;width:1px;background:#f48;opacity:.7}#tile-palette{padding:8px;background:#0d1b2a;border-top:1px solid #1a2a44;max-height:200px;overflow-y:auto}#palette-label{color:#888;font-size:12px;margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:1px}#palette-tiles{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}.palette-tile{width:28px;height:46px;background:#e8d5b0;border:1px solid #8a6a3060;border-radius:3px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:transform .1s;opacity:.85}.palette-tile:hover{transform:scale(1.15);opacity:1}.palette-tile.used{opacity:.25;pointer-events:none}.palette-tile .tile-half{flex:1;position:relative}.palette-tile .divider-h{width:calc(100% - 3px);height:1px;background:#8a6a3060;align-self:center}#app{display:flex;flex-direction:column;height:100vh;max-width:none}