/* Панель комбайна. Без збірки й фреймворків — щоб її можна було правити руками
   через рік, а не відкопувати toolchain. */
:root{
  --bg:#0f1216; --panel:#161b22; --panel2:#1b212a; --line:#242c37; --line2:#2f3947;
  --txt:#e6edf3; --mut:#8b98a5; --dim:#5c6b7a;
  --acc:#3fb950; --acc2:#2f81f7; --warn:#d29922; --bad:#f85149;
  --radius:10px; --side:236px;
}
*{box-sizing:border-box}
/* hidden має ховати навіть те, чому ми задали display:flex — інакше «схований»
   значок лишається на екрані порожньою пігулкою */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);padding:8px 14px}
button:hover:not(:disabled){border-color:var(--mut)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--acc);border-color:var(--acc);color:#04260c;font-weight:600}
button.danger{border-color:var(--bad);color:var(--bad)}
button.ghost{background:transparent;border-color:transparent;color:var(--mut);padding:6px 10px}
button.ghost:hover:not(:disabled){background:var(--panel2);border-color:var(--line);color:var(--txt)}
input,textarea{width:100%;font:inherit;background:#0b0e12;color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px}
input:focus,textarea:focus{outline:none;border-color:var(--acc2)}
textarea{min-height:88px;resize:vertical}

/* ── каркас: сайдбар + робоча область ── */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.shell.bare{grid-template-columns:1fr}          /* екран входу — без сайдбара */
.shell.bare .side,.shell.bare .head{display:none}

.side{background:#12161c;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:16px 16px 14px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--acc);color:#04260c;
  font-weight:800;display:grid;place-items:center;font-size:15px}
.brand .name{font-weight:700;letter-spacing:-.3px}
.brand .ver{font-size:10.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:1px 7px;font-family:ui-monospace,Menlo,monospace}
.side nav{flex:1;overflow-y:auto;padding:4px 8px}
.side .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);
  padding:14px 8px 6px;font-weight:600}
.side a.nav{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  color:var(--mut);font-size:13.5px;margin-bottom:1px}
.side a.nav:hover{background:var(--panel2);color:var(--txt);text-decoration:none}
.side a.nav.on{background:var(--panel2);color:var(--txt);box-shadow:inset 2px 0 0 var(--acc)}
.side a.nav .i{flex:none;opacity:.75}
.side a.nav.on .i,.side a.nav:hover .i{opacity:1}
.side a.nav .cnt{margin-left:auto;font-size:11px;background:var(--acc2);color:#fff;
  border-radius:999px;padding:0 6px;min-width:18px;text-align:center}
.side a.nav.soon{opacity:.4;pointer-events:none}
.side-foot{border-top:1px solid var(--line);padding:10px 12px;display:flex;
  align-items:center;gap:8px}
.side-foot .who{flex:1;min-width:0}
.side-foot .who div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}

.main{min-width:0;display:flex;flex-direction:column}
.head{display:flex;align-items:center;gap:10px;padding:10px 22px;min-height:48px;
  border-bottom:1px solid var(--line);background:rgba(15,18,22,.86);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.head .sp{flex:1}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);min-width:0}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--txt)}
.crumbs .sep{color:var(--dim)}
.crumbs b{color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap{max-width:1120px;width:100%;margin:0 auto;padding:22px 22px 60px}
.only-narrow{display:none}

@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:20;width:var(--side);
    transform:translateX(-100%);transition:transform .18s}
  .shell.open .side{transform:none;box-shadow:0 0 0 100vw rgba(0,0,0,.5)}
  .only-narrow{display:inline-flex}
}

