/*
 * Sub2API blue/pink minimal theme overlay.
 * Purpose: visual polish only; no bundled app files are modified.
 */
:root {
  color-scheme: light;
  --sn-bg: #f8fbff;
  --sn-bg-soft: #fff7fb;
  --sn-panel: rgba(255, 255, 255, 0.96);
  --sn-panel-strong: #ffffff;
  --sn-ink: #111827;
  --sn-muted: #667085;
  --sn-line: #dbe8ff;
  --sn-blue-50: #eff6ff;
  --sn-blue-100: #dbeafe;
  --sn-blue-500: #2f7df6;
  --sn-blue-600: #1f64d8;
  --sn-blue-700: #194fae;
  --sn-pink-50: #fff1f7;
  --sn-pink-100: #ffd9ea;
  --sn-pink-400: #f472b6;
  --sn-pink-500: #ec4899;
  --sn-pink-600: #db2777;
  --sn-shadow: 0 10px 30px rgba(31, 100, 216, 0.08);
  --sn-shadow-soft: 0 4px 16px rgba(236, 72, 153, 0.06);
  --tw-ring-color: rgba(47, 125, 246, 0.24);
  font-variant-ligatures: none;
}

html,
body,
#app,
html.dark,
html.dark body,
html.dark #app {
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.92) 0%, rgba(255, 247, 251, 0.72) 52%, #ffffff 100%) !important;
  color: var(--sn-ink) !important;
}

body {
  letter-spacing: 0 !important;
}

::selection {
  background: rgba(236, 72, 153, 0.18) !important;
  color: #101828 !important;
}

* {
  scrollbar-color: #b9d6ff #f7fbff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f7fbff;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #bfdbfe, #ffd9ea);
  border: 2px solid #f7fbff;
  border-radius: 999px;
}

