/* 🔧 sys-1054: scope-клас .tc-page щоб не впливати на інші сторінки Dev Tools */
/* Canon B: header height token */
.devtools-header { --header-h: 96px; }

/* ── Локальні токени-fallbacks (canonical з alerts-style-adc.css) ──
   Ці semantic-токени визначені у alerts-style-adc.css під .al-page scope,
   а testing-center його не імпортує. Без них heatmap/badges/progress-bar
   мають "ламані" візуали. Оголошуємо локально на .tc-page. */
.dev-tools-scope.tc-page {
  --bg-critical:        rgba(193, 68, 24, 0.10);
  --bg-high:            rgba(227, 111, 61, 0.09);
  --bg-medium:          rgba(224, 196, 137, 0.08);
  --bg-info:            rgba(124, 143, 136, 0.07);
  --border-critical:    rgba(193, 68, 24, 0.42);
  --border-high:        rgba(227, 111, 61, 0.38);
  --border-medium:      rgba(224, 196, 137, 0.32);
  --border-info:        rgba(124, 143, 136, 0.30);
  --accent-brass-bright: var(--sp-brass-light, #c8a855);
  --max-content:        1400px;
  --teardown-color:     var(--log-warn);
}

.tc-page * { margin: 0; padding: var(--sp-card-pad, 0); box-sizing: border-box; }

body.tc-page {
    /* background і color — з .devtools-body в devtools-style-adc.css */
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  /* Canon K vignette — warm dark radials + blueprint grid */
  body.tc-page::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%),
      radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%),
      radial-gradient(ellipse at 0% 50%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.28) 100%),
      radial-gradient(ellipse at 100% 50%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.28) 100%),
      linear-gradient(rgba(197,139,58,0.018) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(90deg, rgba(197,139,58,0.018) 1px, transparent 1px) 0 0 / 32px 32px;
  }

  /* ── STATUS STRIP (під хедером) ── */
  .status-strip {
    display: none; /* сховано — інфо доступна через Системний монітор */
    align-items: center; gap: 12px;
    padding: var(--sp-space, 6px 28px);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-muted);
    max-width: var(--max-content); margin: 0 auto;
  }
  .status-strip-item {
    display: flex; align-items: center; gap: var(--sp-gap, 5px);
  }
  .status-strip-sep {
    color: rgba(255,255,255,0.08);
  }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--text-muted), var(--border-metal)); }
  .dot-green { background: var(--log-ok); box-shadow: 0 0 6px var(--log-ok); animation: blink 2s infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
  .status-pill {
    display: flex; align-items: center; gap: var(--sp-gap, 5px);
    font-size: 11px; font-family: var(--font-mono);
  }

  /* ── NAV TABS ── */
  .nav-tabs {
    background: transparent;
    border-bottom: 1px solid var(--border-metal);
    padding: var(--sp-card-pad, 0 24px);
    display: flex;
    gap: 0;
    align-items: stretch;
    max-width: var(--max-content); margin: 0 auto;
  }
  .tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: var(--sp-space, 10px 14px);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    display: flex; align-items: center; gap: var(--sp-gap, 6px);
    white-space: nowrap;
    position: relative;
    margin-bottom: -1px;
  }
  .tab-btn:hover { color: var(--text-body); }
  .tab-btn:active { opacity: .8; }
  .tab-btn.active {
    color: var(--accent-brass);
    border-bottom-color: var(--accent-brass);
  }
  .tab-count {
    background: rgba(92,68,48,0.18); border-radius: var(--forge-radius);
    padding: 1px 6px; font-size: 10px; font-family: var(--font-mono);
    transition: all .15s;
  }
  .tab-btn.active .tab-count {
    background: rgba(197,139,58,0.18);
    color: var(--accent-brass);
  }
  .tc-tab-icon {
    font-size: 15px;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
  }

  /* ── MAIN ── */
  .main { flex: 1; padding: var(--sp-card-pad, 20px 24px); max-width: var(--max-content); width: 100%; margin: 0 auto; }

  /* ── SECTION ── */
  .section { display: none; }
  .section.active { display: block; }

  /* ── CARD (forge panel) ── */
  .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius);
    overflow: hidden;
    margin-bottom: var(--sp-space-4);
    position: relative;
    box-shadow: var(--forge-shadow);
  }
  /* Canon E rivets — 4x HTML spans .al-module-rivet--tl/tr/bl/br (SSOT: dt-panels.css) */
  .card-header {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(197,139,58,0.25);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-space-3);
    background: linear-gradient(180deg, rgba(197,139,58,0.10) 0%, rgba(197,139,58,0.05) 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
  }
  .card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--accent-brass);
    font-family: var(--font-ui);
  }
  .card-title-icon { font-size: 14px; color: var(--accent-brass); }
  .card-body { padding: 12px 16px; }

  /* ── GRID ── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

  /* ── BUTTONS (forge canon §8) ── */
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: var(--forge-radius); border: 1px solid transparent;
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    letter-spacing: 0.10em; text-transform: uppercase;
    cursor: pointer; transition: all .15s; white-space: nowrap;
    box-shadow: var(--forge-bevel);
  }
  .btn-primary {
    background: rgba(197,139,58,0.14);
    border-color: rgba(197,139,58,0.45);
    color: var(--accent-brass);
  }
  .btn-primary:hover {
    background: rgba(197,139,58,0.22);
    border-color: rgba(197,139,58,0.65);
    box-shadow: var(--forge-bevel), 0 2px 8px rgba(197,139,58,0.15);
  }
  .btn-primary:active { background: rgba(197,139,58,0.10); box-shadow: var(--forge-inset); }
  .btn-success {
    background: rgba(107,142,78,0.12);
    border-color: rgba(107,142,78,0.40);
    color: var(--log-ok);
  }
  .btn-success:hover {
    background: rgba(107,142,78,0.20);
    border-color: rgba(107,142,78,0.60);
  }
  .btn-danger {
    background: rgba(193,68,24,0.12);
    border-color: rgba(193,68,24,0.40);
    color: var(--log-critical);
  }
  .btn-danger:hover {
    background: rgba(193,68,24,0.20);
    border-color: rgba(193,68,24,0.60);
  }
  .btn-ghost {
    background: var(--bg-elevated); border-color: var(--border-metal);
    color: var(--text-muted);
  }
  .btn-ghost:hover { border-color: var(--border-bright); color: var(--text-body); }
  .btn-ghost:active { box-shadow: var(--forge-inset); }
  .btn-sm { padding: 6px 12px; font-size: 10px; }
  .btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(0.5); }
  .btn:focus-visible {
    outline: none;
    border-color: var(--border-focus, rgba(197,139,58,0.65));
    box-shadow: var(--forge-bevel), 0 0 0 2px rgba(197,139,58,0.18);
  }
  .btn-danger:focus-visible {
    border-color: rgba(193,68,24,0.70);
    box-shadow: var(--forge-bevel), 0 0 0 2px rgba(193,68,24,0.18);
  }

  /* ── FORM (forge inputs §8) ── */
  .form-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
  .form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .form-label {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.12em; text-transform: uppercase;
    font-family: var(--font-ui);
  }
  .form-input, .form-select, .form-textarea {
    background: rgba(0,0,0,0.35); border: 1px solid var(--border-metal);
    color: var(--text-bright); border-radius: var(--forge-radius);
    padding: 8px 10px;
    font-family: var(--font-mono); font-size: 11px;
    transition: border-color .15s, box-shadow .15s; outline: none; width: 100%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: rgba(197,139,58,0.55);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 2px rgba(197,139,58,0.10);
  }
  .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
  .form-select option { background: var(--bg-elevated); color: var(--text-body); }
  .form-textarea { resize: vertical; min-height: 70px; }

  /* ── SMOKE TEST ── */
  .smoke-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-space, 20px);
  }
  .smoke-summary {
    display: flex; gap: 16px;
  }
  .smoke-stat {
    text-align: center; padding: 12px 20px;
    background: var(--bg-elevated); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius); min-width: 80px;
    box-shadow: var(--forge-bevel);
  }
  .smoke-stat-num { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }
  .smoke-stat-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.10em; margin-top: 2px; font-family: var(--font-ui);
  }
  .num-green { color: var(--log-ok); }
  .num-red   { color: var(--log-critical); }
  .num-yellow{ color: var(--log-warn); }
  .num-total { color: var(--text-bright); }

  .smoke-group { margin-bottom: 20px; }
  .smoke-group-title {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: var(--sp-space-2); padding-bottom: 6px;
    border-bottom: 1px solid var(--border-dim);
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-ui);
  }
  .module-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
  }

  .smoke-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--forge-radius);
    margin-bottom: 4px; font-family: var(--font-mono);
    font-size: 11px; background: var(--bg-elevated);
    border: 1px solid var(--border-dim);
    transition: border-color .15s;
  }
  .smoke-row:hover { border-color: var(--border-metal); }
  .smoke-row.pass { border-left: 2px solid var(--log-ok); }
  .smoke-row.fail { border-left: 2px solid var(--log-critical); }
  .smoke-row.warn { border-left: 2px solid var(--log-warn); }
  .smoke-row.pending { border-left: 2px solid var(--border-metal); }
  .smoke-icon { font-size: 12px; width: 14px; flex-shrink: 0; }
  .smoke-endpoint { flex: 1; color: var(--text-body); }
  .smoke-desc { flex: 1; color: var(--text-muted); font-size: 10px; }
  .smoke-ms {
    font-size: 10px; color: var(--text-muted);
    background: var(--bg-surface); border-radius: var(--forge-radius);
    padding: 1px 6px;
  }
  .smoke-ms.fast { color: var(--log-ok); }
  .smoke-ms.mid  { color: var(--log-warn); }
  .smoke-ms.slow { color: var(--log-critical); }
  .smoke-status { font-size: 10px; font-weight: 600; width: 40px; text-align: right; }
  .s-ok   { color: var(--log-ok); }
  .s-fail { color: var(--log-critical); }
  .s-wait { color: var(--text-muted); }

  .progress-bar-wrap {
    background: var(--bg-elevated); border: 1px solid var(--border-dim);
    border-radius: var(--forge-radius);
    margin: var(--sp-space-3) 0;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
  }
  .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-brass-dim), var(--accent-brass), var(--accent-brass-bright));
    transition: width .3s ease;
    border-radius: var(--forge-radius);
  }

  /* ── SMOKE HEATMAP ── */
  .smoke-heatmap {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--sp-space, 6px);
    margin-bottom: var(--sp-space, 14px);
    padding: var(--sp-space, 10px 0);
    border-bottom: 1px solid var(--border-metal);
  }
  .hm-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border-radius: var(--forge-radius);
    background: var(--bg-elevated); border: 1px solid var(--border-dim);
    cursor: default; transition: all .15s;
    user-select: none;
  }
  .hm-cell:hover { border-color: var(--border-metal); transform: translateY(-1px); }
  .hm-cell.hm-pass { border-color: var(--border-info); background: var(--bg-info); }
  .hm-cell.hm-pass:hover {
    border-color: rgba(107,142,78,0.55); background: rgba(107,142,78,0.10);
    box-shadow: 0 0 10px rgba(107,142,78,0.20), 0 2px 6px rgba(0,0,0,0.4);
  }
  .hm-cell.hm-fail { border-color: var(--border-critical); background: var(--bg-critical); }
  .hm-cell.hm-fail:hover {
    border-color: rgba(193,68,24,0.60); background: rgba(193,68,24,0.14);
    box-shadow: 0 0 10px rgba(193,68,24,0.20), 0 2px 6px rgba(0,0,0,0.4);
  }
  .hm-cell.hm-warn { border-color: var(--border-medium); background: var(--bg-medium); }
  .hm-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-metal); transition: all .3s;
  }
  .hm-cell.hm-pass .hm-dot {
    background: var(--log-ok);
    box-shadow: 0 0 4px rgba(107,142,78,0.5), inset 0 1px 2px rgba(0,0,0,0.3);
    animation: status-forge-ok 3s ease-in-out infinite;
  }
  .hm-cell.hm-fail .hm-dot {
    background: var(--log-critical);
    box-shadow: 0 0 6px rgba(193,68,24,0.5), inset 0 1px 2px rgba(0,0,0,0.3);
    animation: forge-pulse 2s ease-in-out infinite;
  }
  .hm-cell.hm-warn .hm-dot { background: var(--log-warn); }
  .hm-label {
    font-size: 9px; font-family: var(--font-ui);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.10em;
    transition: color .15s;
  }
  .hm-cell.hm-pass .hm-label { color: var(--log-ok); }
  .hm-cell.hm-fail .hm-label { color: var(--log-critical); }
  .hm-cell.hm-warn .hm-label { color: var(--log-warn); }
  .hm-stat {
    font-size: 8px; font-family: var(--font-mono); color: var(--text-muted); opacity: .7;
  }

  /* ── EVENT SIMULATOR ── */
  .event-tags {
    display: flex; flex-wrap: wrap; gap: var(--sp-gap, 6px); margin-bottom: 16px;
  }
  .event-tag {
    padding: 3px 10px; border-radius: var(--forge-radius); font-size: 10px;
    font-family: var(--font-mono);
    cursor: pointer;
    border: 1px solid;
    transition: all .15s; font-weight: 500;
    letter-spacing: 0.06em;
  }
  .event-tag:hover { opacity: .85; box-shadow: var(--forge-bevel); }
  .event-tag.selected { box-shadow: var(--forge-bevel), 0 0 4px rgba(197,139,58,0.30); }

  .event-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-gap, 10px);
    margin-bottom: var(--sp-space, 14px);
  }

  .emit-log {
    background: var(--bg-void); border: 1px solid var(--border-dim);
    border-radius: var(--forge-radius); padding: 12px; height: 180px;
    overflow-y: auto; font-family: var(--font-mono); font-size: 11px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(232,219,178,0.05);
  }
  .log-line { padding: 2px 0; border-bottom: 1px solid var(--border-dim); }
  .log-line:last-child { border: none; }
  .log-ts { color: var(--text-muted); margin-right: 8px; }
  .log-ok   { color: var(--log-ok); }
  .log-err  { color: var(--log-critical); }
  .log-info { color: var(--log-info); }
  .log-warn { color: var(--log-warn); }

  .event-result {
    background: var(--bg-surface); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius); padding: 12px; margin-top: 12px;
    font-family: var(--font-mono); font-size: 11px; display: none;
    box-shadow: var(--forge-bevel);
  }
  .event-result.visible { display: block; }
  .result-label {
    font-size: 10px; color: var(--text-muted); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-ui);
  }

  /* ── SEED SCRIPTS ── */
  .seed-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-space, 12px);
  }
  .seed-card {
    background: var(--bg-surface); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius);
    transition: border-color .15s, box-shadow .15s; position: relative; overflow: hidden;
    box-shadow: var(--forge-shadow);
  }
  .seed-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(197,139,58,0.3), transparent);
  }
  .seed-card:hover { border-color: var(--border-bright); box-shadow: var(--forge-shadow), 0 0 8px rgba(197,139,58,0.08); }
  .seed-card-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 8px;
  }
  .seed-card-name { font-size: 12px; font-weight: 600; color: var(--text-bright); font-family: var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; }
  .seed-card-desc { font-size: 11px; color: var(--text-body); line-height: 1.5; margin-bottom: 12px; }
  .seed-card-meta {
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .seed-tag {
    font-size: 9px; font-family: var(--font-mono);
    padding: 2px 8px; border-radius: var(--forge-radius);
    background: var(--bg-elevated); border: 1px solid var(--border-dim); color: var(--text-muted);
  }
  .seed-card-footer {
    margin-top: var(--sp-space-3); padding-top: var(--sp-space-2);
    border-top: 1px solid var(--border-dim);
    display: flex; align-items: center; justify-content: space-between;
  }
  .seed-cmd { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); }
  .seed-run-btn {
    background: rgba(197,139,58,0.08); border: 1px solid rgba(197,139,58,0.35);
    color: var(--accent-brass); padding: 6px 12px; border-radius: var(--forge-radius);
    font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
    font-family: var(--font-ui); font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    box-shadow: var(--forge-bevel);
  }
  .seed-run-btn:hover { background: rgba(197,139,58,0.16); border-color: rgba(197,139,58,0.55); box-shadow: var(--forge-bevel), 0 2px 8px rgba(197,139,58,0.12); }

  .seed-running {
    position: absolute; inset: 0;
    background: rgba(13,9,7,0.88);
    display: none; align-items: center; justify-content: center;
    border-radius: var(--forge-radius); font-family: var(--font-mono); font-size: 12px;
    color: var(--accent-ember);
  }
  .seed-card.loading .seed-running { display: flex; }

  /* ── NOTES / CHECKLIST ── */
  .notes-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }

  .notes-sidebar { display: flex; flex-direction: column; gap: 8px; }
  .module-nav-item {
    padding: 8px 12px; border-radius: var(--forge-radius); cursor: pointer;
    font-size: 11px; font-weight: 500; border: 1px solid transparent;
    display: flex; align-items: center; justify-content: space-between;
    transition: all .15s; font-family: var(--font-ui);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .module-nav-item:hover { background: var(--bg-elevated); border-color: var(--border-dim); }
  .module-nav-item.active { background: var(--bg-elevated); border-color: var(--border-metal); }
  .module-nav-left { display: flex; align-items: center; gap: 8px; }
  .module-nav-dot {
    width: 8px; height: 8px; border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  }
  .module-nav-count {
    font-size: 10px; font-family: var(--font-mono);
    background: var(--bg-elevated); border-radius: var(--forge-radius); padding: 1px 8px;
    border: 1px solid var(--border-dim);
  }

  .notes-main { display: flex; flex-direction: column; gap: var(--sp-gap, 14px); }

  .checklist-module { display: none; }
  .checklist-module.active { display: block; }

  .checklist-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-space, 14px);
  }
  .checklist-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-bright);
    font-family: var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .checklist-progress {
    font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
  }

  .check-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px; border-radius: var(--forge-radius);
    background: var(--bg-elevated); border: 1px solid var(--border-dim);
    margin-bottom: var(--sp-space-1); transition: border-color .15s;
  }
  .check-item:hover { border-color: var(--border-metal); }
  .check-item.done { opacity: .5; }
  .check-cb { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent-brass); margin-top: 1px; }
  .check-text { flex: 1; font-size: 11px; color: var(--text-body); }
  .check-item.done .check-text { text-decoration: line-through; color: var(--text-muted); }
  .check-tag {
    font-size: 9px; font-family: var(--font-mono);
    padding: 2px 6px; border-radius: var(--forge-radius); flex-shrink: 0;
  }
  .check-del {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; padding: 0 2px;
    transition: color .15s; opacity: 0;
  }
  .check-item:hover .check-del { opacity: 1; }
  .check-del:hover { color: var(--log-critical); }

  .add-check-row {
    display: flex; gap: 8px; margin-top: 12px;
  }

  /* free notes */
  .notes-area-wrap { margin-top: 16px; }
  .notes-area-label {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px;
    font-family: var(--font-ui);
  }

  /* ── LOG (history) ── */
  .test-log-wrap {
    background: var(--bg-void); border: 1px solid var(--border-dim);
    border-radius: var(--forge-radius); height: 320px; overflow-y: auto;
    font-family: var(--font-mono); font-size: 11px; padding: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(232,219,178,0.05);
  }
  .tlog-line {
    display: flex; gap: 8px; padding: 3px 0;
    border-bottom: 1px solid var(--border-dim);
  }
  .tlog-line:last-child { border: none; }
  .tlog-ts { color: var(--text-muted); flex-shrink: 0; width: 55px; }
  .tlog-type {
    flex-shrink: 0; width: 70px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .tlog-msg { color: var(--text-body); }
  .type-smoke  { color: var(--log-info); }
  .type-emit   { color: var(--accent-brass); }
  .type-seed   { color: var(--log-ok); }
  .type-error  { color: var(--log-critical); }
  .type-info   { color: var(--text-muted); }
  .type-action { color: var(--accent-ember); }

  /* ── MISC ── */
  .badge {
    display: inline-block; font-size: 9px; font-family: var(--font-ui);
    font-weight: 700; padding: 2px 8px; border-radius: var(--forge-radius);
    text-transform: uppercase; letter-spacing: 0.10em;
  }
  .badge-system    { background:var(--bg-elevated); color:var(--text-muted); }
  .badge-observer  { background:var(--bg-surface); color:var(--mod-observer); }
  .badge-publisher { background:var(--bg-elevated); color:var(--mod-publisher); }
  .badge-executor  { background:var(--bg-elevated); color:var(--mod-executor); }
  .badge-applicant { background:var(--bg-surface); color:var(--mod-applicant); }
  .badge-nexus     { background:var(--bg-surface); color:var(--mod-nexus); }
  .badge-challenger{ background:var(--bg-elevated); color:var(--mod-challenger); }
  .badge-paymaster { background:var(--bg-void); color:var(--mod-paymaster); }

  .divider { border: none; border-top: 1px solid var(--border-metal); margin: 16px 0; }

  .empty-state {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted); font-size: 12px; font-family: var(--font-ui);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .empty-state-icon { font-size: 32px; margin-bottom: 12px; color: var(--accent-brass-dim); }

  /* scrollbar */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: var(--bg-void); }
  ::-webkit-scrollbar-thumb { background: var(--border-metal); border-radius: var(--forge-radius); }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent-brass); }

  /* selection — forge amber highlight */
  ::selection {
    background: rgba(197, 139, 58, 0.28);
    color: var(--text-bright);
  }
  ::-moz-selection {
    background: rgba(197, 139, 58, 0.28);
    color: var(--text-bright);
  }

  .spin { animation: spin .7s linear infinite; }

  .fade-in { animation: card-enter .2s ease; }

  /* ── ACTIONS TAB ── */
  .action-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
  .action-filter-btn {
    background: var(--bg-elevated); border: 1px solid var(--border-metal); color: var(--text-muted);
    padding: 6px 12px; border-radius: var(--forge-radius); font-size:10px; font-family:var(--font-ui);
    cursor:pointer; transition:all .15s; font-weight:600;
    display:flex; align-items:center; gap:4px;
    letter-spacing: 0.10em; text-transform: uppercase;
    box-shadow: var(--forge-bevel);
  }
  .action-filter-btn:hover { border-color: var(--border-bright); color: var(--text-body); }
  .action-filter-btn.active {
    border-color: var(--accent-brass);
    color: var(--accent-brass);
    background: rgba(197,139,58,0.10);
  }

  .action-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px;
  }
  .action-card {
    background: var(--bg-surface); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius); overflow:hidden; transition:border-color .15s;
    box-shadow: var(--forge-shadow);
  }
  .action-card:hover { border-color: var(--border-bright); }
  .action-card-danger { border-color: var(--border-critical); }
  .action-card-danger:hover { border-color: rgba(193,68,24,0.55); }
  /* Hazard stripe — Canon §8 pattern for destructive action cards */
  .action-card-danger::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: repeating-linear-gradient(
      45deg,
      var(--log-critical) 0, var(--log-critical) 6px,
      transparent 6px, transparent 12px
    );
    pointer-events: none;
    opacity: 0.55;
    z-index: 2;
  }

  .action-card-header {
    display:flex; align-items:center; gap:8px; padding: 8px 12px; cursor:pointer;
    background: linear-gradient(180deg, rgba(92,68,48,0.06) 0%, transparent 100%);
  }
  .action-card-header:hover { background: rgba(197,139,58,0.04); }

  .action-method {
    font-size:9px; font-weight:700; padding: 2px 6px; border-radius: var(--forge-radius);
    font-family:var(--font-mono); letter-spacing: 0.08em;
    flex-shrink:0; min-width:46px; text-align:center;
    box-shadow: var(--forge-bevel);
  }
  /* HTTP Methods — mapped to forge severity colors */
  .action-method.get    { background: var(--bg-info);     color: var(--mod-applicant); border: 1px solid var(--border-info); }
  .action-method.post   { background: rgba(107,142,78,0.12); color: var(--mod-observer); border: 1px solid rgba(107,142,78,0.35); }
  .action-method.put    { background: rgba(107,142,78,0.08); color: var(--mod-nexus); border: 1px solid rgba(107,142,78,0.25); }
  .action-method.patch  { background: var(--bg-medium);   color: var(--mod-publisher); border: 1px solid var(--border-medium); }
  .action-method.delete { background: var(--bg-critical); color: var(--log-critical); border: 1px solid var(--border-critical); }

  .action-path {
    font-family:var(--font-mono); font-size:11px; color:var(--text-body);
    flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .action-badges { display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .action-badge-bot { font-size:12px; color: var(--accent-brass); }
  .action-badge-danger { font-size:12px; color: var(--log-critical); }
  .action-toggle-icon { color: var(--text-muted); font-size:10px; flex-shrink:0; margin-left:2px; }

  .action-desc {
    font-size:11px; color: var(--text-muted); padding: 0 12px 8px; line-height:1.5;
  }
  .action-form {
    padding: 10px 12px; border-top: 1px solid var(--border-dim);
    background: rgba(0,0,0,0.20);
  }
  .action-params-row {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:var(--sp-space-2); margin-bottom:var(--sp-space-2);
  }
  .action-response {
    margin-top: 8px; padding: 10px; background: var(--bg-void);
    border: 1px solid var(--border-dim); border-radius: var(--forge-radius);
    font-family:var(--font-mono); font-size:11px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  }

  /* ── ENV SWITCHER (forge dropdown) ── */
  .env-switcher {
    position: relative; display: flex; align-items: center; gap: 6px;
    background: var(--bg-elevated); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius); padding: 4px 10px; cursor: pointer;
    font-size: 11px; color: var(--text-body); font-family: var(--font-mono);
    user-select: none; transition: border-color .15s;
    box-shadow: var(--forge-bevel);
  }
  .env-switcher:hover { border-color: var(--border-bright); }
  .env-dot-pill {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    transition: background .3s;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  }
  .env-dot-sm { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
  .env-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bg-elevated); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius); padding: 4px; min-width: 160px; z-index: 100;
    box-shadow: var(--forge-shadow);
  }
  .env-menu.open { display: block; }
  .env-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--forge-radius); cursor: pointer;
    font-size: 11px; font-family: var(--font-mono); color: var(--text-body);
    transition: background .1s;
  }
  .env-item:hover { background: var(--bg-hover); }

  /* ── COLORED LOG BORDERS ── */
  .tlog-line[data-type="ACTION"] { border-left: 2px solid var(--accent-ember); padding-left: 6px; }
  .tlog-line[data-type="SMOKE"]  { border-left: 2px solid var(--log-info); padding-left: 6px; }
  .tlog-line[data-type="EMIT"]   { border-left: 2px solid var(--accent-brass); padding-left: 6px; }
  .tlog-line[data-type="ERROR"]  { border-left: 2px solid var(--log-critical); padding-left: 6px; }
  .tlog-line[data-type="INFO"]   { border-left: 2px solid var(--border-metal); padding-left: 6px; }
  .tlog-line.historic { opacity: 0.5; border-left: 2px solid var(--border-dim); padding-left: 6px; }

  /* ── SMOKE DETAIL (response inspector) ── */
  .smoke-detail {
    display: none; padding: 10px 14px; margin-bottom: 4px;
    background: var(--bg-void); border: 1px solid var(--border-dim);
    border-top: none; border-radius: 0 0 var(--forge-radius) var(--forge-radius);
    font-family: var(--font-mono); font-size: 10px;
  }
  .smoke-row.expanded { border-radius: var(--forge-radius) var(--forge-radius) 0 0; }
  .smoke-row.expanded + .smoke-detail { display: block; }
  .smoke-row { cursor: pointer; }

  /* ── SMOKE GROUP CHECKBOX ── */
  .smoke-group-cb {
    width: 13px; height: 13px; cursor: pointer;
    accent-color: var(--accent-brass); flex-shrink: 0;
  }
  .smoke-batch-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: var(--sp-space-4); padding: var(--sp-space-2) var(--sp-space-3);
    background: var(--bg-elevated); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius);
    box-shadow: var(--forge-bevel);
  }
  .smoke-batch-bar span { font-size: 11px; color: var(--text-muted); }

  /* ── FIELD HINTS ── */
  .field-hint {
    font-size: 10px; color: var(--text-muted); margin-top: 2px;
    line-height: 1.4;
  }

  /* ── ACTION OVERWRITE WARNING ── */
  .action-overwrite-warn {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 10px; border-radius: var(--forge-radius); margin-bottom: 8px;
    background: var(--bg-void); border: 1px solid var(--border-metal);
    font-size: 10px; color: var(--accent-brass-hover); line-height: 1.5;
  }
  .action-overwrite-warn.warn-safe {
    background: var(--bg-void); border-color: rgba(107,142,78,0.35); color: var(--log-ok);
  }
  .action-overwrite-warn.warn-danger {
    background: var(--bg-critical); border-color: var(--border-critical); color: var(--log-critical);
  }
  .action-load-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; padding: 3px 8px; border-radius: var(--forge-radius);
    background: var(--bg-elevated); border: 1px solid var(--border-metal);
    color: var(--log-info);
    cursor: pointer;
    font-family: var(--font-mono);
    transition: border-color .15s, color .15s; margin-bottom: 6px;
  }
  .action-load-btn:hover { border-color: var(--log-info); }
  .action-load-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* ── SCENARIOS ── */
  .scenario-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-space, 14px);
  }
  .scenario-card {
    background: var(--bg-surface); border: 1px solid var(--border-metal);
    border-radius: var(--forge-radius);
    box-shadow: var(--forge-shadow);
    transition: border-color .15s;
    position: relative; overflow: hidden;
  }
  .scenario-card:hover { border-color: var(--border-bright); }
  .scenario-card.running { border-color: var(--accent-brass); box-shadow: var(--forge-shadow), 0 0 8px rgba(197,139,58,0.12); }
  .scenario-card.done-ok  { border-color: var(--log-ok); }
  .scenario-card.done-err { border-color: var(--log-critical); }

  .scenario-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-dim);
    background: linear-gradient(180deg, rgba(92,68,48,0.06) 0%, transparent 100%);
  }
  .scenario-title-row {
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;
  }
  .scenario-icon {
    font-size: 18px; flex-shrink: 0; line-height: 1; color: var(--accent-brass);
  }
  .scenario-name {
    font-size: 12px; font-weight: 600; color: var(--text-bright); flex: 1;
    font-family: var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .scenario-tags {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
  }
  .scenario-tag {
    font-size: 9px; font-family: var(--font-ui); font-weight: 600;
    padding: 2px 8px; border-radius: var(--forge-radius); text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .scenario-desc {
    font-size: 11px; color: var(--text-body); line-height: 1.5;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-dim);
  }

  .scenario-steps {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-dim);
  }
  .scenario-step {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 11px;
  }
  .scenario-step + .scenario-step { border-top: 1px solid var(--border-dim); }
  .step-num {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-elevated); border: 1px solid var(--border-metal);
    font-size: 9px; font-family: var(--font-mono); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all .15s;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  }
  .step-num.s-wait   { background: var(--bg-elevated); color: var(--text-muted); }
  .step-num.s-run    { background: var(--bg-elevated); border-color: var(--accent-brass); color: var(--accent-brass); animation: spin .8s linear infinite; }
  .step-num.s-ok     { background: var(--bg-surface); border-color: var(--log-ok); color: var(--log-ok); }
  .step-num.s-err    { background: var(--bg-void); border-color: var(--log-critical); color: var(--log-critical); }
  .step-label { flex: 1; color: var(--text-body); }
  .step-type-badge {
    font-size: 9px; font-family: var(--font-mono); padding: 1px 6px;
    border-radius: var(--forge-radius);
  }
  .step-type-event      { background: var(--bg-surface); color: var(--accent-brass); border: 1px solid rgba(197,139,58,0.25); }
  .step-type-action     { background: var(--bg-high); color: var(--log-warn); border: 1px solid var(--border-high); }
  .step-type-get        { background: var(--bg-info); color: var(--log-info); border: 1px solid var(--border-info); }
  .step-type-concurrent { background: rgba(107,142,78,0.08); color: var(--mod-nexus); border: 1px solid rgba(107,142,78,0.30); }
  .step-ms { font-size: 9px; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }
  .step-repeat {
    font-size: 9px; font-family: var(--font-mono); padding: 1px 6px;
    border-radius: var(--forge-radius); background: var(--bg-elevated); color: var(--text-muted); flex-shrink: 0;
    border: 1px solid var(--border-dim);
  }
  .step-num.s-run .step-progress { font-size: 8px; }

  .step-num.s-ok  { box-shadow: 0 0 4px rgba(107,142,78,0.4), inset 0 1px 2px rgba(0,0,0,0.5); }
  .step-num.s-err { box-shadow: 0 0 4px rgba(193,68,24,0.4), inset 0 1px 2px rgba(0,0,0,0.5); }

  /* SVG connector між кроками */
  .step-connector {
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 0 8px; /* вирівнювання під step-num */
    height: 10px; flex-shrink: 0;
  }
  .step-connector svg { display: block; overflow: visible; }
  .connector-fill { transition: stroke-dashoffset .35s ease-out; }

  /* Teardown секція */
  .teardown-section {
    margin: 0; padding: var(--sp-card-pad, 8px 16px 10px);
    border-top: 1px dashed rgba(245,158,11,.3);
    background: rgba(245,158,11,.03);
  }
  .teardown-header {
    font-size: 9px; font-weight: 600; color: var(--teardown-color);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--sp-space, 6px); display: flex; align-items: center; gap: var(--sp-gap, 6px);
    opacity: .8;
  }
  .teardown-step {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 11px;
    border-top: 1px solid rgba(197,139,58,0.08);
  }
  .teardown-step:first-of-type { border-top: none; }
  /* teardown steps — use warm amber from log-warn not raw rgba */
  .step-num.s-td-wait { background: rgba(224,196,137,0.06); border-color: rgba(224,196,137,0.25); color: var(--log-warn); opacity: 0.6; }
  .step-num.s-td-run  { background: rgba(224,196,137,0.12); border-color: var(--log-warn); color: var(--log-warn); animation: spin .8s linear infinite; }
  .step-num.s-td-ok   { background: var(--bg-surface); border-color: var(--log-ok); color: var(--log-ok); box-shadow: 0 0 4px rgba(107,142,78,0.4); }
  .step-num.s-td-err  { background: var(--bg-void); border-color: var(--log-critical); color: var(--log-critical); box-shadow: 0 0 4px rgba(193,68,24,0.4); }

  /* timeMock badge */
  .scenario-time-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-family: var(--font-mono); padding: 2px 8px;
    border-radius: var(--forge-radius); background: var(--bg-high); border: 1px solid var(--border-high);
    color: var(--log-warn); letter-spacing: 0.08em;
  }

  .scenario-params {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-dim);
    display: flex; flex-direction: column; gap: 8px;
  }
  .scenario-params-title {
    font-size: 9px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-ui);
  }
  .scenario-params-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
  }

  .scenario-footer {
    padding: 8px 16px; display: flex; align-items: center; gap: 8px;
  }
  .scenario-result {
    flex: 1; font-size: 10px; font-family: var(--font-mono); color: var(--text-muted);
  }
  .scenario-result.ok  { color: var(--log-ok); }
  .scenario-result.err { color: var(--log-critical); }

  /* ── PINNED NOTES SIDEBAR ── */
  .content-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; max-width: var(--max-content); margin: 0 auto; padding: 0 24px; }
  .content-wrap .main { flex: 1; min-width: 0; overflow-y: auto; }

  .pinned-notes {
    width: 280px; flex-shrink: 0;
    background: var(--bg-surface); border-left: 1px solid var(--border-metal);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .pinned-notes.hidden { display: none; }

  .pinned-notes-header {
    padding: 8px 12px; border-bottom: 1px solid var(--border-metal);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(197,139,58,0.08) 0%, transparent 100%);
  }
  .pinned-notes-title {
    font-size: 11px; font-weight: 600; color: var(--accent-brass);
    font-family: var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase;
  }
  .pinned-close-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 2px 4px; border-radius: var(--forge-radius); transition: color .15s; line-height: 1;
  }
  .pinned-close-btn:hover { color: var(--text-body); }

  .pinned-module-nav {
    padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
  }
  .pinned-module-btn {
    padding: 3px 8px; border-radius: var(--forge-radius);
    font-size: 10px; font-weight: 600; font-family: var(--font-mono);
    cursor: pointer; border: 1px solid transparent;
    background: var(--bg-elevated); color: var(--text-muted); transition: all .15s;
    letter-spacing: 0.06em;
  }
  .pinned-module-btn:hover { background: var(--bg); }

  .pinned-content {
    flex: 1; overflow-y: auto; padding: var(--sp-card-pad, 10px);
    display: flex; flex-direction: column; gap: var(--sp-gap, 6px);
  }
  .pinned-progress { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); margin-bottom: 2px; }

  /* Pin кнопка у nav-tabs */
  .pin-notes-btn {
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted); padding: var(--sp-card-pad, 5px 9px); border-radius: var(--forge-radius);
    font-size: 14px; cursor: pointer; margin-left: auto;
    transition: all .15s; flex-shrink: 0;
  }
  .pin-notes-btn:hover { color: var(--text-body); border-color: var(--border-metal); }
  .pin-notes-btn.active { color: var(--accent-brass); border-color: var(--accent-brass); background: rgba(197,139,58,0.10); }

