/* ═══════════════════════════════════════════════════════
   Сторінки послуг = кабінети сервісів (Meta Ads, Google Ads, …).
   Перенесено з прототипу: prototype/style.css (кабінет v2), cab2.css, cabs.css.
   Підключається лише на сторінках послуг.
   ═══════════════════════════════════════════════════════ */

/* ── перший екран сторінки послуги ── */
.svc-hero { padding: 128px 0 56px; }
.svc-hero .h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); max-width: 20ch; }
.svc-hero .lead { margin-top: 24px; max-width: 42rem; }
.hint-cab { margin-top: 20px; font-family: var(--font-mono); color: var(--sava-light); font-size: 14px; }

.cab-page { padding: 32px 0 64px; }
.container.cab-wide { max-width: 1440px; }

/* ── оболонка кабінету ── */
#kabinet { --fb: #0866ff; --fbd: #0a4fc4; --fbl: #e8f1ff; --fg: #1c2b33; --fgr: #606770; --bd: #dddfe2; --bg: #f0f2f5; --ok: #42b72a; --dot: #31a24c; }
#kabinet button { font-family: inherit; cursor: pointer; }
#kabinet svg, .k-drawer svg, .k-modal svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cab { position: relative; margin-top: 40px; font-family: var(--font-body); }
.lbl + .cab { margin-top: 20px; }

/* кнопка «Розгорнути/Згорнути кабінет» — лише на телефоні (js), на комп'ютері й без JS кнопки нема */
.cab-more { display: none; width: 100%; margin-top: 16px; }

