:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #687582;
  --line: #d5e0e3;
  --paper: #eef3f4;
  --surface: #ffffff;
  --navy: #183242;
  --teal: #117c73;
  --teal-soft: #e1f3ef;
  --amber: #a96017;
  --amber-soft: #fff0d9;
  --red: #b34747;
  --red-soft: #fce8e7;
  --shadow: 0 7px 22px rgba(26, 47, 58, .065);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(17, 124, 115, .25); outline-offset: 1px; }
[hidden] { display: none !important; }

.topbar { background: var(--navy); color: #f5fbfc; border-bottom: 1px solid rgba(255,255,255,.12); }
.topbar-inner { width: min(1680px, calc(100% - 48px)); min-height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand, .top-actions, .heading-actions, .pagination, .page-buttons, .modal-actions, .bulk-bar, .table-meta { display: flex; align-items: center; }
.brand { gap: 11px; min-width: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .01em; }
.brand small { margin-top: 1px; color: #a9c1c7; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; background: #e1a24a; color: #192b35; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.top-actions { gap: 10px; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.05); color: #c4d5d8; font-size: 12px; }
.connection-state i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #93a3aa; }
.connection-state.online i { background: #61d1ad; box-shadow: 0 0 0 4px rgba(97,209,173,.12); }
.connection-state.error i { background: #ee887f; }
.connection-state.online { border-color: rgba(97,209,173,.24); background: rgba(97,209,173,.08); }
.connection-state.error { border-color: rgba(238,136,127,.28); background: rgba(238,136,127,.08); }

.page-shell { width: min(1680px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 48px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 6px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: 30px; line-height: 1.15; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: 21px; line-height: 1.2; }
.muted { color: var(--muted); }
.page-heading .muted { margin-bottom: 0; font-size: 14px; }
.heading-actions { gap: 10px; }

.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-card { position: relative; min-height: 92px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.stat-card::before { position: absolute; inset: 0 0 auto; height: 3px; background: #c3d0d4; content: ""; }
.stat-card:nth-child(1)::before { background: #e1a24a; }
.stat-card:nth-child(2)::before { background: #2b9d91; }
.stat-card:nth-child(3)::before { background: #1c9b78; }
.stat-card:nth-child(4)::before { background: #d98b36; }
.stat-card:nth-child(5)::before { background: #b3541e; }
.stat-card:nth-child(6)::before { background: #c2662f; }

.stat-card.accent { border-top: 1px solid var(--line); padding-top: 11px; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { margin-top: 4px; color: var(--navy); font-size: 28px; font-weight: 760; line-height: 1; }
.stat-value.good { color: var(--teal); }
.stat-value.warn { color: var(--amber); }
.stat-foot { margin-top: 6px; color: #829099; font-size: 11px; }

.toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.search-box { position: relative; flex: 1 1 310px; max-width: 510px; }
.search-box > span { position: absolute; left: 13px; top: 8px; color: #71838b; font-size: 20px; line-height: 1; pointer-events: none; }
.search-box input { width: 100%; height: 36px; padding: 0 37px 0 37px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); }
.search-box input::placeholder { color: #93a0a6; }
.clear-search { position: absolute; right: 7px; top: 3px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #7d8a91; font-size: 20px; }
.select-wrap { display: grid; grid-template-columns: auto minmax(110px, auto); align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.select-wrap select { height: 36px; min-width: 110px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); }
.toolbar > .ghost { min-height: 36px; }

button { border: 0; border-radius: 5px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
.primary, .secondary, .ghost { min-height: 40px; padding: 0 15px; font-weight: 650; }
.primary { background: var(--teal); color: #fff; }
.primary:hover { background: #0d685f; }
.secondary { border: 1px solid #bdd8d4; background: var(--teal-soft); color: #12675f; }
.secondary:hover { background: #cfeae5; }
.ghost { border: 1px solid var(--line); background: transparent; color: #4e626c; }
.ghost:hover { background: #e9eff1; color: var(--ink); }
.icon-button { width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #e3f1f2; font-size: 21px; line-height: 1; }
.icon-button:hover { background: rgba(255,255,255,.12); }
.top-actions .ghost { min-height: 35px; padding: 0 11px; border-color: rgba(255,255,255,.22); color: #d7e7e9; }
.wide { width: 100%; }

.bulk-bar { gap: 8px; min-height: 48px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #bedbd6; border-radius: 5px; background: #edf8f6; color: #285b58; font-size: 13px; }
.bulk-bar strong { color: var(--navy); }
.bulk-bar button:not(.ghost) { min-height: 31px; padding: 0 10px; border: 1px solid #bbd6d2; background: #fff; color: #22665f; font-size: 12px; }
.bulk-bar button:not(.ghost):hover { background: var(--teal-soft); }
.bulk-bar .danger-text { border-color: #edc3c0 !important; color: var(--red) !important; }
.bulk-bar .ghost { min-height: 31px; margin-left: auto; padding: 0 10px; font-size: 12px; }

.probe-jobs-panel { margin: 0 0 10px; padding: 10px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.probe-jobs-header, .probe-jobs-tools, .probe-job-row-head, .probe-job-row-foot, .probe-job-name, .probe-job-actions, .probe-job-detail-head { display: flex; align-items: center; }
.probe-jobs-header { justify-content: space-between; gap: 16px; padding: 0 2px 8px; }
.probe-jobs-header .eyebrow { margin-bottom: 3px; }
.probe-jobs-header h2 { font-size: 16px; }
.probe-jobs-tools { justify-content: flex-end; gap: 9px; min-width: 0; }
.probe-jobs-tools .muted { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.probe-jobs-toggle { min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: #50646d; font-size: 11px; white-space: nowrap; }
.probe-jobs-toggle:hover { border-color: #a8cbc6; background: var(--teal-soft); color: #176a62; }
.small-icon-button { width: 31px; height: 31px; flex: 0 0 31px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: #52666f; font-size: 18px; line-height: 1; }
.small-icon-button:hover { border-color: #a8cbc6; background: var(--teal-soft); color: #176a62; }
.probe-jobs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 9px; padding: 0 0 10px; }
.probe-job-row { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.probe-job-row-head { justify-content: space-between; gap: 10px; min-width: 0; }
.probe-job-name { min-width: 0; gap: 7px; }
.probe-job-name strong { overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.probe-job-id { max-width: 98px; overflow: hidden; color: #849198; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.probe-job-status { display: inline-flex; align-items: center; min-height: 23px; flex: 0 0 auto; padding: 0 7px; border-radius: 4px; background: #edf1f3; color: #61747c; font-size: 11px; font-weight: 720; white-space: nowrap; }
.probe-job-status.queued, .probe-job-status.canceling { background: var(--amber-soft); color: #976019; }
.probe-job-status.running, .probe-job-status.succeeded { background: var(--teal-soft); color: #187067; }
.probe-job-status.failed { background: var(--red-soft); color: var(--red); }
.probe-job-status.canceled { background: #f0eeee; color: #786f72; }
.probe-job-progress { min-width: 0; margin-top: 7px; }
.probe-job-progress-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-width: 0; color: #62737b; font-size: 11px; font-variant-numeric: tabular-nums; }
.probe-job-progress-main progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 3px; accent-color: var(--teal); background: #e7edef; }
.probe-job-progress-main progress::-webkit-progress-bar { background: #e7edef; }
.probe-job-progress-main progress::-webkit-progress-value { background: var(--teal); }
.probe-job-progress-main progress::-moz-progress-bar { background: var(--teal); }
.probe-job-progress-main strong { color: var(--navy); font-weight: 720; white-space: nowrap; }
.probe-job-progress-main span { min-width: 28px; color: #74858b; text-align: right; }
.probe-job-counts { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 7px; color: #77868c; font-size: 10px; font-variant-numeric: tabular-nums; }
.probe-job-counts strong { color: #4a5f68; font-weight: 720; }
.probe-job-row-foot { justify-content: space-between; gap: 10px; margin-top: 7px; color: #849198; font-size: 11px; }
.probe-job-actions { flex: 0 0 auto; gap: 5px; }
.probe-job-actions button, .danger-outline { min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: #50646d; font-size: 11px; white-space: nowrap; }
.probe-job-actions button:hover { border-color: #a8cbc6; background: var(--teal-soft); color: #176a62; }
.danger-outline { border-color: #edc3c0 !important; color: var(--red) !important; }
.danger-outline:hover { background: var(--red-soft); }
.probe-jobs-empty { margin: 0; padding: 14px 2px 18px; color: #849198; font-size: 12px; }
.probe-jobs-panel.is-compact { padding: 7px 0; }
.probe-jobs-panel.is-compact .probe-jobs-header { padding-bottom: 0; }
.probe-jobs-panel.is-compact .probe-jobs-header .eyebrow { display: none; }
.probe-jobs-panel.is-compact .probe-jobs-header h2 { font-size: 15px; }

.probe-job-dialog-card { width: min(760px, 100%); }
.probe-job-detail-progress { margin: 18px 0 16px; }
.probe-job-detail-head { justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.probe-job-detail-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.probe-job-items { max-height: min(380px, 42vh); overflow: auto; border-top: 1px solid var(--line); }
.probe-job-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 2px; border-bottom: 1px solid #edf0f1; }
.probe-job-item > div { min-width: 0; }
.probe-job-item strong, .probe-job-item span { display: block; }
.probe-job-item strong { color: var(--navy); font-size: 12px; }
.probe-job-item > div > span { overflow: hidden; margin-top: 2px; color: #7a898f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.probe-job-item > .probe-job-status { display: inline-flex; }

.table-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.table-meta { justify-content: space-between; min-height: 52px; padding: 0 17px; border-bottom: 1px solid var(--line); color: #4d626c; font-size: 13px; }
.table-meta .muted { font-size: 12px; }
.table-scroll { overflow-x: auto; scrollbar-color: #c3d0d4 transparent; scrollbar-width: thin; }
table { width: 100%; min-width: 1120px; border-collapse: collapse; }
th, td { padding: 11px 12px; border-bottom: 1px solid #edf0f1; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; background: #f8fafb; color: #65757d; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
td { color: #34464f; font-size: 13px; }
tbody tr:hover { background: #fbfcfc; }
tbody tr:last-child td { border-bottom: 0; }
.check-col { width: 38px; padding-right: 2px; padding-left: 16px; }
.actions-col { position: sticky; right: 0; z-index: 2; width: 292px; min-width: 292px; background: var(--surface); text-align: right; box-shadow: -10px 0 16px rgba(26,47,58,.045); }
th.actions-col { background: #f8fafb; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); }
.proxy-primary { display: flex; align-items: flex-start; gap: 9px; min-width: 190px; }
.proxy-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: #9aa8ae; }
.proxy-dot.healthy { background: var(--teal); }
.proxy-dot.unhealthy { background: var(--amber); }
.proxy-dot.disabled { background: #aeb9bd; }
.proxy-name { overflow: hidden; max-width: 225px; color: var(--navy); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.proxy-url-row { display: flex; align-items: center; gap: 4px; max-width: 300px; margin-top: 2px; }
.proxy-url { min-width: 0; flex: 1 1 auto; overflow: hidden; color: #849198; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.proxy-url.revealed { overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.copy-button { display: inline-grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #60737b; font-size: 16px; line-height: 1; }
.credential-button { color: #49666f; font-size: 14px; }
.copy-button:hover { border-color: #a8cbc6; background: var(--teal-soft); color: #176a62; }
.type-pill, .status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 720; white-space: nowrap; }
.type-pill { background: #edf1f3; color: #51646c; text-transform: uppercase; }
.country-cell { min-width: 76px; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.country-value { font-weight: 700; }
.country-empty { color: #8a969b; }
.status-pill.healthy { background: var(--teal-soft); color: #187067; }
.status-pill.unknown { background: #edf1f3; color: #62737b; }
.status-pill.unhealthy { background: var(--amber-soft); color: #976019; }
.status-pill.disabled { background: #f0eeee; color: #8b7373; }
/* Scheduling column. These pills restate the pool's own decision, so the visual
   weight tracks how much traffic the endpoint can actually carry: available is
   the only calm state, everything else is a reason the pool is holding back. */
.dispatch-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 720; white-space: nowrap; }
.dispatch-pill.available { background: var(--teal-soft); color: #187067; }
.dispatch-pill.recovering { background: #fdf0e2; color: #96501b; }
.dispatch-pill.cooling { background: #b3541e; color: #fff; }
.dispatch-pill.disabled { background: #f0eeee; color: #8b7373; }
.dispatch-pill.not_in_pool { background: #eef1f3; color: #6d7b81; border: 1px dashed #c3ccd0; }
.dispatch-pill.unavailable { background: #fdf0e2; color: #96501b; border: 1px dashed #d9a877; }
.fail-streak { color: #b3541e; }
.metric { font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric strong { color: var(--navy); font-weight: 720; }
.metric span { color: #8a969b; }
.probe-cell { min-width: 185px; }
.probe-metrics { display: grid; gap: 2px; color: #5e737b; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }
.probe-metrics span:first-child { color: var(--navy); font-weight: 700; }
.probe-empty { color: #8a969b; font-size: 12px; white-space: nowrap; }
.activity { color: #6e7d84; font-size: 12px; white-space: nowrap; }
.row-actions { display: inline-flex; justify-content: flex-end; gap: 5px; width: max-content; min-width: 100%; }
.row-actions button { flex: 0 0 auto; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #50646d; font-size: 12px; white-space: nowrap; }
.row-actions button[data-action="toggle"] { border-color: #c3dfda; background: #f3fbf9; color: #176a62; }
.row-actions button[data-action="test"], .row-actions button[data-action="custom-test"] { border-color: #cfdde1; background: #f8fafb; color: #3f5c66; }
.row-actions button[data-action="delete"] { border-color: #efd2cf; background: #fff9f8; color: #a04f4c; }
.row-actions button[data-action="toggle"] { min-width: 52px; }
.row-actions button[data-action="test"] { min-width: 52px; }
.row-actions button[data-action="custom-test"] { min-width: 64px; }
.row-actions button[data-action="edit"], .row-actions button[data-action="delete"] { min-width: 52px; }
.row-actions button:hover { border-color: #a8cbc6; background: var(--teal-soft); color: #176a62; }
.row-actions button.danger:hover { border-color: #edc3c0; background: var(--red-soft); color: var(--red); }
.empty-state { height: 190px; color: #849198; text-align: center; }
.pagination { justify-content: space-between; gap: 12px; min-height: 61px; padding: 0 17px; border-top: 1px solid var(--line); }
.page-buttons { gap: 7px; }
.page-buttons button { min-height: 33px; padding: 0 11px; font-size: 12px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px 18px; background: var(--paper); }
.login-panel { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.login-panel .brand-mark { margin-bottom: 24px; }
.login-panel h1 { margin-bottom: 9px; font-size: 27px; }
.login-panel .muted { margin-bottom: 26px; font-size: 13px; }
.stack-form, .form-grid { display: grid; gap: 15px; }
label { display: grid; gap: 6px; color: #52636b; font-size: 12px; font-weight: 650; }
label input, label select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); }
label input[type="checkbox"] { width: 17px; min-height: 17px; padding: 0; }
.form-error { margin: 0; color: var(--red); font-size: 12px; }

.modal { width: min(620px, calc(100% - 30px)); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: 0 22px 65px rgba(15, 32, 42, .24); }
.modal::backdrop { background: rgba(14, 30, 38, .52); }
.modal-card { max-height: calc(100vh - 30px); overflow-y: auto; padding: 25px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.close-button { width: 32px; height: 32px; background: #eef2f3; color: #62737b; font-size: 21px; line-height: 1; }
.close-button:hover { background: #e2e9eb; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
label small { color: #88959a; font-size: 11px; font-weight: 400; }
.toggle-label { display: flex; align-items: center; grid-template-columns: auto 1fr; gap: 9px; }
.modal-actions { justify-content: flex-end; gap: 9px; margin-top: 24px; }
.import-card { width: min(720px, 100%); }
.import-card > .muted { margin-bottom: 14px; font-size: 12px; }
.import-card code { padding: 2px 4px; border-radius: 3px; background: #eef2f3; color: #38535e; font-size: 11px; }
.import-card textarea { min-height: 230px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; }
.file-picker { display: inline-flex; align-items: center; width: fit-content; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #f8fafb; color: #526971; font-size: 12px; }
.file-picker input { width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; opacity: 0; position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); }
.file-picker:hover { border-color: #a8cbc6; background: var(--teal-soft); color: #176a62; }
.file-picker:focus-within { outline: 3px solid rgba(17, 124, 115, .25); outline-offset: 1px; }
.import-columns { display: grid; gap: 6px; max-height: 200px; overflow-y: auto; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f8fafb; }
.import-columns-hint { margin: 0 0 2px; color: #62737b; font-size: 11px; line-height: 1.5; }
.import-column { display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 26px; font-size: 12px; }
.import-column input { width: 14px; height: 14px; min-height: 0; margin: 0; padding: 0; }
.import-column-label { font-weight: 500; overflow-wrap: anywhere; }
.import-column-sample { min-width: 0; overflow: hidden; color: #88959a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.import-preview { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: #527069; font-size: 12px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(420px, calc(100% - 44px)); padding: 12px 15px; border: 1px solid #bbd8d3; border-radius: 5px; background: #f0fbf9; color: #1e625b; box-shadow: var(--shadow); font-size: 13px; }
.toast.error { border-color: #edc3c0; background: var(--red-soft); color: #9d4544; }

@media (max-width: 1400px) and (min-width: 901px) {
  table { min-width: 1040px; }
  .proxy-primary { min-width: 180px; }
  .proxy-name { max-width: 175px; }
  .proxy-url-row { max-width: 260px; }
  .probe-cell { min-width: 175px; }
  .actions-col { width: 292px; min-width: 292px; }
}

@media (max-width: 900px) {
  .topbar-inner, .page-shell { width: min(100% - 32px, 1680px); }
  .page-shell { padding-top: 30px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (max-width: 620px) {
  .topbar-inner, .page-shell { width: calc(100% - 24px); }
  .topbar-inner { min-height: 60px; }
  .brand small, .connection-state { display: none; }
  .page-shell { padding-top: 23px; }
  .heading-actions { width: 100%; }
  .heading-actions button { flex: 1; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 111px; padding: 14px; }
  .stat-card.accent { padding-top: 12px; }
  .stat-value { margin-top: 6px; font-size: 26px; }
  .stat-foot { margin-top: 8px; font-size: 11px; }
  .toolbar { align-items: stretch; gap: 8px; }
  .search-box { flex-basis: 100%; max-width: none; }
  .select-wrap { flex: 1; display: block; }
  .select-wrap span { display: block; margin-bottom: 4px; }
  .select-wrap select { width: 100%; }
  .toolbar > .ghost { align-self: flex-end; min-height: 40px; }
  .table-meta { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; min-height: 62px; }
  .pagination { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .page-buttons { width: 100%; }
  .page-buttons button { flex: 1; }
  .modal-card { padding: 20px 17px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .bulk-bar { flex-wrap: wrap; }
  .bulk-bar .ghost { margin-left: 0; }
  .probe-jobs-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .probe-jobs-tools { width: 100%; justify-content: space-between; }
  .probe-jobs-list { grid-template-columns: minmax(0, 1fr); }
  .probe-job-row-foot { align-items: flex-start; flex-direction: column; }
  .probe-job-actions { width: 100%; justify-content: flex-end; }
  .probe-job-detail-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .probe-job-item { align-items: flex-start; }
  .probe-job-item > div > span { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  .page-shell { padding-bottom: 32px; }
  .table-panel { border-radius: 8px; }
  table { min-width: 0; width: 100%; table-layout: fixed; }
  th, td { padding: 10px 9px; }
  /* Column indexes, not semantics: 1 checkbox, 2 proxy, 3 type, 4 region,
     5 country, 6 health, 7 dispatch, 8 weight, 9 cumulative success,
     10 failure streak, 11 speed, 12 last activity, 13 actions.
     Health, dispatch and the failure streak are what an operator needs to
     triage, so they survive; the dense descriptive columns go. Keep this list
     in step with the header in index.html — TestTableColumnHidingMatchesHeader
     fails if a column is inserted without updating it. */
  th:nth-child(3), td:nth-child(3),
  th:nth-child(4), td:nth-child(4),
  th:nth-child(5), td:nth-child(5),
  th:nth-child(8), td:nth-child(8),
  th:nth-child(9), td:nth-child(9),
  th:nth-child(11), td:nth-child(11) { display: none; }
  .check-col { width: 34px; }
  th:nth-child(2), td:nth-child(2) { width: 30%; }
  .actions-col, th.actions-col { position: sticky; right: 0; width: 38%; min-width: 38%; background: var(--surface); box-shadow: -10px 0 18px rgba(26,47,58,.08); }
  th.actions-col { background: #f8fafb; }
  .proxy-primary { min-width: 0; }
  .proxy-name { max-width: 150px; }
  .proxy-url-row { max-width: 100%; }
  .proxy-url { max-width: 125px; }
  .row-actions { gap: 4px; min-width: 0; width: 100%; flex-wrap: wrap; }
  .row-actions button { min-height: 28px; padding: 0 6px; font-size: 11px; }
  .row-actions button[data-action="custom-test"] { min-width: 55px; }
  .row-actions button[data-action="edit"], .row-actions button[data-action="delete"], .row-actions button[data-action="toggle"], .row-actions button[data-action="test"] { min-width: 44px; }
}

/* Declared after the <=900px block on purpose: at 620px both queries match, and
   at equal specificity the later one wins. The earlier <=620px block sits above
   the table rules, so anything that must override them has to live here. Below
   this width the fixed layout cannot show every triage column without crushing
   the labels, so the secondary timestamp column gives up its space and the
   remaining width goes to the columns that decide what to do next. */
@media (max-width: 620px) {
  th:nth-child(12), td:nth-child(12) { display: none; }
  th:nth-child(2), td:nth-child(2) { width: 22%; }
  /* The remaining triage columns get the width their labels actually need.
     The dispatch pill is the widest of them ("恢复探测中" is about 71px) and
     would otherwise spill into the actions column, because the pills are
     nowrap and a fixed table layout will not widen a cell to fit. The tighter
     padding is what makes that affordable: each cell otherwise gives 18px to
     padding, which is a quarter of the budget at this width. */
  th:nth-child(6), td:nth-child(6),
  th:nth-child(7), td:nth-child(7),
  th:nth-child(10), td:nth-child(10) { padding-left: 5px; padding-right: 5px; }
  th:nth-child(6), td:nth-child(6) { width: 60px; }
  th:nth-child(7), td:nth-child(7) { width: 88px; }
  th:nth-child(10), td:nth-child(10) { width: 56px; }
  .actions-col, th.actions-col { width: auto; min-width: 148px; }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink: #e6eef0; --muted: #9babb1; --line: #31434b; --paper: #152229; --surface: #1c2d35; --navy: #dcebed; --teal-soft: #173e3b; --amber-soft: #49351f; --red-soft: #472b2b; --shadow: 0 7px 22px rgba(0,0,0,.16); }
  .topbar { background: #0e1d25; }
  .brand small, .connection-state { color: #a9c1c7; }
  .stat-value { color: #d9eaed; }
  th { background: #192a32; color: #a5b5ba; }
  td { color: #c6d3d6; border-bottom-color: #293c44; }
  tbody tr:hover { background: #20343d; }
  .search-box input, .select-wrap select, label input, label select, textarea, .row-actions button { border-color: var(--line); background: #1a2a32; color: var(--ink); }
  .actions-col, th.actions-col { background: var(--surface); }
  th.actions-col { background: #192a32; }
  .copy-button { color: #9aadb2; }
  .ghost { border-color: var(--line); color: #bdcdd1; }
  .ghost:hover { background: #293d45; }
  .type-pill, .status-pill.unknown, .close-button, .import-card code { background: #2a3b43; color: #c0d0d4; }
  .dispatch-pill.available { background: #173e3b; color: #8fd3cb; }
  .dispatch-pill.recovering { background: #4a3520; color: #e3b077; }
  .dispatch-pill.cooling { background: #b3541e; color: #fff; }
  .dispatch-pill.disabled { background: #3a2f2f; color: #c4adad; }
  .dispatch-pill.not_in_pool { background: #24343c; color: #9babb1; border-color: #3c4d55; }
  .dispatch-pill.unavailable { background: #4a3520; color: #e3b077; border-color: #6b4d2c; }
  .fail-streak { color: #e08a4c; }
  .file-picker { background: #1a2a32; color: #bdcdd1; }
  .import-columns { background: #1a2a32; }
  .import-columns-hint, .import-column-sample { color: #8fa1a7; }
  .proxy-name { color: #e0edef; }
  .proxy-url, .activity { color: #8fa1a7; }
  .login-shell { background: #152229; }
  .modal-card { background: var(--surface); }
  .small-icon-button, .probe-job-row, .probe-job-actions button, .danger-outline { border-color: var(--line); background: #1a2a32; color: var(--ink); }
  .danger-outline { border-color: #80514e !important; background: #2b2020; color: #e47c79 !important; }
  .probe-job-progress-main progress, .probe-job-progress-main progress::-webkit-progress-bar { background: #2a3d45; }
  .probe-job-item { border-bottom-color: #293c44; }
  .region-tag { background: #2a3b43; color: #c0d0d4; }
  .region-tag.unrestricted { background: #173e3b; color: #9fd8cf; }
  .region-checkbox span { background: #1a2a32; border-color: var(--line); color: #c0d0d4; }
  .region-checkbox input:checked + span { background: #173e3b; border-color: #3f8f80; color: #9fd8cf; }
  .credential-display { background: #1a2a32; border-color: var(--line); }
  .credential-copy { background: #1a2a32; border-color: var(--line); color: var(--ink); }
  .credential-copy:hover { background: #293d45; }
}

/* User management */
.users-table { table-layout: auto; }
.users-table td, .users-table th { white-space: nowrap; }
.users-table td.user-regions-cell { white-space: normal; }
.users-table tr.disabled .user-name { opacity: .55; text-decoration: line-through; }
.user-name { font-weight: 600; }
.user-regions-cell .region-tag { margin: 1px 2px 1px 0; }
.user-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.user-status-dot.good { background: #2f9e6e; }
.user-status-dot.muted { background: #9babb1; }
.region-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef3f4; color: #44606b; font-size: 11px; font-weight: 600; }
.region-tag.unrestricted { background: #e3f2ee; color: #2f7a67; }
.region-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.region-checkbox { cursor: pointer; }
.region-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.region-checkbox span { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: #f6f9fa; color: #44606b; font-size: 12px; font-weight: 600; transition: background .15s, border-color .15s; }
.region-checkbox input:checked + span { background: #e3f2ee; border-color: #2f9e6e; color: #20624c; }
.field-label { display: block; font-weight: 600; margin-bottom: 2px; }
.small-note { font-size: 12px; }
.credential-display { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px; background: #f6f9fa; }
.credential-text { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .02em; user-select: all; overflow-wrap: anywhere; }
.credential-copy { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.credential-copy:hover { background: #eef3f4; }