.text-gradient,
[class~="text-gradient"] {
  background-image: linear-gradient(135deg, var(--sn-blue-700), var(--sn-blue-500) 58%, var(--sn-pink-500)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

a,
.text-primary-500,
.text-primary-600,
.text-primary-700,
[class~="text-primary-500"],
[class~="text-primary-600"],
[class~="text-primary-700"] {
  color: var(--sn-blue-600) !important;
}

a:hover {
  color: var(--sn-pink-600) !important;
}

.navigation-progress-bar {
  background: linear-gradient(90deg, transparent, var(--sn-blue-500), var(--sn-pink-500), transparent) !important;
}

.btn,
button,
[role="button"] {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

.btn {
  font-weight: 650 !important;
}

.btn-primary,
[class~="btn-primary"] {
  background: linear-gradient(135deg, var(--sn-blue-600), var(--sn-blue-500) 62%, var(--sn-pink-500)) !important;
  border: 1px solid rgba(47, 125, 246, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(47, 125, 246, 0.18) !important;
}

.btn-primary:hover,
[class~="btn-primary"]:hover {
  background: linear-gradient(135deg, var(--sn-blue-700), var(--sn-blue-600) 56%, var(--sn-pink-600)) !important;
  box-shadow: 0 12px 26px rgba(236, 72, 153, 0.18) !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-ghost,
[class~="btn-secondary"],
[class~="btn-ghost"] {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--sn-line) !important;
  color: #1f4f9f !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
[class~="btn-secondary"]:hover,
[class~="btn-ghost"]:hover {
  background: linear-gradient(135deg, var(--sn-blue-50), var(--sn-pink-50)) !important;
  border-color: #c7ddff !important;
}

.card,
.card-glass,
.modal-content,
.table-wrapper,
[class~="card"],
[class~="card-glass"],
[class~="modal-content"],
[class~="table-wrapper"] {
  background: var(--sn-panel) !important;
  border: 1px solid rgba(219, 232, 255, 0.92) !important;
  border-radius: 8px !important;
  box-shadow: var(--sn-shadow) !important;
}

.card-glass,
[class~="card-glass"] {
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.sidebar,
[class~="sidebar"] {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbff 56%, #fff7fb 100%) !important;
  border-right: 1px solid var(--sn-line) !important;
  box-shadow: 8px 0 24px rgba(31, 100, 216, 0.055) !important;
}

.sidebar-header,
[class~="sidebar-header"] {
  border-color: var(--sn-line) !important;
}

.sidebar-section-title,
[class~="sidebar-section-title"] {
  color: #7a879a !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.sidebar-link,
[class~="sidebar-link"] {
  border-radius: 8px !important;
  color: #344054 !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar-link:hover,
[class~="sidebar-link"]:hover {
  background: linear-gradient(90deg, var(--sn-blue-50), var(--sn-pink-50)) !important;
  color: var(--sn-blue-700) !important;
}

.sidebar-link-active,
[class~="sidebar-link-active"] {
  background: linear-gradient(90deg, #dcecff 0%, #fff1f7 100%) !important;
  border: 1px solid rgba(191, 219, 254, 0.9) !important;
  color: #153f8a !important;
  box-shadow: inset 3px 0 0 var(--sn-pink-500), 0 6px 16px rgba(31, 100, 216, 0.08) !important;
}

.input,
input,
textarea,
select,
[class~="input"] {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #cadfff !important;
  border-radius: 8px !important;
  color: var(--sn-ink) !important;
}

.input:focus,
input:focus,
textarea:focus,
select:focus,
[class~="input"]:focus {
  border-color: var(--sn-blue-500) !important;
  box-shadow: 0 0 0 4px rgba(47, 125, 246, 0.14) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #98a2b3 !important;
}

table,
.table {
  color: #1d2939 !important;
}

thead,
.table thead {
  background: linear-gradient(180deg, #f8fbff, #f2f7ff) !important;
}

th {
  color: #475467 !important;
  font-weight: 700 !important;
}

tbody tr {
  border-color: rgba(219, 232, 255, 0.9) !important;
}

tbody tr:hover {
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.82), rgba(255, 241, 247, 0.46)) !important;
}

.badge-primary,
[class~="badge-primary"] {
  background: var(--sn-blue-100) !important;
  border: 1px solid #bfdbfe !important;
  color: var(--sn-blue-700) !important;
}

.badge-gray,
[class~="badge-gray"] {
  background: #f5f7fb !important;
  border: 1px solid #e4eaf3 !important;
  color: #475467 !important;
}

.modal-overlay,
[class~="modal-overlay"] {
  background: rgba(15, 23, 42, 0.34) !important;
  backdrop-filter: blur(8px) !important;
}

.modal-header,
.modal-footer,
[class~="modal-header"],
[class~="modal-footer"] {
  background: linear-gradient(90deg, rgba(248, 251, 255, 0.94), rgba(255, 247, 251, 0.9)) !important;
  border-color: var(--sn-line) !important;
}

.rounded-xl,
.rounded-2xl,
[class~="rounded-xl"],
[class~="rounded-2xl"] {
  border-radius: 8px !important;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-glass {
  box-shadow: var(--sn-shadow) !important;
}

.from-primary-50,
.from-primary-400,
.from-primary-500,
.via-primary-50\/30,
.to-primary-500,
[class~="from-primary-50"],
[class~="from-primary-400"],
[class~="from-primary-500"],
[class~="via-primary-50/30"],
[class~="to-primary-500"] {
  --tw-gradient-from: var(--sn-blue-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 241, 247, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #fff7fb, #ffffff var(--tw-gradient-to-position) !important;
}

.bg-primary-50,
[class~="bg-primary-50"],
[class~="bg-primary-100"],
[class~="bg-primary-500/10"],
[class~="bg-primary-900/20"],
[class~="dark:bg-primary-900/20"] {
  background-color: var(--sn-blue-50) !important;
}

.bg-primary-500,
.bg-primary-600,
[class~="bg-primary-500"],
[class~="bg-primary-600"] {
  background-color: var(--sn-blue-600) !important;
}

.pointer-events-none.absolute.inset-0.overflow-hidden > .rounded-full {
  display: none !important;
}

.pointer-events-none.absolute.inset-0.overflow-hidden::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(47, 125, 246, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 72, 153, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), transparent 72%);
}

.relative.flex.min-h-screen.items-center.justify-center {
  background:
    linear-gradient(135deg, #f8fbff 0%, #ffffff 48%, #fff7fb 100%) !important;
}

.driver-popover.theme-tour-popover,
.driver-popover {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(219, 232, 255, 0.96) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(31, 100, 216, 0.16) !important;
  color: var(--sn-ink) !important;
}

.driver-popover-title,
.driver-popover .driver-popover-title {
  color: #111827 !important;
  letter-spacing: 0 !important;
}

.driver-popover-description,
.driver-popover .driver-popover-description {
  color: #475467 !important;
  line-height: 1.75 !important;
}

.driver-popover-close-btn {
  color: #98a2b3 !important;
}

.driver-popover-footer.reorganized,
.driver-popover-footer {
  align-items: center !important;
  background: linear-gradient(90deg, #f8fbff, #fff7fb) !important;
  border-top: 1px solid var(--sn-line) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: space-between !important;
}

.driver-popover-footer .footer-left,
.driver-popover-footer .footer-right,
.driver-popover-footer .footer-shortcuts {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.driver-popover-footer .footer-right {
  margin-left: auto !important;
}

.driver-popover-progress-text {
  color: #667085 !important;
  white-space: nowrap !important;
}

.driver-popover-footer kbd {
  background: #ffffff !important;
  border: 1px solid #dbe8ff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #475467 !important;
}

.driver-popover-footer button {
  border-radius: 8px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

.driver-popover-prev-btn {
  background: #ffffff !important;
  border: 1px solid #dbe8ff !important;
  color: #475467 !important;
}

.driver-popover-next-btn {
  background: linear-gradient(135deg, var(--sn-blue-600), var(--sn-pink-500)) !important;
  border: 1px solid rgba(47, 125, 246, 0.2) !important;
  color: #ffffff !important;
}

.driver-popover-btn-disabled {
  opacity: 0.58 !important;
}

.dark .card,
.dark .card-glass,
.dark .modal-content,
.dark .table-wrapper,
.dark .sidebar,
.dark [class~="card"],
.dark [class~="card-glass"],
.dark [class~="modal-content"],
.dark [class~="table-wrapper"],
.dark [class~="sidebar"] {
  background: var(--sn-panel) !important;
  color: var(--sn-ink) !important;
  border-color: rgba(219, 232, 255, 0.92) !important;
}

.dark .text-gray-500,
.dark .text-dark-400,
.dark .text-dark-500,
.dark [class~="text-gray-500"],
.dark [class~="text-dark-400"],
.dark [class~="text-dark-500"] {
  color: var(--sn-muted) !important;
}

.dark .bg-dark-800,
.dark .bg-dark-900,
.dark .bg-dark-950,
.dark [class~="bg-dark-800"],
.dark [class~="bg-dark-900"],
.dark [class~="bg-dark-950"] {
  background-color: #ffffff !important;
}

@media (max-width: 768px) {
  .btn {
    min-height: 40px;
  }

  .card,
  .card-glass,
  .table-wrapper,
  [class~="card"],
  [class~="card-glass"],
  [class~="table-wrapper"] {
    box-shadow: 0 4px 14px rgba(31, 100, 216, 0.075) !important;
  }

  th,
  td {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .driver-popover.theme-tour-popover,
  .driver-popover {
    box-sizing: border-box !important;
    max-width: calc(100vw - 24px) !important;
    width: min(360px, calc(100vw - 24px)) !important;
  }

  .driver-popover-footer.reorganized,
  .driver-popover-footer {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px 14px !important;
  }

  .driver-popover-footer .footer-left,
  .driver-popover-footer .footer-right,
  .driver-popover-footer .footer-shortcuts {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .driver-popover-footer .footer-right {
    margin-left: 0 !important;
  }

  .driver-popover-footer button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}