main{min-height:100vh;background-color:var(--color-bg)}.breadcrumb{display:flex;align-items:center;font-size:.9rem}.breadcrumb a{color:var(--color-text-light);text-decoration:none;transition:color .3s ease}.breadcrumb a:hover{color:var(--color-primary)}.separator{margin:0 .5rem;color:var(--color-text-dim)}.current{color:var(--color-text);font-weight:500}.export-error{margin:1rem auto;max-width:1400px;background:#f43f5e1f;border:1px solid var(--color-accent);color:#fda4af;border-radius:var(--radius-md);padding:.75rem 1rem;font-size:.875rem}.editor-layout{max-width:1400px;margin:0 auto;padding:2rem 1.5rem 4rem;display:flex;flex-direction:column;gap:2rem}.template-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem;padding:1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.template-intro-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;color:var(--color-text);font-family:Space Grotesk,sans-serif}.template-intro-description{margin:0;color:var(--color-text-light);line-height:1.6}.template-intro-steps-title{margin:0 0 .75rem;font-size:1.1rem;font-weight:600;color:var(--color-text)}.template-intro-steps ol{margin:0;padding-left:1.5rem;color:var(--color-text-light);line-height:1.6}.template-intro-steps li{margin-bottom:.4rem}.editor-column{display:flex;flex-direction:column;gap:1rem}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem 1.5rem;box-shadow:var(--shadow-sm)}.toolbar-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.toolbar-right{display:flex;align-items:center;gap:1rem}.toolbar-label{font-size:.875rem;font-weight:500;color:var(--color-text-light)}.toolbar-input{min-width:240px;padding:.6rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:.95rem;transition:all .2s}.toolbar-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #7c3aed26}.canvas-area{background:#0d0f14;border:1px solid #1a2231;border-radius:var(--radius-xl);padding:0;overflow:hidden;box-shadow:var(--shadow-md);position:relative}.tier-row{display:grid;grid-template-columns:140px 1fr 56px;align-items:stretch;min-height:112px;border-bottom:1px solid #141a24;background:#0f1117}.tier-row:first-child{border-top:none}.tier-row:last-child{border-bottom:none}.tier-label{display:flex;align-items:center;justify-content:center;padding:.9rem;text-align:center;font-weight:700;font-size:1.05rem;color:#111;line-height:1.1;word-break:break-word;text-transform:uppercase;font-family:Space Grotesk,sans-serif}.tier-label-text{max-width:100%}.tier-content{padding:.85rem;min-height:112px;transition:background-color .2s ease;background:#ffffff05}.tier-content.is-empty{display:flex;align-items:center;justify-content:center}.tier-row.is-over .tier-content{background:#7c3aed14;box-shadow:inset 0 0 0 2px var(--color-primary)}.tier-items{display:grid;grid-template-columns:repeat(auto-fill,96px);gap:.6rem;align-items:start}.tier-actions{background:#0b0e14;border-left:1px solid #1b2433;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:.4rem 0}.icon-button{width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.icon-button svg{width:18px;height:18px}.icon-button:hover{color:var(--color-text);background:#141a26;border-color:#263146}.icon-button:disabled{opacity:.3;cursor:not-allowed}.tier-placeholder{color:#f1f4f9;font-style:italic;margin:.75rem 0;font-size:.9rem}.column-title{font-size:1.4rem;font-weight:700;margin:0 0 1rem;color:var(--color-text);font-family:Space Grotesk,sans-serif}.assets-panel{background:#0d111c;border:1px solid #1f2738;border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-sm)}.assets-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.assets-panel-body{display:flex;flex-direction:column;gap:1.25rem}.upload-area{background:#0f1626;border:2px dashed #273043;border-radius:var(--radius-lg);padding:1.6rem;text-align:center;cursor:pointer;transition:all .25s ease}.upload-area:hover{border-color:var(--color-primary-light);background:#121a2b;box-shadow:0 0 24px #7c3aed26}.upload-area.compact{padding:1.4rem}.upload-placeholder p{margin:.5rem 0;color:#f1f4f9}.upload-limit{color:#f1f4f9;font-size:.8rem}.assets-list{background:#0a0d14;border-radius:var(--radius-lg);padding:1.5rem;min-height:240px;border:1px solid #1c2434}.assets-list.is-over{border-color:var(--color-primary);box-shadow:0 0 20px #7c3aed2e}.assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,120px));gap:1rem;justify-content:start;align-items:start}.asset-wrapper{position:relative;width:100%}.asset-item{background:#0b0f1c;border:1px solid var(--color-border);border-radius:var(--radius-md);aspect-ratio:1/1;width:100%;max-width:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease;cursor:grab;position:relative;padding:.4rem}.asset-item.drag-overlay{width:110px;height:110px;box-shadow:var(--shadow-glow-primary);z-index:9999;cursor:grabbing;background:var(--color-surface)}.asset-item:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.asset-image{width:100%;height:100%;object-fit:contain;padding:6px;pointer-events:none;user-select:none}.asset-remove{position:absolute;top:-8px;right:-8px;background:var(--color-accent);color:#fff;border:2px solid var(--color-bg);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.16,1,.3,1);z-index:10}.asset-wrapper:hover .asset-remove{opacity:1;transform:scale(1)}.asset-remove:hover{background:#e11d48;transform:scale(1.1)}.asset-name{display:none}.empty-state{grid-column:1 / -1;text-align:center;color:var(--color-text-dim);padding:3rem 0;font-style:italic}.tier-modal-overlay{position:fixed;inset:0;background:#05060acc;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1.5rem}.tier-modal{width:min(860px,100%);background:#1e1e1e;border:1px solid #2a2a2a;border-radius:var(--radius-xl);padding:2rem;box-shadow:0 0 40px #0006,var(--shadow-glow-primary)}.tier-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.tier-modal-header h3{font-size:1.5rem;font-weight:700;margin:0;text-align:center;flex:1}.tier-modal-body{display:flex;flex-direction:column;gap:1rem}.modal-title{text-align:center;font-size:1.15rem;font-weight:600;margin:.5rem 0 .25rem;color:var(--color-text)}.modal-label{font-size:.95rem;color:var(--color-text-light)}.color-palette{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:.5rem}.color-swatch{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-swatch:hover{transform:scale(1.08)}.color-swatch.is-active{border-color:#fff;box-shadow:0 0 0 2px var(--color-primary),0 0 12px #7c3aed59}.tier-name-input{width:100%;padding:.9rem 1rem;border-radius:var(--radius-md);border:1px solid #d8dde4;background:#fff;color:#111;font-size:1rem;resize:none;font-family:inherit}.tier-name-input:focus{outline:none;border-color:var(--color-primary)}.tier-modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.25rem}.modal-close{width:34px;height:34px;color:var(--color-text-dim)}.modal-close:hover{color:var(--color-text);background:#ffffff14}.upload-errors{background:#f43f5e1f;border:1px solid var(--color-accent);color:#fda4af;border-radius:var(--radius-md);padding:1rem;font-size:.875rem}@media(max-width:1024px){.template-intro{grid-template-columns:1fr}.editor-toolbar{flex-direction:column;align-items:stretch}.tier-row{grid-template-columns:120px 1fr 52px}.tier-modal{width:min(680px,100%);padding:1.5rem}}@media(max-width:720px){.tier-row{grid-template-columns:96px 1fr 48px}.assets-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}.tier-modal-actions{grid-template-columns:1fr}}
