.design-system-generator{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:2rem}.design-system-generator .tool-header{text-align:center;margin-bottom:2rem}.design-system-generator .tool-header h1{font-size:2rem;color:var(--text-primary);margin-bottom:.5rem}.design-system-generator .tool-header p{color:var(--text-secondary)}.preset-section{background:var(--white);border-radius:12px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 8px #00000014}.preset-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}.preset-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.preset-buttons{display:flex;flex-wrap:wrap;gap:1rem}.preset-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s;font-size:.875rem;color:var(--text-primary)}.preset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.preset-colors{display:flex;gap:4px}.preset-colors span{width:16px;height:16px;border-radius:50%}.main-container{display:grid;grid-template-columns:1fr 400px;gap:1.5rem}.editor-panel{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.system-info{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.info-row{display:flex;flex-direction:column;gap:.5rem}.info-row.full{grid-column:1 / -1}.info-row label{font-size:.85rem;color:var(--text-secondary);font-weight:500}.info-row input,.info-row textarea{padding:.75rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem}.info-row textarea{min-height:60px;resize:vertical}.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;overflow-x:auto;padding-bottom:.5rem}.tab{padding:.75rem 1.25rem;background:var(--bg-secondary);border:none;border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--text-secondary);transition:all .2s;white-space:nowrap}.tab:hover{background:var(--bg-tertiary)}.tab.active{background:var(--primary);color:var(--white)}.tab-content{min-height:400px}.colors-editor{display:flex;flex-direction:column;gap:1.5rem}.color-item{background:var(--bg-secondary);border-radius:8px;padding:1rem}.color-header{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.color-header input[type=color]{width:40px;height:40px;border:none;border-radius:6px;cursor:pointer}.color-name{font-weight:500;text-transform:capitalize;color:var(--text-primary);flex:1}.color-hex{width:90px;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;font-family:monospace;font-size:.85rem}.color-shades{display:flex;gap:4px}.shade{flex:1;height:40px;border-radius:4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;cursor:pointer;transition:transform .2s}.shade:hover{transform:scale(1.1);z-index:1}.shade-label{font-size:.65rem;font-weight:500;color:var(--white);text-shadow:0 1px 2px rgba(0,0,0,.3)}.typography-editor .control-group{margin-bottom:1.5rem}.typography-editor .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}.typography-editor select,.typography-editor input[type=range]{width:100%}.typography-editor select{padding:.75rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem}.typography-preview{background:var(--bg-secondary);border:2px solid #d1d5db;border-radius:8px;padding:1.5rem;margin-top:1.5rem;box-shadow:0 1px 3px #0000001a}.typography-preview h4{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.type-sample{margin-bottom:.75rem;display:flex;align-items:baseline;gap:1rem}.type-label{min-width:100px;font-size:1rem;color:var(--gray-900)}.spacing-editor .control-group{margin-bottom:1.5rem}.spacing-editor .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}.spacing-preview{background:var(--bg-secondary);border:2px solid #d1d5db;border-radius:8px;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.spacing-preview h4{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.spacing-samples{display:flex;flex-direction:column;gap:.5rem}.spacing-sample{display:flex;align-items:center;gap:1rem}.spacing-label{min-width:80px;font-size:.8rem;color:var(--text-muted);font-family:monospace}.spacing-bar{height:16px;background:var(--primary);border-radius:2px;min-width:4px}.spacing-value{font-size:.75rem;color:var(--text-muted)}.borders-editor h4{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.borders-editor .control-group{margin-bottom:1.5rem}.borders-editor .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}.radius-control{display:flex;align-items:center;gap:1rem}.radius-control input[type=range]{flex:1}.radius-preview{width:50px;height:50px;background:#f9fafb}.shadows-editor{display:flex;flex-direction:column;gap:1.5rem}.shadow-item{background:var(--bg-secondary);border-radius:8px;padding:1rem}.shadow-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.shadow-name{font-weight:500;text-transform:uppercase;font-size:.85rem;color:var(--text-primary);min-width:40px}.shadow-header input{flex:1;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;font-family:monospace;font-size:.8rem}.shadow-preview{width:100%;height:60px;background:#f9fafb;border:2px solid #d1d5db;border-radius:8px}.breakpoints-editor{display:flex;flex-direction:column;gap:1rem}.breakpoint-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--bg-secondary);border-radius:8px}.breakpoint-item label{min-width:50px;font-weight:500;color:var(--text-primary)}.breakpoint-item input{width:80px;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;text-align:right}.breakpoint-item span{color:var(--text-muted);font-size:.85rem}.breakpoint-bar{height:8px;background:var(--primary);border-radius:4px;flex:1;max-width:200px}.export-panel{background:var(--white);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;height:fit-content;position:sticky;top:1rem}.export-panel h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:1rem}.format-selector{display:flex;gap:.5rem;margin-bottom:1rem}.format-btn{flex:1;padding:.75rem;background:var(--bg-secondary);border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:all .2s}.format-btn:hover{background:var(--bg-tertiary)}.format-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.export-panel .code-preview{background:#1e1e1e;border:2px solid #d1d5db;border-radius:8px;padding:1rem;margin-bottom:1rem;max-height:400px;overflow:auto;box-shadow:0 1px 3px #0000001a}.export-panel .code-preview pre{margin:0}.export-panel .code-preview code{color:#d4d4d4;font-size:.75rem;line-height:1.6}.export-actions{display:flex;flex-direction:column;gap:.75rem}.export-actions button{padding:.875rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.export-actions .btn-primary{background:var(--primary);color:var(--white);border:none}.export-actions .btn-primary:hover{background:var(--primary-dark)}.export-actions .btn-secondary{background:var(--white);color:var(--text-primary);border:1px solid var(--border-color)}.export-actions .btn-secondary:hover{background:var(--bg-secondary)}.saved-systems{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.saved-systems h4{font-size:.875rem;color:var(--text-secondary);margin-bottom:.75rem}.saved-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--bg-secondary);border-radius:6px;margin-bottom:.5rem}.saved-item span{font-size:.85rem;color:var(--text-primary)}.saved-actions{display:flex;gap:.5rem}.saved-actions button{padding:.375rem .75rem;font-size:.75rem;border-radius:4px;cursor:pointer;transition:all .2s}.saved-actions button:first-child{background:var(--primary);color:var(--white);border:none}.saved-actions button.delete{background:transparent;color:var(--danger);border:1px solid var(--danger)}.saved-actions button.delete:hover{background:var(--danger);color:var(--white)}.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}.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){.main-container{grid-template-columns:1fr}.export-panel{position:static}}@media (max-width: 768px){.design-system-generator{padding:1rem}.system-info{grid-template-columns:1fr}.preset-buttons{flex-direction:column}.preset-btn{width:100%;justify-content:center}.tabs{flex-wrap:nowrap}.format-selector{flex-wrap:wrap}.format-btn{flex:1 1 45%}}