/* ── вміст ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px}
.card.pad0{padding:0}
.card.pad0 h2{padding:14px 16px 0}
.card.pad0 table{margin-top:8px}
.card.pad0 th:first-child,.card.pad0 td:first-child{padding-left:16px}
.card.pad0 th:last-child,.card.pad0 td:last-child{padding-right:16px}
.row{display:flex;gap:12px;align-items:center}
.muted{color:var(--mut)}
.small{font-size:12.5px}
h1{font-size:20px;margin:0 0 14px}
h2{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--mut);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover td{background:#1a2029}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.tag.live{border-color:var(--acc);color:var(--acc)}
.tag.lock{border-color:var(--warn);color:var(--warn)}
.tag.draft{border-color:var(--acc2);color:var(--acc2)}
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--mut);margin-bottom:5px}
.field .path{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim)}
.field.changed input,.field.changed textarea{border-color:var(--warn)}
.counter.over{color:var(--bad)}
.bar{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  padding:12px 16px;display:flex;gap:10px;align-items:center;border-radius:var(--radius);
  margin-top:14px;box-shadow:0 -4px 18px rgba(0,0,0,.28)}
.err{color:var(--bad);white-space:pre-wrap}
.ok{color:var(--acc)}
.login{max-width:340px;margin:12vh auto}
.anchors{font-size:11px;color:var(--dim);font-family:ui-monospace,Menlo,monospace}
.empty{color:var(--mut);padding:22px 4px;text-align:center}
.was{color:var(--mut);text-decoration:line-through}
.now{color:var(--acc)}
select{font:inherit;background:#0b0e12;color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px}
select:disabled{opacity:.5}

/* мініатюри й перемикач вигляду */
.thumb{display:block;border-radius:6px;border:1px solid var(--line);background:#0b0e12;
  aspect-ratio:8/5;object-fit:cover;object-position:top center;width:100%}
