/* Спільні стилі. Одна вузька колонка для опитування, ширша для кабінету. */
:root {
  --bg: #F3F6F9; --surface: #FFFFFF; --ink: #0F1A33; --muted: #5A6276; --line: #DCE0E8;
  --accent: #0C1B41; --accent-ink: #FFFFFF; --accent-soft: #E4F6FE; --cyan: #22BFFF; --green: #12D27B; --link: #0A7FC2;
  --s1: #C2412D; --s2: #E08A3C; --s3: #B3B8C4; --s4: #4C9A8A; --s5: #1F6B5A;
  --l1: #1F6B5A; --l2: #4C9A8A; --l3: #B08A2E; --l4: #D0703A; --l5: #B8382A;
  --warn-soft: #FBEFE4; --good-soft: #E3F1EC;
  --f-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0E1220; --surface: #161B2C; --ink: #E8EBF3; --muted: #9AA2B7; --line: #2A3148;
  --accent: #5CD3FF; --accent-ink: #08142E; --accent-soft: #13253F; --cyan: #3FCBFF; --green: #2FDB8E; --link: #6FD6FF;
  --s1: #E4735F; --s2: #E9A55F; --s3: #59607A; --s4: #5FB7A5; --s5: #3E9C86;
  --l1: #4FB89E; --l2: #7CC6B5; --l3: #D9B45A; --l4: #E89260; --l5: #E46A5A;
  --warn-soft: #33261C; --good-soft: #17302A; color-scheme: dark } }

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f-body); -webkit-text-size-adjust: 100% }
.wrap { max-width: 760px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left)); display: grid; gap: 24px }
.wrap.wide { max-width: 1280px }
.eyebrow { font: 600 12px/1.2 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
h1 { font: 700 clamp(24px, 4.5vw, 34px)/1.15 var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -.01em }
h2 { font: 600 20px/1.3 var(--f-body); margin: 0; text-wrap: balance }
h3 { font: 600 16px/1.3 var(--f-body); margin: 0 }
p { margin: 0 }
a { color: var(--link) }
.muted { color: var(--muted) }
.small { font-size: 14px }
[hidden] { display: none !important }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.panel { display: grid; gap: 20px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: grid; gap: 12px; min-width: 0 }
.notice { border-radius: 10px; padding: 16px 18px; background: var(--accent-soft); display: grid; gap: 6px }
.notice.warn { background: var(--warn-soft) }
.notice.good { background: var(--good-soft) }
.demo-bar { font: 600 12px/1.4 var(--f-data); letter-spacing: .04em; text-transform: uppercase; color: var(--s2); }

.btn { font: 600 15px/1 var(--f-body); border-radius: 8px; padding: 12px 16px; cursor: pointer; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); justify-self: start; text-decoration: none; display: inline-block }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line) }
.btn.danger { background: transparent; color: var(--s1); border-color: var(--line) }
.btn.sm { padding: 8px 12px; font-size: 14px }
.btn:disabled { opacity: .5; cursor: not-allowed }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.spread { justify-content: space-between }
input[type="text"], input[type="email"], input[type="number"], textarea, select {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; max-width: 100% }
textarea { width: 100%; min-height: 72px; resize: vertical }
.field { display: grid; gap: 6px }
.err { color: var(--s1); font-weight: 500 }

/* опитування */
.progress { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-block: 10px; display: grid; gap: 6px }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden }
.bar > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .25s }
.q { display: grid; gap: 12px; padding: 18px 0; border: 0; border-top: 1px solid var(--line); margin: 0 }
.q-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 0 }
.q-num { font: 600 13px/1 var(--f-data); color: var(--muted); min-width: 2.2em }
.q-text { font-size: 17px; font-weight: 500; min-width: 0 }
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-left: calc(2.2em + 12px) }
.likert input { position: absolute; opacity: 0; pointer-events: none }
.likert label { display: grid; place-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--surface); text-align: center; min-width: 0 }
.likert label b { font: 600 17px/1 var(--f-data) }
.likert label span { font-size: 11.5px; line-height: 1.2; color: var(--muted) }
.likert input:checked + label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent) }
.likert input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px }
.scale-legend { display: none }
.add-comment { background: none; border: 0; padding: 0; color: var(--accent); font: 500 14px var(--f-body); cursor: pointer; justify-self: start; margin-left: calc(2.2em + 12px) }
.q textarea { margin-left: calc(2.2em + 12px); width: calc(100% - 2.2em - 12px) }

