.provider-switch {
  display: grid;
  grid-template-columns: 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: 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: 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: 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;
}

/* Subusers / Settings cleanup: compact cards, one clear balance workflow. */
.dashboard-view #page-settings > .settings-hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-view #page-settings > .settings-hub .settings-tile {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 92px;
  padding: 18px 20px;
  border-radius: 14px;
}

.dashboard-view #page-settings > .settings-hub .settings-tile-number {
  display: none;
}

.dashboard-view #page-settings > .settings-hub .settings-tile > span:nth-child(2) {
  gap: 5px;
}

.dashboard-view #page-settings > .settings-hub .settings-tile strong {
  font-size: 15px;
}

.dashboard-view #page-settings > .settings-hub .settings-tile small {
  font-size: 11px;
}

.dashboard-view .guide-panel-link,
.dashboard-view .settings-guide-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(85, 213, 232, .34);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 38, 61, .96), rgba(8, 19, 32, .94));
  color: #edf7ff;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.dashboard-view .guide-panel-link {
  justify-content: space-between;
  margin-top: 20px;
  padding: 14px 16px;
  font-weight: 800;
}

.dashboard-view .settings-guide-card {
  width: min(1120px, 100%);
  max-width: none;
  margin: 14px auto 0;
  padding: 18px 20px;
}

.dashboard-view .guide-panel-link:hover,
.dashboard-view .settings-guide-card:hover {
  border-color: #b7f85d;
  background: linear-gradient(135deg, rgba(28, 59, 62, .98), rgba(10, 27, 39, .96));
  transform: translateY(-1px);
}

.dashboard-view .settings-guide-icon {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(183, 248, 93, .58);
  border-radius: 11px;
  color: #b7f85d;
  font-size: 20px;
  font-weight: 900;
}

.dashboard-view .settings-guide-card > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: 4px;
}

.dashboard-view .settings-guide-card strong {
  font-size: 15px;
}

