*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}:root{--bg: #0d1f0d;--surface: #1a3320;--surface-2: #224428;--accent: #2d6a2d;--accent-bright:#4caf50;--text: #d4edda;--text-muted: #7fb87f;--search-bg: #122612}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;min-height:100vh}#app-wrapper{display:flex;flex-direction:column;min-height:100vh}header{position:sticky;top:0;z-index:10;background:var(--surface);padding:.85rem 1.25rem;border-bottom:1px solid var(--accent);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}h1{color:var(--accent-bright);font-size:1.3rem;white-space:nowrap;flex-shrink:0}input[type=search]{flex:1;min-width:160px;background:var(--search-bg);border:1px solid var(--accent);border-radius:6px;color:var(--text);padding:.45rem .75rem;font-size:1rem;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=search]:focus{border-color:var(--accent-bright);box-shadow:0 0 0 2px #4caf5040}input[type=search]::placeholder{color:var(--text-muted)}.filter-btn{background:var(--search-bg);color:var(--text-muted);border:1px solid var(--accent);border-radius:6px;padding:.45rem .85rem;font-size:.85rem;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.filter-btn:hover{background:var(--surface-2);border-color:var(--accent-bright)}.filter-btn.active{background:var(--accent);border-color:var(--accent-bright);color:var(--text)}.nav-link{color:var(--accent-bright);text-decoration:none;font-size:.85rem;white-space:nowrap;flex-shrink:0;border:1px solid var(--accent);border-radius:6px;padding:.4rem .7rem;transition:background .15s,border-color .15s}.nav-link:hover{background:var(--surface-2);border-color:var(--accent-bright)}main{flex:1;padding:.75rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.card{background:var(--surface);border:1px solid var(--accent);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.card:hover{transform:translateY(-2px);border-color:var(--accent-bright);background:var(--surface-2)}.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--search-bg)}.card .label{padding:.35rem .5rem;font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-actions{display:flex;gap:.25rem;padding:.4rem;border-top:1px solid var(--accent);background:#0003}.action-btn{flex:1;background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:4px;padding:.3rem .4rem;font-size:.65rem;cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.25rem;white-space:nowrap}.action-btn i{font-size:.75rem}.action-btn .btn-text{display:none}@media (min-width: 250px){.action-btn .btn-text{display:inline}}.action-btn:hover{background:var(--surface-2);border-color:var(--accent-bright)}.no-results{text-align:center;color:var(--text-muted);padding:3rem 1rem;font-size:1.1rem}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem}.modal img{max-width:90vw;max-height:78vh;object-fit:contain;border-radius:8px}.close{position:absolute;top:1rem;right:1rem;background:var(--surface);color:var(--accent-bright);border:1px solid var(--accent-bright);border-radius:50%;width:2.25rem;height:2.25rem;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.close:hover{background:var(--surface-2)}.modal-actions{display:flex;gap:.75rem}.modal-action-btn{background:var(--surface);color:var(--text);border:1px solid var(--accent);padding:.5rem 1rem;border-radius:6px;font-size:.95rem;cursor:pointer;font-weight:500;transition:background .15s,border-color .15s;display:flex;align-items:center;gap:.5rem;text-decoration:none}.modal-action-btn i{font-size:1rem}.modal-action-btn:hover{background:var(--surface-2);border-color:var(--accent-bright)}@media (max-width: 480px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}header{padding:.65rem .75rem;gap:.5rem}h1{font-size:1.1rem}}