/* звіти */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 4px; align-content: start; min-width: 0 }
.kpi .v { font: 700 26px/1.1 var(--f-display); font-variant-numeric: tabular-nums }
.kpi .v small { font: 500 14px var(--f-data); color: var(--muted) }
.pill { display: inline-block; font: 600 13px/1 var(--f-body); padding: 6px 10px; border-radius: 999px; color: #fff; background: var(--tone); white-space: nowrap }
.stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line) }
.stack > i { display: block; height: 100% }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted) }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: var(--c) }
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.area { display: grid; gap: 6px; padding: 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 0 }
.area .v { font: 600 22px/1 var(--f-data); font-variant-numeric: tabular-nums }
.items { display: grid }
.item { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 4.4em 4.4em; gap: 6px 12px; align-items: center; padding-block: 12px; border-top: 1px solid var(--line) }
.item .t { font-size: 15px }
.item .num { font: 600 15px var(--f-data); text-align: right; font-variant-numeric: tabular-nums }
.item .stack { grid-column: 2 / -1; height: 8px }
.item-head { font: 600 12px/1 var(--f-data); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; border-top: 0; padding-block: 0 6px }
.delta { font: 500 12px var(--f-data); display: block }
.up { color: var(--s4) } .down { color: var(--s1) }
.comments { display: grid; gap: 14px }
.comments blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--bg); border-radius: 0 8px 8px 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere }

.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: 15px }
th { text-align: left; font: 600 12px/1.2 var(--f-data); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 10px 8px; white-space: nowrap }
td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: middle }
td.num, th.num { text-align: right; font-family: var(--f-data); font-variant-numeric: tabular-nums }
tr.click { cursor: pointer }
tr.click:hover td { background: var(--accent-soft) }

.tabs { display: flex; gap: 6px; flex-wrap: wrap }
.tabs button { font: 500 14px var(--f-body); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.share { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center }
.share .qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0 }
.share .qr svg { width: 148px; height: 148px }
.link { font: 500 14px var(--f-data); overflow-wrap: anywhere; background: var(--bg); padding: 10px 12px; border-radius: 8px; user-select: all }
dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 22px; width: min(440px, calc(100vw - 32px)) }
dialog::backdrop { background: rgba(10, 14, 28, .45) }
dialog form { display: grid; gap: 14px }

@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr 1fr }
  .areas { grid-template-columns: 1fr 1fr }
  .share { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .likert { margin-left: 0; gap: 4px }
  .likert label span { display: none }
  .scale-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted) }
  .add-comment, .q textarea { margin-left: 0; width: 100% }
  .item { grid-template-columns: 2em minmax(0, 1fr) 3.6em 3.6em }
}
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none } }

/* ---------- шапка з логотипом ---------- */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line) }
.topbar-in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)) }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0 }
.logo { height: 30px; width: auto; display: block }
.logo-on-dark { display: none }
.brand-sep { width: 1px; height: 24px; background: var(--line) }
.brand-product { font: 700 15px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap }
.user { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0 }
.user-email { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.demo-bar[hidden] { display: none }

/* ---------- вступ про Q12 ---------- */
.hero { display: grid; gap: 6px }
.hero p { max-width: 62ch }
.intro.card { padding: 0; gap: 0; overflow: hidden }
.intro summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px }
.intro summary::-webkit-details-marker { display: none }
.intro-sum { display: grid; gap: 4px }
.intro-title { font: 600 17px/1.3 var(--f-body) }
.chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex: none; margin-right: 4px }
.intro[open] .chev { transform: rotate(-135deg) }
.intro-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 4px 20px 20px; border-top: 1px solid var(--line); padding-top: 20px }
.intro-col { display: grid; gap: 10px; align-content: start; min-width: 0 }
.intro-col p { font-size: 15px }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.stat { background: var(--bg); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px }
.stat b { font: 700 20px/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums }
.stat span { font-size: 13px; color: var(--muted); line-height: 1.3 }
.pyr { display: grid; gap: 4px; justify-items: center }
.pyr-l { width: var(--w); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--cyan) 18%, var(--surface)); color: var(--ink); font-size: 13px; font-weight: 600 }
.pyr-l:nth-child(1) { background: color-mix(in srgb, var(--green) 30%, var(--surface)) }
.pyr-l:nth-child(2) { background: color-mix(in srgb, var(--green) 18%, var(--surface)) }
.pyr-l:nth-child(3) { background: color-mix(in srgb, var(--cyan) 22%, var(--surface)) }
.pyr-l:nth-child(4) { background: color-mix(in srgb, var(--cyan) 34%, var(--surface)) }
.pyr-l small { font: 500 11px var(--f-data); color: var(--muted); white-space: nowrap }
.steps { list-style: none; margin: 0; padding: 16px 20px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: st; background: var(--bg) }
.steps li { counter-increment: st; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-content: start }
.steps li::before { content: counter(st); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font: 600 13px/26px var(--f-data); text-align: center }
.steps b { font-size: 14px }
.steps span { font-size: 13px; color: var(--muted); line-height: 1.35 }

