/* ============================ tokenizér ============================ */
.tok-chips { display: flex; flex-wrap: wrap; gap: 3px; line-height: 1.9; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-height: 48px; }
.tok-chip { position: relative; padding: 2px 4px; border-radius: 5px; font-family: var(--mono); font-size: 13px; white-space: pre; }
.tok-chip sub { font-size: 8px; opacity: .6; margin-left: 2px; vertical-align: super; }
.tok-chip.c0 { background: var(--accent-soft); } .tok-chip.c1 { background: var(--cyan-soft); } .tok-chip.c2 { background: var(--violet-soft); } .tok-chip.c3 { background: var(--warn-soft); } .tok-chip.c4 { background: var(--ok-soft); } .tok-chip.c5 { background: var(--surface-3); }
.tok-chip.is-byte { background: var(--bad-soft); color: var(--bad); outline: 1px dashed var(--bad); }

/* ============================ sampler ============================ */
.sampler-dist { display: grid; gap: 5px; }
.sd-row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; font-size: 13px; }
.sd-row code { background: var(--surface-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-track { position: relative; height: 16px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.sd-track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; }
.sd-orig { background: var(--line-strong); opacity: .5; }
.sd-new { background: var(--accent); }
.sampler-out { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.sampler-out li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.sampler-out li.is-odd { border-color: var(--warn); background: var(--warn-soft); }
.sampler-out small { color: var(--muted); font-size: 11px; }

/* ============================ kontextové okno ============================ */
.ctx-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: middle; }
.ctx-bar { display: flex; height: 36px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); position: relative; }
.ctx-bar > span { min-width: 0; }
.ctx-free { background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-3) 6px, var(--surface-3) 12px); }
.ctx-needle { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #000; box-shadow: 0 0 0 1px #fff; }
.ctx-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.ctx-legend .bad { color: var(--bad); }
.ctx-curve { width: 100%; height: auto; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); }

/* ============================ injection lab ============================ */
.inj { display: grid; gap: 14px; }
.inj-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.inj-levels { display: flex; gap: 6px; }
.inj-lv { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 800; position: relative; }
.inj-lv.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.inj-lv.is-solved { border-color: var(--ok); color: var(--ok); }
.inj-lv.is-on.is-solved { background: var(--ok); color: #fff; }
.inj-title { display: grid; }
.inj-title strong { font-size: 18px; }
.inj-scene { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.inj-roles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inj-roles .flow-arrow { width: 30px; }
.inj-to { max-width: 260px; font-family: var(--mono); font-size: 13px; }
.inj-out:empty { display: none; }
.inj-result { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.inj-result.is-breach { border-color: var(--bad); background: var(--bad-soft); }
.inj-result.is-blocked { border-color: var(--ok); background: var(--ok-soft); }
.inj-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.inj-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; font-size: 14px; line-height: 1.5; }
.inj-steps .s-leak, .inj-steps .s-send { color: var(--bad); font-weight: 600; }
.inj-steps .s-block, .inj-steps .s-safe { color: var(--ok); }
.inj-verdict { font-size: 14.5px; line-height: 1.55; padding-top: 8px; border-top: 1px dashed var(--line-strong); }
.inj-help summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--muted); padding: 6px 0; }

