/* Source: 2.5 Стройбан - Бригады (десктоп).html. Ported from v3 mock on 2026-07-13. */
html { scroll-behavior: smooth; }
body.sb { background: var(--muted); }
.wrap { max-width: 1344px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted-foreground); padding: 18px 0 0; }
.crumb a:hover { color: var(--foreground); }
.crumb svg { width: 13px; height: 13px; }
.scr { display: none; }
.scr.active { display: block; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 16px 0 4px; flex-wrap: wrap; }
.pagehead h1 { margin: 0 0 6px; }
.pagehead .sub { font-size: var(--text-base); color: var(--muted-foreground); margin: 0; }
.pagehead .sub b { color: var(--foreground); }
.searchrow { display: flex; gap: 12px; margin: 18px 0 14px; }
.searchrow .sb-input-group { flex: 1; height: 3.25rem; background: var(--background); border: 1px solid var(--input); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.searchrow .sb-icon { color: var(--foreground); }
.searchrow .sb-input { height: 100%; font-size: var(--text-base); border: none; border-radius: 0; background: transparent; }
.searchrow .sb-btn { height: 3.25rem; flex: none; gap: 8px; }
.searchrow .sb-btn svg { width: 17px; height: 17px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; flex-wrap: wrap; }
.tabs button { border: none; background: transparent; font-family: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); padding: 8px 14px; border-radius: calc(var(--radius) - 4px); cursor: pointer; }
.tabs button[data-active="true"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 60px; }
@media (max-width: 1000px){ .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid { grid-template-columns: 1fr; } }
.empty { padding: 60px; text-align: center; color: var(--muted-foreground); grid-column: 1 / -1; }
.bcard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .12s ease, box-shadow .12s ease; }
.bcard:hover { border-color: oklch(0.8 0 0); box-shadow: var(--shadow-md); }
.bcard-cover { height: 92px; position: relative; }
.bcard-cover.c1, .bhero-cover.c1 { background: linear-gradient(135deg,#1f3a5f,#0f1f33); }
.bcard-cover.c2, .bhero-cover.c2 { background: linear-gradient(135deg,#3f2f1a,#241811); }
.bcard-cover.c3, .bhero-cover.c3 { background: linear-gradient(135deg,#1e3a2c,#0f1f17); }
.bcard-cover.c4, .bhero-cover.c4 { background: linear-gradient(135deg,#3a1f2f,#241017); }
.bcard-logo { position: absolute; left: 18px; bottom: -22px; width: 60px; height: 60px; border-radius: 14px; background: var(--primary); color: #000; display: grid; place-items: center; font-weight: 800; font-size: 22px; border: 3px solid var(--card); }
.bcard-online { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 6px; background: oklch(0.145 0 0 / 0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.bcard-online .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.bcard-hiring { position: absolute; top: 10px; left: 12px; display: inline-flex; align-items: center; gap: 5px; background: var(--primary); color: #000; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.bcard-hiring svg { width: 12px; height: 12px; }
.bcard-body { padding: 30px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.bcard-name { font-size: var(--text-h4); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.bcard-name .ver { width: 16px; height: 16px; color: var(--primary-hover); }
.bcard-spec { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 3px; }
.bcard-stats { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.bcard-stat { font-size: var(--text-xs); color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 5px; }
.bcard-stat b { color: var(--foreground); font-weight: 700; font-variant-numeric: tabular-nums; }
.bcard-stat svg { width: 14px; height: 14px; }
.bcard-avatars { display: flex; margin-top: 14px; align-items: center; }
.bcard-avatars .a { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card); background: var(--secondary); color: var(--secondary-foreground); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-left: -8px; }
.bcard-avatars .a:first-child { margin-left: 0; }
.bcard-avatars .more { background: var(--muted); color: var(--foreground); }
.bcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.bcard-foot .sb-btn { flex: 1; }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--muted-foreground); background: none; border: none; cursor: pointer; font-family: inherit; padding: 18px 0 14px; }
.back-link:hover { color: var(--foreground); }
.back-link svg { width: 16px; height: 16px; }
.bhero { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.bhero-cover { height: 180px; position: relative; }
.bhero-body { padding: 0 28px 22px; display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.bhero-logo { width: 108px; height: 108px; border-radius: 22px; background: var(--primary); color: #000; display: grid; place-items: center; font-size: 40px; font-weight: 800; flex: none; margin-top: -48px; border: 4px solid var(--card); box-shadow: var(--shadow-md); }
.bhero-main { flex: 1; min-width: 240px; padding-bottom: 4px; }
.bhero-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bhero-name h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.ver-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,204,53,.18); color: #8a6d00; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ver-badge svg { width: 14px; height: 14px; }
.bhero-spec { font-size: 16px; color: var(--muted-foreground); margin-top: 6px; }
.bhero-stats { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.bhero-stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted-foreground); }
.bhero-stat b { font-size: 17px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
.bhero-act { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.dgrid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; padding: 20px 0 80px; align-items: start; }
@media (max-width: 940px){ .dgrid { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; margin-bottom: 18px; }
.card h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card h2 .n { font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.about { font-size: 15px; line-height: 1.6; margin: 0; }
.members { display: flex; flex-direction: column; gap: 4px; }
.member { display: flex; align-items: center; gap: 13px; padding: 10px; border-radius: 12px; }
.member:hover { background: var(--muted); }
.m-av { width: 46px; height: 46px; border-radius: 12px; background: var(--secondary); color: var(--secondary-foreground); display: grid; place-items: center; font-weight: 700; flex: none; position: relative; }
.m-av .on { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: #4ade80; border: 2px solid var(--card); }
.m-av .on.off { background: var(--muted-foreground); }
.m-main { flex: 1; min-width: 0; }
.m-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.m-name .ver { width: 14px; height: 14px; color: var(--primary-hover); }
.m-role { font-size: 13px; color: var(--muted-foreground); margin-top: 1px; }
.m-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.m-badge.lead { background: rgba(255,204,53,.2); color: #8a6d00; }
.m-badge.master { background: var(--secondary); color: var(--foreground); }
.m-star { font-size: 13px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; min-width: 46px; justify-content: flex-end; }
.m-star svg { width: 14px; height: 14px; color: #E0A800; }
.proj { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--border); }
.proj:first-of-type { border-top: none; }
.proj .pi { width: 44px; height: 44px; border-radius: 11px; background: var(--muted); display: grid; place-items: center; flex: none; color: var(--muted-foreground); }
.proj .pi svg { width: 20px; height: 20px; }
.proj .pn { font-size: 15px; font-weight: 600; }
.proj .ps { font-size: 13px; color: var(--muted-foreground); margin-top: 1px; }
.proj .pd { margin-left: auto; font-size: 12px; color: var(--muted-foreground); }
.side-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.side-card h3 { font-size: 14px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 7px; }
.side-card h3 svg { width: 16px; height: 16px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.stat-row:first-of-type { border-top: none; }
.stat-row .l { color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 8px; }
.stat-row .l svg { width: 16px; height: 16px; }
.stat-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.skills { display: flex; flex-wrap: wrap; gap: 7px; }
.skill { font-size: var(--text-sm); font-weight: 500; background: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.hiring-card { border-color: var(--primary); background: oklch(0.99 0.03 95); }
.hiring-card .sb-btn { width: 100%; margin-top: 14px; }
.sb-overlay { position: fixed; inset: 0; background: oklch(0.145 0 0 / 0.45); display: grid; place-items: center; z-index: 60; padding: 24px; }
.cdlg { width: min(520px, 94vw); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.cdlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.cdlg-h .t { font-size: var(--text-h4); font-weight: 700; }
.cdlg-h .d { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 4px; }
.cdlg-close { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.cdlg-close svg { width: 18px; height: 18px; }
.cdlg-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.cdlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }
.field { display: block; }
.field > span { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 7px; }
.type-pick { display: flex; gap: 8px; }
.type-pick button { flex: 1; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 12px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--foreground); }
.type-pick button[data-active="true"] { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.type-pick svg { width: 20px; height: 20px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--foreground); color: var(--background); font-size: var(--text-sm); padding: 11px 18px; border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .2s ease; display: flex; align-items: center; gap: 9px; z-index: 70; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 16px; height: 16px; color: var(--primary); }