:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #f7f8fb;
  color: #161b22;
}

body {
  margin: 0;
}

.trading-shell {
  --trading-bg: #f7f8fb;
  --trading-panel: #ffffff;
  --trading-subtle: #f6f8fa;
  --trading-border: #d8dee8;
  --trading-muted: #57606a;
  --trading-accent: #0969da;
  background: var(--trading-bg);
  color: #161b22;
  min-height: 100vh;
  overflow: hidden;
}

.trading-product-nav {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--trading-border);
  display: flex;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
}

.trading-brand,
.trading-vpn-link,
.trading-product-nav a,
.trading-context-nav a {
  color: var(--trading-muted);
  text-decoration: none;
}

.trading-brand {
  align-items: center;
  color: #161b22;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  gap: 8px;
}

.trading-brand-logo {
  border: 1px solid #d8dee8;
  border-radius: 6px;
  height: 25px;
  object-fit: cover;
  width: 25px;
}

.trading-section-links {
  display: flex;
  flex: 1;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.trading-section-links a {
  border-radius: 5px;
  flex: 0 0 auto;
  font-size: 11px;
  padding: 6px 9px;
  white-space: nowrap;
}

.trading-section-links a:hover,
.trading-section-links a.active,
.trading-context-nav a.active {
  background: #eaf3ff;
  color: #0a58ca;
}

.trading-vpn-link {
  flex: 0 0 auto;
  font-size: 11px;
}

.trading-context-nav {
  align-items: center;
  background: #fbfcfe;
  border-bottom: 1px solid var(--trading-border);
  display: flex;
  gap: 28px;
  min-height: 54px;
  padding: 0 20px;
}

.trading-context-nav > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.trading-live-dot {
  background: #1a7f37;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #dafbe1;
  height: 7px;
  width: 7px;
}

.trading-context-nav nav {
  display: flex;
  gap: 4px;
}

.trading-context-nav a {
  border-radius: 16px;
  font-size: 12px;
  padding: 7px 13px;
}

.trading-context-nav small {
  color: var(--trading-muted);
  font-size: 11px;
  margin-left: auto;
}

.trading-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  height: calc(100vh - 98px);
}

.trading-map-panel {
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.trading-map-controls {
  align-items: end;
  display: flex;
  gap: 10px;
  left: 18px;
  position: absolute;
  top: 16px;
  z-index: 800;
}

.trading-map-controls label {
  color: var(--trading-muted);
  font-size: 10px;
  gap: 4px;
  text-transform: uppercase;
}

.trading-map-controls select {
  background: rgba(255, 255, 255, .96);
  border-color: #c9d1d9;
  color: #161b22;
  font-size: 12px;
  min-width: 230px;
}

.trading-map-controls select,
.trading-measurement-pill {
  box-shadow: 0 3px 12px rgba(27, 31, 36, .08);
}

.trading-measurement-pill,
.trading-protocol {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #c9d1d9;
  border-radius: 6px;
  color: #57606a;
  font-size: 10px;
  padding: 10px;
}

.trading-map-summary {
  display: flex;
  gap: 8px;
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 800;
}

.trading-map-summary > div {
  background: rgba(255, 255, 255, .94);
  border: 1px solid #d8dee8;
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(27, 31, 36, .08);
  display: grid;
  gap: 3px;
  min-width: 86px;
  padding: 9px 11px;
}

.trading-map-summary small,
.trading-ranking-heading small,
.trading-rank-row small,
.trading-document-view small {
  color: var(--trading-muted);
  font-size: 10px;
}

.trading-map-summary strong {
  font-size: 13px;
}

.trading-map-wrap,
#trading-map {
  height: 100%;
  width: 100%;
}

.trading-map-wrap {
  background: #eaf0f6;
}

#trading-map {
  background: #eaf0f6;
}

#trading-map .leaflet-tile-pane {
  filter: grayscale(.18) saturate(.78) brightness(.97) contrast(1.07);
}

#trading-map .leaflet-control-attribution,
#trading-map .leaflet-control-zoom a {
  background: rgba(255, 255, 255, .94);
  color: #57606a;
}

#trading-map .leaflet-control-attribution a,
#trading-map .leaflet-control-zoom a:hover {
  color: #0969da;
}

#trading-map .leaflet-control-zoom {
  border-color: #c9d1d9;
  margin-top: 86px;
}

