.wireframe-component-library{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:2rem}.wireframe-component-library .tool-header{text-align:center;margin-bottom:2rem}.wireframe-component-library .tool-header h1{font-size:2rem;color:var(--text-primary);margin-bottom:.5rem}.wireframe-component-library .tool-header p{color:var(--text-secondary)}.library-container{display:grid;grid-template-columns:200px 1fr 380px;gap:1.5rem;min-height:600px}.categories-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.categories-panel h3{font-size:1rem;color:var(--text-primary);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.category-list{display:flex;flex-direction:column;gap:.5rem}.category-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s;text-align:left}.category-btn:hover{background:var(--bg-tertiary)}.category-btn.active{background:var(--primary-light);border-color:var(--primary)}.category-icon{font-size:1.2rem}.category-name{flex:1;font-size:.9rem;color:var(--text-primary)}.category-count{font-size:.75rem;color:var(--text-muted);background:var(--bg-secondary);padding:.2rem .5rem;border-radius:10px}.category-btn.active .category-count{background:var(--primary);color:#fff}.components-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;overflow-y:auto}.components-panel h3{font-size:1rem;color:var(--text-primary);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.components-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.component-card{background:var(--bg-secondary);border:2px solid transparent;border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s}.component-card:hover{border-color:var(--primary-light);transform:translateY(-2px)}.component-card.selected{border-color:var(--primary);background:var(--primary-light)}.component-preview{background:#fff;border:2px solid #d1d5db;border-radius:4px;padding:.5rem;margin-bottom:.75rem;height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 1px 3px #0000001a}.component-preview svg{max-width:100%;max-height:100%}.component-info h4{font-size:.85rem;color:var(--text-primary);margin-bottom:.25rem}.component-info p{font-size:.75rem;color:var(--text-muted);line-height:1.3}.customization-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;overflow-y:auto}.customization-panel h3{font-size:1rem;color:var(--text-primary);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.preview-area{background:#f9fafb;border:2px solid #d1d5db;border-radius:8px;padding:1rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;min-height:200px;overflow:auto;box-shadow:0 1px 3px #0000001a}.preview-area svg{max-width:100%}.customization-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.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}.control-group input[type=range]{width:100%;accent-color:var(--primary)}.control-group input[type=color]{width:50px;height:35px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.checkbox-control label{flex-direction:row;align-items:center;gap:.5rem;cursor:pointer}.checkbox-control input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}.action-buttons{display:flex;gap:.75rem;margin-bottom:1.5rem}.action-buttons button{flex:1;padding:.75rem;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.action-buttons .btn-primary{background:var(--primary);color:#fff;border:none}.action-buttons .btn-primary:hover{background:var(--primary-dark)}.action-buttons .btn-secondary{background:#fff;color:var(--text-primary);border:1px solid var(--border-color)}.action-buttons .btn-secondary:hover{background:var(--bg-secondary)}.code-preview{background:var(--bg-secondary);border:2px solid #d1d5db;border-radius:8px;padding:1rem;box-shadow:0 1px 3px #0000001a}.code-preview h4{font-size:.85rem;color:var(--text-secondary);margin-bottom:.75rem}.code-preview pre{background:#1e1e1e;color:#d4d4d4;padding:1rem;border-radius:6px;overflow-x:auto;font-size:.75rem;line-height:1.4;max-height:200px}.no-selection{display:flex;align-items:center;justify-content:center;height:300px;text-align:center}.no-selection p{color:var(--text-muted)}.saved-components{background:#fff;border-radius:12px;padding:1.5rem;margin-top:2rem;box-shadow:0 2px 8px #00000014}.saved-components h3{font-size:1rem;color:var(--text-primary);margin-bottom:1rem}.saved-grid{display:flex;flex-wrap:wrap;gap:1rem}.saved-item{background:var(--bg-secondary);border-radius:8px;padding:.75rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative}.saved-item svg{width:80px;height:60px}.saved-item span{font-size:.75rem;color:var(--text-secondary)}.saved-item button{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;border:none;background:var(--danger);color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.saved-item:hover button{opacity:1}.tips-section{background:#fff;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:.9rem;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: 1200px){.library-container{grid-template-columns:180px 1fr}.customization-panel{grid-column:1 / -1}}@media (max-width: 768px){.wireframe-component-library{padding:1rem}.library-container{grid-template-columns:1fr}.categories-panel{display:flex;flex-direction:column}.category-list{flex-direction:row;flex-wrap:wrap}.category-btn{flex:1;min-width:120px}.components-grid{grid-template-columns:repeat(2,1fr)}.action-buttons{flex-direction:column}}