/* animl.chromoshub.ru — просмотр файлов AnIML */
:root {
    --bg: #0d1117; --bg-2: #161b22; --bg-3: #1c2430; --card: #10151d;
    --line: #26303c; --line-2: #313d4d;
    --txt: #e6edf3; --txt-2: #9aa7b4; --txt-3: #6b7684;
    --accent: #58b0ff; --accent-2: #2f81f7; --peak: #d29922;
    --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", "DejaVu Sans Mono", "Consolas", monospace;
    --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* палитра линий графика */
    --s1: #58b0ff; --s2: #d29922; --s3: #3fb950; --s4: #f778ba; --s5: #a371f7; --s6: #ff7b72;
}
:root[data-theme="light"] {
    --bg: #f4f6fa; --bg-2: #ffffff; --bg-3: #eef1f6; --card: #ffffff;
    --line: #dde3ec; --line-2: #c8d1de;
    --txt: #16202f; --txt-2: #52617a; --txt-3: #808d9b;
    --accent: #1f6feb; --accent-2: #1a5fd0; --peak: #b8860b;
    --s1: #1f6feb; --s2: #b8860b; --s3: #1a7f37; --s4: #bf3989; --s5: #8250df; --s6: #cf222e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--ui); background: var(--bg); color: var(--txt); min-height: 100vh; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.brand__mark { font-size: 18px; }
.actions { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; height: 32px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.lang__btn { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 0 9px; border: 0; background: var(--bg-3); color: var(--txt-2); cursor: pointer; }
.lang__btn + .lang__btn { border-left: 1px solid var(--line-2); }
.lang__btn:hover { color: var(--accent); }
.lang__btn.is-active { background: var(--accent-2); color: #fff; }
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); color: var(--txt-2); cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .i-moon { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-moon { display: block; }

.toolbar { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.field { display: inline-flex; align-items: center; gap: 8px; }
.field__lbl { font-size: 13px; color: var(--txt-2); }
.select { font-family: var(--ui); font-size: 13px; background: var(--bg-3); color: var(--txt); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; cursor: pointer; max-width: 260px; }
.toolbar__or { color: var(--txt-3); font-size: 13px; }
.btn { display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--accent-2); background: var(--accent-2); color: #fff; }
.btn:hover { background: var(--accent); }
.fname { font-family: var(--mono); font-size: 12px; color: var(--txt-2); }
.toolbar__spacer { flex: 1; }
.status { font-size: 12px; color: var(--txt-3); }
.status.err { color: #f85149; }

.wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--txt-2); border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: 12px; padding: 1px 9px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt-2); }
.mono { font-family: var(--mono); } .muted { color: var(--txt-3); font-size: 12px; }
.head-right { display: inline-flex; align-items: center; gap: 10px; }
.head-left { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.select--sm { padding: 4px 8px; font-size: 12px; max-width: 260px; }
.xsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-3); }
.mini-btn { font-size: 12px; padding: 4px 10px; border-radius: 7px; cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt-2); }
.mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.search { font-family: var(--ui); font-size: 12px; padding: 4px 9px; width: 150px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt); }
.search:focus { outline: none; border-color: var(--accent); }

