/* Образец по analysis/design-base.md. Цвета — только §1. Внешних запросов нет, шрифты — brand/fonts/ */
@font-face{font-family:"AeonikPro";src:url("brand/fonts/aeonikpro-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"AeonikPro";src:url("brand/fonts/aeonikpro-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"AeonikPro";src:url("brand/fonts/aeonikpro-semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"AeonikPro";src:url("brand/fonts/aeonikpro-bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --brand:#7B37F2; --brand-hover:#B78FFD; --brand-soft:#C76BFC; --brand-on:#FAF7FE;
  --ink:#120F18; --ink-muted:#999799; --surface:#FFFFFF; --bg:#F3F1EE; --bg-2:#E8E6E3;
  --line:#DCDAD8; --line-strong:#BDBBBB; --danger:#E0592E; --dark:#202020;
  --brand-tint:#F1EAFE; --ok:#2E7650; --ok-soft:#E4F0E8; --warn:#8A5A00; --warn-soft:#F8EDD6;
  --danger-ink:#B23F1A; --danger-soft:#FBE7DF;
  --f-ui:"AeonikPro",Inter,system-ui,sans-serif;
  --r-card:24px; --r-ctl:12px; --r-pill:9999px; --h-ctl:40px; --h-row:44px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--f-ui)}
button,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-weight:500;text-align:right;white-space:nowrap}
.muted{color:var(--ink-muted)}

header{height:64px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 32px}
header img{width:32px;height:32px}
header .name{font-size:16px;font-weight:500}
header .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--bg-2);font-size:12px;font-weight:500}
.select{height:var(--h-ctl);border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);padding:0 14px;display:inline-flex;align-items:center;gap:8px}

main{max-width:1200px;margin:0 auto;padding:32px}
.over{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.head{display:flex;align-items:flex-end;gap:16px;margin:4px 0 24px}
h1{font-size:28px;font-weight:500;margin:0}
.btn{height:var(--h-ctl);padding:0 20px;border:0;border-radius:var(--r-pill);font-weight:500;cursor:pointer}
.btn.primary{background:var(--brand);color:var(--surface)} .btn.primary:hover{background:var(--brand-hover)}
.btn.secondary{background:var(--bg-2);color:var(--ink)}
.btn:disabled{background:var(--line-strong);color:var(--surface);cursor:not-allowed}
.head .btn{margin-left:auto}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:var(--surface);border-radius:var(--r-card);padding:20px 24px;border:2px solid transparent}
.kpi .l{color:var(--ink-muted)} .kpi .v{font-size:35px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .v small{font-size:14px;font-weight:400;color:var(--ink-muted);margin-left:6px}
.kpi.active{background:var(--brand-tint);border-color:var(--brand)}

.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{height:var(--h-ctl);padding:0 18px;border-radius:var(--r-pill);background:var(--bg-2);border:0;cursor:pointer}
.tab[aria-selected="true"]{background:var(--brand);color:var(--surface)}

.card{background:var(--surface);border-radius:var(--r-card);padding:24px;margin-bottom:24px}
.card-h{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.card-h h2{font-size:20px;font-weight:500;margin:0}
.card-h .select{margin-left:auto}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th{font-size:12px;font-weight:500;color:var(--ink-muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th.num{text-align:right}
td{height:var(--h-row);padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--bg)}
td .sub{color:var(--ink-muted)}
td.act{text-align:right;width:1%}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;white-space:nowrap}
.b-pending{background:var(--warn-soft);color:var(--warn)}
.b-approved{background:var(--ok-soft);color:var(--ok)}
.b-returned{background:var(--bg-2);color:var(--ink)}
.b-rejected{background:var(--danger-soft);color:var(--danger-ink)}
.note{color:var(--ink-muted);margin:12px 0 0}


/* Подписи остаются контрастными на белых карточках и узких экранах. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
header{height:auto;min-height:64px;flex-wrap:wrap;padding:12px 32px}
.identity{display:flex;align-items:center;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.select{max-width:100%;min-width:0;font-weight:400}
.pm-controls{display:flex;gap:16px;justify-content:flex-end;width:100%}
.pm-controls .field{min-width:0}
.pm-controls select{max-width:360px}
.demo{height:auto;min-height:28px;white-space:normal}
.over{color:var(--ink);font-size:14px}
.kpi .l{color:var(--ink)}
.kpi{min-width:0}
.kpi .v small{display:block;margin:4px 0 0}
.kpi-note{margin:-12px 0 24px;color:var(--ink)}
.tabs{flex-wrap:wrap}
.scope{margin:-8px 0 24px}
.empty-content{text-align:center;padding:32px 16px}
.empty-content img{display:block;margin:0 auto 16px}
h3{font-size:20px;font-weight:500;margin:0 0 8px}
.empty-content p{margin:0}
.card-h{justify-content:space-between;flex-wrap:wrap}
.card-h .chip{height:24px}
.statuses h2{font-size:20px;font-weight:500;margin:0 0 16px}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.glossary summary{font-size:20px;font-weight:500;cursor:pointer}
.glossary table{min-width:700px}
.glossary th{color:var(--ink)}
.glossary tbody th{font-size:14px;font-weight:500}
.prototype-note{color:var(--ink)}
@media(max-width:1000px){header .right{flex-wrap:wrap;justify-content:flex-end}.demo{max-width:250px}}
@media(max-width:760px){
 header{padding:16px;gap:16px}
 header .right{margin-left:0;width:100%;justify-content:flex-start;gap:12px}
 .demo{max-width:none;width:100%;justify-content:center}
 header .right .field{width:100%}
 .pm-controls{flex-direction:column;gap:12px}
 .pm-controls .select{width:100%;max-width:none}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .kpi{padding:16px}
 main{padding:24px 16px}
 h1{font-size:28px}
 .card{padding:20px}
 .tabs{gap:8px}
 .tab{padding:0 16px;text-align:left}
 .empty-content{padding:24px 0}
}