/* staff.yamiko.ru — кабинет стаффа: вход, профиль, разделы истории. Общее оформление сайтов Yamiko
   (шрифты, цвета, шапка, подвал) дописывает в конец файла Server/web-shell/sync-style.cjs. Здесь — только своё. */

:root { --ok-bar: rgba(95, 211, 154, .8); --bad-bar: rgba(255, 107, 107, .85); --none-bar: rgba(255, 255, 255, .08); }

.page { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(72px, 9vw, 120px); min-height: calc(100vh - 420px); }
.icon { width: 18px; height: 18px; }
a:hover .icon { transform: translateX(3px); }
code { font: 500 .92em/1 var(--mono); letter-spacing: 0; }

/* ── Профиль ──────────────────────────────────────────────────────────────── */
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: clamp(20px, 3vw, 40px); padding: clamp(16px, 3vw, 32px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); animation: yamiko-in .8s var(--ease) both; }
.avatar-wrap { position: relative; width: clamp(72px, 8vw, 104px); }
.avatar { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--bg-3); object-fit: cover; }
.avatar-dot { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border: 3px solid var(--bg); border-radius: 50%; background: var(--ok); }
.person-text { min-width: 0; }
.person .eyebrow { margin-bottom: 14px; }
.person h1 { font-size: clamp(34px, 5.4vw, 80px); font-weight: 800; letter-spacing: -.05em; line-height: .95; overflow-wrap: anywhere; }
.account-id { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }
.account-id code { color: var(--ink-2); }
.meta { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.branch-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.branch-tags > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 3px; font-size: 12px; font-weight: 600; }
.tag-rank { color: var(--brand-2); font-weight: 500; }
.logout { margin: 0; }
.logout button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 4px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .3s, border-color .3s; }
.logout button:hover { color: var(--ink); border-color: var(--ink); }

.membership-notice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; padding: 36px 0; border-bottom: 1px solid var(--line); }
.membership-notice h2 { margin: 14px 0 12px; font: 400 clamp(28px, 3.2vw, 44px)/1.05 var(--display); letter-spacing: -.03em; }
.membership-notice p:not(.eyebrow) { max-width: 60ch; color: var(--ink-2); line-height: 1.6; }

.data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.data-toolbar time { color: var(--ink-2); }
.data-toolbar button { min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .3s; }
.data-toolbar button:hover { text-decoration-color: currentColor; }

/* ── Рабочая область: разделы слева, содержимое справа ────────────────────── */
.workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: 32px; scroll-margin-top: calc(var(--bar) + 16px); }
.sidebar { position: sticky; top: calc(var(--bar) + 24px); }
.sidebar > .eyebrow { margin: 0 0 16px; }
.profile-nav { display: grid; border-top: 1px solid var(--line); }
.profile-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 0 0 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: color .3s, padding-left var(--dur) var(--ease); }
.profile-nav a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--brand-2); transform: scaleY(0); transition: transform var(--dur) var(--ease); }
.profile-nav a:hover { color: var(--ink); padding-left: 20px; }
.profile-nav a[aria-current] { color: var(--ink); font-weight: 700; }
.profile-nav a[aria-current]::before { transform: scaleY(1); }
.profile-nav .icon { width: 17px; height: 17px; color: var(--ink-3); transition: color .3s; }
.profile-nav a:hover .icon, .profile-nav a[aria-current] .icon { color: var(--brand-2); transform: none; }
.nav-count { margin-left: auto; padding: 1px 7px; border: 1px solid var(--bad); border-radius: 999px; color: var(--bad); font-size: 11px; font-weight: 700; }
.sidebar-note { display: flex; gap: 10px; margin-top: 22px; color: var(--ink-3); }
.sidebar-note .icon { width: 15px; height: 15px; margin-top: 2px; }
.sidebar-note p { font-size: 12px; line-height: 1.6; }

