/* NanoBananos — clean white / premium UI
   Keep class names stable; only visual refresh.
*/

:root{
  --bg:#f6f7fb;
  --teal:#2dd4bf;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#fbfbfe;
  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);
  --shadow:0 12px 40px rgba(17,24,39,.08);
  --shadow2:0 6px 20px rgba(17,24,39,.06);
  --accent:#111827;      /* premium black */
  --accent2:#2563eb;     /* clean blue */
  --bad:#dc2626;
  --ok:#16a34a;
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(700px 500px at 80% 10%, rgba(17,24,39,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), #ffffff);
  color:var(--text);
  padding-bottom: 88px; /* space for bottomNav */
}

a{ color: var(--accent2); text-decoration:none; }
a:hover{ text-decoration:underline; }

.bgGlow{ display:none; }

.wrap{ max-width:1180px; margin:0 auto; padding:18px; }

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:10;
  background: rgba(246,247,251,.75);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}

/* ===== Bottom navigation ===== */
.bottomNav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 76px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:space-between;
  background: rgba(246,247,251,.88);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  z-index: 999;
}
.navItem{
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 16px;
  padding: 8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color: var(--muted);
  cursor:pointer;
}
.navItem.active{ color: var(--text); }
.navItem.active .navIcon{ color: rgba(45, 212, 191, .95); }
.navIcon{ font-size: 18px; line-height: 18px; }
.navText{ font-size: 11px; }
.navCreate{
  flex: 1.1;
  background: linear-gradient(135deg, rgba(17,24,39,.95), rgba(17,24,39,.90));
  color:#fff;
  box-shadow: var(--shadow);
  transform: translateY(-10px);
}
.navCreate .navText{ font-weight:700; }
.headerInner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:44px; height:44px;
  border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(17,24,39,.10), rgba(37,99,235,.10));
  border:1px solid var(--line);
}
.brandName{ font-weight:800; letter-spacing:.2px; }
.brandSub{ color:var(--muted); font-size:12px; margin-top:2px; }

.nav{ display:flex; align-items:center; gap:10px; }
.navLink{
  color: var(--text);
  padding:9px 12px;
  border:0;
  border-radius:14px;
  background: rgba(255,255,255,.0);
  cursor:pointer;
  box-shadow: none;
  transition: transform .12s ease, opacity .12s ease;
}
.navLink:hover{ text-decoration:none; transform: translateY(-1px); opacity:.92; }

/* Header pill: thin turquoise outline */
.headerPill{
  box-shadow: 0 0 0 1px rgba(45, 212, 191, .12) inset;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.0);
  border: 1px solid rgba(45, 212, 191, .55); /* teal */
  color: var(--text);
  font-size:12px;
}
.headerPill b{ font-weight:800; }
.headerPill .muted{ padding:0; border:0; background:transparent; color:var(--muted); }

.headerBtn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.6);
  color: var(--text);
  font-weight:700;
  cursor:pointer;
}
.headerBtnSmall{
  padding:6px 10px;
  font-size:12px;
}
.headerBtn:hover{ opacity:.92; }

.chip{ display:none; }

/* ===== Segmented control ===== */
.seg{
  display:inline-flex;
  gap:0;
  border:1px solid rgba(17,24,39,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  overflow:hidden;
}
.segBtn{
  border:0;
  background: transparent;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  cursor:pointer;
}
.segBtn.active{
  color: var(--text);
  background: rgba(45, 212, 191, .12);
}

/* ===== File previews ===== */
.filesPreview{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.fileThumb{
  width:72px;
  height:72px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  object-fit:cover;
  box-shadow: var(--shadow2);
}

/* ===== Layout ===== */
.mainGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .mainGrid{ grid-template-columns: 1fr; }
}

.sectionTitle h2{ margin:0; font-size:18px; }
.sectionTitle p{ margin:6px 0 0; color:var(--muted); font-size:13px; }

/* ===== Panels / Controls ===== */
.panel{
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow2);
  margin-bottom:12px;
}
.panelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.panelHead h3{ margin:0; font-size:15px; }
.mutedSmall{ color:var(--muted); font-size:12px; }


.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.col{ flex:1; min-width:160px; }

.lbl{ display:block; margin:10px 0 6px; color:var(--muted); font-size:12px; }

