.component-nav{background:white;border-radius:20px;padding:20px;margin-bottom:24px;border:1px solid var(--gray-200)}.nav-search{margin-bottom:20px}.nav-search input{width:100%;padding:12px 20px;border:1px solid var(--gray-300);border-radius:40px;font-size:0.9rem;background:var(--gray-50);transition:all 0.2s}.nav-search input:focus{outline:none;border-color:var(--primary-color);background:white}.nav-categories{display:flex;flex-wrap:wrap;gap:10px}.cat-inner-btn{padding:8px 20px;border-radius:40px;border:none;background:var(--gray-100);cursor:pointer;font-size:0.85rem;transition:all 0.2s}.cat-inner-btn:hover{background:var(--gray-200)}.cat-inner-btn.active{background:var(--primary-color);color:white}.components-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:20px}.component-card{background:white;border-radius:16px;padding:20px;border:1px solid var(--gray-200);transition:all 0.3s;cursor:pointer}.component-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.1);border-color:var(--primary-light)}.component-icon{width:48px;height:48px;background:linear-gradient(135deg, var(--primary-light), var(--primary-color));border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.component-icon i{font-size:24px;color:white}.component-name{font-size:1.2rem;font-weight:600;margin-bottom:8px;color:var(--gray-800)}.component-tag{display:inline-block;padding:4px 12px;background:var(--gray-100);border-radius:20px;font-size:0.7rem;color:var(--gray-600);margin-bottom:12px}.component-desc{font-size:0.85rem;color:var(--gray-500);line-height:1.5}.component-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5)}.modal-container{position:relative;background:white;border-radius:24px;width:90%;max-width:700px;max-height:85vh;overflow-y:auto;z-index:1001;animation:modalFadeIn 0.3s ease}@keyframes modalFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--gray-200);position:sticky;top:0;background:white}.modal-header h2{font-size:1.3rem;color:var(--gray-800)}.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--gray-100);cursor:pointer;transition:all 0.2s}.modal-close:hover{background:var(--gray-200)}.modal-body{padding:24px}.modal-section{margin-bottom:24px}.modal-section h4{font-size:1rem;margin-bottom:12px;color:var(--gray-700);display:flex;align-items:center;gap:8px}.props-table{width:100%;border-collapse:collapse;font-size:0.85rem}.props-table th,.props-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--gray-200)}.props-table th{background:var(--gray-50);font-weight:600;color:var(--gray-700)}.code-wrapper{position:relative;background:#1e1e2e;border-radius:12px;overflow:hidden}.code-wrapper pre{margin:0;padding:20px;overflow-x:auto;font-size:0.8rem}.copy-code-btn{position:absolute;top:12px;right:12px;padding:6px 12px;background:rgba(255,255,255,0.1);border:none;border-radius:8px;color:white;cursor:pointer;font-size:0.75rem;transition:all 0.2s}.copy-code-btn:hover{background:rgba(255,255,255,0.2)}@media (max-width:768px){.components-list{grid-template-columns:1fr}.nav-categories{gap:8px}.cat-inner-btn{padding:6px 14px;font-size:0.75rem}.modal-container{width:95%;max-height:90vh}}