:root {
  --bg: #d9f3ff;
  --surface: rgb(255 255 255 / 68%);
  --surface-subtle: rgb(239 250 255 / 62%);
  --sidebar: rgb(11 91 148 / 82%);
  --sidebar-hover: rgb(116 212 239 / 25%);
  --sidebar-text: #effbff;
  --text: #163b55;
  --muted: #4d7088;
  --faint: #55768a;
  --border: rgb(255 255 255 / 82%);
  --border-strong: rgb(68 147 193 / 42%);
  --accent: #078ebd;
  --accent-hover: #0579a7;
  --accent-soft: rgb(167 231 247 / 42%);
  --success: #17855d;
  --success-soft: rgb(208 246 225 / 76%);
  --warning: #a96213;
  --warning-soft: rgb(255 238 197 / 82%);
  --danger: #b63d4f;
  --danger-soft: rgb(255 221 226 / 82%);
  --info: #2473a4;
  --info-soft: rgb(211 236 252 / 82%);
  --shadow-pane: 0 22px 50px rgb(28 107 153 / 16%), 0 4px 12px rgb(28 107 153 / 11%), inset 0 1px 0 rgb(255 255 255 / 94%), inset 0 -1px 0 rgb(68 147 193 / 16%);
  --shadow-modal: 0 30px 80px rgb(9 63 104 / 30%), 0 8px 24px rgb(9 63 104 / 18%), inset 0 1px 0 rgb(255 255 255 / 98%);
  --radius: 14px;
  --sidebar-width: 252px;
  font-family: "Segoe UI", Tahoma, "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #8fd6f3;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgb(255 255 255 / 86%) 0 7%, transparent 25%),
    radial-gradient(circle at 20% 72%, rgb(205 250 232 / 74%) 0 9%, transparent 34%),
    linear-gradient(180deg, #7fcaf0 0%, #c4edfb 34%, #effcff 72%, #d6f3e5 100%);
  background-attachment: fixed;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgb(5 126 179 / 30%);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: #fff;
  background: var(--accent);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  overflow-y: auto;
  color: var(--sidebar-text);
  background: var(--sidebar);
}

.brand {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 11px;
  padding: 18px 17px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 5px;
  color: #fff;
  background: #1f7d6e;
  font-size: 18px;
  font-weight: 750;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.brand-copy span {
  margin-top: 3px;
  color: #98a8a2;
  font-size: 12px;
}

.sidebar-close {
  display: none;
  margin-left: auto;
  color: var(--sidebar-text);
}

.nav-list {
  display: grid;
  gap: 4px;
  padding: 19px 12px;
}

.nav-item {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 5px;
  color: #aab7b2;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.nav-item:hover {
  color: #fff;
  background: var(--sidebar-hover);
}

.nav-item.is-active {
  color: #fff;
  background: #2b3934;
  box-shadow: inset 3px 0 0 #3aa792;
}

.nav-item svg,
.icon-button svg,
.button svg,
.action-button svg,
.empty-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nav-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 560;
}

.sidebar-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 17px 20px 20px;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.connection-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cad5d1;
  font-size: 12px;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--faint);
}

.status-dot.is-online {
  background: #49b879;
  box-shadow: 0 0 0 3px rgb(73 184 121 / 13%);
}

.status-dot.is-offline {
  background: #d85c5c;
}

.status-dot.is-partial {
  background: #e0a54a;
}

.status-dot.is-muted {
  background: #7f8e88;
}

.version-label {
  color: #74827d;
  font-size: 11px;
}

.workspace {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(18px, 3vw, 38px);
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(10px);
}

.topbar-title,
.topbar-actions {
  display: flex;
  align-items: center;
}

.topbar-title {
  min-width: 0;
  gap: 12px;
}

.topbar-actions {
  flex: 0 0 auto;
  gap: 11px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
}

h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.last-updated {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.icon-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface-subtle);
}

.icon-button:disabled,
.button:disabled,
.action-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.menu-button {
  display: none;
}

#main-content {
  width: min(100%, 1520px);
  margin: 0 auto;
  padding: 26px clamp(18px, 3vw, 38px) 48px;
}

.page-stack {
  display: grid;
  gap: 22px;
}