textarea, select, .input{
  width:100%;
  background: rgba(255,255,255,.98);
  color: var(--text);
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: 10px 12px;
  outline:none;
  box-shadow: 0 1px 0 rgba(17,24,39,.03);
}
textarea{ resize: vertical; }
textarea:focus, select:focus, .input:focus{
  border-color: rgba(37,99,235,.50);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.btn{
  background: rgba(255,255,255,.98);
  color: var(--text);
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow2);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary{
  background: linear-gradient(135deg, rgba(17,24,39,.95), rgba(17,24,39,.90));
  color: #fff;
  border-color: rgba(17,24,39,.25);
}

.file{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px dashed rgba(17,24,39,.20);
  border-radius:14px;
  cursor:pointer;
  color:var(--muted);
  background: rgba(255,255,255,.85);
}
.file:hover{ border-color: rgba(37,99,235,.35); }
.file input{ display:none; }

.out{ margin-top:12px; display:grid; gap:10px; }
.img{ width:100%; border-radius:16px; border:1px solid rgba(17,24,39,.12); box-shadow: var(--shadow2); background: #fff; }
.vid{ width:100%; border-radius:16px; border:1px solid rgba(17,24,39,.12); background:#000; box-shadow: var(--shadow2); }

.log{
  margin:0;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: 10px;
  min-height: 120px;
  white-space: pre-wrap;
  color: #0f172a;
}

.err{
  color: var(--bad);
  padding: 10px;
  border: 1px solid rgba(220,38,38,.22);
  border-radius: 14px;
  background: rgba(220,38,38,.06);
}
.muted{
  color: var(--muted);
  padding: 10px;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.98);
}

.metaRow{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  border:1px solid rgba(17,24,39,.12);
  padding:4px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:11px;
  background: rgba(255,255,255,.8);
}
.pill.ok{ border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); color: #065f46; }
.pill.warn{ border-color: rgba(245,158,11,.28); background: rgba(245,158,11,.10); color: #92400e; }
.pill.bad{ border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08); color: #991b1b; }

/* ===== Templates grid ===== */
.templates{
  display:grid;
  grid-template-columns: 1fr; /* premium feed */
  gap:14px;
  margin:12px auto 0;
  max-width: 760px;
}
@media (min-width: 980px){
  .templates{ max-width: 1200px; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
}
@media (min-width: 1280px){
  .templates{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.tcard{
  display:grid;
  grid-template-columns: 1fr; /* media on top */
  gap:12px;
  align-items:stretch;
  padding:12px;
  border-radius: 22px;
  border:1px solid rgba(45,212,191,.35) !important;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(45,212,191,.25), 0 0 26px rgba(45,212,191,.18), var(--shadow2) !important;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tcard:hover{ transform: translateY(-1px); box-shadow: var(--shadow); border-color: rgba(37,99,235,.22); }
.tcard.active{ border-color: rgba(45, 212, 191, .55); box-shadow: 0 0 0 3px rgba(45, 212, 191, .10), var(--shadow); }

.tmedia{
  position: relative;
  border-radius:18px;
  overflow:hidden;
}
.tmedia:after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 60%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}
.tbadge{
  position:absolute;
  left:12px; top:12px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#0f172a;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(17,24,39,.10);
}
.tfav{
  position:absolute;
  right:12px; top:10px;
  z-index:2;
  width:36px; height:36px;
  border-radius: 12px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.82);
  color:#0f172a;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.tfav.on{ color: #0f766e; border-color: rgba(45, 212, 191, .45); }

.timg{
  width:100%;
  height: 260px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background: #fff;
  display:block;
}
@media (max-width: 420px){
  .timg{ height: 220px; }
}
.tbody{ min-width:0; }
.ttitle{ margin:0; font-weight:900; font-size:15px; letter-spacing:.1px; }
.tsub{ margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.35; }
.tmeta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
/* hide meta chips on main cards */
.templates .tmeta{ display:none !important; }

/* ===== Footer ===== */
.footer{ margin-top:10px; border-top:1px solid var(--line); background: rgba(255,255,255,.65); }
.footerInner{ display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }

/* ===== Modal ===== */
.modalBackdrop{
  position:fixed; inset:0;
  background: rgba(17,24,39,.35);
  backdrop-filter: blur(4px);
  z-index:50;
}
.modal{
  position:fixed;
  left:50%; top:60px;
  transform: translateX(-50%);
  width:min(980px, calc(100% - 24px));
  max-height: calc(100% - 90px);
  overflow:auto;
  z-index:60;
  background: rgba(255,255,255,.98);
  border:1px solid rgba(17,24,39,.12);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
#welcomeModal{
  width:min(420px, 92vw);
  left:50% !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  max-height: min(86vh, 760px);
  box-shadow: 0 0 0 1px rgba(45,212,191,.25), 0 0 26px rgba(45,212,191,.18), var(--shadow);
}
#welcomeModal .modalBody{ padding-bottom: 16px; }
#welcomeModal .modalTitle, #welcomeModal .modalSub{ text-align:center; }
#welcomeModal .modalBody{ text-align:left; }
#welcomeModal #welcomeOk{ background: rgba(45,212,191,1); color:#0f172a; border:0; font-weight:800; }
.modalHead{
  position:sticky; top:0;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(17,24,39,.10);
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.modalTitle{ font-weight:900; }
.modalSub{ color:var(--muted); font-size:12px; margin-top:4px; }
.modalBody{ padding:14px; padding-bottom: calc(14px + 76px); }

.profileTop{ display:flex; gap:12px; align-items:center; }
.avatar{ width:52px; height:52px; border-radius:16px; border:1px solid rgba(17,24,39,.10); object-fit:cover; background:#fff; }
.profileName{ font-weight:900; color:#111; display:block; }
.profileNick{ display:none; }

/* Credits cards */
.creditsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  flex: 1;
  min-width: 220px;
}
.creditCard{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.85);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
}
.creditCard:before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width: 3px;
  background: rgba(45, 212, 191, .85);
}
.creditCard:after{
  content:'';
  position:absolute;
  left:-40px; top:-40px;
  width:140px; height:140px;
  background: radial-gradient(circle at 30% 30%, rgba(45, 212, 191, .20), transparent 55%);
  pointer-events:none;
}
.creditTop{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.creditTop .creditIcon{ filter: saturate(1.2); }
.creditIcon{ font-size:14px; }
.creditLabel{ font-weight:800; letter-spacing:.2px; }
.creditNum{ font-size:24px; font-weight:900; margin-top:6px; color: var(--text); letter-spacing:.2px; }
.creditSub{ font-size:11px; color: var(--muted); margin-top:2px; }
@media (max-width: 420px){
  .creditNum{ font-size:20px; }
}

.gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  max-width: 760px;
  margin: 0 auto;
}

.gcard{
  border:1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow2);
}
.gcard.flash{
  border-color: rgba(45, 212, 191, .75);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .18), var(--shadow);
}
.gmeta{ display:flex; gap:6px; flex-wrap:wrap; padding:10px; border-bottom:1px solid rgba(17,24,39,.08); }
.gmedia{ padding:10px; display:grid; gap:10px; }
.gactions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn.sm{ padding: 9px 10px; border-radius: 14px; box-shadow: none; }
.btn.sm:hover{ transform:none; }

/* Plans highlight (deep link) */
.planCard{
  background: linear-gradient(180deg,#1a1330,#130f25);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.planName{font-weight:800;font-size:16px;margin-bottom:6px;}
.planTokens{font-size:26px;font-weight:900;color:#ffd46a;margin-bottom:4px;}
.planPrice{font-size:18px;font-weight:700;margin-bottom:6px;}
.planApprox{font-size:12px;color:rgba(255,255,255,.75);margin-bottom:10px;}
.planCard .btn{width:100%;}

.planCard.planFocus{
  border-color: rgba(45, 212, 191, .65) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .16), var(--shadow) !important;
}
.tryTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(45, 212, 191, .55);
  background: rgba(45, 212, 191, .10);
  color: #0f766e;
  font-weight: 900;
  font-size: 11px;
  margin-right:8px;
}
.gimg{ width:100%; border-radius:16px; border:1px solid rgba(17,24,39,.10); object-fit:cover; cursor:pointer; }
.gvid{ width:100%; border-radius:16px; border:1px solid rgba(17,24,39,.10); }
.gprompt{ padding:10px; color:var(--muted); font-size:12px; border-top:1px solid rgba(17,24,39,.08); }

.hidden{ display:none !important; }

/* ===== Video tips modal ===== */
#videoTipsModal{max-width:520px;}
#videoTipsModal .modalBody{display:grid;gap:10px;}
#videoTipsModal img{width:100%;height:auto;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.35);}
#videoTipsModal .modalFoot{position:sticky;bottom:0;background:transparent;padding:4px 0 0;}
#videoTipsModal .btn{min-width:110px;}
@media (max-width:480px){
  #videoTipsModal{width:92vw;max-width:92vw;}
  #videoTipsModal .modalFoot{flex-direction:row;}
  #videoTipsModal .btn{flex:1;}
}

/* ===== Toasts ===== */
.toastWrap{
  position: fixed;
  right: 14px;
  top: 74px;
  z-index: 80;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.toast{
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  color: var(--text);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  max-width: 320px;
  font-size: 13px;
}
.toast.show{ transform: translateY(0); opacity: 1; }
.toast.info{ border-color: rgba(37,99,235,.22); }
.toast.ok{ border-color: rgba(22,163,74,.22); }
.toast.bad{ border-color: rgba(220,38,38,.22); }

@media (max-width: 640px){
  .toastWrap{ left: 14px; right: 14px; top: 68px; }
  .toast{ max-width: none; }
  .row .btn{ width: 100%; }
  .row select{ flex: 1; min-width: 130px; }
}

/* ===== Cross-platform comfort (iOS/Android/desktop) ===== */
:root{
  --tap: 44px; /* recommended minimum touch target */
}

button, .btn, .navLink, select, .input, textarea, .file{
  -webkit-tap-highlight-color: transparent;
}

.btn, .navLink{
  min-height: var(--tap);
}

select, .input, textarea{
  min-height: var(--tap);
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* Keep layout breathable on small screens */
@media (max-width: 540px){
  .wrap{ padding: 14px; }
  .brandSub{ display:none; }
  .chip{ display:none; }
  .logo{ width:40px; height:40px; border-radius:14px; }
  .panel{ padding: 12px; }
  .btn{ padding: 10px 12px; }
  .tcard{ grid-template-columns: 1fr; }
  .timg{ width:100%; height:220px; }
}

/* Modals: full-height and safe-area friendly for iOS/Telegram in-app */
@media (max-width: 640px){
  .modal{
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    max-height: calc(100% - 20px);
    border-radius: 18px;
  }
  .modalHead{ padding: 12px; }
  .modalBody{ padding: 12px; }
}

@supports (padding: max(0px)){
  .modal{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  .toastWrap{ top: calc(68px + env(safe-area-inset-top)); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .btn, .navLink, .tcard{ transition:none !important; }
  .toast{ transition:none !important; }
}

/* Photo cards: make preview behave like video */
.tmedia .timg{
  width:100%;
  height:260px;
  object-fit:cover;
  background:#000;
  border:0;
}
@media (max-width: 420px){
  .tmedia .timg{ height:220px; }
}

/* photo-video unified preview */
.tmedia{ background:#000; height:260px; }
@media (max-width: 420px){ .tmedia{ height:220px; } }
.tmedia .timg{ width:100%; height:100%; object-fit:cover; border:0; border-radius:0; background:#000; }

/* Reduce photo card height */
.tmedia{ height:220px; }
@media (max-width: 420px){ .tmedia{ height:190px; } }

/* Prevent horizontal overflow (card frame fully visible) */
*{ box-sizing: border-box; }
html, body{ width:100%; overflow-x:hidden; }
.templates{ width:100%; max-width:100%; padding-right:12px; padding-left:12px; }
.tcard{ width:100%; }

/* unify photo/video media box */
.tmedia{ padding:0; }
.tmedia img.timg, .tmedia video.timg{ width:100%; height:100%; display:block; object-fit:cover; margin:0; border:0; border-radius:18px; }


/* ===== Mobile responsive pack (iPhone/Android) ===== */
*{ box-sizing:border-box; }
html, body{ width:100%; max-width:100%; overflow-x:hidden; }
body{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.wrap{ width:100%; max-width:100%; padding-left:12px; padding-right:12px; }
.headerInner{ flex-wrap:wrap; gap:10px; }
.nav{ flex-wrap:wrap; gap:8px; }
.headerPill{ max-width:100%; }
.modeTabs, .catTabs{ flex-wrap:wrap; gap:8px; }
.templates{ max-width:100%; width:100%; }
.tcard{ width:100%; }
.tmedia{ width:100%; height: clamp(190px, 42vw, 260px); }
.tmedia .timg{ width:100%; height:100%; object-fit:cover; }
.footer{ padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

@media (max-width: 480px){
  .tmedia{ height: clamp(180px, 48vw, 230px); }
  .modal{ top:10px; width: calc(100% - 16px); max-height: calc(100% - 20px); }
}

/* Photo cards: show full height (no crop) */
body[data-nb-mode="image"] .tmedia{
  height: auto !important;
  background:#000 !important;
  align-items:center;
  justify-content:center;
}
body[data-nb-mode="image"] .tmedia img,
body[data-nb-mode="image"] .tmedia video,
body[data-nb-mode="image"] .tcard .tmedia img,
body[data-nb-mode="image"] .tcard .tmedia video,
body[data-nb-mode="image"] .tmedia img.timg,
body[data-nb-mode="image"] .tmedia video.timg,
body[data-nb-mode="image"] .tmedia .timg{
  width:100% !important;
  height:auto !important;
  object-fit: contain !important;
  background:#000;
  display:block;
}

/* Photo cards: force full-height (no crop) everywhere */
.tmedia{ height:auto !important; }
.tmedia img,
.tmedia img.timg,
.tcard .tmedia img,
.tcard .tmedia img.timg,
.tmedia video,
.tmedia video.timg{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  background:#000;
  display:block;
}

/* Template preview in generator */
.tplPreview{
  border:1px solid rgba(17,24,39,.12);
  border-radius:16px;
  background:#111827;
  color:#fff;
  overflow:hidden;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
.tplPreview img, .tplPreview video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.genOnly .tplPreview{ background:#fff; }
body.genOnly .tplPreview img, body.genOnly .tplPreview video{
  height:auto;
  max-height:70vh;
  object-fit:contain;
}
body.genOnly .metaRow{ display:none !important; }
body.genOnly{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
body.genOnly.modalOpen{ overflow-y:auto !important; touch-action:auto !important; }
body.genOnly .modal{ position:relative !important; top:auto !important; transform:none !important; max-height:none !important; overflow:visible !important; }
body.genOnly #genModal{ position:relative !important; top:auto !important; max-height:none !important; overflow:visible !important; }
body.genOnly #genModal .modalBody{ height:auto !important; max-height:none !important; overflow:visible !important; }
@media (min-width:900px){
  body.genOnly .tplPreview img, body.genOnly .tplPreview video{ max-height:32vh; }
}

/* Responsive */
@media (max-width: 980px){
  .wrap{padding:0 16px;}
  .headerInner{flex-direction:column; gap:12px;}
  .headerRight{width:100%; justify-content:flex-start;}
}
@media (max-width: 640px){
  .header{padding:14px 0;}
  .brandName{font-size:18px;}
  .brandSub{font-size:12px;}
  .btn{padding:10px 12px; font-size:14px;}
  .input{font-size:14px;}
  .modal{width:96vw; max-width:96vw;}
  .panel{padding:14px;}
  .templates{padding:0 10px 40px;}
  .gcard{border-radius:14px;}
}

@media (min-width: 1100px){
  body{font-size:16px;}
  .wrap{max-width:1200px;}
  .headerInner{gap:18px;}
  .brandName{font-size:22px;}
  .brandSub{font-size:14px;}
  .btn{padding:12px 16px;font-size:15px;}
  .modal{max-width:920px;}
}


/* ===== Desktop modal tuning ===== */
@media (min-width: 900px){
  .modal{ top:40px; max-height: calc(100% - 80px); }
  #profileModal, #genModal, #historyModal, #pickerModal, #lightboxModal{ max-width: 860px; }
  #buyModal{ max-width: 760px; }
  #videoTipsModal{ max-width: 720px; }
}

#genModal{
  top:6px;
  max-height: calc(100vh - 12px);
}
#genModal .modalBody{
  height: calc(100vh - 160px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#genModal .tplPreview img,
#genModal .tplPreview video{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
@media (max-width: 600px){
  #genModal .modalBody{ height: auto; max-height: calc(100vh - 140px); overflow:auto; }
}

#lightboxModal{
  top:0;
  height:100vh;
  max-height:100vh;
  display:flex;
  flex-direction:column;
}
#lightboxModal .modalHead{
  position:sticky;
  top:0;
  background: rgba(255,255,255,.98);
  z-index:2;
}
#lightboxModal .modalBody{
  flex:1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
#lightboxBody img,
#lightboxBody video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  border-radius:16px;
}

#videoTipsModal img{ max-height: 340px; object-fit:contain; background:#000; }
#videoTipsModal .modalBody{ gap:12px; }

/* Profile header: avoid duplicated “Пользователь” */
.profileTop{ margin-bottom:6px; }



/* Prevent background scroll when modal open (mobile) */
body.modalOpen{ touch-action: none; overflow:hidden; }

/* Neon checkbox (offer) */
.checkbox-wrapper {
  --checkbox-size: 22px;
  --checkbox-color: #2dd4bf;
  --checkbox-shadow: rgba(45, 212, 191, 0.35);
  --checkbox-border: rgba(45, 212, 191, 0.7);
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 8px 10px;
  gap: 12px;
}
.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox-wrapper .checkmark {
  position: relative;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 2px solid var(--checkbox-border);
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 12px var(--checkbox-shadow);
  overflow: hidden;
  flex: 0 0 auto;
}
.checkbox-wrapper .checkmark::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--checkbox-color), #00ffcc);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0) rotate(-45deg);
}
.checkbox-wrapper input:checked ~ .checkmark::before {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.checkbox-wrapper .checkmark svg {
  width: 0;
  height: 0;
  color: #0f172a;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.checkbox-wrapper input:checked ~ .checkmark svg {
  width: 16px;
  height: 16px;
  transform: rotate(360deg);
}
.checkbox-wrapper:hover .checkmark {
  border-color: var(--checkbox-color);
  transform: scale(1.05);
  box-shadow: 0 0 16px var(--checkbox-shadow), 0 0 28px var(--checkbox-shadow), inset 0 0 8px var(--checkbox-shadow);
}
.checkbox-wrapper input:checked ~ .checkmark {
  animation: pulse 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 16px var(--checkbox-shadow); }
  50% { transform: scale(0.92); box-shadow: 0 0 24px var(--checkbox-shadow), 0 0 40px var(--checkbox-shadow); }
  100% { transform: scale(1); box-shadow: 0 0 16px var(--checkbox-shadow); }
}
.checkbox-wrapper .label {
  font-family: "Segoe UI", sans-serif;
  color: var(--checkbox-color);
  font-size: 14px;
  text-shadow: 0 0 10px var(--checkbox-shadow);
  opacity: 0.95;
  transition: all 0.3s;
}
.checkbox-wrapper:hover .label { opacity: 1; transform: translateX(4px); }
.checkbox-wrapper::after,
.checkbox-wrapper::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--checkbox-color);
  opacity: 0;
  transition: all 0.5s;
}
.checkbox-wrapper::before { left: -6px; top: 50%; }
.checkbox-wrapper::after { right: -6px; top: 50%; }
.checkbox-wrapper:hover::before { opacity: 1; transform: translateX(-8px); box-shadow: 0 0 10px var(--checkbox-color); }
.checkbox-wrapper:hover::after { opacity: 1; transform: translateX(8px); box-shadow: 0 0 10px var(--checkbox-color); }

/* Support button + chat modal */
.supportBtn{ position:relative; display:flex; justify-content:center; align-items:center; width:13rem; height:3rem; margin-top:10px; overflow:hidden; cursor:pointer; border-radius:5rem; border:double 4px transparent; background-image:linear-gradient(#212121,#212121), linear-gradient(137.48deg,#ffdb3b 10%,#fe53bb 45%,#8f51ea 67%,#0044ff 87%); background-origin:border-box; background-clip:content-box,border-box; transition:.5s; animation:gradient_301 5s ease infinite; }
.supportBtn strong{ z-index:2; font-size:12px; letter-spacing:2px; color:#fff; text-shadow:0 0 4px white; }
.supportStars{ position:absolute; z-index:-1; width:100%; height:100%; overflow:hidden; border-radius:5rem; }
.supportStars .stars{ position:relative; width:200rem; height:200rem; background:transparent; }
.supportStars .stars::before{ content:""; position:absolute; top:0; left:-50%; width:170%; height:500%; animation:animStar 60s linear infinite; background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size:50px 50px; opacity:.5; }
.supportStars .stars::after{ content:""; position:absolute; top:-10rem; left:-100rem; width:100%; height:100%; animation:animStarRotate 90s linear infinite; background-image: radial-gradient(#ffffff 1px, transparent 1%); background-size:50px 50px; }
.supportGlow{ position:absolute; display:flex; width:12rem; }
.supportGlow .circle{ width:100%; height:30px; filter:blur(2rem); animation:pulse_3011 4s infinite; z-index:-1; }
.supportGlow .circle:nth-of-type(1){ background: rgba(254, 83, 186, 0.636); }
.supportGlow .circle:nth-of-type(2){ background: rgba(142, 81, 234, 0.704); }
.supportBtn:hover{ transform:scale(1.05); }
.supportBtn:hover .supportStars{ z-index:1; background-color:#212121; }

#supportModal{ max-width:720px; background:#0b0f1a; color:#e2e8f0; border:1px solid rgba(255,255,255,.08); }
body.supportOnly #supportModal{ position:relative; top:auto; left:auto; transform:none; margin:20px auto; max-height:none; }
body.supportOnly .modalBackdrop{ display:none; }
.supportHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.supportTitle{ font-weight:700; }
.supportStatus{ color:#22c55e; font-size:12px; }
.supportBody{ max-height:55vh; overflow-y:auto; overflow-x:hidden; padding:14px; display:block; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; }
.supportMsg{ padding:10px 12px; border-radius:14px; max-width:75%; font-size:14px; line-height:1.4; word-break:break-word; margin:0 0 10px 0; }
.supportMsg img{ max-width:220px; width:100%; height:auto; border-radius:10px; cursor:pointer; }
.supportMsg .msgHead{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:700; }
.supportMsg .msgHead img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.supportMsg.admin .msgHead{ color:#fff; }
.supportMsg.user{ align-self:flex-end; background:linear-gradient(90deg,#7c3aed,#ec4899); color:#fff; }
.supportMsg.admin{ align-self:flex-start; background:rgba(255,255,255,.08); }
.supportMsg a{ color:#60a5fa; text-decoration:underline; }
.supportInput{ display:flex; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.08); }
.supportInput .input{ flex:1; background:rgba(255,255,255,.08); color:#e2e8f0; border:1px solid rgba(255,255,255,.12); }

/* video-create prompt modal spacing */
#vcPromptList{ padding-bottom: 80px; }

@media (max-width:600px){ .supportBtn{ width:100%; } .supportBody{ max-height:50vh; } }
body.genOnly #genOpenProfile, body.genOnly #genClose{ display:none !important; }

/* Gen-only page (no modals) */
body.genOnly header,
body.genOnly main,
body.genOnly #buyModal,
body.genOnly #buyBackdrop,
body.genOnly #historyModal,
body.genOnly #historyBackdrop,
body.genOnly #profileModal,
body.genOnly #modalBackdrop{
  display:none !important;
}
body.genOnly #genBackdrop{ display:none !important; }
body.genOnly #genModal{
  position:relative !important;
  left:auto !important; top:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:min(980px, calc(100% - 16px)) !important;
  max-height:none !important;
  box-shadow:none !important;
}
body.genOnly{ background:#f5f6fb; }

body.historyOnly header,
body.historyOnly main,
body.historyOnly #buyModal,
body.historyOnly #buyBackdrop,
body.historyOnly #profileModal,
body.historyOnly #modalBackdrop{
  display:none !important;
}
body.historyOnly #historyBackdrop{ display:none !important; }
body.historyOnly #historyModal{
  position:relative !important;
  left:auto !important; top:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:min(980px, calc(100% - 16px)) !important;
  max-height:none !important;
  box-shadow:none !important;
}

body.profileOnly header,
body.profileOnly main,
body.profileOnly #buyModal,
body.profileOnly #buyBackdrop,
body.profileOnly #historyModal,
body.profileOnly #historyBackdrop{
  display:none !important;
}
body.profileOnly #modalBackdrop{ display:none !important; }
body.profileOnly{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; background:#eef2f8 !important; padding-top:0 !important; }
body.profileOnly.modalOpen{ overflow-y:auto !important; touch-action:auto !important; }
html.profileOnly, body.profileOnly { height:auto !important; min-height:100%; overflow-y:auto !important; }
body.profileOnly .wrap{ margin-top:0 !important; padding-top:0 !important; }
body.profileOnly #profileModal{
  position:relative !important;
  left:auto !important; top:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:min(980px, calc(100% - 16px)) !important;
  max-height:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body.profileOnly .modalBody{ overflow:visible !important; max-height:none !important; }
body.profileOnly .modalBackdrop,
body.profileOnly .modalBackdrop.hidden,
body.profileOnly #modalBackdrop,
body.profileOnly #historyBackdrop,
body.profileOnly #buyBackdrop{ display:none !important; background:none !important; }
body.profileOnly .pageBg,
body.profileOnly .pageGlow,
body.profileOnly .pageBlur,
body.profileOnly .bgLayer{ display:none !important; }
body.profileOnly main{ overflow:visible !important; }
body.profileOnly .wrap, body.profileOnly .page{ overflow:visible !important; }
body.profileOnly #profileModal{ padding-bottom: 80px !important; }
body.profileOnly .modalBody{ padding-bottom: 60px !important; }

/* Intro video overlay */
.introOverlay{ position:fixed; inset:0; background:#000; display:flex; align-items:center; justify-content:center; z-index:9999; }
.introOverlay video{ width:100%; height:100%; object-fit:cover; }
.introOverlay.hidden{ display:none; }

/* History page: Android scroll fix */
body.historyOnly{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; background:#eef2f8 !important; padding-top:0 !important; }
body.historyOnly.modalOpen{ overflow-y:auto !important; touch-action:auto !important; }
html.historyOnly, body.historyOnly { height:auto !important; min-height:100%; overflow-y:auto !important; }
body.historyOnly .wrap{ margin-top:0 !important; padding-top:0 !important; }
body.historyOnly #historyModal{ position:relative !important; left:auto !important; top:auto !important; transform:none !important; margin:0 auto !important; width:min(980px, calc(100% - 16px)) !important; max-height:none !important; box-shadow:none !important; overflow:visible !important; padding-bottom:80px !important; }
body.historyOnly .modalBody{ overflow:visible !important; max-height:none !important; padding-bottom:60px !important; }

/* ===== Video editor ===== */
.videoEditLayout{ display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; padding-bottom:120px; }
.videoEditLeft{ min-width:0; }
.videoEditRight{ min-width:0; }
.videoEditPreview video{ width:100%; max-height:420px; border-radius:16px; background:#000; }
.videoClipItem{ border:1px solid var(--line); border-radius:14px; padding:10px; background:#fff; margin-bottom:10px; }
.videoClipItem.dragging{ opacity:.6; }
.videoClipHead{ display:flex; align-items:center; gap:10px; }
.videoClipHead .clipTitle{ font-size:12px; color:var(--muted); }
.videoClipRanges{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:8px; }
.videoClipRanges input[type=range]{ width:100%; }
@media (max-width: 900px){
  .videoEditLayout{ grid-template-columns:1fr; }
  #videoEditPage .modalBody{ -webkit-overflow-scrolling: touch; }
  #videoEditPage .videoClipItem{ will-change: transform; }
  #videoEditPage .videoClipItem video{ max-height:240px; }
}

/* ===== Desktop fit (ПК) ===== */
@media (min-width: 1024px){
  body{ padding-bottom: 88px; }
  .wrap{ max-width: 1400px; padding:16px 24px; }
  .panel{ margin-bottom:10px; }
  .row{ flex-wrap:nowrap; }
  .bottomNav{ position:fixed; bottom:0; left:0; right:0; height:76px; padding:10px 16px; margin-top:0; }
  .templates{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
  body.historyOnly #historyModal{ width:min(1200px, calc(100% - 24px)) !important; }
  #profileModal, #genModal, #historyModal, #pickerModal, #lightboxModal{ max-width: 1100px; }
  body.profileOnly #profileModal{ width:min(1100px, calc(100% - 24px)) !important; }
  body.profileOnly #profileModal .modalBody{ overflow:visible !important; }
  body.profileOnly #profileModal .creditsGrid{ flex-wrap:wrap; }
  body.profileOnly #profileModal .row{ flex-wrap:wrap; }
  body.profileOnly #profileModal .pTable{ width:100%; display:block; overflow-x:auto; }
  body.profileOnly #profileModal .supportBtn{ max-width:280px; }
  /* show full preview on ПК */
  #templates.templates > div > img:first-child,
  #templates.templates > div > video:first-child{ object-fit:contain !important; aspect-ratio:auto !important; height:auto !important; background:rgba(0,0,0,.04); }
  .gimg, .gvid{ object-fit:contain !important; height:auto !important; }
  body.historyOnly .gimg, body.historyOnly .gvid{ object-fit:contain !important; height:auto !important; max-height:70vh; }
}
body.historyOnly .modalBackdrop,
body.historyOnly .modalBackdrop.hidden,
body.historyOnly #modalBackdrop,
body.historyOnly #historyBackdrop,
body.historyOnly #buyBackdrop{ display:none !important; background:none !important; }
body.historyOnly .pageBg,
body.historyOnly .pageGlow,
body.historyOnly .pageBlur,
body.historyOnly .bgLayer{ display:none !important; }
body.historyOnly main{ overflow:visible !important; }
body.historyOnly .wrap, body.historyOnly .page{ overflow:visible !important; }

/* Auth card */
.authCard{ width:min(520px, calc(100% - 16px)); margin:16px auto; border-radius:22px; background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.92)); color:#e2e8f0; padding:20px; box-shadow:0 20px 60px rgba(15,23,42,.35); }
.authHero{ text-align:center; padding:6px 4px 12px; }
.authBrand{ font-weight:800; letter-spacing:.18em; font-size:12px; color:#94a3b8; }
.authTitle{ font-weight:800; font-size:18px; margin-top:6px; }
.authSub{ color:#94a3b8; font-size:12px; margin-top:4px; }
.authTabs{ display:flex; gap:8px; margin:8px 0 12px; background:rgba(255,255,255,.06); padding:6px; border-radius:12px; }
.authTab{ flex:1; border:none; background:transparent; color:#cbd5e1; padding:8px 10px; border-radius:10px; font-weight:600; cursor:pointer; }
.authTab.active{ background:linear-gradient(90deg,#7c3aed,#22d3ee); color:white; box-shadow:0 6px 18px rgba(34,211,238,.25); }
.authBody{ display:block; }
.authPane{ display:flex; flex-direction:column; gap:8px; }
.authLabel{ font-size:12px; color:#94a3b8; margin-top:4px; }
.authInput{ background:rgba(255,255,255,.08); border:1px solid rgba(148,163,184,.25); color:#e2e8f0; }
.authInput::placeholder{ color:#94a3b8; }
.authBtn{ margin-top:6px; width:100%; border-radius:12px; }
.authCard .btn.primary{ background:linear-gradient(90deg,#7c3aed,#ec4899); border:none; color:#fff; }
.authCard .btn{ background:rgba(255,255,255,.1); color:#e2e8f0; border:none; }
@media (max-width:900px){ .authCard{ width:min(560px, calc(100% - 20px)); } }
@media (max-width:600px){ .authCard{ width:calc(100% - 16px); padding:22px 18px; } }

/* Electric border table styles */
.purchasesTitle{ font-weight:800; margin:6px 0 2px; }
.purchasesSub{ color:var(--muted); font-size:12px; margin:0 0 10px; }
.electric-border{ --electric-border-color:#2dd4bf; position:relative; border-radius:18px; overflow:visible; isolation:isolate; padding:12px; background:rgba(255,255,255,.95); width:100%; }
.eb-layers{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; }
.eb-glow-1, .eb-glow-2, .eb-background-glow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-sizing:border-box; }
.eb-glow-1{ border:2px solid oklch(from var(--electric-border-color) l c h / 0.6); filter: blur(1px); }
.eb-glow-2{ border:2px solid oklch(from var(--electric-border-color) l c h); filter: blur(4px); }
.eb-background-glow{ z-index:-1; transform:scale(1.04); filter:blur(28px); opacity:.28; background: linear-gradient(-30deg, oklch(from var(--electric-border-color) l c h), transparent, var(--electric-border-color)); }
.eb-content{ position:relative; z-index:1; border-radius:inherit; overflow-x:auto; }
.pTable{ width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
.pTable th, .pTable td{ padding:8px 10px; text-align:left; border-bottom:1px solid rgba(17,24,39,.08); }
.pTable th{ font-weight:700; font-size:12px; color:#334155; background:rgba(15,23,42,.04); }
.pTable tr:last-child td{ border-bottom:none; }
@media (max-width:900px){ .pTable{ min-width:0; width:100%; } }
@media (max-width:600px){ .pTable{ font-size:12px; } .pTable th, .pTable td{ padding:7px 8px; } }

.modalBackdrop{ overscroll-behavior: contain; }
.modal{ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* FAQ page */
.faqPage{display:none; padding:16px 12px 60px;}
body.faqOnly .faqPage{display:block;}
body.faqOnly .mainGrid > :not(#faqPage){display:none;}
.faqTitleH2{font-size:20px; margin:6px 0 10px;}
.faqList{display:flex; flex-direction:column; gap:10px;}
.faqTopic{background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:14px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.04);}
.faqTitleBtn{width:100%; text-align:left; padding:12px 14px; border:0; background:#f8fafc; font-weight:600; font-size:15px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.faqBody{padding:12px 14px; display:flex; flex-direction:column; gap:10px;}
.faqBody img{max-width:100%; border-radius:12px; display:block;}
.faqBody video{width:100%; border-radius:12px;}

/* FAQ topic page */
.faqTopicPage{display:none; padding:16px 12px 60px;}
body.faqTopicOnly .faqTopicPage{display:block;}
body.faqTopicOnly .mainGrid > :not(#faqTopicPage){display:none;}
.faqBack{display:inline-block; margin-bottom:10px; color:#111827; text-decoration:none;}