.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cat-card { background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color .18s; }
.cat-card:hover { border-color: rgba(255,255,255,.1); }
.cat-thumb { width: 100%; height: 140px; object-fit: cover; background: var(--ink-3); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 2rem; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-body { padding: 14px 16px; }
.cat-name { font-weight: 700; font-size: .88rem; color: var(--text-1); margin-bottom: 4px; }
.cat-type { font-size: .7rem; color: var(--text-3); text-transform: capitalize; margin-bottom: 8px; }
.cat-price { display: flex; align-items: center; gap: 6px; }
.cat-coins { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700; color: var(--g); }
.cat-topup { font-size: .75rem; color: var(--text-3); }
.cat-stock { font-size: .72rem; color: var(--text-2); margin-top: 6px; }
.cat-inactive { opacity: .45; }
.cat-footer { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-3); font-size: .84rem; }
.badge-inactive { display: inline-block; padding: 1px 7px; border-radius: 100px; font-size: .65rem; font-weight: 600; background: rgba(239,68,68,.08); color: #f87171; border: 1px solid rgba(239,68,68,.18); margin-left: 6px; }
/* ── Delete modal ── */
.dlg-overlay { position:fixed;inset:0;z-index:3200;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px; }
.dlg-overlay.open { display:flex;animation:dlgIn .2s ease; }
@keyframes dlgIn{from{opacity:0}to{opacity:1}}
.dlg-panel { background:#14141e;border:1px solid rgba(255,255,255,.08);border-radius:20px;width:100%;box-shadow:0 24px 80px rgba(0,0,0,.7); animation:dlgRise .25s cubic-bezier(.34,1.3,.64,1); }
@keyframes dlgRise{from{transform:translateY(20px) scale(.96)}to{transform:none}}
.dlg-del { max-width:400px; }
.del-body { padding:28px 24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px; }
.del-icon-wrap { width:54px;height:54px;border-radius:14px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#f87171;animation:delPop .25s cubic-bezier(.34,1.56,.64,1) .05s both; }
@keyframes delPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.del-heading { font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800;color:var(--text-1); }
.del-sub { font-size:.83rem;color:var(--text-3);line-height:1.55; }
.del-name-chip { display:inline-block;padding:3px 10px;border-radius:6px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);color:#f87171;font-weight:700;font-size:.83rem;word-break:break-word;margin-top:2px; }
.del-warn { font-size:.74rem;color:#f87171;opacity:.8; }
.del-ft { padding:0 24px 22px;display:flex;gap:10px; }
.btn-del-cancel { flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--text-2);font-size:.87rem;font-weight:600;cursor:pointer;transition:all .15s; }
.btn-del-cancel:hover { border-color:rgba(255,255,255,.15);color:var(--text-1); }
.btn-del-confirm { flex:1;padding:10px;border-radius:10px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;color:#fff;font-size:.87rem;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px rgba(239,68,68,.25); }
.btn-del-confirm:hover { box-shadow:0 6px 22px rgba(239,68,68,.45);transform:translateY(-1px); }
.btn-del-confirm:active { transform:translateY(0); }