.provider-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.provider-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #263b59;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(13, 24, 41, .96), rgba(8, 15, 27, .96));
  color: #edf7ff;
  text-align: left;
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s;
}

.provider-card:hover,
.provider-card.active {
  border-color: #56d4e5;
  background: linear-gradient(145deg, rgba(19, 42, 61, .98), rgba(9, 23, 38, .98));
  transform: translateY(-1px);
}

.provider-card strong { font-size: 14px; letter-spacing: -.2px; }
.provider-card small { color: #7893a7; font-size: 11px; }
.provider-card .core-product-label { color: #56d4e5; font: 800 10px 'DM Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; }
#residential-network-switch .provider-card,
#settings-network-switch .provider-card { position: relative; overflow: hidden; }
#residential-network-switch .provider-card .core-product-label,
#settings-network-switch .provider-card .core-product-label {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 6px 12px 7px 16px;
  background: #56d4e5;
  color: #07131f;
  font: 800 9px 'DM Mono', monospace;
  letter-spacing: 1.1px;
  line-height: 1;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 70% 100%, 0 100%);
}
.provider-card i { color: #56d4e5; font: 10px 'DM Mono', monospace; font-style: normal; text-transform: uppercase; letter-spacing: .7px; }
.provider-badge { color: #b9f34f; font: 800 10px 'DM Mono', monospace; letter-spacing: 1.5px; }
.provider-badge.lite-badge { color: #56d4e5; }
.lab-status-pill { white-space: nowrap; }
.lab-status-pill .status-dot { margin-right: 7px; }
.test-endpoint-note { color: #f0cf78 !important; }
.payment-row .network-label { color: #56d4e5; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .7px; }
.payment-row-right { min-width: 0; }
.referral-panel { min-height: 0; }
.referral-link-box,
.referral-slug-box { margin-top: 16px; border-color: var(--dash-line); background: rgba(7, 15, 26, .52); }
.referral-link-box strong { display: block; overflow-wrap: anywhere; color: var(--coretest-heading); font: 700 14px 'DM Mono', monospace; }
.referral-link-box small,
.referral-slug-box small { color: var(--coretest-muted); font-size: 12px; line-height: 1.55; }
.referral-field { display: grid; gap: 8px; min-width: 0; color: var(--coretest-muted); font-size: 12px; }
.referral-field input { width: min(420px, 100%); padding: 12px 13px; border: 1px solid var(--dash-line-bright); border-radius: 9px; background: #081321; color: var(--coretest-heading); font: inherit; outline: none; }
.referral-field input:focus { outline: 2px solid rgba(72, 199, 255, .35); outline-offset: 2px; }
.referral-status { min-height: 18px; margin: 12px 0 0; }
.referral-joined-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--dash-line); border-radius: 12px; background: linear-gradient(145deg, rgba(13, 30, 48, .86), rgba(7, 15, 27, .86)); }
.referral-joined-card strong { display: block; margin-top: 8px; color: var(--coretest-heading); font-size: 14px; }
.referral-joined-value { color: #56d4e5; font: 800 30px 'DM Mono', monospace; }
.referral-network-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.referral-network-card { min-width: 0; padding: 18px; border: 1px solid rgba(185, 243, 79, .28); border-radius: 12px; background: linear-gradient(145deg, rgba(19, 42, 38, .8), rgba(7, 18, 29, .86)); }
.referral-network-card.is-core { border-color: rgba(86, 212, 229, .32); background: linear-gradient(145deg, rgba(16, 38, 54, .86), rgba(7, 16, 29, .9)); }
.referral-network-kicker { color: #b9f34f; font: 800 10px 'DM Mono', monospace; letter-spacing: 1.5px; }
.referral-network-card.is-core .referral-network-kicker { color: #56d4e5; }
.referral-network-card h4 { margin: 12px 0 10px; color: var(--coretest-muted); font-size: 12px; font-weight: 600; }
.referral-network-value { color: var(--coretest-heading); font-size: 30px; font-weight: 800; letter-spacing: -.8px; }
.referral-network-card small { display: block; margin-top: 14px; color: var(--coretest-muted); font-size: 11px; }
.referral-network-earned { display: block; margin-top: 4px; color: #b9f34f; font: 700 16px 'DM Mono', monospace; }
.referral-network-card.is-core .referral-network-earned { color: #56d4e5; }
.core-credentials-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.core-credentials-action .form-message { margin: 0; }
.core-proxy-key { margin-top: 12px; color: #7893a7; font: 11px 'DM Mono', monospace; letter-spacing: .5px; }
.core-proxy-key code { color: #edf7ff; font: inherit; user-select: all; word-break: break-all; }
.buy-dialog { max-width: 760px; }
.buy-network-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 12px; }
.buy-network-card { display: grid; gap: 5px; min-width: 0; padding: 14px 16px; border: 1px solid #263b59; border-radius: 12px; background: rgba(8, 15, 27, .72); color: #edf7ff; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.buy-network-card:hover, .buy-network-card.active { border-color: #56d4e5; background: linear-gradient(145deg, rgba(19, 42, 61, .98), rgba(9, 23, 38, .98)); transform: translateY(-1px); }
.buy-network-card strong { font-size: 14px; }
.buy-network-card small, .buy-package-heading small { color: #7893a7; font-size: 11px; }
.buy-network-note { margin: 0 0 16px; color: #56d4e5; font: 11px 'DM Mono', monospace; letter-spacing: .8px; text-transform: uppercase; }
.buy-package-section[hidden] { display: none; }
.buy-package-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 10px; }
.buy-package-heading strong { font-size: 13px; }
.buy-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(86, 212, 229, .18); }
.buy-selection-summary { display: grid; gap: 4px; min-width: 0; color: #7893a7; font-size: 11px; }
.buy-selection-summary strong { color: #edf7ff; font-size: 14px; }
.buy-checkout-button { min-width: 170px; }
.buy-checkout-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.buy-dialog .package-grid button.selected { border-color: #b9f34f; background: linear-gradient(145deg, rgba(45, 76, 49, .95), rgba(18, 39, 35, .98)); box-shadow: 0 0 0 2px rgba(185, 243, 79, .2), 0 0 24px rgba(185, 243, 79, .12); }

.usage-page-intro { align-items: flex-end; }
.usage-status { min-height: 17px; margin: -4px 0 14px; color: #7893a7; font: 11px 'DM Mono', monospace; }
.usage-network-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usage-network-panel { min-width: 0; padding: 22px; }
.usage-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.usage-panel-heading h3 { margin: 0 0 3px; font-size: 22px; }
.usage-panel-heading p { margin: 0; color: #7893a7; font-size: 12px; }
.usage-period-switch { display: flex; align-items: center; gap: 6px; margin: 0 0 18px; }
.usage-period-switch > span { margin-right: 4px; color: #7893a7; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .7px; }
.usage-period-switch button { padding: 7px 10px; border: 1px solid rgba(86, 212, 229, .18); border-radius: 7px; background: rgba(5, 12, 24, .45); color: #7893a7; font: 10px 'DM Mono', monospace; cursor: pointer; }
.usage-period-switch button.active { border-color: rgba(86, 212, 229, .55); background: rgba(86, 212, 229, .12); color: #edf7ff; }
.usage-availability { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(86, 212, 229, .32); border-radius: 999px; color: #56d4e5; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .7px; }
.usage-availability.is-ready { border-color: rgba(185, 243, 79, .4); color: #b9f34f; }
.usage-availability.is-muted { border-color: rgba(120, 147, 167, .28); color: #7893a7; }
.usage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 24px; }
.usage-metrics > div { min-width: 0; padding: 12px; border: 1px solid rgba(86, 212, 229, .12); border-radius: 10px; background: rgba(5, 12, 24, .45); }
.usage-metrics small { display: block; margin-bottom: 6px; color: #7893a7; font-size: 10px; }
.usage-metrics strong { display: block; overflow: hidden; color: #edf7ff; font: 700 14px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.usage-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.usage-section-heading h4 { margin: 0; color: #edf7ff; font-size: 13px; }
.usage-section-heading span { color: #7893a7; font: 10px 'DM Mono', monospace; }
.usage-chart-block { padding-top: 2px; }
.usage-chart { display: flex; align-items: flex-end; gap: 9px; min-height: 172px; padding: 18px 6px 0; border-bottom: 1px solid rgba(86, 212, 229, .16); }
.usage-chart.is-long { justify-content: flex-start; overflow-x: auto; scrollbar-color: rgba(86, 212, 229, .45) rgba(5, 12, 24, .55); scrollbar-width: thin; }
.usage-bar-item { display: flex; flex: 1 1 0; min-width: 0; height: 150px; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.usage-chart.is-long .usage-bar-item { flex: 0 0 54px; }
.usage-bar-track { display: flex; width: 100%; height: 110px; align-items: flex-end; justify-content: center; }
.usage-bar { display: block; width: min(26px, 72%); min-height: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #b9f34f, #56d4e5); box-shadow: 0 0 18px rgba(86, 212, 229, .14); }
.usage-network-panel[data-usage-network="core"] .usage-bar { background: linear-gradient(180deg, #56d4e5, #7869ff); }
.usage-bar-value { color: #edf7ff; font: 9px 'DM Mono', monospace; line-height: 1; white-space: nowrap; }
.usage-bar-value.is-zero { visibility: hidden; }
.usage-bar-item small { color: #7893a7; font: 10px 'DM Mono', monospace; }
.usage-chart-empty { align-self: center; width: 100%; padding: 24px 8px; color: #7893a7; font-size: 12px; text-align: center; }
.usage-destination-block { margin-top: 24px; }
.usage-destination-list { display: grid; gap: 7px; }
.usage-destination-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(86, 212, 229, .11); border-radius: 9px; background: rgba(5, 12, 24, .35); }
.usage-destination-copy { display: grid; min-width: 0; gap: 4px; }
.usage-destination-copy strong { overflow: hidden; color: #edf7ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.usage-destination-copy small { color: #7893a7; font: 10px 'DM Mono', monospace; }
.usage-destination-amount { flex: 0 0 auto; color: #56d4e5; font: 12px 'DM Mono', monospace; }
.usage-info-card { padding: 14px; border: 1px dashed rgba(120, 147, 167, .28); border-radius: 9px; color: #7893a7; font-size: 12px; line-height: 1.5; }
.usage-footnote { margin: 10px 0 0; color: #7893a7; font-size: 11px; line-height: 1.45; }

.notifications-panel { max-width: 760px; padding: 22px; }
.notifications-webhook-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); gap: 14px; align-items: end; }
.notifications-webhook-field { display: grid; gap: 8px; color: var(--coretest-muted); font-size: 12px; }
.notifications-webhook-field input { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid var(--dash-line-bright); border-radius: 9px; background: #081321; color: var(--coretest-heading); font: 12px 'DM Mono', monospace; outline: none; }
.notifications-webhook-field input:focus { outline: 2px solid rgba(72, 199, 255, .35); outline-offset: 2px; }
.notifications-enabled-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; margin: 0; padding: 12px 14px; border: 1px solid rgba(86, 116, 145, .42); border-radius: 10px; background: rgba(8, 18, 31, .62); cursor: pointer; }
.notifications-enabled-toggle > span:first-child { display: grid; min-width: 0; gap: 4px; }
.notifications-enabled-toggle .settings-toggle-title { display: flex; align-items: center; gap: 8px; }
.notifications-enabled-toggle strong { color: var(--coretest-heading); font-size: 13px; }
.notifications-enabled-toggle small { display: block; overflow: hidden; color: var(--coretest-soft); font: 10px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.notifications-enabled-toggle .settings-switch { position: relative; display: block; width: 48px; height: 28px; flex: 0 0 48px; }
.notifications-enabled-toggle .settings-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.notifications-enabled-toggle .settings-switch-track { position: absolute; inset: 0; border: 1px solid #40546a; border-radius: 999px; background: #111d2b; cursor: pointer; transition: .2s; }
.notifications-enabled-toggle .settings-switch-track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #8195aa; transition: .2s; }
.notifications-enabled-toggle .settings-switch input:checked + .settings-switch-track { border-color: #4d9e89; background: #15332d; }
.notifications-enabled-toggle .settings-switch input:checked + .settings-switch-track::after { transform: translateX(20px); background: #8be0bd; }
.notifications-enabled-toggle:has(.settings-switch input:checked) { border-color: rgba(77, 158, 137, .68); background: linear-gradient(145deg, rgba(18, 48, 45, .72), rgba(8, 18, 31, .62)); }
.notifications-list { display: grid; gap: 8px; margin-top: 18px; }
.notification-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 12px 14px; border: 1px solid rgba(86, 212, 229, .16); border-radius: 10px; background: rgba(5, 12, 24, .42); color: var(--coretest-heading); cursor: pointer; }
.notification-row > span:first-child { display: grid; min-width: 0; gap: 4px; }
.notification-row strong { font-size: 13px; }
.notification-row small { color: var(--coretest-muted); font-size: 11px; }
.notification-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  border: 1px solid rgba(120, 147, 167, .55);
  border-radius: 6px;
  background: #081321;
  box-shadow: inset 0 0 0 3px rgba(5, 12, 24, .45);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.notification-row input[type="checkbox"]:hover { border-color: #56d4e5; transform: translateY(-1px); }
.notification-row input[type="checkbox"]:focus-visible { outline: 2px solid rgba(86, 212, 229, .4); outline-offset: 3px; }
.notification-row input[type="checkbox"]:checked {
  border-color: #56d4e5;
  background: #56d4e5;
  box-shadow: 0 0 0 3px rgba(86, 212, 229, .11), 0 0 15px rgba(86, 212, 229, .14);
}
.notification-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #07131f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.notification-row:has(input[type="checkbox"]:checked) {
  border-color: rgba(86, 212, 229, .4);
  background: linear-gradient(145deg, rgba(16, 38, 54, .72), rgba(5, 12, 24, .52));
}
.notification-row:has(input[type="checkbox"]:checked) .notification-controls input[type="number"] {
  border-color: rgba(86, 212, 229, .5);
}
.notification-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.notification-controls input[type="number"] { width: 78px; padding: 8px 9px; border: 1px solid var(--dash-line-bright); border-radius: 7px; background: #081321; color: var(--coretest-heading); font: 12px 'DM Mono', monospace; }
.notification-unit { color: var(--coretest-muted); font: 600 11px 'DM Mono', monospace; }
.notifications-actions { margin-top: 18px; }

@media (max-width: 600px) {
  .buy-network-switch { grid-template-columns: 1fr; }
  .referral-network-grid { grid-template-columns: 1fr; }
  .buy-package-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .buy-dialog-footer { align-items: stretch; flex-direction: column; }
  .buy-checkout-button { width: 100%; }
}

@media (max-width: 980px) {
  .usage-network-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .usage-page-intro { align-items: flex-start; flex-direction: column; gap: 14px; }
  .usage-page-intro .secondary-button { width: 100%; }
  .usage-network-panel { padding: 17px; }
  .usage-metrics { gap: 5px; }
  .usage-metrics > div { padding: 9px; }
  .usage-metrics strong { font-size: 12px; }
  .notifications-webhook-row { grid-template-columns: 1fr; }
  .notifications-panel { padding: 17px; }
}

@media (max-width: 700px) {
  .provider-switch { grid-template-columns: 1fr; }
  .lab-status-pill { margin-top: 15px; display: inline-flex; }
}

.form-message { margin: 8px 0 0; color: #8aa1b4; font: 12px 'DM Mono', monospace; }
.form-message:empty { display: none; }

/* Keep enabled settings visibly green in the Coretest layer even when shared CSS changes. */
.dashboard-view .settings-hub .settings-tile small[data-state="active"],
.dashboard-view .settings-dialog .settings-state[data-state="active"],
.dashboard-view .settings-dialog .settings-toggle-state[data-state="active"] {
  border-color: #397a68 !important;
  background: rgba(62, 173, 139, .1) !important;
  color: #8be0bd !important;
  -webkit-text-fill-color: #8be0bd;
}

.dashboard-view .settings-hub .settings-tile small[data-state="active"] {
  border: 0;
  background: transparent !important;
}

.language-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 10px 0;
  border-top: 1px solid rgba(86, 212, 229, .1);
}

.language-label {
  margin-right: auto;
  color: #8194a8;
  font: 10px 'DM Mono', monospace;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.language-option {
  display: grid;
  width: 27px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: .62;
  transition: opacity .2s ease, border-color .2s ease, background-color .2s ease;
}

.language-option img {
  display: block;
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.language-option:hover,
.language-option.active {
  border-color: rgba(86, 212, 229, .45);
  background: rgba(86, 212, 229, .1);
  opacity: 1;
}

/* Coretest UI pass: calmer contrast, readable type and a less abrupt mobile drawer. */
.dashboard-view {
  --coretest-text: #d7e2ed;
  --coretest-heading: #dce6f0;
  --coretest-muted: #9aabbd;
  --coretest-soft: #8194a8;
  color: var(--coretest-text);
}

.dashboard-view .nav-item,
.dashboard-view .help-link {
  font-size: 14px;
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.dashboard-view .nav-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  color: #8498ad;
  font-size: 0;
}

.dashboard-view .nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.dashboard-view .nav-item.active .nav-icon { color: #65d6e8; }
.dashboard-view .panel h3,
.dashboard-view .billing-strip h3 { color: var(--coretest-heading); font-size: 22px; }
.dashboard-view .provider-card strong { color: var(--coretest-heading); font-size: 15px; }
.dashboard-view .provider-card small,
.dashboard-view .buy-network-card small,
.dashboard-view .buy-package-heading small { color: var(--coretest-muted); font-size: 12px; }
.dashboard-view .generator form > label,
.dashboard-view .country-field { color: #b0bdca; font-size: 11px; }
.dashboard-view select,
.dashboard-view .quantity input,
.dashboard-view .quantity button,
.dashboard-view .country-picker-toggle { color: #d1dce7; font-size: 14px; padding-top: 13px; padding-bottom: 13px; }

.dashboard-view .guide-step { gap: 15px; padding: 17px 0; }
.dashboard-view .guide-step > span { width: 32px; height: 32px; flex-basis: 32px; color: #65d6e8; font-size: 12px; }
.dashboard-view .guide-step strong { color: var(--coretest-heading); font-size: 16px; }
.dashboard-view .guide-step p { color: var(--coretest-muted) !important; font-size: 15px !important; line-height: 1.7 !important; }
.dashboard-view .guide-step b { color: #86d7e8 !important; }
.dashboard-view .billing-strip p { color: var(--coretest-soft); font-size: 12px; }
.dashboard-view #proxy-output { min-height: 390px; color: #c1d4df; font-size: 13px; line-height: 1.7; }

.dashboard-view .residential-workspace-grid,
.dashboard-view[data-design-variant="2"] .residential-workspace-grid { align-items: stretch; }
.dashboard-view .generator { display: flex; flex-direction: column; }
.dashboard-view .generator .proxy-result:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.dashboard-view .generator .proxy-result:not([hidden]) #proxy-output { flex: 1 1 auto; }

.dashboard-view .fast-mode-control {
  margin: -2px 0 2px;
  padding: 12px 14px;
  border: 1px solid rgba(101, 214, 232, .28);
  border-radius: 10px;
  background: rgba(9, 20, 35, .72);
}
.dashboard-view .fast-mode-control[hidden] { display: none !important; }
.dashboard-view .fast-mode-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-view .fast-mode-toggle { display: inline-flex; align-items: center; gap: 10px; color: #edf7ff; cursor: pointer; font-size: 12px; letter-spacing: .08em; }
.dashboard-view .fast-mode-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-view .fast-mode-toggle-track { width: 32px; height: 18px; position: relative; border: 1px solid #45647a; border-radius: 999px; background: #101b2a; transition: .18s ease; }
.dashboard-view .fast-mode-toggle-track::after { content: ''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; border-radius: 50%; background: #8fa4b7; transition: .18s ease; }
.dashboard-view .fast-mode-toggle input:checked + .fast-mode-toggle-track { border-color: #65d6e8; background: rgba(86, 212, 229, .18); }
.dashboard-view .fast-mode-toggle input:checked + .fast-mode-toggle-track::after { transform: translateX(14px); background: #65d6e8; }
.dashboard-view .fast-mode-toggle input:disabled + .fast-mode-toggle-track { opacity: .45; }
.dashboard-view .fast-mode-toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.dashboard-view .fast-mode-help { position: relative; width: 22px; height: 22px; padding: 0; border: 1px solid #57728a; border-radius: 50%; background: transparent; color: #a9c2d2; font: 700 12px/20px 'DM Mono', monospace; cursor: help; }
.dashboard-view .fast-mode-help::after { content: attr(data-tooltip); position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: 250px; padding: 10px 11px; border: 1px solid rgba(101, 214, 232, .45); border-radius: 8px; background: #0b1524; color: #c8d8e4; font: 12px/1.5 'DM Sans', sans-serif; letter-spacing: normal; text-align: left; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease; }
.dashboard-view .fast-mode-help:hover::after,
.dashboard-view .fast-mode-help:focus-visible::after { opacity: 1; transform: translateY(0); }
.dashboard-view .fast-mode-quota { margin-top: 8px; color: #8ea8b9; font-size: 11px; }
.dashboard-view .fast-mode-countdown { margin-top: 4px; color: #65d6e8; font-size: 11px; }
.dashboard-view .country-picker-toggle:disabled { opacity: .7; cursor: not-allowed; border-color: rgba(101, 214, 232, .42); }
.dashboard-view .country-option input:disabled { opacity: .6; }

@media (max-width: 820px) {
  .dashboard-view .sidebar {
    will-change: transform;
    transition: transform .38s cubic-bezier(.22, .61, .36, 1);
  }
  .dashboard-view .sidebar-backdrop {
    opacity: 0;
    transition: opacity .34s ease;
  }
  .dashboard-view .sidebar-backdrop:not([hidden]) { opacity: 1; }
}

@media (max-width: 600px) {
  .dashboard-view .guide-step p { font-size: 14px !important; }
  .dashboard-view #proxy-output { min-height: 300px; }
}

/* Icon-only sidebar navigation for the Coretest workspace. */
.dashboard-view .nav-item {
  justify-content: flex-start;
  gap: 13px;
  min-height: 48px;
  padding: 13px 14px;
}

.dashboard-view .nav-item:focus-visible {
  outline: 2px solid #65d6e8;
  outline-offset: 2px;
}

/* Do not render legacy text/pseudo glyphs inside the icon slot. Keep the SVG only. */
.dashboard-view .nav-icon {
  font-size: 0 !important;
  line-height: 0;
}

.dashboard-view .nav-icon::before,
.dashboard-view .nav-icon::after {
  content: none !important;
  display: none !important;
}

.dashboard-view .nav-icon svg { display: block; }

/* The quantity is controlled by the visible minus/plus buttons. */
.dashboard-view .quantity input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.dashboard-view .quantity input[type="number"]::-webkit-inner-spin-button,
.dashboard-view .quantity input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Keep Settings and Notifications centered and use the available desktop width. */
.dashboard-view #page-settings > .provider-switch,
.dashboard-view #page-settings > .settings-hub,
.dashboard-view #page-notifications > .notifications-panel {
  width: min(1120px, 100%);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

/* Settings controls read better as one vertical stack on desktop and mobile. */
.dashboard-view #page-settings > .provider-switch {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-view #page-settings > .settings-hub {
  gap: 16px;
}