/* ---------- график ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px 14px 0; }
.legend:empty { display: none; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt-2); cursor: pointer; user-select: none; }
.lg__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.lg.is-off { opacity: .45; text-decoration: line-through; }
.lg:hover { border-color: var(--accent); }

.chart { position: relative; width: 100%; min-height: 340px; }
.chart svg { width: 100%; height: auto; display: block; }
.placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--txt-3); font-size: 14px; text-align: center; padding: 0 20px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--txt-3); font-family: var(--mono); font-size: 10px; }
.chart .axis-title { fill: var(--txt-2); font-family: var(--ui); font-size: 12px; }
.chart .sig { fill: none; stroke-width: 1.3; stroke-linejoin: round; }
.chart .sig-1 { stroke: var(--s1); } .chart .sig-2 { stroke: var(--s2); } .chart .sig-3 { stroke: var(--s3); }
.chart .sig-4 { stroke: var(--s4); } .chart .sig-5 { stroke: var(--s5); } .chart .sig-6 { stroke: var(--s6); }
.chart .sel-rect { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 1; }
.chart #amHit { cursor: crosshair; }
.chart.pan-ready #amHit { cursor: grab; }
.chart.panning #amHit { cursor: grabbing; }
.chart .cross { stroke: var(--txt-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .cross-dot { fill: var(--card); stroke-width: 2; }
.chart .tip-bg { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1; }
.chart .tip-tx { fill: var(--txt); font-family: var(--mono); font-size: 11px; }
.chart-hint { padding: 8px 14px 12px; font-size: 12px; }

/* ---------- таблицы ---------- */
.cols { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 16px; align-items: stretch; flex: 1 1 auto; min-height: 340px; }
.cols > .panel { display: flex; flex-direction: column; min-height: 0; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
.kv td:first-child { color: var(--txt-3); white-space: nowrap; width: 42%; }
.kv td:last-child { color: var(--txt); font-family: var(--mono); word-break: break-word; }
.kv tr.sec td { background: var(--bg-2); color: var(--txt-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--ui); }
.kv tr:last-child td { border-bottom: 0; }

.table-wrap { overflow: auto; flex: 1 1 auto; min-height: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--bg-2); text-align: left; padding: 8px 12px; color: var(--txt-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; font-family: var(--mono); }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]:hover { color: var(--accent); }
.tbl th.sort-asc::after { content: ' ▲'; }
.tbl th.sort-desc::after { content: ' ▼'; }
.tbl td { padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--txt); vertical-align: top; }
.tbl tbody tr:hover { background: var(--bg-3); }
.tbl tr.grp td { background: var(--bg-2); color: var(--txt-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; position: sticky; top: 28px; }
.tbl .p-val { font-family: var(--mono); word-break: break-word; }
.tbl .p-unit { color: var(--txt-3); font-family: var(--mono); white-space: nowrap; }
.tbl img.pval-img { max-width: 220px; max-height: 140px; border: 1px solid var(--line-2); border-radius: 6px; }
.tbl .plot-mark { color: var(--accent); }

.tabs { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.tab { font-family: var(--ui); font-size: 12px; padding: 4px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--txt-3); cursor: pointer; }
.tab:hover { color: var(--accent); }
.tab.is-active { background: var(--bg-3); border-color: var(--line-2); color: var(--txt); }

/* ---------- дерево документа ---------- */
.tree { font-family: var(--mono); font-size: 12px; padding: 10px 12px; line-height: 1.55; }
.tree ul { list-style: none; margin: 0; padding-left: 15px; border-left: 1px solid var(--line); }
.tree > ul { padding-left: 2px; border-left: 0; }
.tree li { position: relative; }
.tree .tg { color: var(--accent); cursor: default; }
.tree .at { color: var(--txt-3); }
.tree .av { color: var(--peak); }
.tree .tx { color: var(--txt); }
.tree .tw { cursor: pointer; user-select: none; color: var(--txt-3); display: inline-block; width: 12px; }
.tree li.collapsed > ul { display: none; }
.tree li.collapsed > .tw::before { content: '▸'; }
.tree li > .tw::before { content: '▾'; }
.tree li.leaf > .tw::before { content: '·'; }

.empty { padding: 22px 14px; color: var(--txt-3); font-size: 13px; }

.toolbar.drag-over { outline: 2px dashed var(--accent); outline-offset: -3px; }
.drop-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--accent); font-weight: 600; font-size: 14px; border-radius: 12px; }
.toolbar.drag-over .drop-hint { display: flex; }

@media (max-width: 820px) {
    body { display: block; }
    .wrap { flex: none; min-height: 0; }
    .cols { grid-template-columns: 1fr; flex: none; min-height: 0; }
    .cols > .panel { display: block; }
    .table-wrap { max-height: 65vh; }
}

/* ---------- печать ---------- */
@media print {
    @page { margin: 14mm; }
    :root {
        --bg: #fff; --bg-2: #fff; --bg-3: #f4f6fa; --card: #fff;
        --line: #cbd5e1; --line-2: #b0bccc;
        --txt: #101820; --txt-2: #333; --txt-3: #555;
        --accent: #1f6feb; --accent-2: #1a5fd0; --peak: #b8860b;
        --s1: #1f6feb; --s2: #b8860b; --s3: #1a7f37; --s4: #bf3989; --s5: #8250df; --s6: #cf222e;
    }
    body { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .topbar .actions, .toolbar, .chart-hint, #resetZoom, .mini-btn, .search,
    #amHover, #amHit, .sel-rect, .drop-hint { display: none !important; }
    .topbar { background: #fff; border-bottom: 1px solid #ccc; }
    .wrap { max-width: none; margin: 0; padding: 0; gap: 12px; }
    .panel { box-shadow: none; border: 1px solid #ccc; }
    .panel--chart, .chart, .chart svg { break-inside: avoid; }
    .cols { grid-template-columns: 1fr; }
    .table-wrap { max-height: none; overflow: visible; }
    .tbl th, .tbl tr.grp td { position: static; }
    .tbl tbody tr { break-inside: avoid; }
}