/* ---------- картки команд ---------- */
.kpi .pill { justify-self: start; margin-top: 4px }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px }
.team-card { text-decoration: none; color: var(--ink); gap: 16px; align-content: start; transition: border-color .15s, transform .15s }
.team-card:hover { border-color: var(--accent); transform: translateY(-1px) }
.tc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.tc-top h3 { font-size: 17px }
.pill.soft { background: var(--bg); color: var(--muted); border: 1px solid var(--line) }
.tc-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.tc-avg { font: 700 34px/1 var(--f-display); font-variant-numeric: tabular-nums }
.tc-avg small { font: 500 15px var(--f-data); color: var(--muted) }
.tc-areas { display: grid; gap: 8px }
.tc-area { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3em; align-items: center; gap: 10px; font-size: 13px }
.tc-area span { color: var(--muted) }
.tc-area b { font: 600 13px var(--f-data); text-align: right; font-variant-numeric: tabular-nums }
.track { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden }
.track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--green)) }
.tc-empty { display: grid; gap: 4px; padding: 14px; border-radius: 8px; background: var(--bg); font-size: 14px; color: var(--muted) }
.tc-empty b { font: 700 22px/1.1 var(--f-display); color: var(--ink) }
.tc-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto }
.tc-open { color: var(--link); font-weight: 600; white-space: nowrap }

