/* ── Debug Console ────────────────────────────── */
    .dbg-select, .dbg-btn {
      font: inherit;
      font-size: 0.86em;
      padding: 0.5em 0.9em;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      cursor: pointer;
    }
    .dbg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .dbg-btn-primary {
      background: var(--gold);
      border-color: var(--gold);
      color: #fff;
      font-weight: 700;
    }
    .dbg-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
    .dbg-btn-report {
      background: var(--link);
      border-color: var(--link);
      color: #fff;
      font-weight: 700;
    }
    .dbg-btn-report:hover:not(:disabled) { filter: brightness(1.1); }
    .dbg-console {
      width: 100%;
      height: 320px;
      overflow-y: auto;
      margin: 0;
      padding: 0.8em 1em;
      background: var(--code-bg);
      color: var(--fg);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.78em;
      line-height: 1.5;
      border-radius: 8px;
      border: 1px solid var(--border);
      white-space: pre-wrap;
      word-break: break-all;
    }
    .dbg-console:empty::before {
      content: 'Log output appears here once connected — or drop a saved .log.txt here to read it.';
      color: var(--fg-dim);
      font-style: italic;
    }
    /* A file being dragged over the console */
    .dbg-console.dbg-drop {
      outline: 2px dashed var(--gold);
      outline-offset: -4px;
    }
    .dbg-line-error {
      color: #ff6b6b;
      font-weight: 600;
      border-left: 3px solid #e53e3e;
      padding-left: 6px;
      margin-left: -9px;
    }
    .dbg-line-warn {
      color: #d69b1f;
      border-left: 3px solid #d69b1f;
      padding-left: 6px;
      margin-left: -9px;
    }
    .dbg-line-info {
      color: #4fa8e8;
      border-left: 3px solid #4fa8e8;
      padding-left: 6px;
      margin-left: -9px;
    }
    /* Console-generated notices (reboot boundaries, stall warnings,
       reconnect status). Deliberately unlike a log line — full-width
       tinted band rather than the thin left rule used for matched
       firmware lines — so nobody reads one as device output. */
    .dbg-notice {
      display: block;
      margin: 4px -9px 4px -9px;
      padding: 4px 6px;
      border-radius: 3px;
      font-weight: 600;
      white-space: pre-wrap;
    }
    .dbg-notice-warn  { background: rgba(214,155,31,0.18); color: #e8b73f;
                        border-left: 3px solid #d69b1f; }
    .dbg-notice-error { background: rgba(214,60,60,0.18);  color: #ef6b6b;
                        border-left: 3px solid #d63c3c; }
    .dbg-notice-info  { background: rgba(79,168,232,0.15); color: #6fbef5;
                        border-left: 3px solid #4fa8e8; }
    .dbg-line-flash { animation: dbg-flash 1.4s ease-out 1; }
    @keyframes dbg-flash {
      0%   { background: rgba(255,214,0,0.45); }
      100% { background: transparent; }
    }
    .dbg-filter {
      font: inherit;
      font-size: 0.86em;
      width: 100%;
      padding: 0.5em 0.8em;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
    }
    .dbg-filter:disabled { opacity: 0.5; }
    /* Filter box, severity pills and the line counter share one row and
       wrap on narrow screens. */
    .dbg-filter-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5em 0.8em;
      width: 100%;
    }
    .dbg-filter-row .dbg-filter { flex: 1 1 14em; width: auto; min-width: 10em; }
    .dbg-sev-bar {
      display: inline-flex;
      flex-wrap: wrap;   /* the row-comment above promises these wrap on a
                            narrow screen; flex:none kept the pills locked in
                            one line, so on a ~320px phone the bar ran a few
                            px past the viewport. Let the pills themselves
                            wrap and the bar shrink when there's no room. */
      gap: 0.25em;
      flex: 0 1 auto;
    }
    .dbg-sev {
      font: inherit;
      font-size: 0.74em;
      padding: 0.3em 0.65em;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg-dim);
      cursor: pointer;
      font-weight: 600;
    }
    .dbg-sev:hover { color: var(--fg); }
    .dbg-sev.dbg-sev-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
    .dbg-sev-error.dbg-sev-on { background: #e53e3e; border-color: #e53e3e; color: #fff; }
    .dbg-sev-warn.dbg-sev-on  { background: #d69b1f; border-color: #d69b1f; color: #fff; }
    .dbg-sev-info.dbg-sev-on  { background: #2d7fc1; border-color: #2d7fc1; color: #fff; }
    .dbg-line-count {
      flex: none;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      margin-left: auto;
    }
    .dbg-diag-wrap {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.6em 0.8em;
      background: var(--bg);
    }
    .dbg-diag-head {
      display: flex;
      align-items: baseline;
      gap: 0.6em;
      margin-bottom: 0.5em;
      font-size: 0.86em;
    }
    /* prev / next flagged line, right-aligned in the panel head */
    .dbg-diag-nav {
      margin-left: auto;
      display: inline-flex;
      gap: 0.3em;
    }
    .dbg-diag-nav button {
      font: inherit;
      font-size: 0.8em;
      padding: 0.15em 0.55em;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg-mid);
      cursor: pointer;
    }
    .dbg-diag-nav button:hover { color: var(--fg); border-color: var(--fg-dim); }
    .dbg-diag-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4em;
    }
    .dbg-chip {
      font: inherit;
      font-size: 0.78em;
      padding: 0.35em 0.7em;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid transparent;
      font-weight: 600;
      transition: transform 0.08s;
    }
    .dbg-chip:hover { transform: translateY(-1px); }
    .dbg-chip-error { background: rgba(229,62,62,0.15); border-color: rgba(229,62,62,0.5); color: #e53e3e; }
    .dbg-chip-warn  { background: rgba(214,155,31,0.15); border-color: rgba(214,155,31,0.5); color: #a9760f; }
    .dbg-chip-info  { background: rgba(79,168,232,0.15); border-color: rgba(79,168,232,0.5); color: #2d7fc1; }
    /* Per-session device tags. Every line carries one so two devices'
       interleaved logs stay readable at a glance; the palette deliberately
       sits apart from the severity colors (red/amber/blue) so a colored
       tag is never mistaken for an error/warn/info marking. Mid-luminance
       hues so they hold up on both the light and dark code background. */
    .dbg-tag { font-weight: 700; }
    .dbg-tag-0 { color: #2f9bd6; }
    .dbg-tag-1 { color: #9a6ff0; }
    .dbg-tag-2 { color: #3aa856; }
    .dbg-tag-3 { color: #d6569b; }
    .dbg-tag-4 { color: #d67f2f; }
    .dbg-tag-5 { color: #2fae9e; }
    /* Per-session status strip — one chip per open port. Click = mute
       toggle (the ✕ inside is the only way to close), so a stray click
       can never kill a live capture. */
    .dbg-sess-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4em;
    }
    .dbg-sess-chip {
      font: inherit;
      font-size: 0.78em;
      padding: 0.3em 0.65em;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--fg);
      display: inline-flex;
      align-items: center;
      gap: 0.45em;
      font-weight: 600;
    }
    .dbg-sess-chip.dbg-sess-muted { opacity: 0.55; }
    .dbg-sess-chip.dbg-sess-muted .dbg-sess-name { text-decoration: line-through; }
    .dbg-sess-dot {
      width: 0.6em;
      height: 0.6em;
      border-radius: 50%;
      display: inline-block;
      flex: none;
    }
    .dbg-dot-0 { background: #2f9bd6; }
    .dbg-dot-1 { background: #9a6ff0; }
    .dbg-dot-2 { background: #3aa856; }
    .dbg-dot-3 { background: #d6569b; }
    .dbg-dot-4 { background: #d67f2f; }
    .dbg-dot-5 { background: #2fae9e; }
    .dbg-sess-state { color: var(--fg-dim); font-weight: 400; }
    /* Boot count on a device chip — ↻3 reads as a crash loop at a glance */
    .dbg-sess-reboots {
      color: #d69b1f;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .dbg-sess-x {
      margin-left: 0.1em;
      padding: 0 0.15em;
      opacity: 0.55;
      font-weight: 700;
    }
    .dbg-sess-x:hover { opacity: 1; color: #e53e3e; }
    .dbg-autoconnect {
      font-size: 0.8em;
      color: var(--fg-dim);
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      cursor: pointer;
      user-select: none;
    }
    /* Timeline markers — deliberately louder than notices. A mark is the
       user saying "I did the thing NOW"; it is the anchor every nearby
       line from every device gets read against, so it must be findable
       while scrolling fast. */
    .dbg-mark {
      background: rgba(201,138,0,0.22);
      color: var(--gold);
      border-left: 3px solid var(--gold);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-align: center;
    }