/* Dark mode + theme toggle. Load after page :root so html[data-theme="dark"] overrides. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: #221d20;
  cursor: pointer;
  font: inherit;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.theme-toggle:hover {
  background: rgba(247, 242, 244, 0.98);
  border-color: rgba(122, 24, 51, 0.25);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary, #7a1833);
  outline-offset: 2px;
}

.theme-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.bg-picker {
  display: none !important;
}

.bg-drawer {
  position: fixed;
  right: 16px;
  top: 16px;
  bottom: auto;
  z-index: 2147483647 !important;
  pointer-events: auto;
}

.bg-fab {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #221d20;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.bg-fab-icon { font-size: 18px; line-height: 1; }

.bg-panel {
  position: absolute;
  right: 0;
  top: 54px;
  bottom: auto;
  width: min(320px, calc(100vw - 24px));
  max-height: 70vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.2);
  padding: 12px;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.bg-drawer.is-open .bg-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.bg-panel-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin: 2px 2px 10px;
  font-weight: 700;
}

.bg-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bg-choice {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  padding: 6px;
  cursor: pointer;
  text-align: left;
}

.bg-choice.is-active {
  border-color: rgba(122, 24, 51, 0.55);
  box-shadow: 0 0 0 1px rgba(122, 24, 51, 0.2);
}

.bg-choice-preview {
  display: block;
  width: 100%;
  height: 54px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.bg-choice-label {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  color: var(--foreground);
  font-weight: 600;
}

.bg-choice-preview-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #7a1833, #a32045);
}

/* —— Dark palette (index + shared tokens) —— */
html[data-theme="dark"] {
  --background: #131011;
  --foreground: #f4ecef;
  --border: rgba(255, 255, 255, 0.1);
  --input: #1e1a1c;
  --primary: #d45a7a;
  --primary-foreground: #ffffff;
  --secondary: #2a2426;
  --secondary-foreground: #f0e4e8;
  --muted: #2a2426;
  --muted-foreground: #b8a9ae;
  --success: #4a9d82;
  --success-foreground: #ffffff;
  --accent: #e06688;
  --accent-foreground: #ffffff;
  --destructive: #e04565;
  --destructive-foreground: #ffffff;
  --warning: #c9a04a;
  --warning-foreground: #1a1510;
  --card: #1c1819;
  --card-foreground: #f4ecef;
  --sidebar: #1a1517;
  --sidebar-foreground: #f4ecef;
  --sidebar-primary: #3d252c;
  --sidebar-primary-foreground: #f4c2d0;
  --scrollbar-track: #0d0b0c;
  --scrollbar-thumb: #4a3d42;
  --scrollbar-thumb-hover: #d45a7a;
}

html[data-theme="dark"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(35, 30, 32, 0.95);
  color: #f4ecef;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(50, 42, 46, 0.98);
  border-color: rgba(212, 90, 122, 0.35);
}

html[data-theme="dark"] .bg-fab {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(27, 22, 24, 0.94);
  color: #f4ecef;
}