@media (prefers-color-scheme: dark) {
  .logo-on-light { display: none }
  .logo-on-dark { display: block }
}
@media (max-width: 980px) {
  .intro-body { grid-template-columns: 1fr 1fr }
  .intro-col:first-child { grid-column: 1 / -1 }
  .steps { grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px) {
  .logo { height: 24px }
  .brand { gap: 10px }
  .brand-product { font-size: 13px }
  .user-email { display: none }
  .intro summary { padding: 16px }
  .intro-body { grid-template-columns: 1fr; padding: 16px; gap: 22px }
  .steps { grid-template-columns: 1fr; padding: 16px }
  .card { padding: 16px }
  .tc-area { grid-template-columns: 8.5em minmax(0, 1fr) 2.8em }
}
@media (prefers-reduced-motion: reduce) { .team-card, .chev { transition: none } }

/* ---------- довідка ---------- */
.intro-more { padding: 0 20px 16px; font-size: 15px; font-weight: 600 }
#g-questions, #g-scale, #g-calc, #g-read { scroll-margin-top: 130px }
.g-toc { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 62px; z-index: 5; background: var(--bg); padding-block: 8px }
.g-toc a { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; white-space: nowrap }
.g-toc a:hover { border-color: var(--accent) }
.g-area { display: grid; gap: 12px }
.g-area-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 8px }
.g-area-n { font: 600 12px var(--f-data); text-transform: uppercase; letter-spacing: .06em; color: var(--link) }
.g-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.g-q { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 10px; align-content: start }
.g-q-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline }
.g-q h3 { font-size: 16px; line-height: 1.35 }
.g-q p { font-size: 15px }
.g-helps { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 14px !important }
.g-scale { display: grid; gap: 0 }
.g-scale-row { display: grid; grid-template-columns: 32px 13em minmax(0, 1fr); gap: 14px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line) }
.g-scale-row:first-child { border-top: 0 }
.g-scale-n { width: 32px; height: 32px; border-radius: 8px; color: #fff; font: 600 15px/32px var(--f-data); text-align: center }
.g-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.g-formula { font: 500 14px/1.5 var(--f-data); background: var(--accent-soft); color: var(--ink); padding: 12px 14px; border-radius: 8px }
.g-example { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.g-ex-cell { display: grid; gap: 4px; justify-items: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 8px }
.g-ex-cell b { font: 700 22px/1 var(--f-display); color: var(--muted) }
.g-ex-cell b.g-yes { color: var(--l1) }
.g-calc-rows { display: grid; gap: 0 }
.g-calc-rows > div { display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding-block: 10px; border-top: 1px solid var(--line); font-size: 15px }
.g-calc-rows b { font: 600 15px var(--f-data); white-space: nowrap }
.g-bands { display: grid; gap: 10px }
.g-band { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center }
.g-band .pill { justify-self: start }
.g-band .muted { grid-column: 2 }
.g-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.g-case { display: grid; gap: 8px; background: var(--bg); border-radius: 8px; padding: 14px; font-size: 14px }
.g-case-v b { font: 600 18px var(--f-data); letter-spacing: .15em }
@media (max-width: 760px) {
  .g-qs, .g-methods, .g-cases { grid-template-columns: 1fr }
  .g-scale-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: 2px }
  .g-scale-row .muted { grid-column: 2 }
  .g-calc-rows > div { grid-template-columns: 1fr auto }
  .g-calc-rows > div > span:first-child { grid-column: 1 / -1 }
  .g-toc { top: 50px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px }
  .g-toc::-webkit-scrollbar { display: none }
}
@media (max-width: 480px) { .brand-sep, .brand-product { display: none } }
.g-methods > .card { align-content: start }
.g-where td { vertical-align: top; font-size: 15px }
.g-where td:nth-child(n+3) { white-space: nowrap }
@media (max-width: 760px) { .g-where td:nth-child(n+3) { white-space: normal } .g-where { min-width: 560px } }
.g-where td:first-child { min-width: 13em }

/* ---------- навігація розділів ---------- */
.subnav { border-top: 1px solid var(--line) }
.subnav-in { max-width: 1280px; margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)) }
.subnav-in::-webkit-scrollbar { display: none }
.subnav a { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 11px 10px; border-bottom: 2px solid transparent; white-space: nowrap }
.subnav a:hover { color: var(--ink) }
.subnav a.on { color: var(--ink); border-bottom-color: var(--cyan) }
.g-toc { top: 108px }
#g-questions, #g-scale, #g-calc, #g-read, [id^="a-"] { scroll-margin-top: 170px }

