:root {
  --scanner-card: rgba(8, 13, 21, 0.94);
  --scanner-card-raised: rgba(12, 18, 28, 0.96);
  --scanner-border: rgba(148, 163, 184, 0.22);
  --scanner-border-soft: rgba(148, 163, 184, 0.14);
  --scanner-button: rgba(15, 23, 42, 0.72);
}

html,
body.scanner-app {
  background:
    radial-gradient(circle at 14% 10%, rgba(0, 229, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 86% 0%, rgba(34, 230, 168, 0.12), transparent 28rem),
    linear-gradient(135deg, #070a10 0%, #0b1220 46%, #08111b 100%) !important;
  color: var(--vp-dashboard-text-color) !important;
  font-family: var(--body) !important;
  font-size: var(--vp-readable-size, 14px);
  font-weight: var(--vp-sidebar-text-weight);
  text-rendering: optimizeLegibility;
}

body.scanner-app {
  min-height: 100vh !important;
  display: block !important;
  padding: var(--vp-shell-inset, 12px) !important;
}

.hidden {
  display: none !important;
}

body.scanner-app #mainWrapper {
  width: 100% !important;
  min-height: calc(100vh - (var(--vp-shell-inset, 12px) * 2)) !important;
  margin-left: 0 !important;
  padding-top: calc(var(--vp-topbar-height, 64px) + var(--vp-layout-gap, 16px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: none !important;
}

body.scanner-app .scanner-topbar {
  position: fixed !important;
  top: var(--vp-shell-inset, 12px) !important;
  left: var(--vp-shell-inset, 12px) !important;
  right: var(--vp-shell-inset, 12px) !important;
  z-index: 100 !important;
  height: var(--vp-topbar-height, 64px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: var(--vp-section-radius, 16px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.020)),
    rgba(7, 10, 16, 0.84) !important;
  color: var(--vp-dashboard-text-color) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.scanner-app .scanner-topbar-email {
  color: var(--vp-dashboard-muted-color) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: var(--vp-sidebar-text-weight) !important;
}

body.scanner-app .scanner-topbar-session {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.scanner-app .scanner-topbar-avatar {
  display: none !important;
}

body.scanner-app .scanner-topbar-signout {
  min-height: 32px !important;
  border: 1px solid var(--scanner-border) !important;
  border-radius: 8px !important;
  background: var(--scanner-button) !important;
  color: var(--vp-dashboard-muted-color) !important;
  padding: 6px 10px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
}

body.scanner-app .scanner-topbar-signout:hover {
  border-color: rgba(0, 229, 255, 0.34) !important;
  background: rgba(0, 229, 255, 0.12) !important;
  color: var(--accent) !important;
}

body.scanner-app .scanner-main {
  min-width: 0 !important;
  min-height: calc(100vh - var(--vp-topbar-height, 64px) - var(--vp-layout-gap, 16px) - (var(--vp-shell-inset, 12px) * 2)) !important;
  margin-left: calc(var(--vp-sidebar-expanded, 260px) + var(--vp-layout-gap, 16px)) !important;
  padding: 26px 28px 36px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: var(--vp-section-radius, 16px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.018)),
    rgba(6, 10, 18, 0.42) !important;
  color: var(--vp-dashboard-text-color) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16) !important;
  overflow: hidden !important;
}

body.scanner-app #scannerContent {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: var(--vp-layout-gap, 16px) !important;
}

body.scanner-app #scannerContent.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

body.scanner-app .bg-card,
body.scanner-app .bg-surface,
body.scanner-app .bg-\[\#111118\],
body.scanner-app .bg-\[\#0d0d14\],
body.scanner-app #scanHistoryTable,
body.scanner-app #findingsSection > .bg-card,
body.scanner-app #scannerContent .bg-card,
body.scanner-app #stateNotConnected > div,
body.scanner-app #stateConnecting > div {
  border: 1px solid var(--scanner-border) !important;
  border-radius: var(--vp-card-radius, 14px) !important;
  background: var(--scanner-card) !important;
  color: var(--vp-dashboard-text-color) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

body.scanner-app #stateNotConnected > div,
body.scanner-app #stateConnecting > div {
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 40px !important;
  text-align: center !important;
}

body.scanner-app .border-border,
body.scanner-app .border-\[\#1e1e2e\],
body.scanner-app .border-brand\/20,
body.scanner-app .border-brand\/30,
body.scanner-app .focus\:border-brand\/50:focus {
  border-color: var(--scanner-border) !important;
}

body.scanner-app .text-white,
body.scanner-app h1,
body.scanner-app h2,
body.scanner-app h3,
body.scanner-app h4 {
  color: var(--vp-dashboard-text-color) !important;
}

body.scanner-app .text-gray-200,
body.scanner-app .text-gray-300,
body.scanner-app .text-gray-400,
body.scanner-app p,
body.scanner-app label {
  color: var(--vp-dashboard-muted-color) !important;
}

body.scanner-app .text-gray-500,
body.scanner-app .text-gray-600 {
  color: var(--vp-dashboard-soft-color) !important;
}

body.scanner-app .text-brand,
body.scanner-app .text-\[\#22d3ee\],
body.scanner-app .text-\[\#06b6d4\] {
  color: var(--accent) !important;
}

body.scanner-app .text-green-400 {
  color: var(--ok) !important;
}

body.scanner-app .text-red-400,
body.scanner-app .text-red-300,
body.scanner-app .text-red-200 {
  color: var(--danger) !important;
}

body.scanner-app .text-yellow-400,
body.scanner-app .text-yellow-300,
body.scanner-app .text-yellow-200,
body.scanner-app .text-amber-400,
body.scanner-app .text-orange-300,
body.scanner-app .text-orange-200,
body.scanner-app .text-blue-300,
body.scanner-app .text-blue-200 {
  color: var(--warn) !important;
}

body.scanner-app .bg-brand,
body.scanner-app .bg-\[\#6366f1\],
body.scanner-app .bg-gradient-to-r {
  background: linear-gradient(135deg, var(--accent), var(--ok)) !important;
  color: #001016 !important;
}

body.scanner-app .bg-brand\/10,
body.scanner-app .bg-brand\/20,
body.scanner-app .bg-\[\#06b6d4\]\/5 {
  background: rgba(0, 229, 255, 0.10) !important;
}

body.scanner-app .rounded-2xl,
body.scanner-app .rounded-xl,
body.scanner-app .rounded-lg {
  border-radius: 8px !important;
}

body.scanner-app .rounded-full {
  border-radius: 999px !important;
}

body.scanner-app .shadow-2xl,
body.scanner-app .shadow-lg,
body.scanner-app .btn-glow,
body.scanner-app .btn-glow:hover {
  box-shadow: none !important;
}

body.scanner-app button,
body.scanner-app a,
body.scanner-app input,
body.scanner-app select,
body.scanner-app textarea {
  font-family: var(--mono) !important;
  font-weight: var(--vp-sidebar-text-weight) !important;
}

body.scanner-app input,
body.scanner-app select,
body.scanner-app textarea {
  background-color: rgba(5, 10, 18, 0.72) !important;
  background-image: none !important;
  border-color: var(--scanner-border) !important;
  color: var(--vp-dashboard-text-color) !important;
  color-scheme: dark;
  outline: none !important;
  box-shadow: inset 0 0 0 999px rgba(5, 10, 18, 0.72) !important;
  -webkit-text-fill-color: var(--vp-dashboard-text-color) !important;
}

body.scanner-app input::placeholder,
body.scanner-app textarea::placeholder {
  color: var(--vp-dashboard-soft-color) !important;
}

body.scanner-app input:focus,
body.scanner-app select:focus,
body.scanner-app textarea:focus {
  border-color: rgba(0, 229, 255, 0.55) !important;
  box-shadow:
    inset 0 0 0 999px rgba(5, 10, 18, 0.72),
    0 0 0 3px rgba(0, 229, 255, 0.12) !important;
}

body.scanner-app #connectGitHubBtn,
body.scanner-app #prSubmitBtn,
body.scanner-app #bulkCreatePrBtn,
body.scanner-app #createPrBtn,
body.scanner-app #migrateBtn,
body.scanner-app #addAllowlistBtn {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--accent), var(--ok)) !important;
  color: #001016 !important;
  padding: 0 16px !important;
}

body.scanner-app :where(.w-3\.5, .w-4, .w-5, .w-6, .w-7, .w-8, .w-12, .w-14, .w-16) {
  flex: 0 0 auto !important;
}

body.scanner-app .w-3\.5 {
  width: 14px !important;
}

body.scanner-app .h-3\.5 {
  height: 14px !important;
}

body.scanner-app .w-4 {
  width: 16px !important;
}

body.scanner-app .h-4 {
  height: 16px !important;
}

body.scanner-app .w-5 {
  width: 20px !important;
}

body.scanner-app .h-5 {
  height: 20px !important;
}

body.scanner-app .w-6 {
  width: 24px !important;
}

body.scanner-app .h-6 {
  height: 24px !important;
}

body.scanner-app .w-7 {
  width: 28px !important;
}

body.scanner-app .h-7 {
  height: 28px !important;
}

body.scanner-app .w-8 {
  width: 32px !important;
}

body.scanner-app .h-8 {
  height: 32px !important;
}

body.scanner-app .w-12 {
  width: 48px !important;
}

body.scanner-app .h-12 {
  height: 48px !important;
}

body.scanner-app .w-14 {
  width: 56px !important;
}

body.scanner-app .h-14 {
  height: 56px !important;
}

body.scanner-app .w-16 {
  width: 64px !important;
}

body.scanner-app .h-16 {
  height: 64px !important;
}


@media (max-width: 680px) {
  body.scanner-app .scanner-topbar {
    gap: 10px !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: var(--vp-topbar-height, 64px) !important;
    padding: 12px 16px !important;
  }

  body.scanner-app .scanner-topbar-session {
    margin-left: auto !important;
  }

  body.scanner-app .scanner-topbar-email {
    max-width: 140px !important;
  }

  body.scanner-app #stateNotConnected > div,
  body.scanner-app #stateConnecting > div {
    padding: 28px 20px !important;
  }
}