.trading-map-tooltip {
  background: rgba(255, 255, 255, .98);
  border: 1px solid #c9d1d9;
  box-shadow: 0 4px 16px rgba(27, 31, 36, .14);
  color: #161b22;
  line-height: 1.45;
  padding: 7px 9px;
}

.trading-map-tooltip::before {
  border-top-color: #c9d1d9 !important;
}

.trading-map-legend {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #d8dee8;
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(27, 31, 36, .08);
  bottom: 15px;
  display: flex;
  gap: 15px;
  left: 18px;
  padding: 8px 10px;
  position: absolute;
  z-index: 800;
}

.trading-map-legend span {
  align-items: center;
  color: #57606a;
  display: flex;
  font-size: 10px;
  gap: 5px;
}

.trading-map-legend i,
.trading-rank-dot {
  background: var(--dot);
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--dot), transparent 35%);
  display: inline-block;
  height: 7px;
  width: 7px;
}

.trading-ranking-panel {
  background: var(--trading-panel);
  border-left: 1px solid var(--trading-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.trading-ranking-heading {
  align-items: center;
  border-bottom: 1px solid var(--trading-border);
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.trading-ranking-heading h1 {
  font-size: 16px;
  margin: 3px 0 0;
}

.trading-rank-list {
  overflow-y: auto;
}

.trading-rank-row {
  align-items: center;
  border-bottom: 1px solid #d8dee8;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px 8px minmax(105px, 1fr) 74px 96px;
  padding: 11px 14px;
}

.trading-rank-row:hover {
  background: #f6f8fa;
}

.trading-rank-number {
  color: #8c959f;
  font-size: 11px;
  text-align: right;
}

.trading-rank-location,
.trading-rank-metric,
.trading-rank-secondary {
  display: grid;
  gap: 2px;
}

.trading-rank-location strong,
.trading-rank-metric strong {
  font-size: 12px;
}

.trading-rank-metric {
  text-align: right;
}

.trading-rank-secondary {
  color: #57606a;
  font-size: 9px;
  text-align: right;
}

.trading-document-view {
  margin: 0 auto;
  max-width: 1120px;
  padding: 52px 24px 80px;
}

.trading-document-view header {
  max-width: 720px;
}

.trading-document-view h1 {
  font-size: 34px;
  margin: 7px 0 12px;
}

.trading-document-view h2 {
  font-size: 15px;
}

.trading-document-view p {
  color: #57606a;
  line-height: 1.65;
}

.trading-copy-columns,
.trading-target-grid {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
}

.trading-copy-columns article,
.trading-target-grid article,
.trading-status-grid article {
  background: #ffffff;
  border: 1px solid var(--trading-border);
  border-radius: 8px;
  padding: 16px;
}

.trading-target-grid article {
  display: grid;
  gap: 6px;
}

.trading-target-grid span {
  color: #57606a;
  font-size: 12px;
}

.trading-status-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin: 28px 0;
}

.trading-status-grid article {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 8px 1fr auto;
}

.trading-status-grid i {
  background: #8c959f;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.trading-status-grid i.fresh { background: #1a7f37; }
.trading-status-grid i.stale { background: #cf222e; }
.trading-status-grid div { display: grid; gap: 2px; }
.trading-status-grid span { color: #57606a; font-size: 11px; }

.trading-empty-state,
.trading-centered {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 98px);
  text-align: center;
}

.trading-empty-state span {
  color: #0969da;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.trading-empty-state h1 {
  font-size: 42px;
  margin: 12px 0;
}

.trading-empty-state p {
  color: #57606a;
  line-height: 1.6;
  max-width: 620px;
}

.trading-centered {
  gap: 12px;
}

.trading-centered p,
.trading-centered a { color: #57606a; }

.trading-loader {
  animation: trading-spin .8s linear infinite;
  border: 2px solid #d8dee8;
  border-radius: 50%;
  border-top-color: #1f6feb;
  height: 24px;
  width: 24px;
}

.trading-error-mark {
  align-items: center;
  background: #ffebe9;
  border-radius: 50%;
  color: #cf222e;
  display: flex;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  width: 40px;
}

@keyframes trading-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .trading-brand strong,
  .trading-vpn-link,
  .trading-context-nav small { display: none; }
  .trading-dashboard { grid-template-columns: 1fr; height: auto; }
  .trading-map-panel { height: 58vh; }
  .trading-ranking-panel { border-left: 0; border-top: 1px solid var(--trading-border); }
  .trading-map-summary { display: none; }
}

@media (max-width: 620px) {
  .trading-product-nav { padding: 0 8px; }
  .trading-context-nav { gap: 10px; padding: 0 10px; }
  .trading-context-nav > div strong { display: none; }
  .trading-map-controls { left: 10px; right: 10px; }
  .trading-map-controls label { flex: 1; }
  .trading-map-controls select { min-width: 0; }
  .trading-measurement-pill { display: none; }
  .trading-map-legend { flex-wrap: wrap; gap: 7px 12px; right: 10px; }
  .trading-rank-row { grid-template-columns: 18px 7px minmax(90px, 1fr) 66px; }
  .trading-rank-secondary { display: none; }
  .trading-copy-columns,
  .trading-target-grid,
  .trading-status-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .trading-map-pulse,
  .trading-loader { animation: none; }
}

button,
input,
select,
.button-link {
  font: inherit;
}

button,
.button-link {
  border: 1px solid #1f6feb;
  background: #1f6feb;
  color: white;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-block;
  line-height: 1.2;
  text-decoration: none;
}

button.secondary-button,
.button-link.secondary-button,
.app-nav a {
  border-color: #c9d1d9;
  background: #ffffff;
  color: #161b22;
}

button.danger-button {
  border-color: #cf222e;
  background: #cf222e;
}

button.success-button {
  border-color: #1a7f37;
  background: #1a7f37;
}

.app-nav a.active {
  border-color: #1f6feb;
  background: #eaf3ff;
  color: #0a58ca;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button + button {
  margin-left: 8px;
}

input,
select {
  border: 1px solid #c9d1d9;
  border-radius: 6px;
  padding: 8px 10px;
  background: white;
  box-sizing: border-box;
  min-height: 38px;
  width: 100%;
}

label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-scroll {
  overflow-x: auto;
}

td,
th {
  border-bottom: 1px solid #d8dee8;
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  font-size: 14px;
  font-weight: 700;
}

tbody td {
  font-size: 13px;
  line-height: 1.35;
}

.vpn-configs-table .created-column {
  white-space: nowrap;
}

.vpn-configs-table .mode-column {
  max-width: 108px;
  white-space: normal;
  width: 108px;
}

.vpn-configs-table tbody .mode-column strong {
  display: inline-block;
  max-width: 108px;
  white-space: normal;
}

.vpn-configs-table thead .source-column,
.vpn-configs-table thead .target-column,
.vpn-configs-table thead .ingress-column,
.vpn-configs-table thead .egress-column {
  white-space: nowrap;
}

.status-column {
  min-width: 104px;
}

.status-cell {
  align-content: center;
  display: grid;
  gap: 2px;
  min-height: 32px;
}

.status-cell strong {
  font-size: inherit;
}

.status-cell small {
  color: #57606a;
  font-size: 11px;
  line-height: 1.25;
  margin: 0;
}

.status-error strong,
.status-error small {
  color: #b42318;
}

.actions-column {
  min-width: 180px;
  text-align: left;
  white-space: normal;
  width: 180px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.action-buttons button + button {
  margin-left: 0;
}

.action-buttons button {
  font-size: 12px;
  padding: 6px 8px;
}

.table-sort {
  border: 0;
  background: transparent;
  color: #161b22;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
}

.table-sort:hover {
  color: #0a58ca;
}

.latency-cell {
  min-width: 150px;
}

.latency-result {
  display: grid;
  min-height: 38px;
}

.latency-result strong {
  line-height: 18px;
}

.latency-result small {
  line-height: 16px;
}

.benchmark-routes {
  display: grid;
  gap: 14px;
}

.benchmark-routes-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.benchmark-routes-heading h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

.benchmark-routes-heading p {
  color: #57606a;
  font-size: 13px;
  margin: 0;
}

.benchmark-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 260px;
}

.benchmark-summary span {
  background: #f6f8fa;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  color: #57606a;
  font-size: 12px;
  padding: 5px 8px;
}

.benchmark-summary strong {
  color: #161b22;
}

.benchmark-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.benchmark-filter-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  max-width: none;
  white-space: nowrap;
}

.benchmark-filter-label select {
  font-size: 12px;
  line-height: 1.2;
  min-height: 30px;
  min-width: 128px;
  padding: 4px 28px 4px 8px;
  width: auto;
}

.benchmark-route-table {
  min-width: 0;
  table-layout: fixed;
}

.benchmark-route-table th,
.benchmark-route-table td {
  padding: 8px 6px;
  vertical-align: top;
}

.benchmark-route-table thead th {
  background: #f6f8fa;
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.benchmark-route-table td {
  font-size: 11px;
}

.benchmark-rtt-table th:nth-child(1) {
  width: 18%;
}

.benchmark-rtt-table th:nth-child(2),
.benchmark-rtt-table th:nth-child(3),
.benchmark-rtt-table th:nth-child(5),
.benchmark-rtt-table th:nth-child(6),
.benchmark-rtt-table th:nth-child(9) {
  width: 7%;
}

.benchmark-rtt-table th:nth-child(4),
.benchmark-rtt-table th:nth-child(8) {
  width: 9%;
}

.benchmark-rtt-table th:nth-child(10) {
  width: 9%;
}

.benchmark-rtt-table th:nth-child(11),
.benchmark-rtt-table th:nth-child(12) {
  width: 10%;
}

.benchmark-rtt-table th:nth-child(7) {
  width: 8%;
}

.benchmark-one-way-table th:nth-child(1) {
  width: 16%;
}

.benchmark-one-way-table th:nth-child(2),
.benchmark-one-way-table th:nth-child(3),
.benchmark-one-way-table th:nth-child(5),
.benchmark-one-way-table th:nth-child(7),
.benchmark-one-way-table th:nth-child(8),
.benchmark-one-way-table th:nth-child(10) {
  width: 6%;
}

.benchmark-one-way-table th:nth-child(4),
.benchmark-one-way-table th:nth-child(6),
.benchmark-one-way-table th:nth-child(9) {
  width: 8%;
}

.benchmark-one-way-table th:nth-child(11),
.benchmark-one-way-table th:nth-child(12) {
  width: 10%;
}

.benchmark-route-table .table-sort {
  line-height: 1.15;
  white-space: normal;
}

.benchmark-table-section {
  display: grid;
  gap: 8px;
}

.benchmark-table-section + .benchmark-table-section {
  margin-top: 20px;
}

.benchmark-table-heading h3 {
  font-size: 15px;
  margin: 0;
}

.benchmark-route-table tbody .numeric-cell {
  white-space: nowrap;
}

.estimated-metric {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}

.stacked-metric {
  display: grid;
  gap: 2px;
}

.info-symbol {
  color: #57606a;
  display: inline-block;
  font-size: 11px;
  line-height: 1;
}

.numeric-cell {
  text-align: right;
}

.route-pair {
  align-items: center;
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.benchmark-failed {
  color: #b42318;
  font-weight: 700;
}

.benchmark-improvement {
  border-radius: 4px;
  display: inline-flex;
  font-weight: 400;
  padding: 2px 6px;
}

.benchmark-improvement-good {
  background: #DBFCE7;
  border-color: #86efac;
  color: #16a34a;
}

.benchmark-improvement-similar {
  background: #FEF9C2;
  border-color: #fde047;
  color: #ca8a04;
}

.benchmark-improvement-internet {
  background: #FFE2E2;
  border-color: #f9a8d4;
  color: #dc2626;
}

.gate-clock-error {
  border-radius: 4px;
  display: inline-flex;
  font-weight: 400;
  padding: 2px 6px;
}

.gate-clock-error-good {
  background: #DBFCE7;
  color: #16a34a;
}

.gate-clock-error-warning {
  background: #FEF9C2;
  color: #ca8a04;
}

.gate-clock-error-bad {
  background: #FFE2E2;
  color: #dc2626;
}

.benchmark-legend {
  align-items: center;
  color: #57606a;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 10px 18px;
}

.benchmark-legend > span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.legend-swatch {
  border: 1px solid;
  border-radius: 4px;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.empty-state-text {
  color: #57606a;
  margin: 8px 0 0;
}

small {
  display: block;
  color: #57606a;
  margin-top: 4px;
}

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.topbar h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.topbar p {
  margin: 0;
  color: #57606a;
}

.identity {
  display: flex;
  gap: 12px;
  align-items: center;
}

.identity-balance {
  border-right: 1px solid #d8dee8;
  color: #161b22;
  display: grid;
  gap: 1px;
  padding-right: 12px;
  text-align: right;
  text-decoration: none;
}

.identity-balance small {
  font-size: 11px;
  margin: 0;
}

.identity-balance strong {
  font-size: 15px;
}

.identity-balance:hover strong {
  color: #0a58ca;
}

.identity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 32px;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.app-nav a + a {
  margin-left: 0;
}

.grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  gap: 16px;
}

.panel {
  background: white;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
}

.panel h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.primary-panel {
  padding: 20px;
}

.secondary-panel {
  background: #fbfcfe;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-heading h2 {
  margin: 0;
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 18px 0 4px;
}

.empty-state p {
  margin: 0;
  color: #57606a;
}

.auth-panel {
  max-width: 520px;
}

.auth-form,
.session-form {
  display: grid;
  gap: 14px;
}

.auth-subform {
  border-top: 1px solid #d8dee8;
  margin-top: 14px;
  padding-top: 14px;
}

.auth-provider-button {
  margin-top: 14px;
  width: 100%;
}

.auth-divider {
  align-items: center;
  color: #57606a;
  display: grid;
  font-size: 12px;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin: 16px 0;
}

.auth-divider::before,
.auth-divider::after {
  background: #d8dee8;
  content: "";
  height: 1px;
}

.auth-form h2 {
  margin: 0 0 8px;
}

.auth-form p {
  color: #57606a;
  margin: 0;
}

.auth-switch {
  font-size: 14px;
}

.auth-switch a {
  color: #0969da;
  font-weight: 700;
}

.session-form {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: start;
}

.simplified-session-form {
  grid-template-columns: minmax(280px, 640px);
}

.quick-config-choice {
  display: grid;
  gap: 8px;
}

.optional-config-settings {
  border-top: 1px solid #d8dee8;
  padding-top: 12px;
}

.optional-config-settings > summary {
  color: #0969da;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.optional-config-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  padding-top: 16px;
}

.mode-summary {
  align-content: start;
  display: grid;
  gap: 6px;
  min-height: 62px;
}

.mode-summary span {
  color: #161b22;
  font-size: 14px;
  font-weight: 600;
}

.mode-summary strong {
  align-items: center;
  display: flex;
  font-size: 15px;
  min-height: 38px;
}

.field-error {
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 2px 0 0;
}

[aria-invalid="true"] {
  border-color: #d92d20;
}

.form-group {
  display: grid;
  gap: 8px;
}

.client-key-group {
  grid-column: 1 / -1;
}

.route-policy-group {
  grid-column: 1 / -1;
}

.route-policy-group details {
  border-top: 1px solid #d8dee8;
  padding-top: 8px;
}

.route-policy-group summary {
  cursor: pointer;
  font-weight: 600;
}

.policy-option-grid {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding-top: 8px;
}

.compact-checkbox {
  font-size: 13px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-line input {
  width: 16px;
  height: 16px;
}

.input-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.input-action-row button {
  white-space: nowrap;
}

.gate-select-row {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.gate-select-row select {
  height: 38px;
}

.key-instructions {
  background: #fbfcfe;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  padding: 14px;
}

.key-instructions-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.key-instructions h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

.key-instructions p {
  color: #57606a;
  font-size: 13px;
  margin: 0;
}

.key-instruction-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.key-instruction-tab {
  border-color: #c9d1d9;
  background: #ffffff;
  color: #161b22;
  padding: 6px 10px;
}

.key-instruction-tab.active {
  border-color: #1f6feb;
  background: #eaf3ff;
  color: #0a58ca;
}

.key-script-wrap {
  position: relative;
}

.copy-code-button {
  align-items: center;
  background: #21262d;
  border-color: #30363d;
  border-radius: 6px;
  display: flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  z-index: 1;
}

.copy-code-button:hover,
.copy-code-button.copied {
  background: #30363d;
  border-color: #8b949e;
}

.copy-icon {
  height: 16px;
  position: relative;
  width: 16px;
}

.copy-icon::before,
.copy-icon::after {
  border: 1.5px solid #c9d1d9;
  border-radius: 2px;
  content: "";
  height: 10px;
  position: absolute;
  width: 9px;
}

.copy-icon::before {
  left: 2px;
  top: 4px;
}

.copy-icon::after {
  background: #21262d;
  left: 5px;
  top: 1px;
}

.copy-code-button:hover .copy-icon::after,
.copy-code-button.copied .copy-icon::after {
  background: #30363d;
}

.key-script {
  background: #0d1117;
  border-radius: 8px;
  color: #d8dee8;
  margin: 0;
  overflow-x: auto;
  padding: 14px 52px 14px 14px;
}

.key-script code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
}

.syntax-comment {
  color: #8b949e;
}

.syntax-command {
  color: #d2a8ff;
}

.syntax-string {
  color: #a5d6ff;
}

.syntax-variable {
  color: #ffa657;
}

.syntax-operator {
  color: #ff7b72;
}

.key-docs a {
  color: #0969da;
  font-weight: 700;
}

.panel-actions {
  margin-top: 14px;
}

.account-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.8fr);
}

.account-card {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.account-card h3 {
  font-size: 15px;
  margin: 0;
}

.account-card small {
  color: #57606a;
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.billing-terms {
  align-items: center;
  background: #f6f8fa;
  border: 1px solid #d8dee8;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(130px, 0.5fr) minmax(130px, 0.5fr) minmax(280px, 2fr);
  margin-top: 14px;
  padding: 14px;
}

.billing-terms div {
  display: grid;
  gap: 3px;
}

.billing-terms small {
  color: #57606a;
}

.billing-terms p {
  color: #57606a;
  margin: 0;
}

.balance-value {
  font-size: 24px;
}

.wallet-row {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.deposit-wallet {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 160px minmax(0, 1fr);
}

.deposit-qr {
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #d8dee8;
  padding: 8px;
  width: 160px;
}

.deposit-qr svg {
  display: block;
  height: 100%;
  width: 100%;
}

.deposit-details {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.deposit-details strong {
  margin-bottom: 4px;
}

.inline-form {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.billing-ledger {
  border-top: 1px solid #d8dee8;
  display: grid;
  gap: 8px;
  margin-top: 16px;
  min-width: 0;
  padding-top: 14px;
}

.billing-ledger > * {
  min-width: 0;
}

.billing-ledger h3 {
  font-size: 15px;
  margin: 0;
}

.billing-ledger-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.billing-ledger-row > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.billing-ledger-row small {
  color: #57606a;
  display: block;
  overflow-wrap: anywhere;
}

.billing-ledger .mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.amount-credit { color: #1a7f37; }
.amount-debit { color: #cf222e; }

.withdrawal-form {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(130px, 0.45fr) minmax(300px, 1.55fr) auto;
}

.support-contact,
.compact-copy {
  color: #57606a;
  font-size: 13px;
  margin: 14px 0 0;
}

.admin-metric-strip {
  border-bottom: 1px solid #d8dee8;
  border-top: 1px solid #d8dee8;
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.admin-metric-strip > div {
  border-right: 1px solid #d8dee8;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
}

.admin-metric-strip > div:last-child {
  border-right: 0;
}

.admin-metric-strip small,
.admin-toolbar small,
[data-admin-config-row] small {
  color: #57606a;
  display: block;
  overflow-wrap: anywhere;
}

.admin-metric-strip strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.admin-toolbar,
.admin-filter-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-toolbar label,
.admin-filter-row label {
  min-width: min(320px, 100%);
}

.admin-filter-row label:first-child {
  flex: 1 1 320px;
}

.admin-filter-row label:nth-child(2) {
  flex: 0 1 220px;
  min-width: 180px;
}

.segmented-control {
  border: 1px solid #c9d1d9;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}

.segmented-control button {
  border: 0;
  border-radius: 0;
  margin: 0;
  min-height: 38px;
}

.segmented-control button + button {
  border-left: 1px solid #c9d1d9;
}

.segmented-control button.active {
  background: #1f6feb;
  color: #ffffff;
}

.admin-chart-wrap {
  border-top: 1px solid #d8dee8;
  padding-top: 14px;
}

.admin-chart-empty {
  align-items: center;
  border: 1px dashed #aab4c3;
  color: #57606a;
  display: flex;
  justify-content: center;
  min-height: 220px;
  padding: 20px;
  text-align: center;
}

.admin-chart-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.admin-chart-legend span::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  width: 20px;
}

.admin-chart-legend strong {
  margin-left: auto;
}

.admin-chart-legend .outbound,
.chart-line.outbound {
  color: #0969da;
  stroke: #0969da;
}

.admin-chart-legend .inbound,
.chart-line.inbound {
  color: #1a7f37;
  stroke: #1a7f37;
}

.admin-chart-legend .dropped,
.chart-line.dropped {
  color: #cf222e;
  stroke: #cf222e;
}

.admin-traffic-chart {
  display: block;
  height: auto;
  max-height: 300px;
  overflow: visible;
  width: 100%;
}

.chart-axis {
  stroke: #8c959f;
  stroke-width: 1;
}

.chart-grid {
  stroke: #d8dee8;
  stroke-dasharray: 4 5;
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.chart-label {
  fill: #57606a;
  font-size: 12px;
}

.status-badge {
  background: #eef1f4;
  border: 1px solid #aab4c3;
  border-radius: 4px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  text-transform: uppercase;
}

.status-badge.confirmed {
  background: #dafbe1;
  border-color: #4ac26b;
  color: #116329;
}

.status-badge.pending {
  background: #fff8c5;
  border-color: #d4a72c;
  color: #633c01;
}

.status-badge.failed {
  background: #ffebe9;
  border-color: #ff8182;
  color: #a40e26;
}

[data-admin-config-row] {
  cursor: pointer;
}

[data-admin-config-row]:hover {
  background: #f1f6fc;
}

.admin-quota-feedback {
  background: #eef6ff;
  border: 1px solid #9ec5fe;
  border-radius: 6px;
  color: #173b67;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.admin-quota-summary {
  display: grid;
  gap: 4px;
  min-width: 170px;
}

.admin-quota-summary button {
  font-size: 12px;
  justify-self: start;
  margin-top: 4px;
  padding: 5px 8px;
}

.admin-quota-editor {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(96px, 1fr) auto;
  min-width: 190px;
}

.admin-quota-editor label {
  min-width: 0;
}

.admin-quota-editor input {
  min-width: 0;
  width: 100%;
}

.admin-quota-editor button {
  font-size: 12px;
  margin: 0;
  padding: 5px 8px;
}

.qr-overlay {
  align-items: center;
  background: rgba(22, 27, 34, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}

.qr-dialog {
  background: #ffffff;
  border-radius: 8px;
  max-width: 480px;
  padding: 16px;
  width: min(100%, 480px);
}

.config-qr {
  margin: 12px auto;
  max-width: 420px;
}

.config-qr svg {
  display: block;
  height: auto;
  width: 100%;
}

.session-form button {
  align-self: end;
}

.session-form > button[type="submit"] {
  justify-self: start;
}

.configure-step,
.review-step {
  display: grid;
  gap: 16px;
}

.config-result-state {
  display: grid;
  gap: 16px;
}

.config-provisioning,
.config-result-message {
  align-items: center;
  border: 1px solid #d8dee8;
  display: flex;
  gap: 16px;
  min-height: 112px;
  padding: 18px;
}

.config-provisioning strong,
.config-result-message strong {
  font-size: 16px;
}

.config-provisioning p,
.config-result-message p,
.created-config-actions p {
  color: #57606a;
  margin: 5px 0 0;
}

.config-result-error {
  border-color: #d92d20;
}

.config-payment-panel {
  align-items: center;
  background: #f3f8f5;
  border: 1px solid #b8d7c3;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, auto) 1fr;
  padding: 14px;
}

.config-payment-panel div {
  display: grid;
  gap: 3px;
}

.config-payment-panel .config-payment-copy {
  gap: 7px;
}

.config-payment-panel strong {
  font-size: 20px;
}

.config-payment-panel p,
.config-payment-error p {
  margin: 0;
}

.config-payment-error {
  align-items: start;
  background: #fff1f3;
  border: 1px solid #f1aeb8;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.loading-spinner {
  animation: loading-spin 0.8s linear infinite;
  border: 3px solid #d8dee8;
  border-radius: 50%;
  border-top-color: #1f6feb;
  flex: 0 0 30px;
  height: 30px;
  width: 30px;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.created-config-result {
  align-items: center;
  border: 1px solid #d8dee8;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(240px, 420px) minmax(260px, 1fr);
  padding: 18px;
}

.created-config-qr {
  aspect-ratio: 1;
  background: #ffffff;
  border: 1px solid #d8dee8;
  padding: 8px;
}

.created-config-qr svg {
  display: block;
  height: 100%;
  width: 100%;
}

.created-config-actions {
  align-items: start;
  display: grid;
  gap: 12px;
}

.created-config-actions h3 {
  font-size: 18px;
  margin: 0;
}

.created-config-actions button {
  margin: 0;
  width: 100%;
}

.step-caption {
  color: #57606a;
  margin: 0;
}

.review-card,
.policy-panel {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  padding: 16px;
}

.review-card h3,
.policy-panel h3 {
  font-size: 16px;
  margin: 0 0 12px;
}

.route-overview {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px 0 18px;
}

.summary-pill {
  background: #f6f8fa;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 132px;
  padding: 10px 12px;
  text-align: center;
}

.summary-pill span,
.review-field span {
  color: #57606a;
  font-size: 12px;
  font-weight: 600;
}

.summary-pill strong,
.review-field strong {
  overflow-wrap: anywhere;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

.route-arrow {
  color: #1f6feb;
  font-weight: 700;
}

.review-grid {
  border-top: 1px solid #d8dee8;
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.review-row {
  display: grid;
  gap: 14px;
}

.review-row-primary {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.review-row-secondary {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.review-field {
  display: grid;
  gap: 4px;
}

.policy-panel {
  border-color: #b7e4c7;
  background: #f6fff9;
}

.policy-panel p {
  margin: 0;
}

.full-tunnel-alert {
  background: #fff8c5;
  border: 1px solid #d4a72c;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.full-tunnel-alert strong {
  color: #633c01;
}

.full-tunnel-alert p {
  color: #3b2300;
  margin: 0;
}

.client-key-notice {
  background: #fff8c5;
  border: 1px solid #d4a72c;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.client-key-notice strong {
  color: #633c01;
}

.client-key-notice p {
  color: #3b2300;
  margin: 0;
}

.notice-code-wrap {
  position: relative;
}

.notice-copy-button {
  background: #fffdf0;
  border-color: #d4a72c;
  height: 24px;
  right: 6px;
  top: 5px;
  width: 24px;
}

.notice-copy-button:hover,
.notice-copy-button.copied {
  background: #fff8c5;
  border-color: #9a6700;
}

.notice-copy-button .copy-icon {
  height: 13px;
  width: 13px;
}

.notice-copy-button .copy-icon::before,
.notice-copy-button .copy-icon::after {
  border-color: #633c01;
  height: 8px;
  width: 7px;
}

.notice-copy-button .copy-icon::before {
  left: 2px;
  top: 4px;
}

.notice-copy-button .copy-icon::after {
  background: #fffdf0;
  left: 5px;
  top: 1px;
}

.notice-copy-button:hover .copy-icon::after,
.notice-copy-button.copied .copy-icon::after {
  background: #fff8c5;
}

.client-key-notice code {
  background: #ffffff;
  border: 1px solid #c9d1d9;
  border-radius: 6px;
  color: #161b22;
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  overflow-x: auto;
  padding: 8px 40px 8px 10px;
  white-space: nowrap;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.ok {
  color: #1a7f37;
  font-weight: 700;
}

.bad {
  color: #cf222e;
  font-weight: 700;
}

.muted {
  color: #57606a;
}

.empty-marker {
  color: #57606a;
  font-weight: 600;
}

.event-log {
  min-height: 80px;
  max-height: 280px;
  overflow: auto;
  background: #0d1117;
  color: #d8dee8;
  border-radius: 8px;
  padding: 14px;
}

@media (max-width: 860px) {
  .shell {
    padding: 18px;
  }

  .topbar,
  .grid,
  .account-grid,
  .billing-terms,
  .admin-metric-strip,
  .gate-select-row,
  .optional-config-grid,
  .created-config-result,
  .inline-form,
  .withdrawal-form,
  .deposit-wallet,
  .review-grid,
  .review-row,
  .session-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .admin-metric-strip > div {
    border-bottom: 1px solid #d8dee8;
    border-right: 0;
  }

  .admin-metric-strip > div:last-child {
    border-bottom: 0;
  }

  .admin-toolbar,
  .admin-filter-row {
    align-items: stretch;
    display: grid;
  }

  .admin-toolbar label,
  .admin-filter-row label {
    min-width: 0;
  }

  .segmented-control button {
    flex: 1 1 0;
  }

  .admin-chart-legend strong {
    margin-left: 0;
    width: 100%;
  }

  .identity {
    display: flex;
    flex-wrap: wrap;
  }

  .identity-balance {
    margin-right: auto;
    text-align: left;
  }

  .deposit-qr {
    width: min(220px, 100%);
  }

  .form-actions {
    display: grid;
  }

  .key-instructions-header {
    display: grid;
  }

  .panel-heading {
    align-items: stretch;
    display: grid;
  }
}