.css-layer-generator{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:2rem}.css-layer-generator h1{text-align:center;margin-bottom:.5rem;color:#2d3748}.css-layer-generator .tool-description{text-align:center;color:#718096;margin-bottom:2rem}.css-layer-layout{display:grid;grid-template-columns:420px 1fr;gap:var(--tool-content-gap, 2rem)}.control-panel{background-color:#1f2937f2!important;border:2px solid var(--gray-400)!important;border-radius:6px}[data-theme=dark] .control-section{background-color:#1f2937e6!important;border-color:var(--gray-400)!important;border-width:2px}[data-theme=dark] .control-group input,[data-theme=dark] .control-group select,[data-theme=dark] .control-group textarea{background-color:#0f172acc!important;border:2px solid var(--gray-500)!important;color:var(--text-primary)}[data-theme=dark] .control-group label{display:block;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}@media (max-width: 1023px){.css-layer-layout{grid-template-columns:1fr}}.css-layer-controls{display:flex;flex-direction:column;gap:1.5rem}.control-section{background:#f7fafc;border-radius:8px;padding:1rem}.control-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-card{display:flex;flex-direction:column;align-items:flex-start;padding:.75rem;border:1px solid var(--gray-200);border-radius:6px;background:var(--white);cursor:pointer;text-align:left;transition:all .2s}.preset-card:hover{background:#edf2f7}.preset-card.active{background:#ebf8ff;border-color:#4299e1}.preset-card strong{color:#2d3748;font-size:.85rem}.preset-card small{color:#718096;font-size:.75rem;margin-top:.25rem}.layer-info{display:flex;justify-content:center;padding:.5rem}.layer-info.bottom{padding-top:.25rem}.priority-arrow{font-size:.75rem;color:#718096;font-style:italic}.layer-list{display:flex;flex-direction:column;gap:.5rem;background:var(--white);border:1px solid var(--gray-200);border-radius:6px;padding:.5rem;max-height:300px;overflow-y:auto}.layer-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#f7fafc;border-radius:6px;cursor:pointer;transition:all .2s}.layer-item:hover{background:#edf2f7}.layer-item.selected{background:#ebf8ff;border:1px solid #4299e1}.layer-item.disabled{opacity:.5}.layer-controls{display:flex;flex-direction:column;gap:2px}.move-btn{padding:.15rem .35rem;border:none;background:var(--gray-200);border-radius:4px;cursor:pointer;font-size:.7rem;color:#4a5568;transition:background .2s}.move-btn:hover:not(:disabled){background:#cbd5e0}.move-btn:disabled{opacity:.4;cursor:not-allowed}.layer-info-main{flex:1;display:flex;align-items:center;gap:.5rem}.layer-order{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:#4299e1;color:var(--white);border-radius:50%;font-size:.7rem;font-weight:600}.layer-name-input{flex:1;padding:.25rem .5rem;border:1px solid var(--gray-200);border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:.85rem;background:var(--white)}.layer-name-input:focus{border-color:#4299e1;outline:none}.layer-actions{display:flex;align-items:center;gap:.5rem}.toggle-label{position:relative;width:36px;height:20px;cursor:pointer}.toggle-label input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:#cbd5e0;border-radius:20px;transition:background .2s}.toggle-slider:before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:var(--white);border-radius:50%;transition:transform .2s}.toggle-label input:checked+.toggle-slider{background:#48bb78}.toggle-label input:checked+.toggle-slider:before{transform:translate(16px)}.remove-btn{padding:.2rem .5rem;border:none;background:transparent;color:#a0aec0;cursor:pointer;font-size:1.1rem;transition:color .2s}.remove-btn:hover{color:#e53e3e}.add-layer-form{display:flex;gap:.5rem;margin-top:.75rem}.add-layer-form input{flex:1;padding:.5rem;border:1px solid var(--gray-200);border-radius:6px;font-size:.85rem}.add-btn{padding:.5rem 1rem;background:#48bb78;color:var(--white);border:none;border-radius:6px;cursor:pointer;font-weight:500;white-space:nowrap;transition:background .2s}.add-btn:hover{background:#38a169}.layer-editor{background:var(--white);border:1px solid var(--gray-200);border-radius:6px;overflow:hidden}.editor-header{padding:.5rem .75rem;background:#edf2f7;font-size:.85rem;color:#4a5568}.editor-header code{font-family:Monaco,Menlo,monospace;background:var(--white);padding:.1rem .3rem;border-radius:4px}.layer-editor textarea{width:100%;padding:.75rem;border:none;font-family:Monaco,Menlo,monospace;font-size:.85rem;line-height:1.6;resize:vertical}.layer-editor textarea:focus{outline:none}.options-grid{display:flex;flex-direction:column;gap:.75rem}.option-item{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer}.option-item input[type=radio]{margin-top:4px}.option-item span{display:flex;flex-direction:column}.option-item strong{color:#2d3748;font-size:.85rem}.option-item small{color:#718096;font-size:.75rem}.checkbox-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#4a5568;font-size:.875rem}.save-load-buttons{display:flex;gap:.5rem}.save-btn,.load-btn{flex:1;padding:.5rem;border:1px solid var(--gray-200);border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.save-btn{background:#4299e1;color:var(--white);border-color:#4299e1}.save-btn:hover{background:#3182ce}.load-btn{background:var(--white);color:#4a5568}.load-btn:hover{background:#edf2f7}.css-layer-output{display:flex;flex-direction:column;gap:1.5rem}.output-section{background:#f7fafc;border-radius:8px;padding:1rem}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.output-header h3{margin:0;font-size:.875rem;color:#4a5568;text-transform:uppercase;letter-spacing:.05em}.toggle-btn{background:none;border:none;cursor:pointer;font-size:.875rem;color:#4a5568;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:0}.toggle-btn:hover{color:#2d3748}.copy-btn{padding:.4rem .8rem;background:#4299e1;color:var(--white);border:none;border-radius:6px;cursor:pointer;font-size:.8rem;transition:background .2s}.copy-btn:hover{background:#3182ce}.code-output{background:#1a202c;color:var(--gray-200);padding:1rem;border-radius:6px;overflow-x:auto;font-family:Monaco,Menlo,monospace;font-size:.85rem;line-height:1.6;margin:0;max-height:400px;overflow-y:auto}.cascade-visual{display:flex;flex-direction:column;gap:.5rem;background:var(--white);border:1px solid var(--gray-200);border-radius:6px;padding:1rem}.cascade-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:6px;font-size:.85rem}.cascade-item.unlayered{background:linear-gradient(135deg,#fed7e2,#fbb6ce);color:#97266d;font-weight:600}.cascade-item.layered{background:#edf2f7;color:#4a5568}.cascade-item.layered.selected{background:#bee3f8;color:#2b6cb0}.cascade-item.important{background:linear-gradient(135deg,#faf089,#f6e05e);color:#975a16;font-weight:600}.cascade-label{font-family:Monaco,Menlo,monospace}.cascade-priority{background:#4a5568;color:var(--white);padding:.2rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.cascade-note{font-size:.75rem;font-style:italic}.reference-section{margin-top:2rem}.reference-toggle{width:100%;padding:1rem;background:#edf2f7;border:none;border-radius:8px;cursor:pointer;font-size:1rem;color:#4a5568;transition:background .2s}.reference-toggle:hover{background:var(--gray-200)}.reference-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem}.reference-card{background:#f7fafc;border-radius:8px;padding:1rem}.reference-card h4{margin:0 0 .75rem;color:#2d3748;font-size:1rem}.reference-card p{margin:0 0 .75rem;color:#4a5568;font-size:.875rem;line-height:1.6}.reference-card ul{margin:0;padding-left:1.25rem;color:#4a5568;font-size:.875rem;line-height:1.6}.reference-card pre{background:#1a202c;color:var(--gray-200);padding:.75rem;border-radius:6px;overflow-x:auto;font-family:Monaco,Menlo,monospace;font-size:.8rem;margin:.5rem 0 0}.reference-card code{background:#edf2f7;padding:.1rem .3rem;border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:.85em}