/* теми: кольори сервісів */
.cab.t-meta { --fb: #0866ff; --fbd: #0a4fc4; --fbl: #e8f1ff; --ok: #42b72a; }
.cab.t-gads, .cab.t-gsc, .cab.t-psi, .cab.t-dash { --fb: #1a73e8; --fbd: #1558b0; --fbl: #e8f0fe; --ok: #1a73e8; --bg: #f8f9fa; --bd: #dadce0; --fg: #202124; --fgr: #5f6368; }
.cab.t-mbs { --fb: #0866ff; --fbd: #0a4fc4; --fbl: #e8f1ff; --ok: #0866ff; }
.cab.t-figma { --fb: #0d99ff; --fbd: #0a7acc; --fbl: #e5f4ff; --bg: #e5e5e5; --bd: #e6e6e6; --fg: #1e1e1e; --fgr: #6b6b6b; }
/* фотостудія: акцент SAVA; --fb темніший за #ff4d2e — білий текст кнопок і помаранчевий текст на білому читаються (контраст ≥ 4.5) */
.cab.t-photo { --fb: #c9361c; --fbd: #a82b15; --fbl: #fff0ec; --ok: #c9361c; --bg: #131317; --bd: #dcdcdf; --fg: #1c1c1f; --fgr: #66666e; }

.cb-app { display: grid; grid-template-columns: 56px 1fr; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); }
.cb-app.one { grid-template-columns: 1fr; }
.cb-rail { background: #fff; border-right: 1px solid var(--bd); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.cb-rail i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--fgr); }
.cb-rail i.on { background: var(--fbl); color: var(--fb); }
.cb-rail .bdg { position: relative; }
.cb-rail .bdg em { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; background: #e41e3f; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cb-body { padding: 0 16px 16px; min-width: 0; }
.cb-search { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #fff; border: 1px solid var(--bd); color: var(--fgr); font-size: 14px; }

/* верхня смуга */
.k-top { display: flex; justify-content: space-between; align-items: center; min-height: 60px; gap: 12px; }
.k-tl, .k-tr { display: flex; align-items: center; gap: 14px; }
.k-title { font-size: 20px; }
.k-acc { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #fff; border: 1px solid var(--bd); font-size: 14px; color: var(--fg); }
.k-acc .sq { width: 20px; height: 20px; background: var(--sava); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.upd { font-size: 13px; color: var(--fgr); }
.ib { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bd); background: #fff; color: var(--fg); }
.k-blue { height: 36px; padding: 0 16px; background: var(--fb); color: #fff; border: 0; font-weight: 700; font-size: 14px; }
.k-chips { display: flex; gap: 8px; margin-bottom: 10px; }
.k-chips span { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--bd); background: #fff; font-size: 13px; white-space: nowrap; }
.k-chips span.on { color: var(--fb); border-color: var(--fb); background: var(--fbl); font-weight: 500; }

/* вкладки */
.cb-tabs { display: grid; margin-top: 12px; border: 1px solid var(--bd); border-bottom: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cb-tab { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #e4e6eb; color: var(--fgr); border: 0; border-right: 1px solid var(--bd); text-align: left; }
.cb-tab:last-child { border-right: 0; }
.cb-tab b { font-size: 15px; font-weight: 500; }
.cb-tab.on { background: #fff; color: var(--fb); box-shadow: inset 0 3px 0 var(--fb); }
.k-tabsrow { display: flex; align-items: stretch; gap: 16px; margin-top: 12px; }
.k-tabs { flex: 1; margin-top: 0; }
.k-tabsrow .recs { align-self: center; white-space: nowrap; }
.k-pg { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fgr); padding-bottom: 6px; align-self: flex-end; white-space: nowrap; }
.k-pg .ib { width: 28px; height: 28px; }
.k-panel { margin-top: 0; }
.k-panel[hidden] { display: none; }

/* панель інструментів */
.cb-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--bd); border-bottom: 0; }
.cb-tl, .cb-tr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cb-create { height: 36px; display: flex; align-items: center; padding: 0 16px; background: var(--ok); color: #fff; border: 0; font-weight: 700; font-size: 14px; white-space: nowrap; }
.cb-btn { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--bd); font-size: 13px; color: var(--fg); background: #fff; white-space: nowrap; }
.cb-btn.recs { color: var(--fb); border-color: var(--fb); }

/* випадні меню */
.dd { position: relative; }
.dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; background: #fff; border: 1px solid var(--bd); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); min-width: 240px; padding: 8px; }
.dd-menu.open, html:not(.js) .dd:focus-within .dd-menu { display: block; }
.k-tr .dd-menu, .cb-tr .dd-menu { left: auto; right: 0; }
.dd-h { font-size: 12px; color: var(--fgr); padding: 6px 8px 10px; }
.dd-menu > a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px; color: var(--fg); text-decoration: none; font-size: 14px; }
.dd-menu > a:hover, .dd-menu > a.near { background: var(--fbl); color: var(--fb); }

/* таблиця «кампаній» (етапи роботи, аудиторії) */
.kt { background: #fff; border: 1px solid var(--bd); }
.cr { display: grid; grid-template-columns: 36px 60px minmax(0, 2.4fr) 120px 180px minmax(0, 1.3fr) 120px 150px; border-bottom: 1px solid var(--bd); min-height: 64px; }
.cr.ar { grid-template-columns: 36px minmax(0, 1.3fr) 120px minmax(0, 2.4fr) minmax(0, 1.2fr); }
.kt[style] .cr { grid-template-columns: var(--cols); }
.cc { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; font-size: 13px; min-width: 0; color: var(--fg); }
.cc + .cc { border-left: 1px solid var(--bd); }
.cc small { font-size: 12px; color: var(--fgr); margin-top: 2px; line-height: 1.35; }
.cc b { font-weight: 700; font-size: 13px; }
.cr.hd { background: #f5f6f7; min-height: 48px; }
.cr.hd .cc { flex-direction: row; align-items: center; justify-content: space-between; }
.srt { font-style: normal; font-size: 11px; color: var(--fgr); }
.cc.chk { align-items: center; }
.cc.chk i { width: 14px; height: 14px; border: 1.5px solid #bec3c9; background: #fff; }
.cc.tg { align-items: center; }
.cc.nm b { color: var(--fb); font-weight: 500; font-size: 14px; }
.cr.hd .cc.nm b, .cr.sm .cc.nm b { color: var(--fg); font-weight: 700; font-size: 13px; }
.cc.st { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
.cc.st i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.cc.rs, .cc.bd { text-align: right; align-items: flex-end; }
.cr.sm { background: #f5f6f7; }
.cc.tx { font-size: 13px; line-height: 1.45; }
.cc.fm { color: var(--fgr); }
.kt .th { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px; }
.kt .th.r, .kt .cc.r { align-items: flex-end !important; text-align: right; }
.kt .th[data-explain] { cursor: help; }
.kt .th[data-explain]:hover, .kt .th.act { background: var(--fbl); }
.kt .th.act b { color: var(--fb); }
.kt .cc[data-col] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kt[style] .cc[data-col].act { background: var(--fbl); }
.stt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.stt i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #31a24c); }
.rec { align-self: flex-start; height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #b9d3ff; background: var(--fbl); color: var(--fb); font-size: 12px; font-weight: 500; white-space: nowrap; }
.rec:hover, .rec.near { background: var(--fb); color: #fff; }
#kabinet .rec svg { width: 14px; height: 14px; flex-basis: 14px; color: #f7b928; }
.k-sub { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 10px; }
.k-sub b { font-size: 16px; }
.k-sub span { font-size: 13px; color: var(--fgr); }

/* звіт у стилі Ads Manager */
.cb-grid { position: relative; }
.cb-table { background: #fff; border: 1px solid var(--bd); overflow: hidden; min-width: 0; }
.cb-row { display: grid; grid-template-columns: 36px 60px minmax(0, 1.6fr) 96px 104px repeat(7, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--bd); min-height: 56px; }
.cb-row > div { display: flex; flex-direction: column; justify-content: center; padding: 0 8px; min-width: 0; font-size: 13px; }
.cb-row > div + div { border-left: 1px solid var(--bd); }
.cb-hrow { background: #f5f6f7; min-height: 60px; }
.cb-hrow b { font-size: 12px; font-weight: 700; }
.cb-row small { font-size: 11px; color: var(--fgr); font-weight: 400; }
.cb-chk { align-items: center; }
.cb-chk i { width: 14px; height: 14px; border: 1.5px solid #bec3c9; background: #fff; }
.cb-onoff { align-items: center; }
.cb-tog { display: block; width: 32px; height: 18px; background: #bec3c9; position: relative; }
.cb-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; }
.cb-tog.on { background: var(--fb); }
.cb-tog.on::after { left: 16px; }
.cb-name b { font-weight: 500; color: var(--fb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-hrow .cb-name b, .cb-sum .cb-name b { color: var(--fg); }
.cb-del { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 6px; }
.cb-del i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.cb-bud { font-variant-numeric: tabular-nums; }
.cb-th { align-items: flex-end; text-align: right; cursor: help; transition: background 0.2s; }
.cb-th:hover, .cb-th.act { background: var(--fbl); }
.cb-th.act b { color: var(--fb); }
.cb-td { align-items: flex-end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background 0.2s; }
.cb-td.act { background: var(--fbl); }
.cb-sum { background: #f5f6f7; }
.cb-sum .cb-td { font-weight: 700; }

/* оголошення */
.adg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.adc { background: #fff; border: 1px solid var(--bd); }
.adp { height: 220px; background: #e4e6eb; position: relative; display: grid; place-items: center; overflow: hidden; }
.adp i { position: absolute; background: #c9ccd1; }
.adp.reel i:nth-child(1), .adp.story i:nth-child(1) { width: 110px; height: 196px; background: var(--ink-950); }
.adp.reel i:nth-child(2), .adp.story i:nth-child(2) { width: 72px; height: 10px; bottom: 48px; background: var(--sava); }
.adp.car i:nth-child(1) { width: 120px; height: 120px; left: calc(50% - 126px); background: var(--ink-950); }
.adp.car i:nth-child(2) { width: 120px; height: 120px; left: calc(50% + 6px); background: var(--sava); }
.adp.lead i:nth-child(1) { width: 200px; height: 28px; top: 64px; background: #fff; }
.adp.lead i:nth-child(2) { width: 200px; height: 28px; top: 104px; background: #fff; }
.adp.lead i:nth-child(3) { width: 200px; height: 32px; top: 148px; background: var(--fb); }
.adp.dm i:nth-child(1) { width: 160px; height: 36px; top: 60px; left: 40px; background: #fff; }
.adp.dm i:nth-child(2) { width: 160px; height: 36px; top: 108px; right: 40px; background: var(--fb); }
.adp.tg i:nth-child(1) { width: 240px; height: 96px; background: #fff; }
.adp.tg i:nth-child(2) { width: 180px; height: 10px; background: #c9ccd1; top: 80px; }
.adm { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--fg); }
.adm small { color: var(--fgr); }
.adm .st { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 6px; }
.adm .st i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }

/* рекомендації (FAQ) і заявка — поверх сторінки, над шапкою сайту */
.k-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: #fff; border-left: 1px solid var(--bd); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); z-index: 60; color: var(--fg); display: flex; flex-direction: column; }
.k-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.k-drawer[hidden], .k-modal[hidden] { display: none; }
.kd-h { height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--bd); }
.kd-h b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.kd-b { padding: 8px 16px; overflow: auto; }
.fq { border-bottom: 1px solid var(--bd); padding: 12px 0; }
.fq summary { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; color: var(--fb); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary svg { margin-top: 1px; color: #f7b928; }
.fq p { margin: 8px 0 0 26px; color: var(--fg); font-size: 14px; line-height: 1.55; }
.km { width: 480px; max-width: 100%; background: #fff; color: var(--fg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }
.km-b { padding: 16px; }
.km-l { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.km-goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.km-goals label { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--bd); cursor: pointer; font-size: 14px; }
.km-goals input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.km-goals i { width: 16px; height: 16px; border: 2px solid #bec3c9; border-radius: 50%; }
.km-goals label:has(input:checked) { border-color: var(--fb); background: var(--fbl); }
.km-goals input:checked + i { border: 5px solid var(--fb); }
.km-goals label:has(input:focus-visible) { outline: 2px solid var(--fb); }
.km input[type='text'], .km input[type='tel'] { width: 100%; height: 40px; border: 1px solid var(--bd); padding: 0 12px; font: inherit; font-size: 14px; color: var(--fg); background: #fff; }
.km input:focus { outline: 2px solid var(--fb); border-color: var(--fb); }
.km-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.km .form-success { background: #fff; color: var(--fg); padding: 24px 16px; min-height: 200px; }
.km .form-success p { color: var(--fgr); }
.km .form-success button { box-shadow: inset 0 0 0 1px var(--fb); color: var(--fb); }
.km .form-success button:hover { background: var(--fb); color: #fff; }
.km .form-error { margin: 0 16px 16px; color: var(--fg); }
.km .form-error p { color: var(--fgr); }

/* пояснення метрики: картка під заголовком стовпця */
[data-explain] { cursor: help; }
[data-explain].act { outline: 2px solid var(--fb); outline-offset: -2px; }
.kt [data-explain].act, .cb-th.act { outline: 0; }
.cb-pop { position: absolute; z-index: 4; width: 320px; background: #fff; border: 1px solid var(--bd); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); border-top: 3px solid var(--fb); }
.cb-pop::before { content: ''; position: absolute; top: -9px; left: calc(var(--ax, 160px) - 6px); border: 6px solid transparent; border-bottom-color: var(--fb); }
.cb-pop[hidden] { display: none; }
.cb-side-b { padding: 16px; min-height: 220px; }
.cb-side-b p { color: var(--fg); font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.cb-side-b .t { font-size: 18px; font-weight: 700; color: var(--fb); margin-bottom: 8px; }
.cb-side-b .t span { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--fgr); }
.cb-side-b .f { font-family: var(--font-mono); background: var(--fbl); padding: 8px 10px; color: var(--fbd); }
.cb-side-b .w b { color: var(--fg); }

/* збірка кабінету з клітин */
.cb-pix { position: absolute; inset: 0; display: grid; grid-auto-rows: 32px; pointer-events: none; overflow: hidden; z-index: 3; }
.cb-pix i { background: var(--ink-950); transition: opacity 0.25s; }
.cb-pix i.b { background: var(--fb); }
.cb-pix i.gone { opacity: 0; }

/* підпис і словник метрик (текст для Google) */
.cb-note { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.cb-dl { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cb-def { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); transition: background 0.3s; }
.cb-def dt { font-weight: 500; font-size: 17px; }
.cb-def dt span { font-family: var(--font-mono); font-weight: 400; color: var(--sava-light); font-size: 14px; }
.cb-def dd p { font-size: 14px; margin-top: 6px; color: rgba(255, 255, 255, 0.7); line-height: 1.55; }
.cb-def .f { font-family: var(--font-mono); color: var(--sava-light); }
.cb-def .w b { color: #fff; font-weight: 500; }
.cb-def.act { background: rgba(8, 102, 255, 0.12); }

/* кабінети інших послуг */
.svcs { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.svc { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #fff; font-weight: 500; font-size: 18px; background: rgba(11, 11, 13, 0.7); transition: background 0.2s, color 0.2s; }
.svc small { display: block; margin-top: 8px; font-size: 12px; color: var(--sava-light); font-family: var(--font-mono); }
.svc:hover, .svc:focus-visible, .svc.near { background: var(--sava); color: var(--ink-950); }
.svc:hover small, .svc:focus-visible small, .svc.near small { color: var(--ink-950); }

/* ── кабінети сервісів (prototype/cabs.css) ── */
.k-hint { margin-top: 10px; font-size: 12px; color: var(--fgr); }
.k-x { display: flex; align-items: center; gap: 8px; }
.k-x .dd-menu { left: auto; right: 0; }
.kt .cr[data-stage].lit { background: var(--fbl); box-shadow: inset 3px 0 0 var(--fb); transition: background 0.3s; }

/* Google Ads */
.gk-row { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--bd); }
.gk { padding: 14px 16px; border-top: 4px solid var(--c); border-right: 1px solid var(--bd); color: var(--fg); }
.gk:last-child { border-right: 0; }
.gk small { display: block; font-size: 12px; color: var(--fgr); }
.gk b { font-size: 24px; font-weight: 500; }
#kabinet svg.gchart { display: block; width: 100%; height: 110px; flex: none; background: #fff; border: 1px solid var(--bd); border-top: 0; margin-bottom: 12px; }
#kabinet svg.gchart.tall { height: 140px; }
.qs { display: inline-block; width: 70px; height: 8px; background: #e8eaed; margin-right: 8px; vertical-align: middle; }
.qs i { display: block; height: 100%; width: calc(var(--q) * 10%); background: #188038; }
.gads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gad { background: #fff; border: 1px solid var(--bd); padding: 16px; }
.gad small { font-size: 12px; color: #202124; font-weight: 700; }
.gad b { display: block; margin-top: 4px; font-size: 18px; color: #1a0dab; font-weight: 400; }
.gad p { margin-top: 6px; font-size: 14px; color: #4d5156; line-height: 1.5; }

/* Search Console */
.sc-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.sc { padding: 14px 16px; background: var(--c); color: #fff; }
.sc small { display: block; font-size: 12px; opacity: 0.9; }
.sc b { font-size: 26px; font-weight: 500; }
.idx { background: #fff; border: 1px solid var(--bd); padding: 20px; }
.idx-bar { display: flex; height: 16px; gap: 2px; }
.idx-bar i { background: #188038; }
.idx-bar i.n { background: #9aa0a6; }
.idx-l { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 14px; font-size: 14px; color: var(--fg); }
.idx-l span { display: flex; align-items: center; gap: 8px; }
.idx-l i { width: 12px; height: 12px; background: #188038; }
.idx-l i.n { background: #9aa0a6; }

/* PageSpeed Insights */
.psi { background: #fff; border: 1px solid var(--bd); padding: 20px; }
.psi-url { display: flex; gap: 12px; }
.psi-url > span:first-child { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--bd); color: var(--fg); overflow: hidden; }
.psi-url .k-blue { display: inline-flex; align-items: center; height: 44px; }
.psi-dev { display: flex; gap: 24px; margin-top: 16px; border-bottom: 1px solid var(--bd); }
.psi-dev span { padding: 10px 0; color: var(--fgr); font-size: 14px; }
.psi-dev span.on { color: var(--fb); box-shadow: inset 0 -3px 0 var(--fb); }
.psi-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 0; }
.ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; }
#kabinet .ring svg { width: 96px; height: 96px; flex: 0 0 96px; transform: rotate(-90deg); }
#kabinet .ring circle { fill: #e6f4ea; stroke-width: 2.6; }
#kabinet .ring .bg { stroke: #ceead6; }
#kabinet .ring .fg { stroke: #0c9d58; stroke-linecap: butt; }
.ring b { position: absolute; top: 40px; font-size: 28px; color: #0d652d; font-weight: 500; }
.ring small { font-size: 14px; color: var(--fg); text-align: center; }
.psi-cwv { border-top: 1px solid var(--bd); padding-top: 16px; }
.psi-h { font-size: 15px; color: var(--fg); margin-bottom: 10px; }
.psi-h .pass { color: #0d652d; font-weight: 700; }
.cwv { display: grid; grid-template-columns: 1fr 90px 1.2fr; gap: 16px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--bd); color: var(--fg); font-size: 14px; }
.cwv span { display: flex; align-items: center; gap: 8px; }
.cwv span i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #0c9d58; }
.cwv b { color: #0d652d; font-weight: 700; }
.cwv-bar { height: 8px; background: #e8eaed; }
.cwv-bar i { display: block; height: 100%; background: #0c9d58; }
.stcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stc { background: #fff; border: 1px solid var(--bd); padding: 16px; display: flex; flex-direction: column; gap: 6px; color: var(--fg); }
.stc small { color: var(--fgr); }
.stc .stt { margin-top: 6px; }

/* Figma */
.cb-app.fig { display: block; background: #2c2c2c; border-color: #1e1e1e; }
.fbar { height: 48px; background: #2c2c2c; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; color: #fff; border-bottom: 1px solid #444; }
.fbar > b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft { display: flex; gap: 2px; align-items: center; }
.ft i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #ddd; }
.ft i.on { background: #0d99ff; color: #fff; }
.ft.r { gap: 10px; }
.av { width: 28px; height: 28px; border-radius: 50%; background: var(--sava); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.fshare { height: 32px; padding: 0 14px; background: #0d99ff; color: #fff; border: 0; font-weight: 700; font-size: 13px; }
.fgrid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 240px; min-height: 560px; }
.fside, .fpr { background: #2c2c2c; color: #eee; padding: 8px 0; }
.fp-h { font-size: 12px; font-weight: 700; color: #bbb; padding: 10px 14px 6px; }
.fside .k-tabs { display: flex; flex-direction: column; border: 0; margin: 0; }
.fside .cb-tab { height: 34px; background: transparent; color: #ddd; border: 0; box-shadow: none; padding: 0 14px; font-size: 13px; }
.fside .cb-tab b { font-size: 13px; font-weight: 400; }
.fside .cb-tab.on { background: rgba(13, 153, 255, 0.2); color: #fff; }
.fl { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; font-size: 13px; color: #ccc; }
.fl.on { background: rgba(13, 153, 255, 0.2); color: #fff; }
.fside .k-x { flex-direction: column; align-items: stretch; margin: 14px; }
.fside .cb-btn { background: #383838; border-color: #555; color: #eee; }
.fside .recs { color: #8cc8ff; border-color: #555; }
.fside .dd-menu { left: 0; right: auto; }
.fmain { background: #e5e5e5; padding: 32px 24px 24px; overflow: hidden; min-width: 0; }
.fcv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.ff { background: #fff; padding: 28px 16px 16px; position: relative; min-height: 170px; color: #1e1e1e; }
.ff > small { position: absolute; top: -20px; left: 0; font-size: 12px; color: #6b6b6b; }
.ff.wide { grid-column: span 2; }
.ff[data-explain]:hover { outline: 2px solid #0d99ff; }
.mk2 { display: inline-grid; grid-template-columns: 12px 12px; gap: 3px; }
.mk2 i { width: 12px; height: 12px; background: var(--ink-950); }
.mk2 i:nth-child(1), .mk2 i:nth-child(4) { background: var(--sava); }
.flogo { display: flex; align-items: center; justify-content: center; gap: 12px; height: 110px; }
.flogo b { font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.fpal { display: grid; grid-template-columns: repeat(4, 1fr); height: 84px; }
.fhex { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 10px; margin-top: 6px; font-family: var(--font-mono); }
.ftype { display: flex; align-items: center; gap: 16px; height: 110px; }
.ftype b { font-size: 64px; font-weight: 500; }
.ftype span { font-size: 13px; color: #555; }
.fcar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; min-height: 130px; }
.bc { position: relative; width: 170px; height: 100px; background: var(--ink-950); color: #fff; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; }
.bc b { font-size: 13px; }
.bc small { font-size: 11px; color: #aaa; }
.ig { width: 110px; height: 110px; background: var(--sava); color: var(--ink-950); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.ig .mk2 i { background: var(--ink-950); }
.ig .mk2 i:nth-child(1), .ig .mk2 i:nth-child(4) { background: #fff; }
.ig b { font-size: 14px; }
.st9 { width: 64px; height: 114px; background: #f5f5f4; border: 1px solid #ddd; display: flex; align-items: flex-end; padding: 8px; font-size: 11px; }
.fui { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fui span { height: 40px; display: flex; align-items: center; padding: 0 16px; font-size: 14px; }
.fui .b1 { background: var(--sava); color: var(--ink-950); font-weight: 700; }
.fui .b2 { box-shadow: inset 0 0 0 1px var(--ink-950); }
.fui .in { box-shadow: inset 0 0 0 1px #ccc; color: #767676; width: 100%; }
.wire { height: 220px; display: flex; flex-direction: column; gap: 10px; }
.wire i { background: #e5e5e5; }
.wire .h { height: 24px; }
.wire .t { height: 28px; width: 70%; }
.wire .t.s { width: 45%; }
.wire .b { height: 36px; width: 160px; background: var(--sava); }
.wire .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.wire.m .cards { grid-template-columns: 1fr; }
.fpr { border-left: 1px solid #444; }
.fp-s { padding: 10px 14px; border-bottom: 1px solid #3a3a3a; display: flex; flex-direction: column; gap: 6px; }
.fp-s small { font-size: 11px; color: #aaa; }
.fp-s span { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fp-s span i { width: 16px; height: 16px; }

/* маркетинговий дашборд і статистика SMM */
.mkc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mkc { background: #fff; border: 1px solid var(--bd); padding: 16px; color: var(--fg); display: flex; flex-direction: column; gap: 4px; }
.mkc small { font-size: 12px; color: var(--fgr); }
.mkc b { font-size: 28px; font-weight: 500; }
.mkc em { font-style: normal; font-size: 12px; color: #188038; font-weight: 700; }
.mk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 12px; }
.mk-box { background: #fff; border: 1px solid var(--bd); padding: 16px; color: var(--fg); }
.mk-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mk-h small { color: var(--fgr); font-size: 12px; }
.fn { position: relative; height: 40px; margin: 0 auto 6px; width: var(--w); min-width: 190px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #fff; font-size: 13px; }
.fn i { position: absolute; inset: 0; background: var(--fb); z-index: 0; }
.fn span, .fn b { position: relative; z-index: 1; }
.fn:nth-child(3) i { background: #4285f4; }
.fn:nth-child(4) i { background: #34a853; }
.fn:nth-child(5) i { background: #188038; }
.fn:nth-child(6) i { background: #0d652d; }
.split { display: flex; height: 28px; gap: 2px; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; font-size: 13px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; flex: 0 0 12px; }

/* Business Suite (SMM) */
.pcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid var(--bd); }
.pd { min-height: 260px; padding: 8px; border-right: 1px solid var(--bd); display: flex; flex-direction: column; gap: 8px; }
.pd:last-child { border-right: 0; }
.pd > small { font-size: 12px; color: var(--fgr); font-weight: 700; }
.pp { border: 1px solid var(--bd); padding: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg); background: #fff; }
.pp i { height: 54px; background: var(--ink-950); }
.pp.reel i { height: 84px; background: linear-gradient(var(--ink-950), var(--sava)); }
.pp.st i { background: #ffb25e; }
.pp.post i { background: #e4e6eb; }
.pp b { font-size: 11px; color: var(--fb); }
.pp span { color: var(--fgr); }
.tps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tp { display: flex; gap: 12px; background: #fff; border: 1px solid var(--bd); padding: 12px; color: var(--fg); align-items: center; }
.tp small { display: block; color: var(--fgr); font-size: 12px; margin-top: 4px; }
.tpi { width: 56px; height: 56px; flex: 0 0 56px; background: #e4e6eb; }
.tpi.reel { background: linear-gradient(var(--ink-950), var(--sava)); }

/* Фотостудія (Предметна зйомка): темна робоча область у стилі сайту — відбір кадрів, без логотипів чужих програм */
.cb-app.ps { display: block; background: #131317; border-color: #26262c; color: #e8e8ea; }
.ps-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--ink-950); border-bottom: 1px solid #26262c; }
.ps-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ps-id .mk2 { grid-template-columns: 8px 8px; gap: 2px; }
.ps-id .mk2 i { width: 8px; height: 8px; background: #3a3a42; }
.ps-id .mk2 i:nth-child(1), .ps-id .mk2 i:nth-child(4) { background: var(--sava); }
.ps-id b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-cta { height: 32px; padding: 0 14px; background: var(--sava); color: var(--ink-950); border: 0; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ps-cta:hover { background: var(--sava-light); }
.k-tabsrow.ps-mods { margin: 0; padding: 0 12px; gap: 16px; align-items: center; background: var(--ink-950); border-bottom: 1px solid #26262c; }
.ps-mods .cb-tabs { border: 0; margin: 0; grid-auto-columns: max-content; }
.ps .cb-tab { height: 44px; background: transparent; color: #9a9aa2; border: 0; box-shadow: none; padding: 0 16px; }
.ps .cb-tab b { font-family: var(--font-mono); font-size: 15px; font-weight: 400; }
.ps .cb-tab:hover { color: #fff; }
.ps .cb-tab.on { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 var(--sava); }
.ps .cb-tab.on svg { color: var(--sava); }
.ps-mods .cb-btn { background: #1c1c21; border-color: #33333b; color: #e8e8ea; }
.ps-mods .cb-btn.recs { color: var(--sava-light); border-color: rgba(255, 77, 46, 0.45); }
.ps-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; min-height: 560px; }
.ps-side, .ps-pr { background: #131317; padding: 4px 0 16px; }
.ps-side { border-right: 1px solid #26262c; }
.ps-pr { border-left: 1px solid #26262c; }
.ps-h { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8a92; padding: 14px 14px 6px; }
.ps-fd { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; font-size: 13px; color: #cfcfd4; }
.ps-fd b { font-weight: 400; }
/* папка підсвічується за відкритою вкладкою: Зйомка → «Зйомка», Ретуш → «Ретуш», Каталог → «Готово» */
.ps:has([data-tab="shoot"].on) .ps-fd[data-f="shoot"], .ps:has([data-tab="retouch"].on) .ps-fd[data-f="retouch"], .ps:has([data-tab="catalog"].on) .ps-fd[data-f="done"] { background: rgba(255, 77, 46, 0.14); color: #fff; box-shadow: inset 2px 0 0 var(--sava); }
.ps:has([data-tab="shoot"].on) .ps-fd[data-f="shoot"] svg, .ps:has([data-tab="retouch"].on) .ps-fd[data-f="retouch"] svg, .ps:has([data-tab="catalog"].on) .ps-fd[data-f="done"] svg { color: var(--sava); }
.ps-st { list-style: none; margin: 0; padding: 0; }
.ps-st li { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 7px 14px; font-size: 13px; line-height: 1.35; color: #cfcfd4; transition: background 0.3s, box-shadow 0.3s; }
.ps-st span { font-family: var(--font-mono); color: var(--sava-light); }
.ps-st li.lit { background: rgba(255, 77, 46, 0.22); box-shadow: inset 3px 0 0 var(--sava); color: #fff; }
.ps-main { min-width: 0; padding: 16px; background-color: #1b1b20;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 32px 32px; }
.ps [data-explain]:hover { background-color: rgba(255, 77, 46, 0.08); }
.ps [data-explain].act { outline-color: var(--sava); }
/* метрики — картки над сіткою кадрів */
.ps-ms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; background: #26262c; border: 1px solid #26262c; }
.ps-m { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #131317; }
.ps-m small { font-size: 12px; color: #8a8a92; }
.ps-m b { font-size: 18px; font-weight: 500; color: #fff; }
/* кадри: заглушка (піксельна камера) або фото 4:3 */
.ps-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ps-ph, .ps-fr { position: relative; margin: 0; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--ink-950); box-shadow: inset 0 0 0 1px #2a2a32; }
.ps-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; text-align: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 8px 8px; }
#kabinet .ps-ph svg { width: 40px; height: 40px; flex: 0 0 40px; fill: var(--sava); stroke: none; }
.ps-ph figcaption { font-family: var(--font-mono); font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, 0.55); }
.ps-fr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-n { position: absolute; top: 6px; left: 8px; font-family: var(--font-mono); font-size: 11px; color: #6b6b73; }
.ps-frames figure:first-child { box-shadow: inset 0 0 0 2px var(--sava); }
.ps-frames figure:first-child .ps-n { color: var(--sava-light); }
.ps-strip { display: flex; gap: 6px; margin-top: 14px; padding: 8px; background: var(--ink-950); border: 1px solid #26262c; overflow: hidden; }
.ps-strip i { flex: 0 0 56px; height: 42px; background: #1b1b20; box-shadow: inset 0 0 0 1px #2a2a32; }
.ps-strip i.on { box-shadow: inset 0 0 0 2px var(--sava); }
/* ретуш: до / після і що робимо */
.ps-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ps-bai > small { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 12px; color: #8a8a92; }
.ps-bai:last-child .ps-ph { background-image: none; background-color: #101013; box-shadow: inset 0 0 0 2px var(--sava); }
.ps-steps { margin-top: 16px; padding: 12px 14px; background: #131317; border: 1px solid #26262c; }
.ps-steps > b { font-size: 14px; font-weight: 500; }
.ps-steps ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.ps-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfcfd4; }
.ps-steps svg, .ps-ok svg { color: var(--sava); }
/* каталог: готові файли за майданчиками */
.ps-oh { margin-bottom: 12px; font-size: 15px; }
.ps-oh b { font-weight: 500; }
.ps-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ps-out { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #131317; border: 1px solid #26262c; }
.ps-out b { display: block; font-size: 15px; font-weight: 500; color: #fff; }
.ps-out small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #8a8a92; }
.ps-shape { display: block; align-self: flex-start; height: 96px; aspect-ratio: 1; background: var(--ink-950); box-shadow: inset 0 0 0 1px #2a2a32; }
.ps-out.site .ps-shape { aspect-ratio: 4 / 3; }
.ps-out.market .ps-shape { background: #f5f5f4; }
.ps-out.social .ps-shape { aspect-ratio: 9 / 16; background: linear-gradient(var(--ink-950), var(--sava)); }
.ps-ok { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--sava-light); }
/* параметри справа: значення словами, шкала й зразки фону — декоративні */
.ps-p { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #222228; }
.ps-p small { font-family: var(--font-mono); font-size: 12px; color: #8a8a92; }
.ps-p > span:first-of-type { font-size: 14px; color: #fff; }
.ps-lv { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.ps-lv i { height: 6px; background: #2a2a32; }
.ps-lv i.on { background: var(--sava); }
.ps-sw { display: flex; gap: 8px; padding: 2px; }
.ps-sw i { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px #3a3a42; }
.ps-sw i:nth-child(1) { background: #f5f5f4; }
.ps-sw i:nth-child(2) { background: var(--sava); }
.ps-sw i:nth-child(3) { background: #7a6a58; }
.ps-sw i.on { outline: 2px solid var(--sava); outline-offset: 2px; }
/* арабська: моноширинний шрифт рве зв’язні літери — підписи фотостудії звичайним шрифтом */
[dir="rtl"] .ps :is(.ps-ph figcaption, .ps-h, .ps-p small, .ps-ok, .ps-bai > small, .cb-tab b) { font-family: var(--font-body); letter-spacing: 0; }
@media (max-width: 1100px) {
  .ps-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .ps-pr { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0; border-top: 1px solid #26262c; padding: 0; }
  .ps-pr .ps-h { grid-column: 1 / -1; }
  .ps-ms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ps-bar { padding: 0 8px; }
  .k-tabsrow.ps-mods { padding: 0 8px 8px; gap: 8px; }
  .ps-mods .cb-tabs { grid-auto-columns: minmax(max-content, 1fr); }
  .ps .cb-tab { padding: 0 10px; justify-content: center; }
  .ps-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ps-main { order: -1; padding: 12px 8px; }
  .ps-pr { grid-template-columns: minmax(0, 1fr); }
  .ps-side { border-right: 0; border-top: 1px solid #26262c; }
  .ps-m b { font-size: 16px; }
  .ps-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ps-strip i { flex-basis: 40px; height: 30px; }
  .ps-steps ul, .ps-outs { grid-template-columns: minmax(0, 1fr); }
  .ps-out { flex-direction: row; align-items: center; }
  .ps-shape { height: 56px; flex: 0 0 auto; }
  .ps-out > div { flex: 1; min-width: 0; }
}

/* текст послуги / міста під кабінетом (для Google) */
.svc-text p { max-width: 48rem; margin-top: 16px; color: rgba(255, 255, 255, 0.72); line-height: 1.65; }
.svc-text .h2 + p { margin-top: 24px; }
.svc-text ul { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); list-style: none; padding: 0; }
.svc-text li { position: relative; padding-block: 14px; padding-inline-start: 28px; border-bottom: 1px solid var(--line); }
.svc-text li::before { content: ""; position: absolute; inset-inline-start: 0; top: 20px; width: 12px; height: 12px; background: var(--sava); }

/* «що входить» (етапи), FAQ і міста послуги — видимий текст під кабінетом */
.svc-stages ol { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); list-style: none; padding: 0; }
.svc-stages li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding-block: 20px; border-bottom: 1px solid var(--line); }
.svc-stages .n { grid-row: span 2; font-family: var(--font-mono); color: var(--sava-light); font-size: 14px; }
.svc-stages h3, .svc-faq h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.3; }
.svc-stages p, .svc-faq p { margin-top: 8px; color: rgba(255, 255, 255, 0.72); line-height: 1.6; }
.svc-faq .faq-list { margin-top: 32px; max-width: 56rem; border-top: 1px solid var(--line); }
.svc-faq .faq-q { padding-block: 20px; border-bottom: 1px solid var(--line); }
.svc-cities .tags { margin-top: 24px; list-style: none; padding: 0; }
.svc-cities .tag.near { background: var(--sava); color: var(--ink-950); }

/* ── ціни (спецификация 2026-09-29-prices §3): рядок першого екрана і блок «Вартість» ── */
.svc-price { margin-top: 20px; font-family: var(--font-mono); font-size: 17px; color: rgba(255, 255, 255, 0.72); }
.svc-price b { color: var(--sava-light); font-weight: 700; white-space: nowrap; }
.km-int { margin: 12px 16px 0; padding: 8px 12px; background: var(--fbl, #e7f3ff); font-size: 14px; font-weight: 700; color: var(--fg); }
.km-int[hidden] { display: none; }
/* сітка карток — спільні лінії 1 px, як у логотипів і плиток; 1 рядок — одна широка картка */
.price-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.price-grid.is-1 { grid-template-columns: minmax(0, 1fr); }
.price-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 24px 24px; background: var(--ink-950); border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-card.is-featured { box-shadow: inset 0 0 0 1px var(--sava); background: var(--ink-900); }
.pc-badge { position: absolute; top: 0; inset-inline-end: 0; height: 24px; padding: 0 10px; display: flex; align-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--ink-950); background: var(--sava); }
.price-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.3; }
.pc-sum { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.pc-from { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--sava-light); white-space: nowrap; }
.pc-period, .pc-extra { font-family: var(--font-mono); font-size: 15px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.pc-note { margin-top: 10px; color: rgba(255, 255, 255, 0.65); line-height: 1.55; font-size: 15px; }
.pc-includes { margin-top: 18px; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.pc-includes li { position: relative; padding-block: 9px; padding-inline-start: 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.pc-includes li::before { content: ''; position: absolute; inset-inline-start: 0; top: 15px; width: 8px; height: 8px; background: var(--sava); }
.pc-gallery { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pc-gallery figure { position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden; background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--line); }
.pc-gallery img { width: 100%; height: 100%; object-fit: cover; }
.pc-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 6px; text-align: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 8px 8px; }
.pc-ph svg { fill: var(--sava); }
.pc-ph figcaption { font-family: var(--font-mono); font-size: 11px; line-height: 1.25; color: rgba(255, 255, 255, 0.5); }
.pc-cta { margin-top: auto; align-self: flex-start; min-width: 160px; }
.price-card > :nth-last-child(2) { margin-bottom: 24px; }
.pc-cta.near { background: var(--sava-light); box-shadow: 0 0 0 2px #fff; }
.pc-brief { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; font-family: var(--font-mono); font-size: 15px; color: rgba(255, 255, 255, 0.75); }
.pc-brief span { color: var(--sava-light); }
.pc-brief:hover, .pc-brief.near { color: #fff; }
/* арабська: моноширинний Ubuntu Mono рве зв'язні літери — підписи цін звичайним шрифтом */
[dir="rtl"] :is(.svc-price, .pc-period, .pc-extra, .pc-badge, .pc-brief, .pc-ph figcaption) { font-family: var(--font-body); letter-spacing: 0; }
/* одна широка картка: назва й сума ліворуч, пояснення й кнопка праворуч */
@media (min-width: 760px) {
  .price-grid.is-1 .price-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 32px; align-items: center; }
  .price-grid.is-1 h3 { grid-column: 1; grid-row: 1; }
  .price-grid.is-1 .pc-sum { grid-column: 1; grid-row: 2; }
  .price-grid.is-1 .pc-note { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .price-grid.is-1 .pc-cta { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .price-grid.is-1 .price-card > :nth-last-child(2) { margin-bottom: 0; }
}

/* ── планшет ── */
@media (max-width: 1100px) {
  .price-grid.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-chips, .k-pg, .cb-rail { display: none; }
  .cb-app { grid-template-columns: 1fr; }
  .adg { grid-template-columns: repeat(2, 1fr); }
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: 200px minmax(0, 1fr); }
  .fpr { display: none; }
  .fcv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stcs, .tps { grid-template-columns: repeat(2, 1fr); }
  .pcal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd:nth-child(4) { border-right: 0; }
  .pd:nth-child(n+5) { border-top: 1px solid var(--bd); }
}

/* ── телефон: таблиці → картки, як у мобільних застосунках сервісів ── */
@media (max-width: 760px) {
  .svc-hero { padding: 104px 0 40px; }
  .cb-body { padding: 0 8px 8px; }
  .k-top { flex-wrap: wrap; padding: 8px 0; }
  .k-tl, .k-tr { flex-wrap: wrap; gap: 8px; }
  .k-tr .upd, .k-tr .ib, .cb-search { display: none; }
  .cb-tab { padding: 0 8px; gap: 6px; }
  .cb-tab b { font-size: 13px; }
  .cb-tab svg { display: none; }
  .cb-tools { padding: 8px; }
  /* зняли поле змійки — ці кнопки в першому екрані: мінімум для пальця 44 px */
  .k-tr .k-blue, .cb-tl .cb-create { height: 44px; }
  .cb-tl .cb-btn, .cb-tr > .cb-btn:not(.recs) { display: none; }
  .dd-menu { position: fixed; left: 16px !important; right: 16px !important; top: 96px; min-width: 0; max-height: 70vh; overflow: auto; }

  /* етапи й аудиторії */
  .cr.hd { display: none; }
  .cr, .cr.ar, .kt[style] .cr { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 8px 0; }
  .cc { padding: 4px 12px; }
  .cc + .cc { border-left: 0; }
  .cc.chk, .cc.tg { display: none; }
  .cc.nm, .cc.tx { grid-column: 1 / -1; }
  .cc.rs, .cc.bd, .cc.wh { text-align: left; align-items: flex-start; }
  .cc.act { align-items: flex-end; }

  /* звіт: рядок = картка, назва метрики підписана */
  .cb-hrow { display: none; }
  .cb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 0; min-height: 0; }
  .cb-row > div { padding: 4px 12px; }
  .cb-row > div + div { border-left: 0; }
  .cb-chk, .cb-onoff, .cb-sum .cb-del, .cb-sum .cb-bud { display: none !important; }
  .cb-name { grid-column: 1 / -1; }
  .cb-td { align-items: flex-start; text-align: left; }
  .cb-td[data-l]::before { content: attr(data-l); font-size: 11px; color: var(--fgr); }
  .cb-td small { display: none; }

  /* таблиці сервісів: підпис стовпця над значенням, порожні клітинки ховаємо */
  .kt .cc.r, .kt .th.r { align-items: flex-start !important; text-align: left; }
  .kt .cc[data-l]::before { content: attr(data-l); font-size: 11px; font-weight: 400; color: var(--fgr); }
  .kt .cc:empty { display: none; }
  .k-tabsrow { flex-wrap: wrap; gap: 8px; }
  .k-tabsrow .k-tabs { flex: 1 0 100%; }
  /* вкладки не вміщаються — прокручуються всередині блоку, не сторінка */
  .k-tabs { grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; overscroll-behavior-x: contain; }
  .gk-row, .sc-row, .mkc-row, .psi-rings { grid-template-columns: repeat(2, 1fr); }
  .gk:nth-child(2) { border-right: 0; }
  .gk b, .sc b { font-size: 20px; }
  .mkc b { font-size: 22px; }
  .gads, .stcs, .tps, .mk-grid, .legend { grid-template-columns: 1fr; }
  .psi { padding: 12px; }
  .psi-url .k-blue { display: none; }
  .cwv { grid-template-columns: 1fr auto; }
  .cwv-bar { grid-column: 1 / -1; }
  .fgrid { grid-template-columns: 1fr; min-height: 0; }
  .fside { padding: 0; }
  .fside .fp-h, .fside .fl { display: none; }
  .fside .k-tabs { flex-direction: row; overflow-x: auto; }
  .fside .cb-tab { flex: 1 0 auto; }
  .fside .k-x { flex-direction: row; margin: 8px; }
  .fbar .ft:first-child { display: none; }
  .fmain { padding: 28px 12px 12px; }
  .fcv { grid-template-columns: 1fr; }
  .ff.wide { grid-column: auto; }
  .pcal { grid-template-columns: 1fr; }
  .pd { min-height: 0; border-right: 0; border-bottom: 1px solid var(--bd); }
  .pd:nth-child(n+5) { border-top: 0; }
  .fn { min-width: 0; width: max(var(--w), 60%); }
  .svc-text ul, .svc-stages ol { grid-template-columns: 1fr; }
  .adg { grid-template-columns: 1fr; }
  .cb-dl { grid-template-columns: 1fr; }
  .cb-def { padding-right: 0; }
  .svcs { grid-template-columns: 1fr; }
  .cb-pop { width: min(320px, calc(100vw - 32px)); }
}

/* ── телефон: компактний кабінет (Task 2) — верх кабінету + затухання, кнопка розгортає ── */
@media (max-width: 759px) {
  html.js .cab-more { display: inline-flex; }
  /* clip, а не hidden: обрізану частину не можна прокрутити ні фокусом, ні скриптом — верх кабінету не зникає (hidden — запасний) */
  html.js #cab:not(.is-open) { max-height: 560px; overflow: hidden; overflow: clip; }
  html.js #cab:not(.is-open)::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
    background: linear-gradient(to bottom, transparent, var(--ink-950));
    pointer-events: none;
  }
}

/* ── без JS: усі вкладки й рекомендації видно звичайним текстом ── */
html:not(.js) .k-panel[hidden] { display: block; }
html:not(.js) .k-drawer[hidden] { display: flex; position: static; width: auto; box-shadow: none; border-left: 0; border-top: 1px solid var(--bd); }
html:not(.js) .k-drawer [data-close] { display: none; }

/* ── FAQ і словник метрик: <details>, на комп'ютері завжди відкриті й виглядають як раніше ── */
.svc-faq summary, .cb-dl-fold > summary { list-style: none; }
.svc-faq summary::-webkit-details-marker, .cb-dl-fold > summary::-webkit-details-marker { display: none; }
/* питання FAQ згортаються і на комп'ютері — маркер +/– такий самий, як на телефоні */
.svc-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.svc-faq summary::after { content: '+'; flex: 0 0 24px; height: 24px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 18px; color: var(--ink-950); background: var(--sava); }
.svc-faq details[open] summary::after { content: '–'; }
.cb-dl-fold > summary { display: none; }
/* підказка під першим екраном: на дотикових пристроях змійка кабінету не дістає — інший текст (TOUCH у snake/index.js) */
.hint-cab .hc-touch { display: none; }
@media (max-width: 759px), (pointer: coarse) {
  .hint-cab .hc-touch { display: inline; }
  .hint-cab .hc-desk { display: none; }
}

/* ── телефон (Task 3): коротша сторінка послуги — акордеони, компактні списки, щільніші відступи; текст лишається в HTML ── */
@media (max-width: 759px) {
  .svc-hero { padding: 88px 0 20px; }
  .svc-hero .lead { margin-top: 16px; }
  .hint-cab { margin-top: 12px; }
  .cab-page { padding: 16px 0 40px; }

  /* словник метрик: рядок-перемикач */
  .cb-dl-fold { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cb-dl-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
  .cb-dl-fold > summary,
  .svc-faq summary { min-height: 48px; }
  .cb-dl-fold > summary { font-weight: 500; font-size: 16px; }
  .cb-dl-fold > summary::after { content: '+'; flex: 0 0 24px; height: 24px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 18px; color: var(--ink-950); background: var(--sava); }
  .cb-dl-fold[open] > summary::after { content: '–'; }
  .cb-dl-fold .cb-dl { margin-top: 0; }
  .cb-def { padding: 14px 0; }

  /* етапи й текст послуги */
  .svc-stages ol, .svc-text ul { margin-top: 20px; }
  .svc-stages li { grid-template-columns: 32px minmax(0, 1fr); padding-block: 14px; }
  .svc-stages h3, .svc-faq h3 { font-size: 17px; }
  .svc-stages p { margin-top: 4px; line-height: 1.5; }
  .svc-text .h2 + p { margin-top: 16px; }
  .svc-text p { margin-top: 12px; line-height: 1.55; }
  .svc-text li { padding-block: 10px; }
  .svc-text li::before { top: 16px; }

  /* FAQ: питання видно, відповідь — по дотику */
  .svc-faq .faq-list { margin-top: 20px; }
  .svc-faq .faq-q { padding-block: 0; }
  .svc-faq summary { padding-block: 10px; }
  .svc-faq .faq-q p { margin-top: 0; padding-bottom: 14px; }

  /* міста й «Інші послуги агенції» — компактно */
  .svc-cities .tags { margin-top: 16px; }
  .svcs { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc { min-height: 64px; padding: 12px 14px; font-size: 15px; }
  .svc small { margin-top: 4px; }

  /* ціни: картки стовпчиком, кнопка на всю ширину */
  .svc-price { margin-top: 12px; font-size: 16px; }
  .price-grid, .price-grid.is-2, .price-grid.is-many { margin-top: 20px; grid-template-columns: minmax(0, 1fr); }
  .price-card { padding: 28px 16px 16px; }
  .price-card h3 { font-size: 17px; }
  .pc-sum { margin-top: 6px; }
  .pc-from { font-size: 1.6rem; }
  .pc-note { margin-top: 6px; font-size: 14px; line-height: 1.5; }
  .pc-includes { margin-top: 12px; }
  .pc-includes li { padding-block: 6px; font-size: 14px; }
  .pc-includes li::before { top: 12px; }
  .pc-gallery { margin-top: 12px; }
  .price-card > :nth-last-child(2) { margin-bottom: 16px; }
  .pc-cta { align-self: stretch; }
  .pc-brief { margin-top: 8px; }
}