.page-loading {
  display: flex;
  min-height: 400px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

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

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.traffic-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card {
  min-width: 0;
  padding: 17px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stat-label {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-soft);
}

.stat-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.stat-value {
  display: block;
  margin-top: 12px;
  overflow: hidden;
  color: var(--text);
  font-size: 26px;
  font-weight: 720;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-meta {
  min-height: 17px;
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 12px;
}

.metric-positive {
  color: var(--success);
}

.metric-negative {
  color: var(--danger);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
  gap: 16px;
}

.panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.panel-header {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.panel-title-group {
  min-width: 0;
}

.panel-title-group h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-title-group p {
  margin: 3px 0 0;
  color: var(--faint);
  font-size: 12px;
}

.panel-body {
  min-width: 0;
  padding: 16px;
}

.chart-wrap {
  position: relative;
  min-height: 250px;
}

.chart-canvas {
  display: block;
  width: 100%;
  height: 250px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 12px;
}

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

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.toolbar-start,
.toolbar-end {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.button svg {
  width: 16px;
  height: 16px;
}

.button-primary {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.button-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.button-secondary {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.button-secondary:hover {
  border-color: #adb9b3;
  background: var(--surface-subtle);
}

.button-danger {
  border-color: var(--danger);
  color: #fff;
  background: var(--danger);
}

.button-danger:hover {
  border-color: #932f2f;
  background: #932f2f;
}

.button-quiet {
  border-color: transparent;
  color: var(--accent);
  background: transparent;
}

.button-quiet:hover {
  background: var(--accent-soft);
}

.search-box {
  position: relative;
  width: min(260px, 100%);
}

.search-box svg {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--faint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 7px 10px 7px 34px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface);
  font-size: 13px;
}

.search-input::placeholder {
  color: #9aa49f;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-subtle);
}

.segment {
  min-width: 54px;
  min-height: 29px;
  padding: 5px 9px;
  border: 0;
  border-radius: 3px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.segment:hover {
  color: var(--text);
}

.segment.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(31 44 38 / 10%);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: auto;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  color: var(--faint);
  background: #fafbfa;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.data-table td {
  color: #35413d;
  font-size: 13px;
}

.data-table tbody tr:hover {
  background: #fafcfb;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.cell-primary,
.cell-secondary,
.mono {
  display: block;
}

.cell-primary {
  max-width: 340px;
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-secondary {
  max-width: 340px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono {
  max-width: 330px;
  overflow: hidden;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions-cell {
  width: 1%;
  white-space: nowrap;
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.action-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.action-button:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}

.action-button.is-danger:hover {
  border-color: #efc4c4;
  color: var(--danger);
  background: var(--danger-soft);
}

.action-button.is-accent:hover {
  border-color: #b6ddd4;
  color: var(--accent);
  background: var(--accent-soft);
}

.action-button .spinner {
  width: 14px;
  height: 14px;
}

.badge {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.badge-success {
  border-color: #c9e4d3;
  color: var(--success);
  background: var(--success-soft);
}

.badge-warning {
  border-color: #eed6aa;
  color: var(--warning);
  background: var(--warning-soft);
}

.badge-danger {
  border-color: #efcaca;
  color: var(--danger);
  background: var(--danger-soft);
}

.badge-info {
  border-color: #ccdfec;
  color: var(--info);
  background: var(--info-soft);
}

.badge-muted {
  border-color: var(--border);
  color: var(--muted);
  background: #f0f3f1;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  vertical-align: middle;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: #bcc5c1;
  cursor: pointer;
  transition: background 160ms ease;
}

.toggle-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  content: "";
  transition: transform 160ms ease;
}

.toggle input:checked + .toggle-track {
  background: var(--accent);
}

.toggle input:checked + .toggle-track::after {
  transform: translateX(16px);
}

.toggle input:focus-visible + .toggle-track {
  outline: 3px solid rgb(19 116 102 / 20%);
  outline-offset: 2px;
}

.progress-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(100px, 2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.progress-row + .progress-row {
  border-top: 1px solid var(--border);
}

.progress-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  appearance: none;
  background: #e9eeeb;
}

.traffic-progress::-webkit-progress-bar {
  border-radius: 4px;
  background: #e9eeeb;
}

.traffic-progress::-webkit-progress-value {
  border-radius: 4px;
  background: var(--accent);
}

.traffic-progress::-moz-progress-bar {
  border-radius: 4px;
  background: var(--accent);
}

.deployment-error {
  max-width: 280px;
  white-space: normal;
}

.progress-number {
  min-width: 70px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.empty-state {
  display: grid;
  min-height: 230px;
  place-items: center;
  padding: 32px 18px;
  text-align: center;
}

.empty-state.compact {
  min-height: 150px;
}

.empty-state > div {
  max-width: 360px;
}

.empty-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--faint);
  background: var(--surface-subtle);
}

.empty-state h3 {
  margin-top: 12px;
  font-size: 14px;
}

.empty-state p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.empty-state .button {
  margin-top: 14px;
}

.notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #edcccc;
  border-radius: var(--radius);
  color: #762c2c;
  background: #fff5f5;
  font-size: 13px;
  line-height: 1.55;
}

.notice strong {
  display: block;
  margin-bottom: 2px;
}

.notice .button {
  flex: 0 0 auto;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.skeleton-block,
.skeleton-line {
  overflow: hidden;
  background: #e9edeb;
}

.skeleton-block::after,
.skeleton-line::after {
  display: block;
  width: 35%;
  height: 100%;
  background: rgb(255 255 255 / 55%);
  content: "";
  animation: skeleton-move 1.15s ease-in-out infinite;
}

.skeleton-block {
  height: 118px;
  border-radius: var(--radius);
}

.skeleton-line {
  height: 12px;
  border-radius: 3px;
}

@keyframes skeleton-move {
  from { transform: translateX(-120%); }
  to { transform: translateX(330%); }
}

.modal,
.confirm-dialog {
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}

.modal {
  width: min(610px, calc(100vw - 28px));
}

.modal::backdrop,
.confirm-dialog::backdrop {
  background: rgb(15 22 19 / 54%);
  backdrop-filter: blur(2px);
}

.modal > form {
  display: flex;
  max-height: calc(100vh - 30px);
  flex-direction: column;
}

.modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  overflow-y: auto;
  padding: 20px;
}

.modal-footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  background: #fafbfa;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.form-field.is-wide {
  grid-column: 1 / -1;
}

.form-label {
  color: #38433f;
  font-size: 12px;
  font-weight: 700;
}

.required-mark {
  margin-left: 3px;
  color: var(--danger);
}

.form-control {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface);
  font-size: 13px;
}

textarea.form-control {
  min-height: 132px;
  resize: vertical;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

textarea.server-description-input {
  min-height: 84px;
  font-family: inherit;
  font-size: 13px;
}

.server-description {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-control:hover {
  border-color: #aeb9b4;
}

.form-control:focus {
  border-color: var(--accent);
  outline: 3px solid rgb(19 116 102 / 12%);
}

.field-hint {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
}

input[type="file"].form-control {
  min-height: 44px;
  padding: 5px 8px;
  cursor: pointer;
}

input[type="file"].form-control::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid rgb(39 132 178 / 42%);
  border-radius: 7px;
  color: #174f6c;
  background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(193 235 248 / 86%));
  box-shadow: inset 0 1px 0 #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

input[type="file"].form-control:hover::file-selector-button {
  border-color: rgb(25 117 163 / 60%);
  background: linear-gradient(180deg, #fff, rgb(173 226 244 / 92%));
}

.tls-upload-guide {
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid #159ac6;
  background: rgb(204 240 251 / 42%);
}

.tls-upload-guide p {
  margin: 0;
  color: #526f80;
  font-size: 11px;
  line-height: 1.55;
}

.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.check-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #38433f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 620;
}

.check-field input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.form-error {
  margin: 14px 0 0;
  padding: 9px 11px;
  border: 1px solid #efcaca;
  border-radius: 5px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 12px;
}

.confirm-dialog {
  width: min(410px, calc(100vw - 28px));
}

.confirm-dialog form {
  padding: 24px;
  text-align: center;
}

.confirm-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 50%;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 20px;
  font-weight: 800;
}

.confirm-dialog p {
  margin: 9px 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.toast-region {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(360px, calc(100vw - 28px));
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(28 39 34 / 14%);
  pointer-events: auto;
  animation: toast-in 180ms ease-out;
}

.toast.is-success {
  border-left-color: var(--success);
}

.toast.is-error {
  border-left-color: var(--danger);
}

.toast.is-warning {
  border-left-color: var(--warning);
}

.toast-mark {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.toast.is-success .toast-mark { background: var(--success); }
.toast.is-error .toast-mark { background: var(--danger); }
.toast.is-warning .toast-mark { background: var(--warning); }

.toast-content {
  min-width: 0;
}

.toast-content strong,
.toast-content span {
  display: block;
}

.toast-content strong {
  font-size: 12px;
}

.toast-content span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sidebar-scrim {
  display: none;
}

/* Aero visual layer */
.aero-atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aero-droplet {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgb(255 255 255 / 96%) 0 7%, rgb(255 255 255 / 38%) 16%, transparent 42%),
    linear-gradient(145deg, rgb(229 251 255 / 35%), rgb(65 180 223 / 10%));
  box-shadow: 0 10px 25px rgb(20 105 158 / 11%), inset 5px 6px 11px rgb(255 255 255 / 36%), inset -6px -8px 12px rgb(27 128 181 / 12%);
  animation: droplet-float 7s ease-in-out infinite alternate;
}

.droplet-one {
  top: 20vh;
  left: calc(var(--sidebar-width) + 6vw);
  width: 48px;
}

.droplet-two {
  top: 48vh;
  right: 7vw;
  width: 64px;
  animation-delay: -2.5s;
}

.droplet-three {
  right: 38vw;
  bottom: 8vh;
  width: 34px;
  animation-delay: -5s;
}

@keyframes droplet-float {
  from { transform: translate3d(0, -4px, 0); }
  to { transform: translate3d(5px, 7px, 0); }
}

body::before,
body::after {
  position: fixed;
  z-index: 0;
  display: block;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgb(255 255 255 / 94%) 0 5%, rgb(255 255 255 / 42%) 13%, transparent 39%),
    linear-gradient(145deg, rgb(255 255 255 / 30%), rgb(88 200 235 / 8%));
  box-shadow:
    0 20px 55px rgb(25 111 164 / 14%),
    inset 10px 12px 24px rgb(255 255 255 / 38%),
    inset -12px -16px 24px rgb(35 137 190 / 13%);
  content: "";
  pointer-events: none;
  animation: aero-drift 9s ease-in-out infinite alternate;
}

body::before {
  top: 112px;
  right: 4.5vw;
  width: clamp(150px, 16vw, 235px);
  aspect-ratio: 1;
}

body::after {
  right: 24vw;
  bottom: 5vh;
  width: clamp(76px, 8vw, 116px);
  aspect-ratio: 1;
  animation-delay: -4s;
}

@keyframes aero-drift {
  from { transform: translate3d(0, -5px, 0); }
  to { transform: translate3d(9px, 9px, 0); }
}

.app-shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.sidebar {
  overflow-x: hidden;
  border-right: 1px solid rgb(255 255 255 / 54%);
  background:
    radial-gradient(circle at 12% 8%, rgb(132 224 247 / 38%), transparent 28%),
    linear-gradient(180deg, rgb(14 112 174 / 88%) 0%, rgb(7 123 166 / 78%) 48%, rgb(15 76 126 / 91%) 100%);
  box-shadow: 10px 0 36px rgb(14 77 119 / 22%), inset -1px 0 0 rgb(17 86 131 / 32%), inset 1px 0 0 rgb(255 255 255 / 35%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}

.sidebar::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 12%), transparent 18%, transparent 80%, rgb(3 47 89 / 16%)),
    linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 20%);
  content: "";
  pointer-events: none;
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.brand {
  min-height: 86px;
  border-bottom-color: rgb(255 255 255 / 27%);
  background: linear-gradient(180deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 3%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-color: rgb(255 255 255 / 72%);
  border-radius: 12px;
  background: linear-gradient(180deg, #67d9ec 0%, #119cc8 48%, #0876ad 100%);
  box-shadow: 0 6px 16px rgb(0 54 99 / 25%), inset 0 2px 0 rgb(255 255 255 / 72%), inset 0 -2px 0 rgb(0 63 111 / 20%);
  text-shadow: 0 1px 2px rgb(0 57 99 / 40%);
}

.brand-copy strong {
  text-shadow: 0 1px 2px rgb(0 47 83 / 44%);
}

.brand-copy span {
  color: rgb(226 248 255 / 78%);
}

.nav-list {
  gap: 7px;
  padding: 20px 12px;
}

.nav-item {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgb(229 248 255 / 76%);
  text-shadow: 0 1px 1px rgb(0 54 90 / 30%);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.nav-item:hover {
  border-color: rgb(255 255 255 / 32%);
  background: linear-gradient(180deg, rgb(205 247 255 / 29%), rgb(116 211 237 / 17%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
  transform: translateX(2px);
}

.nav-item.is-active {
  border-color: rgb(255 255 255 / 62%);
  color: #fff;
  background: linear-gradient(180deg, rgb(214 251 255 / 46%), rgb(70 188 224 / 32%) 52%, rgb(16 124 176 / 34%));
  box-shadow: 0 5px 16px rgb(0 62 105 / 17%), inset 0 1px 0 rgb(255 255 255 / 72%), inset 0 -1px 0 rgb(2 73 119 / 24%);
}

.sidebar-footer {
  margin: 0 12px 12px;
  padding: 14px 12px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 12px;
  background: rgb(2 55 101 / 16%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
}

.connection-state {
  color: rgb(240 251 255 / 88%);
}

.version-label {
  color: rgb(213 240 250 / 58%);
}

.status-dot.is-online {
  background: #66e38e;
  box-shadow: 0 0 0 3px rgb(93 234 144 / 18%), 0 0 10px rgb(93 234 144 / 78%);
}

.status-dot.is-offline {
  background: #ff7180;
  box-shadow: 0 0 9px rgb(255 88 108 / 55%);
}

.status-dot.is-partial {
  background: #ffd26b;
  box-shadow: 0 0 9px rgb(255 206 87 / 54%);
}

.workspace {
  position: relative;
}

.topbar {
  min-height: 86px;
  border-bottom-color: rgb(255 255 255 / 78%);
  background: linear-gradient(180deg, rgb(255 255 255 / 74%), rgb(238 250 255 / 54%));
  box-shadow: 0 8px 28px rgb(37 116 158 / 12%), inset 0 1px 0 rgb(255 255 255 / 98%), inset 0 -1px 0 rgb(72 150 191 / 14%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

.eyebrow {
  color: #5486a4;
  text-shadow: 0 1px 0 rgb(255 255 255 / 90%);
}

h1,
h2,
h3 {
  color: #123b58;
  text-shadow: 0 1px 0 rgb(255 255 255 / 88%);
}

.last-updated {
  color: #52758b;
}

.icon-button {
  border-color: rgb(255 255 255 / 46%);
  border-radius: 10px;
  color: #426f8a;
  background: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(220 244 253 / 31%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.icon-button:hover {
  border-color: rgb(66 151 198 / 44%);
  color: #075f92;
  background: linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(183 230 247 / 60%));
  box-shadow: 0 5px 13px rgb(31 110 157 / 15%), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

#main-content {
  position: relative;
  padding-top: 30px;
}

.page-stack {
  gap: 20px;
}

.page-loading {
  color: #376884;
  text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
}

.spinner {
  border-color: rgb(7 126 176 / 38%);
  border-top-color: #078ebd;
}

.stats-grid {
  gap: 0;
  overflow: hidden;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(255 255 255 / 72%), rgb(225 246 254 / 51%));
  box-shadow: var(--shadow-pane);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}

.stat-card {
  min-height: 116px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  transition: background 150ms ease, transform 150ms ease;
}

.stat-card + .stat-card {
  border-left: 1px solid rgb(75 155 194 / 17%);
}

.stat-card:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 51%), rgb(174 229 245 / 18%));
  transform: translateY(-1px);
}

.stat-label {
  color: #52758a;
}

.stat-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border: 1px solid rgb(255 255 255 / 86%);
  border-radius: 11px;
  color: #0879a8;
  background: linear-gradient(180deg, rgb(219 251 255 / 92%), rgb(104 207 233 / 52%));
  box-shadow: 0 5px 12px rgb(26 119 162 / 13%), inset 0 2px 0 rgb(255 255 255 / 92%), inset 0 -1px 0 rgb(23 134 178 / 18%);
}

.stat-value {
  color: #0e4869;
  text-shadow: 0 1px 0 rgb(255 255 255 / 95%);
}

.stat-meta {
  color: #4f7084;
}

.panel {
  overflow: hidden;
  border-color: rgb(255 255 255 / 88%);
  border-radius: 18px;
  outline: 1px solid rgb(55 142 188 / 13%);
  outline-offset: -2px;
  background: linear-gradient(145deg, rgb(255 255 255 / 73%), rgb(227 247 254 / 52%));
  box-shadow: var(--shadow-pane);
  -webkit-backdrop-filter: blur(20px) saturate(128%);
  backdrop-filter: blur(20px) saturate(128%);
}

.panel-header {
  position: relative;
  min-height: 62px;
  border-bottom-color: rgb(63 150 192 / 20%);
  background: linear-gradient(180deg, rgb(255 255 255 / 69%), rgb(207 239 250 / 34%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 96%);
}

.panel-header::after {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgb(255 255 255 / 88%);
  content: "";
  pointer-events: none;
}

.panel-title-group p,
.chart-legend,
.progress-number {
  color: #4f7084;
}

.chart-wrap {
  border-radius: 13px;
  background: linear-gradient(180deg, rgb(255 255 255 / 34%), rgb(213 243 252 / 17%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
}

.legend-dot {
  background: linear-gradient(180deg, #39c6dc, #057cad);
  box-shadow: 0 0 7px rgb(23 159 196 / 30%);
}

.button {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 77%), 0 3px 8px rgb(35 109 151 / 10%);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.button::before,
.action-button::before {
  position: absolute;
  inset: 1px 2px auto;
  height: 42%;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg, rgb(255 255 255 / 60%), transparent);
  content: "";
  pointer-events: none;
}

.button:hover:not(:disabled),
.action-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button-primary {
  border-color: #0477a8;
  background: linear-gradient(180deg, #3dc8df 0%, #0a9bc8 47%, #047bab 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 52%), inset 0 -2px 0 rgb(0 76 121 / 18%), 0 5px 12px rgb(13 118 165 / 22%);
  text-shadow: 0 1px 1px rgb(0 64 100 / 38%);
}

.button-primary:hover {
  border-color: #026d9c;
  background: linear-gradient(180deg, #61d7e7 0%, #14a8d2 47%, #0582b5 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 58%), 0 7px 16px rgb(13 118 165 / 27%);
}

.button-secondary {
  border-color: rgb(63 145 190 / 42%);
  color: #244f69;
  background: linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(205 238 249 / 62%));
}

.button-secondary:hover {
  border-color: rgb(27 126 177 / 52%);
  background: linear-gradient(180deg, #fff, rgb(186 229 246 / 78%));
}

.button-danger {
  border-color: #a92c43;
  background: linear-gradient(180deg, #ed7182 0%, #c8475b 50%, #aa3048 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 45%), 0 5px 12px rgb(152 35 55 / 18%);
}

.button-danger:hover {
  border-color: #96273b;
  background: linear-gradient(180deg, #f38795 0%, #d95467 50%, #b9364d 100%);
}

.button-quiet {
  box-shadow: none;
}

.button-quiet:hover {
  background: rgb(146 220 240 / 28%);
}

.search-input,
.form-control {
  border-color: rgb(61 145 190 / 39%);
  border-radius: 9px;
  color: #183c54;
  background: linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(239 250 254 / 72%));
  box-shadow: inset 0 2px 4px rgb(35 101 138 / 8%), 0 1px 0 rgb(255 255 255 / 77%);
}

.search-input:hover,
.form-control:hover {
  border-color: rgb(32 128 178 / 53%);
}

.search-input:focus,
.form-control:focus {
  border-color: #159ac6;
  outline: 3px solid rgb(10 151 199 / 16%);
  background: rgb(255 255 255 / 94%);
  box-shadow: inset 0 2px 4px rgb(35 101 138 / 7%), 0 0 0 1px rgb(255 255 255 / 85%);
}

.search-box svg {
  stroke: #5a87a0;
}

.search-input::placeholder {
  color: #5c7d90;
}

.segmented {
  border-color: rgb(255 255 255 / 82%);
  border-radius: 10px;
  background: rgb(183 226 242 / 38%);
  box-shadow: inset 0 2px 5px rgb(27 104 146 / 9%), 0 1px 0 rgb(255 255 255 / 78%);
}

.segment {
  border-radius: 7px;
  color: #4b7188;
}

.segment:hover {
  color: #0d567e;
  background: rgb(255 255 255 / 32%);
}

.segment.is-active {
  color: #0a5077;
  background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(199 236 249 / 76%));
  box-shadow: 0 3px 8px rgb(40 115 154 / 13%), inset 0 1px 0 #fff;
}

.table-wrap {
  scrollbar-color: rgb(76 162 201 / 54%) rgb(222 244 251 / 56%);
}

.data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  border-bottom-color: rgb(57 139 180 / 15%);
}

.data-table th {
  color: #426b83;
  background: linear-gradient(180deg, rgb(255 255 255 / 72%), rgb(198 235 248 / 47%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
}

.data-table td {
  color: #2d5065;
  background: rgb(255 255 255 / 9%);
}

.data-table tbody tr:hover td {
  background: rgb(255 255 255 / 47%);
}

.cell-primary,
.mono {
  color: #173f59;
}

.cell-secondary {
  color: #4f7185;
}

.action-button {
  position: relative;
  overflow: hidden;
  border-color: rgb(255 255 255 / 32%);
  border-radius: 9px;
  color: #4e7891;
  background: linear-gradient(180deg, rgb(255 255 255 / 46%), rgb(197 235 247 / 27%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.action-button:hover {
  border-color: rgb(49 139 184 / 41%);
  color: #095f8b;
  background: linear-gradient(180deg, #fff, rgb(190 232 247 / 72%));
  box-shadow: 0 4px 10px rgb(32 112 152 / 15%), inset 0 1px 0 #fff;
}

.action-button.is-accent:hover {
  border-color: rgb(0 145 188 / 45%);
  color: #007ca5;
  background: linear-gradient(180deg, #fff, rgb(161 228 243 / 75%));
}

.action-button.is-danger:hover {
  border-color: rgb(209 92 111 / 44%);
  background: linear-gradient(180deg, #fff, rgb(255 218 224 / 78%));
}

.badge {
  border-color: rgb(255 255 255 / 77%);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 2px 5px rgb(34 104 139 / 8%);
}

.badge-success {
  color: #147653;
  background: linear-gradient(180deg, rgb(235 255 244 / 92%), rgb(193 240 215 / 76%));
}

.badge-warning {
  color: #965914;
  background: linear-gradient(180deg, rgb(255 250 232 / 94%), rgb(255 229 174 / 80%));
}

.badge-danger {
  color: #a53549;
  background: linear-gradient(180deg, rgb(255 243 246 / 94%), rgb(255 207 217 / 78%));
}

.badge-info {
  color: #236c9a;
  background: linear-gradient(180deg, rgb(245 252 255 / 94%), rgb(199 231 250 / 78%));
}

.badge-muted {
  color: #5d7a8c;
  background: linear-gradient(180deg, rgb(251 254 255 / 90%), rgb(221 237 244 / 74%));
}

.toggle-track {
  border: 1px solid rgb(64 135 173 / 34%);
  background: linear-gradient(180deg, #a7bdc8, #c8d7dd);
  box-shadow: inset 0 2px 4px rgb(34 82 109 / 18%), 0 1px 0 rgb(255 255 255 / 86%);
}

.toggle-track::after {
  box-shadow: 0 2px 5px rgb(24 83 115 / 24%), inset 0 1px 0 #fff;
}

.toggle input:checked + .toggle-track {
  background: linear-gradient(180deg, #38c8dc, #0787b7);
}

.toggle input:focus-visible + .toggle-track {
  outline-color: rgb(7 142 188 / 28%);
}

.traffic-progress,
.traffic-progress::-webkit-progress-bar {
  background: rgb(182 222 235 / 48%);
  box-shadow: inset 0 1px 3px rgb(36 111 148 / 17%);
}

.traffic-progress::-webkit-progress-value {
  background: linear-gradient(180deg, #55d7e4, #0786b5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
}

.traffic-progress::-moz-progress-bar {
  background: linear-gradient(180deg, #55d7e4, #0786b5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
}

.empty-icon {
  border-color: rgb(255 255 255 / 83%);
  border-radius: 13px;
  color: #5a8aa4;
  background: linear-gradient(180deg, rgb(255 255 255 / 79%), rgb(190 232 247 / 47%));
  box-shadow: 0 6px 16px rgb(36 112 151 / 11%), inset 0 1px 0 #fff;
}

.empty-state p,
.field-hint {
  color: #4f7185;
}

.notice {
  border-color: rgb(255 255 255 / 86%);
  border-left: 4px solid #d84e62;
  border-radius: 13px;
  color: #823445;
  background: linear-gradient(135deg, rgb(255 246 248 / 90%), rgb(255 220 226 / 73%));
  box-shadow: 0 10px 26px rgb(114 48 61 / 10%), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.skeleton-block,
.skeleton-line {
  background: rgb(184 223 237 / 45%);
}

.skeleton-block::after,
.skeleton-line::after {
  background: rgb(255 255 255 / 70%);
}

.skeleton-block {
  border: 1px solid rgb(255 255 255 / 66%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%);
}

.modal,
.confirm-dialog {
  border-color: rgb(255 255 255 / 91%);
  border-radius: 18px;
  outline: 1px solid rgb(38 127 176 / 22%);
  outline-offset: -2px;
  background: linear-gradient(145deg, rgb(255 255 255 / 91%), rgb(216 242 252 / 82%));
  box-shadow: var(--shadow-modal);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
}

.modal::backdrop,
.confirm-dialog::backdrop {
  background: rgb(14 67 105 / 38%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  backdrop-filter: blur(7px) saturate(120%);
}

.modal-header {
  border-bottom-color: rgb(59 145 188 / 21%);
  background: linear-gradient(180deg, rgb(255 255 255 / 68%), rgb(205 239 251 / 34%));
  box-shadow: inset 0 1px 0 #fff;
}

.modal-footer {
  border-top-color: rgb(59 145 188 / 19%);
  background: linear-gradient(180deg, rgb(221 244 252 / 45%), rgb(188 230 246 / 40%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%);
}

.form-label,
.check-field {
  color: #315870;
}

.form-error {
  border-color: rgb(255 255 255 / 78%);
  border-left: 4px solid #d24b60;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(255 241 244 / 91%), rgb(255 211 219 / 77%));
  box-shadow: inset 0 1px 0 #fff;
}

.confirm-icon {
  border: 1px solid rgb(255 255 255 / 86%);
  background: linear-gradient(180deg, rgb(255 245 247 / 94%), rgb(255 204 213 / 81%));
  box-shadow: 0 7px 18px rgb(156 50 68 / 13%), inset 0 1px 0 #fff;
}

.toast {
  border-color: rgb(255 255 255 / 90%);
  border-left-color: var(--accent);
  border-radius: 13px;
  background: linear-gradient(145deg, rgb(255 255 255 / 91%), rgb(217 243 252 / 79%));
  box-shadow: 0 16px 36px rgb(22 91 133 / 21%), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}

.toast-mark {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 3px 8px rgb(26 91 126 / 17%);
}

.toast-content span {
  color: #58788d;
}

.notice span,
.field-hint,
.form-error,
.confirm-dialog p,
.toast-content span,
.deployment-error {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.server-guide {
  padding: 18px 20px;
  border-block: 1px solid rgb(255 255 255 / 78%);
  background: linear-gradient(100deg, rgb(255 255 255 / 66%), rgb(193 235 248 / 54%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 8px 22px rgb(30 111 153 / 9%);
}

.server-guide-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.server-guide-heading h2,
.server-guide-heading p {
  margin: 0;
}

.server-guide-heading > p {
  max-width: 540px;
  color: #526f80;
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.server-guide-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.server-guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.guide-step-number {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #54bbdb, #168ebd);
  box-shadow: 0 4px 10px rgb(24 129 173 / 18%), inset 0 1px 0 rgb(255 255 255 / 45%);
  font-size: 12px;
  font-weight: 800;
}

.server-guide-steps strong {
  display: block;
  color: #24536d;
  font-size: 12px;
}

.server-guide-steps p {
  margin: 3px 0 0;
  color: #5f7d8f;
  font-size: 11px;
  line-height: 1.45;
}

.server-workflow-row > td {
  padding: 0 !important;
  border-top: 0 !important;
  background: rgb(216 242 251 / 38%);
}

.server-workflow-result {
  padding: 14px 18px 16px;
  border-left: 4px solid #159ac6;
}

.server-workflow-title,
.server-workflow-title > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.server-workflow-title {
  justify-content: space-between;
}

.server-workflow-result > p,
.connection-advice {
  margin: 7px 0 0;
  color: #526f80;
  font-size: 12px;
  line-height: 1.55;
}

.connection-advice {
  padding: 9px 11px;
  border-left: 3px solid #e4a72f;
  background: rgb(255 243 203 / 58%);
}

.fingerprint-confirm {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgb(25 117 163 / 28%);
  border-radius: 6px;
  background: rgb(235 255 244 / 72%);
}

.fingerprint-confirm > strong,
.fingerprint-confirm > p {
  margin: 0;
  color: #315f65;
  font-size: 11px;
}

.fingerprint-confirm > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.fingerprint-confirm code {
  overflow-wrap: anywhere;
  color: #24536d;
  font-size: 11px;
}

.connection-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.connection-checks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.connection-checks strong,
.connection-checks p {
  display: block;
  margin: 0;
  font-size: 11px;
}

.connection-checks p {
  margin-top: 2px;
  color: #647f8f;
  line-height: 1.45;
}

.domain-targets-row > td {
  padding: 0 !important;
  border-top: 0 !important;
  background: rgb(222 245 252 / 34%);
}

.domain-groups {
  display: grid;
  gap: 12px;
  padding: 14px 16px 18px;
}

.domain-server-group {
  overflow: hidden;
  border: 1px solid rgb(45 135 178 / 23%);
  border-radius: 8px;
  background: rgb(255 255 255 / 45%);
  box-shadow: 0 5px 16px rgb(22 103 140 / 7%);
}

.domain-server-group > summary {
  list-style: none;
}

.domain-server-group > summary::-webkit-details-marker {
  display: none;
}

.domain-server-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  min-height: 70px;
  padding: 12px 16px;
  cursor: pointer;
  background: linear-gradient(100deg, rgb(224 247 253 / 74%), rgb(193 235 248 / 52%));
}

.domain-server-summary:hover {
  background: linear-gradient(100deg, rgb(214 243 252 / 88%), rgb(181 229 245 / 66%));
}

.domain-server-summary-main,
.domain-server-summary-main > span:last-child,
.domain-server-metrics,
.domain-server-status {
  display: flex;
  align-items: center;
}

.domain-server-summary-main {
  min-width: 0;
  gap: 11px;
}

.domain-server-summary-main > span:last-child {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
}

.domain-server-summary-main strong,
.domain-server-summary-main small,
.domain-server-metrics strong,
.domain-server-metrics small,
.domain-server-status small {
  display: block;
}

.domain-server-summary-main strong {
  overflow: hidden;
  max-width: 100%;
  color: #1d506c;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-server-summary-main small {
  margin-top: 3px;
  overflow: hidden;
  max-width: 100%;
  color: #5e7c8d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-server-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #2cadd1, #147fad);
  box-shadow: 0 4px 10px rgb(22 101 137 / 17%), inset 0 1px 0 rgb(255 255 255 / 48%);
}

.domain-server-mark svg {
  width: 18px;
  height: 18px;
}

.domain-server-metrics {
  gap: 17px;
}

.domain-server-metrics span {
  min-width: 38px;
  text-align: center;
}

.domain-server-metrics strong {
  color: #1c6686;
  font-size: 15px;
}

.domain-server-metrics small {
  margin-top: 2px;
  color: #6a8796;
  font-size: 10px;
}

.domain-server-status {
  min-width: 68px;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;
}

.domain-server-status::after {
  content: '展开 / 收起';
  color: #6d8a99;
  font-size: 9px;
}

.domain-server-content {
  padding: 0 12px 12px;
  border-top: 1px solid rgb(46 137 179 / 15%);
}

.domain-project-group + .domain-project-group {
  border-top: 1px solid rgb(46 137 179 / 16%);
}

.domain-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 6px;
}

.domain-project-header > div:first-child,
.domain-project-actions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.domain-project-header > div:first-child {
  gap: 9px;
}

.domain-project-header strong,
.domain-project-header span {
  display: block;
}

.domain-project-header strong {
  color: #2c6079;
  font-size: 12px;
}

.domain-project-header > div:first-child span {
  overflow: hidden;
  max-width: 420px;
  color: #6b8795;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-project-actions {
  gap: 8px;
}

.domain-project-count {
  color: #638392;
  font-size: 10px;
  white-space: nowrap;
}

.domain-project-domains {
  display: grid;
  gap: 8px;
}

.domain-item {
  overflow: hidden;
  border: 1px solid rgb(50 140 181 / 17%);
  border-radius: 7px;
  background: rgb(255 255 255 / 53%);
}

.domain-item-header {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(190px, 1.6fr) 88px 48px auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 9px 12px;
}

.domain-item-main,
.domain-item-target,
.domain-item-code {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.domain-item-main strong,
.domain-item-target strong,
.domain-item-code strong {
  overflow: hidden;
  color: #245b74;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-item-main span,
.domain-item-target span,
.domain-item-code span {
  margin-top: 3px;
  overflow: hidden;
  color: #6a8795;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domain-item-code {
  align-items: flex-start;
}

.domain-item-code strong {
  color: #247e9e;
  font-size: 14px;
}

.domain-item-toggle {
  justify-self: center;
}

.domain-item-actions {
  justify-content: flex-end;
}

.domain-item .domain-targets {
  margin: 0 10px 10px;
  padding: 10px 12px 12px;
  border: 1px solid rgb(51 141 182 / 15%);
  border-left: 3px solid rgb(21 154 198 / 48%);
  background: rgb(221 244 251 / 36%);
}

.domain-targets {
  padding: 12px 16px 16px 34px;
  border-left: 3px solid rgb(21 154 198 / 55%);
}

.domain-targets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}

.domain-targets-head strong,
.domain-targets-head span {
  display: block;
}

.domain-targets-head strong {
  color: #275a75;
  font-size: 12px;
}

.domain-targets-head span {
  margin-top: 2px;
  color: #607d8e;
  font-size: 11px;
}

.button-small {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
}

.target-list {
  overflow-x: auto;
  border-block: 1px solid rgb(52 140 184 / 18%);
}

.target-list-head,
.target-list-row {
  display: grid;
  grid-template-columns: minmax(250px, 2fr) 70px 70px 94px 96px 62px minmax(170px, auto);
  min-width: 920px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
}

.target-list-head {
  color: #58788b;
  background: rgb(184 228 243 / 28%);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.target-list-row {
  border-top: 1px solid rgb(53 139 181 / 13%);
  color: #31566c;
  background: rgb(255 255 255 / 38%);
  font-size: 11px;
}

.target-list-row:first-of-type {
  border-top: 0;
}

.target-list-row > span {
  min-width: 0;
}

.target-list-row small {
  display: block;
  margin-top: 1px;
  color: #718b99;
  font-size: 9px;
}

.target-list-row .action-button {
  flex: 0 0 32px;
  border-color: rgb(42 125 157 / 34%);
  color: #155d78;
  background: rgb(255 255 255 / 70%);
}

.target-list-row > .actions-cell {
  width: auto;
}

.target-list-row > .actions-cell .row-actions {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.target-list-row .action-button.is-danger {
  color: #9a4052;
}

.target-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-empty {
  padding: 12px;
  border-block: 1px dashed rgb(52 140 184 / 28%);
  color: #607d8e;
  font-size: 11px;
}

.health-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.health-detail dl,
.target-stats-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(54 143 187 / 19%);
  border-radius: 9px;
  background: rgb(54 143 187 / 16%);
}

.health-detail dl > div,
.target-stats-summary dl > div {
  padding: 10px 12px;
  background: rgb(255 255 255 / 72%);
}

.health-detail dt,
.target-stats-summary dt {
  color: #6a8595;
  font-size: 10px;
  font-weight: 700;
}

.health-detail dd,
.target-stats-summary dd {
  margin: 4px 0 0;
  color: #244f68;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.target-stats-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.traffic-target-filter {
  display: block;
  width: min(320px, 45vw);
}

.traffic-target-filter .form-control {
  min-height: 36px;
}

.traffic-class-filter {
  width: min(190px, 34vw);
}

.traffic-visitor-panel .panel-header {
  gap: 14px;
}

.traffic-visitor-panel .search-box {
  width: min(310px, 42vw);
}

.traffic-visitor-table .mono {
  white-space: nowrap;
}

.visitor-location {
  color: #365e74;
  font-size: 12px;
  font-weight: 600;
}

.traffic-class-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgb(53 154 107 / 24%);
  border-radius: 5px;
  color: #18764f;
  background: rgb(228 250 238 / 76%);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.traffic-class-badge.is-bot {
  border-color: rgb(192 78 88 / 25%);
  color: #9a3542;
  background: rgb(255 235 237 / 78%);
}

.traffic-class-badge.is-unknown {
  border-color: rgb(111 132 143 / 24%);
  color: #607783;
  background: rgb(237 243 246 / 80%);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(62 151 193 / 55%) rgb(224 245 252 / 45%);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgb(224 245 252 / 45%);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid rgb(239 251 255 / 72%);
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(82 183 215 / 73%), rgb(43 137 181 / 67%));
}

@media (max-width: 1100px) {
  .stats-grid,
  .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .stat-card + .stat-card {
    border-left: 0;
  }

  .server-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .sidebar {
    width: min(290px, calc(100vw - 46px));
    transform: translateX(-105%);
    transition: transform 180ms ease-out;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-close,
  .menu-button {
    display: inline-grid;
  }

  .sidebar-scrim {
    position: fixed;
    z-index: 35;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgb(8 64 102 / 38%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
    backdrop-filter: blur(5px) saturate(115%);
  }

  .sidebar-scrim.is-visible {
    display: block;
  }

  .workspace {
    margin-left: 0;
  }

  .topbar {
    min-height: 68px;
  }

  .last-updated {
    display: none;
  }

  #main-content {
    padding-top: 20px;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-start,
  .toolbar-end {
    width: 100%;
    flex-wrap: wrap;
  }

  .toolbar-end {
    justify-content: flex-end;
  }

  .search-box {
    width: 100%;
  }

  .server-guide-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .server-guide-heading > p {
    max-width: none;
    text-align: left;
  }

  .connection-checks {
    grid-template-columns: 1fr;
  }

  .domain-targets {
    padding-left: 18px;
  }

  .domain-server-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .domain-server-metrics {
    display: none;
  }

  .domain-server-status {
    grid-column: 2;
    grid-row: 1;
  }

  .domain-item-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
  }

  .domain-item-main {
    grid-column: 1 / -1;
  }

  .domain-item-target {
    grid-column: 1;
  }

  .domain-item-code {
    grid-column: 2;
  }

  .domain-item-toggle {
    grid-column: 3;
    grid-row: 2;
  }

  .domain-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 2px;
  }
}

@media (max-width: 560px) {
  .droplet-one {
    top: 31vh;
    left: 8vw;
    width: 42px;
  }

  .droplet-two,
  .droplet-three {
    display: none;
  }

  body::before {
    top: 94px;
    right: -38px;
    width: 132px;
    opacity: 0.72;
  }

  body::after {
    display: none;
  }

  .topbar {
    padding-inline: 14px;
  }

  h1 {
    font-size: 18px;
  }

  .eyebrow {
    font-size: 10px;
  }

  #main-content {
    padding: 16px 12px 36px;
  }

  .page-stack {
    gap: 14px;
  }

  .stats-grid,
  .skeleton-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stats-grid {
    padding: 6px;
    border-radius: 16px;
  }

  .stat-card {
    min-height: 112px;
    padding: 13px;
  }

  .stat-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .stat-value {
    font-size: 22px;
  }

  .panel-header {
    min-height: 52px;
    padding: 11px 12px;
  }

  .panel {
    border-radius: 16px;
  }

  .panel-body {
    padding: 12px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field.is-wide {
    grid-column: auto;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-inline: 15px;
  }

  .modal-footer .button {
    flex: 1;
  }

  .server-guide {
    padding: 15px 13px;
  }

  .server-guide-steps {
    grid-template-columns: 1fr;
  }

  .domain-targets-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .health-detail dl,
  .target-stats-summary dl {
    grid-template-columns: 1fr;
  }

  .traffic-target-filter {
    width: 100%;
  }

  .traffic-visitor-panel .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .traffic-visitor-panel .search-box {
    width: 100%;
  }

  .segmented {
    max-width: 100%;
    overflow-x: auto;
  }

  .segment {
    flex: 0 0 auto;
  }

  .progress-row {
    grid-template-columns: minmax(80px, 1fr) 2fr;
  }

  .progress-number {
    grid-column: 2;
    text-align: left;
  }

  .toast-region {
    right: 14px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::before,
  body::after,
  .aero-droplet {
    animation: none !important;
  }

  .button:hover:not(:disabled),
  .action-button:hover:not(:disabled),
  .icon-button:hover,
  .nav-item:hover,
  .stat-card:hover {
    transform: none !important;
  }
}