/* Lean stylesheet for the /file-lab/ app document (standalone + iframe embed). */
/* RetroReversing design tokens - single source of truth for site colours */

:root {
  color-scheme: light;

  /* Brand */
  --rr-color-accent: #2575dc;

  /* Page shell */
  --rr-color-body-bg: #fafafa;
  --rr-color-body-text: #848484;
  --rr-color-heading: #4f4f4f;
  --rr-color-strong: #585858;
  --rr-color-main-bg: #fafafa;
  --rr-color-main-text: #848484;
  --rr-color-meta: #888888;

  /* Post and article content */
  --rr-color-content-text: #333333;
  --rr-color-content-strong: #00577a;
  --rr-color-content-link: #0085b6;
  --rr-color-content-link-hover: #006a91;
  --rr-color-content-border: #ececec;
  --rr-color-content-border-subtle: #e2e2e2;

  /* Inline code */
  --rr-color-code-text: #0a3069;
  --rr-color-code-bg: #f6f8fa;
  --rr-color-code-border: #d0d7de;

  /* Preformatted blocks */
  --rr-color-pre-bg: #ffffff;
  --rr-color-pre-border: #eaeaea;

  /* Sidebar widgets on content pages */
  --rr-color-widget-title: #424242;
  --rr-color-widget-border: #e8e8e8;
  --rr-color-widget-card-title: #4f4f4f;
  --rr-color-widget-card-meta: #888888;
  --rr-color-widget-directory-muted: #848484;

  /* Table of contents sidebar */
  --rr-color-toc-level-1: #006d96;
  --rr-color-toc-level-2: #007fa8;
  --rr-color-toc-level-3: #5f7d8a;
  --rr-color-toc-level-4: #748891;
  --rr-color-toc-level-5: #88949b;
  --rr-color-toc-level-6: #9aa3a8;
  --rr-color-toc-hover: #0085b6;
  --rr-color-toc-marker: rgba(0, 133, 182, 0.4);

  /* Tabs include */
  --rr-color-tab-text: #4c4c4c;

  /* Tables */
  --rr-color-table-bg: transparent;
  --rr-color-table-stripe: #f3f3f3;
  --rr-color-table-hover: #f5f5f5;
  --rr-color-table-head-bg: transparent;
  --rr-color-table-head-text: #616161;
  --rr-color-table-border: #e6e6e6;
  --rr-color-table-border-strong: #eaeaea;
  --rr-color-table-cell-text: var(--rr-color-content-text);

  /* Table pagination (DataTables / Bootstrap) */
  --rr-color-pagination-text: #808080;
  --rr-color-pagination-bg: #ffffff;
  --rr-color-pagination-border: #e4e4e4;
  --rr-color-pagination-hover-bg: #f5f5f5;
  --rr-color-pagination-active-bg: #2575dc;
  --rr-color-pagination-active-text: #ffffff;
  --rr-color-pagination-active-border: #2575dc;
  --rr-color-pagination-disabled-text: #bdbdbd;

  /* Post footer tags */
  --rr-color-tag-text: #7d7d7d;
  --rr-color-tag-bg: #ffffff;
  --rr-color-tag-border: #e2e2e2;
  --rr-color-tag-hover-text: #505050;
  --rr-color-tag-hover-bg: #ffffff;
  --rr-color-tag-hover-border: #c7c7c7;
  --rr-color-tag-hover-shadow: rgba(0, 0, 0, 0.05);

  /* Post listing cards (tag/category pages) */
  --rr-color-card-bg: #ffffff;
  --rr-color-card-border: #e4e4e4;
  --rr-color-card-shadow: rgba(0, 0, 0, 0.03);
  --rr-color-card-footer-border: #efefef;

  /* Secondary buttons (Read More on listing cards) */
  --rr-color-btn-secondary-text: #787a7b;
  --rr-color-btn-secondary-bg: #fafafa;
  --rr-color-btn-secondary-border: #e6e6e6;
  --rr-color-btn-secondary-hover-text: #787a7b;
  --rr-color-btn-secondary-hover-bg: #ffffff;
  --rr-color-btn-secondary-hover-border: #ffffff;

  /* Link-to-other-post/site preview cards */
  --rr-color-link-card-text: #7a7a7a;
  --rr-color-link-card-hover-bg: rgba(229, 229, 229, 0.56);

  /* Breadcrumbs */
  --rr-color-breadcrumb-bg: #ffffff;
  --rr-color-breadcrumb-border: #e2e2e2;
  --rr-color-breadcrumb-link: #737373;
  --rr-color-breadcrumb-separator: #b5b5b5;

  /* Shared dark sidebar rail */
  --rr-color-sidebar-bg: #0f0f0f;
  --rr-color-sidebar-text: #ffffff;
  --rr-color-sidebar-text-muted: rgba(255, 255, 255, 0.7);
  --rr-color-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --rr-color-sidebar-border: rgba(255, 255, 255, 0.1);
  --rr-color-sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --rr-color-sidebar-overlay: rgba(0, 0, 0, 0.5);

  /* Header search (dark navbar) */
  --rr-color-search-field-bg: rgba(255, 255, 255, 0.08);
  --rr-color-search-field-border: rgba(255, 255, 255, 0.18);
  --rr-color-search-field-text: #ffffff;
  --rr-color-search-field-placeholder: rgba(255, 255, 255, 0.65);
  --rr-color-search-field-bg-focus: rgba(255, 255, 255, 0.12);
  --rr-color-search-field-border-focus: rgba(255, 255, 255, 0.35);
  --rr-color-search-button-text: rgba(255, 255, 255, 0.8);
  --rr-color-search-results-bg: #ffffff;
  --rr-color-search-results-border: #dddddd;
  --rr-color-search-results-header-bg: #f8f9fa;
  --rr-color-search-results-header-border: #eeeeee;
  --rr-color-search-results-item-border: #eeeeee;
  --rr-color-search-results-item-hover-bg: #f8f9fa;
  --rr-color-search-results-title: #333333;
  --rr-color-search-results-text: #666666;
  --rr-color-search-results-badge-bg: #6c757d;

  /* Homepage feed (YouTube-style dark shelves) */
  --rr-color-feed-bg: #0f0f0f;
  --rr-color-feed-text: #ffffff;
  --rr-color-feed-text-muted: rgba(255, 255, 255, 0.7);
  --rr-color-feed-text-subtle: rgba(255, 255, 255, 0.6);
  --rr-color-feed-text-soft: rgba(255, 255, 255, 0.9);
  --rr-color-feed-surface: rgba(255, 255, 255, 0.08);
  --rr-color-feed-surface-hover: rgba(255, 255, 255, 0.1);
  --rr-color-feed-surface-strong: rgba(255, 255, 255, 0.14);
  --rr-color-feed-surface-icon: rgba(255, 255, 255, 0.18);
  --rr-color-feed-chip-bg: rgba(255, 255, 255, 0.1);
  --rr-color-feed-chip-bg-hover: rgba(255, 255, 255, 0.2);
  --rr-color-feed-chip-text: #ffffff;
  --rr-color-feed-chip-active-bg: #ffffff;
  --rr-color-feed-chip-active-bg-hover: #e5e5e5;
  --rr-color-feed-chip-active-text: #0f0f0f;
  --rr-color-feed-chip-ring: rgba(255, 255, 255, 0.45);

  /* File Lab hex highlights (Kaitai parse regions) */
  --rr-color-hex-highlight-0-bg: rgba(37, 117, 220, 0.16);
  --rr-color-hex-highlight-1-bg: rgba(0, 133, 182, 0.16);
  --rr-color-hex-highlight-2-bg: rgba(0, 87, 122, 0.16);
  --rr-color-hex-highlight-3-bg: rgba(79, 79, 79, 0.12);
  --rr-color-hex-highlight-4-bg: rgba(97, 97, 97, 0.14);
  --rr-color-hex-highlight-5-bg: rgba(132, 132, 132, 0.14);
  --rr-color-hex-highlight-6-bg: rgba(37, 117, 220, 0.1);
  --rr-color-hex-highlight-7-bg: rgba(0, 133, 182, 0.1);
  --rr-color-hex-highlight-hover-border: var(--rr-color-accent);
  --rr-color-hex-highlight-selected-border: var(--rr-color-content-strong);

  /* File Lab R2 disassembly syntax (radare2 palette mapped to theme tokens) */
  --rr-color-r2-mnemonic: #0550ae;
  --rr-color-r2-number: #953800;
  --rr-color-r2-call: #116329;
  --rr-color-r2-register: #57606a;
  --rr-color-r2-label: #6639ba;
  --rr-color-r2-comment: #6e7781;
}

