:root{--bg-page:#f9fafb;--bg-card:#fff;--bg-preview:#f3f4f6;--text-main:#111827;--text-muted:#6b7280;--border-ui:#e5e7eb;--border-hover:#d1d5db;--accent:#000;--radius-lg:12px;--radius-md:8px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-page);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.5}.json-copier-container{max-width:1920px;margin:0 auto;padding:48px 24px}.main-layout{display:flex;align-items: flex-start;gap:48px}.sidebar{display:flex;position:sticky;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex-shrink:0;gap:32px;width:240px;height:calc(100vh - 96px);padding-right:16px;top:48px}.sidebar::-webkit-scrollbar{display:none}.sidebar-section{display:flex;flex-direction:column;gap:12px}.sidebar-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:11px;font-weight:700}.search-input{border:1px solid var(--border-ui);border-radius:var(--radius-md);background:var(--bg-card);width:100%;padding:10px 12px;transition:border-color .15s;font-family:inherit;font-size:14px}.search-input:focus{outline:none;border-color:var(--accent)}.category-list{display:flex;flex-direction:column;gap:2px}.category-button{text-align:left;border-radius:var(--radius-md);cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:8px 12px;transition:all .15s;font-family:inherit;font-size:14px}.category-button:hover{background:var(--bg-preview);color:var(--text-main)}.category-button.active{background:var(--text-main);color:var(--bg-card);font-weight:500}.content-area{flex:1}.empty-state{text-align:center;color:var(--text-muted);padding:120px 0}.header{margin-bottom:48px}.header h1{letter-spacing:-.01em;margin-bottom:4px;font-size:24px;font-weight:600}.header p{color:var(--text-muted);font-size:16px}.components-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.component-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-ui);overflow:hidden;display:flex;flex-direction:column;padding:12px}.component-preview{background:var(--bg-preview);border-radius:var(--radius-md);display:flex;position:relative;border:1px solid var(--border-ui);aspect-ratio:5/3;justify-content:center;align-items: center}.component-thumbnail{object-fit:contain;z-index:1;aspect-ratio:5/3;width:100%}.component-footer{padding-top:12px}.component-name{color:var(--text-main);margin-bottom:16px;font-size:16px;font-weight:500}.component-actions{display:flex;gap:8px}.copy-button{display:flex;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:var(--radius-md);color:var(--text-main);cursor:pointer;flex:1;justify-content:center;align-items: center;height:40px;transition:all .15s;font-size:14px;font-weight:500}.copy-button:hover{background:var(--bg-page);border-color:var(--border-hover)}.copy-button:active{background:var(--bg-preview)}.view-button{display:flex;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;justify-content:center;align-items: center;width:40px;height:40px;transition:all .15s}.view-button:hover{background:var(--bg-page);border-color:var(--border-hover);color:var(--text-main)}.loading{text-align:center;color:var(--text-muted);padding:80px;font-size:14px}.filters-bar{display:flex;align-items: center;gap:12px;margin-bottom:24px}.filter-select{border:1px solid var(--border-ui);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-main);cursor:pointer;min-width:160px;padding:8px 12px;font-size:14px}.filter-select:focus{outline:none;border-color:var(--accent)}.clear-filters-btn{border:1px solid var(--border-ui);border-radius:var(--radius-md);cursor:pointer;color:var(--text-muted);background:0 0;padding:8px 16px;transition:all .2s;font-size:14px}.clear-filters-btn:hover{border-color:var(--text-muted);color:var(--text-main)}