.play-layout{display:grid;grid-template-columns:280px minmax(0,1fr) 330px;gap:16px;align-items:start}.palette,.analysis-panel,.canvas-card{background:var(--panel,#fff);border:1px solid var(--line,#dbe3ef);border-radius:18px;padding:16px}.palette-list{display:grid;gap:8px}.component-btn{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:12px;padding:10px;cursor:pointer}.component-btn small{display:block;color:var(--muted)}#playCanvas{width:100%;height:620px;background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;border-radius:14px;touch-action:none}.node rect{fill:var(--panel);stroke:var(--accent);stroke-width:2;rx:12}.node text{fill:var(--text);font-size:13px;font-weight:700;pointer-events:none}.node.selected rect{stroke:var(--warn,#b35c00);stroke-width:4}.edge{stroke:var(--muted);stroke-width:2;marker-end:url(#arrow)}.edge-label{fill:var(--muted);font-size:11px}.scores{display:grid;gap:10px}.score-row{display:grid;grid-template-columns:105px 1fr 32px;gap:8px;align-items:center}.bar{height:9px;background:var(--line);border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}.finding{padding:10px;border-radius:12px;background:var(--bg);border-left:4px solid var(--warn);margin:8px 0}.finding.good{border-color:var(--ok)}.play-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scenario{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel)}@media(max-width:1100px){.play-layout{grid-template-columns:1fr}.palette-list{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-panel{position:static}}@media(max-width:600px){.palette-list,.scenario-grid{grid-template-columns:1fr}#playCanvas{height:480px}}