.workspace-main { min-width: 0; }
.view-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.view-heading h2 { font: 400 clamp(30px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.03em; outline: none; }
.view-heading p { margin: 10px 0 0; max-width: 60ch; color: var(--ink-3); font-size: 14px; }
.view-symbol { color: var(--ink-3); }
.view-symbol .icon { width: 28px; height: 28px; }
.view-content { display: grid; gap: 28px; padding-top: 24px; animation: yamiko-in .5s var(--ease) both; }
#dashboard[aria-busy=true] .view-content { opacity: .45; transition: opacity .3s; }

/* Сводка: четыре числа через линии */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.metric { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 22px 20px 22px 0; color: var(--ink); transition: background var(--dur) var(--ease); }
.metric + .metric { padding-left: 20px; border-left: 1px solid var(--line); }
.metric-label { display: flex; align-items: center; gap: 8px; font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.metric-label .icon { width: 15px; height: 15px; color: var(--brand-2); }
.metric strong { font-size: clamp(24px, 2.4vw, 38px); text-wrap: balance; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-hint { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
.metric-hint .icon { width: 14px; height: 14px; }
.metric:hover .metric-hint { color: var(--ink-2); }
.metric-alert strong, .metric-alert .metric-label .icon { color: var(--bad); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
.panel, .history-panel { min-width: 0; padding: 0 0 28px; }
.overview-grid .panel { padding: 0 0 36px; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading a { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.panel-heading .icon { width: 14px; height: 14px; }

.group { margin: 0; }
.group + .group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.group h2 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.group-lead { margin: 8px 0 20px; max-width: 64ch; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.sub { margin: 18px 0 6px; font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ПТ по веткам */
.pts { list-style: none; margin: 0; padding: 0; display: grid; }
.pt { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.pt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pt-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.state { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.tone-ok { color: var(--ok); }
.tone-bad { color: var(--bad); }
.pt-bar { display: block; width: 100%; height: 4px; margin: 16px 0 10px; appearance: none; border: 0; background: var(--none-bar); }
.pt-bar::-webkit-progress-bar { background: var(--none-bar); }
.pt-bar::-webkit-progress-value { background: var(--brand-2); transition: width .8s var(--ease); }
.pt-bar::-moz-progress-bar { background: var(--brand-2); }
.pt-bar.is-done::-webkit-progress-value { background: var(--ok); }
.pt-bar.is-done::-moz-progress-bar { background: var(--ok); }
.pt-meta { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pt-history { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 11px; color: var(--ink-3); }
.squares { display: flex; gap: 4px; }
.sq { width: 12px; height: 12px; border-radius: 1px; background: var(--none-bar); }
.sq-done { background: var(--ok-bar); }
.sq-miss { background: transparent; box-shadow: inset 0 0 0 1px var(--bad-bar); }
.sq-now { background: var(--brand-2); margin-left: 4px; }

/* Голосовая активность по неделям */
.vbars { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.vbar { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.vbar-track { display: flex; align-items: flex-end; width: 100%; height: 150px; border-bottom: 1px solid var(--line-2); }
.vbar-fill { width: 100%; background: var(--brand); opacity: .55; transform-origin: bottom; animation: vgrow .9s var(--ease) both; }
.vbar:nth-child(2n) .vbar-fill { animation-delay: .08s; }
.vbar.is-now .vbar-fill { opacity: 1; background: var(--brand-2); }
@keyframes vgrow { from { transform: scaleY(0); } }
.vbar-value { font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vbar-label { font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
.h-0{height:0}.h-1{height:5%}.h-2{height:10%}.h-3{height:15%}.h-4{height:20%}.h-5{height:25%}.h-6{height:30%}.h-7{height:35%}.h-8{height:40%}.h-9{height:45%}.h-10{height:50%}.h-11{height:55%}.h-12{height:60%}.h-13{height:65%}.h-14{height:70%}.h-15{height:75%}.h-16{height:80%}.h-17{height:85%}.h-18{height:90%}.h-19{height:95%}.h-20{height:100%}

.overview-pay .group h2, .overview-pay .group-lead { display: none; }
.overview-pay .row { grid-template-columns: 96px minmax(0, 1fr); }

.attention-card { display: grid; align-content: start; gap: 10px; padding: 28px 0 32px; border-top: 1px solid var(--line); }
.attention-card > .icon { width: 26px; height: 26px; margin-bottom: 10px; color: var(--ok); }
.has-warnings > .icon { color: var(--bad); }
.attention-card h3 { font-size: 22px; letter-spacing: -.03em; }
.attention-card p { color: var(--ink-2); font-size: 14px; max-width: 48ch; }
.attention-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.attention-card a .icon { width: 15px; height: 15px; }

/* Фильтры истории */
.filters { display: flex; align-items: end; flex-wrap: wrap; gap: 14px 18px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.filter-field { display: grid; gap: 8px; flex: 1 1 140px; min-width: 0; }
.filter-field > span:first-child { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.filter-search { flex: 2 1 240px; }
.filter-field input, .filter-field select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink); font-size: 14px; transition: border-color .3s; }
.filter-field input:hover, .filter-field select:hover { border-color: var(--ink-3); }
.filter-field input:focus, .filter-field select:focus { outline: none; border-color: var(--ink); }
.filter-field select { appearance: none; padding-right: 36px; }
.filter-field:has(select) { position: relative; }
.filter-field:has(select)::after { content: ""; position: absolute; right: 16px; bottom: 19px; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
.filter-field select option { background: var(--bg-2); color: var(--ink); }
.filter-field input::placeholder { color: var(--ink-3); }
.search-input { position: relative; display: block; }
.search-input .icon { position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; color: var(--ink-3); }
.search-input input { padding-left: 38px; }
.filter-submit { height: 44px; min-height: 44px; padding: 0 22px; }
.filter-reset { line-height: 44px; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.filter-reset:hover { color: var(--ink); }

/* Записи истории */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row > div { min-width: 0; }
.row-date { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.row-text { margin: 6px 0 8px; color: var(--ink-2); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.row-meta { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; }
.row-meta strong { color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row.is-active .row-title::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--bad); }
.badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 11px; font-weight: 600; }
.badge-bad { border-color: var(--bad); color: var(--bad); }
.badge-ok { border-color: var(--ok); color: var(--ok); }
.reason summary { cursor: pointer; margin: 6px 0 8px; color: var(--ink-2); font-size: 14px; line-height: 1.55; list-style: none; }
.reason summary::-webkit-details-marker { display: none; }
.reason summary span { color: var(--brand-2); font-weight: 600; }
.reason[open] summary { display: none; }

.history-panel { scroll-margin-top: calc(var(--bar) + 16px); }
.history-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 18px; }
.result-count { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pagination { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.page-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink); font-weight: 600; transition: border-color .3s, background .3s, color .3s; }
.page-button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.page-button[aria-disabled] { opacity: .35; pointer-events: none; }
.page-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.subnav { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.subnav a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--ink-3); font-size: 14px; font-weight: 500; transition: color .3s; }
.subnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current] { color: var(--ink); font-weight: 700; }
.subnav a[aria-current]::after { transform: scaleX(1); }
.subnav span { font-size: 11px; font-weight: 600; color: var(--ink-3); }

.empty { padding: 20px 0; color: var(--ink-2); font-size: 14px; }
.empty-state { display: grid; justify-items: center; text-align: center; padding: 48px 16px; }
.empty-state > .icon { width: 28px; height: 28px; margin-bottom: 16px; color: var(--ink-3); }
.empty-state h3 { font-size: 18px; letter-spacing: -.02em; }
.empty-state p { margin: 8px 0 14px; font-size: 13px; color: var(--ink-3); }
.empty-state a { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.cards li { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.cards h3 { font-size: 16px; letter-spacing: -.02em; margin-bottom: 10px; }
.cards p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.facts div { display: flex; flex-direction: column-reverse; gap: 4px; }
.facts dd { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts dt { font-size: 12px; color: var(--ink-3); }
.facts-week { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }

/* ── Вход ─────────────────────────────────────────────────────────────────── */
.login-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding: clamp(32px, 6vw, 96px) 0 0; }
.login-intro .eyebrow { font: 400 clamp(28px, 2.8vw, 44px)/1 var(--script); letter-spacing: 0; text-transform: none; color: var(--brand-2); transform: rotate(-3deg); transform-origin: left center; width: max-content; animation: yamiko-in .9s var(--ease) both; }
.intro h1 { margin: 20px 0 24px; font: 400 clamp(40px, 6.6vw, 104px)/.96 var(--display); letter-spacing: -.035em; animation: yamiko-in .9s var(--ease) .05s both; }
.lead { margin: 0 0 32px; max-width: 48ch; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; animation: yamiko-in .9s var(--ease) .15s both; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; animation: yamiko-in .9s var(--ease) .25s both; }
.note { margin-top: 18px; max-width: 52ch; font-size: 13px; color: var(--ink-3); }
.features { grid-template-columns: 1fr; gap: 0; margin-top: 12px; animation: yamiko-in .9s var(--ease) .3s both; }
.features li { padding: 24px 0 26px; counter-increment: feature; }
.features h3 { display: flex; gap: 14px; align-items: baseline; font-size: 18px; letter-spacing: -.025em; margin-bottom: 8px; }
.features h3::before { content: counter(feature, decimal-leading-zero); font: 600 12px/1 var(--sans); letter-spacing: .1em; color: var(--brand-2); font-variant-numeric: tabular-nums; }
.features p { padding-left: 34px; }
.notice { padding: 14px 0 14px 18px; margin: 0 0 20px; border-left: 2px solid var(--brand); color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.notice-error { border-left-color: var(--bad); color: var(--ink); }
.intro:not(.login-intro) { padding: clamp(32px, 6vw, 80px) 0; max-width: 64ch; }
.intro:not(.login-intro) h1 { margin-top: 0; }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .metric:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; gap: 24px; }
  .sidebar { position: static; }
  .profile-nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 0; gap: 0 16px; }
  .profile-nav a { padding-left: 14px; }
  .sidebar-note { display: none; }
  .login-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .person { grid-template-columns: auto minmax(0, 1fr); }
  .logout { grid-column: 1 / -1; }
  .membership-notice { grid-template-columns: 1fr; align-items: start; }
  .data-toolbar { flex-direction: column; align-items: flex-start; gap: 4px; }
  .data-toolbar button { padding: 0; }
  .metrics { grid-template-columns: 1fr; }
  .metric, .metric + .metric { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .cards { grid-template-columns: 1fr; }
  .vbars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .vbar-track { height: 110px; }
  .filters { gap: 12px; }
  .view-heading h2 { font-size: 28px; }
  .subnav { gap: 18px; overflow-x: auto; scrollbar-width: none; }
}

/* ── Раздел «Управление»: Staff Admin и администраторы веток (src/admin-render.js) ───────────────────── */
.sidebar > .sidebar-group { margin: 30px 0 14px; }
.sidebar-level { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.notice-ok { border-left-color: var(--ok); color: var(--ink); }
.notice-wait { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.notice-wait p { margin: 0; max-width: 56ch; }
.admin-metrics .metric { cursor: default; }
.admin-lead { margin: 0; }
.admin-find { padding-bottom: 20px; }
.subnav-wrap { flex-wrap: wrap; gap: 0 24px; }
.group-count { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.badge-live { border-color: var(--brand-2); color: var(--brand-2); }

.team-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.team-row { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) 190px 16px; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: padding-left var(--dur) var(--ease); }
.team-row:hover { padding-left: 6px; }
.team-row > .icon { width: 16px; height: 16px; color: var(--ink-3); transition: color .3s; }
.team-row:hover > .icon { color: var(--brand-2); }
.team-avatar { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.team-avatar-empty { border: 1px solid var(--line-2); }
.team-who { display: grid; gap: 4px; min-width: 0; }
.team-name { overflow: hidden; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.team-rank { font-size: 12px; color: var(--ink-3); }
.team-pt { display: grid; gap: 6px; min-width: 0; }
.team-bar { margin: 0; }
.team-pt-value { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.team-flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.admin-person { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.admin-person .avatar { width: 72px; height: 72px; border-radius: 50%; }
.admin-person h3 { font: 400 clamp(26px, 3vw, 40px)/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.admin-person .meta { margin: 8px 0 0; }
.admin-person .branch-tags { margin-top: 12px; }
.admin-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.admin-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.admin-block { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.admin-block h3 { margin-bottom: 14px; font-size: 16px; letter-spacing: -.02em; }
.admin-form { display: grid; gap: 14px; justify-items: start; }
.admin-form .filter-field { width: 100%; }
.admin-field small { color: var(--ink-3); font-size: 12px; }
.admin-field textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.5; resize: vertical; transition: border-color .3s; }
.admin-field textarea:hover { border-color: var(--ink-3); }
.admin-field textarea:focus { outline: none; border-color: var(--ink); }
.admin-form .button-quiet { min-height: 44px; }
.admin-inline { margin-top: 10px; }
.admin-inline summary { display: inline-flex; cursor: pointer; color: var(--brand-2); font-size: 13px; font-weight: 600; list-style: none; }
.admin-inline summary::-webkit-details-marker { display: none; }
.admin-inline[open] summary { margin-bottom: 12px; color: var(--ink-2); }

/* Заявки — как почта: список слева, выбранная заявка справа (липкая); решения — сразу под шапкой заявки. */
.inbox { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 0 32px; align-items: start; }
.inbox-list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.inbox-item { position: relative; display: grid; gap: 4px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); transition: background .3s, color .3s; }
.inbox-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--brand-2); transform: scaleY(0); transition: transform var(--dur) var(--ease); }
.inbox-item:hover { background: rgba(255, 255, 255, .025); color: var(--ink); }
.inbox-item.is-current { background: rgba(255, 255, 255, .04); color: var(--ink); }
.inbox-item.is-current::before { transform: scaleY(1); }
.inbox-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-3); }
.inbox-kind { font: var(--label); letter-spacing: .12em; text-transform: uppercase; }
.inbox-title, .inbox-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.inbox-sub { font-size: 13px; color: var(--ink-3); }
.inbox-ro { font-size: 11px; color: var(--ink-3); }
.inbox-detail { position: sticky; top: calc(var(--bar) + 16px); display: flex; flex-direction: column; max-height: calc(100vh - var(--bar) - 32px); border-top: 1px solid var(--line); }
.inbox-back { display: none; }
.inbox-head { padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.inbox-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.inbox-pos { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.request-head { display: flex; align-items: center; gap: 16px; }
.request-head .team-avatar { width: 56px; height: 56px; }
.inbox-head h3 { font: 400 clamp(24px, 2.4vw, 34px)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.inbox-head h3 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.inbox-head .row-meta { margin-top: 6px; }
.inbox-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 4px 18px 0; }
.inbox-actions { padding: 14px 0; border-bottom: 1px solid var(--line); }
.inbox-actions:empty { display: none; }
.inbox-actions .notice-wait, .inbox-actions .note { margin: 0; }
.request-facts { grid-template-columns: 1fr; gap: 0; margin: 0; }
.request-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.request-facts dt, .request-answers dt { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.request-facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.request-answers { display: grid; gap: 0; margin: 0; }
.request-answers > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.request-answers dd { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.request-quote { margin: 16px 0 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--brand); color: var(--ink-2); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-body .note { margin: 12px 0 0; }
.tone-muted { color: var(--ink-3); }
.request-actions { display: flex; flex-wrap: wrap; align-items: start; gap: 10px 22px; }
.request-actions .admin-inline { margin-top: 12px; }
.request-actions .admin-inline[open] { flex-basis: 100%; }

/* Выпадающие списки в стиле кабинета (public/app.js): кнопка и список поверх настоящего <select>. */
.select { position: relative; width: 100%; }
.select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.filter-field:has(.select)::after { content: none; }
.select-button { position: relative; display: flex; align-items: center; width: 100%; height: 44px; padding: 0 40px 0 12px; border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink); font-size: 14px; text-align: left; cursor: pointer; transition: border-color .3s; }
.select-button::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform var(--dur) var(--ease), margin-top var(--dur) var(--ease); }
.select.is-open .select-button::after { margin-top: -2px; transform: rotate(225deg); }
.select-button:hover { border-color: var(--ink-3); }
.select-button:focus-visible, .select.is-open .select-button { outline: none; border-color: var(--ink); }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--bg-2); overscroll-behavior: contain; animation: yamiko-in .18s var(--ease) both; }
.select.is-up .select-list { top: auto; bottom: calc(100% + 6px); }
.select-list:focus { outline: none; }
.select-group + .select-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.select-group-label { padding: 10px 10px 6px; font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.select-option { position: relative; display: flex; align-items: center; min-height: 40px; padding: 8px 36px 8px 10px; border-radius: 2px; color: var(--ink-2); font-size: 14px; line-height: 1.35; cursor: pointer; }
.select-option.is-active { background: rgba(255, 255, 255, .07); color: var(--ink); }
.select-option[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.select-option[aria-selected="true"]::after { content: ""; position: absolute; right: 15px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border-right: 2px solid var(--brand-2); border-bottom: 2px solid var(--brand-2); transform: rotate(45deg); }
.select-option[aria-disabled="true"] { opacity: .4; cursor: default; }

.confirm { max-width: 72ch; }
.confirm-facts { display: grid; gap: 0; margin: 0 0 24px; border-top: 1px solid var(--line); }
.confirm-facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.confirm-facts dt { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.confirm-facts dd { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.confirm-effect { font-size: 15px; }
.confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (max-width: 900px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-detail { position: static; display: none; max-height: none; }
  .inbox.is-open .inbox-detail { display: flex; }
  .inbox.is-open .inbox-list { display: none; }
  .inbox-back { display: inline-flex; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .inbox-body { overflow: visible; }
  .admin-blocks { grid-template-columns: 1fr; }
  .sidebar > .sidebar-group { margin-top: 22px; }
}
@media (max-width: 640px) {
  .team-row { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 6px 14px; }
  .team-pt, .team-flags { grid-column: 2 / -1; justify-content: flex-start; }
  .team-row > .icon { grid-row: 1; grid-column: 3; }
  .confirm-facts > div, .request-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-metrics .metric, .admin-metrics .metric + .metric { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .admin-metrics .metric:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .admin-metrics .metric:nth-child(n + 3) { border-bottom: 0; }
}

/* YAMIKO SHARED BRAND START — generated by Server/web-shell/sync-style.cjs */
/* Canonical Yamiko shell. Update here, then run `node Server/web-shell/sync-style.cjs`.
   Всё лежит в слое `yamiko`: стили конкретного сайта (без слоя) побеждают его независимо от порядка в файле.
   Два блока «Общее для сайтов Yamiko» сверяют тесты сайтов — здесь их единственный источник. */
@layer yamiko {

/* ═══ Общее для сайтов Yamiko: шрифты и цвета ═══
   Одинаково на всех сайтах (docs/WEB.md). Шрифты лежат в public/fonts каждого сайта (nginx кеширует их на год).
   Manrope © Mikhail Sharanda, Marck Script © Denis Masharov & Marck Fogel, PT Serif © ParaType — все SIL OFL, public/licenses.
   Три голоса: гротеск Manrope — имя, цифры и интерфейс; антиква PT Serif — большие высказывания; рукописный Marck Script — акцент. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope-variable.woff2') format('woff2')}
@font-face{font-family:"Marck Script";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/marck-script.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ptserif-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ptserif-400-latin.woff2') format('woff2');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:'PT Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/ptserif-400-italic-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/ptserif-400-italic-latin.woff2') format('woff2');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:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ptserif-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ptserif-700-latin.woff2') format('woff2');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}

:root{
  color-scheme:dark;
  --sans:Manrope,"Helvetica Neue",Arial,system-ui,sans-serif;
  --script:"Marck Script","Segoe Script","Brush Script MT",cursive;
  --display:"PT Serif",Georgia,"Times New Roman",serif;
  --serif:var(--display);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --bg:#08080a;
  --bg-2:#0e0e11;
  --bg-3:#141418;
  --paper:var(--bg);--canvas:var(--bg);
  --surface:var(--bg-2);--surface-2:var(--bg-3);--surface-raised:var(--bg-3);

  --ink:#f5f5f7;
  --ink-2:#a7a7b0;
  --ink-3:#6c6c76;
  --ink-soft:var(--ink-2);--muted:var(--ink-3);

  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.2);
  --rule:var(--line);--border:var(--line);

  --brand:#7c73ce;
  --brand-2:#a99cff;
  --brand-ink:#0b0a14;
  --purple:var(--brand);--purple-bright:var(--brand-2);--accent:var(--brand-2);--primary:var(--brand-2);--primary-soft:rgba(124,115,206,.14);--cyan:var(--brand-2);--tint:var(--primary-soft);

  --ok:#5fd39a;--warn:#f0c058;--bad:#ff6b6b;--info:var(--brand-2);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.55s;

  --gutter:clamp(18px,4.2vw,56px);
  --max:1480px;
  --bar:60px;
  --label:600 11px/1.4 var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 24px)}
body{
  margin:0;min-width:320px;
  background:var(--bg);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--brand);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:4px;border-radius:2px}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{margin:0}

/* Рукописный акцент: одно-два слова на экран, строчными, фирменным цветом. */
.script{font-family:var(--script);font-weight:400;font-style:normal;letter-spacing:0;text-transform:none;font-feature-settings:normal}
/* Антиква для высказываний: обычное начертание, крупно, плотно. */
.display{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:.98}
/* Мазок кисти под словом: форма — public/brush.svg как маска, цвет — любой. */
.brush{position:relative;isolation:isolate;display:inline-block;padding:.02em .16em}
.brush::before{content:"";position:absolute;inset:-.06em -.2em;z-index:-1;background:var(--brand);-webkit-mask:url('/brush.svg') center/100% 100% no-repeat;mask:url('/brush.svg') center/100% 100% no-repeat}
mark.brush{background:transparent;color:inherit}

/* Плёночное зерно поверх страницы: едва заметное, не перехватывает курсор, без движения — неподвижное. */
body::after{content:"";position:fixed;inset:-50%;z-index:999;pointer-events:none;background:url('/grain.svg') repeat;background-size:240px 240px;opacity:.07;mix-blend-mode:soft-light;animation:yamiko-grain 1.4s steps(5) infinite}
@keyframes yamiko-grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,2%)}100%{transform:translate(0,0)}}
@media print{body::after{display:none}}

/* Подписи-метки: «01 / ПРОДУКТЫ», «YAMIKO · 2024» */
.eyebrow,.label{font:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--bg);font-weight:600}
.skip:focus{top:12px}
.sr,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

.icon{width:18px;height:18px;flex:none;transition:transform var(--dur) var(--ease)}
.shell-arrow{display:inline-block;width:16px;height:16px;flex:none;vertical-align:middle;transition:transform var(--dur) var(--ease)}

/* Ссылка-действие: текст + стрелка, подчёркивание рисуется при наведении. */
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15px;color:var(--ink);position:relative;width:max-content}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur) var(--ease)}
.text-link:hover::after{transform:scaleX(1);transform-origin:left}
.text-link:hover .shell-arrow,.text-link:hover .icon{transform:translateX(4px)}

/* Кнопки: главное действие — мазок фирменного цвета, второе — тонкий контур. */
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border:0;border-radius:0;background:none;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.button::before{content:"";position:absolute;inset:-5px -12px;z-index:-1;background:var(--brand);-webkit-mask:url('/brush.svg') center/100% 100% no-repeat;mask:url('/brush.svg') center/100% 100% no-repeat;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.button:hover{color:var(--brand-ink)}
.button:hover::before{background:var(--brand-2);transform:scale(1.04) rotate(-1.2deg)}
.button:active{transform:scale(.98)}
.button-quiet{border:1px solid var(--line-2);color:var(--ink);transition:border-color var(--dur) var(--ease)}
.button-quiet::before{display:none}
.button-quiet:hover{color:var(--ink);border-color:var(--ink)}

/* Появление при прокрутке — только в браузерах с анимациями по прокрутке; без них всё видно сразу. */
@supports (animation-timeline: view()){
  .reveal{animation:yamiko-rise linear both;animation-timeline:view();animation-range:entry 0% entry 36%}
  .brand-footer::after{animation:yamiko-footer-rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@keyframes yamiko-footer-rise{from{transform:translateY(42%)}to{transform:none}}
@keyframes yamiko-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes yamiko-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes yamiko-spin{to{transform:rotate(360deg)}}

/* Переход между страницами одного сайта: шапка и подвал остаются, содержимое сменяется мягко.
   Работает в браузерах с cross-document view transitions; остальные открывают страницу как обычно. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .topbar{view-transition-name:yamiko-topbar}
  .brand-footer{view-transition-name:yamiko-footer}
  ::view-transition-old(root){animation:yamiko-page-out .32s var(--ease-io) both}
  ::view-transition-new(root){animation:yamiko-page-in .6s var(--ease) both}
  ::view-transition-group(yamiko-topbar),::view-transition-group(yamiko-footer){animation-duration:0s}
}
@keyframes yamiko-page-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes yamiko-page-in{from{opacity:0;transform:translateY(18px)}}

/* Заглушка «сайт запускается» */
.starting{min-height:100svh;display:grid;place-items:center;padding:var(--gutter);text-align:center;color:var(--ink-2)}
.starting img{margin:0 auto 20px}
.starting p{max-width:36ch;margin:6px auto 0}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ═══ конец общего ═══ */

/* ═══ Общее для сайтов Yamiko: шапка и подвал ═══
   Разметка — Server/web-shell/index.js и YamikoStaff/components/SiteSections.tsx, данные — YamikoStaff/content/shell.json. */
.topbar{position:sticky;top:0;z-index:50;height:var(--bar);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px)}
.topbar-inner{max-width:var(--max);height:100%;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;height:100%;color:var(--ink)}
.brand img{width:22px;height:22px;transition:transform 1.4s var(--ease)}
.brand:hover img{transform:rotate(72deg)}
.brand-name{font:700 15px/1 var(--sans);letter-spacing:-.02em}

/* Разделы: группы, каждая раскрывается панелью под шапкой. Новые пункты — в shell.json, шапка не растёт. */
.site-nav{display:flex;align-items:center;justify-content:center;gap:2px;height:100%;min-width:0}
.nav-groups{display:flex;align-items:center;gap:2px;height:100%;margin:0;padding:0;list-style:none}
.nav-groups>li{height:100%}
.nav-trigger{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px;height:var(--bar);padding:0 14px;border:0;background:none;font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:color .3s}
.nav-trigger::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:28px;z-index:-1;background:var(--brand);-webkit-mask:url('/brush.svg') center/100% 100% no-repeat;mask:url('/brush.svg') center/100% 100% no-repeat;opacity:0;transform:translateY(-50%) scaleX(.6);transform-origin:left center;transition:transform var(--dur) var(--ease),opacity .3s}
.nav-trigger:hover,.nav-trigger[data-current]{color:var(--ink)}
.nav-trigger:hover::before{opacity:.5;transform:translateY(-50%) scaleX(1)}
.nav-trigger[data-current]::before{opacity:1;transform:translateY(-50%) scaleX(1)}
.nav-chevron{width:9px;height:9px;flex:none;transition:transform var(--dur) var(--ease)}
.nav-trigger:has(+:popover-open){color:var(--ink)}
.nav-trigger:has(+:popover-open)::before{opacity:.75;transform:translateY(-50%) scaleX(1)}
.nav-trigger:has(+:popover-open) .nav-chevron{transform:rotate(180deg)}
.account-link{display:inline-flex;align-items:center;height:32px;margin-left:10px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.account-link:hover,.account-link[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Панель группы: верхний слой (popover), на всю ширину под шапкой; страница под ней приглушается. */
.nav-panel{display:none;position:fixed;inset:var(--bar) 0 auto;width:auto;max-width:none;height:auto;max-height:calc(100svh - var(--bar));margin:0;padding:0;overflow:auto;border:0;border-bottom:1px solid var(--line-2);background:color-mix(in srgb,var(--bg-2) 95%,transparent);-webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px);color:var(--ink);box-shadow:0 40px 80px -24px rgba(0,0,0,.7);opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .5s var(--ease),overlay .5s allow-discrete,display .5s allow-discrete}
.nav-panel:popover-open{display:block;opacity:1;transform:none}
@starting-style{.nav-panel:popover-open{opacity:0;transform:translateY(-10px)}}
.nav-panel::backdrop{top:60px;background:rgba(4,4,6,.5);opacity:0;transition:opacity .3s,overlay .3s allow-discrete,display .3s allow-discrete}
.nav-panel:popover-open::backdrop{opacity:1}
@starting-style{.nav-panel:popover-open::backdrop{opacity:0}}
.nav-panel-inner{max-width:var(--max);margin:0 auto;padding:36px var(--gutter) 44px;display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2.6fr);gap:32px clamp(32px,5vw,96px);align-items:start}
.nav-panel-intro{display:grid;gap:14px}
.nav-panel-title{font:400 clamp(26px,2.3vw,36px)/1.08 var(--display);letter-spacing:-.025em;color:var(--ink);max-width:13ch;text-wrap:balance}
.nav-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 32px}
.nav-items a{position:relative;display:grid;gap:8px;padding:20px 0 22px;border-top:1px solid var(--line);color:var(--ink)}
.nav-items a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--brand-2);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.nav-items a:hover::before,.nav-items a:focus-visible::before,.nav-items a[aria-current]::before{transform:scaleX(1)}
.nav-item-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 18px/1.2 var(--sans);letter-spacing:-.02em;transition:color .3s}
.nav-item-label .shell-arrow{color:var(--ink-3);transition:transform var(--dur) var(--ease),color .3s}
.nav-items a:hover .nav-item-label,.nav-items a[aria-current] .nav-item-label{color:var(--brand-2)}
.nav-items a:hover .shell-arrow{color:var(--brand-2);transform:translateX(4px)}
.nav-items a:hover .shell-arrow-out{transform:translate(3px,-3px)}
.nav-item-text{font-size:14px;line-height:1.5;color:var(--ink-3);max-width:34ch}
.nav-panel:popover-open .nav-items li{animation:yamiko-in .6s var(--ease) both}
.nav-panel:popover-open .nav-items li:nth-child(2){animation-delay:.05s}
.nav-panel:popover-open .nav-items li:nth-child(3){animation-delay:.1s}
.nav-panel:popover-open .nav-items li:nth-child(4){animation-delay:.15s}
.nav-panel:popover-open .nav-items li:nth-child(n+5){animation-delay:.2s}

.languages{display:flex;align-items:center;gap:2px}
.languages a{display:inline-flex;align-items:center;height:32px;padding:0 8px;font:600 12px/1 var(--sans);letter-spacing:.06em;color:var(--ink-3);transition:color .3s}
.languages a:hover{color:var(--ink)}
.languages a[aria-current=true]{color:var(--ink)}

/* Меню на телефоне (и там, где нет popover): все разделы на весь экран. Без скриптов — это details. */
.nav-menu{display:none}
.nav-menu-button{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 2px 0 10px;list-style:none;cursor:pointer;font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);user-select:none;-webkit-tap-highlight-color:transparent}
.nav-menu-button::-webkit-details-marker{display:none}
.nav-menu-icon{position:relative;width:18px;height:10px;flex:none}
.nav-menu-icon::before,.nav-menu-icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.nav-menu-icon::before{top:0}
.nav-menu-icon::after{top:8.5px}
.nav-menu[open] .nav-menu-icon::before{top:4.25px;transform:rotate(45deg)}
.nav-menu[open] .nav-menu-icon::after{top:4.25px;transform:rotate(-45deg)}
.nav-menu-close,.nav-menu[open] .nav-menu-open{display:none}
.nav-menu[open] .nav-menu-close{display:inline}
.nav-sheet{position:fixed;inset:var(--bar) 0 0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-top:1px solid var(--line)}
.nav-menu[open] .nav-sheet{animation:yamiko-sheet-in .5s var(--ease) both}
@keyframes yamiko-sheet-in{from{opacity:0;transform:translateY(-12px)}}
.nav-sheet-inner{max-width:var(--max);margin:0 auto;padding:8px var(--gutter) calc(48px + env(safe-area-inset-bottom))}
.nav-sheet-group{padding:26px 0 4px}
.nav-sheet-group .eyebrow{margin-bottom:8px}
.nav-sheet .nav-items{grid-template-columns:1fr;gap:0}
.nav-sheet .nav-items a{gap:6px;padding:16px 0 18px}
.nav-sheet .nav-item-label{font:400 26px/1.1 var(--display);letter-spacing:-.02em}
.nav-menu[open] .nav-sheet-group{animation:yamiko-in .6s var(--ease) both}
.nav-menu[open] .nav-sheet-group:nth-child(2){animation-delay:.06s}
.nav-menu[open] .nav-sheet-group:nth-child(3){animation-delay:.12s}
.nav-menu[open] .nav-sheet-group:nth-child(n+4){animation-delay:.18s}
.nav-sheet-links{padding:30px 0 0}
.nav-sheet-links .account-link{height:46px;margin:0;padding:0 22px}
html:has(.nav-menu[open]){overflow:hidden}
/* С фильтром шапка стала бы рамкой для fixed-меню: пока меню открыто, фон шапки сплошной. */
.topbar:has(.nav-menu[open]){background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:1020px){
  .topbar-inner{grid-template-columns:1fr auto auto;gap:12px}
  .site-nav{display:none}
  .nav-menu{display:block}
}
@supports not selector(:popover-open){
  .topbar-inner{grid-template-columns:1fr auto auto;gap:12px}
  .site-nav{display:none}
  .nav-menu{display:block}
}
@media(max-width:380px){
  .nav-menu-open,.nav-menu[open] .nav-menu-close{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Подвал: контакт слева, разделы справа, строка ссылок, подпись и большое имя в самом низу. */
.footer,.brand-footer{position:relative;margin:0;padding:0 var(--gutter) 0;border-top:1px solid var(--line);background:var(--bg);color:var(--ink-2);overflow:hidden}
.brand-footer .footer-contact{max-width:var(--max);margin:0 auto;padding:72px 0 56px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.brand-footer .footer-contact .eyebrow{margin-bottom:18px}
.brand-footer .footer-contact p:not(.eyebrow){font:400 clamp(26px,3vw,42px)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink);max-width:22ch;text-wrap:balance}
.brand-footer .footer-contact .text-link{justify-self:end;font-size:16px}
.brand-footer .resources{max-width:var(--max);margin:0 auto;padding:0;border-top:1px solid var(--line)}
.brand-footer .resources h2{padding:22px 0 0;font:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.brand-footer .resources ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.brand-footer .resources li{padding:24px 0 28px;border-bottom:1px solid var(--line)}
.brand-footer .resources a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);transition:color .3s}
.brand-footer .resources a:hover{color:var(--brand-2)}
.brand-footer .resources .shell-arrow{width:18px;height:18px;transform:rotate(-45deg);color:var(--ink-3)}
.brand-footer .resources a:hover .shell-arrow{transform:rotate(-45deg) translateX(4px);color:var(--brand-2)}
.brand-footer .resources p{margin:8px 0 0;font-size:14px;color:var(--ink-3)}
.brand-footer .footer-site-nav{max-width:var(--max);margin:0 auto;padding:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 28px}
.brand-footer .footer-site-nav a{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .3s}
.brand-footer .footer-site-nav a:hover{color:var(--ink)}
.brand-footer .footer-inner{max-width:var(--max);margin:0 auto;padding:28px 0 32px;display:grid;gap:10px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.brand-footer .footer-inner p{margin:0;max-width:72ch}
.brand-footer .footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:8px}
.brand-footer .footer-links a{color:var(--ink-3);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.brand-footer .footer-links a:hover{color:var(--ink);text-decoration-color:currentColor}
.brand-footer .site-footnote{color:var(--ink-3)}
/* Подпись бренда: огромное имя, срезанное краем страницы. */
.brand-footer::after{content:"Yamiko";display:block;max-width:var(--max);margin:0 auto;height:.62em;overflow:hidden;font:800 clamp(96px,19vw,300px)/.8 var(--sans);letter-spacing:-.06em;color:var(--bg-3);pointer-events:none;user-select:none}

@media(max-width:900px){
  .brand-footer .footer-contact{grid-template-columns:1fr;gap:20px;padding:56px 0 40px}
  .brand-footer .footer-contact .text-link{justify-self:start}
  .brand-footer .resources ul{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
  :root{--bar:52px}
  .brand-footer::after{height:.7em}
}
@media print{.topbar,.brand-footer{display:none!important}}
/* ═══ конец общего ═══ */

}
/* YAMIKO SHARED BRAND END */