/* System dark mode for content pages (homepage stays on the feed palette below) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --rr-color-body-bg: #0f0f0f;
    --rr-color-body-text: rgba(255, 255, 255, 0.7);
    --rr-color-heading: #ffffff;
    --rr-color-strong: rgba(255, 255, 255, 0.85);
    --rr-color-main-bg: #0f0f0f;
    --rr-color-main-text: rgba(255, 255, 255, 0.7);
    --rr-color-meta: rgba(255, 255, 255, 0.55);

    --rr-color-content-text: rgba(255, 255, 255, 0.88);
    --rr-color-content-strong: #8fd4ef;
    --rr-color-content-link: #7ec8e8;
    --rr-color-content-link-hover: #a8daf0;
    --rr-color-content-border: rgba(255, 255, 255, 0.12);
    --rr-color-content-border-subtle: rgba(255, 255, 255, 0.1);

    --rr-color-code-text: #c9d7ff;
    --rr-color-code-bg: rgba(255, 255, 255, 0.08);
    --rr-color-code-border: rgba(255, 255, 255, 0.18);

    --rr-color-pre-bg: #1a1a1a;
    --rr-color-pre-border: rgba(255, 255, 255, 0.12);

    --rr-color-widget-title: rgba(255, 255, 255, 0.92);
    --rr-color-widget-border: rgba(255, 255, 255, 0.12);
    --rr-color-widget-card-title: rgba(255, 255, 255, 0.92);
    --rr-color-widget-card-meta: rgba(255, 255, 255, 0.55);
    --rr-color-widget-directory-muted: rgba(255, 255, 255, 0.55);

    --rr-color-toc-level-1: rgba(255, 255, 255, 0.95);
    --rr-color-toc-level-2: rgba(255, 255, 255, 0.82);
    --rr-color-toc-level-3: rgba(255, 255, 255, 0.68);
    --rr-color-toc-level-4: rgba(255, 255, 255, 0.55);
    --rr-color-toc-level-5: rgba(255, 255, 255, 0.45);
    --rr-color-toc-level-6: rgba(255, 255, 255, 0.38);
    --rr-color-toc-hover: #b8e4f8;
    --rr-color-toc-marker: rgba(184, 228, 248, 0.45);

    --rr-color-tab-text: rgba(255, 255, 255, 0.75);

    --rr-color-table-bg: transparent;
    --rr-color-table-stripe: rgba(255, 255, 255, 0.04);
    --rr-color-table-hover: rgba(255, 255, 255, 0.08);
    --rr-color-table-head-bg: transparent;
    --rr-color-table-head-text: rgba(255, 255, 255, 0.75);
    --rr-color-table-border: rgba(255, 255, 255, 0.12);
    --rr-color-table-border-strong: rgba(255, 255, 255, 0.15);
    --rr-color-table-cell-text: rgba(255, 255, 255, 0.88);

    --rr-color-pagination-text: rgba(255, 255, 255, 0.65);
    --rr-color-pagination-bg: #1a1a1a;
    --rr-color-pagination-border: rgba(255, 255, 255, 0.15);
    --rr-color-pagination-hover-bg: rgba(255, 255, 255, 0.08);
    --rr-color-pagination-active-bg: var(--rr-color-accent);
    --rr-color-pagination-active-text: #ffffff;
    --rr-color-pagination-active-border: var(--rr-color-accent);
    --rr-color-pagination-disabled-text: rgba(255, 255, 255, 0.35);

    --rr-color-tag-text: rgba(255, 255, 255, 0.75);
    --rr-color-tag-bg: rgba(255, 255, 255, 0.08);
    --rr-color-tag-border: rgba(255, 255, 255, 0.15);
    --rr-color-tag-hover-text: #ffffff;
    --rr-color-tag-hover-bg: rgba(255, 255, 255, 0.14);
    --rr-color-tag-hover-border: rgba(255, 255, 255, 0.25);
    --rr-color-tag-hover-shadow: rgba(0, 0, 0, 0.2);

    --rr-color-card-bg: #1a1a1a;
    --rr-color-card-border: rgba(255, 255, 255, 0.12);
    --rr-color-card-shadow: rgba(0, 0, 0, 0.3);
    --rr-color-card-footer-border: rgba(255, 255, 255, 0.1);

    --rr-color-btn-secondary-text: rgba(255, 255, 255, 0.85);
    --rr-color-btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --rr-color-btn-secondary-border: rgba(255, 255, 255, 0.15);
    --rr-color-btn-secondary-hover-text: #ffffff;
    --rr-color-btn-secondary-hover-bg: rgba(255, 255, 255, 0.14);
    --rr-color-btn-secondary-hover-border: rgba(255, 255, 255, 0.25);

    --rr-color-link-card-text: rgba(255, 255, 255, 0.75);
    --rr-color-link-card-hover-bg: rgba(255, 255, 255, 0.08);

    --rr-color-breadcrumb-bg: #181818;
    --rr-color-breadcrumb-border: rgba(255, 255, 255, 0.1);
    --rr-color-breadcrumb-link: rgba(255, 255, 255, 0.65);
    --rr-color-breadcrumb-separator: rgba(255, 255, 255, 0.35);

    --rr-color-search-results-bg: #1a1a1a;
    --rr-color-search-results-border: rgba(255, 255, 255, 0.12);
    --rr-color-search-results-header-bg: #242424;
    --rr-color-search-results-header-border: rgba(255, 255, 255, 0.1);
    --rr-color-search-results-item-border: rgba(255, 255, 255, 0.08);
    --rr-color-search-results-item-hover-bg: rgba(255, 255, 255, 0.06);
    --rr-color-search-results-title: rgba(255, 255, 255, 0.92);
    --rr-color-search-results-text: rgba(255, 255, 255, 0.65);
    --rr-color-search-results-badge-bg: #5a6268;

    --rr-color-hex-highlight-0-bg: rgba(126, 200, 232, 0.22);
    --rr-color-hex-highlight-1-bg: rgba(143, 212, 239, 0.2);
    --rr-color-hex-highlight-2-bg: rgba(168, 218, 240, 0.18);
    --rr-color-hex-highlight-3-bg: rgba(255, 255, 255, 0.1);
    --rr-color-hex-highlight-4-bg: rgba(255, 255, 255, 0.08);
    --rr-color-hex-highlight-5-bg: rgba(255, 255, 255, 0.12);
    --rr-color-hex-highlight-6-bg: rgba(126, 200, 232, 0.14);
    --rr-color-hex-highlight-7-bg: rgba(143, 212, 239, 0.12);
    --rr-color-hex-highlight-hover-border: #7ec8e8;
    --rr-color-hex-highlight-selected-border: #8fd4ef;

    --rr-color-r2-mnemonic: #79c0ff;
    --rr-color-r2-number: #ffa657;
    --rr-color-r2-call: #7ee787;
    --rr-color-r2-register: #c9d1d9;
    --rr-color-r2-label: #d2a8ff;
    --rr-color-r2-comment: #8b949e;
  }
}

/* Homepage always uses the dark feed palette regardless of system theme */
body.home-page {
  --rr-color-main-bg: var(--rr-color-feed-bg);
  --rr-color-main-text: var(--rr-color-feed-text);
  background-color: var(--rr-color-feed-bg);
}

