/* ===========================
   QFAQS – Cyberpunk Neon City
   MOBILE SAFE PATCH (2026-01-03)
   - Desktop keeps neon blur
   - Mobile disables heavy GPU effects (backdrop-filter, big shadows, isolate, pseudo FX, heavy backgrounds)
=========================== */

:root{
  --qf-bg0:#07080c;
  --qf-bg1:#0b0f14;
  --qf-bg2:#0f131a;
  --qf-bg3:#121a24;

  --qf-cyan:#00d4ff;
  --qf-mag:#ff3cac;
  --qf-green:#00ff88;
  --qf-yellow:#ffd34d;

  --qf-text:rgba(255,255,255,.92);
  --qf-muted:rgba(255,255,255,.72);
  --qf-muted2:rgba(255,255,255,.60);

  --qf-line:rgba(255,255,255,.10);
  --qf-line2:rgba(255,255,255,.14);
  --qf-line3:rgba(255,255,255,.18);
}

.qfaqs-home{max-width:1160px;margin:0 auto;padding:22px 16px 50px;}
.qfaqs-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start;}

/* Desktop background (kept). Mobile will override below */
body{
  background:
    radial-gradient(1200px 680px at 18% -10%, rgba(0,212,255,.18) 0%, transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(255,60,172,.14) 0%, transparent 58%),
    radial-gradient(820px 620px at 50% 112%, rgba(0,255,136,.10) 0%, transparent 56%),
    radial-gradient(520px 360px at 78% 60%, rgba(255,211,77,.08) 0%, transparent 55%),
    var(--qf-bg0);
}

/* Desktop glass (kept). Mobile will disable blur below */
.qfaqs-hero,.qfaqs-section{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    rgba(15,19,26,.88);
  border:1px solid rgba(0,212,255,.10);
  border-radius:16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.qfaqs-hero{padding:18px;margin-bottom:14px;}
.qfaqs-hero h1{margin:0 0 6px;font-size:22px;line-height:1.1;color:var(--qf-text);}
.qfaqs-hero p{margin:0;color:var(--qf-muted);font-size:13px;}
.qfaqs-hero-tools{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}

.qfaqs-search{
  flex:1;min-width:220px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,15,20,.78);
  color:#fff;font-weight:900;outline:none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qfaqs-search:focus{
  border-color: rgba(0,212,255,.55);
  box-shadow: 0 0 0 3px rgba(0,212,255,.14), 0 0 18px rgba(0,212,255,.18);
}

.qfaqs-toggle{
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,15,20,.78);
  color:rgba(255,255,255,.92);font-weight:900;font-size:12px;cursor:pointer;user-select:none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qfaqs-toggle input{width:18px;height:18px}

.qfaqs-quicknav{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qfaqs-chip{
  display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.14);
  background:rgba(11,15,20,.72);
  color:rgba(255,255,255,.92);text-decoration:none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qfaqs-chip:hover{
  background:rgba(15,19,26,.82);
  border-color: rgba(0,212,255,.40);
  box-shadow: 0 0 0 3px rgba(0,212,255,.10);
}
.qfaqs-chip .n{opacity:.75;font-weight:900}

.qfaqs-section{padding:14px;margin-bottom:14px;}
.qfaqs-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.qfaqs-section-header h2{margin:0;font-size:16px;color:var(--qf-text);}

.qfaqs-count{
  display:inline-flex;min-width:26px;height:22px;padding:0 8px;border-radius:999px;
  align-items:center;justify-content:center;
  background:
    linear-gradient(90deg, rgba(0,212,255,.10), rgba(255,60,172,.08));
  border:1px solid rgba(0,212,255,.18);
  color:rgba(255,255,255,.92);font-weight:800;font-size:12px;
}

.qfaqs-list{display:grid;gap:10px;}

/* ===========================
   CARD
=========================== */
.qfaqs-card{
  display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;
  border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 70%),
    rgba(11,15,20,.82);
  text-decoration:none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;

  position: relative;
  padding-right: 64px;

  isolation: isolate;
}

.qfaqs-card::before,
.qfaqs-card::after{
  z-index: 1;
  pointer-events: none;
}

.qfaqs-card > *{
  position: relative;
  z-index: 2;
}

