* { box-sizing: border-box }
.accent-text, .hover\:accent-text:hover { color: var(--accent); transition: color 0.2s ease }
.bg-card { backdrop-filter: blur(10px); background-color: var(--card-bg); border: 1px solid var(--border) }
.card { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: var(--glass-bg); border-radius: 1.25rem; border: 1px solid var(--border); overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) }
.card.cursor-pointer:hover::after { background: var(--accent-gradient); bottom: 0; content: ""; left: 0; opacity: 0.02; pointer-events: none; position: absolute; right: 0; top: 0 }
.card::before { background: var(--accent-gradient); content: ""; height: 1px; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity 0.3s ease }
.card:active { transform: translatey(-6px) scale(1.015) }
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-primary), var(--shadow-secondary); transform: translatey(-8px) scale(1.02) }
.card:hover::before { opacity: 1 }
.clear-search-btn { align-items: center; background: var(--tag-bg); border-radius: 50%; border: none; color: var(--text-muted); cursor: pointer; display: flex; font-size: 0.8rem; height: 1.75rem; justify-content: center; opacity: 0; position: absolute; right: 0.75rem; top: 50%; transform: translatey(-50%); transition: all 0.3s ease; visibility: hidden; width: 1.75rem }
.clear-search-btn.visible { opacity: 1; visibility: visible }
.clear-search-btn:hover { background: var(--accent); color: white; transform: translatey(-50%) scale(1.05) }
.filter-btn-compact { background: var(--card-bg); border-radius: 0.625rem; border: 1px solid var(--border); color: var(--text-secondary); font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.025em; overflow: hidden; padding: 0.625rem 1rem; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.filter-btn-compact.active { background: var(--accent-gradient); border-color: transparent; box-shadow: 0 2px 8px rgba(240, 180, 79, 0.15); color: white; transform: translatey(-1px) }
.filter-btn-compact.active::before { left: 0 }
.filter-btn-compact::before { background: var(--accent-gradient); content: ""; height: 100%; left: -100%; position: absolute; top: 0; transition: left 0.3s ease; width: 100%; z-index: -1 }
.filter-btn-compact:focus, .search-input:focus { outline-offset: 2px; outline: 2px solid var(--accent) }
.filter-btn-compact:hover { background: var(--card-hover); border-color: var(--accent); color: white; transform: translatey(-1px) }
.filter-btn-compact:hover::before { left: 0 }
.filter-count { background: var(--tag-bg); border-radius: 0.75rem; color: var(--tag-text); font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 600; padding: 0.125rem 0.5rem }
.filter-section { display: flex; flex-direction: column; gap: 0.5rem }
.loading-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite }
.no-results-container { backdrop-filter: blur(15px); background: var(--glass-bg); border-radius: 1.5rem; border: 1px solid var(--border); margin: 4rem 0; padding: 4rem 2rem; text-align: center }
.quick-tag-compact { background: var(--tag-bg); border-radius: 1rem; border: 1px solid transparent; color: var(--tag-text); cursor: pointer; font-size: 0.7rem; font-weight: 500; padding: 0.375rem 0.75rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.quick-tag-compact:hover { background: var(--accent); border-color: var(--accent); color: white; transform: translatey(-1px) }
.search-container { flex: 1; position: relative }
.search-icon { color: var(--accent); font-size: 1.1rem; left: 1rem; position: absolute; top: 50%; transform: translatey(-50%); transition: all 0.3s ease; z-index: 10 }
.search-input { background: var(--card-bg); border-radius: 0.875rem; border: 2px solid var(--border); color: var(--text-primary); font-size: 1rem; font-weight: 500; padding: 1rem 1.25rem 1rem 3rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100% }
.search-input-wrapper { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.search-input::placeholder { color: var(--text-muted); font-weight: 400 }
.search-input:focus + .search-icon { color: var(--accent); transform: translatey(-50%) scale(1.05) }
.search-input:focus { background: var(--card-hover); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 180, 79, 0.1), var(--shadow-primary); outline: none; transform: translatey(-1px) }
.search-section { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: var(--glass-bg); border-radius: 1.25rem; border: 1px solid var(--border); box-shadow: var(--shadow-secondary); margin-bottom: 2rem; overflow: hidden; padding: 1.75rem; position: relative }
.search-section::before { background: var(--accent-gradient); content: ""; height: 2px; left: 0; opacity: 0.6; position: absolute; right: 0; top: 0 }
.search-suggestions { background: var(--card-bg); border-radius: 0.75rem; border: 1px solid var(--border); box-shadow: var(--shadow-primary); left: 0; margin-top: 0.5rem; max-height: 300px; opacity: 0; overflow-y: auto; position: absolute; right: 0; top: 100%; transform: translatey(-10px); transition: all 0.3s ease; visibility: hidden; z-index: 50 }
.search-suggestions.visible { opacity: 1; transform: translatey(0); visibility: visible }
.stats-display { align-items: center; backdrop-filter: blur(10px); background: var(--glass-bg); border-radius: 0.875rem; border: 1px solid var(--border); display: flex; justify-content: space-between; margin-bottom: 1.5rem; overflow: hidden; padding: 1.25rem 1.75rem; position: relative }
.stats-display::before { background: var(--accent-gradient); content: ""; height: 2px; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100% }
.stats-info { align-items: center; display: flex; gap: 1rem }
.stats-meta { align-items: flex-end; display: flex; flex-direction: column; gap: 0.25rem }
.stats-number { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background: var(--accent-gradient); font-family: "JetBrains Mono", monospace; font-size: 1.75rem; font-weight: 700 }
.suggestion-category { background: var(--tag-bg); border-radius: 0.5rem; color: var(--text-muted); font-size: 0.75rem; padding: 0.25rem 0.5rem }
.suggestion-icon { color: var(--accent); width: 1rem }
.suggestion-item { align-items: center; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 1rem; padding: 1rem 1.5rem; transition: all 0.2s ease }
.suggestion-item:hover { background: var(--card-hover) }
.suggestion-item:last-child { border-bottom: none }
.suggestion-text { flex: 1 }
.tag { background: var(--tag-bg); border-radius: 2rem; border: 1px solid transparent; color: var(--tag-text); font-family: "JetBrains Mono", monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; padding: 0.5rem 1rem; text-transform: uppercase; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
.tag:hover { border-color: var(--accent); transform: translatey(-1px) }
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-image: var(--gradient-mesh); background: var(--bg); color: var(--text-secondary); font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; line-height: 1.6; scroll-behavior: smooth; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
h1, h2, h3, h4, .font-plex { font-family: "JetBrains Mono", monospace }