/* File Lab - in-browser binary inspection modal */

.rr-file-lab-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rr-color-search-field-border);
  border-radius: 18px;
  background: var(--rr-color-search-field-bg);
  color: var(--rr-color-search-field-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.rr-file-lab-trigger:hover,
.rr-file-lab-trigger:focus {
  background: var(--rr-color-search-field-bg-focus);
  border-color: var(--rr-color-search-field-border-focus);
  color: var(--rr-color-search-field-text);
  text-decoration: none;
  outline: none;
}

.rr-file-lab-trigger i {
  font-size: 14px;
  opacity: 0.9;
}

.rr-file-lab-trigger.has-session {
  border-color: var(--rr-color-search-field-border-focus);
}

.rr-file-lab-trigger.is-minimized {
  background: var(--rr-color-search-field-bg-focus);
}

#header .navbar .navbar-right {
  gap: 10px;
}

.rr-file-lab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--rr-color-sidebar-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rr-file-lab-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

body.rr-file-lab-open {
  overflow: hidden;
}

.rr-file-lab-dialog {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: min(90vh, 920px);
  border: 1px solid var(--rr-color-card-border);
  border-radius: 14px;
  background: var(--rr-color-card-bg);
  box-shadow: 0 24px 80px var(--rr-color-card-shadow);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease;
}

