/* ===== «Лабораторія»: картки, сітка, статистика, графік, термінал, бічна панель інструмента ===== */
.tool { display: grid; grid-template-columns: clamp(22.5rem, 17vw, 32rem) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
.tool-side { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; background: var(--bg-2); border-right: 1px solid var(--line); }
.tool-scroll { flex: 1; overflow-y: auto; padding: 1.375rem 1.375rem 2.5rem; display: grid; gap: 1rem; align-content: start;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2.375rem), transparent); mask-image: linear-gradient(#000 calc(100% - 2.375rem), transparent); }
.tool-buttons { padding: 0.875rem 1.375rem 1.125rem; border-top: 1px solid var(--line); background: var(--bg-2); display: grid; gap: 0.5rem; }
.tool-main { padding: 1.375rem clamp(1.625rem, 2.2vw, 3.5rem) 5rem; min-width: 0; }
.tool-title { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; font-size: 1.1875rem; }
.step-lbl { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4375rem; font-weight: 600; font-size: 0.8438rem; }
.step-lbl i { font-style: normal; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0.6875rem; }
.params3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.params3 label { display: grid; gap: 0.1875rem; font-size: 0.75rem; color: var(--muted); }
.checks { display: grid; gap: 0.5rem; margin-top: 0.75rem; } .check small { display: block; font-size: 0.75rem; }
.drop { border: 0.0938rem dashed var(--line); border-radius: 0.875rem; background: var(--card-2); padding: 0.75rem; transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card-2)); }
.drop-empty { text-align: center; padding: 0.625rem 0; color: var(--muted); cursor: pointer; } .drop-empty u { color: var(--accent-ink); }
.drop-file { display: flex; align-items: center; gap: 0.625rem; }
.drop-file img { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: 0.625rem; flex: none; }
.drop-file .meta { flex: 1; min-width: 0; } .drop-file .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.price-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; color: var(--muted); }
.price-line b { color: var(--text); font-size: 0.9375rem; }
.result-box { padding: 0.5625rem 0.75rem; border-radius: 0.6875rem; font-size: 0.8125rem; background: var(--card-2); border: 1px solid var(--line); }
.result-box.ok { border-color: var(--ok); color: var(--ok); } .result-box.bad { border-color: var(--danger); color: var(--danger); }
.busy { opacity: .6; pointer-events: none; }