html[data-theme="dark"] .bg-panel {
  background: rgba(20, 17, 18, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .bg-choice {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-bg-gif] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-gif-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

html[data-bg-gif] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

html[data-theme="dark"][data-bg-gif] body::after {
  background: rgba(10, 8, 9, 0.12);
}

html[data-bg-gif] body {
  position: relative;
}

html[data-bg-gif] body > *:not(.bg-drawer) {
  position: relative;
  z-index: 1;
}

/* In GIF mode, remove page/theme gradient layers so GIF is the background. */
html[data-bg-gif],
html[data-bg-gif] body {
  background: transparent !important;
}

html[data-bg-gif] {
  --background: transparent;
  --secondary: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"][data-bg-gif] {
  --background: transparent;
  --secondary: rgba(10, 8, 9, 0.2);
  --card: rgba(10, 8, 9, 0.22);
}

html[data-bg-gif] .page,
html[data-bg-gif] .app-root,
html[data-bg-gif] .shell,
html[data-bg-gif] .hero-shell,
html[data-bg-gif] .page-wrap,
html[data-bg-gif] .lookup-shell,
html[data-bg-gif] .top-haze,
html[data-bg-gif] .hero-overlay,
html[data-bg-gif] .hero-wash {
  background: transparent !important;
}

html[data-bg-gif] .site-header {
  background: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"][data-bg-gif] .site-header {
  background: rgba(18, 15, 16, 0.82) !important;
}

/* Requested pages: keep GIF visible across the full page surface */
html[data-bg-gif] main,
html[data-bg-gif] .panel,
html[data-bg-gif] .notice,
html[data-bg-gif] .quick-actions,
html[data-bg-gif] .tool-card {
  background: transparent !important;
}

/* Tools + Custom Pinger: apply consistent glass containers over GIF */
html[data-bg-gif] .tool-card,
html[data-bg-gif] .notice,
html[data-bg-gif] .quick-actions,
html[data-bg-gif] .panel,
html[data-bg-gif] .field input,
html[data-bg-gif] .field textarea,
html[data-bg-gif] .field select {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"][data-bg-gif] .tool-card,
html[data-theme="dark"][data-bg-gif] .notice,
html[data-theme="dark"][data-bg-gif] .quick-actions,
html[data-theme="dark"][data-bg-gif] .panel,
html[data-theme="dark"][data-bg-gif] .field input,
html[data-theme="dark"][data-bg-gif] .field textarea,
html[data-theme="dark"][data-bg-gif] .field select {
  background: rgba(12, 10, 11, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

/* Pricing page cards/sections should also adapt to GIF mode */
html[data-bg-gif] .hero,
html[data-bg-gif] .plan-card,
html[data-bg-gif] .bundle-card,
html[data-bg-gif] .pill,
html[data-bg-gif] .badge {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"][data-bg-gif] .hero,
html[data-theme="dark"][data-bg-gif] .plan-card,
html[data-theme="dark"][data-bg-gif] .bundle-card,
html[data-theme="dark"][data-bg-gif] .pill,
html[data-theme="dark"][data-bg-gif] .badge {
  background: rgba(12, 10, 11, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
}

/* Lookup input becomes translucent in GIF mode */
html[data-bg-gif] input.lookup-input {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"][data-bg-gif] input.lookup-input {
  background: rgba(14, 11, 12, 0.36) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f4ecef !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-bg-gif] .panel,
html[data-bg-gif] .results-table-wrap,
html[data-bg-gif] .results-table,
html[data-bg-gif] .loader-row,
html[data-bg-gif] .privacy-banner,
html[data-bg-gif] .rate-banner {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-bg-gif] .results-table th {
  background: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"][data-bg-gif] .panel,
html[data-theme="dark"][data-bg-gif] .results-table-wrap,
html[data-theme="dark"][data-bg-gif] .results-table,
html[data-theme="dark"][data-bg-gif] .loader-row,
html[data-theme="dark"][data-bg-gif] .privacy-banner,
html[data-theme="dark"][data-bg-gif] .rate-banner {
  background: rgba(12, 10, 11, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"][data-bg-gif] .results-table th {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* —— Home (index) —— */
html[data-theme="dark"] .page {
  background: linear-gradient(
    180deg,
    #141112 0%,
    rgba(26, 21, 23, 0.95) 100%
  );
}

html[data-theme="dark"] .site-header {
  background: rgba(20, 17, 18, 0.92);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .hero-shell {
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(163, 32, 69, 0.18) 0%,
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 16%,
      rgba(122, 24, 51, 0.14) 0%,
      transparent 24%
    ),
    linear-gradient(180deg, #1a1517 0%, #141011 100%);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 35%,
      transparent 55%
    ),
    radial-gradient(
      circle at 78% 40%,
      rgba(122, 24, 51, 0.12) 0%,
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(122, 24, 51, 0.06) 0%,
      transparent 55%
    );
}

html[data-theme="dark"] .glass-orbit-card {
  background: linear-gradient(
    145deg,
    rgba(42, 36, 40, 0.55) 0%,
    rgba(26, 22, 24, 0.42) 52%,
    rgba(35, 30, 32, 0.5) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(212, 90, 122, 0.18),
    0 0 36px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .glass-orbit-card::before {
  background: linear-gradient(
    180deg,
    rgba(224, 102, 136, 0.9) 0%,
    rgba(122, 24, 51, 0.35) 100%
  );
  box-shadow: 0 0 16px rgba(212, 90, 122, 0.5);
}

html[data-theme="dark"] .glass-orbit-card-wrap {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

html[data-theme="dark"] .object-glow {
  background:
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 80% 76%,
      rgba(122, 24, 51, 0.2) 0%,
      transparent 28%
    );
}

html[data-theme="dark"] .step-card {
  background: rgba(35, 30, 32, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .top-haze {
  background: radial-gradient(
    circle,
    rgba(122, 24, 51, 0.15) 0%,
    rgba(163, 32, 69, 0.08) 24%,
    transparent 72%
  );
}

/* —— Lookup —— */
html[data-theme="dark"] .site-header {
  background: rgba(20, 17, 18, 0.94);
}

html[data-theme="dark"] .page-wrap {
  background: linear-gradient(
    180deg,
    #141112 0%,
    rgba(26, 21, 23, 0.55) 100%
  );
}

html[data-theme="dark"] .lookup-shell {
  background: linear-gradient(
    180deg,
    rgba(35, 30, 32, 0.96) 0%,
    rgba(26, 22, 24, 0.92) 100%
  );
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html[data-theme="dark"] .lookup-ascii-bg .ascii-bg-pre {
  color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .lookup-ascii-bg.lookup-fetch-active .ascii-bg-wrap--center .ascii-bg-pre {
  color: rgba(212, 90, 122, 0.4);
}

html[data-theme="dark"] .lookup-drip .drip-id {
  color: rgba(244, 236, 239, 0.22);
}

html[data-theme="dark"] .lookup-3d-float {
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 70% 72%,
      rgba(122, 24, 51, 0.35) 0%,
      transparent 50%
    ),
    linear-gradient(145deg, #2a2426 0%, #221e20 40%, #1a1718 100%);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(212, 90, 122, 0.12),
    inset 0 -8px 24px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .lookup-3d-float::after {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .rate-banner {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

html[data-theme="dark"] .panel {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] input.lookup-input {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .loader-row,
html[data-theme="dark"] .privacy-banner {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .results-table th {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .net-vpn {
  background: rgba(224, 102, 136, 0.18);
  color: #f0b8c8;
}

html[data-theme="dark"] .net-host {
  background: rgba(201, 160, 74, 0.2);
  color: #e8d49a;
}

html[data-theme="dark"] .net-res {
  background: rgba(74, 157, 130, 0.2);
  color: #9dd4c4;
}

html[data-theme="dark"] .net-unknown {
  background: rgba(255, 255, 255, 0.06);
}

/* —— Databases page —— */
html[data-theme="dark"] .db-table-wrap {
  background: rgba(28, 24, 26, 0.92);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .db-table th {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .db-table tr.db-row-unknown td:last-child {
  color: var(--accent, #e06688);
}

html[data-theme="dark"] .db-pending-sidebar .db-table-wrap {
  background: rgba(28, 24, 26, 0.92);
}

html[data-theme="dark"] .db-pending-badge {
  color: #f0a8bc;
}

html[data-theme="dark"] .db-love-target {
  color: #b8a9ae;
}

html[data-theme="dark"] .config-banner {
  background: #2a1f23;
  color: #f0d0d8;
  border-color: rgba(212, 90, 122, 0.35);
}

/* —— About / shared subpages —— */
html[data-theme="dark"] .site-header {
  border-bottom-color: var(--border);
}

/* —— Hall of Skids —— */
html[data-theme="dark"] .hall-card {
  background: #1c1819;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .hall-media-trigger,
html[data-theme="dark"] .hall-card-media {
  background: #2a2426;
}

html[data-theme="dark"] .hall-avatar-placeholder {
  background: linear-gradient(180deg, #252022 0%, #1c1819 100%);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] #hall-empty,
html[data-theme="dark"] #hall-error {
  background: #2a2426;
  color: var(--muted-foreground);
}

html[data-theme="dark"] #hall-error {
  background: #3d252c;
  color: #f0c8d4;
}

/* —— Contact redirect —— */
html[data-theme="dark"] body.contact-redirect-body {
  background: #131011;
}

/* —— Maintenance —— */
html[data-theme="dark"] body.maint-body {
  background: #131011;
}