/* ---------- як працювати з результатами ---------- */
.act-principles, .act-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.act-principles .card, .act-levels .card { align-content: start; gap: 8px }
.act-big { font: 700 18px/1.25 var(--f-display); letter-spacing: -.01em }
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative }
.rm-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; position: relative }
.rm-step:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line) }
.rm-n { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 600 16px/40px var(--f-data); text-align: center }
.rm-step h3 { margin: 2px 0 6px }
.rm-step p { font-size: 15px; max-width: 72ch }
.act-rule { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; font-size: 15px }
.recipes.card { padding: 0; gap: 0 }
.recipe { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding: 20px; border-top: 1px solid var(--line) }
.recipe:first-child { border-top: 0 }
.recipe-head { display: grid; gap: 8px; align-content: start; justify-items: start }
.recipe-head h3 { font-size: 17px }
.recipe-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: rs }
.recipe-steps li { counter-increment: rs; font-size: 14px; line-height: 1.45; display: grid; gap: 6px; align-content: start }
.recipe-steps li::before { content: counter(rs); width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  font: 600 12px/22px var(--f-data); text-align: center; color: var(--muted) }
@media (max-width: 900px) {
  .recipe { grid-template-columns: 1fr; gap: 14px; padding: 16px }
  .recipe-steps { grid-template-columns: 1fr; gap: 10px }
  .recipe-steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px }
}
.act-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px }
.patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px }
.patterns .card { align-content: start; gap: 8px }
.donts { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 15px }
.donts li::marker { color: var(--s1) }
.act-card { border-color: color-mix(in srgb, var(--cyan) 50%, var(--line)) }
.act-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 14px }
.act-box { background: var(--bg); border-radius: 8px; padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.act-focus { background: var(--accent-soft) }
.act-title { font-size: 16px; line-height: 1.35 }
@media (max-width: 900px) { .act-grid, .act-principles, .act-levels { grid-template-columns: 1fr } }
@media (max-width: 760px) { .g-toc { top: 96px } }
.g-list { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 15px }

/* ---------- міні-дашборд команди ---------- */
.dash.card { padding: 0; gap: 0; display: grid; grid-template-columns: 1.05fr 1fr 1fr 1.25fr; overflow: hidden }
.dash-cell { padding: 20px; display: grid; gap: 10px; align-content: start; justify-items: start; border-left: 1px solid var(--line); min-width: 0 }
.dash-cell:first-child { border-left: 0 }
.dash-gauge { justify-items: center; text-align: center }
.dash-gauge .eyebrow { justify-self: start }
.gauge { width: 100%; max-width: 230px; height: auto; display: block; margin-top: 4px }
.gauge-tick { font: 500 11px var(--f-data); fill: var(--muted) }
.dash-hero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.dash-gauge .dash-hero { justify-content: center; margin-top: -6px }
.dash-big { font: 700 40px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.dash .delta { display: inline }
.split { display: flex; gap: 2px; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 8px }
.split i { display: block; height: 100% }
.split-legend { display: grid; gap: 6px; width: 100% }
.split-legend span { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; color: var(--muted) }
.split-legend i { width: 10px; height: 10px; border-radius: 3px }
.split-legend b { color: var(--ink); font: 600 13px var(--f-data) }
.lv-rows { display: grid; gap: 9px; width: 100% }
.lv-row { display: grid; grid-template-columns: max-content minmax(36px, 1fr) 1.6em; gap: 10px; align-items: center; font-size: 13px }
.lv-row span { color: var(--muted); white-space: nowrap }
.lv-row b { font: 600 13px var(--f-data); text-align: right }
.lv-track { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden }
.lv-track i { display: block; height: 100%; border-radius: 5px; min-width: 0 }
.pyr2 { display: grid; gap: 6px; width: 100% }
.pyr2-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 10px; gap: 10px; align-items: center }
.pyr2-bar { margin-inline: var(--inset); display: flex; justify-content: space-between; gap: 6px; padding: 9px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--cyan) 16%, var(--surface)); font-size: 13px; font-weight: 600; min-width: 0 }
.pyr2-row.weak .pyr2-bar { background: color-mix(in srgb, var(--l3) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--l3) }
.pyr2-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pyr2-q { font: 500 11px var(--f-data); color: var(--muted); white-space: nowrap }
.pyr2-val { display: grid; justify-items: end; line-height: 1.15 }
.pyr2-val b { font: 600 15px var(--f-data); font-variant-numeric: tabular-nums }
.pyr2-val .delta { font-size: 11px }
.pyr2-dot { width: 10px; height: 10px; border-radius: 50% }
@media (max-width: 1150px) {
  .dash.card { grid-template-columns: 1fr 1fr }
  .dash-cell:nth-child(3) { border-left: 0 }
  .dash-cell:nth-child(n+3) { border-top: 1px solid var(--line) }
}
@media (max-width: 640px) {
  .dash.card { grid-template-columns: 1fr }
  .dash-cell { border-left: 0; padding: 16px }
  .dash-cell + .dash-cell { border-top: 1px solid var(--line) }
}
.resp { display: grid; gap: 6px; width: 100% }
.resp-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px }
.resp-top b { font-family: var(--f-data); font-weight: 600 }
.dash-gauge .resp { text-align: left; max-width: 240px }

/* ---------- сторінка опитування для працівників ---------- */
.sv-wrap { max-width: 720px; gap: 20px }
.sv-top { justify-content: space-between }
.sv-lock { font-size: 13px; font-weight: 600; color: var(--l1); background: var(--good-soft); padding: 6px 12px; border-radius: 999px; white-space: nowrap }
.sv-lock::before { content: ""; display: inline-block; width: 9px; height: 7px; border: 2px solid currentColor; border-radius: 2px; margin-right: 7px; position: relative; top: 1px;
  box-shadow: 0 -5px 0 -2px var(--good-soft), 0 -5px 0 0 currentColor; }
