/* Админка конструктора отчётов */
:root {
  --a-bg: #0d0f0e;
  --a-panel: #141817;
  --a-panel-2: #1b201e;
  --a-line: rgba(255, 255, 255, .10);
  --a-text: #eef2f0;
  --a-text-2: #a9b3ae;
  --a-muted: #79847f;
  --a-accent: #25cfae;
  --a-bad: #e06060;
  --a-r: 10px;
  --a-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--a-bg); color: var(--a-text);
  font-family: var(--a-font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: 14px; }

/* ---------- каркас ---------- */
.top {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--a-line); background: var(--a-panel); position: sticky; top: 0; z-index: 40;
}
.top__logo { font-weight: 750; letter-spacing: -.01em; margin-right: 6px; }
.top__logo i { color: var(--a-accent); font-style: normal; }
.top__spacer { flex: 1; }
.top__slug { color: var(--a-muted); font-size: 13px; }
.top__slug b { color: var(--a-text-2); font-weight: 600; }

.layout { display: grid; grid-template-columns: 208px minmax(420px, 1fr) minmax(380px, 42vw); height: calc(100vh - 56px); }
.rail { border-right: 1px solid var(--a-line); background: var(--a-panel); padding: 12px 10px; overflow-y: auto; }
.editor { overflow-y: auto; padding: 20px 24px 80px; }
.preview { border-left: 1px solid var(--a-line); background: var(--a-panel); display: flex; flex-direction: column; }
.preview__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--a-line); }
.preview__bar b { font-size: 12px; color: var(--a-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.preview iframe { flex: 1; width: 100%; border: 0; background: #000; }
@media (max-width: 1280px) { .layout { grid-template-columns: 190px 1fr; } .preview { display: none; } }

.rail__group { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); margin: 14px 8px 6px; }
.rail__i {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--a-text-2); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.rail__i:hover { background: var(--a-panel-2); color: var(--a-text); }
.rail__i.is-on { background: color-mix(in srgb, var(--a-accent) 16%, transparent); color: var(--a-text); font-weight: 600; }
.rail__i span.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a-accent); margin-left: auto; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--a-line);
  background: var(--a-panel-2); color: var(--a-text); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--a-accent); }
.btn--primary { background: var(--a-accent); border-color: var(--a-accent); color: #04120f; font-weight: 650; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: none; }
.btn--sm { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.btn--danger { color: var(--a-bad); }
.btn--danger:hover { border-color: var(--a-bad); }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- поля ---------- */
.sec { margin-bottom: 26px; }
.sec__h { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sec__hint { color: var(--a-muted); font-size: 13px; margin: 0 0 16px; }

.box { border: 1px solid var(--a-line); border-radius: var(--a-r); background: var(--a-panel); margin-bottom: 14px; }
.box__h {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.box.is-open > .box__h { border-bottom-color: var(--a-line); }
.box__h b { font-weight: 620; font-size: 14px; }
.box__h .chev { margin-left: auto; color: var(--a-muted); transition: transform .15s; }
.box.is-open > .box__h .chev { transform: rotate(90deg); }
.box__b { padding: 14px; display: none; }
.box.is-open > .box__b { display: block; }
.box__hint { color: var(--a-muted); font-size: 12.5px; margin: -4px 0 12px; }

.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grid4 > .box { grid-column: 1 / -1; margin-bottom: 0; }
.f { display: flex; flex-direction: column; gap: 5px; grid-column: span 4; min-width: 0; }
.f--1 { grid-column: span 1; } .f--2 { grid-column: span 2; } .f--3 { grid-column: span 3; }
.f > label { font-size: 11.5px; color: var(--a-muted); }
.f input[type=text], .f input[type=number], .f select, .f textarea {
  background: var(--a-bg); border: 1px solid var(--a-line); color: var(--a-text);
  border-radius: 8px; padding: 9px 11px; width: 100%; outline: none;
}
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--a-accent); }
.f textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.f--check { flex-direction: row; align-items: center; gap: 8px; }
.f--check input { width: 16px; height: 16px; accent-color: var(--a-accent); }
.f--check label { font-size: 13px; color: var(--a-text-2); }

.color { display: flex; gap: 6px; align-items: center; }
.color input[type=color] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--a-line); border-radius: 8px; background: none; cursor: pointer; }

