/* ---------- Админ-панель: оболочка ---------- */
body.adm-on #header, body.adm-on #footer, body.adm-on #chat-dock { display: none !important; }
body.adm-on { background: #f5f6f8; }
.ad { min-height: 100vh; }
.ad-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 26px; height: 64px; padding: 0 22px; background: #fff; border-bottom: 1px solid #eceef2; }
.ad-logo { display: flex; align-items: center; gap: 18px; }
.ad-logo img { height: 46px; width: auto; }
.ad-logo span { padding-left: 16px; border-left: 1px solid #e3e6eb; font: 500 19px var(--ff); letter-spacing: 1px; color: #9aa1ab; }
.ad-sys { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #5d6472; }
.ad-sys i { width: 8px; height: 8px; border-radius: 50%; background: #22a55a; }
.ad-bell { position: relative; display: grid; color: #2b3440; }
.ad-bell em { position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.ad-me { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.ad-me .av { border-radius: 50%; overflow: hidden; }
.ad-me b { display: block; font: 600 14px var(--ff); }
.ad-me em, .ad-who em { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 8px; border-radius: 4px; background: #e5484d; color: #fff; font: 500 11.5px var(--ff); font-style: normal; }
.ad-me > svg { color: #5d6472; }
.ad-body { display: grid; grid-template-columns: 232px 1fr; }
.ad-side { display: flex; flex-direction: column; padding: 18px 12px 18px 10px; background: #fff; border-right: 1px solid #eceef2; }
.ad-side nav { position: sticky; top: 76px; }
.ad-body { min-height: calc(125vh - 80px); }
.ad-who { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.ad-who .av { border-radius: 50%; overflow: hidden; flex: none; }
.ad-who b { display: block; font: 700 14px var(--ff); color: var(--ink); }
.ad-side nav { display: flex; flex-direction: column; gap: 2px; }
.ad-side nav a { position: relative; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px; border-radius: 7px; font-size: 14.5px; color: #3c424d; }
.ad-side nav a svg { color: #3c424d; flex: none; }
.ad-side nav a:hover { background: #f6f7f9; color: var(--ink); }
.ad-side nav a.on { background: #fff1e8; color: var(--o); font-weight: 600; }
.ad-side nav a.on svg { color: var(--o); }
.ad-side nav a.on::before { content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--o); }
.ad-side nav a em { margin-left: auto; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--o); color: #fff; font: 600 12px var(--ff); font-style: normal; }
.ad-ver { margin-top: auto; padding: 24px 8px 0; position: sticky; bottom: 10px; font-size: 12.5px; color: #6b7280; }
.ad-ver b { display: block; font-weight: 500; color: #3c424d; }
.ad-ver span { display: block; margin-top: 4px; }
.ad-ver a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--o); }
.ad-main { min-width: 0; padding: 22px 22px 40px; }
.ad-legacy .admin { display: block; padding: 0; }
.ad-legacy .admin-nav { display: none; }
.ad-legacy .admin-main { padding: 0; max-width: none; }
.ad-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.ad-head h1 { margin: 0; font: 800 30px/1.15 var(--ff); color: var(--ink); }
.ad-head p { margin: 6px 0 0; font-size: 15px; color: #6b7280; }
.ad-hr { display: flex; align-items: center; gap: 10px; }
.ad-bc { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #6b7280; }
.ad-bc a { color: #6b7280; }
.ad-bc span { color: var(--ink); }
.ad-c { background: #fff; border: 1px solid #eceef2; border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 30, 50, .04); }
.ad-ch { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ad-ch h3 { margin: 0; font: 700 16.5px var(--ff); color: var(--ink); }
.ad-ch small { display: block; margin-top: 3px; font-size: 13px; color: #6b7280; }
.ad-ch > svg.o, .ad-ch svg.o { color: var(--o); }
.ad-ch > a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; }
.ad-empty { padding: 20px; text-align: center; color: #8b919c; font-size: 14px; }
.ad-period { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border: 1px solid #e3e6eb; border-radius: 8px; background: #fff; font-size: 14.5px; color: var(--ink); }
.ad-period svg { color: #5d6472; }
/* дашборд */
.ad-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ad-k { padding: 16px 16px 14px; background: #fff; border: 1px solid #eceef2; border-radius: 10px; color: var(--ink); }
.ad-k:hover { color: var(--ink); border-color: #dfe3e8; }
.ad-kh { display: flex; align-items: center; gap: 12px; }
.ad-kh b { font: 500 14px/1.2 var(--ff); color: #3c424d; }
.ad-ki { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.ad-ki.g { background: #e8f7ee; color: #22a55a; } .ad-ki.o { background: #fff1e8; color: var(--o); } .ad-ki.b { background: #eaf1fe; color: #2f6fd6; }
.ad-ki.v { background: #f2ebfd; color: #8b3cf0; } .ad-ki.r { background: #fde9e9; color: #e5484d; } .ad-ki.t { background: #e6f6f5; color: #0f9b8e; }
.ad-ki svg { color: inherit; }
.ad-kv { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ad-kv strong { font: 800 30px/1 var(--ff); }
.ad-kv i, .ad-pg i, .au-sts i { display: inline-flex; align-items: center; gap: 2px; font: 600 13.5px var(--ff); font-style: normal; }
.ad-kv i.up, .ad-pg i.up, .au-sts i.up { color: #22a55a; } .ad-kv i.dn { color: #e5484d; }
.rot-up { transform: rotate(-90deg); } .rot-dn { transform: rotate(90deg); }
.ad-k small { display: block; margin-top: 12px; font-size: 13px; color: #6b7280; }
.ad-r2 { display: grid; grid-template-columns: 1.95fr 1fr; gap: 12px; margin-top: 12px; }
.ad-act, .ad-games { padding: 16px 16px 14px; }
.ad-sel { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid #e3e6eb; border-radius: 7px; font-size: 13.5px; }
.ad-sel select { border: 0; appearance: none; background: none; font: 400 13.5px var(--ff); color: var(--ink); padding-right: 16px; cursor: pointer; }
.ad-sel > svg:last-child { position: absolute; right: 10px; pointer-events: none; color: #5d6472; }
.ad-chart { position: relative; }
.ad-line { width: 100%; height: 230px; display: block; }
.ad-line .g line { stroke: #eef0f3; } .ad-line text { font: 400 11px var(--ff); fill: #8b919c; }
.ad-tip { position: absolute; right: 10px; top: 0; padding: 8px 12px; border-radius: 6px; background: #fff; box-shadow: 0 4px 14px rgba(20, 30, 50, .12); font-size: 12px; color: #8b919c; }
.ad-tip b { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 12.5px var(--ff); color: var(--ink); }
.ad-tip b i { width: 7px; height: 7px; border-radius: 50%; background: var(--o); }
.ad-leg { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3c424d; }
.ad-leg i { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; }
.ad-bars { position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 200px; margin: 30px 0 40px 30px; border-bottom: 1px solid #eceef2; }
.ad-bars > span { position: absolute; left: -32px; transform: translateY(50%); font-size: 11px; color: #8b919c; }
.ad-bars > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 70px; height: 100%; }
.ad-bars b { position: relative; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; }
.ad-bars b em { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font: 500 13px var(--ff); font-style: normal; color: var(--ink); }
.ad-bars small { position: absolute; bottom: -34px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3c424d; white-space: nowrap; }
.ad-r3 { display: grid; grid-template-columns: 1.05fr .8fr .78fr; gap: 12px; margin-top: 12px; align-items: start; }
.ad-att, .ad-staff, .ad-reset, .ad-plat { padding: 16px; }
.ad-ai { display: flex; align-items: flex-start; gap: 14px; padding: 10px 4px; color: var(--ink); }
.ad-ai + .ad-ai { border-top: 1px solid #f2f3f6; }
.ad-ai:hover { color: var(--ink); background: #fafbfc; }
.ad-aic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; color: #fff; }
.ad-aic svg { color: #fff; }
.ad-aic.o { background: #f97316; } .ad-aic.r { background: #e5484d; } .ad-aic.b { background: #3b82f6; } .ad-aic.g { background: #8b919c; }
.ad-ai > div { flex: 1; min-width: 0; }
.ad-ai b { display: block; font: 600 13.5px var(--ff); }
.ad-ai p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: #6b7280; }
.ad-ai small { display: block; margin-top: 4px; font-size: 12px; color: #9aa1ab; }
.ad-ai em { flex: none; padding: 3px 10px; border-radius: 6px; font: 500 12px var(--ff); font-style: normal; }
.ad-ai em.r { background: #fde2e2; color: #dc2626; } .ad-ai em.o { background: #ffedd5; color: #ea580c; } .ad-ai em.b { background: #e0ecfd; color: #2563eb; } .ad-ai em.g { background: #eef0f3; color: #6b7280; }
.ad-mid { display: flex; flex-direction: column; gap: 12px; }
.ad-cd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ad-cd div { padding: 12px 6px; border: 1px solid #eceef2; border-radius: 8px; text-align: center; }
.ad-cd b { display: block; font: 800 28px/1 var(--ff); color: var(--o); }
.ad-cd small { display: block; margin-top: 6px; font-size: 13px; color: #6b7280; }
.ad-prev { width: 100%; height: 44px; margin-top: 14px; gap: 10px; font-size: 14.5px; }
.ad-prev svg { color: #fff; }
.ad-note { display: flex; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; background: #f3f5f8; font-size: 12.5px; line-height: 1.45; color: #6b7280; }
.ad-note svg { color: #8b919c; flex: none; }
.ad-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ad-pg > div { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ad-pg svg { color: #5d6472; }
.ad-pg small { display: block; font-size: 12px; color: #6b7280; }
.ad-pg b { display: block; margin-top: 4px; font: 600 16px var(--ff); color: var(--ink); }
.ad-pg i { width: 100%; padding-left: 32px; font-size: 12px !important; }
.ad-dot { width: 10px; height: 10px; border-radius: 50%; background: #22a55a; }
.ad-on { margin-left: auto; font-size: 13px; color: #22a55a; }
.ad-su { display: flex; align-items: center; gap: 12px; padding: 8px 2px; color: var(--ink); }
.ad-su + .ad-su { border-top: 1px solid #f2f3f6; }
.ad-su .av { border-radius: 50%; overflow: hidden; flex: none; }
.ad-su div { flex: 1; min-width: 0; }
.ad-su b { display: block; font: 600 13.5px var(--ff); }
.ad-su em { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px; font: 500 11px var(--ff); font-style: normal; background: #eef0f3; color: #5d6472; }
.ad-su small { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: #9aa1ab; }
.ad-su small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #9aa1ab; }
.ad-su small.on { color: #22a55a; } .ad-su small.on::before { background: #22a55a; border-color: #22a55a; }
.ad-su time { font-size: 11.5px; color: #9aa1ab; white-space: nowrap; }
.ad-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: #2f6fd6; }
.ad-me em.r, .ad-who em.r, .ad-su em.r, .au-role.r { background: #e5484d; color: #fff; }
.ad-me em.o, .ad-who em.o, .ad-su em.o, .au-role.o { background: #fff1e8; color: var(--o); }
.ad-me em.y, .ad-who em.y, .ad-su em.y, .au-role.y { background: #fef3c7; color: #b45309; }
.ad-me em.v, .ad-who em.v, .ad-su em.v, .au-role.v { background: #f2ebfd; color: #7c3aed; }
.ad-me em.b, .ad-who em.b, .ad-su em.b, .au-role.b { background: #e0ecfd; color: #2563eb; }
.ad-me em.t, .ad-who em.t, .ad-su em.t, .au-role.t { background: #e6f6f5; color: #0f766e; }
.ad-me em.k, .ad-who em.k, .ad-su em.k, .au-role.k { background: #e5e7eb; color: #1f2937; }
.ad-pv { display: flex; flex-direction: column; gap: 12px; }
.ad-pvl b { display: block; margin-bottom: 6px; }
.ad-pvl span { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.ad-pvl i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px var(--ff); font-style: normal; color: #fff; background: #a3a9b3; }
.ad-pvl i.c1 { background: #e9a61e; } .ad-pvl i.c3 { background: #b9653a; }
.ad-pvl em { margin-left: auto; font-style: normal; color: #6b7280; font-size: 13px; }
/* пользователи */
.au-wrap { display: grid; grid-template-columns: 1fr; gap: 18px; }
.au-wrap.has-d { grid-template-columns: 1fr 400px; }
.au-l { min-width: 0; }
.au-flt { display: flex; align-items: center; gap: 10px; padding: 12px; }
.au-q { flex: 1.6; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid #e3e6eb; border-radius: 8px; }
.au-q svg { color: #5d6472; }
.au-q input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 14px var(--ff); }
.au-f { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; height: 46px; padding: 0 30px 0 12px; border: 1px solid #e3e6eb; border-radius: 8px; }
.au-f small { font-size: 11.5px; color: #6b7280; }
.au-f select { border: 0; appearance: none; background: none; font: 500 13.5px var(--ff); color: var(--ink); cursor: pointer; width: 100%; }
.au-f > svg { position: absolute; right: 10px; top: 15px; color: #5d6472; pointer-events: none; }
.au-sts { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.au-sts > div { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.au-sts > div > svg { color: #3c424d; flex: none; }
.au-sts > div:last-child > svg { color: #f59e0b; }
.au-sts small { display: block; font-size: 13px; color: #3c424d; }
.au-sts b { font: 700 24px var(--ff); color: var(--ink); margin-right: 8px; }
.au-sts em { display: block; margin-top: 2px; font-size: 12px; font-style: normal; color: #6b7280; background: none !important; }
.au-sts em.b { color: #2f6fd6 !important; }
.au-d { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.au-d.g { background: #22a55a; box-shadow: 0 0 0 6px #e8f7ee; } .au-d.r { background: #e5484d; box-shadow: 0 0 0 6px #fde9e9; }
.au-tb { margin-top: 12px; padding: 14px 12px 12px; }
.au-th { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
.au-th h2 { margin: 0; font: 700 19px var(--ff); }
.au-exp { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid #e3e6eb; border-radius: 7px; background: #fff; cursor: pointer; font: 500 13px var(--ff); color: var(--ink); }
.au-tw { overflow-x: auto; }
.au-tw table { width: 100%; border-collapse: collapse; font-size: 13px; }
.au-tw th { padding: 10px 8px; text-align: left; font-weight: 500; font-size: 12px; color: #6b7280; border-bottom: 1px solid #eceef2; white-space: nowrap; }
.au-tw th[data-sort] { cursor: pointer; }
.au-tw td { padding: 8px; border-bottom: 1px solid #f2f3f6; vertical-align: middle; color: #3c424d; }
.au-tw tr[data-u] { cursor: pointer; }
.au-tw tr[data-u]:hover, .au-tw tr.on { background: #fff8f3; }
.au-tw .av { border-radius: 50%; overflow: hidden; }
.au-tw td b { font-weight: 600; color: var(--ink); }
.au-sid { font-size: 11.5px; color: #8b919c; max-width: 140px; word-break: break-all; }
.au-sid small { display: block; color: #6b7280; }
.au-role { display: inline-block; padding: 3px 8px; border-radius: 5px; background: #eef0f3; color: #5d6472; font-size: 12px; white-space: nowrap; }
.au-ring { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(var(--o) calc(var(--p) * 1%), #eceef2 0); }
.au-ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.au-ring b { position: relative; font: 700 12px var(--ff); color: var(--ink); }
.au-rep { color: #22a55a; font-weight: 600; } .au-rep.n { color: #e5484d; }
.au-w { color: #e5484d; }
.au-dt { font-size: 12px; color: #6b7280; white-space: nowrap; }
.au-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: 12px; white-space: nowrap; }
.au-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.au-st.g { background: #e8f7ee; color: #16a34a; } .au-st.r { background: #fde9e9; color: #dc2626; } .au-st.y { background: #fef3c7; color: #b45309; }
.au-ft { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 2px; font-size: 13px; color: #6b7280; }
.au-ft .pager { display: flex; gap: 6px; }
.au-ft .pg { min-width: 30px; height: 30px; border-radius: 6px; border: 1px solid #e3e6eb; background: #fff; display: grid; place-items: center; cursor: pointer; font: 500 13px var(--ff); color: #3c424d; }
.au-ft .pg.on { background: var(--o); border-color: var(--o); color: #fff; }
.au-d-panel { position: relative; align-self: start; padding: 18px; background: #fff; border: 1px solid #eceef2; border-radius: 10px; }
.aud-x { position: absolute; right: 12px; top: 12px; border: 0; background: none; cursor: pointer; color: #6b7280; }
.aud-h { display: flex; gap: 18px; }
.aud-h > .av { border-radius: 50%; overflow: hidden; flex: none; }
.aud-h small { font-size: 12.5px; color: #6b7280; }
.aud-n { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.aud-n b { font: 700 22px var(--ff); color: var(--ink); }
.aud-h p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: #5d6472; }
.aud-b { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.aud-cr svg { color: #f59e0b; }
.aud-lv { display: flex; align-items: center; gap: 8px; }
.aud-lv small, .aud-rep small { display: block; font-size: 11px; color: #6b7280; }
.aud-lv b, .aud-rep b { font: 600 13px var(--ff); }
.aud-rep b { color: #22a55a; }
.aud-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 12px; border-bottom: 1px solid #eceef2; }
.aud-tabs button { position: relative; padding: 8px 0; border: 0; background: none; cursor: pointer; font: 400 13.5px var(--ff); color: #5d6472; }
.aud-tabs button.on { color: var(--o); font-weight: 600; }
.aud-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--o); }
.aud-box { padding: 14px; border: 1px solid #eceef2; border-radius: 8px; }
.aud-2, .aud-3 { display: grid; gap: 10px; }
.aud-2 { grid-template-columns: 1fr 1fr; padding-bottom: 12px; border-bottom: 1px solid #f2f3f6; }
.aud-3 { grid-template-columns: 1fr 1fr 1fr; padding-top: 12px; }
.aud-2 > div, .aud-3 > div { display: flex; align-items: flex-start; gap: 8px; }
.aud-2 svg, .aud-3 svg { color: #5d6472; flex: none; }
.aud-2 small, .aud-3 small { display: block; font-size: 11.5px; color: #6b7280; }
.aud-2 b, .aud-3 b { display: block; margin-top: 3px; font: 600 13.5px var(--ff); color: var(--ink); }
.aud-3 > div { flex-direction: column; }
.aud-3 > div:last-child { flex-direction: row; }
.aud-3 em { font-style: normal; color: #6b7280; font-weight: 400; }
.aud-on { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #c3c8cf; flex: none; } .aud-on.g { background: #22a55a; }
.aud-list { display: flex; flex-direction: column; border: 1px solid #eceef2; border-radius: 8px; }
.aud-list > a, .aud-list > span { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.aud-list > * + * { border-top: 1px solid #f2f3f6; }
.aud-list small { color: #8b919c; text-align: right; }
.au-d-panel h4 { margin: 20px 0 10px; font: 700 15px var(--ff); color: var(--ink); }
.aud-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aud-acts button { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border: 1px solid #e3e6eb; border-radius: 8px; background: #fff; cursor: pointer; font: 500 13.5px var(--ff); color: #3c424d; text-align: left; }
.aud-acts button svg { flex: none; }
.aud-acts .o { border: 0; background: linear-gradient(180deg, #ff7a2e, #f05206); color: #fff; } .aud-acts .o svg { color: #fff; }
.aud-acts .w { border-color: #fdba74; color: #ea580c; } .aud-acts .w svg { color: #ea580c; }
.aud-acts .r { border-color: #fecaca; background: #fff5f5; color: #dc2626; } .aud-acts .r svg { color: #dc2626; }
.aud-acts .b { border-color: #bfdbfe; background: #f5f9ff; color: #2563eb; } .aud-acts .b svg { color: #2563eb; }
.aud-acts .v { border-color: #ddd6fe; background: #faf7ff; color: #7c3aed; } .aud-acts .v svg { color: #7c3aed; }
.aud-note { position: relative; }
.aud-note textarea { width: 100%; min-height: 64px; padding: 10px 40px 10px 12px; border: 1px solid #e3e6eb; border-radius: 8px; font: 400 13px var(--ff); resize: vertical; box-sizing: border-box; }
.aud-note button { position: absolute; right: 8px; bottom: 10px; border: 0; background: none; cursor: pointer; color: #5d6472; }
.aud-notes p { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: #fffbea; font-size: 13px; }
.aud-notes small { display: block; margin-top: 4px; font-size: 11.5px; color: #8b919c; }
.aud-log > div { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.aud-log span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.aud-log span.r { background: #fde9e9; color: #dc2626; } .aud-log span.g { background: #e8f7ee; color: #16a34a; } .aud-log span.o { background: #fff1e8; color: var(--o); }
.aud-log span.b { background: #e0ecfd; color: #2563eb; } .aud-log span.y { background: #fef3c7; color: #b45309; }
.aud-log span svg { color: inherit; }
.aud-log p { flex: 1; margin: 0; font-size: 13px; color: var(--ink); }
.aud-log small { display: block; color: #8b919c; font-size: 11.5px; }
.aud-log time { font-size: 12px; color: #8b919c; white-space: nowrap; }
/* роли */
.ro-g { display: grid; grid-template-columns: 256px 1fr 320px; gap: 14px; align-items: start; }
.ro-list { padding: 14px 10px; }
.ro-list h3, .ro-mx h3, .ro-side h3 { margin: 0 4px 12px; font: 700 16px var(--ff); color: var(--ink); }
.ro-list button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; margin-bottom: 8px; border: 1px solid #eceef2; border-radius: 8px; background: #fff; cursor: pointer; text-align: left; }
.ro-list button.on { border-color: #e2d6fb; background: #faf7ff; }
.ro-list button.on::before { content: ''; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--o); }
.ro-list b { flex: 1; font: 600 13px/1.25 var(--ff); }
.ro-n { text-align: right; flex: none; min-width: 64px; }
.ro-n b { display: block; font: 600 15px var(--ff); color: var(--ink); }
.ro-n small { font-size: 11px; color: #8b919c; }
.ro-i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; flex: none; color: #fff; }
.ro-i.big { width: 52px; height: 52px; border-radius: 10px; }
.ro-i svg { color: #fff; }
.ro-i.r { background: #e5484d; } .ro-i.o { background: #f97316; } .ro-i.y { background: #f59e0b; } .ro-i.v { background: #8b5cf6; } .ro-i.b { background: #2563eb; } .ro-i.t { background: #0f9b8e; } .ro-i.k { background: #374151; } .ro-i.g { background: #8b919c; }
.ro-list b.r { color: #e5484d; } .ro-list b.o { color: #f97316; } .ro-list b.y { color: #d97706; } .ro-list b.v { color: #7c3aed; } .ro-list b.b { color: #2563eb; } .ro-list b.t { color: #0f766e; } .ro-list b.k { color: #374151; } .ro-list b.g { color: #3c424d; }
.ro-mx { padding: 14px 14px 10px; min-width: 0; }
.ro-mh { display: flex; align-items: center; gap: 10px; }
.ro-mh h3 { margin: 0; }
.ro-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; font: 600 14px var(--ff); background: #f2ebfd; color: #7c3aed; }
.ro-tag svg { color: inherit; }
.ro-sub { margin: 6px 0 12px; font-size: 13px; color: #6b7280; }
.ro-tw { overflow-x: auto; border: 1px solid #eceef2; border-radius: 8px; }
.ro-tw table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ro-tw th { padding: 10px 4px; font-weight: 400; color: #5d6472; border-bottom: 1px solid #eceef2; text-align: center; min-width: 62px; }
.ro-tw th:first-child { text-align: left; padding-left: 12px; font-weight: 500; color: var(--ink); }
.ro-tw th span { display: block; } .ro-tw th small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.2; }
.ro-tw th span.r svg { color: #e5484d; } .ro-tw th span.o svg { color: #f97316; } .ro-tw th span.y svg { color: #f59e0b; } .ro-tw th span.v svg { color: #8b5cf6; } .ro-tw th span.b svg { color: #2563eb; } .ro-tw th span.t svg { color: #0f9b8e; } .ro-tw th span.k svg { color: #374151; } .ro-tw th span.g svg { color: #6b7280; }
.ro-tw td { padding: 8px 4px; border-bottom: 1px solid #f2f3f6; text-align: center; color: #3c424d; }
.ro-tw td:first-child { text-align: left; padding-left: 12px; }
.ro-tw .on { background: #faf7ff; }
.ro-sec td { padding: 9px 12px !important; background: #f6f7f9; font-weight: 600; color: var(--ink); text-align: left !important; }
.ro-sec td svg { vertical-align: -3px; margin-right: 8px; color: #3c424d; }
.ro-tw i { font-style: normal; }
.ro-tw i.ok { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #22a55a; }
.ro-tw i.ok svg { color: #fff; }
.ro-tw i.no { color: #c3c8cf; }
.ro-side { padding: 16px; }
.ro-sh { display: flex; align-items: center; gap: 14px; }
.ro-sh h2 { margin: 0; font: 700 22px var(--ff); }
.ro-sh small { font-size: 14px; color: #6b7280; }
.ro-side > p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: #5d6472; }
.ro-add { width: 100%; height: 42px; margin-top: 14px; gap: 10px; }
.ro-add svg { color: #fff; }
.ro-hint { font-size: 13px !important; color: #8b919c !important; }
.ro-side h3 { margin: 20px 0 10px; }
.ro-q { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid #e3e6eb; border-radius: 7px; background: #f8f9fb; }
.ro-q svg { color: #8b919c; }
.ro-q input { flex: 1; border: 0; outline: 0; background: none; font: 400 13px var(--ff); }
.ro-m { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f2f3f6; }
.ro-m .av { border-radius: 50%; overflow: hidden; flex: none; }
.ro-m div { flex: 1; min-width: 0; }
.ro-m b { display: flex; align-items: center; gap: 6px; font: 600 13.5px var(--ff); color: var(--ink); }
.ro-m b i { width: 6px; height: 6px; border-radius: 50%; background: #22a55a; }
.ro-m small { font-size: 12px; color: #8b919c; }
.ro-m time { font-size: 11.5px; color: #8b919c; white-space: nowrap; }
.ro-m button { border: 0; background: none; cursor: pointer; color: #9aa1ab; }
@media (max-width: 1150px) { .ad-kpis { grid-template-columns: repeat(3, 1fr); } .ad-r3 { grid-template-columns: 1fr 1fr; } .ro-g { grid-template-columns: 200px 1fr; } .ro-side { grid-column: 1 / -1; } .au-wrap.has-d { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ad-body { grid-template-columns: 1fr; } .ad-side { position: static; height: auto; } .ad-r2, .ad-r3, .ro-g { grid-template-columns: 1fr; } .au-flt { flex-wrap: wrap; } .au-sts { grid-template-columns: 1fr 1fr; } .ad-sys { display: none; } }