/* ============================================================
   MDM-панель — дизайн по мотивам темы Cobalt (usehallmark.com)
   Токены, кейкапы, волосяные линии, срезанные углы, wire-сетка.
   Только светлая схема (color-scheme: light), как в оригинале.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- бумага и чернила --- */
  --paper: oklch(98.6% 0.005 250);
  --paper-2: oklch(96.2% 0.008 252);
  --paper-3: oklch(93% 0.011 252);
  --ink: oklch(21% 0.028 262);
  --ink-2: oklch(36% 0.022 260);
  --muted: oklch(50% 0.018 258);
  --rule: oklch(90% 0.009 252);
  --rule-2: oklch(83% 0.012 252);

  /* --- графит (тёмные поверхности) --- */
  --graphite: oklch(21% 0.024 262);
  --graphite-2: oklch(26.5% 0.026 262);
  --graphite-ink: oklch(93% 0.010 250);
  --graphite-muted: oklch(69% 0.022 256);

  /* --- кобальт --- */
  --accent: oklch(52% 0.19 258);
  --accent-hover: oklch(48% 0.19 259);
  --accent-2: oklch(76% 0.13 254);
  --accent-wash: oklch(95% 0.028 256);
  --accent-ink: oklch(98.6% 0.005 250);
  --accent-edge: oklch(39% 0.16 260);
  --focus: var(--accent);

  /* --- статусы --- */
  --ok: oklch(50% 0.12 150);
  --bad: oklch(52% 0.19 27);
  --warn: oklch(62% 0.13 75);
  --info: oklch(52% 0.12 240);

  /* --- кейкапы --- */
  --key-face: oklch(99.4% 0.003 250);
  --key-edge: oklch(80% 0.016 254);
  --key-hi: oklch(100% 0 0 / 0.9);
  --key-hi-on-accent: oklch(100% 0 0 / 0.22);
  --key-drop: oklch(21% 0.028 262 / 0.28);
  --key-drop-accent: oklch(30% 0.12 260 / 0.45);
  --key-press: oklch(21% 0.028 262 / 0.14);
  --key-press-accent: oklch(21% 0.1 262 / 0.32);
  --shadow-key: 0 3px 0 0 var(--key-edge), 0 6px 8px -4px var(--key-drop), inset 0 1px 0 var(--key-hi);
  --shadow-key-hover: 0 4px 0 0 var(--key-edge), 0 8px 10px -5px var(--key-drop), inset 0 1px 0 var(--key-hi);
  --shadow-key-press: 0 0 0 0 var(--key-edge), 0 1px 2px -1px var(--key-drop), inset 0 1px 2px var(--key-press);
  --shadow-key-accent: 0 3px 0 0 var(--accent-edge), 0 6px 8px -4px var(--key-drop-accent), inset 0 1px 0 var(--key-hi-on-accent);
  --shadow-key-accent-hover: 0 4px 0 0 var(--accent-edge), 0 8px 10px -5px var(--key-drop-accent), inset 0 1px 0 var(--key-hi-on-accent);
  --shadow-key-accent-press: 0 0 0 0 var(--accent-edge), 0 1px 2px -1px var(--key-drop-accent), inset 0 1px 3px var(--key-press-accent);
  --shadow-cap: 0 2px 0 var(--key-edge), inset 0 1px 0 var(--key-hi);

  /* --- панели --- */
  --shadow-card: 0 1px 2px oklch(21% 0.028 262 / 0.06);
  --shadow-panel: 0 1px 0 var(--rule), 0 18px 32px -24px oklch(21% 0.028 262 / 0.28);

  /* --- сетка-провод --- */
  --cell-w: 8px; --cell-h: 16px;
  --glyph-2: oklch(81% 0.045 255);

  /* --- шкалы --- */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px;
  --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem;
  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px;
  --rule-hair: 1px;
  --cut: 8px; --cut-l: 16px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms;

  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, monospace;

  --container: 1280px;
}