.dashboard-view .settings-guide-card small {
  color: #9bb1c4;
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-view .settings-guide-arrow,
.dashboard-view .guide-panel-link > span:last-child {
  color: #55d5e8;
  font-size: 20px;
  font-weight: 800;
}

.subusers-dialog {
  width: min(820px, calc(100% - 30px));
  padding: 30px;
}

.subusers-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.subusers-dialog-head h3 {
  margin-bottom: 7px;
}

.subusers-dialog-lede {
  margin: 0 !important;
  color: #91a7bc !important;
  font-size: 13px !important;
}

.subusers-feature-form {
  gap: 10px !important;
  margin-top: 0 !important;
}

.subusers-feature-form .settings-toggle {
  padding: 15px 17px;
}

.subusers-save-status {
  min-height: 16px;
  color: #91a7bc;
  font-size: 11px;
}

.subuser-manager {
  gap: 15px;
  margin-top: 22px;
  padding-top: 22px;
}

.subuser-main-account,
.subuser-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.subuser-main-account {
  padding: 16px 17px;
  border: 1px solid #2e4b68;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(17, 36, 56, .82), rgba(8, 17, 29, .7));
}

.subuser-main-account > div,
.subuser-create-header > div {
  display: grid;
  gap: 5px;
}

.subuser-main-account strong,
.subuser-create-header strong {
  color: #e8f1fa;
  font-size: 14px;
}

.subuser-main-account small,
.subuser-create-header small {
  color: #829ab0;
  font-size: 11px;
}

.subuser-main-balance {
  color: #bde5a0;
  font: 700 14px 'DM Mono', monospace;
  white-space: nowrap;
}

.subuser-count {
  color: #829ab0;
  font: 600 10px 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.subuser-create-form {
  gap: 10px;
}

.subuser-create-form .subuser-create-button {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid #9be85d;
  border-radius: 10px;
  background: linear-gradient(135deg, #c7fb68, #8bdc54);
  color: #13200e;
  box-shadow: 0 8px 18px rgba(139, 220, 84, .16);
  font-weight: 800;
}

.subuser-create-form .subuser-create-button:hover {
  border-color: #d9ff9b;
  background: linear-gradient(135deg, #d9ff83, #9be965);
  color: #0f1c0c;
  transform: translateY(-1px);
}

.subuser-create-form .subuser-create-button:disabled {
  cursor: wait;
  opacity: .65;
  transform: none;
}

.subuser-create-form span {
  min-height: 16px;
}

.subuser-card {
  gap: 15px;
  padding: 17px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(13, 26, 43, .82), rgba(7, 15, 26, .62));
}

.subuser-card-heading {
  align-items: center;
}

.subuser-card-heading strong {
  font-size: 15px;
}

.subuser-card-balance {
  display: grid;
  gap: 4px;
  text-align: right;
}

.subuser-card-balance strong {
  color: #bde5a0;
  font: 700 13px 'DM Mono', monospace;
}

.subuser-card-balance small {
  color: #829ab0;
  font: 10px 'DM Mono', monospace;
}

.subuser-transfer-panel {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid #263f59;
  border-radius: 11px;
  background: rgba(5, 12, 22, .48);
}

.subuser-transfer-heading {
  display: grid;
  gap: 4px;
}

.subuser-transfer-heading strong {
  color: #dfeaf4;
  font-size: 13px;
}

.subuser-transfer-heading small {
  color: #829ab0;
  font-size: 11px;
}

.subuser-transfer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 145px;
  gap: 10px;
}

.subuser-transfer-grid label {
  display: grid;
  gap: 7px;
  color: #91a7bc;
  font-size: 11px;
  font-weight: 700;
}

.subuser-transfer-grid select,
.subuser-amount-field {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #365273;
  border-radius: 9px;
  background: #081321;
  color: #e8f1fa;
  font: 12px Manrope;
}

.subuser-transfer-grid select {
  padding: 10px 11px;
}

.subuser-amount-field {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.subuser-amount-field input {
  width: 100%;
  min-width: 0;
  padding: 10px 8px 10px 11px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e8f1fa;
  font: 12px 'DM Mono', monospace;
}

.subuser-amount-field span {
  padding-right: 11px;
  color: #829ab0;
  font: 10px 'DM Mono', monospace;
}

.subuser-transfer-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subuser-transfer-footer .primary-button {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 12px;
}

.subuser-transfer-status {
  color: #91a7bc;
  font-size: 11px;
}

@media (max-width: 700px) {
  .dashboard-view #page-settings > .settings-hub {
    grid-template-columns: 1fr;
  }

  .subusers-dialog {
    padding: 27px 20px 22px;
  }

  .subusers-dialog-head,
  .subuser-main-account,
  .subuser-create-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .subuser-main-balance {
    white-space: normal;
  }

  .subuser-transfer-grid {
    grid-template-columns: 1fr;
  }

  .subuser-transfer-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Usage prototypes ------------------------------------------------------- */
.usage-prototype-root[hidden] { display: none; }
.usage-prototype {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.usage-loading-state { min-height: 310px; }
.usage-loading-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 20px 22px;
  border: 1px solid rgba(86, 212, 229, .2);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(16, 36, 55, .92), rgba(8, 18, 31, .8));
}
.usage-loading-card strong,
.usage-loading-card span { display: block; }
.usage-loading-card strong { color: #edf7ff; font-size: 15px; }
.usage-loading-card div span { margin-top: 4px; color: #829ab0; font-size: 12px; }
.usage-loading-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 2px solid rgba(86, 212, 229, .22);
  border-top-color: #b9f34f;
  border-radius: 50%;
  animation: usage-loading-spin .8s linear infinite;
}
.usage-loading-skeleton {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(86, 212, 229, .16);
  border-radius: 14px;
  background: rgba(5, 12, 24, .52);
}
.usage-loading-skeleton i {
  display: block;
  height: 34%;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, rgba(185, 243, 79, .32), rgba(86, 212, 229, .08));
  animation: usage-loading-pulse 1.2s ease-in-out infinite alternate;
}
.usage-loading-skeleton i:nth-child(2) { height: 52%; animation-delay: .08s; }
.usage-loading-skeleton i:nth-child(3) { height: 41%; animation-delay: .16s; }
.usage-loading-skeleton i:nth-child(4) { height: 74%; animation-delay: .24s; }
.usage-loading-skeleton i:nth-child(5) { height: 58%; animation-delay: .32s; }
.usage-loading-skeleton i:nth-child(6) { height: 83%; animation-delay: .4s; }
.usage-loading-skeleton i:nth-child(7) { height: 47%; animation-delay: .48s; }
@keyframes usage-loading-spin { to { transform: rotate(360deg); } }
@keyframes usage-loading-pulse { from { opacity: .42; } to { opacity: .9; } }
.usage-variant-hero,
.usage-variant-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(86, 212, 229, .2);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(16, 36, 55, .92), rgba(8, 18, 31, .8));
}
.usage-variant-hero h3,
.usage-variant-heading h3 { margin: 4px 0 5px; color: #edf7ff; font-size: clamp(22px, 3vw, 31px); }
.usage-variant-hero p,
.usage-variant-heading p { max-width: 560px; margin: 0; color: #829ab0; font-size: 12px; line-height: 1.5; }
.usage-variant-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.usage-variant-metric {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(86, 212, 229, .15);
  border-radius: 12px;
  background: rgba(5, 12, 24, .58);
}
.usage-variant-metric small,
.usage-line-card-head small,
.usage-runway-balance small,
.usage-runway-used small { color: #829ab0; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.usage-variant-metric strong { overflow: hidden; color: #b9f34f; font: 700 clamp(18px, 2vw, 25px) 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.usage-variant-metric span { color: #829ab0; font-size: 11px; }
.usage-line-card,
.usage-rhythm-card,
.usage-balance-chart-card {
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(86, 212, 229, .16);
  border-radius: 14px;
  background: rgba(5, 12, 24, .52);
}
.usage-line-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.usage-line-card-head > div { display: grid; gap: 5px; }
.usage-line-card-head strong { color: #edf7ff; font-size: 14px; }
.usage-line-card-head > span { color: #829ab0; font: 10px 'DM Mono', monospace; white-space: nowrap; }
.usage-svg-wrap { min-height: 235px; margin-top: 15px; border-bottom: 1px solid rgba(86, 212, 229, .14); background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, rgba(86, 212, 229, .07) 59px); }
.usage-svg-chart { display: block; width: 100%; height: 235px; overflow: visible; }
.usage-svg-line { fill: none; stroke: #b9f34f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.usage-svg-line.is-balance { stroke: #56d4e5; }
.usage-svg-area { stroke: none; }
.usage-svg-hit { fill: transparent; cursor: crosshair; pointer-events: all; }
.usage-chart-shell { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: stretch; gap: 7px; }
.usage-y-scale { display: flex; min-height: 235px; flex-direction: column; justify-content: space-between; padding: 14px 0 10px; color: #829ab0; font: 10px 'DM Mono', monospace; text-align: right; }
.usage-svg-wrap { position: relative; }
.usage-hover-tooltip { position: absolute; z-index: 3; max-width: 210px; padding: 8px 10px; border: 1px solid rgba(86, 212, 229, .35); border-radius: 7px; background: #0b1725; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); color: #edf7ff; font: 10px 'DM Mono', monospace; line-height: 1.35; pointer-events: none; white-space: nowrap; }
.usage-hover-tooltip[hidden] { display: none; }
.usage-axis { display: flex; justify-content: space-between; gap: 8px; padding-top: 9px; color: #829ab0; font: 10px 'DM Mono', monospace; }
.usage-prototype-empty { display: grid; min-height: 170px; place-items: center; color: #829ab0; font-size: 12px; text-align: center; }
.usage-variant-two .usage-variant-heading { background: linear-gradient(120deg, rgba(28, 31, 64, .93), rgba(8, 18, 31, .8)); }
.usage-rhythm-total { display: grid; justify-items: end; gap: 2px; padding: 4px 0; }
.usage-rhythm-total strong { color: #56d4e5; font: 700 25px 'DM Mono', monospace; }
.usage-rhythm-total span { color: #829ab0; font-size: 11px; }
.usage-rhythm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #edf7ff; font-size: 13px; }
.usage-rhythm-card-head span { color: #829ab0; font: 10px 'DM Mono', monospace; }
.usage-heatmap { display: grid; grid-template-columns: repeat(24, minmax(6px, 1fr)); gap: 5px; min-height: 104px; margin-top: 18px; padding: 12px; border: 1px solid rgba(86, 212, 229, .1); border-radius: 11px; background: rgba(2, 9, 17, .65); }
.usage-heatmap.is-dense { grid-template-columns: repeat(18, minmax(5px, 1fr)); gap: 4px; }
.usage-heat-cell { display: block; min-height: 22px; border-radius: 3px; background: rgba(86, 212, 229, var(--heat)); box-shadow: 0 0 12px rgba(86, 212, 229, calc(var(--heat) * .25)); }
.usage-heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 11px; color: #829ab0; font: 10px 'DM Mono', monospace; }
.usage-heat-legend i { width: 11px; height: 11px; border-radius: 3px; background: rgba(86, 212, 229, var(--heat)); }
.usage-variant-metrics-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usage-variant-three .usage-variant-heading { background: linear-gradient(120deg, rgba(19, 49, 60, .9), rgba(8, 18, 31, .8)); }
.usage-runway-ring { display: grid; width: 83px; height: 83px; flex: 0 0 auto; place-items: center; align-content: center; border-radius: 50%; background: conic-gradient(#b9f34f var(--runway), rgba(86, 212, 229, .12) 0); position: relative; }
.usage-runway-ring::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #091522; }
.usage-runway-ring strong,
.usage-runway-ring span { position: relative; z-index: 1; }
.usage-runway-ring strong { color: #edf7ff; font: 700 18px 'DM Mono', monospace; }
.usage-runway-ring span { color: #829ab0; font-size: 10px; }
.usage-runway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.usage-runway-balance,
.usage-runway-used { display: grid; gap: 8px; min-width: 0; padding: 18px; border: 1px solid rgba(86, 212, 229, .15); border-radius: 12px; background: rgba(5, 12, 24, .58); }
.usage-runway-balance strong,
.usage-runway-used strong { color: #edf7ff; font: 700 clamp(21px, 3vw, 33px) 'DM Mono', monospace; }
.usage-runway-balance span,
.usage-runway-used span { color: #829ab0; font-size: 11px; }
.usage-progress { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: rgba(86, 212, 229, .1); }
.usage-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56d4e5, #b9f34f); }
.usage-progress.is-used i { background: linear-gradient(90deg, #7869ff, #56d4e5); }

@media (max-width: 700px) {
  .usage-variant-hero,
  .usage-variant-heading { padding: 17px; flex-direction: column; gap: 13px; }
  .usage-variant-hero .usage-availability { align-self: flex-start; }
  .usage-variant-metrics,
  .usage-variant-metrics-three,
  .usage-runway-grid { grid-template-columns: 1fr; }
  .usage-variant-metric { padding: 13px; }
  .usage-line-card,
  .usage-rhythm-card,
  .usage-balance-chart-card { padding: 14px; }
  .usage-line-card-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .usage-line-card-head > span { white-space: normal; }
  .usage-svg-wrap,
  .usage-svg-chart { min-height: 190px; height: 190px; }
  .usage-y-scale { min-height: 190px; padding-top: 12px; padding-bottom: 9px; font-size: 9px; }
  .usage-chart-shell { grid-template-columns: 58px minmax(0, 1fr); gap: 5px; }
  .usage-heatmap { grid-template-columns: repeat(12, minmax(7px, 1fr)); gap: 4px; padding: 9px; }
  .usage-heatmap.is-dense { grid-template-columns: repeat(12, minmax(7px, 1fr)); }
  .usage-heat-cell { min-height: 18px; }
  .usage-rhythm-total { justify-items: start; }
  .usage-runway-ring { width: 74px; height: 74px; }
}

@media (hover: none) {
  .usage-hover-tooltip { display: none; }
}