/* TechTools — html-entity styles (auto-extracted) */
:root {
    --he-accent: var(--accent-sky);
    --he-accent-dim: rgba(77, 201, 255, 0.08);
    --he-accent-border: rgba(77, 201, 255, 0.25);
  }

  .he-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: fit-content;
  }

  .he-tab {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border: none;
    outline: none;
    transition: all 0.25s ease;
    user-select: none;
    white-space: nowrap;
  }

  .he-tab:first-child {
    border-radius: 10px 0 0 10px;
  }

  .he-tab:last-child {
    border-radius: 0 10px 10px 0;
  }

  .he-tab + .he-tab {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .he-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
  }

  .he-tab.active {
    background: var(--he-accent-dim);
    color: var(--he-accent);
    border-color: var(--he-accent-border);
  }

  .he-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
  }

  .he-toolbar .btn-sm {
    padding: 8px 18px;
    font-size: 13px;
  }

  .he-toolbar .btn-sm.btn-accent {
    background: var(--he-accent-dim);
    border-color: var(--he-accent-border);
    color: var(--he-accent);
    box-shadow: 0 0 10px var(--he-accent-dim);
  }

  .he-toolbar .btn-sm.btn-accent:hover {
    background: rgba(77, 201, 255, 0.2);
    border-color: rgba(77, 201, 255, 0.5);
    box-shadow: 0 0 20px rgba(77, 201, 255, 0.2);
    color: var(--text-primary);
  }

  .pane-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
  }

  .entity-table-wrap {
    margin-top: 24px;
    max-height: 360px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .entity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .entity-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .entity-table th {
    background: rgba(10, 5, 40, 0.98);
    backdrop-filter: blur(12px);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .entity-table td {
    padding: 8px 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
  }

  .entity-table tbody tr:hover td {
    background: rgba(77, 201, 255, 0.04);
    color: var(--text-primary);
  }

  .entity-table td:first-child {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 16px;
  }

  .entity-table td:nth-child(2) {
    color: var(--accent-teal);
  }

  .entity-table td:nth-child(3) {
    color: var(--accent-cyan);
    font-size: 12px;
  }

  .he-config {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
  }

  .he-config label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .he-config input[type="checkbox"] {
    accent-color: var(--he-accent);
  }

  @media (max-width: 768px) {
    .he-tabs { width: 100%; }
    .he-tab { flex: 1; text-align: center; padding: 8px 12px; }
    .he-toolbar .btn-sm { padding: 6px 12px; font-size: 12px; }
    .entity-table-wrap { max-height: 280px; }
    .entity-table td, .entity-table th { padding: 6px 10px; font-size: 11px; }
  }