/* ---------- база ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--space-3xs); }
::selection { background: var(--accent-wash); }

h1 { font: 600 var(--text-lg) / 1.2 var(--font-display); letter-spacing: -0.028em; margin: 0 0 4px; }
h2 { font: 600 var(--text-md) / 1.3 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-sm); }
h3 { font: 600 0.9375rem / 1.3 var(--font-display); letter-spacing: -0.015em; margin: 0 0 10px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-outlier); font-size: 12px; }
.nowrap { white-space: nowrap; }

/* ---------- срезанные углы (сигнатура темы) ---------- */
.cut-s, input, select, button, .badge, .tokenbox, .empty, .userchip, .pager a, .pager span {
  border-radius: var(--radius-input);
}
.cut-l, .card, .tablewrap, details.sect, .loginbox, #map {
  border-radius: var(--radius-card);
}
@supports (corner-shape: bevel) {
  input, select, button, .badge, .tokenbox, .empty, .userchip, .pager a, .pager span {
    border-radius: var(--cut) 3px var(--cut) 3px;
    corner-shape: bevel round bevel round;
  }
  .card, .tablewrap, details.sect, .loginbox, #map {
    border-radius: var(--cut-l) 4px var(--cut-l) 4px;
    corner-shape: bevel round bevel round;
  }
}

/* ---------- каркас ---------- */
.appbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper);
  border-bottom: var(--rule-hair) solid var(--rule);
}
.appbar-in {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 1.0625rem / 1 var(--font-display); letter-spacing: -0.03em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 24px; height: 24px; border-radius: 5px; flex: none;
  background: #000;
  box-shadow: 0 2px 0 var(--key-edge);
  overflow: hidden;
  display: inline-grid; place-items: center;
}
.brand .logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand .logo.big { width: 40px; height: 40px; border-radius: var(--radius-input); box-shadow: 0 3px 0 var(--key-edge), var(--shadow-card); }
.brand small { font: 500 var(--text-xs) / 1 var(--font-display); letter-spacing: 0; color: var(--muted); margin-left: 2px; }

.appnav { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.appnav a {
  padding: 7px 12px; border-radius: var(--radius-input);
  font: 500 var(--text-sm) / 1 var(--font-display);
  color: var(--ink-2); transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.appnav a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.appnav a.active { color: var(--accent); background: var(--accent-wash); }

.userchip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 6px 4px 4px;
  border: var(--rule-hair) solid var(--rule-2);
  background: var(--paper-2); font-size: var(--text-sm);
}
.userchip .avatar {
  width: 26px; height: 26px; border-radius: var(--radius-input); flex: none;
  display: grid; place-items: center;
  font: 500 var(--text-xs) / 1 var(--font-display); color: var(--accent-ink);
  background: var(--accent);
}
.userchip .who { display: flex; flex-direction: column; line-height: 1.15; }
.userchip .who b { font: 500 var(--text-sm) / 1.2 var(--font-body); color: var(--ink); }
.userchip .who span { font-size: 11px; color: var(--muted); }
.userchip a.logout {
  margin-left: 2px; padding: 6px 10px; border-radius: var(--radius-input);
  font: 500 var(--text-xs) / 1 var(--font-display); color: var(--muted);
}
.userchip a.logout:hover { color: var(--bad); background: color-mix(in oklab, var(--bad) 10%, var(--paper)); text-decoration: none; }

.container { max-width: var(--container); margin: 0 auto; padding: var(--space-lg) var(--space-lg) 80px; }

/* ---------- заголовки страниц ---------- */
.page-head { display: flex; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.page-head .grow { flex: 1; min-width: 220px; }
.page-head p.sub {
  margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm);
  overflow-wrap: anywhere; min-width: 0;
}
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--text-sm) / 1 var(--font-display); color: var(--muted);
  margin-bottom: var(--space-xs);
}
.backlink:hover { color: var(--accent); text-decoration: none; }

/* ---------- карточки ---------- */
.card {
  background: var(--paper);
  border: var(--rule-hair) solid var(--rule-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
}
.card.danger { border-color: color-mix(in oklab, var(--bad) 45%, var(--rule-2)); }

/* ---------- кейкапы (кнопки) ---------- */
button, .btn {
  --lift: 3px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 40px; margin-bottom: var(--lift);
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--accent-edge);
  background: var(--accent); color: var(--accent-ink);
  font: 500 var(--text-sm) / 1 var(--font-display);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-key-accent);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
