.icon-generator{max-width:1200px;margin:0 auto;padding:2rem}.icon-generator .tool-header{text-align:center;margin-bottom:2rem}.icon-generator .tool-header h1{font-size:2rem;color:var(--text-primary);margin-bottom:.5rem}.icon-generator .tool-header p{color:var(--text-secondary)}.main-container{display:grid;grid-template-columns:1fr 400px;gap:var(--tool-content-gap, 2rem)}.editor-panel{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.editor-panel .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}.section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border-color)}.editor-panel .section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.editor-panel h3{font-size:.875rem;color:var(--text-primary);margin-bottom:1rem;font-weight:600}.type-buttons{display:flex;gap:.5rem}.type-btn{flex:1;padding:.75rem;background:var(--bg-secondary);border:2px solid transparent;border-radius:8px;cursor:pointer;font-size:.875rem;color:var(--text-secondary);transition:all .2s}.type-btn:hover{background:var(--bg-tertiary)}.type-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary);font-weight:500}.shapes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.shape-btn{aspect-ratio:1;background:var(--bg-secondary);border:2px solid transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s}.shape-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.shape-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.symbols-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.symbol-btn{aspect-ratio:1;background:var(--bg-secondary);border:2px solid transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .2s}.symbol-btn:hover{background:var(--bg-tertiary)}.symbol-btn.active{background:var(--primary-light);border-color:var(--primary)}.letter-input{width:100%;padding:1rem;font-size:2rem;font-weight:700;text-align:center;border:2px solid var(--border-color);border-radius:8px;text-transform:uppercase}.letter-input:focus{outline:none;border-color:var(--primary)}.bg-type-buttons{display:flex;gap:.5rem;margin-bottom:1rem}.bg-type-btn{flex:1;padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--text-secondary);transition:all .2s}.bg-type-btn.active{background:var(--primary);color:var(--white)}.color-row{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.color-row label{min-width:100px;font-size:.85rem;color:var(--text-secondary)}.color-input{display:flex;align-items:center;gap:.5rem;flex:1}.color-input input[type=color]{width:40px;height:35px;border:1px solid var(--border-color);border-radius:6px;cursor:pointer}.color-input input[type=text]{flex:1;padding:.5rem;border:1px solid var(--border-color);border-radius:6px;font-family:monospace;font-size:.85rem;text-transform:uppercase}.gradient-controls{display:flex;flex-direction:column;gap:.5rem}.slider-row{margin-bottom:1rem}.slider-row label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.slider-row input[type=range]{width:100%;accent-color:var(--primary)}.checkbox-row{margin-top:.5rem}.checkbox-row label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-secondary);cursor:pointer}.checkbox-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}.presets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.editor-panel .preset-btn{padding:.75rem .5rem;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:transform .2s}.editor-panel .preset-btn:hover{transform:scale(1.05)}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.preview-area{background:repeating-conic-gradient(var(--gray-200) 0% 25%,white 0% 50%) 50% / 20px 20px;border:2px solid #d1d5db;border-radius:12px;padding:2rem;display:flex;align-items:center;justify-content:center;min-height:280px;box-shadow:0 1px 3px #0000001a}.icon-preview svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}.size-previews{background:var(--white);border:2px solid #d1d5db;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;box-shadow:0 1px 3px #0000001a}.size-previews h4{font-size:.875rem;color:var(--text-primary);margin-bottom:1rem}.size-grid{display:flex;align-items:flex-end;justify-content:space-around;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px}.size-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.size-item span{font-size:.75rem;color:var(--text-muted)}.export-section{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.export-section h4{font-size:.875rem;color:var(--text-primary);margin-bottom:1rem}.export-options{display:flex;gap:1rem;margin-bottom:1rem}.export-options .option-group{flex:1}.export-options label{display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.export-options select{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem}.export-buttons{display:flex;gap:.5rem}.export-buttons button{flex:1;padding:.75rem;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.export-buttons .btn-primary{background:var(--primary);color:var(--white);border:none}.export-buttons .btn-primary:hover{background:var(--primary-dark)}.export-buttons .btn-secondary{background:var(--white);color:var(--text-primary);border:1px solid var(--border-color)}.export-buttons .btn-secondary:hover{background:var(--bg-secondary)}.saved-icons{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.saved-icons h4{font-size:.875rem;color:var(--text-primary);margin-bottom:1rem}.saved-grid{display:flex;flex-wrap:wrap;gap:.75rem}.saved-icon{position:relative;width:64px;height:64px;background:repeating-conic-gradient(var(--gray-200) 0% 25%,white 0% 50%) 50% / 10px 10px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.saved-icon:hover{transform:scale(1.1)}.saved-icon svg{max-width:100%;max-height:100%}.delete-icon{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:var(--danger);color:var(--white);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.saved-icon:hover .delete-icon{opacity:1}.tips-section{background:var(--white);border-radius:12px;padding:1.5rem;margin-top:2rem;box-shadow:0 2px 8px #00000014}.tips-section h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:1rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.tip{background:var(--bg-secondary);padding:1rem;border-radius:8px}.tip h4{font-size:.875rem;color:var(--text-primary);margin-bottom:.5rem}.tip p{font-size:.85rem;color:var(--text-secondary);line-height:1.4}@media (max-width: 900px){.main-container{grid-template-columns:1fr}.preview-panel{order:-1}}@media (max-width: 600px){.icon-generator{padding:1rem}.symbols-grid{grid-template-columns:repeat(4,1fr)}.export-options{flex-direction:column;gap:.75rem}.export-buttons{flex-direction:column}.presets-grid{grid-template-columns:repeat(2,1fr)}}