:root{
  --bg: var(--tg-theme-bg-color, #0f1115);
  --card: var(--tg-theme-secondary-bg-color, #181b22);
  --text: var(--tg-theme-text-color, #f2f3f5);
  --muted: var(--tg-theme-hint-color, #8b929e);
  --accent: var(--tg-theme-button-color, #e8b923);
  --accent-text: var(--tg-theme-button-text-color, #14161b);
  --line: rgba(255,255,255,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.hidden{display:none !important}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px}
.brand span{vertical-align:middle}
.status{font-size:12px;color:var(--muted)}

.searchwrap{padding:12px 16px}
#search{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-size:15px;outline:none}
#search:focus{border-color:var(--accent)}

.vip-banner{margin:0 16px 12px;padding:14px;border-radius:14px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg, rgba(232,185,35,.16), rgba(232,185,35,.04));
  border:1px solid rgba(232,185,35,.35)}
.vip-text{display:flex;flex-direction:column;gap:2px}
.vip-text b{font-size:15px}
.vip-text span{font-size:12px;color:var(--muted)}
.vip-btn{background:var(--accent);color:var(--accent-text);border:0;border-radius:10px;
  padding:10px 14px;font-weight:700;font-size:14px;white-space:nowrap}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:4px 16px 24px}
@media(min-width:520px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:transform .08s ease}
.card:active{transform:scale(.97)}
.cover{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800;color:#fff;text-align:center;padding:8px;line-height:1.1}
.meta{padding:10px}
.title{font-size:13px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.genre{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.price{font-size:12px;font-weight:700;color:var(--accent)}
.rating{font-size:11px;color:var(--muted)}

.loading,.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
.foot{text-align:center;color:var(--muted);font-size:11px;padding:8px 16px 24px}

.cover{position:relative}
.coverimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-fallback{position:relative;z-index:0}