/* ============================ röntgen ============================ */
.xray-stage { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; color: #111; margin: 4px 0; }
.xray-doc { padding: 22px; font-size: 14px; line-height: 1.6; }
.xray-doc strong { font-size: 15px; }
.xray-hotspot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color: #888; font-size: 13px; cursor: crosshair; display: grid; place-items: end center; padding-bottom: 10px; }
.xray-hotspot.is-hit { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.xray-stage.is-xray { background: #000000; color: #cfe; }
.xray-stage.is-xray .xray-doc { opacity: .35; filter: grayscale(.5); }
.xray-layers { padding: 14px; display: grid; gap: 8px; border-top: 1px dashed #34343d; }
.xray-layer { padding: 10px 12px; border-radius: 10px; background: rgba(255,45,75,.12); border: 1px solid var(--bad); }
.xray-layer p { margin: 4px 0 0; font-size: 13.5px; color: #f4f4f6; }
.xray-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }
.xray-stage.is-xray .xray-tag { color: #ff8fa0; }

/* ============================ filescan / drop ============================ */
.findings { display: grid; gap: 8px; }
.filescan-out:empty, .prov-out:empty { display: none; }
.filescan-out h4 { margin: 4px 0 8px; }

/* ============================ neviditeľné znaky ============================ */
.smug-reveal { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.smug-mark { background: var(--bad); color: #fff; border-radius: 4px; padding: 0 2px; font-size: 11px; }

/* ============================ pôvod obsahu ============================ */
.prov-grid { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.prov-img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.prov-shot:empty { display: none; }

/* ============================ prompt lab ============================ */
.promptlab-score { display: grid; gap: 8px; }
.pl-meter { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.pl-meter .bar { height: 12px; }
.pl-meter b { font-variant-numeric: tabular-nums; font-size: 18px; }
.pl-crit { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-out:empty { display: none; }
.ai-out { margin-top: 6px; }

/* ============================ štruktúrovač ============================ */
.struct-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.struct-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.struct-row { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.struct-text { font-size: 14px; line-height: 1.4; }
.struct-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.struct-schema summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 700; padding: 6px 0; }
.tone-chip-violet { background: var(--violet-soft); color: var(--violet); }
.tone-chip-accent { background: var(--accent-soft); color: var(--accent); }
.tone-chip-cyan { background: var(--cyan-soft); color: var(--cyan); }
.tone-chip-warn { background: var(--warn-soft); color: var(--warn); }
.tone-chip-bad { background: var(--bad-soft); color: var(--bad); }
.tone-chip-ok { background: var(--ok-soft); color: var(--ok); }

@media (max-width: 860px) {
  .prov-grid { grid-template-columns: 1fr; }
  .inj-to { max-width: 100%; }
  .sd-row { grid-template-columns: 84px 1fr 38px; }
}

/* ============================ code runner ============================ */
.coderunner { display: grid; gap: 12px; }
.codebox--edit { background: #0b0b0d; }
.code-edit { width: 100%; min-height: 220px; border: 0; background: #0b0b0d; color: #e4e4e8; font-family: var(--mono); font-size: 13px; line-height: 1.6; padding: 14px 16px; resize: vertical; tab-size: 2; white-space: pre; overflow-wrap: normal; }
.code-edit:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.cr-results:empty { display: none; }
.cr-score { font-size: 18px; font-weight: 800; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 8px; }
.cr-score.is-all { background: var(--ok-soft); color: var(--ok); }
.cr-case { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; margin-bottom: 4px; font-size: 13px; }
.cr-case.is-pass { background: var(--ok-soft); }
.cr-case.is-fail { background: var(--bad-soft); }
.cr-case code { background: transparent; font-size: 12.5px; word-break: break-all; }
.cr-case small { display: block; color: var(--muted); margin-top: 4px; }
.cr-case b { color: var(--ink); }

/* ============================ staviteľ špecifikácie ============================ */
.spec-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec-preview { margin-top: 4px; }
@media (max-width: 760px) { .spec-fields { grid-template-columns: 1fr; } }

/* ============================ diff review ============================ */
.diff { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #0b0b0d; font-family: var(--mono); font-size: 13px; }
.diff-line { display: grid; grid-template-columns: 28px 1fr; gap: 4px; padding: 2px 8px; color: #e4e4e8; }
.diff-line code { background: transparent; white-space: pre-wrap; word-break: break-word; }
.diff-gutter { color: #6e6e7a; text-align: center; }
.diff-add { background: rgba(58,208,138,.12); }
.diff-add .diff-gutter { color: #3ad08a; }
.diff-line.is-click { cursor: pointer; }
.diff-line.is-click:hover { background: rgba(60,200,224,.18); }
.diff-line.is-picked { outline: 2px solid var(--cyan); outline-offset: -2px; }
.diff-line.is-bug.is-picked { outline-color: var(--ok); }
.dr-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-why { display: grid; gap: 6px; margin-top: 4px; }
.dr-why .label { margin-bottom: 2px; }
.diffreview .seg button.is-solved { color: var(--ok); }

/* ============================ SQL hranie ============================ */
.sqlplay { display: grid; gap: 12px; }
.sql-out:empty { display: none; }
.sql-out .table-wrap { margin-bottom: 4px; }
.sql-schema summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 700; padding: 6px 0; }
.sqlplay .code-edit { min-height: 130px; }

/* ============================ 3D embeddingy ============================ */
.embed3d { display: grid; gap: 10px; }
.embed3d .viz3d-stage { cursor: grab; }
.embed-form { gap: 8px; }
.embed-out:empty { display: none; }

/* ============================ chunker ============================ */
.chunk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.chunk { border-radius: 10px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.chunk.is-risky { border-color: var(--bad); }
.chunk.is-good { border-color: var(--ok); }
.chunk-n { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.chunk pre { margin: 0; padding: 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); max-height: 180px; overflow: auto; }

/* ============================ agent builder (Copilot Studio simulátor) ============================ */
.agentbuilder { display: grid; gap: 14px; }
.ab-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-score { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ab-score .bar { height: 10px; }
.ab-score b { font-variant-numeric: tabular-nums; font-size: 16px; }
.ab-score--sec.is-ok { background: var(--ok-soft); } .ab-score--sec.is-ok .bar i { background: var(--ok); }
.ab-score--sec.is-warn { background: var(--warn-soft); } .ab-score--sec.is-warn .bar i { background: var(--warn); }
.ab-score--sec.is-bad { background: var(--bad-soft); } .ab-score--sec.is-bad .bar i { background: var(--bad); }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ab-build { display: grid; gap: 10px; }
.ab-sec { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ab-sec-title { display: block; padding: 8px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ab-sec-body { padding: 12px; display: grid; gap: 8px; }
.ab-chip { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 650; text-align: left; }
.ab-chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ab-sec-body > .ab-chip { display: inline-block; }
.ab-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ab-row input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; }
.ab-row .tag { margin-left: 2px; }
.ab-tools { display: grid; gap: 6px; }
.ab-tool { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.ab-tool code { background: transparent; font-size: 12.5px; }
.ab-kind { font-size: 9.5px; }
.seg--xs { padding: 2px; }
.seg--xs button { font-size: 11px; padding: 3px 8px; }
.ab-gov { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-test { display: grid; gap: 10px; align-content: start; position: sticky; top: 8px; }
.ab-test-head { display: flex; justify-content: space-between; align-items: center; }
.ab-chat { min-height: 220px; max-height: 420px; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ab-tests { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-issues { border-radius: 12px; }
.ab-issues summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 6px 0; }
.ab-issues .finding { margin-bottom: 6px; }

/* ============================ pilot canvas ============================ */
.pilotcanvas { display: grid; gap: 14px; }
.pc-verdict { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); }
.pc-verdict .ring { --size: 76px; }
.pc-verdict--ok { background: var(--ok-soft); } .pc-verdict--ok .ring { background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--surface-3) 0); }
.pc-verdict--warn { background: var(--warn-soft); } .pc-verdict--warn .ring { background: conic-gradient(var(--warn) calc(var(--p)*1%), var(--surface-3) 0); }
.pc-verdict--bad { background: var(--bad-soft); } .pc-verdict--bad .ring { background: conic-gradient(var(--bad) calc(var(--p)*1%), var(--surface-3) 0); }
.pc-verdict strong { font-size: 20px; }
.pc-verdict p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.canvas-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.canvas-cell.is-filled span { color: var(--ok); }
@media (max-width: 1000px) { .ab-grid { grid-template-columns: 1fr; } .ab-test { position: static; } .canvas-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .ab-scores, .canvas-grid { grid-template-columns: 1fr; } }