/* ══════════════════════════════════════════════════════════════
   SVS MSP Calculator — Glass Dark Theme
   Imported dynamically by the theme toggle as a third test theme.
   Keeps the existing HTML structure intact and overrides presentation only.
   ══════════════════════════════════════════════════════════════ */

html {
  color-scheme: dark;
}

:root {
  --ink: #eef6ff;
  --paper: #08111c;
  --accent: #69c8ff;
  --muted: #9fb3c9;
  --border: rgba(143, 183, 221, 0.2);
  --card: rgba(10, 18, 31, 0.62);
  --green: #63d8a2;
  --amber: #ffbe68;
  --glass-header-text: #5f6d7f;
}

body {
  background:
    linear-gradient(138deg, #03070f 0%, #071120 14%, #10152a 30%, #1a1324 48%, #1a0d17 64%, #0a111b 82%, #050912 100%),
    linear-gradient(125deg, rgba(44, 138, 255, 0.22) 0%, rgba(44, 138, 255, 0) 26%),
    linear-gradient(142deg, rgba(18, 194, 152, 0.16) 18%, rgba(18, 194, 152, 0) 42%),
    linear-gradient(154deg, rgba(118, 72, 224, 0.16) 34%, rgba(118, 72, 224, 0) 58%),
    linear-gradient(164deg, rgba(198, 46, 86, 0.16) 52%, rgba(198, 46, 86, 0) 74%),
    radial-gradient(circle at 8% 10%, rgba(72, 178, 255, 0.34), transparent 26%),
    radial-gradient(circle at 26% 30%, rgba(32, 196, 144, 0.24), transparent 22%),
    radial-gradient(circle at 58% 18%, rgba(116, 82, 222, 0.24), transparent 22%),
    radial-gradient(circle at 88% 16%, rgba(200, 60, 92, 0.24), transparent 20%),
    radial-gradient(circle at 76% 56%, rgba(42, 126, 255, 0.2), transparent 22%),
    radial-gradient(circle at 24% 78%, rgba(112, 44, 138, 0.22), transparent 22%),
    radial-gradient(circle at 92% 86%, rgba(18, 168, 132, 0.2), transparent 20%),
    linear-gradient(160deg, rgba(7, 14, 25, 0.72) 0%, rgba(5, 10, 19, 0.8) 100%);
  background-attachment: fixed;
  color: var(--ink);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(132deg, rgba(58, 154, 255, 0.16) 0%, rgba(58, 154, 255, 0) 34%),
    linear-gradient(145deg, rgba(28, 201, 154, 0.12) 18%, rgba(28, 201, 154, 0) 44%),
    linear-gradient(156deg, rgba(122, 84, 232, 0.12) 38%, rgba(122, 84, 232, 0) 60%),
    linear-gradient(168deg, rgba(214, 68, 104, 0.12) 58%, rgba(214, 68, 104, 0) 78%);
  opacity: 0.9;
  z-index: 0;
}

.outer,
.pitch-wrap {
  position: relative;
  z-index: 1;
}

::selection {
  background: rgba(105, 200, 255, 0.28);
  color: #f8fbff;
}

.top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: linear-gradient(
    180deg,
    rgba(252, 255, 255, 0.96) 0%,
    rgba(244, 249, 255, 0.93) 52%,
    rgba(231, 240, 251, 0.91) 100%
  ) !important;
  border-bottom: 1px solid rgba(118, 143, 171, 0.35) !important;
  box-shadow: 0 8px 24px rgba(7, 18, 33, 0.1) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.top-bar-right {
  color: var(--glass-header-text) !important;
}

@media (min-width: 1101px) {
  .outer {
    padding-top: var(--sidebar-top-gap) !important;
  }

  .side-col {
    top: var(--sidebar-sticky-top) !important;
  }
}

.theme-toggle-btn {
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.88), rgba(217, 229, 242, 0.82)) !important;
  border: 1px solid rgba(83, 117, 150, 0.24) !important;
  color: #223142 !important;
  box-shadow: 0 10px 24px rgba(6, 18, 31, 0.14) !important;
}

