/* Адмінка — «командний центр» (затверджена картка гравця, owner 12.10): темно, щільно, кожен вид — своїм кольором. */
:root {
  --bg: #15171B; --panel: #1E2127; --pop: #22262E; --line: #2B2F37; --sel: #3A4A63;
  --text: #E4E1DA; --muted: #8C919A; --soft: #B5B9C0;
  --green: #7BD389; --red: #E8806E; --amber: #E3A847; --blue: #8FB3E8; --violet: #C39BF0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
/* Noto Color Emoji — лише підмножина 🪵🪆🪙🪖🪽🛞🪏 (index.html): у Segoe UI Emoji на Windows 10 їх нема, там були квадрати */
body { font: 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Color Emoji", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* кольори з еталона */
.g { color: var(--green); } .d { color: var(--red); } .a { color: var(--amber); } .b { color: var(--blue); } .v { color: var(--violet); }
.s { color: var(--muted); font-size: 11px; }
.num { font-variant-numeric: tabular-nums; }

/* верхня смуга */
.bar { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: var(--panel); color: var(--muted); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10; }
.bar b { font-weight: 500; color: var(--text); }
.bar .brand { color: var(--amber); }
.bar nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bar nav a:hover, .bar summary:hover, .bar .live a:hover { color: var(--text); }
.bar nav a.on, .bar details.on > summary { color: var(--text); }
.bar details { position: relative; }
.bar summary { cursor: pointer; list-style: none; }
.bar summary::-webkit-details-marker { display: none; }
.bar summary::after { content: " ▾"; font-size: 10px; }
.bar .menu { position: absolute; top: 22px; left: -10px; background: var(--pop); border: 1px solid var(--sel); border-radius: 8px;
  padding: 4px 0; min-width: 150px; z-index: 20; }
.bar .menu a { display: block; padding: 4px 12px; }
.bar .menu a:hover, .bar .menu a.on { background: var(--sel); color: var(--text); }
.bar .find { position: relative; }
.bar .find input { width: 190px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.bar .find input:focus { outline: none; border-color: var(--sel); }
.bar .hits { position: absolute; top: 26px; left: 0; width: 300px; background: var(--pop); border: 1px solid var(--sel); border-radius: 8px;
  padding: 4px 0; z-index: 20; max-height: 70vh; overflow-y: auto; }
.bar .hits a { display: block; padding: 4px 10px; color: var(--text); }
.bar .hits a:hover, .bar .hits a.on { background: var(--sel); }
.bar .live { margin-left: auto; font-variant-numeric: tabular-nums; }
.bar .who { cursor: default; }
.bar .out { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
.bar .out:hover { color: var(--text); }

/* сторінка */
main { padding: 9px 10px 16px; max-width: 1480px; margin: 0 auto; }
.crumbs { margin-bottom: 6px; min-height: 15px; }
.crumbs .sep { margin: 0 4px; }

/* блоки еталона */
.t { background: var(--panel); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.t h4 { font-size: 11px; font-weight: 400; color: var(--muted); margin: 0 0 5px; display: flex; justify-content: space-between; gap: 4px; }
.r { display: flex; justify-content: space-between; gap: 6px; padding: 1.5px 0; font-variant-numeric: tabular-nums; }
.r > :first-child { color: var(--soft); }
.r > :last-child { text-align: right; }
.hb { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; gap: 5px; align-items: center; padding: 1.5px 0; font-variant-numeric: tabular-nums; }
.hb i { display: block; height: 7px; border-radius: 2px; }
.hb span:last-child { text-align: right; }
.sw { display: flex; gap: 3px; margin-bottom: 5px; flex-wrap: wrap; }
.sw button { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--line); color: var(--soft); border: 0; cursor: pointer; }
.sw button.on { background: var(--sel); color: var(--text); }
.ch { display: inline-block; padding: 1px 7px; border-radius: 9px; background: var(--line); margin: 0 3px 4px 0; font-size: 11px; cursor: pointer; }
.ch.on { background: var(--sel); color: var(--text); }
.ev { padding: 4px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.lnk { color: var(--blue); text-decoration: underline; text-decoration-color: var(--sel); cursor: pointer; }
.lnk:hover { text-decoration-color: var(--blue); }
.btn { display: inline-block; padding: 3px 9px; border: 1px solid var(--sel); border-radius: 6px; color: var(--blue); font-size: 11px;
  background: none; cursor: pointer; }
.btn:hover { background: var(--sel); color: var(--text); }
.btn.p { background: var(--blue); color: var(--bg); border-color: var(--blue); }
.btn.p:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; }
.lead { background: var(--panel); border-left: 3px solid var(--amber); padding: 6px 9px; line-height: 1.5; margin: 7px 0 8px; }
.wip { color: var(--muted); padding: 24px; text-align: center; }
.err { color: var(--red); }
.grid { display: grid; gap: 7px; align-content: start; }

/* міні-картка зв'язку */
.pop { position: absolute; z-index: 30; width: 300px; background: var(--pop); border: 1px solid var(--sel); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.pop .ttl { font-size: 14px; }
.pop .sub { margin-bottom: 6px; }
.pop .r { padding: 3px 0; }
.pop .acts { margin-top: 8px; display: flex; gap: 6px; }

/* таблиця */
.tbl-wrap { overflow-x: auto; max-width: 100%; }  /* широка таблиця гортається у своєму блоці, не сторінка */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { font-weight: 400; font-size: 11px; color: var(--muted); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap; user-select: none; }
.tbl th.sort { cursor: pointer; }
.tbl th.sort:hover, .tbl th.on { color: var(--text); }
.tbl td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: rgba(58, 74, 99, .25); }
.tbl .n { text-align: right; }
.tbl .empty { color: var(--muted); text-align: center; padding: 16px; }

/* графік */
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.chart .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }

/* діалог */
dialog { background: var(--pop); color: var(--text); border: 1px solid var(--sel); border-radius: 10px; padding: 14px 16px; width: 380px; max-width: calc(100vw - 32px); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h3 { margin: 0 0 10px; font-size: 14px; font-weight: 500; }
dialog label { display: block; margin: 0 0 8px; color: var(--soft); }
dialog input, dialog select, dialog textarea { display: block; width: 100%; margin-top: 3px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; }
dialog textarea { min-height: 80px; resize: vertical; }
dialog .acts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }

/* вхід */
.login { max-width: 360px; margin: 18vh auto 0; text-align: center; }
.login .t { padding: 22px 20px; }
.login h1 { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.login .btn { font-size: 13px; padding: 6px 16px; margin-top: 14px; }
.login .msg { margin-top: 12px; min-height: 16px; }