.rr-file-lab-backdrop.is-open .rr-file-lab-dialog {
  transform: translateY(0) scale(1);
}

/* /file-lab/ standalone page: fill the viewport */
body.rr-file-lab-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rr-color-card-bg);
  color: var(--rr-color-content-text);
  overflow: hidden;
}

body.rr-file-lab-page .rr-file-lab-dialog {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

body.rr-file-lab-standalone .rr-file-lab-minimize {
  display: none;
}

.rr-file-lab-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rr-color-content-border);
  background: var(--rr-color-card-bg);
  flex-shrink: 0;
  min-height: 52px;
}

.rr-file-lab-header-main {
  grid-column: 1;
  min-width: 0;
}

.rr-file-lab-header-tree,
.rr-file-lab-header-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rr-file-lab-header-detail {
  overflow: hidden;
}

.rr-file-lab-tabs {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.rr-file-lab-header-actions {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rr-file-lab-minimize,
.rr-file-lab-close,
.rr-file-lab-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rr-color-meta);
  cursor: pointer;
  flex-shrink: 0;
}

.rr-file-lab-dialog.is-settings-open .rr-file-lab-settings-toggle {
  background: var(--rr-color-table-hover);
  color: var(--rr-color-heading);
}

.rr-file-lab-minimize i {
  font-size: 12px;
  transform: translateY(-2px);
}

