:root {
    /* ── Comnet brand palette ── */
    --comnet-blue:  #286295;   /* Pantone 647 C  — primary */
    --comnet-blue-light: #4A90C2; /* Lighter brand-blue tint — banner only */
    --comnet-gray:  #A7A7A7;   /* Cool Gray 7 C  */
    --legacy-gray:  #D0D0D0;   /* Cool Gray 3 C  */
    --cloud-white:  #F8F8F8;   /* Cool Gray 1 C  */
    --charcoal:     #000000;   /* Process Black C */

    --bg: var(--cloud-white);
    --surface: #ffffff;
    --border: var(--legacy-gray);
    --accent: var(--comnet-blue);
    --accent-deep: #1d4a72;
    --text: #1a1a1a;
    --muted: #555555;
    --success: #1e7e45;
    --danger: #c0392b;
    --radius: 10px;
    --font: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    min-height: 100vh;
  }

  /* ── Header ── */
  header {
    background: var(--comnet-blue-light);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  }
  .logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; overflow: hidden; }
  .logo img { height: 22px; display: block; flex-shrink: 0; }
  .badge {
    background: rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
  .dot { display: inline-block; margin-right: 6px; }
  .dot.on { animation: blink 1.0s ease-in-out infinite; }
  .logo .app-suffix {
    color: #fff;
    font-family: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-left: 1px solid rgba(255,255,255,0.35);
    padding-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Mobile header subtitle ── */
  .header-mobile-title {
    display: none;
    width: 100%;
    color: rgba(255,255,255,0.85);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding-top: 6px;
  }
  @media (max-width: 420px) {
    header { flex-wrap: wrap; }
    .logo .app-suffix { display: none; }
    .header-mobile-title { display: block; }
  }

  /* ── Nav tabs ── */
  nav {
    background: var(--surface);
    border-bottom: 1px solid var(--legacy-gray);
    position: sticky;
    top: var(--header-h, 53px);
    z-index: 99;
  }
  .nav-inner {
    display: flex;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
  }
  nav button {
    flex: 1;
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--font);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
  }
  nav button.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* ── Views ── */
  .view { display: none; padding: 16px; max-width: 860px; margin: 0 auto; }
  .view.active { display: block; }

  /* ── Cards ── */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
  }
  .card-label {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--comnet-blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 10px 18px;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
    transition: opacity 0.15s, transform 0.1s;
    font-variant-emoji: text;
  }
  .btn:active { opacity: 0.8; transform: scale(0.98); }
  .btn.danger { background: var(--danger); color: #fff; }
  .btn.secondary { background: #fff; color: var(--comnet-blue); border: 1px solid var(--comnet-blue); }
  .btn.success { background: var(--success); color: #fff; }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ── QR scanner ── */
  #scanner-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    margin-bottom: 12px;
    display: none;
  }
  #qr-video { width: 100%; height: 100%; object-fit: cover; }
  .scan-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .scan-frame {
    width: 60%; aspect-ratio: 1;
    border: 2px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
  }
  .scan-line {
    position: absolute;
    width: 60%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: scanline 2s ease-in-out infinite;
  }
  @keyframes scanline {
    0% { top: 20%; } 100% { top: 80%; }
  }

  /* ── Device info display ── */
  .info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
  }
  .info-row:last-child { border-bottom: none; }
  .info-key { color: var(--muted); font-weight: 600; flex: 0 0 104px; white-space: nowrap; }
  /* Value column fills the row (flex:1) so every control — text inputs, read-only
     boxes, the relay dropdown — is the same width, matching the Add Device form. */
  .info-val { flex: 1; margin-left: 12px; color: var(--text); font-weight: 700; text-align: right; word-break: break-all; }

  /* ── Status badge ── */
  .status-badge {
    display: inline-block;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .status-idle { background: var(--legacy-gray); color: #555; }
  .status-sending { background: #dcEAF5; color: var(--comnet-blue); }
  .status-ok { background: #ddf0e4; color: var(--success); }
  .status-err { background: #f7dedb; color: var(--danger); }

  /* ── Device list ── */
  .device-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .device-item:hover { border-color: var(--accent); }
  @keyframes devFlash {
    0%, 100% { background: var(--surface); border-color: var(--border); }
    50%      { background: #dcEAF5; border-color: var(--comnet-blue); }
  }
  .device-item.flash    { animation: devFlash 0.7s ease-in-out 5; }
  .device-item.selected { border-color: var(--comnet-blue); background: #e8f1f8; }
  .device-check { width:20px; height:20px; flex-shrink:0; cursor:pointer; accent-color:var(--comnet-blue); }
  .devices-toolbar { display:flex; justify-content:flex-end; gap:8px; padding:0 2px 8px; }
  .select-bar { display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:var(--comnet-blue); border-radius:10px; margin-bottom:8px; }
  .select-bar-header { display:flex; align-items:center; justify-content:space-between; }
  .select-bar-cancel { background:none; border:none; color:rgba(255,255,255,.9); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:0; letter-spacing:.02em; }
  .select-bar-cancel:hover { color:#fff; }
  .select-bar-count { color:rgba(255,255,255,.8); font-size:12px; font-weight:600; }
  .select-bar-actions { display:flex; gap:8px; }
  .select-bar-actions .btn { flex:1; font-size:13px; padding:10px 8px; }
  .device-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .device-wake-btn, .device-delete-btn {
    width: 46px; height: 42px; padding: 0;
    border: none; border-radius: 8px; color: #fff;
    font-size: 16px; line-height: 1; cursor: pointer;
    flex-shrink: 0; transition: background 0.2s, opacity 0.2s, transform 0.15s;
    display: flex; align-items: center; justify-content: center;
    font-variant-emoji: text;
  }
  .device-wake-btn { background: var(--success); }
  .device-wake-btn svg { width: 20px; height: 20px; display: block; }
  .device-delete-btn { background: var(--danger); }
  .device-delete-btn svg { width: 18px; height: 18px; display: block; }
  .device-wake-btn:hover:not(:disabled), .device-delete-btn:hover:not(:disabled) { opacity: 0.85; }
  .device-wake-btn:active:not(:disabled), .device-delete-btn:active:not(:disabled) { opacity: 0.7; transform: scale(0.96); }
  .device-wake-btn:disabled,
  .device-wake-btn.resetting {
    background: #9ca3af;
    opacity: 0.85;
    cursor: not-allowed;
    transform: none;
  }
  .btn.success.resetting,
  .btn.success:disabled.resetting {
    background: #9ca3af;
    opacity: 0.85;
    cursor: not-allowed;
  }
  .device-thumb {
    width: 52px; height: 52px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--legacy-gray);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 20px;
  }
  .device-thumb img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
  .device-meta { flex: 1; min-width: 0; }
  .device-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .device-sub { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 3px; }

  /* ── Photo grid ── */
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
  }
  .photo-thumb {
    aspect-ratio: 1;
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
  }
  .photo-thumb:hover { border-color: var(--accent); }
  .photo-wrap { position: relative; }
  .photo-del {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(192,57,43,.92); color: #fff; border: none;
    font-size: 12px; font-weight: 700; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
  .val-mono { font-family: "Courier New", Courier, monospace; font-size: 14.5px; font-weight: 700; }
  input[type="text"].val-mono {
    font-family: "Courier New", Courier, monospace;
    font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
  }
  input[type="text"].label-input {
    width: auto; flex: 1; margin: 0 0 0 12px;
    text-align: right; font-weight: 700;
    padding: 6px 8px; border-radius: 6px;
  }
  /* Relay dropdown inside a device-info row: match the text inputs (equal width,
     no full-width/bottom-margin from the shared form-select rule). */
  .info-row select.relay-select {
    flex: 1; width: auto;
    margin: 0 0 0 12px;
    padding: 6px 8px; border-radius: 6px;
    font-size: 13px;
  }
  input[type="text"].label-input.field-readonly,
  input[type="text"].label-input:read-only,
  input.relay-field.field-readonly,
  input.relay-field:read-only {
    background: #eef1f4;
    color: var(--muted);
    border-color: #dde3ea;
    cursor: default;
  }
  .info-val.field-readonly {
    color: var(--muted);
    background: #eef1f4;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    padding: 6px 8px;
  }
  /* Give every value control the same height so all device-info rows match. */
  #modal-info-rows .label-input,
  #modal-info-rows select.relay-select,
  #modal-info-rows .info-val {
    height: 36px;
    box-sizing: border-box;
  }
  #modal-info-rows .info-val {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  /* Unlocked P/W sits in a gray read-only box (like S/N) with the reveal eye on
     the left and the value right-aligned so it lines up with the S/N digits. */
  #modal-info-rows .info-val.pw-reveal-box { justify-content: space-between; }
  #modal-info-rows .info-val.pw-reveal-box .eye-btn { padding: 0; }
  /* Match the S/N input's mono metrics (15px + 0.5px tracking) so the P/W dots
     and S/N digits are the same width and align. */
  #modal-info-rows .val-mono { font-size: 15px; letter-spacing: 0.5px; }
  .eye-btn {
    background: none; border: none; cursor: pointer;
    padding: 0 8px 0 0; vertical-align: middle;
    line-height: 1; color: inherit;
  }
  .eye-btn svg { display: block; width: 18px; height: 18px; }
  .copy-btn {
    background: none; border: none; cursor: pointer;
    padding: 0 0 0 8px; vertical-align: middle;
    line-height: 1; color: var(--muted); font-size: 13px;
    transition: color 0.15s;
  }
  .copy-btn:hover { color: var(--comnet-blue); }
  .copy-btn svg { display: block; width: 15px; height: 15px; }

  /* ── Settings ── */
  .field-label { font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .req-star { color: var(--danger); font-weight: 700; margin-right: 2px; }
  .advanced-settings { margin-top: 14px; }
  .advanced-settings summary { cursor: pointer; font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 6px 0; user-select: none; list-style: none; }
  .advanced-settings summary::-webkit-details-marker { display: none; }
  .advanced-settings summary::before { content: "â–¸ "; }
  .advanced-settings[open] summary::before { content: "â–¾ "; }
  .advanced-settings[open] summary { margin-bottom: 10px; }
  input[type="text"], input[type="number"] {
    width: 100%;
    background: #fff;
    border: 1px solid var(--comnet-gray);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    padding: 10px 12px;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 0.2s;
  }
  input:focus { border-color: var(--accent); }

  /* ── Toast ── */
  #toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--charcoal);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    border-radius: 99px;
    padding: 10px 22px;
    font-size: 12px;
    letter-spacing: 0.05em;
    transition: transform 0.3s ease;
    z-index: 999;
    white-space: nowrap;
  }
  #toast.show { transform: translateX(-50%) translateY(0); }

  /* ── Modal ── */
  .modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 16px 24px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
  }
  /* Help / About modal is text-heavy — give it more reading width on desktop. */
  #help-modal .modal {
    max-width: 680px;
    padding: 24px 28px 28px;
  }
  .modal-title {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .modal-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
  }
  /* Title already spaced by the row — drop its own margin to avoid a double gap. */
  .modal-title-row .modal-title { margin-bottom: 0; }
  /* Selected-device table — shows ~5 rows then scrolls, header stays pinned. */
  .assign-device-table-wrap {
    border: 1px solid var(--border); border-radius: 8px;
    overflow-y: auto; max-height: 190px; margin-bottom: 14px;
  }
  .assign-device-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
  .assign-device-table th {
    position: sticky; top: 0; z-index: 1; text-align: left;
    background: var(--cloud-white); color: var(--muted);
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
  }
  .assign-device-table th:first-child, .assign-device-table td:first-child { width: 58%; }
  .assign-device-table td {
    padding: 7px 10px; border-top: 1px solid var(--border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .assign-device-table tbody tr:first-child td { border-top: none; }
  .assign-device-table td:first-child { font-weight: 700; }
  .assign-device-table td:last-child { color: var(--muted); font-family: "Courier New", Courier, monospace; }
  .modal-close-btn {
    background: #eee;
    border: 1px solid #ccc;
    color: #555;
    font-size: 17px;
    line-height: 1;
    padding: 6px 8px;
    margin: -6px -8px -6px 0;
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    font-variant-emoji: text;
  }
  .modal-close-btn:hover { background: #ddd; }
  .trash-btn:active { background: #e8a09a; }

  .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.8;
  }
  .empty-icon { font-size: 36px; margin-bottom: 12px; }

  /* ── Header info button ── */
  .header-info-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  .header-info-btn:active { background: rgba(255,255,255,0.35); }

  /* ── Help modal tabs ── */
  .help-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin: -4px 0 14px;
  }
  .help-tabs button {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: var(--font);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 4px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .help-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* ── In-card tab selector (Relay Management) ── */
  .card-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin: 0 0 14px;
  }
  .card-tabs button {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: var(--font);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 4px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .card-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
  .relay-tab-pane { display: none; }
  .relay-tab-pane.active { display: block; }
  .help-pane { display: none; font-size: 12.5px; line-height: 1.65; color: var(--text); }
  .help-pane.active { display: block; }
  .help-pane h4 {
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 16px 0 6px;
  }
  .help-pane h4:first-child { margin-top: 0; }
  .help-pane p { margin: 0 0 10px; }
  .help-pane ol, .help-pane ul { margin: 0 0 10px; padding-left: 20px; }
  .help-pane li { margin-bottom: 6px; }
  .help-pane ul ul { margin-top: 6px; margin-bottom: 0; }
  .help-pane code {
    font-family: "Courier New", Courier, monospace;
    font-weight: 700;
    font-size: 12px;
    background: var(--cloud-white);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
  }
  .help-note {
    background: #dcEAF5;
    border-left: 3px solid var(--comnet-blue);
    border-radius: 0 6px 6px 0;
    padding: 8px 10px;
    margin: 0 0 10px;
    font-size: 12px;
  }
  .help-status-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
  }
  .help-status-row:last-child { border-bottom: none; }
  .help-status-row .lbl {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    white-space: nowrap; flex-shrink: 0; min-width: 132px;
  }
  .help-status-row .desc { font-size: 11.5px; color: var(--muted); }

/* ── MAUI parity additions ── */
.field-hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.danger-hint { color: var(--danger); }
.inline-status { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 8px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; margin-bottom: 0; }
.btn-row.thirds .btn { flex: 1; min-width: 0; }
.btn-row.halves .btn { flex: 1; }
.btn.compact { font-size: 11px; padding: 8px 10px; margin-bottom: 0; }
textarea, .form-select, select.relay-select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--comnet-gray);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 14px;
  outline: none;
}
textarea { resize: vertical; min-height: 72px; }
.bulk-actions-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
/* Dim only the action controls when nothing is selected — the header (with
   Select All + Clear) stays fully opaque so Select All is always usable. */
#bulk-actions-controls { opacity: 0.58; transition: opacity 0.15s; }
#bulk-assign-relay { margin-top: 8px; }
.bulk-actions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bulk-actions-header-btns { display: flex; align-items: center; gap: 14px; }
.bulk-actions-title { font-size: 12px; font-weight: 700; color: var(--accent); }
.bulk-actions-count { font-size: 11px; color: var(--muted); }
.text-action-btn,
.select-all-btn {
  background: none; border: none; color: var(--accent);
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 0;
}
.text-action-btn:hover,
.select-all-btn:hover { opacity: 0.85; }
.relay-group {
  border: 1px solid var(--accent);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
.relay-group-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
}
.relay-expand-btn {
  background: none; border: none; font-size: 16px; font-weight: 700;
  color: var(--accent); cursor: pointer; width: 32px; height: 32px;
}
.relay-group-check input { accent-color: var(--accent); width: 18px; height: 18px; }
.relay-group-name { font-size: 15px; font-weight: 700; color: var(--accent); }
.relay-group-sub { font-size: 12px; color: var(--text); margin-top: 2px; }
.relay-group-status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  border: 1px solid var(--legacy-gray); border-radius: 14px;
  padding: 6px 10px; background: #fff; white-space: nowrap;
}
.relay-group-body { padding: 8px 12px 12px; background: #f4f8fb; }
.relay-group-body .device-item { margin-bottom: 8px; }
.device-status-line { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; }
/* Show ~3 saved relays, then scroll. */
#relay-cards { max-height: 384px; overflow-y: auto; padding-right: 4px; }
.relay-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #fff;
}
.relay-card.active-relay { border-color: var(--accent); border-width: 2px; }
.relay-card-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: transparent;
}
.relay-card.active-relay .relay-card-accent { background: var(--accent); }
.relay-card-body { padding: 12px 12px 12px 16px; }
.relay-card-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.relay-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.active-tag {
  font-size: 8px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 3px 8px; margin-left: 6px; vertical-align: middle;
}
.relay-card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.relay-card-active-note { font-size: 10px; color: var(--accent); margin-top: 4px; }
.relay-card-status { font-size: 9px; font-weight: 700; white-space: nowrap; }
.relay-card-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 8px; }
.relay-card-actions .btn { margin-bottom: 0; }
.relay-editor { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px; }
.relay-advanced-section { margin-bottom: 12px; }
.relay-advanced-section .toggle-advanced-btn { margin-bottom: 0; }
.relay-advanced { margin-top: 10px; }
.relay-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.relay-test-status { font-size: 12px; font-weight: 700; margin: 6px 0; }
.relay-repair-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 4px; }
.relay-repair-row input[type="text"] { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.relay-repair-row .repair-relay-btn { flex: 0 0 auto; width: auto; margin-bottom: 0; white-space: nowrap; }
.relay-repair-status { font-size: 12px; font-weight: 700; margin: 6px 0; }
#identify-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999;
  display: none; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; padding: 24px;
}
.identify-dismiss {
  background: #fff; color: #111; border: none; border-radius: 10px;
  padding: 14px 36px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.pair-scanner-wrap {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: var(--radius); overflow: hidden; background: #000;
}
.pair-scanner-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.help-ip-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.help-ip-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
/* Relay compatibility pill — encodes the minimum relay version and the live
   pass/fail state right next to the detected version, so the minimum no longer
   needs a separate footnote at the bottom of the About tab. */
.relay-compat { margin-top: 10px; }
.relay-compat-pill {
  display: inline-block; font-weight: 700; font-size: 11px;
  padding: 5px 12px; border-radius: 99px; letter-spacing: 0.02em;
}
.relay-compat-pill.ok   { background: #ddf0e4; color: var(--success); }
.relay-compat-pill.err  { background: #f7dedb; color: var(--danger); }
.relay-compat-pill.idle { background: #dcEAF5; color: var(--comnet-blue); }
/* Last visible version row sits before the (hidden) warn div, so :last-child
   misses it — drop its trailing divider explicitly. */
.help-ip-box .info-row:has(+ #relay-version-warn) { border-bottom: none; }