:root{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-secondary: #64748b;--color-success: #10b981;--color-danger: #ef4444;--color-bg: #ffffff;--color-bg-secondary: #f8fafc;--color-bg-hover: #f1f5f9;--color-border: #e2e8f0;--color-text: #1e293b;--color-text-secondary: #64748b;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;margin:0}button{font-family:inherit;font-size:inherit;line-height:inherit;cursor:pointer;border:none;background:none;color:inherit}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}mark{background-color:#fef08a;color:inherit;padding:0 .125rem;border-radius:var(--radius-sm)}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:var(--spacing-md)}.spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:500;transition:all .2s}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover);text-decoration:none}.btn-secondary{background-color:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg-hover)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:.875rem}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:var(--spacing-md);color:var(--color-text-secondary);pointer-events:none}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 3rem;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;transition:all .2s}.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.search-clear{position:absolute;right:5rem;padding:var(--spacing-xs);color:var(--color-text-secondary);border-radius:var(--radius-sm)}.search-clear:hover{background-color:var(--color-bg-hover)}.search-clear:focus{outline:2px solid var(--color-primary);outline-offset:2px}.search-results{position:absolute;right:var(--spacing-md);color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.category-stats{display:flex;flex-direction:column;gap:var(--spacing-md)}.stats-summary{padding:var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.875rem;color:var(--color-text-secondary)}.stats-summary strong{color:var(--color-primary);font-size:1.125rem;font-weight:700}.category-list{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-xs)}.category-item{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);text-align:left;transition:all .2s;background-color:transparent}.category-item:hover{background-color:var(--color-bg-hover)}.category-item:focus{outline:2px solid var(--color-primary);outline-offset:2px}.category-item.active{background-color:var(--color-primary);color:#fff}.category-name{font-weight:500;font-size:.875rem}.category-count{background-color:#0000001a;padding:.125rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600}.category-item.active .category-count{background-color:#fff3}@media(max-width:768px){.category-stats{max-height:300px;overflow-y:auto}}.filter-panel{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-md) 0}.clear-filters{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-danger);color:#fff;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;transition:all .2s;align-self:flex-start}.clear-filters:hover{opacity:.9}.clear-filters:focus{outline:2px solid var(--color-danger);outline-offset:2px}.filter-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.filter-section-header{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) 0;background:none;border:none;cursor:pointer;text-align:left;width:100%;transition:opacity .2s}.filter-section-header:hover{opacity:.7}.filter-section-header h3{font-size:.875rem;font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:.05em;margin:0;flex:1}.active-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 var(--spacing-xs);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;line-height:1}.filter-chips{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.filter-chip{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.813rem;font-weight:500;transition:all .2s;white-space:nowrap}.filter-chip:hover{background-color:var(--color-bg-hover);border-color:var(--color-primary)}.filter-chip:focus{outline:2px solid var(--color-primary);outline-offset:2px}.filter-chip.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}@media(max-width:768px){.filter-panel{max-height:400px;overflow-y:auto}.filter-chips{max-height:200px;overflow-y:auto}}.tool-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.tool-list-empty{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;color:var(--color-text-secondary);font-size:1rem}.tool-card{padding:var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s}.tool-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.tool-card:focus{outline:2px solid var(--color-primary);outline-offset:2px}.tool-card.selected{border-color:var(--color-primary);background-color:var(--color-bg-secondary);box-shadow:var(--shadow-md)}.tool-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.tool-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--color-text-secondary)}.tool-icon img{width:16px;height:16px;object-fit:contain}.tool-name{flex:1;font-size:1rem;font-weight:600;color:var(--color-text);margin:0}.tool-shortlist-btn{padding:var(--spacing-xs);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all .2s}.tool-shortlist-btn:hover{background-color:var(--color-bg-hover);color:var(--color-primary)}.tool-shortlist-btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}.tool-shortlist-btn.active{color:#f59e0b}.tool-path{font-size:.813rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);line-height:1.4}.tool-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.tool-tag{padding:.125rem .5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75rem;color:var(--color-text-secondary);font-weight:500}@media(max-width:768px){.tool-card{padding:var(--spacing-sm)}.tool-name{font-size:.938rem}.tool-tags{max-height:50px;overflow-y:auto}}.tool-detail{display:flex;flex-direction:column;height:100%;background-color:var(--color-bg)}.detail-header{display:flex;justify-content:flex-end;padding:var(--spacing-md);border-bottom:1px solid var(--color-border)}.detail-close{padding:var(--spacing-xs);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all .2s}.detail-close:hover{background-color:var(--color-bg-hover);color:var(--color-text)}.detail-close:focus{outline:2px solid var(--color-primary);outline-offset:2px}.detail-content{flex:1;padding:var(--spacing-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.detail-title-section{display:flex;align-items:center;gap:var(--spacing-md)}.detail-icon{object-fit:contain}.detail-title-section h2{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0}.detail-path{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);font-size:.875rem;color:var(--color-text-secondary)}.detail-path strong{color:var(--color-text)}.detail-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.detail-actions .btn.active{background-color:#f59e0b;color:#fff;border-color:#f59e0b}.detail-url{padding:var(--spacing-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);font-size:.875rem;word-break:break-all}.detail-url strong{display:block;margin-bottom:var(--spacing-xs);color:var(--color-text)}.detail-url-link{color:var(--color-primary);text-decoration:none;font-family:monospace;font-size:.813rem}.detail-url-link:hover{text-decoration:underline}.detail-tags{display:flex;flex-direction:column;gap:var(--spacing-sm)}.detail-tags strong{color:var(--color-text);font-size:.938rem}.detail-tags-list{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.detail-tag{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.813rem;color:var(--color-text-secondary);font-weight:500}.detail-related{display:flex;flex-direction:column;gap:var(--spacing-sm);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.detail-related h3{font-size:1.125rem;font-weight:600;color:var(--color-text);margin:0}.detail-related ul{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-sm)}.detail-related li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);transition:all .2s}.detail-related li:hover{background-color:var(--color-bg-hover)}.detail-related a{color:var(--color-primary);font-weight:500;flex:1}.related-category{font-size:.75rem;color:var(--color-text-secondary);white-space:nowrap}@media(max-width:1200px){.detail-content{padding:var(--spacing-md)}.detail-title-section h2{font-size:1.25rem}.detail-actions{flex-direction:column}.detail-actions .btn{width:100%;justify-content:center}}.shortlist-view{display:flex;flex-direction:column;gap:var(--spacing-lg)}.shortlist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;gap:var(--spacing-md);color:var(--color-text-secondary);min-height:400px}.shortlist-empty svg{color:var(--color-border)}.shortlist-empty h2{font-size:1.5rem;font-weight:600;color:var(--color-text);margin:0}.shortlist-empty p{font-size:1rem;color:var(--color-text-secondary);max-width:400px}.shortlist-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.shortlist-header h2{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0}.btn-clear-shortlist{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-danger);color:#fff;border-radius:var(--radius-md);font-weight:500;font-size:.875rem;transition:all .2s}.btn-clear-shortlist:hover{opacity:.9}.btn-clear-shortlist:focus{outline:2px solid var(--color-danger);outline-offset:2px}.shortlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}.shortlist-card{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all .2s}.shortlist-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.shortlist-card-header{display:flex;align-items:center;gap:var(--spacing-sm)}.shortlist-card-header img{object-fit:contain}.shortlist-card-header h3{flex:1;font-size:1rem;font-weight:600;color:var(--color-text);margin:0}.shortlist-remove{padding:var(--spacing-xs);color:#f59e0b;border-radius:var(--radius-sm);transition:all .2s}.shortlist-remove:hover{background-color:var(--color-bg-hover)}.shortlist-remove:focus{outline:2px solid var(--color-primary);outline-offset:2px}.shortlist-path{font-size:.813rem;color:var(--color-text-secondary);line-height:1.4}.shortlist-actions{display:flex;gap:var(--spacing-xs);margin-top:auto;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}.shortlist-actions .btn{flex:1;justify-content:center;font-size:.875rem}@media(max-width:1024px){.shortlist-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media(max-width:768px){.shortlist-grid{grid-template-columns:1fr}.shortlist-header{flex-direction:column;align-items:flex-start}.btn-clear-shortlist{width:100%;justify-content:center}}.app{display:flex;flex-direction:column;min-height:100vh}.header{background-color:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--spacing-lg) var(--spacing-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap}.header-content h1{font-family:Sansation,sans-serif;font-size:1.875rem;font-weight:700;margin-bottom:var(--spacing-xs);color:var(--color-text)}.header-content p{color:var(--color-text-secondary);font-size:.938rem}.header-actions{display:flex;gap:var(--spacing-sm)}.view-toggle{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);background-color:var(--color-bg-secondary);color:var(--color-text-secondary);transition:all .2s}.view-toggle:hover{background-color:var(--color-bg-hover)}.view-toggle.active{background-color:var(--color-primary);color:#fff}.main-content{display:grid;grid-template-columns:280px 1fr auto;flex:1;overflow:hidden}.sidebar{background-color:var(--color-bg-secondary);border-right:1px solid var(--color-border);padding:var(--spacing-lg);overflow-y:auto}.sidebar-section{margin-bottom:var(--spacing-xl)}.sidebar-section h2{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-text)}.filter-toggle{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);font-weight:500;transition:all .2s}.filter-toggle:hover{background-color:var(--color-bg-hover)}.filter-count{margin-left:auto;background-color:var(--color-primary);color:#fff;padding:.125rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600}.content{padding:var(--spacing-lg) var(--spacing-xl);overflow-y:auto;max-height:calc(100vh - 140px)}.search-section{margin-bottom:var(--spacing-lg)}.detail-panel{width:400px;background-color:var(--color-bg);border-left:1px solid var(--color-border);overflow-y:auto}@media(min-width:1600px){.detail-panel{width:500px}}@media(min-width:1920px){.detail-panel{width:600px}}@media(max-width:1200px){.detail-panel{position:fixed;right:0;top:0;bottom:0;z-index:1000;box-shadow:var(--shadow-lg)}}@media(max-width:768px){.main-content{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;top:0;bottom:0;z-index:999;transition:left .3s}.sidebar.open{left:0}}