.rr-file-lab-minimize:hover,
.rr-file-lab-minimize:focus,
.rr-file-lab-close:hover,
.rr-file-lab-close:focus,
.rr-file-lab-settings-toggle:hover,
.rr-file-lab-settings-toggle:focus {
  background: var(--rr-color-table-hover);
  color: var(--rr-color-heading);
  outline: none;
}

.rr-file-lab-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rr-file-lab-title-wrap i {
  color: var(--rr-color-accent);
  font-size: 18px;
}

.rr-file-lab-title {
  margin: 0;
  color: var(--rr-color-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.rr-file-lab-subtitle {
  margin: 2px 0 0;
  color: var(--rr-color-meta);
  font-size: 12px;
  line-height: 1.3;
}

.rr-file-lab-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--rr-color-card-bg);
}

.rr-file-lab-settings {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: auto;
  background: var(--rr-color-card-bg);
}

.rr-file-lab-settings-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 24px 28px;
}

.rr-file-lab-settings-title {
  margin: 0 0 16px;
  color: var(--rr-color-heading);
  font-size: 18px;
  font-weight: 700;
}

.rr-file-lab-settings-section + .rr-file-lab-settings-section {
  margin-top: 24px;
}

.rr-file-lab-settings-heading {
  margin: 0 0 12px;
  color: var(--rr-color-heading);
  font-size: 14px;
  font-weight: 600;
}

