/* ===================================================== GRID */
.scroll{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:12px 14px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr)); gap:10px; }
.card{ position:relative; border-radius:var(--r-md); overflow:hidden; background:#111827; border:1px solid #1f2937; aspect-ratio:1/1; cursor:pointer; transition:transform var(--dur-fast); }
.card:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.card.sel{ box-shadow:0 0 0 2px var(--accent), 0 0 0 5px rgba(37,99,235,.22); }
.card.inpost{ box-shadow:0 0 0 2px #a78bfa, 0 0 0 5px rgba(167,139,250,.28); }
.card img{ width:100%; height:100%; object-fit:cover; display:block; background:var(--bg-1); }
.card .cardgrad{ position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(to top,rgba(2,6,23,.92),transparent); pointer-events:none; }
.card .tl{ position:absolute; top:6px; left:6px; display:flex; gap:4px; }
.card .tr{ position:absolute; top:6px; right:6px; display:flex; gap:4px; align-items:center; }
.card .bl{ position:absolute; left:8px; right:8px; bottom:7px; font-size:10px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rankbadge{ min-width:21px; height:19px; padding:0 5px; border-radius:6px; font-size:11px; font-weight:800; background:rgba(2,6,23,.85); display:flex; align-items:center; justify-content:center; line-height:1; letter-spacing:.02em; }
.card .hovgrad{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,6,23,.75),transparent 55%); opacity:0; transition:opacity .14s; pointer-events:none; }
.card:hover .hovgrad{ opacity:1; }
.card .cn-tl{ position:absolute; top:6px; left:6px; transition:transform var(--dur-fast); }
.card .cn-tr{ position:absolute; top:6px; right:6px; display:flex; align-items:center; gap:4px; }
.card .cn-bl{ position:absolute; left:6px; bottom:6px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.mediatag{ display:inline-flex; align-items:center; gap:3px; background:rgba(2,6,23,.82); border:1px solid #374151; border-radius:6px; padding:2px 6px; color:#e5e7eb; font-size:10px; font-weight:700; line-height:1; }
.card .cn-br{ position:absolute; right:6px; bottom:6px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.card .cardfav{ width:22px; height:22px; border-radius:6px; background:rgba(2,6,23,.72); display:flex; align-items:center; justify-content:center; }
.card .cardeye{ width:22px; height:22px; border-radius:6px; border:none; background:rgba(2,6,23,.72); display:flex; align-items:center; justify-content:center; color:#cbd5e1; cursor:pointer; }
.card .cardeye:hover{ background:rgba(2,6,23,.95); color:#fff; }
.card .composebtn{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:none; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#fff; background:var(--accent); border:none; border-radius:6px; padding:4px 9px; cursor:pointer; z-index:2; }
.card:hover .composebtn{ display:flex; }
.card.inpost .composebtn{ display:flex; }
.card .composebtn.on{ background:rgba(15,10,30,.85); color:#c4b5fd; border:1px solid #7c3aed; }
.card:hover .cn-tl, body.selmode .card .cn-tl{ transform:translateX(28px); }
.pill{ height:18px; padding:0 6px; border-radius:var(--r-full); font-size:9px; font-weight:700; display:flex; align-items:center; gap:3px; }
.pill.ok{ background:rgba(34,197,94,.16); color:#4ade80; }
.pill.warn{ background:rgba(245,158,11,.18); color:#fbbf24; }
.pill.err{ background:rgba(239,68,68,.18); color:#f87171; }
.pill.info{ background:rgba(37,99,235,.2); color:#93c5fd; }
.pill.set{ background:rgba(79,70,229,.22); color:#c7d2fe; }
.pill.solid{ color:#fff; }
.star{ color:#fbbf24; }
.star.off{ color:var(--text-3); }
.card .plus{ position:absolute; right:6px; bottom:6px; width:26px; height:26px; border-radius:var(--r-full); background:rgba(2,6,23,.7); color:var(--text-1); display:none; align-items:center; justify-content:center; }
.card:hover .plus{ display:flex; }
.card .plus:hover{ background:var(--accent); }
.card .peek{ position:absolute; left:6px; bottom:6px; width:26px; height:26px; border-radius:var(--r-full); background:rgba(2,6,23,.72); color:var(--text-1); display:none; align-items:center; justify-content:center; }
.card:hover .peek{ display:flex; }
.card:hover .bl{ opacity:0; }
.card .peek:hover{ background:var(--panel-2); }
.load-more{ display:flex; justify-content:center; padding:var(--sp-5); color:var(--text-3); }
.empty{ text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--text-3); }
.empty .ico{ width:40px; height:40px; margin:0 auto var(--sp-3); color:var(--border-strong); }