:root {
  --vp-app-surface: rgba(12, 16, 22, 0.96);
  --vp-app-surface-soft: rgba(18, 23, 31, 0.86);
  --vp-app-surface-raised: rgba(23, 29, 38, 0.96);
  --vp-app-control: rgba(8, 12, 18, 0.94);
  --vp-app-border: rgba(226, 232, 240, 0.15);
  --vp-app-border-strong: rgba(87, 220, 233, 0.42);
  --vp-app-muted: #9aa6b5;
  --vp-app-soft: #c3cbd5;
  --vp-app-cyan: #57dce9;
  --vp-app-green: #46d6a5;
  --vp-app-amber: #f2bd5b;
  --vp-app-red: #ff7185;
  --vp-app-focus: rgba(87, 220, 233, 0.42);
  --vp-surface-card: var(--vp-app-surface);
  --vp-surface-raised: var(--vp-app-surface-raised);
  --vp-surface-control: var(--vp-app-control);
  --vp-surface-border: var(--vp-app-border);
  --vp-surface-border-soft: rgba(226, 232, 240, 0.10);
  --vp-surface-border-accent: var(--vp-app-border-strong);
  --vp-surface-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

html,
body {
  background: #070a0e !important;
}

body {
  color: var(--text) !important;
  font-family: var(--body) !important;
  letter-spacing: 0 !important;
}

.main *,
body.scanner-app .scanner-main * {
  letter-spacing: 0 !important;
}

.layout {
  grid-template-columns: var(--vp-sidebar-expanded, 260px) minmax(0, 1fr) !important;
  min-height: calc(100vh - var(--vp-topbar-height, 64px) - var(--vp-layout-gap, 16px) - (var(--vp-shell-inset, 12px) * 2)) !important;
}

.main,
.main.keys-main,
.main.marketplace-main,
.main.plans-main,
.main.settings-main,
body.scanner-app .scanner-main {
  container-type: inline-size !important;
  min-width: 0 !important;
  padding: 20px 24px 40px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 8px !important;
  background: rgba(8, 12, 18, 0.34) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  overflow: visible !important;
}

body.scanner-app .scanner-topbar {
  left: var(--vp-app-shell-edge) !important;
  right: auto !important;
  width: min(calc(100% - (var(--vp-shell-inset) * 2)), var(--vp-app-shell-max)) !important;
}

body.scanner-app #sidebar.sidebar.enterprise-app-sidebar {
  left: var(--vp-app-shell-edge) !important;
}

body.scanner-app .scanner-main {
  width: calc(min(100%, var(--vp-app-shell-max)) - var(--vp-sidebar-expanded) - var(--vp-layout-gap) - 80px) !important;
  max-width: none !important;
  margin-left: calc(max(0px, calc((100% - var(--vp-app-shell-max)) / 2)) + var(--vp-sidebar-expanded) + var(--vp-layout-gap)) !important;
  margin-right: 0 !important;
}

.main > * + * {
  margin-top: 16px !important;
}

.plans-wrap,
.settings-wrap,
body.scanner-app #scannerContent {
  width: 100% !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

.plans-wrap {
  display: grid !important;
  gap: 16px !important;
}

.plans-wrap > * + * {
  margin-top: 0 !important;
}

.app-page-header,
.page-header,
.plans-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-page-heading,
.page-heading,
.plans-heading-copy {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 760px !important;
  padding: 0 !important;
}

.app-eyebrow,
.section-label,
.keys-section-kicker,
.banner-kicker,
.app-kpi-label,
.kpi-label {
  margin: 0 !important;
  color: var(--vp-app-muted) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.app-eyebrow {
  margin-bottom: 5px !important;
  color: var(--vp-app-cyan) !important;
}

.app-page-title,
.page-title,
.plans-heading .page-title {
  margin: 0 !important;
  color: var(--text) !important;
  font-family: var(--display) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.plans-heading .page-title span {
  color: var(--text) !important;
}

.app-page-description,
.page-desc,
.plans-heading .page-desc {
  max-width: 700px !important;
  margin: 7px 0 0 !important;
  color: var(--vp-app-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.page-meta {
  display: block !important;
  margin-top: 5px !important;
  color: var(--vp-app-muted) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.app-page-actions,
.page-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.app-button,
.main :where(.btn, .btn-outline, .btn-primary, .btn-danger),
body.scanner-app :where(.scanner-topbar-signout) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface-soft) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease !important;
}

.app-button:hover,
.main :where(.btn, .btn-outline, .btn-danger):hover,
body.scanner-app .scanner-topbar-signout:hover {
  border-color: var(--vp-app-border-strong) !important;
  background: var(--vp-app-surface-raised) !important;
  color: var(--vp-app-cyan) !important;
  transform: none !important;
}

.app-button-primary,
.main :where(.btn-primary) {
  border-color: rgba(87, 220, 233, 0.48) !important;
  background: var(--vp-app-cyan) !important;
  color: #071013 !important;
}

.app-button-primary:hover,
.main :where(.btn-primary):hover {
  background: #7de7ef !important;
  color: #071013 !important;
}

html body .settings-wrap .app-button-primary,
html body .settings-wrap #saveGlobalLimitsBtn {
  border-color: rgba(87, 220, 233, 0.48) !important;
  background: var(--vp-app-cyan) !important;
  color: #071013 !important;
  box-shadow: none !important;
}

html body .settings-wrap .app-button-primary:hover,
html body .settings-wrap #saveGlobalLimitsBtn:hover {
  background: #7de7ef !important;
  color: #071013 !important;
}

.main :where(.btn-danger) {
  border-color: rgba(255, 113, 133, 0.34) !important;
  background: rgba(255, 113, 133, 0.08) !important;
  color: var(--vp-app-red) !important;
}

.app-button:focus-visible,
.main :where(button, a, input, select, textarea, summary):focus-visible,
body.scanner-app :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--vp-app-focus) !important;
  outline-offset: 2px !important;
}