.thumb.none{display:none}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;background:transparent;color:var(--mut);padding:6px 12px;font-size:12.5px}
.seg button.on{background:var(--panel2);color:var(--txt)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;color:var(--txt)}
.tile:hover{border-color:var(--mut);text-decoration:none}
.tile .thumb{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.tile-b{padding:10px 12px}
.tile-b b{display:block;margin-bottom:3px}

/* візуальний режим: сторінка ліворуч, поле праворуч */
.vis{display:grid;grid-template-columns:1fr 360px;gap:14px;align-items:start}
.vis-page{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;height:calc(100vh - 210px);min-height:420px}
.vis-page iframe{width:100%;height:100%;border:0;background:#fff}
.vis-side{position:sticky;top:64px;max-height:calc(100vh - 210px);overflow:auto}
@media(max-width:1100px){
  .vis{grid-template-columns:1fr}
  .vis-side{position:static;max-height:none}
  .vis-page{height:60vh}
}
/* поле у візуальному режимі росте під вміст, а не ховає текст */
textarea.grow{min-height:90px;resize:vertical;line-height:1.5}

/* файловий менеджер */
.fm{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
.fm-tree{max-height:calc(100vh - 230px);overflow:auto;padding-bottom:10px}
.fm-view{max-height:calc(100vh - 230px);overflow:auto}
.fm-dir summary{cursor:pointer;padding:8px 12px;font-size:12.5px;color:var(--mut);
  list-style:none;position:sticky;top:0;background:var(--panel);z-index:1;
  display:flex;align-items:center;gap:7px}
.fm-dir summary .dn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-dir[open] summary{color:var(--txt)}
.fm-dir summary::-webkit-details-marker{display:none}
.fm-dir summary:before{content:"▸";display:inline-block;width:10px;color:var(--dim);
  transition:transform .12s}
.fm-dir[open] summary:before{content:"▾"}
.fm-dir summary:hover{color:var(--txt)}
.fm-file{display:flex;gap:8px;align-items:center;padding:5px 12px 5px 26px;
  font-size:12.5px;color:var(--txt)}
.fm-file:hover{background:var(--panel2);text-decoration:none}
.fm-file.on{background:var(--panel2);box-shadow:inset 2px 0 0 var(--acc)}
.fm-file .i,.fm-dir summary .i{flex:none}
/* групи типів: тека помітна, решта приглушена, але різна */
.f-dir{color:var(--acc2)}
.f-code{color:#c78a3d}
.f-img{color:var(--acc)}
.f-font{color:#9a7fd0}
.f-text{color:var(--dim)}
.fm-file .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code{margin:0;padding:12px;background:#0b0e12;border:1px solid var(--line);border-radius:8px;
  font:12px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word;
  color:#cfe3f5;overflow:auto}
/* перемикач «за назвою / за вмістом» під полем пошуку */
.fm-mode{display:flex;align-items:center;gap:4px;margin:7px 0 2px}
.fm-mode button{padding:2px 9px;font-size:11.5px;color:var(--mut);background:none;
  border:1px solid transparent;border-radius:20px;cursor:pointer}
.fm-mode button:hover{color:var(--txt)}
.fm-mode button.on{color:var(--txt);background:var(--panel2);border-color:var(--line)}
.fm-mode #fmst{margin-left:auto;padding-left:6px;text-align:right}
/* знахідка = рядок з номером і шматком тексту навколо збігу */
.fm-dir.found summary .dn{font:11.5px/1.5 ui-monospace,Menlo,monospace}
.fm-hit{display:flex;gap:8px;padding:4px 12px 4px 20px;font-size:11.5px;color:var(--mut);
  border-left:2px solid transparent}
.fm-hit:hover{background:var(--panel2);text-decoration:none;color:var(--txt)}
.fm-hit.on{background:var(--panel2);border-left-color:var(--acc);color:var(--txt)}
.fm-hit .ln{flex:none;width:34px;text-align:right;color:var(--dim);
  font:11px/1.6 ui-monospace,Menlo,monospace}
.fm-hit .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:11.5px/1.6 ui-monospace,Menlo,monospace}
.fm-hit mark{background:#f2c94c;color:#111;border-radius:2px}
.fm-more{padding:3px 12px 6px 54px;font-size:11px;color:var(--dim)}
.fm-img{background:#0b0e12;border:1px solid var(--line);border-radius:8px;padding:12px;text-align:center}
.fm-img img{max-width:100%;border-radius:6px}
@media(max-width:900px){.fm{grid-template-columns:1fr}.fm-tree{max-height:40vh}}
/* Редактор із підсвіткою: шар <pre> лежить рівно під текстовим полем і має ТІ
   САМІ метрики. Будь-яка розбіжність у шрифті чи відступах зсуває підсвітку. */
/* align-items:flex-start — інакше жолоб із номерами (він заввишки з увесь
   текст) розтягує контейнер, і шар підсвітки перестає збігатися з полем */
.ed{display:flex;align-items:flex-start;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#0b0e12}
.ed-ln{flex:none;width:52px;padding:12px 8px 12px 0;text-align:right;overflow:hidden;
  font:12px/18.6px ui-monospace,Menlo,monospace;color:#3d4a58;
  background:#0e1319;border-right:1px solid var(--line);user-select:none}
.ed.wrap .ed-ln{display:none}
.ed-body{position:relative;flex:1;min-width:0}
.ed .code{min-height:340px;max-height:calc(100vh - 460px);white-space:pre;overflow:auto;
  tab-size:2;margin:0;border:0;border-radius:0;background:transparent}
.ed.wrap .code{white-space:pre-wrap;word-break:break-word}
/* Кольори дає шар під полем, тому текст самого поля прозорий: видно курсор і
   виділення, а літери — з шару. Виділення напівпрозоре, інакше воно закривало
   б собою підсвічений текст, бо поле лежить ЗВЕРХУ. */
.ed textarea.code{position:relative;display:block;width:100%;resize:vertical;
  color:transparent;caret-color:var(--txt)}
.ed textarea.code::selection{background:rgba(47,129,247,.34)}
.ed textarea.code:disabled{color:var(--txt)}
.ed .ed-hl{position:absolute;inset:0;pointer-events:none;color:var(--txt);overflow:hidden}
/* підсвітка синтаксису: розмітка гасне, текст сторінки лишається яскравим */
.ed-hl .t-tag{color:#7ee787}
.ed-hl .t-attr{color:#79c0ff}
.ed-hl .t-str{color:#a5d6ff}
.ed-hl .t-key{color:#79c0ff}
.ed-hl .t-num{color:#ffa657}
.ed-hl .t-kw{color:#ff7b72}
.ed-hl .t-punc{color:#7d8590}
.ed-hl .t-com{color:#6e7681;font-style:italic}
/* підсвітка має бити в очі — заради неї все й робилось */
.ed .ed-hl mark{background:#f2c94c;color:#111;border-radius:2px;
  box-shadow:0 0 0 1px rgba(242,201,76,.5)}
.ed .ed-hl mark.on{color:#062611}
.ed .ed-hl mark.on{background:#7bd88f;box-shadow:0 0 0 1px rgba(123,216,143,.6)}

.ed-bar{display:flex;align-items:center;gap:10px;padding:6px 2px 0;font-size:12px;color:var(--mut)}
.ed-bar label{white-space:nowrap}
/* «рядок N, колонка M» — це кнопка переходу до рядка, а не підпис */
.ed-pos{background:none;border:0;padding:0;color:var(--mut);font-size:12px;cursor:pointer;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-pos:hover{color:var(--txt);text-decoration:underline}
/* попередження про повтори живе тут значком, а не смугою над текстом */
.ed-chip{display:flex;align-items:center;gap:6px;padding:2px 9px;font-size:12px;
  color:var(--warn);background:rgba(210,153,34,.08);border:1px solid rgba(210,153,34,.35);
  border-radius:20px;cursor:pointer;white-space:nowrap;flex:none}
.ed-chip:hover,.ed-chip.on{background:rgba(210,153,34,.18)}
.ed-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none}
/* згортання службового — не попередження, тому нейтральні кольори */
.ed-chip.fold{color:var(--mut);background:transparent;border-color:var(--line)}
.ed-chip.fold:hover{color:var(--txt);background:var(--panel2)}
.ed-chip.fold.on{color:var(--acc2);border-color:rgba(47,129,247,.45);background:rgba(47,129,247,.1)}
.ed-chip.fold.on .dot{background:var(--acc2)}
/* поки згорнуто, у полі лежить не той текст, що поїде на сайт — це має бути видно */
.ed.folded{border-color:rgba(47,129,247,.4)}
.ed.folded textarea.code{caret-color:transparent}

.find{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 8px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.find input{width:260px;padding:5px 9px}
.find button{padding:3px 9px}
.logo-box{width:110px;height:56px;border:1px solid var(--line);border-radius:8px;
  background:#0b0e12;display:grid;place-items:center;overflow:hidden}
.logo-box img{max-width:100%;max-height:100%}
.logo-mini{height:26px;max-width:80px;object-fit:contain;border-radius:4px}

/* вкладки всередині сайту */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px}
.tabs .tab{display:flex;align-items:center;gap:9px;padding:9px 14px 10px;color:var(--mut);
  border-bottom:2px solid transparent;font-size:14px;white-space:nowrap}
.tabs .tab>span{display:flex;flex-direction:column;gap:1px}
.tabs .tab b{font-weight:600}
.tabs .tab .i{flex:none;opacity:.7}
.tabs .tab.on .i,.tabs .tab:hover .i{opacity:1}
.tabs .tab:hover{color:var(--txt);text-decoration:none}
.tabs .tab.on{color:var(--txt);border-bottom-color:var(--acc)}
.tabs .tab .small{font-size:11.5px}
@media(max-width:760px){.tabs{overflow-x:auto}.tabs .tab .small{display:none}}

/* «ще в роботі»: помітно, але не як помилка */
.wip{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding:9px 14px;border:1px dashed var(--warn);border-radius:var(--radius);
  background:rgba(210,153,34,.06)}
.wip b{color:var(--warn);font-size:13px}

.warn-t{color:var(--warn)}

/* «було / стало»: рядки як у git, але з підсвіткою того, що змінилось усередині */
.diff{margin-top:10px;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#0b0e12}
.d-head{display:flex;gap:8px;align-items:baseline;padding:7px 12px;font-size:12px;
  background:var(--panel2);border-bottom:1px solid var(--line)}
.d-inT{color:var(--acc)}
.d-outT{color:var(--bad)}
.d-body{max-height:340px;overflow:auto;padding:6px 0}
.d-row{display:flex;gap:0;font:12px/1.65 ui-monospace,Menlo,monospace;padding:0 10px 0 0}
.d-n{flex:none;width:46px;text-align:right;padding-right:10px;color:#3d4a58;user-select:none}
.d-s{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.d-s:before{display:inline-block;width:14px;color:var(--dim)}
.d-same{color:var(--mut)}
.d-same .d-s:before{content:" "}
.d-out{background:rgba(248,81,73,.09)}
.d-out .d-s:before{content:"−";color:var(--bad)}
.d-in{background:rgba(63,185,80,.09)}
.d-in .d-s:before{content:"+";color:var(--acc)}
.d-out mark{background:rgba(248,81,73,.42);color:var(--txt);border-radius:2px}
.d-in mark{background:rgba(63,185,80,.38);color:var(--txt);border-radius:2px}
/* коли текст лише додали, у рядку «було» знімати нема чого — лишаємо позначку
   місця, інакше здається, що обидва рядки однакові */
.d-row mark:empty{display:inline-block;width:3px;height:1em;vertical-align:-2px}
#fdiffb.on{color:var(--txt);background:var(--panel2)}

/* сканер полів у редакторі файлів */
.scan{margin-top:8px}
.scan-note{padding:8px 11px;border:1px dashed var(--warn);border-radius:8px;
  background:rgba(210,153,34,.06);font-size:12.5px;margin-top:8px}
.scan-multi{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}
.scan-multi button{padding:2px 8px;font-size:11.5px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:6px;cursor:pointer}
.scan-multi button:hover{border-color:var(--warn);color:var(--txt)}
.scan-rows{display:flex;flex-direction:column;gap:4px}
.scan-row{display:flex;gap:9px;align-items:center;padding:4px 6px 4px 10px;border-radius:7px;
  font-size:12.5px;border-left:2px solid transparent}
.scan-row button{padding:3px 9px;font-size:12px}
.scan-row.ok{background:rgba(63,185,80,.07);border-left-color:var(--acc)}
.scan-row.part{background:rgba(248,81,73,.07);border-left-color:var(--bad)}
.scan-rest{padding:3px 10px;font-size:12px;color:var(--dim)}

/* помилки розмітки: те саме, що ловить гейт публікації, але сказане одразу */
.check{margin-top:10px;border:1px solid rgba(248,81,73,.45);border-radius:8px;
  background:rgba(248,81,73,.07);overflow:hidden}
.check-h{padding:7px 12px;font-size:12.5px;color:var(--bad);font-weight:600;
  border-bottom:1px solid rgba(248,81,73,.25)}
.check-row{display:flex;gap:8px;align-items:center;padding:3px 10px 3px 0;font-size:12.5px}
.check-row .d-n{color:var(--dim);font:12px/1.65 ui-monospace,Menlo,monospace}

/* незбережена правка, що лишилась у браузері */
.draft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  padding:8px 12px;border:1px solid rgba(47,129,247,.4);border-radius:8px;
  background:rgba(47,129,247,.08);font-size:12.5px}
.draft>div{flex:1;min-width:200px}
.draft b{color:var(--acc2)}

/* історія файла */
.hist{margin:-4px 0 12px;border:1px solid var(--line);border-radius:8px;background:#0b0e12;
  overflow:hidden}
.hist-row{display:flex;gap:10px;align-items:center;padding:6px 12px;font-size:12.5px;
  border-bottom:1px solid var(--line)}
.hist-row:last-child{border-bottom:0}
.hist-k{flex:none;font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--mut);white-space:nowrap}
.hist-k.k-edit{color:var(--acc2);border-color:rgba(47,129,247,.4)}
.hist-k.k-fields{color:var(--acc);border-color:rgba(63,185,80,.4)}
.hist-k.k-build{color:var(--warn);border-color:rgba(210,153,34,.4)}
.hist-w{flex:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fhist.on{color:var(--txt);background:var(--panel2)}
/* «було» під «стало» на всю ширину: значення поля — це рядок тексту, і поруч
   вони обрізаються обидва, а саме зміну видно найгірше */
.hist-vals{padding:4px 12px 10px;border-bottom:1px solid var(--line)}
.hist-f{margin-bottom:8px}
.hist-f:last-child{margin-bottom:0}
.hist-f>.anchors{padding:2px 0 3px}
.hist-vals .d-row{padding:1px 8px;border-radius:4px}
.hist-vals .d-s{white-space:pre-wrap;word-break:break-word}

/* форма офера: обовʼязкове відділене кольором від необовʼязкового */
.sect{border-left:3px solid var(--line2)}
.sect.need{border-left-color:var(--acc)}
.sect.say{border-left-color:var(--acc2)}
.sect>h2{justify-content:flex-start}
.need-t{font-size:11.5px;font-weight:400;color:var(--acc)}
.sect.more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.sect.more>summary::-webkit-details-marker{display:none}
.sect.more>summary:before{content:"▸";color:var(--dim)}
.sect.more[open]>summary:before{content:"▾"}
.sect.more>summary:hover h2{color:var(--acc2)}
.slug-pre{flex:none;color:var(--dim);font:12.5px ui-monospace,Menlo,monospace}
/* поле, якого бракує: показуємо ДЕ, а не лише що */
.field.bad input,.field.bad textarea{border-color:var(--bad)}
.field.bad label{color:var(--bad)}
/* рідна кнопка вибору файла світла й вибивається з теми — своя */
.filebtn{display:inline-flex;align-items:center;flex:none;padding:7px 13px;font-size:12.5px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;cursor:pointer;
  white-space:nowrap}
.filebtn:hover{border-color:var(--mut)}

/* доступи: разовий пароль і вимкнена людина */
.pwd-box{border-color:var(--acc)}
.pwd{display:block;margin-top:2px;padding:6px 9px;background:#0b0e12;border:1px solid var(--line);
  border-radius:7px;font:13px ui-monospace,Menlo,monospace;color:var(--txt);
  user-select:all;overflow:hidden;text-overflow:ellipsis}
tr.off td{opacity:.55}

/* фільтри над списком і масовий вибір */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.filters input{padding:7px 10px;font-size:13px}
.filters select{font-size:12.5px}
.geo{display:inline-block;font:11px ui-monospace,Menlo,monospace;padding:1px 6px;border-radius:5px;
  background:var(--panel2);border:1px solid var(--line);color:var(--mut)}
/* Смужка гео замість стовпчика. Колонка вузька, тож кожен код падав у свій
   рядок і офер із дванадцятьма гео розтягував рядок таблиці на пів екрана. */
/* width:max-content — щоб КОЛОНКА попросила собі ширину під смужку. Самого
   max-width замало: для браузера мінімум колонки = найширша плашка (~34px), і
   при автоматичній розкладці таблиці сусіди з довгими URL забирають місце, а
   гео стискається до однієї плашки в рядок. Min-width на самій колонці —
   страховка на випадок, коли контенту в таблиці стане ще більше. */
.geos{display:flex;flex-wrap:wrap;gap:4px;max-width:246px}
/* Мінімум — три плашки, не всі шість. Вимога «всі в один рядок» робила
   таблицю ширшою за вікно, і замість високого рядка поїхала вся сторінка:
   бічне меню зрізалось, а колонка дій ішла за край. Тепер гео за потреби
   лягає у два рядки — це дешевше, ніж горизонтальна прокрутка всього екрана. */
table.offers th:nth-child(4),table.offers td:nth-child(4){min-width:116px}
/* Звільнене місце від схованої колонки посилань віддаємо туди, де воно
   читається: повні домени й гео в один рядок. */
@media (max-width:1700px){
  table.offers th:nth-child(4),table.offers td:nth-child(4){min-width:250px}
}

/* Сайт і його стан — один рядок: домен обрізається трикрапкою, повний видно
   в підказці. Стосом вони давали чотири рядки на офер із двома сайтами. */
table.offers .site-l{display:flex;align-items:center;gap:6px;max-width:250px;
  white-space:nowrap;line-height:1.9}
table.offers .site-d{overflow:hidden;text-overflow:ellipsis}

/* Таблиця має вміщатися у вікно, а не їхати за край. Бюджет ширини при
   ноутбучних 1470 px: збоку меню 320, всередині картки лишається ~1110.
   Вісім колонок у цей бюджет входять лише якщо не платити за те, що й так
   є в іншому місці. */
table.offers td,table.offers th{padding:8px}
table.offers td:nth-child(5){max-width:230px}
table.offers td:nth-child(6){max-width:150px}
/* Посилання за замовчуванням на вузькому екрані ховаємо: воно є в «правити»
   і в картці офера, а тут з'їдає 230 px і виштовхує колонку дій за край.
   Ховаємо саме його, бо це єдина колонка, яку не переглядають очима — її
   читають, коли вже відкрили офер. */
@media (max-width:1700px){
  table.offers th:nth-child(6),table.offers td:nth-child(6){display:none}
}
/* Остання страховка: якщо вікно все одно вузьке, всередині картки зʼявиться
   своя прокрутка, а сторінка лишиться на місці. */
.card.pad0:has(table.offers){overflow-x:auto}
.geo.more{cursor:pointer;border-style:dashed}
.geo.more:hover{color:var(--fg);border-color:var(--mut)}
tr.picked td{background:rgba(47,129,247,.09)}

/* Логотипи партнерів приходять від них самих: різна висота, різні поля,
   прозоре тло. Без спільної рамки колонка «офер» стрибала на кожному рядку,
   а світлі лого зникали на темній панелі. Рамка = та сама плашка, що й на
   сайтах: фіксований бокс, contain і темне тло. */
.logo-box{flex:0 0 auto;width:92px;height:32px;border-radius:7px;background:#0d1117;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  padding:3px;box-sizing:border-box;overflow:hidden}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo-box i{font:600 13px system-ui;color:var(--mut);font-style:normal}

/* Рядок оферів: однакова висота й жодних переносів у назві — таблиця має
   читатись як таблиця, а не як набір карток різної висоти. */
table.offers td{vertical-align:middle}
table.offers .o-name{min-width:104px}
table.offers tbody tr{height:54px}

/* доставка: видно, що саме зараз відбувається і скільки воно вже триває */
.sending{display:flex;gap:12px;align-items:flex-start;border-color:var(--acc2)}
.sending.done{border-color:var(--line);flex-direction:column;gap:4px;font-size:13px}
.spin{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  border:2px solid rgba(47,129,247,.25);border-top-color:var(--acc2);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ver-n{font:13px ui-monospace,Menlo,monospace;color:var(--acc2)}
.ver-tag{color:var(--acc2);border-color:rgba(47,129,247,.45);font-family:ui-monospace,Menlo,monospace}
.ver-tag:hover{background:rgba(47,129,247,.12);text-decoration:none}

/* журнал: рядок-речення замість таблиці зі слагами */
.feed{padding:4px 0}
.fe{display:flex;gap:10px;align-items:baseline;padding:6px 16px;font-size:13px;
  border-bottom:1px solid var(--line)}
.fe:last-child{border-bottom:0}
.fe:hover{background:#1a2029}
.fe-t{flex:none;width:118px}
.fe-w{flex:none;width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}
.fe-s{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-d{flex:none}
.fe-x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
@media(max-width:1100px){.fe-x{display:none}}

/* порядок оферів на сайті: перетягування без бібліотек */
.ord{padding:4px 0}
.ord-r{display:flex;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);
  background:var(--panel)}
.ord-r:last-child{border-bottom:0}
.ord-r.off{opacity:.55}
.ord-r.drag{opacity:.4}
.ord-r.over{box-shadow:inset 0 2px 0 var(--acc2)}
.ord-h{flex:none;color:var(--dim);cursor:grab;font-size:16px;line-height:1;user-select:none}
.ord-r:active .ord-h{cursor:grabbing}
.ord-n{flex:none;width:96px;display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.ord-n img{max-width:92px;max-height:26px}
.ord-t{flex:1;min-width:0}
.ord-t b{margin-right:8px}
.ord-ar{flex:none;display:flex;flex-direction:column;gap:1px}
.ord-ar button{padding:0 6px;line-height:1.3;font-size:11px}

/* «на сайті ще старе»: смуга внизу екрана, повз яку не пройдеш */
.todo{position:fixed;left:var(--side);right:0;bottom:0;z-index:30;
  background:rgba(22,27,34,.97);border-top:2px solid var(--warn);
  box-shadow:0 -6px 22px rgba(0,0,0,.4);backdrop-filter:blur(8px)}
.todo-in{max-width:1120px;margin:0 auto;padding:12px 22px;display:flex;gap:14px;align-items:center}
.todo b{color:var(--warn)}
.todo .sending{margin:0;padding:8px 12px;border:0;background:transparent}
@media(max-width:860px){.todo{left:0}}

/* смуга стану: що комбайн робить і що ще не доїхало — на будь-якому екрані */
.bus{position:fixed;left:var(--side);right:0;bottom:0;z-index:40;
  background:rgba(18,22,28,.97);border-top:1px solid var(--line2);
  box-shadow:0 -6px 22px rgba(0,0,0,.45);backdrop-filter:blur(10px)}
.bus-r{display:flex;gap:12px;align-items:center;padding:9px 22px;font-size:13px;
  border-bottom:1px solid var(--line);max-width:1160px;margin:0 auto}
.bus-r:last-child{border-bottom:0}
.bus-r.hold{border-left:3px solid var(--warn)}
.bus-r.run{border-left:3px solid var(--acc2)}
.bus-r.ok{border-left:3px solid var(--acc)}
.bus-r.err{border-left:3px solid var(--bad)}
.bus-i{flex:none;width:16px;text-align:center}
.bus-r.ok .bus-i{color:var(--acc)}
.bus-r.err .bus-i{color:var(--bad)}
.bus-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bus-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:860px){.bus{left:0}}
/* рядок-посилання: влучати в номер не треба */
tr.go{cursor:pointer}
tr.go:hover td{background:#1e2530}
tr.go button{white-space:nowrap}

/* ── перевірка казино: таблиця-сітка «казино × поле» ── */
.fgrid{display:grid;grid-template-columns:minmax(120px,1.2fr) repeat(6,minmax(88px,1fr));
  gap:6px 8px;align-items:center;overflow-x:auto}
.fhead{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);
  padding-bottom:4px;border-bottom:1px solid var(--line);cursor:help}
.fname{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin{width:100%;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--txt);min-width:0}
.fin:disabled{opacity:.45;cursor:not-allowed}
.fin.pend{border-color:var(--warn,#d8952a);background:color-mix(in srgb,var(--warn,#d8952a) 8%,var(--bg))}
@media(max-width:900px){.fgrid{grid-template-columns:minmax(110px,1fr) repeat(6,minmax(80px,1fr));
  min-width:640px}}

/* ── межа топ-карток у списку оферів ──
   Панель має показувати те саме, що людина побачить на сайті: перші N казино
   йдуть великими картками, решта — рядками. Без цієї межі порядок доводиться
   тримати в голові. */
.ord-sep{display:flex;align-items:center;gap:8px;padding:10px 16px 6px;font-size:12px;
  color:var(--mut);text-transform:none;letter-spacing:0}
.ord-sep b{color:var(--txt);font-weight:700}
.ord-sep.top{padding-top:4px}
.ord-sep:not(.top){border-top:1px dashed var(--line);margin-top:6px}
.ord-r.card-slot{background:color-mix(in srgb,var(--acc,#4ade80) 6%,transparent)}
.ord-rank{position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  font:700 10px/1 ui-monospace,monospace;color:var(--acc,#4ade80)}
.ord-r{position:relative}

/* незбережена правка помітна одразу — і саме її стереже reConv() */
.fin.dirty,[data-lb].dirty{border-color:var(--warn,#d8952a);
  background:color-mix(in srgb,var(--warn,#d8952a) 10%,var(--bg))}

/* Підсвітка H1 більше не збігається із заголовком — видно одразу в редакторі,
   а не через тиждень на сайті. Жовтим, не червоним: сторінка від цього не
   ламається, просто акцент не намалюється. */
.acc-warn{margin-top:4px;font-size:12px;color:#d29922}
.field.acc-bad input{border-color:#d29922}

/* ── Статистика (розкладка як у Search Console, без його сайдбара) ──────────
   Картки-метрики працюють як вимикачі ліній: у GSC це головний жест, і люди
   вже вміють ним користуватись — не вигадуємо свій. */
.mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
@media(max-width:820px){.mcards{grid-template-columns:repeat(2,1fr)}}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;cursor:pointer;text-align:left;position:relative;overflow:hidden}
.mcard:hover{border-color:var(--line2)}
.mcard .lbl{color:var(--mut);font-size:12.5px;display:flex;align-items:center;gap:7px}
.mcard .dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.mcard .val{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:5px}
.mcard.on{background:var(--panel2)}
.mcard.on .val{color:var(--txt)}
.mcard:not(.on) .val{color:var(--dim)}
.mcard.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c)}
.mcard.on .dot{background:var(--c)}

.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.chartbox svg{display:block;width:100%;height:260px;overflow:visible}
.chartbox .gl{stroke:var(--line);stroke-width:1}
.chartbox .ax{fill:var(--dim);font-size:11px}
.chartbox .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chartbox .pt{r:3}
.chartbox .hit{fill:transparent;cursor:crosshair}
.chartbox .cur{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3}
.ctip{position:absolute;pointer-events:none;background:#0b0e12;border:1px solid var(--line2);
  border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:5}
.ctip b{display:block;margin-bottom:4px;color:var(--mut);font-weight:600}
.ctip i{font-style:normal;display:flex;gap:8px;justify-content:space-between}
.ctip i span:first-child{color:var(--mut)}

.dimtabs{display:flex;gap:4px;margin:16px 0 0;flex-wrap:wrap}
.dimtabs button{background:transparent;border-color:transparent;color:var(--mut);padding:7px 13px}
.dimtabs button.on{background:var(--panel2);border-color:var(--line);color:var(--txt)}
.statmeta{color:var(--dim);font-size:12px;margin-top:10px}
.statmeta b{color:var(--mut);font-weight:600}