.theme-toggle-btn:hover {
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.94), rgba(226, 237, 248, 0.88)) !important;
}

.theme-toggle-btn:active {
  background: linear-gradient(180deg, rgba(226, 236, 248, 0.95), rgba(205, 219, 235, 0.9)) !important;
}

.section,
.quote-settings-bar,
.sidebar,
.sidebar-utility .btn-reset-quote,
.mobile-panel-sheet,
.mobile-panel-close-row,
.mobile-panel-actions,
.confirm-modal-card,
.feature-card,
.addon-row,
.vs-comparison-wrap,
.export-wrap,
.pitch-inner {
  background: linear-gradient(180deg, rgba(16, 27, 43, 0.76), rgba(9, 17, 29, 0.68)) !important;
  border-color: rgba(143, 183, 221, 0.18) !important;
  box-shadow:
    0 18px 50px rgba(2, 8, 17, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.section {
  background: linear-gradient(180deg, rgba(17, 29, 46, 0.74), rgba(9, 17, 29, 0.66)) !important;
}

.section:hover {
  border-color: rgba(105, 200, 255, 0.34) !important;
  box-shadow:
    -4px 0 0 0 rgba(105, 200, 255, 0.36),
    0 20px 54px rgba(2, 8, 17, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.sec-open {
  border-color: rgba(105, 200, 255, 0.5) !important;
  box-shadow:
    -4px 0 0 0 rgba(105, 200, 255, 0.5),
    0 22px 58px rgba(2, 8, 17, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.section-num {
  color: rgba(226, 239, 255, 0.18) !important;
  text-shadow: 0 0 26px rgba(105, 200, 255, 0.1);
}

.section-title,
.confirm-modal-title,
.sidebar-mrr,
.sidebar-line .val,
.vs-svs-label {
  color: #f4f9ff !important;
}

.section-subtitle,
.feature-card-desc,
.sidebar-note,
.sidebar-note-mono,
.sl-sub,
.vs-label,
.vs-td-muted,
.savings-prompt,
.pitch-desc,
.qs-label,
.qs-toggle-label,
.qs-fee-label,
.qs-fee-dollar,
.sidebar-line,
.section-title-tag {
  color: var(--muted) !important;
}

.client-input {
  color: #f4f9ff !important;
  border-bottom-color: rgba(143, 183, 221, 0.24) !important;
}

.client-input::placeholder {
  color: rgba(159, 179, 201, 0.72) !important;
}

.sec-chevron,
.addon-preview-pill,
.btn-toggle-all,
.confirm-btn-secondary,
.btn-export-secondary,
.mobile-panel-close,
.nudge-nav-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(143, 183, 221, 0.18) !important;
  color: var(--muted) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sec-open .sec-chevron,
.section-toggle:hover .sec-chevron,
.btn-toggle-all:hover,
.confirm-btn-secondary:hover,
.btn-export-secondary:hover,
.nudge-nav-btn:hover,
.mobile-panel-close:hover {
  background: rgba(105, 200, 255, 0.12) !important;
  border-color: rgba(105, 200, 255, 0.3) !important;
  color: #f2f8ff !important;
}

.pill-toggle,
.tier-seg-wrap,
.qs-fee-input-wrap {
  background: rgba(5, 11, 21, 0.3) !important;
  border-color: rgba(143, 183, 221, 0.18) !important;
}

.pill-toggle label,
.tier-seg {
  background: transparent !important;
}

.pill-toggle label:hover,
.tier-seg:hover,
.addon-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.tier-seg.active,
.btn-export,
.confirm-btn-danger,
.mobile-quote-pill,
.progress-fill {
  background: linear-gradient(135deg, #7ad6ff 0%, #4da8ff 52%, #337dff 100%) !important;
  color: #ffffff !important;
}

.pill-toggle input:checked + label {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(103, 182, 248, 0.7) 0%, rgba(63, 122, 210, 0.76) 58%, rgba(45, 82, 155, 0.82) 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(3, 10, 20, 0.2) !important;
}

.sidebar-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, rgba(105, 188, 250, 0.82) 0%, rgba(71, 132, 224, 0.8) 54%, rgba(67, 72, 156, 0.76) 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.pill-toggle input:checked + label .pill-desc,
.pill-toggle input:checked + label .pill-price,
.tier-seg.active .tier-name,
.tier-seg.active .tier-price,
.tier-seg.active .tier-sub {
  color: #ffffff !important;
}

.num-input,
.qs-fee-input,
.qs-fee-dollar,
.qs-fee-input-wrap,
.mobile-panel-sheet .sidebar-body {
  background: rgba(5, 11, 21, 0.34) !important;
}

.num-input,
.qs-fee-input {
  border-color: rgba(143, 183, 221, 0.2) !important;
  color: #f2f8ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.num-input:focus,
.qs-fee-input:focus,
.client-input:focus-visible {
  border-color: rgba(105, 200, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(105, 200, 255, 0.16) !important;
}

.qs-switch {
  background: rgba(255, 255, 255, 0.12) !important;
}

.qs-switch::after {
  background: rgba(250, 252, 255, 0.95) !important;
  box-shadow: 0 2px 8px rgba(3, 9, 18, 0.28);
}

.addon-row.selected {
  background: rgba(105, 200, 255, 0.12) !important;
  border-color: rgba(105, 200, 255, 0.28) !important;
}

.addon-row.selected .addon-name,
.addon-row.selected .addon-price {
  color: #9edcff !important;
}

.feature-card {
  background: linear-gradient(180deg, rgba(19, 31, 49, 0.8), rgba(10, 18, 30, 0.72)) !important;
}

.callout-green,
.nudge-banner.green,
.admin-waive-savings {
  background: linear-gradient(180deg, rgba(15, 48, 42, 0.82), rgba(10, 35, 30, 0.72)) !important;
  border-color: rgba(99, 216, 162, 0.26) !important;
  color: var(--green) !important;
}

.callout-red {
  background: linear-gradient(180deg, rgba(62, 23, 34, 0.82), rgba(41, 14, 22, 0.74)) !important;
  border-color: rgba(230, 117, 138, 0.26) !important;
  color: #ffb7c6 !important;
}

.nudge-banner.amber,
.admin-fee-waived-badge {
  background: linear-gradient(180deg, rgba(66, 41, 12, 0.84), rgba(43, 27, 8, 0.76)) !important;
  border-color: rgba(255, 190, 104, 0.26) !important;
  color: var(--amber) !important;
}

.admin-waive-savings,
.admin-fee-waived-badge,
.addon-preview-pill.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.addon-preview-pill.active {
  background: rgba(105, 200, 255, 0.16) !important;
  border-color: rgba(105, 200, 255, 0.28) !important;
  color: #dff3ff !important;
}

.collapsible-header,
.sidebar-line,
.pitch-item,
.vs-label::after,
.sidebar-line-total,
.pitch-footer,
.export-wrap,
.mobile-panel-close-row,
.mobile-panel-actions {
  border-color: rgba(143, 183, 221, 0.14) !important;
}

.sidebar-title,
.sidebar-client.placeholder {
  color: rgba(255, 255, 255, 0.76) !important;
}

.sidebar-body,
.mobile-panel-sheet .sidebar,
.mobile-panel-sheet .sidebar-body {
  background: transparent !important;
}

.sidebar-note strong,
.sl-discount-val,
.savings-amount {
  color: var(--green) !important;
}

.sl-hst-toggle,
.sl-hst-val,
.sl-muted {
  color: var(--muted) !important;
}

.vs-comparison-wrap {
  background: linear-gradient(180deg, rgba(14, 24, 39, 0.72), rgba(9, 16, 29, 0.62)) !important;
}

.vs-save-green td {
  background: rgba(99, 216, 162, 0.14) !important;
}

.vs-save-amber td {
  background: rgba(255, 190, 104, 0.14) !important;
}

.export-wrap {
  border-top: 1px solid rgba(143, 183, 221, 0.14) !important;
}

.btn-export {
  box-shadow: 0 14px 28px rgba(29, 108, 186, 0.26) !important;
}

.btn-export:hover,
.mobile-quote-pill:hover {
  filter: brightness(1.05);
}

.btn-reset-quote {
  color: #dceefe !important;
}

.btn-reset-quote:hover {
  background: rgba(105, 200, 255, 0.1) !important;
  border-color: rgba(105, 200, 255, 0.32) !important;
  color: #f2f8ff !important;
}

.confirm-modal-backdrop {
  background: rgba(2, 7, 15, 0.72) !important;
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

.confirm-modal-card {
  background: linear-gradient(180deg, rgba(18, 29, 46, 0.86), rgba(10, 17, 29, 0.8)) !important;
}

.pitch-inner {
  background: linear-gradient(180deg, rgba(14, 25, 40, 0.72), rgba(9, 16, 28, 0.68)) !important;
}

.pitch-title {
  color: #f1f8ff !important;
}

.pitch-footer {
  background: linear-gradient(135deg, rgba(11, 42, 34, 0.88), rgba(7, 28, 22, 0.86)) !important;
  color: #8ee8bf !important;
}

.mobile-panel-sheet {
  background: linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(8, 14, 24, 0.9)) !important;
}

.mobile-panel-close-row,
.mobile-panel-actions {
  background: rgba(10, 18, 30, 0.84) !important;
}

@media (max-width: 1100px) {
  .top-bar {
    background: linear-gradient(
      180deg,
      rgba(251, 255, 255, 0.95) 0%,
      rgba(241, 247, 254, 0.91) 56%,
      rgba(228, 238, 250, 0.89) 100%
    ) !important;
  }
}

@media (max-width: 600px) {
  body {
    background:
      linear-gradient(150deg, #03070f 0%, #0a1220 24%, #171226 54%, #110d18 76%, #070c14 100%),
      linear-gradient(132deg, rgba(58, 154, 255, 0.16) 0%, rgba(58, 154, 255, 0) 34%),
      linear-gradient(150deg, rgba(28, 201, 154, 0.12) 18%, rgba(28, 201, 154, 0) 44%),
      linear-gradient(162deg, rgba(214, 68, 104, 0.11) 48%, rgba(214, 68, 104, 0) 72%),
      radial-gradient(circle at 16% 12%, rgba(72, 178, 255, 0.24), transparent 24%),
      radial-gradient(circle at 72% 20%, rgba(189, 58, 92, 0.18), transparent 20%),
      radial-gradient(circle at 34% 46%, rgba(32, 196, 144, 0.18), transparent 22%),
      radial-gradient(circle at 74% 60%, rgba(116, 82, 222, 0.16), transparent 20%);
    background-attachment: fixed;
  }

  body::before {
    background:
      linear-gradient(138deg, rgba(58, 154, 255, 0.14) 0%, rgba(58, 154, 255, 0) 34%),
      linear-gradient(154deg, rgba(28, 201, 154, 0.1) 18%, rgba(28, 201, 154, 0) 46%),
      linear-gradient(166deg, rgba(122, 84, 232, 0.1) 36%, rgba(122, 84, 232, 0) 58%),
      linear-gradient(174deg, rgba(214, 68, 104, 0.1) 56%, rgba(214, 68, 104, 0) 76%);
    opacity: 0.82;
  }

  .theme-toggle-btn {
    box-shadow: 0 8px 20px rgba(6, 18, 31, 0.12) !important;
  }

  .section,
  .quote-settings-bar,
  .sidebar,
  .mobile-panel-sheet,
  .confirm-modal-card {
    box-shadow:
      0 14px 36px rgba(2, 8, 17, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
}