button:hover, .btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-key-accent-hover); text-decoration: none; }
button:active, .btn:active { transform: translateY(var(--lift)); box-shadow: var(--shadow-key-accent-press); }
button.secondary {
  border-color: var(--rule-2); background: var(--key-face); color: var(--ink);
  box-shadow: var(--shadow-key);
}
button.secondary:hover { background: var(--key-face); border-color: var(--accent); box-shadow: var(--shadow-key-hover); }
button.secondary:active { box-shadow: var(--shadow-key-press); }
button.danger { border-color: color-mix(in oklab, var(--bad) 55%, black); background: var(--bad); box-shadow: 0 3px 0 0 color-mix(in oklab, var(--bad) 55%, black), 0 6px 8px -4px var(--key-drop-accent), inset 0 1px 0 var(--key-hi-on-accent); }
button.danger:hover { background: color-mix(in oklab, var(--bad) 92%, black); }
button.danger:active { box-shadow: 0 0 0 0 color-mix(in oklab, var(--bad) 55%, black), 0 1px 2px -1px var(--key-drop-accent), inset 0 1px 3px var(--key-press); }
button.sm { min-height: 30px; padding: 0 10px; font-size: var(--text-xs); --lift: 2px; margin-bottom: 2px; }
button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
form.inline { display: inline; }
.cmdrow { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; margin: var(--space-2xs) 0 var(--space-sm); }

/* ---------- формы ---------- */
input, select {
  font: 400 var(--text-sm) / 1.4 var(--font-body); color: var(--ink);
  min-height: 38px; padding: 0 11px; min-width: 0;
  border: var(--rule-hair) solid var(--rule-2);
  background: var(--key-face);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
input::placeholder { color: var(--muted); }
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
label { font: 500 var(--text-xs) / 1.3 var(--font-display); color: var(--ink-2); }
.field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.field input, .field select { width: 100%; }
.fields { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: flex-end; }
.fields .field { min-width: 150px; }

/* ---------- таблицы ---------- */
.tablewrap {
  background: var(--paper);
  border: var(--rule-hair) solid var(--rule-2);
  box-shadow: var(--shadow-card);
  overflow: auto; margin-bottom: var(--space-md);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-2); color: var(--muted);
  font: 500 var(--text-xs) / 1.2 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.05em;
  text-align: left; padding: 10px 14px;
  border-bottom: var(--rule-hair) solid var(--rule);
  white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: var(--rule-hair) solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur-short) var(--ease-out); }
tbody tr:hover { background: var(--paper-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-outlier); font-size: 12.5px; }
.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; max-width: 480px;
}

/* ---------- бейджи ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  font: 500 var(--text-xs) / 1.5 var(--font-display);
  letter-spacing: 0.02em; white-space: nowrap;
  border: var(--rule-hair) solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
.badge.ok { background: color-mix(in oklab, var(--ok) 12%, var(--paper)); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, var(--paper)); }
.badge.off { background: var(--paper-3); color: var(--muted); border-color: var(--rule-2); }
.badge.err { background: color-mix(in oklab, var(--bad) 10%, var(--paper)); color: var(--bad); border-color: color-mix(in oklab, var(--bad) 28%, var(--paper)); }
.badge.warn { background: color-mix(in oklab, var(--warn) 14%, var(--paper)); color: color-mix(in oklab, var(--warn) 80%, black); border-color: color-mix(in oklab, var(--warn) 32%, var(--paper)); }
.badge.info { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 25%, var(--paper)); }
.badge.plain::before { display: none; }

/* ---------- плитки ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-xs); }
.stat {
  background: var(--paper-2);
  border: var(--rule-hair) solid var(--rule);
  border-radius: var(--radius-input);
  padding: 9px 12px; display: flex; flex-direction: column; gap: 2px;
}
.stat .k { font: 500 11px / 1.3 var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font: 600 15px / 1.3 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat .v small { font: 400 12px / 1 var(--font-body); color: var(--muted); }

/* ---------- сетка фото/скриншотов ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-sm); }
.shot {
  border-radius: var(--radius-input);
  overflow: hidden;
  background: var(--paper-2); border: var(--rule-hair) solid var(--rule-2);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.shot:hover { box-shadow: var(--shadow-panel); transform: translateY(-1px); }
.shot a { display: block; aspect-ratio: 4 / 3; background: var(--paper-3); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot .meta {
  padding: 6px 9px; font-size: 11px; color: var(--muted); line-height: 1.5;
  display: flex; flex-direction: column; gap: 2px; border-top: var(--rule-hair) solid var(--rule);
}
.shot .meta .pkg {
  font-family: var(--font-outlier); font-size: 10.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- раскрывающиеся секции ---------- */
