* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #1a1a1a;
        color: #e0e0e0;
        width: 320px;
        padding: 16px;
      }

      h1 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      h1 .logo {
        width: 28px;
        height: 28px;
        cursor: pointer;
      }

      .status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 8px 12px;
        background: #252525;
        border-radius: 6px;
      }

      .record-top-notice {
        margin-bottom: 10px;
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 600;
        color: #3fb950;
        background: rgba(63, 185, 80, 0.12);
        border: 1px solid rgba(63, 185, 80, 0.45);
        border-radius: 6px;
      }

      .status-label {
        font-size: 12px;
        color: #888;
      }

      .status-value {
        font-size: 14px;
        font-weight: 500;
      }

      #status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      #status::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #888;
      }

      #status.connected::before {
        background: #3fb950;
      }

      #status.disconnected::before {
        background: #d29922;
      }

      #status.disconnected::after {
        content: '!';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-left: 4px;
        font-size: 12px;
        font-weight: 700;
        color: #d29922;
        background: rgba(210, 153, 34, 0.15);
        border-radius: 3px;
      }

      .section {
        margin-bottom: 16px;
      }

      .section-title {
        font-size: 11px;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
      }

      select {
        width: 100%;
        padding: 8px 12px;
        font-size: 14px;
        background: #252525;
        border: 1px solid #333;
        border-radius: 6px;
        color: #e0e0e0;
        cursor: pointer;
      }

      select:hover {
        border-color: #444;
      }

      select:focus {
        outline: none;
        border-color: #58a6ff;
      }

      button {
        width: 100%;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        background: #252525;
        border: 1px solid #333;
        border-radius: 6px;
        color: #e0e0e0;
        cursor: pointer;
        transition: all 0.15s;
      }

      button:hover {
        background: #303030;
        border-color: #444;
      }

      button:active {
        background: #252525;
      }

      button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      button.danger {
        color: #f85149;
        border-color: #f85149;
      }

      button.danger:hover {
        background: rgba(248, 81, 73, 0.1);
      }

      .info-row {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding: 6px 0;
        border-bottom: 1px solid #252525;
      }

      .info-row:last-child {
        border-bottom: none;
      }

      .info-label {
        color: #888;
      }

      .info-value {
        color: #e0e0e0;
        font-family: ui-monospace, monospace;
        word-break: break-all;
        max-width: 180px;
        text-align: right;
      }

      #error-message {
        font-size: 12px;
        color: #f85149;
        margin-top: 8px;
        padding: 8px;
        background: rgba(248, 81, 73, 0.1);
        border-radius: 4px;
        display: none;
      }

      #error-message:not(:empty) {
        display: block;
      }

      .links {
        display: flex;
        gap: 12px;
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid #252525;
      }

      .links a {
        font-size: 12px;
        color: #58a6ff;
        text-decoration: none;
      }

      .links a:hover {
        text-decoration: underline;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        background: #f85149;
        color: white;
        border-radius: 10px;
      }

      .badge:empty {
        display: none;
      }

      /* Toggle Switch Styles */
      .toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #333;
      }

      .toggle-row:last-child {
        border-bottom: none;
      }

      .toggle-info {
        flex: 1;
      }

      .toggle-label {
        font-size: 13px;
        color: #e0e0e0;
        display: block;
        cursor: pointer;
      }

      .toggle-desc {
        font-size: 11px;
        color: #666;
        margin-top: 2px;
      }

      .toggle-switch {
        position: relative;
        width: 40px;
        height: 22px;
        flex-shrink: 0;
        margin-left: 12px;
      }

      .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #333;
        border-radius: 22px;
        transition: 0.2s;
      }

      .toggle-slider::before {
        position: absolute;
        content: '';
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background: #666;
        border-radius: 50%;
        transition: 0.2s;
      }

      .toggle-switch input:checked + .toggle-slider {
        background: #238636;
      }

      .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(18px);
        background: #fff;
      }

      .feature-section {
        background: #252525;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 16px;
      }

      .record-approval-card {
        margin-top: 8px;
        padding: 10px;
        border: 1px solid rgba(210, 153, 34, 0.55);
        border-radius: 6px;
        background: rgba(210, 153, 34, 0.1);
      }

      .record-approval-title {
        font-size: 12px;
        font-weight: 600;
        color: #f2cc60;
      }

      .record-approval-detail {
        margin-top: 4px;
        font-size: 11px;
        color: #c9d1d9;
        line-height: 1.35;
        word-break: break-word;
      }

      .record-approval-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }

      .record-approval-actions button {
        width: auto;
        flex: 1;
        padding: 7px 10px;
        font-size: 12px;
      }

      .record-approve-btn {
        color: #3fb950;
        border-color: rgba(63, 185, 80, 0.55);
        background: rgba(63, 185, 80, 0.08);
      }

      .record-approve-btn:hover {
        background: rgba(63, 185, 80, 0.16);
      }

      .record-deny-btn {
        color: #f85149;
        border-color: rgba(248, 81, 73, 0.55);
        background: rgba(248, 81, 73, 0.08);
      }

      .record-deny-btn:hover {
        background: rgba(248, 81, 73, 0.16);
      }

      .record-row.is-disabled {
        opacity: 0.58;
        cursor: not-allowed;
        pointer-events: none;
      }

      .health-error {
        background: rgba(248, 81, 73, 0.1);
        color: #f85149;
      }

      .health-warning {
        background: rgba(210, 153, 34, 0.1);
        color: #d29922;
      }

      /* Compact tracking bar */
      .tracking-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(88, 166, 255, 0.1);
        border: 1px solid #58a6ff;
        border-radius: 6px;
        font-size: 12px;
      }

      .tracking-bar-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3fb950;
        flex-shrink: 0;
        animation: tracking-pulse 2s ease-in-out infinite;
      }

      @keyframes tracking-pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      .tracking-bar-url {
        flex: 1;
        min-width: 0;
        color: #aaa;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.15s;
      }

      .tracking-bar-url:hover {
        color: #58a6ff;
        text-decoration: underline;
      }

      .tracking-bar-audit {
        width: auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 10px;
        background: rgba(88, 166, 255, 0.14);
        border: 1px solid rgba(88, 166, 255, 0.4);
        border-radius: 999px;
        color: #58a6ff;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        flex-shrink: 0;
      }

      .tracking-bar-audit:hover {
        background: rgba(88, 166, 255, 0.2);
        border-color: #58a6ff;
      }

      .tracking-bar-stop {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid #555;
        border-radius: 4px;
        color: #888;
        cursor: pointer;
        flex-shrink: 0;
        font-size: 12px;
        line-height: 1;
        padding: 0;
        transition: all 0.15s;
      }

      .tracking-bar-stop:hover {
        background: rgba(248, 81, 73, 0.15);
        border-color: #f85149;
        color: #f85149;
      }

      /* Record icon — thin circle + heavy inner dot */
      .record-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid #555;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: border-color 0.2s;
      }

      .record-icon-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #555;
        transition:
          background 0.2s,
          box-shadow 0.2s;
      }

      /* Idle state — dim grey, lights up on hover */
      .record-row:hover .record-icon {
        border-color: #888;
      }
      .record-row:hover .record-icon-dot {
        background: #a52a2a;
      }

      /* Recording state — glowing red */
      .record-row.is-recording .record-icon {
        border-color: #e53935;
      }
      .record-row.is-recording .record-icon-dot {
        background: #e53935;
        box-shadow: 0 0 8px 2px rgba(229, 57, 53, 0.6);
        animation: record-pulse 1.5s ease-in-out infinite;
      }

      /* Row layout */
      .record-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        cursor: pointer;
        user-select: none;
      }

      .record-label {
        font-size: 13px;
        color: #aaa;
        transition: color 0.2s;
      }
      .record-row:hover .record-label {
        color: #ccc;
      }
      .record-row.is-recording .record-label {
        color: #e53935;
      }

      .record-status {
        font-size: 12px;
        color: #888;
        margin-left: auto;
      }

      @keyframes record-pulse {
        0%,
        100% {
          box-shadow: 0 0 8px 2px rgba(229, 57, 53, 0.6);
        }
        50% {
          box-shadow: 0 0 14px 4px rgba(229, 57, 53, 0.9);
        }
      }

      /* Orange pulse highlight for "click here to record" guidance */
      .record-highlight .feature-section {
        animation: record-highlight-pulse 1.2s ease-in-out infinite;
        border: 2px solid #ea580c;
      }

      .record-highlight .record-label {
        color: #ea580c !important;
        font-weight: 600;
      }

      @keyframes record-highlight-pulse {
        0%,
        100% {
          box-shadow: 0 0 6px 1px rgba(234, 88, 12, 0.3);
        }
        50% {
          box-shadow: 0 0 16px 4px rgba(234, 88, 12, 0.6);
        }
      }

      /* Collapsible Advanced Capture */
      details.advanced-capture summary {
        font-size: 11px;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 6px;
        user-select: none;
      }

      details.advanced-capture summary::-webkit-details-marker {
        display: none;
      }

      details.advanced-capture summary::before {
        content: '▶';
        font-size: 9px;
        transition: transform 0.2s;
      }

      details.advanced-capture[open] summary::before {
        transform: rotate(90deg);
      }

      /* ── Accessibility: Focus indicators ──────────── */
      button:focus-visible,
      a:focus-visible,
      select:focus-visible,
      input:focus-visible,
      .toggle-slider:focus-visible,
      details summary:focus-visible {
        outline: 2px solid #58a6ff;
        outline-offset: 2px;
      }

      /* Allow focus-visible on the slider when the hidden input is focused */
      .toggle-switch input:focus-visible + .toggle-slider {
        outline: 2px solid #58a6ff;
        outline-offset: 2px;
      }

      /* ── Light Theme (class-based, dark is default) ────────────────────────────────── */
      body.light-theme {
        background: #ffffff;
        color: #1a1a1a;
      }

      body.light-theme .status-row {
        background: #f5f5f5;
      }

      body.light-theme .status-label {
        color: #555;
      }

      body.light-theme #status::before {
        background: #999;
      }

      body.light-theme #status.connected::before {
        background: #1a7f37;
      }

      body.light-theme #status.disconnected::before {
        background: #9a6700;
      }

      body.light-theme #status.disconnected::after {
        color: #9a6700;
        background: rgba(154, 103, 0, 0.12);
      }

      body.light-theme .section-title {
        color: #555;
      }

      body.light-theme select {
        background: #ffffff;
        border-color: #d0d0d0;
        color: #1a1a1a;
      }

      body.light-theme select:hover {
        border-color: #999;
      }

      body.light-theme select:focus {
        border-color: #0969da;
      }

      body.light-theme button {
        background: #f5f5f5;
        border-color: #d0d0d0;
        color: #1a1a1a;
      }

      body.light-theme button:hover {
        background: #e8e8e8;
        border-color: #999;
      }

      body.light-theme button:active {
        background: #f5f5f5;
      }

      body.light-theme button.danger {
        color: #cf222e;
        border-color: #cf222e;
        background: #ffffff;
      }

      body.light-theme button.danger:hover {
        background: rgba(207, 34, 46, 0.08);
      }

      body.light-theme .info-row {
        border-bottom-color: #e0e0e0;
      }

      body.light-theme .info-label {
        color: #555;
      }

      body.light-theme .info-value {
        color: #1a1a1a;
      }

      body.light-theme #error-message {
        color: #cf222e;
        background: rgba(207, 34, 46, 0.08);
      }

      body.light-theme .links {
        border-top-color: #e0e0e0;
      }

      body.light-theme .links a {
        color: #0969da;
      }

      body.light-theme .badge {
        background: #cf222e;
        color: #ffffff;
      }

      body.light-theme .toggle-row {
        border-bottom-color: #e0e0e0;
      }

      body.light-theme .toggle-label {
        color: #1a1a1a;
      }

      body.light-theme .toggle-desc {
        color: #555;
      }

      body.light-theme .toggle-slider {
        background: #d0d0d0;
      }

      body.light-theme .toggle-slider::before {
        background: #ffffff;
      }

      body.light-theme .toggle-switch input:checked + .toggle-slider {
        background: #1a7f37;
      }

      body.light-theme .toggle-switch input:checked + .toggle-slider::before {
        background: #ffffff;
      }

      body.light-theme .feature-section {
        background: #f8f8f8;
      }

      body.light-theme .health-error {
        background: rgba(207, 34, 46, 0.08);
        color: #cf222e;
      }

      body.light-theme .health-warning {
        background: rgba(154, 103, 0, 0.08);
        color: #9a6700;
      }

      body.light-theme .tracking-bar {
        background: rgba(9, 105, 218, 0.08);
        border-color: #0969da;
      }

      body.light-theme .tracking-bar-indicator {
        background: #1a7f37;
      }

      body.light-theme .tracking-bar-url {
        color: #555;
      }

      body.light-theme .tracking-bar-url:hover {
        color: #0969da;
      }

      body.light-theme .tracking-bar-audit {
        background: rgba(9, 105, 218, 0.08);
        border-color: rgba(9, 105, 218, 0.22);
        color: #0969da;
      }

      body.light-theme .tracking-bar-audit:hover {
        background: rgba(9, 105, 218, 0.14);
        border-color: #0969da;
      }

      body.light-theme .tracking-bar-stop {
        border-color: #d0d0d0;
        color: #555;
      }

      body.light-theme .tracking-bar-stop:hover {
        background: rgba(207, 34, 46, 0.08);
        border-color: #cf222e;
        color: #cf222e;
      }

      body.light-theme .record-icon {
        border-color: #999;
      }

      body.light-theme .record-icon-dot {
        background: #999;
      }

      body.light-theme .record-row:hover .record-icon {
        border-color: #555;
      }

      body.light-theme .record-row:hover .record-icon-dot {
        background: #a52a2a;
      }

      body.light-theme .record-row.is-recording .record-icon {
        border-color: #d1242f;
      }

      body.light-theme .record-row.is-recording .record-icon-dot {
        background: #d1242f;
      }

      body.light-theme .record-label {
        color: #555;
      }

      body.light-theme .record-row:hover .record-label {
        color: #1a1a1a;
      }

      body.light-theme .record-row.is-recording .record-label {
        color: #d1242f;
      }

      body.light-theme .record-status {
        color: #555;
      }

      body.light-theme details.advanced-capture summary {
        color: #555;
      }

      /* ── Inline-style overrides (need !important) ── */

      /* Focus indicators */
      body.light-theme button:focus-visible,
      body.light-theme a:focus-visible,
      body.light-theme select:focus-visible,
      body.light-theme input:focus-visible,
      body.light-theme .toggle-slider:focus-visible,
      body.light-theme details summary:focus-visible {
        outline-color: #0969da;
      }

      body.light-theme .toggle-switch input:focus-visible + .toggle-slider {
        outline-color: #0969da;
      }

      /* Track This Tab hero button */
      body.light-theme #track-page-btn {
        background: #dbeafe !important;
        color: #0969da !important;
        border-color: #0969da !important;
      }

      /* Track hero description */
      body.light-theme #track-hero-desc {
        color: #555 !important;
      }

      /* No-tracking warning */
      body.light-theme #no-tracking-warning {
        background: rgba(207, 34, 46, 0.08) !important;
        border-color: rgba(207, 34, 46, 0.3) !important;
        color: #cf222e !important;
      }

      /* Tracked page info box — kept for backwards compat */

      /* Troubleshooting panel */
      body.light-theme #troubleshooting > div {
        background: rgba(154, 103, 0, 0.06) !important;
        border-color: #9a6700 !important;
      }

      body.light-theme #troubleshooting p[style*='color: #d29922'] {
        color: #9a6700 !important;
      }

      body.light-theme #troubleshooting p[style*='color: #ccc'] {
        color: #1a1a1a !important;
      }

      body.light-theme #troubleshooting code[style*='background: #333'] {
        background: #f0f0f0 !important;
        color: #0969da !important;
      }

      body.light-theme #troubleshooting p[style*='color: #888'] {
        color: #555 !important;
      }

      body.light-theme #troubleshooting code[style*='color: #aaa'] {
        background: #f0f0f0 !important;
        color: #555 !important;
      }

      body.light-theme #troubleshooting p[style*='border-top'] {
        border-top-color: #e0e0e0 !important;
      }

      body.light-theme #troubleshooting a[style*='color: #58a6ff'] {
        color: #0969da !important;
      }

      body.light-theme #troubleshooting span[style*='color: #444'] {
        color: #d0d0d0 !important;
      }

      /* Version mismatch banner */
      body.light-theme #version-mismatch {
        background: rgba(154, 103, 0, 0.08) !important;
        border-color: #9a6700 !important;
        color: #9a6700 !important;
      }

      body.light-theme #version-mismatch .version-detail {
        color: #555 !important;
      }

      body.light-theme #version-mismatch p[style*='color: #888'] {
        color: #555 !important;
      }

      body.light-theme #security-mode-warning {
        background: rgba(207, 34, 46, 0.08) !important;
        border-color: #cf222e !important;
        color: #cf222e !important;
      }

      body.light-theme #security-mode-detail {
        color: #555 !important;
      }

      /* Context warning banner */
      body.light-theme #context-warning {
        background: rgba(154, 103, 0, 0.08) !important;
        border-color: #9a6700 !important;
        color: #9a6700 !important;
      }

      body.light-theme #context-warning-text {
        color: #555 !important;
      }

      /* AI Web Pilot warning text */
      body.light-theme .toggle-desc[style*='color: #d29922'] {
        color: #9a6700 !important;
      }

      /* Draw mode keyboard shortcut */
      body.light-theme #draw-mode-status {
        color: #555 !important;
      }

      /* Record options border & audio select */
      body.light-theme #record-options {
        border-top-color: #e0e0e0 !important;
      }

      body.light-theme #record-audio-mode {
        background: #ffffff !important;
        border-color: #d0d0d0 !important;
        color: #555 !important;
      }

      /* Record save confirmation */
      body.light-theme #record-save-info {
        background: rgba(26, 127, 55, 0.08) !important;
        color: #1a7f37 !important;
      }

      /* WebSocket mode container & select */
      body.light-theme #ws-mode-container {
        background: #f5f5f5 !important;
      }

      body.light-theme #ws-mode {
        background: #ffffff !important;
        border-color: #d0d0d0 !important;
        color: #1a1a1a !important;
      }

      /* Warning text overrides */
      body.light-theme #ws-messages-warning {
        color: #9a6700 !important;
      }

      body.light-theme #waterfall-warning {
        color: #555 !important;
      }

      body.light-theme #perfmarks-warning {
        color: #555 !important;
      }

      body.light-theme #screenshot-warning {
        color: #9a6700 !important;
      }