.sv-progress { border-top: 1px solid var(--line) }
.sv-progress-in { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)) }
.sv-progress-in .bar { flex: 1 }
.sv-progress-in .bar > i { background: linear-gradient(90deg, var(--cyan), var(--green)) }
.sv-progress-in span { font: 600 13px var(--f-data); color: var(--muted); white-space: nowrap }
.sv-hero { display: grid; gap: 6px; padding-top: 4px }
.sv-about, .sv-how { gap: 12px }
.sv-about h2, .sv-how h2 { font-size: 18px }
.sv-about p { font-size: 15px }
.sv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.sv-facts div { background: var(--bg); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px }
.sv-facts b { font: 700 19px/1.1 var(--f-display) }
.sv-facts span { font-size: 12.5px; color: var(--muted); line-height: 1.3 }
.sv-anon { background: var(--good-soft) }
.sv-tips { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 15px }
.sv-scale { display: grid; gap: 6px }
.sv-scale div { display: flex; align-items: center; gap: 10px; font-size: 14px }
.sv-scale b { width: 26px; height: 26px; border-radius: 7px; color: #fff; font: 600 13px/26px var(--f-data); text-align: center; flex: none }
.sv-qs { display: grid; gap: 14px }
.sv-q { border: 1px solid var(--line); margin: 0; gap: 14px; scroll-margin-top: 120px; transition: border-color .2s }
.sv-q.done { border-color: color-mix(in srgb, var(--green) 45%, var(--line)) }
.sv-q-head { display: grid; gap: 6px; padding: 0; float: left; width: 100% }
.sv-q-head + * { clear: both }
.sv-q-num { font: 600 12px var(--f-data); color: var(--muted); letter-spacing: .04em }
.sv-q-text { font-size: 18px; font-weight: 600; line-height: 1.35 }
.sv-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.sv-opts input { position: absolute; opacity: 0; pointer-events: none }
.sv-opts label { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 4px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; text-align: center; min-width: 0; min-height: 84px; transition: border-color .15s, background .15s }
.sv-opts label b { font: 700 20px/1 var(--f-display) }
.sv-opts label span { font-size: 12px; line-height: 1.25; color: var(--muted) }
.sv-opts label .sm { display: none }
.sv-opts label:hover { border-color: var(--c) }
.sv-opts input:checked + label { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); box-shadow: inset 0 0 0 1px var(--c) }
.sv-opts input:checked + label span { color: var(--ink); font-weight: 600 }
.sv-opts input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px }
.sv-picked { color: var(--l1); font-weight: 600; min-height: 0; margin: -4px 0 0 }
.sv-picked:empty { display: none }
.sv-q .add-comment, .sv-q textarea { margin-left: 0; width: 100% }
.sv-q .add-comment { width: auto }
.sv-end { gap: 12px }
.sv-submit { justify-self: stretch; padding: 16px; font-size: 16px; text-align: center }
.sv-gate { margin-top: 4px }
.sv-thanks { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 20px 0 }
.sv-check { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--green)); position: relative }
.sv-check::after { content: ""; position: absolute; left: 20px; top: 14px; width: 12px; height: 22px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(45deg) }
@media (max-width: 560px) {
  .sv-facts { grid-template-columns: 1fr 1fr 1fr; gap: 6px }
  .sv-facts div { padding: 8px }
  .sv-facts b { font-size: 16px }
  .sv-q-text { font-size: 17px }
  .sv-opts { gap: 5px }
  .sv-opts label { padding: 10px 2px 8px; min-height: 76px; gap: 5px }
  .sv-opts label b { font-size: 19px }
  .sv-opts label .lg { display: none }
  .sv-opts label .sm { display: block; font-size: 11px }
}
@media (prefers-reduced-motion: reduce) { .sv-q, .sv-opts label { transition: none } }
.sv-q.missing { border-color: var(--s1); box-shadow: inset 0 0 0 1px var(--s1) }
.sv-missing { color: var(--s1); font-weight: 600; margin: -4px 0 0 }
.sv-ok { color: var(--l1); font-weight: 600 }