.sgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.sk { cursor:pointer; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.sk .t { aspect-ratio:1; background:radial-gradient(circle at 50% 40%, #332a47, var(--tile) 70%); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; text-align:center; padding:0; }
.sk .t span { padding:10px; }
.sk img { width:100%; height:100%; object-fit:contain; display:block; }
.sk .m { padding:6px 9px 8px; font-size:13px; color:var(--muted); flex:1; display:flex; flex-direction:column; gap:5px; }
.sk .m b { display:block; color:var(--text); font-size:15px; }
.sk .m .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk button { font:inherit; font-size:13px; padding:5px 8px; border-radius:7px; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; width:100%; }
.sk button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.sk button.on { background:#2f6b3a; border-color:#2f6b3a; color:#fff; }
.sk button:disabled { cursor:default; opacity:.9; }
.sk.bad { opacity:.6; }
.prefmsg { display:block; font-size:12px; color:#8fd18f; } .prefmsg.bad { color:#f08a8a; } .prefmsg:empty { display:none; }
.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 14px; }
.bar input, .bar select { font:inherit; padding:9px 11px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.bar input { flex:1 1 240px; max-width:420px; }
.bar .count { color:var(--muted); font-size:14px; }
.note { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--muted); font-size:14px; margin:0 0 14px; }
.sk .m .d { font-size:12px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sk .m .md { font-family:ui-monospace,monospace; font-size:12px; }
.src { color:var(--muted); font-size:13px; margin:14px 0 0; }
.sgrid.medium { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
.sgrid.medium .m .d.l { display:none; }
.sgrid.small { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px; }
.sgrid.small .m { padding:4px 6px 6px; font-size:11px; } .sgrid.small .m b { font-size:12px; } .sgrid.small .m .d, .sgrid.small .m .md { display:none; }
.sgrid.small button { font-size:11px; padding:3px 4px; }
.sgrid.tiny { grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:4px; }
.sgrid.tiny .m { padding:2px 4px 3px; } .sgrid.tiny .m b { font-size:11px; } .sgrid.tiny .m .n, .sgrid.tiny .m .d, .sgrid.tiny .m .md, .sgrid.tiny button, .sgrid.tiny .prefmsg { display:none; }
.sgrid.tiny .sk { border-radius:6px; }
@media (max-width: 600px) { .sgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sgrid.medium { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sgrid.small { grid-template-columns:repeat(4,minmax(0,1fr)); } .sgrid.tiny { grid-template-columns:repeat(5,minmax(0,1fr)); } }