/* HIT HOOT tools — theme store (/themes) and theme preview pages (/themes-preview/{id}). */

/* store */
.ts-slots { font-size: 13.5px; padding: 5px 12px; }
.ts-filter { margin: 0 0 18px; }
.ts-filter .hh-chip { font-size: 15px; padding: 6px 14px; }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.ts-card[hidden] { display: none; }
.ts-thumb { background: radial-gradient(ellipse at 50% 30%, #1d2a3b, #0b0f15 75%); }
.ts-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.ts-badge { z-index: 2; }
.ts-badge.prem { background: linear-gradient(90deg, #0080FF, #7A5CFF); border: 0; }
.ts-badge.ts-tag { left: auto; right: 10px; background: #FFB020; color: #07090D; }
.ts-open { position: absolute; inset: 0; z-index: 1; cursor: zoom-in; background: transparent; }
.ts-open:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.ts-meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ts-meta h3 { font-size: 24px; }
.ts-meta > p { margin: 0; color: var(--mut); font-size: 14.5px; line-height: 1.45; }
.ts-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-acts span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--mut); background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.ts-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.ts-row form { margin: 0; }
.ts-sp { flex: 1; }
.ts-use { font-size: 13px; color: var(--mut); }
.ts-note { margin: 0; font-size: 13px; color: var(--warn); }
.ts-dlg { width: min(1180px, calc(100vw - 24px)); padding: 16px; }
.ts-dlghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ts-dlghead h3 { margin: 0 !important; }
.ts-dlg iframe { display: block; width: 100%; aspect-ratio: 16 / 12.2; border: 0; border-radius: 12px; background: #0b0f15; }
@media (max-width: 560px) {
  .ts-grid { grid-template-columns: 1fr; }
  .ts-dlg iframe { aspect-ratio: 9 / 12; }
}

/* preview page (inside the card thumbnail or the dialog) */
body.ts-pv { margin: 0; height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #1d2a3b, #0b0f15 75%); color: #F2F6FB; font-family: Barlow, system-ui, sans-serif; color-scheme: dark; }
.ts-pvstage { position: absolute; inset: 0; }
.ts-pvstage iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
body.ts-pv.full { display: flex; flex-direction: column; overflow: auto; }
.ts-pv.full .ts-pvstage { position: relative; inset: auto; aspect-ratio: 16 / 9; flex: none; border-radius: 12px; overflow: hidden;
  background: repeating-conic-gradient(#1a2130 0 25%, #121824 0 50%) 0 0 / 22px 22px; }
.ts-pvbar { padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 10px; }
.ts-pvbar .grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ts-pvbar b { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #8D99AB; width: 70px; }
.ts-pvbar button { font: 600 14px Barlow, sans-serif; color: #c9d3e0; background: #161B24; border: 1px solid #232B38; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.ts-pvbar button.on { color: #fff; border-color: #0080FF; background: #0080FF33; }
.ts-pvbar p { margin: 0; font-size: 13px; color: #8D99AB; }