.qfaqs-card:hover{
  background:
    linear-gradient(180deg, rgba(0,212,255,.06), rgba(255,60,172,.04) 70%),
    rgba(15,19,26,.86);
  border-color: rgba(0,212,255,.55);
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,212,255,.45),
    0 0 22px rgba(0,212,255,.20);
}

.qfaqs-thumb{
  width:74px;height:54px;border-radius:12px;
  background:rgba(7,8,12,.75);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.qfaqs-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.qfaqs-title{
  margin:0;font-size:14px;color:var(--qf-text);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.qfaqs-date{
  font-size:11px;font-weight:900;color:rgba(255,255,255,.92);
  padding:6px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(18,26,36,.72);
  border:1px solid rgba(255,255,255,.12);
}

.qfaqs-date.is-today{
  border-color: rgba(0,255,136,.65);
  background: rgba(0,255,136,.16);
  box-shadow: 0 0 18px rgba(0,255,136,.16);
}

.qfaqs-empty{
  padding:14px 12px;border-radius:14px;border:1px dashed rgba(0,212,255,.22);
  color:rgba(255,255,255,.62);
  background:rgba(11,15,20,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.qfaqs-subline{
  margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  color:rgba(255,255,255,.66);font-size:12px;font-weight:800;
}
.qfaqs-subline .dot{opacity:.55;font-weight:900;}

.qfaqs-pill{
  display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.14);
}
.qfaqs-pill.is-done{background:rgba(110,110,110,.18);}
.qfaqs-pill.is-cancel{background:rgba(255,60,60,.16);border-color:rgba(255,60,60,.22);}
.qfaqs-pill.is-going{background:rgba(0,212,255,.14);border-color:rgba(0,212,255,.22);}
.qfaqs-pill.is-prod{background:rgba(255,60,172,.14);border-color:rgba(255,60,172,.22);}
.qfaqs-pill.is-shoot{background:rgba(255,211,77,.14);border-color:rgba(255,211,77,.22);}
.qfaqs-pill.is-unknown{background:rgba(255,255,255,.10);}

.qfaqs-sidebar{position:sticky;top:16px;}
.qfaqs-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.qfaqs-cat-link{
  display:flex;justify-content:space-between;gap:10px;align-items:center;text-decoration:none;
  padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:rgba(11,15,20,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qfaqs-cat-link:hover{
  background:rgba(15,19,26,.86);
  border-color: rgba(255,60,172,.50);
  box-shadow:
    0 0 0 1px rgba(255,60,172,.40),
    0 0 22px rgba(255,60,172,.16);
}
.qfaqs-cat-name{font-weight:900;color:rgba(255,255,255,.92);font-size:13px;}
.qfaqs-cat-count{color:rgba(255,255,255,.60);font-weight:900;font-size:12px;padding-left:8px;}

.qfaqs-filters{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);}
.qfaqs-filter-row{display:grid;gap:6px;margin-bottom:10px;}
.qfaqs-filter-label{color:rgba(255,255,255,.60);font-size:12px;font-weight:900;}

.qfaqs-filter-select{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(11,15,20,.78);
  color:#fff;font-weight:900;outline:none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qfaqs-filter-select:focus{
  border-color: rgba(0,212,255,.55);
  box-shadow: 0 0 0 3px rgba(0,212,255,.14);
}
.qfaqs-filter-select option{background:#0b0f14;color:#fff;}

.qfaqs-filter-actions{display:flex;gap:10px;align-items:center;margin-top:6px;}
.qfaqs-filter-btn{
  cursor:pointer;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(0,212,255,.28);
  background: linear-gradient(90deg, rgba(0,212,255,.18), rgba(255,60,172,.14));
  color:#fff;font-weight:900;
  box-shadow: 0 0 18px rgba(0,212,255,.10);
}
.qfaqs-filter-btn:hover{
  border-color: rgba(0,212,255,.50);
  box-shadow: 0 0 22px rgba(0,212,255,.16), 0 0 18px rgba(255,60,172,.10);
}
.qfaqs-filter-reset{color:rgba(255,255,255,.60);font-weight:900;text-decoration:none;}
.qfaqs-filter-reset:hover{color:rgba(255,255,255,.85);}

.qfaqs-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.qfaqs-page{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 10px;
  border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(11,15,20,.78);
  color:rgba(255,255,255,.85);text-decoration:none;font-weight:900;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qfaqs-page:hover{
  background:rgba(15,19,26,.86);
  border-color: rgba(0,212,255,.45);
  box-shadow: 0 0 0 3px rgba(0,212,255,.10);
}
.qfaqs-page.is-current{
  background: linear-gradient(90deg, rgba(0,212,255,.18), rgba(255,60,172,.14));
  border-color: rgba(0,212,255,.45);
  color:#fff;
  box-shadow: 0 0 22px rgba(0,212,255,.14);
}

@media (max-width:980px){
  .qfaqs-layout{grid-template-columns:1fr;}
  .qfaqs-sidebar{position:static;top:auto;}
}

@media (max-width:520px){
  .qfaqs-card{grid-template-columns:66px minmax(0,1fr) auto;}
  .qfaqs-thumb{width:66px;height:50px;}
  .qfaqs-cats{grid-template-columns:1fr;}
  .qfaqs-hero-tools{flex-direction:column;align-items:stretch}
  .qfaqs-search{min-width:0;width:100%}
  .qfaqs-toggle{justify-content:center}
  .qfaqs-toggle{min-width:0}
  .qfaqs-toggle span{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
}

.qfaqs-dayhead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin:14px 0 8px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);}
.qfaqs-dayname{font-weight:700;font-size:18px;line-height:1.2;}
.qfaqs-daydate{opacity:.75;font-size:14px;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;}

/* ==================================================
   БЕЙДЖ КАНАЛА / РЕКОМЕНДУЕМ (FIXED v3 - aggressive)
================================================== */

.qfaqs-card .qfaqs-mark{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;

  border-radius: 50% !important;
  overflow: hidden !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(11,15,20,.78);

  display: block;
  z-index: 50;
}

/* Для канала - используем ::after для изображения */
.qfaqs-card .qfaqs-mark.is-channel::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 1;
}

/* Звезда "рекомендуем" */
.qfaqs-card .qfaqs-mark.is-star{
  display: flex !important;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  line-height: 1;

  background-image: none !important;
}

.qfaqs-card .qfaqs-mark.is-star::after{
  display: none;
}

/* ===========================
   РЕКОМЕНДУЕМ — ВЫДЕЛЕНИЕ КАРТОЧКИ
=========================== */

.qfaqs-card.is-rec{
  border: 2px solid rgba(255,60,172,.75);
  box-shadow:
    0 0 0 1px rgba(255,60,172,.45),
    0 0 22px rgba(255,60,172,.20);
}

/* ==================================================
   ✅ MOBILE SAFE MODE
   Цель: исключить белый экран/мигание на мобильных (GPU overload)
   - Отключаем backdrop-filter, тяжелые тени, изоляцию слоёв
   - Упрощаем фон (много radial-gradient = дорого)
   - Убираем hover-анимации (на мобиле не нужны)
================================================== */

@media (max-width: 1024px){

  /* Упрощаем фон на мобиле (очень помогает) */
  body{
    background: var(--qf-bg0) !important;
  }

  /* Отключаем blur везде */
  .qfaqs-hero,
  .qfaqs-section,
  .qfaqs-card,
  .qfaqs-cat-link,
  .qfaqs-empty,
  .qfaqs-filter-select,
  .qfaqs-filter-btn,
  .qfaqs-toggle,
  .qfaqs-chip,
  .qfaqs-search,
  .qfaqs-page{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Убираем дорогие эффекты отрисовки карточек */
  .qfaqs-card{
    isolation: auto !important;
    transition: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .qfaqs-card:hover{
    transform: none !important;
    box-shadow: none !important;
  }
  .qfaqs-card::before,
  .qfaqs-card::after{
    display:none !important;
  }

  /* Убираем тяжёлые hover-тени у элементов */
  .qfaqs-chip:hover,
  .qfaqs-cat-link:hover,
  .qfaqs-filter-btn:hover,
  .qfaqs-page:hover{
    box-shadow: none !important;
    transform: none !important;
  }

  /* Тени для "рекомендуем" тоже облегчаем */
  .qfaqs-card.is-rec{
    box-shadow: none !important;
  }

  /* На некоторых Android sticky всё равно может конфликтовать со слоями */
  .qfaqs-sidebar{
    position: static !important;
    top: auto !important;
  }
}