/* ============================================
   DETAILED RATINGS - ПОВНА МОБІЛЬНА АДАПТАЦІЯ
   Всі 10 стилів оптимізовано для мобільних
   v2.0 - Повний рефакторинг
   ============================================ */

/* === БАЗОВІ ЗМІННІ === */
:root {
  --hdr-panel: #ffffff;
  --hdr-stroke: #e5e7eb;
  --hdr-text: #1f2937;
  --hdr-muted: #6b7280;
  --hdr-track: #e5e7eb;
  --hdr-accent: #3b82f6;
  --hdr-accent2: #8b5cf6;
}

/* === КРИТИЧНО: ШКАЛИ МАЮТЬ ПРАЦЮВАТИ === */
.hdr__bar-fill,
.hdr__score-fill,
.hdr__meter-fill,
.hdr__progress-bar,
[style*="position:absolute"][style*="width"] {
  /* Ніяких обмежень ширини! */
}

/* ============================================
   TABLET - 768px
   ============================================ */
@media (max-width: 768px) {

  /* === ЗАГАЛЬНІ ПРАВИЛА === */
  .hdr,
  .hdr section {
    padding: 16px !important;
    margin: 15px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hdr *,
  .hdr section * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
  }

  /* ============================
     STYLE 1: Classic Cards
     ============================ */
  .hdr--1 .hdr__grid,
  .hdr--1 > div[style*="grid-template-columns"],
  .hdr--1 > header + div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hdr--1 .hdr__score-box {
    margin-bottom: 20px !important;
  }

  .hdr--1 .hdr__score-bar,
  .hdr--1 div[style*="max-width:300px"] {
    max-width: 100% !important;
  }

  .hdr--1 .hdr__summary,
  .hdr--1 p[style*="border-left"] {
    padding: 12px !important;
    font-size: 13px !important;
  }

  /* ============================
     STYLE 2: Compact List
     ============================ */
  .hdr--2 {
    padding: 20px 16px !important;
  }

  /* Хедер: score зправа + текст зліва → стек */
  .hdr--2 > div:first-child {
    flex-direction: column !important;
    gap: 15px !important;
  }

  /* Score box */
  .hdr--2 > div:first-child > div:last-child {
    width: 100% !important;
    max-width: 120px !important;
    margin: 0 auto !important;
    padding: 10px 16px !important;
  }

  /* Рядки метрик */
  .hdr--2 > div:nth-child(2) > div {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .hdr--2 > div:nth-child(2) > div > span:first-child {
    font-size: 20px !important;
  }

  .hdr--2 > div:nth-child(2) > div > span:last-child {
    min-width: 35px !important;
    font-size: 14px !important;
  }

  /* ============================
     STYLE 3: Dark Theme
     ============================ */
  .hdr--3 {
    padding: 25px 16px !important;
  }

  /* Score блок */
  .hdr--3 > div:first-child > div:first-child {
    padding: 16px 24px !important;
  }

  .hdr--3 > div:first-child > div:first-child > div:first-child {
    font-size: 42px !important;
  }

  /* Сітка метрик */
  .hdr--3 > div:nth-child(2),
  .hdr--3 > div:last-child,
  .hdr--3 > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Кожна метрика */
  .hdr--3 > div:nth-child(2) > div,
  .hdr--3 > div:last-child > div[style*="background:rgba"] {
    padding: 14px !important;
  }

  .hdr--3 > div:nth-child(2) > div > div:first-child,
  .hdr--3 > div:last-child > div > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Emoji in metrics */
  .hdr--3 span[style*="font-size:28px"] {
    font-size: 22px !important;
  }

  /* Title in metrics */
  .hdr--3 span[style*="color:#e5e7eb"][style*="font-size:14px"] {
    font-size: 13px !important;
  }

  /* Score badge */
  .hdr--3 span[style*="background:#1f2937"][style*="border-radius:20px"] {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* ============================
     STYLE 4: Horizontal Bars
     ============================ */
  .hdr--4 {
    padding: 20px 16px !important;
  }

  /* Хедер: Score + Summary → стек */
  .hdr--4 > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    text-align: center !important;
  }

  .hdr--4 > div:first-child > div:first-child {
    margin: 0 auto !important;
    max-width: 200px !important;
    padding: 20px !important;
  }

  .hdr--4 > div:first-child > div:first-child > div:first-child,
  .hdr--4 div[style*="font-size:48px"] {
    font-size: 38px !important;
  }

  /* Рядки метрик - score */
  .hdr--4 span[style*="font-size:18px"][style*="font-weight:bold"] {
    font-size: 14px !important;
    min-width: 50px !important;
  }

  /* ============================
     STYLE 5: Minimal Lines
     ============================ */
  .hdr--5 {
    padding: 30px 16px !important;
  }

  /* Score */
  .hdr--5 div[style*="font-size:64px"] {
    font-size: 48px !important;
  }

  /* Metric rows grid */
  .hdr--5 .hdr__metric-row,
  .hdr--5 div[style*="grid-template-columns:36px"] {
    grid-template-columns: 30px 1fr 45px !important;
    gap: 10px !important;
  }

  .hdr--5 span[style*="font-size:28px"] {
    font-size: 22px !important;
  }

  .hdr--5 span[style*="font-size:16px"][style*="text-align:right"] {
    font-size: 14px !important;
  }

  /* ============================
     STYLE 6: Two Column Split
     ============================ */
  /* Головний grid: ліва + права → стек */
  .hdr--6 > div:first-child,
  .hdr--6 > div[style*="grid-template-columns:300px"],
  .hdr--6 div[style*="grid-template-columns:300px 1fr"] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* Ліва панель */
  .hdr--6 > div:first-child > div:first-child {
    padding: 30px 20px !important;
  }

  .hdr--6 div[style*="font-size:72px"] {
    font-size: 48px !important;
  }

  /* Права панель */
  .hdr--6 > div:first-child > div:last-child {
    padding: 20px 16px !important;
  }

  /* Рядки метрик */
  .hdr--6 > div:first-child > div:last-child > div {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .hdr--6 span[style*="font-size:26px"] {
    font-size: 22px !important;
  }

  .hdr--6 span[style*="font-size:18px"][style*="font-weight:bold"] {
    font-size: 15px !important;
    min-width: 40px !important;
  }

  /* ============================
     STYLE 7: Badge Grid
     ============================ */
  .hdr--7 {
    padding: 25px 16px !important;
  }

  /* Хедер pill → стек */
  .hdr--7 > div:first-child > div:first-child {
    flex-direction: column !important;
    padding: 20px 25px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }

  /* Розділювач → сховати */
  .hdr--7 div[style*="width:1px"][style*="height:50px"] {
    display: none !important;
  }

  .hdr--7 div[style*="font-size:40px"][style*="font-weight:bold"] {
    font-size: 32px !important;
  }

  /* Grid карток → 2 колонки */
  .hdr--7 > div:last-of-type[style*="grid-template-columns"],
  .hdr--7 div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Badge */
  .hdr--7 div[style*="inline-block"][style*="background:#1f2937"][style*="border-radius:20px"] {
    padding: 6px 16px !important;
    font-size: 16px !important;
  }

  /* ============================
     STYLE 8: Circle Progress
     ============================ */
  .hdr--8 {
    padding: 25px 16px !important;
  }

  /* Головний SVG круг */
  .hdr--8 > div:first-child > div:first-child[style*="width:140px"] {
    width: 120px !important;
    height: 120px !important;
  }

  .hdr--8 > div:first-child > div:first-child svg[width="140"] {
    width: 120px !important;
    height: 120px !important;
  }

  .hdr--8 div[style*="font-size:36px"][style*="font-weight:bold"] {
    font-size: 30px !important;
  }

  /* Сітка маленьких кругів → 3 колонки */
  .hdr--8 div[style*="grid-template-columns:repeat(auto-fit,minmax(140px"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  /* Маленькі SVG кружки */
  .hdr--8 > div:last-child > div > div:first-child[style*="width:80px"] {
    width: 65px !important;
    height: 65px !important;
  }

  .hdr--8 > div:last-child > div > div:first-child svg[width="80"] {
    width: 65px !important;
    height: 65px !important;
  }

  .hdr--8 > div:last-child > div > div:nth-child(2) {
    font-size: 11px !important;
    min-height: 24px !important;
  }

  .hdr--8 > div:last-child > div > div:last-child {
    font-size: 14px !important;
  }

  /* ============================
     STYLE 9: Stats Table ⭐ (з скріншоту)
     ============================ */
  .hdr--9 {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* Хедер: title + score → стек */
  .hdr--9 > div:first-child {
    padding: 20px 16px !important;
  }

  .hdr--9 > div:first-child > div {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
  }

  .hdr--9 > div:first-child > div > div:first-child > strong {
    font-size: 18px !important;
  }

  .hdr--9 > div:first-child > div > div:first-child > p {
    font-size: 12px !important;
  }

  /* Score box */
  .hdr--9 > div:first-child > div > div:last-child {
    padding: 12px 20px !important;
    margin: 0 auto !important;
  }

  .hdr--9 div[style*="font-size:36px"][style*="font-weight:bold"] {
    font-size: 30px !important;
  }

  /* *** КРИТИЧНО: Рядки метрик ***
     Оригінал: 50px 50px 1fr 100px 150px
     Мобайл: # | emoji | назва | score (без прогрес-бару) */
  .hdr--9 > div:nth-child(2) > div,
  .hdr--9 > div:last-child > div[style*="display:grid"] {
    grid-template-columns: 30px 36px 1fr auto !important;
    gap: 10px !important;
    padding: 14px 16px !important;
  }

  /* Номер (#1, #2...) */
  .hdr--9 > div:nth-child(2) > div > div:first-child {
    font-size: 12px !important;
  }

  /* Емодзі */
  .hdr--9 > div:nth-child(2) > div > div:nth-child(2) {
    font-size: 22px !important;
    text-align: center !important;
  }

  /* Назва метрики */
  .hdr--9 > div:nth-child(2) > div > div:nth-child(3) {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Score badge */
  .hdr--9 > div:nth-child(2) > div > div:nth-child(4) {
    text-align: center !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:nth-child(4) > span,
  .hdr--9 span[style*="background:#1f2937"][style*="border-radius:20px"][style*="padding:6px"] {
    padding: 4px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Прогрес-бар (5-та колонка) → сховати */
  .hdr--9 > div:nth-child(2) > div > div:nth-child(5) {
    display: none !important;
  }

  /* ============================
     STYLE 10: Gradient Cards Premium
     ============================ */
  .hdr--10 {
    padding: 30px 16px !important;
  }

  /* Score badge */
  .hdr--10 > div:first-child > div:first-child {
    padding: 20px 30px !important;
  }

  .hdr--10 div[style*="font-size:56px"] {
    font-size: 42px !important;
  }

  /* Star badge */
  .hdr--10 div[style*="position:absolute"][style*="background:#fbbf24"] {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    top: -8px !important;
    right: -8px !important;
  }

  /* Grid карток */
  .hdr--10 div[style*="grid-template-columns:repeat(auto-fit,minmax(260px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Кожна картка */
  .hdr--10 > div:last-of-type > div[style*="background:white"] {
    padding: 18px !important;
  }

  /* Icon box */
  .hdr--10 div[style*="width:45px"][style*="height:45px"][style*="border-radius:10px"] {
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }

  /* Score */
  .hdr--10 div[style*="font-size:32px"][style*="font-weight:bold"][style*="color:#1f2937"] {
    font-size: 26px !important;
  }
}

/* ============================================
   PHONE - 480px
   ============================================ */
@media (max-width: 480px) {

  /* === ЗАГАЛЬНІ === */
  .hdr,
  .hdr section {
    padding: 12px !important;
    margin: 12px 0 !important;
  }

  /* ============================
     STYLE 1
     ============================ */
  .hdr--1 .hdr__score-num,
  .hdr--1 div[style*="font-size:48px"] {
    font-size: 36px !important;
  }

  .hdr--1 article,
  .hdr--1 .hdr__card {
    padding: 12px !important;
  }

  .hdr--1 .hdr__card-title span:last-child {
    font-size: 13px !important;
  }

  /* ============================
     STYLE 2
     ============================ */
  .hdr--2 {
    padding: 14px 12px !important;
  }

  .hdr--2 div[style*="font-size:32px"] {
    font-size: 26px !important;
  }

  .hdr--2 > div:nth-child(2) > div {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .hdr--2 > div:nth-child(2) > div > span:first-child {
    font-size: 18px !important;
  }

  .hdr--2 > div:nth-child(2) > div > div > div:first-child {
    font-size: 12px !important;
  }

  .hdr--2 > div:nth-child(2) > div > span:last-child {
    font-size: 13px !important;
    min-width: 30px !important;
  }

  /* ============================
     STYLE 3
     ============================ */
  .hdr--3 {
    padding: 20px 12px !important;
  }

  .hdr--3 div[style*="font-size:56px"],
  .hdr--3 > div:first-child > div:first-child > div:first-child {
    font-size: 36px !important;
  }

  .hdr--3 > div:nth-child(2) > div,
  .hdr--3 > div:last-child > div[style*="background:rgba"] {
    padding: 12px !important;
  }

  .hdr--3 span[style*="font-size:28px"] {
    font-size: 20px !important;
  }

  .hdr--3 span[style*="color:#e5e7eb"][style*="font-size:14px"] {
    font-size: 12px !important;
  }

  /* ============================
     STYLE 4
     ============================ */
  .hdr--4 {
    padding: 14px 12px !important;
  }

  .hdr--4 > div:first-child > div:first-child {
    padding: 16px !important;
  }

  .hdr--4 div[style*="font-size:48px"] {
    font-size: 32px !important;
  }

  .hdr--4 span[style*="font-size:18px"][style*="font-weight:bold"] {
    font-size: 13px !important;
    min-width: 45px !important;
  }

  .hdr--4 span[style*="font-size:22px"] {
    font-size: 18px !important;
  }

  /* ============================
     STYLE 5
     ============================ */
  .hdr--5 {
    padding: 20px 12px !important;
    border-left-width: 3px !important;
  }

  .hdr--5 div[style*="font-size:64px"] {
    font-size: 38px !important;
  }

  .hdr--5 div[style*="grid-template-columns:36px"],
  .hdr--5 .hdr__metric-row {
    grid-template-columns: 26px 1fr 38px !important;
    gap: 8px !important;
  }

  .hdr--5 span[style*="font-size:28px"] {
    font-size: 18px !important;
  }

  .hdr--5 div[style*="font-size:13px"][style*="font-weight:500"] {
    font-size: 12px !important;
  }

  .hdr--5 span[style*="font-size:16px"][style*="text-align:right"] {
    font-size: 13px !important;
  }

  /* ============================
     STYLE 6
     ============================ */
  .hdr--6 > div:first-child > div:first-child {
    padding: 25px 16px !important;
  }

  .hdr--6 div[style*="font-size:72px"] {
    font-size: 42px !important;
  }

  .hdr--6 > div:first-child > div:last-child {
    padding: 14px 12px !important;
  }

  .hdr--6 > div:first-child > div:last-child > div {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .hdr--6 span[style*="font-size:26px"] {
    font-size: 20px !important;
  }

  .hdr--6 span[style*="font-size:18px"][style*="font-weight:bold"] {
    font-size: 14px !important;
    min-width: 35px !important;
  }

  /* ============================
     STYLE 7
     ============================ */
  .hdr--7 {
    padding: 16px 12px !important;
  }

  .hdr--7 > div:first-child > div:first-child {
    padding: 16px 20px !important;
  }

  .hdr--7 div[style*="font-size:40px"][style*="font-weight:bold"] {
    font-size: 28px !important;
  }

  /* Grid → 1 колонка */
  .hdr--7 div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hdr--7 div[style*="font-size:36px"][style*="margin-bottom:10px"] {
    font-size: 28px !important;
  }

  .hdr--7 div[style*="inline-block"][style*="background:#1f2937"][style*="border-radius:20px"] {
    padding: 5px 14px !important;
    font-size: 15px !important;
  }

  /* ============================
     STYLE 8
     ============================ */
  .hdr--8 {
    padding: 20px 12px !important;
  }

  .hdr--8 > div:first-child > div:first-child[style*="width:140px"] {
    width: 110px !important;
    height: 110px !important;
  }

  .hdr--8 > div:first-child > div:first-child svg[width="140"] {
    width: 110px !important;
    height: 110px !important;
  }

  .hdr--8 div[style*="font-size:36px"][style*="font-weight:bold"] {
    font-size: 26px !important;
  }

  /* Grid → 2 колонки */
  .hdr--8 div[style*="grid-template-columns:repeat(auto-fit,minmax(140px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .hdr--8 > div:last-child > div {
    padding: 10px 8px !important;
  }

  .hdr--8 > div:last-child > div > div:first-child[style*="width:80px"] {
    width: 55px !important;
    height: 55px !important;
  }

  .hdr--8 > div:last-child > div > div:first-child svg[width="80"] {
    width: 55px !important;
    height: 55px !important;
  }

  .hdr--8 > div:last-child > div > div:nth-child(2) {
    font-size: 10px !important;
    min-height: 22px !important;
  }

  .hdr--8 > div:last-child > div > div:last-child {
    font-size: 13px !important;
  }

  /* ============================
     STYLE 9 ⭐
     ============================ */
  .hdr--9 > div:first-child {
    padding: 16px 12px !important;
  }

  .hdr--9 > div:first-child > div > div:first-child > strong {
    font-size: 16px !important;
  }

  .hdr--9 > div:first-child > div > div:last-child {
    padding: 10px 16px !important;
  }

  .hdr--9 div[style*="font-size:36px"][style*="font-weight:bold"] {
    font-size: 26px !important;
  }

  /* Рядки: ще компактніше */
  .hdr--9 > div:nth-child(2) > div,
  .hdr--9 > div:last-child > div[style*="display:grid"] {
    grid-template-columns: 24px 30px 1fr auto !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:first-child {
    font-size: 11px !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:nth-child(2) {
    font-size: 18px !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:nth-child(3) {
    font-size: 12px !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:nth-child(4) > span,
  .hdr--9 span[style*="background:#1f2937"][style*="border-radius:20px"][style*="padding:6px"] {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  /* ============================
     STYLE 10
     ============================ */
  .hdr--10 {
    padding: 20px 12px !important;
  }

  .hdr--10 > div:first-child > div:first-child {
    padding: 16px 24px !important;
  }

  .hdr--10 div[style*="font-size:56px"] {
    font-size: 36px !important;
  }

  .hdr--10 div[style*="position:absolute"][style*="background:#fbbf24"] {
    width: 35px !important;
    height: 35px !important;
    font-size: 18px !important;
  }

  .hdr--10 > div:last-of-type > div[style*="background:white"] {
    padding: 14px !important;
  }

  .hdr--10 div[style*="width:45px"][style*="height:45px"][style*="border-radius:10px"] {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }

  .hdr--10 div[style*="font-size:32px"][style*="font-weight:bold"][style*="color:#1f2937"] {
    font-size: 24px !important;
  }
}

/* ============================================
   SMALL PHONE - 360px
   ============================================ */
@media (max-width: 360px) {

  .hdr,
  .hdr section {
    padding: 10px !important;
    margin: 10px 0 !important;
  }

  /* Style 8: ще менші кружки */
  .hdr--8 > div:last-child > div > div:first-child[style*="width:80px"],
  .hdr--8 > div:last-child > div > div:first-child {
    width: 48px !important;
    height: 48px !important;
  }

  .hdr--8 > div:last-child > div > div:first-child svg[width="80"],
  .hdr--8 > div:last-child > div > div:first-child svg {
    width: 48px !important;
    height: 48px !important;
  }

  /* Style 9: прибрати емодзі колонку */
  .hdr--9 > div:nth-child(2) > div,
  .hdr--9 > div:last-child > div[style*="display:grid"] {
    grid-template-columns: 20px 1fr auto !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:nth-child(2) {
    display: none !important;
  }

  .hdr--9 > div:nth-child(2) > div > div:nth-child(4) > span {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
}

/* ============================================
   ДОДАТКОВІ ПРАВИЛА ДЛЯ ВСІХ РОЗМІРІВ
   ============================================ */

/* Забезпечення правильної роботи прогрес-барів */
.hdr [style*="overflow:hidden"] > div[style*="width:"],
.hdr [style*="overflow:hidden"] > span[style*="width:"],
.hdr [style*="overflow:hidden"] > div[style*="width:"] {
  min-width: 0 !important;
}

/* Flex елементи wrap */
.hdr [style*="display:flex"] {
  flex-wrap: wrap !important;
}

/* Виняток: НЕ wrap для рядків метрик */
.hdr--2 > div:nth-child(2) > div[style*="display:flex"],
.hdr--4 > div:nth-child(2) > div > div[style*="display:flex"],
.hdr--6 > div:first-child > div:last-child > div[style*="display:flex"] {
  flex-wrap: nowrap !important;
}

/* Гарантія правильного відображення емодзі */
.hdr [style*="font-size:"] span:first-child {
  flex-shrink: 0 !important;
}

/* Запобігти overflow для summary/max-width текстів */
@media (max-width: 768px) {
  .hdr p[style*="max-width"],
  .hdr div[style*="max-width:600px"],
  .hdr div[style*="max-width:650px"],
  .hdr div[style*="max-width:700px"],
  .hdr div[style*="max-width:800px"],
  .hdr p[style*="max-width:500px"],
  .hdr p[style*="max-width:600px"],
  .hdr p[style*="max-width:700px"] {
    max-width: 100% !important;
  }

  .hdr .hdr__summary,
  .hdr .hdr__legend,
  .hdr footer {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}