:root{--bg: #0f1216;--panel: #171b22;--line: #2a3240;--text: #e8edf5;--muted: #8b95a8;--accent: #d4a574;--accent-dim: #8a6848}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Vazirmatn,sans-serif}#catalog-app{max-width:1280px;margin:0 auto;padding:20px 20px 48px}.cat-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,var(--accent),var(--accent-dim));display:block;text-decoration:none}.brand strong{display:block;font-size:1.15rem}.brand p,.cat-status,.sub,.key{margin:0;color:var(--muted);font-size:.85rem}.cat-nav{display:flex;gap:10px;align-items:center}.cat-nav a,.ghost,.card{color:var(--text);text-decoration:none}.cat-nav a,.ghost{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 12px;font:inherit;cursor:pointer}.cat-toolbar{display:grid;grid-template-columns:1fr 200px auto;gap:10px;margin-bottom:14px}.cat-toolbar input,.cat-toolbar select{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit}.tog{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;white-space:nowrap}.cat-status{min-height:1.2em;margin-bottom:12px}.cat-status[data-kind=ok]{color:#8fd6a8}.cat-status[data-kind=warn]{color:#e0c07a}.cat-status[data-kind=err]{color:#f0a0a0}.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s ease,transform .15s ease}.card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}.thumb{aspect-ratio:4/3;background:#0a0e14;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.body{padding:12px;display:flex;flex-direction:column;gap:4px}.num{color:var(--accent);font-weight:600;font-size:.85rem}.body h3{margin:0;font-size:.98rem;line-height:1.35;font-weight:600}.key{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;direction:ltr;text-align:left}.empty{grid-column:1 / -1;text-align:center;color:var(--muted);padding:40px}@media(max-width:720px){.cat-toolbar{grid-template-columns:1fr}.cat-top{flex-direction:column;align-items:flex-start}}