.rr-file-lab-stage {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.rr-file-lab-stage.is-detail {
  transform: translateX(-50%);
}

.rr-file-lab-pane {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  min-width: 0;
  background: var(--rr-color-card-bg);
}

.rr-file-lab-dropzone {
  margin: 12px;
  padding: 22px 16px;
  border: 2px dashed var(--rr-color-content-border-subtle);
  border-radius: 12px;
  background: var(--rr-color-pre-bg);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.rr-file-lab-dropzone.is-dragover {
  border-color: var(--rr-color-accent);
  background: var(--rr-color-table-hover);
}

.rr-file-lab-dropzone-icon {
  color: var(--rr-color-accent);
  font-size: 24px;
  margin-bottom: 8px;
}

.rr-file-lab-dropzone-title {
  margin: 0 0 4px;
  color: var(--rr-color-heading);
  font-size: 15px;
  font-weight: 600;
}

.rr-file-lab-dropzone-text {
  margin: 0 0 12px;
  color: var(--rr-color-meta);
  font-size: 13px;
}

.rr-file-lab-browse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rr-color-btn-secondary-border);
  border-radius: 8px;
  background: var(--rr-color-btn-secondary-bg);
  color: var(--rr-color-content-link);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.rr-file-lab-browse:hover,
.rr-file-lab-browse:focus {
  border-color: var(--rr-color-btn-secondary-hover-border);
  background: var(--rr-color-btn-secondary-hover-bg);
  color: var(--rr-color-content-link-hover);
  outline: none;
}

.rr-file-lab-browse input {
  display: none;
}

.rr-file-lab-install {
  padding: 12px 14px;
  border: 1px solid var(--rr-color-content-border);
  border-radius: 12px;
  background: var(--rr-color-pre-bg);
}

.rr-file-lab-install-label {
  display: block;
  margin: 0 0 8px;
  color: var(--rr-color-heading);
  font-size: 13px;
  font-weight: 600;
}

.rr-file-lab-install-row {
  display: flex;
  gap: 8px;
}

.rr-file-lab-install-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--rr-color-search-field-border);
  border-radius: 8px;
  background: var(--rr-color-search-field-bg);
  color: var(--rr-color-search-field-text);
  font-size: 13px;
}

.rr-file-lab-install-input:focus {
  border-color: var(--rr-color-search-field-border-focus);
  background: var(--rr-color-search-field-bg-focus);
  outline: none;
}

.rr-file-lab-install-button {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--rr-color-btn-secondary-border);
  border-radius: 8px;
  background: var(--rr-color-btn-secondary-bg);
  color: var(--rr-color-content-link);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.rr-file-lab-install-button:hover,
.rr-file-lab-install-button:focus {
  border-color: var(--rr-color-btn-secondary-hover-border);
  background: var(--rr-color-btn-secondary-hover-bg);
  color: var(--rr-color-content-link-hover);
  outline: none;
}

.rr-file-lab-install-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rr-file-lab-install-help {
  margin: 8px 0 0;
  color: var(--rr-color-meta);
  font-size: 12px;
  line-height: 1.45;
}

.rr-file-lab-install-help code {
  font-size: 11px;
}

.rr-file-lab-installed-plugins {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.rr-file-lab-installed-plugin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--rr-color-content-border-subtle);
}

.rr-file-lab-installed-plugin:first-child {
  border-top: none;
}

.rr-file-lab-installed-plugin-title {
  min-width: 0;
  color: var(--rr-color-heading);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rr-file-lab-installed-plugin-remove {
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--rr-color-content-border);
  border-radius: 6px;
  background: transparent;
  color: var(--rr-color-meta);
  font-size: 11px;
  cursor: pointer;
}

.rr-file-lab-installed-plugin-remove:hover,
.rr-file-lab-installed-plugin-remove:focus {
  border-color: var(--rr-color-accent);
  color: var(--rr-color-accent);
  outline: none;
}

.rr-file-lab-install-error {
  margin: 8px 0 0;
  color: var(--rr-color-accent);
  font-size: 12px;
}

.rr-file-lab-tree-wrap {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 12px 12px;
  border: 1px solid var(--rr-color-content-border);
  border-radius: 12px;
  background: var(--rr-color-pre-bg);
  overflow: auto;
}

.rr-file-lab-tree-empty {
  padding: 24px 16px;
  color: var(--rr-color-meta);
  font-size: 13px;
  text-align: center;
}

.rr-file-lab-tree {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.rr-file-lab-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 18px;
}

.rr-file-lab-tree-item {
  margin: 0;
}

