.fusion-shell{padding-top:22px;padding-bottom:64px}
.fusion-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:36px;align-items:start;padding:24px;background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:20px}
.fusion-art-panel{position:sticky;top:calc(var(--dd-header-height) + 20px);min-width:0}
.fusion-art-panel .composition-canvas{width:100%;max-width:480px;margin:18px auto 20px;border:1px solid var(--dd-border-strong);background:radial-gradient(ellipse at 45% 36%,#35335e,#20203f 76%);border-radius:14px}
.fusion-art-panel>.dd-text-link{display:inline-block;margin-top:12px;font-size:12px}
.fusion-controls{min-width:0;border-left:1px solid var(--dd-border);padding-left:24px}
.fusion-controls h3{font-size:28px;margin:0 0 10px}.fusion-controls p{font-size:14px;line-height:1.6;color:var(--dd-muted)}
.fusion-controls>div{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--dd-border)}.fusion-controls>div:last-child{border:0;padding-bottom:0;margin-bottom:0}
.fusion-controls #fusionInfo>p{margin:0 0 14px}.fusion-controls #fusionInfo>.dd-btn{min-height:44px}
.dd-token-button-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-height:180px;overflow:auto}.dd-token-button-grid:empty{display:none}
.dd-token-square-btn{border:1px solid var(--dd-border);background:var(--dd-bg);color:var(--dd-text);border-radius:8px;min-width:48px;min-height:44px;font-size:14px}.dd-token-square-btn.is-active{border-color:var(--dd-pink);color:var(--dd-pink)}
.fusion-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 12px}.fusion-picker-heading h4{font-size:22px;line-height:1.2;margin:0}.fusion-picker-heading>span{font-size:12px;color:var(--dd-muted);white-space:nowrap}
.fusion-trait-picker .studio-tiles{max-height:360px;min-height:180px}
.fusion-traits-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:176px;padding:20px 22px;border:1px dashed var(--dd-border-strong);border-radius:10px;background:var(--dd-bg)}
.fusion-traits-empty strong{font:600 15px/1.4 Barlow,sans-serif}.fusion-controls .fusion-traits-empty p{font-size:13px;max-width:45ch;margin:7px 0 12px}.fusion-traits-empty .dd-text-link{display:inline-flex;align-items:center;min-height:28px;font-size:13px}
.fusion-cost{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 14px;font-size:14px}.fusion-cost strong{font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums;text-align:right}
.fusion-review>p{font-size:13px;line-height:1.6;margin:0 0 16px}.fusion-review #submit{width:100%}.fusion-review #fusionTransactionStatus{padding:12px 14px;background:var(--dd-bg);border-radius:8px;color:var(--dd-cyan);font-size:13px}
.transaction-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;counter-reset:step;padding:0;margin:20px 0}.transaction-steps li{font-size:12px;line-height:1.5;color:var(--dd-muted);padding-top:10px;border-top:2px solid var(--dd-border);counter-increment:step}.transaction-steps li::before{content:counter(step) '. '}.transaction-steps .is-current{border-color:var(--dd-pink);color:var(--dd-text)}

/* The selected category and the categories with a chosen trait have distinct states. */
.fusion-category-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:8px;padding:3px 3px 14px}
.fusion-category-nav button{min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;border:1px solid var(--dd-border-strong);border-radius:8px;padding:10px 8px;color:var(--dd-text);background:var(--dd-bg);text-align:left;transition:background-color 140ms,border-color 140ms}
.fusion-category-name{font-size:12px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}.fusion-category-state{display:flex;align-items:center;gap:5px;color:var(--dd-muted);font-size:10px;line-height:1.3}
.fusion-category-check{display:inline-grid;place-items:center;width:13px;height:13px;flex:0 0 13px;border:1px solid var(--dd-border-strong);border-radius:50%}
.fusion-category-nav button.is-filled{border-color:var(--dd-mint-soft);background:#182c38}.fusion-category-nav .is-filled .fusion-category-state{color:var(--dd-mint-soft)}.fusion-category-nav .is-filled .fusion-category-check{background:var(--dd-mint-soft);border-color:var(--dd-mint-soft);color:var(--dd-bg)}.fusion-category-nav .is-filled .fusion-category-check::after{content:'✓';font-size:10px;font-weight:600}
.fusion-category-nav button[aria-pressed=true]{outline:2px solid var(--dd-pink);outline-offset:1px}.fusion-category-nav button:focus-visible{outline:2px solid var(--dd-cyan);outline-offset:1px}
.fusion-controls .fusion-selection-progress{font-size:13px;line-height:1.5;margin-bottom:14px}.fusion-controls .fusion-selection-progress.is-complete{color:var(--dd-mint-soft)}
@media(max-width:1100px){.fusion-workspace{gap:24px;padding:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fusion-controls{padding-left:20px}.fusion-category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.transaction-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.fusion-shell{padding-top:18px}.fusion-workspace{display:block;padding:14px;border-radius:14px}.fusion-art-panel{position:static;margin-bottom:24px}.fusion-art-panel .composition-canvas{width:min(100%,320px);margin:14px auto}.fusion-controls{border-left:0;border-top:1px solid var(--dd-border);padding:24px 0 0}.fusion-controls h3{font-size:26px}.fusion-category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.fusion-category-name{font-size:13px}.fusion-category-state{font-size:11px}.fusion-traits-empty{padding:18px}.fusion-cost strong{font-size:20px}.fusion-traits-empty .dd-text-link{min-height:44px}}
@media(prefers-reduced-motion:reduce){.fusion-category-nav button{transition:none}}
