.navbar-generator{min-height:auto;background:linear-gradient(135deg,#0f0f1a,#1a1a2e);padding:2rem}.generator-header{text-align:center;margin-bottom:2rem}.generator-header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.generator-header p{color:#a0aec0;font-size:1.1rem}.generator-layout{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:var(--tool-content-gap, 2rem);max-width:1600px;margin:0 auto}.controls-panel{display:flex;flex-direction:column;gap:1.5rem;max-height:none;overflow-y:auto;padding-right:1rem}.controls-panel::-webkit-scrollbar{width:6px}.controls-panel::-webkit-scrollbar-track{background:#ffffff14;border-radius:3px}.controls-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.control-section{background:#ffffff14;border-radius:12px;padding:1.25rem;border:2px solid rgba(255,255,255,.25)}.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}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.preset-btn{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none;font-size:.85rem;font-weight:500}.preset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.preset-accent{width:12px;height:12px;border-radius:50%}.style-options{display:flex;flex-direction:column;gap:.5rem}.style-option{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#ffffff0f;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .2s ease}.style-option:hover{background:#ffffff14}.style-option.selected{border-color:#667eea;background:#667eea1a}.style-option input{display:none}.style-info{display:flex;flex-direction:column;gap:2px}.style-name{font-size:.875rem;font-weight:600;color:var(--gray-200)}.style-desc{font-size:.75rem;color:#a0aec0}.position-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.position-option{display:flex;align-items:center;justify-content:center;padding:.6rem;background:#ffffff14;border-radius:6px;cursor:pointer;font-size:.85rem;color:#a0aec0;border:2px solid transparent;transition:all .2s ease}.position-option:hover{background:#ffffff26}.position-option.selected{border-color:#667eea;color:#667eea;background:#667eea1a}.position-option input{display:none}.color-controls{display:flex;flex-direction:column;gap:1rem}.color-input{display:flex;flex-direction:column;gap:.5rem}.color-input label{font-size:1rem;color:var(--gray-900);font-weight:600;margin-bottom:.5rem;line-height:1.5;letter-spacing:.3px}.color-picker-group{display:flex;gap:.5rem}.color-picker-group input[type=color]{width:40px;height:36px;border:none;border-radius:6px;cursor:pointer;background:transparent;padding:0}.color-picker-group input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-picker-group input[type=color]::-webkit-color-swatch{border-radius:4px;border:none}.color-picker-group input[type=text]{flex:1;padding:.5rem .75rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:var(--gray-200);font-size:.85rem;font-family:monospace}.brand-controls{display:flex;flex-direction:column;gap:1rem}.input-group{display:flex;flex-direction:column;gap:.4rem}.input-group label{font-size:1rem;color:var(--gray-900);font-weight:600;margin-bottom:.5rem;line-height:1.5;letter-spacing:.3px}.input-group input{padding:.6rem .75rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:var(--gray-200);font-size:.875rem}.input-group input:focus{outline:none;border-color:#667eea}.logo-type-toggle{display:flex;gap:.5rem}.toggle-option{flex:1;display:flex;align-items:center;justify-content:center;padding:.6rem;background:#ffffff14;border-radius:6px;cursor:pointer;font-size:.85rem;color:#a0aec0;transition:all .2s ease}.toggle-option.active{background:#667eea33;color:#667eea}.toggle-option input{display:none}.nav-items-list{display:flex;flex-direction:column;gap:.75rem}.nav-item-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:.5rem;align-items:center}.nav-item-label,.nav-item-href{padding:.5rem .75rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:var(--gray-200);font-size:.85rem}.nav-item-label:focus,.nav-item-href:focus{outline:none;border-color:#667eea}.nav-item-active{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#a0aec0;cursor:pointer;white-space:nowrap}.nav-item-active input{accent-color:#667eea}.remove-item-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#ef444433;border:none;border-radius:6px;color:var(--danger);font-size:1.2rem;cursor:pointer;transition:all .2s ease}.remove-item-btn:hover:not(:disabled){background:#ef44444d}.remove-item-btn:disabled{opacity:.5;cursor:not-allowed}.add-item-btn{padding:.6rem;background:#667eea1a;border:1px dashed rgba(102,126,234,.3);border-radius:6px;color:#667eea;font-size:.85rem;cursor:pointer;transition:all .2s ease}.add-item-btn:hover{background:#667eea33}.cta-controls{display:flex;flex-direction:column;gap:1rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:var(--gray-900);cursor:pointer}.checkbox-label input{accent-color:var(--gray-900)}.dimension-controls{display:flex;flex-direction:column;gap:1rem}.slider-group{display:flex;flex-direction:column;gap:.4rem}.slider-group label{font-size:.8rem;color:#a0aec0;display:flex;justify-content:space-between}.slider-group input[type=range]{width:100%;height:6px;background:#ffffff26;border-radius:3px;outline:none;-webkit-appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#667eea;border-radius:50%;cursor:pointer}.select-group{display:flex;flex-direction:column;gap:.4rem}.select-group label{font-size:.8rem;color:#a0aec0}.select-group select{padding:.6rem .75rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:var(--gray-200);font-size:.875rem;cursor:pointer}.select-group select:focus{outline:none;border-color:#667eea}.select-group select option{background:#1a1a2e;color:var(--gray-200)}.effects-controls,.hover-controls,.mobile-controls{display:flex;flex-direction:column;gap:1rem}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.preview-header{display:flex;justify-content:space-between;align-items:center}.preview-header h3{font-size:1.1rem;font-weight:600;color:var(--gray-200)}.preview-controls{display:flex;gap:.5rem}.preview-toggle{padding:.5rem 1rem;background:#f9fafb;border:2px solid #d1d5db;border-radius:6px;color:#a0aec0;font-size:.85rem;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.preview-toggle.active{background:#667eea33;color:#667eea}.preview-container{background:#f9fafb;border-radius:12px;overflow:hidden;border:2px solid #d1d5db}.preview-container.mobile-view{max-width:375px;margin:0 auto}.preview-background{min-height:300px}.code-output{background:#ffffff14;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.25)}.code-tabs{display:flex;background:#0003;padding:.5rem;gap:.5rem}.code-tab{flex:1;padding:.6rem 1rem;background:transparent;border:none;border-radius:6px;color:#a0aec0;font-size:.875rem;cursor:pointer;transition:all .2s ease}.code-tab.active{background:#667eea33;color:#667eea}.code-content{max-height:400px;overflow:auto}.code-content pre{margin:0;padding:1rem}.code-content code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--gray-200);white-space:pre}.code-actions{display:flex;gap:.75rem;padding:1rem;background:#0003}.copy-btn,.download-btn{flex:1;padding:.75rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.copy-btn{background:#667eea;border:none;color:var(--white)}.copy-btn:hover{background:#5a67d8}.copy-btn.copied{background:var(--success)}.download-btn{background:transparent;border:2px solid rgba(255,255,255,.35);color:var(--gray-200)}.download-btn:hover{background:#ffffff26}.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: 1200px){.generator-layout{grid-template-columns:1fr}.controls-panel{max-height:none;overflow-y:visible;padding-right:0}.preview-container.mobile-view{max-width:100%}}@media (max-width: 768px){.navbar-generator{padding:1rem}.generator-header h1{font-size:2rem}.presets-grid{grid-template-columns:1fr}.nav-item-row{grid-template-columns:1fr 1fr;gap:.5rem}.nav-item-active,.remove-item-btn{grid-column:span 1}}