details.sect {
  margin-bottom: var(--space-md);
  border: var(--rule-hair) solid var(--rule-2);
  background: var(--paper); box-shadow: var(--shadow-card); overflow: hidden;
}
details.sect > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 12px var(--space-md);
  font: 600 0.9375rem / 1.3 var(--font-display); letter-spacing: -0.015em;
  display: flex; align-items: center; gap: var(--space-sm);
}
details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform var(--dur-short) var(--ease-out);
}
details.sect[open] > summary { border-bottom: var(--rule-hair) solid var(--rule); }
details.sect[open] > summary::after { transform: rotate(45deg); }
details.sect > summary:hover { background: var(--paper-2); }
details.sect > .sect-body { padding: 4px var(--space-md) var(--space-md); }
details.sect .count { font: 500 var(--text-xs) / 1 var(--font-display); color: var(--muted); letter-spacing: 0.02em; }

details.mini { border-top: var(--rule-hair) dashed var(--rule-2); padding: var(--space-2xs) 0; }
details.mini summary { cursor: pointer; font: 500 var(--text-sm) / 1.4 var(--font-display); padding: 8px 0; color: var(--ink-2); }
details.mini summary:hover { color: var(--ink); }
details.mini[open] summary { color: var(--ink); }

/* ---------- карта ---------- */
#map { height: 360px; border: var(--rule-hair) solid var(--rule-2); z-index: 0; }
.leaflet-container { font: 12px/1.5 var(--font-body); }

/* ---------- прочее ---------- */
.tokenbox {
  background: color-mix(in oklab, var(--ok) 8%, var(--paper));
  border: var(--rule-hair) solid color-mix(in oklab, var(--ok) 35%, var(--paper));
  padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md);
  word-break: break-all; font-size: var(--text-sm);
}
.tokenbox b { font-family: var(--font-outlier); font-size: 13px; user-select: all; color: var(--ink); }
.empty {
  border: 1.5px dashed var(--rule-2);
  padding: var(--space-xl) var(--space-md); text-align: center;
  color: var(--muted); font-size: var(--text-sm); background: var(--paper);
}
.err-text { color: var(--bad); font-size: var(--text-sm); margin: var(--space-xs) 0 0; }

.pager { display: flex; gap: var(--space-sm); margin-top: var(--space-md); font: 500 var(--text-sm) / 1 var(--font-display); }
.pager a, .pager span {
  min-width: 38px; min-height: 34px; display: inline-grid; place-items: center;
  padding: 0 12px; border: var(--rule-hair) solid var(--rule-2);
  background: var(--key-face); color: var(--ink); box-shadow: var(--shadow-cap);
}
.pager span { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 25%, var(--paper)); }
.pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--text-sm); margin: 0; }
.kv dt { color: var(--muted); font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- логин: поле с сеткой-проводом ---------- */
.login-wrap {
  min-height: calc(100vh - 140px); display: grid; place-items: center; padding: var(--space-xl) var(--space-md);
  background-image: radial-gradient(circle at 4px 9px, var(--glyph-2) 0.9px, transparent 1.3px);
  background-size: var(--cell-w) var(--cell-h);
}
.loginbox {
  width: 100%; max-width: 380px;
  background: var(--paper);
  border: var(--rule-hair) solid var(--rule-2);
  box-shadow: var(--shadow-panel), 0 0 60px 30px var(--paper);
  padding: var(--space-lg) var(--space-lg);
}
.loginbox .brand { justify-content: center; display: flex; margin-bottom: 6px; font-size: 1.125rem; }
.loginbox .sub { text-align: center; color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.loginbox .field { margin-bottom: var(--space-sm); }
.loginbox input { width: 100%; }
.loginbox button { width: 100%; margin-top: var(--space-xs); }

/* ---------- адаптив ---------- */
@media (max-width: 760px) {
  .appbar-in { padding: var(--space-xs) var(--space-md); gap: var(--space-sm); }
  .container { padding: var(--space-md) var(--space-sm) 60px; }
  .appnav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .appnav a { flex: none; }
  .userchip .who { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .clip { max-width: 150px; }
  #map { height: 260px; }
}