.rr-file-lab-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--rr-color-content-text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.rr-file-lab-tree-row:hover,
.rr-file-lab-tree-row:focus {
  background: var(--rr-color-table-hover);
  outline: none;
}

.rr-file-lab-tree-row.is-folder {
  cursor: default;
  font-weight: 600;
  color: var(--rr-color-heading);
}

.rr-file-lab-tree-row .fa-folder,
.rr-file-lab-tree-row .fa-file {
  width: 14px;
  flex-shrink: 0;
  color: var(--rr-color-meta);
}

.rr-file-lab-tree-row .fa-folder {
  color: var(--rr-color-content-link);
}

.rr-file-lab-tree-size {
  margin-left: auto;
  color: var(--rr-color-meta);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rr-file-lab-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rr-color-btn-secondary-border);
  border-radius: 8px;
  background: var(--rr-color-btn-secondary-bg);
  color: var(--rr-color-content-link);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.rr-file-lab-back:hover,
.rr-file-lab-back:focus {
  border-color: var(--rr-color-btn-secondary-hover-border);
  background: var(--rr-color-btn-secondary-hover-bg);
  color: var(--rr-color-content-link-hover);
  outline: none;
}

.rr-file-lab-detail-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.rr-file-lab-detail-name {
  margin: 0;
  color: var(--rr-color-heading);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-file-lab-detail-path {
  margin: 1px 0 0;
  color: var(--rr-color-meta);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-file-lab-tab {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--rr-color-tab-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.rr-file-lab-tab.is-active {
  color: var(--rr-color-accent);
  border-color: var(--rr-color-content-border);
  background: var(--rr-color-pre-bg);
}

.rr-file-lab-tab:hover,
.rr-file-lab-tab:focus {
  color: var(--rr-color-heading);
  outline: none;
}

.rr-file-lab-pane-detail {
  min-height: 0;
}

.rr-file-lab-pane-detail .rr-file-lab-content {
  display: flex;
  flex-direction: column;
}

.rr-file-lab-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.rr-file-lab-tab-panel {
  display: none;
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--rr-color-pre-bg);
  margin: 0;
  padding: 0;
}

.rr-file-lab-tab-panel.is-active {
  display: block;
}

.rr-file-lab-virtual-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.rr-file-lab-virtual-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.rr-file-lab-virtual-spacer {
  position: relative;
  width: 100%;
}

.rr-file-lab-virtual-window {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

.rr-file-lab-notice {
  margin: 10px 12px 0;
  padding: 8px 10px;
  border: 1px solid var(--rr-color-code-border);
  border-radius: 8px;
  background: var(--rr-color-code-bg);
  color: var(--rr-color-content-text);
  font-size: 12px;
}

.rr-file-lab-storage-notice {
  margin: 12px 12px 0;
  flex-shrink: 0;
}

.rr-file-lab-plugin-placeholder {
  padding: 20px 16px;
  color: var(--rr-color-content-text);
}

.rr-file-lab-plugin-placeholder h3 {
  margin: 0 0 8px;
  color: var(--rr-color-heading);
  font-size: 16px;
}

.rr-file-lab-plugin-placeholder p {
  margin: 0 0 10px;
  color: var(--rr-color-meta);
  font-size: 13px;
  line-height: 1.5;
}

.rr-file-lab-footer-note {
  padding: 8px 14px;
  border-top: 1px solid var(--rr-color-content-border);
  background: var(--rr-color-card-bg);
  color: var(--rr-color-meta);
  font-size: 11px;
  flex-shrink: 0;
}

.rr-file-lab-dialog.is-detail .rr-file-lab-footer-note {
  display: none;
}

@media (max-width: 768px) {
  .rr-file-lab-backdrop {
    padding: 0;
  }

  .rr-file-lab-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
  }

  .rr-file-lab-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }

  .rr-file-lab-header-main {
    grid-column: 1;
    grid-row: 1;
  }

  .rr-file-lab-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: 100%;
    justify-content: center;
    padding-top: 4px;
  }

  .rr-file-lab-header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .rr-file-lab-trigger span {
    display: none;
  }

  .rr-file-lab-trigger {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}