/* Панель «Закупка» — светлое стекло (утверждённый стиль «Машина 3D · Стекло»). */
:root {
  --bg: #EAF2FB; --bg2: #E6F0FB; --ink: #16233A; --ink2: #41506A; --muted: #5B6B82; --faint: #8A97AA;
  --accent: #1F4E8C; --accent2: #2A63AE; --sky: #3EA6D8; --ok: #22B8C8; --ok-ink: #0F7A87;
  --gold: #C39A4C; --gold-ink: #8C6620; --bad: #E0726A; --bad-ink: #B5483E; --line: rgba(31,78,140,.10);
  --glass: linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.50) 100%);
  --display: Manrope, system-ui, sans-serif; --body: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box }
body { margin: 0; background: linear-gradient(180deg, #E6F0FB 0%, #EEF4FA 55%, #E9EEFA 100%); color: var(--ink);
  font: 400 15px/1.5 var(--body); min-height: 100vh; position: relative; overflow-x: hidden }
a { color: var(--accent) } a:hover { color: #1A427A }
.blob { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0 }
.wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px;
  padding-block: 20px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 36px rgba(31,78,140,.11); border-radius: 22px }
.over { font: 600 11px/16px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.cap { font: 500 12px/17px var(--body); color: var(--muted) }
h1 { margin: 0; font: 800 clamp(28px, 3vw, 38px)/1.08 var(--display); letter-spacing: -.02em; text-wrap: balance }
h2 { margin: 0; font: 700 20px/1.2 var(--display) }
.num { font-family: var(--display); font-variant-numeric: tabular-nums }

/* шапка */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: 20px }
.brand { display: flex; align-items: center; gap: 10px; font: 800 17px var(--display); text-decoration: none; color: var(--ink) }
.logo { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; font: 800 16px var(--display);
  background: linear-gradient(180deg, var(--accent2), var(--accent)) }
.links { display: flex; gap: 4px; flex-wrap: wrap }
.lnk { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 12px; font: 600 14px var(--body); color: var(--ink2); text-decoration: none }
.lnk:hover { background: rgba(255,255,255,.7); color: var(--ink) }
.lnk.on { background: #fff; color: var(--accent); box-shadow: 0 4px 12px rgba(31,78,140,.12) }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.85); font: 500 13px var(--body); color: var(--ink2) }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none }
.d-ok { background: var(--ok) } .d-gold { background: var(--gold) } .d-bad { background: var(--bad) } .d-idle { background: #A9B8CC } .d-sky { background: var(--sky) }

/* кнопки и поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 13px; cursor: pointer;
  font: 700 14px var(--display); color: #fff; background: linear-gradient(180deg, var(--accent2), var(--accent)); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px rgba(31,78,140,.24) }
.btn:hover { color: #fff; filter: brightness(1.06) }
.btn.go { background: linear-gradient(180deg, #22B8C8, #159AA9); box-shadow: 0 8px 18px rgba(21,154,169,.28) }
.btn.stop { background: linear-gradient(180deg, #E8857E, #D2645B) }
.btn.sec { color: var(--accent); background: rgba(255,255,255,.8); border: 1px solid rgba(31,78,140,.18); box-shadow: none }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px }
.btn:focus-visible, .inp:focus-visible, .lnk:focus-visible { outline: 3px solid rgba(62,166,216,.55); outline-offset: 2px }
.inp { height: 44px; width: 100%; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(31,78,140,.16); background: rgba(255,255,255,.8);
  font: 500 15px var(--body); color: var(--ink); outline: none }
.inp:focus { border-color: var(--sky); background: #fff; box-shadow: 0 0 0 4px rgba(62,166,216,.18) }
.inp.sm { height: 36px; padding: 0 8px; font: 600 14px var(--display); text-align: right; font-variant-numeric: tabular-nums }
.inp.miss { border-color: rgba(195,154,76,.6); background: rgba(195,154,76,.08) }
label.f { display: flex; flex-direction: column; gap: 6px; font: 600 13px var(--body) }

/* плашки */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12px var(--body); white-space: nowrap }
.c-gold { background: rgba(195,154,76,.14); color: var(--gold-ink) } .c-ok { background: rgba(34,184,200,.12); color: var(--ok-ink) }
.c-idle { background: rgba(169,184,204,.20); color: var(--muted) } .c-bad { background: rgba(224,114,106,.13); color: var(--bad-ink) }
.c-sky { background: rgba(62,166,216,.14); color: var(--accent) }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font: 500 14px/1.45 var(--body) }
.note.gold { background: rgba(195,154,76,.12); border: 1px solid rgba(195,154,76,.25); color: #5C4718 }
.note.bad { background: rgba(224,114,106,.12); border: 1px solid rgba(224,114,106,.25); color: #7A2E27 }
.note.ok { background: rgba(34,184,200,.10); border: 1px solid rgba(34,184,200,.25); color: #0B5E68 }
.note .dot { margin-top: 6px }

/* сводка */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85) }
.kpi b { font: 800 26px/1.1 var(--display); font-variant-numeric: tabular-nums }
.kpi.gold { background: rgba(195,154,76,.12) } .kpi.gold b { color: var(--gold-ink) }

/* вкладки и таблицы */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); flex-wrap: wrap }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px; font: 600 13px var(--body); color: var(--ink2); text-decoration: none }
.tab span { font: 700 12px var(--display); color: var(--faint) }
.tab.on { background: #fff; color: var(--accent); box-shadow: 0 4px 12px rgba(31,78,140,.12) } .tab.on span { color: var(--accent) }
.tbl-box { overflow-x: auto; border-radius: 22px }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/1.4 var(--body) }
.t th { text-align: left; padding: 12px 14px; font: 600 11px/16px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap }
.t td { padding: 12px 14px; border-bottom: 1px solid rgba(31,78,140,.07); vertical-align: middle }
.t tr:last-child td { border-bottom: 0 }
.t tbody tr:hover { background: rgba(255,255,255,.5) }
.t .r { text-align: right } .t .nm { font: 700 15px/1.3 var(--display) }
.t td .chip { white-space: normal; height: auto; min-height: 26px; padding: 4px 10px; line-height: 1.3 }
.prog { height: 6px; border-radius: 6px; background: rgba(31,78,140,.10); overflow: hidden; min-width: 80px }
.prog > div { height: 6px; background: linear-gradient(90deg, var(--sky), var(--ok)) }
.empty { padding: 44px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center }
.feed { display: flex; flex-direction: column }
.feed div { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.7); font-size: 13px }
.grid2 { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 18px; align-items: start }
.card { padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px }

@media (max-width: 960px) { .grid2 { grid-template-columns: minmax(0,1fr) } .kpis { grid-template-columns: repeat(2, minmax(0,1fr)) } }