/* ---------- списки ---------- */
.item { border: 1px solid var(--a-line); border-radius: 9px; margin-bottom: 8px; background: var(--a-panel-2); }
.item__h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.item__n { width: 20px; height: 20px; border-radius: 5px; background: var(--a-bg); color: var(--a-muted); font-size: 11px; display: grid; place-items: center; flex: none; }
.item__t { font-size: 13px; color: var(--a-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.item__tools { display: flex; gap: 4px; }
.iconbtn {
  border: 1px solid transparent; background: none; color: var(--a-muted);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.iconbtn:hover { background: var(--a-bg); color: var(--a-text); }
.iconbtn.del:hover { color: var(--a-bad); }
.item__b { padding: 0 10px 10px; }
.strings__row { display: flex; gap: 6px; margin-bottom: 6px; }
.strings__row input { flex: 1; }

/* ---------- редактор графика ---------- */
.chart-ed { overflow-x: auto; padding-bottom: 6px; }
.chart-ed table { border-collapse: separate; border-spacing: 4px; }
.chart-ed th { font-weight: 500; font-size: 11px; color: var(--a-muted); text-align: left; padding: 0 2px; }
.chart-ed input { background: var(--a-bg); border: 1px solid var(--a-line); color: var(--a-text); border-radius: 7px; padding: 7px 8px; outline: none; }
.chart-ed input:focus { border-color: var(--a-accent); }
.chart-ed .cat { width: 96px; }
.chart-ed .val { width: 82px; text-align: right; font-variant-numeric: tabular-nums; }
.chart-ed .sname { width: 150px; }
.chart-ed .head-cell { display: flex; gap: 3px; align-items: center; }
.chart-ed .srow-tools { display: flex; gap: 3px; }

/* ---------- палитра ---------- */
.palette { display: flex; gap: 8px; flex-wrap: wrap; }
.palette__i { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--a-muted); }
.palette__i input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--a-line); border-radius: 7px; background: none; cursor: pointer; }

/* ---------- список клиентов ---------- */
.clients { display: grid; gap: 10px; }
.client {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--a-line); border-radius: var(--a-r); background: var(--a-panel); cursor: pointer;
}
.client:hover { border-color: var(--a-accent); }
.client.is-on { border-color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 8%, var(--a-panel)); }
.client b { display: block; font-size: 14.5px; }
.client span { display: block; font-size: 12.5px; color: var(--a-muted); }
.client__link { color: var(--a-accent); font-size: 12.5px; text-decoration: none; }

/* ---------- вход и уведомления ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(8,10,9,.94); backdrop-filter: blur(6px);
}
.gate__box { width: 340px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 14px; padding: 26px; }
.gate__box h2 { margin: 0 0 6px; font-size: 19px; }
.gate__box p { margin: 0 0 16px; color: var(--a-muted); font-size: 13px; }
.gate__box input { width: 100%; margin-bottom: 12px; background: var(--a-bg); border: 1px solid var(--a-line); color: var(--a-text); border-radius: 8px; padding: 10px 12px; outline: none; }
.gate__err { color: var(--a-bad); font-size: 13px; min-height: 18px; }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--a-panel-2); border: 1px solid var(--a-line); color: var(--a-text);
  padding: 11px 18px; border-radius: 10px; z-index: 200; opacity: 0; transition: .2s;
  box-shadow: 0 12px 40px rgba(0,0,0,.4); font-size: 13.5px;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-bad { border-color: var(--a-bad); }

.mode {
  font-size: 11.5px; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--a-line); color: var(--a-muted);
}
.mode.is-cloud { color: var(--a-accent); border-color: color-mix(in srgb, var(--a-accent) 40%, transparent); }
.empty { color: var(--a-muted); font-size: 13.5px; padding: 20px 0; }