/* Shared shell for every /notes/ guide. Edit here, never inline in a guide. */
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

  :root {
    --bg: #0d1b2a;
    --surface: #132a3d;
    --surface2: #1c3a50;
    --border: rgba(255,255,255,0.12);
    --text: #FFFFFF;
    --muted: #b3c1cc;
    --accent: #65b8bc;
    --green: #5fae83;
    --orange: #e0bd85;
    --purple: #7bbcc0;
    --red: #d99498;
    --yellow: #e0bd85;
    --junior: #5fae83;
    --middle: #e0bd85;
    --senior: #7bbcc0;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
  }

  header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 24px 32px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
  }

  .header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #2DA44E 0%, #58A6FF 100%);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }

  h1 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  .subtitle { color: var(--muted); font-size: 12px; margin-top: 1px; }

  .level-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border);
  }

  .tab {
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--muted);
    transition: all 0.15s;
    letter-spacing: 0.3px;
  }

  .tab:hover { color: var(--text); background: var(--surface2); }
  .tab.active[data-level="all"] { background: var(--accent); color: #000; }
  .tab.active[data-level="junior"] { background: var(--junior); color: #000; }
  .tab.active[data-level="middle"] { background: var(--middle); color: #000; }
  .tab.active[data-level="senior"] { background: var(--senior); color: #000; }

  main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
  }

  .stats-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }

  .stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .stat-dot {
    width: 10px; height: 10px; border-radius: 50%;
  }

  .stat-num { font-size: 20px; font-weight: 700; }
  .stat-label { font-size: 11px; color: var(--muted); margin-top: 1px; }

  .question-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }

  /* постійний кольоровий акцент зліва — видно на якому б рядку картки не була прокрутка */
  .question-card[data-level="junior"] { border-left-color: var(--junior); }
  .question-card[data-level="middle"] { border-left-color: var(--middle); }
  .question-card[data-level="senior"] { border-left-color: var(--senior); }

  .question-card:hover { border-color: #484F58; }
  .question-card[data-level="junior"]:hover { border-left-color: var(--junior); }
  .question-card[data-level="middle"]:hover { border-left-color: var(--middle); }
  .question-card[data-level="senior"]:hover { border-left-color: var(--senior); }
  .sec-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1 0 100%;          /* власний рядок на всю ширину хедера */
    margin-top: 10px;
  }
  .sec-tab {
    font-size: 11px; font-weight: 600; white-space: nowrap;
    padding: 5px 11px; border-radius: 20px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.10);
    background: transparent; color: var(--text2);
    transition: all .15s;
  }
  .sec-tab:hover { border-color: rgba(255,255,255,.25); color: var(--text); }
  .sec-tab.active { background: var(--accent); border-color: var(--accent); color: #000; }

  .sec-badge {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: 2px 7px; border-radius: 20px;
    border: 1px solid; opacity: .75; white-space: nowrap;
  }

  #anchors-block .anchors-body { display: none; }
  #anchors-block.open .anchors-body { display: block; }
  #anchors-block.open .anchors-chev { transform: rotate(90deg); }

  .section-block { margin-top: 14px; }
  .section-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer;
    background: var(--surface); border-radius: 10px;
    border: 1px solid rgba(255,255,255,.06);
    transition: background .15s; user-select: none;
  }
  .section-head:hover { background: rgba(255,255,255,.05); }
  .section-block.open .section-head { border-radius: 10px 10px 0 0; }
  .section-chev { font-size: 10px; color: var(--text2); transition: transform .18s; flex-shrink: 0; }
  .section-block.open .section-chev { transform: rotate(90deg); }
  .section-num { font-size: 19px; font-weight: 800; min-width: 24px; flex-shrink: 0; }
  .section-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .section-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
  .section-sub { font-size: 11px; color: var(--text2); line-height: 1.3; }
  .section-count {
    font-size: 12px; font-weight: 700; color: var(--text2);
    background: rgba(255,255,255,.06); border-radius: 20px;
    padding: 3px 10px; flex-shrink: 0;
  }
  .section-body { display: none; padding-top: 10px; }
  .section-block.open .section-body { display: block; }
  .section-block.hidden { display: none; }

  .question-card.hidden { display: none; }

  .q-header {
    padding: 14px 20px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "num  meta"
      "num  title";
    column-gap: 12px;
    row-gap: 7px;
    user-select: none;
  }

  .q-header:hover { background: rgba(255,255,255,0.02); }

  .q-num {
    grid-area: num;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    padding-top: 3px;
  }

  /* верхній рядок: бейджі + шеврон */
  .q-right {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* заголовок — окремим рядком на всю ширину */
  .q-title {
    grid-area: title;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
  }

  /* шеврон притиснути праворуч від бейджів */
  .q-right .chevron { margin-left: auto; }

  .level-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .badge-junior { background: rgba(63,185,80,0.15); color: var(--junior); border: 1px solid rgba(63,185,80,0.3); }
  .badge-middle { background: rgba(240,136,62,0.15); color: var(--orange); border: 1px solid rgba(240,136,62,0.3); }
  .badge-senior { background: rgba(210,168,255,0.15); color: var(--purple); border: 1px solid rgba(210,168,255,0.3); }

  .chevron {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s;
  }

  .q-body {
    display: none;
    padding: 0 20px 20px 62px;
    border-top: 1px solid var(--border);
    margin-top: 0;
  }

  .q-card.open .q-body { display: block; }
  .q-card.open .chevron { transform: rotate(90deg); }

  .q-body .answer {
    color: #CDD9E5;
    font-size: 13.5px;
    line-height: 1.7;
    margin-top: 14px;
    margin-bottom: 14px;
  }

  pre {
    background: #0A0E14;
    border: 1px solid #3A414B;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 12px 0;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  }

  .code-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
  }

  code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #E6EDF3;
  }

  .kw { color: #FF7B72; }      /* keywords */
  .str { color: #A5D6FF; }     /* strings */
  .fn { color: #D2A8FF; }      /* functions */
  .cm { color: #8B949E; font-style: italic; } /* comments */
  .num { color: #F2CC60; }     /* numbers */
  .cls { color: #FFA657; }     /* class/type */
  .prop { color: #79C0FF; }    /* properties */

  .tip-box {
    background: rgba(88,166,255,0.08);
    border: 1px solid rgba(88,166,255,0.25);
    border-radius: 7px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #79C0FF;
    margin-top: 12px;
  }

  .tip-box strong { color: var(--accent); }

  .section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 28px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .progress-track-disabled {
    background: var(--bg);
    border-radius: 4px;
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    transition: width 0.3s;
  }

  .progress-label { font-size: 11px; color: var(--muted); margin-top: 4px; }

  .voice-box {
    background: rgba(63,185,80,0.07);
    border: 1px solid rgba(63,185,80,0.2);
    border-left: 3px solid var(--green);
    border-radius: 7px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #cdd9e5;
    margin-top: 12px;
    line-height: 1.7;
  }
  .voice-box .voice-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--green);
    margin-bottom: 6px;
    display: block;
  }
  .voice-box code {
    font-size: 11.5px;
    color: #A5D6FF;
    background: rgba(0,0,0,0.25);
    padding: 1px 5px;
    border-radius: 3px;
  }

/* ── PATTERN BOX ── */
.pattern-box {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(88, 101, 242, 0.08);
  border-left: 3px solid #5865F2;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text2);
}
.pattern-box strong {
  color: #818CF8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}
.pattern-box code {
  background: rgba(88,101,242,0.15);
  color: #A5B4FC;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ── COMMENT SYSTEM STYLES ── */
.add-comment-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.4;
  padding: 2px 6px;
  border-radius: 4px;
  transition: opacity 0.2s;
  line-height: 1;
}
.add-comment-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.comment-bubble {
  margin: 0 16px 12px;
}
.comment-bubble-inner {
  background: #2d2a1a;
  border: 1px solid #C4622D;
  border-left: 3px solid #C4622D;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.comment-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.comment-text { font-size: 12.5px; color: #e8d5a3; line-height: 1.6; flex: 1; }
.comment-actions { display: flex; gap: 6px; flex-shrink: 0; margin-top: 2px; }
.comment-btn-edit, .comment-btn-delete {
  background: none; border: none; cursor: pointer;
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
  transition: background 0.15s;
}
.comment-btn-edit { color: #C4622D; }
.comment-btn-edit:hover { background: rgba(196,98,45,0.15); }
.comment-btn-delete { color: #888; }
.comment-btn-delete:hover { background: rgba(255,255,255,0.08); color: #ccc; }

.comment-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.comment-modal {
  background: #1e1e2e;
  border: 1px solid #C4622D;
  border-radius: 10px;
  padding: 22px 24px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.comment-modal-title {
  font-size: 13px; font-weight: 700; color: #C4622D;
  margin-bottom: 14px;
}
.comment-textarea {
  width: 100%; box-sizing: border-box;
  background: #13131f; border: 1px solid #333;
  border-radius: 6px; color: #e2e8f0;
  font-size: 13px; line-height: 1.6;
  padding: 10px 12px; resize: vertical;
  min-height: 100px; font-family: inherit;
  outline: none;
}
.comment-textarea:focus { border-color: #C4622D; }
.comment-modal-actions {
  display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end;
}
.comment-save {
  background: #C4622D; color: white; border: none;
  padding: 7px 18px; border-radius: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.comment-save:hover { background: #a8521f; }
.comment-cancel {
  background: none; color: #888; border: 1px solid #333;
  padding: 7px 14px; border-radius: 5px; cursor: pointer;
  font-size: 13px;
}
.comment-cancel:hover { color: #ccc; border-color: #555; }

/* ── МОВА ───────────────────────────────────────────────────────────────────
   Українська і англійська лежать сусідніми елементами з атрибутом lang, а не в
   двох файлах. Показує одну з них CSS; JS ставить html[data-lang] ще в <head>,
   тому англійський режим не блимає українською.

   Переклад опційний по картці: тільки .q-card[data-translated] ховає свою
   українську. Картка без атрибута лишається українською в обох режимах — з
   маркером UK, а не порожньою. */

html[data-lang="en"] .q-card[data-translated] [lang="uk"] { display: none; }
html[data-lang="uk"] [lang="en"] { display: none; }

/* Обгортка сторінки (все, що не картка) перекладена повністю — перемикається без умов. */
html[data-lang="en"] [lang="uk"]:not(.q-card [lang="uk"]) { display: none; }

/* Тихий маркер: ця картка ще українською. Бейдж, не банер. */
html[data-lang="en"] .q-card:not([data-translated]) .q-title::after {
  content: "UK";
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 8px;
  vertical-align: 2px;
  opacity: .6;
}

/* Перемикач у шапці — той самий термінальний стиль, що й --lang у квізі. */
.lang-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.lang-btn .lang-val { color: var(--accent); font-weight: 600; }
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* ══════════ КЛАВІАТУРА ══════════ */
  /* Заголовки карток і розділів — кнопки для клавіатури (role/tabindex ставить notes.js). */
  .q-header:focus-visible,
  .section-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ══════════ СІТКИ ВСТУПУ ══════════ */
  /* Колонки самі складаються в одну, коли не влазять; min() не дає мінімуму розпирати вузький екран. */
  .intro-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  .intro-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }
  .intro-grid > *,
  .intro-stats > * { min-width: 0; overflow-wrap: anywhere; }

  .q-header > *,
  .q-right { min-width: 0; }
  .q-title { overflow-wrap: anywhere; }
  .q-right { flex-wrap: wrap; }

  /* ══════════ ТЕЛЕФОН ══════════ */
  @media (max-width: 600px) {
    header { padding: 10px 16px; }
    .header-inner { gap: 8px; }
    .logo-icon { width: 28px; height: 28px; font-size: 14px; }
    h1 { font-size: 16px; }
    /* Вкладки розділів — один рядок з власним горизонтальним скролом, а не стовпчик на пів екрана. */
    .sec-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      margin-top: 4px;
      padding-bottom: 2px;
      scrollbar-width: none;
    }
    .sec-tabs::-webkit-scrollbar { display: none; }
    .tab { padding: 5px 10px; }
    main { padding: 20px 16px; }
    .intro-grid { grid-template-columns: minmax(0, 1fr); }
    .intro-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sec-badge { white-space: normal; }
  }