/* Дорожная плита — тема «Каталог».
   Форум о сборных покрытиях: светлый серый бетон с зерном и порами, плиты-панели со скошенной кромкой,
   толщиной и монтажными петлями, белая и оранжевая дорожная разметка, маркировка по трафарету.
   Главная — каталог образцов плит и покрытий с фасетами слева (назначение, нагрузка, основание),
   «Разрез основания» с переключателем легковая / грузовик / техника, калькулятор раскладки плит со схемой,
   «После зимы» с мини-разрезами дефектов, журнал укладки строками. Тема — строки журнала: № и дата | кто | запись | метки.
   Навигация — нижний док из «плит» на всех ширинах, разделы, поиск и вход выезжают шторками.
   Шрифты: Sansation 700 (маркировка, заголовки), TikTok Sans (интерфейс и текст), Noto Sans Mono (даты, номера, цифры), все OFL. */

@font-face { font-family: "Sansation"; src: url("fonts/sansation-cyrillic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Sansation"; src: url("fonts/sansation-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; src: url("fonts/tiktok-sans-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TikTok Sans"; src: url("fonts/tiktok-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; src: url("fonts/tiktok-sans-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TikTok Sans"; src: url("fonts/tiktok-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "TikTok Sans"; src: url("fonts/tiktok-sans-cyrillic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TikTok Sans"; src: url("fonts/tiktok-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans Mono"; src: url("fonts/noto-sans-mono-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Sans Mono"; src: url("fonts/noto-sans-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans Mono"; src: url("fonts/noto-sans-mono-cyrillic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Sans Mono"; src: url("fonts/noto-sans-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+FEFF, U+FFFD; }

:root {
	--gb-bg: #dddbd5;
	--gb-bg2: #cfccc5;
	--gb-slab: #f3f2ee;
	--gb-slab2: #e9e7e1;
	--gb-edge: #b5b2aa;
	--gb-ink: #23251f;
	--gb-ink2: #42453f;
	--gb-mute: #62655f;
	--gb-dim: #85877f;
	--gb-line: rgba(35, 37, 31, .13);
	--gb-line2: rgba(35, 37, 31, .24);
	--gb-or: #f2621c;
	--gb-or-d: #b2460f;
	--gb-or-l: #fde2d2;
	--gb-yel: #f2c230;
	--gb-steel: #1f4e66;
	--gb-steel-l: #dde8ed;
	--gb-stone: #8f959a;
	--gb-sand: #dcc08a;
	--gb-soil: #7a5b40;
	--gb-grass: #6f8f3f;
	--gb-water: #6aa4c0;
	--gb-head: "Sansation", "Trebuchet MS", system-ui, sans-serif;
	--gb-text: "TikTok Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--gb-mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--gb-wrap: 1340px;
	--gb-slab-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 0 var(--gb-edge), 0 4px 0 rgba(35, 37, 31, .18), 0 18px 26px -20px rgba(35, 37, 31, .5);
	--gb-dock-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
body {
	margin: 0;
	font: 400 16.5px/1.6 var(--gb-text);
	color: var(--gb-ink);
	background-color: var(--gb-bg);
	/* бетон: зерно (шум) и редкие поры */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .14 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"),
		radial-gradient(circle at 20% 30%, rgba(60, 58, 52, .22) 0 1.2px, transparent 1.8px),
		radial-gradient(circle at 70% 80%, rgba(60, 58, 52, .16) 0 1px, transparent 1.6px),
		radial-gradient(circle at 45% 60%, rgba(255, 255, 255, .5) 0 1px, transparent 1.6px);
	background-size: 180px 180px, 57px 61px, 83px 71px, 41px 47px;
	padding-bottom: calc(var(--gb-dock-h) + 22px + env(safe-area-inset-bottom));
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--gb-steel); text-decoration: none; }
a:hover { color: var(--gb-or-d); }
:focus-visible { outline: 3px solid var(--gb-or); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 .8em; }
.gb-skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--gb-ink); color: #fff; padding: 8px 14px; border-radius: 3px; }
.gb-skip:focus { left: 12px; }
.gb-app > main, .gb-top__in, .gb-foot__in { max-width: var(--gb-wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.gb-main { display: block; min-width: 0; padding-top: 18px; }
.gb-main > * { margin-bottom: 26px; }

/* ------------------------------------------------------------------ типографика и общие детали */
.gb-h1 { font: 700 clamp(28px, 3.1vw, 42px)/1.12 var(--gb-head); margin: 0 0 .3em; color: var(--gb-ink); letter-spacing: -.005em; }
.gb-h2 { font: 700 clamp(23px, 2.1vw, 30px)/1.15 var(--gb-head); margin: 0; color: var(--gb-ink); }
.gb-h3 { font: 700 12px/1.3 var(--gb-text); text-transform: uppercase; letter-spacing: .14em; color: var(--gb-mute); margin: 0 0 12px; }
.gb-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 700 12px/1.3 var(--gb-text); text-transform: uppercase; letter-spacing: .13em; color: var(--gb-mute); margin: 0 0 10px; }
.gb-kicker a { color: var(--gb-steel); }
.gb-sec__head { margin: 0 0 16px; max-width: 860px; }
.gb-sec__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: none; }
.gb-sec__sub { margin: 6px 0 0; color: var(--gb-mute); font-size: 15px; }
.gb-link { font: 600 14px/1.3 var(--gb-text); color: var(--gb-steel); background: none; border: 0; padding: 0 0 1px; cursor: pointer; border-bottom: 1.5px solid rgba(31, 78, 102, .3); }
.gb-link:hover { color: var(--gb-or-d); border-color: currentColor; }
.gb-dim { color: var(--gb-dim); }
.gb-empty { color: var(--gb-mute); list-style: none; padding: 12px 0; }
.gb-ico { flex-shrink: 0; display: block; }

/* маркировка по трафарету: как краской на торце плиты */
.gb-mark { display: inline-flex; align-items: center; font: 700 13px/1 var(--gb-head); letter-spacing: .08em; text-transform: uppercase; color: var(--gb-ink); padding: 4px 7px 3px; border: 1.5px solid currentColor; border-radius: 2px; white-space: nowrap; background: rgba(255, 255, 255, .35); }
.gb-mark--or { background: var(--gb-or); border-color: var(--gb-or); color: var(--gb-ink); }
.gb-mark--s { font-size: 10.5px; padding: 3px 5px 2px; border-width: 1px; }

/* плита-панель: светлый бетон, кромка-толщина снизу, без больших скруглений */
.gb-panel { position: relative; background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 24px 26px; min-width: 0; }
.gb-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.gb-panel__foot { margin: 16px 0 0; font-size: 14px; color: var(--gb-mute); }

/* лица */
.gb-face { display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 3px; font: 700 15px/1 var(--gb-head); color: var(--gb-ink); clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
.gb-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-face--xs { width: 24px; height: 24px; font-size: 10px; }
.gb-face--s { width: 34px; height: 34px; font-size: 13px; }
.gb-face--m { width: 44px; height: 44px; }
.gb-face--l { width: 64px; height: 64px; font-size: 22px; }
.gb-face--xl { width: 150px; height: 150px; font-size: 52px; }
.gb-face--mono { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gb-tone-0 { background: #c9c6be; }
.gb-tone-1 { background: #e3c48a; }
.gb-tone-2 { background: #b8c4c9; }
.gb-tone-3 { background: #f5b48f; }
.gb-tone-4 { background: #cdd3b4; }

/* звание: стопка плит */
.gb-rank { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--gb-text); color: var(--gb-ink2); }
.gb-badge { flex-shrink: 0; }
.gb-badge .pl { stroke: #5f6159; stroke-width: 1.6; stroke-linecap: round; }
.gb-badge .sb { fill: #e7e4dc; stroke: #55574f; stroke-width: 1; }
.gb-badge .sb.top { fill: var(--gb-or); stroke: var(--gb-or-d); }
.gb-badge .lp { fill: none; stroke: #2c2e2a; stroke-width: 1.4; stroke-linecap: round; }
/* репутация: крюк */
.gb-rep { display: inline-flex; align-items: center; gap: 3px; font: 700 13px/1 var(--gb-mono); color: var(--gb-ink2); padding: 3px 6px 3px 4px; border-radius: 2px; background: rgba(35, 37, 31, .06); }
.gb-rep--up b { color: var(--gb-or-d); }
.gb-hook .r { fill: #55574f; }
.gb-hook .h { fill: none; stroke: var(--gb-or); stroke-width: 2.2; stroke-linecap: round; }
/* дата журнала */
.gb-stamp { display: inline-flex; flex-direction: column; font: 700 13.5px/1.15 var(--gb-mono); color: var(--gb-ink); letter-spacing: -.01em; }
.gb-stamp i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--gb-mute); }

/* кнопки-сегменты */
.gb-seg { position: relative; display: inline-flex; background: var(--gb-bg2); border-radius: 3px; padding: 3px; gap: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.gb-seg__b { border: 0; background: transparent; font: 700 13.5px/1 var(--gb-text); padding: 10px 13px; border-radius: 2px; cursor: pointer; color: var(--gb-ink2); transition: background .2s, color .2s, box-shadow .2s; }
.gb-seg__b:hover { color: var(--gb-ink); }
.gb-seg__b.is-on { background: var(--gb-slab); color: var(--gb-ink); box-shadow: 0 2px 0 var(--gb-or), 0 1px 3px rgba(0, 0, 0, .15); }

/* ------------------------------------------------------------------ верхняя полоса: логотип и путь */
.gb-top { background: var(--gb-slab); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; position: relative; }
.gb-top__in { display: flex; align-items: center; gap: 22px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
.gb-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--gb-ink); flex-shrink: 0; }
.gb-logo:hover { color: var(--gb-ink); }
.gb-logo__mark { flex-shrink: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.gb-logo:hover .gb-logo__mark { transform: translateY(-3px); }
.gb-logo__txt { display: grid; line-height: 1.1; }
.gb-logo__name { font: 700 23px/1.05 var(--gb-head); letter-spacing: .01em; }
.gb-logo__sub { font: 500 12.5px/1.3 var(--gb-text); color: var(--gb-mute); }
.gb-crumbs-row { min-width: 0; flex: 1; display: flex; justify-content: flex-end; }
.gb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 500 13.5px/1.35 var(--gb-text); color: var(--gb-mute); justify-content: flex-end; text-align: right; }
.gb-crumbs a { color: var(--gb-ink2); }
.gb-crumbs a:hover { color: var(--gb-or-d); }
.gb-crumbs .active { display: inline-block; vertical-align: bottom; color: var(--gb-ink); font-weight: 600; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-crumbs__sep { color: var(--gb-dim); }
body[data-page="home"] .gb-crumbs-row { display: none; }
/* бордюр с разметкой: серый камень, белая краевая и оранжевая прерывистая */
.gb-top__curb { height: 12px; background:
	linear-gradient(180deg, transparent 0 4px, rgba(255, 255, 255, .95) 4px 6px, transparent 6px),
	repeating-linear-gradient(90deg, var(--gb-or) 0 34px, transparent 34px 52px) 0 9px / 100% 3px no-repeat,
	linear-gradient(180deg, #b9b6ae, #a7a49c); box-shadow: 0 2px 0 rgba(35, 37, 31, .12); }

/* ------------------------------------------------------------------ главная: шапка-интро */
.gb-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 18px 34px; align-items: center; padding: 8px 0 4px; }
.gb-hero__h { font: 700 clamp(40px, 5.4vw, 74px)/.98 var(--gb-head); margin: 0 0 14px; letter-spacing: -.01em; }
.gb-hero__lead { font-size: 18px; line-height: 1.55; color: var(--gb-ink2); max-width: 600px; margin: 0 0 18px; }
.gb-hero__go { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.gb-hero__go a { display: grid; gap: 3px; padding: 10px 12px 11px; background: var(--gb-slab); border-radius: 3px; box-shadow: var(--gb-slab-shadow); color: var(--gb-ink); font: 600 14px/1.25 var(--gb-text); transition: transform .2s, box-shadow .2s; }
.gb-hero__go a b { font: 700 12px/1 var(--gb-mono); color: var(--gb-or-d); }
.gb-hero__go a:hover { transform: translateY(-2px); color: var(--gb-ink); }
.gb-hero__art { min-width: 0; }
.gb-hero__svg { display: block; width: 100%; height: auto; overflow: visible; }
.gb-hero__svg .h-gnd { fill: #cfcbc2; }
.gb-hero__svg .h-soil { fill: var(--gb-soil); }
.gb-hero__svg .h-geo { fill: #fbfaf6; }
.gb-hero__svg .h-sand { fill: var(--gb-sand); }
.gb-hero__svg .h-stone { fill: #9aa0a4; }
.gb-hero__svg .h-top { fill: #a9aeb1; }
.gb-hero__svg .h-f2 { filter: brightness(.84); }
.gb-hero__svg .h-sl { fill: #f1efe9; stroke: #6f716a; stroke-width: .8; }
.gb-hero__svg .h-se1 { fill: #bbb8b0; }
.gb-hero__svg .h-se2 { fill: #a29f97; }
.gb-hero__svg .h-lp { fill: none; stroke: #3b3d37; stroke-width: 1.6; stroke-linecap: round; }
.gb-hero__svg .h-mk { stroke: var(--gb-or); stroke-width: 2.6; stroke-dasharray: 9 6; fill: none; }
.gb-hero__svg .h-shadow { fill: rgba(35, 37, 31, .2); animation: gb-shadow 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.gb-hero__svg .h-sling { stroke: #3a3c36; stroke-width: 1; }
.gb-hero__svg .h-cable { stroke: #2c2e2a; stroke-width: 1.4; }
.gb-hero__svg .h-hook { fill: none; stroke: var(--gb-or); stroke-width: 2.6; stroke-linecap: round; }
.gb-hero__svg .h-lift, .gb-hero__svg .h-hook, .gb-hero__svg .h-cable, .gb-hero__svg .h-sling { animation: gb-lift 4.5s ease-in-out infinite; }
.gb-hero__svg .h-cone { fill: var(--gb-or); }
.gb-hero__svg .h-cone2 { fill: #fff; }
.gb-hero__svg .h-coneb { fill: #2c2e2a; }
.gb-hero__svg .h-lead { stroke: #55574f; stroke-width: 1; fill: none; }
.gb-hero__svg .h-dot { fill: #2c2e2a; }
.gb-hero__svg .h-lbl { font: 600 11.5px var(--gb-text); fill: var(--gb-ink2); }
@keyframes gb-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gb-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .75; } }

/* ------------------------------------------------------------------ каталог с фасетами */
.gb-cat { padding-top: 6px; }
.gb-cat__body { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; }
.gb-facets { position: sticky; top: 14px; }
.gb-facets__form { background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 16px 16px 14px; }
.gb-facets__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; font: 700 20px/1.1 var(--gb-head); }
.gb-facets__h output { font: 700 12.5px/1.2 var(--gb-mono); color: var(--gb-or-d); text-align: right; }
.gb-facet { border: 0; padding: 10px 0 8px; margin: 0; border-top: 1px dashed var(--gb-line2); }
.gb-facet legend { font: 700 11.5px/1 var(--gb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-mute); padding: 10px 0 8px; }
.gb-facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gb-fc { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 2px; cursor: pointer; font: 500 14.5px/1.3 var(--gb-text); color: var(--gb-ink2); transition: background .15s; }
.gb-fc:hover { background: rgba(35, 37, 31, .05); }
.gb-fc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gb-fc__box { width: 20px; height: 20px; border: 1.8px solid #6f716a; border-radius: 2px; background: #fff; position: relative; transition: background .15s, border-color .15s; }
.gb-fc__box::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 3px; background: var(--gb-ink); transform: scaleX(0); transition: transform .18s; }
.gb-fc input:checked + .gb-fc__box { background: var(--gb-or); border-color: var(--gb-or-d); }
.gb-fc input:checked + .gb-fc__box::after { transform: scaleX(1); }
.gb-fc input:focus-visible + .gb-fc__box { outline: 3px solid var(--gb-or); outline-offset: 2px; }
.gb-fc input:checked ~ .gb-fc__t { color: var(--gb-ink); font-weight: 700; }
.gb-fc__n { font: 500 11.5px/1 var(--gb-mono); color: var(--gb-dim); }
.gb-facets__reset { margin-top: 10px; }

.gb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.gb-card { position: relative; display: flex; flex-direction: column; background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 12px 14px 14px; min-width: 0; transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s, opacity .25s; animation: gb-in .5s both; animation-delay: calc(var(--i, 0) * 35ms); }
.gb-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 0 var(--gb-edge), 0 4px 0 rgba(35, 37, 31, .18), 0 26px 30px -20px rgba(35, 37, 31, .55); }
.gb-card.is-off { display: none; }
.gb-card__img { display: block; margin: 0 -4px 6px; background: linear-gradient(180deg, #e3e1db, #d9d6cf); border-radius: 2px; padding: 4px 6px 0; }
.gb-card__k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 11.5px/1.2 var(--gb-text); color: var(--gb-mute); letter-spacing: .04em; }
.gb-card__t { font: 700 20px/1.15 var(--gb-head); margin: 0 0 6px; }
.gb-card__t a { color: var(--gb-ink); }
.gb-card__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gb-card:hover .gb-card__t a { color: var(--gb-or-d); }
.gb-card__d { font-size: 14px; line-height: 1.45; color: var(--gb-mute); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gb-card__chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gb-card__chips li { font: 600 11.5px/1 var(--gb-text); padding: 5px 7px; border-radius: 2px; background: var(--gb-slab2); color: var(--gb-ink2); }
.gb-card__f { margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--gb-line2); display: grid; gap: 4px; }
.gb-card__n { font: 700 12px/1 var(--gb-mono); color: var(--gb-ink2); }
.gb-card__last { position: relative; z-index: 2; display: grid; font: 500 13.5px/1.35 var(--gb-text); color: var(--gb-steel); overflow: hidden; }
.gb-card__last span { font: 600 10.5px/1.3 var(--gb-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-dim); }
.gb-card__last:not(.gb-card__last--none) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gb-card__last:not(.gb-card__last--none) span { display: block; }
.gb-card__last--none { color: var(--gb-dim); }
.gb-cards__none { padding: 20px; background: var(--gb-slab); border-radius: 4px; color: var(--gb-mute); }
@keyframes gb-in { from { transform: translateY(10px); } to { transform: none; } }

/* рисунки образцов */
.gb-sm { display: block; width: 100%; height: auto; }
.gb-sm .sl { fill: var(--gb-slab); stroke: #6f716a; stroke-width: 1.2; }
.gb-sm .se { fill: #a9a69e; }
.gb-sm .lp { fill: none; stroke: #3b3d37; stroke-width: 2.2; stroke-linecap: round; }
.gb-sm .lpb { stroke: #9d9a92; stroke-width: 1.2; stroke-linecap: round; }
.gb-sm .sh { stroke: #fff; stroke-width: 1.5; opacity: .9; }
.gb-sm .mk { stroke: var(--gb-or); stroke-width: 3.4; stroke-dasharray: 11 7; fill: none; }
.gb-sm .pr { stroke: #a7a49c; stroke-width: 1.5; stroke-linecap: round; }
.gb-sm .rf { fill: #d2cfc7; stroke: #a9a69e; stroke-width: .6; }
.gb-sm .pit { fill: #c4c1b9; }
.gb-sm .hl { fill: var(--gb-soil); }
.gb-sm .gr { fill: none; stroke: #8fb34e; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gb-sm .ch { fill: #cdc9c0; }
.gb-sm .rb { stroke: #a35b2e; stroke-width: 1.8; stroke-linecap: round; }
.gb-sm .cr { fill: none; stroke: #55574f; stroke-width: 1.1; stroke-linecap: round; }
.gb-sm .ru { fill: #b0683a; opacity: .65; }
.gb-sm .m1 { fill: #6f767a; stroke: #4a4f52; stroke-width: 1.2; }
.gb-sm .m2 { fill: #d8d5cd; stroke: #8a877f; stroke-width: 1.2; }
.gb-sm .mg { stroke: rgba(0, 0, 0, .2); stroke-width: 1.6; }
.gb-sm .soil, .gb-df .soil { fill: #8c6a4c; }
.gb-sm .cell { fill: #86a44f; stroke: #dcdad3; stroke-width: 2.6; }
.gb-sm .cellg { fill: #b9b5ac; stroke: #dcdad3; stroke-width: 2.6; }
.gb-sm .geo, .gb-df .geo { stroke: #fff; stroke-width: 3; stroke-dasharray: 3 2; }
.gb-sm .sand, .gb-df .sand { fill: var(--gb-sand); }
.gb-sm .stone { fill: #9aa0a3; }
.gb-sm .rb2 { stroke: #8a8780; stroke-width: 1.4; stroke-dasharray: 2 5; }
.gb-sm .tick { stroke: #55574f; stroke-width: 1.4; fill: none; }
.gb-sm .press { fill: rgba(242, 98, 28, .2); }
.gb-sm .wh { fill: #2c2e2a; }
.gb-sm .whc { fill: #bdbab2; }
.gb-sm .ax { stroke: #2c2e2a; stroke-width: 4; }
.gb-sm .ar { stroke: var(--gb-or); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gb-sm .cb { stroke: #2c2e2a; stroke-width: 1.6; }
.gb-sm .hk { fill: none; stroke: var(--gb-or); stroke-width: 3; stroke-linecap: round; }
.gb-sm .sling { stroke: #55574f; stroke-width: 1.2; }
.gb-sm .seam { stroke: #8a877f; stroke-width: 2; }
.gb-sm .ch2 { fill: #8a8780; }
.gb-sm .wt, .gb-df .wt { fill: var(--gb-water); opacity: .85; }
.gb-sm .lbl { font: 700 12px var(--gb-text); fill: var(--gb-ink2); }
.gb-sm .dr { fill: var(--gb-water); }
.gb-sm .hs { fill: #e9e5da; stroke: #55574f; stroke-width: 1.4; }
.gb-sm .rf2 { fill: none; stroke: var(--gb-or-d); stroke-width: 3.2; stroke-linejoin: round; }
.gb-sm .dw { fill: #8a8780; }
.gb-sm .fence { stroke: #8a8780; stroke-width: 2; }
.gb-sm .gate { fill: none; stroke: #55574f; stroke-width: 1.5; }
.gb-sm .pm { stroke: #fff; stroke-width: 2.6; }
.gb-sm .tr { fill: var(--gb-steel); }
.gb-sm .trc { fill: #2c2e2a; }
.gb-sm .car { fill: var(--gb-or); }
.gb-sm .mud { fill: #8c6a4c; }
.gb-sm .pud { fill: var(--gb-water); opacity: .55; }
.gb-sm .trk { stroke: rgba(0, 0, 0, .18); stroke-width: 3; stroke-dasharray: 3 4; }
.gb-sm .fr { stroke: var(--gb-water); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.gb-sm .cab { fill: var(--gb-steel); }
.gb-sm .win { fill: var(--gb-steel-l); }
.gb-sm .bed { fill: #3a3c36; }
.gb-sm .strap { stroke: var(--gb-or); stroke-width: 2.6; }
.gb-sm .cabn { fill: #e2ddcf; stroke: #6f716a; stroke-width: 1.4; }
.gb-sm .rib { stroke: rgba(0, 0, 0, .12); stroke-width: 2; }
.gb-sm .winx { stroke: #6f716a; stroke-width: 1.4; }
.gb-sm .stm { stroke: #9a978f; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.gb-sm .mug { fill: var(--gb-or); }
.gb-sm .post { stroke: #55574f; stroke-width: 4; }
.gb-sm .sgn { fill: var(--gb-yel); stroke: #3a3c36; stroke-width: 1.4; }
.gb-sm .sgl { stroke: #3a3c36; stroke-width: 3; stroke-linecap: round; }
.gb-card:hover .gb-sm .lp, .gb-card:hover .gb-sm .hk { stroke: var(--gb-or-d); }
.gb-card .gb-sm .mk { transition: stroke-dashoffset .6s; }
.gb-card:hover .gb-sm .mk { stroke-dashoffset: -36; }

/* служебные разделы: узкая полоса */
.gb-svcs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gb-svc a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; background: rgba(243, 242, 238, .6); border: 1.5px dashed var(--gb-line2); border-radius: 4px; padding: 10px 14px; color: var(--gb-ink); }
.gb-svc a:hover { background: var(--gb-slab); }
.gb-svc b { display: block; font: 700 19px/1.2 var(--gb-head); }
.gb-svc i { font-style: normal; font-size: 13.5px; color: var(--gb-mute); line-height: 1.4; }

/* ------------------------------------------------------------------ разрез основания и калькулятор */
.gb-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.gb-cut { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 18px; --k: 4px; }
.gb-cut__col { position: relative; padding-left: 30px; }
/* линейка: деление каждые 10 см */
.gb-cut__col::before { content: ""; position: absolute; left: 6px; top: 52px; bottom: 34px; width: 14px; background: repeating-linear-gradient(180deg, #55574f 0 1px, transparent 1px calc(var(--k) * 10)) right top / 8px 100% no-repeat, repeating-linear-gradient(180deg, #55574f 0 1px, transparent 1px calc(var(--k) * 5)) right top / 4px 100% no-repeat; border-right: 1px solid #55574f; }
.gb-cut__veh { height: 52px; position: relative; }
.gb-veh { position: absolute; left: 50%; bottom: -2px; width: 150px; height: auto; transform: translate(-50%, 8px); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .3, 1.2); }
.gb-veh path, .gb-veh rect { fill: var(--gb-steel); }
.gb-veh--tech path, .gb-veh--tech rect { fill: #e0a21f; }
.gb-veh--tech rect { fill: #3a3c36; }
.gb-veh .w { fill: var(--gb-steel-l); }
.gb-veh circle { fill: #2c2e2a; }
.gb-veh .c { fill: #bdbab2; }
.gb-razrez[data-mode="car"] .gb-veh--car, .gb-razrez[data-mode="truck"] .gb-veh--truck, .gb-razrez[data-mode="tech"] .gb-veh--tech { opacity: 1; transform: translate(-50%, 0); }
.gb-cut__stack { list-style: none; margin: 0; padding: 0; border-radius: 2px; overflow: visible; }
.gb-lyr { position: relative; height: calc(var(--h, 10) * var(--k)); }
.gb-razrez.is-ready .gb-lyr { transition: height .55s cubic-bezier(.3, .8, .25, 1); }
.gb-lyr::after { content: ""; position: absolute; right: -18px; top: 50%; width: 18px; border-top: 1px solid #55574f; }
.gb-lyr--plate { background:
	radial-gradient(circle, #8a8780 0 1.6px, transparent 2px) 0 50% / 16px 8px repeat-x,
	linear-gradient(180deg, #fbfaf7, var(--gb-slab) 30%, #dedbd4); border: 1.2px solid #6f716a; border-radius: 2px 2px 0 0; box-shadow: inset 0 1px 0 #fff; }
.gb-lyr__loop { position: absolute; top: -9px; width: 14px; height: 10px; border: 2.2px solid #3b3d37; border-bottom: 0; border-radius: 8px 8px 0 0; left: 16%; }
.gb-lyr--plate::before { content: ""; position: absolute; top: -9px; right: 16%; width: 14px; height: 10px; border: 2.2px solid #3b3d37; border-bottom: 0; border-radius: 8px 8px 0 0; }
.gb-lyr--stone { background:
	radial-gradient(ellipse 5px 4px at 30% 35%, #c2c7c9 60%, transparent 66%) 0 0 / 19px 15px,
	radial-gradient(ellipse 4px 3px at 70% 70%, #6f767a 60%, transparent 66%) 0 0 / 23px 17px,
	radial-gradient(ellipse 3px 3px at 50% 50%, #b0b5b8 60%, transparent 66%) 6px 4px / 13px 11px,
	#8f959a; }
.gb-lyr--sand { background: radial-gradient(circle, rgba(120, 90, 40, .45) 0 .8px, transparent 1.2px) 0 0 / 6px 5px, radial-gradient(circle, rgba(255, 255, 255, .5) 0 .7px, transparent 1.1px) 3px 2px / 7px 6px, var(--gb-sand); }
.gb-lyr--geo { background: repeating-linear-gradient(90deg, #fff 0 6px, #e6e4dd 6px 8px); min-height: 5px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
.gb-lyr--soil { background:
	radial-gradient(ellipse 6px 3px at 40% 40%, rgba(40, 25, 12, .35) 60%, transparent 66%) 0 0 / 27px 18px,
	radial-gradient(circle, rgba(255, 230, 200, .18) 0 1px, transparent 1.5px) 0 0 / 9px 8px,
	linear-gradient(180deg, var(--gb-soil), #5d4430); border-radius: 0 0 2px 2px; mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); }
.gb-lyr--soil::after { display: none; }
.gb-cut__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 0; font: 600 13px/1.2 var(--gb-text); color: var(--gb-mute); }
.gb-cut__total b { font: 700 18px/1 var(--gb-mono); color: var(--gb-ink); }
.gb-cut__legend { list-style: none; margin: 0; padding: 0; position: relative; }
.gb-razrez.is-ready .gb-cut__legend li { transition: top .55s cubic-bezier(.3, .8, .25, 1); }
.gb-cut__legend li { position: absolute; left: 0; right: 0; transform: translateY(-50%); padding-left: 12px; border-left: 3px solid var(--sw, #999); }
.gb-cut__legend b { display: block; font: 700 15px/1.2 var(--gb-text); color: var(--gb-ink); }
.gb-cut__legend span { display: block; font-size: 13px; line-height: 1.35; color: var(--gb-mute); }
.gb-cut__legend [data-k="plate"] { --sw: #9d9a92; }
.gb-cut__legend [data-k="stone"] { --sw: #6f767a; }
.gb-cut__legend [data-k="sand"] { --sw: #c9a65f; }
.gb-cut__legend [data-k="geo"] { --sw: #d7d5ce; }
.gb-cut__legend [data-k="soil"] { --sw: var(--gb-soil); }
.gb-cut__legend b.is-ch { animation: gb-flash .7s; }
@keyframes gb-flash { 0% { color: var(--gb-or-d); } 100% { color: var(--gb-ink); } }

.gb-calc__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.gb-num { margin: 0 0 12px; display: grid; gap: 5px; }
.gb-num label { font: 700 11.5px/1 var(--gb-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-mute); }
.gb-num__f { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; border: 1.5px solid var(--gb-line2); border-radius: 3px; background: #fff; overflow: hidden; }
.gb-num__f button { border: 0; background: var(--gb-slab2); font: 700 20px/1 var(--gb-mono); cursor: pointer; color: var(--gb-ink); }
.gb-num__f button:hover { background: var(--gb-or-l); }
.gb-num__f input { border: 0 !important; border-radius: 0 !important; text-align: center; font: 700 20px/1.2 var(--gb-mono) !important; padding: 8px 4px !important; width: 100%; -moz-appearance: textfield; box-shadow: none !important; }
.gb-num__f input::-webkit-outer-spin-button, .gb-num__f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gb-plates { border: 0; padding: 0; margin: 0; }
.gb-plates legend { font: 700 11.5px/1 var(--gb-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-mute); padding: 0 0 7px; }
#gb-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gb-pl { position: relative; display: grid; gap: 1px; padding: 8px 10px; border: 1.5px solid var(--gb-line2); border-radius: 3px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.gb-pl input { position: absolute; opacity: 0; }
.gb-pl b { font: 700 16px/1.1 var(--gb-head); }
.gb-pl span { font-size: 11.5px; line-height: 1.3; color: var(--gb-mute); }
.gb-pl:has(input:checked) { border-color: var(--gb-or); background: var(--gb-or-l); box-shadow: inset 0 -3px 0 var(--gb-or); }
.gb-pl:has(input:focus-visible) { outline: 3px solid var(--gb-or); outline-offset: 2px; }
.gb-calc__out { background: #fff; border-radius: 3px; border: 1px solid var(--gb-line); padding: 14px 16px; }
.gb-calc__big { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.gb-calc__big b { font: 700 54px/1 var(--gb-mono); color: var(--gb-ink); letter-spacing: -.03em; }
.gb-calc__big span { font: 700 20px/1 var(--gb-head); color: var(--gb-ink2); }
.gb-calc__how { font-size: 13.5px; color: var(--gb-mute); margin: 6px 0 10px; min-height: 2.6em; }
.gb-calc__dl { margin: 0; display: grid; gap: 0; }
.gb-calc__dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--gb-line2); }
.gb-calc__dl dt { font-size: 13.5px; color: var(--gb-mute); }
.gb-calc__dl dd { margin: 0; font: 700 13.5px/1.3 var(--gb-mono); text-align: right; }
.gb-scheme { margin: 16px 0 0; background:
	linear-gradient(rgba(35, 37, 31, .06) 1px, transparent 1px) 0 0 / 16px 16px,
	linear-gradient(90deg, rgba(35, 37, 31, .06) 1px, transparent 1px) 0 0 / 16px 16px, #ebe9e2; border-radius: 3px; padding: 12px; }
.gb-scheme svg { display: block; width: 100%; height: auto; max-height: 300px; }
.gb-scheme figcaption { font-size: 13px; color: var(--gb-mute); margin-top: 6px; }
.gb-scheme .pl { fill: var(--gb-slab); stroke: #6f716a; stroke-width: 1; }
.gb-scheme .pl--out { fill: #f7d9c7; }
.gb-scheme .lp { fill: none; stroke: #3b3d37; stroke-width: 1.2; }
.gb-scheme .area { fill: none; stroke: var(--gb-or); stroke-width: 2; stroke-dasharray: 6 4; }
.gb-scheme .dim { font: 700 11px var(--gb-mono); fill: var(--gb-ink2); }
.gb-scheme .pl { animation: gb-drop .35s both; animation-delay: calc(var(--d, 0) * 18ms); }
@keyframes gb-drop { from { transform: translateY(-6px); } to { transform: none; } }

/* памятка под разрезом */
.gb-before { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--gb-line2); }
.gb-before__list { list-style: none; margin: 0; padding: 0; counter-reset: b; display: grid; gap: 8px; }
.gb-before__list li { counter-increment: b; position: relative; padding-left: 40px; font-size: 14.5px; line-height: 1.45; color: var(--gb-ink2); min-height: 22px; }
.gb-before__list li::before { content: counter(b, decimal-leading-zero); font: 700 12px/22px var(--gb-mono); text-align: center; background: var(--gb-ink); color: #fff; border-radius: 2px; height: 22px; width: 30px; position: absolute; left: 0; top: 0; box-shadow: inset 0 -2px 0 var(--gb-or); }
.gb-before__list b { color: var(--gb-ink); }

/* ------------------------------------------------------------------ «После зимы» */
.gb-wds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gb-wd { background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 14px 16px 16px; display: flex; flex-direction: column; min-width: 0; }
.gb-wd__art { background: linear-gradient(180deg, #dfe8ec, #eef1f1 60%); border-radius: 2px; margin: -2px -4px 10px; padding: 8px 10px 0; overflow: hidden; }
.gb-wd__t { font: 700 21px/1.15 var(--gb-head); margin: 0 0 6px; }
.gb-wd__why { font-size: 14.5px; line-height: 1.5; color: var(--gb-ink2); margin: 0 0 6px; }
.gb-wd__fix { font-size: 13.5px; line-height: 1.45; color: var(--gb-mute); margin: 0 0 10px; }
.gb-wd__fix b { color: var(--gb-ink2); }
.gb-wd__links { list-style: none; margin: auto 0 0; padding: 10px 0 0; border-top: 1px dashed var(--gb-line2); display: grid; gap: 6px; }
.gb-wd__links a { font: 500 14px/1.35 var(--gb-text); color: var(--gb-steel); display: block; }
.gb-wd__links a:hover { color: var(--gb-or-d); }
.gb-wd__none a { color: var(--gb-mute); font-style: italic; }
.gb-df { display: block; width: 100%; height: auto; overflow: visible; }
.gb-df .sl { fill: var(--gb-slab); stroke: #6f716a; stroke-width: 1.2; }
.gb-df .gap { fill: #a39c8c; }
.gb-df .wh2 { fill: #2c2e2a; }
.gb-df .ch { fill: none; stroke: #6f716a; stroke-width: 1; }
.gb-df .frag { fill: #d7d4cc; stroke: #6f716a; stroke-width: 1; }
.gb-df .ice { fill: #cfe6f0; stroke: #9cc6d8; }
.gb-df .rb { stroke: #55574f; stroke-width: 1.4; stroke-dasharray: 3 3; }
.gb-df .hole { fill: #c9c5bc; }
.gb-df .ru { stroke: #b0683a; stroke-width: 2.8; stroke-linecap: round; }
.gb-df .gr { fill: none; stroke: var(--gb-grass); stroke-width: 1.6; stroke-linecap: round; }
.gb-df .drop { stroke: var(--gb-water); stroke-width: 2; stroke-dasharray: 2 3; }
.gb-df .cone { fill: var(--gb-or); }
.gb-df .coneb { fill: #2c2e2a; }
.gb-df .mv { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; }
.gb-df .mv--sag { transform-origin: 0 100%; }
.gb-wd:hover .mv--sag, .gb-wd:focus-within .mv--sag { transform: rotate(5deg) translateY(3px); }
.gb-df .mv--l { transform-origin: 100% 100%; }
.gb-df .mv--r { transform-origin: 0 100%; }
.gb-wd:hover .mv--l, .gb-wd:focus-within .mv--l { animation: gb-keyl 1.2s ease-in-out infinite; }
.gb-wd:hover .mv--r, .gb-wd:focus-within .mv--r { animation: gb-keyr 1.2s ease-in-out infinite; }
@keyframes gb-keyl { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes gb-keyr { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(0); } }
.gb-wd:hover .mv--chip, .gb-wd:focus-within .mv--chip { transform: translate(8px, 26px) rotate(40deg); }
.gb-df .mv--heave { transform-origin: 0 100%; }
.gb-wd:hover .mv--heave, .gb-wd:focus-within .mv--heave { transform: translateY(-7px) rotate(-3deg); }
.gb-wd--rebar .ru { transition: stroke-width .4s; }
.gb-wd--rebar:hover .ru { stroke-width: 4.5; }
.gb-wd--seam .drop { animation: gb-drip 1.6s linear infinite; animation-play-state: paused; }
.gb-wd--seam:hover .drop { animation-play-state: running; }
@keyframes gb-drip { to { stroke-dashoffset: -10; } }

/* ------------------------------------------------------------------ журнал укладки (главная, профиль) */
.gb-log-sec { background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 22px 24px 12px; }
.gb-log__cols, .gb-lg { display: grid; grid-template-columns: 88px 170px minmax(0, 1fr) 230px 92px; gap: 14px; align-items: center; }
.gb-log__cols { font: 700 11px/1 var(--gb-text); letter-spacing: .13em; text-transform: uppercase; color: var(--gb-dim); padding: 0 0 8px; border-bottom: 2px solid var(--gb-ink); }
.gb-log { list-style: none; margin: 0; padding: 0; }
.gb-lg { padding: 11px 0; border-bottom: 1px solid var(--gb-line); position: relative; }
.gb-lg:last-child { border-bottom: 0; }
.gb-lg::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 4px; background: var(--gb-or); transform: scaleY(0); transition: transform .2s; }
.gb-lg:hover::before { transform: scaleY(1); }
.gb-lg__who { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.2 var(--gb-text); color: var(--gb-ink2); }
.gb-lg__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-lg__t { font: 600 15.5px/1.35 var(--gb-text); color: var(--gb-ink); }
.gb-lg__t:hover { color: var(--gb-or-d); }
.gb-lg__f { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--gb-mute); }
.gb-lg__f > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-lg__n { font: 600 12.5px/1.2 var(--gb-mono); color: var(--gb-mute); text-align: right; }
.gb-log--short .gb-lg { grid-template-columns: 82px minmax(0, 1fr) 92px; }
.gb-log--short .gb-lg__f { grid-column: 2; grid-row: 2; }
.gb-log--short .gb-lg__n { grid-row: 1 / span 2; grid-column: 3; }
.gb-log--short .gb-lg::before { left: -26px; }

/* ------------------------------------------------------------------ раздел */
.gb-fhead { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 18px 24px; }
.gb-fhead__art { background: linear-gradient(180deg, #e3e1db, #d6d3cc); border-radius: 2px; padding: 4px 8px 0; }
.gb-fhead__d { color: var(--gb-ink2); margin: 0 0 10px; max-width: 760px; }
.gb-fhead__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gb-fhead__chips li { font: 600 12.5px/1 var(--gb-text); padding: 6px 8px; border-radius: 2px; background: var(--gb-slab2); color: var(--gb-ink); }
.gb-fhead__chips li { line-height: 1.35; }
.gb-fhead__chips i { font-style: normal; color: var(--gb-dim); margin-right: 5px; font-weight: 500; }
.gb-fhead__chips i::after { content: ":"; }
.gb-fhead__act { display: grid; gap: 10px; justify-items: end; text-align: right; }
.gb-fhead__n { margin: 0; font: 600 13px/1.3 var(--gb-mono); color: var(--gb-mute); max-width: 180px; }
.gb-tlist { background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 20px 24px 10px; }
.gb-tlist__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gb-sort { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 13.5px/1.3 var(--gb-text); margin: 0; }
.gb-sort span { color: var(--gb-dim); }
.gb-tlist__cols, .gb-trow { display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px 190px; gap: 16px; align-items: center; }
.gb-tlist__cols { font: 700 11px/1 var(--gb-text); letter-spacing: .13em; text-transform: uppercase; color: var(--gb-dim); padding-bottom: 8px; border-bottom: 2px solid var(--gb-ink); }
.gb-tlist__list { list-style: none; margin: 0; padding: 0; }
.gb-trow { padding: 13px 0; border-bottom: 1px solid var(--gb-line); position: relative; }
.gb-trow:hover { background: linear-gradient(90deg, rgba(242, 98, 28, .06), transparent 60%); }
.gb-trow__h { font: 600 16.5px/1.35 var(--gb-text); margin: 0 0 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gb-trow__t { color: var(--gb-ink); }
.gb-trow__t:hover { color: var(--gb-or-d); }
.gb-trow__by { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--gb-mute); }
.gb-trow__by a { color: var(--gb-ink2); font-weight: 600; }
.gb-trow__by .gb-face--s { width: 26px; height: 26px; font-size: 11px; }
.gb-trow__n { display: grid; justify-items: start; color: var(--gb-ink); }
.gb-trow__n b { font: 700 20px/1 var(--gb-mono); }
.gb-trow__n span { font-size: 12px; color: var(--gb-mute); }
.gb-trow__last { display: grid; gap: 2px; font-size: 13px; color: var(--gb-ink2); min-width: 0; }
.gb-trow__last > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gb-trow__last .gb-stamp { flex-direction: row; gap: 6px; font-size: 12.5px; color: var(--gb-mute); }
.gb-trow__mod { position: absolute; right: 0; top: 10px; }
.gb-pages { font: 500 12.5px/1 var(--gb-mono); color: var(--gb-mute); }
.gb-pages a { padding: 0 3px; }
.gb-sep { list-style: none; font: 700 11px/1 var(--gb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-or-d); padding: 14px 0 6px; border-bottom: 1px dashed var(--gb-line2); }
.gb-empty--list { padding: 22px 0; }
.gb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gb-bar__r { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gb-subs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gb-sub { background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 14px 16px; }
.gb-sub__t { font: 700 19px/1.2 var(--gb-head); margin: 0 0 4px; }
.gb-sub__t a { color: var(--gb-ink); }
.gb-sub__d { font-size: 14px; color: var(--gb-mute); margin: 0 0 6px; }
.gb-sub__lp { font-size: 13px; margin: 0; }
.gb-sub__lt span { color: var(--gb-dim); }
.gb-grp__t { font: 700 24px/1.2 var(--gb-head); margin: 0 0 12px; }

/* ------------------------------------------------------------------ тема: журнал укладки строками */
.gb-journal { background: var(--gb-slab); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 0 0 12px; overflow: hidden; }
.gb-jhead { display: grid; grid-template-columns: 150px minmax(0, 1fr) 280px; gap: 22px; align-items: center; padding: 20px 24px 18px; background: linear-gradient(180deg, #faf9f6, var(--gb-slab)); border-bottom: 2px solid var(--gb-ink); position: relative; }
.gb-jhead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px; background: repeating-linear-gradient(90deg, var(--gb-or) 0 30px, transparent 30px 46px); }
.gb-jhead__art { background: linear-gradient(180deg, #e3e1db, #d6d3cc); border-radius: 2px; padding: 4px 6px 0; }
.gb-jhead__h1 { font-size: clamp(25px, 2.6vw, 36px); }
.gb-jhead__by { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; color: var(--gb-ink2); }
.gb-jhead__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-left: 18px; border-left: 1px dashed var(--gb-line2); }
.gb-jhead__dl dt { font: 700 10.5px/1 var(--gb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-dim); margin-bottom: 4px; }
.gb-jhead__dl dd { margin: 0; font: 700 14px/1.25 var(--gb-mono); color: var(--gb-ink); }
.gb-jhead__ppl { grid-column: 1 / -1; }
.gb-stack { display: flex; }
.gb-stack .gb-face { margin-right: -6px; box-shadow: 0 0 0 2px var(--gb-slab); }
.gb-rows__cols { display: grid; grid-template-columns: 104px 210px minmax(0, 1fr) 150px; gap: 0 20px; padding: 18px 24px 8px; font: 700 11px/1 var(--gb-text); letter-spacing: .13em; text-transform: uppercase; color: var(--gb-dim); border-bottom: 1px solid var(--gb-line2); }
.gb-rows { display: block; }
.gb-row { position: relative; display: grid; grid-template-columns: 104px 210px minmax(0, 1fr) 150px; grid-template-areas: "no who main side"; gap: 0 20px; padding: 18px 24px; border-bottom: 1px solid var(--gb-line); background: var(--gb-slab); }
/* шов между строками-плитами */
.gb-row + .gb-row { box-shadow: inset 0 3px 0 rgba(35, 37, 31, .05); }
.gb-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.gb-row--first { background: #faf9f6; }
.gb-row--first::before { background: var(--gb-ink); }
.gb-row--op::before { background: var(--gb-steel); }
.gb-row:target, .gb-row:has(.gb-anchor:target) { background: #fff7f1; }
.gb-anchor { position: absolute; top: -10px; }
.gb-row__no { grid-area: no; display: grid; align-content: start; gap: 6px; }
.gb-row__num { font: 700 22px/1 var(--gb-head); color: var(--gb-ink); letter-spacing: .02em; }
.gb-row__num:hover { color: var(--gb-or-d); }
.gb-row__who { grid-area: who; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.gb-row__id { min-width: 0; }
.gb-row__nick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 3px; font: 700 15px/1.2 var(--gb-text); }
.gb-row__nick > a { color: var(--gb-ink); overflow-wrap: anywhere; }
.gb-row__nick > a:hover { color: var(--gb-or-d); }
.gb-row__rank { margin: 0 0 3px; }
.gb-row__city { display: block; font-size: 12.5px; color: var(--gb-mute); line-height: 1.3; }
.gb-row__main { grid-area: main; min-width: 0; }
.gb-row__re { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1.2 var(--gb-text); color: var(--gb-mute); margin-bottom: 6px; padding: 3px 7px; border-radius: 2px; background: var(--gb-slab2); }
.gb-row__re:hover { color: var(--gb-or-d); }
.gb-row__body { font-size: 16px; line-height: 1.62; color: var(--gb-ink); overflow-wrap: anywhere; }
.gb-row__body > :last-child { margin-bottom: 0; }
.gb-row__side { grid-area: side; min-width: 0; }
.gb-row__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.gb-t { font: 600 12px/1 var(--gb-text); padding: 5px 7px; border-radius: 2px; background: var(--gb-slab2); color: var(--gb-ink2); border: 1px solid var(--gb-line); }
.gb-t--start { background: var(--gb-ink); color: #fff; border-color: var(--gb-ink); }
.gb-t--op { background: var(--gb-steel-l); color: var(--gb-steel); border-color: rgba(31, 78, 102, .25); }
.gb-t--res { background: var(--gb-or); color: var(--gb-ink); border-color: var(--gb-or-d); }
.gb-row__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; }
.gb-row__foot:not(:has(a)) { display: none; }
.post_meta:empty, .post_meta:not(:has(*:not(:empty))) { display: none; }
.gb-guest { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: rgba(243, 242, 238, .7); border: 1.5px dashed var(--gb-line2); border-radius: 4px; padding: 14px 18px; }
.gb-guest p { margin: 0; color: var(--gb-ink2); }
.gb-tfoot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--gb-mute); }
.gb-tfoot__note { margin: 0; max-width: 680px; }
.gb-nextprev { display: flex; gap: 18px; }
.gb-nextprev a { font-weight: 600; }
.gb-tools { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gb-tools .thread_tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.gb-tools .thread_tools li { background: none !important; padding: 0 !important; }
.gb-tools .thread_tools:empty { display: none; }

/* ------------------------------------------------------------------ профиль: паспорт участника */
.gb-pass__plate { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; background: linear-gradient(180deg, #faf9f6, var(--gb-slab)); border-radius: 4px; box-shadow: var(--gb-slab-shadow); padding: 30px 30px 26px; margin-bottom: 24px; }
.gb-pass__plate::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 12px; height: 3px; background: repeating-linear-gradient(90deg, var(--gb-or) 0 30px, transparent 30px 46px); }
.gb-pass__loop { position: absolute; top: 10px; width: 16px; height: 11px; border: 2.4px solid #3b3d37; border-bottom: 0; border-radius: 9px 9px 0 0; }
.gb-pass__loop::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -3px; height: 2px; background: #b5b2aa; }
.gb-pass__loop--a { left: 18px; }
.gb-pass__loop--b { right: 18px; }
.gb-pass__name { margin: 0 0 6px; overflow-wrap: anywhere; }
.gb-pass__rank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 600 15px/1.2 var(--gb-text); }
.gb-pass__nums { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.gb-pass__nums li { display: grid; justify-items: center; min-width: 104px; padding: 12px 10px; background: #fff; border: 1px solid var(--gb-line); border-radius: 3px; }
.gb-pass__nums b { font: 700 32px/1 var(--gb-mono); }
.gb-pass__nums span { font-size: 12.5px; color: var(--gb-mute); }
.gb-pass__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.gb-pass__grid--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gb-spec { width: 100%; border-collapse: collapse; }
.gb-spec th, .gb-spec td { text-align: left; padding: 10px 0; border-bottom: 1px dashed var(--gb-line2); vertical-align: top; }
.gb-spec th { font: 600 13px/1.4 var(--gb-text); color: var(--gb-mute); width: 40%; padding-right: 12px; }
.gb-spec td { font: 500 15px/1.4 var(--gb-text); color: var(--gb-ink); }
.gb-pass__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; }
.gb-lays { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1.2px solid #6f716a; border-radius: 2px; overflow: hidden; }
.gb-lay { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 14px; color: var(--gb-ink); opacity: .55; }
.gb-lay__n { font: 700 12px/1 var(--gb-mono); }
.gb-lay b { font: 700 16px/1.2 var(--gb-head); }
.gb-lay__p { font: 500 12px/1.2 var(--gb-mono); color: var(--gb-ink2); }
.gb-lay.is-past, .gb-lay.is-now { opacity: 1; }
.gb-lay--1 { background: var(--gb-sand); }
.gb-lay--2 { background: #e2cc9c; }
.gb-lay--3 { background: #a7adb0; }
.gb-lay--4 { background: #c2c6c8; }
.gb-lay--5 { background: #e3e1da; }
.gb-lay--6 { background: var(--gb-slab); }
.gb-lay.is-now { box-shadow: inset 5px 0 0 var(--gb-or); font-weight: 700; }
.gb-lay.is-now b::after { content: " · сейчас"; font: 700 11px/1 var(--gb-text); letter-spacing: .08em; text-transform: uppercase; color: var(--gb-or-d); }
.gb-rcs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.gb-rc { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--gb-line2); }
.gb-rc .gb-stamp { grid-row: 1 / span 2; }
.gb-rc__t { margin: 0; font: 600 15px/1.3 var(--gb-text); }
.gb-rc__t a { color: var(--gb-ink); }
.gb-rc__q { margin: 0; font-size: 14px; line-height: 1.5; }
.gb-rc__q a { color: var(--gb-mute); }
.gb-pass .gb-log { margin-top: 12px; }
.gb-pass__extra:empty { display: none; }

/* ------------------------------------------------------------------ ошибки и переходы */
.gb-msg { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; max-width: 920px; margin: 10px auto 26px; }
.gb-msg--go { grid-template-columns: 1fr; margin-top: 60px; }
.gb-msg__t { margin-bottom: 10px; }
.gb-msg__body { color: var(--gb-ink2); }
.gb-msg__body ol, .gb-msg__body ul { padding-left: 1.2em; }

/* ------------------------------------------------------------------ подвал */
.gb-foot { margin-top: 34px; }
.gb-foot__curb { height: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0 2px, transparent 2px), repeating-linear-gradient(90deg, #f3f1eb 0 120px, #e3e0d9 120px 122px), #ece9e2; box-shadow: 0 -2px 0 rgba(35, 37, 31, .12), inset 0 -3px 0 #b5b2aa; }
.gb-foot__in { padding-top: 22px; padding-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 40px; background: none; }
.gb-foot__brand { margin: 0; color: var(--gb-ink2); font-size: 15px; }
.gb-foot__brand b { font: 700 18px/1.2 var(--gb-head); color: var(--gb-ink); }
.gb-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: start; font: 600 14px/1.4 var(--gb-text); }
.gb-foot__note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--gb-mute); }

/* ------------------------------------------------------------------ нижний док и шторки */
.gb-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.gb-dock__in { pointer-events: auto; margin: 0 auto; max-width: 720px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 4px; background: #8f8c84; border-radius: 5px; box-shadow: 0 16px 28px -14px rgba(35, 37, 31, .6), 0 2px 0 #6f6c65; }
/* каждая кнопка — плита со швом и петлёй */
.gb-dock__i { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; height: calc(var(--gb-dock-h) - 8px); border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; color: var(--gb-ink); font: 600 12px/1 var(--gb-text); background: linear-gradient(180deg, #f8f7f3, #e5e3dc); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 #c9c6be; transition: transform .18s, background .2s; }
.gb-dock__i::before { content: ""; position: absolute; top: 5px; left: 50%; width: 10px; height: 6px; margin-left: -5px; border: 1.6px solid #77796f; border-bottom: 0; border-radius: 6px 6px 0 0; opacity: .7; }
.gb-dock__i .gb-ico { margin-top: 6px; }
.gb-dock__i:hover { transform: translateY(-2px); color: var(--gb-ink); }
.gb-dock__i.is-on, .gb-dock__i[aria-expanded="true"] { background: linear-gradient(180deg, #fff, #f1efe9); box-shadow: inset 0 1px 0 #fff, inset 0 -4px 0 var(--gb-or); }
.gb-dock__i.is-on::before, .gb-dock__i[aria-expanded="true"]::before { border-color: var(--gb-or-d); opacity: 1; }
.gb-dock__i .gb-face { margin-top: 6px; }
.gb-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(35, 37, 31, .38); backdrop-filter: blur(2px); }
.gb-sheet { position: fixed; z-index: 58; left: 50%; bottom: calc(var(--gb-dock-h) + 20px + env(safe-area-inset-bottom)); width: min(720px, calc(100% - 24px)); max-height: min(70vh, 640px); transform: translateX(-50%); display: flex; flex-direction: column; background: var(--gb-slab); border-radius: 5px; box-shadow: 0 30px 60px -20px rgba(35, 37, 31, .6), 0 3px 0 var(--gb-edge); animation: gb-sheet .28s cubic-bezier(.2, .9, .3, 1.1); }
.gb-sheet--s { width: min(460px, calc(100% - 24px)); }
@keyframes gb-sheet { from { transform: translate(-50%, 18px); } to { transform: translate(-50%, 0); } }
.gb-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px 10px; border-bottom: 2px solid var(--gb-ink); position: relative; }
.gb-sheet__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: repeating-linear-gradient(90deg, var(--gb-or) 0 24px, transparent 24px 38px); }
.gb-sheet__head h2 { margin: 0; font: 700 22px/1.1 var(--gb-head); }
.gb-sheet__x { border: 0; background: var(--gb-slab2); width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; cursor: pointer; }
.gb-sheet__x:hover { background: var(--gb-or-l); }
.gb-sheet__body { padding: 16px 18px 18px; overflow: auto; }
.gb-shgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.gb-shg h3 { font: 700 11px/1 var(--gb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gb-mute); margin: 8px 0 6px; }
.gb-shg ul { list-style: none; margin: 0 0 6px; padding: 0; }
.gb-shl { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 6px; border-radius: 2px; color: var(--gb-ink); font: 500 14.5px/1.25 var(--gb-text); }
.gb-shl .gb-mark { justify-self: start; }
.gb-shl:hover, .gb-shl.is-on { background: #fff; color: var(--gb-ink); box-shadow: inset 3px 0 0 var(--gb-or); }
.gb-find__l { display: block; font: 700 11.5px/1 var(--gb-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-mute); margin-bottom: 8px; }
.gb-find__row { display: flex; gap: 8px; }
.gb-find__row input { flex: 1; min-width: 0; }
.gb-find__hint { font-size: 13.5px; color: var(--gb-mute); margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* ------------------------------------------------------------------ вход и кабинет */
.gb-login__p { font-size: 14px; color: var(--gb-mute); }
.gb-field { margin: 0 0 12px; display: grid; gap: 5px; }
.gb-field label { font: 700 11.5px/1 var(--gb-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-mute); }
.gb-field--row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.gb-field--row label { letter-spacing: 0; text-transform: none; font: 500 14px/1.2 var(--gb-text); color: var(--gb-ink2); }
.gb-field input.textbox { width: 100%; }
.gb-field .button { width: 100%; }
.gb-mine__who { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.gb-mine__who span { display: grid; }
.gb-mine__who a { font-size: 13px; }
.gb-mine__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.gb-mine__links a { display: block; padding: 9px 10px; border-radius: 2px; color: var(--gb-ink2); font-size: 15px; }
.gb-mine__links a:hover { background: #fff; color: var(--gb-ink); box-shadow: inset 3px 0 0 var(--gb-or); }
.gb-pm[data-n="0"] { display: none; }
.gb-pm { background: var(--gb-or); color: var(--gb-ink); border-radius: 2px; padding: 1px 6px; font: 700 11px/1.3 var(--gb-mono); }

/* ------------------------------------------------------------------ стандартные элементы MyBB */
.tborder { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--gb-slab); border-radius: 4px; overflow: hidden; margin: 0 0 18px; color: var(--gb-ink); box-shadow: var(--gb-slab-shadow); }
.tborder td, .tborder th { padding: 10px 14px; border-bottom: 1px solid var(--gb-line); vertical-align: top; text-align: left; }
.thead { background: #faf9f6; border-bottom: 2px solid var(--gb-ink) !important; color: var(--gb-ink); font: 700 19px/1.3 var(--gb-head); }
.thead a, .thead strong { color: var(--gb-ink); }
.thead .expcolimage { float: right; }
.tcat { background: var(--gb-slab2); font: 700 11.5px/1.3 var(--gb-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-ink2); }
.tcat a { color: var(--gb-ink2); }
.trow1, .trow2 { background: transparent; }
.trow2 { background: rgba(35, 37, 31, .025); }
.trow_shaded { background: rgba(242, 98, 28, .07); }
.trow_selected td, .trow_selected { background: var(--gb-or-l); }
.tfoot { background: var(--gb-slab2); }
.tborder a, .trow1 a, .trow2 a, .tfoot a { color: var(--gb-steel); }
.smalltext { font-size: 13px; line-height: 1.45; color: var(--gb-mute); }
.largetext { font: 700 20px/1.3 var(--gb-head); }
.float_left { float: left; } .float_right { float: right; } .clear { clear: both; }
input.textbox, textarea, select, input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="url"] {
	font: 400 16px/1.4 var(--gb-text); color: var(--gb-ink); background: #fff; border: 1.5px solid var(--gb-line2); border-radius: 3px; padding: 9px 12px; max-width: 100%; transition: border-color .2s, box-shadow .2s; }
textarea { width: 100%; min-height: 170px; line-height: 1.55; }
input.textbox:focus, textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus { outline: none; border-color: var(--gb-ink2); box-shadow: 0 0 0 3px rgba(242, 98, 28, .3); }
.button, input.button, button.button, a.button, input[type="submit"], input[type="button"], button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 14.5px/1 var(--gb-text); color: #fff; background: var(--gb-ink); border: 0; border-radius: 3px; padding: 12px 18px; cursor: pointer; text-decoration: none; box-shadow: inset 0 -3px 0 var(--gb-or); transition: background .2s, transform .15s; }
.button:hover, input.button:hover, input[type="submit"]:hover, button[type="submit"]:hover, a.button:hover { background: #3a3d36; color: #fff; }
.button:active, input[type="submit"]:active { transform: translateY(1px); }
.new_thread_button, .new_reply_button { background: var(--gb-or); color: var(--gb-ink); box-shadow: inset 0 -3px 0 var(--gb-or-d); }
.new_thread_button:hover, .new_reply_button:hover { background: #ff7531; color: var(--gb-ink); }
.closed_button { background: var(--gb-bg2); color: var(--gb-mute); box-shadow: none; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 600 13.5px/1 var(--gb-mono); }
.pagination .pages { color: var(--gb-mute); margin-right: 6px; font-family: var(--gb-text); }
.pagination a, .pagination .pagination_current { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 3px; color: var(--gb-ink2); background: var(--gb-slab); box-shadow: inset 0 -2px 0 #c9c6be; }
.pagination a:hover { color: var(--gb-or-d); }
.pagination .pagination_current { background: var(--gb-ink); color: #fff; box-shadow: inset 0 -3px 0 var(--gb-or); }
.postbit_buttons { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.postbit_buttons > a, .postbit_buttons a { display: inline-flex; align-items: center; padding: 3px 0; font: 600 12.5px/1.2 var(--gb-text); color: var(--gb-mute); }
.postbit_buttons a:hover { color: var(--gb-or-d); }
.postbit_buttons a span { background: none !important; padding: 0 !important; }
.popup_menu { background: var(--gb-slab); border-radius: 4px; padding: 6px; box-shadow: 0 18px 30px -14px rgba(35, 37, 31, .5), 0 2px 0 var(--gb-edge); z-index: 50; }
.popup_menu .popup_item { display: block; padding: 7px 10px; color: var(--gb-ink2); font-size: 15px; border-radius: 2px; }
.popup_menu .popup_item:hover { background: #fff; }
.blocker { background: rgba(35, 37, 31, .5) !important; }
.modal { background: var(--gb-slab) !important; color: var(--gb-ink); border-radius: 5px !important; box-shadow: 0 30px 60px -20px rgba(35, 37, 31, .6) !important; padding: 18px !important; }
.modal .tborder { margin: 0; box-shadow: none; }
.error, div.error { background: #fdeae0; border: 1.5px solid rgba(178, 70, 15, .4); border-radius: 3px; padding: 12px 16px; color: var(--gb-ink); margin-bottom: 14px; }
.red_alert, .pm_alert { background: #fbf1d3; border: 1px solid rgba(160, 120, 20, .35); border-radius: 3px; padding: 10px 14px; margin-bottom: 14px; }
fieldset { border: 1px solid var(--gb-line2); border-radius: 3px; padding: 12px 14px; margin: 0 0 14px; }
legend { font: 700 11.5px/1 var(--gb-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gb-mute); padding: 0 6px; }
.usercp_nav_item, .modcp_nav_item { display: block; padding: 6px 4px; color: var(--gb-ink2); }
.sceditor-container { border-radius: 3px; overflow: hidden; max-width: 100%; }
.ignored_post, .deleted_post_hidden { padding: 12px 16px; border: 1px dashed var(--gb-line2); border-radius: 3px; color: var(--gb-mute); margin-bottom: 12px; }
.scaleimages img { max-width: 100%; height: auto; border-radius: 2px; }

/* BB-коды */
blockquote.mycode_quote { margin: 10px 0 12px; padding: 10px 14px 10px 16px; border-left: 4px solid #9a978f; background: var(--gb-slab2); border-radius: 0 3px 3px 0; color: var(--gb-ink2); font-size: 15px; }
blockquote.mycode_quote cite { display: block; font: 700 12.5px/1.2 var(--gb-text); font-style: normal; color: var(--gb-ink); margin-bottom: 4px; letter-spacing: .02em; }
blockquote.mycode_quote cite > span { color: var(--gb-dim); margin-left: 6px; font-weight: 500; font-size: 11.5px; }
.codeblock { margin: 12px 0; background: #2b2d29; border-radius: 3px; overflow: hidden; color: #e9e7e1; }
.codeblock .title { font: 700 11px/1 var(--gb-text); letter-spacing: .12em; text-transform: uppercase; color: #b9b6ae; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.codeblock code { display: block; padding: 12px; overflow-x: auto; font: 13.5px/1.5 var(--gb-mono); color: #f3f2ee; }
.mycode_list, ul.mycode_list, ol.mycode_list { padding-left: 1.4em; }
.post_body li::marker { color: var(--gb-or-d); }
.post_body hr, .mycode_hr { border: 0; height: 3px; margin: 16px 0; background: repeating-linear-gradient(90deg, var(--gb-line2) 0 18px, transparent 18px 28px); }
.signature { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--gb-line2); font-size: 14px; color: var(--gb-mute); }
.video_embed iframe, .post_body iframe { max-width: 100%; border-radius: 3px; }
.post_body .mycode_s { text-decoration-color: var(--gb-or-d); text-decoration-thickness: 1.5px; }
.post_body .mycode_u { text-decoration-color: var(--gb-steel); text-underline-offset: 3px; }
.post_body img.mycode_img { border-radius: 2px; }

/* ------------------------------------------------------------------ планшет */
@media (max-width: 1180px) {
	.gb-duo { grid-template-columns: 1fr; }
	.gb-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
	.gb-wds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gb-log__cols, .gb-lg { grid-template-columns: 84px 150px minmax(0, 1fr) 84px; }
	.gb-log__cols span:nth-child(4), .gb-lg .gb-lg__f { display: none; }
	.gb-row, .gb-rows__cols { grid-template-columns: 96px 200px minmax(0, 1fr); grid-template-areas: "no who main" "no who side"; }
	.gb-rows__cols span:nth-child(4) { display: none; }
	.gb-row__tags { flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
	.gb-jhead { grid-template-columns: 130px minmax(0, 1fr); }
	.gb-jhead__dl { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px 26px; padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px dashed var(--gb-line2); }
	.gb-jhead__ppl { grid-column: auto; }
}
@media (max-width: 960px) {
	.gb-hero { grid-template-columns: 1fr; }
	.gb-hero__art { max-width: 560px; }
	.gb-cat__body { grid-template-columns: 1fr; }
	.gb-facets { position: static; }
	.gb-facets__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
	.gb-facets__h, .gb-facets__reset { grid-column: 1 / -1; }
	.gb-facets__reset { justify-self: start; }
	.gb-fhead { grid-template-columns: 150px minmax(0, 1fr); }
	.gb-fhead__act { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: space-between; }
	.gb-pass__plate { grid-template-columns: auto minmax(0, 1fr); }
	.gb-pass__nums { grid-column: 1 / -1; }
	.gb-pass__grid, .gb-pass__grid--wide { grid-template-columns: 1fr; }
	.gb-tlist__cols, .gb-trow { grid-template-columns: 76px minmax(0, 1fr) 80px; }
	.gb-tlist__cols span:nth-child(4), .gb-trow__last { display: none; }
}

/* ------------------------------------------------------------------ телефон */
@media (max-width: 720px) {
	body { font-size: 16px; }
	.gb-app > main, .gb-top__in, .gb-foot__in { padding-left: 16px; padding-right: 16px; }
	.gb-top__in { flex-wrap: wrap; gap: 6px 14px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
	.gb-logo__name { font-size: 20px; }
	.gb-logo__sub { font-size: 11.5px; }
	.gb-logo__mark { width: 38px; height: 38px; }
	.gb-crumbs-row { flex-basis: 100%; justify-content: flex-start; }
	.gb-crumbs { justify-content: flex-start; text-align: left; font-size: 13px; }
	.gb-crumbs .active { max-width: 100%; white-space: normal; }
	.gb-main { padding-top: 14px; }
	.gb-main > * { margin-bottom: 20px; }
	.gb-hero__lead { font-size: 16.5px; }
	.gb-hero__go { grid-template-columns: 1fr 1fr; }
	.gb-panel, .gb-log-sec, .gb-tlist { padding: 18px 16px; }
	.gb-facets__form { grid-template-columns: 1fr; padding: 12px 14px; }
	/* на телефоне фасеты — строки чипов */
	.gb-facet { padding: 4px 0 8px; }
	.gb-facet legend { padding: 8px 0 6px; }
	.gb-facet ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.gb-fc { display: inline-flex; gap: 0; padding: 7px 10px; border: 1.5px solid var(--gb-line2); background: #fff; font-size: 13.5px; }
	.gb-fc__box, .gb-fc__n { display: none; }
	.gb-fc:has(input:checked) { background: var(--gb-or); border-color: var(--gb-or-d); }
	.gb-fc:has(input:focus-visible) { outline: 3px solid var(--gb-or); outline-offset: 2px; }
	.gb-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
	.gb-card { padding: 10px 11px 12px; }
	.gb-card__t { font-size: 17.5px; }
	.gb-card__d { display: none; }
	.gb-card__chips { display: none; }
	.gb-card__k span { display: none; }
	.gb-cut { --k: 3px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
	.gb-cut__col { padding-left: 24px; }
	.gb-veh { width: 112px; }
	.gb-cut__legend b { font-size: 13.5px; }
	.gb-cut__legend span { font-size: 12px; }
	.gb-calc__in { grid-template-columns: 1fr; }
	.gb-wds { grid-template-columns: 1fr; }
	.gb-log__cols { display: none; }
	.gb-lg { grid-template-columns: 70px minmax(0, 1fr); gap: 4px 12px; }
	.gb-lg .gb-stamp { grid-row: 1 / span 2; align-self: start; }
	.gb-lg__who { grid-column: 2; font-size: 13px; }
	.gb-lg__t { grid-column: 2; grid-row: 1; }
	.gb-lg__n { display: none; }
	.gb-lg::before { left: -16px; }
	.gb-log--short .gb-lg { grid-template-columns: 70px minmax(0, 1fr); }
	.gb-log--short .gb-lg__f { display: flex; grid-column: 2; grid-row: 2; }
	.gb-svcs__list { grid-template-columns: 1fr; }
	.gb-svc a { grid-template-columns: 74px minmax(0, 1fr); }
	.gb-fhead { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
	.gb-fhead__art { max-width: 200px; }
	.gb-tlist__cols { display: none; }
	.gb-trow { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "main n" "d d"; gap: 4px 12px; }
	.gb-trow__main { grid-area: main; }
	.gb-trow__n { grid-area: n; justify-items: end; }
	.gb-trow__d { grid-area: d; }
	.gb-trow__d .gb-stamp { flex-direction: row; font-size: 12px; color: var(--gb-mute); }
	.gb-trow__h { font-size: 15.5px; }
	.gb-jhead { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
	.gb-jhead__art { display: none; }
	.gb-jhead__dl { grid-template-columns: 1fr 1fr; }
	.gb-jhead__ppl { grid-column: 1 / -1; }
	.gb-rows__cols { display: none; }
	.gb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who no" "main main" "side side"; gap: 10px 12px; padding: 16px; }
	.gb-row__no { justify-items: end; text-align: right; gap: 3px; }
	.gb-row__num { font-size: 18px; }
	.gb-row__no .gb-stamp { align-items: flex-end; font-size: 12.5px; }
	.gb-row__body { font-size: 16px; }
	.gb-row__tags { margin-top: 2px; }
	.gb-pass__plate { grid-template-columns: 1fr; padding: 26px 16px 22px; gap: 14px; justify-items: start; }
	.gb-face--xl { width: 112px; height: 112px; font-size: 40px; }
	.gb-pass__nums li { min-width: 0; flex: 1; }
	.gb-msg { grid-template-columns: 1fr; }
	.gb-msg__art { max-width: 200px; }
	.gb-foot__in { grid-template-columns: 1fr; }
	.gb-shgs { grid-template-columns: 1fr; }
	.gb-dock { padding: 0 6px calc(6px + env(safe-area-inset-bottom)); }
	.gb-dock__in { gap: 2px; padding: 3px; }
	.gb-dock__i { font-size: 10.5px; }
	.gb-sheet { width: calc(100% - 12px); max-height: 74vh; bottom: calc(var(--gb-dock-h) + 12px + env(safe-area-inset-bottom)); }
	.tborder { display: block; overflow-x: auto; }
	.tborder td, .tborder th { padding: 8px 10px; }
}
@media (max-width: 400px) {
	.gb-cards { grid-template-columns: 1fr; }
	.gb-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 12px; align-items: start; }
	.gb-card__img { grid-row: 1 / span 3; margin: 0; }
	.gb-card__f { grid-column: 1 / -1; }
	.gb-hero__go a { font-size: 13px; }
	.gb-cut { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
	.gb-dock__i span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ ссылки в сообщениях: свой стиль форума («волосяная трещина»)
   Под словом тонкая ломаная трещина в бетоне 1,3px с короткими ответвлениями, высота 6px (SVG data-URI,
   сегмент 46px повтором, без растяжения), без подчёркивания; текст стальной синий 600. При наведении
   «шов залили герметиком»: трещина исчезает, снизу ровная полоса сигнального оранжевого 3px, текст темнее.
   Без значка внешней ссылки. */
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url {
	color: #1f4e66;
	font-weight: 600;
	text-decoration: none;
	padding-bottom: 5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='6' viewBox='0 0 46 6'%3E%3Cpath d='M0 3.2l4 .9 3.5-1.6 4.2 1.9 3.1-.7 2.6 1.6 4.4-2.2 3.3.8 3.9-1.3 2.4 1.7 4.1-.5 3.6-1.1 3.4 1.3 3.5-.4' fill='none' stroke='%234a4d49' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M15.4 3.7l1.5 1.9M29.9 2.9l1.4-2.1M40.6 2.6l1.2 2.2' fill='none' stroke='%234a4d49' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 46px 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: color .2s, background-size .2s;
}
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url:hover,
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url:focus-visible {
	color: #b2460f;
	background: linear-gradient(#f2621c, #f2621c) no-repeat 0 100% / 100% 3px;
}
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url::after { content: none; }