/* ═══════════════════════════════════════════════════════
   STEAMPUNK UPGRADE — Background Scene v5.0 (tc-)
   ═══════════════════════════════════════════════════════ */

/* Background Scene — повноекранний фіксований фон */
.tc-bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}
.tc-bg-scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Scan Line — ambient горизонтальна лінія що повільно рухається вниз */
.al-scan-line {
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 165, 74, 0.08) 20%,
    rgba(212, 165, 74, 0.15) 50%,
    rgba(212, 165, 74, 0.08) 80%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
  animation: tc-scan-move 12s linear infinite;
  top: 0;
}
@keyframes tc-scan-move {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Canonical breakpoints (Фаза 2)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .dev-tools-scope .grid-2,
  .dev-tools-scope .grid-3 { grid-template-columns: 1fr; }
  .dev-tools-scope .notes-layout { grid-template-columns: 1fr; }
  .dev-tools-scope .content-wrap { padding: 0 12px; }
}

@media (max-width: 480px) {
  .dev-tools-scope .main { padding: 12px 10px; }
  .dev-tools-scope .card-body { padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — Canon I compliance
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .al-scan-line {
    animation: none;
    display: none;
  }
  .card {
    transition: none;
  }
  .btn-run, .btn-ghost, .action-btn {
    transition: none;
  }
  .hm-cell {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONSISTENCY 2026-05-13 — Dev Tools cross-page normalization       */
/* (per DevTools-Facts-Scan-2026-05-13.md)                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* A. body.overflow-x — уніфіковано до clip (було visible/hidden mix) */
body.devtools-body { overflow-x: clip !important; }

/* B. .al-bg-scene fixed — fallback якщо локальний CSS не задає */
.dev-tools-scope .al-bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}