.app-kpi-grid,
.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-border) !important;
  box-shadow: none !important;
}

.app-kpi-card,
.kpi-cell {
  display: grid !important;
  align-content: center !important;
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 17px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--vp-app-surface-soft) !important;
  box-shadow: none !important;
}

.app-kpi-card + .app-kpi-card,
.kpi-cell + .kpi-cell {
  border-left: 0 !important;
}

.app-kpi-value,
.kpi-value,
.marketplace-stat strong {
  margin-top: 8px !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.kpi-value.ok {
  color: var(--vp-app-green) !important;
}

.kpi-value.warn,
.kpi-value.kpi-review {
  color: var(--vp-app-amber) !important;
}

.app-kpi-note,
.kpi-sub,
.marketplace-stat span {
  margin-top: 8px !important;
  color: var(--vp-app-muted) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.app-section,
.main :where(.panel, .chart-panel, .table-wrap, .keys-manager-panel, .tokens-section, .plan-selection, .usage-card, .billing-assurance, .enterprise-callout),
body.scanner-app :where(.bg-card, .bg-surface, #scanHistoryTable) {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  background-image: none !important;
  box-shadow: var(--vp-surface-shadow) !important;
}

.app-section-header,
.main :where(.panel-head, .keys-manager-head, .project-section-head, .section-heading, .usage-card-head) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 62px !important;
  padding: 14px 17px !important;
  border-bottom: 1px solid var(--vp-app-border) !important;
  background: transparent !important;
  color: var(--vp-app-muted) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.app-section-title,
.main :where(.panel-head h2, .panel-head h3, .keys-manager-title, .project-section-title, .section-heading h2, .usage-card-head h2) {
  margin: 3px 0 0 !important;
  color: var(--text) !important;
  font-family: var(--display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.app-section-description,
.main :where(.keys-manager-copy, .project-section-sub, .usage-card-head p) {
  margin: 5px 0 0 !important;
  color: var(--vp-app-muted) !important;
  font-family: var(--body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.app-section-body {
  padding: 17px !important;
}

.app-toolbar,
.filters {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  box-shadow: none !important;
}

.main .filters {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.main .filters-time-row {
  margin-top: 0 !important;
  padding-top: 12px !important;
  border-top-color: var(--vp-app-border) !important;
}

.main :where(input, select, textarea, .form-control, .search-input, .select-input, .org-select, .form-input, .form-select, .form-textarea),
body.scanner-app :where(input, select, textarea) {
  min-height: 38px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-control) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.main :where(input, textarea)::placeholder,
body.scanner-app :where(input, textarea)::placeholder {
  color: #6f7b89 !important;
}

.main :where(input, select, textarea, .form-control, .search-input, .select-input):focus,
body.scanner-app :where(input, select, textarea):focus {
  border-color: var(--vp-app-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(87, 220, 233, 0.08) !important;
  outline: 0 !important;
}

.filter-chip,
.marketplace-filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vp-app-muted) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.filter-chip:hover,
.filter-chip.active,
.marketplace-filter:hover,
.marketplace-filter.active {
  border-color: var(--vp-app-border) !important;
  background: var(--vp-app-surface-raised) !important;
  color: var(--vp-app-cyan) !important;
}

.app-secondary-actions {
  position: relative !important;
  min-width: 0 !important;
}

.app-secondary-actions > summary {
  list-style: none !important;
}

.app-secondary-actions > summary::-webkit-details-marker {
  display: none !important;
}

.app-secondary-actions-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  width: min(310px, calc(100vw - 40px)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: #0c1016 !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.42) !important;
}

.app-secondary-actions-menu .app-button {
  width: 100% !important;
  justify-content: flex-start !important;
}

.app-secondary-actions-message {
  min-height: 16px !important;
  color: var(--vp-app-muted) !important;
  font-size: 11px !important;
}

.banner {
  border: 1px solid var(--vp-app-border) !important;
  border-left: 3px solid var(--vp-app-cyan) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  background-image: none !important;
  box-shadow: var(--vp-surface-shadow) !important;
}

.banner-title {
  font-size: 26px !important;
  letter-spacing: 0 !important;
}

.main .activity-live-panel {
  display: block !important;
  position: static !important;
  top: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: var(--vp-app-surface) !important;
  overflow: hidden !important;
}

.activity-live-stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1px !important;
  border-bottom: 1px solid var(--vp-app-border) !important;
  background: var(--vp-app-border) !important;
}

.main .activity-live-stats .traffic-stat {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--vp-app-surface-soft) !important;
  box-shadow: none !important;
}

.activity-live-stats .traffic-stat span,
.activity-live-stats .traffic-stat strong {
  font-family: var(--mono) !important;
  letter-spacing: 0 !important;
}

.activity-live-stats .traffic-stat span {
  color: var(--vp-app-muted) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
}

.activity-live-stats .traffic-stat strong {
  color: var(--text) !important;
  font-size: 14px !important;
}

.activity-live-stats .traffic-stat.warning strong {
  color: var(--vp-app-amber) !important;
}

.main .activity-live-panel .live-title {
  min-height: 36px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--vp-app-border) !important;
  color: var(--vp-app-muted) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.main .activity-live-panel .live-api-feed {
  width: 100% !important;
  height: auto !important;
  min-height: 96px !important;
  max-height: 260px !important;
  margin: 0 !important;
  overflow: auto !important;
}

.main .activity-live-panel .live-api-empty {
  margin: 0 !important;
  padding: 30px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

.marketplace-grid {
  gap: 12px !important;
}

.app-kpi-grid.marketplace-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.provider-card {
  border-color: var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.provider-card:hover {
  border-color: var(--vp-app-border-strong) !important;
  transform: none !important;
}

.marketplace-disclosure,
.tip,
.billing-msg,
.billing-cycle-notice,
.trial-disclosure,
.limit-upgrade {
  border-radius: 6px !important;
  background-image: none !important;
  box-shadow: none !important;
}

.plans-heading .billing-control {
  flex: 0 1 360px !important;
  min-width: 310px !important;
  padding: 17px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  background-image: none !important;
  box-shadow: var(--vp-surface-shadow) !important;
}

.plan-card {
  border-color: var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.plan-card.featured {
  border-color: var(--vp-app-border-strong) !important;
  background: var(--vp-app-surface-soft) !important;
  background-image: none !important;
}

.plan-card:hover {
  border-color: var(--vp-app-border-strong) !important;
  transform: none !important;
}

.main .plan-selection {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.main .plan-selection > .section-heading {
  min-height: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 0 !important;
}

body.scanner-app .scanner-page-header {
  margin-bottom: 6px !important;
}

html body.scanner-app {
  background: #070a0e !important;
}

body.scanner-app .scanner-beta-badge {
  border-radius: 4px !important;
  color: var(--vp-app-amber) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

body.scanner-app :where(.anim-card, .anim-fade-up) {
  opacity: 1 !important;
  animation: none !important;
}

body.scanner-app #stateNotConnected > div,
body.scanner-app #stateConnecting > div {
  max-width: 680px !important;
  padding: 32px !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  background-image: none !important;
}

html body .settings-wrap .settings-card {
  padding: 20px !important;
  border: 1px solid var(--vp-app-border) !important;
  border-radius: 6px !important;
  background: var(--vp-app-surface) !important;
  background-image: none !important;
  box-shadow: var(--vp-surface-shadow) !important;
}

html body .settings-wrap .settings-danger-zone {
  border-color: rgba(255, 113, 133, 0.30) !important;
  background: rgba(255, 113, 133, 0.035) !important;
}

@media (max-width: 920px) {
  .layout {
    grid-template-columns: 1fr !important;
  }

  .main,
  .main.keys-main,
  .main.marketplace-main,
  .main.plans-main,
  .main.settings-main,
  body.scanner-app .scanner-main {
    padding: 18px 18px 34px !important;
  }

  .app-page-header,
  .page-header,
  .plans-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .app-page-actions,
  .page-actions {
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .app-kpi-grid,
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .app-kpi-grid.marketplace-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .plans-heading .billing-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  .activity-live-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.scanner-app .scanner-topbar {
    left: var(--vp-shell-inset) !important;
    right: var(--vp-shell-inset) !important;
    width: auto !important;
  }

  body.scanner-app .scanner-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 680px) {
  .main,
  .main.keys-main,
  .main.marketplace-main,
  .main.plans-main,
  .main.settings-main,
  body.scanner-app .scanner-main {
    padding: 14px 12px 28px !important;
  }

  .app-page-title,
  .page-title,
  .plans-heading .page-title {
    font-size: 26px !important;
  }

  .app-page-actions,
  .page-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .app-page-actions > *,
  .page-actions > * {
    width: 100% !important;
  }

  .app-kpi-card,
  .kpi-cell {
    min-height: 98px !important;
    padding: 14px !important;
  }

  .app-kpi-value,
  .kpi-value,
  .marketplace-stat strong {
    font-size: 23px !important;
  }

  .app-toolbar,
  .filters {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .app-section-header,
  .main :where(.panel-head, .keys-manager-head, .project-section-head, .section-heading, .usage-card-head) {
    flex-direction: column !important;
  }

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

  .activity-live-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .banner-title {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  .app-kpi-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .app-kpi-grid.marketplace-stats {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-button,
  .main :where(button, a),
  body.scanner-app :where(button, a) {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}