/* Админка — служебная комната приложения, а не отдельный продукт: палитра,
   кегли и кнопки те же, что в панели. Здесь только то, чего в панели нет:
   шапка с разделами, таблицы со списками и журнал. */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c1c1e; --muted:#6b6b70; --line:#e3e4e8;
  /* четыре цвета знака в шапке: его четвертинки и есть палитра админки */
  --new:#41729f; --active:#46824f; --at_risk:#cc9144; --lost:#bf5f52;
  --col:1080px;
}
* { box-sizing:border-box }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums }
p, .hint, .sub { text-wrap:pretty }
/* ссылки — цветом текста, а не браузерным синим и фиолетовым после клика */
a { color:var(--ink); text-decoration:underline solid #c9cbd1 1px; text-underline-offset:3px }
a:hover { text-decoration-color:var(--ink) }
td .name a { text-decoration:none } td .name a:hover { text-decoration:underline }
.back { color:var(--muted); text-decoration:none; font-size:13px } .back:hover { color:var(--ink) }
header { position:sticky; top:0; z-index:5; padding:10px 0; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line) }
.hrow { display:flex; gap:20px; align-items:center; flex-wrap:wrap; max-width:var(--col); margin:0 auto; padding:0 20px }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit }
.mark { width:22px; height:22px; border-radius:50%; flex:none; position:relative; background:conic-gradient(var(--new) 0 25%, var(--active) 0 50%, var(--at_risk) 0 75%, var(--lost) 0) }
.mark::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--card) }
.brand h1 { font-size:15px; margin:0; font-weight:600; letter-spacing:-0.01em; line-height:1.2 }
.brand h1 span { color:var(--muted); font-weight:500 }
.brand .tag { font-size:11.5px; color:var(--muted); line-height:1.2 }
.nav { display:flex; gap:2px; background:#eef0f3; padding:3px; border-radius:9px; flex-wrap:wrap }
.nav a { text-decoration:none; padding:6px 13px; border-radius:7px; font-size:13.5px; color:var(--muted) }
.nav a.on { background:var(--card); color:var(--ink); font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.1) }
.me { margin-left:auto; font-size:13px; color:var(--muted); display:flex; gap:12px; align-items:center }
.me a, .linkbtn { font:inherit; font-size:13px; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline dotted var(--line) 1px; text-underline-offset:3px }
.me a:hover, .linkbtn:hover { color:var(--ink) }
main { padding:18px 20px; display:grid; gap:16px; max-width:var(--col); margin:0 auto }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; min-width:0 }
.card h2 { font-size:13px; margin:0 0 4px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; display:flex; align-items:baseline; gap:9px }
.card h2::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--c); align-self:center; flex:none }
.card h2 .add { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500; font-size:12.5px }
.card h2 + .sub { color:var(--muted); font-size:12.5px; margin:0 0 12px }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
/* кромка сверху — как у карточек групп в отчёте: админка и отчёт одного цвета */
.kpi { background:var(--card); border:1px solid var(--line); border-top:4px solid var(--c); border-radius:10px; padding:12px 14px; min-width:0 }
.kpi .n { font-size:24px; font-weight:600; line-height:1.15; letter-spacing:-0.02em }
.kpi .l { font-size:13px; font-weight:500; margin-top:1px }
.kpi .s { color:var(--muted); font-size:12px; margin-top:1px }
.tbl-wrap { overflow:auto }
table { width:100%; border-collapse:collapse; font-size:12.5px }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); vertical-align:middle }
th { color:var(--muted); font-weight:500; font-size:11.5px; white-space:nowrap; vertical-align:bottom }
td.num, th.num { text-align:right; white-space:nowrap }
td.nowrap { white-space:nowrap }
td.mono, code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11.5px; color:var(--muted) }
td .name { font-weight:500 } td .sub { color:var(--muted); font-size:12px; line-height:1.35 }
.keyline { display:flex; align-items:center; gap:8px; white-space:nowrap }
tbody tr:hover > td { background:#fafbfc }
tr.edit > td, tbody tr.edit:hover > td { background:color-mix(in oklab, var(--new) 4%, #fff); vertical-align:top }
/* плашки — той же смесью, что группы в отчёте: цвет приглушён до фона, буквы темнее его */
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; white-space:nowrap;
        background:color-mix(in oklab, var(--c) 15%, #fff); color:color-mix(in oklab, var(--c) 78%, #000) }
.pill.ok { --c:var(--active) } .pill.warn { --c:var(--at_risk) } .pill.admin { --c:var(--new) }
.pill.bad { --c:var(--lost) }
.pill.off { background:#eef0f3; color:var(--muted) }
.acts { display:flex; gap:10px; flex-wrap:wrap; white-space:nowrap }
.acts a, .acts button { font:inherit; font-size:12.5px; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline dotted var(--line) 1px; text-underline-offset:3px }
.acts a:hover, .acts button:hover { color:var(--ink) }
.acts button.danger:hover { color:var(--lost) }
/* формы: сетка полей, одно действие, состояние справа — как в настройках панели */
.form { margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 16px }
.fields.two { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.fields label { display:grid; gap:4px; font-size:12.5px; color:var(--muted) }
.fields input, .fields select { font:inherit; font-size:13.5px; padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink); min-width:0 }
.fields input:focus, .fields select:focus { outline:2px solid var(--ink); outline-offset:-1px; border-color:var(--ink) }
.chips { display:flex; flex-wrap:wrap; gap:6px 10px; padding-top:4px }
.chips label { display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ink); cursor:pointer }
.actions { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap }
.actions button { font:inherit; font-size:13px; padding:6px 13px; border-radius:7px; border:1px solid var(--line); background:var(--card); cursor:pointer }
.actions button.primary { background:var(--ink); color:#fff; border-color:var(--ink) }
.actions button.danger { color:var(--lost); border-color:#e4c9c4 }
.actions button:disabled { color:#a9aab0; background:#f4f5f7; cursor:default }
.actions .state { margin-left:auto; font-size:12.5px; color:var(--muted) }
.actions .state.err { color:var(--lost) }
.secret { margin-top:10px; padding:10px 12px; border-radius:7px; font-size:13px; line-height:1.5;
          background:color-mix(in oklab, var(--at_risk) 8%, #fff); border:1px solid color-mix(in oklab, var(--at_risk) 28%, #fff) }
.secret code { font-size:14px; color:var(--ink); user-select:all }
.hint { color:var(--muted); font-size:12px; margin-top:10px }
.gate { max-width:360px; margin:60px auto }
/* Как форма входа в панели: не grid, иначе менеджер паролей вписывает логин и пропускает пароль. */
.gate .authform { margin-top:14px }
.gate label { display:block; margin:0 0 12px; font-size:12.5px; color:var(--muted) }
.gate label span { display:block; margin-bottom:4px }
.gate input { display:block; width:100%; font:inherit; font-size:13.5px; padding:7px 10px; border:1px solid var(--line); border-radius:7px }
.gate button { width:100%; font:inherit; font-size:13.5px; padding:8px 13px; border-radius:7px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer }
/* предупреждающая строка; плашку не трогаем — у неё свой кегль */
.warn:not(.pill) { color:var(--at_risk); font-size:12.5px }
.err { color:var(--lost) }

/* ------------------------------------------------ обзор: что требует внимания */
.todo { display:grid; gap:0 }
.todo .t { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); align-items:baseline; font-size:13px }
.todo .t:last-child { border-bottom:0 }
.todo .t .why { color:var(--muted); font-size:12.5px }
.todo .t a { color:inherit }

/* ------------------------------------------------ карточка одного бизнеса */
.back { font-size:12.5px; color:var(--muted); text-decoration:none }
.back:hover { color:var(--ink) }
/* слева карточка во всю высоту, справа группы и под ними опасная зона; карточка
   тянется до низа правой колонки — её поля растут (flex в .bc-card) */
.bizcols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr auto; gap:16px; align-items:stretch }
.bizcols .bc-card { grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column }
.bizcols .bc-groups { grid-column:2; grid-row:1 } .bizcols .bc-danger { grid-column:2; grid-row:2 }
@media (max-width:900px){ .bizcols { grid-template-columns:1fr; grid-template-rows:none }
  .bizcols > .card { grid-column:auto; grid-row:auto } }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 18px; font-size:13px }
.bc-groups .facts { grid-template-columns:repeat(3, minmax(0,1fr)) }
.bc-groups { display:flex; flex-direction:column } .bc-groups > .actions { margin-top:auto; padding-top:12px }
@media (max-width:900px){ .bc-groups .facts { grid-template-columns:repeat(2, minmax(0,1fr)) } }
/* шапка бизнеса: название и кнопки одной строкой, под ними шесть плиток */
.bizhead .headrow { display:flex; justify-content:space-between; align-items:flex-start; gap:12px 24px; flex-wrap:wrap }
.bizhead .headrow h2 + .sub { margin:0 }
.bizhead .headrow .actions { margin-top:0 }
.bizhead .tiles { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; margin-top:14px }
.bizhead .tile { border:1px solid var(--line); border-radius:8px; padding:9px 12px; min-width:0 }
.bizhead .tile .k { color:var(--muted); font-size:12px }
.bizhead .tile .v { font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bizhead .gapline { margin-top:12px; padding:8px 12px; border-radius:8px; font-size:12.5px; line-height:1.45;
  background:color-mix(in srgb, var(--at_risk) 9%, var(--card)); color:var(--ink) }
.bizhead .tile .v .pill { font-size:12px; letter-spacing:0; vertical-align:3px }
.bizhead .tile .s { color:var(--muted); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bizhead > .state { margin-top:10px; font-size:12.5px; color:var(--muted) } .bizhead > .state.err { color:var(--lost) }
@media (max-width:900px){ .bizhead .tiles { grid-template-columns:repeat(3, minmax(0,1fr)) } }
.facts .f .k { color:var(--muted); font-size:12px }
.facts .f .v { font-weight:500 }
/* общая карточка бизнеса (ui-business-card.js) живёт и здесь, и в панели: там
   свои стили в app.css, тут — те же поля на сетке админки */
.bizcard .f { display:grid; gap:4px; margin:0 0 10px; font-size:12.5px; color:var(--muted) }
.bc-card .bizcard { flex:1; display:flex; flex-direction:column }
/* своя категория: поле с названием на месте списка — в карточке и в «Завести бизнес» */
.newcat { position:relative; display:flex; min-width:0 }
.newcat input { flex:1 1 0; min-width:0 }
.newcat .nc-tools { position:absolute; top:100%; left:0; right:0; z-index:2; display:flex; gap:2px; align-items:center; margin-top:1px }
.newcat .state { font-style:normal; font-size:12px; color:var(--muted); margin:0 0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--card) }
.newcat .state:empty { display:none }
.newcat .state.err { color:var(--lost) }
.newcat input { font:inherit; font-size:13.5px; padding:6px 9px; border:1px solid var(--line); border-radius:7px }
.xdel { width:24px; height:24px; padding:0; border:0; border-radius:50%; background:none; color:var(--lost); font-size:18px; line-height:1; cursor:pointer }
.xdel:hover { background:color-mix(in srgb, var(--lost) 12%, transparent) }
.xadd { width:24px; height:24px; padding:0; border:0; border-radius:50%; background:none; color:var(--active); font-size:16px; line-height:1; cursor:pointer; flex:none }
.xadd:hover { background:color-mix(in srgb, var(--active) 12%, transparent) }
.bizcard .f.grow { display:flex; flex-direction:column; flex:var(--g, 1) 1 auto }
.bizcard .f.grow textarea { flex:1 1 auto }
.bizcard .f.grow .cnt { align-self:flex-end }
.bizcard .f input, .bizcard .f textarea, .bizcard .f select { font:inherit; font-size:13.5px; padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink); resize:vertical; min-width:0 }
.bizcard .two-f input, .bizcard .two-f select { height:33px; box-sizing:border-box }
.bizcard .f input:focus, .bizcard .f textarea:focus, .bizcard .f select:focus { outline:2px solid var(--ink); outline-offset:-1px; border-color:var(--ink) }
.bizcard .two-f { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:0 14px }
@media (max-width:760px){ .bizcard .two-f { grid-template-columns:1fr } }
.bizcard .cnt { font-style:normal; font-size:11.5px; color:var(--muted); justify-self:end }
.bizcard .flags { display:grid; gap:6px; margin:10px 0 0; font-size:12.5px; color:var(--ink) }
.bizcard .flags label { display:flex; gap:7px; align-items:baseline; cursor:pointer }
.bizcard .row { display:flex; align-items:center; gap:8px; margin-top:12px }
.bizcard .row button { font:inherit; font-size:13px; padding:6px 13px; border-radius:7px; border:1px solid var(--line); background:var(--card); cursor:pointer }
.bizcard .row button.primary { background:var(--ink); color:#fff; border-color:var(--ink) }
.bizcard .row button:disabled { color:#a9aab0; background:#f4f5f7; border-color:var(--line); cursor:default }
.bizcard .state { margin-left:auto; font-size:12.5px; color:var(--muted) }
.bizcard .state.err { color:var(--lost) }
.bizcard h3 { font-size:13px; margin:0 0 4px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em }

/* ------------------------------------------------ журнал */
.filters { display:flex; gap:8px 12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px }
.filters label { display:grid; gap:4px; font-size:12px; color:var(--muted) }
.filters select, .filters input { font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink) }
/* стрелка списков — та же, что в панели, а не системная */
select, .fields select, .bizcard .f select, .filters select { appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:28px; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b70' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px }
.filters .clear { margin-left:auto }
.filters .chk { display:flex; gap:6px; align-items:center; font-size:13px; color:var(--ink); padding-bottom:6px; cursor:pointer }
.filters .chk input { margin:0 }
.filters select { max-width:170px }
.filters input[type=date] { width:124px; box-sizing:border-box }
.filters .search { flex:1 1 100px; min-width:0 } .filters .search input { width:100%; box-sizing:border-box }
.more { display:flex; justify-content:center; margin-top:12px }
.syslog { display:grid; grid-template-columns:max-content max-content fit-content(180px) minmax(0,1fr); column-gap:12px;
  font-size:12.5px; align-content:start; overflow:auto }
.syslog .e { grid-column:1/-1; display:grid; grid-template-columns:subgrid; padding:4px 0; border-bottom:1px solid var(--line); align-items:baseline }
.syslog .e:last-child { border-bottom:0 }
.syslog .ts { color:var(--muted); white-space:nowrap; font-size:12px }
.syslog .who { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.syslog .biz { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.syslog .txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.syslog .d { color:var(--muted) }

@media (max-width:860px){ .kpis{grid-template-columns:1fr 1fr} .syslog{grid-template-columns:1fr} }
/* подсказки (tips.js) — те же, что в панели */
#tip { position:fixed; z-index:20; max-width:min(320px, calc(100vw - 16px)); padding:7px 10px; border-radius:7px;
       background:var(--ink); color:#fff; font-size:12.5px; line-height:1.4; text-wrap:pretty;
       pointer-events:none; opacity:0; transition:opacity .08s }
#tip.on { opacity:1 }
#tip.list { max-width:min(600px, calc(100vw - 16px)); line-height:1.6; white-space:pre-line }
@media (pointer:coarse){ #tip { font-size:13.5px; padding:9px 12px } }
.fields label > span[data-tip], .bizcard .f > span[data-tip], .facts .k[data-tip], .facts .k span[data-tip], th[data-tip],
.kpi .s[data-tip], .kpi .l[data-tip], .tag[data-tip], .sub b[data-tip], .hint span[data-tip] {
  text-decoration:underline dotted #c4c6cc 1px; text-underline-offset:3px }
h2[data-tip]::after, h3[data-tip]::after, summary[data-tip]::after {
  content:"i"; display:inline-block; margin-left:7px; width:14px; height:14px; border-radius:50%; border:1px solid #c4c6cc;
  color:var(--muted); font:italic 600 10px/13px Georgia,serif; text-align:center; vertical-align:2px }
.filled { align-items:stretch }   /* ряд дотянут до низа окна (fill.js) — карточки вместе с ним */