/* ---------- лабораторія ---------- */
.lab-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.125rem; align-items: flex-end; margin-bottom: 1rem; --ctl: 2.625rem; }
.tb-field { display: grid; gap: 0.25rem; } .tb-field small { white-space: nowrap; }
.lab-toolbar .dd-btn, .lab-toolbar .seg, .lab-toolbar .btn, .lab-toolbar input[type=color] { height: var(--ctl); }
.lab-toolbar .dd { min-width: 10.625rem; } .lab-toolbar .seg { align-items: stretch; } .lab-toolbar .seg button { padding: 0 0.875rem; }
.lab-toolbar input[type=color].round { width: 3.5rem; border-radius: 0.75rem; padding: 0.1875rem; }
.lab { container-type: inline-size; }
.lab-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; --ar: 1.333; }
.compact .lab-cards { gap: 0.75rem; }
/* широка робоча область: усі чотири картки в один ряд, без порожнього місця праворуч */
@container (min-width: 104rem) { .lab-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 44rem) { .lab-cards { grid-template-columns: minmax(0, 1fr); } }
.lab-card { position: relative; padding: 0.75rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); min-width: 0; }
.lab-card h3 { margin: 0.125rem 0.25rem 0.625rem; font-size: 0.8125rem; font-weight: 600; }
.compact .lab-card h3 { font-size: 0.75rem; }
.lab-frame { position: relative; width: 100%; aspect-ratio: var(--ar); background: color-mix(in srgb, var(--bg) 70%, var(--card)); border-radius: 0.75rem; overflow: hidden; display: grid; place-items: center; }
.lab-frame img, .lab-frame canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.lab-frame canvas { image-rendering: pixelated; }
.lab-ph { padding: 0.875rem; text-align: center; color: var(--muted); font-size: 0.875rem; } .lab-ph.err { color: var(--danger); }
.compact .lab-ph { font-size: 0.7812rem; }
.lab-frame pre { position: absolute; inset: 0; margin: 0; padding: 0.875rem 1rem; overflow: hidden; white-space: pre-wrap; word-break: break-word; font: 0.7812rem/1.5 ui-monospace, Consolas, monospace; align-self: start; text-align: left; }
.lab-frame.textbox::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; pointer-events: none; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 70%, var(--card))); }
.lab-cap { margin: 0.5rem 0.25rem 0; font-size: 0.75rem; color: var(--muted); min-height: 1px; }
.lab-legend { margin-top: 0.625rem; } .lab-legend .bar { height: 0.625rem; border-radius: 0.375rem; } .lab-legend .ends { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--muted); margin-top: 0.125rem; }
.lab-stale { position: absolute; top: 0.625rem; right: 0.75rem; padding: 0.125rem 0.625rem; border-radius: 62.4375rem; font-size: 0.6875rem; font-weight: 700; background: #e0a73a; color: #1c1405; }
.lab-h2 { margin: 1.75rem 0 0.75rem; font-size: 1.125rem; }
.lab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.875rem; }
.stat-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.875rem 1rem; }
.stat-group h4 { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.0375rem; color: var(--accent-ink); }
.stat { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3125rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--text) 10%, transparent); font-size: 0.875rem; }
.stat:last-child { border: 0; } .stat .k { color: var(--muted); } .stat .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .stat .v small { display: block; font-weight: 400; font-size: 0.7188rem; }
.lab-empty { color: var(--muted); padding: 0.5rem 0.125rem; }
.lab-chart { margin-top: 1.25rem; padding: 0.875rem 1rem 1rem; }
.lab-chart-head { display: flex; flex-wrap: wrap; gap: 0.625rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.lab-chart-head h3 { font-size: 1rem; } .lab-chart-head .dd { min-width: 13.75rem; }
.lab-chart-wrap { position: relative; width: 100%; height: clamp(18.125rem, 30vh, 34rem); } .lab-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.lab-tip { position: absolute; pointer-events: none; padding: 0.3125rem 0.5625rem; border-radius: 0.5625rem; font-size: 0.75rem; white-space: nowrap; background: var(--card); border: 1px solid var(--line); transform: translate(-50%, -110%); }
.row-gap { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }

/* ---------- термінал ---------- */
.term { position: fixed; left: 0; top: 0; width: 32.5rem; height: 18.75rem; min-width: 18.75rem; min-height: 7.5rem; max-width: 96vw; max-height: 90vh; z-index: 250; display: flex; flex-direction: column; resize: both; overflow: hidden;
  background: rgba(13, 15, 19, .95); border: 1px solid #3a3f47; border-radius: 0.75rem; box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, .55); backdrop-filter: blur(0.375rem); font: 0.75rem/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #cdd5e0; }
.term.min { height: auto !important; min-height: 0; resize: none; } .term.min .term-body { display: none; }
.term-bar { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.625rem; background: #1b1e24; cursor: grab; user-select: none; touch-action: none; border-bottom: 1px solid #2c3037; }
.term-dots i { display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.3125rem; border-radius: 50%; background: #ff5f57; } .term-dots i:nth-child(2) { background: #febc2e; } .term-dots i:nth-child(3) { background: #28c840; }
.term-bar b { flex: 1; font-size: 0.75rem; color: #aeb6c2; }
.term-actions button { border: 0; background: transparent; color: #aeb6c2; padding: 0.125rem 0.5rem; border-radius: 0.375rem; } .term-actions button:hover { background: #ffffff1a; color: #fff; }
.term-body { flex: 1; overflow: auto; padding: 0.5rem 0.75rem 0.625rem; }
.term-body .ln { white-space: pre-wrap; word-break: break-word; } .term-body .t { color: #5f6773; margin-right: 0.5rem; } .term-body .s { color: #7a8aa3; margin-right: 0.5rem; }
.term-body .ln.warn, .term-body .ln.warn .s { color: #ffd166; } .term-body .ln.error, .term-body .ln.error .s { color: #ff6b6b; }

@media (max-width: 1000px) { .tool { grid-template-columns: 1fr; } .tool-side { position: static; height: auto; } .tool-scroll { mask-image: none; -webkit-mask-image: none; } .lab-cards { grid-template-columns: 1fr; } }
.lab-ph.tips { text-align: left; max-height: 100%; overflow: auto; align-self: stretch; } .lab-ph.tips ul { margin: 0.5rem 0 0; padding-left: 1.1rem; } .lab-ph.tips li { margin: 0.3rem 0; color: var(--text); }
.version-hint { display: block; margin-top: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.version-hint[hidden] { display: none; }