/* Живой каталог бота: лёгкие слои без blur, пригодные для слабых телефонов. */
.i-nintendo { --src:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h5l8 12V3h5v18h-5L8 9v12H3z'/%3E%3C/svg%3E"); }
.live-catalog { content-visibility: auto; contain-intrinsic-size: 900px; }
.wrap[hidden] { display:none !important; }
/* Общий motion-слой страницы оставляет reveal-блок в лёгком параллаксе. На
   узком экране это сдвигало заголовок за край wrap и обрезало первые буквы. */
.live-catalog .sec-head { transform:none !important; }
.live-tools { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:22px 0 18px; }
.live-filters { display:flex; flex-wrap:wrap; gap:8px; }
.live-filter {
  min-height:40px; padding:8px 14px; border:1px solid rgba(143,169,255,.22);
  border-radius:999px; color:#cbd5f5; background:rgba(13,19,43,.86); cursor:pointer;
  font:700 13px/1.2 inherit;
}
.live-filter:hover, .live-filter:focus-visible, .live-filter.is-active {
  color:#fff; border-color:rgba(113,138,255,.8); background:linear-gradient(135deg,#5269e8,#7f55d9);
}
.live-search { flex:0 1 330px; }
.live-search input {
  width:100%; min-height:44px; box-sizing:border-box; padding:10px 15px;
  border:1px solid rgba(143,169,255,.25); border-radius:13px;
  color:#fff; background:rgba(10,15,35,.92); font:600 14px/1.25 inherit; outline:none;
}
.live-search input:focus { border-color:#8295ff; box-shadow:0 0 0 3px rgba(92,113,232,.18); }
.live-search input::placeholder { color:#8190b6; }
.live-status { padding:20px; text-align:center; color:#aeb9d8; border:1px dashed rgba(143,169,255,.24); border-radius:16px; }
.live-services { display:block; }
.live-group { margin-top:34px; scroll-margin-top:90px; }
.live-group:first-child { margin-top:0; }
.live-group-heading { margin:0 0 15px; }
.live-group-heading h3 { margin:0 0 5px; color:#f4f6ff; font:700 22px/1.2 var(--display,inherit); }
.live-group-heading p { max-width:760px; margin:0; color:#98a6c8; font-size:13px; line-height:1.5; }
.live-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.live-service { min-width:0; border:1px solid rgba(143,169,255,.18); border-radius:18px; overflow:hidden; background:rgba(10,15,34,.92); }
.live-service.is-open { grid-column:1 / -1; border-color:rgba(118,140,255,.48); }
.live-service-head {
  width:100%; min-height:86px; display:flex; align-items:center; gap:13px; padding:14px;
  border:0; color:#fff; text-align:left; background:linear-gradient(145deg,rgba(25,34,72,.96),rgba(15,20,46,.96)); cursor:pointer;
}
.live-service-head:hover, .live-service-head:focus-visible { background:linear-gradient(145deg,rgba(39,51,104,.98),rgba(23,29,64,.98)); }
.live-logo {
  width:50px; height:50px; flex:0 0 50px; display:grid; place-items:center; border-radius:14px;
  color:#fff; background:linear-gradient(145deg,rgba(101,124,255,.38),rgba(175,75,214,.25));
  border:1px solid rgba(255,255,255,.1); overflow:hidden;
}
.live-logo .lg { width:29px; height:29px; --tint:#fff; }
.live-logo-fallback { font:800 16px/1 inherit; letter-spacing:.03em; }
.live-service-copy { min-width:0; flex:1; display:grid; gap:5px; }
.live-service-copy h4 { margin:0; overflow-wrap:anywhere; font-size:15px; line-height:1.2; }
.live-service-copy small { color:#98a7cc; font-size:12px; line-height:1.25; }
.live-chevron { flex:0 0 auto; color:#94a7e8; font-size:18px; transition:transform .18s ease; }
.live-service.is-open .live-chevron { transform:rotate(180deg); }
.live-service-panel { padding:16px; background:rgba(7,11,27,.96); }

/* Claude и Perplexity — полноценные товарные плитки в стиле «Хитов
   нейросетей»: логотип в цветной шапке, описание и покупка без лишнего тапа. */
.live-brand-card {
  min-height:260px; display:flex; flex-direction:column; align-self:stretch;
  border-color:rgba(116,144,224,.34); background:#091126;
  box-shadow:0 12px 28px rgba(1,5,18,.26);
}
.live-brand-card.is-open { grid-column:1 / -1; }
.live-brand-art {
  height:112px; flex:0 0 112px; display:grid; place-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at 50% 44%,var(--brand-glow,rgba(109,133,255,.78)) 0,transparent 58%),
    linear-gradient(155deg,var(--brand-c1,#28366f),var(--brand-c2,#0b1127));
}
.live-brand-perplexity { --brand-c1:#0f4a52; --brand-c2:#06181c; --brand-glow:rgba(32,184,201,.82); }
.live-brand-claude { --brand-c1:#3a2018; --brand-c2:#0e0a09; --brand-glow:rgba(217,119,87,.78); }
.live-brand-openai { --brand-c1:#18382c; --brand-c2:#070d0a; --brand-glow:rgba(25,195,125,.75); }
.live-brand-googlegemini { --brand-c1:#1a2a5e; --brand-c2:#0a1024; --brand-glow:rgba(155,114,203,.78); }
.live-brand-youtube { --brand-c1:#3a1013; --brand-c2:#120607; --brand-glow:rgba(255,61,61,.8); }
.live-brand-xbox { --brand-c1:#125816; --brand-c2:#061408; --brand-glow:rgba(57,181,74,.78); }
.live-brand-playstation { --brand-c1:#003791; --brand-c2:#00123c; --brand-glow:rgba(0,112,209,.86); }
.live-brand-duolingo { --brand-c1:#1f4a12; --brand-c2:#0a1607; --brand-glow:rgba(88,204,2,.76); }
.live-brand-coursera { --brand-c1:#10346e; --brand-c2:#061128; --brand-glow:rgba(47,111,228,.82); }
.live-brand-figma { --brand-c1:#2a1830; --brand-c2:#0d0812; --brand-glow:rgba(162,89,255,.76); }
.live-brand-apple { --brand-c1:#2c2c2e; --brand-c2:#0c0c0d; --brand-glow:rgba(245,245,247,.72); }
.live-brand-windows { --brand-c1:#10365e; --brand-c2:#061020; --brand-glow:rgba(0,164,239,.82); }
.live-brand-googleplay { --brand-c1:#183b43; --brand-c2:#07151a; --brand-glow:rgba(66,133,244,.78); }
.live-brand-nintendo { --brand-c1:#742225; --brand-c2:#21090b; --brand-glow:rgba(230,0,18,.76); }
.live-brand-steam { --brand-c1:#173552; --brand-c2:#07121e; --brand-glow:rgba(102,192,244,.7); }
.live-brand-telegram { --brand-c1:#174667; --brand-c2:#071723; --brand-glow:rgba(42,171,238,.78); }
.live-brand-freefire { --brand-c1:#49311a; --brand-c2:#160d06; --brand-glow:rgba(255,164,41,.78); }
.live-brand-mobilelegends { --brand-c1:#263c73; --brand-c2:#0a1022; --brand-glow:rgba(64,132,255,.76); }
.live-brand-pubg { --brand-c1:#5b451b; --brand-c2:#1b1306; --brand-glow:rgba(240,185,52,.8); }
.live-brand-razer { --brand-c1:#15431f; --brand-c2:#07150a; --brand-glow:rgba(68,214,44,.76); }
.live-brand-tiktok { --brand-c1:#302036; --brand-c2:#0d0812; --brand-glow:rgba(254,44,85,.7); }
.live-brand-art .lg { width:50px; height:50px; --tint:#fff; filter:drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.live-razer-gold { width:106px; height:72px; object-fit:contain; filter:drop-shadow(0 7px 16px rgba(0,0,0,.38)); }
.live-brand-body { min-height:148px; flex:1; display:flex; flex-direction:column; gap:7px; padding:15px 16px 14px; }
.live-brand-title { margin:0; color:#f5f7ff; font:700 15px/1.3 var(--display,inherit); overflow-wrap:anywhere; }
.live-brand-description { color:#aab5d2; font-size:11px; line-height:1.4; }
.live-brand-footer { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px; }
.live-brand-price { color:#fff; font-size:14px; line-height:1; white-space:nowrap; }
.live-brand-actions { margin-left:auto; display:flex; align-items:center; gap:7px; }
.live-delivery-btn {
  min-height:36px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  padding:7px 10px; border:1px solid rgba(139,161,234,.3); border-radius:9px;
  color:#dce4ff; background:#111a39; font:750 10px/1.15 inherit; cursor:pointer;
}
.live-delivery-btn:hover,.live-delivery-btn:focus-visible { border-color:#8295ff; color:#fff; background:#192552; }
.live-brand-buy {
  min-height:36px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; padding:8px 13px; border:0; border-radius:9px;
  color:#24120b; background:linear-gradient(135deg,#ff9b51,#ff6e39);
  box-shadow:0 7px 16px rgba(255,111,55,.22); text-decoration:none;
  font:800 11px/1 inherit; cursor:pointer;
}
.live-brand-buy:hover, .live-brand-buy:focus-visible { color:#180a05; background:linear-gradient(135deg,#ffb068,#ff7c43); transform:translateY(-1px); }
.live-brand-card > .live-service-panel { border-top:1px solid rgba(118,140,255,.22); }
.live-more { margin-top:14px; border:1px solid rgba(128,151,230,.2); border-radius:15px; background:rgba(9,14,32,.72); overflow:hidden; }
.live-more > summary { min-height:48px; display:flex; align-items:center; gap:10px; padding:10px 14px; color:#dbe2ff; cursor:pointer; list-style:none; font-weight:750; }
.live-more > summary::-webkit-details-marker { display:none; }
.live-more > summary small { margin-left:auto; color:#8493b9; font-size:11px; }
.live-more > summary::after { content:'+'; color:#91a5ee; font-size:19px; }
.live-more[open] > summary::after { content:'−'; }
.live-compact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:0 10px 10px; }
.live-compact-service { border-radius:13px; }
.live-compact-service.is-open { grid-column:1 / -1; }
.live-compact-service .live-service-head { min-height:72px; padding:10px; }
.live-compact-service .live-logo { width:42px; height:42px; flex-basis:42px; border-radius:11px; }
.live-regions { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; align-items:start; }
.live-region { min-width:0; border:1px solid rgba(139,161,234,.16); border-radius:13px; background:#0d142f; overflow:hidden; }
.live-region summary {
  min-height:48px; display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer;
  list-style:none; color:#e9edff; font-weight:700; font-size:13px;
}
.live-region summary::-webkit-details-marker { display:none; }
.live-region summary::after { content:'+'; margin-left:auto; color:#8398e7; font-size:18px; }
.live-region[open] summary::after { content:'−'; }
.live-flag { flex:0 0 auto; font-size:21px; line-height:1; }
.live-region-name { min-width:0; overflow-wrap:anywhere; }
.live-count { flex:0 0 auto; color:#8493b9; font-size:11px; font-weight:600; }
.live-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0 9px 10px; }
.live-item-row { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px; }
.live-item-row .live-delivery-btn { min-height:48px; max-width:72px; padding:6px 8px; }
.live-item {
  min-width:0; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border:1px solid rgba(126,151,241,.17); border-radius:10px;
  width:100%; color:#e8ecff; background:#121b3b; text-decoration:none; text-align:left;
  font:600 12px/1.25 inherit; cursor:pointer;
}
.live-item:hover, .live-item:focus-visible { border-color:#7188f4; background:#192552; }
.live-item-name { min-width:0; overflow-wrap:anywhere; }
.live-item-price { flex:0 0 auto; color:#9fe6bc; font-weight:800; white-space:nowrap; }
.live-empty { grid-column:1 / -1; padding:25px; text-align:center; color:#9dabce; }
.pay-claim { display:grid; gap:8px; margin-top:12px; padding:12px; border:1px solid rgba(119,145,255,.25); border-radius:12px; background:rgba(12,18,42,.76); }
/* `.btn` и `.pay-claim` задают display сами и иначе перебивают нативный [hidden].
   До подтверждения оплаты нельзя показывать ни кнопку выдачи, ни пустой код. */
#pay-bot[hidden], .pay-claim[hidden] { display:none !important; }
.pay-claim-row { display:flex; align-items:stretch; gap:7px; min-width:0; }
.pay-claim code { min-width:0; flex:1; padding:10px; border-radius:8px; background:#080d21; color:#b8c6ff; overflow-wrap:anywhere; font-size:12px; }
.pay-claim button { flex:0 0 auto; border:1px solid rgba(125,150,255,.36); border-radius:8px; color:#fff; background:#273974; padding:8px 10px; cursor:pointer; }
.pay-claim small { color:#9eacd0; line-height:1.4; }

@media (max-width:720px) {
  .live-tools { align-items:stretch; flex-direction:column; }
  .live-search { flex-basis:auto; }
  .live-feature-grid, .live-compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .live-group { margin-top:28px; }
  .live-group-heading h3 { font-size:19px; }
  .live-service-head { min-height:112px; align-items:flex-start; flex-direction:column; gap:9px; padding:12px; }
  .live-logo { width:42px; height:42px; flex-basis:42px; border-radius:12px; }
  .live-logo .lg { width:25px; height:25px; }
  .live-chevron { position:absolute; right:12px; top:13px; }
  .live-service-head { position:relative; }
  .live-service-copy small { font-size:11px; }
  .live-service-panel { padding:10px; }
  .live-regions { grid-template-columns:1fr; }
  .live-brand-card { min-height:236px; }
  .live-brand-art { height:92px; flex-basis:92px; }
  .live-brand-art .lg { width:42px; height:42px; }
  .live-brand-body { min-height:144px; padding:12px; }
  .live-brand-title { font-size:13px; }
  .live-brand-footer { flex-wrap:wrap; }
  .live-brand-actions { width:100%; margin-left:0; }
  .live-brand-actions > * { flex:1 1 0; }
  .live-compact-service .live-service-head { min-height:94px; }
}
@media (max-width:430px) {
  .live-feature-grid, .live-compact-grid { grid-template-columns:1fr; }
  .live-service-head { min-height:76px; align-items:center; flex-direction:row; }
  .live-items { grid-template-columns:1fr; }
  .pay-claim-row { flex-direction:column; }
  .pay-claim button { min-height:42px; }
  .live-brand-card { min-height:230px; }
  .live-brand-art { height:88px; flex-basis:88px; }
  .live-more > summary { min-height:52px; }
}
@media (hover:none), (prefers-reduced-motion:reduce) {
  .live-chevron { transition:none; }
  .live-service, .live-region, .live-item, .live-logo, .live-brand-buy { box-shadow:none !important; filter:none !important; }
  .live-brand-buy:hover { transform:none; }
}