.bracket-canvas{background:var(--bg-deep);background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);border:1px solid var(--border);-webkit-user-select:none;user-select:none;cursor:crosshair;background-size:30px 30px;border-radius:16px;width:100%;height:800px;position:relative;overflow:hidden}.bracket-workspace{transform-origin:0 0;position:absolute;inset:0}.connector-svg{pointer-events:none;z-index:1;width:2000px;height:2000px;position:absolute;inset:0}.connector-svg path{fill:none;stroke:var(--primary);stroke-width:3px;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--primary-glow));transition:stroke .2s}.connector-svg path.draft{stroke:var(--text-dim);stroke-dasharray:5 5}.bracket-match-node{background:var(--bg-card);border:1px solid var(--border);z-index:10;cursor:grab;border-radius:12px;flex-direction:column;justify-content:center;gap:8px;width:260px;height:130px;padding:14px;display:flex;position:absolute;box-shadow:0 4px 20px #0000004d;overflow:visible!important}.bracket-match-node:active{cursor:grabbing;border-color:var(--primary)}.bracket-match-node .node-header{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.bracket-match-node .node-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:700}.delete-node-btn{color:var(--text-dim);cursor:pointer;pointer-events:auto;background:0 0;border:none;padding:4px;font-size:.85rem}.delete-node-btn:hover{color:var(--secondary)}.port{background:var(--bg-card);border:2px solid var(--border);cursor:pointer;z-index:20;width:12px;height:12px;transition:var(--transition);border-radius:50%;position:absolute}.port:hover{border-color:var(--primary);transform:scale(1.2)}.port-in{top:44%;left:-10px;transform:translateY(-50%)}.port-out-winner{background:var(--primary);border-color:var(--primary);top:30%;right:-10px}.port-out-loser{border-color:var(--secondary);top:70%;right:-10px}.bracket-team{border-radius:6px;align-items:center;gap:8px;padding:4px 6px;display:flex}.bracket-team.winner{background:#00964626}.bracket-input{background:var(--bg-deep);border:1px solid var(--border);color:var(--text-bright);border-radius:4px;flex:1;width:100%;padding:4px 8px;font-size:.8rem}.win-btn{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;display:flex}.win-btn.active{background:var(--primary);color:#fff}.bracket-area{z-index:2;cursor:grab;background:#00964605;border:2px dashed #ffffff1a;border-radius:20px;flex-direction:column;padding:20px;display:flex;position:absolute;pointer-events:auto!important}.bracket-area:hover{border-color:var(--primary-glow);background:#0096460d}.area-header{background:var(--bg-deep);color:var(--primary);text-transform:uppercase;-webkit-user-select:text;user-select:text;cursor:text;padding:0 10px;font-size:.85rem;font-weight:700;position:absolute;top:-12px;left:20px}.area-delete-btn{color:var(--text-dim);cursor:pointer;z-index:30;background:0 0;border:none;display:none;position:absolute;top:10px;right:10px}.area-delete-btn:hover{color:var(--secondary)}.bracket-area:hover .area-delete-btn{display:block}.area-resizer{cursor:nwse-resize;z-index:10;background:linear-gradient(135deg,#0000 50%,#00964666 50%);border-bottom-right-radius:18px;width:24px;height:24px;position:absolute;bottom:0;right:0}.area-resizer:hover{background:linear-gradient(135deg, transparent 50%, var(--primary) 50%)}.public-bracket-canvas{cursor:default;min-height:600px;overflow:visible;height:auto!important}.public-bracket-canvas .bracket-workspace{height:max-content;padding:40px;position:relative}