:root {
  --xk-font-scale: 1;
  --xk-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --xk-mono-font-scale: 1;
  --xk-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Scale for helper/description texts inside cards (Layout tweaks). */
  --xk-card-desc-scale: 1;
  --sem-success: #22c55e;
  --sem-info: #93c5fd;
  --sem-warning: #fbbf24;
  --sem-error: #f87171;
  --sem-debug: #a1a1aa;

  /* Commands card: category accents (dark theme) */
  --xk-cmd-tone-warn: #fcd571;
  --xk-cmd-tone-danger: #faa3a3;
  --xk-cmd-tone-ok: #6fd996;
  --xk-cmd-tone-info: #9fd9d9;

  /* Xray logs highlight (token colors) — dark defaults */
  --log-ts: #94a3b8;
  --log-ip: #fde68a;
  --log-domain: #6ee7b7;
  --log-route-tproxy-vless: #22c55e;
  --log-route-redirect-vless: #38bdf8;
  --log-route-redirect-direct: #a855f7;
  --log-route-reject: #f97373;

  /* Theme-aware modal / floating surfaces (used by tooltips, menus, etc.) */
  --modal-overlay: #010612bd;
  --modal-bg: #060e1eeb;
  --modal-text: #f8fbff;
  --modal-muted: #bfdbfebd;
  --modal-body-bg: #08132fad;
  --modal-body-border: #60a5fa1f;
  --modal-table-head-bg: #08132fb8;
  --modal-table-head-text: #bfdbfe;
  --modal-table-border: #60a5fa1f;
  --modal-table-row-hover-bg: #3b82f61a;
  --modal-list-marker: #7dd3fc;
  --modal-border: #475569d1;
  --modal-header-border: #60a5fa1f;
  --modal-close: #dbeafe;
  --modal-close-hover: #f8fbff;
  --shadow-rgb: 0, 0, 0;
  --shadow: 0.35;

  /* Unified button variables (so semantic .btn-secondary stays readable in light theme too) */
  --editor-btn-bg: #0f172a94;
  --editor-btn-border: #60a5fa2e;
  --editor-btn-text: #eaf2ff;
  --editor-btn-hover-bg: #142038eb;
  --editor-btn-hover-text: #f8fbff;
  --editor-btn-hover-border: #baddff57;
  --editor-btn-active-from: #1d4ed8;
  --editor-btn-active-to: #2563eb;
  --header-btn-bg: #0f172a94;
  --header-btn-border: #94c5ff2e;
  --header-btn-text: #eaf2ff;
  --header-btn-hover-bg: #142038f5;
  --header-btn-hover-text: #f8fbff;
  --header-btn-hover-border: #baddff57;
  --header-tab-bg: #0f172a94;
  --header-tab-border: #60a5fa24;
  --header-tab-text: #dbeafe;
  --header-tab-active-bg: #2563eb;
  --header-tab-active-text: #f8fbff;

  /* Tooltip surface (portal renderer) */
  --xk-tooltip-bg: rgba(15, 23, 42, 0.95);
  --xk-tooltip-text: #e5e7eb;
  --xk-tooltip-border: rgba(148, 163, 184, 0.25);
  --xk-tooltip-shadow: rgba(0, 0, 0, 0.55);
  --xk-monaco-widget-bg: rgba(6, 14, 30, 0.96);
  --xk-monaco-widget-text: #f8fbff;
  --xk-monaco-widget-muted: #93add4;
  --xk-monaco-widget-border: rgba(96, 165, 250, 0.22);
  --xk-monaco-widget-hover: rgba(96, 165, 250, 0.14);
  --xk-monaco-widget-shadow: rgba(2, 8, 23, 0.48);
  --xk-monaco-input-bg: rgba(8, 20, 46, 0.94);
  --xk-monaco-problem-bg: #07111f;
  --xk-monaco-problem-header-bg: #0d2340;
  --xk-monaco-link: #7db6ff;
  --xk-monaco-link-active: #c7e0ff;
  --xk-monaco-error-icon: #f6a5b5;
  --xk-monaco-warning-icon: #f8cc79;
  --xk-monaco-info-icon: #8cc7ff;
  --xk-monaco-disabled: color-mix(in srgb, var(--xk-monaco-widget-muted) 68%, transparent);
  --xk-monaco-hover-bg: #01030a;
  --xk-monaco-hover-text: #c0caf5;
  --xk-monaco-hover-title: #f8fbff;
  --xk-monaco-hover-muted: #9aa7c7;
  --xk-monaco-hover-border: rgba(122, 162, 247, 0.28);
  --xk-monaco-hover-shadow: rgba(8, 14, 29, 0.55);
  --xk-monaco-hover-code-bg: rgba(148, 163, 184, 0.11);

  /* Monaco portal widgets inherit these tokens directly from :root. */
  --vscode-menu-background: var(--xk-monaco-widget-bg);
  --vscode-menu-foreground: var(--xk-monaco-widget-text);
  --vscode-menu-border: var(--xk-monaco-widget-border);
  --vscode-menu-selectionBackground: var(--xk-monaco-widget-hover);
  --vscode-menu-selectionForeground: var(--xk-monaco-widget-text);
  --vscode-menu-selectionBorder: transparent;
  --vscode-menu-separatorBackground: color-mix(in srgb, var(--xk-monaco-widget-border) 82%, transparent);
  --vscode-editorActionList-background: var(--xk-monaco-widget-bg);
  --vscode-editorActionList-foreground: var(--xk-monaco-widget-text);
  --vscode-editorActionList-focusBackground: var(--xk-monaco-widget-hover);
  --vscode-editorActionList-focusForeground: var(--xk-monaco-widget-text);
  --vscode-list-activeSelectionBackground: var(--xk-monaco-widget-hover);
  --vscode-list-activeSelectionForeground: var(--xk-monaco-widget-text);
  --vscode-list-hoverBackground: var(--xk-monaco-widget-hover);
  --vscode-list-focusBackground: var(--xk-monaco-widget-hover);
  --vscode-list-focusForeground: var(--xk-monaco-widget-text);
  --vscode-list-focusOutline: transparent;
  --vscode-editorHoverWidget-background: var(--xk-monaco-hover-bg);
  --vscode-editorHoverWidget-foreground: var(--xk-monaco-hover-text);
  --vscode-editorHoverWidget-border: var(--xk-monaco-hover-border);
  --vscode-editorHoverWidget-statusBarBackground: var(--xk-monaco-problem-header-bg);
  --vscode-editorMarkerNavigation-background: var(--xk-monaco-problem-bg);
  --vscode-editorMarkerNavigationError-background: var(--xk-monaco-problem-bg);
  --vscode-editorMarkerNavigationError-headerBackground: var(--xk-monaco-problem-header-bg);
  --vscode-editorMarkerNavigationWarning-background: var(--xk-monaco-problem-bg);
  --vscode-editorMarkerNavigationWarning-headerBackground: var(--xk-monaco-problem-header-bg);
  --vscode-editorMarkerNavigationInfo-background: var(--xk-monaco-problem-bg);
  --vscode-editorMarkerNavigationInfo-headerBackground: var(--xk-monaco-problem-header-bg);
  --vscode-keybindingLabel-background: color-mix(in srgb, var(--xk-monaco-widget-bg) 82%, white 6%);
  --vscode-keybindingLabel-foreground: var(--xk-monaco-widget-text);
  --vscode-keybindingLabel-border: color-mix(in srgb, var(--xk-monaco-widget-border) 88%, transparent);
  --vscode-keybindingLabel-bottomBorder: color-mix(in srgb, var(--xk-monaco-widget-border) 70%, transparent);
  --vscode-widget-shadow: var(--xk-monaco-widget-shadow);
  --vscode-descriptionForeground: var(--xk-monaco-widget-muted);
  --vscode-disabledForeground: var(--xk-monaco-disabled);
  --vscode-textLink-foreground: var(--xk-monaco-link);
  --vscode-textLink-activeForeground: var(--xk-monaco-link-active);
  --vscode-focusBorder: var(--accent);
  --vscode-problemsErrorIcon-foreground: var(--xk-monaco-error-icon);
  --vscode-problemsWarningIcon-foreground: var(--xk-monaco-warning-icon);
  --vscode-problemsInfoIcon-foreground: var(--xk-monaco-info-icon);

  /* Tooltip blur ("macOS style") for light theme. Disabled by default. */
  --xk-tooltip-backdrop: none;

}

/* Pointer cursor for any clickable surface in the panel.
   Kept near the top so per-element overrides (cursor: default on :disabled,
   drag handles, etc.) win on source-order tiebreaks. */
button:not(:disabled):not([aria-disabled="true"]),
a[href],
summary,
label[for],
select:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="file"]:not(:disabled),
input[type="color"]:not(:disabled),
input[type="image"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[role="tab"]:not([aria-disabled="true"]),
[role="link"]:not([aria-disabled="true"]),
[role="menuitem"]:not([aria-disabled="true"]),
[role="menuitemcheckbox"]:not([aria-disabled="true"]),
[role="menuitemradio"]:not([aria-disabled="true"]),
[role="option"]:not([aria-disabled="true"]),
[role="checkbox"]:not([aria-disabled="true"]),
[role="radio"]:not([aria-disabled="true"]),
[role="switch"]:not([aria-disabled="true"]),
[role="treeitem"]:not([aria-disabled="true"]),
[onclick]:not(:disabled):not([aria-disabled="true"]),
[data-action]:not(:disabled):not([aria-disabled="true"]),
[data-act]:not(:disabled):not([aria-disabled="true"]),
[data-tab]:not([aria-disabled="true"]),
[data-nav-href]:not([aria-disabled="true"]),
[data-modal-dismiss]:not([aria-disabled="true"]),
[data-dismiss]:not([aria-disabled="true"]),
[data-modal-key]:not([aria-disabled="true"]),
[data-copy]:not([aria-disabled="true"]),
[data-help-target]:not([aria-disabled="true"]),
[data-collapsible]:not([aria-disabled="true"]) {
  cursor: pointer;
}

/* Mihomo validation modal (panel routing card) */
#mihomo-validation-modal .modal-content {
  width: min(92vw, 880px);
  max-width: 880px;
  max-height: min(86vh, 720px);
  padding: 10px 12px 12px;
  border-radius: 22px;
  border: 1px solid rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 30%),
    radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.985), rgba(2, 6, 23, 0.965));
  box-shadow:
    0 28px 86px rgba(2, 6, 23, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#mihomo-validation-modal .xk-mihomo-validation-header {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#mihomo-validation-modal .xk-mihomo-validation-titlebox {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

#mihomo-validation-modal .xk-mihomo-validation-kicker {
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.92);
}

#mihomo-validation-modal .xk-mihomo-validation-subtitle {
  max-width: 70ch;
  font-size: calc(12.5px * var(--xk-font-scale));
  line-height: 1.48;
  color: rgba(191, 219, 254, 0.78);
}

#mihomo-validation-modal .xk-mihomo-validation-body {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: min(68vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

#mihomo-validation-modal .xk-mihomo-validation-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(3, 7, 18, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028);
}

#mihomo-validation-modal .xk-mihomo-validation-lead-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: rgba(8, 47, 73, 0.48);
  color: #e0f2fe;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: 0.12em;
}

#mihomo-validation-modal .xk-mihomo-validation-lead-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

#mihomo-validation-modal .xk-mihomo-validation-lead-title {
  font-size: calc(14px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1.35;
  color: #f8fafc;
}

#mihomo-validation-modal .xk-mihomo-validation-lead-desc {
  margin: 0;
  font-size: calc(12.5px * var(--xk-font-scale));
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.8);
}

#mihomo-validation-modal .xk-mihomo-validation-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
  color: #dbeafe;
  font-size: calc(11.5px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

#mihomo-validation-modal .xk-mihomo-validation-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 9px;
}

#mihomo-validation-modal .xk-mihomo-validation-grid[data-has-log="0"] {
  grid-template-columns: minmax(0, 1fr);
}

#mihomo-validation-modal .xk-mihomo-validation-panel {
  min-width: 0;
}

#mihomo-validation-modal .xk-mihomo-validation-overview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(8, 20, 54, 0.82), rgba(4, 14, 40, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#mihomo-validation-modal .xk-mihomo-validation-block {
  padding: 8px 9px 9px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(2, 6, 23, 0.28);
}

#mihomo-validation-modal .xk-mihomo-validation-block-title {
  margin-bottom: 7px;
  font-size: calc(10.8px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}

#mihomo-validation-modal .xk-mihomo-validation-summary,
#mihomo-validation-modal .xk-mihomo-validation-explainer {
  font-size: calc(12.5px * var(--xk-font-scale));
  line-height: 1.48;
  color: #e2e8f0;
  word-break: break-word;
}

#mihomo-validation-modal .xk-mihomo-validation-hint-list {
  display: grid;
  gap: 7px;
}

#mihomo-validation-modal .xk-mihomo-validation-hint-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

#mihomo-validation-modal .xk-mihomo-validation-hint-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8, #10b981);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

#mihomo-validation-modal .xk-mihomo-validation-log-shell {
  padding: 8px 9px 9px;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(8, 20, 54, 0.82), rgba(4, 14, 40, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#mihomo-validation-modal .xk-mihomo-validation-terminal {
  min-height: 0;
  max-height: min(32vh, 260px);
  overflow: auto;
  padding: 10px 11px;
  border-radius: 15px;
  border: 1px solid rgba(15, 23, 42, 0.86);
  background: #020617;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(11.5px * var(--xk-font-scale));
  line-height: 1.45;
}

#mihomo-validation-modal .xk-mihomo-validation-terminal .log-line {
  white-space: pre-wrap;
  word-break: break-word;
}

#mihomo-validation-modal .xk-mihomo-validation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

#mihomo-validation-modal .xk-mihomo-validation-copy-status {
  min-height: 18px;
  font-size: calc(12px * var(--xk-font-scale));
  color: rgba(191, 219, 254, 0.78);
  opacity: 0;
  transition: opacity 0.18s ease;
}

#mihomo-validation-modal .xk-mihomo-validation-copy-status.is-visible {
  opacity: 1;
}

#mihomo-validation-modal .xk-mihomo-validation-copy-status.is-error {
  color: #fecaca;
}

#mihomo-validation-modal .xk-mihomo-validation-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#mihomo-validation-modal[data-kind="success"] .xk-mihomo-validation-lead,
#mihomo-validation-modal[data-kind="success"] .xk-mihomo-validation-state-badge {
  border-color: rgba(74, 222, 128, 0.22);
}

#mihomo-validation-modal[data-kind="success"] .xk-mihomo-validation-lead {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.14), rgba(15, 23, 42, 0.52));
}

#mihomo-validation-modal[data-kind="success"] .xk-mihomo-validation-lead-icon,
#mihomo-validation-modal[data-kind="success"] .xk-mihomo-validation-state-badge {
  background: rgba(20, 83, 45, 0.34);
  color: #dcfce7;
}

#mihomo-validation-modal[data-kind="warning"] .xk-mihomo-validation-lead,
#mihomo-validation-modal[data-kind="warning"] .xk-mihomo-validation-state-badge {
  border-color: rgba(250, 204, 21, 0.24);
}

#mihomo-validation-modal[data-kind="warning"] .xk-mihomo-validation-lead {
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.18), rgba(15, 23, 42, 0.52));
}

#mihomo-validation-modal[data-kind="warning"] .xk-mihomo-validation-lead-icon,
#mihomo-validation-modal[data-kind="warning"] .xk-mihomo-validation-state-badge {
  background: rgba(113, 63, 18, 0.36);
  color: #fde68a;
}

#mihomo-validation-modal[data-kind="error"] .xk-mihomo-validation-lead,
#mihomo-validation-modal[data-kind="error"] .xk-mihomo-validation-state-badge {
  border-color: rgba(248, 113, 113, 0.24);
}

#mihomo-validation-modal[data-kind="error"] .xk-mihomo-validation-lead {
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.22), rgba(15, 23, 42, 0.52));
}

#mihomo-validation-modal[data-kind="error"] .xk-mihomo-validation-lead-icon,
#mihomo-validation-modal[data-kind="error"] .xk-mihomo-validation-state-badge {
  background: rgba(127, 29, 29, 0.38);
  color: #fecaca;
}

html[data-theme="light"] #mihomo-validation-modal .modal-content {
  border-color: rgba(148, 163, 184, 0.28);
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(239, 246, 255, 0.965));
  box-shadow:
    0 24px 62px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-subtitle {
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-lead {
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(226, 232, 240, 0.64));
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-lead-title {
  color: #0f172a;
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-lead-desc,
html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-summary,
html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-explainer {
  color: #334155;
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-overview,
html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-log-shell {
  border-color: rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.86));
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-block {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-kicker,
html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-block-title {
  color: #3b82f6;
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-terminal {
  border-color: rgba(148, 163, 184, 0.28);
  background: #f8fafc;
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-copy-status {
  color: #475569;
}

html[data-theme="light"] #mihomo-validation-modal .xk-mihomo-validation-copy-status.is-error {
  color: #b91c1c;
}

@media (max-width: 900px) {
  #mihomo-validation-modal .modal-content {
    width: min(96vw, 920px);
    padding: 11px 12px 12px;
  }

  #mihomo-validation-modal .xk-mihomo-validation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #mihomo-validation-modal .xk-mihomo-validation-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #mihomo-validation-modal .xk-mihomo-validation-footer-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  #mihomo-validation-modal .xk-mihomo-validation-lead {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #mihomo-validation-modal .xk-mihomo-validation-state-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

}

/* Semantic colors: light theme defaults */
html[data-theme="light"] {
  --sem-success: #16a34a;
  --sem-info: #2563eb;
  --sem-warning: #b45309;
  --sem-error: #dc2626;
  --sem-debug: #6b7280;

  /* Commands card: category accents (light theme) */
  --xk-cmd-tone-warn: #b45309;
  --xk-cmd-tone-danger: #dc2626;
  --xk-cmd-tone-ok: #047857;
  --xk-cmd-tone-info: #0f766e;

  /* Xray logs highlight (token colors) — light defaults */
  --log-ts: #64748b;
  --log-ip: #a16207;
  --log-domain: #047857;
  --log-route-tproxy-vless: #16a34a;
  --log-route-redirect-vless: #0284c7;
  --log-route-redirect-direct: #7c3aed;
  --log-route-reject: #dc2626;

  /* Theme-aware modal / floating surfaces */
  --modal-overlay: #0f172a5c;
  --modal-bg: #fffffff5;
  --modal-text: #152238;
  --modal-muted: #465975;
  --modal-body-bg: #eef4ff;
  --modal-body-border: #c7d7ee;
  --modal-table-head-bg: #eaf2ff;
  --modal-table-head-text: #586c86;
  --modal-table-border: #d6e3f4;
  --modal-table-row-hover-bg: #dbeafea6;
  --modal-list-marker: #2563eb;
  --modal-border: #cfdbef;
  --modal-header-border: #dbe5f4;
  --modal-close: #1e3b70;
  --modal-close-hover: #152238;
  --shadow-rgb: 15, 23, 42;
  --shadow: 0.14;

  /* Unified button variables */
  --editor-btn-bg: #f8fbffeb;
  --editor-btn-border: #60a5fa29;
  --editor-btn-text: #162033;
  --editor-btn-hover-bg: #ffffff;
  --editor-btn-hover-text: #162033;
  --editor-btn-hover-border: #3f6fcb38;
  --editor-btn-active-from: #1d4ed8;
  --editor-btn-active-to: #3f6fcb;
  --header-btn-bg: #f8fbffeb;
  --header-btn-border: #60a5fa29;
  --header-btn-text: #162033;
  --header-btn-hover-bg: #ffffff;
  --header-btn-hover-text: #162033;
  --header-btn-hover-border: #3f6fcb38;
  --header-tab-bg: #f5f9ffd1;
  --header-tab-border: #3f6fcb1a;
  --header-tab-text: #162033c2;
  --header-tab-active-bg: #3f6fcb;
  --header-tab-active-text: #ffffff;

  /* File manager buttons: keep contrast in light theme */
  --fm-btn-text: #111827;
  --fm-btn-hover-text: #111827;

  /* File manager toggle ("Скрытые") */
  --fm-toggle-knob-bg: rgba(255, 255, 255, 0.96);
  --fm-toggle-knob-border: rgba(15, 23, 42, 0.10);

  /* Tooltip surface (portal renderer) */
  /* "macOS style" (milky + blur) */
  --xk-tooltip-bg: rgba(255, 255, 255, 0.72);
  --xk-tooltip-text: #111827;
  --xk-tooltip-border: rgba(15, 23, 42, 0.10);
  --xk-tooltip-shadow: rgba(15, 23, 42, 0.14);
  --xk-monaco-widget-bg: #fffffff5;
  --xk-monaco-widget-text: #162033;
  --xk-monaco-widget-muted: #607394;
  --xk-monaco-widget-border: rgba(63, 111, 203, 0.18);
  --xk-monaco-widget-hover: rgba(63, 111, 203, 0.12);
  --xk-monaco-widget-shadow: rgba(47, 79, 140, 0.14);
  --xk-monaco-input-bg: #f8fbff;
  --xk-monaco-problem-bg: #f8fbff;
  --xk-monaco-problem-header-bg: #eef4ff;
  --xk-monaco-link: #2f5fc7;
  --xk-monaco-link-active: #1e429f;
  --xk-monaco-error-icon: #d6506f;
  --xk-monaco-warning-icon: #b7791f;
  --xk-monaco-info-icon: #2563eb;
  --xk-monaco-disabled: color-mix(in srgb, var(--xk-monaco-widget-muted) 74%, transparent);
  --xk-monaco-hover-bg: rgba(255, 255, 255, 0.99);
  --xk-monaco-hover-text: #18263b;
  --xk-monaco-hover-title: #162033;
  --xk-monaco-hover-muted: #52627a;
  --xk-monaco-hover-border: rgba(148, 163, 184, 0.28);
  --xk-monaco-hover-shadow: rgba(15, 23, 42, 0.14);
  --xk-monaco-hover-code-bg: rgba(37, 99, 235, 0.08);
  --xk-tooltip-backdrop: blur(18px) saturate(180%);
}

/* =========================
   Monaco UI theming
   ========================= */

/* Monaco context menu (right click) should match panel theme.
   Monaco uses its own DOM (not native browser menu), so we can safely style it. */
/* IMPORTANT: Monaco renders the context menu in a global "portal" container (.context-view)
   attached to <body>, so it is often NOT a descendant of .monaco-editor.
   Style both cases to keep it consistent across pages/modals. */
.context-view.monaco-menu-container,
.context-view .action-widget {
  --vscode-menu-background: var(--xk-monaco-widget-bg);
  --vscode-menu-foreground: var(--xk-monaco-widget-text);
  --vscode-menu-border: var(--xk-monaco-widget-border);
  --vscode-menu-selectionBackground: var(--xk-monaco-widget-hover);
  --vscode-menu-selectionForeground: var(--xk-monaco-widget-text);
  --vscode-menu-selectionBorder: transparent;
  --vscode-menu-separatorBackground: color-mix(in srgb, var(--xk-monaco-widget-border) 82%, transparent);
  --vscode-editorActionList-background: var(--xk-monaco-widget-bg);
  --vscode-editorActionList-foreground: var(--xk-monaco-widget-text);
  --vscode-editorActionList-focusBackground: var(--xk-monaco-widget-hover);
  --vscode-editorActionList-focusForeground: var(--xk-monaco-widget-text);
  --vscode-list-activeSelectionBackground: var(--xk-monaco-widget-hover);
  --vscode-list-activeSelectionForeground: var(--xk-monaco-widget-text);
  --vscode-list-hoverBackground: var(--xk-monaco-widget-hover);
  --vscode-list-focusBackground: var(--xk-monaco-widget-hover);
  --vscode-list-focusForeground: var(--xk-monaco-widget-text);
  --vscode-list-focusOutline: transparent;
  --vscode-descriptionForeground: var(--xk-monaco-widget-muted);
  --vscode-disabledForeground: var(--xk-monaco-disabled);
  --vscode-textLink-foreground: var(--xk-monaco-link);
  --vscode-textLink-activeForeground: var(--xk-monaco-link-active);
  --vscode-keybindingLabel-background: color-mix(in srgb, var(--xk-monaco-widget-bg) 82%, white 6%);
  --vscode-keybindingLabel-foreground: var(--xk-monaco-widget-text);
  --vscode-keybindingLabel-border: color-mix(in srgb, var(--xk-monaco-widget-border) 88%, transparent);
  --vscode-keybindingLabel-bottomBorder: color-mix(in srgb, var(--xk-monaco-widget-border) 70%, transparent);
  --vscode-widget-shadow: var(--xk-monaco-widget-shadow);
  background: var(--xk-monaco-widget-bg) !important;
  background-color: var(--xk-monaco-widget-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid var(--xk-monaco-widget-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px var(--xk-monaco-widget-shadow) !important;
  backdrop-filter: var(--xk-tooltip-backdrop);
}

.context-view.monaco-menu-container .monaco-menu,
.context-view .action-widget,
.context-view .action-widget .actionList,
.context-view .action-widget .monaco-list,
.context-view .action-widget .monaco-list-rows {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--xk-monaco-widget-text) !important;
}

.context-view .context-view-block,
.context-view .context-view-pointerBlock {
  background: transparent !important;
}

.context-view .action-widget .monaco-list-row,
.context-view .action-widget .monaco-list-row.action,
.context-view .action-widget .monaco-list-row.separator,
.context-view .action-widget .action-widget-action-bar,
.context-view .action-widget .action-widget-action-bar:before {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--xk-monaco-widget-text) !important;
}

.context-view .action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled),
.context-view .action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row.action:hover:not(.selected):not(.focused):not(.option-disabled),
.context-view .action-widget .monaco-list .monaco-list-row.action.selected:not(.option-disabled) {
  background: var(--xk-monaco-widget-hover) !important;
  background-color: var(--xk-monaco-widget-hover) !important;
  color: var(--xk-monaco-widget-text) !important;
  outline: 1px solid transparent !important;
}

.context-view .action-widget .monaco-list-row.separator,
.context-view .action-widget .action-widget-action-bar {
  border-top-color: color-mix(in srgb, var(--xk-monaco-widget-border) 84%, transparent) !important;
}

.context-view .action-widget .monaco-list-row.group-header,
.context-view .action-widget .option-disabled,
.context-view .action-widget .option-disabled * {
  color: var(--xk-monaco-widget-muted) !important;
}

.context-view .action-widget .monaco-keybinding > .monaco-keybinding-key,
.context-view .action-widget .monaco-keybinding-key {
  background-color: color-mix(in srgb, var(--xk-monaco-widget-bg) 82%, white 6%) !important;
  color: var(--xk-monaco-widget-text) !important;
  border-color: color-mix(in srgb, var(--xk-monaco-widget-border) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--xk-monaco-widget-border) 70%, transparent) !important;
  box-shadow: none !important;
}

.context-view .action-widget .title,
.context-view .action-widget .codicon,
.context-view .action-widget .action-label,
.context-view .action-widget a {
  color: var(--xk-monaco-widget-text) !important;
}

.monaco-editor .monaco-menu,
.context-view .monaco-menu {
  background: var(--xk-monaco-widget-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid var(--xk-monaco-widget-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px var(--xk-monaco-widget-shadow) !important;
  overflow: hidden;
  backdrop-filter: var(--xk-tooltip-backdrop);
}

.monaco-editor .monaco-menu .actions-container,
.context-view .monaco-menu .actions-container,
.monaco-editor .monaco-menu .action-item,
.context-view .monaco-menu .action-item {
  background: transparent !important;
}

.monaco-editor .monaco-menu .monaco-action-bar.vertical .action-item,
.context-view .monaco-menu .monaco-action-bar.vertical .action-item {
  border-radius: 10px;
}

.monaco-editor .monaco-menu .action-menu-item,
.context-view .monaco-menu .action-menu-item,
.monaco-editor .monaco-menu .monaco-menu-option,
.context-view .monaco-menu .monaco-menu-option {
  color: var(--xk-monaco-widget-text) !important;
  background: transparent !important;
  border-radius: 10px !important;
}

.monaco-editor .monaco-menu .action-menu-item .label,
.monaco-editor .monaco-menu .action-menu-item .keybinding,
.monaco-editor .monaco-menu .action-menu-item .submenu-indicator,
.monaco-editor .monaco-menu .monaco-menu-option .label,
.monaco-editor .monaco-menu .monaco-menu-option .keybinding,
.context-view .monaco-menu .action-menu-item .label,
.context-view .monaco-menu .action-menu-item .keybinding,
.context-view .monaco-menu .action-menu-item .submenu-indicator,
.context-view .monaco-menu .monaco-menu-option .label,
.context-view .monaco-menu .monaco-menu-option .keybinding {
  color: var(--xk-monaco-widget-text) !important;
}

.monaco-editor .monaco-menu .action-menu-item:hover,
.monaco-editor .monaco-menu .action-menu-item.focused,
.monaco-editor .monaco-menu .monaco-menu-option:hover,
.monaco-editor .monaco-menu .monaco-menu-option.active,
.context-view .monaco-menu .action-menu-item:hover,
.context-view .monaco-menu .action-menu-item.focused,
.context-view .monaco-menu .monaco-menu-option:hover,
.context-view .monaco-menu .monaco-menu-option.active {
  background: var(--xk-monaco-widget-hover) !important;
  color: var(--xk-monaco-widget-text) !important;
  outline: 1px solid transparent !important;
}

html[data-theme="light"] .monaco-editor .monaco-menu .action-menu-item:hover,
html[data-theme="light"] .monaco-editor .monaco-menu .action-menu-item.focused,
html[data-theme="light"] .monaco-editor .monaco-menu .monaco-menu-option:hover,
html[data-theme="light"] .monaco-editor .monaco-menu .monaco-menu-option.active,
html[data-theme="light"] .context-view .monaco-menu .action-menu-item:hover,
html[data-theme="light"] .context-view .monaco-menu .action-menu-item.focused,
html[data-theme="light"] .context-view .monaco-menu .monaco-menu-option:hover,
html[data-theme="light"] .context-view .monaco-menu .monaco-menu-option.active {
  background: rgba(15, 23, 42, 0.08) !important;
}

.monaco-editor .monaco-menu .separator,
.context-view .monaco-menu .separator {
  border-bottom: 1px solid color-mix(in srgb, var(--xk-monaco-widget-border) 82%, transparent) !important;
}

.monaco-editor .monaco-menu .monaco-keybinding-key,
.context-view .monaco-menu .monaco-keybinding-key {
  background-color: color-mix(in srgb, var(--xk-monaco-widget-bg) 82%, white 6%) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid color-mix(in srgb, var(--xk-monaco-widget-border) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--xk-monaco-widget-border) 70%, transparent) !important;
  box-shadow: none !important;
}


/* Monaco menu stability fix:
   keep the custom theme, but avoid transparent/backdrop-filter layering on Monaco's portal widgets.
   This prevents visual artifacts on Safari/WebKit and Chromium forks. */
.context-view.monaco-menu-container,
.context-view .action-widget,
.monaco-editor .monaco-menu,
.context-view .monaco-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
}

.context-view .action-widget,
.context-view .action-widget .actionList,
.context-view .action-widget .monaco-list,
.context-view .action-widget .monaco-list-rows,
.monaco-editor .monaco-menu,
.context-view .monaco-menu,
.context-view.monaco-menu-container .monaco-menu {
  background: var(--xk-monaco-widget-bg) !important;
  background-color: var(--xk-monaco-widget-bg) !important;
  opacity: 1 !important;
}


/* Monaco suggest widget (autocomplete), hover tooltip and find widget should also match panel theme */
.monaco-editor .suggest-widget,
.monaco-editor .suggest-widget.visible,
.monaco-editor .suggest-widget .suggest-widget,
.monaco-editor .context-view .suggest-widget {
  background: var(--xk-monaco-widget-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid var(--xk-monaco-widget-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px var(--xk-monaco-widget-shadow) !important;
  backdrop-filter: var(--xk-tooltip-backdrop);
}

.monaco-editor .suggest-widget .monaco-list-row,
.monaco-editor .suggest-widget .monaco-list-row .label-name,
.monaco-editor .suggest-widget .monaco-list-row .details-label,
.monaco-editor .suggest-widget .monaco-list-row .label-description,
.monaco-editor .suggest-widget .monaco-list-row .readMore {
  color: var(--xk-monaco-widget-text) !important;
}

.monaco-editor .suggest-widget .monaco-list-row:hover,
.monaco-editor .suggest-widget .monaco-list-row.focused,
.monaco-editor .suggest-widget .monaco-list-row.selected {
  background: var(--xk-monaco-widget-hover) !important;
}

/* Monaco hover tooltip */
.workbench-hover-container,
.monaco-resizable-hover,
.monaco-editor-hover,
.monaco-hover,
.monaco-hover.workbench-hover {
  --vscode-editorHoverWidget-background: var(--xk-monaco-hover-bg);
  --vscode-editorHoverWidget-foreground: var(--xk-monaco-hover-text);
  --vscode-editorHoverWidget-border: var(--xk-monaco-hover-border);
  --vscode-editorHoverWidget-statusBarBackground: var(--xk-monaco-problem-header-bg);
  --vscode-textLink-foreground: var(--xk-monaco-link);
  --vscode-textLink-activeForeground: var(--xk-monaco-link-active);
  --vscode-widget-shadow: var(--xk-monaco-hover-shadow);
  box-sizing: border-box;
  background: var(--xk-monaco-hover-bg) !important;
  background-color: var(--xk-monaco-hover-bg) !important;
  color: var(--xk-monaco-hover-text) !important;
  border: 1px solid var(--xk-monaco-hover-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 36px var(--xk-monaco-hover-shadow) !important;
  font-family: var(--xk-mono-font-family);
  font-size: 13px;
  line-height: 1.5;
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.workbench-hover-container,
.monaco-resizable-hover {
  max-width: min(560px, calc(100vw - 32px)) !important;
  max-height: min(320px, calc(100vh - 96px)) !important;
  overflow: hidden !important;
}

.monaco-editor .monaco-resizable-hover > .monaco-hover,
.workbench-hover-container .monaco-hover.workbench-hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.monaco-hover.workbench-hover {
  max-width: min(540px, calc(100vw - 48px)) !important;
  max-height: min(320px, calc(100vh - 96px)) !important;
  overflow: hidden !important;
}

.monaco-hover .monaco-scrollable-element,
.monaco-editor-hover .monaco-scrollable-element {
  max-height: min(320px, calc(100vh - 96px)) !important;
  overscroll-behavior: contain;
}

.monaco-hover .hover-row .hover-row-contents,
.monaco-editor-hover .hover-row .hover-row-contents {
  padding: 12px 14px !important;
}

.monaco-editor-hover .hover-contents,
.monaco-hover .hover-contents,
.monaco-editor-hover .markdown-hover,
.monaco-hover .markdown-hover,
.monaco-editor-hover .hover-row,
.monaco-hover .hover-row,
.monaco-editor-hover code,
.monaco-hover code {
  color: var(--xk-monaco-hover-text) !important;
  font-family: var(--xk-mono-font-family) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.monaco-editor-hover .hover-contents,
.monaco-hover .hover-contents,
.monaco-editor-hover .markdown-hover,
.monaco-hover .markdown-hover {
  box-sizing: border-box;
  max-width: min(520px, calc(100vw - 48px));
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

.monaco-editor-hover .markdown-hover p,
.monaco-hover .markdown-hover p {
  margin: 0 0 8px;
}

.monaco-editor-hover .markdown-hover p:last-child,
.monaco-hover .markdown-hover p:last-child,
.monaco-editor-hover .markdown-hover ul:last-child,
.monaco-hover .markdown-hover ul:last-child,
.monaco-editor-hover .markdown-hover ol:last-child,
.monaco-hover .markdown-hover ol:last-child {
  margin-bottom: 0;
}

.monaco-editor-hover .markdown-hover p:first-child,
.monaco-hover .markdown-hover p:first-child {
  color: var(--xk-monaco-hover-title) !important;
}

.monaco-editor-hover .markdown-hover strong,
.monaco-hover .markdown-hover strong {
  color: var(--xk-monaco-hover-title) !important;
  font-weight: 750;
}

.monaco-editor-hover .markdown-hover ul,
.monaco-hover .markdown-hover ul,
.monaco-editor-hover .markdown-hover ol,
.monaco-hover .markdown-hover ol {
  margin: 6px 0 8px;
  padding-left: 18px;
}

.monaco-editor-hover .markdown-hover li,
.monaco-hover .markdown-hover li {
  margin: 4px 0;
  padding-left: 2px;
}

.monaco-editor-hover .markdown-hover em,
.monaco-hover .markdown-hover em,
.monaco-editor-hover .markdown-hover .codicon,
.monaco-hover .markdown-hover .codicon,
.monaco-editor-hover .markdown-hover .hover-contents-secondary,
.monaco-hover .markdown-hover .hover-contents-secondary {
  color: var(--xk-monaco-hover-muted) !important;
}

.monaco-editor-hover .markdown-hover code,
.monaco-hover .markdown-hover code {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.monaco-editor-hover .markdown-hover pre,
.monaco-hover .markdown-hover pre {
  max-width: 100%;
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--xk-monaco-hover-code-bg) !important;
  border: 1px solid color-mix(in srgb, var(--xk-monaco-hover-border) 76%, transparent);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: visible;
  white-space: pre-wrap;
}

.monaco-editor-hover .markdown-hover pre code,
.monaco-hover .markdown-hover pre code {
  background: transparent !important;
  border: 0;
  padding: 0;
}

.monaco-hover .hover-row,
.monaco-editor-hover .hover-row,
.monaco-hover .hover-row .hover-row-contents,
.monaco-editor-hover .hover-row .hover-row-contents,
.monaco-hover .hover-contents,
.monaco-editor-hover .hover-contents {
  background: transparent !important;
  background-color: transparent !important;
}

.monaco-hover.workbench-hover .hover-row .actions,
.monaco-editor-hover .hover-row .actions {
  background: var(--xk-monaco-problem-header-bg) !important;
  color: var(--xk-monaco-hover-text) !important;
  border-top: 1px solid color-mix(in srgb, var(--xk-monaco-hover-border) 84%, transparent) !important;
}

.monaco-hover hr,
.monaco-editor-hover hr,
.monaco-hover.workbench-hover hr {
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--xk-monaco-hover-border) 84%, transparent) !important;
  height: 0 !important;
  background: transparent !important;
}

.workbench-hover-container.locked .monaco-hover.workbench-hover,
.workbench-hover-container:focus-within.locked .monaco-hover.workbench-hover {
  outline-color: var(--xk-monaco-hover-border) !important;
}

.workbench-hover-pointer:after {
  background-color: var(--xk-monaco-hover-bg) !important;
  border-right-color: var(--xk-monaco-hover-border) !important;
  border-bottom-color: var(--xk-monaco-hover-border) !important;
}

.monaco-hover.workbench-hover .hover-row .actions *,
.monaco-editor-hover .hover-row .actions * {
  color: var(--xk-monaco-hover-text) !important;
}

/* Monaco find/replace widget */
.monaco-editor .find-widget,
.monaco-editor .find-widget.visible {
  background: var(--xk-monaco-widget-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid var(--xk-monaco-widget-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px var(--xk-monaco-widget-shadow) !important;
  backdrop-filter: var(--xk-tooltip-backdrop);
}

/* Inputs inside find widget */
.monaco-editor .find-widget .monaco-inputbox,
.monaco-editor .find-widget .monaco-inputbox input,
.monaco-editor .find-widget .monaco-inputbox textarea {
  background: var(--xk-monaco-input-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid color-mix(in srgb, var(--xk-monaco-widget-border) 88%, transparent) !important;
  border-radius: 10px !important;
}

.monaco-editor .find-widget .monaco-inputbox input::placeholder,
.monaco-editor .find-widget .monaco-inputbox textarea::placeholder {
  color: color-mix(in srgb, var(--xk-monaco-widget-muted) 74%, transparent) !important;
}

/* Buttons in find widget */
.monaco-editor .find-widget .button,
.monaco-editor .find-widget .codicon,
.monaco-editor .find-widget .monaco-button,
.monaco-editor .find-widget .monaco-action-bar .action-item {
  color: var(--xk-monaco-widget-text) !important;
}

.monaco-editor .find-widget .button:hover,
.monaco-editor .find-widget .monaco-action-bar .action-item:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  border-radius: 10px !important;
}

html[data-theme="light"] .monaco-editor .find-widget .button:hover,
html[data-theme="light"] .monaco-editor .find-widget .monaco-action-bar .action-item:hover {
  background: rgba(15, 23, 42, 0.08) !important;
}

.quick-input-widget {
  background: var(--xk-monaco-widget-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border: 1px solid var(--xk-monaco-widget-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px var(--xk-monaco-widget-shadow) !important;
  overflow: hidden;
}

.quick-input-widget .quick-input-titlebar,
.quick-input-widget .quick-input-header {
  background: var(--xk-monaco-problem-header-bg) !important;
  border-color: color-mix(in srgb, var(--xk-monaco-widget-border) 84%, transparent) !important;
}

.quick-input-widget .monaco-inputbox,
.quick-input-widget .monaco-inputbox input,
.quick-input-widget .monaco-inputbox textarea {
  background: var(--xk-monaco-input-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border-color: var(--xk-monaco-widget-border) !important;
  box-shadow: none !important;
}

.quick-input-widget .monaco-inputbox input::placeholder,
.quick-input-widget .monaco-inputbox textarea::placeholder {
  color: color-mix(in srgb, var(--xk-monaco-widget-muted) 78%, transparent) !important;
}

.quick-input-widget .monaco-list-row.focused,
.quick-input-widget .monaco-list-row.selected,
.quick-input-widget .monaco-list-row:hover {
  background: var(--xk-monaco-widget-hover) !important;
}

.quick-input-widget .monaco-list-row,
.quick-input-widget .monaco-highlighted-label,
.quick-input-widget .quick-input-list,
.quick-input-widget .quick-input-description,
.quick-input-widget .quick-input-message {
  color: var(--xk-monaco-widget-text) !important;
}

.quick-input-widget .picker-group,
.quick-input-widget .quick-input-list .monaco-list-rows,
.quick-input-widget .quick-input-list .monaco-scrollable-element {
  background: transparent !important;
}

.monaco-editor .zone-widget,
.monaco-editor .marker-widget,
.monaco-editor .peekview-widget {
  --vscode-editorHoverWidget-statusBarBackground: var(--xk-monaco-problem-header-bg);
  --vscode-widget-shadow: var(--xk-monaco-widget-shadow);
  border-color: var(--xk-monaco-widget-border) !important;
  box-shadow: 0 14px 32px var(--xk-monaco-widget-shadow) !important;
  max-width: calc(100% - 32px) !important;
  overflow: hidden;
}

.monaco-editor .zone-widget,
.monaco-editor .marker-widget {
  width: 100% !important;
  max-width: none !important;
}

.monaco-editor .zone-widget,
.monaco-editor .marker-widget {
  background: var(--xk-monaco-problem-bg) !important;
}

.monaco-editor .zone-widget .zone-widget-container,
.monaco-editor .marker-widget .zone-widget-container,
.monaco-editor .peekview-widget {
  background: var(--xk-monaco-problem-bg) !important;
  color: var(--xk-monaco-widget-text) !important;
  border-top-color: color-mix(in srgb, var(--xk-monaco-widget-border) 84%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--xk-monaco-widget-border) 84%, transparent) !important;
  overflow: hidden;
}

.monaco-editor .zone-widget .zone-widget-container,
.monaco-editor .marker-widget .zone-widget-container {
  width: 100% !important;
  max-width: none !important;
}

.monaco-editor .zone-widget .zone-widget-head,
.monaco-editor .marker-widget .zone-widget-head,
.monaco-editor .peekview-widget .head,
.monaco-editor .peekview-widget .peekview-title {
  background: var(--xk-monaco-problem-header-bg) !important;
  border-color: color-mix(in srgb, var(--xk-monaco-widget-border) 84%, transparent) !important;
}

.monaco-editor .marker-widget .descriptioncontainer,
.monaco-editor .marker-widget .descriptioncontainer .message,
.monaco-editor .marker-widget .descriptioncontainer .details,
.monaco-editor .zone-widget .descriptioncontainer,
.monaco-editor .zone-widget .descriptioncontainer .message,
.monaco-editor .zone-widget .descriptioncontainer .details {
  color: var(--xk-monaco-widget-text) !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.monaco-editor .marker-widget .monaco-scrollable-element,
.monaco-editor .zone-widget .monaco-scrollable-element {
  width: 100% !important;
}

.monaco-editor .marker-widget .descriptioncontainer a,
.monaco-editor .marker-widget .descriptioncontainer .filename,
.monaco-editor .marker-widget .descriptioncontainer .code-link > span,
.monaco-editor .zone-widget .descriptioncontainer a,
.monaco-editor .zone-widget .descriptioncontainer .filename,
.monaco-editor .zone-widget .descriptioncontainer .code-link > span {
  color: var(--xk-monaco-link) !important;
}

.monaco-editor .marker-widget .descriptioncontainer,
.monaco-editor .zone-widget .descriptioncontainer {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .monaco-editor .marker-widget .descriptioncontainer,
  .monaco-editor .zone-widget .descriptioncontainer {
    padding-right: 14px !important;
  }

  .monaco-editor .marker-widget .descriptioncontainer .source,
  .monaco-editor .zone-widget .descriptioncontainer .source {
    display: none !important;
  }

  .monaco-editor .marker-widget .descriptioncontainer .message,
  .monaco-editor .zone-widget .descriptioncontainer .message {
    font-size: 13px !important;
    line-height: 17px !important;
  }
}



html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--xk-font-family);
  font-size: calc(16px * var(--xk-font-scale));
  background: #0f172a;
  color: #e5e7eb;
}


body.modal-open {
  overflow: hidden;
}

/* Typography prefs (set in DevTools; stored in browser localStorage) */
button, input, select, textarea {
  font-family: var(--xk-font-family);
}

code, pre, kbd, samp {
  font-family: var(--xk-mono-font-family);
}

/* Editors / terminals (override vendor CSS to allow scaling) */
.CodeMirror {
  font-family: var(--xk-mono-font-family);
  font-size: calc(14px * var(--xk-mono-font-scale));
}

.xterm {
  font-family: var(--xk-mono-font-family);
  font-size: calc(14px * var(--xk-mono-font-scale));
}

/* Generic utility class (used across UI): hide any element. */
.hidden { display: none !important; }


a {
  color: #60a5fa;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

/* DevTools (and other wide pages): use most of the screen width */
.container-wide {
  max-width: var(--xk-container-max-width, min(1680px, calc(100vw - 28px)));
}

/* --------------------------------------------------------------
   Layout preferences (stored in localStorage via js/ui/layout.js)
   -------------------------------------------------------------- */

/* Compact mode: tighter spacing */
html[data-xk-compact="1"] .container { padding: 16px; }
html[data-xk-compact="1"] header { margin-bottom: 16px; }
html[data-xk-compact="1"] .card {
  padding: 12px 12px 14px;
  margin-bottom: 12px;
}
html[data-xk-compact="1"] .card h2 { margin-bottom: 6px; }
html[data-xk-compact="1"] .card p { margin-bottom: 8px; }
html[data-xk-compact="1"] .actions { gap: 8px; }

/* Hide hints/descriptions (keep statuses/errors visible) */
html[data-xk-hide-hints="1"] header p { display: none !important; }
html[data-xk-hide-hints="1"] .small { display: none !important; }
html[data-xk-hide-hints="1"] #routing-help-line { display: none !important; }

/* File Manager: hide the bottom hotkeys hints line */
html[data-xk-hide-fm-hotkeys="1"] .fm-hints { display: none !important; }

/* Hide helper/description texts inside cards (Layout tweaks) */
html[data-xk-hide-card-desc="1"] .card .xk-card-desc { display: none !important; }
html[data-xk-hide-card-desc="1"] .card .mode-item small { display: none !important; }
/* Also hide common description blocks that are not explicitly marked. */
html[data-xk-hide-card-desc="1"] .card p { display: none !important; }
html[data-xk-hide-card-desc="1"] .card .hint { display: none !important; }

/* Favorites marker for pinned tabs */
.top-tab-btn.xk-tab-fav::after {
  content: "★";
  margin-left: 6px;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.85;
}

/* Drag&drop UX for top tabs */
.top-tab-btn.xk-tab-dragging { opacity: 0.6; }
.top-tab-btn.xk-tab-drop-target,
.top-tab-btn.xk-tab-drop { outline: 2px dashed color-mix(in srgb, var(--accent, #60a5fa) 55%, transparent); outline-offset: 2px; }


header {
  margin-bottom: 24px;
}

header h1 {
  margin: 0 0 4px;
  font-size: calc(28px * var(--xk-font-scale));
}


header p {
  margin: 0;
  color: #9ca3af;
}

.header-main {
  /* 3 зоны: слева заголовок, по центру выбор ядра, справа действия */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
}

.header-title-group { justify-self: start; }
.header-center { justify-self: center; }
.header-right { justify-self: end; }

/* Allow grid items in the header to shrink without overflowing the container */
.header-title-group,
.header-center,
.header-right {
  min-width: 0;
}

@media (max-width: 900px) {
  .header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .header-center {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* Правая группа в шапке: версия/ядро + действия (выйти + тема) */
.header-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* Держим «Выйти» и переключатель темы рядом (как единый блок) */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.theme-toggle-header {
  /* в шапке кнопка не плавающая */
  position: static;
  top: auto;
  right: auto;
}

.header-title-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.panel-header-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-header-shell .header-main {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 12px;
}

.panel-header-shell .header-title-group,
.panel-header-shell .header-center,
.panel-header-shell .header-right {
  min-width: 0;
}

.panel-header-shell .header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-header-shell .panel-shell-branding,
.panel-header-shell .panel-shell-status,
.panel-header-shell .panel-shell-core,
.panel-header-shell .panel-shell-badges,
.panel-header-shell .panel-shell-summary,
.panel-header-shell .panel-shell-actions-primary,
.panel-header-shell .panel-shell-actions-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.panel-header-shell .panel-shell-branding {
  max-width: 100%;
}

.panel-header-shell .panel-shell-status {
  flex: 0 1 auto;
}

.panel-header-shell .header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-header-shell .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}

.panel-header-shell .panel-shell-summary .last-load-badge {
  margin-left: 0;
}

.panel-header-shell .header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.panel-header-shell .panel-shell-actions-secondary {
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid color-mix(in srgb, var(--header-btn-border, #94c5ff2e) 75%, transparent);
}

@media (max-width: 1100px) {
  .panel-header-shell .header-main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .panel-header-shell .header-right {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

@media (max-width: 900px) {
  .panel-header-shell .header-main {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .panel-header-shell .header-title-group,
  .panel-header-shell .header-center,
  .panel-header-shell .header-right {
    width: 100%;
    justify-self: stretch;
  }

  .panel-header-shell .header-center {
    order: 2;
    justify-content: flex-start;
  }

  .panel-header-shell .header-right {
    order: 3;
    justify-content: space-between;
  }

  .panel-header-shell .header-actions {
    justify-content: flex-start;
  }

  .panel-header-shell .panel-shell-actions-secondary {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}

/* Optional branding logo in header (configured in DevTools) */
.xk-brand-logo {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
  padding: 2px;
  flex: 0 0 auto;
}


.service-status-text {
  display: none; /* текст статуса убран, остаётся только всплывающая подсказка на лампочке */
}

.service-status-lamp {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #6b7280;
  box-shadow: none;
  cursor: help;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}


/* Сервис запущен */
.service-status-lamp[data-state="running"] {
  background: var(--sem-success, #22c55e);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
  animation: service-status-pulse 1s infinite;
}

/* Остановлен */
.service-status-lamp[data-state="stopped"] {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(248, 113, 113, 0.7);
}

/* Проверка / ожидание */
.service-status-lamp[data-state="pending"] {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
  animation: service-status-pulse 1s infinite;
}

/* Ошибка / неизвестно */
.service-status-lamp[data-state="error"] {
  background: var(--sem-warning, #f97316);
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.7);
  box-shadow: 0 0 6px color-mix(in srgb, var(--sem-warning, #f97316) 70%, transparent);
}

@keyframes service-status-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.7;
  }
}



.service-core-text {
  font-size: calc(12px * var(--xk-font-scale));
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Self-update notifier pill (header) */
.service-core-text .xk-update-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sem-warning, #fbbf24);
  box-shadow: 0 0 6px color-mix(in srgb, var(--sem-warning, #fbbf24) 70%, transparent);
  display: none;
}

.service-core-text.xk-update-available {
  border-color: color-mix(in srgb, var(--sem-warning, #fbbf24) 55%, transparent);
  background: color-mix(in srgb, var(--sem-warning, #fbbf24) 12%, var(--header-btn-bg, #020617) 88%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sem-warning, #fbbf24) 35%, transparent);
}

.service-core-text.xk-update-available .xk-update-dot {
  display: inline-block;
  animation: service-status-pulse 1.4s ease-in-out infinite;
}

.service-core-text.has-core {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--header-btn-bg, #020617) 88%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
}

.last-load-badge {
  margin-left: 16px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #1f2937);
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  white-space: nowrap;
  align-self: center;
  background: color-mix(in srgb, var(--bg, #0f172a) 70%, var(--card-bg, #020617) 30%);
}

/* Когда бейдж стоит рядом с кнопками управления — используем gap вместо margin */
.xkeen-ctrl-row .last-load-badge {
  margin-left: 0;
}

.last-load-badge.last-load-loaded {
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 55%, transparent);
  color: color-mix(in srgb, var(--sem-success, #22c55e) 55%, var(--text, #e5e7eb) 45%);
}

.last-load-badge.last-load-saved {
  border-color: color-mix(in srgb, var(--sem-info, #93c5fd) 55%, transparent);
  color: color-mix(in srgb, var(--sem-info, #93c5fd) 55%, var(--text, #e5e7eb) 45%);
}

.last-load-badge.last-load-error {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 55%, transparent);
  color: color-mix(in srgb, var(--sem-error, #f87171) 55%, var(--text, #e5e7eb) 45%);
}


.service-core-text.has-core:hover {
  text-decoration: underline;
}

.core-select-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.core-option {
  padding: 4px 12px;
  font-size: calc(12px * var(--xk-font-scale));
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.core-option:hover {
  background: linear-gradient(135deg, var(--editor-btn-active-from, #1d4ed8), var(--editor-btn-active-to, #2563eb));
  border-color: var(--editor-btn-active-to, #2563eb);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 45%, transparent);
  transform: translateY(-1px);
}

.core-option.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sem-success, #22c55e) 70%, var(--card-bg, #020617) 30%), var(--sem-success, #22c55e));
  border-color: var(--sem-success, #22c55e);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sem-success, #22c55e) 45%, transparent);
}

.core-option[disabled] {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  background: var(--header-btn-bg, #020617);
}




.card {
  background: #020617;
  border-radius: 12px;
  padding: 16px 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid #1f2937;
}

.card h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: calc(20px * var(--xk-font-scale));
}

.card p {
  margin-top: 0;
  margin-bottom: 12px;
  color: #9ca3af;
  /* Card descriptions should respect the "Размер описаний" layout tweak. */
  font-size: calc(1em * var(--xk-card-desc-scale, 1));
  line-height: 1.4;
}

textarea#routing-editor {
  width: 100%;
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* +1 for readability */
  font-size: calc(16px * var(--xk-font-scale));
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  resize: vertical;
  box-sizing: border-box;
}



/* Monaco editor container (hidden unless enabled via Routing editor toggle) */
.xk-monaco-editor {
  width: 100%;
  min-height: 300px;
  height: 76vh;
  border-radius: 8px;
  border: 1px solid #111827;
  background: var(--header-btn-bg, #020617);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

/* Monaco editor size variant for modal dialogs */
.xk-monaco-editor--modal {
  height: 60vh;
}

/* Monaco editor size variant for small previews */
.xk-monaco-editor--small {
  height: 36vh;
  min-height: 240px;
}

html[data-theme="light"] .xk-monaco-editor {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

/* Editor engine selector (CodeMirror / Monaco) */
.xk-editor-engine,
.xk-routing-engine {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 0;
}

/* Inline editor toolbar row (engine select + small status chips). */
.xk-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 8px;
}

/* Allow the left side (engine select) to stay compact; chip hugs content. */
.xk-editor-toolbar .xk-editor-engine {
  margin-right: 0;
  flex: 0 0 auto;
}

.xk-editor-engine-label,
.xk-routing-engine-label {
  display: none;
}

.xk-editor-engine-select,
.xk-routing-engine-select {
  border-radius: 9999px;
  padding: 7px 32px 7px 12px;
  font-size: calc(12px * var(--xk-font-scale));
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--text, #e5e7eb);
  outline: none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.40);
  cursor: pointer;
  line-height: 1.15;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3b3c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

.xk-editor-engine-select:focus,
.xk-routing-engine-select:focus {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #60a5fa) 22%, transparent);
}

html[data-theme="light"] .xk-editor-engine-select,
html[data-theme="light"] .xk-routing-engine-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.xk-editor-engine-select option,
.xk-routing-engine-select option {
  background: var(--card-bg, #020617);
  color: var(--text, #e5e7eb);
}

html[data-theme="light"] .xk-editor-engine-select option,
html[data-theme="light"] .xk-routing-engine-select option {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
}

.xk-editor-engine-help,
.xk-routing-engine-help {
  width: 32px;
  height: 32px;
  line-height: 1;
}

.xkeen-textarea {
  width: 100%;
  min-height: 200px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* +1 for readability */
  font-size: calc(16px * var(--xk-font-scale));
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  resize: vertical;
  box-sizing: border-box;
}

.CodeMirror {
  border-radius: 8px;
  border: 1px solid #111827;
  background: #01030a;
  /* Let CodeMirror grow with content; avoid conflicting manual resize */
  height: auto;
  min-height: 300px;
  font-family: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

  /* +1 for readability */
  font-size: calc(16px * var(--xk-font-scale));
  line-height: 1.45;
}

/* Make editor lines a bit taller for readability */
.CodeMirror pre {
  line-height: 1.45;
}

/* XKeen: Ports/Excludes (incl. xkeen.json) — двухколоночная сетка мини‑редакторов */
.xkeen-files-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  /* Stretch items so both cards in a row look одинаковыми по высоте */
  align-items: stretch;
}

@media (max-width: 900px){
  .xkeen-files-grid{ grid-template-columns: 1fr; }
}

.xkeen-mini-editor{
  min-width: 0;
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;

  /* Make inner editor area fill available height when grid row is taller */
  display: flex;
  flex-direction: column;
  height: 100%;
}

html[data-theme="light"] .xkeen-mini-editor{
  background: linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.015));
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset;
}

.xkeen-mini-head h3{
  margin: 0 0 4px;
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 700;
}

.xkeen-mini-head .xk-card-desc{
  margin: 0 0 8px;
}

.xkeen-mini-editor .xkeen-textarea{
  /* Grow to keep card heights consistent across the row */
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
  font-size: calc(14px * var(--xk-font-scale));
}

.xkeen-mini-editor .CodeMirror{
  /* Fill the available space inside fixed-height mini card so there is no big gap above Save button */
  flex: 1 1 auto;
  min-height: 220px;
  height: auto !important;
  box-shadow: none;
}

/* XKeen mini editors: одинаковая высота карточек + выравнивание кнопок сохранения */
.xkeen-mini-editor{
  /* One consistent height for all 4 mini editors so they look uniform */
  height: clamp(360px, 42vh, 520px);
}


/* Reserve equal header space across cards so editor boxes stay одинаковыми */
.xkeen-mini-head{
  min-height: calc(86px * var(--xk-font-scale));
}

.xkeen-mini-head .xk-card-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* On narrow screens (one column) allow natural height */
@media (max-width: 900px){
  .xkeen-mini-editor{ height: auto; }
}

/* Let the textarea occupy the same predictable area and prevent manual resize from breaking alignment */
.xkeen-mini-editor .xkeen-textarea{
  min-height: 220px;
  resize: none;
}

/* Push the save button block to the bottom so buttons are on one horizontal line within each row */
.xkeen-mini-editor .actions{
  /* Keep buttons aligned in the row, but reduce the visual gap */
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: nowrap;
}

.xkeen-mini-editor .actions button{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep status line from growing vertically (prevents footer height mismatch) */
.xkeen-mini-editor .status{
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Make scrolling predictable and avoid white gaps */
.CodeMirror-scroll {
  max-height: 76vh;
  background-color: #01030a;

  /* Keep scrolling predictable */
  overflow: auto !important;
  overflow-anchor: none;
}

/* Routing Xray: make the main editor noticeably larger on wide screens */
#routing-body .CodeMirror {
  min-height: clamp(360px, 60vh, 900px);
}

#routing-body .CodeMirror-scroll {
  max-height: 78vh;
}

/* Keep Monaco and CM6 at the same viewport-bound height in the main routing card.
   Monaco already feels right here, so expose one shared sizing contract and apply it
   to both engines. This avoids the smaller-looking CM6 viewport on some layouts. */
#routing-body {
  --xk-routing-editor-min-height: clamp(360px, 60vh, 900px);
  --xk-routing-editor-height: clamp(360px, 76vh, 900px);
  --xk-routing-editor-max-height: 78vh;
}

#routing-body[data-routing-engine="monaco"] .CodeMirror,
#routing-body[data-routing-engine="monaco"] #routing-editor {
  display: none !important;
}

#routing-body[data-routing-engine="monaco"] #routing-editor-monaco {
  display: block !important;
}

#routing-body[data-routing-engine="codemirror"] #routing-editor-monaco {
  display: none !important;
}

#routing-body #routing-editor-monaco,
#routing-body .xkeen-cm6-host {
  min-height: var(--xk-routing-editor-min-height) !important;
  height: var(--xk-routing-editor-height) !important;
  max-height: var(--xk-routing-editor-max-height) !important;
}

/*
  IMPORTANT (auto-height CodeMirror)
  ---------------------------------
  Our UI uses `height: auto` on the `.CodeMirror` wrapper + `max-height` on
  `.CodeMirror-scroll`.

  CodeMirror 5 default CSS uses `margin-bottom: -50px` on `.CodeMirror-scroll`
  as part of its scrollbar layout hack. When the wrapper height is auto, that
  negative margin makes the wrapper shorter and the last visible line gets
  clipped in some editors.

  Fix: neutralize the negative bottom margin for our editors and keep a small
  bottom padding so the last line is always fully visible.
*/
.xkeen-cm .CodeMirror-scroll {
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
}

.xkeen-cm .CodeMirror-gutter {
  margin-bottom: 0 !important;
}


/*
  Fullscreen (CodeMirror addon/display/fullscreen)
  ------------------------------------------------
  We intentionally cap editor height in normal mode via `max-height: 70vh`.
  But in fullscreen CodeMirror only adds `.CodeMirror-fullscreen` on the
  wrapper; without overrides the scroll area stays capped, so fullscreen looks
  "crooked" (big empty space below/aside).
*/
.CodeMirror.CodeMirror-fullscreen {
  /* Make sure the editor overlays the whole UI (sidebar/header, etc.) */
  z-index: 10000;
  border-radius: 0;
}

.CodeMirror.CodeMirror-fullscreen .CodeMirror-scroll {
  max-height: none !important;
  height: 100% !important;
}

.cm-error-line {
  background: rgba(220, 38, 38, 0.15);
}

.xk-routing-error-gutter-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff7f7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.35);
}

.actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions button {
  flex: 1 1 210px;
  text-align: center;
  white-space: normal;
}

/*
  Two-column compact actions grid (used in side cards like Inbounds/Outbounds)
  Keeps actions visually dense without changing the global .actions behavior.
*/
.actions.xk-actions-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.actions.xk-actions-grid-2 button {
  width: 100%;
  flex: unset;
  min-width: 0;
  white-space: nowrap;
}

/*
  Inline icon toolbar (used in small cards like Inbounds/Outbounds)
  - single row
  - icon-only buttons with tooltips
*/
.actions.xk-actions-inline{
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

/* Stretch icon buttons to occupy the whole card width (equal columns) */
.actions.xk-actions-inline button{
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  white-space: nowrap;
}

/* Override fixed .btn-icon size inside the inline toolbar */
.actions.xk-actions-inline .btn-icon{
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  border-radius: 12px;
}

/* Minor spacing tweak for dt-switch used inside cards */
.xk-mini-switch{ margin-top: 10px; }

/* Make the mini switch span the whole card width */
.dt-switch.xk-mini-switch{
  width: 100%;
  display: flex;
  box-sizing: border-box;
}
.dt-switch.xk-mini-switch .dt-switch-label{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

/*
  В шапке некоторых страниц используется контейнер .actions (для кнопки "Назад" + действий справа).
  Общие правила .actions button растягивают кнопки до flex-basis 210px, из-за чего переключатель темы
  становится огромным и переносит DevTools/Выйти на следующую строку.
  Для блока .header-actions (правый угол) отключаем это поведение.
*/
.actions .header-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}


button {
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: calc(14px * var(--xk-font-scale));
  cursor: pointer;
  background: var(--editor-btn-bg, #020617);
  border: 1px solid var(--editor-btn-border, #1f2937);
  color: var(--editor-btn-text, #e5e7eb);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.7);
  transition:
    background 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

button:hover {
  background: var(--editor-btn-hover-bg, var(--editor-btn-bg, #020617));
  border-color: var(
    --editor-btn-hover-border,
    var(--editor-btn-border-hover, var(--editor-btn-border, #1f2937))
  );
  color: var(--editor-btn-hover-text, var(--editor-btn-text, #e5e7eb));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.9);
  transform: translateY(-1px);
}

button:active {
  background: linear-gradient(
    135deg,
    var(--editor-btn-active-from, #1d4ed8),
    var(--editor-btn-active-to, #2563eb)
  );
  border-color: var(--editor-btn-active-to, #2563eb);
  transform: translateY(1px) scale(0.99);
  /* fallback */
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  /* prefer theme-aware shadow when supported */
  box-shadow: 0 6px 16px color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 45%, transparent);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

/*
  Tooltips (описания на кнопках)
  --------------------------------
  Используется атрибут: data-tooltip="..."
*/

/*
  IMPORTANT:
  Для мест с overflow:hidden/scroll (модалки, тулбары, шапки) псевдо-элементы
  ::before/::after могут обрезаться по границам контейнера.
  Поэтому по умолчанию включён "портальный" тултип (JS рендерит его в <body>
  с position:fixed). Если он активен – отключаем CSS-псевдо-рендеринг,
  чтобы не было дубля.
*/
.xk-tooltip-portal [data-tooltip]::after,
.xk-tooltip-portal [data-tooltip]::before {
  display: none !important;
}

/* Portal tooltip (fixed-position, not clipped by containers) */
#xk-tooltip-portal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  opacity: 0;
  transition: opacity 0.08s ease;
}

#xk-tooltip-portal[hidden] {
  display: none;
}

#xk-tooltip-portal .xk-tooltip-bubble {
  position: relative;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.25;
  text-align: center;
  width: max-content;
  max-width: 320px;
  white-space: normal;

  background: var(--xk-tooltip-bg, rgba(15, 23, 42, 0.95));
  -webkit-backdrop-filter: var(--xk-tooltip-backdrop, none);
  backdrop-filter: var(--xk-tooltip-backdrop, none);
  border: 1px solid var(--xk-tooltip-border, rgba(148, 163, 184, 0.25));
  color: var(--xk-tooltip-text, #e5e7eb);
  box-shadow: 0 10px 30px var(--xk-tooltip-shadow, rgba(0, 0, 0, 0.55));
}

#xk-tooltip-portal .xk-tooltip-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  -webkit-backdrop-filter: var(--xk-tooltip-backdrop, none);
  backdrop-filter: var(--xk-tooltip-backdrop, none);
  border-left: 1px solid var(--xk-tooltip-border, rgba(148, 163, 184, 0.25));
  border-top: 1px solid var(--xk-tooltip-border, rgba(148, 163, 184, 0.25));
  transform: rotate(45deg);
}

#xk-tooltip-portal[data-pos="top"] .xk-tooltip-arrow {
  bottom: -6px;
}

#xk-tooltip-portal[data-pos="bottom"] .xk-tooltip-arrow {
  top: -6px;
  transform: rotate(225deg);
}
button[data-tooltip] {
  position: relative;
}

button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);

  opacity: 0;
  pointer-events: none;

  padding: 8px 10px;
  border-radius: 12px;
  background: var(--xk-tooltip-bg, rgba(15, 23, 42, 0.95));
  -webkit-backdrop-filter: var(--xk-tooltip-backdrop, none);
  backdrop-filter: var(--xk-tooltip-backdrop, none);
  border: 1px solid var(--xk-tooltip-border, rgba(148, 163, 184, 0.25));
  color: var(--xk-tooltip-text, #e5e7eb);

  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.25;
  text-align: center;

  width: max-content;
  max-width: 320px;
  white-space: normal;

  box-shadow: 0 10px 30px var(--xk-tooltip-shadow, rgba(0, 0, 0, 0.55));
  z-index: 9999;
}

button[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);

  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--xk-tooltip-bg, rgba(15, 23, 42, 0.95));

  opacity: 0;
  pointer-events: none;
  z-index: 10000;
}

button[data-tooltip]:hover::after,
button[data-tooltip]:hover::before {
  opacity: 1;
}

@media (hover: none) {
  button[data-tooltip]::after,
  button[data-tooltip]::before {
    display: none;
  }
}

/* Themed tooltip for any non-button element with data-tooltip */
[data-tooltip]:not(button):not(input):not(textarea):not(select) {
  position: relative;
}

[data-tooltip]:not(button):not(input):not(textarea):not(select)::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);

  opacity: 0;
  pointer-events: none;

  padding: 8px 10px;
  border-radius: 12px;
  background: var(--xk-tooltip-bg, rgba(15, 23, 42, 0.95));
  -webkit-backdrop-filter: var(--xk-tooltip-backdrop, none);
  backdrop-filter: var(--xk-tooltip-backdrop, none);
  border: 1px solid var(--xk-tooltip-border, rgba(148, 163, 184, 0.25));
  color: var(--xk-tooltip-text, #e5e7eb);

  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.25;
  text-align: center;

  width: max-content;
  max-width: 320px;
  white-space: normal;

  box-shadow: 0 10px 30px var(--xk-tooltip-shadow, rgba(0, 0, 0, 0.55));
  z-index: 9999;
}

[data-tooltip]:not(button):not(input):not(textarea):not(select)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);

  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--xk-tooltip-bg, rgba(15, 23, 42, 0.95));

  opacity: 0;
  pointer-events: none;
  z-index: 10000;
}

[data-tooltip]:not(button):not(input):not(textarea):not(select):hover::after,
[data-tooltip]:not(button):not(input):not(textarea):not(select):hover::before {
  opacity: 1;
}

@media (hover: none) {
  [data-tooltip]:not(button):not(input):not(textarea):not(select)::after,
  [data-tooltip]:not(button):not(input):not(textarea):not(select)::before {
    display: none;
  }
}

.status {
  margin-top: 8px;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
}


.error {
  margin-top: 6px;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--sem-error, #fca5a5);
}

/* Подсказка про loglevel=info для domain hints на access.log */
.xray-log-domain-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border: 1px solid var(--sem-warning, #f59e0b);
  border-radius: 6px;
  background: color-mix(in srgb, var(--sem-warning, #f59e0b) 12%, transparent);
  color: var(--fg, #e5e7eb);
}

.xray-log-domain-hint .dt-log-btn {
  margin-left: auto;
}

/* Активное состояние: доменные имена уже отображаются */
.xray-log-domain-hint.is-active {
  border-color: var(--sem-success, #22c55e);
  background: color-mix(in srgb, var(--sem-success, #22c55e) 12%, transparent);
}


.inbounds-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--card-bg, #020617);
  border: 1px solid var(--border, #1f2937);
}

.mode-item input {
  margin-top: 4px;
}

.mode-item strong {
  color: var(--text, #e5e7eb);
}

.mode-item small {
  color: var(--muted, #9ca3af);
  font-size: calc(12px * var(--xk-font-scale) * var(--xk-card-desc-scale, 1));
  line-height: 1.35;
}

/* Generic card description helper text (used on some <p>/<small> elements in templates)
   NOTE: include a more specific selector to override generic ".card p" sizing. */
.xk-card-desc,
.card .xk-card-desc {
  color: var(--muted, #9ca3af);
  font-size: calc(13px * var(--xk-font-scale) * var(--xk-card-desc-scale, 1));
  line-height: 1.4;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(14px * var(--xk-font-scale));
  margin-top: 10px;
  color: var(--muted, #9ca3af);
}

.toggle input {
  width: 16px;
  height: 16px;
}

.outbounds-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 38px;
  gap: 8px;
  align-items: center;
  position: relative;
}

#outbounds-url {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  padding: 8px 12px;
  font-size: calc(14px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.outbounds-tag-menu {
  position: relative;
}

.outbounds-tag-menu > summary {
  list-style: none;
}

.outbounds-tag-menu > summary::-webkit-details-marker {
  display: none;
}

.outbounds-tag-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: #9db4d8;
  cursor: pointer;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.outbounds-tag-menu[open] .outbounds-tag-trigger,
.outbounds-tag-trigger:hover,
.outbounds-tag-trigger:focus-visible {
  border-color: rgba(96, 165, 250, 0.75);
  color: #e5f0ff;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.24), 0 0 16px rgba(59, 130, 246, 0.18);
}

.outbounds-tag-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(236px, calc(100vw - 32px));
  box-sizing: border-box;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 14px;
  background: rgba(2, 8, 23, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  padding: 10px;
}

.outbounds-tag-panel label {
  display: block;
  margin: 0 0 6px;
  color: #9db4d8;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

#outbounds-tag {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  padding: 8px 12px;
  font-size: calc(14px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.xk-entware-mark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  min-width: 38px;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  background: rgba(15, 23, 42, 0.72);
  color: #bfdbfe;
  font-size: calc(16px * var(--xk-font-scale));
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.xk-entware-mark-toggle:hover {
  border-color: rgba(125, 211, 252, 0.64);
  background: rgba(30, 41, 59, 0.88);
  color: #e0f2fe;
}

.xk-entware-mark-toggle.is-active {
  border-color: rgba(45, 212, 191, 0.72);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.78), rgba(37, 99, 235, 0.70));
  color: #f8fafc;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.16), 0 8px 18px rgba(14, 165, 233, 0.14);
}

.xk-entware-mark-toggle--pool,
.xk-entware-mark-toggle--sub {
  flex: 0 0 38px;
}

#outbounds-url:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

/* Outbounds: parsed preview + validation */
.outbounds-parse-box {
  margin-top: 10px;
  border: 1px solid var(--border, #374151);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(2, 6, 23, 0.55);
}

#outbounds-url.xk-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}

.outbounds-fragment-summary {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.outbounds-fragment-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.outbounds-fragment-summary-title {
  color: var(--text, #e5e7eb);
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1.2;
}

.outbounds-fragment-summary-file {
  margin-top: 3px;
  color: var(--muted, #94a3b8);
  font-size: calc(11px * var(--xk-font-scale));
  word-break: break-word;
}

.outbounds-fragment-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.10);
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  white-space: nowrap;
}

.outbounds-fragment-summary-meta {
  margin-top: 8px;
  color: #aab6c8;
  font-size: calc(12px * var(--xk-font-scale));
}

.outbounds-fragment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 118px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: rgba(96, 165, 250, 0.45) rgba(15, 23, 42, 0.18);
  scrollbar-width: thin;
}

.outbounds-fragment-tags::-webkit-scrollbar {
  width: 8px;
}

.outbounds-fragment-tags::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}

.outbounds-fragment-tags::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.45);
  border-radius: 999px;
}

.outbounds-fragment-tags code,
.outbounds-fragment-more,
.outbounds-fragment-empty {
  display: inline-flex;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.42);
  color: #dbeafe;
  font-size: calc(11px * var(--xk-font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
}

.outbounds-fragment-empty {
  color: #94a3b8;
}

#outbounds-body.xk-outbounds-summary-fragment .outbounds-hints,
#outbounds-body.xk-outbounds-summary-fragment .outbounds-url-row,
#outbounds-body.xk-outbounds-summary-fragment #outbounds-url,
#outbounds-body.xk-outbounds-summary-fragment .outbounds-tag-menu,
#outbounds-body.xk-outbounds-summary-fragment #outbounds-tag,
#outbounds-body.xk-outbounds-summary-fragment #outbounds-parse-box,
#outbounds-body.xk-outbounds-summary-fragment #outbounds-normalize-btn,
#outbounds-body.xk-outbounds-summary-fragment #outbounds-build-btn,
#outbounds-body.xk-outbounds-summary-fragment #outbounds-save-btn,
#outbounds-body.xk-outbounds-subscription-fragment #outbounds-pool-btn {
  display: none !important;
}

.outbounds-parse-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.outbounds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.4;
  border: 1px solid var(--border, #374151);
  color: var(--text, #e5e7eb);
  background: rgba(2, 6, 23, 0.35);
}

.outbounds-badge-ok {
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(34, 197, 94, 0.12);
}

.outbounds-badge-bad {
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.10);
}

.outbounds-parse-msg {
  margin-top: 8px;
  font-size: calc(12px * var(--xk-font-scale) * var(--xk-card-desc-scale, 1));
  line-height: 1.35;
}

.outbounds-parse-error {
  color: #fecaca;
}

.outbounds-parse-warn {
  color: #fde68a;
}

.outbounds-parse-kv {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.outbounds-kv-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(55, 65, 81, 0.5);
}

.outbounds-kv-row .k {
  color: var(--muted, #9ca3af);
  font-size: calc(12px * var(--xk-font-scale));
}

.outbounds-kv-row .v {
  color: var(--text, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  overflow-wrap: anywhere;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--xk-font-scale));
}

thead {
  background: #020617;
}

th, td {
  padding: 6px 8px;
  border-bottom: 1px solid #1f2937;
  text-align: left;
}

th {
  font-weight: 600;
  color: #9ca3af;
}

tbody tr:hover {
  background: #020617;
}
#backups-table .backups-empty-row:hover {
  background: transparent;
}


.hint {
  margin-top: 8px;
  font-size: calc(12px * var(--xk-font-scale) * var(--xk-card-desc-scale, 1));
  color: #9ca3af;
}

footer {
  margin-top: 16px;
  text-align: right;
  color: #6b7280;
  font-size: calc(11px * var(--xk-font-scale));
}

/* Panel footer (Routing page): keep the small signature on the left under the content. */
.panel-footer {
  text-align: left;
  padding-left: 2px;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  /* Header pill style (editable via DevTools → Theme & CSS variables → "Кнопки шапка") */
  border: 1px solid var(--header-btn-border, rgba(148, 163, 184, 0.35));
  background: var(--header-btn-bg, rgba(2, 6, 23, 0.6));
  color: var(--header-btn-text, #e5e7eb);
}

.btn-link:hover {
  text-decoration: none;
  background: var(--header-btn-hover-bg, rgba(17, 24, 39, 0.85));
  border-color: var(--header-btn-hover-border, var(--header-btn-border, rgba(148, 163, 184, 0.35)));
  color: var(--header-btn-hover-text, var(--header-btn-text, #e5e7eb));
}

.btn-link:active {
  transform: translateY(1px);
}

.btn-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #60a5fa) 55%, transparent);
  outline-offset: 2px;
}

/* Light theme defaults for header-style pills */
html[data-theme="light"] .btn-link {
  background: var(--header-btn-bg, rgba(248, 250, 252, 0.9));
  color: var(--fm-btn-text, var(--header-btn-text, #111827));
  border-color: var(--header-btn-border, rgba(15, 23, 42, 0.16));
}

html[data-theme="light"] .btn-link:hover {
  background: var(--header-btn-hover-bg, rgba(226, 232, 240, 0.9));
  border-color: var(--header-btn-hover-border, var(--header-btn-border, rgba(15, 23, 42, 0.16)));
  color: var(--header-btn-hover-text, var(--header-btn-text, #111827));
}

.xk-logout-form {
  display: inline-flex;
  margin: 0;
}

.xk-logout-form .btn-link,
.xk-logout-form .xk-header-btn {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.links li {
  margin-bottom: 4px;
}

.log-block {
  background: #020617;
  box-sizing: border-box;
  display: block;
  border-radius: 8px;
  border: 1px solid #1f2937;
  padding: 8px;
  font-size: calc(12px * var(--xk-font-scale));
  max-height: 260px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
}
.log-tag-info {
  color: var(--sem-info, #60a5fa);
  font-weight: 500;
}

.log-tag-warn {
  color: var(--sem-warning, #facc15);
  font-weight: 500;
}

.log-tag-error {
  color: var(--sem-error, #f97373);
  font-weight: 600;
}



/* Two-column main layout */
.layout-2col {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: flex-start;
}

/* Routing view: keep routing editor on the LEFT (wide) and auxiliary cards on the RIGHT (narrow) */
.layout-2col.routing-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  /* Make horizontal gutters between columns tighter on Routing Xray page */
  column-gap: 8px;
  /* Explicit areas: avoids auto-placement gaps when DOM order changes */
  grid-template-areas: "routing-center routing-side";
}

/* Routing Xray: make vertical spacing between stacked cards more compact */
.layout-2col.routing-layout .routing-col {
  gap: 8px;
}

/* Cards already have a global margin-bottom; remove it here and rely on the flex gap above. */
.layout-2col.routing-layout .routing-col > .card {
  margin-bottom: 0;
}

.layout-2col.routing-layout .routing-side-grid {
  gap: 8px;
}

.layout-2col.routing-layout .routing-side-grid > .card {
  margin-bottom: 0;
}

/* Restart log card spacing is handled by the column gap above */
.layout-2col.routing-layout .xk-routing-log-card {
  margin-top: 0;
}

/* Place the editor/rules column on the left even if DOM order differs */
.layout-2col.routing-layout .routing-col-center {
  grid-area: routing-center;
}

.layout-2col.routing-layout .routing-side {
  grid-area: routing-side;
}

/* DevTools: Tools tab uses a compact left column and a wide ENV editor on the right */
.dt-tools-layout {
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
}

.dt-tools-left {
  min-width: 0;
}

.dt-tools-right {
  min-width: 0;
}

.layout-main {
  min-width: 0;
}

.layout-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.layout-side .card {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .layout-2col {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-2col.routing-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "routing-center"
      "routing-side";
  }

  /* On smaller screens: keep DevTools readable */
  .dt-tools-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Log controls */
.log-card {
  margin-top: 16px;
}

/* Mihomo: make the gap between the editor card and the restart log minimal */
#view-mihomo > section.card {
  margin-bottom: 8px;
}

#view-mihomo > section.card.xk-mihomo-log-card {
  margin-top: 0;
}

/* Live логи Xray: fullscreen (card-level) */
.log-card.is-fullscreen{
  position: fixed !important;
  /* Use inset instead of 100vw/100vh to avoid scrollbar-related clipping */
  inset: 8px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 45;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.log-card.is-fullscreen .xray-log-block{
  /* Important: don't let the log <pre> size itself by content in flex layout */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 0 !important;
  overflow: auto !important;
  resize: none !important;
}

.log-card.is-fullscreen #xray-log-status{
  flex: 0 0 auto;
}

.log-card.xk-restart-log-card {
  position: relative;
}

html:not([data-theme="light"]) .log-card.xk-restart-log-card {
  background:
    linear-gradient(180deg, rgba(3, 8, 20, 0.96), rgba(1, 4, 9, 0.98)),
    #010409;
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 30%, rgba(51,65,85,0.86));
  box-shadow:
    0 0 0 1px rgba(96,165,250,0.08),
    0 18px 42px rgba(2,6,23,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.log-card.xk-restart-log-card.is-fullscreen {
  z-index: 10100;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.99)),
    #020617;
}

.log-card.xk-restart-log-card.is-fullscreen .log-block[data-xk-restart-log="1"] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 0 !important;
  overflow: auto !important;
  resize: none !important;
}

html[data-theme="light"] .log-card.xk-restart-log-card.is-fullscreen {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.99)),
    #f8fafc;
}

.log-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.log-header-row h2 {
  margin: 0;
}

.log-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.restart-log-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 150px;
  max-width: min(260px, 100%);
  flex: 1 1 180px;
}

.log-card.xk-restart-log-card .log-header-actions {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.log-card.xk-restart-log-card .log-header-actions > .log-btn,
.log-card.xk-restart-log-card .log-header-actions > .restart-log-fullscreen-btn {
  flex: 0 0 auto;
}

.log-card.xk-restart-log-card .log-header-actions > .restart-log-search {
  flex: 0 1 260px;
  min-width: 150px;
}

.restart-log-search-icon {
  position: absolute;
  left: 10px;
  color: color-mix(in srgb, var(--muted, #94a3b8) 78%, white 22%);
  font-size: calc(13px * var(--xk-font-scale));
  pointer-events: none;
}

.restart-log-search-input {
  width: 100%;
  min-height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--text, #e5e7eb);
  padding: 5px 30px 5px 28px;
  font: inherit;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.25;
  outline: none;
}

.restart-log-search-input:focus {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 44%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #38bdf8) 14%, transparent);
}

.restart-log-search-clear {
  position: absolute;
  right: 5px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--muted, #94a3b8) 82%, white 18%);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.restart-log-search-clear:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text, #e5e7eb);
}

.restart-log-search-clear[hidden] {
  display: none;
}

/* Xray live logs header: keep file/level selects compact after panel keep-alive
   re-activation instead of letting Safari stretch them across the whole actions row. */
.log-header-actions > .xray-log-select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

/* Hide horizontal scrollbar but keep scrollability */
.log-header-actions::-webkit-scrollbar {
  display: none;
}

.log-btn {
  font-size: calc(11px * var(--xk-font-scale));
  padding-inline: 10px;
}

/* XKeen commands block — premium compact redesign */
.commands-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(71, 85, 105, 0.34);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.94), rgba(2, 6, 23, 0.90));
  box-shadow:
    0 20px 60px rgba(2, 6, 23, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Generic collapsible card header used across the panel */
.commands-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.commands-header h2 {
  margin: 0;
  font-size: calc(14px * var(--xk-font-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c7d2fe;
}


.commands-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

#view-commands .commands-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.56));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(2, 6, 23, 0.20);
}

#view-commands .commands-header-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.commands-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.commands-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.commands-title-row .commands-title-action {
  min-height: 32px;
  padding-inline: 12px;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 22px rgba(2, 6, 23, 0.18);
}

.commands-title-row .commands-title-action:hover {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(15, 23, 42, 0.72);
}

#view-commands .commands-header h2 {
  margin: 0;
  font-size: calc(22px * var(--xk-font-scale));
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #e5eefc;
  text-transform: none;
}

.commands-title-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(37, 99, 235, 0.14);
  color: #dbeafe;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

#view-commands .commands-subtitle {
  margin: 8px 0 0;
  max-width: 74ch;
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.5;
}

#view-commands .commands-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

#view-commands .commands-header-actions .btn-secondary,
.commands-status-row .btn-mini,
#view-commands .log-header-actions .btn-secondary {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 22px rgba(2, 6, 23, 0.18);
}

#view-commands .commands-header-actions .btn-secondary:hover,
.commands-status-row .btn-mini:hover,
#view-commands .log-header-actions .btn-secondary:hover {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(15, 23, 42, 0.72);
}

/* Commands: cores status row (installed versions + update hints) */
.commands-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(15, 23, 42, 0.44));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 32px rgba(2, 6, 23, 0.18);
}

.commands-status-row .core-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.commands-status-row .core-pill.not-installed { opacity: 0.55; }

.commands-status-row .core-name {
  font-weight: 700;
  color: #c7d2fe;
  letter-spacing: 0.02em;
}

.commands-status-row .core-ver,
.commands-status-row .core-latest,
.commands-status-row .core-prerelease {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
}

.commands-status-row .core-ver {
  color: #e5e7eb;
  opacity: 0.96;
}

.commands-status-row .core-latest {
  color: #93c5fd;
  text-decoration: none;
  opacity: 0.9;
}

.commands-status-row .core-latest:hover {
  text-decoration: underline;
  opacity: 1;
}

.commands-status-row .core-prerelease {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(251, 146, 60, 0.28);
  background: rgba(251, 146, 60, 0.12);
  color: #fdba74;
  text-decoration: none;
  opacity: 0.95;
}

.commands-status-row .core-prerelease:hover {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.14);
  color: #fcd34d;
}

.commands-status-row .core-prerelease-ver {
  font-weight: 600;
}

.commands-status-row .btn-prerelease-action {
  border-color: rgba(251, 146, 60, 0.34);
  color: #fdba74;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.commands-status-row .btn-prerelease-action:hover {
  border-color: rgba(251, 191, 36, 0.42);
  color: #fcd34d;
}

.commands-status-row .btn-prerelease-action.loading::after {
  content: ' ...';
}

.commands-status-row .core-pill.has-update {
  border-color: rgba(251, 191, 36, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 0 0 1px rgba(251, 191, 36, 0.14);
}

.commands-status-row .core-pill.has-update .core-latest { color: #fbbf24; }

.commands-status-row .core-pill.has-error {
  border-color: rgba(239, 68, 68, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 0 0 1px rgba(239, 68, 68, 0.12);
}

.commands-status-row .cores-checked-at {
  margin-left: auto;
  font-size: calc(12px * var(--xk-font-scale));
  color: #94a3b8;
  opacity: 0.92;
  white-space: nowrap;
}

.commands-status-row .btn-mini {
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
}

.commands-status-row #cores-check-btn.loading { opacity: 0.78; }
.commands-status-row #cores-check-btn.loading::after {
  content: '…';
  margin-left: 6px;
  opacity: 0.9;
}

/* Routing card header: keep collapse arrow pinned to the right (the active-file line may be hidden). */
#routing-header #routing-arrow{
  margin-left: auto;
}

#commands-arrow {
  font-size: calc(14px * var(--xk-font-scale));
  opacity: 0.8;
}

#view-commands #commands-body {
  column-count: 3;
  column-gap: 14px;
}

#view-commands #commands-body .command-group {
  --xk-cmd-accent: 96, 165, 250;
  position: relative;
  display: block;
  width: auto;
  margin: 0 0 14px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(71, 85, 105, 0.32);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 14px 36px rgba(2, 6, 23, 0.18);
  overflow: hidden;
}

#view-commands #commands-body .command-group::before {
  content: none;
}

#view-commands #commands-body .command-group::after {
  content: '';
  position: absolute;
  right: -18px;
  top: -18px;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--xk-cmd-accent), 0.06), transparent 72%);
  pointer-events: none;
}

#view-commands #commands-body .command-group[data-tone="warn"] { --xk-cmd-accent: 245, 158, 11; }
#view-commands #commands-body .command-group[data-tone="danger"] { --xk-cmd-accent: 248, 113, 113; }
#view-commands #commands-body .command-group[data-tone="ok"] { --xk-cmd-accent: 52, 211, 153; }
#view-commands #commands-body .command-group[data-tone="info"] { --xk-cmd-accent: 96, 165, 250; }

#view-commands #commands-body .command-group + .command-group {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.command-group-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.command-group-title {
  min-width: 0;
  font-size: calc(12px * var(--xk-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #9ca3af;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}

.command-group-title .cgt-key {
  font-weight: 800;
}

.command-group-title .cgt-rest {
  font-weight: 600;
  color: inherit;
}

.command-group-title.tone-warn .cgt-key { color: var(--xk-cmd-tone-warn); }
.command-group-title.tone-danger .cgt-key { color: var(--xk-cmd-tone-danger); }
.command-group-title.tone-ok .cgt-key { color: var(--xk-cmd-tone-ok); }
.command-group-title.tone-info .cgt-key { color: var(--xk-cmd-tone-info); }

.command-group-count {
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--xk-cmd-accent), 0.14);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.56));
  color: rgba(226, 232, 240, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(2, 6, 23, 0.14),
    0 0 0 1px rgba(var(--xk-cmd-accent), 0.04);
}

.command-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  column-gap: 7px;
  row-gap: 7px;
}

.command-item-wrap {
  margin: 0;
  padding: 0;
}

.command-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.36);
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0.60));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 10px 20px rgba(2, 6, 23, 0.14);
  font-size: calc(12px * var(--xk-font-scale));
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.10s ease,
    box-shadow 0.15s ease;
  width: 100%;
  white-space: nowrap;
  user-select: none;
}

.command-item-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--xk-cmd-accent), 0.22);
  background: rgba(var(--xk-cmd-accent), 0.12);
  color: rgba(226, 232, 240, 0.96);
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-item code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.command-item.loading {
  opacity: 0.72;
  cursor: wait;
}

.command-item.loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-top-color: #e5e7eb;
  animation: xkeen-spinner 0.8s linear infinite;
}

.command-item:hover {
  border-color: rgba(var(--xk-cmd-accent), 0.54);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 28px rgba(2, 6, 23, 0.18),
    0 0 0 1px rgba(var(--xk-cmd-accent), 0.10);
  transform: translateY(-1px);
}

.command-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.command-item-icon {
  font-size: calc(10px * var(--xk-font-scale));
  opacity: 0.85;
}

.command-item-code code {
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(30, 64, 175, 0.9);
  padding: 2px 8px;
  font-size: calc(12px * var(--xk-font-scale));
}

.command-item-desc {
  color: #9ca3af;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.4;
}

@media (max-width: 1100px) {
  #view-commands #commands-body { column-count: 2; }
}

@media (max-width: 900px) {
  #view-commands .commands-header {
    flex-direction: column;
    align-items: stretch;
  }

  .commands-title-row .commands-title-action {
    min-height: 30px;
    padding-inline: 11px;
  }

  .command-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #view-commands #commands-body { column-count: 1; }

  .commands-card {
    padding: 10px;
    border-radius: 18px;
  }

  #view-commands .commands-header,
  .commands-status-row,
  #view-commands #commands-body .command-group {
    border-radius: 16px;
  }

  #view-commands .commands-header {
    padding: 12px;
  }

  #view-commands .commands-header h2 {
    font-size: calc(18px * var(--xk-font-scale));
  }

  .command-list {
    grid-template-columns: 1fr;
  }

  .commands-status-row .cores-checked-at {
    width: 100%;
    margin-left: 0;
  }
}

html[data-theme="light"] .commands-card {
  border-color: rgba(15, 23, 42, 0.12);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 28%),
    radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

html[data-theme="light"] #view-commands .commands-header {
  border-color: rgba(37, 99, 235, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(241,245,249,0.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] #view-commands .commands-header h2 { color: #0f172a; }
html[data-theme="light"] #view-commands .commands-title-row .commands-title-action {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 20px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] #view-commands .commands-title-row .commands-title-action:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(255,255,255,0.96);
}
html[data-theme="light"] #view-commands .commands-kicker { color: #64748b; }
html[data-theme="light"] #view-commands .commands-title-chip {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
}
html[data-theme="light"] #view-commands .commands-subtitle { color: #475569; }

html[data-theme="light"] #view-commands .commands-header-actions .btn-secondary,
html[data-theme="light"] .commands-status-row .btn-mini,
html[data-theme="light"] #view-commands .log-header-actions .btn-secondary {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 20px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .commands-status-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,250,252,0.92));
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 22px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .commands-status-row .core-pill {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .commands-status-row .core-name { color: #1f2a44; }
html[data-theme="light"] .commands-status-row .core-ver { color: #0f172a; }
html[data-theme="light"] .commands-status-row .core-latest { color: #2563eb; }
html[data-theme="light"] .commands-status-row .core-prerelease {
  border-color: rgba(194, 65, 12, 0.18);
  background: rgba(251, 146, 60, 0.12);
  color: #c2410c;
}
html[data-theme="light"] .commands-status-row .btn-prerelease-action {
  border-color: rgba(194, 65, 12, 0.24);
  color: #c2410c;
}
html[data-theme="light"] .commands-status-row .cores-checked-at { color: #475569; }

html[data-theme="light"] #view-commands #commands-body .command-group {
  border-color: rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 26px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .command-group-title { color: #64748b; }
html[data-theme="light"] .command-group-count {
  border-color: rgba(var(--xk-cmd-accent), 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.92));
  color: #334155;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 18px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(var(--xk-cmd-accent), 0.03);
}

html[data-theme="light"] .command-item {
  border-color: rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 18px rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

html[data-theme="light"] .command-item-prefix {
  color: #334155;
}

html[data-theme="light"] .command-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,245,249,0.96));
}

#view-commands .log-card {
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(71, 85, 105, 0.32);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0.88));
  box-shadow:
    0 18px 50px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

#view-commands .log-header-row {
  align-items: center;
}

#view-commands .log-header-row h2 {
  font-size: calc(18px * var(--xk-font-scale));
  letter-spacing: -0.01em;
}

#view-commands .log-card .log-block {
  min-height: 280px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

html[data-theme="light"] #view-commands .log-card {
  border-color: rgba(15, 23, 42, 0.12);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

html[data-theme="light"] #view-commands .log-card .log-block {
  border-color: rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.96));
}

.layout-single {

  max-width: 960px;
  margin: 0 auto;
}

/* XKeen editors: make CodeMirror text brighter and comments более заметными */
.cm-s-material-darker.CodeMirror {
  color: #e5e7eb;
  background: #01030a;
}

/* Комментарии: приглушённые серо-синие в тёмной теме */
.cm-s-material-darker .cm-comment {
  color: #64748b;
  font-style: italic;
}

/* Ключи JSON/YAML (названия полей) */
.cm-s-material-darker .cm-property {
  color: #60a5fa;
}

/* Строки (пути, значения) */
.cm-s-material-darker .cm-string {
  color: #a3e635;
}

/* Числа */
.cm-s-material-darker .cm-number {
  color: #f97316;
}

/* true / false / null и прочие атомы */
.cm-s-material-darker .cm-atom {
  color: #22d3ee;
}

/* Скобки, запятые, двоеточия */
.cm-s-material-darker .cm-punctuation,
.cm-s-material-darker .cm-bracket {
  color: #9ca3af;
}

/* Ключевые слова */
.cm-s-material-darker .cm-keyword {
  color: #facc15;
}

/* Имена и переменные */
.cm-s-material-darker .cm-def,
.cm-s-material-darker .cm-variable,
.cm-s-material-darker .cm-variable-2 {
  color: #e5e7eb;
}

/* Цвет номера строки и курсор */
.cm-s-material-darker .CodeMirror-linenumber {
  color: #4b5563;
}

.cm-s-material-darker .CodeMirror-cursor {
  border-left: 2px solid #facc15;
}

/* Более заметное, но НЕ "грязное" выделение текста в редакторах CodeMirror.
   Цель — как на скриншоте: мягкая синяя подложка с прозрачностью.
   (Если включена DevTools → CodeMirror тема, её CSS имеет более высокий приоритет.) */
.cm-s-material-darker .CodeMirror-selected,
.cm-s-material-darker .CodeMirror-line::selection,
.cm-s-material-darker .CodeMirror-line > span::selection,
.cm-s-material-darker .CodeMirror-line > span > span::selection,
.xkeen-cm .CodeMirror-selected,
.xkeen-cm .CodeMirror-line::selection,
.xkeen-cm .CodeMirror-line > span::selection,
.xkeen-cm .CodeMirror-line > span > span::selection {
  background: rgba(96, 165, 250, 0.22) !important; /* мягкий светло‑синий */
}

/* На случай, если браузер использует общий ::selection внутри оболочки редактора */
.xkeen-cm ::selection {
  background: rgba(96, 165, 250, 0.22) !important;
}

/* === CodeMirror cosmetics (enabled addons need CSS to be visible) ===
   - match-highlighter: .cm-matchhighlight
   - trailing-space:    .cm-trailingspace
   - rulers:            .CodeMirror-ruler (.CodeMirror-rulers wrapper)
*/
.cm-s-material-darker .cm-matchhighlight,
.xkeen-cm .cm-matchhighlight {
  background: rgba(34, 211, 238, 0.18);
  border-radius: 2px;
}

.cm-s-material-darker .cm-trailingspace,
.xkeen-cm .cm-trailingspace {
  background: rgba(248, 113, 113, 0.28);
}

/* === CodeMirror: clickable links (Ctrl/Cmd + click) === */
.xkeen-cm .cm-link.cm-xk-url,
.xkeen-cm .cm-xk-url {
  /* Many CM themes underline `.cm-link` by default.
     We want the underline *only on hover*, like in the reference screenshot. */
  text-decoration: none !important;
}

.xkeen-cm .cm-link.cm-xk-url:hover,
.xkeen-cm .cm-xk-url:hover {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  /* Subtle hover highlight (keeps syntax color from theme). */
  background: rgba(96, 165, 250, 0.14);
  border-radius: 2px;
}

/* Show pointer only when the modifier is held (script toggles the class). */
.xkeen-cm-links.xkeen-cm-link-armed .cm-xk-url {
  cursor: pointer;
}

.xkeen-cm-linktip {
  position: absolute;
  z-index: 99999;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 10px;
  background: var(--modal-bg, rgba(0, 0, 0, 0.85));
  color: var(--modal-text, #e5e7eb);
  border: 1px solid var(--modal-body-border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.cm-s-material-darker .CodeMirror-rulers,
.xkeen-cm .CodeMirror-rulers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.cm-s-material-darker .CodeMirror-ruler,
.xkeen-cm .CodeMirror-ruler {
  /* Hide CodeMirror rulers (thin vertical guide line) */
  border-left: 0 !important;
}





.xkeen-cm {
  /* CodeMirror wrapper */
  min-height: 160px;
}


/* --- CodeMirror mouse toolbar (overlay) --- */
.xkeen-cm-toolbar {
  /* Toolbar sits above the editor (outside CodeMirror) */
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 6px 0;
  padding-right: 6px;
  /* Ensure tooltips and the toolbar itself can overlap the editor */
  z-index: 50;
  overflow: visible;
}

/* When editor is in fullscreen, keep toolbar visible */
.xkeen-cm-toolbar.is-fullscreen {
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2147483000 !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.xkeen-cm-toolbar.is-fullscreen .xkeen-cm-tool {
  display: none !important;
}

.xkeen-cm-toolbar.is-fullscreen .xkeen-cm-tool[data-action-id="fs"],
.xkeen-cm-toolbar.is-fullscreen .xkeen-cm-tool[data-action-id="fs_any"],
.xkeen-cm-toolbar.is-fullscreen .xkeen-cm-tool[data-action-id="fullscreen"],
.xkeen-cm-toolbar.is-fullscreen .xkeen-cm-tool[data-command="fullscreen"] {
  display: inline-flex !important;
}


.xkeen-cm-tool {
  position: relative;
  width: 30px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.72);
  color: rgba(226, 232, 240, 0.95);
  cursor: pointer;
  /*
    Reset generic <button> styles (padding/line-height/appearance) so SVG icons
    are centered *exactly* inside fixed-size square buttons.
  */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.xkeen-cm-tool svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

.xkeen-cm-tool:hover {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(2, 6, 23, 0.88);
}

/* Disabled state (e.g. replace/comment in readOnly mode) */
.xkeen-cm-tool:disabled,
.xkeen-cm-tool.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.50);
}

.xkeen-cm-tool:disabled:hover,
.xkeen-cm-tool.is-disabled:hover {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.50);
}

.xkeen-cm-tool:disabled:active,
.xkeen-cm-tool.is-disabled:active {
  transform: none;
}

.xkeen-cm-tool:active {
  transform: translateY(1px);
}

.xkeen-cm-tool:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.75);
  outline-offset: 2px;
}

/* Red "?" help button */
.xkeen-cm-tool.is-help {
  color: rgba(239, 68, 68, 0.98);
}

.xkeen-cm-tool.is-help:hover {
  border-color: rgba(239, 68, 68, 0.55);
}

/* Yellow help button (routing JSONC comments help) */
.xkeen-cm-tool.is-comments-help {
  color: rgba(250, 204, 21, 0.98);
}

.xkeen-cm-tool.is-comments-help:hover {
  border-color: rgba(250, 204, 21, 0.55);
}

/* Tooltip (hover + keyboard focus) */
.xkeen-cm-tool[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 9999;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--xk-tooltip-border, rgba(148, 163, 184, 0.22));
  background: var(--xk-tooltip-bg, rgba(15, 23, 42, 0.95));
  -webkit-backdrop-filter: var(--xk-tooltip-backdrop, none);
  backdrop-filter: var(--xk-tooltip-backdrop, none);
  color: var(--xk-tooltip-text, rgba(226, 232, 240, 0.98));
  box-shadow: 0 10px 30px var(--xk-tooltip-shadow, rgba(0, 0, 0, 0.55));
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* When the portal tooltip system is enabled, hide legacy CodeMirror tooltips
   that rely on data-tip + pseudo-elements (avoid double tooltips). */
.xk-tooltip-portal .xkeen-cm-tool[data-tip]::after {
  display: none !important;
}

.xkeen-cm-tool[data-tip]:hover::after,
.xkeen-cm-tool[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Light theme */
html[data-theme="light"] .xkeen-cm-tool {
  background: rgba(255, 255, 255, 0.85);
  color: rgba(15, 23, 42, 0.95);
  border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .xkeen-cm-tool:disabled,
html[data-theme="light"] .xkeen-cm-tool.is-disabled {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .xkeen-cm-tool.is-help {
  color: rgba(220, 38, 38, 0.98);
}

html[data-theme="light"] .xkeen-cm-tool.is-comments-help {
  color: rgba(202, 138, 4, 0.98);
}

html[data-theme="light"] .xkeen-cm-tool.is-comments-help {
  color: rgba(234, 179, 8, 0.98);
}

html[data-theme="light"] .xkeen-cm-tool[data-tip]::after {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(15, 23, 42, 0.95);
  border-color: rgba(15, 23, 42, 0.18);
}

/* --- CodeMirror help drawer (slides in from the right) --- */
.xkeen-cm-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 10040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.xkeen-cm-help-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.xkeen-cm-help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(460px, 92vw);
  z-index: 10041;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.98);
  color: rgba(226, 232, 240, 0.95);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.xkeen-cm-help-drawer.is-open {
  transform: translateX(0);
}

.xkeen-cm-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.xkeen-cm-help-title {
  font-weight: 700;
  font-size: calc(14px * var(--xk-font-scale));
  letter-spacing: 0.2px;
}

.xkeen-cm-help-close {
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.65);
  color: rgba(226, 232, 240, 0.95);
  cursor: pointer;
}

.xkeen-cm-help-close:hover {
  background: rgba(15, 23, 42, 0.9);
}

.xkeen-cm-help-body {
  padding: 12px 14px 18px;
  overflow: auto;
}

.xkeen-cm-help-section {
  padding: 10px 10px;
  margin: 0 0 10px 0;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.35);
}

.xkeen-cm-help-section h3 {
  margin: 0 0 6px 0;
  font-size: calc(13px * var(--xk-font-scale));
}

.xkeen-cm-help-section p {
  margin: 6px 0;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1.35;
}

.xkeen-cm-help-section ul {
  margin: 8px 0 0 18px;
  padding: 0;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1.35;
}

html[data-theme="light"] .xkeen-cm-help-overlay {
  background: rgba(15, 23, 42, 0.35);
}

html[data-theme="light"] .xkeen-cm-help-drawer {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(15, 23, 42, 0.95);
  border-left-color: rgba(15, 23, 42, 0.12);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .xkeen-cm-help-head {
  border-bottom-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .xkeen-cm-help-close {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(15, 23, 42, 0.95);
  border-color: rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .xkeen-cm-help-section {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(15, 23, 42, 0.12);
}

/* Мини-терминал XKeen */
.terminal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--modal-overlay, rgba(15, 23, 42, 0.75));
  z-index: 50;
}

.terminal-window {
  width: 520px;
  height: 360px;

  min-width: 360px;
  min-height: 240px;

  max-width: 95vw;
  max-height: 90vh;

  background: var(--modal-bg, #020617);
  border-radius: 12px;
  border: 1px solid var(--modal-border, #334155);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  box-shadow: 0 20px 40px color-mix(in srgb, rgba(0,0,0,0.75) 70%, transparent);
  padding: 12px 14px;
  font-size: calc(14px * var(--xk-font-scale));

  /* resizable + layout */
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  position: relative;

  /* Allow the underlying page to scroll while the terminal is open,
     but prevent "scroll chaining" from the terminal buffer to the page. */
  overscroll-behavior: contain;
}

/* Prevent wheel/touch scroll from leaking to the page when the xterm viewport
   hits the top/bottom of its scrollback buffer (especially on trackpads). */
.terminal-window .xterm-viewport {
  overscroll-behavior: contain;
}

.terminal-window::after {
  /* визуальная "ручка" в правом нижнем углу */
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(148, 163, 184, 0.35);
  border-bottom: 2px solid rgba(148, 163, 184, 0.35);
  pointer-events: none;
  border-radius: 2px;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;

  /* drag handle */
  cursor: move;
  user-select: none;
}

.terminal-header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.terminal-conn-lamp {
  margin-left: 10px;
}

.terminal-uptime {
  margin-left: 8px;
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: nowrap;
}

.terminal-tool-btn-danger {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 55%, transparent);
  background: color-mix(in srgb, var(--sem-error, #f87171) 18%, var(--editor-btn-bg, #020617) 82%);
  color: color-mix(in srgb, var(--sem-error, #f87171) 55%, var(--text, #e5e7eb) 45%);
}

.terminal-tool-btn-danger:hover {
  background: color-mix(in srgb, var(--sem-error, #f87171) 24%, var(--editor-btn-bg, #020617) 76%);
}

/* Keep danger buttons "danger" even in active state (override global button:active gradient). */
.terminal-tool-btn-danger:active {
  background: color-mix(in srgb, var(--sem-error, #f87171) 32%, var(--editor-btn-bg, #020617) 68%);
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 75%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sem-error, #f87171) 25%, transparent);
  transform: translateY(1px) scale(0.99);
}

.terminal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;

  /* Override the header drag cursor inside toolbar/menus.
     Buttons still show pointer via .terminal-tool-btn { cursor: pointer; } */
  cursor: default;

  position: relative;
}

/* Dropdown menus should not look like drag handles */
.terminal-overflow-menu,
.terminal-view-menu,
.terminal-buffer-menu {
  cursor: default;
}

.terminal-tool-btn {
  border-radius: 9999px;
  padding: 4px 8px;
  border: 1px solid var(--header-btn-border, rgba(148, 163, 184, 0.35));
  background: var(--header-btn-bg, rgba(2, 6, 23, 0.6));
  color: var(--header-btn-text, #e5e7eb);
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  cursor: pointer;
}

.terminal-tool-btn:hover {
  background: var(--header-btn-hover-bg, rgba(17, 24, 39, 0.85));
}

.terminal-tool-btn:active {
  transform: translateY(1px);
}

.terminal-tool-btn.is-active {
  border-color: var(--header-tab-active-bg, rgba(59, 130, 246, 0.65));
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 24%, transparent);
}

.terminal-tool-btn-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 4px 7px;
}

.terminal-header span {
  font-weight: 600;
}

.terminal-close {
  background: transparent;
  border: none;
  color: var(--modal-close, #9ca3af);
  cursor: pointer;
  font-size: calc(18px * var(--xk-font-scale));
  line-height: 1;
}

.terminal-window.is-fullscreen {
  position: fixed !important;
  left: 8px !important;
  top: 8px !important;
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  max-width: none !important;
  max-height: none !important;
  resize: none !important;
}

.terminal-window.is-fullscreen::after {
  display: none;
}

.terminal-command {
  width: 100%;
  background: var(--card-bg, #020617);
  border-radius: 6px;
  border: 1px solid var(--border, #1f2937);
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.terminal-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.terminal-search-input {
  flex: 1 1 220px;
  min-width: 140px;
  background: var(--card-bg, #020617);
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  padding: 6px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--text, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.terminal-search-btn {
  border-radius: 9999px;
  padding: 4px 8px;
  border: 1px solid var(--header-btn-border, rgba(148, 163, 184, 0.35));
  background: var(--header-btn-bg, rgba(2, 6, 23, 0.6));
  color: var(--header-btn-text, #e5e7eb);
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  cursor: pointer;
}

.terminal-search-btn:hover {
  background: var(--header-btn-hover-bg, rgba(17, 24, 39, 0.85));
}

.terminal-search-btn:active {
  transform: translateY(1px);
}

.terminal-search-counter {
  min-width: 52px;
  text-align: center;
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.terminal-output {
  width: 100%;
  background: var(--card-bg, #020617);
  border-radius: 6px;
  border: 1px solid var(--border, #1f2937);
  padding: 6px 8px;
  margin-bottom: 6px;

  /* растягиваемое окно: вывод занимает всё оставшееся место */
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;

  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--text, #e5e7eb);
}

.terminal-output:has(.xterm) {
  padding: 0;
  overflow: hidden;
}

/* xterm-addon-search match decorations (improves readability on dark background) */
.xterm-find-result-decoration {
  border-radius: 3px;
}
.xterm-find-active-result-decoration {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}

.terminal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.terminal-footer-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.terminal-footer-label {
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  font-weight: 600;
  user-select: none;
  margin-right: 2px;
}


.terminal-input-row {
  display: flex;
  gap: 8px;
}

.terminal-input-row.confirm-hidden {
  justify-content: flex-end;
}

.terminal-input {
  flex: 1;
  background: var(--card-bg, #020617);
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  padding: 6px 10px;
  font-size: calc(14px * var(--xk-font-scale));
  color: var(--text, #e5e7eb);
}

.terminal-send {
  border-radius: 9999px;
  padding: 6px 12px;
  border: none;
  background: var(--editor-btn-active-to, #2563eb);
  color: var(--header-tab-active-text, #f9fafb);
  font-size: calc(14px * var(--xk-font-scale));
  cursor: pointer;
}
.terminal-send:hover {
  background: var(--editor-btn-active-from, #1d4ed8);
}


.terminal-history-btn {
  border-radius: 9999px;
  padding: 6px 10px;
  border: 1px solid var(--border, #4b5563);
  background: transparent;
  color: var(--text, #e5e7eb);
  font-size: calc(14px * var(--xk-font-scale));
  cursor: pointer;
}
.terminal-history-btn:hover {
  background: color-mix(in srgb, var(--card-bg, #111827) 85%, transparent);
}



.mihomo-templates-row {
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
}

.mihomo-templates-row button {
  flex: 0 0 auto;
}

.mihomo-template-select {
  min-width: 180px;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: calc(14px * var(--xk-font-scale));
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  outline: none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.4);
}

.mihomo-template-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.5);
}



/* Top tabs (main header + DevTools tabs)
   Base style is compact and does NOT stretch buttons across the full page.
   The main panel header uses .header-tabs modifier to stretch evenly in one line.
*/
.top-tabs {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* DevTools tabs: align with the left Tools column and stretch like the "Сервис панели" block.
   Scoped via .dt-tabs to avoid affecting any other tabs/buttons in the UI.
*/
.top-tabs.dt-tabs {
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: min(100%, 420px);
  margin-right: auto;
}

/* Main panel header tabs: always one line, evenly stretched */
.top-tabs.header-tabs {
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.top-tabs.header-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

button.top-tab-btn {
  border-radius: 9999px;
  padding: 6px 10px;
  font-size: calc(13px * var(--xk-font-scale));
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  background: var(--header-tab-bg, #020617);
  border: 1px solid var(--header-tab-border, #1f2937);
  color: var(--header-tab-text, #e5e7eb);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.7);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--header-tab-border, #1f2937) 55%, transparent);
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* DevTools pills should share the available width (two buttons ≈ full width of the left column). */
.top-tabs.dt-tabs .top-tab-btn {
  flex: 1 1 0;
  width: auto;
}

/* Header tabs need to share width equally */
.top-tabs.header-tabs .top-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  /* +1 (header tabs) */
  font-size: calc(13px * var(--xk-font-scale));
}

button.top-tab-btn:hover {
  background: var(--header-tab-active-bg, #2563eb);
  border-color: var(--header-tab-active-bg, #2563eb);
  color: var(--header-tab-active-text, #ffffff);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 45%, transparent);
  transform: translateY(-1px);
}

button.top-tab-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.7);
}

button.top-tab-btn.active {
  background: var(--header-tab-active-bg, #2563eb);
  border-color: var(--header-tab-active-bg, #2563eb);
  color: var(--header-tab-active-text, #ffffff);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 35%, transparent);
}

.view-section {
  margin-top: 16px;
}
/* Fix terminal overflow */
.terminal-window,
.terminal-window * {
    box-sizing: border-box;
}



/* DevTools Logs: two-column layout with sidebar */
.dt-logs-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.dt-logs-sidebar,
.dt-logs-main {
  min-width: 0;
}

.dt-logs-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dt-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.dt-log-item {
  width: 100%;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--border, #1f2937);
  background: rgba(2, 6, 23, 0.55);
  background: var(--fm-row-header-bg, color-mix(in srgb, var(--card-bg, #020617) 55%, transparent));
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dt-log-item:hover {
  border-color: var(--accent, #60a5fa);
}

.dt-log-item.active {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent);
}

.dt-log-item.is-missing {
  opacity: 0.55;
  cursor: not-allowed;
}

.dt-log-item.is-missing:hover {
  border-color: var(--border, #1f2937);
}

.dt-log-name {
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 600;
  color: var(--text, #e5e7eb);
}

.dt-log-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  line-height: 1.1;
}

.dt-log-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-log-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sem-success, #22c55e);
  opacity: 0;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sem-success, #22c55e) 18%, transparent);
}

.dt-log-item.has-new .dt-log-dot {
  opacity: 1;
}

.dt-log-view {
  box-sizing: border-box;
  white-space: pre;
  overflow-x: auto;
}

/* DevTools Logs: highlight only the level token ([Info]/ERROR/etc.), not the whole line */
.dt-log-view.log-block .log-line-info,
.dt-log-view.log-block .log-line-warning,
.dt-log-view.log-block .log-line-error,
.dt-log-view.log-block .log-line-debug,
#dt-log-context-body .log-line-info,
#dt-log-context-body .log-line-warning,
#dt-log-context-body .log-line-error,
#dt-log-context-body .log-line-debug {
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
}

/* Log levels (tokens): used in DevTools Tools Logs + Live Xray logs */
.log-lvl {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
}


/* Live logs: clickable level badges */
.xk-log-level {
  cursor: pointer;
}
.log-lvl-info { color: var(--sem-info, #93c5fd); }
.log-lvl-warning { color: var(--sem-warning, #fbbf24); }
.log-lvl-error { color: var(--sem-error, #f87171); }
.log-lvl-debug { color: var(--sem-debug, #a1a1aa); }

.log-lvl-info,
.log-lvl-warning,
.log-lvl-error,
.log-lvl-debug {
  background: rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: rgba(255, 255, 255, 0.10);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
}

/* DevTools Logs: Stage 4 "human" filters */
.dt-log-human-filters {
  gap: 10px;
}

.dt-log-profile {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dt-log-profile-btn.active {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.dt-log-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dt-chip-btn {
  border-radius: 9999px;
  border: 1px solid var(--header-btn-border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  padding: 6px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.dt-chip-btn:hover {
  background: var(--fm-btn-hover-bg, var(--header-btn-hover-bg, rgba(255,255,255,0.06)));
  border-color: var(--header-btn-hover-border, var(--accent, #60a5fa));
  color: var(--header-btn-hover-text, var(--text, #e5e7eb));
  transform: translateY(-1px);
}

.dt-chip-btn.active {
  border-color: var(--header-tab-active-bg, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 18%, transparent);
}

.dt-log-advanced {
  border: 1px solid var(--border, #1f2937);
  border-radius: 14px;
  padding: 6px 10px;
  background: rgba(2, 6, 23, 0.45);
  background: color-mix(in srgb, var(--card-bg, #020617) 45%, transparent);
}

/* Timestamp visuals inside log lines */
.log-block .log-ts {
  opacity: 0.7;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}



/* ANSI color rendering in Live Logs (optional; enabled via ui-settings logs.ansi) */
.ansi { color: inherit; }
.ansi-bold { font-weight: 700; }
.ansi-underline { text-decoration: underline; }

/* Foreground colors (approximate to panel semantic colors) */
.ansi-fg-black { color: var(--muted, #6b7280); }
.ansi-fg-red { color: var(--sem-error, #f87171); }
.ansi-fg-green { color: var(--sem-success, #22c55e); }
.ansi-fg-yellow { color: var(--sem-warning, #fbbf24); }
.ansi-fg-blue { color: var(--sem-info, #93c5fd); }
.ansi-fg-magenta { color: color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%); }
.ansi-fg-cyan { color: color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%); }
.ansi-fg-white { color: var(--text, #e5e7eb); }

.ansi-fg-bright-black { color: color-mix(in srgb, var(--muted, #6b7280) 55%, var(--text, #e5e7eb) 45%); }
.ansi-fg-bright-red { color: color-mix(in srgb, var(--sem-error, #f87171) 70%, white 30%); }
.ansi-fg-bright-green { color: color-mix(in srgb, var(--sem-success, #22c55e) 70%, white 30%); }
.ansi-fg-bright-yellow { color: color-mix(in srgb, var(--sem-warning, #fbbf24) 70%, white 30%); }
.ansi-fg-bright-blue { color: color-mix(in srgb, var(--sem-info, #93c5fd) 70%, white 30%); }
.ansi-fg-bright-magenta { color: color-mix(in srgb, color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%) 70%, white 30%); }
.ansi-fg-bright-cyan { color: color-mix(in srgb, color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%) 70%, white 30%); }
.ansi-fg-bright-white { color: var(--text, #e5e7eb); }

/* Background colors: subtle tint so text stays readable */
.ansi.ansi-has-bg { padding: 0 1px; border-radius: 4px; }

.ansi-bg-black { background: color-mix(in srgb, var(--muted, #6b7280) 18%, transparent); }
.ansi-bg-red { background: color-mix(in srgb, var(--sem-error, #f87171) 18%, transparent); }
.ansi-bg-green { background: color-mix(in srgb, var(--sem-success, #22c55e) 18%, transparent); }
.ansi-bg-yellow { background: color-mix(in srgb, var(--sem-warning, #fbbf24) 18%, transparent); }
.ansi-bg-blue { background: color-mix(in srgb, var(--sem-info, #93c5fd) 18%, transparent); }
.ansi-bg-magenta { background: color-mix(in srgb, color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%) 18%, transparent); }
.ansi-bg-cyan { background: color-mix(in srgb, color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%) 18%, transparent); }
.ansi-bg-white { background: rgba(255,255,255,0.10); }

.ansi-bg-bright-black { background: color-mix(in srgb, var(--muted, #6b7280) 24%, transparent); }
.ansi-bg-bright-red { background: color-mix(in srgb, var(--sem-error, #f87171) 24%, transparent); }
.ansi-bg-bright-green { background: color-mix(in srgb, var(--sem-success, #22c55e) 24%, transparent); }
.ansi-bg-bright-yellow { background: color-mix(in srgb, var(--sem-warning, #fbbf24) 24%, transparent); }
.ansi-bg-bright-blue { background: color-mix(in srgb, var(--sem-info, #93c5fd) 24%, transparent); }
.ansi-bg-bright-magenta { background: color-mix(in srgb, color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%) 24%, transparent); }
.ansi-bg-bright-cyan { background: color-mix(in srgb, color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%) 24%, transparent); }
.ansi-bg-bright-white { background: rgba(255,255,255,0.14); }

/* Live Xray logs */
.xray-log-block {
  /* Сделать лог-окно заметно читаемее (было слишком мелко) */
  font-size: calc(15px * var(--xk-font-scale));
  line-height: 1.35;

  /* Ручка растягивания только вниз: фиксируем минимальную высоту */
  height: 420px;
  min-height: 420px;
  max-height: none;

  /* Allow user to stretch the log window вниз (vertical only) */
  resize: vertical;
}

/* Live Xray logs: filter + selects (match the panel theme) */
.xray-log-filter{
  width: 100%;
  padding: 7px 12px;
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--text, #e5e7eb);
  box-sizing: border-box;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1.15;
  outline: none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.40);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.xray-log-filter::placeholder{
  color: var(--muted, #6b7280);
}

.xray-log-filter:focus{
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #60a5fa) 22%, transparent);
}

.xray-log-select{
  border-radius: 9999px;
  padding: 7px 34px 7px 12px;
  font-size: calc(12px * var(--xk-font-scale));
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--text, #e5e7eb);
  outline: none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.40);
  cursor: pointer;
  line-height: 1.15;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3b3c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

.xray-log-select:focus{
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #60a5fa) 22%, transparent);
}

html[data-theme="light"] .xray-log-select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}


.xray-log-select option{
  background: var(--card-bg, #020617);
  color: var(--text, #e5e7eb);
}

html[data-theme="light"] .xray-log-select option{
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
}


/* Inline field validation (e.g., Regex invalid) */
.xray-log-filter.is-invalid {
  border-color: var(--sem-error, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sem-error, #ef4444) 25%, transparent);
}

.dt-log-search-wrap {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

/* Stage 5: Include/Exclude tokens as chips */
.dt-token-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 220px;
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid var(--border, #374151);
  background: var(--card-bg, #020617);
}

.dt-token-field-compact {
  min-width: 180px;
}

.dt-token-field.is-invalid {
  border-color: var(--sem-error, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sem-error, #ef4444) 25%, transparent);
}

.dt-token-entry {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text, #e5e7eb);
  font-size: calc(12px * var(--xk-font-scale));
  padding: 2px 0;
}

.dt-token-entry::placeholder {
  color: var(--muted, #6b7280);
}

.dt-token-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid var(--border, #1f2937);
  background: rgba(2, 6, 23, 0.55);
  background: color-mix(in srgb, var(--card-bg, #020617) 55%, transparent);
  color: var(--text, #e5e7eb);
  padding: 4px 8px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
}

.dt-token-chip .dt-token-x {
  border: none;
  background: transparent;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  font-size: calc(14px * var(--xk-font-scale));
  line-height: 1;
  padding: 0;
}

.dt-token-chip .dt-token-x:hover {
  color: var(--sem-error, #f87171);
}

/* Stage 6: Level filter container */
.dt-log-level-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dt-field-error {
  margin-top: 4px;
  padding-left: 10px;
  color: var(--sem-error, #f87171);
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.2;
}




/* ANSI color rendering in Live Logs (optional; enabled via ui-settings logs.ansi) */
.ansi { color: inherit; }
.ansi-bold { font-weight: 700; }
.ansi-underline { text-decoration: underline; }

/* Foreground colors (approximate to panel semantic colors) */
.ansi-fg-black { color: var(--muted, #6b7280); }
.ansi-fg-red { color: var(--sem-error, #f87171); }
.ansi-fg-green { color: var(--sem-success, #22c55e); }
.ansi-fg-yellow { color: var(--sem-warning, #fbbf24); }
.ansi-fg-blue { color: var(--sem-info, #93c5fd); }
.ansi-fg-magenta { color: color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%); }
.ansi-fg-cyan { color: color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%); }
.ansi-fg-white { color: var(--text, #e5e7eb); }

.ansi-fg-bright-black { color: color-mix(in srgb, var(--muted, #6b7280) 55%, var(--text, #e5e7eb) 45%); }
.ansi-fg-bright-red { color: color-mix(in srgb, var(--sem-error, #f87171) 70%, white 30%); }
.ansi-fg-bright-green { color: color-mix(in srgb, var(--sem-success, #22c55e) 70%, white 30%); }
.ansi-fg-bright-yellow { color: color-mix(in srgb, var(--sem-warning, #fbbf24) 70%, white 30%); }
.ansi-fg-bright-blue { color: color-mix(in srgb, var(--sem-info, #93c5fd) 70%, white 30%); }
.ansi-fg-bright-magenta { color: color-mix(in srgb, color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%) 70%, white 30%); }
.ansi-fg-bright-cyan { color: color-mix(in srgb, color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%) 70%, white 30%); }
.ansi-fg-bright-white { color: var(--text, #e5e7eb); }

/* Background colors: subtle tint so text stays readable */
.ansi.ansi-has-bg { padding: 0 1px; border-radius: 4px; }

.ansi-bg-black { background: color-mix(in srgb, var(--muted, #6b7280) 18%, transparent); }
.ansi-bg-red { background: color-mix(in srgb, var(--sem-error, #f87171) 18%, transparent); }
.ansi-bg-green { background: color-mix(in srgb, var(--sem-success, #22c55e) 18%, transparent); }
.ansi-bg-yellow { background: color-mix(in srgb, var(--sem-warning, #fbbf24) 18%, transparent); }
.ansi-bg-blue { background: color-mix(in srgb, var(--sem-info, #93c5fd) 18%, transparent); }
.ansi-bg-magenta { background: color-mix(in srgb, color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%) 18%, transparent); }
.ansi-bg-cyan { background: color-mix(in srgb, color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%) 18%, transparent); }
.ansi-bg-white { background: rgba(255,255,255,0.10); }

.ansi-bg-bright-black { background: color-mix(in srgb, var(--muted, #6b7280) 24%, transparent); }
.ansi-bg-bright-red { background: color-mix(in srgb, var(--sem-error, #f87171) 24%, transparent); }
.ansi-bg-bright-green { background: color-mix(in srgb, var(--sem-success, #22c55e) 24%, transparent); }
.ansi-bg-bright-yellow { background: color-mix(in srgb, var(--sem-warning, #fbbf24) 24%, transparent); }
.ansi-bg-bright-blue { background: color-mix(in srgb, var(--sem-info, #93c5fd) 24%, transparent); }
.ansi-bg-bright-magenta { background: color-mix(in srgb, color-mix(in srgb, var(--accent, #60a5fa) 35%, #f472b6 65%) 24%, transparent); }
.ansi-bg-bright-cyan { background: color-mix(in srgb, color-mix(in srgb, var(--sem-info, #93c5fd) 55%, #67e8f9 45%) 24%, transparent); }
.ansi-bg-bright-white { background: rgba(255,255,255,0.14); }

/* Live Xray logs */
.xray-log-block {
  /* Keep only the color here (size/resize rules are defined выше) */
  color: var(--text, #e5e7eb);
}

.log-block .log-line {
  display: block;
}

/* Logs: keep line text neutral; mark level via a subtle left accent */
.log-block .log-line-info,
.log-block .log-line-warning,
.log-block .log-line-success,
.log-block .log-line-error,
.log-block .log-line-debug {
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
}

.dt-log-view .log-line-info,
#dt-log-context-body .log-line-info,
.log-block .log-line-info {
  box-shadow: inset 2px 0 0 var(--sem-info, #93c5fd);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sem-info, #93c5fd) 65%, transparent);
}

.dt-log-view .log-line-warning,
#dt-log-context-body .log-line-warning,
.log-block .log-line-warning {
  box-shadow: inset 2px 0 0 var(--sem-warning, #fbbf24);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sem-warning, #fbbf24) 65%, transparent);
}

.dt-log-view .log-line-success,
#dt-log-context-body .log-line-success,
.log-block .log-line-success {
  box-shadow: inset 2px 0 0 var(--sem-success, #4ade80);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sem-success, #4ade80) 65%, transparent);
}

.dt-log-view .log-line-error,
#dt-log-context-body .log-line-error,
.log-block .log-line-error {
  box-shadow: inset 2px 0 0 var(--sem-error, #f87171);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sem-error, #f87171) 65%, transparent);
}

.dt-log-view .log-line-debug,
#dt-log-context-body .log-line-debug,
.log-block .log-line-debug {
  box-shadow: inset 2px 0 0 var(--sem-debug, #a1a1aa);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sem-debug, #a1a1aa) 65%, transparent);
}

/* Restart log cards: terminal-like level colors (helps Xray logs look closer to Mihomo) */
.log-card .log-block {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.96)),
    #020617;
  border-color: rgba(59, 130, 246, 0.24);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 124px;
  max-height: 224px;
  white-space: normal;
  color: color-mix(in srgb, var(--text, #e5e7eb) 90%, #c7d2fe 10%);
  font-size: calc(12.5px * var(--xk-font-scale));
  line-height: 1.45;
  box-shadow:
    inset 0 1px 0 rgba(148, 163, 184, 0.08),
    inset 0 0 0 1px rgba(15, 23, 42, 0.55),
    0 14px 34px rgba(2, 6, 23, 0.22);
  scrollbar-color: rgba(96, 165, 250, 0.46) rgba(15, 23, 42, 0.7);
  scrollbar-width: thin;
}

html:not([data-theme="light"]) .log-card.xk-restart-log-card .log-block {
  background:
    linear-gradient(180deg, rgba(2,6,23,0.32), rgba(1,4,9,0.78)),
    #010409;
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 34%, rgba(30,41,59,0.82));
  box-shadow:
    inset 0 1px 0 rgba(148,163,184,0.08),
    inset 0 0 0 1px rgba(2,6,23,0.78),
    0 12px 30px rgba(0,0,0,0.24);
}

html:not([data-theme="light"]) #view-xray-logs .xray-log-block {
  background:
    linear-gradient(180deg, rgba(2,6,23,0.32), rgba(1,4,9,0.78)),
    #010409;
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 34%, rgba(30,41,59,0.82));
  box-shadow:
    inset 0 1px 0 rgba(148,163,184,0.08),
    inset 0 0 0 1px rgba(2,6,23,0.78),
    0 12px 30px rgba(0,0,0,0.24);
}

.log-block .xray-log-device-name {
  display: inline-flex;
  align-items: center;
  max-width: 190px;
  min-height: 1.2em;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--sem-success, #22c55e) 34%, rgba(59, 130, 246, 0.38));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.13), rgba(59, 130, 246, 0.10)),
    rgba(15, 23, 42, 0.52);
  color: color-mix(in srgb, var(--sem-success, #22c55e) 68%, var(--text, #e5e7eb) 32%);
  font: inherit;
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.log-block .xray-log-device-name:hover,
.log-block .xray-log-device-name:focus-visible {
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 62%, var(--accent, #60a5fa) 38%);
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.14)),
    rgba(15, 23, 42, 0.68);
  color: color-mix(in srgb, var(--sem-success, #22c55e) 48%, white 52%);
  outline: none;
}

html[data-theme="light"] .log-block .xray-log-device-name {
  border-color: color-mix(in srgb, var(--sem-success, #16a34a) 34%, #93c5fd 66%);
  background:
    linear-gradient(180deg, rgba(240,253,250,0.92), rgba(239,246,255,0.9)),
    #ffffff;
  color: color-mix(in srgb, var(--sem-success, #16a34a) 70%, #0f172a 30%);
}

.log-block .xray-log-dest-domain {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 280px;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--log-dns, #38bdf8) 42%, rgba(129, 140, 248, 0.34));
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.15), rgba(99, 102, 241, 0.11)),
    rgba(15, 23, 42, 0.46);
  color: var(--log-dns, #7dd3fc);
  font-size: 0.9em;
  line-height: 1.22;
  text-decoration: none;
  vertical-align: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-block .xray-log-dest-domain__prefix {
  color: color-mix(in srgb, var(--log-dns, #38bdf8) 68%, var(--text-muted, #94a3b8) 32%);
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.log-block .xray-log-dest-domain:hover,
.log-block .xray-log-dest-domain:focus-visible {
  border-color: color-mix(in srgb, var(--log-dns, #38bdf8) 64%, var(--accent-2, #a78bfa) 36%);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.23), rgba(99, 102, 241, 0.16)),
    rgba(15, 23, 42, 0.66);
  outline: none;
  text-decoration: none;
}

.log-block .log-link.xray-log-dest-domain:visited {
  color: var(--log-dns, #7dd3fc);
}

html[data-theme="light"] .log-block .xray-log-dest-domain {
  border-color: color-mix(in srgb, var(--log-dns, #0284c7) 34%, #c4b5fd 66%);
  background:
    linear-gradient(180deg, rgba(224, 242, 254, 0.94), rgba(238, 242, 255, 0.9)),
    #ffffff;
  color: var(--log-dns, #075985);
}

html[data-theme="light"] .log-block .xray-log-dest-domain__prefix {
  color: color-mix(in srgb, var(--log-dns, #0284c7) 72%, #475569 28%);
}

html[data-theme="light"] .log-block .log-link.xray-log-dest-domain:visited {
  color: var(--log-dns, #075985);
}

#xray-devices-modal .xray-devices-modal-content {
  width: min(760px, calc(100vw - 28px));
  height: min(680px, calc(100vh - 48px));
  min-width: min(520px, calc(100vw - 28px));
  min-height: min(480px, calc(100vh - 48px));
  max-width: min(1120px, calc(100vw - 28px));
  max-height: calc(100vh - 48px);
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  resize: both;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(9, 18, 34, 0.98), rgba(3, 8, 19, 0.98)),
    var(--modal-bg, #060e1eeb);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#xray-devices-modal .xray-devices-modal-content .modal-header {
  padding: 16px 18px 14px;
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
}

#xray-devices-modal .xray-devices-modal-content .modal-title {
  font-size: calc(18px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: 0;
}

#xray-devices-modal .xray-devices-modal-content .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--card-bg, #020617) 76%, transparent);
  border: 1px solid transparent;
}

#xray-devices-modal .xray-devices-modal-content .modal-close:hover {
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 28%, transparent);
  background: color-mix(in srgb, var(--accent, #60a5fa) 12%, var(--card-bg, #020617) 88%);
}

#xray-devices-modal .xray-devices-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px 18px 12px;
  overflow: hidden;
}

#xray-devices-modal .xray-devices-toolbar,
#xray-devices-modal .xray-devices-form,
#xray-devices-modal .xray-device-row,
#xray-devices-modal .xray-device-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#xray-devices-modal .xray-devices-toolbar {
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2px 0 0;
}

#xray-devices-modal .xray-devices-summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 68%, transparent);
  background: color-mix(in srgb, var(--card-bg, #020617) 72%, transparent);
  color: color-mix(in srgb, var(--text, #e5e7eb) 82%, var(--muted, #94a3b8) 18%);
  font-weight: 700;
}

#xray-devices-modal .xray-devices-form {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(220px, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 68%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.26)),
    color-mix(in srgb, var(--card-bg, #020617) 74%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#xray-devices-modal .xray-devices-form .xray-log-filter {
  min-width: 0;
  border-radius: 12px;
  height: 36px;
}

#xray-devices-modal .xray-devices-form .btn-secondary {
  min-height: 36px;
  border-radius: 12px;
  padding-inline: 14px;
}

#xray-devices-modal .xray-devices-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 2px 4px 2px 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#xray-devices-modal .xray-device-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  justify-content: stretch;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.08), transparent 48%),
    color-mix(in srgb, var(--card-bg, #020617) 84%, var(--accent, #60a5fa) 8%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.12);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

#xray-devices-modal .xray-device-row:hover {
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 34%, var(--border, #334155) 66%);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.14), transparent 52%),
    color-mix(in srgb, var(--card-bg, #020617) 78%, var(--accent, #60a5fa) 12%);
}

#xray-devices-modal .xray-device-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#xray-devices-modal .xray-device-ip {
  color: var(--accent, #60a5fa);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: calc(12px * var(--xk-font-scale));
}

#xray-devices-modal .xray-device-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text, #e5e7eb);
}

#xray-devices-modal .xray-device-details {
  color: var(--muted, #94a3b8);
  font-size: calc(12px * var(--xk-font-scale));
}

#xray-devices-modal .xray-device-source {
  flex: 0 0 auto;
  align-self: center;
  justify-self: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 80%, transparent);
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  background: color-mix(in srgb, var(--card-bg, #020617) 66%, transparent);
}

#xray-devices-modal .xray-device-source.manual {
  color: color-mix(in srgb, var(--sem-success, #22c55e) 72%, var(--text, #e5e7eb) 28%);
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 35%, var(--border, #334155) 65%);
}

#xray-devices-modal .xray-device-row-btn {
  padding: 5px 9px;
  border-radius: 9px;
  font-size: calc(12px * var(--xk-font-scale));
}

#xray-devices-modal .xray-devices-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--border, #334155) 78%, transparent);
  border-radius: 14px;
  color: var(--muted, #94a3b8);
  text-align: center;
  background: color-mix(in srgb, var(--card-bg, #020617) 68%, transparent);
}

#xray-devices-modal .xray-devices-actions {
  padding: 12px 18px 16px;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--border, #334155) 68%, transparent);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.32)),
    color-mix(in srgb, var(--modal-bg, #060e1e) 88%, transparent);
}

html[data-theme="light"] #xray-devices-modal .xray-devices-modal-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.99)),
    var(--modal-bg, #ffffff);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] #xray-devices-modal .xray-devices-form,
html[data-theme="light"] #xray-devices-modal .xray-devices-summary,
html[data-theme="light"] #xray-devices-modal .xray-device-source,
html[data-theme="light"] #xray-devices-modal .xray-devices-empty {
  background: color-mix(in srgb, var(--card-bg, #ffffff) 88%, var(--accent, #2563eb) 4%);
}

html[data-theme="light"] #xray-devices-modal .xray-device-row {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.075), transparent 52%),
    color-mix(in srgb, var(--card-bg, #ffffff) 92%, var(--accent, #2563eb) 5%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 8px 18px rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] #xray-devices-modal .xray-devices-actions {
  background:
    linear-gradient(180deg, rgba(241, 245, 249, 0.3), rgba(226, 232, 240, 0.62)),
    color-mix(in srgb, var(--modal-bg, #ffffff) 92%, transparent);
}

@media (max-width: 680px) {
  #xray-devices-modal .xray-devices-modal-content {
    width: calc(100vw - 20px);
    height: min(720px, calc(100vh - 20px));
    min-width: 0;
    min-height: min(430px, calc(100vh - 20px));
    max-height: calc(100vh - 20px);
    resize: vertical;
  }

  #xray-devices-modal .xray-devices-body {
    padding: 12px;
  }

  #xray-devices-modal .xray-devices-form {
    grid-template-columns: 1fr;
  }

  #xray-devices-modal .xray-device-row {
    align-items: stretch;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #xray-devices-modal .xray-device-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #xray-devices-modal .xray-device-source {
    justify-self: start;
  }
}

.log-card .log-block::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.log-card .log-block::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.72);
  border-radius: 999px;
}

.log-card .log-block::-webkit-scrollbar-thumb {
  border: 2px solid rgba(15, 23, 42, 0.72);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.46);
}

.log-card .log-block::-webkit-scrollbar-thumb:hover {
  background: rgba(147, 197, 253, 0.62);
}

.log-card .restart-log-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: color-mix(in srgb, var(--card-bg, #020617) 70%, transparent);
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.4;
}

html:not([data-theme="light"]) .log-card.xk-restart-log-card .restart-log-summary {
  background:
    linear-gradient(180deg, rgba(3,8,20,0.9), rgba(1,4,9,0.94)),
    #02050b;
  border-color: rgba(96,165,250,0.18);
}

.log-card .restart-log-summary[hidden] {
  display: none;
}

.log-card .restart-log-summary-part {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.log-card .restart-log-summary-label {
  color: var(--muted, #94a3b8);
  font-weight: 500;
}

.log-card .restart-log-summary-value {
  font-weight: 700;
  color: color-mix(in srgb, var(--text, #e5e7eb) 92%, white 8%);
}

.log-card .restart-log-summary-part-success .restart-log-summary-value {
  color: color-mix(in srgb, var(--sem-success, #4ade80) 86%, white 14%);
}

.log-card .restart-log-summary-part-error .restart-log-summary-value {
  color: color-mix(in srgb, var(--sem-error, #f87171) 86%, white 14%);
}

.log-card .restart-log-summary-part-info .restart-log-summary-value {
  color: color-mix(in srgb, var(--sem-info, #93c5fd) 86%, white 14%);
}

.log-card .restart-log-summary-part-muted .restart-log-summary-value {
  color: var(--muted, #94a3b8);
}

.log-card .restart-log-summary-sep {
  color: rgba(148, 163, 184, 0.5);
  user-select: none;
}

.log-card .restart-log-line.log-line-info,
.log-card .restart-log-terminal-entry.log-line-info {
  color: color-mix(in srgb, var(--sem-info, #93c5fd) 80%, white 20%);
}

.log-card .restart-log-line.log-line-warning,
.log-card .restart-log-terminal-entry.log-line-warning {
  color: color-mix(in srgb, var(--sem-warning, #fbbf24) 82%, white 18%);
}

.log-card .restart-log-line.log-line-success,
.log-card .restart-log-terminal-entry.log-line-success {
  color: color-mix(in srgb, var(--sem-success, #4ade80) 82%, white 18%);
}

.log-card .restart-log-line.log-line-error,
.log-card .restart-log-terminal-entry.log-line-error {
  color: color-mix(in srgb, var(--sem-error, #f87171) 82%, white 18%);
}

.log-card .restart-log-line.log-line-debug,
.log-card .restart-log-terminal-entry.log-line-debug {
  color: color-mix(in srgb, var(--sem-debug, #a1a1aa) 82%, white 18%);
  opacity: 0.9;
}

.log-card .restart-log-line {
  padding: 2px 6px;
  white-space: normal;
}

.log-card .restart-log-line.log-line-info,
.log-card .restart-log-line.log-line-warning,
.log-card .restart-log-line.log-line-success,
.log-card .restart-log-line.log-line-error,
.log-card .restart-log-line.log-line-debug,
.log-card .restart-log-terminal-entry.log-line-info,
.log-card .restart-log-terminal-entry.log-line-warning,
.log-card .restart-log-terminal-entry.log-line-success,
.log-card .restart-log-terminal-entry.log-line-error,
.log-card .restart-log-terminal-entry.log-line-debug {
  box-shadow: none;
}

.log-card .restart-log-terminal-entry {
  min-width: max-content;
  padding: 1px 6px;
  border-radius: 6px;
}

.log-card .restart-log-terminal-entry:hover {
  background: rgba(30, 41, 59, 0.28);
}

.log-card .restart-log-runtime-line {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, max-content);
  align-items: baseline;
  column-gap: 10px;
  min-width: max-content;
}

.log-card .restart-log-runtime-ts {
  color: color-mix(in srgb, var(--muted, #94a3b8) 82%, #e0f2fe 18%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.log-card .restart-log-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  box-sizing: border-box;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(180deg, rgba(51, 65, 85, 0.82), rgba(15, 23, 42, 0.76));
  color: color-mix(in srgb, var(--text, #e5e7eb) 84%, #bfdbfe 16%);
  font-size: 0.86em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.22);
}

.log-card .restart-log-token {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.log-card .restart-log-token:hover {
  filter: brightness(1.12);
}

.log-card .restart-log-level-info {
  border-color: color-mix(in srgb, var(--sem-info, #93c5fd) 34%, transparent);
}

.log-card .restart-log-level-warning {
  border-color: color-mix(in srgb, var(--sem-warning, #fbbf24) 38%, transparent);
  color: color-mix(in srgb, var(--sem-warning, #fbbf24) 78%, white 22%);
}

.log-card .restart-log-level-error {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 42%, transparent);
  color: color-mix(in srgb, var(--sem-error, #f87171) 78%, white 22%);
}

.log-card .restart-log-level-debug {
  color: color-mix(in srgb, var(--sem-debug, #a1a1aa) 78%, white 22%);
}

.log-card .restart-log-runtime-message,
.log-card .restart-log-raw-line {
  color: color-mix(in srgb, var(--text, #e5e7eb) 88%, #bfdbfe 12%);
  white-space: pre;
}

.log-card .restart-log-runtime-source {
  color: color-mix(in srgb, var(--sem-info, #93c5fd) 72%, white 28%);
  font-weight: 700;
}

.log-card .restart-log-service-line {
  display: inline-grid;
  grid-template-columns: 16px max-content;
  align-items: baseline;
  column-gap: 8px;
  min-width: max-content;
  font-weight: 700;
  white-space: pre;
}

.log-card .restart-log-service-spacer {
  width: 16px;
}

.log-card .restart-log-service-success {
  color: color-mix(in srgb, var(--sem-success, #4ade80) 84%, white 16%);
}

.log-card .restart-log-service-error {
  color: color-mix(in srgb, var(--sem-error, #f87171) 84%, white 16%);
}

.log-card .restart-log-service-warning {
  color: color-mix(in srgb, var(--sem-warning, #fbbf24) 78%, white 22%);
}

.log-card .restart-log-entry-wrap {
  display: block;
}

.log-card .restart-log-entry {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.log-card .restart-log-ts {
  margin-right: 0;
}

.log-card .restart-log-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.42);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.log-card .restart-log-pill-subscription {
  border-color: color-mix(in srgb, var(--sem-success, #4ade80) 38%, transparent);
  background: color-mix(in srgb, var(--sem-success, #4ade80) 16%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-success, #4ade80) 86%, white 14%);
}

.log-card .restart-log-pill-service {
  border-color: color-mix(in srgb, var(--sem-info, #93c5fd) 38%, transparent);
  background: color-mix(in srgb, var(--sem-info, #93c5fd) 14%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-info, #93c5fd) 84%, white 16%);
}

.log-card .restart-log-pill-mihomo {
  border-color: color-mix(in srgb, var(--sem-warning, #fbbf24) 38%, transparent);
  background: color-mix(in srgb, var(--sem-warning, #fbbf24) 14%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-warning, #fbbf24) 84%, white 16%);
}

.log-card .restart-log-pill-core {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #38bdf8) 15%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--accent, #38bdf8) 84%, white 16%);
}

.log-card .restart-log-pill-routing {
  border-color: color-mix(in srgb, var(--sem-info, #93c5fd) 34%, transparent);
  background: color-mix(in srgb, var(--sem-info, #93c5fd) 12%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-info, #93c5fd) 82%, white 18%);
}

.log-card .restart-log-pill-xray {
  border-color: color-mix(in srgb, var(--sem-success, #4ade80) 32%, transparent);
  background: color-mix(in srgb, var(--sem-success, #4ade80) 12%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-success, #4ade80) 82%, white 18%);
}

.log-card .restart-log-pill-backup {
  border-color: color-mix(in srgb, var(--sem-debug, #a1a1aa) 36%, transparent);
  background: color-mix(in srgb, var(--sem-debug, #a1a1aa) 13%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-debug, #a1a1aa) 86%, white 14%);
}

.log-card .restart-log-pill-preflight {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 38%, transparent);
  background: color-mix(in srgb, var(--sem-error, #f87171) 14%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--sem-error, #f87171) 84%, white 16%);
}

.log-card .restart-log-pill-generic {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.5);
  color: color-mix(in srgb, var(--text, #e5e7eb) 90%, white 10%);
}

.log-card .restart-log-message {
  font-weight: 600;
}

.log-card .restart-log-meta {
  opacity: 0.74;
  font-size: 0.92em;
}

.log-card .restart-log-details-toggle {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.4);
  color: color-mix(in srgb, var(--text, #e5e7eb) 84%, white 16%);
  font: inherit;
  font-size: 0.88em;
  line-height: 1.4;
  cursor: pointer;
}

.log-card .restart-log-details-toggle:hover {
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(30, 41, 59, 0.58);
}

.log-card .restart-log-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
}

.log-card .restart-log-details[hidden] {
  display: none;
}

.log-card .restart-log-detail-row {
  display: contents;
}

.log-card .restart-log-detail-label {
  color: color-mix(in srgb, var(--muted, #94a3b8) 82%, white 18%);
  font-weight: 700;
}

.log-card .restart-log-detail-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.log-card .restart-log-preflight-open {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--sem-error, #f87171) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sem-error, #f87171) 12%, rgba(15, 23, 42, 0.72));
  color: color-mix(in srgb, var(--sem-error, #f87171) 86%, white 14%);
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.log-card .restart-log-preflight-open:hover {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 52%, transparent);
  background: color-mix(in srgb, var(--sem-error, #f87171) 18%, rgba(15, 23, 42, 0.78));
}

.log-card .restart-log-empty {
  color: var(--muted, #94a3b8);
  box-shadow: none;
}

.log-card .restart-log-filter-btn[aria-pressed="true"],
.log-card .restart-log-filter-btn.is-active {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 36%, transparent);
  background: color-mix(in srgb, var(--accent, #38bdf8) 18%, rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, var(--accent, #38bdf8) 86%, white 14%);
}

.log-card .restart-log-bottom-btn {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  min-height: 28px;
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 32%, transparent);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.88));
  color: color-mix(in srgb, var(--accent, #38bdf8) 84%, white 16%);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.34);
}

.log-card .restart-log-bottom-btn[hidden] {
  display: none;
}

html[data-theme="light"] .log-card .restart-log-pill {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .log-card .restart-log-pill-subscription {
  border-color: color-mix(in srgb, var(--sem-success, #16a34a) 28%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-success, #16a34a) 10%, white 90%);
  color: color-mix(in srgb, var(--sem-success, #16a34a) 86%, #14532d 14%);
}

html[data-theme="light"] .log-card .restart-log-pill-service {
  border-color: color-mix(in srgb, var(--sem-info, #2563eb) 24%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-info, #2563eb) 10%, white 90%);
  color: color-mix(in srgb, var(--sem-info, #2563eb) 82%, #1e3a8a 18%);
}

html[data-theme="light"] .log-card .restart-log-pill-mihomo {
  border-color: color-mix(in srgb, var(--sem-warning, #d97706) 24%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-warning, #d97706) 10%, white 90%);
  color: color-mix(in srgb, var(--sem-warning, #d97706) 82%, #78350f 18%);
}

html[data-theme="light"] .log-card .restart-log-pill-core {
  border-color: color-mix(in srgb, var(--accent, #0284c7) 26%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--accent, #0284c7) 10%, white 90%);
  color: color-mix(in srgb, var(--accent, #0284c7) 82%, #0c4a6e 18%);
}

html[data-theme="light"] .log-card .restart-log-pill-routing {
  border-color: color-mix(in srgb, var(--sem-info, #2563eb) 22%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-info, #2563eb) 8%, white 92%);
  color: color-mix(in srgb, var(--sem-info, #2563eb) 78%, #1e3a8a 22%);
}

html[data-theme="light"] .log-card .restart-log-pill-xray {
  border-color: color-mix(in srgb, var(--sem-success, #16a34a) 22%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-success, #16a34a) 8%, white 92%);
  color: color-mix(in srgb, var(--sem-success, #16a34a) 78%, #14532d 22%);
}

html[data-theme="light"] .log-card .restart-log-pill-backup {
  border-color: color-mix(in srgb, var(--sem-debug, #64748b) 22%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-debug, #64748b) 8%, white 92%);
  color: color-mix(in srgb, var(--sem-debug, #64748b) 76%, #334155 24%);
}

html[data-theme="light"] .log-card .restart-log-pill-preflight {
  border-color: color-mix(in srgb, var(--sem-error, #dc2626) 24%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-error, #dc2626) 9%, white 91%);
  color: color-mix(in srgb, var(--sem-error, #dc2626) 80%, #7f1d1d 20%);
}

html[data-theme="light"] .log-card .restart-log-details-toggle {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.86);
  color: color-mix(in srgb, var(--text, #0f172a) 88%, #1e293b 12%);
}

html[data-theme="light"] .log-card .restart-log-details {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .log-card .restart-log-filter-btn[aria-pressed="true"],
html[data-theme="light"] .log-card .restart-log-filter-btn.is-active {
  border-color: color-mix(in srgb, var(--accent, #0284c7) 24%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--accent, #0284c7) 10%, white 90%);
  color: color-mix(in srgb, var(--accent, #0284c7) 80%, #0c4a6e 20%);
}

html[data-theme="light"] .restart-log-search-input {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text, #0f172a);
}

html[data-theme="light"] .restart-log-search-icon,
html[data-theme="light"] .restart-log-search-clear {
  color: color-mix(in srgb, var(--muted, #64748b) 82%, #0f172a 18%);
}

html[data-theme="light"] .restart-log-search-clear:hover {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text, #0f172a);
}

html[data-theme="light"] .log-card .restart-log-bottom-btn {
  border-color: color-mix(in srgb, var(--accent, #0284c7) 22%, rgba(15, 23, 42, 0.08));
  background: rgba(255, 255, 255, 0.94);
  color: color-mix(in srgb, var(--accent, #0284c7) 80%, #0c4a6e 20%);
}

html[data-theme="light"] .log-card .restart-log-preflight-open {
  border-color: color-mix(in srgb, var(--sem-error, #dc2626) 24%, rgba(15, 23, 42, 0.08));
  background: color-mix(in srgb, var(--sem-error, #dc2626) 8%, white 92%);
  color: color-mix(in srgb, var(--sem-error, #dc2626) 82%, #7f1d1d 18%);
}



.log-btn.icon-only {
  font-size: calc(18px * var(--xk-font-scale));
  line-height: 1;
  padding-inline: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Backup action buttons in backups table */
.backup-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

button.backup-icon-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.backup-icon-btn .backup-icon,
.backup-icon-btn .backup-icon {
  width: 14px;
  height: 14px;
}

/* More prominent style for delete backup button */
button.backup-icon-btn.backup-delete-btn {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  border-color: #b91c1c;
}

/* Backups history page: premium shell + panel-style header actions */
body.xk-backups-page {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(209, 177, 122, 0.12), transparent 24%),
    linear-gradient(180deg, #07101f 0%, #08111e 52%, #040913 100%);
}

body.xk-backups-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(125deg, transparent 0 38%, rgba(255, 255, 255, 0.03) 50%, transparent 62%);
  opacity: 0.72;
  mix-blend-mode: screen;
  z-index: 0;
}

body.xk-backups-page .container-wide {
  position: relative;
  z-index: 1;
  max-width: min(1520px, 95vw);
  padding: 28px 24px 40px;
}

body.xk-backups-page a {
  color: #e7cf9a;
}

body.xk-backups-page .panel-header {
  position: relative;
  margin-bottom: 28px;
  padding: 22px 24px;
  border-radius: 30px;
  border: 1px solid rgba(209, 177, 122, 0.14);
  background:
    radial-gradient(circle at top right, rgba(209, 177, 122, 0.14), transparent 30%),
    radial-gradient(circle at left center, rgba(59, 130, 246, 0.10), transparent 26%),
    linear-gradient(135deg, rgba(18, 28, 45, 0.94), rgba(7, 12, 22, 0.92));
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

body.xk-backups-page .panel-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 36%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
}

body.xk-backups-page .panel-header > * {
  position: relative;
  z-index: 1;
}

body.xk-backups-page .xk-backups-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

body.xk-backups-page .xk-backups-header-title {
  min-width: 0;
  flex: 1 1 auto;
}

body.xk-backups-page .panel-header h1 {
  margin: 0;
  font-size: clamp(1.55rem, 1.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #f9f1e3;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

body.xk-backups-page .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body.xk-backups-page .xk-header-btn,
body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(148, 197, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 28, 48, 0.78), rgba(8, 14, 28, 0.72)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 46%);
  color: #eaf2ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  text-decoration: none;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

body.xk-backups-page .xk-header-btn::before,
body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%);
  opacity: 0.9;
  z-index: -1;
}

body.xk-backups-page .xk-header-btn:hover,
body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(186, 221, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -12px 22px rgba(2, 8, 23, 0.26),
    0 16px 30px rgba(2, 8, 23, 0.32);
}

body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme {
  min-width: 60px;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(24, 51, 104, 0.82), rgba(10, 23, 52, 0.78)),
    radial-gradient(circle at 30% 28%, rgba(147, 197, 253, 0.4), transparent 34%);
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(96, 165, 250, 0.12),
    0 14px 28px rgba(8, 47, 107, 0.3);
}

body.xk-backups-page .xk-header-btn-ui {
  background:
    linear-gradient(180deg, rgba(26, 44, 82, 0.82), rgba(11, 23, 48, 0.78)),
    radial-gradient(circle at 24% 24%, rgba(125, 211, 252, 0.24), transparent 38%);
  border-color: rgba(103, 232, 249, 0.18);
}

body.xk-backups-page .xk-header-btn-devtools {
  background:
    linear-gradient(180deg, rgba(37, 35, 84, 0.84), rgba(17, 18, 48, 0.8)),
    radial-gradient(circle at 28% 24%, rgba(167, 139, 250, 0.22), transparent 36%);
  border-color: rgba(167, 139, 250, 0.2);
}

body.xk-backups-page .xk-header-btn-logout {
  background:
    linear-gradient(180deg, rgba(76, 22, 31, 0.82), rgba(41, 10, 17, 0.8)),
    radial-gradient(circle at 28% 22%, rgba(251, 113, 133, 0.18), transparent 36%);
  border-color: rgba(251, 113, 133, 0.18);
}

body.xk-backups-page .xk-backups-table-card {
  position: relative;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(10, 18, 34, 0.92), rgba(6, 12, 24, 0.88)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 32%);
  box-shadow:
    0 28px 60px rgba(2, 8, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

body.xk-backups-page .xk-backups-table-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%);
}

body.xk-backups-page #backups-table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.xk-backups-page #backups-table thead {
  background: transparent;
}

body.xk-backups-page #backups-table th,
body.xk-backups-page #backups-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
}

body.xk-backups-page #backups-table th {
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.72);
}

body.xk-backups-page #backups-table td {
  color: color-mix(in srgb, var(--text, #e5e7eb) 94%, white 6%);
  background: transparent;
}

body.xk-backups-page #backups-table tbody tr {
  transition: background 0.16s ease, transform 0.16s ease;
}

body.xk-backups-page #backups-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.44);
}

body.xk-backups-page #backups-table tbody tr:last-child td {
  border-bottom: none;
}

body.xk-backups-page #backups-table td code {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background: rgba(8, 15, 29, 0.72);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.xk-backups-page .backup-actions {
  gap: 8px;
}

body.xk-backups-page button.backup-icon-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(16, 31, 55, 0.88), rgba(8, 18, 34, 0.82)),
    radial-gradient(circle at 28% 24%, rgba(96, 165, 250, 0.12), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 20px rgba(2, 8, 23, 0.20);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

body.xk-backups-page button.backup-icon-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(147, 197, 253, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 24px rgba(2, 8, 23, 0.24);
}

body.xk-backups-page button.backup-icon-btn .backup-icon,
body.xk-backups-page .backup-icon-btn .backup-icon {
  filter: brightness(1.08);
}

body.xk-backups-page button.backup-icon-btn.backup-delete-btn {
  border-color: rgba(248, 113, 113, 0.30);
  background:
    linear-gradient(180deg, rgba(116, 22, 36, 0.90), rgba(63, 12, 22, 0.86)),
    radial-gradient(circle at 28% 24%, rgba(251, 113, 133, 0.18), transparent 36%);
}

body.xk-backups-page #backups-status {
  margin-top: 14px;
}

body.xk-backups-page footer {
  margin-top: 18px;
  text-align: left;
  color: rgba(148, 163, 184, 0.78);
}

html[data-theme="light"] body.xk-backups-page {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.09), transparent 24%),
    linear-gradient(180deg, #f4f8ff 0%, #eef4fb 48%, #f8fafc 100%);
}

html[data-theme="light"] body.xk-backups-page::before {
  opacity: 0.42;
}

html[data-theme="light"] body.xk-backups-page a {
  color: #8f5d21;
}

html[data-theme="light"] body.xk-backups-page .panel-header {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(90deg, rgba(244, 249, 255, 0.98) 0%, rgba(235, 244, 255, 0.96) 50%, rgba(242, 247, 255, 0.94) 100%),
    radial-gradient(circle at 18% 16%, rgba(96, 165, 250, 0.12), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 20px 44px rgba(47, 79, 140, 0.10);
}

html[data-theme="light"] body.xk-backups-page .panel-header h1 {
  color: #0f172a;
  text-shadow: none;
}

html[data-theme="light"] body.xk-backups-page .xk-header-btn,
html[data-theme="light"] body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme {
  border-color: rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 247, 255, 0.82)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.56), transparent 44%);
  color: #162033;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -10px 18px rgba(191, 219, 254, 0.16),
    0 12px 24px rgba(47, 79, 140, 0.10);
}

html[data-theme="light"] body.xk-backups-page .xk-header-btn-theme {
  background:
    linear-gradient(180deg, rgba(236, 245, 255, 0.98), rgba(221, 235, 255, 0.9)),
    radial-gradient(circle at 30% 28%, rgba(96, 165, 250, 0.2), transparent 36%);
}

html[data-theme="light"] body.xk-backups-page .xk-header-btn-ui {
  background:
    linear-gradient(180deg, rgba(240, 251, 255, 0.98), rgba(225, 243, 255, 0.9)),
    radial-gradient(circle at 24% 24%, rgba(103, 232, 249, 0.18), transparent 38%);
}

html[data-theme="light"] body.xk-backups-page .xk-header-btn-devtools {
  background:
    linear-gradient(180deg, rgba(245, 241, 255, 0.98), rgba(234, 228, 255, 0.9)),
    radial-gradient(circle at 24% 24%, rgba(167, 139, 250, 0.16), transparent 38%);
}

html[data-theme="light"] body.xk-backups-page .xk-header-btn-logout {
  background:
    linear-gradient(180deg, rgba(255, 243, 245, 0.98), rgba(255, 228, 233, 0.9)),
    radial-gradient(circle at 24% 24%, rgba(251, 113, 133, 0.14), transparent 38%);
}

html[data-theme="light"] body.xk-backups-page .xk-backups-table-card {
  border-color: rgba(96, 165, 250, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.92)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%);
  box-shadow:
    0 22px 42px rgba(47, 79, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] body.xk-backups-page #backups-table th,
html[data-theme="light"] body.xk-backups-page #backups-table td {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="light"] body.xk-backups-page #backups-table th {
  color: #64748b;
}

html[data-theme="light"] body.xk-backups-page #backups-table td {
  color: #0f172a;
}

html[data-theme="light"] body.xk-backups-page #backups-table tbody tr:hover {
  background: rgba(219, 234, 254, 0.46);
}

html[data-theme="light"] body.xk-backups-page #backups-table td code {
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(241, 245, 249, 0.92);
  color: #1d4ed8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] body.xk-backups-page button.backup-icon-btn {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 245, 255, 0.88)),
    radial-gradient(circle at 28% 24%, rgba(96, 165, 250, 0.12), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 20px rgba(47, 79, 140, 0.10);
}

html[data-theme="light"] body.xk-backups-page button.backup-icon-btn.backup-delete-btn {
  border-color: rgba(251, 113, 133, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.92)),
    radial-gradient(circle at 28% 24%, rgba(251, 113, 133, 0.12), transparent 36%);
}

html[data-theme="light"] body.xk-backups-page footer {
  color: rgba(71, 85, 105, 0.78);
}

@media (max-width: 900px) {
  body.xk-backups-page .container-wide {
    padding: 20px 14px 32px;
  }

  body.xk-backups-page .panel-header {
    padding: 18px 16px;
    border-radius: 24px;
  }

  body.xk-backups-page .xk-backups-header-main {
    align-items: flex-start;
  }

  body.xk-backups-page .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.xk-backups-page #backups-table th,
  body.xk-backups-page #backups-table td {
    padding: 12px;
  }
}

@keyframes xray-log-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xray-log-lamp[data-state="on"] {
    animation: none;
  }
}

/* Xray logs status lamp */
.xray-log-lamp {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  margin-left: 8px;
  background: #6b7280;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  vertical-align: middle;
}

.xray-log-lamp[data-state="on"] {
  background: var(--sem-success, #22c55e);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.85);
  box-shadow: 0 0 6px color-mix(in srgb, var(--sem-success, #22c55e) 70%, transparent);
  /* Logs are being collected in real time: blink like an LED (on/off). */
  animation: xray-log-blink 1s steps(1, end) infinite;
}

/* "Онлайн" включён, но сбор не идёт (логи выключены / пауза / нет строк):
   ровный зелёный без мигания — просто индикация, что тумблер включён. */
.xray-log-lamp[data-state="armed"] {
  background: var(--sem-success, #22c55e);
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 5px color-mix(in srgb, var(--sem-success, #22c55e) 50%, transparent);
  animation: none;
}


.xray-log-lamp[data-state="off"] {
  background: #4b5563;
  box-shadow: none;
}

.xray-log-lamp[data-state="error"] {
  background: var(--sem-warning, #f97316);
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.7);
  box-shadow: 0 0 6px color-mix(in srgb, var(--sem-warning, #f97316) 70%, transparent);
}

.xray-log-lamp.pulse {
  transform: scale(1.2);
}

/* Header badge: global Xray logs enabled */
.xray-logs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--sem-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.12);
  background: color-mix(in srgb, var(--sem-warning, #f59e0b) 12%, transparent);
  color: var(--sem-warning, #fbbf24);
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* Header badge: active Xray profile (classic vs hysteria2 fragments) */
.xray-profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 35%, transparent);
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 10%, transparent);
  color: var(--text-muted, #94a3b8);
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.xray-profile-badge[data-profile="hys2"] {
  border-color: var(--accent, #60a5fa);
  background: color-mix(in srgb, var(--accent, #60a5fa) 12%, transparent);
  color: var(--accent, #60a5fa);
}

/* Small status badge for JSONC sidecar/comments (routing + JSON editor modal). */
.xk-comments-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 35%, transparent);
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 8%, transparent);
  color: var(--text-muted, #94a3b8);
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* Small dot indicator (chip style). */
.xk-comments-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 70%, transparent);
  display: inline-block;
}

.xk-comments-badge.xk-comments-on {
  border-color: var(--sem-success, #22c55e);
  background: color-mix(in srgb, var(--sem-success, #22c55e) 12%, transparent);
  color: var(--sem-success, #22c55e);
}

.xk-comments-badge.xk-comments-on::before {
  background: var(--sem-success, #22c55e);
}

.xk-comments-badge.xk-comments-off {
  border-color: color-mix(in srgb, var(--text-muted, #94a3b8) 35%, transparent);
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 8%, transparent);
  color: var(--text-muted, #94a3b8);
}

.xk-comments-badge.xk-comments-off::before {
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 70%, transparent);
}

.xk-comments-badge.xk-schema-badge {
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 34%, transparent);
  background: color-mix(in srgb, var(--accent, #60a5fa) 9%, transparent);
  color: color-mix(in srgb, var(--accent, #60a5fa) 82%, #e5e7eb);
}

.xk-comments-badge.xk-schema-badge::before {
  background: color-mix(in srgb, var(--accent, #60a5fa) 75%, transparent);
}

.xk-comments-badge.xk-schema-badge.xk-schema-off {
  border-color: color-mix(in srgb, var(--text-muted, #94a3b8) 35%, transparent);
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 8%, transparent);
  color: var(--text-muted, #94a3b8);
}

.xk-comments-badge.xk-schema-badge.xk-schema-off::before {
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 70%, transparent);
}

.xray-logs-badge[data-state="on"] {
  display: inline-flex;
  animation: xray-logs-badge-blink 1.1s infinite;
}

.xray-logs-badge[data-state="off"] {
  display: none;
}

@keyframes xray-logs-badge-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.98); }
}

/* Mobile layout tweaks */
@media (max-width: 640px) {
  /* On small screens:
     - DevTools tabs can wrap naturally.
     - Header tabs stay on one line and become horizontally scrollable.
  */
  .top-tabs { justify-content: flex-start; }

  .top-tabs.header-tabs .top-tab-btn {
    flex: 0 0 auto;
    font-size: calc(12px * var(--xk-font-scale));
    padding: 6px 10px;
  }

  table {
    font-size: calc(12px * var(--xk-font-scale));
  }

  th,
  td {
    padding: 6px 4px;
  }

  .backup-actions {
    justify-content: flex-end;
  }
}


/* GitHub catalog modal */
.modal {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay, #010612bd);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;

  /*
    Safety net for modals that end up larger than the viewport (or if a modal
    is positioned incorrectly by custom scripts/styles).
    The overlay becomes scrollable so the header/close button stays reachable.
  */
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
}

/* Confirm dialog must stay above other modals (e.g. file manager operations modal). */
#confirm-modal {
  z-index: 2147482990 !important;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--modal-bg, #060e1eeb);
  color: var(--modal-text, #f8fbff);
  border-radius: 12px;
  border: 1px solid var(--modal-border, #475569d1);
  padding: 12px 14px 14px 14px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  box-sizing: border-box;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.55);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Terminal history drawer (right-side modal) */
.modal.modal-drawer {
  justify-content: flex-end;
  align-items: stretch;

  /* Drawer should stick to the edge without extra padding/scroll on overlay. */
  padding: 0;
  overflow: hidden;
}

/* Ensure regular modals are centered even if some page styles override flex alignment. */
.modal:not(.modal-drawer) {
  align-items: center !important;
  justify-content: center !important;
}

.modal.modal-drawer .modal-content {
  max-width: 420px;
  width: min(92vw, 420px);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border-left: 1px solid var(--modal-border, #475569d1);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

.terminal-history-filter {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(255,255,255,0.04);
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
  outline: none;
}

.terminal-history-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  max-height: calc(100vh - 220px);
  padding-right: 4px;
}

.terminal-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(51,65,85,0.7);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}

.terminal-history-item:hover {
  background: rgba(255,255,255,0.06);
}

.terminal-history-item.selected {
  border-color: rgba(56,189,248,0.85);
  box-shadow: 0 0 0 2px rgba(56,189,248,0.15);
}

.terminal-history-cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  word-break: break-word;
  white-space: pre-wrap;
  opacity: 0.95;
}

.terminal-history-hint {
  margin-top: 8px;
  font-size: 0.85rem;
  opacity: 0.75;
}



.modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.github-config-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.github-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
}

.github-config-title {
  font-weight: 600;
}

.github-config-meta {
  font-size: 0.8rem;
  opacity: 0.8;
}

.github-catalog-messages{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 6px;
}

.github-stale-pill{
  padding: 3px 10px;
  border-radius: 999px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #38bdf8) 14%, transparent);
  color: color-mix(in srgb, var(--accent, #38bdf8) 85%, white 15%);
  white-space: nowrap;
}

html[data-theme="light"] .github-stale-pill{
  color: color-mix(in srgb, var(--accent, #2563eb) 75%, #0f172a 25%);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
}


.github-export-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.github-export-form input,
.github-export-form textarea {
  width: 100%;
  background: #111827;
  border: 1px solid #374151;
  color: #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
}


.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--modal-header-border, var(--modal-border, #475569d1));

  /* Drag handle for draggable modals (buttons override cursor as needed). */
  cursor: move;
  user-select: none;
}

.modal-title {
  font-size: calc(15px * var(--xk-font-scale));
  font-weight: 600;
  color: var(--modal-text, inherit);
}

.modal-close {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: calc(18px * var(--xk-font-scale));
  line-height: 1;
}

.modal-close:hover {
  color: #e5e7eb;
}

.modal-body {
  margin-top: 8px;
  margin-bottom: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-resizer {
  position: absolute;
  width: 16px;
  height: 16px;
  left: auto;
  right: 6px;
  bottom: 6px;
  cursor: se-resize;
  z-index: 5;
  opacity: 0.55;
  border-right: 2px solid rgba(148,163,184,0.7);
  border-bottom: 2px solid rgba(148,163,184,0.7);
  border-radius: 2px;
  user-select: none;
  touch-action: none;
}

/* Routing help modal: slightly larger resize handle (iframe makes pointer events trickier). */
#xkeen-routing-help-modal .modal-resizer {
  width: 20px;
  height: 20px;
  right: 10px;
  bottom: 10px;
}

.modal-resizer::before {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(148,163,184,0.45);
  border-bottom: 2px solid rgba(148,163,184,0.45);
  border-radius: 2px;
}

.modal-resizer:hover {
  opacity: 0.9;
}

/* Forced rules wizard modal */
#routing-forced-rules-modal {
  padding: 8px;
}

#routing-forced-rules-modal .modal-content {
  width: min(99vw, 1660px);
  max-width: 1660px;
  height: min(95vh, 1020px);
  max-height: 95vh;
  padding: 10px 12px 12px 12px;
  border-radius: 22px;
  border-color: rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.13), transparent 30%),
    radial-gradient(circle at bottom left, rgba(14, 116, 144, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.985), rgba(2, 6, 23, 0.965));
  box-shadow:
    0 28px 86px rgba(2, 6, 23, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#routing-forced-rules-modal .modal-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#routing-forced-rules-modal .modal-body {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#routing-forced-rules-modal .routing-rule-input,
#routing-forced-rules-modal .xkeen-textarea {
  width: 100%;
  box-sizing: border-box;
}

#routing-forced-rules-modal .modal-actions {
  margin-top: 10px;
}

.xk-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xk-icon-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.xk-btn-inline-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: calc(13px * var(--xk-font-scale));
}

.xk-forced-wizard-lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.13), rgba(15, 23, 42, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(2, 6, 23, 0.22);
}

.xk-forced-wizard-lead-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(19px * var(--xk-font-scale));
  border: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(37, 99, 235, 0.18);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.xk-forced-wizard-lead-title {
  margin: 0 0 4px;
  font-size: calc(15px * var(--xk-font-scale));
  font-weight: 700;
  color: var(--fg, #f8fafc);
}

.xk-forced-wizard-grid {
  display: grid;
  grid-template-columns: minmax(390px, 0.9fr) minmax(620px, 1.1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

.xk-forced-wizard-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.76));
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(2, 6, 23, 0.18);
}

.xk-forced-wizard-input-panel,
.xk-forced-wizard-preview-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.xk-forced-wizard-panelhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.xk-forced-wizard-kicker {
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xk-forced-controls-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 178px);
  gap: 10px;
  align-items: end;
}

.xk-forced-fieldgroup,
.xk-forced-option-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.xk-forced-fieldgroup-compact {
  max-width: 178px;
}

.xk-forced-fieldlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xk-forced-editor-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.xk-forced-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xk-forced-outbound-wrap {
  display: flex;
  gap: 7px;
  align-items: center;
}

.xk-forced-outbound-wrap .btn-icon,
.xk-forced-wizard-toolbar .btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 11px;
  font-size: calc(14px * var(--xk-font-scale));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#routing-forced-rules-values {
  min-height: 206px;
  resize: vertical;
  line-height: 1.32;
}

.xk-forced-wizard-toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0;
  padding: 3px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.42);
}

.xk-forced-wizard-note {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(15, 23, 42, 0.40);
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.42;
}

.xk-forced-options-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
  gap: 8px;
  margin-bottom: 0;
}

.xk-forced-options-grid .xk-forced-option-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.xk-forced-options-grid .xk-forced-option-card input[type="checkbox"] {
  margin-top: 2px;
}

.xk-forced-option-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}

.xk-forced-option-card strong {
  color: var(--fg, #e5e7eb);
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 600;
}

.xk-forced-option-card small {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
}

.xk-forced-option-select .routing-rule-input {
  width: 100%;
}

.xk-forced-option-wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.xk-forced-wizard-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.15), rgba(30, 41, 59, 0.34));
  color: #dbeafe;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.xk-forced-wizard-listbox {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  flex: 1 1 auto;
}

.xk-forced-wizard-listhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xk-forced-wizard-listtitle {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xk-forced-list-subtitle {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.35;
}

.xk-forced-wizard-list {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 15px;
  padding: 8px;
  box-sizing: border-box;
  background: rgba(2, 6, 23, 0.34);
}

.xk-forced-wizard-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.20);
  color: #94a3b8;
  text-align: center;
}

.xk-forced-rule-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(15, 23, 42, 0.36)),
    rgba(2, 6, 23, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 6px 18px rgba(2, 6, 23, 0.16);
}

.xk-forced-rule-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.95), rgba(52, 211, 153, 0.45));
  opacity: 0.9;
}

.xk-forced-rule-card + .xk-forced-rule-card {
  margin-top: 0;
}

.xk-forced-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.xk-forced-rule-tagwrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}

.xk-forced-rule-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(30, 41, 59, 0.25));
  color: var(--fg, #e5e7eb);
  font-weight: 600;
}

.xk-forced-rule-tag code {
  font-size: calc(12px * var(--xk-font-scale));
}

.xk-forced-rule-accent {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 1), rgba(52, 211, 153, 0.82));
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.xk-forced-rule-total {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  background: rgba(255, 255, 255, 0.04);
}

.xk-forced-rule-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.xk-forced-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  font-size: calc(11px * var(--xk-font-scale));
  white-space: nowrap;
}

.xk-forced-count.is-total {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.10);
  color: #e2e8f0;
}

.xk-forced-count.is-domain {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(37, 99, 235, 0.14);
  color: #dbeafe;
}

.xk-forced-count.is-ip {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(16, 185, 129, 0.14);
  color: #d1fae5;
}

.xk-forced-rule-groups {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.xk-forced-rule-groups.is-inline {
  gap: 6px;
}

.xk-forced-rule-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 9px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  background: rgba(15, 23, 42, 0.34);
}

.xk-forced-inline-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  background: rgba(15, 23, 42, 0.34);
}

.xk-forced-inline-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.xk-forced-inline-row[data-kind="domain"] .xk-forced-inline-label {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.18);
}

.xk-forced-inline-row[data-kind="ip"] .xk-forced-inline-label {
  color: #bbf7d0;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.18);
}

.xk-forced-rule-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xk-forced-rule-group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.xk-forced-rule-group[data-kind="domain"] .xk-forced-rule-group-title {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.18);
}

.xk-forced-rule-group[data-kind="ip"] .xk-forced-rule-group-title {
  color: #bbf7d0;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.18);
}

.xk-forced-rule-group-meta {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
}

.xk-forced-rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.xk-forced-rule-chips.is-inline {
  min-width: 0;
}

.xk-forced-rule-empty {
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
}

#routing-forced-rules-modal .xk-chip {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--fg, #e5e7eb);
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#routing-forced-rules-modal .xk-chip:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

#routing-forced-rules-modal .xk-chip[data-kind="domain"] {
  border-color: rgba(96, 165, 250, 0.18);
  background: rgba(37, 99, 235, 0.12);
  color: #dbeafe;
}

#routing-forced-rules-modal .xk-chip[data-kind="domain"]:hover {
  background: rgba(37, 99, 235, 0.18);
}

#routing-forced-rules-modal .xk-chip[data-kind="ip"] {
  border-color: rgba(52, 211, 153, 0.18);
  background: rgba(16, 185, 129, 0.12);
  color: #d1fae5;
}

#routing-forced-rules-modal .xk-chip[data-kind="ip"]:hover {
  background: rgba(16, 185, 129, 0.18);
}

.xk-forced-wizard-footer {
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.xk-forced-wizard-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.xk-forced-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1500px) {
  #routing-forced-rules-modal .modal-content {
    width: min(99vw, 1500px);
    height: min(95vh, 980px);
  }

  .xk-forced-wizard-grid {
    grid-template-columns: 1fr;
  }

  .xk-forced-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #routing-forced-rules-modal {
    padding: 6px;
  }

  #routing-forced-rules-modal .modal-content {
    width: min(100vw, 980px);
    height: min(96vh, 980px);
    border-radius: 18px;
  }

  .xk-forced-controls-grid,
  .xk-forced-options-grid,
  .xk-forced-wizard-list {
    grid-template-columns: 1fr;
  }

  .xk-forced-fieldgroup-compact {
    max-width: none;
  }

  .xk-forced-option-wide {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .xk-forced-wizard-lead {
    padding: 12px;
  }

  .xk-forced-wizard-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .xk-forced-editor-head,
  .xk-forced-wizard-panelhead,
  .xk-forced-wizard-listhead,
  .xk-forced-rule-head,
  .xk-forced-wizard-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .xk-forced-wizard-summary,
  .xk-forced-rule-badges,
  .xk-forced-wizard-footer-actions {
    justify-content: flex-start;
  }

  .xk-forced-inline-row {
    grid-template-columns: 1fr;
  }

  .xk-forced-wizard-toolbar {
    align-self: flex-end;
  }
}

html[data-theme="light"] #routing-forced-rules-modal .modal-content {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

html[data-theme="light"] .xk-forced-wizard-lead {
  border-color: rgba(2, 6, 23, 0.10);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.10), rgba(2, 6, 23, 0.02));
}

html[data-theme="light"] .xk-forced-wizard-panel,
html[data-theme="light"] .xk-forced-option-card,
html[data-theme="light"] .xk-forced-rule-card,
html[data-theme="light"] .xk-forced-wizard-list,
html[data-theme="light"] .xk-forced-wizard-note,
html[data-theme="light"] .xk-forced-rule-group {
  border-color: rgba(2, 6, 23, 0.10);
}

html[data-theme="light"] .xk-forced-wizard-panel,
html[data-theme="light"] .xk-forced-option-card,
html[data-theme="light"] .xk-forced-rule-card {
  background: rgba(2, 6, 23, 0.02);
}

html[data-theme="light"] .xk-forced-wizard-list,
html[data-theme="light"] .xk-forced-wizard-note,
html[data-theme="light"] .xk-forced-rule-group,
html[data-theme="light"] .xk-forced-rule-total {
  background: rgba(2, 6, 23, 0.035);
}

html[data-theme="light"] #routing-forced-rules-modal .xk-chip {
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.05);
  color: var(--fg, #111827);
}

html[data-theme="light"] #routing-forced-rules-modal .xk-chip:hover {
  background: rgba(0,0,0,.08);
}

html[data-theme="light"] #routing-forced-rules-modal .xk-chip[data-kind="domain"] {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}

html[data-theme="light"] #routing-forced-rules-modal .xk-chip[data-kind="ip"] {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
}



/* Mihomo import modal — premium compact redesign */
#mihomo-import-modal {
  padding: 10px;
}

#mihomo-import-modal .modal-content {
  width: min(96vw, 1080px);
  max-width: 1080px;
  max-height: min(92vh, 880px);
  min-height: min(610px, 92vh);
  padding: 12px 14px 14px;
  border-radius: 24px;
  border-color: rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.985), rgba(2, 6, 23, 0.965));
  box-shadow:
    0 28px 86px rgba(2, 6, 23, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.xk-mi-header {
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.xk-mi-titlebox {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.xk-mi-kicker {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xk-mi-subtitle {
  margin: 0;
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.45;
  max-width: 78ch;
}

.xk-mi-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

.xk-mi-lead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.50));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(2, 6, 23, 0.18);
}

.xk-mi-lead-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--xk-font-scale));
  border: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(37, 99, 235, 0.18);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.xk-mi-lead-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.xk-mi-lead-title {
  color: var(--fg, #f8fafc);
  font-size: calc(15px * var(--xk-font-scale));
  font-weight: 700;
  margin-bottom: 4px;
}

.xk-mi-lead-desc {
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.45;
}

.xk-mi-chiprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.xk-mi-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(15, 23, 42, 0.45);
  color: #dbeafe;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
  white-space: nowrap;
}

.xk-mi-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.98fr) minmax(420px, 1.02fr);
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
}

.xk-mi-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(2, 6, 23, 0.16);
  box-sizing: border-box;
}

.xk-mi-panel--controls {
  overflow: auto;
}

.xk-mi-panel--preview {
  min-height: 0;
  overflow: hidden;
}

.xk-mi-field-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.xk-mi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xk-mi-field--grow {
  flex: 1 1 auto;
}

.xk-mi-control,
.xk-mi-input,
.xk-mi-preview {
  width: 100%;
  box-sizing: border-box;
}

.xk-mi-input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.42;
}

.xk-mi-status {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(15, 23, 42, 0.46);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xk-status-inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  min-width: 0;
}

.xk-status-message {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xk-inline-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 1px;
  border-radius: 999px;
  border: 2px solid rgba(191, 219, 254, 0.18);
  border-top-color: #dbeafe;
  border-right-color: rgba(125, 211, 252, 0.82);
  animation: xkeen-spinner 0.8s linear infinite;
}

.xk-mi-status.success {
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.24);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(15, 23, 42, 0.48));
}

.xk-mi-status.error {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.25);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.22), rgba(15, 23, 42, 0.52));
}

.xk-mi-status.warning {
  color: #fde68a;
  border-color: rgba(250, 204, 21, 0.28);
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.24), rgba(15, 23, 42, 0.52));
}

.xk-mi-target {
  margin: 0;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(2, 132, 199, 0.12);
  color: #cfe8ff;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
}

.xk-mi-target.hidden,
.xk-mi-status.hidden {
  display: none;
}

.xk-mi-groups-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.xk-mi-refresh-card.hidden {
  display: none;
}

.xk-mi-refresh-field {
  max-width: 260px;
}

.xk-mi-refresh-note {
  margin: 0;
  color: #a9b8d3;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.42;
}

.xk-mi-managed-list {
  display: grid;
  gap: 7px;
}

.xk-mi-managed-list:empty {
  display: none;
}

.xk-mi-managed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.28);
}

.xk-mi-managed-copy {
  min-width: 0;
}

.xk-mi-managed-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.xk-mi-managed-interval {
  width: 54px;
  min-width: 54px;
  height: 26px;
  padding: 2px 18px 2px 7px;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background-position: right 6px center;
  background-size: 11px 11px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.28);
}

.xk-mi-managed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 9px;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1;
  white-space: nowrap;
}

.xk-mi-managed-btn--danger {
  border-color: rgba(248, 113, 113, 0.38);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.18);
}

.mihomo-managed-sub-title {
  color: #e5e7eb;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mihomo-managed-sub-meta,
.mihomo-managed-sub-interval-label {
  color: #93a4bf;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.35;
}

.mihomo-managed-sub-meta {
  margin-top: 2px;
}

.xk-mi-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.xk-mi-section-title {
  color: var(--fg, #f8fafc);
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 700;
}

.xk-mi-section-subtitle {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.4;
  margin-top: 3px;
}

.xk-mi-inline-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.xk-mi-groups-shell {
  min-height: 88px;
  max-height: 138px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(2, 6, 23, 0.34);
}

.xk-mi-remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.xk-mi-section-head--preview {
  align-items: center;
}

.xk-mi-preview-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(2, 6, 23, 0.34);
  overflow: hidden;
}

#mihomo-import-preview,
#mihomo-import-preview-monaco,
#mihomo-import-modal .xk-mihomo-import-preview,
#mihomo-import-modal .xk-mihomo-import-preview.CodeMirror,
#mihomo-import-modal .xk-mihomo-import-preview .CodeMirror,
#mihomo-import-modal .xk-mihomo-import-preview .cm-editor {
  min-height: 320px;
  height: 100%;
}

#mihomo-import-modal .xk-mihomo-import-preview .CodeMirror,
#mihomo-import-modal .xk-mihomo-import-preview.CodeMirror,
#mihomo-import-preview {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#mihomo-import-preview {
  resize: none;
  line-height: 1.42;
}

.xk-mi-footer {
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.xk-mi-footer-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.xk-mi-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 980px) {
  #mihomo-import-modal .modal-content {
    width: min(98vw, 920px);
  }

  .xk-mi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #mihomo-import-modal {
    padding: 6px;
  }

  #mihomo-import-modal .modal-content {
    width: min(100vw, 760px);
    border-radius: 18px;
  }

  .xk-mi-header,
  .xk-mi-lead,
  .xk-mi-section-head,
  .xk-mi-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .xk-mi-chiprow,
  .xk-mi-inline-actions,
  .xk-mi-footer-actions {
    justify-content: flex-start;
  }

  .xk-mi-managed-row {
    grid-template-columns: 1fr;
  }

  .xk-mi-managed-actions {
    justify-content: flex-start;
  }

  #mihomo-import-preview,
  #mihomo-import-preview-monaco,
  #mihomo-import-modal .xk-mihomo-import-preview,
  #mihomo-import-modal .xk-mihomo-import-preview.CodeMirror,
  #mihomo-import-modal .xk-mihomo-import-preview .CodeMirror,
  #mihomo-import-modal .xk-mihomo-import-preview .cm-editor {
    min-height: 280px;
    height: 100%;
  }
}

html[data-theme="light"] #mihomo-import-modal .modal-content {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

html[data-theme="light"] .xk-mi-subtitle,
html[data-theme="light"] .xk-mi-lead-desc {
  color: #475569;
}

html[data-theme="light"] .xk-mi-lead {
  border-color: rgba(2, 6, 23, 0.10);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), rgba(2, 6, 23, 0.02));
}

html[data-theme="light"] .xk-mi-panel,
html[data-theme="light"] .xk-mi-groups-card,
html[data-theme="light"] .xk-mi-preview-wrap,
html[data-theme="light"] .xk-mi-groups-shell,
html[data-theme="light"] .xk-mi-status {
  border-color: rgba(2, 6, 23, 0.10);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .xk-mi-chip,
html[data-theme="light"] .xk-mi-target {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.16);
}

html[data-theme="light"] .xk-mi-managed-row {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(2, 6, 23, 0.10);
}

html[data-theme="light"] .xk-mi-managed-btn--danger {
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.88);
  border-color: rgba(248, 113, 113, 0.28);
}

html[data-theme="light"] .mihomo-managed-sub-title {
  color: #111827;
}

html[data-theme="light"] .mihomo-managed-sub-meta,
html[data-theme="light"] .mihomo-managed-sub-interval-label {
  color: #64748b;
}

html[data-theme="light"] .xk-mi-section-subtitle,
html[data-theme="light"] .xk-mi-kicker {
  color: #64748b;
}

html[data-theme="light"] .xk-mi-status.success {
  color: #1d4ed8;
}

html[data-theme="light"] .xk-mi-status.error {
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.88);
  border-color: rgba(248, 113, 113, 0.20);
}

html[data-theme="light"] .xk-mi-status.warning {
  color: #713f12;
  background: rgba(254, 243, 199, 0.92);
  border-color: rgba(202, 138, 4, 0.24);
}

/* Outbounds pool modal */
#outbounds-pool-modal {
  padding: 8px;
}

#outbounds-pool-modal .modal-content {
  width: min(98vw, 1240px);
  max-width: 1240px;
  max-height: min(94vh, 980px);
  padding: 10px 12px 12px;
  border-radius: 22px;
  border-color: rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.08), transparent 25%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.985), rgba(2, 6, 23, 0.965));
  box-shadow:
    0 28px 86px rgba(2, 6, 23, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#outbounds-pool-modal .modal-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#outbounds-pool-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

#outbounds-pool-modal .xkeen-textarea {
  width: 100%;
  box-sizing: border-box;
}

#outbounds-pool-modal .modal-actions {
  margin-top: 10px;
}

#outbounds-subscriptions-modal {
  align-items: flex-start;
  padding: 32px 10px 10px;
}

#outbounds-subscriptions-modal .modal-content {
  width: min(96vw, 1080px);
  max-width: min(1080px, calc(100vw - 20px));
  height: auto;
  min-width: min(680px, calc(100vw - 20px));
  min-height: 640px;
  max-height: min(92vh, 820px);
  padding: 14px 16px 14px;
  border-color: rgba(125, 211, 252, 0.20);
  background:
    linear-gradient(180deg, rgba(10, 17, 31, 0.98), rgba(4, 9, 20, 0.985));
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.xk-sub-modal {
  width: min(96vw, 1080px);
  max-width: min(1080px, calc(100vw - 20px));
  min-width: min(680px, calc(100vw - 20px));
  flex: 0 0 auto;
}

#outbounds-subscriptions-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.xk-sub-header {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.xk-sub-titleblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xk-sub-subtitle {
  color: #93a4b8;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.25;
}

.xk-sub-interval-note {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 8px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.10);
  color: #fde68a;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.xk-sub-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  flex: 0 0 auto;
  gap: 10px 14px;
  align-items: stretch;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.42));
}

.xk-sub-brief-main {
  min-width: 0;
}

.xk-sub-brief-title {
  color: #f8fafc;
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1.2;
}

.xk-sub-brief-text {
  margin-top: 3px;
  color: #aebbd0;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
}

.xk-sub-brief code {
  color: #bfe7ff;
}

.xk-sub-update-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(45, 212, 191, 0.16);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.34);
}

.xk-sub-update-title {
  color: #c2f5ee;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.xk-sub-update-text {
  color: #b6c6da;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.35;
}

.xk-sub-update-text b {
  color: #e5eefb;
}

.xk-sub-update-text code {
  color: #bfe7ff;
}

.xk-sub-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.94fr) minmax(420px, 1.06fr);
  flex: 0 0 auto;
  gap: 14px;
  min-height: 0;
  align-items: stretch;
}

.xk-sub-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  background: rgba(9, 15, 28, 0.72);
  box-sizing: border-box;
}

.xk-sub-list-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(10, 18, 35, 0.86), rgba(4, 11, 24, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 42px rgba(2, 6, 23, 0.16);
}

.xk-sub-panelhead,
.xk-sub-toolbar,
.xk-sub-actions,
.xk-sub-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xk-sub-panelhead {
  justify-content: space-between;
  align-items: flex-start;
}

.xk-sub-form-head {
  align-items: center;
  gap: 12px;
}

.xk-sub-head-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

.xk-sub-head-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  min-height: 0;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.xk-sub-head-chip-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1;
  transform: translateY(-0.25px);
}

.xk-sub-head-chip.is-primary {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.xk-sub-head-chip.is-dirty {
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.45),
    0 0 0 4px rgba(245, 158, 11, 0.14);
}

.xk-sub-nodes-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.xk-sub-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.xk-sub-form > label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.xk-sub-form .xray-log-filter {
  width: 100%;
  height: 34px;
  border-radius: 8px;
}

.xk-sub-span-3 {
  grid-column: span 3;
}

.xk-sub-span-4 {
  grid-column: span 4;
}

.xk-sub-span-5 {
  grid-column: span 5;
}

.xk-sub-filter-field .xk-pool-fieldlabel {
  white-space: nowrap;
}

.xk-sub-wide,
.xk-sub-options,
.xk-sub-actions,
.xk-sub-controls,
.xk-sub-balancers {
  grid-column: 1 / -1;
}

.xk-sub-form .xk-sub-wide > input {
  max-width: 520px;
}

.xk-sub-form .xk-sub-url-row {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(120px, 1fr);
  gap: 8px;
  align-items: start;
}

.xk-sub-form .xk-sub-url-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: 100%;
}

.xk-sub-form .xk-sub-url-field > input {
  width: 100%;
}

.xk-sub-form .xk-sub-url-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.xk-sub-form .xk-sub-url-action-label {
  visibility: hidden;
  user-select: none;
}

.xk-sub-form .xk-sub-url-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  flex-wrap: nowrap;
  width: 100%;
}

.xk-sub-form .xk-sub-url-actions > .xk-sub-head-chip {
  flex: 1 1 0;
  width: auto;
  min-width: 28px;
}

.xk-sub-form .xk-sub-url-preview {
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.xk-sub-head-chip.is-armed {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.26) 0%, rgba(5, 150, 105, 0.20) 100%);
  color: #d1fae5;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.5),
    0 0 0 4px rgba(16, 185, 129, 0.16);
  animation: xkSubChipArmedPulse 2.4s ease-in-out infinite;
}

@keyframes xkSubChipArmedPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(16, 185, 129, 0.5),
      0 0 0 4px rgba(16, 185, 129, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(16, 185, 129, 0.6),
      0 0 0 6px rgba(16, 185, 129, 0.26);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xk-sub-head-chip.is-armed {
    animation: none;
  }
}

.xk-sub-show-hidden-btn {
  height: 28px;
  padding: 0 10px;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
}

.xk-sub-show-hidden-btn[hidden] {
  display: none;
}

.xk-sub-show-hidden-btn.is-active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.18) 100%);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fde68a;
}

html[data-theme="light"] .xk-sub-show-hidden-btn.is-active {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.18) 0%, rgba(194, 65, 12, 0.12) 100%);
  border-color: rgba(234, 88, 12, 0.55);
  color: #9a3412;
}

.xk-sub-draft-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fef3c7;
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  border: 1px solid #f59e0b;
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.35);
  animation: xkSubDraftPulse 1.6s ease-in-out infinite;
}

.xk-sub-draft-badge[hidden] {
  display: none;
}

@keyframes xkSubDraftPulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(180, 83, 9, 0.35); }
  50% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 1px 4px rgba(180, 83, 9, 0.55); }
}

html[data-theme="light"] .xk-sub-draft-badge {
  color: #fff;
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
  border-color: #fb923c;
}

.xk-sub-options {
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 5px;
}

.xk-sub-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  margin-top: 2px;
  min-width: 0;
  padding-bottom: 18px;
}

.xk-sub-controls > .xk-sub-check {
  min-width: 0;
  width: auto;
  flex: 0 1 auto;
  justify-content: center;
}

.xk-sub-auto-rule-check {
  min-width: 0;
}

.xk-sub-routing-mode {
  position: relative;
  display: flex;
  flex: 0 0 132px;
  min-width: 0;
  width: 132px;
  padding: 0;
  margin-left: auto;
}

.xk-sub-inline-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 4px;
  color: #94a3b8;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
  line-height: 1.15;
  opacity: 0.84;
}

.xk-sub-routing-mode .xray-log-filter {
  display: block;
  width: 100%;
  min-width: 128px;
  height: 34px;
}

.xk-sub-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.28);
  color: #cbd5e1;
  font-size: calc(11px * var(--xk-font-scale));
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

.xk-sub-check span:last-child {
  min-width: 0;
  white-space: nowrap;
}

.xk-sub-check:hover {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(15, 23, 42, 0.58);
}

.xk-sub-balancers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -4px;
}

.xk-sub-balancers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.xk-sub-balancers-note {
  min-height: 0;
  margin-top: 0;
  text-align: right;
}

.xk-sub-balancers-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.xk-sub-balancer-check {
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  white-space: normal;
}

.xk-sub-balancer-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xk-sub-balancer-tag {
  color: #e2e8f0;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

.xk-sub-balancer-meta {
  color: #94a3b8;
  font-size: calc(10.5px * var(--xk-font-scale));
  line-height: 1.25;
}

.xk-sub-balancers-empty {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.18);
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
}

.xk-sub-field-note {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  font-size: calc(10.5px * var(--xk-font-scale));
  line-height: 1.25;
  color: rgba(148, 163, 184, 0.88);
}

.xk-sub-field-note[hidden] {
  display: none;
}

.xk-sub-field-note.is-auto,
.xk-sub-field-note.is-info {
  color: rgba(125, 211, 252, 0.92);
}

.xk-sub-field-note.is-error {
  color: #fca5a5;
}

.xk-sub-interval-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 0;
  margin-top: 3px;
}

.xk-sub-interval-note-inline {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  margin-top: 0;
  flex: 0 1 auto;
  font-size: calc(9.5px * var(--xk-font-scale));
  line-height: 1.15;
}

.xk-sub-interval-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.xk-sub-interval-field .xk-sub-interval-inline .xray-log-filter {
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
}

.xk-sub-interval-apply {
  align-self: center;
  margin-top: 0;
  min-height: 28px;
  height: 28px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 999px;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

.xk-sub-interval-apply[hidden] {
  display: none;
}

.xk-sub-interval-apply.is-provider {
  border-color: rgba(251, 191, 36, 0.44);
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.20), rgba(245, 158, 11, 0.12)),
    rgba(120, 53, 15, 0.26);
  color: #fde68a;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.08),
    0 3px 10px rgba(245, 158, 11, 0.14);
}

.xk-sub-interval-apply.is-provider:hover {
  border-color: rgba(252, 211, 77, 0.58);
  background:
    linear-gradient(180deg, rgba(252, 211, 77, 0.24), rgba(245, 158, 11, 0.15)),
    rgba(146, 64, 14, 0.30);
  color: #fef3c7;
}

.xk-sub-actions {
  justify-content: flex-end;
}

.xk-sub-icon-btn.btn-compact {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14px * var(--xk-font-scale));
  line-height: 1;
}

.xk-sub-icon-btn.btn-compact.is-dirty {
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.45),
    0 0 0 4px rgba(245, 158, 11, 0.14);
}

.xk-sub-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-0.5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.xk-sub-pingall-spinner {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border-radius: 999px;
  border: 2px solid rgba(191, 219, 254, 0.20);
  border-top-color: #dbeafe;
  border-right-color: rgba(125, 211, 252, 0.82);
  opacity: 0;
  pointer-events: none;
}

.xk-sub-icon-btn.btn-compact.is-busy {
  border-color: rgba(125, 211, 252, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(30, 64, 175, 0.22);
  color: #e0f2fe;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(14, 165, 233, 0.06);
}

.xk-sub-icon-btn.btn-compact.is-busy .xk-sub-pingall-glyph {
  opacity: 0;
  transform: scale(0.72);
}

.xk-sub-icon-btn.btn-compact.is-busy .xk-sub-pingall-spinner {
  opacity: 1;
  animation: xk-sub-pingall-spin 0.72s linear infinite;
}

@keyframes xk-sub-pingall-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

.xk-sub-tablewrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 172px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.56), rgba(6, 12, 24, 0.62)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(148, 163, 184, 0.03);
}

.xk-sub-table {
  width: 100%;
  table-layout: fixed;
}

.xk-sub-col-tag {
  width: 34%;
}

.xk-sub-col-status {
  width: 22%;
}

.xk-sub-col-actions {
  width: 116px;
}

.xk-sub-table th:nth-child(1),
.xk-sub-table td:nth-child(1) {
  width: 34%;
}

.xk-sub-table th:nth-child(2),
.xk-sub-table td:nth-child(2) {
  width: 22%;
}

.xk-sub-table th:nth-child(3),
.xk-sub-table td:nth-child(3) {
  width: auto;
}

.xk-sub-table th:nth-child(4),
.xk-sub-table td:nth-child(4) {
  width: 116px;
}

.xk-sub-table thead th {
  background: linear-gradient(180deg, rgba(23, 36, 66, 0.82), rgba(15, 23, 42, 0.72));
  border-bottom-color: rgba(148, 163, 184, 0.10);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.xk-sub-table td {
  vertical-align: top;
  padding: 10px 12px;
}

.xk-sub-main {
  font-weight: 700;
  color: var(--fg, #f8fafc);
  word-break: break-word;
  line-height: 1.2;
}

.xk-sub-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.xk-sub-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.38);
  color: #cbd5e1;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.xk-sub-badge.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.28);
  color: #fecaca;
}

.xk-sub-badge.is-due {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(120, 53, 15, 0.26);
  color: #fde68a;
}

.xk-sub-badge.is-updated {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(14, 116, 144, 0.22);
  color: #bae6fd;
}

.xk-sub-badge.is-filtered {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(30, 41, 59, 0.48);
  color: #cbd5e1;
}

.xk-sub-muted {
  margin-top: 3px;
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
  word-break: break-word;
}

.xk-sub-ok {
  color: #86efac;
  font-weight: 700;
}

.xk-sub-bad {
  color: #fca5a5;
  font-weight: 700;
  word-break: break-word;
}

.xk-sub-row-actions {
  text-align: right;
  vertical-align: top;
}

.xk-sub-table td.xk-sub-row-actions {
  padding-left: 4px;
  padding-right: 8px;
}

.xk-sub-row-actions-inner {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.xk-sub-row-actions .btn-compact {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  border-radius: 10px;
}

.xk-sub-list-panel .xk-sub-toolbar .btn-compact,
.xk-sub-list-action {
  border-color: rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(2, 6, 23, 0.18);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.xk-sub-list-panel .xk-sub-toolbar .btn-compact:hover,
.xk-sub-list-action:hover {
  border-color: rgba(96, 165, 250, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 22px rgba(30, 64, 175, 0.16);
}

.xk-sub-list-action-delete {
  border-color: rgba(248, 113, 113, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(69, 10, 10, 0.34);
  color: #fecaca;
}

.xk-sub-list-action-delete:hover {
  border-color: rgba(248, 113, 113, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 22px rgba(127, 29, 29, 0.18);
}

.xk-sub-table tbody tr[data-sub-id] {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.xk-sub-table tbody tr[data-sub-id]:hover {
  background: rgba(59, 130, 246, 0.05);
}

.xk-sub-table tbody tr.is-selected {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(14, 116, 144, 0.06)),
    rgba(59, 130, 246, 0.08);
}

.xk-sub-table tbody tr.is-selected td {
  box-shadow: inset 0 1px 0 rgba(96, 165, 250, 0.14), inset 0 -1px 0 rgba(96, 165, 250, 0.10);
}

.xk-sub-file-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(8, 15, 30, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(2, 6, 23, 0.14);
  color: inherit;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.xk-sub-file-link:hover,
.xk-sub-file-link:focus-visible {
  border-color: rgba(96, 165, 250, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 22px rgba(30, 64, 175, 0.14);
}

.xk-sub-file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  background: rgba(13, 148, 136, 0.12);
  color: #ccfbf1;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: 0.08em;
}

.xk-sub-file-link:hover code,
.xk-sub-file-link:focus-visible code {
  color: #e0f2fe;
}

.xk-sub-file-link code,
.xk-sub-table td:nth-child(3) code {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xk-sub-diagnostics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(8, 15, 28, 0.72), rgba(3, 10, 22, 0.78)),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(148, 163, 184, 0.03);
}

.xk-sub-diag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.xk-sub-diag-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.xk-sub-diag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.34);
  color: #cbd5e1;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.xk-sub-diag-pill.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.28);
  color: #fecaca;
}

.xk-sub-diag-pill.is-warning {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(120, 53, 15, 0.24);
  color: #fde68a;
}

.xk-sub-diag-pill.is-error-list {
  border-color: rgba(251, 146, 60, 0.30);
  background: rgba(124, 45, 18, 0.24);
  color: #fdba74;
}

.xk-sub-diag-pill.is-filtered {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(30, 41, 59, 0.48);
  color: #cbd5e1;
}

.xk-sub-diag-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: 228px;
  overflow: auto;
  padding-right: 2px;
}

.xk-sub-diag-group {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.24);
  min-width: 0;
}

.xk-sub-diag-group.is-plan {
  border-color: rgba(56, 189, 248, 0.26);
  background: rgba(8, 47, 73, 0.22);
}

.xk-sub-diag-group.is-error {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(69, 10, 10, 0.22);
}

.xk-sub-diag-group.is-warning {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(120, 53, 15, 0.16);
}

.xk-sub-diag-group.is-error-list {
  border-color: rgba(251, 146, 60, 0.22);
  background: rgba(124, 45, 18, 0.15);
}

.xk-sub-diag-label {
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xk-sub-diag-list {
  margin: 0;
  padding-left: 16px;
  color: #dbeafe;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
  min-width: 0;
}

.xk-sub-diag-list li + li {
  margin-top: 4px;
}

.xk-sub-diag-list li {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xk-sub-diag-url {
  display: inline-flex;
  width: min(100%, 34ch);
  max-width: 100%;
  min-width: 0;
  vertical-align: bottom;
}

.xk-sub-diag-url code {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(8, 47, 73, 0.36);
  color: #bae6fd;
  font-size: 0.96em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xk-sub-diag-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #fecaca;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
}

.xk-sub-diag-empty {
  padding: 10px 12px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
}

.xk-sub-status {
  min-height: 18px;
  color: #a8b3c5;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#outbounds-subscriptions-modal .modal-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.xk-sub-status.is-error {
  color: #fca5a5;
}

.xk-sub-status.is-warning {
  color: #fde68a;
}

.xk-sub-status.is-success {
  color: #86efac;
}

.xk-sub-node-panel {
  flex: 1 1 auto;
  margin-top: 0;
  min-height: 0;
  overflow: hidden;
}

.xk-sub-node-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  align-items: start;
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
  overflow: auto;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.22);
}

#outbounds-subscriptions-modal .xk-sub-node-panel {
  flex: 0 0 auto;
  overflow: visible;
}

#outbounds-subscriptions-nodes-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr));
  gap: 10px;
  padding: 8px;
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.xk-outbounds-node-panel {
  flex: 1 1 auto;
  margin: 10px 0 12px;
  overflow: hidden;
}

.xk-outbounds-node-panel .xk-sub-panelhead > :first-child {
  min-width: 0;
}

.xk-outbounds-node-panel .xk-sub-nodes-head-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.xk-outbounds-node-panel .xk-outbounds-active-status {
  display: inline-flex;
}

.xk-outbounds-node-list {
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
  max-height: min(36vh, 320px);
  overflow: auto;
  padding: 8px;
}

.xk-outbounds-node-item {
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 10px;
}

.xk-outbounds-active-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.32);
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xk-outbounds-active-status.is-active {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(120, 53, 15, 0.18);
  color: #fde68a;
}

.xk-outbounds-node-item.is-active-route {
  border-color: rgba(245, 158, 11, 0.58);
  background:
    linear-gradient(180deg, rgba(113, 63, 18, 0.44), rgba(15, 23, 42, 0.54));
  box-shadow:
    inset 3px 0 0 rgba(245, 158, 11, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(245, 158, 11, 0.14);
}

.xk-sub-node-pill-active-route {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(120, 53, 15, 0.22);
  color: #fde68a;
}

.xk-sub-node-state.is-active-route {
  color: #fde68a;
  font-weight: 800;
}

.xk-sub-node-latency.is-active-route {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(120, 53, 15, 0.22);
  color: #fde68a;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-panel {
  margin-top: 0;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-list {
  gap: 6px;
  max-height: min(38vh, 360px);
  padding: 6px;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item {
  min-height: 0;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-main {
  gap: 4px;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-name {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: calc(12.5px * var(--xk-font-scale));
  line-height: 1.15;
  letter-spacing: 0;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-meta {
  gap: 4px;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-pill {
  min-height: 18px;
  padding: 0 6px;
  font-size: calc(10px * var(--xk-font-scale));
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-endpoint,
#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-detail {
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-side {
  min-width: 54px;
  gap: 4px;
  padding-top: 0;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-latency {
  min-width: 50px;
  min-height: 18px;
  padding: 0 6px;
  font-size: calc(10px * var(--xk-font-scale));
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-state {
  font-size: calc(10px * var(--xk-font-scale));
  line-height: 1.1;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-actions {
  gap: 4px;
}

#outbounds-body.xk-outbounds-subscription-fragment .xk-outbounds-node-item .xk-sub-node-ping.btn-compact {
  width: 24px;
  height: 24px;
}

.xk-sub-node-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 13px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.44));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(2, 6, 23, 0.18);
}

#outbounds-subscriptions-nodes-list .xk-sub-node-item {
  gap: 10px;
  align-self: stretch;
  height: 100%;
  padding: 10px 11px 9px;
  border-radius: 12px;
}

.xk-sub-node-item + .xk-sub-node-item {
  margin-top: 0;
}

.xk-sub-node-item.is-disabled {
  opacity: 0.88;
}

.xk-sub-node-main {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-main {
  gap: 4px;
}

.xk-sub-node-name {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  font-size: calc(14px * var(--xk-font-scale));
  color: var(--fg, #f8fafc);
  line-height: 1.24;
  letter-spacing: 0;
  word-break: break-word;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-name {
  gap: 6px;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1.18;
}

.xk-sub-node-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xk-sub-node-country {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  margin-top: 1px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.78);
  background: linear-gradient(to bottom, #64748b 0 33.333%, #e2e8f0 33.333% 66.666%, #64748b 66.666%);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.26),
    0 2px 5px rgba(2, 6, 23, 0.2);
}

.xk-sub-node-country::before,
.xk-sub-node-country::after {
  content: "";
  position: absolute;
  display: none;
}

.xk-sub-node-country-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.xk-sub-node-country[data-country="DE"] {
  background: linear-gradient(to bottom, #000 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666%);
}

.xk-sub-node-country[data-country="LV"] {
  background: linear-gradient(to bottom, #9e3039 0 42%, #fff 42% 58%, #9e3039 58%);
}

.xk-sub-node-country[data-country="SE"] {
  background: #006aa7;
}

.xk-sub-node-country[data-country="SE"]::before,
.xk-sub-node-country[data-country="SE"]::after {
  display: block;
  background: #fecc00;
}

.xk-sub-node-country[data-country="SE"]::before {
  left: 6px;
  top: 0;
  width: 3px;
  height: 100%;
}

.xk-sub-node-country[data-country="SE"]::after {
  left: 0;
  top: 6px;
  width: 100%;
  height: 3px;
}

.xk-sub-node-country[data-country="NL"] {
  background: linear-gradient(to bottom, #ae1c28 0 33.333%, #fff 33.333% 66.666%, #21468b 66.666%);
}

.xk-sub-node-country[data-country="RU"] {
  background: linear-gradient(to bottom, #fff 0 33.333%, #0039a6 33.333% 66.666%, #d52b1e 66.666%);
}

.xk-sub-node-country[data-country="US"] {
  background: repeating-linear-gradient(to bottom, #b22234 0 7.7%, #fff 7.7% 15.4%);
}

.xk-sub-node-country[data-country="US"]::before {
  display: block;
  left: 0;
  top: 0;
  width: 46%;
  height: 54%;
  background: #3c3b6e;
}

.xk-sub-node-country[data-country="ES"] {
  background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.xk-sub-node-country[data-country="IN"] {
  background: linear-gradient(to bottom, #ff9933 0 33.333%, #fff 33.333% 66.666%, #138808 66.666%);
}

.xk-sub-node-country[data-country="IN"]::before {
  display: block;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border: 1px solid #000080;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.xk-sub-node-country[data-country="TR"] {
  background: #e30a17;
}

.xk-sub-node-country[data-country="TR"]::before {
  display: block;
  left: 5px;
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.xk-sub-node-country[data-country="TR"]::after {
  display: block;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e30a17;
}

.xk-sub-node-country[data-country="KZ"] {
  background: #00afca;
}

.xk-sub-node-country[data-country="KZ"]::before {
  display: block;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f4c430;
  transform: translate(-50%, -50%);
}

.xk-sub-node-country[data-country="JP"] {
  background: #fff;
}

.xk-sub-node-country[data-country="JP"]::before {
  display: block;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bc002d;
  transform: translate(-50%, -50%);
}

.xk-sub-node-country[data-country="IL"] {
  background: linear-gradient(to bottom, #fff 0 18%, #0038b8 18% 30%, #fff 30% 70%, #0038b8 70% 82%, #fff 82%);
}

.xk-sub-node-country[data-country="FR"] {
  background: linear-gradient(to right, #0055a4 0 33.333%, #fff 33.333% 66.666%, #ef4135 66.666%);
}

.xk-sub-node-country[data-country="IT"] {
  background: linear-gradient(to right, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666%);
}

.xk-sub-node-country[data-country="GB"] {
  background:
    linear-gradient(to right, transparent 0 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(to bottom, transparent 0 38%, #fff 38% 62%, transparent 62%),
    linear-gradient(32deg, transparent 0 45%, #fff 45% 55%, transparent 55%),
    linear-gradient(148deg, transparent 0 45%, #fff 45% 55%, transparent 55%),
    #012169;
}

.xk-sub-node-country[data-country="GB"]::before,
.xk-sub-node-country[data-country="GB"]::after {
  display: block;
  background: #c8102e;
}

.xk-sub-node-country[data-country="GB"]::before {
  left: 45%;
  top: 0;
  width: 10%;
  height: 100%;
}

.xk-sub-node-country[data-country="GB"]::after {
  left: 0;
  top: 43%;
  width: 100%;
  height: 14%;
}

.xk-sub-node-country[data-country="FI"] {
  background: #fff;
}

.xk-sub-node-country[data-country="FI"]::before,
.xk-sub-node-country[data-country="FI"]::after {
  display: block;
  background: #002f6c;
}

.xk-sub-node-country[data-country="FI"]::before {
  left: 6px;
  top: 0;
  width: 4px;
  height: 100%;
}

.xk-sub-node-country[data-country="FI"]::after {
  left: 0;
  top: 5px;
  width: 100%;
  height: 4px;
}

.xk-sub-node-country[data-country="NO"] {
  background:
    linear-gradient(to right, transparent 0 25%, #fff 25% 45%, transparent 45%),
    linear-gradient(to bottom, transparent 0 35%, #fff 35% 65%, transparent 65%),
    #ba0c2f;
}

.xk-sub-node-country[data-country="NO"]::before,
.xk-sub-node-country[data-country="NO"]::after {
  display: block;
  background: #00205b;
}

.xk-sub-node-country[data-country="NO"]::before {
  left: 7px;
  top: 0;
  width: 2px;
  height: 100%;
}

.xk-sub-node-country[data-country="NO"]::after {
  left: 0;
  top: 6px;
  width: 100%;
  height: 2px;
}

.xk-sub-node-country[data-country="SG"] {
  background: linear-gradient(to bottom, #ef3340 0 50%, #fff 50%);
}

.xk-sub-node-country[data-country="HK"] {
  background: #de2910;
}

.xk-sub-node-country[data-country="KR"] {
  background: #fff;
}

.xk-sub-node-country[data-country="KR"]::before {
  display: block;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #cd2e3a 0 50%, #0047a0 50%);
  transform: translate(-50%, -50%);
}

.xk-sub-node-country[data-country="AE"] {
  background:
    linear-gradient(to right, #ff0000 0 26%, transparent 26%),
    linear-gradient(to bottom, #009639 0 33.333%, #fff 33.333% 66.666%, #000 66.666%);
}

.xk-sub-node-country[data-country="CA"] {
  background: linear-gradient(to right, #d52b1e 0 25%, #fff 25% 75%, #d52b1e 75%);
}

.xk-sub-node-country[data-country="CH"] {
  background: #d52b1e;
}

.xk-sub-node-country[data-country="CH"]::before,
.xk-sub-node-country[data-country="CH"]::after {
  display: block;
  background: #fff;
}

.xk-sub-node-country[data-country="CH"]::before {
  left: 8px;
  top: 2px;
  width: 4px;
  height: 10px;
}

.xk-sub-node-country[data-country="CH"]::after {
  left: 5px;
  top: 5px;
  width: 10px;
  height: 4px;
}

.xk-sub-node-country[data-country="AU"] {
  background: #012169;
}

.xk-sub-node-country[data-country="PL"] {
  background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50%);
}

.xk-sub-node-country[data-country="CZ"] {
  background:
    linear-gradient(35deg, #11457e 0 49%, transparent 50%),
    linear-gradient(145deg, #11457e 0 49%, transparent 50%),
    linear-gradient(to bottom, #fff 0 50%, #d7141a 50%);
}

.xk-sub-node-country[data-country="UA"] {
  background: linear-gradient(to bottom, #0057b7 0 50%, #ffd700 50%);
}

.xk-sub-node-country[data-country="BR"] {
  background: #009b3a;
}

.xk-sub-node-country[data-country="BR"]::before {
  display: block;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 7px;
  background: #ffdf00;
  transform: translate(-50%, -50%) rotate(45deg);
}

.xk-sub-node-country[data-country="CN"] {
  background: #de2910;
}

.xk-sub-node-country[data-country="TW"] {
  background: #fe0000;
}

.xk-sub-node-country[data-country="VN"] {
  background: #da251d;
}

.xk-sub-node-country[data-country="TH"] {
  background: linear-gradient(to bottom, #a51931 0 17%, #fff 17% 31%, #2d2a4a 31% 69%, #fff 69% 83%, #a51931 83%);
}

.xk-sub-node-country[data-country="MY"] {
  background: repeating-linear-gradient(to bottom, #cc0001 0 14.28%, #fff 14.28% 28.56%);
}

.xk-sub-node-country[data-country="ID"] {
  background: linear-gradient(to bottom, #ce1126 0 50%, #fff 50%);
}

.xk-sub-node-country.is-globe {
  border-radius: 50%;
  border-color: rgba(148, 163, 184, 0.72);
  background:
    linear-gradient(to right, transparent 0 44%, rgba(226, 232, 240, 0.72) 44% 56%, transparent 56%),
    linear-gradient(to bottom, transparent 0 44%, rgba(226, 232, 240, 0.72) 44% 56%, transparent 56%),
    radial-gradient(circle, rgba(148, 163, 184, 0.22) 0 48%, transparent 50%),
    rgba(51, 65, 85, 0.65);
}

.xk-sub-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
  align-items: center;
  min-width: 0;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-meta {
  gap: 4px;
}

.xk-sub-node-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(37, 99, 235, 0.10);
  color: #bfdbfe;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-pill {
  min-height: 18px;
  padding: 0 6px;
  font-size: calc(10px * var(--xk-font-scale));
}

.xk-sub-node-pill-transport {
  border-color: rgba(45, 212, 191, 0.18);
  background: rgba(20, 184, 166, 0.10);
  color: #ccfbf1;
}

.xk-sub-node-pill-security {
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(245, 158, 11, 0.10);
  color: #fde68a;
}

.xk-sub-node-pill-warning {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.xk-sub-node-endpoint {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 22px;
  color: #93a4b8;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.xk-sub-node-detail {
  margin-top: 0;
  color: #7dd3fc;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.34;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-detail {
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xk-sub-node-warning {
  margin-top: 2px;
  color: #fcd34d;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xk-sub-node-side {
  display: flex;
  flex-direction: column;
  min-width: 78px;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 7px;
  padding-top: 2px;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-side {
  min-width: 62px;
  gap: 5px;
  padding-top: 0;
}

.xk-sub-node-latency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.44);
  color: #cbd5e1;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-latency {
  min-width: 50px;
  min-height: 18px;
  padding: 0 6px;
  font-size: calc(10px * var(--xk-font-scale));
}

.xk-sub-node-latency.is-fast {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(21, 128, 61, 0.18);
  color: #86efac;
}

.xk-sub-node-latency.is-mid {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(13, 148, 136, 0.16);
  color: #99f6e4;
}

.xk-sub-node-latency.is-slow {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(180, 83, 9, 0.18);
  color: #fde68a;
}

.xk-sub-node-latency.is-check-failed {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(120, 53, 15, 0.20);
  color: #fde68a;
}

.xk-sub-node-latency.is-pending {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(30, 64, 175, 0.18);
  color: #dbeafe;
}

.xk-sub-node-latency.is-unavailable,
.xk-sub-node-latency.is-idle {
  color: #94a3b8;
}

.xk-sub-node-state {
  font-size: calc(11px * var(--xk-font-scale));
  color: #94a3b8;
  white-space: nowrap;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-state {
  font-size: calc(10px * var(--xk-font-scale));
  line-height: 1.1;
}

.xk-sub-node-state.is-enabled {
  color: #86efac;
}

.xk-sub-node-state.is-disabled {
  color: #fbbf24;
}

.xk-sub-node-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-actions {
  gap: 4px;
}

.xk-sub-node-ping.btn-compact,
.xk-sub-node-toggle.btn-compact {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 999px;
  font-size: calc(15px * var(--xk-font-scale));
  line-height: 1;
}

#outbounds-subscriptions-nodes-list .xk-sub-node-ping.btn-compact,
#outbounds-subscriptions-nodes-list .xk-sub-node-toggle.btn-compact {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  font-size: calc(13px * var(--xk-font-scale));
}

#outbounds-subscriptions-nodes-list .xk-sub-node-toggle-restore.btn-compact {
  font-size: calc(11px * var(--xk-font-scale));
}

.xk-sub-node-ping.btn-compact {
  border-color: rgba(96, 165, 250, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(30, 64, 175, 0.18);
  color: #dbeafe;
}

.xk-sub-node-ping.btn-compact:hover:not([disabled]) {
  border-color: rgba(125, 211, 252, 0.38);
}

.xk-sub-node-ping.btn-compact.is-busy {
  pointer-events: none;
  animation: xk-sub-node-ping-pulse 0.9s ease-in-out infinite;
}

.xk-sub-node-ping.btn-compact[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.xk-sub-node-toggle-restore.btn-compact {
  font-size: calc(13px * var(--xk-font-scale));
}

@keyframes xk-sub-node-ping-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.xk-pool-lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.13), rgba(15, 23, 42, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(2, 6, 23, 0.22);
}

.xk-pool-lead-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--xk-font-scale));
  border: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(37, 99, 235, 0.18);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.xk-pool-lead-title {
  margin: 0 0 4px;
  font-size: calc(15px * var(--xk-font-scale));
  font-weight: 700;
  color: var(--fg, #f8fafc);
}

.xk-pool-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(480px, 1.05fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}

.xk-pool-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(2, 6, 23, 0.18);
  box-sizing: border-box;
}

.xk-pool-panelhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xk-pool-kicker {
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xk-pool-fieldlabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xk-pool-editor-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#outbounds-pool-input {
  min-height: 230px;
  resize: vertical;
  line-height: 1.35;
}

.xk-pool-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xk-pool-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.xk-pool-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: rgba(15, 23, 42, 0.40);
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.42;
}

.xk-pool-existing {
  margin: 0;
  color: #94a3b8;
}

.xk-pool-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.15), rgba(30, 41, 59, 0.34));
  color: #dbeafe;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.xk-pool-listbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
}

.xk-pool-listhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xk-pool-listtitle {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xk-pool-list-subtitle {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.35;
}

.xk-pool-status {
  max-width: 280px;
  text-align: right;
}

.xk-pool-tablewrap {
  position: relative;
  min-height: 322px;
  max-height: 448px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 15px;
  background: rgba(2, 6, 23, 0.34);
}

.xk-pool-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.xk-pool-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  text-align: left;
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.xk-pool-table tbody tr {
  background: transparent;
}

.xk-pool-table tbody tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.xk-pool-table td {
  padding: 9px 12px;
  vertical-align: top;
}

.xk-pool-table td:last-child {
  width: 52px;
}

.xk-pool-table-actions-col {
  width: 52px;
}

.xk-pool-table input.xray-log-filter {
  min-height: 38px;
  border-radius: 12px;
}

.xk-pool-tag-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.xk-pool-tag-cell input.xray-log-filter {
  min-width: 0;
}

.xk-pool-tag-country-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.xk-pool-tag-country-slot:empty {
  display: none;
}

.xk-pool-delete-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--xk-font-scale));
}

.xk-pool-empty {
  display: none;
  padding: 20px;
  margin: 10px;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.20);
  color: #94a3b8;
  text-align: center;
}

.xk-pool-footer {
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.xk-pool-replace-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 62px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.xk-pool-replace-card input[type="checkbox"] {
  margin-top: 3px;
}

.xk-pool-replace-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}

.xk-pool-replace-copy strong {
  color: var(--fg, #e5e7eb);
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 600;
}

.xk-pool-replace-copy small {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
}

.xk-pool-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.xk-pool-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1080px) {
  #outbounds-pool-modal .modal-content {
    width: min(99vw, 1060px);
  }

  .xk-pool-grid {
    grid-template-columns: 1fr;
  }

  #outbounds-subscriptions-modal .modal-content {
    width: min(96vw, 980px);
    height: auto;
    min-width: 0;
    min-height: 0;
  }

  .xk-sub-grid {
    grid-template-columns: 1fr;
  }

  .xk-sub-brief {
    grid-template-columns: 1fr;
  }

  .xk-sub-update-note {
    width: 100%;
  }
}

.xk-sub-modal.xk-sub-modal-compact {
  min-width: 0;
  flex: 1 1 auto;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-grid {
  grid-template-columns: 1fr;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-span-3,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-span-4,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-span-5 {
  grid-column: span 1;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-wide,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-controls {
  grid-column: 1 / -1;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-controls > .xk-sub-check,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-controls > .xk-sub-routing-mode {
  min-width: 0;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-routing-mode {
  flex: 0 0 128px;
  width: 128px;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-balancers {
  grid-column: 1 / -1;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-node-list {
  grid-template-columns: 1fr;
  max-width: none;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-node-item {
  grid-template-columns: 1fr;
}

.xk-sub-modal.xk-sub-modal-compact .xk-sub-node-side {
  align-items: flex-start;
  justify-content: flex-start;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-form {
  grid-template-columns: 1fr;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-controls {
  grid-template-columns: 1fr;
  align-items: flex-start;
  padding-bottom: 0;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-controls > .xk-sub-check,
.xk-sub-modal.xk-sub-modal-narrow .xk-sub-controls > .xk-sub-routing-mode {
  grid-column: 1;
  min-width: 0;
  width: 100%;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-controls > .xk-sub-routing-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  max-width: none;
  justify-self: stretch;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-head-actions {
  width: 100%;
  margin-left: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-head-chip {
  width: 28px;
  min-width: 28px;
  flex: 0 0 auto;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-balancers {
  grid-column: 1 / -1;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-inline-label {
  position: static;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-routing-mode .xray-log-filter {
  width: 100%;
  max-width: none;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-form .xk-sub-url-row,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-form .xk-sub-url-row {
  grid-template-columns: 1fr;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-form .xk-sub-url-field,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-form .xk-sub-url-field {
  max-width: none;
  width: 100%;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-form .xk-sub-url-action,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-form .xk-sub-url-action {
  width: 100%;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-form .xk-sub-url-actions,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-form .xk-sub-url-actions {
  justify-content: flex-end;
}

.xk-sub-modal.xk-sub-modal-narrow .xk-sub-interval-inline,
.xk-sub-modal.xk-sub-modal-compact .xk-sub-interval-inline {
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  #outbounds-pool-modal {
    padding: 6px;
  }

  #outbounds-pool-modal .modal-content {
    width: min(100vw, 760px);
    border-radius: 18px;
  }

  .xk-pool-lead,
  .xk-pool-panelhead,
  .xk-pool-listhead,
  .xk-pool-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .xk-pool-status,
  .xk-pool-footer-actions {
    max-width: none;
    text-align: left;
    justify-content: flex-start;
  }

  .xk-pool-summary {
    align-self: flex-start;
  }

  .xk-pool-tablewrap {
    min-height: 260px;
  }

  #outbounds-subscriptions-modal {
    padding: 6px;
  }

  #outbounds-subscriptions-modal .modal-content {
    width: min(100vw, 760px);
    height: auto;
    max-height: calc(100vh - 12px);
    min-height: 0;
    padding: 10px;
  }

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

  .xk-sub-panelhead,
  .xk-sub-toolbar,
  .xk-sub-actions,
  .xk-sub-row-actions-inner {
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .xk-sub-form .xk-sub-url-row {
    grid-template-columns: 1fr;
  }

  .xk-sub-form .xk-sub-url-field {
    max-width: none;
    width: 100%;
  }

  .xk-sub-form .xk-sub-url-action {
    width: 100%;
  }

  .xk-sub-form .xk-sub-url-actions {
    justify-content: flex-end;
  }

  .xk-sub-interval-inline {
    flex-wrap: wrap;
  }

  .xk-sub-brief {
    padding: 9px;
  }

  .xk-sub-tablewrap {
    min-height: 220px;
  }

  .xk-sub-node-item {
    grid-template-columns: 1fr;
  }

  .xk-sub-node-side {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .xk-sub-node-list {
    grid-template-columns: 1fr;
  }

  .xk-sub-table {
    min-width: 620px;
  }
}

html[data-theme="light"] #outbounds-pool-modal .modal-content {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

html[data-theme="light"] .xk-pool-lead {
  border-color: rgba(2, 6, 23, 0.10);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.10), rgba(2, 6, 23, 0.02));
}

html[data-theme="light"] .xk-pool-panel,
html[data-theme="light"] .xk-pool-note,
html[data-theme="light"] .xk-pool-tablewrap,
html[data-theme="light"] .xk-pool-replace-card {
  border-color: rgba(172, 188, 214, 0.42);
}

html[data-theme="light"] .xk-pool-panel,
html[data-theme="light"] .xk-pool-replace-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(246, 249, 255, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(47, 79, 140, 0.06);
}

html[data-theme="light"] .xk-pool-note,
html[data-theme="light"] .xk-pool-tablewrap,
html[data-theme="light"] .xk-pool-empty {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(240, 245, 255, 0.94));
}

html[data-theme="light"] .xk-pool-table thead th {
  background: rgba(255, 255, 255, 0.92);
  color: #62758f;
}

html[data-theme="light"] .xk-pool-lead-title,
html[data-theme="light"] .xk-pool-panel .terminal-menu-title,
html[data-theme="light"] .xk-pool-replace-copy strong {
  color: #1d2b44;
}

html[data-theme="light"] .xk-pool-kicker,
html[data-theme="light"] .xk-pool-fieldlabel {
  color: #6b7d97;
}

html[data-theme="light"] .xk-pool-lead .modal-description,
html[data-theme="light"] .xk-pool-note,
html[data-theme="light"] .xk-pool-existing,
html[data-theme="light"] .xk-pool-list-subtitle,
html[data-theme="light"] .xk-pool-empty,
html[data-theme="light"] .xk-pool-replace-copy small,
html[data-theme="light"] .xk-pool-status {
  color: #465975;
}

html[data-theme="light"] .xk-pool-empty {
  border-color: rgba(172, 188, 214, 0.52);
}

html[data-theme="light"] .xk-pool-summary {
  border-color: rgba(96, 165, 250, 0.28);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(225, 236, 255, 0.92));
  color: #23407d;
}

html[data-theme="light"] .xk-sub-panel,
html[data-theme="light"] .xk-sub-tablewrap,
html[data-theme="light"] .xk-sub-check,
html[data-theme="light"] .xk-sub-node-list,
html[data-theme="light"] .xk-sub-node-item {
  border-color: rgba(172, 188, 214, 0.42);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .xk-outbounds-active-status {
  border-color: rgba(172, 188, 214, 0.44);
  background: rgba(255, 255, 255, 0.78);
  color: #465975;
}

html[data-theme="light"] .xk-outbounds-active-status.is-active {
  border-color: rgba(217, 119, 6, 0.32);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

html[data-theme="light"] .xk-outbounds-node-item.is-active-route {
  border-color: rgba(217, 119, 6, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.88));
  box-shadow:
    inset 3px 0 0 rgba(217, 119, 6, 0.88),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 28px rgba(217, 119, 6, 0.10);
}

html[data-theme="light"] .xk-sub-list-panel {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.94));
}

html[data-theme="light"] .xk-sub-main {
  color: #1d2b44;
}

html[data-theme="light"] .xk-sub-badge {
  border-color: rgba(172, 188, 214, 0.42);
  background: rgba(255, 255, 255, 0.9);
  color: #465975;
}

html[data-theme="light"] .xk-sub-badge.is-error {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.96);
  color: #991b1b;
}

html[data-theme="light"] .xk-sub-badge.is-due {
  border-color: rgba(217, 119, 6, 0.26);
  background: rgba(254, 243, 199, 0.96);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-badge.is-updated {
  border-color: rgba(14, 165, 233, 0.22);
  background: rgba(224, 242, 254, 0.96);
  color: #0c4a6e;
}

html[data-theme="light"] .xk-sub-badge.is-filtered {
  border-color: rgba(172, 188, 214, 0.42);
  background: rgba(241, 245, 249, 0.96);
  color: #475569;
}

html[data-theme="light"] .xk-sub-diagnostics {
  border-color: rgba(172, 188, 214, 0.42);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.94));
}

html[data-theme="light"] .xk-sub-diag-pill {
  border-color: rgba(172, 188, 214, 0.42);
  background: rgba(255, 255, 255, 0.92);
  color: #465975;
}

html[data-theme="light"] .xk-sub-diag-pill.is-error {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.96);
  color: #991b1b;
}

html[data-theme="light"] .xk-sub-diag-pill.is-warning {
  border-color: rgba(217, 119, 6, 0.26);
  background: rgba(254, 243, 199, 0.96);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-diag-pill.is-error-list {
  border-color: rgba(234, 88, 12, 0.24);
  background: rgba(255, 237, 213, 0.96);
  color: #9a3412;
}

html[data-theme="light"] .xk-sub-diag-pill.is-filtered {
  border-color: rgba(172, 188, 214, 0.42);
  background: rgba(241, 245, 249, 0.96);
  color: #475569;
}

html[data-theme="light"] .xk-sub-diag-group {
  border-color: rgba(172, 188, 214, 0.38);
  background: rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] .xk-sub-diag-group.is-plan {
  border-color: rgba(56, 189, 248, 0.24);
  background: rgba(239, 246, 255, 0.94);
}

html[data-theme="light"] .xk-sub-diag-group.is-error {
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(254, 242, 242, 0.90);
}

html[data-theme="light"] .xk-sub-diag-group.is-warning {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(255, 251, 235, 0.94);
}

html[data-theme="light"] .xk-sub-diag-group.is-error-list {
  border-color: rgba(234, 88, 12, 0.20);
  background: rgba(255, 237, 213, 0.92);
}

html[data-theme="light"] .xk-sub-diag-label,
html[data-theme="light"] .xk-sub-diag-empty {
  color: #465975;
}

html[data-theme="light"] .xk-sub-diag-list {
  color: #1d2b44;
}

html[data-theme="light"] .xk-sub-diag-url code {
  border-color: rgba(59, 130, 246, 0.18);
  background: rgba(239, 246, 255, 0.96);
  color: #1d4ed8;
}

html[data-theme="light"] .xk-sub-diag-pre {
  color: #991b1b;
}

html[data-theme="light"] .xk-sub-interval-note {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(254, 243, 199, 0.78);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-update-note {
  border-color: rgba(13, 148, 136, 0.18);
  background: rgba(236, 253, 245, 0.82);
}

html[data-theme="light"] .xk-sub-update-title {
  color: #115e59;
}

html[data-theme="light"] .xk-sub-update-text {
  color: #465975;
}

html[data-theme="light"] .xk-sub-update-text b {
  color: #1d2b44;
}

html[data-theme="light"] .xk-sub-muted,
html[data-theme="light"] .xk-sub-node-endpoint,
html[data-theme="light"] .xk-sub-node-state {
  color: #465975;
}

html[data-theme="light"] .xk-sub-table tbody tr.is-selected {
  background: rgba(59, 130, 246, 0.10);
}

html[data-theme="light"] .xk-sub-list-panel .xk-sub-toolbar .btn-compact,
html[data-theme="light"] .xk-sub-list-action,
html[data-theme="light"] .xk-sub-file-link {
  border-color: rgba(172, 188, 214, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.88)),
    rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(47, 79, 140, 0.08);
}

html[data-theme="light"] .xk-sub-list-action-delete {
  border-color: rgba(239, 68, 68, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 240, 0.90)),
    rgba(254, 242, 242, 0.88);
  color: #991b1b;
}

html[data-theme="light"] .xk-sub-file-badge {
  border-color: rgba(13, 148, 136, 0.18);
  background: rgba(204, 251, 241, 0.88);
  color: #115e59;
}

html[data-theme="light"] .xk-sub-status.is-warning {
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-latency {
  border-color: rgba(172, 188, 214, 0.46);
  background: rgba(255, 255, 255, 0.82);
  color: #465975;
}

html[data-theme="light"] .xk-sub-node-latency.is-fast {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(220, 252, 231, 0.92);
  color: #166534;
}

html[data-theme="light"] .xk-sub-node-latency.is-mid {
  border-color: rgba(13, 148, 136, 0.20);
  background: rgba(204, 251, 241, 0.88);
  color: #115e59;
}

html[data-theme="light"] .xk-sub-node-latency.is-slow {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-latency.is-active-route {
  border-color: rgba(217, 119, 6, 0.32);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-latency.is-check-failed {
  border-color: rgba(217, 119, 6, 0.26);
  background: rgba(255, 251, 235, 0.94);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-ping.btn-compact {
  border-color: rgba(96, 165, 250, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.90)),
    rgba(239, 246, 255, 0.85);
  color: #1d4ed8;
}

html[data-theme="light"] .xk-sub-pingall-spinner {
  border-color: rgba(96, 165, 250, 0.20);
  border-top-color: #1d4ed8;
  border-right-color: rgba(13, 148, 136, 0.82);
}

html[data-theme="light"] .xk-sub-field-note {
  color: rgba(59, 75, 103, 0.80);
}

html[data-theme="light"] .xk-sub-field-note.is-auto,
html[data-theme="light"] .xk-sub-field-note.is-info {
  color: #1d4ed8;
}

html[data-theme="light"] .xk-sub-field-note.is-error {
  color: #b91c1c;
}

html[data-theme="light"] .xk-sub-interval-apply.is-provider {
  border-color: rgba(217, 119, 6, 0.34);
  background:
    linear-gradient(180deg, rgba(254, 243, 199, 0.98), rgba(253, 230, 138, 0.90)),
    rgba(254, 243, 199, 0.82);
  color: #92400e;
  box-shadow:
    0 0 0 1px rgba(217, 119, 6, 0.05),
    0 3px 10px rgba(245, 158, 11, 0.10);
}

html[data-theme="light"] .xk-sub-interval-apply.is-provider:hover {
  border-color: rgba(217, 119, 6, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(253, 230, 138, 0.94)),
    rgba(255, 251, 235, 0.86);
  color: #78350f;
}

html[data-theme="light"] .xk-sub-icon-btn.btn-compact.is-busy {
  border-color: rgba(59, 130, 246, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(219, 234, 254, 0.92)),
    rgba(219, 234, 254, 0.86);
  color: #1d4ed8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 1px rgba(59, 130, 246, 0.05);
}

html[data-theme="light"] .xk-sub-icon-btn.btn-compact.is-dirty {
  box-shadow:
    0 0 0 1px rgba(234, 88, 12, 0.36),
    0 0 0 4px rgba(251, 146, 60, 0.14);
}

html[data-theme="light"] .xk-sub-head-chip.is-dirty {
  box-shadow:
    0 0 0 1px rgba(234, 88, 12, 0.36),
    0 0 0 4px rgba(251, 146, 60, 0.14);
}

html[data-theme="light"] .xk-sub-head-chip.is-armed {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.92) 0%, rgba(187, 247, 208, 0.80) 100%);
  border-color: rgba(34, 197, 94, 0.55);
  color: #166534;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.42),
    0 0 0 4px rgba(34, 197, 94, 0.14);
}

html[data-theme="light"] .xk-sub-node-name {
  color: #1d2b44;
}

html[data-theme="light"] .xk-sub-node-pill {
  border-color: rgba(59, 130, 246, 0.24);
  background: rgba(219, 234, 254, 0.78);
  color: #1e3a8a;
}

html[data-theme="light"] .xk-sub-node-pill-transport {
  border-color: rgba(13, 148, 136, 0.22);
  background: rgba(204, 251, 241, 0.78);
  color: #115e59;
}

html[data-theme="light"] .xk-sub-node-pill-security {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(254, 243, 199, 0.82);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-pill-warning {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(254, 243, 199, 0.9);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-pill-active-route {
  border-color: rgba(217, 119, 6, 0.28);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

html[data-theme="light"] .xk-sub-node-detail {
  color: #0f766e;
}

html[data-theme="light"] .xk-sub-node-warning {
  color: #9a3412;
}

/* Donate modal (💰 Донат) */
#donate-modal .modal-content {
  max-width: 760px;
}

.donate-modal-content {
  padding: 14px 16px 16px 16px;
}

.donate-lead {
  margin: 0 0 12px 0;
  font-size: calc(14px * var(--xk-font-scale));
  line-height: 1.45;
  opacity: 0.95;
}

.donate-coins {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.donate-coin {
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 10px 10px 12px 10px;
}

.donate-coin-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 600;
  margin-bottom: 8px;
}

.donate-coin-sub {
  font-weight: 500;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.75;
}

.donate-address {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.85);
  background: rgba(2, 6, 23, 0.75);
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12.5px * var(--xk-font-scale));
  line-height: 1.35;
  transition: transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.donate-address-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.donate-address-icon {
  flex: 0 0 auto;
  opacity: 0.75;
}

.donate-address:hover {
  border-color: rgba(37, 99, 235, 0.7);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}

.donate-address:active {
  transform: translateY(1px) scale(0.99);
}

.donate-hint {
  margin-top: 10px;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.75;
}

html[data-theme="light"] .donate-coin {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .donate-address {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .donate-address:hover {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.16);
}

/* DevTools: ENV help modal/table */
#dt-env-help-modal .modal-content {
  width: min(1120px, 96vw);
  max-width: 1120px;
}

/* Let the help modal scroll horizontally if something still overflows. */
#dt-env-help-modal .modal-body {
  overflow-x: auto;
}

.dt-env-help-table-wrap {
  overflow: auto;
  border: 1px solid rgba(51,65,85,0.6);
  border-radius: 10px;
}

.dt-env-help-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dt-env-help-table th,
.dt-env-help-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(51,65,85,0.35);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.dt-env-help-table thead th {
  position: sticky;
  top: 0;
  background: rgba(2,6,23,0.92);
  backdrop-filter: blur(6px);
}

html[data-theme="light"] .dt-env-help-table thead th {
  background: rgba(255,255,255,0.92);
}

.dt-env-help-col-key { width: 260px; white-space: nowrap; }
.dt-env-help-col-restart { width: 190px; }

.dt-env-help-td-key code {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .dt-env-help-col-key { width: 210px; }
  .dt-env-help-col-restart { width: 150px; }
}

/*
  JSON editor modal: avoid "double scroll" (outer modal-body + inner CodeMirror).
  Keep modal-body non-scrollable and let CodeMirror stretch & scroll.
*/
#json-editor-modal .modal-content {
  /*
    IMPORTANT:
    `.modal-content` has `max-height: 80vh` globally, but no explicit `height`.
    If the JSON content doesn't immediately force the modal to reach its max-height,
    CodeMirror can end up with an effectively unbounded height (because the global
    `.CodeMirror { height: auto; }` rule lets it grow with content). In that case
    the extra lines get clipped by the modal layout, and the internal scrollbar may
    not appear.

    Setting an explicit height for the JSON editor modal guarantees that CodeMirror
    always has a bounded area and shows the same vertical scrollbar behavior for
    both 03_inbounds.json and 04_outbounds.json.
  */
  height: 80vh;
}

/*
  JSON editor modal (03_inbounds / 04_outbounds):
  make the header area more compact (the title already includes the filename).
*/
#json-editor-modal .modal-header {
  margin-bottom: 6px;
}

#json-editor-modal .xk-editor-toolbar {
  margin: 0 0 6px;
}

#json-editor-modal .xk-editor-file-label {
  margin: 0;
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
}

/* JSON editor modal: let the scroll area use the available height (no global cap) */
#json-editor-modal .CodeMirror-scroll {
  max-height: none !important;
  height: 100% !important;
}

#json-editor-modal .modal-body {
  margin-top: 0;
  margin-bottom: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#json-editor-modal .modal-body > .xk-editor-toolbar,
#json-editor-modal .modal-body > #json-editor-error {
  flex: 0 0 auto;
}

/* CodeMirror wrapper inside JSON editor modal should occupy remaining height */
#json-editor-modal .CodeMirror {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100% !important; /* override CodeMirror's default 300px */
}

/* Keep fallback textarea usable if CodeMirror fails to load */
#json-editor-modal textarea#json-editor-textarea {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

#json-editor-modal #json-editor-monaco {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}


/* File manager text editor modal: avoid "double scroll" (outer modal-body + inner CodeMirror) */
#fm-editor-modal .modal-content {
  height: 80vh;
  max-width: 980px;
}

#fm-editor-modal .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#fm-editor-modal .CodeMirror-scroll {
  max-height: none !important;
  height: 100% !important;
}

#fm-editor-modal .CodeMirror {
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
}

#fm-editor-modal #fm-editor-monaco {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Keep fallback textarea usable if CodeMirror fails to load */
#fm-editor-modal textarea#fm-editor-textarea {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: auto;
}

/* Routing help modal: inline Shadow DOM content owns the inner scroll. */
#xkeen-routing-help-modal .modal-content {
  height: 80vh;
}

#xkeen-routing-help-modal .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#xkeen-routing-help-content {
  flex: 1 1 auto;
  min-height: 0;
}




#toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  --toast-accent: var(--sem-success, #22c55e);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--toast-accent) 16%, transparent), transparent 44%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--editor-btn-bg, var(--header-btn-bg, #0f172a94)) 92%, white 8%),
      color-mix(in srgb, var(--card-bg, #020617) 98%, black 2%)
    );
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 32%, var(--editor-btn-border, var(--modal-border, #475569d1)) 68%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(2, 8, 23, 0.18),
    0 12px 24px rgba(var(--shadow-rgb, 0, 0, 0), 0.24),
    0 8px 18px color-mix(in srgb, var(--toast-accent) 16%, transparent);
  padding: 10px 12px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text, var(--modal-text, #e5e7eb));
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-backdrop-filter: var(--xk-tooltip-backdrop, none);
  backdrop-filter: var(--xk-tooltip-backdrop, none);
}

.toast-success {
  --toast-accent: var(--sem-success, #22c55e);
}

.toast-info {
  --toast-accent: var(--sem-info, #38bdf8);
}

.toast-warning {
  --toast-accent: var(--sem-warning, #f59e0b);
}

.toast-error {
  --toast-accent: var(--sem-error, #ef4444);
}

.toast-icon {
  font-size: 1.05rem;
  margin-top: 1px;
  color: color-mix(in srgb, var(--toast-accent) 78%, var(--modal-text, #e5e7eb));
  flex: 0 0 auto;
}

.toast-message {
  flex: 1;
  color: inherit;
}

html[data-theme="light"] .toast {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--toast-accent) 14%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), color-mix(in srgb, var(--modal-body-bg, #eef4ff) 78%, white 22%));
  border-color: color-mix(in srgb, var(--toast-accent) 24%, var(--modal-border, #cfdbef));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 16px 28px rgba(59, 91, 154, 0.10),
    0 10px 22px color-mix(in srgb, var(--toast-accent) 12%, transparent);
}

html[data-theme="dark"] body.panel-page .toast {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--toast-accent) 52%, var(--editor-btn-border, var(--border, #60a5fa2e)) 48%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--editor-btn-bg, #0f172a94) 92%, white 8%),
      color-mix(in srgb, var(--editor-btn-bg, #0f172a94) 96%, black 4%)
    ) !important;
  color: color-mix(in srgb, var(--text, #eaf2ff) 90%, white 10%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(2, 8, 23, 0.2),
    0 12px 24px rgba(2, 8, 23, 0.24) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
}

html[data-theme="dark"] body.panel-page .toast::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 28%, transparent 64%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 24%, transparent 48%);
  mix-blend-mode: screen;
}

html[data-theme="dark"] body.panel-page .toast > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] body.panel-page .toast-success {
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 52%, var(--editor-btn-border, #60a5fa2e) 48%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(9, 61, 36, 0.92) 82%, var(--sem-success, #22c55e) 18%),
      color-mix(in srgb, rgba(6, 31, 20, 0.9) 68%, var(--sem-success, #22c55e) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(74, 222, 128, 0.22) 56%, var(--sem-success, #22c55e) 44%), transparent 38%) !important;
  color: #ebfff1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(6, 95, 70, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .toast-info {
  border-color: color-mix(in srgb, var(--sem-info, #93c5fd) 52%, var(--editor-btn-border, #60a5fa2e) 48%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(23, 57, 118, 0.94) 82%, var(--sem-info, #93c5fd) 18%),
      color-mix(in srgb, rgba(9, 27, 68, 0.92) 68%, var(--sem-info, #93c5fd) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(96, 165, 250, 0.24) 56%, var(--sem-info, #93c5fd) 44%), transparent 38%) !important;
  color: #eef6ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(29, 78, 216, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .toast-warning {
  border-color: color-mix(in srgb, var(--sem-warning, #fbbf24) 52%, var(--editor-btn-border, #60a5fa2e) 48%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(92, 55, 13, 0.92) 82%, var(--sem-warning, #fbbf24) 18%),
      color-mix(in srgb, rgba(43, 25, 7, 0.9) 68%, var(--sem-warning, #fbbf24) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(251, 191, 36, 0.22) 56%, var(--sem-warning, #fbbf24) 44%), transparent 38%) !important;
  color: #fff7e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(146, 64, 14, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .toast-error {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 52%, var(--editor-btn-border, #60a5fa2e) 48%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(88, 19, 31, 0.92) 82%, var(--sem-error, #f87171) 18%),
      color-mix(in srgb, rgba(48, 10, 18, 0.9) 68%, var(--sem-error, #f87171) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(248, 113, 113, 0.22) 56%, var(--sem-error, #f87171) 44%), transparent 38%) !important;
  color: #fff0f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(127, 29, 29, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .toast-icon {
  color: color-mix(in srgb, var(--toast-accent) 68%, white 32%);
  text-shadow: 0 0 16px color-mix(in srgb, var(--toast-accent) 28%, transparent);
}


/* Global auto-restart toggle in header */
.global-toggle-row {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Справа: чекбокс авто‑перезапуска + бейдж "Загружено ...
.fm-help-body{
  font-size: 0.95rem;
  line-height: 1.35;
}
.fm-help-body h3{
  margin: 14px 0 6px 0;
  font-size: 1rem;
}
.fm-help-body ul{
  margin: 6px 0 0 18px;
}
.fm-help-body li{
  margin: 4px 0;
}
" строго под ним */
.global-toggle-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.global-autorestart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
  user-select: none;
}

.global-autorestart-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.global-autorestart-toggle span {
  cursor: pointer;
}


.xkeen-ctrl-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}




/* Бейдж справа: под чекбоксом и выровнен по правому краю */
.global-toggle-right .last-load-badge {
  margin-left: 0;
  align-self: flex-end;
}
.xkeen-ctrl-group {
  display: inline-flex;
  gap: 4px;
}

.xkeen-ctrl-group-main {
  align-items: center;
  flex-wrap: wrap;
}

.xkeen-ctrl-group-main .xkeen-ctrl-group-routing-focus {
  margin-left: 4px;
}

/* Бейдж «Загружено ...
.fm-help-body{
  font-size: 0.95rem;
  line-height: 1.35;
}
.fm-help-body h3{
  margin: 14px 0 6px 0;
  font-size: 1rem;
}
.fm-help-body ul{
  margin: 6px 0 0 18px;
}
.fm-help-body li{
  margin: 4px 0;
}
.xkeen-ctrl-row .last-load-badge {
  margin-left: 0;
}

.xkeen-ctrl-btn {
  padding: 3px 10px;
  font-size: calc(11px * var(--xk-font-scale));
  border-radius: 9999px;
  border: 1px solid var(--border, #1f2937);
  background: var(--editor-btn-bg, #020617);
  color: var(--editor-btn-text, #e5e7eb);
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb, 0,0,0), calc(var(--shadow, 0.4) + 0.3));
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* DevTools: make Start/Stop/Restart compact and match Refresh button typography */
.actions button.dt-ui-action {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 92px;
  padding: 6px 14px;
  font-size: calc(14px * var(--xk-font-scale));
}

/* DevTools (Tools tab): keep Start/Stop/Restart on a single row */
.dt-service-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dt-service-actions button.dt-ui-action {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  font-size: calc(13px * var(--xk-font-scale));
}

.dt-service-actions-secondary {
  margin-top: 8px;
  display: flex;
}

.dt-service-actions-secondary button {
  width: 100%;
}

/* DevTools: logging block (pill style, single column) */
.dt-logging-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-logging-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-logging-label {
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.1;
  opacity: 0.88;
}

.dt-pill-field {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  font-size: calc(12px * var(--xk-font-scale));
  box-sizing: border-box;
}

.dt-pill-field:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.9);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.dt-logging-card .dt-logging-switch {
  align-self: flex-start;
}

.dt-logging-actions {
  margin-top: 10px;
  display: flex;
}

.dt-logging-actions button {
  width: 100%;
}



/* DevTools: theme editor */
.dt-theme-target {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
}

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

@media (max-width: 760px) {
  .dt-theme-grid { grid-template-columns: 1fr; }
}

.dt-theme-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Allow shrink inside CSS grid to prevent slider overflow */
  min-width: 0;
}

.dt-theme-name {
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.1;
  opacity: 0.88;
}

.dt-theme-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dt-theme-alpha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  min-width: 0;
}

.dt-theme-alpha-name {
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  /* Fixed-ish label width keeps rows compact */
  flex: 0 0 64px;
  min-width: 0;
}

.dt-theme-alpha input[type="range"] {
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
}

.dt-theme-alpha-val {
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #9ca3af);
  flex: 0 0 44px;
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Narrow cards: stack opacity controls into two rows (label+value, then slider) */
@media (max-width: 520px) {
  .dt-theme-alpha {
    display: grid;
    grid-template-columns: 1fr 56px;
    grid-template-areas:
      "name val"
      "range range";
    gap: 6px 10px;
    align-items: center;
  }
  .dt-theme-alpha-name { grid-area: name; }
  .dt-theme-alpha input[type="range"] { grid-area: range; }
  .dt-theme-alpha-val {
    grid-area: val;
    justify-self: end;
  }
}

.dt-theme-color {
  width: 44px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: transparent;
  padding: 0;
}

.dt-theme-color::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 10px;
}

.dt-theme-color::-webkit-color-swatch {
  border: none;
  border-radius: 9px;
}

.dt-theme-sliders {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  .dt-theme-sliders { grid-template-columns: 1fr; }
}

.dt-theme-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-theme-slider-name {
  width: 86px;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.88;
}

.dt-theme-slider input[type="range"] {
  flex: 1 1 auto;
}

.dt-theme-slider-val {
  width: 64px;
  text-align: right;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
/* DevTools: toolbars shouldn't force buttons to stretch full width */
.actions.dt-log-toolbar button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* DevTools Logs: line actions (Stage 8) */
.dt-log-line-menu {
  position: fixed;
  z-index: 65;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border, #334155);
  background: var(--card-bg, #020617);
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb, 0,0,0), calc(var(--shadow, 0.4) + 0.4));
}

.dt-log-line-menu.hidden {
  display: none;
}

.dt-log-line-menu button {
  width: 100%;
  text-align: left;
}

.dt-log-context-focus {
  background: color-mix(in srgb, var(--accent, #60a5fa) 16%, transparent);
  border-left: 3px solid var(--accent, #2563eb);
  padding-left: 8px;
}


/* DevTools Logs: tail -f controls (Stage 3 scaffold) */
.dt-log-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
  color: var(--text, #e5e7eb);
  font-size: calc(12px * var(--xk-font-scale));
  cursor: pointer;
}

.dt-log-badge:hover {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}

#dt-log-pause.is-paused {
  border-color: var(--sem-warning, #f59e0b);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sem-warning, #f59e0b) 22%, transparent);
}
/* DevTools: ENV table should use most of the viewport */
.dt-env-scroll {
  overflow: auto;
  max-height: calc(100vh - 260px);
}

/* DevTools: ENV editor inputs should look consistent in dark theme */
.dt-env-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  box-sizing: border-box;
  font-size: calc(13px * var(--xk-font-scale));
}

.dt-env-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px #1d4ed8;
}
.xkeen-ctrl-btn.loading {
  position: relative;
  color: var(--muted, #9ca3af);
  cursor: wait;
}

.xkeen-ctrl-btn.loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 60%, transparent);
  border-top-color: var(--text, #e5e7eb);
  animation: xkeen-spinner 0.8s linear infinite;
}

@keyframes xkeen-spinner {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}


@keyframes xkeen-global-spinner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.xkeen-ctrl-btn.loading {
  position: relative;
  color: var(--muted, #9ca3af);
  cursor: wait;
}

.xkeen-ctrl-btn.loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 60%, transparent);
  border-top-color: var(--text, #e5e7eb);
  animation: xkeen-spinner 0.8s linear infinite;
}

@keyframes xkeen-spinner {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}


.xkeen-ctrl-btn:hover {
  background: linear-gradient(135deg, var(--editor-btn-active-from, #1d4ed8), var(--editor-btn-active-to, #2563eb));
  border-color: var(--editor-btn-active-to, #2563eb);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 45%, transparent);
  transform: translateY(-1px);
}

.xkeen-ctrl-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(var(--shadow-rgb, 0,0,0), calc(var(--shadow, 0.4) + 0.3));
}



textarea#json-editor-textarea {
  width: 100%;
  min-height: 260px;
  max-height: 60vh;
  height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(14px * var(--xk-font-scale));
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb); /* как в редакторе 05_routing */
  resize: none; /* избегаем артефактов при сильном растягивании */
  box-sizing: border-box;
  overflow-y: auto;
}



#routing-help-line {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}



#routing-help-line:hover {
  animation: routing-help-blink 1s infinite;
}

@keyframes routing-help-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}


#mihomo-profiles-link {
  cursor: pointer;
  display: inline-block;
  margin-top: -4px;
  margin-bottom: 4px;
  font-size: calc(14px * var(--xk-font-scale));
}

#mihomo-profiles-link:hover {
  animation: routing-help-blink 1s infinite;
}
/* Custom tooltip for XKeen commands */
.command-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 6px);
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.3;
  white-space: normal;
  max-width: 260px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

.command-item::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(15, 23, 42, 0.98) transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 39;
}

.command-item:hover::after,
.command-item:hover::before {
  opacity: 1;
}



/* --- Mihomo generator layout --- */
.xkeen-input {
  width: 100%;
  padding: 6px 8px;
  margin: 4px 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  box-sizing: border-box;
  font-size: calc(14px * var(--xk-font-scale));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.xkeen-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px #1d4ed8;
}

.small-textarea {
  min-height: 120px;
}

.mihomo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.mihomo-column {
  flex: 1 1 260px;
  min-width: 260px;
}

.xk-mihomo-vault {
  margin-top: 10px;
}

.xk-mihomo-vault-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.xk-mihomo-vault-card {
  position: relative;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(9, 20, 42, 0.88), rgba(4, 11, 25, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 36px rgba(2, 6, 23, 0.20);
  overflow: hidden;
}

.xk-mihomo-vault-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.28), transparent);
  pointer-events: none;
}

.xk-mihomo-vault-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.xk-mihomo-vault-head-copy {
  min-width: 0;
}

.xk-mihomo-vault-head h4 {
  margin: 0;
  font-size: calc(17px * var(--xk-font-scale));
}

.xk-mihomo-vault-head .xk-card-desc {
  margin: 4px 0 0;
  line-height: 1.38;
}

.xk-mihomo-vault-head-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.xk-mihomo-vault-table-shell {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(7, 14, 28, 0.76), rgba(3, 8, 19, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 26px rgba(2, 6, 23, 0.14);
  overflow: auto;
}

.xk-mihomo-vault-table-shell--profiles {
  max-height: 246px;
}

.xk-mihomo-vault-table-shell--backups {
  max-height: 332px;
}

.xk-mihomo-vault-table {
  width: 100%;
  margin: 0;
}

.xk-mihomo-vault-table th,
.xk-mihomo-vault-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.88);
  vertical-align: middle;
}

.xk-mihomo-vault-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 16, 32, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: calc(11px * var(--xk-font-scale));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.86);
}

.xk-mihomo-vault-table tbody tr {
  transition: background 0.14s ease;
}

.xk-mihomo-vault-table tbody tr:hover {
  background: rgba(96, 165, 250, 0.08);
}

.xk-mihomo-vault-table tbody tr:last-child td {
  border-bottom: 0;
}

.xk-mihomo-name-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(15, 23, 42, 0.16)),
    rgba(15, 23, 42, 0.34);
  color: #e2e8f0;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 650;
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.xk-mihomo-name-pill--scroll {
  max-width: min(100%, 250px);
  padding-right: 4px;
}

.xk-mihomo-name-pill--scroll .backup-filename-marquee {
  width: 100%;
  max-width: 100%;
}

.xk-mihomo-name-pill--scroll .backup-filename-marquee-inner {
  padding-right: 10px;
}

.xk-mihomo-row-badge {
  margin: 0;
}

.xk-mihomo-created-at {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  white-space: nowrap;
}

.xk-mihomo-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.xk-mihomo-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.34);
  color: #e2e8f0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(2, 6, 23, 0.14);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.xk-mihomo-mini-btn:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: rgba(147, 197, 253, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 22px rgba(2, 6, 23, 0.18);
}

.xk-mihomo-mini-btn:focus-visible {
  outline: none;
  border-color: rgba(96, 165, 250, 0.52);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 22px rgba(2, 6, 23, 0.18);
}

.xk-mihomo-mini-btn[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.xk-mihomo-mini-btn--icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
  gap: 0;
}

.xk-mihomo-mini-btn-label {
  font-weight: 650;
  letter-spacing: 0.01em;
}

.xk-mihomo-mini-btn--primary {
  border-color: rgba(96, 165, 250, 0.28);
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.32), rgba(29, 78, 216, 0.24)),
    rgba(15, 23, 42, 0.34);
  color: #eff6ff;
}

.xk-mihomo-mini-btn--ok {
  border-color: rgba(34, 197, 94, 0.30);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.24), rgba(22, 163, 74, 0.18)),
    rgba(15, 23, 42, 0.30);
  color: #dcfce7;
}

.xk-mihomo-mini-btn--muted {
  color: #cbd5e1;
}

.xk-mihomo-mini-btn--danger {
  border-color: rgba(248, 113, 113, 0.26);
  background:
    linear-gradient(180deg, rgba(127, 29, 29, 0.28), rgba(69, 10, 10, 0.24)),
    rgba(15, 23, 42, 0.30);
  color: #fee2e2;
}

.xk-mihomo-backups-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.xk-mihomo-backups-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.28);
  color: #dbeafe;
  font-size: calc(12px * var(--xk-font-scale));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.xk-mihomo-backups-filter input {
  margin: 0;
  accent-color: var(--accent, #60a5fa);
}

.xk-mihomo-backups-filter span {
  white-space: nowrap;
}

.xk-mihomo-backups-active-pill {
  margin: 0;
  max-width: 100%;
}

.xk-mihomo-backups-clean {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.xk-mihomo-backups-clean-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: calc(12px * var(--xk-font-scale));
  white-space: nowrap;
}

.xk-mihomo-backups-clean-input {
  width: 58px;
  min-width: 58px;
  padding: 7px 8px;
  text-align: center;
}

.xk-mihomo-backups-clean-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.xk-mihomo-backups-hint {
  margin: 0 0 10px 2px;
  opacity: 0.82;
}

.xk-mihomo-profile-create {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(8, 20, 46, 0.54), rgba(4, 11, 25, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.xk-mihomo-profile-create h5 {
  margin: 0;
  font-size: calc(14px * var(--xk-font-scale));
}

.xk-mihomo-profile-create-copy .xk-card-desc {
  margin: 4px 0 0;
}

.xk-mihomo-profile-create-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.xk-mihomo-profile-input {
  flex: 1 1 auto;
  min-width: 0;
}

.xk-mihomo-profile-save-btn {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}

html[data-theme="light"] .xk-mihomo-vault-card {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 247, 255, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 36px rgba(37, 99, 235, 0.08);
}

html[data-theme="light"] .xk-mihomo-vault-card::before {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.20), transparent);
}

html[data-theme="light"] .xk-mihomo-vault-table-shell,
html[data-theme="light"] .xk-mihomo-profile-create,
html[data-theme="light"] .xk-mihomo-backups-clean {
  border-color: rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .xk-mihomo-vault-table thead th {
  background: rgba(248, 250, 252, 0.96);
  color: #64748b;
}

html[data-theme="light"] .xk-mihomo-vault-table th,
html[data-theme="light"] .xk-mihomo-vault-table td {
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="light"] .xk-mihomo-vault-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.06);
}

html[data-theme="light"] .xk-mihomo-name-pill {
  border-color: rgba(96, 165, 250, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 244, 255, 0.92)),
    rgba(255, 255, 255, 0.65);
  color: #1e3a8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .xk-mihomo-created-at,
html[data-theme="light"] .xk-mihomo-backups-clean-label {
  color: #475569;
}

html[data-theme="light"] .xk-mihomo-backups-filter {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.82);
  color: #334155;
}

html[data-theme="light"] .xk-mihomo-mini-btn {
  border-color: rgba(148, 163, 184, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92)),
    rgba(255, 255, 255, 0.55);
  color: #1f2937;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 18px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .xk-mihomo-mini-btn:hover:not([disabled]) {
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 22px rgba(37, 99, 235, 0.10);
}

html[data-theme="light"] .xk-mihomo-mini-btn--primary {
  border-color: rgba(59, 130, 246, 0.26);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92)),
    rgba(255, 255, 255, 0.62);
  color: #1d4ed8;
}

html[data-theme="light"] .xk-mihomo-mini-btn--ok {
  border-color: rgba(34, 197, 94, 0.28);
  background:
    linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.94)),
    rgba(255, 255, 255, 0.62);
  color: #166534;
}

html[data-theme="light"] .xk-mihomo-mini-btn--danger {
  border-color: rgba(248, 113, 113, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(254, 226, 226, 0.92)),
    rgba(255, 255, 255, 0.62);
  color: #b91c1c;
}

@media (max-width: 980px) {
  .xk-mihomo-vault-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .xk-mihomo-vault-head {
    flex-direction: column;
    align-items: stretch;
  }

  .xk-mihomo-vault-head-btn {
    align-self: flex-start;
  }

  .xk-mihomo-backups-clean {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .xk-mihomo-profile-create-row {
    flex-direction: column;
    align-items: stretch;
  }

  .xk-mihomo-profile-save-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .xk-mihomo-vault-card {
    padding: 12px;
  }

  .xk-mihomo-vault-table th,
  .xk-mihomo-vault-table td {
    padding: 8px;
  }

  .xk-mihomo-vault-table-shell--profiles {
    max-height: 220px;
  }

  .xk-mihomo-vault-table-shell--backups {
    max-height: 280px;
  }

  .xk-mihomo-row-actions {
    justify-content: flex-start;
  }

  .xk-mihomo-name-pill--scroll {
    max-width: min(100%, 200px);
  }
}

.xkeen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--xk-font-scale));
  margin-top: 8px;
}

.xkeen-table th,
.xkeen-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #1f2933;
  text-align: left;
}

.xkeen-table th {
  font-weight: 600;
  color: #d1d5db;
}

.xkeen-table tbody tr:hover {
  background: #020617;
}


/* Xray log filter row */
.log-filter-row {
  margin: 8px 0 10px;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
}

.log-filter-row .xray-log-filter {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}

.log-filter-row .xray-log-filter:focus{
  /* Keep focus ring even though base shadow is removed for the joined group */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #60a5fa) 22%, transparent);
}

.log-filter-row #xray-log-filter-clear{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 7px 12px;
  min-width: 44px;
  line-height: 1;
  box-shadow: none;
  transform: none;
  border-left: 0;
}

.log-filter-row #xray-log-filter-clear:hover,
.log-filter-row #xray-log-filter-clear:active{
  transform: none;
  box-shadow: none;
}

/* Keep filter row usable on narrow screens */
@media (max-width: 560px){
  .log-filter-row{ flex-wrap: wrap; gap: 8px; }
  .log-filter-row .xray-log-filter{
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.40);
  }
  .log-filter-row #xray-log-filter-clear{
    border-radius: 9999px;
    border-left: 1px solid var(--editor-btn-border, rgba(51,65,85,0.9));
  }
}


/* DevTools Logs: compact topbar + controls (short panel) */
.dt-log-topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 8px 0;
}

.dt-log-topbar-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* DevTools Logs: make secondary buttons match compact pill controls */
.dt-log-btn{
  padding: 6px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  border-radius: 9999px;
}

.dt-log-menu{
  position: relative;
}

.dt-log-menu > summary{
  list-style: none;
}

.dt-log-menu > summary::-webkit-details-marker{ display:none; }

.dt-log-menu[open] > summary{
  border-color: #2563eb;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.dt-log-menu-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border, #334155);
  background: var(--card-bg, #020617);
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb, 0,0,0), calc(var(--shadow, 0.4) + 0.4));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
}


/* Xray logs: per-line context menu (right click) */
.xray-line-menu{
  position: fixed;
  right: auto;
  top: auto;
  min-width: 200px;
  z-index: 80;
}

.dt-log-menu-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.dt-log-lines-input{
  width: 92px;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border, #374151);
  background: var(--header-btn-bg, #020617);
  color: var(--header-btn-text, #e5e7eb);
  font-size: calc(12px * var(--xk-font-scale));
  box-sizing: border-box;
}

.dt-log-lines-input:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.dt-log-controls{
  margin: 8px 0;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.dt-log-search-group{
  flex: 1 1 360px;
  min-width: 240px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.dt-log-filter{
  flex: 1 1 auto;
}

.dt-log-interval{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.dt-log-interval-label{
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.85;
}

/* Small switch-like pill (used in DevTools Logs controls) */
.dt-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  padding: 6px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border, rgba(51,65,85,0.55));
  background: var(--fm-row-hover-bg, color-mix(in srgb, var(--card-bg, #020617) 85%, transparent));
}

.dt-switch:hover{ background: color-mix(in srgb, var(--card-bg, #020617) 75%, transparent); }

.dt-switch input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.dt-switch-slider{
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, #334155) 75%, transparent);
  border: 1px solid var(--fm-panel-border, var(--border, rgba(51,65,85,0.85)));
  position: relative;
  flex: 0 0 auto;
}

.dt-switch-slider::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text, rgba(226,232,240,0.92));
  transition: transform 0.15s ease;
}

.dt-switch input:checked + .dt-switch-slider{
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 45%, transparent);
  border-color: var(--header-tab-active-bg, #2563eb);
}

.dt-switch input:checked + .dt-switch-slider::after{ transform: translateX(16px); }

.dt-switch-label{ opacity: 0.85; }

.dt-log-stats{
  margin-left: 0;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border, rgba(51,65,85,0.55));
  background: color-mix(in srgb, var(--card-bg, #020617) 85%, transparent);
  opacity: 0.92;
}

.dt-log-stats:empty{ display:none; }

.xray-log-mode{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border, rgba(51,65,85,0.55));
  background: color-mix(in srgb, var(--card-bg, #020617) 85%, transparent);
  opacity: 0.94;
}

.xray-log-mode::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted, #94a3b8) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.xray-log-mode[data-state="live"]::before{
  background: var(--sem-success, #22c55e);
}

.xray-log-mode[data-state="browse"]::before{
  background: var(--sem-info, #38bdf8);
}

.xray-log-mode[data-state="paused"]::before{
  background: var(--sem-warning, #f59e0b);
}

.xray-log-mode[data-state="armed"]::before{
  background: var(--accent, #60a5fa);
}

.xray-log-mode[data-state="manual-follow"]::before{
  background: color-mix(in srgb, var(--accent, #60a5fa) 75%, var(--sem-success, #22c55e));
}

.xray-log-scroll-btn[hidden]{
  display: none !important;
}

.xray-log-scroll-btn{
  white-space: nowrap;
}


/* Generic small round icon-only buttons (used for Mihomo profiles/backups controls) */
button.icon-btn {
  padding-inline: 10px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Backup filename marquee to prevent layout breaking */
.backup-filename-marquee {
  max-width: 220px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.backup-filename-marquee-inner {
  display: inline-block;
  padding-left: 100%;
  animation: backup-filename-scroll 12s linear infinite;
}

.backup-filename-marquee:hover .backup-filename-marquee-inner {
  animation-play-state: paused;
}

@keyframes backup-filename-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}



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

.xk-global-header-activity {
  --xk-header-spinner-size: 30px;
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--xk-header-spinner-size);
  height: var(--xk-header-spinner-size);
  flex: 0 0 var(--xk-header-spinner-size);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--header-btn-border, rgba(96, 165, 250, 0.24)) 88%, transparent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--header-btn-bg, rgba(2, 6, 23, 0.9)) 96%, rgba(255,255,255,0.04)), color-mix(in srgb, var(--header-btn-bg, rgba(2, 6, 23, 0.9)) 88%, rgba(15,23,42,0.22)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 30px rgba(2, 8, 23, 0.24);
  opacity: 0;
  transform: translateY(-1px) scale(0.92);
  pointer-events: none;
}

.xk-global-header-activity.is-active {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: xk-header-spinner-enter 0.22s ease;
}

.xk-global-header-activity::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  opacity: 0.92;
}

.xk-global-header-activity::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 68%);
  opacity: 0.78;
  filter: blur(6px);
  animation: xk-header-spinner-pulse 1.6s ease-in-out infinite;
}

.xk-global-header-activity__icon {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1.8px solid color-mix(in srgb, var(--sem-info, #60a5fa) 28%, transparent);
  border-top-color: color-mix(in srgb, var(--sem-info, #60a5fa) 82%, #ffffff 12%);
  border-right-color: color-mix(in srgb, var(--sem-success, #34d399) 52%, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
  animation: xkeen-global-spinner 0.82s linear infinite;
}

@keyframes xk-header-spinner-enter {
  from {
    opacity: 0;
    transform: translateY(-2px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes xk-header-spinner-pulse {
  0%, 100% {
    opacity: 0.36;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.06);
  }
}

html[data-theme="light"] .xk-global-header-activity {
  border-color: color-mix(in srgb, var(--header-btn-border, rgba(37, 99, 235, 0.18)) 94%, transparent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.92), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238, 244, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 12px 28px rgba(37, 99, 235, 0.14);
}

html[data-theme="light"] .xk-global-header-activity::after {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.20), transparent 68%);
}

body.panel-page .panel-shell-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.panel-page .panel-shell-summary .xk-global-header-activity {
  margin-right: 0;
}

.mihomo-generator-page .generator-header-actions-row .header-actions,
.xk-backups-page .header-actions,
body.devtools-page .header-actions,
body:not(.panel-page) > .container .header-actions {
  align-items: center;
}

/* Global XKeen overlay spinner */
#global-xkeen-spinner {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#global-xkeen-spinner.is-active {
  display: flex;
}

.global-spinner-box {
  min-width: 260px;
  max-width: 320px;
  padding: 16px 20px;
  background: #020617;
  border-radius: 12px;
  border: 1px solid #1f2937;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.global-spinner-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(34, 197, 94, 0.35);
  border-top-color: #22c55e;
  animation: xkeen-global-spinner 0.8s linear infinite;
}

.global-spinner-text {
  font-size: calc(14px * var(--xk-font-scale));
  color: #e5e7eb;
  text-align: center;
}



.modal-body-logs {
  font-family: monospace;
  font-size: calc(12px * var(--xk-font-scale));
}

.log-line {
  line-height: 1.35;
  white-space: pre-wrap;
}
.log-info {
  color: #60a5fa;
}
.log-warn {
  color: #facc15;
}
.log-error {
  color: var(--sem-error, #f87171);
}
.log-fatal {
  color: #fb7185;
  font-weight: 600;
}
.log-debug {
  color: #9ca3af;
}

/* Дополнительная подсветка для Live Xray logs */
.log-route {
  font-weight: 500;
}

.log-route-tproxy-vless {
  color: var(--log-route-tproxy-vless, #22c55e); /* tproxy -> vless-reality */
}

.log-route-redirect-vless {
  color: var(--log-route-redirect-vless, #38bdf8); /* redirect -> vless-reality */
}

.log-route-redirect-direct {
  color: var(--log-route-redirect-direct, #a855f7); /* redirect -> direct */
}

.log-route-reject {
  color: var(--log-route-reject, #f97373); /* reject */
  font-weight: 600;
}


.log-ts {
  color: var(--log-ts, #94a3b8); /* timestamp */
}

.log-link {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  border-radius: 3px;
  padding: 0 1px;
}

.log-link:visited {
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
}

html[data-theme="dark"] .log-link:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .log-link:hover {
  text-decoration: underline;
  background: rgba(0, 0, 0, 0.05);
}


.log-ip {
  color: var(--log-ip, #fde68a); /* IP */
}

.log-domain {
  color: var(--log-domain, #6ee7b7); /* domain */
}

.log-proto {
  color: var(--log-proto, #7dd3fc); /* protocol/transport */
  font-weight: 500;
}

.log-port {
  color: var(--log-port, #fb923c); /* port */
  font-weight: 500;
}

.log-uuid {
  color: var(--log-uuid, #f472b6); /* uuid/id */
}

.log-email {
  color: var(--log-email, #22d3ee); /* email */
}

.log-inbound {
  color: var(--log-inbound, #818cf8); /* inbound tag */
}

.log-outbound {
  color: var(--log-outbound, #f0abfc); /* outbound tag */
}

.log-method {
  color: var(--log-method, #fbbf24); /* HTTP method */
  font-weight: 600;
}

.log-path {
  color: var(--log-path, #bef264); /* path/uri/url */
}

.log-sni {
  color: var(--log-sni, #5eead4); /* sni/serverName */
}

.log-alpn {
  color: var(--log-alpn, #93c5fd); /* alpn */
}

/* === Темы: тёмная / светлая === */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Плавающая кнопка переключения темы (видна на всех страницах) */
.theme-toggle-floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

/* Стиль кнопки в тёмной теме */
html[data-theme="dark"] .theme-toggle-btn {
  background: rgba(15, 23, 42, 0.9);
  border-color: #1f2937;
  color: #e5e7eb;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.7);
}

/* Стиль кнопки в светлой теме в духе macOS */
html[data-theme="light"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.8);
  border-color: #d1d5db;
  color: #111827;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
}

.theme-toggle-btn:active {
  transform: translateY(0);
}

.theme-toggle-icon {
  font-size: calc(14px * var(--xk-font-scale));
}

.theme-toggle-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

body.panel-page .theme-toggle-btn.xk-header-btn-theme,
body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme,
.mihomo-generator-page .theme-toggle-btn.xk-header-btn-theme,
body.devtools-page .theme-toggle-btn.dt-header-btn-theme {
  gap: 8px;
}

body.panel-page .theme-toggle-btn.xk-header-btn-theme .theme-toggle-icon,
body.xk-backups-page .theme-toggle-btn.xk-header-btn-theme .theme-toggle-icon,
.mihomo-generator-page .theme-toggle-btn.xk-header-btn-theme .theme-toggle-icon,
body.devtools-page .theme-toggle-btn.dt-header-btn-theme .theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  flex: 0 0 auto;
}

/* === Светлая тема (маковские оттенки) === */

html[data-theme="light"] body {
  background: #f5f5f7;
  color: #111827;
}

/* Ссылки — синий оттенок как в macOS */
html[data-theme="light"] a {
  color: #0a84ff;
}

html[data-theme="light"] a:hover {
  text-decoration: underline;
}

/* Карточки / панели */
html[data-theme="light"] .card {
  background: #ffffff;
  border-color: #d1d5db;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* Таблицы */
html[data-theme="light"] table {
  background: #ffffff;
}

html[data-theme="light"] th {
  background: #f3f4f6;
  border-bottom-color: #e5e7eb;
}

html[data-theme="light"] td {
  border-bottom-color: #e5e7eb;
}

/* Базовые кнопки */
html[data-theme="light"] button {
  background: var(--editor-btn-bg, #ffffff);
  border-color: var(--editor-btn-border, #d1d5db);
  color: var(--editor-btn-text, #111827);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] button:disabled {
  background: linear-gradient(180deg, #edf3fb, #e3eaf4);
  color: #6f8097;
  border-color: rgba(148, 163, 184, 0.28);
  opacity: 0.82;
  box-shadow: none;
}

/* Поля ввода и текстовые области */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .xkeen-textarea {
  background-color: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

/* Лампочка статуса */
html[data-theme="light"] .service-status-lamp[data-state="running"] {
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

html[data-theme="light"] .service-status-lamp[data-state="stopped"],
html[data-theme="light"] .service-status-lamp[data-state="error"] {
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}

/* Модальные окна */
html[data-theme="light"] .modal {
  background: #ffffff;
  border-color: #d1d5db;
}

/* === Дополнительные правки светлой темы: более тёмный текст и светлый редактор === */

/* Чуть более контрастный «вторичный» текст */
html[data-theme="light"] .card p,
html[data-theme="light"] .hint,
html[data-theme="light"] .edit-toggle,
html[data-theme="light"] .command-item-desc {
  color: #4b5563;
}

/* YAML-просмотр и CodeMirror в светлой теме */
html[data-theme="light"] .xkeen-textarea,
html[data-theme="light"] .CodeMirror {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

/* Сделать тему material-darker светлой, когда включена светлая тема панели */
html[data-theme="light"] .cm-s-material-darker.CodeMirror {
  background: #f9fafb;
  color: #111827;
}

html[data-theme="light"] .cm-s-material-darker .CodeMirror-gutters {
  background: #f3f4f6;
  border-right: 1px solid #e5e7eb;
}

html[data-theme="light"] .cm-s-material-darker .CodeMirror-cursor {
  border-left: 1px solid #111827;
}

/* Нейтральные цвета подсветки для YAML */
html[data-theme="light"] .cm-s-material-darker .cm-comment {
  color: #6b7280;
}

html[data-theme="light"] .cm-s-material-darker .cm-keyword {
  color: #7c3aed;
}

html[data-theme="light"] .cm-s-material-darker .cm-atom,
html[data-theme="light"] .cm-s-material-darker .cm-number,
html[data-theme="light"] .cm-s-material-darker .cm-variable-2,
html[data-theme="light"] .cm-s-material-darker .cm-variable-3,
html[data-theme="light"] .cm-s-material-darker .cm-tag,
html[data-theme="light"] .cm-s-material-darker .cm-attribute,
html[data-theme="light"] .cm-s-material-darker .cm-qualifier {
  /* Более тёмный и контрастный зелёный для YAML-маркеров (*, & и т.п.) */
  color: #047857;
}

html[data-theme="light"] .cm-s-material-darker .cm-string {
  color: #b91c1c;
}

html[data-theme="light"] .cm-s-material-darker .cm-def,
html[data-theme="light"] .cm-s-material-darker .cm-property,
html[data-theme="light"] .cm-s-material-darker .cm-variable {
  color: #1f2937;
}

/* Выделение текста в редакторе на светлой теме */
html[data-theme="light"] .cm-s-material-darker .CodeMirror-selected,
html[data-theme="light"] .cm-s-material-darker .CodeMirror-line::selection,
html[data-theme="light"] .cm-s-material-darker .CodeMirror-line > span::selection,
html[data-theme="light"] .cm-s-material-darker .CodeMirror-line > span > span::selection {
  background: rgba(148, 163, 184, 0.35) !important;
}

/* Light theme: softer selection (avoid "dirty" dark blocks) */
html[data-theme="light"] .xkeen-cm .CodeMirror-selected,
html[data-theme="light"] .xkeen-cm .CodeMirror-line::selection,
html[data-theme="light"] .xkeen-cm .CodeMirror-line > span::selection,
html[data-theme="light"] .xkeen-cm .CodeMirror-line > span > span::selection {
  background: rgba(10, 132, 255, 0.22) !important;
}
html[data-theme="light"] .xkeen-cm ::selection {
  background: rgba(10, 132, 255, 0.22) !important;
}

/* -------------------------------------------------------------------------
   Routing templates (Xray): modal UI
   ------------------------------------------------------------------------- */

.xk-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 35%, transparent);
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 10%, transparent);
  color: var(--text-muted, #94a3b8);
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.routing-template-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: stretch;
  min-height: 0;
}

@media (max-width: 720px) {
  .routing-template-grid {
    grid-template-columns: 1fr;
  }
}

.routing-template-list {
  width: auto;
  min-width: 0;
  max-height: 440px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 18%, transparent);
  background: color-mix(in srgb, var(--panel-bg, #0a0f1a) 78%, transparent);
}

.routing-template-item {
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 25%, transparent);
  background: color-mix(in srgb, var(--card-bg, #0b1220) 88%, transparent);
  color: var(--text, #e5e7eb);
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.12s ease, background 0.12s ease;
}

.routing-template-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 35%, transparent);
}

.routing-template-item.active {
  border-color: var(--accent, #60a5fa);
  background: color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent);
}

.routing-template-item-title {
  font-weight: 800;
  font-size: calc(14px * var(--xk-font-scale));
  line-height: 1.2;
}

.routing-template-item-desc {
  margin-top: 6px;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--text-muted, #94a3b8);
  line-height: 1.3;
}

.routing-template-empty {
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--text-muted, #94a3b8) 40%, transparent);
  color: var(--text-muted, #94a3b8);
  background: color-mix(in srgb, var(--card-bg, #0b1220) 70%, transparent);
}

.routing-template-empty-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
  color: var(--text, #e5e7eb);
}

.routing-template-empty-sub {
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
}

.routing-template-empty code {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 25%, transparent);
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 10%, transparent);
  color: var(--text, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(11px * var(--xk-font-scale));
}

.routing-template-preview {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 0;
}

.routing-template-preview-header {
  margin-bottom: 8px;
}

.routing-template-preview-title {
  font-weight: 900;
  font-size: calc(14px * var(--xk-font-scale));
}

.routing-template-preview-desc {
  margin-top: 4px;
  color: var(--text-muted, #94a3b8);
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
}

.routing-template-preview-code {
  flex: 1 1 auto;
  margin: 0;
  max-height: 440px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
  background: color-mix(in srgb, var(--panel-bg, #0a0f1a) 90%, transparent);
  color: var(--text, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  white-space: pre;
}

/* When preview is rendered via CodeMirror (textarea -> CodeMirror wrapper) */
.routing-template-preview-cm {
  flex: 1 1 auto;
  height: 440px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
}

.routing-template-preview-cm .CodeMirror-scroll {
  max-height: 440px;
}

/* Routing templates: Monaco containers (preview + edit) */
.routing-template-preview-monaco {
  flex: 1 1 auto;
  height: 440px;
  min-height: 440px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
  box-shadow: none;
}

.routing-template-edit-monaco {
  width: 100%;
  min-height: 260px;
  height: 360px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
  box-shadow: none;
}

html[data-theme="light"] .routing-template-preview-monaco,
html[data-theme="light"] .routing-template-edit-monaco {
  border-color: #e5e7eb;
}


/* Snapshot preview modal (read-only CodeMirror) */
/* Snapshot preview modal: keep a single inner scroll like other mini editors */
#xray-snapshot-modal .modal-content {
  height: 80vh;
}

#xray-snapshot-modal .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#xray-snapshot-modal .modal-body > :first-child,
#xray-snapshot-modal #xray-snapshot-status {
  flex: 0 0 auto;
}

#xray-snapshot-modal #xray-snapshot-preview {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: 100%;
}

.xray-snapshot-preview-cm {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
}

.xray-snapshot-preview-cm .CodeMirror-scroll {
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
}

#xray-snapshot-modal .xkeen-cm6-host.xray-snapshot-preview-cm {
  overflow: hidden;
}

#xray-snapshot-modal .xkeen-cm6-host.xray-snapshot-preview-cm .cm-editor,
#xray-snapshot-modal .xkeen-cm6-host.xray-snapshot-preview-cm .cm-scroller {
  min-height: 0 !important;
  height: 100% !important;
}

/* Snapshot preview modal (read-only Monaco) */
.xray-snapshot-preview-monaco {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
  box-shadow: none;
}

html[data-theme="light"] .xray-snapshot-preview-monaco {
  border-color: #e5e7eb;
}

html[data-theme="light"] .routing-template-preview-cm {
  border-color: #e5e7eb;
}

/* Light theme tweaks */
html[data-theme="light"] .routing-template-item {
  background: #ffffff;
  color: #0f172a;
  border-color: #e5e7eb;
}

html[data-theme="light"] .routing-template-list {
  background: #f8fafc;
  border-color: #e5e7eb;
}

html[data-theme="light"] .routing-template-item-desc,
html[data-theme="light"] .routing-template-preview-desc,
html[data-theme="light"] .routing-template-empty {
  color: #64748b;
}

html[data-theme="light"] .routing-template-empty {
  background: #ffffff;
  border-color: #e5e7eb;
}

html[data-theme="light"] .routing-template-empty-title {
  color: #0f172a;
}

html[data-theme="light"] .routing-template-empty code {
  background: #f1f5f9;
  border-color: #e5e7eb;
  color: #0f172a;
}

html[data-theme="light"] .routing-template-item.active {
  background: rgba(10, 132, 255, 0.12);
}

html[data-theme="light"] .routing-template-preview-code {
  background: #f8fafc;
  color: #0f172a;
  border-color: #e5e7eb;
}

/* Routing templates: save user template modal */
.routing-template-save-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routing-template-save-form label{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-template-save-form .hint-label{
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  padding-left: 4px;
}

.routing-template-save-textarea{
  border-radius: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
  min-height: 74px;
}




/* Routing templates: edit user template modal */
.routing-template-edit-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routing-template-edit-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px){
  .routing-template-edit-row{
    grid-template-columns: 1fr;
  }
}

.routing-template-edit-textarea{
  width: 100%;
  min-height: 260px;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
  background: color-mix(in srgb, var(--panel-bg, #0a0f1a) 90%, transparent);
  color: var(--text, #e5e7eb);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.4;
  resize: vertical;
}

/* When template editor is rendered via CodeMirror */
.routing-template-edit-cm{
  width: 100%;
  min-height: 260px;
  height: 360px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text-muted, #94a3b8) 22%, transparent);
}

html[data-theme="light"] .routing-template-edit-cm{
  border-color: #e5e7eb;
}

/* Routing templates: keep preview/edit editors stretched with the resizable modal. */
#routing-template-modal .modal-content,
#routing-template-edit-modal .modal-content {
  height: 80vh;
}

#routing-template-modal .modal-body,
#routing-template-edit-modal .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#routing-template-modal .modal-body > .modal-description,
#routing-template-modal #routing-template-status,
#routing-template-edit-modal .modal-body > .modal-description,
#routing-template-edit-modal #routing-template-edit-status {
  flex: 0 0 auto;
}

#routing-template-modal .routing-template-grid {
  flex: 1 1 auto;
  min-height: 0;
}

#routing-template-modal .routing-template-list,
#routing-template-modal .routing-template-preview {
  min-height: 0;
  height: 100%;
}

#routing-template-modal .routing-template-list {
  max-height: none;
}

#routing-template-modal .routing-template-preview-header {
  flex: 0 0 auto;
}

#routing-template-modal .routing-template-preview-code,
#routing-template-modal .routing-template-preview-cm,
#routing-template-modal .routing-template-preview-monaco,
#routing-template-modal .xkeen-cm6-host.routing-template-preview-cm {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
}

#routing-template-modal .routing-template-preview-cm .CodeMirror-scroll {
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
}

#routing-template-modal .xkeen-cm6-host.routing-template-preview-cm {
  overflow: hidden;
}

#routing-template-modal .xkeen-cm6-host.routing-template-preview-cm .cm-editor,
#routing-template-modal .xkeen-cm6-host.routing-template-preview-cm .cm-scroller {
  min-height: 0 !important;
  height: 100% !important;
}

#routing-template-edit-modal .routing-template-edit-form {
  flex: 1 1 auto;
  min-height: 0;
}

#routing-template-edit-modal .routing-template-edit-form > label:last-of-type {
  flex: 1 1 auto;
  min-height: 0;
}

#routing-template-edit-modal .routing-template-edit-form > label:last-of-type > .routing-template-edit-textarea,
#routing-template-edit-modal .routing-template-edit-form > label:last-of-type > .routing-template-edit-cm,
#routing-template-edit-modal .routing-template-edit-form > label:last-of-type > .routing-template-edit-monaco,
#routing-template-edit-modal .xkeen-cm6-host.routing-template-edit-cm {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
}

#routing-template-edit-modal .routing-template-edit-form > label:last-of-type > .routing-template-edit-textarea {
  resize: none;
}

#routing-template-edit-modal .routing-template-edit-cm .CodeMirror-scroll {
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
}

#routing-template-edit-modal .xkeen-cm6-host.routing-template-edit-cm {
  overflow: hidden;
}

#routing-template-edit-modal .xkeen-cm6-host.routing-template-edit-cm .cm-editor,
#routing-template-edit-modal .xkeen-cm6-host.routing-template-edit-cm .cm-scroller {
  min-height: 0 !important;
  height: 100% !important;
}

html[data-theme="light"] .routing-template-edit-textarea{
  background: #f8fafc;
  color: #0f172a;
  border-color: #e5e7eb;
}

.routing-template-edit-form label{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Светлая тема: make CodeMirror cosmetics clearly visible */
html[data-theme="light"] .cm-s-material-darker .cm-matchhighlight,
html[data-theme="light"] .xkeen-cm .cm-matchhighlight {
  background: rgba(59, 130, 246, 0.14);
}

html[data-theme="light"] .cm-s-material-darker .cm-trailingspace,
html[data-theme="light"] .xkeen-cm .cm-trailingspace {
  background: rgba(220, 38, 38, 0.16);
}

html[data-theme="light"] .cm-s-material-darker .CodeMirror-ruler,
html[data-theme="light"] .xkeen-cm .CodeMirror-ruler {
  border-left-color: rgba(17, 24, 39, 0.12);
}


/* === Светлая тема: читаемые «Команды» и модальные окна === */

/* Дополнительная читаемость премиальной карточки «Команды» в светлой теме */
html[data-theme="light"] #view-commands .commands-header h2 {
  color: #0f172a;
}

html[data-theme="light"] #view-commands .command-group-title {
  color: #64748b;
}

html[data-theme="light"] #view-commands .command-item {
  color: #0f172a;
}

html[data-theme="light"] #view-commands .command-item-desc {
  color: #475569;
}

/* Модальные окна в светлой теме */
html[data-theme="light"] .modal {
  background: rgba(15, 23, 42, 0.35);
}

html[data-theme="light"] .modal-content {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .modal-header {
  border-bottom-color: #e5e7eb;
}

html[data-theme="light"] .modal-close {
  color: #6b7280;
}

html[data-theme="light"] .modal-close:hover {
  color: #111827;
}

html[data-theme="light"] .modal-body-logs {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  color: #111827;
}


/* Light theme: make CodeMirror scroll area background light */
html[data-theme="light"] .CodeMirror-scroll {
  background-color: #f9fafb;
}


/* === Светлая тема: логи и JSON-редактор === */

/* Live логи Xray, перезапуск и нижний журнал */
html[data-theme="light"] .log-block {
  background: #f9fafb;
  color: #111827;
  border-color: #e5e7eb;
}

/* Log level colors are controlled via semantic vars (--sem-*) */

/* Терминал (нижний журнал в разделе Команды) */
html[data-theme="light"] .terminal-output {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.998), color-mix(in srgb, var(--modal-body-bg, #eef4ff) 72%, white 28%));
  color: var(--text, #111827);
  border-color: color-mix(in srgb, var(--modal-border, #d1d5db) 84%, var(--sem-info, #2563eb) 16%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 22px rgba(59, 91, 154, 0.06);
}

html[data-theme="light"] .terminal-output:has(.xterm) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.999), color-mix(in srgb, var(--modal-body-bg, #eef4ff) 70%, white 30%));
}


/* Поля фильтра / выбора в блоке Live логи Xray */
html[data-theme="light"] .xray-log-filter,
html[data-theme="light"] .xray-log-select {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
  border-color: var(--border, #d1d5db);
}


/* DevTools logging: pill fields in light theme */
html[data-theme="light"] .dt-pill-field {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

/* DevTools theme editor */
html[data-theme="light"] .dt-theme-color {
  border-color: #d1d5db;
}

/* DevTools Logs: compact controls in light theme */
html[data-theme="light"] .dt-log-menu-panel{
  background: var(--card-bg, #ffffff);
  border-color: var(--border, #d1d5db);
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.12);
}


html[data-theme="light"] .dt-log-lines-input{
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
  border-color: var(--border, #d1d5db);
}


html[data-theme="light"] .dt-switch,
html[data-theme="light"] .dt-log-interval,
html[data-theme="light"] .dt-log-stats{
  background: color-mix(in srgb, var(--card-bg, #ffffff) 92%, transparent);
  border-color: var(--border, #d1d5db);
  color: var(--text, #111827);
}


html[data-theme="light"] .dt-switch-slider{
  background: color-mix(in srgb, var(--border, #e5e7eb) 85%, transparent);
  border-color: var(--border, #d1d5db);
}


html[data-theme="light"] .dt-switch-slider::after{
  background: var(--card-bg, #ffffff);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}


html[data-theme="light"] .dt-switch input:checked + .dt-switch-slider{
  background: var(--fm-row-selected-bg, color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 18%, transparent));
  border-color: var(--header-tab-active-bg, #2563eb);
}


/* Stage 5: Include/Exclude token fields in light theme */
html[data-theme="light"] .dt-token-field {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
  border-color: var(--border, #d1d5db);
}


html[data-theme="light"] .dt-token-entry {
  color: var(--text, #111827);
}


html[data-theme="light"] .dt-token-chip {
  background: color-mix(in srgb, var(--card-bg, #ffffff) 90%, transparent);
  border-color: var(--border, #e5e7eb);
  color: var(--text, #111827);
}


html[data-theme="light"] .dt-token-chip .dt-token-x {
  color: var(--muted, #6b7280);
}


/* Модальный JSON-редактор 03_inbounds.json / 04_outbounds.json */
html[data-theme="light"] #json-editor-textarea {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}

/* Светлая тема: мини-терминал в разделе Команды */
html[data-theme="light"] .terminal-window {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--sem-info, #2563eb) 10%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--modal-bg, #ffffff) 98%, white 2%), color-mix(in srgb, var(--modal-body-bg, #eef4ff) 74%, white 26%));
  border-color: color-mix(in srgb, var(--modal-border, #e5e7eb) 82%, var(--sem-info, #2563eb) 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 20px 40px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .terminal-window::after {
  border-right-color: rgba(63, 111, 203, 0.22);
  border-bottom-color: rgba(63, 111, 203, 0.22);
}


html[data-theme="light"] .terminal-command {
  background: var(--card-bg, #f9fafb);
  color: var(--text, #111827);
  border-color: var(--border, #e5e7eb);
}


html[data-theme="light"] .terminal-search-input {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
  border-color: var(--border, #d1d5db);
}


html[data-theme="light"] .terminal-search-btn {
  background: var(--header-btn-bg, rgba(248, 250, 252, 0.9));
  color: var(--fm-btn-text, var(--header-btn-text, #111827));
  border-color: var(--header-btn-border, rgba(15, 23, 42, 0.16));
}


html[data-theme="light"] .terminal-search-btn:hover {
  background: var(--header-btn-hover-bg, rgba(226, 232, 240, 0.9));
}


html[data-theme="light"] .terminal-input {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
  border-color: var(--border, #d1d5db);
}

html[data-theme="light"] .terminal-window .xterm,
html[data-theme="light"] .terminal-window .xterm .xterm-screen,
html[data-theme="light"] .terminal-window .xterm .xterm-viewport {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.998), color-mix(in srgb, var(--modal-body-bg, #eef4ff) 70%, white 30%)) !important;
  color: var(--text, #111827);
}

html[data-theme="light"] .terminal-window .xterm .xterm-viewport {
  scrollbar-color: rgba(100, 116, 139, 0.56) rgba(226, 232, 240, 0.78);
  scrollbar-width: thin;
}

html[data-theme="light"] .terminal-window .xterm .xterm-viewport::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="light"] .terminal-window .xterm .xterm-viewport::-webkit-scrollbar-track,
html[data-theme="light"] .terminal-window .xterm .xterm-viewport::-webkit-scrollbar-corner {
  background: rgba(226, 232, 240, 0.78);
}

html[data-theme="light"] .terminal-window .xterm .xterm-viewport::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.52);
  border-radius: 10px;
  border: 2px solid rgba(226, 232, 240, 0.78);
}

html[data-theme="light"] .terminal-window .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.62);
}

html[data-theme="light"] .terminal-window .xterm .composition-view {
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(59, 91, 154, 0.10);
}


html[data-theme="light"] .terminal-tool-btn {
  background: var(--header-btn-bg, rgba(248, 250, 252, 0.9));
  color: var(--fm-btn-text, var(--header-btn-text, #111827));
  border-color: var(--header-btn-border, rgba(15, 23, 42, 0.16));
}


html[data-theme="light"] .terminal-tool-btn:hover {
  background: var(--header-btn-hover-bg, rgba(226, 232, 240, 0.9));
}

html[data-theme="light"] .terminal-uptime,
html[data-theme="light"] .terminal-search-counter,
html[data-theme="light"] .terminal-footer-label,
html[data-theme="light"] .terminal-history-hint,
html[data-theme="light"] .terminal-menu-title {
  color: #5f728c;
  opacity: 1;
}

html[data-theme="light"] .xterm-find-active-result-decoration {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.24) inset;
}


/* Светлая тема: режим работы inbounds */
html[data-theme="light"] .mode-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}

html[data-theme="light"] .mode-item strong {
  color: #111827;
}

html[data-theme="light"] .mode-item small {
  color: #4b5563;
}

html[data-theme="light"] .toggle {
  color: #4b5563;
}

/* Светлая тема: VLESS URL (04_outbounds.json) */
html[data-theme="light"] #outbounds-url {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

html[data-theme="light"] .xk-entware-mark-toggle {
  background: #f8fafc;
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.28);
}

html[data-theme="light"] .xk-entware-mark-toggle:hover {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.48);
  color: #1e40af;
}

html[data-theme="light"] .xk-entware-mark-toggle.is-active {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
  border-color: rgba(13, 148, 136, 0.60);
}

html[data-theme="light"] .outbounds-parse-box {
  background: rgba(255, 255, 255, 0.9);
  border-color: #e5e7eb;
}

html[data-theme="light"] .outbounds-fragment-summary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
  border-color: rgba(59, 130, 246, 0.20);
}

html[data-theme="light"] .outbounds-fragment-summary-title,
html[data-theme="light"] .outbounds-fragment-tags code,
html[data-theme="light"] .outbounds-fragment-more,
html[data-theme="light"] .outbounds-fragment-empty {
  color: #111827;
}

html[data-theme="light"] .outbounds-fragment-summary-file,
html[data-theme="light"] .outbounds-fragment-summary-meta {
  color: #475569;
}

html[data-theme="light"] .outbounds-fragment-tags code,
html[data-theme="light"] .outbounds-fragment-more,
html[data-theme="light"] .outbounds-fragment-empty {
  background: rgba(255, 255, 255, 0.86);
  border-color: #dbe3ef;
}

html[data-theme="light"] .outbounds-badge {
  background: rgba(255, 255, 255, 0.85);
  border-color: #e5e7eb;
  color: #111827;
}

html[data-theme="light"] .outbounds-kv-row {
  background: rgba(249, 250, 251, 0.95);
  border-color: #e5e7eb;
}

html[data-theme="light"] .outbounds-kv-row .k {
  color: #4b5563;
}

html[data-theme="light"] .outbounds-kv-row .v {
  color: #111827;
}


/* Светлая тема: кнопка переключения ядра и бейдж времени загрузки */
html[data-theme="light"] .service-core-text {
  background: rgba(255, 255, 255, 0.9);
  border-color: #d1d5db;
  color: #111827;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .service-core-text.has-core {
  border-color: var(--accent, #0a84ff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #0a84ff) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #0a84ff) 10%, var(--header-btn-bg, #ffffff) 90%);
}

html[data-theme="light"] .last-load-badge {
  background: color-mix(in srgb, var(--bg, #f5f5f7) 70%, var(--card-bg, #ffffff) 30%);
  border-color: var(--border, #d1d5db);
  color: var(--muted, #4b5563);
}

/* Светлая тема: ховер строк таблиц (в т.ч. профили/бэкапы Mihomo) */
html[data-theme="light"] tbody tr:hover {
  background: #f3f4f6;
}



/* Подсветка текущей строки в редакторах CodeMirror (как в современных IDE) */
.cm-s-material-darker .CodeMirror-activeline-background,
.xkeen-cm .CodeMirror-activeline-background {
  background: #111827;
}


/* Light theme: active line highlight must be light (avoid dark bars) */
html[data-theme="light"] .xkeen-cm .CodeMirror-activeline-background,
html[data-theme="light"] .cm-s-material-darker .CodeMirror-activeline-background,
html[data-theme="light"] .cm-s-default .CodeMirror-activeline-background {
  background: rgba(15, 23, 42, 0.06);
}



/* Indent guides rendered via overlay (spaces & tabs at line start). */
.xkeen-cm .cm-indent-guide {
  position: relative;
}

.xkeen-cm .cm-indent-guide::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -2px;
  border-left: 1px solid rgba(55, 65, 81, 0.8);
  opacity: 0.9;
}
/* Вертикальные направляющие отступов (indent guides) для JSON/YAML редакторов */
.xkeen-cm .CodeMirror-code .cm-tab {
  position: relative;
}

.xkeen-cm .CodeMirror-code .cm-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -2px;
  border-left: 1px solid rgba(55, 65, 81, 0.85);
  opacity: 0.7;
}


/* Light theme: indent guides should be subtle */
html[data-theme="light"] .xkeen-cm .cm-indent-guide::before,
html[data-theme="light"] .xkeen-cm .CodeMirror-code .cm-tab::before {
  border-left-color: rgba(17, 24, 39, 0.12);
  opacity: 0.7;
}





html[data-theme="light"] .terminal-uptime {
  color: #5f728c;
}



/* Terminal: Xray logs mini-menu (runs tail -f inside PTY) */
.terminal-xraylogs-menu{
  position:absolute;
  top:34px;
  right:48px;
  z-index:85;
  background:#020617;
  border:1px solid #334155;
  border-radius:12px;
  padding:10px;
  box-shadow:0 18px 50px rgba(15,23,42,.8);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:220px;
}
.terminal-xraylogs-menu.hidden{ display:none; }

/* Terminal: grouped menus (overflow / view / buffer) */
.terminal-overflow-menu{
  position:absolute;
  top:34px;
  right:8px;
  z-index:90;
  background:#020617;
  border:1px solid #334155;
  border-radius:12px;
  padding:10px;
  box-shadow:0 18px 50px rgba(15,23,42,.8);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:240px;
  max-width:340px;
  /* allow scrolling when the menu is taller than the terminal modal */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.terminal-overflow-menu.hidden{ display:none; }

.terminal-menu-section{ display:flex; flex-direction:column; gap:6px; }
.terminal-menu-title{
  font-size: calc(11px * var(--xk-font-scale));
  color:#9ca3af;
  font-weight:700;
  letter-spacing:.02em;
  user-select:none;
  margin-bottom:2px;
}

/* Terminal: overflow menu collapsible sections */
.terminal-menu-section[data-collapsible="1"] > .terminal-menu-title{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 6px;
  border-radius:10px;
}
.terminal-menu-section[data-collapsible="1"] > .terminal-menu-title:hover{
  background: rgba(148,163,184,0.08);
  color:#cbd5e1;
}
.terminal-menu-section[data-collapsible="1"] > .terminal-menu-title:focus{
  outline:2px solid rgba(59,130,246,0.55);
  outline-offset:2px;
}
.terminal-menu-section[data-collapsible="1"] > .terminal-menu-title::after{
  content:"▾";
  font-size: calc(12px * var(--xk-font-scale));
  color:#94a3b8;
}
.terminal-menu-section[data-collapsible="1"].collapsed > .terminal-menu-title::after{
  content:"▸";
}
.terminal-menu-section[data-collapsible="1"].collapsed > :not(.terminal-menu-title){
  display:none;
}

.terminal-menu-title-inline{ margin-top:2px; }
.terminal-menu-sep{ height:1px; background:rgba(148,163,184,0.18); margin:2px 0; }

/* Menus anchored to footer groups */
.terminal-footer-group-view,
.terminal-footer-group-buffer{ position: relative; }

.terminal-view-menu,
.terminal-buffer-menu{
  position:absolute;
  bottom:34px;
  left:0;
  z-index:90;
  background:#020617;
  border:1px solid #334155;
  border-radius:12px;
  padding:10px;
  box-shadow:0 18px 50px rgba(15,23,42,.8);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
  max-width:320px;
  /* these menus can also grow depending on options */
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.terminal-view-menu.hidden,
.terminal-buffer-menu.hidden{ display:none; }

/* Menu item look: reuse terminal-tool-btn but make it block-like inside menus */
.terminal-overflow-menu .terminal-tool-btn,
.terminal-view-menu .terminal-tool-btn,
.terminal-buffer-menu .terminal-tool-btn{
  width:100%;
  text-align:left;
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.2;
}

/* Nested Xray menu is shown inline inside the overflow menu */
.terminal-overflow-menu .terminal-xraylogs-menu{
  position: static;
  top:auto;
  right:auto;
  z-index:auto;
  box-shadow:none;
  min-width: unset;
}


.terminal-xraylogs-row{ display:flex; align-items:center; gap:8px; }

/* Xray logs controls: keep them compact (icon buttons) */
.terminal-xraylogs-actions{ display:flex; gap:8px; justify-content:flex-start; }
.terminal-xraylogs-actions > button{ flex:0 0 auto; }

/*
  IMPORTANT:
  Inside .terminal-overflow-menu we style .terminal-tool-btn as full-width "menu items".
  Xray log buttons are *not* menu items; they must stay compact.
  Add a higher-specificity override so icon buttons don't stretch.
*/
.terminal-overflow-menu .terminal-xraylogs-actions .terminal-tool-btn{
  width:34px;
  height:28px;
  text-align:center;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0; /* icon buttons manage their own sizing */
}

.terminal-xraylogs-iconbtn{
  width:34px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: calc(13px * var(--xk-font-scale));
  line-height:1;
}

.terminal-signals-item{
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:inherit;
  cursor:pointer;
}
.terminal-signals-item:hover{
  background:rgba(255,255,255,.08);
}



/* Terminal: Quick commands menu (footer) */
.terminal-footer-group-commands{ position: relative; }

.terminal-commands-menu{
  position:absolute;
  bottom: 34px;
  right: 0;
  z-index: 90;
  background: var(--modal-bg, #020617);
  border: 1px solid var(--modal-border, #334155);
  border-radius:12px;
  padding:10px;
  box-shadow:0 18px 50px rgba(15,23,42,.8);
  min-width: 280px;
  max-width: 360px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.terminal-commands-menu.hidden{ display:none; }

.terminal-commands-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.terminal-commands-title{
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--text, #cbd5e1);
  font-weight: 700;
  user-select: none;
}

.terminal-commands-mode{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.terminal-commands-mode-btn{
  padding:6px 10px;
  border-radius:9999px;
  border: 1px solid var(--border, rgba(255,255,255,.10));
  background: var(--header-btn-bg, rgba(255,255,255,.04));
  color:inherit;
  cursor:pointer;
  font-size: calc(12px * var(--xk-font-scale));
}
.terminal-commands-mode-btn:hover{ background: var(--header-btn-hover-bg, rgba(255,255,255,.08)); }
.terminal-commands-mode-btn.is-active{
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 35%, transparent);
  border-color: var(--header-tab-active-bg, #2563eb);
}

.terminal-commands-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height: 260px;
  overflow:auto;
  padding-right: 2px;
}

.terminal-commands-item{
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:10px;
  border: 1px solid var(--border, rgba(255,255,255,.10));
  background: color-mix(in srgb, var(--card-bg, #020617) 92%, transparent);
  color:inherit;
  cursor:pointer;
}
.terminal-commands-item:hover{ background: color-mix(in srgb, var(--card-bg, #020617) 85%, transparent); }

.terminal-commands-item-label{
  display:block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
}

.terminal-commands-item-desc{
  display:block;
  margin-top: 2px;
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
}

.terminal-commands-hint{
  font-size: calc(10px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  opacity: .95;
}

html[data-theme="light"] .terminal-overflow-menu,
html[data-theme="light"] .terminal-view-menu,
html[data-theme="light"] .terminal-buffer-menu,
html[data-theme="light"] .terminal-xraylogs-menu{
  background: var(--modal-bg, #ffffff);
  border-color: var(--modal-border, rgba(15, 23, 42, 0.16));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .terminal-menu-sep{
  background: rgba(148, 163, 184, 0.24);
}

html[data-theme="light"] .terminal-menu-section[data-collapsible="1"] > .terminal-menu-title:hover{
  background: rgba(63, 111, 203, 0.08);
  color:#23344d;
}

html[data-theme="light"] .terminal-menu-section[data-collapsible="1"] > .terminal-menu-title::after{
  color:#70839d;
}

html[data-theme="light"] .terminal-overflow-menu .terminal-tool-btn,
html[data-theme="light"] .terminal-view-menu .terminal-tool-btn,
html[data-theme="light"] .terminal-buffer-menu .terminal-tool-btn,
html[data-theme="light"] .terminal-xraylogs-menu .terminal-tool-btn,
html[data-theme="light"] .terminal-signals-item{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 247, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.05), transparent 46%);
  border-color: rgba(172, 188, 214, 0.42);
  color:#1d2b44;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .terminal-overflow-menu .terminal-tool-btn:hover,
html[data-theme="light"] .terminal-view-menu .terminal-tool-btn:hover,
html[data-theme="light"] .terminal-buffer-menu .terminal-tool-btn:hover,
html[data-theme="light"] .terminal-xraylogs-menu .terminal-tool-btn:hover,
html[data-theme="light"] .terminal-signals-item:hover{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(235, 243, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.1), transparent 46%);
  border-color: rgba(59, 130, 246, 0.22);
}

html[data-theme="light"] .terminal-overflow-menu .terminal-tool-btn:disabled,
html[data-theme="light"] .terminal-view-menu .terminal-tool-btn:disabled,
html[data-theme="light"] .terminal-buffer-menu .terminal-tool-btn:disabled,
html[data-theme="light"] .terminal-xraylogs-menu .terminal-tool-btn:disabled,
html[data-theme="light"] .terminal-signals-item:disabled{
  background: linear-gradient(180deg, rgba(236, 242, 250, 0.96), rgba(229, 236, 246, 0.92));
  border-color: rgba(172, 188, 214, 0.34);
  color:#7a8aa0;
  opacity: 0.92;
}

html[data-theme="light"] .terminal-commands-menu{
  background: var(--modal-bg, #ffffff);
  border-color: var(--modal-border, rgba(15,23,42,.15));
  box-shadow:0 18px 50px rgba(15,23,42,.18);
}
html[data-theme="light"] .terminal-commands-title{ color: var(--text, #0f172a); }
html[data-theme="light"] .terminal-commands-mode-btn,
html[data-theme="light"] .terminal-commands-item{
  background: var(--header-btn-bg, rgba(15,23,42,.04));
  border-color: var(--border, rgba(15,23,42,.12));
  color: var(--text, #0f172a);
}
html[data-theme="light"] .terminal-commands-item:hover,
html[data-theme="light"] .terminal-commands-mode-btn:hover{
  background: var(--header-btn-hover-bg, rgba(15,23,42,.08));
}
html[data-theme="light"] .terminal-commands-item-desc,
html[data-theme="light"] .terminal-commands-hint{ color: var(--muted, #475569); }
html[data-theme="light"] .terminal-commands-mode-btn.is-active{
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 14%, transparent);
  border-color: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 35%, transparent);
}
/* Optional semantic button helpers (used in SSH modal) */
.btn-secondary{
  background: var(--editor-btn-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--editor-btn-border, rgba(51,65,85,0.9));
  color: var(--editor-btn-text, #e5e7eb);
}
.btn-primary{
  /* fallback */
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(37,99,235,0.55);
  /* prefer theme-aware */
  background: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 18%, transparent);
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 55%, transparent);
  color: var(--editor-btn-text, #e5e7eb);
}

/* Small square/circle icon button (used in FM connect modal) */
.btn-icon{
  padding: 6px 10px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--xk-font-scale));
  line-height: 1;
}

/* Compact pill button (used in DAT toolbar, etc.) */
.btn-compact{
  padding: 6px 10px;
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1;
  border-radius: 12px;
  white-space: nowrap;
}


/* Legacy alias: keep .xk-tooltip as a marker (older markup).
   Actual tooltip rendering uses the global [data-tooltip] rules above. */
.xk-tooltip{
  position: relative;
}

/* Destructive action button (used in confirm modals) */
.btn-danger{
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.40);
  color: #fecaca;
}
.btn-danger:hover{
  background: rgba(153, 27, 27, 0.55);
}
/* Keep danger buttons "danger" even in active state (override global button:active gradient). */
.btn-danger:active{
  background: rgba(153, 27, 27, 0.70);
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
  transform: translateY(1px) scale(0.99);
}

html[data-theme="light"] .btn-danger{
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.10);
  color: #991b1b;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .btn-danger:hover{
  background: rgba(239, 68, 68, 0.16);
}
html[data-theme="light"] .btn-danger:active{
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.18);
}

/* Highlighted button for PTY terminal */
.btn-interactive-shell{
  background: rgba(249,115,22,0.24);
  border: 1px solid rgba(249,115,22,0.75);
  box-shadow: 0 0 0 2px rgba(249,115,22,0.12);
  color: #ffffff;
  font-weight: 600;
}
.btn-interactive-shell:hover{
  background: rgba(249,115,22,0.34);
}
html[data-theme="light"] .btn-interactive-shell{
  background: rgba(249,115,22,0.20);
  border-color: rgba(249,115,22,0.70);
  color: #0f172a;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.10);
}
html[data-theme="light"] .btn-interactive-shell:hover{
  background: rgba(249,115,22,0.28);
}

/* SSH editor layout */
.ssh-form-grid{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 12px;
  align-items: center;
}
.ssh-form-grid label{
  opacity: 0.9;
  font-size: 0.95rem;
}
.ssh-form-grid input{
  width: 100%;
  box-sizing: border-box;
}

/* SSH profile row selection */
.github-config-row.is-selected{
  border: 1px solid rgba(56,189,248,0.85);
  box-shadow: 0 0 0 2px rgba(56,189,248,0.12);
}

/* Disabled button hint */
button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 520px){
  .ssh-form-grid{
    grid-template-columns: 1fr;
  }
}


/* ----------------------------- File manager (two-panel) ----------------------------- */
.fm-card{
  padding: 14px;
  /* Keep a safe bottom area so footer buttons don't block the resize corners */
  padding-bottom: 34px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Resize is handled by our own bottom-right grip so behavior stays predictable. */
  resize: none;
  overflow: hidden;
  position: relative;
  min-height: 420px;
  height: clamp(420px, 70vh, 760px);
  max-height: 90vh;
  --fm-shift-x: 0px;
  transform: translateX(var(--fm-shift-x));
  width: 100%;
  max-width: none;
}

/*
  File manager has two panels with fixed/min column widths.
  In the default 960px container this can cause a horizontal scrollbar.

  On wide screens we expand the file manager card ~2cm on each side
  (≈ +4cm total) relative to the main container, without affecting the header.
*/

.fm-resize-handle-left,
.fm-resize-handle-right,
.fm-resize-handle-bottom{
  /* Actual draggable area for bottom-corner resize (implemented in JS) */
  position: absolute;
  bottom: 6px;
  width: 22px;
  height: 22px;
  z-index: 3;
  background: transparent;
  touch-action: none;
}

.fm-resize-handle-left{
  left: 6px;
  cursor: nesw-resize;
}

.fm-resize-handle-right{
  right: 6px;
  cursor: nwse-resize;
}

.fm-resize-handle-bottom{
  left: 50%;
  bottom: 4px;
  width: 96px;
  height: 18px;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.fm-resize-handle-left::before,
.fm-resize-handle-right::before,
.fm-resize-handle-bottom::before{
  /* Visual cue for the custom bottom-corner resize handles */
  content: "";
  position: absolute;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
}

.fm-resize-handle-left::before{
  left: 4px;
  border-left: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 35%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 35%, transparent);
}

.fm-resize-handle-right::before{
  right: 4px;
  border-right: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 35%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 35%, transparent);
}

.fm-resize-handle-bottom::before{
  left: 50%;
  bottom: 3px;
  width: 46px;
  height: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--muted, #94a3b8) 35%, transparent);
  transform: translateX(-50%);
}

.fm-card.is-fullscreen{
  position: fixed !important;
  left: 8px !important;
  top: 8px !important;
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  resize: none !important;
  --fm-shift-x: 0px !important;
  transform: none !important;
  z-index: 45;
}

.fm-card.is-fullscreen .fm-resize-handle-left,
.fm-card.is-fullscreen .fm-resize-handle-right,
.fm-card.is-fullscreen .fm-resize-handle-bottom{
  display: none;
}

/* File manager: busy overlay (e.g., when opening a remote file via SFTP) */
.fm-busy-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  background: color-mix(in srgb, var(--card-bg, #020617) 55%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: all;
}

.fm-card.fm-busy{
  /* Give immediate visual feedback even if overlay isn't visible for some reason */
  cursor: wait;
}

.fm-busy-box{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border, #334155) 70%, transparent);
  background: color-mix(in srgb, var(--card-bg, #020617) 85%, transparent);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb, 0,0,0), calc(var(--shadow, 0.4) + 0.25));
}

.fm-busy-text{
  font-size: calc(13px * var(--xk-font-scale));
  color: var(--text, #e5e7eb);
  opacity: 0.92;
  max-width: min(520px, 86vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-busy-spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--muted, #94a3b8) 55%, transparent);
  border-top-color: var(--text, #e5e7eb);
  animation: xkeen-global-spinner 0.75s linear infinite;
  flex: 0 0 auto;
}
.fm-header{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; }
.fm-header h2{ margin: 0; }
.fm-header-actions{ display:flex; gap: 8px; align-items:center; }

/* File Manager: USB volumes modal */
.fm-volumes-table{
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--xk-font-scale));
}
.fm-volumes-table th,
.fm-volumes-table td{
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--editor-btn-border, rgba(51,65,85,0.9)) 65%, transparent);
  vertical-align: middle;
}
.fm-volumes-table th{
  text-align: left;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: .8;
  font-weight: 600;
}
.fm-volumes-table tbody tr:hover td{
  background: color-mix(in srgb, var(--card-bg, rgba(30,41,59,0.85)) 60%, transparent);
}
.fm-volumes-td-name code,
.fm-volumes-table td code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
}
.fm-volumes-state{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12px * var(--xk-font-scale));
  opacity: .9;
}
.fm-volumes-state::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #94a3b8) 70%, transparent);
  flex: 0 0 auto;
}
.fm-volumes-state.is-mounted::before{
  background: color-mix(in srgb, var(--success, #22c55e) 75%, transparent);
}
.fm-volumes-state.is-unmounted::before{
  background: color-mix(in srgb, var(--warning, #f59e0b) 75%, transparent);
}

/* File manager buttons: allow separate theming */
.fm-card .btn-secondary{
  background: var(--fm-btn-bg, var(--editor-btn-bg, rgba(255,255,255,0.04)));
  border-color: var(--fm-btn-border, var(--editor-btn-border, rgba(51,65,85,0.9)));
  color: var(--fm-btn-text, var(--editor-btn-text, #e5e7eb));
}
.fm-card .btn-secondary:hover{
  background: var(--fm-btn-hover-bg, var(--editor-btn-hover-bg, rgba(255,255,255,0.06)));
  border-color: var(--fm-btn-hover-border, var(--editor-btn-hover-border, rgba(148,163,184,0.55)));
  color: var(--fm-btn-hover-text, var(--editor-btn-hover-text, #e5e7eb));
}
.fm-card .btn-secondary:active{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fm-btn-active-from, var(--editor-btn-active-from, #1d4ed8)) 40%, transparent),
    color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 45%, transparent)
  );
  border-color: color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 65%, transparent);
}


/* Small toggle (used for dotfiles) */
.fm-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  /* Use theme-aware button vars so the toggle is readable in both themes */
  color: var(--editor-btn-text, #e5e7eb);
  border: 1px solid var(--editor-btn-border, rgba(51,65,85,0.55));
  background: color-mix(in srgb, var(--editor-btn-bg, rgba(255,255,255,0.04)) 85%, transparent);
}
.fm-toggle:hover{ background: color-mix(in srgb, var(--editor-btn-bg, rgba(255,255,255,0.04)) 75%, transparent); }
.fm-toggle input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fm-toggle-slider{
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--editor-btn-border, rgba(51,65,85,0.85)) 75%, transparent);
  border: 1px solid var(--fm-btn-border, var(--editor-btn-border, rgba(51,65,85,0.85)));
  position: relative;
  flex: 0 0 auto;
}
.fm-toggle-slider::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Knob should stay "milky" in light theme, but still readable in dark */
  background: var(--fm-toggle-knob-bg, rgba(226,232,240,0.92));
  border: 1px solid var(--fm-toggle-knob-border, rgba(15,23,42,0.12));
  transition: transform 0.15s ease;
}
.fm-toggle input:checked + .fm-toggle-slider{
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 45%, transparent);
  border-color: var(--header-tab-active-bg, #2563eb);
}
.fm-toggle input:checked + .fm-toggle-slider::after{ transform: translateX(16px); }
.fm-toggle-label{ opacity: 0.85; }

.fm-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* File manager top notes row: left note + right selection/free-space status */
.fm-top-notes{
  /* Match the two-panel grid so the right status starts at the left edge of the right panel */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 6px;
  align-items: flex-start;
}
.fm-top-notes .status{ margin-top: 0; }
.fm-top-notes #fm-disabled-note{
  grid-column: 1;
  min-width: 0;
}

.fm-top-notes #fm-footer-status{
  grid-column: 2;
  justify-self: start;
}

/* Selection/free-space status (plain text) */
.fm-status-note{
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.fm-status-note:empty{ display:none; }

.fm-status-v{
  font-weight: 700;
  color: var(--accent, #60a5fa);
}

.fm-panel{
  border: 1px solid var(--fm-panel-border, var(--border, rgba(51,65,85,0.85)));
  border-radius: 14px;
  overflow: hidden;
  background: var(--fm-panel-bg, color-mix(in srgb, var(--card-bg, #111827) 92%, transparent));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fm-panel-active{
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 34%, var(--fm-panel-border, var(--border, rgba(51,65,85,0.85))) 66%);
  background: var(--fm-panel-active-bg, color-mix(in srgb, var(--card-bg, #020617) 92%, rgba(96,165,250,0.08)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #60a5fa) 24%, transparent),
    0 14px 32px rgba(1, 6, 16, 0.18),
    0 0 22px color-mix(in srgb, var(--accent, #60a5fa) 7%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.fm-panel-bar{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px;
  border-bottom: 1px solid var(--fm-panel-bar-border, var(--border, rgba(51,65,85,0.6)));
  background: var(--fm-panel-bar-bg, color-mix(in srgb, var(--card-bg, #020617) 72%, transparent));
}
.fm-panel-active .fm-panel-bar{
  border-bottom-color: color-mix(in srgb, var(--accent, #60a5fa) 22%, var(--border, rgba(51,65,85,0.8)));
  background:
    linear-gradient(180deg, rgba(96,165,250,0.075), rgba(96,165,250,0.025)),
    #030814;
}
/*
  File manager: make the target selector (L/R) and quick paths (📌) as compact as
  the refresh icon button next to them.

  These are native <select> elements, but we style them to look like small
  pill-shaped icon buttons.
*/
.fm-bookmarks-select,
.fm-target-select,
.fm-bookmarks-btn{
  /* Match <button> + .btn-secondary visual language */
  border-radius: 9999px;
  background: var(--fm-btn-bg, var(--header-btn-bg, rgba(255,255,255,0.04)));
  border: 1px solid var(--fm-btn-border, var(--header-btn-border, rgba(51,65,85,0.9)));
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.7);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--header-btn-border, #334155) 55%, transparent);
  color: var(--fm-btn-text, var(--header-btn-text, inherit));

  /* Compact sizing (icon-like) */
  height: 32px;
  padding: 6px 12px;
  line-height: 18px;

  /* Behave like a button */
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;

  /* Hide native select arrow so it reads like an icon button */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  text-align: center;
  text-align-last: center;
}

/* Keep them really small: they only show a single glyph (L/R, 📌) */
.fm-target-select{
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}
.fm-bookmarks-select{
  width: 52px;
  min-width: 52px;
  max-width: 52px;
}

.fm-bookmarks-select:hover,
.fm-target-select:hover,
.fm-bookmarks-btn:hover{
  background: var(--fm-btn-hover-bg, var(--header-btn-hover-bg, rgba(255,255,255,0.06)));
  border-color: var(--fm-btn-hover-border, var(--header-btn-hover-border, rgba(148,163,184,0.55)));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.9);
  transform: translateY(-1px);
}

.fm-bookmarks-select:active,
.fm-target-select:active,
.fm-bookmarks-btn:active{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fm-btn-active-from, var(--editor-btn-active-from, #1d4ed8)) 40%, transparent),
    color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 45%, transparent)
  );
  border-color: color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 65%, transparent);
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 25%, transparent);
}

.fm-bookmarks-select:focus,
.fm-target-select:focus,
.fm-bookmarks-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 22%, transparent),
    0 4px 10px rgba(15, 23, 42, 0.7);
}

/* Light theme: align with light buttons */
html[data-theme="light"] .fm-bookmarks-select,
html[data-theme="light"] .fm-target-select,
html[data-theme="light"] .fm-bookmarks-btn{
  background: var(--fm-btn-bg, var(--header-btn-bg, #ffffff));
  border-color: var(--fm-btn-border, var(--header-btn-border, #d1d5db));
  color: var(--fm-btn-text, var(--header-btn-text, #111827));
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .fm-bookmarks-select:hover,
html[data-theme="light"] .fm-target-select:hover,
html[data-theme="light"] .fm-bookmarks-btn:hover{
  border-color: var(--fm-btn-hover-border, var(--header-btn-hover-border, #9ca3af));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  background: var(--fm-btn-hover-bg, var(--header-btn-hover-bg, #ffffff));
}
html[data-theme="light"] .fm-bookmarks-select:active,
html[data-theme="light"] .fm-target-select:active,
html[data-theme="light"] .fm-bookmarks-btn:active{
  background: color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 12%, transparent);
  border-color: color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 45%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fm-btn-active-to, var(--editor-btn-active-to, #2563eb)) 18%, transparent);
}

/* Make native <select> dropdowns readable in dark theme (options are otherwise too pale on white popups) */
html:not([data-theme="light"]) .fm-bookmarks-select,
html:not([data-theme="light"]) .fm-target-select,
html:not([data-theme="light"]) .fm-bookmarks-btn{
  color-scheme: dark;
}
html:not([data-theme="light"]) .fm-bookmarks-select option,
html:not([data-theme="light"]) .fm-target-select option,
html:not([data-theme="light"]) .fm-bookmarks-select optgroup,
html:not([data-theme="light"]) .fm-target-select optgroup{
  background-color: rgba(2,6,23,0.98);
  color: rgba(226,232,240,0.98);
}

.fm-path-input{
  flex: 1;
  min-width: 80px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--fm-input-border, var(--border, rgba(51,65,85,0.9)));
  background: var(--fm-input-bg, var(--card-bg, rgba(255,255,255,0.02)));
  color: inherit;
}


.fm-filter-wrap{
  display: flex;
  align-items: center;
  gap: 6px;
  /* Allow the filter block to shrink instead of being clipped */
  flex: 0 1 240px;
  min-width: 120px;
}

.fm-filter-input{
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--fm-input-border, var(--border, rgba(51,65,85,0.9)));
  background: var(--fm-input-bg, var(--card-bg, rgba(255,255,255,0.02)));
  color: inherit;
}

.fm-filter-clear-btn{
  padding: 8px 10px;
  border-radius: 10px;
  min-width: 36px;
}

@media (max-width: 900px){
  .fm-filter-wrap{ flex-basis: 200px; min-width: 110px; }
}

.fm-list{
  flex: 1;
  min-height: 0;
  overflow: auto;
  outline: none;
  overscroll-behavior: contain;
}
.fm-panel-active .fm-list{
  background:
    linear-gradient(180deg, rgba(2,6,23,0.2), rgba(2,6,23,0.58)),
    #010409;
}
.fm-list.is-loading{ opacity: 0.65; pointer-events: none; }

/* Inline panel error (unified UX) */
.fm-panel-error{
  margin: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 55%, var(--border, rgba(51,65,85,0.9)));
  background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
}
.fm-panel-error-title{
  font-weight: 600;
  margin-bottom: 4px;
}
.fm-panel-error-msg{
  opacity: 0.95;
}
.fm-panel-error-hint{
  margin-top: 6px;
  opacity: 0.78;
  font-size: 0.95em;
}
.fm-panel-error-retry{
  margin-top: 10px;
}

.fm-list.is-drop-target{
  outline: 2px dashed color-mix(in srgb, var(--accent, #60a5fa) 55%, transparent);
  outline-offset: -2px;
}

.fm-row.is-drop-target{
  background: color-mix(in srgb, var(--accent, #60a5fa) 10%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--accent, #60a5fa) 65%, transparent);
}

.fm-row[data-name]{ cursor: pointer; }
.fm-sort-cell{ cursor: pointer; }
.fm-row[draggable="true"]{ cursor: grab; }
.fm-row[draggable="true"]:active{ cursor: grabbing; }

.fm-row{
  display:grid;
  grid-template-columns: 28px minmax(160px, 1fr) minmax(64px, 92px) minmax(72px, 100px) minmax(120px, 150px);
  gap: 10px;
  align-items:center;
  padding: 6px 10px;
  user-select:none;
}

/* Trash view: add an extra column "Откуда удалено" */
.fm-panel.is-trash .fm-row{
  grid-template-columns: 28px minmax(160px, 1fr) minmax(220px, 1.2fr) minmax(64px, 92px) minmax(72px, 100px) minmax(120px, 150px);
}
.fm-cell.fm-from{
  opacity: 0.85;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.fm-row-header{
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: calc(12px * var(--xk-font-scale));
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.85;
  background: var(--fm-row-header-bg, color-mix(in srgb, var(--card-bg, #020617) 55%, transparent));
  border-bottom: 1px solid var(--fm-row-header-border, var(--border, rgba(51,65,85,0.6)));
}
.fm-row-header .fm-sort-cell{
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fm-row-header .fm-sort-cell:hover{ text-decoration: underline; }
.fm-sort-ind{ font-size: calc(11px * var(--xk-font-scale)); opacity: 0.75; }
.fm-row-header .fm-sort-cell.is-sort-active .fm-sort-ind{ opacity: 0.95; }
.fm-row:not(.fm-row-header){
  cursor: default;
}
.fm-row:not(.fm-row-header):hover{
  background: var(--fm-row-hover-bg, color-mix(in srgb, var(--card-bg, #020617) 85%, transparent));
}
.fm-row.is-selected{
  background: var(--fm-row-selected-bg, color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 18%, transparent));
}
.fm-row.is-focused{
  outline: 1px solid var(--fm-row-focus-outline, color-mix(in srgb, var(--accent, #60a5fa) 55%, transparent));
}

.fm-cell{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-cell.fm-check{ display:flex; align-items:center; justify-content:center; }
.fm-check-input{ width:16px; height:16px; margin:0; cursor:pointer; }
.fm-cell.fm-name{ display:flex; gap:8px; align-items:center; }
.fm-ico{ width: 18px; text-align:center; opacity: 0.95; }
.fm-name-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.fm-hints{
  display:flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: calc(12px * var(--xk-font-scale));
}

/* Properties panel */
.fm-props{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fm-props-border, var(--border, rgba(51,65,85,0.85)));
  border-radius: 14px;
  background: var(--fm-props-bg, color-mix(in srgb, var(--card-bg, #020617) 82%, transparent));
}
.fm-props-head{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fm-props-title{ font-weight: 600; font-size: calc(13px * var(--xk-font-scale)); }
.fm-props-meta{ font-size: calc(12px * var(--xk-font-scale)); opacity: 0.75; }
.fm-props-body{ margin-top: 8px; min-height: 34px; }
.fm-props-grid{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px 12px;
  align-items: start;
  font-size: calc(12px * var(--xk-font-scale));
}
.fm-props-k{ opacity: 0.75; }
.fm-props-v{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fm-props-empty{ font-size: calc(12px * var(--xk-font-scale)); opacity: 0.8; padding: 6px 0; }


.fm-props-actions{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.fm-props-recalc-btn{
  padding: 4px 10px;
  border-radius: 10px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.2;
  font-family: var(--xk-font-family);
}
.fm-props-dirsize-note{
  opacity: 0.75;
  font-size: calc(12px * var(--xk-font-scale));
  font-family: var(--xk-font-family);
}

@media (max-width: 760px){
  .fm-props-grid{ grid-template-columns: 1fr; }
  .fm-props-v{ font-family: inherit; }
}

.fm-hints-text{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0.85;
}


/* Bottom bar: help (left) + actions (right) */
.fm-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.fm-footer-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.fm-footer-status{
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.2;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-help-btn{
  padding: 6px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.1;
}

.fm-help-body{
  font-size: 0.95rem;
  line-height: 1.35;
}
.fm-help-body h3{
  margin: 14px 0 6px 0;
  font-size: 1rem;
}
.fm-help-body ul{
  margin: 6px 0 0 18px;
}
.fm-help-body li{
  margin: 4px 0;
}

.fm-dropop-list{
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--fm-props-border, var(--border, rgba(51,65,85,0.85)));
  background: var(--fm-props-bg, color-mix(in srgb, var(--card-bg, #020617) 92%, var(--text, #e5e7eb) 8%));
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

/* Context menu (ПКМ) */
.fm-context-menu{
  position: fixed;
  z-index: 60;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--fm-menu-border, var(--modal-border, rgba(51,65,85,0.85)));
  /* Use the same solid base as modal cards: the context menu must not be see-through. */
  background: var(--fm-menu-bg, var(--modal-bg, rgba(15, 23, 42, 0.95)));
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb, 0,0,0), calc(var(--shadow, 0.35)));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.fm-context-menu.hidden{ display:none; }

.fm-context-item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fm-btn-text, var(--header-btn-text, inherit));
  cursor: pointer;
  text-align: left;
}
.fm-context-item:hover{
  background: var(--fm-menu-item-hover-bg, color-mix(in srgb, var(--accent, #60a5fa) 12%, transparent));
  border-color: var(--fm-menu-item-hover-border, color-mix(in srgb, var(--border, #334155) 60%, transparent));
}

.fm-context-item:active{
  background: color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent);
}

.fm-context-kbd{
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.75;
}
.fm-context-sep{
  height: 1px;
  margin: 6px 6px;
  background: var(--fm-menu-sep, color-mix(in srgb, var(--border, #334155) 60%, transparent));
}


html[data-theme="light"] .fm-context-menu{
  background: var(--fm-menu-bg, var(--modal-bg, #ffffff));
  border-color: var(--fm-menu-border, var(--modal-border, var(--border, rgba(15,23,42,0.18))));
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb, 15,23,42), var(--shadow, 0.12));
}
html[data-theme="light"] .fm-context-item:hover{
  background: var(--fm-menu-item-hover-bg, color-mix(in srgb, var(--accent, #0a84ff) 10%, transparent));
  border-color: var(--fm-menu-item-hover-border, color-mix(in srgb, var(--border, rgba(15,23,42,0.12)) 60%, transparent));
}
html[data-theme="light"] .fm-context-sep{
  background: var(--fm-menu-sep, color-mix(in srgb, var(--border, rgba(15,23,42,0.12)) 60%, transparent));
}
/* Connect form */
.fm-form-grid{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 12px;
  align-items:center;
}

/*
  FM connect modal: prevent profile select / flex rows from forcing horizontal overflow.
  Modal-body hides overflow-x, and without min-width:0 the grid could overflow and
  visually "cut" the left part of labels (only the tail of the label remained visible).
*/
#fm-connect-modal .fm-form-grid{
  /* Slightly wider labels column for "SFTP host key" and friends */
  grid-template-columns: 180px 1fr;
}
#fm-connect-modal .fm-form-grid > *{
  min-width: 0;
}
#fm-connect-modal .fm-form-grid > label{
  opacity: 0.9;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
/* Flex wrappers inside the grid (profile row, hostkey policy row, fingerprint row) */
#fm-connect-modal .fm-form-grid > div{
  min-width: 0;
}
#fm-connect-modal .fm-form-grid .terminal-input{
  min-width: 0;
}

/* Keep the 1-column layout on small screens (override the more specific connect-modal rule above) */
@media (max-width: 920px){
  #fm-connect-modal .fm-form-grid{ grid-template-columns: 1fr; }
}


/* chmod/chown helpers */
.fm-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.fm-perms-grid{
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr);
  gap: 8px 12px;
  align-items: center;
}
.fm-perms-head{
  font-weight: 600;
  opacity: 0.9;
}
.fm-perms-rowlabel{
  opacity: 0.9;
}
.fm-perms-cell{
  display: flex;
  gap: 8px;
  align-items: center;
  user-select: none;
}
.fm-perms-cell input{
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Conflicts */
.fm-conflicts-table{
  display:grid;
  gap: 6px;
}
.fm-conflicts-row{
  display:grid;
  grid-template-columns: 1fr 1fr 140px;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(51,65,85,0.65);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.fm-conflicts-head{
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.85;
  background: rgba(2,6,23,0.35);
}
.fm-conflicts-footer{ margin-top: 10px; }

/* Progress */
.fm-progress-line{ font-weight: 600; margin-bottom: 10px; }
.fm-progress-bar{ height: 10px; border-radius: 999px; background: rgba(51,65,85,0.55); overflow:hidden; }
.fm-progress-bar-inner{ height: 100%; width: 0%; background: rgba(37,99,235,0.55); }
.fm-progress-meta{ margin-top: 8px; font-size: calc(12px * var(--xk-font-scale)); opacity: 0.85; }
.fm-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.fm-progress-extra{ margin-top: 8px; display:flex; justify-content:space-between; gap: 10px; align-items:center; flex-wrap:wrap; font-size: calc(12px * var(--xk-font-scale)); }
.fm-progress-extra-right{ opacity: 0.85; }
.fm-progress-details{ margin-top: 10px; max-height: 260px; overflow:auto; background: rgba(2,6,23,0.35); border: 1px solid rgba(51,65,85,0.55); border-radius: 12px; padding: 10px; }

/* Ops list */
.fm-ops-table{ display:grid; gap: 6px; }
.fm-ops-row{ display:grid; grid-template-columns: 110px 80px 90px 120px 1fr 170px; gap: 10px; padding: 8px 10px; border: 1px solid rgba(51,65,85,0.65); border-radius: 12px; background: rgba(255,255,255,0.02); align-items:center; }
.fm-ops-head{ font-size: calc(12px * var(--xk-font-scale)); opacity: 0.85; background: rgba(2,6,23,0.35); }

@media (max-width: 920px){
  .fm-card{ resize: none; }
  .fm-resize-handle-left,
  .fm-resize-handle-right,
  .fm-resize-handle-bottom{ display:none; }
  .fm-two{ grid-template-columns: 1fr; }
  .fm-row{ grid-template-columns: 28px minmax(140px, 1fr) minmax(56px, 84px) minmax(64px, 92px) minmax(108px, 140px); }
  .fm-panel.is-trash .fm-row{ grid-template-columns: 28px minmax(140px, 1fr) minmax(180px, 1.2fr) minmax(56px, 84px) minmax(64px, 92px) minmax(108px, 140px); }
  .fm-form-grid{ grid-template-columns: 1fr; }
  .fm-conflicts-row{ grid-template-columns: 1fr; }
  .fm-ops-row{ grid-template-columns: 1fr; }
}

html[data-theme="light"] .fm-panel{
  background: var(--fm-panel-bg, color-mix(in srgb, var(--card-bg, #ffffff) 92%, transparent));
  border-color: var(--fm-panel-border, var(--border, rgba(15,23,42,0.18)));
}
html[data-theme="light"] .fm-panel-active{
  border-color: color-mix(in srgb, var(--accent, #2563eb) 30%, rgba(15,23,42,0.18) 70%);
  background:
    linear-gradient(180deg, rgba(239,246,255,0.94), rgba(248,250,252,0.98)),
    #f8fafc;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 14%, transparent),
    0 12px 28px rgba(59,91,154,0.10),
    inset 0 1px 0 rgba(255,255,255,0.92);
}
html[data-theme="light"] .fm-panel-bar{
  background: var(--fm-panel-bar-bg, color-mix(in srgb, var(--card-bg, #ffffff) 90%, transparent));
  border-color: var(--fm-panel-bar-border, var(--border, rgba(15,23,42,0.12)));
}
html[data-theme="light"] .fm-panel-active .fm-panel-bar{
  border-bottom-color: color-mix(in srgb, var(--accent, #2563eb) 20%, rgba(15,23,42,0.14));
  background:
    linear-gradient(180deg, rgba(219,234,254,0.62), rgba(239,246,255,0.72)),
    #eff6ff;
}
html[data-theme="light"] .fm-panel-active .fm-list{
  background:
    linear-gradient(180deg, rgba(239,246,255,0.9), rgba(248,250,252,0.98)),
    #f8fafc;
}
html[data-theme="light"] .fm-row-header{
  background: var(--fm-row-header-bg, color-mix(in srgb, var(--card-bg, #ffffff) 90%, transparent));
  border-color: var(--fm-row-header-border, var(--border, rgba(15,23,42,0.12)));
}
html[data-theme="light"] .fm-panel-active .fm-row-header{
  background: rgba(219,234,254,0.96);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 28%, rgba(15,23,42,0.12));
}
html[data-theme="light"] .fm-row:not(.fm-row-header):hover{
  background: var(--fm-row-hover-bg, color-mix(in srgb, var(--card-bg, #ffffff) 85%, transparent));
}
html[data-theme="light"] .fm-row.is-selected{
  background: var(--fm-row-selected-bg, color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 12%, transparent));
}
html[data-theme="light"] .fm-panel-active .fm-row.is-selected{
  background: color-mix(in srgb, var(--accent, #2563eb) 18%, #ffffff 82%);
}
html[data-theme="light"] .fm-progress-details{
  background: color-mix(in srgb, var(--card-bg, #ffffff) 92%, transparent);
  border-color: var(--border, rgba(15,23,42,0.12));
}


/* File Manager: bookmarks (pins) manager modal */
.fm-bm-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 8px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 2px;
}
.fm-bm-row{
  display:flex;
  gap: 8px;
  align-items:center;
}
.fm-bm-row .terminal-input{
  height: 32px;
}
.fm-bm-label{
  flex: 0 0 220px;
  min-width: 140px;
}
.fm-bm-path{
  flex: 1 1 auto;
  min-width: 180px;
}
.fm-bm-mini{
  height: 32px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 9999px;
}



/* Outbounds helper hints (protocol/type/security dropdowns) */
.outbounds-hints{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 10px 0 12px 0;
}

.outbounds-hints label{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.outbounds-hints .hint-label{
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  padding-left: 4px;
}

/* Slightly compact select paddings for the outbounds block */
.outbounds-hints select.xray-log-select{
  padding-top: 6px;
  padding-bottom: 6px;
}



/* Xray preflight / save-error modal */
#xray-preflight-modal {
  padding: 6px;
}

#xray-preflight-modal .modal-content {
  width: min(94vw, 980px);
  max-width: 980px;
  max-height: min(92vh, 820px);
  padding: 7px 9px 9px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.10), transparent 28%),
    radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.985), rgba(2, 6, 23, 0.965));
  box-shadow:
    0 28px 86px rgba(2, 6, 23, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#xray-preflight-modal .modal-header {
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.xk-preflight-body {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  gap: 8px;
  margin: 0;
}

.xk-preflight-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(135deg, rgba(18, 25, 40, 0.94), rgba(8, 13, 28, 0.96)),
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(2, 6, 23, 0.24);
}

#xray-preflight-modal.is-xray .xk-preflight-lead {
  border-color: rgba(248, 113, 113, 0.30);
  background:
    linear-gradient(135deg, rgba(69, 10, 10, 0.92), rgba(28, 8, 10, 0.95)),
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.18), transparent 52%);
}

#xray-preflight-modal.is-json .xk-preflight-lead {
  border-color: rgba(245, 158, 11, 0.24);
  background:
    linear-gradient(135deg, rgba(74, 32, 6, 0.92), rgba(41, 18, 6, 0.94)),
    radial-gradient(circle at top left, rgba(251, 191, 36, 0.16), transparent 52%);
}

.xk-preflight-lead-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.46));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.26);
  color: #f8fafc;
  font-size: calc(13px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: 0.04em;
}

#xray-preflight-modal.is-xray .xk-preflight-lead-icon {
  border-color: rgba(248, 113, 113, 0.34);
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.34), rgba(127, 29, 29, 0.20));
  box-shadow: 0 8px 20px rgba(127, 29, 29, 0.24);
  color: #fee2e2;
}

#xray-preflight-modal.is-json .xk-preflight-lead-icon {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.30), rgba(180, 83, 9, 0.18));
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.18);
  color: #fef3c7;
}

.xk-preflight-lead-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.xk-preflight-lead-title {
  margin-bottom: 1px;
  font-size: calc(16px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg, #f8fafc);
}

.xk-preflight-lead .modal-description {
  margin: 0;
  color: #cbd5e1;
}

.xk-preflight-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.66);
  color: #e2e8f0;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  white-space: nowrap;
}

.xk-preflight-action-chip {
  border-color: rgba(251, 191, 36, 0.38);
  background: rgba(120, 53, 15, 0.34);
  color: #fde68a;
  cursor: pointer;
}

.xk-preflight-action-chip:hover,
.xk-preflight-action-chip:focus-visible {
  border-color: rgba(251, 191, 36, 0.62);
  background: rgba(146, 64, 14, 0.48);
  color: #fef3c7;
}

.xk-preflight-action-chip:disabled {
  opacity: 0.62;
  cursor: progress;
}

#xray-preflight-modal.is-xray .xk-preflight-chip {
  border-color: rgba(248, 113, 113, 0.26);
  color: #fecaca;
}

#xray-preflight-modal.is-json .xk-preflight-chip {
  border-color: rgba(245, 158, 11, 0.26);
  color: #fef3c7;
}

#xray-preflight-modal .xk-preflight-action-chip {
  border-color: rgba(251, 191, 36, 0.38);
  color: #fde68a;
}

.xk-preflight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr);
  gap: 8px;
  align-items: start;
  min-height: 0;
}

.xk-preflight-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(2, 6, 23, 0.18);
}

.xk-preflight-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 8px 9px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.40), rgba(2, 6, 23, 0.22));
}

.xk-preflight-block--summary {
  border-color: rgba(248, 113, 113, 0.32);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.26), rgba(2, 6, 23, 0.28));
  color: #fee2e2;
}

#xray-preflight-modal.is-json .xk-preflight-block--summary {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.22), rgba(2, 6, 23, 0.26));
  color: #fde68a;
}

.xk-preflight-block--hint {
  color: #dbeafe;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.56), rgba(2, 6, 23, 0.28));
}

.xk-preflight-block--stderr {
  border-color: rgba(248, 113, 113, 0.24);
  background: linear-gradient(180deg, rgba(69, 10, 10, 0.14), rgba(2, 6, 23, 0.22));
}

.xk-preflight-block-title {
  font-size: calc(11px * var(--xk-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #94a3b8;
}

.xk-preflight-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xk-preflight-meta-card {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  min-height: 34px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.xk-preflight-meta-card.is-problem {
  border-color: rgba(248, 113, 113, 0.30);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.18), rgba(15, 23, 42, 0.18));
}

.xk-preflight-meta-label {
  opacity: 0.76;
  flex: 0 0 auto;
  font-size: calc(9px * var(--xk-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.xk-preflight-meta-value {
  min-width: 0;
  word-break: break-word;
  color: var(--fg, #e2e8f0);
  font-weight: 600;
}

.xk-preflight-code-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.xk-preflight-code-trigger::after {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(15, 23, 42, 0.55);
  color: #93c5fd;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1;
}

.xk-preflight-code-trigger[aria-expanded="true"]::after {
  content: '–';
}

.xk-preflight-code-trigger:disabled {
  cursor: default;
  opacity: 0.88;
}

.xk-preflight-code-trigger:disabled::after {
  border-color: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
}

.xk-preflight-code-trigger.is-helpful {
  color: #fef3c7;
}

#xray-preflight-modal [data-xk-preflight-summary],
#xray-preflight-modal [data-xk-preflight-hint],
#xray-preflight-modal [data-xk-preflight-code-help] {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.xk-preflight-codebox,
.xk-preflight-terminal {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 9px;
  border-radius: 10px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.xk-preflight-codebox {
  max-height: 58px;
  overflow: auto;
}

.xk-preflight-block--cmd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.xk-preflight-block--cmd .xk-preflight-codebox {
  min-height: 0;
  max-height: 34px;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: auto hidden;
}

.xk-preflight-terminal {
  min-height: 112px;
  max-height: min(34vh, 270px);
  overflow: auto;
  color: #cbd5e1;
}

.xk-preflight-terminal--stderr {
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
  background: linear-gradient(180deg, rgba(32, 8, 11, 0.94), rgba(2, 6, 23, 0.98));
}

.xk-preflight-terminal.is-empty,
.xk-preflight-terminal--stderr.is-empty {
  color: #94a3b8;
  border-style: dashed;
}

#xray-preflight-modal .xk-preflight-block--explainer {
  flex: 0 1 auto;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.50), rgba(2, 6, 23, 0.24));
}

#xray-preflight-modal .xk-preflight-block--code-help {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.58), rgba(2, 6, 23, 0.24));
  border-color: rgba(96, 165, 250, 0.20);
}

.xk-preflight-explainer {
  display: grid;
  gap: 6px;
}

.xk-preflight-explainer-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.xk-preflight-explainer-item.is-problem {
  border-color: rgba(248, 113, 113, 0.28);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.18), rgba(2, 6, 23, 0.12));
}

.xk-preflight-explainer-item.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.18), rgba(2, 6, 23, 0.12));
}

.xk-preflight-explainer-item.is-action {
  border-color: rgba(96, 165, 250, 0.22);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.14), rgba(2, 6, 23, 0.12));
}

.xk-preflight-explainer-label {
  font-size: calc(10px * var(--xk-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.xk-preflight-explainer-text {
  color: #e2e8f0;
  line-height: 1.38;
}

.xk-preflight-terminal-line {
  display: block;
  margin: 0;
  padding: 2px 6px;
  border-left: 2px solid transparent;
  border-radius: 8px;
}

.xk-preflight-terminal-line.is-problem {
  border-left-color: rgba(248, 113, 113, 0.92);
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.34), rgba(127, 29, 29, 0.08));
  color: #fecaca;
}

.xk-preflight-terminal-line.is-warning {
  border-left-color: rgba(245, 158, 11, 0.88);
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.26), rgba(120, 53, 15, 0.06));
  color: #fde68a;
}

.xk-preflight-terminal-line.is-muted {
  opacity: 0.82;
}

.xk-preflight-footer {
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#xray-preflight-modal [data-xk-preflight-copy].is-success {
  border-color: rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
}

#xray-preflight-modal [data-xk-preflight-copy].is-error {
  border-color: rgba(239, 68, 68, 0.28);
  color: #fecaca;
}

@media (max-width: 940px) {
  .xk-preflight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #xray-preflight-modal {
    padding: 6px;
  }

  #xray-preflight-modal .modal-content {
    width: min(100vw, 760px);
    border-radius: 18px;
  }

  .xk-preflight-lead,
  .xk-preflight-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .xk-preflight-chip {
    align-self: flex-start;
  }

  .xk-preflight-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .xk-preflight-meta-card {
    width: 100%;
  }

  .xk-preflight-block--cmd {
    grid-template-columns: 1fr;
  }

  .xk-preflight-block--cmd .xk-preflight-codebox {
    white-space: pre-wrap;
    overflow: auto;
  }
}

html[data-theme="light"] #xray-preflight-modal .modal-content {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

html[data-theme="light"] .xk-preflight-lead {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94)),
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 50%);
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="light"] #xray-preflight-modal.is-xray .xk-preflight-lead {
  background:
    linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.94)),
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.12), transparent 50%);
  border-color: rgba(248, 113, 113, 0.22);
}

html[data-theme="light"] #xray-preflight-modal.is-json .xk-preflight-lead {
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.94)),
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 50%);
  border-color: rgba(245, 158, 11, 0.18);
}

html[data-theme="light"] .xk-preflight-panel,
html[data-theme="light"] .xk-preflight-block,
html[data-theme="light"] .xk-preflight-meta-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="light"] .xk-preflight-explainer-item {
  background: rgba(255,255,255,0.94);
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="light"] .xk-preflight-explainer-item.is-problem {
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255,255,255,0.94));
  border-color: rgba(248, 113, 113, 0.22);
}

html[data-theme="light"] .xk-preflight-explainer-item.is-warning {
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255,255,255,0.94));
  border-color: rgba(245, 158, 11, 0.20);
}

html[data-theme="light"] .xk-preflight-explainer-item.is-action {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255,255,255,0.94));
  border-color: rgba(96, 165, 250, 0.20);
}

html[data-theme="light"] .xk-preflight-code-trigger::after {
  background: rgba(239, 246, 255, 0.96);
  border-color: rgba(96, 165, 250, 0.24);
  color: #1d4ed8;
}

html[data-theme="light"] .xk-preflight-explainer-text {
  color: #1f2937;
}

html[data-theme="light"] .xk-preflight-terminal-line.is-problem {
  border-left-color: rgba(220, 38, 38, 0.88);
  background: linear-gradient(90deg, rgba(254, 226, 226, 0.90), rgba(255,255,255,0.20));
  color: #991b1b;
}

html[data-theme="light"] .xk-preflight-terminal-line.is-warning {
  border-left-color: rgba(217, 119, 6, 0.86);
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.92), rgba(255,255,255,0.20));
  color: #92400e;
}

html[data-theme="light"] .xk-preflight-chip {
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
}

html[data-theme="light"] .xk-preflight-action-chip {
  border-color: rgba(217, 119, 6, 0.38);
  background: rgba(255, 251, 235, 0.94);
  color: #92400e;
}

html[data-theme="light"] .xk-preflight-action-chip:hover,
html[data-theme="light"] .xk-preflight-action-chip:focus-visible {
  border-color: rgba(217, 119, 6, 0.62);
  background: rgba(254, 243, 199, 0.98);
  color: #78350f;
}

html[data-theme="light"] #xray-preflight-modal.is-xray .xk-preflight-chip {
  background: rgba(254, 242, 242, 0.92);
  color: #991b1b;
}

html[data-theme="light"] #xray-preflight-modal.is-json .xk-preflight-chip {
  background: rgba(255, 251, 235, 0.92);
  color: #92400e;
}

html[data-theme="light"] #xray-preflight-modal .xk-preflight-action-chip {
  border-color: rgba(217, 119, 6, 0.38);
  background: rgba(255, 251, 235, 0.94);
  color: #92400e;
}

html[data-theme="light"] #xray-preflight-modal .xk-preflight-action-chip:hover,
html[data-theme="light"] #xray-preflight-modal .xk-preflight-action-chip:focus-visible {
  border-color: rgba(217, 119, 6, 0.62);
  background: rgba(254, 243, 199, 0.98);
  color: #78350f;
}

/* Outbounds mini-generator modal */
.xk-gen-modal{
  max-width: min(1180px, calc(100vw - 28px));
}

.xk-gen-lead{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(96, 165, 250, 0.24);
  background:
    linear-gradient(135deg, rgba(10, 31, 84, 0.90), rgba(6, 18, 46, 0.92)),
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(2, 6, 23, 0.28);
  margin-bottom: 14px;
}

.xk-gen-lead-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:20px;
  color:#dbeafe;
  border:1px solid rgba(96, 165, 250, 0.30);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.34), rgba(30, 64, 175, 0.18));
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.xk-gen-lead-title{
  font-size: calc(19px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.xk-gen-grid2{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 12px;
  align-items:stretch;
}

.xk-gen-panel{
  min-width:0;
  border-radius:18px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(6, 18, 46, 0.94), rgba(4, 14, 34, 0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 16px 34px rgba(2, 6, 23, 0.24);
  padding:14px;
}

.xk-gen-panelhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.xk-gen-kicker{
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:11px;
  color: var(--muted, #94a3b8);
  margin-bottom:4px;
}

.xk-gen-summary{
  flex:0 0 auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(96, 165, 250, 0.24);
  background: rgba(15, 23, 42, 0.66);
  color:#dbeafe;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight:700;
  white-space:nowrap;
}

.xk-gen-sidehint{
  max-width:220px;
  text-align:right;
  line-height:1.35;
}

.xk-gen-fieldlabel{
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  padding-left: 4px;
}

.xk-gen-selects,
.xk-gen-fields-grid{
  display:grid;
  gap:10px;
}

.xk-gen-selects{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom:10px;
}

.xk-gen-fields-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xk-gen-selects label,
.xk-gen-fields-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
}

.xk-gen-selects label,
.xk-gen-form-panel .xk-gen-fields-grid > label,
.xk-gen-credentials-grid > label,
.xk-gen-adv-grid > label{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(2, 6, 23, 0.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.xk-gen-form-panel .xk-gen-fields-grid{
  grid-template-columns: minmax(0, 1.12fr) minmax(140px, 0.88fr);
}

.xk-gen-credentials-grid,
.xk-gen-adv-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xk-gen-selects select.xray-log-select{
  padding-top: 6px;
  padding-bottom: 6px;
}

.xk-gen-credentials-card{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.20);
}

.xk-gen-subtitle{
  font-weight:700;
  font-size: calc(13px * var(--xk-font-scale));
  margin-bottom:10px;
}

.outbounds-gen-preview{
  min-height: 108px;
  max-height: min(38vh, 280px);
  font-size: calc(13px * var(--xk-font-scale));
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.35;
}

.xk-gen-preview{
  min-height: 170px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.xk-gen-preview-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(10, 18, 38, 0.62), rgba(2, 6, 23, 0.34));
}

.xk-gen-note{
  margin-top:8px;
  font-size: calc(12px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
}

.outbounds-gen-advanced,
.xk-gen-advanced-card{
  margin-top: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.20);
}

.outbounds-gen-advanced > summary{
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  opacity: 0.94;
}

.outbounds-gen-advanced[open] > summary{
  margin-bottom: 10px;
}

.xk-gen-statusbar{
  min-height: 22px;
  margin: 12px 0 10px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.30);
}

.xk-gen-footer{
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.xk-gen-footer-left,
.xk-gen-footer-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.xk-gen-footer-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.xk-gen-primary-action{
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.22);
}

@media (max-width: 850px){
  .xk-gen-grid2{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .xk-gen-selects,
  .xk-gen-fields-grid,
  .xk-gen-credentials-grid,
  .xk-gen-adv-grid{
    grid-template-columns: 1fr;
  }
  .xk-gen-lead,
  .xk-gen-panelhead,
  .xk-gen-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .xk-gen-sidehint,
  .xk-gen-summary{
    max-width:none;
    text-align:left;
  }
}

html[data-theme="light"] .xk-gen-lead{
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(224, 242, 254, 0.94)),
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 50%);
  border-color: rgba(96, 165, 250, 0.22);
}

html[data-theme="light"] .xk-gen-panel,
html[data-theme="light"] .xk-gen-credentials-card,
html[data-theme="light"] .outbounds-gen-advanced{
  background: rgba(255,255,255,0.92);
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="light"] .xk-gen-selects label,
html[data-theme="light"] .xk-gen-form-panel .xk-gen-fields-grid > label,
html[data-theme="light"] .xk-gen-credentials-grid > label,
html[data-theme="light"] .xk-gen-adv-grid > label,
html[data-theme="light"] .xk-gen-preview-block,
html[data-theme="light"] .xk-gen-statusbar{
  background: rgba(248, 250, 252, 0.94);
  border-color: rgba(148, 163, 184, 0.24);
}

html[data-theme="light"] .xk-gen-summary{
  background: rgba(239, 246, 255, 0.92);
  color: #1e3a8a;
}

.xk-qb-modal{
  max-width:min(1120px, calc(100vw - 36px));
}

.xk-qb-lead{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:16px 18px;
  border-radius:22px;
  margin-bottom:14px;
  border:1px solid rgba(96,165,250,0.20);
  background:
    linear-gradient(135deg, rgba(8,24,68,0.96), rgba(6,18,52,0.92)),
    radial-gradient(circle at top left, rgba(56,189,248,0.12), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 50px rgba(2,8,23,0.22);
}

.xk-qb-lead-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-size:20px;
  color:#dbeafe;
  background:linear-gradient(180deg, rgba(37,99,235,0.36), rgba(30,64,175,0.18));
  border:1px solid rgba(125,211,252,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.xk-qb-lead-title{
  font-size:1.06rem;
  font-weight:800;
  color:#f8fbff;
  margin-bottom:4px;
}

.xk-qb-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap:14px;
  align-items:start;
}

.xk-qb-panel{
  border-radius:22px;
  padding:14px;
  border:1px solid rgba(148,163,184,0.16);
  background:
    linear-gradient(180deg, rgba(7,17,45,0.96), rgba(4,12,34,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 14px 34px rgba(2,8,23,0.18);
}

.xk-qb-panelhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.xk-qb-kicker{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--modal-muted, #96a3b8);
  margin-bottom:4px;
}

.xk-qb-summary{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
  color:#dbeafe;
  border:1px solid rgba(96,165,250,0.22);
  background:linear-gradient(180deg, rgba(15,45,102,0.82), rgba(9,28,68,0.72));
}

.xk-qb-fields-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.xk-qb-fields-grid > label,
.xk-qb-editor-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:11px 12px 12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.14);
  background:linear-gradient(180deg, rgba(6,18,52,0.84), rgba(4,14,40,0.78));
}

.xk-qb-fields-grid > label.xk-qb-fieldwide{
  grid-column:1 / -1;
}

.xk-qb-fieldlabel{
  font-size:.82rem;
  font-weight:700;
  color:#d7e4f5;
}

.xk-qb-fields-grid .routing-rule-input,
.xk-qb-editor-block .xkeen-textarea{
  min-height:42px;
}

.xk-qb-editor-block .xkeen-textarea{
  min-height:220px;
  resize:vertical;
}

.xk-qb-options-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

.xk-qb-option-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 14px;
  border-radius:18px;
  cursor:pointer;
  border:1px solid rgba(148,163,184,0.14);
  background:linear-gradient(180deg, rgba(8,20,54,0.82), rgba(5,15,40,0.78));
}

.xk-qb-option-card-compact{
  grid-column:1 / -1;
}

.xk-qb-option-card input[type="checkbox"]{
  margin-top:3px;
  flex:0 0 auto;
}

.xk-qb-option-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.xk-qb-option-copy strong{
  font-size:.95rem;
  color:#f8fbff;
}

.xk-qb-option-copy small{
  color:var(--modal-muted, #9fb0c8);
  line-height:1.38;
}

.xk-qb-refresh-btn{
  flex:0 0 auto;
}

.xk-qb-note,
.xk-qb-statusbar{
  padding:11px 12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,0.14);
  background:linear-gradient(180deg, rgba(6,18,52,0.74), rgba(4,14,40,0.68));
}

.xk-qb-note{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:12px;
  color:var(--modal-muted, #9fb0c8);
  line-height:1.45;
}

.xk-qb-statusbar{
  margin-top:12px;
  min-height:48px;
  display:flex;
  align-items:center;
  color:var(--modal-muted, #9fb0c8);
}

.xk-qb-statusbar.is-error{
  color:#fecaca;
  border-color:rgba(248,113,113,0.24);
  background:linear-gradient(180deg, rgba(60,12,18,0.82), rgba(40,10,14,0.74));
}

.xk-qb-statusbar.is-success{
  color:#d1fae5;
  border-color:rgba(16,185,129,0.22);
  background:linear-gradient(180deg, rgba(6,52,41,0.82), rgba(4,34,28,0.72));
}

.xk-qb-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.xk-qb-footer-left,
.xk-qb-footer-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.xk-qb-footer-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.xk-qb-primary-action{
  box-shadow:0 12px 26px rgba(153,27,27,0.22);
}

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

@media (max-width: 760px){
  .xk-qb-fields-grid,
  .xk-qb-options-grid{
    grid-template-columns:1fr;
  }
  .xk-qb-lead,
  .xk-qb-panelhead,
  .xk-qb-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .xk-qb-summary,
  .xk-qb-refresh-btn{
    align-self:flex-start;
  }
  .xk-qb-statusbar,
  .xk-qb-footer-actions{
    width:100%;
  }
}

html[data-theme="light"] .xk-qb-lead{
  background:
    linear-gradient(135deg, rgba(239,246,255,0.96), rgba(224,242,254,0.94)),
    radial-gradient(circle at top left, rgba(59,130,246,0.10), transparent 52%);
  border-color: rgba(96, 165, 250, 0.22);
}

html[data-theme="light"] .xk-qb-panel,
html[data-theme="light"] .xk-qb-fields-grid > label,
html[data-theme="light"] .xk-qb-editor-block,
html[data-theme="light"] .xk-qb-option-card,
html[data-theme="light"] .xk-qb-note,
html[data-theme="light"] .xk-qb-statusbar{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(245, 249, 255, 0.95));
  border-color: rgba(172, 188, 214, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(47, 79, 140, 0.06);
}

html[data-theme="light"] .xk-qb-summary{
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(225, 236, 255, 0.92));
  border-color: rgba(96, 165, 250, 0.28);
  color:#1f3e78;
}

html[data-theme="light"] .xk-qb-lead-title,
html[data-theme="light"] .xk-qb-option-copy strong,
html[data-theme="light"] .xk-qb-panel .terminal-menu-title{
  color:#1d2b44;
}

html[data-theme="light"] .xk-qb-kicker,
html[data-theme="light"] .xk-qb-fieldlabel{
  color:#6b7d97;
}

html[data-theme="light"] .xk-qb-lead .modal-description,
html[data-theme="light"] .xk-qb-option-copy small,
html[data-theme="light"] .xk-qb-note,
html[data-theme="light"] .xk-qb-statusbar:not(.is-error):not(.is-success){
  color:#465975;
}

html[data-theme="light"] .xk-qb-statusbar.is-error{
  background: rgba(254, 242, 242, 0.95);
  color:#991b1b;
}

html[data-theme="light"] .xk-qb-statusbar.is-success{
  background: rgba(236, 253, 245, 0.95);
  color:#065f46;
}

/* Mihomo Import modal: YAML preview with minimal syntax highlighting (CodeMirror, read-only) */
/* --- Xray config fragments selector (routing/inbounds/outbounds) --- */
.xk-fragment-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin: 8px 0 6px;
  flex-wrap:wrap;
}
.xk-fragment-select{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 240px;
  flex: 1 1 320px;
}
.xk-fragment-select .hint-label{
  font-size: 12px;
  color: var(--muted, #94a3b8);
}

/* Compact file picker rows for inbounds / outbounds editors */
.xk-fragment-row{
  align-items:center;
}
.xk-fragment-select{
  gap: 0;
}
.xk-fragment-select select.xray-log-select{
  min-height: 32px;
}

/* --- Routing (05_routing.json) compact header: selector inline with editor toolbar --- */
.xk-routing-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 8px 0 6px;
  flex-wrap:wrap;
}

/* Active fragment text inside the card header (same line as title) */
.xk-routing-active-inline{
  font-size: 12px;
  color: var(--muted, #94a3b8);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xk-routing-active-inline code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
.xk-routing-fileblock{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 260px;
  flex: 1 1 360px;
}
.xk-routing-filemeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.xk-routing-filemeta .hint-label{
  font-size: 12px;
  color: var(--muted, #94a3b8);
}
.xk-routing-fileline{
  display:flex;
  align-items:center;
  gap:8px;
}

.xk-routing-fileline .xray-log-select{
  min-height: 34px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

/* Routing topbar: header badges are reused here, but we don't want the default left margin. */
.xk-routing-fileline .xray-profile-badge{
  margin-left: 0;
}

/* Routing topbar: compact ⋯ menu content */
.xk-routing-menu-panel .dt-log-menu-key{
  font-size: 12px;
  color: var(--muted, #94a3b8);
}

.xk-routing-menu-panel code{
  display:inline-block;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xk-routing-toolbararea{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex: 0 0 auto;
}

/* Routing topbar menu trigger: match Terminal menu button (small, neat). */
.xk-routing-menu > summary{
  border-radius: 9999px;
}
.xk-routing-menu-trigger{
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--xk-font-scale));
  line-height: 1;
}

/* Override dt-log-menu open styling to avoid a huge blue ring */
.xk-routing-menu[open] > summary{
  box-shadow: none;
  border-color: var(--header-tab-active-bg, rgba(59, 130, 246, 0.65));
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 24%, transparent);
}

/* Xray/Mihomo topbar menu panels: premium glass surface. */
.xk-routing-menu-panel,
.xk-mihomo-menu-panel{
  min-width: 280px;
  max-width: 388px;
  padding: 14px;
  border-radius: 22px;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #60a5fa) 24%, rgba(148, 163, 184, 0.26));
  background:
    linear-gradient(180deg, rgba(8, 20, 46, 0.92), rgba(3, 10, 28, 0.90)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.22), transparent 45%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 24px 60px rgba(2, 6, 23, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(148, 163, 184, 0.06);
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 90;
  box-sizing: border-box;
}

/* Prevent accidental horizontal overflow inside the menu panel */
.xk-routing-menu-panel *,
.xk-mihomo-menu-panel *{ box-sizing: border-box; }

.xk-routing-menu-panel .terminal-menu-section,
.xk-mihomo-menu-panel .terminal-menu-section{
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(10, 22, 48, 0.68), rgba(6, 14, 33, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(2, 6, 23, 0.18);
}

.xk-routing-menu-panel .terminal-menu-title,
.xk-mihomo-menu-panel .terminal-menu-title{
  margin: 0;
  font-size: calc(10px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted, #94a3b8) 88%, white 12%);
}

.xk-routing-menu-panel .terminal-menu-sep,
.xk-mihomo-menu-panel .terminal-menu-sep{
  height: 1px;
  margin: 0 4px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent);
}

.xk-routing-menu-panel code,
.xk-mihomo-menu-panel code{
  display:block;
  max-width: 100%;
  padding: 2px 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(13px * var(--xk-font-scale));
  line-height: 1.35;
  color: color-mix(in srgb, var(--text, #e5e7eb) 94%, white 6%);
}

/* Menu items in routing/mihomo menus: premium glass pills */
.xk-routing-menu-panel .terminal-tool-btn,
.xk-mihomo-menu-panel .terminal-tool-btn{
  position: relative;
  width: auto;
  align-self: stretch;
  text-align:left;
  border-radius: 14px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  line-height: 1.25;
  color: color-mix(in srgb, var(--text, #e5e7eb) 94%, white 6%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(2, 6, 23, 0.16);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.xk-routing-menu-panel .terminal-tool-btn:hover,
.xk-mihomo-menu-panel .terminal-tool-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 38%, rgba(148, 163, 184, 0.18));
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(15, 23, 42, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 28px rgba(2, 6, 23, 0.22);
}

.xk-routing-menu-panel .terminal-tool-btn:active,
.xk-mihomo-menu-panel .terminal-tool-btn:active{
  transform: translateY(0);
}

.xk-routing-menu-panel .terminal-tool-btn:focus-visible,
.xk-mihomo-menu-panel .terminal-tool-btn:focus-visible{
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 54%, rgba(148, 163, 184, 0.22));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 28px rgba(2, 6, 23, 0.22);
}



/* Mihomo editor: compact Save/Restart + ⋯ menu (match Routing Xray style) */
.xk-mihomo-toolbararea{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex: 0 0 auto;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}

/* Mihomo overflow menu trigger: small and neat (same sizing as routing menu). */
.xk-mihomo-menu > summary{
  border-radius: 9999px;
}
.xk-mihomo-menu-trigger{
  width: 34px;
  height: 28px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--xk-font-scale));
  line-height: 1;
}

/* Keep open-state subtle (avoid a huge blue ring). */
.xk-mihomo-menu[open] > summary{
  box-shadow: none;
  border-color: var(--header-tab-active-bg, rgba(59, 130, 246, 0.65));
  background: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 24%, transparent);
}

/* Mihomo overflow menu: open downwards (toolbar is at the top, like Routing Xray). */
.xk-mihomo-menu .dt-log-menu-panel{
  top: calc(100% + 8px);
  bottom: auto;
}

/* Mihomo menu select: glass pill, full-width, keep the custom arrow from .xray-log-select. */
.xk-mihomo-menu-panel .xray-log-select{
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 42px 10px 14px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.22);
  background-color: rgba(15, 23, 42, 0.30);
  color: color-mix(in srgb, var(--text, #e5e7eb) 94%, white 6%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(2, 6, 23, 0.16);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.xk-mihomo-menu-panel .xray-log-select:hover{
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 38%, rgba(148, 163, 184, 0.18));
  background-color: rgba(15, 23, 42, 0.38);
}
.xk-mihomo-menu-panel .xray-log-select:focus{
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 54%, rgba(148, 163, 184, 0.22));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 28px rgba(2, 6, 23, 0.22);
}

/* Mihomo editor: topbar layout (same density as Routing Xray) */
.xk-mihomo-topbar .xk-mihomo-toolbararea{
  margin: 0;
}

.xk-mihomo-toolbarhost{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}
.xk-mihomo-toolbarhost .xkeen-cm-toolbar{
  margin: 0;
  padding-right: 0;
}

/* Routing: primary Save button (vector icon, compact like Terminal menu) */
.xk-save-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  line-height: 1;
}
.xk-save-btn .xk-btn-icon{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.xk-save-btn .xk-btn-label{
  font-weight: 700;
  letter-spacing: .01em;
}
.xk-save-btn.xk-icon-btn{
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 9999px;
}
.xk-save-btn.xk-icon-btn .xk-btn-label{
  display:none;
}
.xk-save-btn.xk-icon-btn .xk-btn-icon{
  width: 18px;
  height: 18px;
}
.xk-save-btn-primary{
  border-color: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 58%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #60a5fa) 88%, white 12%), color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 92%, black 8%));
  color: #eff6ff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 40%, transparent);
}
.xk-save-btn-primary:hover{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #60a5fa) 92%, white 8%), color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 96%, black 4%));
}
.xk-save-btn.terminal-tool-btn-danger.xk-icon-btn{
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 9999px;
}
.xk-save-btn.terminal-tool-btn-danger.xk-icon-btn .xk-btn-label{
  display: none;
}
.xk-save-btn.terminal-tool-btn-danger.xk-icon-btn .xk-btn-icon{
  width: 18px;
  height: 18px;
}

/* Xray/Mihomo editor topbars: keep Save/Reset/Menu slightly denser so they do not look larger than the editor-engine select. */
.xk-routing-toolbararea .xk-save-btn.xk-icon-btn,
.xk-routing-toolbararea .xk-save-btn.terminal-tool-btn-danger.xk-icon-btn,
.xk-routing-toolbararea .xk-routing-menu-trigger{
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

.xk-routing-toolbararea .xk-save-btn.xk-icon-btn .xk-btn-icon,
.xk-routing-toolbararea .xk-save-btn.terminal-tool-btn-danger.xk-icon-btn .xk-btn-icon{
  width: 16px;
  height: 16px;
}

.xk-mihomo-toolbararea .xk-save-btn:not(.xk-icon-btn){
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  gap: 7px;
}

.xk-mihomo-toolbararea .xk-save-btn .xk-btn-icon{
  width: 16px;
  height: 16px;
}

.xk-mihomo-toolbararea .xk-mihomo-menu-trigger{
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  font-size: calc(15px * var(--xk-font-scale));
}

.xk-reset-btn{
  border-color: color-mix(in srgb, var(--editor-btn-border, #1f2937) 92%, transparent);
  background: color-mix(in srgb, var(--editor-btn-bg, #020617) 82%, white 18%);
}
.xk-reset-btn:hover{
  background: color-mix(in srgb, var(--editor-btn-hover-bg, #0f172a) 88%, white 12%);
}
.xk-reset-btn:disabled{
  opacity: .55;
  box-shadow: none;
}

/* Switch in routing menu: full-width pill like other menu items */
.xk-routing-menu-panel .dt-switch{
  width: auto;
  align-self: stretch;
  justify-content: flex-start;
  min-height: 48px;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(2, 6, 23, 0.14);
}
.xk-routing-menu-panel .dt-switch-label{
  opacity: 1;
  font-weight: 600;
}

.xk-routing-menu-panel .dt-switch:hover{
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 34%, rgba(148, 163, 184, 0.18));
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(15, 23, 42, 0.34);
}

.xk-routing-menu-panel .dt-switch .dt-switch-slider{
  flex: 0 0 auto;
}

.xk-routing-menu-panel .terminal-menu-section[aria-label="GitHub"] .terminal-tool-btn{
  border-color: rgba(96, 165, 250, 0.20);
}

/* Routing JSON editor menu: keep it narrower and denser than the Mihomo menu. */
.xk-routing-menu-panel{
  width: min(332px, calc(100vw - 28px));
  min-width: 252px;
  max-width: 332px;
  padding: 12px;
  gap: 10px;
}

.xk-routing-menu-panel .terminal-menu-section{
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
}

.xk-routing-menu-panel .terminal-menu-title{
  font-size: calc(9.5px * var(--xk-font-scale));
}

.xk-routing-menu-panel code{
  padding: 1px 1px 0;
  font-size: calc(12.25px * var(--xk-font-scale));
}

.xk-routing-menu-panel .terminal-tool-btn,
.xk-routing-menu-panel .dt-switch{
  border-radius: 12px;
  padding: 9px 12px;
}

.xk-routing-menu-panel .terminal-tool-btn{
  gap: 8px;
}

.xk-routing-menu-panel .dt-switch{
  min-height: 44px;
}

html[data-theme="light"] .xk-routing-menu-panel,
html[data-theme="light"] .xk-mihomo-menu-panel{
  border-color: rgba(59, 130, 246, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.93)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 46%);
  box-shadow:
    0 24px 52px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

html[data-theme="light"] .xk-routing-menu-panel .terminal-menu-section,
html[data-theme="light"] .xk-mihomo-menu-panel .terminal-menu-section{
  border-color: rgba(148, 163, 184, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 249, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .xk-routing-menu-panel .terminal-menu-title,
html[data-theme="light"] .xk-mihomo-menu-panel .terminal-menu-title{
  color: #64748b;
}

html[data-theme="light"] .xk-routing-menu-panel code,
html[data-theme="light"] .xk-mihomo-menu-panel code{
  color: #0f172a;
}

html[data-theme="light"] .xk-routing-menu-panel .terminal-tool-btn,
html[data-theme="light"] .xk-routing-menu-panel .dt-switch,
html[data-theme="light"] .xk-mihomo-menu-panel .terminal-tool-btn,
html[data-theme="light"] .xk-mihomo-menu-panel .xray-log-select{
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.28);
  background-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 8px 18px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .xk-routing-menu-panel .terminal-tool-btn,
html[data-theme="light"] .xk-routing-menu-panel .dt-switch,
html[data-theme="light"] .xk-mihomo-menu-panel .terminal-tool-btn{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(237, 242, 247, 0.72)),
    rgba(255, 255, 255, 0.42);
}

html[data-theme="light"] .xk-routing-menu-panel .terminal-tool-btn:hover,
html[data-theme="light"] .xk-routing-menu-panel .dt-switch:hover,
html[data-theme="light"] .xk-mihomo-menu-panel .terminal-tool-btn:hover,
html[data-theme="light"] .xk-mihomo-menu-panel .xray-log-select:hover{
  border-color: rgba(59, 130, 246, 0.26);
  background-color: rgba(255, 255, 255, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 22px rgba(59, 130, 246, 0.10);
}

html[data-theme="light"] .xk-routing-menu-panel .terminal-tool-btn:hover,
html[data-theme="light"] .xk-routing-menu-panel .dt-switch:hover,
html[data-theme="light"] .xk-mihomo-menu-panel .terminal-tool-btn:hover{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 234, 254, 0.76)),
    rgba(255, 255, 255, 0.50);
}

.xk-routing-toolbarhost{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}
/* When the CodeMirror toolbar is moved into the host, remove its default bottom margin */
.xk-routing-toolbarhost .xkeen-cm-toolbar{
  margin: 0;
  padding-right: 0;
}

/* Compact help link under the topbar */
.xk-help-line{
  margin: 6px 0 6px;
  opacity: 0.9;
}

/* ===================== Xray routing extra cards (DAT + Rules) ===================== */

/* Three-column layout (20/60/20) */
.layout-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}

.routing-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.routing-side {
  min-width: 0;
}

.routing-side-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.routing-side-grid > .card {
  margin-top: 0;
  min-width: 0;
}


.routing-side-grid table {
  table-layout: fixed;
}

.routing-side-grid th,
.routing-side-grid td {
  word-break: break-word;
}

.routing-side-grid .backup-actions {
  flex-wrap: wrap;
}

.routing-side-grid .links a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.routing-side-grid code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.routing-side-grid .mode-item > div {
  min-width: 0;
}

.routing-side-grid .mode-item small {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .layout-3col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Rules card */
.routing-rules-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 12px;
}

.routing-rules-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  font-size: calc(12px * var(--xk-font-scale));
}

.routing-rules-dot {
  opacity: 0.6;
}

.routing-rules-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1 1 320px;
  justify-content: flex-end;
}

.routing-rules-config {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: rgba(2, 6, 23, 0.6);
}

.routing-rules-settings {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

/* Keep domainStrategy inline (compact) */
.routing-rules-settings .routing-rule-field {
  grid-template-columns: auto auto;
  align-items: center;
}

.routing-rules-settings select.routing-domain-strategy-select {
  width: 220px;
  max-width: min(320px, 50vw);
  flex: 0 0 auto;
}

.routing-rules-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  white-space: nowrap;
}

.routing-rules-actions .btn-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 6px 10px;
  font-size: calc(16px * var(--xk-font-scale));
  line-height: 1;
}

/* Visual indicator for unsaved changes (previously "*") */
.routing-rules-actions #routing-rules-apply-btn.is-dirty {
  border-color: color-mix(in srgb, #f59e0b 60%, rgba(51,65,85,0.9));
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 8px 20px rgba(15, 23, 42, 0.85);
}

@media (max-width: 720px) {
  .routing-rules-settings select.routing-domain-strategy-select {
    width: 100%;
    max-width: 100%;
  }
  .routing-rules-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }
}

.routing-rules-filter {
  flex: 1 1 260px;
  min-width: 220px;
  border-radius: 9999px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 8px 12px;
  font-size: calc(13px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.routing-rules-filter:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

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

.routing-rule-card {
  --routing-rule-accent-rgb: 96, 165, 250;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(var(--routing-rule-accent-rgb), 0.18);
  background:
    radial-gradient(circle at 0 0, rgba(var(--routing-rule-accent-rgb), 0.12), transparent 42%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.72));
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.38);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.routing-rule-card > * {
  position: relative;
  z-index: 1;
}

.routing-rule-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(var(--routing-rule-accent-rgb), 0.95), rgba(var(--routing-rule-accent-rgb), 0.28));
  opacity: 0.9;
}

.routing-rule-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.routing-rule-card.is-target-balancer {
  --routing-rule-accent-rgb: 34, 197, 94;
}

.routing-rule-card.is-target-direct {
  --routing-rule-accent-rgb: 45, 212, 191;
}

.routing-rule-card.is-target-block {
  --routing-rule-accent-rgb: 248, 113, 113;
}

.routing-rule-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--routing-rule-accent-rgb), 0.42);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.52), 0 0 0 1px rgba(var(--routing-rule-accent-rgb), 0.10);
}

.routing-rule-card[data-open="1"] {
  border-color: rgba(var(--routing-rule-accent-rgb), 0.48);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.54), 0 0 0 1px rgba(var(--routing-rule-accent-rgb), 0.12);
}

.routing-rule-card[data-open="1"]::before {
  width: 4px;
}

.routing-rule-card.is-disabled {
  --routing-rule-accent-rgb: 245, 158, 11;
  border-color: rgba(245, 158, 11, 0.35);
  background:
    radial-gradient(circle at 0 0, rgba(245, 158, 11, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(69, 26, 3, 0.32), rgba(15, 23, 42, 0.72));
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.4);
}

.routing-rule-card.is-disabled:hover {
  border-color: rgba(245, 158, 11, 0.52);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.5), 0 0 0 1px rgba(245, 158, 11, 0.14);
}

.routing-rule-card.is-draggable {
  cursor: grab;
  user-select: none;
}

.routing-rule-card.is-draggable:active {
  cursor: grabbing;
}

.routing-rule-grid[data-dnd-mode="pointer"] .routing-rule-card.is-draggable,
.routing-rule-grid[data-dnd-mode="pointer"] .routing-rule-card.is-draggable:active {
  cursor: default;
}

.routing-rule-card.is-dragging {
  opacity: 0.35;
  transform: none;
}

.xk-pointer-dnd-active {
  user-select: none;
}

.xk-pointer-dnd-active .routing-rule-card {
  transition: none !important;
}

.xk-pointer-dnd-active .routing-rule-card:hover {
  transform: none !important;
}

.routing-rule-card.is-pointer-ghost {
  opacity: 0.92;
  cursor: grabbing;
  pointer-events: none;
  transform: none;
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.65);
}

.routing-rule-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 8px;
  border: 1px solid #1f2937;
  background: rgba(2, 6, 23, 0.55);
  color: #93c5fd;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.routing-rule-handle:active {
  cursor: grabbing;
}

.routing-rule-handle:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.55);
}

.routing-rule-card.is-drop-before,
.routing-rule-card.is-drop-after {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45), 0 16px 30px rgba(2, 6, 23, 0.5);
}

.routing-rule-placeholder {
  border-radius: 12px;
  padding: 12px;
  border: 1px dashed rgba(59, 130, 246, 0.55);
  background: rgba(15, 23, 42, 0.45);
  color: #93c5fd;
  font-size: calc(12px * var(--xk-font-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.routing-rule-card.is-drop-pulse {
  animation: xk-routing-pulse 0.75s ease;
}

@keyframes xk-routing-pulse {
  0% {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.55), 0 16px 30px rgba(2, 6, 23, 0.5);
  }
  100% {
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.5);
  }
}


.routing-rule-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.routing-rule-main {
  /* Allow the left part of the header to shrink in flex rows.
     Without min-width:0 long match strings can push action buttons outside the card. */
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-rule-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  color: #e5e7eb;
  font-weight: 600;
  font-size: calc(14px * var(--xk-font-scale));
}

.routing-rule-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.36);
  background: rgba(37, 99, 235, 0.14);
  color: #93c5fd;
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 700;
}

.routing-rule-outbound {
  color: #e2e8f0;
  min-width: 0;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-rule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.routing-rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: rgba(15, 23, 42, 0.8);
  color: #cbd5f5;
  font-size: calc(11px * var(--xk-font-scale));
}

.routing-rule-badge.is-type {
  border-color: rgba(51, 65, 85, 0.9);
  color: #e2e8f0;
}

.routing-rule-badge.is-tag {
  border-color: rgba(37, 99, 235, 0.55);
  color: #bfdbfe;
}

.routing-rule-badge.is-geo {
  border-color: rgba(56, 189, 248, 0.55);
  color: #bae6fd;
}

.routing-rule-badge.is-target {
  border-color: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
  max-width: min(100%, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-rule-badge.is-target-outbound {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(37, 99, 235, 0.12);
  color: #bfdbfe;
}

.routing-rule-badge.is-target-balancer {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(22, 163, 74, 0.14);
  color: #bbf7d0;
}

.routing-rule-badge.is-target-direct {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(20, 184, 166, 0.13);
  color: #99f6e4;
}

.routing-rule-badge.is-target-block {
  border-color: rgba(248, 113, 113, 0.46);
  background: rgba(185, 28, 28, 0.16);
  color: #fecaca;
}

.routing-rule-badge.is-count {
  border-color: rgba(168, 85, 247, 0.35);
  color: #e9d5ff;
}

.routing-rule-badge.is-cond {
  border-color: rgba(148, 163, 184, 0.28);
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.55);
}

.routing-rule-badge.is-cond-domain {
  border-color: rgba(248, 113, 113, 0.38);
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
}

.routing-rule-badge.is-cond-ip {
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(30, 64, 175, 0.18);
  color: #bfdbfe;
}

.routing-rule-badge.is-cond-inbound {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(20, 83, 45, 0.20);
  color: #bbf7d0;
}

.routing-rule-badge.is-cond-port {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(120, 53, 15, 0.20);
  color: #fde68a;
}

.routing-rule-badge.is-cond-transport {
  border-color: rgba(168, 85, 247, 0.42);
  background: rgba(88, 28, 135, 0.18);
  color: #e9d5ff;
}

.routing-rule-badge.is-cond-meta {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(51, 65, 85, 0.20);
  color: #dbeafe;
}

.routing-rule-badge.is-disabled {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.routing-rule-badge.is-disabled-origin {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(2, 6, 23, 0.42);
  color: #fde68a;
  letter-spacing: 0.04em;
}

.routing-rule-disabled-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.18);
  background: rgba(245, 158, 11, 0.08);
}

.routing-rule-disabled-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.routing-rule-disabled-status-text {
  color: #fef3c7;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.45;
}

.routing-rule-disabled-note {
  color: #fcd34d;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.45;
}

.routing-rule-inline-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.routing-rule-tag-inline-btn {
  cursor: text;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.routing-rule-tag-inline-btn.is-editing {
  visibility: hidden;
}

.routing-rule-inline-input {
  position: absolute;
  inset: 0;
  display: none;
  min-width: 140px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.6);
  background: #020617;
  color: #e5e7eb;
  padding: 5px 10px;
  font-size: calc(12px * var(--xk-font-scale));
  font-family: inherit;
}

.routing-rule-inline-tag.is-editing .routing-rule-inline-input {
  display: block;
}

.routing-rule-cond-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routing-rule-summary {
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
}

.routing-rule-actions {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.routing-rule-actions button {
  font-size: calc(12px * var(--xk-font-scale));
}

/* Keep routing rule header controls compact in a single row */
.routing-rule-actions .routing-rule-toggle {
  height: 34px;
  padding: 6px 10px;
}

.routing-rule-actions .btn-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 6px 10px;
  font-size: calc(16px * var(--xk-font-scale));
  line-height: 1;
}

.routing-rule-toggle {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #1f2937;
  color: #cbd5f5;
}

.routing-rule-body {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.routing-rule-form {
  display: grid;
  gap: 10px;
}

.routing-rule-input,
.routing-rule-textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 8px 10px;
  font-size: calc(13px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-sizing: border-box;
}

.routing-rule-textarea {
  resize: vertical;
  min-height: 42px;
}

.routing-rule-input:focus,
.routing-rule-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

.routing-rule-textarea.is-invalid {
  border-color: #f97316;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.4);
}

.routing-rule-target {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed rgba(59, 130, 246, 0.24);
  background: rgba(2, 6, 23, 0.52);
}


.routing-rule-target-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

@media (max-width: 520px) {
  .routing-rule-target-pick {
    grid-template-columns: 1fr;
  }

  .routing-rule-add-field,
  .routing-rule-field {
    grid-template-columns: 1fr;
  }

  .routing-rule-add-field-label {
    padding-top: 0;
  }

  .routing-rule-add-field-controls {
    grid-template-columns: 1fr;
  }
}


.routing-rule-target-row {
  display: grid;
  grid-template-columns: auto minmax(90px, 120px) 1fr;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.routing-rule-target-row input[type="radio"] {
  accent-color: #60a5fa;
}

.routing-rule-target-row:has(input[type="radio"]:checked) {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(37, 99, 235, 0.10);
}

.routing-rule-target-row:has(input[value="balancer"]:checked) {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(22, 163, 74, 0.10);
}

.routing-rule-field {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr;
  gap: 10px;
  align-items: start;
}

.routing-rule-field-optional {
  grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 24px;
}

.routing-rule-field-optional .routing-rule-key {
  align-items: center;
  column-gap: 7px;
}

.routing-rule-field-optional .routing-rule-remove-field {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin-inline-start: 0;
}

.routing-rule-field[data-field-key] {
  --routing-field-accent-rgb: 148, 163, 184;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(var(--routing-field-accent-rgb), 0.20);
  background: rgba(2, 6, 23, 0.30);
}

.routing-rule-field[data-field-key="domain"],
.routing-rule-field[data-field-key="domainMatcher"] {
  --routing-field-accent-rgb: 248, 113, 113;
}

.routing-rule-field[data-field-key="ip"],
.routing-rule-field[data-field-key="sourceIP"],
.routing-rule-field[data-field-key="localIP"] {
  --routing-field-accent-rgb: 59, 130, 246;
}

.routing-rule-field[data-field-key="inboundTag"] {
  --routing-field-accent-rgb: 34, 197, 94;
}

.routing-rule-field[data-field-key="port"],
.routing-rule-field[data-field-key="sourcePort"],
.routing-rule-field[data-field-key="localPort"] {
  --routing-field-accent-rgb: 245, 158, 11;
}

.routing-rule-field[data-field-key="network"],
.routing-rule-field[data-field-key="protocol"],
.routing-rule-field[data-field-key="vlessRoute"] {
  --routing-field-accent-rgb: 168, 85, 247;
}

.routing-rule-field[data-field-key] .routing-rule-key {
  color: rgb(var(--routing-field-accent-rgb));
}

.routing-rule-remove-field {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-inline-start: 3px;
  border-radius: 999px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: rgba(15, 23, 42, 0.75);
  color: #cbd5e1;
  cursor: pointer;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.routing-rule-remove-field:hover {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

.routing-rule-add-field {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(96, 165, 250, 0.24);
  background: rgba(15, 23, 42, 0.26);
}

.routing-rule-add-field-label {
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 10px;
}

.routing-rule-add-field-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.routing-rule-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
  letter-spacing: 0.04em;
}

.routing-rule-key > span {
  text-transform: uppercase;
}

.routing-rule-target-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: calc(12px * var(--xk-font-scale));
  letter-spacing: 0.04em;
}

.routing-rule-target-label > span {
  text-transform: uppercase;
}



.routing-help-btn,
.routing-help-tip {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  border: 1px solid #374151;
  background: rgba(15, 23, 42, 0.7);
  color: #cbd5f5;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1;
  padding: 0;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  user-select: none;
  touch-action: manipulation;
}

.routing-help-tip {
  position: relative;
  z-index: 2;
}

.routing-help-btn {
  cursor: pointer;
}

.routing-help-btn:hover,
.routing-help-tip:hover {
  border-color: #3b82f6;
  color: #e0f2fe;
}

.routing-help-body p {
  margin: 0 0 10px;
}

.routing-help-body ul {
  margin: 0 0 10px 18px;
  padding: 0;
}

.routing-help-body li {
  margin-bottom: 6px;
}

.routing-help-note {
  font-size: calc(12px * var(--xk-font-scale));
  opacity: 0.75;
}

html[data-theme="light"] .routing-help-btn,
html[data-theme="light"] .routing-help-tip {
  background: rgba(255, 255, 255, 0.9);
  border-color: #cbd5e1;
  color: #334155;
}

html[data-theme="light"] .routing-help-btn:hover,
html[data-theme="light"] .routing-help-tip:hover {
  border-color: #2563eb;
  color: #0f172a;
}

.routing-rule-card[data-open="0"] .routing-rule-body {
  display: none;
}

.routing-chip-editor {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 6px 10px;
  min-height: 42px;
  cursor: text;
}

.routing-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.routing-chip-input {
  flex: 1 1 140px;
  min-width: 140px;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-size: calc(13px * var(--xk-font-scale));
  padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.routing-chip-input::placeholder {
  color: #6b7280;
}

.routing-chip-editor:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

.routing-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: rgba(15, 23, 42, 0.72);
  color: #e5e7eb;
  padding: 4px 9px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.2;
}

.routing-rule-field[data-field-key] .routing-chip {
  border-color: rgba(var(--routing-field-accent-rgb), 0.38);
  background: rgba(var(--routing-field-accent-rgb), 0.13);
}

.routing-rule-field[data-field-key="domain"] .routing-chip,
.routing-rule-field[data-field-key="domainMatcher"] .routing-chip {
  color: #fecaca;
}

.routing-rule-field[data-field-key="ip"] .routing-chip,
.routing-rule-field[data-field-key="sourceIP"] .routing-chip,
.routing-rule-field[data-field-key="localIP"] .routing-chip {
  color: #bfdbfe;
}

.routing-rule-field[data-field-key="inboundTag"] .routing-chip {
  color: #bbf7d0;
}

.routing-rule-field[data-field-key="port"] .routing-chip,
.routing-rule-field[data-field-key="sourcePort"] .routing-chip,
.routing-rule-field[data-field-key="localPort"] .routing-chip {
  color: #fde68a;
}

.routing-rule-field[data-field-key="network"] .routing-chip,
.routing-rule-field[data-field-key="protocol"] .routing-chip,
.routing-rule-field[data-field-key="vlessRoute"] .routing-chip {
  color: #e9d5ff;
}

.routing-chip-text {
  overflow-wrap: anywhere;
}

.routing-chip-remove {
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: calc(14px * var(--xk-font-scale));
  line-height: 1;
  padding: 0;
}

.routing-chip-remove:hover {
  color: #fca5a5;
}

.routing-rule-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routing-rule-tag {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: rgba(2, 6, 23, 0.9);
  color: #e5e7eb;
  font-size: calc(12px * var(--xk-font-scale));
}

.routing-rule-tag.is-more {
  border-style: dashed;
  color: #93c5fd;
}

.routing-rule-empty {
  color: #9ca3af;
  font-size: calc(12px * var(--xk-font-scale));
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Unified error box (Routing Rules / reusable) */
.xk-error-box {
  grid-column: 1 / -1; /* works inside grid lists (rules) */
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.12);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.35);
}

.xk-error-box.is-compact {
  padding: 10px;
}

.xk-error-title {
  font-weight: 700;
  color: #fecaca;
  margin-bottom: 6px;
  font-size: calc(13px * var(--xk-font-scale));
}

.xk-error-msg {
  color: #e5e7eb;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: calc(12px * var(--xk-font-scale));
}

.xk-error-hint {
  margin-top: 6px;
  color: #fca5a5;
  opacity: 0.95;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: calc(12px * var(--xk-font-scale));
}

.xk-error-details {
  margin-top: 8px;
}

.xk-error-details code,
.xk-error-code code {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: rgba(2, 6, 23, 0.65);
  color: #cbd5e1;
  font-size: calc(11px * var(--xk-font-scale));
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xk-error-code {
  margin-top: 8px;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
}

.xk-error-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

html[data-theme="light"] .xk-error-box {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 226, 226, 0.85);
  box-shadow: 0 10px 20px rgba(148, 163, 184, 0.25);
}

html[data-theme="light"] .xk-error-title {
  color: #991b1b;
}

html[data-theme="light"] .xk-error-msg {
  color: #334155;
}

html[data-theme="light"] .xk-error-hint {
  color: #b91c1c;
}

html[data-theme="light"] .xk-error-details code,
html[data-theme="light"] .xk-error-code code {
  background: rgba(255, 255, 255, 0.9);
  border-color: #cbd5e1;
  color: #334155;
}

html[data-theme="light"] .xk-error-code {
  color: #64748b;
}
.routing-balancers {
  margin-bottom: 12px;
}

.routing-balancers-title {
  color: #e5e7eb;
  font-weight: 600;
  margin-bottom: 6px;
}

.routing-balancers-grid {
  display: grid;
  gap: 10px;
}

.routing-balancer-card {
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #1f2937;
  background: rgba(2, 6, 23, 0.7);
}

.routing-balancer-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.9);
}

.routing-balancer-title {
  color: #e5e7eb;
  font-weight: 600;
}

.routing-balancer-titleblock{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.routing-balancer-meta{
  opacity: 0.95;
}

.routing-balancer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* UI parity (balancer card): i-icon + pill "Подробнее" */
.routing-balancer-info-btn{
  border-radius: 9999px;
  font-weight: 700;
  font-size: calc(14px * var(--xk-font-scale));
}

.routing-balancer-more-btn{
  border-radius: 9999px;
  padding: 6px 14px;
  height: 34px;
  line-height: 1;
}

.routing-balancer-body {
  margin-top: 12px;
}

/* Selector field: textarea with inline "expand" button */
.routing-balancer-selector-wrap{
  position: relative;
}

.routing-balancer-selector-ta{
  min-height: 120px;
  padding-right: 46px;
}

.routing-balancer-selector-expand{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 9999px;
}


/* Balancer selector: UI/Raw toggle + chips + search dropdown */
.routing-selector-fieldwrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routing-selector-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.routing-selector-mode{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.routing-selector-mode-btn{
  height: 30px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
}

.routing-selector-mode-btn.is-active{
  background: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 14%, transparent);
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 35%, transparent);
}

.routing-selector-top-right{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.routing-selector-count{
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  opacity: 0.95;
  white-space: nowrap;
}

.routing-selector-refresh-btn{
  border-radius: 9999px;
}

.routing-selector-prefix-hint{
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 1px solid rgba(51,65,85,0.85);
  background: rgba(15, 23, 42, 0.55);
  color: var(--muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
  cursor: help;
  user-select: none;
}

.routing-selector-prefix-hint:hover{
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 35%, transparent);
  color: #e0f2fe;
}

html[data-theme="light"] .routing-selector-prefix-hint{
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--border, rgba(15,23,42,0.18));
  color: var(--muted, #64748b);
}

html[data-theme="light"] .routing-selector-prefix-hint:hover{
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 35%, transparent);
  color: var(--text, #0f172a);
}

.routing-selector-ui-wrap{
  position: relative;
}

.routing-selector-chipfield{
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
}

.routing-selector-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid rgba(51,65,85,0.9);
  background: color-mix(in srgb, var(--card-bg, #020617) 55%, transparent);
  color: #e5e7eb;
  padding: 4px 8px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
}

.routing-selector-chip.is-missing{
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

.routing-selector-chip-text{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.routing-selector-chip-x{
  border: none;
  background: transparent;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  font-size: calc(14px * var(--xk-font-scale));
  line-height: 1;
  padding: 0;
}

.routing-selector-chip-x:hover{
  color: var(--sem-error, #f87171);
}

.routing-selector-entry{
  flex: 1;
  min-width: 140px;
  border: none;
  outline: none;
  background: transparent;
  color: #e5e7eb;
  font-size: calc(13px * var(--xk-font-scale));
  padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.routing-selector-entry::placeholder{
  color: var(--muted, #6b7280);
}

.routing-selector-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  border-radius: 12px;
  border: 1px solid var(--modal-border, rgba(51,65,85,0.85));
  background: var(--modal-bg, color-mix(in srgb, var(--card-bg, #020617) 92%, transparent));
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  padding: 8px;
  max-height: 260px;
  overflow: auto;
}

.routing-selector-panel.hidden{
  display: none;
}

.routing-selector-panel-title{
  font-size: calc(11px * var(--xk-font-scale));
  color: var(--muted, #94a3b8);
  padding: 2px 4px 8px 4px;
}

.routing-selector-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-selector-item{
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #e5e7eb);
  cursor: pointer;
  font-size: calc(12px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.routing-selector-item:hover{
  background: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 10%, transparent);
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 25%, transparent);
}

.routing-selector-item.is-selected{
  background: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 14%, transparent);
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 35%, transparent);
}

.routing-selector-item.is-missing{
  border-color: rgba(248, 113, 113, 0.35);
}

.routing-selector-item-right{
  color: var(--muted, #94a3b8);
  min-width: 18px;
  text-align: right;
}

.routing-selector-empty{
  color: var(--muted, #94a3b8);
  font-size: calc(12px * var(--xk-font-scale));
  padding: 6px 4px;
}

html[data-theme="light"] .routing-selector-chipfield{
  background: var(--card-bg, #ffffff);
  border-color: var(--border, rgba(15,23,42,0.18));
  color: var(--text, #0f172a);
}

html[data-theme="light"] .routing-selector-entry{
  color: var(--text, #0f172a);
}

html[data-theme="light"] .routing-selector-chip{
  background: color-mix(in srgb, var(--card-bg, #ffffff) 85%, transparent);
  border-color: var(--border, rgba(15,23,42,0.18));
  color: var(--text, #0f172a);
}

html[data-theme="light"] .routing-selector-item{
  color: var(--text, #0f172a);
}

.routing-strategy-wrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-strategy-presets{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.routing-strategy-chip{
  height: 28px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1;
}

.routing-strategy-chip.is-active{
  background: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 14%, transparent);
  border-color: color-mix(in srgb, var(--editor-btn-active-to, #2563eb) 35%, transparent);
}

/* Forced rules wizard chips (domains / IP values) */
.xk-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--fg, #e5e7eb);
  font-size: 12px;
  line-height: 1.35;
  cursor:pointer;
  user-select:none;
  white-space: nowrap;
}
.xk-chip:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.18);
}
html[data-theme="light"] .xk-chip{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.06);
  color: var(--fg, #111827);
}
html[data-theme="light"] .xk-chip:hover{
  background: rgba(0,0,0,.09);
  border-color: rgba(0,0,0,.18);
}


.routing-observatory-warning{
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sem-warning, #f59e0b) 45%, transparent);
  background: color-mix(in srgb, var(--sem-warning, #f59e0b) 12%, transparent);
  color: var(--sem-warning, #fbbf24);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.routing-observatory-warning-text{
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
  color: inherit;
  flex: 1 1 auto;
}

.routing-observatory-warning-actions{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

html[data-theme="light"] .routing-observatory-warning{
  background: color-mix(in srgb, var(--sem-warning, #b45309) 10%, transparent);
  border-color: color-mix(in srgb, var(--sem-warning, #b45309) 35%, transparent);
  color: var(--sem-warning, #b45309);
}


.routing-balancer-json-ta{
  min-height: 78px;
}

.routing-balancer-card[data-open="0"] .routing-balancer-body {
  display: none;
}

/* DAT card */
.routing-dat-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.routing-dat-toolbar-left {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.routing-dat-toolbar-left::-webkit-scrollbar { display: none; }

.routing-dat-toolbar .status{
  margin-top: 0;
  white-space: nowrap;
}


.routing-dat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.routing-dat-item {
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #1f2937;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.5));
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.4);
}

.routing-dat-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.routing-dat-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.routing-dat-name {
  font-weight: 600;
  color: #e5e7eb;
  font-size: calc(14px * var(--xk-font-scale));
}

.routing-dat-file {
  font-size: calc(12px * var(--xk-font-scale));
  color: #94a3b8;
}

.routing-dat-meta {
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
}

.routing-dat-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  color: #9ca3af;
  font-size: calc(12px * var(--xk-font-scale));
}

.routing-dat-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 8px 10px;
  font-size: calc(13px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-sizing: border-box;
}

.routing-dat-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

/* DAT: combobox (input + ▼ popover) */
.routing-dat-combo{
  position: relative;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.routing-dat-combo .routing-dat-input{
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.routing-dat-combo-btn{
  flex: 0 0 auto;
  width: 40px;
  padding: 0;
  border-radius: 10px;
}

/* turn found list into a popover inside combo */
.routing-dat-combo .routing-dat-found{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin-top: 0;
  z-index: 50;
  display: none;
  max-height: 180px;
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.55);
}

.routing-dat-combo.is-open .routing-dat-found{
  display: block;
}

.routing-dat-select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 8px 10px;
  font-size: calc(13px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-sizing: border-box;
  appearance: none;
}

.routing-dat-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

.routing-dat-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.routing-dat-found {
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #9ca3af;
  font-size: calc(12px * var(--xk-font-scale));
  padding: 6px;
  max-height: 140px;
  overflow: auto;
}

.routing-dat-found-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #e5e7eb;
  cursor: pointer;
  text-align: left;
}

.routing-dat-found-item:hover {
  background: rgba(59, 130, 246, 0.12);
}

.routing-dat-found-item.is-current {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.10);
}

.routing-dat-found-name {
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.routing-dat-found-meta {
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  white-space: nowrap;
  flex: 0 0 auto;
}

.routing-dat-found-empty {
  padding: 6px 8px;
  color: #9ca3af;
}

.routing-dat-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routing-dat-actions button {
  flex: 1 1 120px;
  font-size: calc(12px * var(--xk-font-scale));
}

.routing-dat-actions-muted button:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

/* DAT contents modal (GeoSite/GeoIP) */
.dat-contents-modal-content {
  max-width: 920px;
  width: min(94vw, 920px);
  padding: 10px 12px 12px 12px;
  /* Make height definite so inner panes can scroll reliably (tags/items lists). */
  height: 74vh;
  max-height: 74vh;
}

.dat-contents-modal-content .modal-body {
  margin-top: 6px;
  margin-bottom: 8px;
}

.dat-contents-modal-body {
  /* Avoid double scroll: lists scroll inside their panes. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dat-contents-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.dat-contents-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dat-contents-kind {
  font-size: calc(12px * var(--xk-font-scale));
  color: #93c5fd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dat-contents-path {
  font-size: calc(12px * var(--xk-font-scale));
  color: #e5e7eb;
}

/* Two-pane layout with independent scrolling. */
.dat-contents-layout {
  display: grid;
  grid-template-columns: 348px 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 6px;
  flex: 1;
  min-height: 0;
}

.dat-contents-tags,
.dat-contents-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}

.dat-contents-tags {
  max-width: none;
}

.dat-contents-items {
  flex: 1 1 auto;
}

.dat-contents-tags-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Two compact search inputs (tag + value) in DAT contents modal */
.dat-contents-search-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.dat-contents-search-row .routing-dat-input {
  flex: 1 1 0;
  min-width: 0;
}

.dat-contents-status {
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
  min-height: 16px;
}

.dat-contents-tags-list {
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 8px;
  background: rgba(2, 6, 23, 0.35);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.dat-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.dat-tag-row:last-child {
  margin-bottom: 0;
}

.dat-tag-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 4px 6px;
  padding: 0 6px;
}

.dat-tag-group-head:first-child {
  margin-top: 0;
}

.dat-tag-group-head.is-secondary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.dat-tag-group-title {
  min-width: 0;
  font-size: calc(10px * var(--xk-font-scale));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93c5fd;
}

.dat-tag-group-head.is-secondary .dat-tag-group-title {
  color: #94a3b8;
}

.dat-tag-group-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background: rgba(15, 23, 42, 0.46);
  color: #dbeafe;
  font-size: calc(11px * var(--xk-font-scale));
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dat-tag-group-head.is-secondary .dat-tag-group-count {
  border-color: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

.dat-tag-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  padding: 5px 9px;
  border-radius: 10px;
  font-size: calc(12px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dat-tag-count {
  min-width: 44px;
  text-align: right;
  font-size: calc(12px * var(--xk-font-scale));
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: rgba(15, 23, 42, 0.35);
}


.dat-tag-used {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.78);
  flex: 0 0 auto;
  opacity: 0.84;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.dat-tag-used.is-on,
.dat-tag-row.is-used .dat-tag-used {
  background: linear-gradient(180deg, #34d399, #16a34a);
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 78%, #dcfce7 22%);
  opacity: 1;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.18),
    0 0 12px rgba(34, 197, 94, 0.42),
    inset 0 0 0 1px rgba(240, 253, 244, 0.42);
}

.dat-tag-copy {
  width: 36px;
  padding: 5px 0;
  border-radius: 10px;
  font-size: calc(12px * var(--xk-font-scale));
}

.dat-contents-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.dat-contents-controls .btn-secondary {
  min-width: 40px;
  padding: 6px 8px;
}

.dat-tag-row.is-active .dat-tag-main {
  outline: 1px solid rgba(59, 130, 246, 0.55);
}

.dat-contents-items-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dat-contents-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dat-contents-items-search-row {
  display: flex;
  gap: 6px;
  align-items: center;
  /* Keep search input + mode buttons on one line (desktop). */
  flex-wrap: nowrap;
}

.dat-contents-search-mode {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dat-contents-search-mode .btn-secondary {
  padding: 6px 10px;
  white-space: nowrap;
}

.dat-contents-search-mode .btn-secondary.is-active {
  background: var(--editor-btn-hover-bg);
  border-color: var(--sem-info);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35) inset;
}

/* GeoIP quick IP-version chips (v4/v6/all) */
.dat-contents-ipfilter {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dat-contents-ipfilter .btn-secondary {
  padding: 5px 9px;
  border-radius: 999px;
  line-height: 1;
  min-width: 0;
  white-space: nowrap;
  opacity: 0.92;
}

.dat-contents-ipfilter .btn-secondary:hover {
  opacity: 1;
}

.dat-contents-ipfilter .btn-secondary.is-active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) inset;
}

.dat-contents-items-search-row .routing-dat-input {
  /* Don't stretch to full width; keep it neat and leave room for buttons. */
  flex: 0 1 520px;
  max-width: 560px;
  min-width: 220px;
}

/* On narrow layouts allow wrapping (mobile / small panels). */
@media (max-width: 980px) {
  .dat-contents-items-search-row {
    flex-wrap: wrap;
  }
  .dat-contents-items-search-row .routing-dat-input {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
}

.dat-contents-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dat-contents-selected-label {
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
}

.dat-contents-used-badge {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sem-success, #22c55e) 40%, #1f2937 60%);
  background: color-mix(in srgb, var(--sem-success, #22c55e) 12%, rgba(15, 23, 42, 0.35) 88%);
  color: color-mix(in srgb, var(--sem-success, #22c55e) 60%, #e5e7eb 40%);
  font-size: calc(11px * var(--xk-font-scale));
  font-weight: 600;
  white-space: nowrap;
}

.dat-contents-used-badge.is-on {
  display: inline-flex;
}

/* PR3: compact "add to routing" bar inside DAT contents modal */
.dat-contents-routingbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  margin-top: 6px;
  margin-bottom: 6px;
  border: 1px solid #1f2937;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.25);
}

.dat-contents-routing-label {
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
  white-space: nowrap;
}

.dat-contents-select {
  height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

#routing-dat-contents-target-rule {
  flex: 1 1 260px;
}

#routing-dat-contents-target-outbound {
  width: 180px;
}

.dat-contents-routingbar .dat-contents-status {
  margin-left: auto;
  white-space: nowrap;
}

.dat-contents-items-list {
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 8px;
  background: rgba(2, 6, 23, 0.2);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.dat-item-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.5);
}

.dat-item-row:last-child {
  border-bottom: 0;
}

.dat-item-type {
  font-size: calc(12px * var(--xk-font-scale));
  color: #93c5fd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dat-item-value {
  font-size: calc(12px * var(--xk-font-scale));
  color: #e5e7eb;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dat-contents-empty {
  padding: 8px;
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
}

.dat-contents-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.dat-contents-pager-inline {
  gap: 6px;
}

.dat-contents-page-info {
  font-size: calc(12px * var(--xk-font-scale));
  color: #9ca3af;
  min-width: 120px;
  text-align: center;
}

@media (max-width: 820px) {
  .dat-contents-layout {
    grid-template-columns: 1fr;
  }
  .dat-contents-tags {
    max-width: none;
  }
  /* Keep both panes usable on small screens */
  .dat-contents-tags-list {
    max-height: 30vh;
  }
  .dat-contents-items-list {
    max-height: 32vh;
  }
}

/* JSON modal used by routing cards */
.routing-json-textarea {
  width: 100%;
  min-height: 320px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  color: #e5e7eb;
  padding: 10px;
  font-size: calc(13px * var(--xk-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-sizing: border-box;
  resize: vertical;
}

.routing-json-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}

.routing-json-pre {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: rgba(2, 6, 23, 0.7);
  overflow-x: auto;
  font-size: calc(12px * var(--xk-font-scale));
}

@media (max-width: 920px) {
  .routing-rule-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .routing-rule-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }

  .routing-rules-controls {
    justify-content: stretch;
  }

  .routing-rule-grid {
    grid-template-columns: 1fr;
  }
}

/* === Светлая тема: доводим «Роутинг Xray» (правила / балансировщики / DAT) === */

/* Toolbar / фильтр / config bar */
html[data-theme="light"] .routing-rules-summary {
  color: #6b7280;
}

html[data-theme="light"] .routing-rules-config {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.035), rgba(15, 23, 42, 0.015));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

html[data-theme="light"] .routing-rules-filter {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

html[data-theme="light"] .routing-rules-filter::placeholder {
  color: #9ca3af;
}

/* Cards: rules */
html[data-theme="light"] .routing-rule-inline-input {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(37, 99, 235, 0.38);
}

html[data-theme="light"] .routing-rule-remove-field {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.35);
  color: #475569;
}

html[data-theme="light"] .routing-rule-remove-field:hover {
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

html[data-theme="light"] .routing-chip-editor {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

html[data-theme="light"] .routing-chip-input {
  color: #0f172a;
}

html[data-theme="light"] .routing-chip {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.28);
  color: #0f172a;
}

html[data-theme="light"] .routing-rule-badge.is-target {
  color: #166534;
}

html[data-theme="light"] .routing-rule-badge.is-count {
  color: #6b21a8;
}

html[data-theme="light"] .routing-rule-badge.is-cond {
  color: #334155;
}

html[data-theme="light"] .routing-rule-badge.is-disabled {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}

html[data-theme="light"] .routing-rule-badge.is-disabled-origin {
  border-color: rgba(217, 119, 6, 0.20);
  background: rgba(255, 255, 255, 0.78);
  color: #9a3412;
}

html[data-theme="light"] .routing-rule-disabled-status {
  border-color: rgba(217, 119, 6, 0.18);
  background: rgba(251, 191, 36, 0.12);
}

html[data-theme="light"] .routing-rule-disabled-status-chip {
  background: rgba(217, 119, 6, 0.14);
  color: #9a3412;
}

html[data-theme="light"] .routing-rule-disabled-status-text {
  color: #7c2d12;
}

html[data-theme="light"] .routing-rule-disabled-note {
  color: #92400e;
}

html[data-theme="light"] .routing-rule-card {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(15, 23, 42, 0.03));
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .routing-rule-card.is-disabled {
  border-color: rgba(217, 119, 6, 0.28);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(245, 158, 11, 0.08));
  box-shadow: inset 4px 0 0 rgba(217, 119, 6, 0.52), 0 12px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .routing-rule-card:hover {
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .routing-rule-card.is-disabled:hover {
  border-color: rgba(217, 119, 6, 0.36);
  box-shadow: inset 4px 0 0 rgba(180, 83, 9, 0.6), 0 16px 30px rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .routing-rule-card.is-drop-before,
html[data-theme="light"] .routing-rule-card.is-drop-after {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.32), 0 16px 30px rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .routing-rule-card.is-pointer-ghost {
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .routing-rule-placeholder {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(15, 23, 42, 0.03);
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-handle {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: #2563eb;
}

html[data-theme="light"] .routing-rule-title {
  color: #111827;
}

html[data-theme="light"] .routing-rule-index {
  color: #64748b;
}

html[data-theme="light"] .routing-rule-outbound {
  color: #0f172a;
}

html[data-theme="light"] .routing-rule-key,
html[data-theme="light"] .routing-rule-target-label {
  color: #64748b;
}

html[data-theme="light"] .routing-rule-badge {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.03);
  color: #334155;
}

html[data-theme="light"] .routing-rule-badge.is-tag {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-badge.is-geo {
  border-color: rgba(2, 132, 199, 0.28);
  background: rgba(2, 132, 199, 0.06);
  color: #0369a1;
}

html[data-theme="light"] .routing-rule-toggle {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.18);
  color: #111827;
}

html[data-theme="light"] .routing-rule-input,
html[data-theme="light"] .routing-rule-textarea {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

html[data-theme="light"] .routing-rule-target {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.02);
}

html[data-theme="light"] .routing-rule-tag {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.03);
  color: #0f172a;
}

html[data-theme="light"] .routing-rule-empty {
  color: #6b7280;
}

/* Балансировщики */
html[data-theme="light"] .routing-rule-index {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.07);
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-badge.is-target-outbound {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.07);
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-badge.is-target-balancer {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
}

html[data-theme="light"] .routing-rule-badge.is-target-direct {
  border-color: rgba(13, 148, 136, 0.24);
  background: rgba(13, 148, 136, 0.08);
  color: #0f766e;
}

html[data-theme="light"] .routing-rule-badge.is-target-block {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

html[data-theme="light"] .routing-rule-badge.is-cond-domain {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

html[data-theme="light"] .routing-rule-badge.is-cond-ip {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-badge.is-cond-inbound {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
}

html[data-theme="light"] .routing-rule-badge.is-cond-port {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(217, 119, 6, 0.09);
  color: #92400e;
}

html[data-theme="light"] .routing-rule-badge.is-cond-transport {
  border-color: rgba(126, 34, 206, 0.22);
  background: rgba(126, 34, 206, 0.08);
  color: #6b21a8;
}

html[data-theme="light"] .routing-rule-badge.is-cond-meta {
  border-color: rgba(71, 85, 105, 0.18);
  background: rgba(71, 85, 105, 0.06);
  color: #334155;
}

html[data-theme="light"] .routing-rule-target {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.025);
}

html[data-theme="light"] .routing-rule-target-row:has(input[type="radio"]:checked) {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
}

html[data-theme="light"] .routing-rule-target-row:has(input[value="balancer"]:checked) {
  border-color: rgba(22, 163, 74, 0.26);
  background: rgba(22, 163, 74, 0.06);
}

html[data-theme="light"] .routing-rule-field[data-field-key] {
  border-color: rgba(var(--routing-field-accent-rgb), 0.18);
  background: rgba(248, 250, 252, 0.74);
}

html[data-theme="light"] .routing-rule-field[data-field-key] .routing-chip {
  border-color: rgba(var(--routing-field-accent-rgb), 0.22);
  background: rgba(var(--routing-field-accent-rgb), 0.08);
}

html[data-theme="light"] .routing-rule-field[data-field-key="domain"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="domainMatcher"] .routing-chip {
  color: #b91c1c;
}

html[data-theme="light"] .routing-rule-field[data-field-key="ip"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="sourceIP"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="localIP"] .routing-chip {
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-field[data-field-key="inboundTag"] .routing-chip {
  color: #166534;
}

html[data-theme="light"] .routing-rule-field[data-field-key="port"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="sourcePort"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="localPort"] .routing-chip {
  color: #92400e;
}

html[data-theme="light"] .routing-rule-field[data-field-key="network"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="protocol"] .routing-chip,
html[data-theme="light"] .routing-rule-field[data-field-key="vlessRoute"] .routing-chip {
  color: #6b21a8;
}

html[data-theme="light"] .routing-balancers-title,
html[data-theme="light"] .routing-balancer-title {
  color: #111827;
}

html[data-theme="light"] .routing-balancer-card {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(15, 23, 42, 0.02));
}

html[data-theme="light"] .routing-balancer-head {
  border-bottom-color: rgba(15, 23, 42, 0.12);
}

/* DAT карточка (GeoSite/GeoIP) */
html[data-theme="light"] .routing-dat-item {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(15, 23, 42, 0.02));
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .routing-dat-name {
  color: #111827;
}

html[data-theme="light"] .routing-dat-file,
html[data-theme="light"] .routing-dat-meta,
html[data-theme="light"] .routing-dat-field {
  color: #6b7280;
}

html[data-theme="light"] .routing-dat-input,
html[data-theme="light"] .routing-dat-select {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

html[data-theme="light"] .routing-dat-found {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: #6b7280;
}

html[data-theme="light"] .routing-dat-found-item {
  color: #111827;
}

html[data-theme="light"] .routing-dat-found-name {
  color: #0f172a;
}

html[data-theme="light"] .routing-dat-found-meta {
  color: #64748b;
}

/* DAT contents modal */
html[data-theme="light"] .dat-contents-kind,
html[data-theme="light"] .dat-item-type {
  color: #2563eb;
}

html[data-theme="light"] .dat-contents-path,
html[data-theme="light"] .dat-item-value {
  color: #111827;
}

html[data-theme="light"] .dat-contents-status,
html[data-theme="light"] .dat-contents-selected-label,
html[data-theme="light"] .dat-contents-routing-label,
html[data-theme="light"] .dat-contents-page-info,
html[data-theme="light"] .dat-contents-empty {
  color: #6b7280;
}

html[data-theme="light"] .dat-contents-tags-list,
html[data-theme="light"] .dat-contents-items-list {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .dat-item-row {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .dat-tag-count {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.04);
  color: #334155;
}

html[data-theme="light"] .dat-tag-used {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .dat-tag-used.is-on,
html[data-theme="light"] .dat-tag-row.is-used .dat-tag-used {
  border-color: rgba(22, 163, 74, 0.74);
  background: linear-gradient(180deg, #4ade80, #16a34a);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.12),
    0 0 10px rgba(34, 197, 94, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

html[data-theme="light"] .dat-contents-routingbar {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.03);
}

html[data-theme="light"] .dat-contents-used-badge {
  border-color: color-mix(in srgb, var(--sem-success, #16a34a) 35%, rgba(15, 23, 42, 0.18) 65%);
  background: color-mix(in srgb, var(--sem-success, #16a34a) 10%, rgba(15, 23, 42, 0.03) 90%);
  color: color-mix(in srgb, var(--sem-success, #16a34a) 80%, #111827 20%);
}

/* JSON preview/textarea inside routing modals */
html[data-theme="light"] .routing-json-textarea {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

html[data-theme="light"] .routing-json-pre {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.03);
}

/* -------------------- Monaco fullscreen (routing editor) -------------------- */
.xk-monaco-editor.is-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border-radius: 0;
  z-index: 10000;
}

body.xk-no-scroll {
  overflow: hidden;
}


/* Proxy Tools (Mihomo): premium compact modal */

.xk-pt-header {
  align-items: flex-start;
  gap: 16px;
}

.xk-pt-titlebox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.xk-pt-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

.xk-pt-subtitle {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.9);
}

.xk-pt-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xk-pt-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(15, 23, 42, 0.08)),
    rgba(2, 6, 23, 0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.xk-pt-lead-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.96);
  background: linear-gradient(135deg, rgba(59,130,246,0.34), rgba(99,102,241,0.18));
  border: 1px solid rgba(96, 165, 250, 0.28);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.xk-pt-lead-copy {
  min-width: 0;
}

.xk-pt-lead-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.xk-pt-lead-desc {
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.5;
}

.xk-pt-chiprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.xk-pt-chip,
.xk-pt-current {
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.34);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.78rem;
  line-height: 1;
}

.xk-pt-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xk-pt-panel,
.xk-pt-card,
.xk-pt-empty {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.xk-pt-panel {
  padding: 14px 16px;
}

.xk-pt-panel-head,
.xk-pt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.xk-pt-section-title {
  font-size: 1rem;
  font-weight: 700;
}

.xk-pt-section-subtitle,
.xk-pt-note,
.xk-pt-empty-note,
.xk-pt-footer-note {
  color: rgba(226, 232, 240, 0.74);
  line-height: 1.5;
}

.xk-pt-section-subtitle {
  margin-top: 3px;
  font-size: 0.9rem;
}

.xk-pt-current.is-empty {
  color: rgba(148, 163, 184, 0.9);
}

.xk-pt-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.xk-pt-field--compact {
  min-width: 250px;
}

.xk-pt-control,
.xk-pt-textarea {
  width: 100%;
}

.xk-pt-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.26);
}

.xk-pt-status.success {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(22, 163, 74, 0.1);
}

.xk-pt-status.error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(127, 29, 29, 0.18);
}

.xk-pt-empty {
  margin-top: 12px;
  padding: 16px;
}

.xk-pt-empty-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.xk-pt-empty-text {
  color: rgba(226, 232, 240, 0.84);
  line-height: 1.5;
}

.xk-pt-empty-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.xk-pt-empty-note {
  margin-top: 8px;
  font-size: 0.9rem;
}

.xk-pt-workgrid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 12px;
}

.xk-pt-card {
  padding: 14px 16px;
}

.xk-pt-card-actions,
.xk-pt-inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xk-pt-card-actions {
  margin-top: 12px;
}

.xk-pt-note {
  margin-top: 10px;
  font-size: 0.92rem;
}

.xk-pt-topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.xk-pt-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.xk-pt-textarea {
  min-height: 184px;
}

.xk-pt-textarea--preview {
  min-height: 184px;
}

.xk-pt-primary-btn,
.xk-pt-secondary-btn,
.xk-pt-danger-btn {
  min-height: 38px;
}

.xk-pt-primary-btn {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
}

.xk-pt-secondary-btn {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.28);
  color: rgba(226, 232, 240, 0.92);
  padding: 8px 14px;
}

.xk-pt-secondary-btn:hover {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(30, 41, 59, 0.36);
}

.xk-pt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xk-pt-footer-note {
  max-width: 720px;
  font-size: 0.9rem;
}

@media (max-width: 880px) {
  .xk-pt-lead,
  .xk-pt-workgrid,
  .xk-pt-editor-grid,
  .xk-pt-topbar,
  .xk-pt-footer {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .xk-pt-chiprow {
    justify-content: flex-start;
  }

  .xk-pt-field--compact {
    min-width: 0;
  }
}

html[data-theme="light"] .xk-pt-subtitle,
html[data-theme="light"] .xk-pt-lead-desc,
html[data-theme="light"] .xk-pt-section-subtitle,
html[data-theme="light"] .xk-pt-note,
html[data-theme="light"] .xk-pt-empty-note,
html[data-theme="light"] .xk-pt-footer-note {
  color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .xk-pt-lead,
html[data-theme="light"] .xk-pt-panel,
html[data-theme="light"] .xk-pt-card,
html[data-theme="light"] .xk-pt-empty,
html[data-theme="light"] .xk-pt-status,
html[data-theme="light"] .xk-pt-chip,
html[data-theme="light"] .xk-pt-current {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
}

html[data-theme="light"] .xk-pt-kicker {
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="light"] .xk-pt-status.success {
  background: rgba(22, 163, 74, 0.08);
}

html[data-theme="light"] .xk-pt-status.error {
  background: rgba(239, 68, 68, 0.08);
}

html[data-theme="light"] .xk-pt-secondary-btn {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
}


/* === Balancer help modal === */

.xk-balancer-help-grid{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.xk-balancer-help-toc{
  position: sticky;
  top: 0;
  align-self: start;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(2, 6, 23, 0.35);
  border-radius: 12px;
  padding: 10px;
}

.xk-balancer-help-toc a{
  display: block;
  padding: 7px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg, #e5e7eb);
  opacity: 0.9;
  font-size: calc(12px * var(--xk-font-scale));
}

.xk-balancer-help-toc a:hover{
  background: rgba(148, 163, 184, 0.12);
  opacity: 1;
}

.xk-balancer-help-main{
  min-width: 0;
}

.xk-balancer-help-callout{
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.xk-balancer-help-details{
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.22);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 10px 0;
}

.xk-balancer-help-details > summary{
  cursor: pointer;
  font-weight: 650;
  margin: 0;
  outline: none;
}

.xk-balancer-help-details[open] > summary{
  margin-bottom: 8px;
}

.xk-balancer-help-code{
  display: block;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: calc(12px * var(--xk-font-scale));
  overflow: auto;
  line-height: 1.45;
}

@media (max-width: 860px){
  .xk-balancer-help-grid{
    grid-template-columns: 1fr;
  }
  .xk-balancer-help-toc{
    position: static;
  }
}

html[data-theme="light"] .xk-balancer-help-toc{
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(148, 163, 184, 0.45);
}

html[data-theme="light"] .xk-balancer-help-callout{
  background: rgba(30, 64, 175, 0.06);
  border-color: rgba(148, 163, 184, 0.45);
}

html[data-theme="light"] .xk-balancer-help-details{
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(148, 163, 184, 0.45);
}

html[data-theme="light"] .xk-balancer-help-code{
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(148, 163, 184, 0.45);
}


/* ===================== Routing editor polish (Stage 2) ===================== */
.routing-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}

.routing-editor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.42);
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.routing-editor-badge.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(22, 101, 52, 0.22);
  color: #bbf7d0;
}

.routing-editor-badge.is-bad {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

.routing-editor-badge.is-warn {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(120, 53, 15, 0.22);
  color: #fde68a;
}

.routing-editor-badge.is-muted {
  opacity: 0.8;
}

html[data-theme="light"] .routing-editor-badge {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.26);
  color: #334155;
}

html[data-theme="light"] .routing-editor-badge.is-ok {
  background: rgba(240, 253, 244, 0.95);
  color: #166534;
}

html[data-theme="light"] .routing-editor-badge.is-bad {
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
}

html[data-theme="light"] .routing-editor-badge.is-warn {
  background: rgba(255, 251, 235, 0.98);
  color: #92400e;
}


/* ===================== Routing advanced UX (Stage 3) ===================== */
.routing-focus-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.42);
}

.xkeen-ctrl-group-routing-focus {
  min-width: 0;
  flex: 0 1 auto;
}

.xkeen-ctrl-group-routing-focus .routing-focus-switch {
  max-width: min(100%, 420px);
}

.routing-focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.58);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.routing-focus-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.35);
}

.routing-focus-btn.is-active {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(30, 64, 175, 0.28);
  color: #dbeafe;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.16) inset;
}

.routing-focus-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.routing-focus-note {
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1.2;
}


.routing-focus-switch-compact {
  box-shadow: none;
}

.xkeen-ctrl-row .routing-focus-switch-compact {
  align-self: center;
}

@media (max-width: 1240px) {
  .routing-focus-note {
    display: none;
  }
}

#view-routing[data-routing-focus="gui"] #routing-rules-card,
#view-routing[data-routing-focus="raw"] #routing-editor-card {
  border-color: rgba(96, 165, 250, 0.26);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.14), 0 16px 34px rgba(2, 6, 23, 0.46);
}

#view-routing[data-routing-focus="gui"] #routing-editor-card,
#view-routing[data-routing-focus="raw"] #routing-rules-card {
  opacity: 0.78;
}

#view-routing .card.is-focus-muted {
  transition: opacity 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.routing-rule-grid.is-dnd-live {
  position: relative;
}

.routing-rule-grid.is-dnd-live::after {
  content: 'DnD';
  position: absolute;
  top: -8px;
  right: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #93c5fd;
  font-size: 10px;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.routing-rule-grid.is-dnd-live .routing-rule-card:not(.is-pointer-ghost) {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.46);
}

.routing-rule-grid.is-dnd-live .routing-rule-handle {
  border-color: rgba(96, 165, 250, 0.36);
  color: #bfdbfe;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18) inset;
}

.routing-rule-card.is-drop-before,
.routing-rule-card.is-drop-after {
  position: relative;
}

.routing-rule-card.is-drop-before::before,
.routing-rule-card.is-drop-after::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.95), rgba(96, 165, 250, 0));
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12);
}

.routing-rule-card.is-drop-before::before {
  top: -7px;
}

.routing-rule-card.is-drop-after::after {
  bottom: -7px;
}

.routing-rule-placeholder {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.54), rgba(30, 41, 59, 0.44));
}

.routing-rule-placeholder::before {
  content: '↕';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  font-size: 13px;
}

.routing-rule-card.is-pointer-ghost {
  border-color: rgba(96, 165, 250, 0.3);
}

html[data-theme="light"] .routing-focus-switch {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.24);
}

html[data-theme="light"] .routing-focus-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.28);
  color: #334155;
}

html[data-theme="light"] .routing-focus-btn.is-active {
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.32);
}

html[data-theme="light"] .routing-focus-note {
  color: #64748b;
}

html[data-theme="light"] #view-routing[data-routing-focus="gui"] #routing-rules-card,
html[data-theme="light"] #view-routing[data-routing-focus="raw"] #routing-editor-card {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.14), 0 16px 30px rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .routing-rule-grid.is-dnd-live::after {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(59, 130, 246, 0.26);
  color: #1d4ed8;
}

html[data-theme="light"] .routing-rule-grid.is-dnd-live .routing-rule-handle {
  border-color: rgba(59, 130, 246, 0.24);
  color: #1d4ed8;
}

@media (max-width: 1024px) {
  .routing-focus-switch {
    flex-wrap: wrap;
  }

  .xkeen-ctrl-group-routing-focus {
    width: 100%;
    order: 3;
  }

  .xkeen-ctrl-group-routing-focus .routing-focus-switch {
    width: 100%;
    max-width: none;
  }

  .routing-focus-note {
    display: block;
    width: 100%;
    max-width: none;
    white-space: normal;
  }
}

/* HWID subscription (Mihomo): premium compact modal */

.xk-hw-modal {
  border: 1px solid rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 26%),
    radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(1, 6, 20, 0.98), rgba(2, 6, 23, 0.96));
  box-shadow:
    0 28px 86px rgba(2, 6, 23, 0.84),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.xk-hw-header {
  align-items: flex-start;
  gap: 16px;
}

.xk-hw-titlebox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.xk-hw-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

.xk-hw-subtitle {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.9);
  max-width: 82ch;
}

#mihomo-hwid-modal {
  padding: 10px;
}

#mihomo-hwid-modal .modal-content {
  width: min(96vw, 1160px);
  max-width: 1160px;
  max-height: min(92vh, 860px);
  min-height: min(650px, 92vh);
  overflow: hidden;
}

.xk-hw-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.xk-hw-current-pill {
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.34);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.78rem;
  line-height: 1;
}

.xk-hw-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.96fr) minmax(420px, 1.04fr);
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
}

.xk-hw-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  min-width: 0;
  min-height: 0;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.xk-hw-panel--controls {
  overflow: auto;
}

.xk-hw-panel--preview {
  min-height: 0;
  overflow: hidden;
}

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

.xk-hw-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.xk-hw-field--full {
  grid-column: 1 / -1;
}

.xk-hw-control,
.xk-hw-preview {
  width: 100%;
  box-sizing: border-box;
}

.xk-hw-field-note,
.xk-hw-section-subtitle {
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.45;
  font-size: 0.88rem;
}

.xk-hw-label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.xk-hw-label-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.32);
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.72rem;
  line-height: 1;
  cursor: help;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.xk-hw-label-tip:hover,
.xk-hw-label-tip:focus-visible {
  border-color: rgba(96, 165, 250, 0.34);
  color: rgba(255,255,255,0.96);
  outline: none;
}

.xk-hw-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.xk-hw-switch--full {
  grid-column: 1 / -1;
}

.xk-hw-switch input {
  margin-top: 2px;
}

.xk-hw-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xk-hw-switch-copy strong {
  color: var(--fg, #f8fafc);
  font-size: 0.96rem;
  line-height: 1.2;
}

.xk-hw-switch-copy small {
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.34;
  font-size: 0.83rem;
}

.xk-hw-switch--compact {
  margin-top: 2px;
}

.xk-hw-status,
.xk-hw-meta,
.xk-hw-tip {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.26);
  line-height: 1.5;
  white-space: pre-wrap;
}

.xk-hw-status.success {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(22, 163, 74, 0.1);
  color: #d1fae5;
}

.xk-hw-status.error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
}

.xk-hw-meta {
  color: rgba(226, 232, 240, 0.86);
}

.xk-hw-tip {
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(120, 53, 15, 0.18);
  color: #fde68a;
}

.xk-hw-diag {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xk-hw-device-editor {
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.24);
}

.xk-hw-device-editor__head {
  align-items: center;
  gap: 8px;
}

.xk-hw-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
  color: rgba(219, 234, 254, 0.96);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.xk-hw-reset-btn {
  padding: 5px 9px;
}

.xk-hw-device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.xk-hw-device-input {
  min-height: 34px;
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(2, 6, 23, 0.42);
}

.xk-hw-device-input--mono {
  font-family: var(--xk-mono-font-family, "Cascadia Code", Consolas, monospace);
}

.xk-hw-editor-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.xk-hw-reset-btn:hover {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(59, 130, 246, 0.16);
}

.xk-hw-editor-meta__item {
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
  color: rgba(203, 213, 225, 0.84);
  font-size: 0.75rem;
  line-height: 1.35;
}

.xk-hw-provider-response {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 7px;
}

.xk-hw-provider-response summary {
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.xk-hw-provider-response .xk-hw-diag-pre {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.34);
}

.xk-hw-section-head--compact {
  align-items: center;
}

.xk-hw-collapsible-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.xk-hw-collapsible-body[hidden] {
  display: none !important;
}

.xk-hw-section-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.24);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.xk-hw-section-toggle:hover {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(30, 41, 59, 0.34);
}

.xk-hw-section-toggle:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.48);
  outline-offset: 2px;
}

.xk-hw-section-toggle-caret {
  color: rgba(148, 163, 184, 0.92);
  transition: transform 0.18s ease;
}

.xk-hw-section-toggle[aria-expanded="false"] .xk-hw-section-toggle-caret {
  transform: rotate(-90deg);
}

.xk-hw-diag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.xk-hw-diag-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.22);
}

.xk-hw-diag-card--full {
  grid-column: 1 / -1;
}

.xk-hw-diag-label {
  color: rgba(226, 232, 240, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.xk-hw-diag-value {
  color: var(--fg, #f8fafc);
  font-family: var(--xk-mono-font-family, "Cascadia Code", Consolas, monospace);
  font-size: 0.92rem;
  line-height: 1.4;
  word-break: break-word;
}

.xk-hw-diag-note {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.xk-hw-diag-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg, #f8fafc);
  font-family: var(--xk-mono-font-family, "Cascadia Code", Consolas, monospace);
  font-size: 0.87rem;
  line-height: 1.45;
}

.xk-hw-compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.xk-hw-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.xk-hw-compare-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(15, 23, 42, 0.06)),
    rgba(15, 23, 42, 0.2);
}

.xk-hw-compare-label {
  color: rgba(226, 232, 240, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.xk-hw-compare-value {
  color: var(--fg, #f8fafc);
  font-family: var(--xk-mono-font-family, "Cascadia Code", Consolas, monospace);
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}

.xk-hw-compare-note {
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.xk-hw-compare-relations {
  display: grid;
  gap: 8px;
}

.xk-hw-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.18);
}

.xk-hw-compare-row-label {
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.83rem;
  line-height: 1.45;
}

.xk-hw-compare-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.xk-hw-compare-badge--match {
  color: #dcfce7;
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(21, 128, 61, 0.26);
}

.xk-hw-compare-badge--diff {
  color: #ffedd5;
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(194, 65, 12, 0.24);
}

.xk-hw-compare-badge--muted {
  color: rgba(226, 232, 240, 0.88);
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(71, 85, 105, 0.2);
}

.xk-hw-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xk-hw-section-title {
  font-size: 1rem;
  font-weight: 700;
}

.xk-hw-preview-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.34);
  overflow: hidden;
}

.xk-hw-preview {
  min-height: 320px;
  height: 100%;
  resize: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.42;
}

#mihomo-hwid-preview-monaco,
.xk-hw-preview-monaco,
.xk-hw-preview-cm,
.xk-hw-preview-wrap .CodeMirror,
.xk-hw-preview-wrap .xkeen-cm6-host {
  min-height: 320px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.xk-hw-preview-wrap .xkeen-cm6-editor,
.xk-hw-preview-wrap .cm-editor,
.xk-hw-preview-wrap .cm-scroller {
  height: 100%;
}

.xk-hw-preview-wrap .xk-hw-preview-cm .cm-scroller {
  overflow: auto;
}

.xk-hw-preview-wrap .xk-hw-preview-cm .cm-foldGutter,
.xk-hw-preview-wrap .xk-hw-preview-cm .cm-diagnosticGutter {
  display: none;
}

.xk-hw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.xk-hw-footer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.xk-hw-primary-btn,
.xk-hw-secondary-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.xk-hw-primary-btn {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
}

.xk-hw-secondary-btn {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.28);
  color: rgba(226, 232, 240, 0.92);
  padding: 8px 14px;
}

.xk-hw-secondary-btn:hover {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(30, 41, 59, 0.36);
}

.xk-hw-status.hidden,
.xk-hw-meta.hidden,
.xk-hw-tip.hidden,
#mihomo-hwid-template-wrap.hidden {
  display: none;
}

@media (max-width: 920px) {
  .xk-hw-grid,
  .xk-hw-form-grid,
  .xk-hw-device-grid,
  .xk-hw-diag-grid,
  .xk-hw-compare-grid {
    grid-template-columns: 1fr;
  }

  .xk-hw-footer,
  .xk-hw-section-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .xk-hw-footer-actions {
    justify-content: flex-start;
  }

  .xk-hw-compare-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  #mihomo-hwid-modal {
    padding: 6px;
  }

  #mihomo-hwid-modal .modal-content {
    width: min(100vw, 820px);
    min-height: min(680px, 94vh);
    max-height: 94vh;
    border-radius: 18px;
  }

  .xk-hw-preview {
    min-height: 280px;
    height: 100%;
  }

  #mihomo-hwid-preview-monaco,
  .xk-hw-preview-monaco,
  .xk-hw-preview-cm,
  .xk-hw-preview-wrap .CodeMirror,
  .xk-hw-preview-wrap .xkeen-cm6-host {
    min-height: 280px;
    height: 100%;
  }
}

html[data-theme="light"] .xk-hw-subtitle,
html[data-theme="light"] .xk-hw-field-note,
html[data-theme="light"] .xk-hw-section-subtitle,
html[data-theme="light"] .xk-hw-switch-copy small {
  color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .xk-hw-panel,
html[data-theme="light"] .xk-hw-switch,
html[data-theme="light"] .xk-hw-status,
html[data-theme="light"] .xk-hw-meta,
html[data-theme="light"] .xk-hw-tip,
html[data-theme="light"] .xk-hw-current-pill,
html[data-theme="light"] .xk-hw-preview-wrap {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
}

html[data-theme="light"] .xk-hw-kicker {
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="light"] .xk-hw-diag-card {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.92);
}

html[data-theme="light"] .xk-hw-device-editor,
html[data-theme="light"] .xk-hw-device-input,
html[data-theme="light"] .xk-hw-provider-response .xk-hw-diag-pre {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.92);
}

html[data-theme="light"] .xk-hw-reset-btn {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
}

html[data-theme="light"] .xk-hw-editor-meta__item {
  background: rgba(226, 232, 240, 0.72);
  color: rgba(15, 23, 42, 0.76);
}

html[data-theme="light"] .xk-hw-diag-label {
  color: rgba(71, 85, 105, 0.92);
}

html[data-theme="light"] .xk-hw-section-toggle {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.92);
  color: #0f172a;
}

html[data-theme="light"] .xk-hw-section-toggle:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .xk-hw-section-toggle-caret {
  color: rgba(71, 85, 105, 0.92);
}

html[data-theme="light"] .xk-hw-diag-value,
html[data-theme="light"] .xk-hw-diag-pre {
  color: #0f172a;
}

html[data-theme="light"] .xk-hw-diag-note {
  color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .xk-hw-compare {
  border-top-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .xk-hw-compare-card,
html[data-theme="light"] .xk-hw-compare-row {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.92);
}

html[data-theme="light"] .xk-hw-compare-label {
  color: rgba(71, 85, 105, 0.92);
}

html[data-theme="light"] .xk-hw-compare-value {
  color: #0f172a;
}

html[data-theme="light"] .xk-hw-compare-note,
html[data-theme="light"] .xk-hw-compare-row-label {
  color: rgba(15, 23, 42, 0.74);
}

html[data-theme="light"] .xk-hw-compare-badge--muted {
  color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .xk-hw-label-tip {
  background: rgba(255, 255, 255, 0.9);
  color: rgba(15, 23, 42, 0.78);
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .xk-hw-status.success {
  background: rgba(22, 163, 74, 0.08);
  color: #166534;
}

html[data-theme="light"] .xk-hw-status.error {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
}

html[data-theme="light"] .xk-hw-meta {
  color: #0f172a;
}

html[data-theme="light"] .xk-hw-tip {
  background: rgba(250, 204, 21, 0.12);
  color: #92400e;
}

html[data-theme="light"] .xk-hw-secondary-btn {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
}

html[data-theme="light"] .xk-hw-modal {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 26%),
    radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

/* Panel page: premium redesign */
body.panel-page {
  --xk-font-family: "Segoe UI Variable Text", "Aptos", "Trebuchet MS", "Segoe UI", sans-serif;
  --xk-mono-font-family: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
  --accent: #d1b17a;
  --bg: #08111d;
  --card-bg: rgba(8, 14, 25, 0.84);
  --border: rgba(209, 177, 122, 0.16);
  --text: #f5efe4;
  --muted: #aeb6c6;
  --header-btn-bg: rgba(10, 18, 31, 0.68);
  --header-btn-text: #f5efe4;
  --header-tab-bg: rgba(8, 14, 25, 0.68);
  --header-tab-border: rgba(209, 177, 122, 0.12);
  --header-tab-text: rgba(245, 239, 228, 0.78);
  --editor-btn-bg: rgba(8, 14, 25, 0.76);
  --editor-btn-text: #f5efe4;
  background:
    radial-gradient(circle at top center, rgba(209, 177, 122, 0.16), transparent 24%),
    radial-gradient(circle at 16% 18%, rgba(58, 94, 145, 0.18), transparent 26%),
    linear-gradient(180deg, #0b1321 0%, #08111d 44%, #040912 100%);
  color: var(--text);
}

body.panel-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.1), transparent 18%),
    linear-gradient(125deg, transparent 0 38%, rgba(255, 255, 255, 0.035) 50%, transparent 62%);
  opacity: 0.72;
  mix-blend-mode: screen;
  z-index: 0;
}

body.panel-page .container-wide {
  position: relative;
  z-index: 1;
  max-width: min(1680px, 96vw);
  padding: 28px 24px 36px;
}

body.panel-page a {
  color: #e7cf9a;
}

body.panel-page .panel-header {
  position: relative;
  margin-bottom: 30px;
  padding: 24px 24px 20px;
  border-radius: 30px;
  border: 1px solid rgba(209, 177, 122, 0.14);
  background:
    radial-gradient(circle at top right, rgba(209, 177, 122, 0.14), transparent 30%),
    radial-gradient(circle at left center, rgba(59, 130, 246, 0.09), transparent 26%),
    linear-gradient(135deg, rgba(18, 28, 45, 0.94), rgba(7, 12, 22, 0.92));
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

body.panel-page .panel-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 36%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
}

body.panel-page .panel-header > * {
  position: relative;
  z-index: 1;
}

body.panel-page .panel-header > p {
  display: none;
}

body.panel-page .panel-header h1 {
  margin: 0;
  font-size: clamp(2rem, 2.3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #f9f1e3;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

body.panel-page .header-main {
  column-gap: 20px;
  row-gap: 18px;
}

body.panel-page .header-title-group,
body.panel-page .header-center,
body.panel-page .header-right,
body.panel-page .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.panel-page .header-title-group {
  flex-wrap: wrap;
}

body.panel-page .header-center {
  justify-content: center;
  flex-wrap: wrap;
}

body.panel-page .header-right {
  justify-content: flex-end;
}

body.panel-page .header-actions {
  justify-content: flex-end;
}

body.panel-page .xk-brand-logo {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(245, 239, 228, 0.1);
  border: 1px solid rgba(209, 177, 122, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.panel-page .service-status-lamp {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.04);
}

body.panel-page .service-core-text,
body.panel-page .theme-toggle-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(209, 177, 122, 0.16);
  background: linear-gradient(180deg, rgba(18, 28, 45, 0.92), rgba(8, 14, 25, 0.9));
  color: #f5efe4;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

body.panel-page .theme-toggle-btn {
  min-width: 40px;
}

body.panel-page .service-core-text:hover,
body.panel-page .theme-toggle-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(231, 207, 154, 0.38);
  background: linear-gradient(180deg, rgba(24, 35, 54, 0.96), rgba(11, 18, 30, 0.94));
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(209, 177, 122, 0.1);
}

body.panel-page .service-core-text.has-core {
  border-color: rgba(231, 207, 154, 0.34);
  background:
    linear-gradient(180deg, rgba(37, 49, 71, 0.96), rgba(13, 21, 34, 0.94)),
    linear-gradient(135deg, rgba(209, 177, 122, 0.16), transparent 60%);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(209, 177, 122, 0.14);
}

body.panel-page #xray-logs-badge {
  margin-left: 0;
  padding: 0 14px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(209, 177, 122, 0.12);
  background: rgba(8, 14, 25, 0.62);
  color: rgba(245, 239, 228, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.panel-page .top-tabs.header-tabs {
  margin-top: 20px;
  padding: 8px;
  gap: 10px;
  border-radius: 24px;
  background: rgba(6, 11, 22, 0.48);
  border: 1px solid rgba(209, 177, 122, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page .top-tabs.header-tabs .top-tab-btn {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(209, 177, 122, 0.08);
  background: linear-gradient(180deg, rgba(15, 22, 36, 0.88), rgba(7, 12, 22, 0.92));
  color: rgba(245, 239, 228, 0.72);
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.panel-page .top-tabs.header-tabs .top-tab-btn:hover {
  color: #faf3e5;
  border-color: rgba(231, 207, 154, 0.22);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(12, 18, 30, 0.96));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

body.panel-page .top-tabs.header-tabs .top-tab-btn.active {
  color: #1d150c;
  border-color: rgba(255, 245, 223, 0.3);
  background: linear-gradient(135deg, #f4e3bc 0%, #cea56f 48%, #f5ead5 100%);
  box-shadow:
    0 18px 30px rgba(111, 79, 31, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.panel-page .xkeen-ctrl-row {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(209, 177, 122, 0.1);
  background: rgba(6, 11, 22, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  align-items: center;
}

body.panel-page .xkeen-ctrl-group,
body.panel-page .xkeen-ctrl-group-main {
  gap: 8px;
}

body.panel-page .xkeen-ctrl-group-main .xkeen-ctrl-group-routing-focus {
  margin-left: 8px;
}

body.panel-page .xkeen-ctrl-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(209, 177, 122, 0.14);
  background: linear-gradient(180deg, rgba(18, 28, 45, 0.9), rgba(8, 14, 25, 0.92));
  color: #f5efe4;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: calc(12px * var(--xk-font-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.panel-page .xkeen-ctrl-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(231, 207, 154, 0.32);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(11, 18, 30, 0.94));
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(209, 177, 122, 0.08);
}

body.panel-page .global-toggle-right {
  gap: 10px;
}

body.panel-page .global-autorestart-toggle,
body.panel-page .last-load-badge {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(209, 177, 122, 0.1);
  background: rgba(8, 14, 25, 0.54);
  color: rgba(231, 235, 244, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page .global-autorestart-toggle input[type="checkbox"] {
  accent-color: #d6ba86;
}

body.panel-page .routing-focus-switch,
body.panel-page .routing-focus-switch-compact {
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(209, 177, 122, 0.1);
  background: rgba(8, 14, 25, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page .routing-focus-btn {
  min-height: 34px;
  border-radius: 12px;
  border-color: rgba(209, 177, 122, 0.12);
  background: linear-gradient(180deg, rgba(16, 24, 39, 0.9), rgba(10, 16, 28, 0.92));
  color: rgba(245, 239, 228, 0.78);
}

body.panel-page .routing-focus-btn:hover:not(:disabled) {
  border-color: rgba(231, 207, 154, 0.24);
}

body.panel-page .routing-focus-btn.is-active {
  color: #1d150c;
  border-color: rgba(255, 245, 223, 0.3);
  background: linear-gradient(135deg, #f4e3bc 0%, #cea56f 48%, #f5ead5 100%);
  box-shadow: 0 12px 22px rgba(111, 79, 31, 0.24);
}

body.panel-page .routing-focus-note {
  color: rgba(216, 221, 231, 0.58);
}

body.panel-page .card {
  position: relative;
  border-radius: 24px;
  padding: 18px 18px 22px;
  border: 1px solid rgba(209, 177, 122, 0.1);
  background:
    linear-gradient(180deg, rgba(12, 18, 31, 0.94), rgba(6, 11, 22, 0.88));
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

body.panel-page .card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

body.panel-page .card h2 {
  margin-bottom: 10px;
  color: #f8f1e5;
  font-size: calc(18px * var(--xk-font-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.panel-page .card p {
  color: rgba(216, 221, 231, 0.76);
}

body.panel-page .xk-monaco-editor,
body.panel-page .CodeMirror,
body.panel-page textarea#routing-editor,
body.panel-page textarea#json-editor-textarea,
body.panel-page .xkeen-textarea,
body.panel-page .routing-json-textarea {
  border-radius: 20px;
  border-color: rgba(209, 177, 122, 0.1);
  background: linear-gradient(180deg, rgba(3, 8, 18, 0.98), rgba(2, 6, 15, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 32px rgba(0, 0, 0, 0.24);
}

body.panel-page .layout-2col.routing-layout {
  column-gap: 14px;
}

html[data-theme="light"] body.panel-page {
  --accent: #9d6d34;
  --bg: #f3ede4;
  --card-bg: rgba(255, 250, 244, 0.9);
  --border: rgba(141, 111, 65, 0.16);
  --text: #1f2733;
  --muted: #6b7280;
  --header-btn-bg: rgba(255, 251, 247, 0.88);
  --header-btn-text: #1f2733;
  --header-tab-bg: rgba(255, 251, 246, 0.74);
  --header-tab-border: rgba(141, 111, 65, 0.14);
  --header-tab-text: rgba(31, 39, 51, 0.78);
  --editor-btn-bg: rgba(255, 251, 246, 0.86);
  --editor-btn-text: #1f2733;
  background:
    radial-gradient(circle at top center, rgba(206, 169, 112, 0.16), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(148, 163, 184, 0.16), transparent 28%),
    linear-gradient(180deg, #f7f0e7 0%, #eee7dd 52%, #e7ded1 100%);
  color: var(--text);
}

html[data-theme="light"] body.panel-page::before {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.5), transparent 20%),
    linear-gradient(125deg, transparent 0 40%, rgba(157, 109, 52, 0.05) 50%, transparent 60%);
  opacity: 0.7;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body.panel-page a {
  color: #8f5d21;
}

html[data-theme="light"] body.panel-page .panel-header {
  border-color: rgba(141, 111, 65, 0.14);
  background:
    radial-gradient(circle at top right, rgba(206, 169, 112, 0.14), transparent 30%),
    radial-gradient(circle at left center, rgba(148, 163, 184, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 238, 228, 0.92));
  box-shadow:
    0 26px 64px rgba(91, 65, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

html[data-theme="light"] body.panel-page .panel-header h1 {
  color: #1e2733;
  text-shadow: none;
}

html[data-theme="light"] body.panel-page .xk-brand-logo {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(141, 111, 65, 0.16);
}

html[data-theme="light"] body.panel-page .service-core-text,
html[data-theme="light"] body.panel-page .theme-toggle-btn {
  border-color: rgba(141, 111, 65, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 231, 0.94));
  color: #1f2733;
  box-shadow:
    0 12px 24px rgba(91, 65, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] body.panel-page .service-core-text:hover,
html[data-theme="light"] body.panel-page .theme-toggle-btn:hover {
  border-color: rgba(157, 109, 52, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(244, 235, 223, 0.98));
  box-shadow:
    0 16px 28px rgba(91, 65, 32, 0.1),
    0 0 0 1px rgba(157, 109, 52, 0.08);
}

html[data-theme="light"] body.panel-page .service-core-text.has-core {
  border-color: rgba(157, 109, 52, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 234, 218, 0.94)),
    linear-gradient(135deg, rgba(157, 109, 52, 0.08), transparent 60%);
  box-shadow:
    0 14px 28px rgba(91, 65, 32, 0.1),
    0 0 0 1px rgba(157, 109, 52, 0.1);
}

html[data-theme="light"] body.panel-page #xray-logs-badge,
html[data-theme="light"] body.panel-page .top-tabs.header-tabs,
html[data-theme="light"] body.panel-page .xkeen-ctrl-row,
html[data-theme="light"] body.panel-page .global-autorestart-toggle,
html[data-theme="light"] body.panel-page .last-load-badge,
html[data-theme="light"] body.panel-page .routing-focus-switch,
html[data-theme="light"] body.panel-page .routing-focus-switch-compact {
  border-color: rgba(141, 111, 65, 0.12);
  background: rgba(255, 251, 246, 0.7);
  color: rgba(31, 39, 51, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

html[data-theme="light"] body.panel-page .top-tabs.header-tabs .top-tab-btn {
  border-color: rgba(141, 111, 65, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 240, 231, 0.94));
  color: rgba(31, 39, 51, 0.72);
}

html[data-theme="light"] body.panel-page .top-tabs.header-tabs .top-tab-btn:hover {
  color: #1f2733;
  border-color: rgba(157, 109, 52, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(245, 236, 224, 0.98));
  box-shadow: 0 12px 22px rgba(91, 65, 32, 0.08);
}

html[data-theme="light"] body.panel-page .top-tabs.header-tabs .top-tab-btn.active,
html[data-theme="light"] body.panel-page .routing-focus-btn.is-active {
  color: #ffffff;
  border-color: rgba(141, 111, 65, 0.12);
  background: linear-gradient(135deg, #a87434 0%, #d3ad74 48%, #7a4e1d 100%);
  box-shadow:
    0 16px 28px rgba(122, 78, 29, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] body.panel-page .xkeen-ctrl-btn,
html[data-theme="light"] body.panel-page .routing-focus-btn {
  border-color: rgba(141, 111, 65, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 231, 0.94));
  color: #1f2733;
  box-shadow:
    0 10px 20px rgba(91, 65, 32, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body.panel-page .xkeen-ctrl-btn:hover {
  border-color: rgba(157, 109, 52, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(244, 235, 223, 0.98));
  box-shadow:
    0 14px 24px rgba(91, 65, 32, 0.1),
    0 0 0 1px rgba(157, 109, 52, 0.08);
}

html[data-theme="light"] body.panel-page .routing-focus-note {
  color: rgba(71, 85, 105, 0.74);
}

html[data-theme="light"] body.panel-page .card {
  border-color: rgba(141, 111, 65, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 240, 231, 0.9));
  box-shadow:
    0 22px 48px rgba(91, 65, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] body.panel-page .card h2 {
  color: #2d2012;
}

html[data-theme="light"] body.panel-page .card p {
  color: rgba(71, 85, 105, 0.8);
}

html[data-theme="light"] body.panel-page .xk-monaco-editor,
html[data-theme="light"] body.panel-page .CodeMirror,
html[data-theme="light"] body.panel-page textarea#routing-editor,
html[data-theme="light"] body.panel-page textarea#json-editor-textarea,
html[data-theme="light"] body.panel-page .xkeen-textarea,
html[data-theme="light"] body.panel-page .routing-json-textarea {
  border-color: rgba(141, 111, 65, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 239, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 28px rgba(91, 65, 32, 0.08);
}

@media (max-width: 1180px) {
  body.panel-page .top-tabs.header-tabs {
    overflow-x: auto;
  }

  body.panel-page .top-tabs.header-tabs .top-tab-btn {
    min-width: 150px;
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  body.panel-page .container-wide {
    padding: 18px 16px 28px;
  }

  body.panel-page .panel-header {
    padding: 20px 18px 18px;
    border-radius: 24px;
  }

  body.panel-page .header-main {
    gap: 14px;
  }

  body.panel-page .header-center,
  body.panel-page .header-right,
  body.panel-page .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.panel-page .top-tabs.header-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body.panel-page .top-tabs.header-tabs .top-tab-btn {
    width: 100%;
    min-width: 0;
  }

  body.panel-page .xkeen-ctrl-row {
    align-items: stretch;
  }

  body.panel-page .global-toggle-right {
    width: 100%;
    align-items: flex-start;
  }

  body.panel-page .global-toggle-right .last-load-badge {
    align-self: flex-start;
  }
}

@media (max-width: 620px) {
  body.panel-page .top-tabs.header-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  body.panel-page .panel-header h1 {
    font-size: 1.9rem;
  }
}

/* Panel page: compact blue retune */
body.panel-page {
  --accent: #5f89ef;
  --border: rgba(95, 137, 239, 0.18);
  --text: #edf4ff;
  --muted: #8ca3cb;
  --header-btn-bg: rgba(8, 16, 31, 0.78);
  --header-btn-text: #edf4ff;
  --header-tab-bg: rgba(7, 14, 28, 0.8);
  --header-tab-border: rgba(95, 137, 239, 0.12);
  --header-tab-text: rgba(237, 244, 255, 0.76);
  --editor-btn-bg: rgba(7, 14, 28, 0.86);
  --editor-btn-text: #edf4ff;
  background:
    radial-gradient(circle at top center, rgba(88, 122, 212, 0.16), transparent 24%),
    radial-gradient(circle at 16% 20%, rgba(32, 78, 168, 0.18), transparent 28%),
    linear-gradient(180deg, #07111f 0%, #050d19 50%, #040912 100%);
}

body.panel-page::before {
  background:
    radial-gradient(circle at top left, rgba(116, 168, 255, 0.1), transparent 20%),
    linear-gradient(125deg, transparent 0 40%, rgba(96, 141, 235, 0.05) 50%, transparent 60%);
  opacity: 0.58;
}

body.panel-page a {
  color: #9fc0ff;
}

body.panel-page .container-wide {
  padding: 20px 20px 28px;
}

body.panel-page .panel-header {
  margin-bottom: 12px;
  padding: 13px 16px 11px;
  border-radius: 22px;
  border-color: rgba(95, 137, 239, 0.16);
  background:
    radial-gradient(circle at top right, rgba(88, 122, 212, 0.18), transparent 28%),
    radial-gradient(circle at left center, rgba(41, 92, 192, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(12, 22, 40, 0.96), rgba(5, 12, 24, 0.94));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page .panel-header::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%),
    linear-gradient(90deg, transparent, rgba(120, 168, 255, 0.025), transparent);
}

body.panel-page .panel-header h1 {
  font-size: clamp(1.7rem, 1.85vw, 2.3rem);
  letter-spacing: -0.05em;
  color: #f4f8ff;
}

body.panel-page .header-main {
  column-gap: 12px;
  row-gap: 7px;
}

body.panel-page .header-title-group,
body.panel-page .header-center,
body.panel-page .header-right,
body.panel-page .header-actions {
  gap: 6px;
}

body.panel-page .xk-brand-logo {
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(95, 137, 239, 0.16);
}

body.panel-page .service-status-lamp {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
}

body.panel-page .service-core-text,
body.panel-page .theme-toggle-btn {
  min-height: 34px;
  padding: 0 12px;
  border-color: rgba(95, 137, 239, 0.15);
  background: linear-gradient(180deg, rgba(14, 24, 42, 0.94), rgba(7, 14, 28, 0.92));
  color: #e8f0ff;
  box-shadow:
    0 10px 18px rgba(1, 6, 16, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: calc(11.5px * var(--xk-font-scale));
}

body.panel-page .theme-toggle-btn {
  min-width: 34px;
}

body.panel-page .service-core-text:hover,
body.panel-page .theme-toggle-btn:hover {
  border-color: rgba(125, 164, 255, 0.32);
  background: linear-gradient(180deg, rgba(20, 32, 56, 0.96), rgba(8, 16, 32, 0.94));
  box-shadow:
    0 12px 22px rgba(1, 6, 16, 0.26),
    0 0 0 1px rgba(95, 137, 239, 0.08);
}

body.panel-page .service-core-text.has-core {
  border-color: rgba(104, 147, 247, 0.28);
  background:
    linear-gradient(180deg, rgba(20, 34, 60, 0.96), rgba(8, 16, 31, 0.94)),
    linear-gradient(135deg, rgba(95, 137, 239, 0.14), transparent 58%);
  box-shadow:
    0 14px 24px rgba(1, 6, 16, 0.24),
    0 0 0 1px rgba(95, 137, 239, 0.12);
}

body.panel-page #xray-logs-badge {
  min-height: 30px;
  padding: 0 12px;
  border-color: rgba(95, 137, 239, 0.12);
  background: rgba(7, 14, 28, 0.72);
  color: rgba(232, 240, 255, 0.72);
  font-size: calc(11px * var(--xk-font-scale));
}

body.panel-page .last-load-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  max-width: min(360px, 34vw);
  margin-left: 0;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(95, 137, 239, 0.18);
  background: linear-gradient(180deg, rgba(16, 28, 50, 0.96), rgba(7, 14, 28, 0.94));
  color: #e8f0ff;
  box-shadow:
    0 12px 24px rgba(1, 6, 16, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  overflow: hidden;
  transition:
    max-width 0.24s ease,
    padding 0.24s ease,
    gap 0.2s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

body.panel-page .last-load-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 164, 255, 0.3);
  background: linear-gradient(180deg, rgba(20, 34, 60, 0.98), rgba(8, 16, 31, 0.96));
}

body.panel-page .last-load-chip:focus-visible {
  outline: none;
  box-shadow:
    0 12px 24px rgba(1, 6, 16, 0.24),
    0 0 0 1px rgba(125, 164, 255, 0.2),
    0 0 0 4px rgba(95, 137, 239, 0.12);
}

body.panel-page .last-load-chip__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(108, 151, 255, 0.9), rgba(58, 107, 219, 0.82));
  box-shadow: 0 0 0 3px rgba(95, 137, 239, 0.14);
}

body.panel-page .last-load-chip__icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: rgba(244, 248, 255, 0.94);
}

body.panel-page .last-load-chip__body {
  display: grid;
  min-width: 0;
  gap: 1px;
  overflow: hidden;
  transition:
    max-width 0.24s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

body.panel-page .last-load-chip__prefix {
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ea8d9;
}

body.panel-page .last-load-chip__text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(11.5px * var(--xk-font-scale));
  font-weight: 600;
  color: #edf4ff;
}

body.panel-page .last-load-chip__caret {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 1.5px solid rgba(159, 192, 255, 0.72);
  border-bottom: 1.5px solid rgba(159, 192, 255, 0.72);
  transform: rotate(45deg);
  opacity: 0.78;
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

body.panel-page .last-load-chip.is-collapsed {
  max-width: 38px;
  padding-right: 8px;
  gap: 0;
}

body.panel-page .last-load-chip.is-collapsed .last-load-chip__body,
body.panel-page .last-load-chip.is-collapsed .last-load-chip__caret {
  opacity: 0;
  width: 0;
  max-width: 0;
  transform: translateX(-4px);
}

body.panel-page .last-load-chip.last-load-loaded {
  border-color: rgba(95, 137, 239, 0.22);
}

body.panel-page .last-load-chip.last-load-saved {
  border-color: rgba(59, 178, 224, 0.22);
}

body.panel-page .last-load-chip.last-load-saved .last-load-chip__icon {
  background: linear-gradient(135deg, rgba(77, 201, 233, 0.92), rgba(39, 132, 214, 0.84));
  box-shadow: 0 0 0 3px rgba(59, 178, 224, 0.14);
}

body.panel-page .last-load-chip.last-load-error {
  border-color: rgba(239, 68, 68, 0.26);
}

body.panel-page .last-load-chip.last-load-error .last-load-chip__icon {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.9), rgba(220, 38, 38, 0.82));
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

body.panel-page .top-tabs.header-tabs {
  margin-top: 8px;
  padding: 3px;
  gap: 5px;
  border-radius: 16px;
  border-color: rgba(95, 137, 239, 0.1);
  background: rgba(7, 14, 28, 0.48);
}

body.panel-page .top-tabs.header-tabs .top-tab-btn {
  min-height: 35px;
  padding: 5px 10px;
  border-radius: 12px;
  border-color: rgba(95, 137, 239, 0.08);
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.9), rgba(6, 12, 24, 0.92));
  color: rgba(233, 240, 255, 0.72);
  font-size: calc(11.5px * var(--xk-font-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.panel-page .top-tabs.header-tabs .top-tab-btn:hover {
  color: #eef4ff;
  border-color: rgba(125, 164, 255, 0.2);
  background: linear-gradient(180deg, rgba(18, 31, 55, 0.96), rgba(8, 16, 31, 0.94));
  box-shadow: 0 10px 20px rgba(2, 7, 18, 0.2);
}

body.panel-page .top-tabs.header-tabs .top-tab-btn.active,
body.panel-page .routing-focus-btn.is-active {
  color: #f5f8ff;
  border-color: rgba(145, 180, 255, 0.32);
  background: linear-gradient(135deg, #173976 0%, #2b58b4 48%, #5c86e7 100%);
  box-shadow:
    0 14px 24px rgba(22, 57, 118, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.panel-page .xkeen-ctrl-row {
  margin-top: 7px;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 15px;
  border-color: rgba(95, 137, 239, 0.1);
  background: rgba(6, 12, 24, 0.42);
}

body.panel-page .xkeen-ctrl-group,
body.panel-page .xkeen-ctrl-group-main {
  gap: 5px;
}

body.panel-page .xkeen-ctrl-group-main .xkeen-ctrl-group-routing-focus {
  margin-left: 2px;
}

body.panel-page .xkeen-ctrl-btn {
  min-height: 31px;
  padding: 0 10px;
  border-radius: 11px;
  border-color: rgba(95, 137, 239, 0.14);
  background: linear-gradient(180deg, rgba(14, 24, 42, 0.94), rgba(7, 14, 28, 0.92));
  font-size: calc(10.75px * var(--xk-font-scale));
}

body.panel-page .xkeen-ctrl-btn:hover {
  border-color: rgba(125, 164, 255, 0.28);
  background: linear-gradient(180deg, rgba(18, 31, 55, 0.96), rgba(8, 16, 31, 0.94));
}

body.panel-page .global-toggle-right {
  gap: 0;
}

body.panel-page .global-autorestart-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(215, 226, 247, 0.76);
  font-size: calc(11.5px * var(--xk-font-scale));
}

body.panel-page .routing-focus-switch,
body.panel-page .routing-focus-switch-compact {
  border-color: rgba(95, 137, 239, 0.1);
  background: rgba(8, 16, 31, 0.56);
  gap: 5px;
  padding: 3px 5px;
}

body.panel-page .routing-focus-btn {
  min-height: 27px;
  min-width: 42px;
  padding: 0 8px;
  border-radius: 9px;
  border-color: rgba(95, 137, 239, 0.12);
  background: linear-gradient(180deg, rgba(14, 24, 42, 0.88), rgba(8, 16, 31, 0.9));
  font-size: 10.5px;
}

body.panel-page .routing-focus-note {
  font-size: 9.5px;
  color: rgba(140, 163, 203, 0.68);
}

body.panel-page .view-section {
  margin-top: 8px;
}

body.panel-page .card {
  border-radius: 20px;
  padding: 14px 14px 16px;
  border-color: rgba(95, 137, 239, 0.1);
  background: linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(5, 11, 22, 0.92));
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page .card::before {
  left: 14px;
  right: 14px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.14), transparent);
}

body.panel-page .card h2 {
  margin-bottom: 8px;
  color: #eef4ff;
  font-size: calc(14.5px * var(--xk-font-scale));
  letter-spacing: 0.04em;
  line-height: 1.25;
}

body.panel-page .card p {
  font-size: calc(0.92em * var(--xk-card-desc-scale, 1));
  color: rgba(188, 201, 226, 0.74);
}

body.panel-page .xk-monaco-editor,
body.panel-page .CodeMirror,
body.panel-page textarea#routing-editor,
body.panel-page textarea#json-editor-textarea,
body.panel-page .xkeen-textarea,
body.panel-page .routing-json-textarea {
  border-radius: 16px;
  border-color: rgba(95, 137, 239, 0.1);
  background: linear-gradient(180deg, rgba(2, 7, 16, 0.99), rgba(2, 6, 14, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 14px 28px rgba(0, 0, 0, 0.2);
}

body.panel-page .layout-2col.routing-layout {
  column-gap: 10px;
}

body.panel-page .layout-side,
body.panel-page .layout-2col.routing-layout .routing-side-grid,
body.panel-page .layout-2col.routing-layout .routing-col {
  gap: 10px;
}

html[data-theme="light"] body.panel-page {
  --accent: #3f6fcb;
  --border: rgba(63, 111, 203, 0.14);
  --text: #162033;
  --muted: #607394;
  --header-btn-bg: rgba(248, 251, 255, 0.92);
  --header-btn-text: #162033;
  --header-tab-bg: rgba(245, 249, 255, 0.82);
  --header-tab-border: rgba(63, 111, 203, 0.1);
  --header-tab-text: rgba(22, 32, 51, 0.76);
  --editor-btn-bg: rgba(248, 251, 255, 0.92);
  --editor-btn-text: #162033;
  background:
    radial-gradient(circle at top center, rgba(119, 155, 227, 0.18), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(191, 219, 254, 0.4), transparent 28%),
    linear-gradient(180deg, #eef4ff 0%, #e7eefb 52%, #dde6f5 100%);
}

html[data-theme="light"] body.panel-page::before {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.58), transparent 20%),
    linear-gradient(125deg, transparent 0 40%, rgba(63, 111, 203, 0.05) 50%, transparent 60%);
  opacity: 0.7;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body.panel-page a {
  color: #315fb8;
}

html[data-theme="light"] body.panel-page .panel-header {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    radial-gradient(circle at top right, rgba(119, 155, 227, 0.18), transparent 30%),
    radial-gradient(circle at left center, rgba(191, 219, 254, 0.34), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 255, 0.94));
  box-shadow:
    0 20px 44px rgba(47, 79, 140, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] body.panel-page .panel-header h1 {
  color: #162033;
}

html[data-theme="light"] body.panel-page .service-core-text,
html[data-theme="light"] body.panel-page .theme-toggle-btn,
html[data-theme="light"] body.panel-page .last-load-chip {
  border-color: rgba(63, 111, 203, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.94));
  color: #162033;
  box-shadow:
    0 10px 20px rgba(47, 79, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

html[data-theme="light"] body.panel-page .service-core-text:hover,
html[data-theme="light"] body.panel-page .theme-toggle-btn:hover,
html[data-theme="light"] body.panel-page .last-load-chip:hover {
  border-color: rgba(63, 111, 203, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.98));
}

html[data-theme="light"] body.panel-page .service-core-text.has-core {
  border-color: rgba(63, 111, 203, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 255, 0.94)),
    linear-gradient(135deg, rgba(63, 111, 203, 0.08), transparent 60%);
  box-shadow:
    0 12px 22px rgba(47, 79, 140, 0.08),
    0 0 0 1px rgba(63, 111, 203, 0.08);
}

html[data-theme="light"] body.panel-page #xray-logs-badge,
html[data-theme="light"] body.panel-page .top-tabs.header-tabs,
html[data-theme="light"] body.panel-page .xkeen-ctrl-row,
html[data-theme="light"] body.panel-page .routing-focus-switch,
html[data-theme="light"] body.panel-page .routing-focus-switch-compact {
  border-color: rgba(63, 111, 203, 0.1);
  background: rgba(248, 251, 255, 0.78);
  color: rgba(22, 32, 51, 0.78);
}

html[data-theme="light"] body.panel-page .last-load-chip__prefix {
  color: #5f77a7;
}

html[data-theme="light"] body.panel-page .last-load-chip__text,
html[data-theme="light"] body.panel-page .card h2 {
  color: #162033;
}

html[data-theme="light"] body.panel-page .top-tabs.header-tabs .top-tab-btn,
html[data-theme="light"] body.panel-page .xkeen-ctrl-btn,
html[data-theme="light"] body.panel-page .routing-focus-btn {
  border-color: rgba(63, 111, 203, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.94));
  color: rgba(22, 32, 51, 0.76);
  box-shadow:
    0 8px 16px rgba(47, 79, 140, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] body.panel-page .top-tabs.header-tabs .top-tab-btn:hover,
html[data-theme="light"] body.panel-page .xkeen-ctrl-btn:hover {
  border-color: rgba(63, 111, 203, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.98));
}

html[data-theme="light"] body.panel-page .top-tabs.header-tabs .top-tab-btn.active,
html[data-theme="light"] body.panel-page .routing-focus-btn.is-active {
  color: #f5f8ff;
  border-color: rgba(63, 111, 203, 0.18);
  background: linear-gradient(135deg, #1d438d 0%, #3566c9 48%, #7098f2 100%);
}

html[data-theme="light"] body.panel-page .global-autorestart-toggle {
  color: rgba(71, 85, 105, 0.78);
}

html[data-theme="light"] body.panel-page .card {
  border-color: rgba(63, 111, 203, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.92));
  box-shadow:
    0 18px 38px rgba(47, 79, 140, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] body.panel-page .card p {
  color: rgba(71, 85, 105, 0.8);
}

html[data-theme="light"] body.panel-page .xk-monaco-editor,
html[data-theme="light"] body.panel-page .CodeMirror,
html[data-theme="light"] body.panel-page textarea#routing-editor,
html[data-theme="light"] body.panel-page textarea#json-editor-textarea,
html[data-theme="light"] body.panel-page .xkeen-textarea,
html[data-theme="light"] body.panel-page .routing-json-textarea {
  border-color: rgba(63, 111, 203, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
}

@media (max-width: 1180px) {
  body.panel-page .last-load-chip {
    max-width: 220px;
  }
}

@media (max-width: 900px) {
  body.panel-page .container-wide {
    padding: 14px 12px 22px;
  }

  body.panel-page .panel-header {
    margin-bottom: 10px;
    padding: 11px 12px 9px;
    border-radius: 18px;
  }

  body.panel-page .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.panel-page .last-load-chip {
    max-width: 38px;
  }

  body.panel-page .top-tabs.header-tabs {
    margin-top: 8px;
  }

  body.panel-page .top-tabs.header-tabs .top-tab-btn {
    min-height: 34px;
    padding: 5px 9px;
  }

  body.panel-page .xkeen-ctrl-row {
    gap: 8px;
    padding: 7px;
  }

  body.panel-page .global-toggle-right {
    width: auto;
  }
}

@media (max-width: 620px) {
  body.panel-page .panel-header h1 {
    font-size: 1.55rem;
  }

  body.panel-page .header-title-group {
    gap: 8px;
  }

  body.panel-page .service-core-text,
  body.panel-page .theme-toggle-btn {
    min-height: 32px;
    padding: 0 10px;
  }
}

/* Panel page: align dark tones with Mihomo generator */
body.panel-page {
  --accent: #60a5fa;
  --border: rgba(96, 165, 250, 0.16);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --header-btn-bg: rgba(15, 23, 42, 0.58);
  --header-btn-text: #e5e7eb;
  --header-tab-bg: rgba(15, 23, 42, 0.58);
  --header-tab-border: rgba(96, 165, 250, 0.14);
  --header-tab-text: rgba(219, 234, 254, 0.84);
  --editor-btn-bg: rgba(15, 23, 42, 0.58);
  --editor-btn-text: #e5e7eb;
  background:
    radial-gradient(circle at top center, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(180deg, #020617 0%, #020817 100%);
}

body.panel-page::before {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 20%),
    linear-gradient(125deg, transparent 0 44%, rgba(96, 165, 250, 0.03) 50%, transparent 56%);
  opacity: 0.56;
}

body.panel-page a {
  color: #93c5fd;
}

body.panel-page .panel-header {
  border-color: rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(3, 9, 28, 0.96), rgba(2, 8, 23, 0.94)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 52px rgba(2,8,23,0.55);
}

body.panel-page .panel-header::before {
  background: linear-gradient(90deg, rgba(125,211,252,0), rgba(125,211,252,0.14), rgba(125,211,252,0));
}

body.panel-page .panel-header h1 {
  color: #f8fbff;
}

body.panel-page .service-core-text,
body.panel-page .theme-toggle-btn,
body.panel-page .last-load-chip,
body.panel-page #xray-logs-badge,
body.panel-page .top-tabs.header-tabs .top-tab-btn,
body.panel-page .xkeen-ctrl-btn,
body.panel-page .routing-focus-btn {
  border-color: rgba(96, 165, 250, 0.18);
  background: rgba(15, 23, 42, 0.58);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

body.panel-page .service-core-text:hover,
body.panel-page .theme-toggle-btn:hover,
body.panel-page .last-load-chip:hover,
body.panel-page .top-tabs.header-tabs .top-tab-btn:hover,
body.panel-page .xkeen-ctrl-btn:hover,
body.panel-page .routing-focus-btn:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(8, 20, 54, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 24px rgba(2,8,23,0.2);
}

body.panel-page .service-core-text.has-core {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(8, 20, 54, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(96, 165, 250, 0.14);
}

body.panel-page {
  --xk-header-chip-skeleton-bg:
    linear-gradient(180deg, rgba(17, 34, 64, 0.92), rgba(8, 18, 36, 0.9));
  --xk-header-chip-skeleton-line:
    linear-gradient(90deg, rgba(147, 197, 253, 0.08), rgba(191, 219, 254, 0.22), rgba(147, 197, 253, 0.08));
}

html[data-theme="light"] body.panel-page {
  --xk-header-chip-skeleton-bg:
    linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(235, 242, 252, 0.94));
  --xk-header-chip-skeleton-line:
    linear-gradient(90deg, rgba(96, 165, 250, 0.08), rgba(59, 130, 246, 0.18), rgba(96, 165, 250, 0.08));
}

body.panel-page #xkeen-core-text[data-loading="true"],
body.panel-page #xk-update-link[data-loading="true"] {
  position: relative;
  min-width: 108px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
  text-shadow: none !important;
  overflow: hidden;
}

body.panel-page #xk-update-link[data-loading="true"] {
  min-width: 138px;
}

body.panel-page #xk-update-link.hidden[data-loading="true"] {
  display: none !important;
}

body.panel-page #xkeen-core-text[data-loading="true"]::before,
body.panel-page #xk-update-link[data-loading="true"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--xk-header-chip-skeleton-bg);
  border: 1px solid rgba(96, 165, 250, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

body.panel-page #xkeen-core-text[data-loading="true"]::after,
body.panel-page #xk-update-link[data-loading="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 12px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--xk-header-chip-skeleton-line);
  background-size: 200% 100%;
  animation: xk-header-chip-shimmer 1.35s ease-in-out infinite;
}

body.panel-page #xk-update-link[data-loading="true"] .xk-update-dot {
  opacity: 0;
}

@keyframes xk-header-chip-shimmer {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: -20% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.panel-page #xkeen-core-text[data-loading="true"]::after,
  body.panel-page #xk-update-link[data-loading="true"]::after {
    animation: none;
  }
}

body.panel-page.xk-perf-lite #xkeen-core-text[data-loading="true"]::after,
body.panel-page.xk-perf-lite #xk-update-link[data-loading="true"]::after {
  animation: none;
}

body.panel-page .top-tabs.header-tabs {
  border-color: rgba(96, 165, 250, 0.12);
  background: rgba(2, 8, 23, 0.42);
}

body.panel-page .top-tabs.header-tabs .top-tab-btn.active,
body.panel-page .routing-focus-btn.is-active {
  color: #f8fbff;
  border-color: rgba(96, 165, 250, 0.28);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.96), rgba(29, 78, 216, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 12px 24px rgba(29, 78, 216, 0.22);
}

body.panel-page .xkeen-ctrl-row,
body.panel-page .routing-focus-switch,
body.panel-page .routing-focus-switch-compact {
  border-color: rgba(96, 165, 250, 0.12);
  background: rgba(2, 8, 23, 0.44);
}

body.panel-page .last-load-chip__prefix {
  color: #93c5fd;
}

body.panel-page .last-load-chip__text {
  color: #e5e7eb;
}

body.panel-page .card {
  border-color: rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(3, 9, 28, 0.96), rgba(2, 8, 23, 0.94)),
    radial-gradient(circle at top right, rgba(59,130,246,0.08), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 24px 52px rgba(2,8,23,0.4);
  backdrop-filter: none;
}

body.panel-page .card::before {
  background: linear-gradient(90deg, rgba(125,211,252,0), rgba(125,211,252,0.2), rgba(125,211,252,0));
}

body.panel-page .card h2 {
  color: #f8fbff;
}

body.panel-page .card p {
  color: #94a3b8;
}

body.panel-page .xk-monaco-editor,
body.panel-page .CodeMirror,
body.panel-page textarea#routing-editor,
body.panel-page textarea#json-editor-textarea,
body.panel-page .xkeen-textarea,
body.panel-page .routing-json-textarea {
  border-color: rgba(96, 165, 250, 0.14);
  background: #01030a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 14px 28px rgba(2,8,23,0.22);
}

body.panel-page .xk-monaco-editor.is-fullscreen,
body.panel-page .CodeMirror.CodeMirror-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  z-index: 10040 !important;
  box-shadow: none !important;
  background: #01030a !important;
}

body.panel-page .CodeMirror.CodeMirror-fullscreen .CodeMirror-scroll {
  max-height: none !important;
  height: 100% !important;
}

body.panel-page .xkeen-cm-toolbar.is-fullscreen {
  z-index: 10060;
}

/* Panel page: stronger background vs surface separation */
body.panel-page {
  background:
    radial-gradient(circle at top center, rgba(59, 130, 246, 0.06), transparent 24%),
    linear-gradient(180deg, #01040d 0%, #010510 44%, #020617 100%);
}

body.panel-page::before {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.06), transparent 18%),
    linear-gradient(125deg, transparent 0 46%, rgba(96, 165, 250, 0.025) 50%, transparent 54%);
  opacity: 0.42;
}

body.panel-page .container-wide {
  min-height: calc(100vh - 64px);
}

body.panel-page .container-wide::before {
  content: "";
  position: absolute;
  inset: 24px 12px 24px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 20%, rgba(59, 130, 246, 0.08), transparent 24%),
    radial-gradient(circle at 76% 18%, rgba(29, 78, 216, 0.06), transparent 22%);
  filter: blur(24px);
  opacity: 0.95;
}

body.panel-page .panel-header,
body.panel-page .card {
  border-color: rgba(96, 165, 250, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 20px 44px rgba(2,8,23,0.46);
}

body.panel-page .card {
  background:
    linear-gradient(180deg, rgba(4, 11, 31, 0.98), rgba(2, 8, 23, 0.96)),
    radial-gradient(circle at top right, rgba(59,130,246,0.10), transparent 36%);
}

body.panel-page .xk-monaco-editor,
body.panel-page .CodeMirror,
body.panel-page textarea#routing-editor,
body.panel-page textarea#json-editor-textarea,
body.panel-page .xkeen-textarea,
body.panel-page .routing-json-textarea {
  border-color: rgba(96, 165, 250, 0.18);
  background: linear-gradient(180deg, rgba(0, 2, 8, 0.998), rgba(1, 4, 12, 0.992));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 0 0 1px rgba(96, 165, 250, 0.04),
    0 12px 24px rgba(2,8,23,0.16);
}

body.panel-page .xkeen-ctrl-row,
body.panel-page .top-tabs.header-tabs {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Panel page: compact outbounds helper controls */
body.panel-page #outbounds-body .outbounds-hints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0 14px;
}

body.panel-page #outbounds-body .outbounds-hint-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.panel-page #outbounds-body .outbounds-hint-field .hint-label {
  padding-left: 4px;
  color: #9db4d8;
}

body.panel-page #outbounds-body .outbounds-hint-field .xray-log-select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

body.panel-page #outbounds-body .outbounds-help-popover {
  position: relative;
  align-self: end;
}

body.panel-page #outbounds-body .outbounds-help-popover[open] {
  z-index: 8;
}

body.panel-page #outbounds-body .outbounds-help-trigger {
  list-style: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  background: linear-gradient(180deg, rgba(10, 21, 52, 0.96), rgba(5, 13, 31, 0.92));
  color: #dbeafe;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(2,8,23,0.18);
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body.panel-page #outbounds-body .outbounds-help-trigger::-webkit-details-marker {
  display: none;
}

body.panel-page #outbounds-body .outbounds-help-trigger:hover {
  border-color: rgba(125, 211, 252, 0.34);
  background: linear-gradient(180deg, rgba(15, 33, 79, 0.98), rgba(6, 18, 42, 0.94));
  transform: translateY(-1px);
}

body.panel-page #outbounds-body .outbounds-help-popover[open] .outbounds-help-trigger {
  border-color: rgba(125, 211, 252, 0.36);
  background: linear-gradient(180deg, rgba(24, 53, 122, 0.98), rgba(13, 29, 67, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 32px rgba(2,8,23,0.26);
}

body.panel-page #outbounds-body .outbounds-help-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 56px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(180deg, rgba(5, 14, 35, 0.985), rgba(2, 8, 23, 0.97)),
    radial-gradient(circle at top right, rgba(59,130,246,0.10), transparent 38%);
  color: #cbd5e1;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px rgba(2,8,23,0.34);
}

body.panel-page #outbounds-body .outbounds-help-panel code {
  color: #f8fbff;
  font-size: 0.94em;
}

html[data-theme="light"] body.panel-page #outbounds-body .outbounds-hint-field .hint-label {
  color: #5b7196;
}

html[data-theme="light"] body.panel-page #outbounds-body .outbounds-help-trigger {
  border-color: rgba(63, 111, 203, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
  color: #23407d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 10px 22px rgba(59, 91, 154, 0.12);
}

html[data-theme="light"] body.panel-page #outbounds-body .outbounds-help-panel {
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96,165,250,0.12), transparent 40%);
  color: #3b4b67;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.74),
    0 18px 40px rgba(59, 91, 154, 0.12);
}

html[data-theme="light"] body.panel-page #outbounds-body .outbounds-help-panel code {
  color: #1f2c44;
}

@media (max-width: 640px) {
  body.panel-page #outbounds-body .outbounds-hints {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.panel-page #outbounds-body .outbounds-help-popover {
    justify-self: end;
  }
}

/* Panel page: compact inline help blocks for right-side cards */
body.panel-page .xk-card-help-row {
  margin: 8px 0 14px;
}

body.panel-page .xk-card-help-popover {
  display: block;
}

body.panel-page .xk-card-help-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: linear-gradient(180deg, rgba(8, 19, 47, 0.94), rgba(4, 11, 27, 0.9));
  color: #dbeafe;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(2,8,23,0.14);
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body.panel-page .xk-card-help-trigger::-webkit-details-marker {
  display: none;
}

body.panel-page .xk-card-help-trigger:hover {
  border-color: rgba(125, 211, 252, 0.3);
  background: linear-gradient(180deg, rgba(14, 31, 75, 0.98), rgba(6, 18, 42, 0.94));
  transform: translateY(-1px);
}

body.panel-page .xk-card-help-popover[open] .xk-card-help-trigger {
  border-color: rgba(125, 211, 252, 0.34);
  background: linear-gradient(180deg, rgba(21, 48, 110, 0.98), rgba(10, 25, 57, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 14px 30px rgba(2,8,23,0.22);
}

body.panel-page .xk-card-help-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(147, 197, 253, 0.16);
  color: #f8fbff;
  font-size: 12px;
  font-weight: 700;
}

body.panel-page .xk-card-help-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.panel-page .xk-card-help-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(5, 14, 35, 0.985), rgba(2, 8, 23, 0.97)),
    radial-gradient(circle at top right, rgba(59,130,246,0.08), transparent 40%);
  color: #cbd5e1;
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 34px rgba(2,8,23,0.18);
}

body.panel-page .xk-card-help-panel p {
  margin: 0 0 8px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

body.panel-page .xk-card-help-panel p:last-child {
  margin-bottom: 0;
}

body.panel-page .xk-card-help-panel code {
  color: #f8fbff;
  font-size: 0.94em;
}

body.panel-page .xk-card-help-row--corner {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  margin-bottom: 0;
  position: relative;
}

body.panel-page .xk-card-help-row--corner .xk-card-help-popover {
  display: inline-block;
  position: relative;
}

body.panel-page .xk-card-help-row--corner .xk-card-help-popover[open] {
  z-index: 8;
}

body.panel-page .xk-card-help-row--corner .xk-card-help-trigger {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
}

body.panel-page .xk-card-help-row--corner .xk-card-help-icon {
  width: auto;
  height: auto;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1;
}

body.panel-page .xk-card-help-row--corner .xk-card-help-label {
  display: none;
}

body.panel-page .xk-card-help-row--corner .xk-card-help-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(320px, calc(100vw - 56px));
  margin-top: 0;
}

html[data-theme="light"] body.panel-page .xk-card-help-trigger {
  border-color: rgba(63, 111, 203, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 255, 0.94));
  color: #23407d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.76),
    0 10px 24px rgba(59, 91, 154, 0.1);
}

html[data-theme="light"] body.panel-page .xk-card-help-icon {
  background: rgba(96, 165, 250, 0.14);
  color: #23407d;
}

html[data-theme="light"] body.panel-page .xk-card-help-panel {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96,165,250,0.12), transparent 42%);
  color: #41516d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.74),
    0 16px 34px rgba(59, 91, 154, 0.1);
}

html[data-theme="light"] body.panel-page .xk-card-help-panel code {
  color: #1f2c44;
}

/* Panel page: header auto-restart slider + premium UI settings modal */
body.panel-page .global-toggle-right {
  gap: 8px;
}

body.panel-page .xk-global-autorestart-switch {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dbeafe;
  box-shadow: none;
}

body.panel-page .xk-global-autorestart-switch:hover {
  background: transparent;
  box-shadow: none;
}

body.panel-page .xk-global-autorestart-switch .dt-switch-slider {
  width: 34px;
  height: 18px;
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(96, 165, 250, 0.14);
}

body.panel-page .xk-global-autorestart-switch .dt-switch-slider::after {
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background: #dbeafe;
  box-shadow: 0 1px 6px rgba(2,8,23,0.28);
}

body.panel-page .xk-global-autorestart-switch input:checked + .dt-switch-slider {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.96), rgba(29, 78, 216, 0.94));
  border-color: rgba(96, 165, 250, 0.4);
}

body.panel-page .xk-global-autorestart-switch input:checked + .dt-switch-slider::after {
  transform: translateX(16px);
  background: #f8fbff;
}

body.panel-page .xk-global-autorestart-switch .dt-switch-label {
  opacity: 1;
  color: rgba(219, 234, 254, 0.86);
  font-size: calc(11.8px * var(--xk-font-scale));
  white-space: nowrap;
}

body.panel-page .xk-global-autorestart-switch:hover .dt-switch-label {
  color: #f8fbff;
}

#ui-settings-modal {
  background: rgba(1, 6, 18, 0.72);
  backdrop-filter: blur(12px);
}

#ui-settings-modal .xk-ui-settings-modal-content {
  width: min(92vw, 760px);
  max-width: 760px;
  max-height: min(90vh, 920px);
  padding: 12px 14px 14px;
  border-radius: 24px;
  border: 1px solid rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(2, 8, 23, 0.985), rgba(1, 6, 18, 0.97));
  box-shadow:
    0 34px 80px rgba(2, 8, 23, 0.54),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

#ui-settings-modal .xk-ui-settings-header {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom-color: rgba(96, 165, 250, 0.12);
}

#ui-settings-modal .xk-ui-settings-titlebox {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#ui-settings-modal .xk-ui-settings-kicker {
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#ui-settings-modal .modal-title {
  color: #f8fbff;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

#ui-settings-modal .xk-ui-settings-subtitle {
  margin: 0;
  color: rgba(191, 219, 254, 0.74);
  font-size: 0.94rem;
  line-height: 1.45;
}

#ui-settings-modal .modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(8, 19, 47, 0.72);
  color: #dbeafe;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

#ui-settings-modal .modal-close:hover {
  color: #f8fbff;
  border-color: rgba(125, 211, 252, 0.32);
  background: rgba(15, 33, 79, 0.92);
  transform: translateY(-1px);
}

#ui-settings-modal .xk-ui-settings-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#ui-settings-modal .xk-ui-settings-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#ui-settings-modal .xk-ui-setting-card {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: flex-start;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.98), rgba(2, 8, 23, 0.94)),
    radial-gradient(circle at top right, rgba(59,130,246,0.08), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 30px rgba(2,8,23,0.18);
  cursor: pointer;
  overflow: hidden;
}

#ui-settings-modal .xk-ui-setting-card:hover {
  border-color: rgba(125, 211, 252, 0.24);
  background:
    linear-gradient(180deg, rgba(9, 20, 49, 0.99), rgba(3, 10, 27, 0.96)),
    radial-gradient(circle at top right, rgba(59,130,246,0.10), transparent 38%);
}

#ui-settings-modal .xk-ui-setting-card .dt-switch-slider {
  order: 2;
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  min-width: 40px;
  max-width: 40px;
  width: 40px;
  height: 22px;
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(96, 165, 250, 0.14);
}

/* Panel premium glass accents: distinct top controls + action buttons */
body.panel-page .panel-header {
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

body.panel-page .header-actions {
  flex-wrap: wrap;
}

body.panel-page .xk-header-btn,
body.panel-page .theme-toggle-btn.xk-header-btn-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(148, 197, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 28, 48, 0.78), rgba(8, 14, 28, 0.72)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 46%);
  color: #eaf2ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26);
}

body.panel-page .xk-header-btn::before,
body.panel-page .theme-toggle-btn.xk-header-btn-theme::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%);
  opacity: 0.9;
  z-index: -1;
}

body.panel-page .xk-header-btn:hover,
body.panel-page .theme-toggle-btn.xk-header-btn-theme:hover {
  transform: translateY(-1px);
  border-color: rgba(186, 221, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -12px 22px rgba(2, 8, 23, 0.26),
    0 16px 30px rgba(2, 8, 23, 0.32);
}

body.panel-page .theme-toggle-btn.xk-header-btn-theme {
  min-width: 64px;
  padding: 0 16px;
  background:
    linear-gradient(180deg, rgba(24, 51, 104, 0.82), rgba(10, 23, 52, 0.78)),
    radial-gradient(circle at 30% 28%, rgba(147, 197, 253, 0.4), transparent 34%);
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(96, 165, 250, 0.12),
    0 14px 28px rgba(8, 47, 107, 0.3);
}

body.panel-page .xk-header-btn-ui {
  background:
    linear-gradient(180deg, rgba(26, 44, 82, 0.82), rgba(11, 23, 48, 0.78)),
    radial-gradient(circle at 24% 24%, rgba(125, 211, 252, 0.24), transparent 38%);
  border-color: rgba(103, 232, 249, 0.18);
}

body.panel-page .xk-header-btn-devtools {
  background:
    linear-gradient(180deg, rgba(37, 35, 84, 0.84), rgba(17, 18, 48, 0.8)),
    radial-gradient(circle at 28% 24%, rgba(167, 139, 250, 0.22), transparent 36%);
  border-color: rgba(167, 139, 250, 0.2);
}

body.panel-page .xk-header-btn-logout {
  background:
    linear-gradient(180deg, rgba(76, 22, 31, 0.82), rgba(41, 10, 17, 0.8)),
    radial-gradient(circle at 28% 22%, rgba(251, 113, 133, 0.18), transparent 36%);
  border-color: rgba(251, 113, 133, 0.18);
}

body.panel-page .xk-top-tab {
  position: relative;
  overflow: hidden;
}

body.panel-page .xk-top-tab::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%);
  opacity: 0.9;
}

body.panel-page .xk-top-tab-routing { border-color: rgba(96, 165, 250, 0.22); }
body.panel-page .xk-top-tab-mihomo { border-color: rgba(45, 212, 191, 0.18); }
body.panel-page .xk-top-tab-xkeen { border-color: rgba(125, 211, 252, 0.18); }
body.panel-page .xk-top-tab-logs { border-color: rgba(244, 114, 182, 0.18); }
body.panel-page .xk-top-tab-commands { border-color: rgba(250, 204, 21, 0.18); }
body.panel-page .xk-top-tab-files { border-color: rgba(192, 132, 252, 0.18); }
body.panel-page .xk-top-tab-generator { border-color: rgba(52, 211, 153, 0.18); }
body.panel-page .xk-top-tab-donate { border-color: rgba(251, 191, 36, 0.22); }

body.panel-page .xk-top-tab-routing:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(16, 39, 84, 0.92), rgba(8, 18, 40, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(96, 165, 250, 0.16), transparent 38%);
}

body.panel-page .xk-top-tab-mihomo:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(10, 47, 58, 0.92), rgba(6, 22, 29, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(45, 212, 191, 0.14), transparent 38%);
}

body.panel-page .xk-top-tab-xkeen:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(18, 45, 66, 0.92), rgba(8, 21, 33, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(125, 211, 252, 0.14), transparent 38%);
}

body.panel-page .xk-top-tab-logs:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(60, 22, 52, 0.92), rgba(30, 11, 25, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(244, 114, 182, 0.14), transparent 38%);
}

body.panel-page .xk-top-tab-commands:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(66, 48, 14, 0.92), rgba(32, 22, 8, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(250, 204, 21, 0.14), transparent 38%);
}

body.panel-page .xk-top-tab-files:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(48, 24, 72, 0.92), rgba(22, 10, 35, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(192, 132, 252, 0.14), transparent 38%);
}

body.panel-page .xk-top-tab-generator:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(15, 61, 47, 0.92), rgba(8, 28, 22, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(52, 211, 153, 0.14), transparent 38%);
}

body.panel-page .xk-top-tab-donate:hover:not(.active) {
  background:
    linear-gradient(180deg, rgba(80, 47, 11, 0.92), rgba(38, 21, 7, 0.9)),
    radial-gradient(circle at 18% 22%, rgba(251, 191, 36, 0.16), transparent 38%);
}

body.panel-page .xkeen-ctrl-btn {
  position: relative;
  overflow: hidden;
  border-width: 1px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

body.panel-page .xkeen-ctrl-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%);
}

body.panel-page .xkeen-ctrl-btn-start {
  border-color: rgba(74, 222, 128, 0.34);
  background:
    linear-gradient(180deg, rgba(9, 61, 36, 0.92), rgba(6, 31, 20, 0.9)),
    radial-gradient(circle at 22% 22%, rgba(74, 222, 128, 0.22), transparent 38%);
  color: #ebfff1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(6, 95, 70, 0.24);
}

body.panel-page .xkeen-ctrl-btn-start:hover {
  border-color: rgba(134, 239, 172, 0.48);
  background:
    linear-gradient(180deg, rgba(11, 85, 48, 0.96), rgba(6, 43, 25, 0.94)),
    radial-gradient(circle at 22% 22%, rgba(74, 222, 128, 0.28), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(6, 95, 70, 0.32);
}

body.panel-page .xkeen-ctrl-btn-stop {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(88, 19, 31, 0.92), rgba(48, 10, 18, 0.9)),
    radial-gradient(circle at 22% 22%, rgba(248, 113, 113, 0.22), transparent 38%);
  color: #fff0f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(127, 29, 29, 0.24);
}

body.panel-page .xkeen-ctrl-btn-stop:hover {
  border-color: rgba(252, 165, 165, 0.5);
  background:
    linear-gradient(180deg, rgba(115, 24, 40, 0.96), rgba(61, 11, 22, 0.94)),
    radial-gradient(circle at 22% 22%, rgba(248, 113, 113, 0.28), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(127, 29, 29, 0.34);
}

body.panel-page .xkeen-ctrl-btn-restart {
  border-color: rgba(251, 191, 36, 0.34);
  background:
    linear-gradient(180deg, rgba(92, 55, 13, 0.92), rgba(43, 25, 7, 0.9)),
    radial-gradient(circle at 22% 22%, rgba(251, 191, 36, 0.2), transparent 38%);
  color: #fff7e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(146, 64, 14, 0.24);
}

body.panel-page .xkeen-ctrl-btn-restart:hover {
  border-color: rgba(252, 211, 77, 0.52);
  background:
    linear-gradient(180deg, rgba(115, 70, 17, 0.96), rgba(60, 35, 8, 0.94)),
    radial-gradient(circle at 22% 22%, rgba(251, 191, 36, 0.26), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(146, 64, 14, 0.32);
}

body.panel-page .routing-focus-btn-gui {
  border-color: rgba(45, 212, 191, 0.18);
  background:
    linear-gradient(180deg, rgba(8, 52, 56, 0.86), rgba(5, 26, 28, 0.82)),
    radial-gradient(circle at 22% 22%, rgba(45, 212, 191, 0.15), transparent 38%);
}

body.panel-page .routing-focus-btn-raw {
  border-color: rgba(96, 165, 250, 0.2);
  background:
    linear-gradient(180deg, rgba(14, 34, 70, 0.86), rgba(7, 17, 35, 0.82)),
    radial-gradient(circle at 22% 22%, rgba(96, 165, 250, 0.16), transparent 38%);
}

html[data-theme="light"] body.panel-page .xk-header-btn,
html[data-theme="light"] body.panel-page .theme-toggle-btn.xk-header-btn-theme {
  border-color: rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 247, 255, 0.82)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.56), transparent 44%);
  color: #162033;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -10px 18px rgba(191, 219, 254, 0.16),
    0 12px 24px rgba(47, 79, 140, 0.1);
}

html[data-theme="light"] body.panel-page .xk-header-btn-theme {
  background:
    linear-gradient(180deg, rgba(236, 245, 255, 0.98), rgba(221, 235, 255, 0.9)),
    radial-gradient(circle at 30% 28%, rgba(96, 165, 250, 0.2), transparent 36%);
}

html[data-theme="light"] body.panel-page .xk-header-btn-ui {
  background:
    linear-gradient(180deg, rgba(240, 251, 255, 0.98), rgba(225, 243, 255, 0.9)),
    radial-gradient(circle at 24% 24%, rgba(103, 232, 249, 0.18), transparent 38%);
}

html[data-theme="light"] body.panel-page .xk-header-btn-devtools {
  background:
    linear-gradient(180deg, rgba(245, 241, 255, 0.98), rgba(234, 228, 255, 0.9)),
    radial-gradient(circle at 24% 24%, rgba(167, 139, 250, 0.16), transparent 38%);
}

html[data-theme="light"] body.panel-page .xk-header-btn-logout {
  background:
    linear-gradient(180deg, rgba(255, 243, 245, 0.98), rgba(255, 228, 233, 0.9)),
    radial-gradient(circle at 24% 24%, rgba(251, 113, 133, 0.14), transparent 38%);
}

html[data-theme="light"] body.panel-page .xkeen-ctrl-btn-start {
  border-color: rgba(34, 197, 94, 0.26);
  background:
    linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.92)),
    radial-gradient(circle at 20% 22%, rgba(74, 222, 128, 0.18), transparent 38%);
  color: #14532d;
}

html[data-theme="light"] body.panel-page .xkeen-ctrl-btn-stop {
  border-color: rgba(239, 68, 68, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.92)),
    radial-gradient(circle at 20% 22%, rgba(248, 113, 113, 0.18), transparent 38%);
  color: #7f1d1d;
}

html[data-theme="light"] body.panel-page .xkeen-ctrl-btn-restart {
  border-color: rgba(245, 158, 11, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.92)),
    radial-gradient(circle at 20% 22%, rgba(251, 191, 36, 0.18), transparent 38%);
  color: #78350f;
}

html[data-theme="light"] body.panel-page .routing-focus-btn-gui {
  border-color: rgba(20, 184, 166, 0.18);
  background:
    linear-gradient(180deg, rgba(236, 254, 255, 0.98), rgba(204, 251, 241, 0.92)),
    radial-gradient(circle at 20% 22%, rgba(45, 212, 191, 0.16), transparent 38%);
}

html[data-theme="light"] body.panel-page .routing-focus-btn-raw {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92)),
    radial-gradient(circle at 20% 22%, rgba(96, 165, 250, 0.16), transparent 38%);
}

#ui-settings-modal .xk-ui-setting-card .dt-switch-slider::after {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #dbeafe;
  box-shadow: 0 1px 8px rgba(2,8,23,0.28);
}

#ui-settings-modal .xk-ui-setting-card input:checked + .dt-switch-slider {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.96), rgba(29, 78, 216, 0.94));
  border-color: rgba(96, 165, 250, 0.42);
}

#ui-settings-modal .xk-ui-setting-card input:checked + .dt-switch-slider::after {
  transform: translateX(18px);
  background: #f8fbff;
}

#ui-settings-modal .xk-ui-setting-copy {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#ui-settings-modal .xk-ui-setting-copy strong {
  color: #f8fbff;
  font-size: 0.97rem;
  line-height: 1.3;
  font-weight: 700;
}

#ui-settings-modal .xk-ui-setting-copy small {
  color: rgba(191, 219, 254, 0.72);
  font-size: 0.86rem;
  line-height: 1.45;
}

#ui-settings-modal .xk-ui-setting-copy code {
  color: #f8fbff;
  font-size: 0.94em;
}

#ui-settings-modal .xk-ui-setting-card input:checked ~ .xk-ui-setting-copy strong {
  color: #ffffff;
}

#ui-settings-modal .xk-ui-setting-card input:disabled + .dt-switch-slider,
#ui-settings-modal .xk-ui-setting-card input:disabled ~ .xk-ui-setting-copy {
  opacity: 0.58;
}

#ui-settings-modal .xk-ui-settings-status {
  margin-top: 0;
  min-height: 22px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(2, 8, 23, 0.5);
  color: rgba(191, 219, 254, 0.82);
}

#ui-settings-modal .xk-ui-settings-status.error {
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

#ui-settings-modal .xk-ui-settings-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(96, 165, 250, 0.1);
  justify-content: flex-end;
}

html[data-theme="light"] body.panel-page .xk-global-autorestart-switch {
  color: #23407d;
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] body.panel-page .xk-global-autorestart-switch .dt-switch-slider {
  background: rgba(226, 232, 240, 0.95);
  border-color: rgba(63, 111, 203, 0.14);
}

html[data-theme="light"] body.panel-page .xk-global-autorestart-switch .dt-switch-slider::after {
  background: #ffffff;
}

html[data-theme="light"] body.panel-page .xk-global-autorestart-switch .dt-switch-label {
  color: rgba(35, 64, 125, 0.86);
}

html[data-theme="light"] #ui-settings-modal {
  background: rgba(15, 23, 42, 0.36);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-modal-content {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(244, 248, 255, 0.97));
  box-shadow:
    0 30px 70px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-header,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-footer {
  border-color: rgba(63, 111, 203, 0.12);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-kicker {
  color: #2563eb;
}

html[data-theme="light"] #ui-settings-modal .modal-title,
html[data-theme="light"] #ui-settings-modal .xk-ui-setting-copy strong,
html[data-theme="light"] #ui-settings-modal .xk-ui-setting-copy code {
  color: #162033;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-subtitle,
html[data-theme="light"] #ui-settings-modal .xk-ui-setting-copy small,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status {
  color: rgba(59, 75, 103, 0.82);
}

html[data-theme="light"] #ui-settings-modal .modal-close {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #23407d;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96,165,250,0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 14px 30px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card .dt-switch-slider {
  background: rgba(226, 232, 240, 0.95);
  border-color: rgba(63, 111, 203, 0.14);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card .dt-switch-slider::after {
  background: #ffffff;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 720px) {
  #ui-settings-modal .xk-ui-settings-modal-content {
    width: min(96vw, 720px);
    border-radius: 18px;
  }

  #ui-settings-modal .xk-ui-settings-grid {
    gap: 10px;
  }

  #ui-settings-modal .xk-ui-setting-card {
    padding: 14px;
  }

  #ui-settings-modal .xk-ui-settings-subtitle {
    font-size: 0.88rem;
  }

  body.panel-page .xk-global-autorestart-switch {
    padding: 0;
  }
}

/* Panel page: premium core modal + DAT explorer modal */
#core-modal.xk-core-modal-shell,
#routing-dat-contents-modal.xk-dat-modal-shell {
  background: rgba(1, 6, 18, 0.78);
  backdrop-filter: blur(12px);
}

#core-modal .xk-core-modal-content {
  width: min(94vw, 840px);
  max-width: 840px;
  max-height: min(90vh, 860px);
  padding: 12px 14px 14px;
  border-radius: 24px;
  border: 1px solid rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(2, 8, 23, 0.985), rgba(1, 6, 18, 0.97));
  box-shadow:
    0 34px 80px rgba(2, 8, 23, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#core-modal .xk-core-modal-header,
#routing-dat-contents-modal .xk-dat-modal-header {
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom-color: rgba(96, 165, 250, 0.12);
}

#core-modal .xk-core-titlebox,
#routing-dat-contents-modal .xk-dat-modal-titlebox {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#core-modal .xk-core-kicker,
#routing-dat-contents-modal .xk-dat-modal-kicker {
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#core-modal .modal-title,
#routing-dat-contents-modal .modal-title {
  color: #f8fbff;
  font-weight: 700;
  letter-spacing: -0.03em;
}

#core-modal .modal-close,
#routing-dat-contents-modal .modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(8, 19, 47, 0.72);
  color: #dbeafe;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

#core-modal .modal-close:hover,
#routing-dat-contents-modal .modal-close:hover {
  color: #f8fbff;
  border-color: rgba(125, 211, 252, 0.32);
  background: rgba(15, 33, 79, 0.92);
  transform: translateY(-1px);
}

#core-modal .xk-core-modal-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#core-modal .xk-core-intro {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(9, 20, 49, 0.94), rgba(3, 10, 27, 0.96)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(2, 8, 23, 0.18);
}

#core-modal .xk-core-lead {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(9, 20, 49, 0.94), rgba(3, 10, 27, 0.96)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(2, 8, 23, 0.18);
}

#core-modal .xk-core-lead-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#core-modal .xk-core-lead strong {
  color: #f8fbff;
  font-size: 1rem;
  line-height: 1.3;
}

#core-modal .xk-core-lead-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(5, 16, 42, 0.88);
  color: #c7d2fe;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#core-modal .xk-core-description {
  margin: 0;
  color: rgba(191, 219, 254, 0.76);
  font-size: 0.93rem;
  line-height: 1.45;
}

#core-modal .xk-core-description-secondary {
  color: rgba(148, 163, 184, 0.82);
}

#core-modal .xk-core-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
  width: 100%;
  align-self: stretch;
}

#core-modal .xk-core-select-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#core-modal .xk-core-select-kicker {
  color: rgba(125, 211, 252, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#core-modal .xk-core-select-note {
  color: rgba(191, 219, 254, 0.68);
  font-size: 0.82rem;
  line-height: 1.35;
}

#core-modal .xk-core-option {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 96px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.98), rgba(2, 8, 23, 0.94)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(2, 8, 23, 0.18);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#core-modal .xk-core-option::after {
  content: '';
  position: absolute;
  inset: auto 16px 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(125, 211, 252, 0), rgba(125, 211, 252, 0.54), rgba(125, 211, 252, 0));
  opacity: 0.28;
}

#core-modal .xk-core-option:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.26);
  background:
    linear-gradient(180deg, rgba(9, 20, 49, 0.99), rgba(3, 10, 27, 0.96)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 34px rgba(2, 8, 23, 0.22);
}

#core-modal .xk-core-option.is-current:not(.active) {
  border-color: rgba(125, 211, 252, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 34px rgba(2, 8, 23, 0.20);
}

#core-modal .xk-core-option.active {
  border-color: rgba(125, 211, 252, 0.42);
  background:
    linear-gradient(180deg, rgba(30, 64, 175, 0.94), rgba(29, 78, 216, 0.88)),
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.18), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 18px 38px rgba(29, 78, 216, 0.24);
}

#core-modal .xk-core-option[disabled] {
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

#core-modal .xk-core-option-eyebrow {
  color: rgba(148, 163, 184, 0.88);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#core-modal .xk-core-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#core-modal .xk-core-option-title {
  color: #f8fbff;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#core-modal .xk-core-option-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(3, 12, 30, 0.72);
  color: rgba(191, 219, 254, 0.82);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

#core-modal .xk-core-option.active .xk-core-option-state {
  border-color: rgba(191, 219, 254, 0.22);
  background: rgba(255, 255, 255, 0.14);
  color: #eff6ff;
}

#core-modal .xk-core-option-note {
  color: rgba(191, 219, 254, 0.72);
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: left;
}

#core-modal .xk-core-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

#core-modal .xk-core-option-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(2, 8, 23, 0.54);
  color: rgba(191, 219, 254, 0.76);
  font-size: 0.72rem;
  font-weight: 600;
}

#core-modal .xk-core-status {
  margin: 0;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(2, 8, 23, 0.5);
  color: rgba(191, 219, 254, 0.82);
  font-size: 0.84rem;
  line-height: 1.42;
}

#core-modal .xk-core-status[data-state="loading"],
#core-modal .xk-core-status[data-state="busy"] {
  border-color: rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(9, 20, 49, 0.88), rgba(3, 10, 27, 0.92)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 38%);
}

#core-modal .xk-core-status[data-state="error"] {
  border-color: rgba(248, 113, 113, 0.26);
  background: linear-gradient(180deg, rgba(69, 10, 10, 0.44), rgba(31, 10, 10, 0.54));
  color: rgba(254, 202, 202, 0.96);
}

#core-modal .xk-core-status:empty,
#routing-dat-contents-modal #routing-dat-contents-routing-status:empty,
#routing-dat-contents-modal #routing-dat-contents-items-status:empty,
#routing-dat-contents-modal #routing-dat-contents-tags-status:empty {
  display: none;
}

#core-modal .xk-core-modal-actions,
#routing-dat-contents-modal .xk-dat-modal-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(96, 165, 250, 0.10);
}

#core-modal .xk-core-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#core-modal .xk-core-actions-copy {
  flex: 1 1 280px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 0.82rem;
  line-height: 1.45;
}

#core-modal .xk-core-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#core-modal .xk-core-actions-row > button {
  min-width: 122px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
}

#routing-dat-contents-modal .xk-dat-modal-content {
  width: min(96vw, 1240px);
  max-width: 1240px;
  height: min(92vh, 980px);
  max-height: min(92vh, 980px);
  padding: 12px 14px 14px;
  border-radius: 24px;
  border: 1px solid rgba(71, 85, 105, 0.82);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 30%),
    radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(2, 8, 23, 0.985), rgba(1, 6, 18, 0.97));
  box-shadow:
    0 34px 88px rgba(2, 8, 23, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#routing-dat-contents-modal .xk-dat-modal-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#routing-dat-contents-modal .xk-dat-head {
  gap: 12px;
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(8, 19, 47, 0.92), rgba(3, 10, 27, 0.95)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(2, 8, 23, 0.18);
}

#routing-dat-contents-modal .xk-dat-meta {
  gap: 10px;
  min-width: 0;
}

#routing-dat-contents-modal .dat-contents-kind {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background: rgba(5, 16, 42, 0.86);
  color: #eff6ff;
  font-weight: 700;
}

#routing-dat-contents-modal .dat-contents-path {
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(2, 8, 23, 0.64);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#routing-dat-contents-modal .xk-dat-controls {
  gap: 8px;
}

#routing-dat-contents-modal .btn-secondary {
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(8, 19, 47, 0.92), rgba(3, 10, 27, 0.95)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 38%);
  color: #e5efff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 20px rgba(2, 8, 23, 0.12);
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#routing-dat-contents-modal .btn-secondary:hover:not([disabled]) {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.30);
  background:
    linear-gradient(180deg, rgba(12, 28, 66, 0.96), rgba(4, 12, 32, 0.98)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 38%);
}

#routing-dat-contents-modal .btn-secondary[disabled] {
  opacity: 0.5;
  box-shadow: none;
}

#routing-dat-contents-modal .routing-dat-input,
#routing-dat-contents-modal .dat-contents-select {
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(2, 8, 23, 0.76);
  color: #e5efff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#routing-dat-contents-modal .routing-dat-input::placeholder {
  color: rgba(148, 163, 184, 0.88);
}

#routing-dat-contents-modal .dat-contents-tags,
#routing-dat-contents-modal .dat-contents-items {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background:
    linear-gradient(180deg, rgba(5, 13, 33, 0.98), rgba(2, 8, 23, 0.94)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 32px rgba(2, 8, 23, 0.18);
}

#routing-dat-contents-modal .dat-contents-tags-top,
#routing-dat-contents-modal .dat-contents-items-top {
  margin-bottom: 10px;
}

#routing-dat-contents-modal .dat-contents-search-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#routing-dat-contents-modal .dat-contents-selected {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#routing-dat-contents-modal .dat-contents-selected-label {
  color: rgba(191, 219, 254, 0.72);
  font-weight: 600;
}

#routing-dat-contents-modal #routing-dat-contents-selected-tag {
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(2, 8, 23, 0.62);
  color: #f8fbff;
}

#routing-dat-contents-modal .dat-contents-used-badge {
  border-radius: 999px;
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(6, 95, 70, 0.32);
  color: #dcfce7;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.10),
    0 0 16px rgba(34, 197, 94, 0.12);
}

#routing-dat-contents-modal .dat-contents-pager-inline {
  gap: 8px;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.10);
  background: rgba(2, 8, 23, 0.46);
}

#routing-dat-contents-modal .dat-contents-page-info {
  min-width: 88px;
  text-align: center;
  color: rgba(191, 219, 254, 0.80);
  font-size: 0.85rem;
}

#routing-dat-contents-modal .dat-contents-routingbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1.45fr) minmax(180px, 0.85fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(4, 12, 32, 0.66);
}

#routing-dat-contents-modal .dat-contents-routing-label {
  color: rgba(191, 219, 254, 0.78);
  font-weight: 700;
}

#routing-dat-contents-modal #routing-dat-contents-routing-status,
#routing-dat-contents-modal #routing-dat-contents-items-status,
#routing-dat-contents-modal #routing-dat-contents-tags-status {
  color: rgba(191, 219, 254, 0.74);
  font-size: 0.84rem;
}

#routing-dat-contents-modal #routing-dat-contents-routing-status {
  grid-column: 1 / -1;
  min-height: 18px;
}

#routing-dat-contents-modal .dat-contents-items-search-row {
  gap: 10px;
  align-items: center;
}

#routing-dat-contents-modal .dat-contents-search-mode,
#routing-dat-contents-modal .dat-contents-ipfilter {
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.10);
  background: rgba(2, 8, 23, 0.46);
}

#routing-dat-contents-modal .dat-contents-search-mode .btn-secondary,
#routing-dat-contents-modal .dat-contents-ipfilter .btn-secondary {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: rgba(191, 219, 254, 0.78);
  box-shadow: none;
}

#routing-dat-contents-modal .dat-contents-search-mode .btn-secondary.is-active,
#routing-dat-contents-modal .dat-contents-ipfilter .btn-secondary.is-active {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.96), rgba(29, 78, 216, 0.94));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(29, 78, 216, 0.22);
}

#routing-dat-contents-modal .dat-contents-tags-list,
#routing-dat-contents-modal .dat-contents-items-list {
  border-color: rgba(96, 165, 250, 0.10);
  background: rgba(1, 7, 22, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#routing-dat-contents-modal .dat-tag-row {
  padding: 4px;
  border-radius: 16px;
  border: 1px solid transparent;
  min-width: 0;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

#routing-dat-contents-modal .dat-tag-row:hover {
  border-color: rgba(96, 165, 250, 0.12);
  background: rgba(8, 19, 47, 0.34);
}

#routing-dat-contents-modal .dat-tag-group-head {
  margin-left: 2px;
  margin-right: 2px;
}

#routing-dat-contents-modal .dat-tag-group-head.is-secondary {
  border-top-color: rgba(96, 165, 250, 0.12);
}

#routing-dat-contents-modal .dat-tag-group-title {
  color: #bfdbfe;
}

#routing-dat-contents-modal .dat-tag-group-head.is-secondary .dat-tag-group-title {
  color: #94a3b8;
}

#routing-dat-contents-modal .dat-tag-group-count {
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(5, 16, 42, 0.68);
}

#routing-dat-contents-modal .dat-tag-main.btn-secondary {
  justify-content: flex-start;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#routing-dat-contents-modal .dat-tag-copy.btn-secondary {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

#routing-dat-contents-modal .dat-tag-count {
  border-color: rgba(96, 165, 250, 0.10);
  background: rgba(5, 16, 42, 0.62);
  color: #cbd5e1;
}

#routing-dat-contents-modal .dat-tag-used {
  border-color: rgba(8, 36, 27, 0.88);
  background: rgba(3, 13, 10, 0.86);
  opacity: 0.88;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.06);
}

#routing-dat-contents-modal .dat-tag-used.is-on,
#routing-dat-contents-modal .dat-tag-row.is-used .dat-tag-used {
  border-color: rgba(167, 243, 208, 0.92);
  background: linear-gradient(180deg, #34d399, #16a34a);
  opacity: 1;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.16),
    0 0 14px rgba(34, 197, 94, 0.46),
    inset 0 0 0 1px rgba(236, 253, 245, 0.55);
}

#routing-dat-contents-modal .dat-item-row {
  padding: 7px 4px;
  border-bottom-color: rgba(30, 41, 59, 0.58);
}

#routing-dat-contents-modal .xk-dat-modal-actions .btn-secondary {
  min-width: 120px;
}

html[data-theme="light"] #core-modal.xk-core-modal-shell,
html[data-theme="light"] #routing-dat-contents-modal.xk-dat-modal-shell {
  background: rgba(15, 23, 42, 0.36);
}

html[data-theme="light"] #core-modal .xk-core-modal-content,
html[data-theme="light"] #routing-dat-contents-modal .xk-dat-modal-content {
  border-color: rgba(2, 6, 23, 0.16);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(244, 248, 255, 0.97));
  box-shadow:
    0 30px 70px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] #core-modal .xk-core-modal-header,
html[data-theme="light"] #core-modal .xk-core-modal-actions,
html[data-theme="light"] #routing-dat-contents-modal .xk-dat-modal-header,
html[data-theme="light"] #routing-dat-contents-modal .xk-dat-modal-actions {
  border-color: rgba(63, 111, 203, 0.12);
}

html[data-theme="light"] #core-modal .xk-core-kicker,
html[data-theme="light"] #routing-dat-contents-modal .xk-dat-modal-kicker {
  color: #2563eb;
}

html[data-theme="light"] #core-modal .modal-title,
html[data-theme="light"] #routing-dat-contents-modal .modal-title,
html[data-theme="light"] #core-modal .xk-core-lead strong,
html[data-theme="light"] #core-modal .xk-core-option-title,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-kind,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-selected-tag {
  color: #162033;
}

html[data-theme="light"] #core-modal .modal-close,
html[data-theme="light"] #routing-dat-contents-modal .modal-close {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #23407d;
}

html[data-theme="light"] #core-modal .xk-core-intro,
html[data-theme="light"] #core-modal .xk-core-lead,
html[data-theme="light"] #core-modal .xk-core-option,
html[data-theme="light"] #routing-dat-contents-modal .xk-dat-head,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-tags,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-items {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] #core-modal .xk-core-description,
html[data-theme="light"] #core-modal .xk-core-option-note,
html[data-theme="light"] #core-modal .xk-core-status,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-selected-label,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-routing-label,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-routing-status,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-items-status,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-tags-status,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-page-info {
  color: rgba(59, 75, 103, 0.82);
}

html[data-theme="light"] #core-modal .xk-core-lead-chip,
html[data-theme="light"] #core-modal .xk-core-status,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-kind,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-path,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-routingbar,
html[data-theme="light"] #routing-dat-contents-modal .routing-dat-input,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-search-mode,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-ipfilter,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-tags-list,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-items-list,
html[data-theme="light"] #routing-dat-contents-modal .dat-tag-count {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.80);
}

html[data-theme="light"] #routing-dat-contents-modal .btn-secondary {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.92)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 38%);
  color: #23407d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 22px rgba(59, 91, 154, 0.08);
}

@media (max-width: 980px) {
  #routing-dat-contents-modal {
    padding: 6px;
  }

  #routing-dat-contents-modal .xk-dat-modal-content {
    width: min(100vw, 980px);
    height: min(96vh, 980px);
    border-radius: 18px;
  }

  #routing-dat-contents-modal .xk-dat-head,
  #routing-dat-contents-modal .dat-contents-items-top,
  #routing-dat-contents-modal .dat-contents-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #routing-dat-contents-modal .dat-contents-search-row {
    grid-template-columns: 1fr;
  }

  #routing-dat-contents-modal .dat-contents-routingbar {
    grid-template-columns: 1fr;
  }

  #routing-dat-contents-modal .dat-contents-pager-inline {
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  #core-modal .xk-core-modal-content {
    width: min(96vw, 840px);
    border-radius: 18px;
  }

  #core-modal .xk-core-select-head,
  #core-modal .xk-core-lead,
  #core-modal .xk-core-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #core-modal .xk-core-select-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  #core-modal .xk-core-actions-row {
    width: 100%;
    justify-content: stretch;
  }

  #core-modal .xk-core-actions-row > button {
    flex: 1 1 0;
  }

  #routing-dat-contents-modal .xk-dat-controls,
  #routing-dat-contents-modal .dat-contents-items-search-row {
    width: 100%;
  }
}

/* Panel page: premium compact DAT card */
body.panel-page .routing-dat-card {
  border: 1px solid rgba(64, 108, 204, 0.20);
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(3, 11, 29, 0.985), rgba(2, 8, 23, 0.97));
  box-shadow:
    0 24px 56px rgba(2, 8, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page #routing-dat-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.panel-page .routing-dat-toolbar {
  gap: 12px;
  margin-bottom: 0;
  align-items: center;
}

body.panel-page .routing-dat-toolbar-left {
  gap: 8px;
  overflow: visible;
}

body.panel-page .routing-dat-help-popover {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

body.panel-page .routing-dat-help-popover[open] {
  z-index: 8;
}

body.panel-page .routing-dat-help-popover .xk-card-help-trigger {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
}

body.panel-page .routing-dat-help-popover .xk-card-help-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 56px));
  margin-top: 0;
}

body.panel-page .routing-dat-toolbar .status {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(191, 219, 254, 0.78);
  font-size: calc(12px * var(--xk-font-scale));
}

body.panel-page .routing-dat-grid {
  gap: 10px;
}

body.panel-page .routing-dat-item {
  border-radius: 18px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.98), rgba(2, 8, 23, 0.94)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(2, 8, 23, 0.18);
}

body.panel-page .routing-dat-head {
  align-items: flex-start;
  gap: 10px;
}

body.panel-page .routing-dat-title {
  gap: 3px;
}

body.panel-page .routing-dat-name {
  color: #f8fbff;
  font-size: calc(15px * var(--xk-font-scale));
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.panel-page .routing-dat-file,
body.panel-page .routing-dat-meta,
body.panel-page .routing-dat-field {
  color: rgba(191, 219, 254, 0.70);
}

body.panel-page .routing-dat-meta {
  font-size: calc(11.5px * var(--xk-font-scale));
  text-align: right;
}

body.panel-page .routing-dat-field {
  margin-top: 8px;
  gap: 4px;
  font-size: calc(11.5px * var(--xk-font-scale));
}

body.panel-page .routing-dat-input,
body.panel-page .routing-dat-select {
  min-height: 36px;
  border-radius: 14px;
  border-color: rgba(96, 165, 250, 0.14);
  background: rgba(2, 8, 23, 0.76);
  color: #e5efff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.panel-page .routing-dat-input:focus,
body.panel-page .routing-dat-select:focus {
  border-color: rgba(96, 165, 250, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(59, 130, 246, 0.24);
}

body.panel-page .routing-dat-combo-btn {
  width: 38px;
  border-radius: 14px;
}

body.panel-page .routing-dat-found {
  border-radius: 14px;
  border-color: rgba(96, 165, 250, 0.10);
  background: rgba(1, 7, 22, 0.76);
  padding: 6px;
  max-height: 128px;
}

body.panel-page .routing-dat-found-item:hover {
  background: rgba(37, 99, 235, 0.14);
}

body.panel-page .routing-dat-found-item.is-current {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(37, 99, 235, 0.12);
}

body.panel-page .routing-dat-actions-inline {
  margin-top: 10px;
  gap: 8px;
}

body.panel-page .routing-dat-actions-inline .btn-icon {
  min-height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(8, 19, 47, 0.92), rgba(3, 10, 27, 0.95)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 20px rgba(2, 8, 23, 0.12);
}

body.panel-page .routing-dat-actions-inline .btn-icon:hover {
  border-color: rgba(125, 211, 252, 0.30);
  background:
    linear-gradient(180deg, rgba(12, 28, 66, 0.96), rgba(4, 12, 32, 0.98)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 38%);
  transform: translateY(-1px);
}

html[data-theme="light"] body.panel-page .routing-dat-card {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(244, 248, 255, 0.97));
  box-shadow:
    0 22px 50px rgba(59, 91, 154, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body.panel-page .routing-dat-toolbar .status,
html[data-theme="light"] body.panel-page .routing-dat-file,
html[data-theme="light"] body.panel-page .routing-dat-meta,
html[data-theme="light"] body.panel-page .routing-dat-field {
  color: rgba(59, 75, 103, 0.82);
}

html[data-theme="light"] body.panel-page .routing-dat-item,
html[data-theme="light"] body.panel-page .routing-dat-help-popover .xk-card-help-panel {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] body.panel-page .routing-dat-name {
  color: #162033;
}

html[data-theme="light"] body.panel-page .routing-dat-input,
html[data-theme="light"] body.panel-page .routing-dat-select,
html[data-theme="light"] body.panel-page .routing-dat-found {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: #162033;
}

html[data-theme="light"] body.panel-page .routing-dat-actions-inline .btn-icon {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.92)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 22px rgba(59, 91, 154, 0.08);
}

@media (max-width: 720px) {
  body.panel-page .routing-dat-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  body.panel-page .routing-dat-toolbar-left {
    flex-wrap: wrap;
    overflow: visible;
  }

  body.panel-page .routing-dat-help-popover .xk-card-help-panel {
    right: auto;
    left: 0;
  }
}

/* Panel page: premium side cards for right column */
body.panel-page .routing-side-grid > .routing-side-card {
  border: 1px solid rgba(64, 108, 204, 0.18);
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(3, 11, 29, 0.985), rgba(2, 8, 23, 0.97));
  box-shadow:
    0 20px 46px rgba(2, 8, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.panel-page .routing-side-card .commands-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

body.panel-page .routing-side-card .commands-header h2 {
  color: #f8fbff;
  font-size: calc(15px * var(--xk-font-scale));
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

body.panel-page .routing-side-card .commands-header > span:last-child {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(9, 20, 49, 0.68);
  border: 1px solid rgba(96, 165, 250, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

body.panel-page .routing-side-card > [id$="-body"] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(96, 165, 250, 0.10);
}

body.panel-page .routing-side-card .xk-fragment-row,
body.panel-page .routing-side-card #outbounds-body .outbounds-hints {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.10);
  background: rgba(4, 12, 32, 0.52);
}

body.panel-page .routing-side-card .xk-fragment-row {
  margin: 0 0 10px;
}

body.panel-page .routing-side-card .xk-fragment-select .hint-label,
body.panel-page .routing-side-card #outbounds-body .outbounds-hint-field .hint-label {
  color: #9db4d8;
}

body.panel-page .routing-side-card .mode-item {
  position: relative;
  border-radius: 16px;
  border-color: rgba(96, 165, 250, 0.10);
  background:
    linear-gradient(180deg, rgba(6, 15, 38, 0.94), rgba(2, 8, 23, 0.90));
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

body.panel-page .routing-side-card .mode-item strong {
  color: #f8fbff;
}

body.panel-page .routing-side-card .mode-item small,
body.panel-page .routing-side-card p,
body.panel-page .routing-side-card .xk-card-desc,
body.panel-page .routing-side-card .hint {
  color: rgba(191, 219, 254, 0.72);
}

body.panel-page .routing-side-card--inbounds .mode-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

body.panel-page .routing-side-card--inbounds .mode-item input {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  accent-color: #60a5fa;
}

body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) {
  border-color: rgba(125, 211, 252, 0.34);
  background:
    linear-gradient(180deg, rgba(18, 45, 108, 0.96), rgba(8, 24, 62, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(29, 78, 216, 0.18);
  transform: translateY(-1px);
}

body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked)::before {
  opacity: 1;
  background: linear-gradient(180deg, #93c5fd, #3b82f6);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
}

body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) strong {
  color: #ffffff;
}

body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) small {
  color: rgba(239, 246, 255, 0.88);
}

body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) input {
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.42));
}

body.panel-page .routing-side-card--scenario #routing-scenario-badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 82px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(9, 20, 49, 0.68);
  border: 1px solid rgba(96, 165, 250, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: calc(12px * var(--xk-font-scale));
  text-transform: none;
}

body.panel-page .routing-side-card--scenario .commands-header h2 {
  flex: 1 1 auto;
  min-width: 0;
}

body.panel-page .routing-scenario-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.panel-page .routing-scenario-help-row {
  display: flex;
  justify-content: flex-start;
  margin: -6px 0 18px;
}

body.panel-page .routing-scenario-help-popover .xk-card-help-trigger {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  gap: 0;
}

body.panel-page .routing-scenario-help-popover .xk-card-help-label {
  display: none;
}

body.panel-page .routing-scenario-help-popover .xk-card-help-icon {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 13px;
  line-height: 1;
}

body.panel-page .routing-scenario-help-panel {
  margin-bottom: 14px;
}

body.panel-page .routing-scenario-help-panel ul {
  margin: 8px 0 10px;
  padding-left: 18px;
}

body.panel-page .routing-scenario-help-panel li {
  margin: 0 0 7px;
}

body.panel-page .routing-scenario-help-panel li:last-child {
  margin-bottom: 0;
}

body.panel-page .routing-scenario-help-panel b {
  color: #f8fbff;
  font-weight: 700;
}

body.panel-page .routing-side-card--scenario .routing-scenario-option {
  cursor: pointer;
}

body.panel-page .routing-side-card--scenario .routing-scenario-option input {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  accent-color: #60a5fa;
}

body.panel-page .routing-side-card--scenario .routing-scenario-option code {
  color: #bfdbfe;
}

body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) {
  border-color: rgba(45, 212, 191, 0.34);
  background:
    linear-gradient(180deg, rgba(13, 56, 72, 0.96), rgba(8, 34, 50, 0.94)),
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(20, 184, 166, 0.14);
}

body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) strong {
  color: #f0fdfa;
}

body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) small,
body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) code {
  color: rgba(204, 251, 241, 0.90);
}

body.panel-page .routing-scenario-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

body.panel-page .routing-scenario-actions .btn-compact {
  min-height: 32px;
}

body.panel-page .routing-scenario-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(4, 12, 32, 0.42);
  color: rgba(191, 219, 254, 0.78);
  font-size: calc(12px * var(--xk-font-scale));
  line-height: 1.35;
}

body.panel-page .routing-scenario-status.is-success {
  border-color: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
}

body.panel-page .routing-scenario-status.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  color: #fde68a;
}

body.panel-page .routing-scenario-status.is-error {
  border-color: rgba(248, 113, 113, 0.24);
  color: #fecaca;
}

body.panel-page .routing-side-card .links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.panel-page .routing-side-card .links li {
  margin: 0;
}

body.panel-page .routing-side-card .links a {
  display: block;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.10);
  background: rgba(4, 12, 32, 0.44);
  color: #bfdbfe;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

body.panel-page .routing-side-card .links a:hover {
  border-color: rgba(125, 211, 252, 0.26);
  background: rgba(10, 24, 58, 0.58);
  transform: translateY(-1px);
}

body.panel-page .routing-side-card .backup-actions {
  gap: 8px;
}

.xk-backups-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 12px;
}

.xk-backups-toolbar-btn.btn-secondary {
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

body.panel-page .routing-side-card .xk-card-help-row {
  margin-bottom: 0;
}

html[data-theme="light"] body.panel-page .routing-side-grid > .routing-side-card {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(244, 248, 255, 0.97));
  box-shadow:
    0 18px 42px rgba(59, 91, 154, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body.panel-page .routing-side-card .commands-header h2,
html[data-theme="light"] body.panel-page .routing-side-card .mode-item strong {
  color: #162033;
}

html[data-theme="light"] body.panel-page .routing-side-card .commands-header > span:last-child {
  color: #23407d;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(63, 111, 203, 0.12);
}

html[data-theme="light"] body.panel-page .routing-side-card > [id$="-body"] {
  border-top-color: rgba(63, 111, 203, 0.10);
}

html[data-theme="light"] body.panel-page .routing-side-card .xk-fragment-row,
html[data-theme="light"] body.panel-page .routing-side-card #outbounds-body .outbounds-hints,
html[data-theme="light"] body.panel-page .routing-side-card .mode-item,
html[data-theme="light"] body.panel-page .routing-side-card .links a {
  border-color: rgba(63, 111, 203, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.92)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 22px rgba(59, 91, 154, 0.06);
}

html[data-theme="light"] body.panel-page .routing-side-card .xk-fragment-select .hint-label,
html[data-theme="light"] body.panel-page .routing-side-card #outbounds-body .outbounds-hint-field .hint-label,
html[data-theme="light"] body.panel-page .routing-side-card .mode-item small,
html[data-theme="light"] body.panel-page .routing-side-card p,
html[data-theme="light"] body.panel-page .routing-side-card .xk-card-desc,
html[data-theme="light"] body.panel-page .routing-side-card .hint {
  color: rgba(59, 75, 103, 0.82);
}

html[data-theme="light"] body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) {
  border-color: rgba(63, 111, 203, 0.24);
  background:
    linear-gradient(180deg, rgba(229, 238, 255, 0.98), rgba(214, 229, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 28px rgba(59, 91, 154, 0.12);
}

html[data-theme="light"] body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked)::before {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.22);
}

html[data-theme="light"] body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) strong {
  color: #162033;
}

html[data-theme="light"] body.panel-page .routing-side-card--inbounds .mode-item:has(input:checked) small {
  color: rgba(37, 55, 90, 0.90);
}

html[data-theme="light"] body.panel-page .routing-side-card--scenario #routing-scenario-badge {
  color: #23539b;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(63, 111, 203, 0.12);
}

html[data-theme="light"] body.panel-page .routing-scenario-help-panel b {
  color: #162033;
}

html[data-theme="light"] body.panel-page .routing-side-card--scenario .routing-scenario-option code {
  color: #23539b;
}

html[data-theme="light"] body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) {
  border-color: rgba(20, 184, 166, 0.26);
  background:
    linear-gradient(180deg, rgba(224, 255, 250, 0.98), rgba(209, 250, 244, 0.94)),
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 28px rgba(45, 120, 135, 0.10);
}

html[data-theme="light"] body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) strong {
  color: #123a45;
}

html[data-theme="light"] body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) small,
html[data-theme="light"] body.panel-page .routing-side-card--scenario .routing-scenario-option:has(input:checked) code {
  color: rgba(19, 78, 74, 0.88);
}

html[data-theme="light"] body.panel-page .routing-scenario-status {
  border-color: rgba(63, 111, 203, 0.10);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(59, 75, 103, 0.82);
}

html[data-theme="light"] body.panel-page .routing-scenario-status.is-success {
  border-color: rgba(22, 163, 74, 0.20);
  color: #166534;
}

html[data-theme="light"] body.panel-page .routing-scenario-status.is-warning {
  border-color: rgba(217, 119, 6, 0.22);
  color: #92400e;
}

html[data-theme="light"] body.panel-page .routing-scenario-status.is-error {
  border-color: rgba(220, 38, 38, 0.20);
  color: #991b1b;
}

html[data-theme="light"] body.panel-page .routing-side-card .links a {
  color: #2a4a87;
}

@media (max-width: 720px) {
  body.panel-page .routing-side-card .commands-header h2 {
    font-size: calc(14px * var(--xk-font-scale));
  }

  body.panel-page .routing-side-card .xk-fragment-row,
  body.panel-page .routing-side-card #outbounds-body .outbounds-hints {
    padding: 10px;
  }
}

/* Low-end / MIPS panel profile:
   reduce expensive glass/shadow effects and keep the main CodeMirror editor
   in a fixed-height virtualized mode for smoother scrolling on weak CPUs. */
body.panel-page.xk-perf-lite .card,
body.panel-page.xk-perf-lite .CodeMirror,
body.panel-page.xk-perf-lite .xk-monaco-editor,
body.panel-page.xk-perf-lite .top-tab-btn,
body.panel-page.xk-perf-lite .service-core-text,
body.panel-page.xk-perf-lite .terminal-tool-btn,
body.panel-page.xk-perf-lite .xk-btn-icon,
body.panel-page.xk-perf-lite .routing-focus-btn {
  box-shadow: none !important;
  filter: none !important;
}

body.panel-page.xk-perf-lite .card,
body.panel-page.xk-perf-lite .dt-log-menu-panel,
body.panel-page.xk-perf-lite .xk-card-help-panel,
body.panel-page.xk-perf-lite .terminal-tool-btn,
body.panel-page.xk-perf-lite .top-tab-btn,
body.panel-page.xk-perf-lite .service-core-text,
body.panel-page.xk-perf-lite .routing-focus-btn {
  transition: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.panel-page.xk-perf-lite .service-status-lamp,
body.panel-page.xk-perf-lite .xk-update-dot,
body.panel-page.xk-perf-lite .global-spinner-icon {
  animation: none !important;
}

body.panel-page .CodeMirror.xk-cm-lite {
  height: min(78vh, 920px) !important;
  min-height: 360px !important;
}

body.panel-page .CodeMirror.xk-cm-lite .CodeMirror-scroll {
  height: 100% !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}

body.panel-page .CodeMirror.xk-cm-lite .CodeMirror-lines {
  padding-bottom: 12px;
}

@media (max-width: 720px) {
  body.panel-page .CodeMirror.xk-cm-lite {
    min-height: 300px !important;
  }
}

/* Theme bridge: late overrides so DevTools global theme variables affect the new premium panel surfaces. */
body.panel-page header .header-actions .xk-header-btn,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
body.xk-backups-page header .header-actions .xk-header-btn,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--header-btn-border, #94c5ff2e) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-btn-bg, #0f172a94) 92%, white 8%),
      color-mix(in srgb, var(--header-btn-bg, #0f172a94) 96%, black 4%)
    ),
    radial-gradient(circle at top left, color-mix(in srgb, var(--header-btn-text, #eaf2ff) 12%, transparent), transparent 46%) !important;
  color: var(--header-btn-text, #eaf2ff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26) !important;
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

body.panel-page header .header-actions .xk-header-btn::before,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::before,
body.xk-backups-page header .header-actions .xk-header-btn::before,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: auto;
  opacity: 0.94;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.20), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 26%, transparent 62%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 24%, transparent 46%);
  mix-blend-mode: screen;
}

body.panel-page header .header-actions .xk-header-btn:hover,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
body.xk-backups-page header .header-actions .xk-header-btn:hover,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover {
  border-color: var(--header-btn-hover-border, #baddff57) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-btn-hover-bg, #142038f5) 94%, white 6%),
      color-mix(in srgb, var(--header-btn-hover-bg, #142038f5) 98%, black 2%)
    ),
    radial-gradient(circle at top left, color-mix(in srgb, var(--header-btn-hover-text, #f8fbff) 14%, transparent), transparent 48%) !important;
  color: var(--header-btn-hover-text, #f8fbff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 22px rgba(2, 8, 23, 0.26),
    0 16px 30px rgba(2, 8, 23, 0.32) !important;
}

body.panel-page header .header-actions .xk-header-btn:hover::before,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover::before,
body.xk-backups-page header .header-actions .xk-header-btn:hover::before,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover::before {
  opacity: 1;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07) 28%, transparent 64%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 22%, transparent 48%);
}

body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme {
  --xk-header-accent-border: color-mix(in srgb, var(--accent, #60a5fa) 52%, var(--header-btn-border, #94c5ff2e) 48%);
  --xk-header-accent-top: color-mix(in srgb, rgba(24, 51, 104, 0.82) 76%, var(--accent, #60a5fa) 24%);
  --xk-header-accent-bottom: color-mix(in srgb, rgba(10, 23, 52, 0.78) 68%, var(--header-btn-hover-bg, #142038f5) 32%);
  --xk-header-accent-glow: color-mix(in srgb, rgba(147, 197, 253, 0.46) 56%, var(--accent, #60a5fa) 44%);
  --xk-header-accent-ring: color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent);
  --xk-header-accent-shadow: rgba(8, 47, 107, 0.3);
  min-width: 64px;
  padding: 0 16px;
}

body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui {
  --xk-header-accent-border: color-mix(in srgb, var(--sem-info, #93c5fd) 46%, var(--header-btn-border, #94c5ff2e) 54%);
  --xk-header-accent-top: color-mix(in srgb, rgba(26, 44, 82, 0.82) 72%, var(--sem-info, #93c5fd) 28%);
  --xk-header-accent-bottom: color-mix(in srgb, rgba(11, 23, 48, 0.78) 60%, var(--sem-info, #93c5fd) 40%);
  --xk-header-accent-glow: color-mix(in srgb, rgba(125, 211, 252, 0.32) 48%, var(--sem-info, #93c5fd) 52%);
  --xk-header-accent-ring: color-mix(in srgb, var(--sem-info, #93c5fd) 18%, transparent);
  --xk-header-accent-shadow: rgba(8, 47, 107, 0.26);
}

body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools {
  --xk-header-accent-border: color-mix(in srgb, #a78bfa 48%, var(--header-btn-border, #94c5ff2e) 52%);
  --xk-header-accent-top: color-mix(in srgb, rgba(37, 35, 84, 0.84) 74%, #a78bfa 26%);
  --xk-header-accent-bottom: color-mix(in srgb, rgba(17, 18, 48, 0.8) 60%, #a78bfa 40%);
  --xk-header-accent-glow: rgba(167, 139, 250, 0.32);
  --xk-header-accent-ring: color-mix(in srgb, #a78bfa 18%, transparent);
  --xk-header-accent-shadow: rgba(23, 23, 58, 0.28);
}

body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout {
  --xk-header-accent-border: color-mix(in srgb, var(--sem-error, #f87171) 46%, var(--header-btn-border, #94c5ff2e) 54%);
  --xk-header-accent-top: color-mix(in srgb, rgba(76, 22, 31, 0.82) 74%, var(--sem-error, #f87171) 26%);
  --xk-header-accent-bottom: color-mix(in srgb, rgba(41, 10, 17, 0.8) 60%, var(--sem-error, #f87171) 40%);
  --xk-header-accent-glow: color-mix(in srgb, rgba(251, 113, 133, 0.26) 48%, var(--sem-error, #f87171) 52%);
  --xk-header-accent-ring: color-mix(in srgb, var(--sem-error, #f87171) 18%, transparent);
  --xk-header-accent-shadow: rgba(52, 12, 21, 0.3);
}

body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui,
body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout {
  border-color: var(--xk-header-accent-border) !important;
  background:
    linear-gradient(180deg, var(--xk-header-accent-top), var(--xk-header-accent-bottom)),
    radial-gradient(circle at 30% 28%, var(--xk-header-accent-glow), transparent 34%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px var(--xk-header-accent-ring),
    0 14px 28px color-mix(in srgb, var(--xk-header-accent-glow) 52%, var(--xk-header-accent-shadow)) !important;
}

body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui:hover,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui:hover,
body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools:hover,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools:hover,
body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout:hover,
body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout:hover {
  border-color: color-mix(in srgb, var(--xk-header-accent-border) 72%, white 28%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--xk-header-accent-top) 86%, white 14%),
      color-mix(in srgb, var(--xk-header-accent-bottom) 92%, white 8%)
    ),
    radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--xk-header-accent-glow) 72%, white 28%), transparent 36%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px color-mix(in srgb, var(--xk-header-accent-glow) 34%, transparent),
    0 16px 30px color-mix(in srgb, var(--xk-header-accent-glow) 58%, var(--xk-header-accent-shadow)) !important;
}

html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn,
html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme {
  color: #1a2740 !important;
  backdrop-filter: blur(14px) saturate(132%);
  -webkit-backdrop-filter: blur(14px) saturate(132%);
}

html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn::before,
html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::before,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn::before,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::before {
  opacity: 0.78;
  mix-blend-mode: normal;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22) 34%, transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 38%);
}

html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme {
  --xk-header-accent-border: rgba(63, 111, 203, 0.26);
  --xk-header-accent-top: rgba(236, 245, 255, 0.98);
  --xk-header-accent-bottom: rgba(221, 235, 255, 0.94);
  --xk-header-accent-glow: rgba(96, 165, 250, 0.18);
  --xk-header-accent-ring: rgba(96, 165, 250, 0.12);
  --xk-header-accent-shadow: rgba(76, 112, 177, 0.22);
}

html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui {
  --xk-header-accent-border: rgba(89, 130, 205, 0.22);
  --xk-header-accent-top: rgba(244, 248, 255, 0.98);
  --xk-header-accent-bottom: rgba(229, 237, 252, 0.94);
  --xk-header-accent-glow: rgba(125, 211, 252, 0.12);
  --xk-header-accent-ring: rgba(96, 165, 250, 0.08);
  --xk-header-accent-shadow: rgba(93, 125, 176, 0.18);
}

html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools {
  --xk-header-accent-border: rgba(140, 116, 224, 0.24);
  --xk-header-accent-top: rgba(248, 244, 255, 0.98);
  --xk-header-accent-bottom: rgba(236, 229, 255, 0.94);
  --xk-header-accent-glow: rgba(167, 139, 250, 0.14);
  --xk-header-accent-ring: rgba(167, 139, 250, 0.10);
  --xk-header-accent-shadow: rgba(126, 102, 194, 0.20);
}

html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout {
  --xk-header-accent-border: rgba(225, 103, 132, 0.24);
  --xk-header-accent-top: rgba(255, 246, 248, 0.98);
  --xk-header-accent-bottom: rgba(255, 229, 235, 0.94);
  --xk-header-accent-glow: rgba(251, 113, 133, 0.14);
  --xk-header-accent-ring: rgba(251, 113, 133, 0.10);
  --xk-header-accent-shadow: rgba(201, 94, 118, 0.20);
}

html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui,
html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout {
  border-color: var(--xk-header-accent-border) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--xk-header-accent-top) 84%, white 16%),
      color-mix(in srgb, var(--xk-header-accent-bottom) 88%, white 12%)
    ),
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--xk-header-accent-glow) 72%, white 28%), transparent 40%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -10px 18px rgba(191, 219, 254, 0.16),
    0 0 0 1px color-mix(in srgb, var(--xk-header-accent-ring) 72%, transparent),
    0 12px 24px color-mix(in srgb, var(--xk-header-accent-shadow) 52%, transparent) !important;
}

html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui:hover,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui:hover,
html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools:hover,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools:hover,
html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout:hover,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout:hover {
  border-color: color-mix(in srgb, var(--xk-header-accent-border) 78%, white 22%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--xk-header-accent-top) 72%, white 28%),
      color-mix(in srgb, var(--xk-header-accent-bottom) 78%, white 22%)
    ),
    radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--xk-header-accent-glow) 64%, white 36%), transparent 42%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -10px 18px rgba(191, 219, 254, 0.18),
    0 0 0 1px color-mix(in srgb, var(--xk-header-accent-ring) 88%, transparent),
    0 14px 26px color-mix(in srgb, var(--xk-header-accent-shadow) 56%, transparent) !important;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn,
html[data-theme="dark"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn,
html[data-theme="dark"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(148, 197, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(18, 28, 48, 0.78), rgba(8, 14, 28, 0.72)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 46%) !important;
  color: #eaf2ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn::before,
html[data-theme="dark"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::before,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn::before,
html[data-theme="dark"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%);
  opacity: 0.9;
  z-index: -1;
  mix-blend-mode: normal;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn:hover,
html[data-theme="dark"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn:hover,
html[data-theme="dark"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover {
  transform: translateY(-1px);
  border-color: rgba(186, 221, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(24, 35, 54, 0.96), rgba(11, 18, 30, 0.94)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 48%) !important;
  color: #f8fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -12px 22px rgba(2, 8, 23, 0.26),
    0 16px 30px rgba(2, 8, 23, 0.32) !important;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn:hover::before,
html[data-theme="dark"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover::before,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn:hover::before,
html[data-theme="dark"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%);
  opacity: 0.9;
}

html[data-theme="dark"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="dark"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme {
  min-width: 64px;
  padding: 0 16px;
  border-color: rgba(96, 165, 250, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(24, 51, 104, 0.82), rgba(10, 23, 52, 0.78)),
    radial-gradient(circle at 30% 28%, rgba(147, 197, 253, 0.4), transparent 34%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(96, 165, 250, 0.12),
    0 14px 28px rgba(8, 47, 107, 0.3) !important;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-ui,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-ui {
  border-color: rgba(103, 232, 249, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(26, 44, 82, 0.82), rgba(11, 23, 48, 0.78)),
    radial-gradient(circle at 24% 24%, rgba(125, 211, 252, 0.24), transparent 38%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26) !important;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-devtools,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-devtools {
  border-color: rgba(167, 139, 250, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(37, 35, 84, 0.84), rgba(17, 18, 48, 0.8)),
    radial-gradient(circle at 28% 24%, rgba(167, 139, 250, 0.22), transparent 36%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26) !important;
}

html[data-theme="dark"] body.panel-page header .header-actions .xk-header-btn.xk-header-btn-logout,
html[data-theme="dark"] body.xk-backups-page header .header-actions .xk-header-btn.xk-header-btn-logout {
  border-color: rgba(251, 113, 133, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(76, 22, 31, 0.82), rgba(41, 10, 17, 0.8)),
    radial-gradient(circle at 28% 22%, rgba(251, 113, 133, 0.18), transparent 36%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 18px rgba(2, 8, 23, 0.24),
    0 10px 24px rgba(2, 8, 23, 0.26) !important;
}

body.panel-page .top-tabs.header-tabs .top-tab-btn {
  border-color: var(--header-tab-border, #60a5fa24) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-tab-bg, #0f172a94) 94%, white 6%),
      color-mix(in srgb, var(--header-tab-bg, #0f172a94) 98%, black 2%)
    ) !important;
  color: var(--header-tab-text, #dbeafe) !important;
}

body.panel-page .top-tabs.header-tabs .top-tab-btn:hover:not(.active) {
  border-color: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 34%, var(--header-tab-border, #60a5fa24) 66%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 24%, var(--header-tab-bg, #0f172a94) 76%),
      color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 34%, var(--header-tab-bg, #0f172a94) 66%)
    ) !important;
  color: var(--header-tab-active-text, #f8fbff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(2, 7, 18, 0.2) !important;
}

body.panel-page .top-tabs.header-tabs .top-tab-btn.xk-top-tab:hover:not(.active)::before {
  opacity: 1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%);
}

body.panel-page .top-tabs.header-tabs .top-tab-btn.active {
  border-color: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 58%, white 42%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #173976 72%, var(--header-tab-active-bg, #2563eb) 28%) 0%,
      color-mix(in srgb, #2b58b4 58%, var(--header-tab-active-bg, #2563eb) 42%) 48%,
      color-mix(in srgb, #5c86e7 64%, var(--header-tab-active-bg, #2563eb) 36%) 100%) !important;
  color: var(--header-tab-active-text, #f8fbff) !important;
  box-shadow:
    0 18px 30px color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body.panel-page .xkeen-ctrl-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--editor-btn-border, #60a5fa2e) 90%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--editor-btn-bg, #0f172a94) 92%, white 8%),
      color-mix(in srgb, var(--editor-btn-bg, #0f172a94) 96%, black 4%)
    );
  color: var(--editor-btn-text, #eaf2ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(2, 8, 23, 0.2),
    0 8px 18px rgba(2, 8, 23, 0.18);
}

body.panel-page .xkeen-ctrl-btn:hover {
  border-color: var(--editor-btn-hover-border, #baddff57);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--editor-btn-hover-bg, #142038eb) 94%, white 6%),
      color-mix(in srgb, var(--editor-btn-hover-bg, #142038eb) 98%, black 2%)
    );
  color: var(--editor-btn-hover-text, #f8fbff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -10px 18px rgba(2, 8, 23, 0.22),
    0 12px 24px rgba(2, 8, 23, 0.22);
}

body.panel-page .xkeen-ctrl-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: auto;
  opacity: 0.92;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 28%, transparent 64%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 24%, transparent 48%);
  mix-blend-mode: screen;
}

body.panel-page .xkeen-ctrl-btn:hover::before {
  opacity: 1;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07) 28%, transparent 66%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 22%, transparent 48%);
}

body.panel-page .xkeen-ctrl-btn-start {
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 52%, var(--editor-btn-border, #60a5fa2e) 48%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(9, 61, 36, 0.92) 82%, var(--sem-success, #22c55e) 18%),
      color-mix(in srgb, rgba(6, 31, 20, 0.9) 68%, var(--sem-success, #22c55e) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(74, 222, 128, 0.22) 56%, var(--sem-success, #22c55e) 44%), transparent 38%);
  color: #ebfff1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(6, 95, 70, 0.24);
}

body.panel-page .xkeen-ctrl-btn-stop {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 52%, var(--editor-btn-border, #60a5fa2e) 48%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(88, 19, 31, 0.92) 82%, var(--sem-error, #f87171) 18%),
      color-mix(in srgb, rgba(48, 10, 18, 0.9) 68%, var(--sem-error, #f87171) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(248, 113, 113, 0.22) 56%, var(--sem-error, #f87171) 44%), transparent 38%);
  color: #fff0f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(127, 29, 29, 0.24);
}

body.panel-page .xkeen-ctrl-btn-restart {
  border-color: color-mix(in srgb, var(--sem-warning, #fbbf24) 52%, var(--editor-btn-border, #60a5fa2e) 48%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(92, 55, 13, 0.92) 82%, var(--sem-warning, #fbbf24) 18%),
      color-mix(in srgb, rgba(43, 25, 7, 0.9) 68%, var(--sem-warning, #fbbf24) 32%)
    );
  color: #fff7e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(146, 64, 14, 0.24);
}

body.panel-page .xkeen-ctrl-btn-start:hover {
  border-color: color-mix(in srgb, var(--sem-success, #22c55e) 64%, white 36%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(11, 85, 48, 0.96) 82%, var(--sem-success, #22c55e) 18%),
      color-mix(in srgb, rgba(6, 43, 25, 0.94) 68%, var(--sem-success, #22c55e) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(74, 222, 128, 0.28) 56%, var(--sem-success, #22c55e) 44%), transparent 40%);
  color: #f4fff6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(6, 95, 70, 0.32);
}

body.panel-page .xkeen-ctrl-btn-stop:hover {
  border-color: color-mix(in srgb, var(--sem-error, #f87171) 64%, white 36%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(115, 24, 40, 0.96) 82%, var(--sem-error, #f87171) 18%),
      color-mix(in srgb, rgba(61, 11, 22, 0.94) 68%, var(--sem-error, #f87171) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(248, 113, 113, 0.28) 56%, var(--sem-error, #f87171) 44%), transparent 40%);
  color: #fff5f6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(127, 29, 29, 0.34);
}

body.panel-page .xkeen-ctrl-btn-restart:hover {
  border-color: color-mix(in srgb, var(--sem-warning, #fbbf24) 64%, white 36%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, rgba(115, 70, 17, 0.96) 82%, var(--sem-warning, #fbbf24) 18%),
      color-mix(in srgb, rgba(60, 35, 8, 0.94) 68%, var(--sem-warning, #fbbf24) 32%)
    ),
    radial-gradient(circle at 22% 22%, color-mix(in srgb, rgba(251, 191, 36, 0.26) 56%, var(--sem-warning, #fbbf24) 44%), transparent 40%);
  color: #fffbf1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(146, 64, 14, 0.32);
}

body.panel-page .routing-focus-btn {
  border-color: var(--header-tab-border, #60a5fa24);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-tab-bg, #0f172a94) 94%, white 6%),
      color-mix(in srgb, var(--header-tab-bg, #0f172a94) 98%, black 2%)
    );
  color: var(--header-tab-text, #dbeafe);
}

body.panel-page .routing-focus-btn.is-active {
  color: var(--header-tab-active-text, #f8fbff);
  border-color: color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 58%, white 42%);
  background: linear-gradient(135deg,
    color-mix(in srgb, #173976 72%, var(--header-tab-active-bg, #2563eb) 28%) 0%,
    color-mix(in srgb, #2b58b4 58%, var(--header-tab-active-bg, #2563eb) 42%) 48%,
    color-mix(in srgb, #5c86e7 64%, var(--header-tab-active-bg, #2563eb) 36%) 100%);
  box-shadow:
    0 14px 24px color-mix(in srgb, var(--header-tab-active-bg, #2563eb) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-width: 1px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(2, 8, 23, 0.2) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%);
  opacity: 0.9;
  z-index: auto;
  mix-blend-mode: normal;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 28px rgba(2, 8, 23, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn:hover::before {
  opacity: 0.94;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn-start {
  border-color: rgba(74, 222, 128, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(9, 61, 36, 0.92), rgba(6, 31, 20, 0.9)),
    radial-gradient(circle at 22% 22%, rgba(74, 222, 128, 0.22), transparent 38%) !important;
  color: #ebfff1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(6, 95, 70, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn-start:hover {
  border-color: rgba(134, 239, 172, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(11, 85, 48, 0.96), rgba(6, 43, 25, 0.94)),
    radial-gradient(circle at 22% 22%, rgba(74, 222, 128, 0.28), transparent 40%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(6, 95, 70, 0.32) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn-stop {
  border-color: rgba(248, 113, 113, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(88, 19, 31, 0.92), rgba(48, 10, 18, 0.9)),
    radial-gradient(circle at 22% 22%, rgba(248, 113, 113, 0.22), transparent 38%) !important;
  color: #fff0f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(127, 29, 29, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn-stop:hover {
  border-color: rgba(252, 165, 165, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(115, 24, 40, 0.96), rgba(61, 11, 22, 0.94)),
    radial-gradient(circle at 22% 22%, rgba(248, 113, 113, 0.28), transparent 40%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(127, 29, 29, 0.34) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn-restart {
  border-color: rgba(251, 191, 36, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(92, 55, 13, 0.92), rgba(43, 25, 7, 0.9)),
    radial-gradient(circle at 22% 22%, rgba(251, 191, 36, 0.2), transparent 38%) !important;
  color: #fff7e8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(146, 64, 14, 0.24) !important;
}

html[data-theme="dark"] body.panel-page .xkeen-ctrl-btn-restart:hover {
  border-color: rgba(252, 211, 77, 0.52) !important;
  background:
    linear-gradient(180deg, rgba(115, 70, 17, 0.96), rgba(60, 35, 8, 0.94)),
    radial-gradient(circle at 22% 22%, rgba(251, 191, 36, 0.26), transparent 40%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 30px rgba(146, 64, 14, 0.32) !important;
}

html[data-theme="dark"] body.panel-page .routing-focus-btn {
  border-color: rgba(96, 165, 250, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(14, 34, 70, 0.86), rgba(7, 17, 35, 0.82)),
    radial-gradient(circle at 22% 22%, rgba(96, 165, 250, 0.16), transparent 38%) !important;
  color: #dbeafe !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(2, 8, 23, 0.18) !important;
}

html[data-theme="dark"] body.panel-page .routing-focus-btn.routing-focus-btn-gui {
  border-color: rgba(45, 212, 191, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(8, 52, 56, 0.86), rgba(5, 26, 28, 0.82)),
    radial-gradient(circle at 22% 22%, rgba(45, 212, 191, 0.15), transparent 38%) !important;
}

html[data-theme="dark"] body.panel-page .routing-focus-btn.routing-focus-btn-raw {
  border-color: rgba(96, 165, 250, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(14, 34, 70, 0.86), rgba(7, 17, 35, 0.82)),
    radial-gradient(circle at 22% 22%, rgba(96, 165, 250, 0.16), transparent 38%) !important;
}

html[data-theme="dark"] body.panel-page .routing-focus-btn.is-active {
  color: #f5f8ff !important;
  border-color: rgba(145, 180, 255, 0.32) !important;
  background: linear-gradient(135deg, #173976 0%, #2b58b4 48%, #5c86e7 100%) !important;
  box-shadow:
    0 14px 24px rgba(22, 57, 118, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#ui-settings-modal,
#core-modal.xk-core-modal-shell,
#routing-dat-contents-modal.xk-dat-modal-shell {
  background: var(--modal-overlay, #010612bd);
}

#ui-settings-modal .xk-ui-settings-modal-content,
#core-modal .xk-core-modal-content,
#routing-dat-contents-modal .xk-dat-modal-content,
#routing-forced-rules-modal .modal-content,
#outbounds-pool-modal .modal-content,
#xray-preflight-modal .modal-content,
.xk-routing-menu-panel,
.xk-mihomo-menu-panel {
  border-color: color-mix(in srgb, var(--modal-border, #475569d1) 92%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent, #60a5fa) 14%, transparent), transparent 30%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--modal-bg, #060e1eeb) 96%, white 4%),
      color-mix(in srgb, var(--modal-bg, #060e1eeb) 98%, black 2%)
    );
  color: var(--modal-text, #f8fbff);
}

#ui-settings-modal .xk-ui-settings-header,
#ui-settings-modal .xk-ui-settings-footer,
#core-modal .xk-core-modal-header,
#core-modal .xk-core-modal-actions,
#routing-dat-contents-modal .xk-dat-modal-header,
#routing-dat-contents-modal .xk-dat-modal-actions,
#routing-forced-rules-modal .modal-header,
#outbounds-pool-modal .modal-header,
#xray-preflight-modal .modal-header {
  border-color: var(--modal-header-border, var(--modal-border, #475569d1));
}

#ui-settings-modal .xk-ui-settings-kicker,
#core-modal .xk-core-kicker,
#routing-dat-contents-modal .xk-dat-modal-kicker {
  color: color-mix(in srgb, var(--accent, #60a5fa) 72%, var(--modal-muted, #bfdbfebd) 28%);
}

#ui-settings-modal .modal-title,
#core-modal .modal-title,
#routing-dat-contents-modal .modal-title,
#ui-settings-modal .xk-ui-setting-copy strong,
#ui-settings-modal .xk-ui-setting-copy code,
#core-modal .xk-core-lead strong,
#core-modal .xk-core-option-title,
#routing-dat-contents-modal .dat-contents-kind,
#routing-dat-contents-modal #routing-dat-contents-selected-tag {
  color: var(--modal-text, #f8fbff);
}

#ui-settings-modal .xk-ui-settings-subtitle,
#ui-settings-modal .xk-ui-setting-copy small,
#ui-settings-modal .xk-ui-settings-status,
#core-modal .xk-core-description,
#core-modal .xk-core-description-secondary,
#core-modal .xk-core-option-note,
#core-modal .xk-core-status,
#routing-dat-contents-modal .dat-contents-selected-label,
#routing-dat-contents-modal .dat-contents-routing-label,
#routing-dat-contents-modal #routing-dat-contents-routing-status,
#routing-dat-contents-modal #routing-dat-contents-items-status,
#routing-dat-contents-modal #routing-dat-contents-tags-status,
#routing-dat-contents-modal .dat-contents-page-info,
.xk-routing-menu-panel .terminal-menu-title,
.xk-mihomo-menu-panel .terminal-menu-title {
  color: var(--modal-muted, #bfdbfebd);
}

#ui-settings-modal .modal-close,
#core-modal .modal-close,
#routing-dat-contents-modal .modal-close {
  color: var(--modal-close, #dbeafe);
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 18%, var(--modal-border, #475569d1) 82%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--modal-bg, #060e1eeb) 88%, white 12%),
      color-mix(in srgb, var(--modal-bg, #060e1eeb) 94%, black 6%)
    );
}

#ui-settings-modal .modal-close:hover,
#core-modal .modal-close:hover,
#routing-dat-contents-modal .modal-close:hover {
  color: var(--modal-close-hover, #f8fbff);
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 32%, var(--modal-border, #475569d1) 68%);
}

#ui-settings-modal .xk-ui-setting-card,
#core-modal .xk-core-intro,
#core-modal .xk-core-lead,
#core-modal .xk-core-option,
#routing-dat-contents-modal .xk-dat-head,
.xk-routing-menu-panel .terminal-menu-section,
.xk-mihomo-menu-panel .terminal-menu-section,
.xk-routing-menu-panel .terminal-tool-btn,
.xk-mihomo-menu-panel .terminal-tool-btn,
.xk-mihomo-menu-panel .xray-log-select,
.xk-qb-panel,
.xk-qb-fields-grid > label,
.xk-qb-editor-block,
.xk-qb-option-card,
.xk-qb-note,
.xk-qb-statusbar,
.xk-pool-lead,
.xk-preflight-panel,
.xk-preflight-block,
.xk-preflight-meta-card,
.xk-preflight-codebox,
.xk-preflight-terminal {
  border-color: color-mix(in srgb, var(--modal-body-border, var(--modal-border, #475569d1)) 92%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--modal-body-bg, var(--modal-bg, #060e1eeb)) 90%, white 10%),
      color-mix(in srgb, var(--modal-bg, #060e1eeb) 76%, transparent)
    );
  color: var(--modal-text, #f8fbff);
}

.xk-routing-menu-panel code,
.xk-mihomo-menu-panel code,
.xk-mihomo-menu-panel .xray-log-select,
.xk-preflight-meta-value,
.xk-preflight-codebox,
.xk-preflight-terminal {
  color: var(--modal-text, #f8fbff);
}

.xk-routing-menu-panel .terminal-tool-btn:hover,
.xk-mihomo-menu-panel .terminal-tool-btn:hover,
.xk-mihomo-menu-panel .xray-log-select:hover {
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 38%, var(--modal-body-border, var(--modal-border, #475569d1)) 62%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #60a5fa) 14%, var(--modal-body-bg, var(--modal-bg, #060e1eeb)) 86%),
      color-mix(in srgb, var(--modal-bg, #060e1eeb) 82%, white 8%)
    );
}

.xk-mihomo-menu-panel .xray-log-select:focus,
.xk-routing-menu-panel .terminal-tool-btn:focus-visible,
.xk-mihomo-menu-panel .terminal-tool-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #60a5fa) 52%, var(--modal-body-border, var(--modal-border, #475569d1)) 48%);
}

/* Light theme polish: stronger contrast for modal states, toggles, and primary actions */
html[data-theme="light"] .btn-secondary {
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 247, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 42%);
  color: #24324a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] .btn-secondary:hover:not([disabled]) {
  border-color: rgba(37, 99, 235, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%);
  color: #1f2c44;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 28px rgba(59, 91, 154, 0.10);
}

html[data-theme="light"] .btn-primary {
  border-color: rgba(37, 99, 235, 0.34);
  background:
    linear-gradient(180deg, #5f88ea 0%, #3f6fcb 100%),
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.18), transparent 40%);
  color: #f8fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 26px rgba(59, 91, 154, 0.14);
}

html[data-theme="light"] .btn-primary:hover:not([disabled]) {
  border-color: rgba(37, 99, 235, 0.44);
  background:
    linear-gradient(180deg, #7097f0 0%, #2f5fc7 100%),
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.24), transparent 42%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 30px rgba(59, 91, 154, 0.18);
}

html[data-theme="light"] .btn-primary:disabled {
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(214, 223, 234, 0.88));
  color: rgba(71, 85, 105, 0.72);
  box-shadow: none;
}

html[data-theme="light"] .dt-switch,
html[data-theme="light"] .fm-toggle {
  color: #24324a;
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 247, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.06), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] .dt-switch:hover,
html[data-theme="light"] .fm-toggle:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 42%);
}

html[data-theme="light"] .dt-switch-slider,
html[data-theme="light"] .fm-toggle-slider {
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.96), rgba(186, 197, 211, 0.90));
  border-color: rgba(148, 163, 184, 0.42);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.54);
}

html[data-theme="light"] .dt-switch-slider::after,
html[data-theme="light"] .fm-toggle-slider::after {
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  border-color: rgba(37, 99, 235, 0.12);
  box-shadow: 0 2px 8px rgba(59, 91, 154, 0.18);
}

html[data-theme="light"] .dt-switch input:checked + .dt-switch-slider,
html[data-theme="light"] .fm-toggle input:checked + .fm-toggle-slider {
  background: linear-gradient(180deg, #6a91ed 0%, #3f6fcb 100%);
  border-color: rgba(37, 99, 235, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px rgba(59, 91, 154, 0.16);
}

html[data-theme="light"] .dt-switch input:checked + .dt-switch-slider::after,
html[data-theme="light"] .fm-toggle input:checked + .fm-toggle-slider::after {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

html[data-theme="light"] .dt-switch-label,
html[data-theme="light"] .fm-toggle-label {
  color: #475569;
  opacity: 1;
}

html[data-theme="light"] .global-autorestart-toggle input[type="checkbox"],
html[data-theme="light"] .xk-mi-remember input[type="checkbox"],
html[data-theme="light"] .xk-forced-options-grid .xk-forced-option-card input[type="checkbox"],
html[data-theme="light"] .xk-pool-replace-card input[type="checkbox"],
html[data-theme="light"] .xk-qb-option-card input[type="checkbox"] {
  accent-color: #2563eb;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-copy strong {
  color: #17263d;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-subtitle,
html[data-theme="light"] #ui-settings-modal .xk-ui-setting-copy small,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status {
  color: #4a5d7a;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card {
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 30px rgba(59, 91, 154, 0.09);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(238, 245, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 18px 34px rgba(59, 91, 154, 0.11);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card:has(input:checked) {
  border-color: rgba(37, 99, 235, 0.34);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.995), rgba(226, 236, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 36px rgba(59, 91, 154, 0.13),
    0 0 0 1px rgba(37, 99, 235, 0.06);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card:has(input:checked) .xk-ui-setting-copy strong {
  color: #183b78;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-setting-card:has(input:checked) .xk-ui-setting-copy small {
  color: #3f5d8a;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 247, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.06), transparent 42%);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status.error {
  border-color: rgba(239, 68, 68, 0.18);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.92));
  color: #b91c1c;
}

html[data-theme="light"] #core-modal .xk-core-description,
html[data-theme="light"] #core-modal .xk-core-description-secondary,
html[data-theme="light"] #core-modal .xk-core-select-note,
html[data-theme="light"] #core-modal .xk-core-option-note,
html[data-theme="light"] #core-modal .xk-core-status,
html[data-theme="light"] #core-modal .xk-core-actions-copy {
  color: #4a5d7a;
}

html[data-theme="light"] #core-modal .xk-core-select-kicker,
html[data-theme="light"] #core-modal .xk-core-option-eyebrow {
  color: #64748b;
}

html[data-theme="light"] #core-modal .xk-core-option {
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(241, 246, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 30px rgba(59, 91, 154, 0.10);
}

html[data-theme="light"] #core-modal .xk-core-option:hover:not([disabled]) {
  border-color: rgba(37, 99, 235, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 18px 34px rgba(59, 91, 154, 0.12);
}

html[data-theme="light"] #core-modal .xk-core-option.is-current:not(.active) {
  border-color: rgba(37, 99, 235, 0.20);
}

html[data-theme="light"] #core-modal .xk-core-option.active {
  border-color: rgba(37, 99, 235, 0.44);
  background:
    linear-gradient(180deg, #6b93ef 0%, #2f5fc7 100%),
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.22), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 18px 34px rgba(37, 99, 235, 0.20);
}

html[data-theme="light"] #core-modal .xk-core-option.active .xk-core-option-title {
  color: #f8fbff;
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] #core-modal .xk-core-option-state,
html[data-theme="light"] #core-modal .xk-core-option-pill {
  border-color: rgba(63, 111, 203, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: #3b4c69;
}

html[data-theme="light"] #core-modal .xk-core-option.active .xk-core-option-state {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.18);
  color: #f8fbff;
}

html[data-theme="light"] #core-modal .xk-core-option[disabled] {
  background: rgba(241, 245, 249, 0.78);
  opacity: 0.64;
}

html[data-theme="light"] #core-modal .xk-core-status[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.18);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.92));
  color: #b91c1c;
}

/* Core switcher: compact engine manager */
#core-modal.xk-core-modal-shell {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: clamp(36px, 6vh, 72px) !important;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
}

#core-modal .xk-core-modal-content {
  width: min(92vw, 430px);
  max-width: 430px;
  padding: 16px;
  border-radius: 20px;
  border-color: rgba(83, 115, 166, 0.54);
  background:
    radial-gradient(circle at 86% 10%, rgba(92, 132, 228, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(13, 22, 42, 0.98), rgba(9, 16, 31, 0.98));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#core-modal .xk-core-modal-header {
  align-items: center;
  margin-bottom: 12px;
  padding: 4px 2px 14px;
  border-bottom-color: rgba(112, 146, 206, 0.10);
}

#core-modal .xk-core-titleline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

#core-modal .xk-core-title-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  background:
    radial-gradient(circle at 30% 24%, rgba(125, 211, 252, 0.42), transparent 36%),
    linear-gradient(180deg, rgba(37, 99, 235, 0.34), rgba(6, 16, 39, 0.96));
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#core-modal .xk-core-title-icon::before,
#core-modal .xk-core-title-icon::after {
  content: '';
  position: absolute;
  border-radius: 5px;
}

#core-modal .xk-core-title-icon::before {
  inset: 8px;
  border: 2px solid rgba(191, 219, 254, 0.82);
  box-shadow: 0 0 14px rgba(125, 211, 252, 0.30);
}

#core-modal .xk-core-title-icon::after {
  inset: 13px;
  background: rgba(125, 211, 252, 0.90);
}

#core-modal .xk-core-kicker {
  font-size: 10px;
  letter-spacing: 0;
}

#core-modal .modal-title {
  font-size: 1.08rem;
  letter-spacing: 0;
}

#core-modal .modal-close {
  width: 34px;
  height: 34px;
  font-size: 22px;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.48);
}

#core-modal .xk-core-modal-body {
  gap: 10px;
}

#core-modal .xk-core-lead {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#core-modal .xk-core-lead-chip {
  min-height: 24px;
  padding: 0 9px;
  margin-left: auto;
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(7, 15, 33, 0.78);
  color: rgba(191, 219, 254, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0;
}

#core-modal .xk-core-engine-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#core-modal .xk-core-engine-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.10);
  background:
    linear-gradient(180deg, rgba(20, 30, 51, 0.86), rgba(11, 18, 33, 0.92)),
    radial-gradient(circle at 92% 16%, rgba(125, 211, 252, 0.08), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.16);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

#core-modal .xk-core-engine-row:hover:not(.is-disabled) {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.22);
  background:
    linear-gradient(180deg, rgba(24, 37, 64, 0.92), rgba(12, 21, 39, 0.95)),
    radial-gradient(circle at 92% 16%, rgba(125, 211, 252, 0.10), transparent 36%);
}

#core-modal .xk-core-engine-row.active {
  border-color: rgba(96, 165, 250, 0.42);
  background:
    linear-gradient(180deg, rgba(30, 64, 175, 0.66), rgba(19, 39, 88, 0.92)),
    radial-gradient(circle at 16% 50%, rgba(125, 211, 252, 0.18), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 32px rgba(37, 99, 235, 0.18);
}

#core-modal .xk-core-engine-row.is-disabled {
  opacity: 0.55;
  box-shadow: none;
}

#core-modal .xk-core-option {
  width: 100%;
  min-height: 44px;
  align-items: flex-start;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

#core-modal .xk-core-option::after {
  display: none;
}

#core-modal .xk-core-option:hover:not([disabled]),
#core-modal .xk-core-option.active,
#core-modal .xk-core-option.is-current:not(.active) {
  transform: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#core-modal .xk-core-option-title {
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: 0;
}

#core-modal .xk-core-option-state {
  min-width: 78px;
  min-height: 26px;
  padding: 0 10px;
  border-color: rgba(96, 165, 250, 0.12);
  background: rgba(5, 13, 29, 0.62);
  color: rgba(191, 219, 254, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0;
}

#core-modal .xk-core-engine-row.active .xk-core-option-state {
  border-color: rgba(52, 211, 153, 0.20);
  background: rgba(6, 95, 70, 0.24);
  color: #8ff5c4;
}

#core-modal .xk-core-engine-row:not(.active) .xk-core-option-state {
  color: rgba(148, 163, 184, 0.82);
}

#core-modal .xk-core-status {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border-color: rgba(96, 165, 250, 0.10);
  background: rgba(3, 9, 21, 0.44);
  color: rgba(191, 219, 254, 0.74);
  font-size: 0.80rem;
}

#core-modal .xk-core-modal-actions {
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top-color: rgba(96, 165, 250, 0.10);
}

#core-modal .xk-core-actions-row > button {
  min-width: 108px;
  min-height: 36px;
  border-radius: 12px;
}

html[data-theme="light"] #core-modal .xk-core-modal-content {
  border-color: rgba(63, 111, 203, 0.18);
  background:
    radial-gradient(circle at 86% 10%, rgba(96, 165, 250, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 255, 0.98));
  box-shadow:
    0 30px 70px rgba(59, 91, 154, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] #core-modal .xk-core-title-icon {
  border-color: rgba(37, 99, 235, 0.22);
  background:
    radial-gradient(circle at 30% 24%, rgba(125, 211, 252, 0.48), transparent 36%),
    linear-gradient(180deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.88));
  box-shadow:
    0 10px 22px rgba(59, 91, 154, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

html[data-theme="light"] #core-modal .xk-core-title-icon::before {
  border-color: rgba(37, 99, 235, 0.72);
}

html[data-theme="light"] #core-modal .xk-core-title-icon::after {
  background: rgba(37, 99, 235, 0.78);
}

html[data-theme="light"] #core-modal .xk-core-lead-chip {
  border-color: rgba(63, 111, 203, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
}

html[data-theme="light"] #core-modal .xk-core-engine-row {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.90)),
    radial-gradient(circle at 92% 16%, rgba(96, 165, 250, 0.08), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 14px 28px rgba(59, 91, 154, 0.09);
}

html[data-theme="light"] #core-modal .xk-core-engine-row:hover:not(.is-disabled) {
  border-color: rgba(37, 99, 235, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.96)),
    radial-gradient(circle at 92% 16%, rgba(96, 165, 250, 0.12), transparent 36%);
}

html[data-theme="light"] #core-modal .xk-core-engine-row.active {
  border-color: rgba(37, 99, 235, 0.36);
  background:
    linear-gradient(180deg, rgba(219, 234, 254, 0.98), rgba(203, 220, 255, 0.92)),
    radial-gradient(circle at 16% 50%, rgba(96, 165, 250, 0.16), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 16px 32px rgba(59, 91, 154, 0.14);
}

html[data-theme="light"] #core-modal .xk-core-engine-row.active .xk-core-option-title {
  color: #173b7a;
  text-shadow: none;
}

html[data-theme="light"] #core-modal .xk-core-option {
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] #core-modal .xk-core-option-state {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.68);
  color: #64748b;
}

html[data-theme="light"] #core-modal .xk-core-engine-row.active .xk-core-option-state {
  border-color: rgba(16, 185, 129, 0.20);
  background: rgba(209, 250, 229, 0.86);
  color: #047857;
}

html[data-theme="light"] #core-modal .xk-core-status {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(255, 255, 255, 0.58);
  color: #4a5d7a;
}

@media (max-width: 760px) {
  #core-modal.xk-core-modal-shell {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 14px !important;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
  }

  #core-modal .xk-core-modal-content {
    width: min(calc(100vw - 16px), 430px);
    max-width: min(calc(100vw - 16px), 430px);
  }
}

html[data-theme="light"] .xk-forced-wizard-lead-title,
html[data-theme="light"] .xk-forced-option-card strong,
html[data-theme="light"] .xk-forced-rule-group-title,
html[data-theme="light"] .xk-forced-rule-total {
  color: #162033;
}

html[data-theme="light"] .xk-forced-wizard-kicker,
html[data-theme="light"] .xk-forced-fieldlabel,
html[data-theme="light"] .xk-forced-list-subtitle,
html[data-theme="light"] .xk-forced-rule-group-meta,
html[data-theme="light"] .xk-forced-option-card small {
  color: #64748b;
}

html[data-theme="light"] .xk-forced-wizard-note,
html[data-theme="light"] .xk-forced-wizard-empty {
  color: #4a5d7a;
}

html[data-theme="light"] .xk-forced-wizard-toolbar {
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 247, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.06), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .xk-forced-wizard-toolbar .btn-icon,
html[data-theme="light"] .xk-forced-outbound-wrap .btn-icon {
  border-color: rgba(63, 111, 203, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(236, 244, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 42%);
  color: #23407d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 10px 22px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] .xk-forced-wizard-summary {
  border-color: rgba(37, 99, 235, 0.22);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(224, 236, 255, 0.93)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 42%);
  color: #1d4ed8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 20px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] .xk-forced-options-grid .xk-forced-option-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 40%);
}

html[data-theme="light"] .xk-forced-options-grid .xk-forced-option-card:has(input:checked) {
  border-color: rgba(37, 99, 235, 0.28);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(228, 238, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(37, 99, 235, 0.10);
}

html[data-theme="light"] .xk-mi-lead-title,
html[data-theme="light"] .xk-mi-section-title {
  color: #162033;
}

html[data-theme="light"] .xk-mi-panel,
html[data-theme="light"] .xk-mi-groups-card,
html[data-theme="light"] .xk-mi-preview-wrap,
html[data-theme="light"] .xk-mi-status {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 248, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 26px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] .xk-mi-groups-shell {
  border-color: rgba(63, 111, 203, 0.12);
  background: rgba(247, 250, 255, 0.94);
}

html[data-theme="light"] .xk-mi-chip,
html[data-theme="light"] .xk-mi-target {
  border-color: rgba(37, 99, 235, 0.22);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(224, 236, 255, 0.93)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%);
  color: #1d4ed8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .xk-mi-section-subtitle,
html[data-theme="light"] .xk-mi-kicker {
  color: #64748b;
}

html[data-theme="light"] #mihomo-import-modal .xray-log-select,
html[data-theme="light"] #mihomo-import-modal .xk-editor-engine-select {
  border-color: rgba(63, 111, 203, 0.18);
  background-color: rgba(255, 255, 255, 0.96);
  color: #1f2c44;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 10px 20px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] #mihomo-import-modal .xray-log-select:hover,
html[data-theme="light"] #mihomo-import-modal .xk-editor-engine-select:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background-color: #ffffff;
}

html[data-theme="light"] .xk-mi-status.success {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.99), rgba(224, 236, 255, 0.93)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 42%);
  color: #1e429f;
}

/* Light theme finish pass for DAT Explorer */
html[data-theme="light"] #routing-dat-contents-modal .xk-dat-modal-content {
  color: #152238;
}

html[data-theme="light"] #routing-dat-contents-modal .xk-dat-head,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-tags,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-items,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-routingbar {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.992), rgba(244, 248, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.09), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 28px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-kind {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(180deg, rgba(236, 244, 255, 0.98), rgba(224, 236, 255, 0.94)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%);
  color: #17315f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-path,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-page-info,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-selected-label,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-routing-label,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-routing-status,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-items-status,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-tags-status,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-empty {
  color: #566b89;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-path,
html[data-theme="light"] #routing-dat-contents-modal #routing-dat-contents-selected-tag,
html[data-theme="light"] #routing-dat-contents-modal .routing-dat-input,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-search-mode,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-ipfilter,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-pager-inline,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-tags-list,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-items-list,
html[data-theme="light"] #routing-dat-contents-modal .dat-tag-count {
  border-color: rgba(63, 111, 203, 0.16);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] #routing-dat-contents-modal .routing-dat-input,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select option,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select optgroup {
  color: #1f2c44;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select option,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select optgroup {
  background: #f8fbff;
}

html[data-theme="light"] #routing-dat-contents-modal .routing-dat-input::placeholder {
  color: #8a9bb6;
}

html[data-theme="light"] #routing-dat-contents-modal .routing-dat-input:hover,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: #ffffff;
}

html[data-theme="light"] #routing-dat-contents-modal .routing-dat-input:focus,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-select:focus {
  border-color: rgba(37, 99, 235, 0.34);
  background: #ffffff;
  color: #152238;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(59, 130, 246, 0.16);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-tags-list,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-items-list {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(246, 250, 255, 0.97)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.05), transparent 44%);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-row {
  border-color: rgba(63, 111, 203, 0.08);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-row:hover {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(235, 243, 255, 0.9);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-group-head.is-secondary {
  border-top-color: rgba(148, 163, 184, 0.24);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-group-title {
  color: #2563eb;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-group-head.is-secondary .dat-tag-group-title {
  color: #64748b;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-group-count {
  border-color: rgba(63, 111, 203, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #35568f;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-main.btn-secondary,
html[data-theme="light"] #routing-dat-contents-modal .dat-tag-copy.btn-secondary {
  border-color: rgba(63, 111, 203, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 42%);
  color: #23407d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 20px rgba(59, 91, 154, 0.07);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-row.is-active .dat-tag-main.btn-secondary {
  border-color: rgba(37, 99, 235, 0.32);
  background:
    linear-gradient(180deg, rgba(223, 236, 255, 0.99), rgba(206, 224, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 40%);
  color: #15306a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 24px rgba(37, 99, 235, 0.12);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-count {
  color: #5d718e;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-tag-used {
  border-color: rgba(71, 85, 105, 0.24);
  background: rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-item-row {
  border-bottom-color: rgba(148, 163, 184, 0.38);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-item-type {
  color: #2563eb;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-item-value {
  color: #152238;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-used-badge {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(220, 252, 231, 0.9);
  color: #2f6c4f;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.08),
    0 10px 18px rgba(34, 197, 94, 0.08);
}

html[data-theme="light"] #routing-dat-contents-modal .btn-secondary {
  border-color: rgba(63, 111, 203, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(242, 247, 255, 0.95)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 42%);
  color: #23407d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(59, 91, 154, 0.08);
}

html[data-theme="light"] #routing-dat-contents-modal .btn-secondary:hover:not([disabled]) {
  border-color: rgba(37, 99, 235, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 244, 255, 0.96)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%);
  color: #1b356b;
}

html[data-theme="light"] #routing-dat-contents-modal .btn-secondary[disabled] {
  opacity: 1;
  border-color: rgba(63, 111, 203, 0.10);
  background:
    linear-gradient(180deg, rgba(249, 251, 255, 0.96), rgba(242, 246, 252, 0.92)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.04), transparent 44%);
  color: #9aaac1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-search-mode .btn-secondary,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-ipfilter .btn-secondary {
  border: 0;
  background: transparent;
  color: #33517f;
  box-shadow: none;
}

html[data-theme="light"] #routing-dat-contents-modal .dat-contents-search-mode .btn-secondary.is-active,
html[data-theme="light"] #routing-dat-contents-modal .dat-contents-ipfilter .btn-secondary.is-active {
  background: linear-gradient(180deg, rgba(59, 105, 227, 0.98), rgba(37, 99, 235, 0.94));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

#ui-settings-modal .xk-ui-settings-modal-content {
  width: min(94vw, 980px);
  max-width: 980px;
}

#ui-settings-modal .xk-ui-settings-body {
  min-height: min(70vh, 720px);
}

#ui-settings-modal .xk-ui-settings-shell {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

#ui-settings-modal .xk-ui-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  position: sticky;
  top: 0;
}

#ui-settings-modal .xk-ui-settings-nav-btn {
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(8, 19, 47, 0.44);
  color: #dbeafe;
  border-radius: 14px;
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

#ui-settings-modal .xk-ui-settings-nav-btn:hover {
  border-color: rgba(125, 211, 252, 0.24);
  background: rgba(15, 33, 79, 0.62);
  transform: translateY(-1px);
}

#ui-settings-modal .xk-ui-settings-nav-btn.is-active {
  border-color: rgba(125, 211, 252, 0.34);
  background:
    linear-gradient(180deg, rgba(21, 46, 109, 0.82), rgba(10, 23, 56, 0.84)),
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 55%);
  color: #f8fbff;
  box-shadow: 0 12px 26px rgba(2, 8, 23, 0.22);
}

#ui-settings-modal .xk-ui-settings-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

#ui-settings-modal .xk-ui-settings-section {
  border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(5, 12, 30, 0.94), rgba(2, 8, 23, 0.88)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 34px rgba(2, 8, 23, 0.18);
}

#ui-settings-modal .xk-ui-settings-section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

#ui-settings-modal .xk-ui-settings-section-kicker {
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#ui-settings-modal .xk-ui-settings-section-title {
  margin: 0;
  color: #f8fbff;
  font-size: 1.08rem;
  font-weight: 700;
}

#ui-settings-modal .xk-ui-settings-section-description {
  margin: 0;
  color: rgba(191, 219, 254, 0.74);
  line-height: 1.5;
}

#ui-settings-modal .xk-ui-settings-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#ui-settings-modal .xk-ui-settings-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(7, 16, 39, 0.72);
}

#ui-settings-modal .xk-ui-settings-item.is-disabled {
  opacity: 0.68;
}

#ui-settings-modal .xk-ui-settings-item-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#ui-settings-modal .xk-ui-settings-item-copy strong {
  color: #f8fbff;
  font-size: 0.97rem;
}

#ui-settings-modal .xk-ui-settings-item-copy small,
#ui-settings-modal .xk-ui-settings-item-meta {
  color: rgba(191, 219, 254, 0.72);
  line-height: 1.45;
}

#ui-settings-modal .xk-ui-settings-item-meta {
  grid-column: 1 / -1;
  font-size: 0.88rem;
}

#ui-settings-modal .xk-ui-settings-toggle {
  margin-left: auto;
}

#ui-settings-modal .xk-ui-settings-input-wrap,
#ui-settings-modal .xk-ui-settings-select-wrap,
#ui-settings-modal .xk-ui-settings-valuebox {
  min-width: 180px;
}

#ui-settings-modal .xk-ui-settings-input,
#ui-settings-modal .xk-ui-settings-select {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background: rgba(2, 8, 23, 0.68);
  color: #f8fbff;
  padding: 0 12px;
}

#ui-settings-modal .xk-ui-settings-valuebox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

#ui-settings-modal .xk-ui-settings-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-weight: 700;
  text-align: center;
}

#ui-settings-modal .xk-ui-settings-value[data-tone="positive"] {
  border-color: rgba(74, 222, 128, 0.26);
  color: #dcfce7;
}

#ui-settings-modal .xk-ui-settings-value[data-tone="warning"] {
  border-color: rgba(251, 191, 36, 0.26);
  color: #fde68a;
}

#ui-settings-modal .xk-ui-settings-value[data-tone="danger"] {
  border-color: rgba(248, 113, 113, 0.26);
  color: #fecaca;
}

#ui-settings-modal .xk-ui-settings-actions,
#ui-settings-modal .xk-ui-settings-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

#ui-settings-modal .xk-ui-settings-action,
#ui-settings-modal .xk-ui-settings-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.14);
  background: rgba(8, 19, 47, 0.68);
  color: #dbeafe;
  text-decoration: none;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

#ui-settings-modal .xk-ui-settings-action:hover,
#ui-settings-modal .xk-ui-settings-pill:hover {
  border-color: rgba(125, 211, 252, 0.28);
  background: rgba(15, 33, 79, 0.88);
  transform: translateY(-1px);
}

#ui-settings-modal .xk-ui-settings-action-danger {
  border-color: rgba(248, 113, 113, 0.2);
  color: #fecaca;
}

#ui-settings-modal .xk-ui-settings-action-link.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-nav-btn,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-action,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-pill,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-input,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-select {
  border-color: rgba(63, 111, 203, 0.14);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-nav-btn,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section {
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section-title,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item-copy strong,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-input,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-select {
  color: #14233b;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section-description,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item-copy small,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item-meta {
  color: #4a5d7a;
}

@media (max-width: 860px) {
  #ui-settings-modal .xk-ui-settings-shell {
    grid-template-columns: 1fr;
  }

  #ui-settings-modal .xk-ui-settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  #ui-settings-modal .xk-ui-settings-sections {
    max-height: min(58vh, 560px);
  }
}

@media (max-width: 640px) {
  #ui-settings-modal .xk-ui-settings-item {
    grid-template-columns: 1fr;
  }

  #ui-settings-modal .xk-ui-settings-toggle,
  #ui-settings-modal .xk-ui-settings-input-wrap,
  #ui-settings-modal .xk-ui-settings-select-wrap,
  #ui-settings-modal .xk-ui-settings-valuebox,
  #ui-settings-modal .xk-ui-settings-actions,
  #ui-settings-modal .xk-ui-settings-links {
    width: 100%;
    justify-content: flex-start;
  }

  #ui-settings-modal .xk-ui-settings-valuebox {
    align-items: flex-start;
  }
}

#ui-settings-modal .xk-ui-settings-modal-content {
  width: min(94vw, 980px);
  max-width: 980px;
  height: min(88vh, 860px);
  max-height: min(88vh, 860px);
  overflow: hidden;
  color-scheme: dark;
}

#ui-settings-modal .xk-ui-settings-header,
#ui-settings-modal .xk-ui-settings-body,
#ui-settings-modal .xk-ui-settings-footer {
  padding-left: 22px;
  padding-right: 22px;
}

#ui-settings-modal .xk-ui-settings-header {
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 12px;
}

#ui-settings-modal .xk-ui-settings-titlebox {
  gap: 0;
  max-width: none;
}

#ui-settings-modal .xk-ui-settings-kicker {
  font-size: 10px;
  letter-spacing: 0.2em;
}

#ui-settings-modal .xk-ui-settings-header .modal-title {
  font-size: clamp(1.42rem, 1.65vw, 1.68rem);
  line-height: 1.08;
}

#ui-settings-modal .xk-ui-settings-subtitle {
  max-width: 760px;
  font-size: 0.96rem;
  line-height: 1.45;
}

#ui-settings-modal .modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

#ui-settings-modal .xk-ui-settings-body {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 6px;
}

#ui-settings-modal .xk-ui-settings-shell {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(148px, 176px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 0;
}

#ui-settings-modal .xk-ui-settings-nav {
  gap: 7px;
}

#ui-settings-modal .xk-ui-settings-nav-btn {
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.91rem;
  line-height: 1.2;
}

#ui-settings-modal .xk-ui-settings-sections {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  max-height: none;
  height: 100%;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

#ui-settings-modal .xk-ui-settings-section {
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 24px rgba(2, 8, 23, 0.15);
}

#ui-settings-modal .xk-ui-settings-section-head {
  gap: 3px;
  margin-bottom: 8px;
}

#ui-settings-modal .xk-ui-settings-section-kicker {
  display: none;
}

#ui-settings-modal .xk-ui-settings-section-title {
  font-size: 0.97rem;
}

#ui-settings-modal .xk-ui-settings-section-description {
  font-size: 0.88rem;
  line-height: 1.34;
}

#ui-settings-modal .xk-ui-settings-items {
  gap: 8px;
}

#ui-settings-modal .xk-ui-settings-item {
  gap: 7px 12px;
  padding: 10px 12px;
  border-radius: 13px;
}

#ui-settings-modal .xk-ui-settings-item-copy {
  gap: 4px;
}

#ui-settings-modal .xk-ui-settings-item-copy strong {
  font-size: 0.91rem;
  line-height: 1.25;
}

#ui-settings-modal .xk-ui-settings-item-copy small,
#ui-settings-modal .xk-ui-settings-item-meta {
  font-size: 0.84rem;
  line-height: 1.32;
}

#ui-settings-modal .xk-ui-settings-item-meta {
  margin-top: 1px;
}

#ui-settings-modal .xk-ui-settings-input-wrap,
#ui-settings-modal .xk-ui-settings-select-wrap {
  min-width: 138px;
  max-width: 196px;
  width: 100%;
  box-sizing: border-box;
}

#ui-settings-modal .xk-ui-settings-item-number .xk-ui-settings-input-wrap {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  justify-self: end;
}

#ui-settings-modal .xk-ui-settings-valuebox {
  min-width: 0;
  gap: 4px;
}

#ui-settings-modal .xk-ui-settings-toggle {
  transform: scale(0.94);
  transform-origin: right center;
}

#ui-settings-modal .xk-ui-settings-input,
#ui-settings-modal .xk-ui-settings-select {
  min-height: 34px;
  border-radius: 10px;
  padding: 0 11px;
  font-size: 0.86rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}

#ui-settings-modal .xk-ui-settings-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#ui-settings-modal .xk-ui-settings-input[type="number"]::-webkit-outer-spin-button,
#ui-settings-modal .xk-ui-settings-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#ui-settings-modal .xk-ui-settings-input:focus,
#ui-settings-modal .xk-ui-settings-select:focus,
#ui-settings-modal .xk-ui-settings-input:focus-visible,
#ui-settings-modal .xk-ui-settings-select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.82);
}

#ui-settings-modal .xk-ui-settings-select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23dbeafe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

#ui-settings-modal .xk-ui-settings-value {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

#ui-settings-modal .xk-ui-settings-actions,
#ui-settings-modal .xk-ui-settings-links {
  gap: 8px;
}

#ui-settings-modal .xk-ui-settings-action,
#ui-settings-modal .xk-ui-settings-pill {
  min-height: 32px;
  padding: 0 11px;
  font-size: 0.83rem;
  font-weight: 600;
  box-shadow: none;
}

#ui-settings-modal .xk-ui-settings-status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 0.8rem;
  line-height: 1.25;
  border-radius: 0;
}

#ui-settings-modal .xk-ui-settings-status.is-empty {
  display: none;
}

#ui-settings-modal .xk-ui-settings-status.error {
  padding: 6px 10px;
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 999px;
  background: rgba(69, 10, 10, 0.22);
}

#ui-settings-modal .xk-ui-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 12px;
}

#ui-settings-modal .xk-ui-settings-footer .btn-secondary {
  min-height: 34px;
  margin-left: auto;
  padding: 0 15px;
  border-radius: 999px;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-modal-content {
  color-scheme: light;
  background:
    linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(238, 244, 255, 0.97)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 42%);
  border-color: rgba(109, 137, 197, 0.22);
  box-shadow: 0 28px 70px rgba(122, 140, 174, 0.22);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-header,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(243, 248, 255, 0.48));
  border-color: rgba(109, 137, 197, 0.16);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-kicker {
  color: #2563eb;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-header .modal-title {
  color: #1b2b44;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-subtitle,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item-meta,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item-copy small,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section-description {
  color: #556987;
}

html[data-theme="light"] #ui-settings-modal .modal-close {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 245, 255, 0.94));
  border-color: rgba(114, 138, 186, 0.18);
  color: #39527a;
  box-shadow: 0 10px 24px rgba(146, 160, 187, 0.2);
}

html[data-theme="light"] #ui-settings-modal .modal-close:hover {
  background: linear-gradient(180deg, rgba(246, 250, 255, 1), rgba(227, 238, 255, 0.98));
  border-color: rgba(73, 111, 194, 0.24);
  color: #213c67;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-nav-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 255, 0.92));
  border-color: rgba(114, 138, 186, 0.18);
  color: #274061;
  box-shadow: 0 8px 18px rgba(156, 172, 198, 0.14);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-nav-btn:hover {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(233, 242, 255, 0.96));
  border-color: rgba(73, 111, 194, 0.22);
  color: #1f3557;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-nav-btn.is-active {
  background:
    linear-gradient(180deg, rgba(226, 236, 255, 0.98), rgba(211, 226, 255, 0.98)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 55%);
  border-color: rgba(73, 111, 194, 0.3);
  color: #163153;
  box-shadow: 0 12px 24px rgba(117, 142, 190, 0.22);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 249, 255, 0.93)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 42%);
  border-color: rgba(114, 138, 186, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.64),
    0 14px 30px rgba(153, 168, 194, 0.16);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item {
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(243, 248, 255, 0.96));
  border-color: rgba(126, 150, 199, 0.18);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-section-title,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-item-copy strong,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-value {
  color: #1b2b44;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-input,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-select {
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(238, 243, 252, 0.96));
  border-color: rgba(114, 138, 186, 0.26);
  color: #1d2b44;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-input:focus,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-select:focus,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-input:focus-visible,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-select:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(73, 111, 194, 0.62);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23405a82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(238, 243, 252, 0.96));
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, 0 0;
  background-size: 12px 8px, auto;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-input::placeholder {
  color: #8795ab;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-value {
  background: rgba(233, 238, 249, 0.94);
  border-color: rgba(138, 154, 183, 0.24);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-value[data-tone="positive"] {
  background: rgba(227, 247, 234, 0.96);
  border-color: rgba(95, 177, 121, 0.26);
  color: #1f6b3c;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-value[data-tone="warning"] {
  background: rgba(255, 245, 216, 0.96);
  border-color: rgba(210, 166, 63, 0.28);
  color: #8a5d00;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-value[data-tone="danger"] {
  background: rgba(255, 229, 229, 0.94);
  border-color: rgba(214, 119, 119, 0.24);
  color: #a33a3a;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-action,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 245, 255, 0.94));
  border-color: rgba(114, 138, 186, 0.2);
  color: #21406a;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-action:hover,
html[data-theme="light"] #ui-settings-modal .xk-ui-settings-pill:hover {
  background: linear-gradient(180deg, rgba(246, 250, 255, 1), rgba(227, 238, 255, 0.98));
  border-color: rgba(73, 111, 194, 0.26);
  color: #19365d;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-action-danger {
  color: #b64954;
  border-color: rgba(214, 119, 119, 0.24);
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status {
  background: transparent;
  border: 0;
}

html[data-theme="light"] #ui-settings-modal .xk-ui-settings-status.error {
  background: rgba(255, 238, 238, 0.92);
  border: 1px solid rgba(214, 119, 119, 0.22);
  color: #a63e48;
}

@media (max-width: 860px) {
  #ui-settings-modal .xk-ui-settings-header,
  #ui-settings-modal .xk-ui-settings-body,
  #ui-settings-modal .xk-ui-settings-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  #ui-settings-modal .xk-ui-settings-shell {
    grid-template-columns: 1fr;
  }

  #ui-settings-modal .xk-ui-settings-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }
}

@media (max-width: 640px) {
  #ui-settings-modal .xk-ui-settings-modal-content {
    width: min(96vw, 96vw);
    height: min(90vh, 760px);
    max-height: min(90vh, 760px);
  }

  #ui-settings-modal .xk-ui-settings-header,
  #ui-settings-modal .xk-ui-settings-body,
  #ui-settings-modal .xk-ui-settings-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  #ui-settings-modal .xk-ui-settings-header {
    gap: 10px;
    padding-top: 14px;
  }

  #ui-settings-modal .modal-close {
    width: 36px;
    height: 36px;
  }

  #ui-settings-modal .xk-ui-settings-body {
    min-height: 0;
  }

  #ui-settings-modal .xk-ui-settings-sections {
    height: 100%;
    max-height: none;
    padding-right: 4px;
  }

  #ui-settings-modal .xk-ui-settings-toggle {
    transform: scale(0.94);
    transform-origin: left center;
  }

  #ui-settings-modal .xk-ui-settings-input-wrap,
  #ui-settings-modal .xk-ui-settings-select-wrap,
  #ui-settings-modal .xk-ui-settings-actions,
  #ui-settings-modal .xk-ui-settings-links {
    max-width: none;
  }

  #ui-settings-modal .xk-ui-settings-footer {
    flex-wrap: wrap;
    align-items: center;
  }

  #ui-settings-modal .xk-ui-settings-status {
    flex-basis: 100%;
    order: 2;
  }

  #ui-settings-modal .xk-ui-settings-footer .btn-secondary {
    order: 1;
  }
}


/* Header premium glass refresh (late override after migration hotfixes). */
body.panel-page header .header-actions .xk-header-btn,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
body.xk-backups-page header .header-actions .xk-header-btn,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
.mihomo-generator-page .header-actions .xk-header-btn,
.mihomo-generator-page .header-actions .theme-toggle-btn.xk-header-btn-theme,
body.devtools-page header .header-actions .dt-header-btn,
body.devtools-page header .header-actions .theme-toggle-btn.dt-header-btn-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px) saturate(168%);
  -webkit-backdrop-filter: blur(18px) saturate(168%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -14px 24px rgba(2, 8, 23, 0.22),
    0 0 0 1px color-mix(in srgb, currentColor 8%, transparent),
    0 16px 34px rgba(2, 8, 23, 0.28) !important;
}

body.panel-page header .header-actions .xk-header-btn::after,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::after,
body.xk-backups-page header .header-actions .xk-header-btn::after,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme::after,
.mihomo-generator-page .header-actions .xk-header-btn::after,
.mihomo-generator-page .header-actions .theme-toggle-btn.xk-header-btn-theme::after,
body.devtools-page header .header-actions .dt-header-btn::after,
body.devtools-page header .header-actions .theme-toggle-btn.dt-header-btn-theme::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(circle at 16% -14%, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 54%);
  mix-blend-mode: screen;
}

body.panel-page header .header-actions .xk-header-btn:hover,
body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
body.xk-backups-page header .header-actions .xk-header-btn:hover,
body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
.mihomo-generator-page .header-actions .xk-header-btn:hover,
.mihomo-generator-page .header-actions .theme-toggle-btn.xk-header-btn-theme:hover,
body.devtools-page header .header-actions .dt-header-btn:hover,
body.devtools-page header .header-actions .theme-toggle-btn.dt-header-btn-theme:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 28px rgba(2, 8, 23, 0.24),
    0 0 0 1px color-mix(in srgb, currentColor 14%, transparent),
    0 20px 36px rgba(2, 8, 23, 0.32) !important;
}

body.panel-page header .header-actions .theme-toggle-btn .theme-toggle-icon,
body.xk-backups-page header .header-actions .theme-toggle-btn .theme-toggle-icon,
.mihomo-generator-page .header-actions .theme-toggle-btn .theme-toggle-icon,
body.devtools-page header .header-actions .theme-toggle-btn .theme-toggle-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 48%, transparent 72%),
    color-mix(in srgb, currentColor 14%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 4px 10px rgba(2, 8, 23, 0.16);
}

html[data-theme="light"] body.panel-page header .header-actions .xk-header-btn,
html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] body.xk-backups-page header .header-actions .xk-header-btn,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] .mihomo-generator-page .header-actions .xk-header-btn,
html[data-theme="light"] .mihomo-generator-page .header-actions .theme-toggle-btn.xk-header-btn-theme,
html[data-theme="light"] body.devtools-page header .header-actions .dt-header-btn,
html[data-theme="light"] body.devtools-page header .header-actions .theme-toggle-btn.dt-header-btn-theme {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -12px 20px rgba(191, 219, 254, 0.18),
    0 0 0 1px rgba(148, 163, 184, 0.08),
    0 16px 28px rgba(71, 85, 105, 0.14) !important;
}

html[data-theme="light"] body.panel-page header .header-actions .theme-toggle-btn .theme-toggle-icon,
html[data-theme="light"] body.xk-backups-page header .header-actions .theme-toggle-btn .theme-toggle-icon,
html[data-theme="light"] .mihomo-generator-page .header-actions .theme-toggle-btn .theme-toggle-icon,
html[data-theme="light"] body.devtools-page header .header-actions .theme-toggle-btn .theme-toggle-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 4px 10px rgba(148, 163, 184, 0.22);
}

/* CM6 premium dark/light theme */
.xkeen-cm6-host {
  --xk-cm-bg: #01030a;
  --xk-cm-fg: #d4d4d4;
  --xk-cm-caret: #d4d4d4;
  --xk-cm-selection: #2d4f8e;
  --xk-cm-selection-native: #2d4f8e;
  --xk-cm-selection-match: #1e3a5f;
  --xk-cm-active-line: transparent;
  --xk-cm-active-line-gutter: transparent;
  --xk-cm-active-line-fg: #c6c6c6;
  --xk-cm-gutter-bg: #01030a;
  --xk-cm-gutter-fg: #858585;
  --xk-cm-gutter-border: transparent;
  --xk-cm-search-bg: rgba(45, 79, 142, 0.42);
  --xk-cm-search-active-bg: rgba(45, 79, 142, 0.62);
  --xk-cm-search-border: rgba(122, 162, 247, 0.45);
  --xk-cm-bracket-bg: rgba(38, 57, 94, 0.78);
  --xk-cm-bracket-border: rgba(96, 123, 177, 0.58);
  --xk-cm-fold-bg: #283457;
  --xk-cm-fold-border: #7aa2f7;
  --xk-cm-fold-fg: #565f89;
  --xk-cm-popup-bg: #01030a;
  --xk-cm-popup-fg: #c0caf5;
  --xk-cm-popup-border: rgba(122, 162, 247, 0.28);
  --xk-cm-popup-shadow: rgba(8, 14, 29, 0.55);
  --xk-cm-error: #f7768e;
  --xk-cm-warning: #e0af68;
  --xk-cm-info: #7dcfff;
  --xk-cm-comment: #6a9955;
  --xk-cm-keyword: #569cd6;
  --xk-cm-string: #ce9178;
  --xk-cm-number: #b5cea8;
  --xk-cm-atom: #569cd6;
  --xk-cm-property: #9cdcfe;
  --xk-cm-variable: #d4d4d4;
  --xk-cm-definition: #d4d4d4;
  --xk-cm-type: #4ec9b0;
  --xk-cm-operator: #d4d4d4;
  --xk-cm-delimiter: #d4d4d4;
  --xk-cm-punctuation: #d4d4d4;
  --xk-cm-bracket-depth-0: #ffd700;
  --xk-cm-bracket-depth-1: #c586c0;
  --xk-cm-bracket-depth-2: #4fc1ff;
  --xk-cm-comma: #d4d4d4;
  --xk-cm-colon: #d4d4d4;
  --xk-cm-meta: #9cdcfe;
  --xk-cm-yaml-key: #5eead4;
  --xk-cm-yaml-root-key: #7dd3fc;
  --xk-cm-yaml-colon: #94a3b8;
  --xk-cm-yaml-sequence: #e0af68;
  --xk-cm-yaml-string: #f6ad55;
  --xk-cm-yaml-scalar: #c7d2fe;
  --xk-cm-yaml-number: #facc15;
  --xk-cm-yaml-atom: #7aa2f7;
  --xk-cm-yaml-anchor: #facc15;
  --xk-cm-yaml-tag: #f472b6;
  --xk-cm-yaml-comment: #6a9955;
  --xk-cm-yaml-url: #7dd3fc;
  --xk-cm-yaml-comma: #94a3b8;
  --xk-cm-yaml-bracket-depth-0: #ffd700;
  --xk-cm-yaml-bracket-depth-1: #c586c0;
  --xk-cm-yaml-bracket-depth-2: #4fc1ff;
  --xk-cm-invalid: #f7768e;
  --xk-cm-surface: #01030a;
  --xk-cm-editor-border: rgba(15, 23, 42, 0.96);
  --xk-cm-editor-shadow: none;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}

.xkeen-cm6-host.xkeen-cm6-light,
html[data-theme="light"] .xkeen-cm6-host {
  --xk-cm-bg: #ffffff;
  --xk-cm-fg: #111827;
  --xk-cm-caret: #2563eb;
  --xk-cm-selection: rgba(173, 214, 255, 0.44);
  --xk-cm-selection-native: rgba(173, 214, 255, 0.84);
  --xk-cm-selection-match: rgba(59, 130, 246, 0.1);
  --xk-cm-active-line: rgba(248, 250, 252, 0.96);
  --xk-cm-active-line-gutter: #ffffff;
  --xk-cm-active-line-fg: #1f1f1f;
  --xk-cm-gutter-bg: #ffffff;
  --xk-cm-gutter-fg: #6e7681;
  --xk-cm-gutter-border: rgba(226, 232, 240, 0.96);
  --xk-cm-search-bg: rgba(37, 99, 235, 0.12);
  --xk-cm-search-active-bg: rgba(37, 99, 235, 0.19);
  --xk-cm-search-border: rgba(37, 99, 235, 0.22);
  --xk-cm-bracket-bg: rgba(241, 245, 249, 0.96);
  --xk-cm-bracket-border: rgba(148, 163, 184, 0.26);
  --xk-cm-fold-bg: rgba(248, 250, 252, 0.98);
  --xk-cm-fold-border: rgba(203, 213, 225, 0.98);
  --xk-cm-fold-fg: #1d4ed8;
  --xk-cm-popup-bg: rgba(255, 255, 255, 0.99);
  --xk-cm-popup-fg: #18263b;
  --xk-cm-popup-border: rgba(148, 163, 184, 0.28);
  --xk-cm-popup-shadow: rgba(15, 23, 42, 0.14);
  --xk-cm-error: #e11d48;
  --xk-cm-warning: #d97706;
  --xk-cm-info: #2563eb;
  --xk-cm-comment: #6b7280;
  --xk-cm-keyword: #7c3aed;
  --xk-cm-string: #15803d;
  --xk-cm-number: #c2410c;
  --xk-cm-atom: #7c3aed;
  --xk-cm-property: #2563eb;
  --xk-cm-variable: #111827;
  --xk-cm-definition: #111827;
  --xk-cm-type: #2563eb;
  --xk-cm-operator: #0891b2;
  --xk-cm-delimiter: #0891b2;
  --xk-cm-punctuation: #0891b2;
  --xk-cm-meta: #be185d;
  --xk-cm-yaml-key: #047857;
  --xk-cm-yaml-root-key: #0369a1;
  --xk-cm-yaml-colon: #64748b;
  --xk-cm-yaml-sequence: #c2410c;
  --xk-cm-yaml-string: #b45309;
  --xk-cm-yaml-scalar: #1d4ed8;
  --xk-cm-yaml-number: #a16207;
  --xk-cm-yaml-atom: #7c3aed;
  --xk-cm-yaml-anchor: #a16207;
  --xk-cm-yaml-tag: #be185d;
  --xk-cm-yaml-comment: #6b7280;
  --xk-cm-yaml-url: #2563eb;
  --xk-cm-yaml-comma: #64748b;
  --xk-cm-yaml-bracket-depth-0: #a16207;
  --xk-cm-yaml-bracket-depth-1: #9333ea;
  --xk-cm-yaml-bracket-depth-2: #0891b2;
  --xk-cm-invalid: #7f1d1d;
  --xk-cm-surface: #ffffff;
  --xk-cm-editor-border: rgba(226, 232, 240, 0.96);
  --xk-cm-editor-shadow: none;
}

.xkeen-cm6-host .cm-editor {
  height: 100%;
  background: var(--xk-cm-surface);
  border: 1px solid var(--xk-cm-editor-border);
  border-radius: 18px;
  box-shadow: var(--xk-cm-editor-shadow);
  overflow: hidden;
  backdrop-filter: none;
}

.xkeen-cm6-host .cm-scroller {
  overflow: auto;
  height: 100%;
  min-height: 0;
  overscroll-behavior: contain;
}

/* Routing main editor (CM6): the host is created from a textarea and gets an inline
   height:100%. In auto-height layouts some browsers resolve that as content height,
   which kills the internal scrollbar. Give the routing host a definite viewport-bound
   height so CM6 always scrolls inside the editor, like Monaco and the legacy CM5 path. */
#routing-body .xkeen-cm6-host {
  min-height: var(--xk-routing-editor-min-height) !important;
  height: var(--xk-routing-editor-height) !important;
  max-height: var(--xk-routing-editor-max-height) !important;
}

#routing-body .xkeen-cm6-host .cm-editor,
#routing-body .xkeen-cm6-host .cm-scroller {
  height: 100% !important;
  min-height: 0 !important;
}

/* Mihomo routing editor (CM6): same issue as routing JSON editor on browsers that
   resolve the textarea-derived host height against content instead of the viewport.
   Keep a definite editor box so scrolling always happens inside CM6. */
#mihomo-body .xkeen-cm6-host {
  min-height: clamp(420px, 62vh, 1040px) !important;
  height: clamp(420px, 76vh, 1040px) !important;
  max-height: 78vh !important;
}

#mihomo-body .xkeen-cm6-host .cm-editor,
#mihomo-body .xkeen-cm6-host .cm-scroller {
  height: 100% !important;
  min-height: 0 !important;
}

/* Mihomo generator preview/editor (CM6): preview card uses the same textarea -> host
   replacement pattern, so give CM6 its own bounded viewport height as well. */
.generator-card--preview .xkeen-cm6-host {
  min-height: clamp(560px, 74vh, 1180px) !important;
  height: clamp(560px, 76vh, 1180px) !important;
  max-height: 78vh !important;
}

.generator-card--preview .xkeen-cm6-host .cm-editor,
.generator-card--preview .xkeen-cm6-host .cm-scroller {
  height: 100% !important;
  min-height: 0 !important;
}

.xkeen-cm6-host .cm-lineNumbers .cm-gutterElement {
  font-variant-numeric: tabular-nums;
  font-size: inherit;
  line-height: inherit;
  color: var(--xk-cm-gutter-fg);
}

.xkeen-cm6-host .cm-activeLineGutter {
  color: var(--xk-cm-active-line-fg) !important;
}

.xkeen-cm6-host .cm-content,
.xkeen-cm6-host .cm-gutterElement {
  font-size: inherit;
  line-height: inherit;
}

.xkeen-cm6-host .cm-tooltip,
.xkeen-cm6-host .cm-panels {
  backdrop-filter: blur(16px) saturate(135%);
}

.xkeen-cm6-host .cm-tooltip-lint .cm-diagnostic {
  background: transparent;
}

.xkeen-cm6-host .cm-tooltip-lint {
  box-sizing: border-box;
  max-width: min(560px, calc(100% - 16px), calc(100vw - 32px));
}

.cm-tooltip.cm-tooltip-lint {
  box-sizing: border-box;
  max-width: min(560px, calc(100vw - 32px)) !important;
}

.cm-tooltip.cm-tooltip-hover {
  box-sizing: border-box;
  max-width: min(560px, calc(100vw - 32px)) !important;
  overflow: hidden;
  pointer-events: auto;
}

.xkeen-cm6-host .cm-tooltip-lint > ul {
  max-width: 100%;
  max-height: min(220px, 38vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
}

.cm-tooltip.cm-tooltip-lint > ul {
  max-width: 100%;
  max-height: min(220px, 38vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
}

.cm-tooltip.cm-tooltip-hover > * {
  max-width: 100%;
}

.xkeen-cm6-host .cm-tooltip-lint .cm-diagnostic,
.xkeen-cm6-host .cm-tooltip-lint .cm-diagnosticText,
.xkeen-cm6-host .cm-tooltip-lint .cm-diagnosticSource {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cm-tooltip.cm-tooltip-lint .cm-diagnostic,
.cm-tooltip.cm-tooltip-lint .cm-diagnosticText,
.cm-tooltip.cm-tooltip-lint .cm-diagnosticSource,
.cm-tooltip.cm-tooltip-hover .cm-diagnostic,
.cm-tooltip.cm-tooltip-hover .cm-diagnosticText,
.cm-tooltip.cm-tooltip-hover .cm-diagnosticSource {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.xkeen-cm6-host .cm6-json-schema-hover {
  max-width: 520px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px;
  line-height: 1.5;
  font-size: 14px;
  color: #e6edf7;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.cm-tooltip .cm6-json-schema-hover {
  box-sizing: border-box;
  max-width: min(520px, calc(100vw - 48px));
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.xkeen-cm6-host.xkeen-cm6-light .cm6-json-schema-hover,
html[data-theme="light"] .xkeen-cm6-host .cm6-json-schema-hover {
  color: #0f172a;
}

.xkeen-cm6-host .cm6-json-schema-hover pre,
.xkeen-cm6-host .cm6-json-schema-hover code,
.cm-tooltip .cm6-json-schema-hover pre,
.cm-tooltip .cm6-json-schema-hover code {
  white-space: pre-wrap;
  word-break: break-word;
}

.xkeen-cm6-host .cm-panels input,
.xkeen-cm6-host .cm-panels button,
.xkeen-cm6-host .cm-panels label {
  font: inherit;
}

.xkeen-cm6-host .cm-panels input {
  border-radius: 10px;
  border: 1px solid var(--xk-cm-popup-border);
  background: color-mix(in srgb, var(--xk-cm-popup-bg) 88%, transparent);
  color: var(--xk-cm-popup-fg);
  padding: 8px 10px;
}

.xkeen-cm6-host .cm-panels button {
  border-radius: 10px;
  border: 1px solid var(--xk-cm-popup-border);
  background: color-mix(in srgb, var(--xk-cm-search-active-bg) 55%, transparent);
  color: var(--xk-cm-popup-fg);
  padding: 6px 10px;
}

.xkeen-cm6-host .cm-panels button:hover {
  filter: brightness(1.05);
}

.xkeen-cm6-host .cm-tooltip-autocomplete > ul {
  padding: 6px;
}

.xkeen-cm6-host .cm-tooltip-autocomplete > ul > li {
  border-radius: 10px;
}

.xkeen-cm6-host .cm-foldPlaceholder {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.xkeen-cm6-host .cm-lintPoint {
  cursor: pointer;
}

.xkeen-cm6-host .cm-editor ::selection {
  background: var(--xk-cm-selection-native) !important;
  color: inherit !important;
}

.xkeen-cm6-host .cm-scroller::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.xkeen-cm6-host .cm-scroller::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--xk-cm-gutter-fg) 52%, transparent);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.xkeen-cm6-host .cm-scroller::-webkit-scrollbar-corner {
  background: transparent;
}

.xkeen-cm6-host .cm-scroller::-webkit-scrollbar-track {
  background: transparent;
}

#json-editor-modal .xkeen-cm6-host,
#json-editor-modal .xkeen-cm6-host .cm-editor,
#fm-editor-modal .xkeen-cm6-host,
#fm-editor-modal .xkeen-cm6-host .cm-editor {
  height: 100%;
  min-height: 0;
}

#json-editor-modal .xkeen-cm6-host,
#fm-editor-modal .xkeen-cm6-host {
  flex: 1 1 auto;
  width: 100%;
  max-height: none;
}

#json-editor-modal .xkeen-cm6-host .cm-scroller,
#fm-editor-modal .xkeen-cm6-host .cm-scroller {
  min-height: 0;
  height: 100%;
}

.CodeMirror.xkeen-cm6-host.CodeMirror-fullscreen {
  position: fixed !important;
  inset: 12px;
  z-index: 4000;
}


/* === Panel page: ultra-compact header shell (routing/editor gets more vertical space) === */
body.panel-page .container-wide {
  padding-top: 14px;
  padding-bottom: 24px;
}

body.panel-page .panel-header {
  margin-bottom: 8px;
  padding: 10px 12px 8px;
  border-radius: 18px;
}

body.panel-page .panel-header-shell {
  gap: 8px;
}

body.panel-page .panel-header h1 {
  font-size: clamp(1.48rem, 1.6vw, 2.02rem);
  line-height: 1.05;
}

body.panel-page .header-main {
  column-gap: 10px;
  row-gap: 4px;
}

body.panel-page .header-title-group,
body.panel-page .header-center,
body.panel-page .header-right,
body.panel-page .header-actions,
body.panel-page .panel-shell-branding,
body.panel-page .panel-shell-status,
body.panel-page .panel-shell-core,
body.panel-page .panel-shell-badges,
body.panel-page .panel-shell-summary,
body.panel-page .panel-shell-actions-primary,
body.panel-page .panel-shell-actions-secondary {
  gap: 4px;
}

body.panel-page .panel-shell-actions-secondary {
  padding-left: 6px;
  margin-left: 2px;
}

body.panel-page .xk-brand-logo {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
}

body.panel-page .service-status-lamp {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
}

body.panel-page .service-status-text,
body.panel-page #xray-logs-badge,
body.panel-page .last-load-chip__text {
  font-size: calc(10.75px * var(--xk-font-scale));
}

body.panel-page .service-core-text,
body.panel-page .theme-toggle-btn,
body.panel-page .last-load-chip {
  min-height: 30px;
  padding: 0 10px;
  font-size: calc(10.5px * var(--xk-font-scale));
}

body.panel-page .last-load-chip {
  gap: 7px;
  padding-left: 7px;
  max-width: min(320px, 30vw);
}

body.panel-page .last-load-chip__icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

body.panel-page .last-load-chip__icon::before {
  inset: 4px;
}

body.panel-page .last-load-chip__prefix {
  font-size: 8.5px;
}

body.panel-page .top-tabs.header-tabs {
  margin-top: 6px;
  padding: 2px;
  gap: 4px;
  border-radius: 14px;
}

body.panel-page .top-tabs.header-tabs .top-tab-btn {
  min-height: 31px;
  padding: 4px 9px;
  border-radius: 10px;
  font-size: calc(10.75px * var(--xk-font-scale));
}

body.panel-page .xkeen-ctrl-row {
  margin-top: 6px;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 13px;
}

body.panel-page .xkeen-ctrl-group,
body.panel-page .xkeen-ctrl-group-main {
  gap: 4px;
}

body.panel-page .xkeen-ctrl-group-main .xkeen-ctrl-group-routing-focus {
  margin-left: 0;
}

body.panel-page .xkeen-ctrl-btn {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: calc(10px * var(--xk-font-scale));
}

body.panel-page .routing-focus-switch,
body.panel-page .routing-focus-switch-compact {
  gap: 4px;
  padding: 2px 4px;
}

body.panel-page .routing-focus-btn {
  min-height: 24px;
  min-width: 38px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10px;
}

body.panel-page .routing-focus-note {
  font-size: 8.75px;
}

body.panel-page .xk-global-autorestart-switch .dt-switch-slider {
  width: 30px;
  height: 16px;
}

body.panel-page .xk-global-autorestart-switch .dt-switch-slider::after {
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
}

body.panel-page .xk-global-autorestart-switch input:checked + .dt-switch-slider::after {
  transform: translateX(14px);
}

body.panel-page .xk-global-autorestart-switch .dt-switch-label {
  font-size: calc(10.75px * var(--xk-font-scale));
}

@media (max-width: 900px) {
  body.panel-page .container-wide {
    padding: 12px 10px 20px;
  }

  body.panel-page .panel-header {
    margin-bottom: 8px;
    padding: 9px 10px 7px;
    border-radius: 16px;
  }

  body.panel-page .panel-header-shell {
    gap: 6px;
  }

  body.panel-page .header-main {
    row-gap: 3px;
  }

  body.panel-page .top-tabs.header-tabs {
    margin-top: 5px;
    gap: 3px;
  }

  body.panel-page .top-tabs.header-tabs .top-tab-btn {
    min-height: 30px;
    padding: 4px 8px;
  }

  body.panel-page .xkeen-ctrl-row {
    gap: 5px;
    padding: 5px 6px;
  }
}


/* === Panel page: compact top-right header actions only === */
body.panel-page .header-right.panel-shell-right {
  gap: 6px;
}

body.panel-page .header-actions.panel-shell-actions,
body.panel-page .header-actions.panel-shell-actions .panel-shell-actions-primary,
body.panel-page .header-actions.panel-shell-actions .panel-shell-actions-secondary {
  gap: 5px;
}

body.panel-page .header-actions.panel-shell-actions .panel-shell-actions-secondary {
  padding-left: 4px;
  margin-left: 1px;
}

body.panel-page .header-actions.panel-shell-actions .xk-header-btn,
body.panel-page .header-actions.panel-shell-actions .theme-toggle-btn.xk-header-btn-theme {
  min-height: 28px;
  padding: 0 9px;
  font-size: calc(10px * var(--xk-font-scale));
}

body.panel-page .header-actions.panel-shell-actions .theme-toggle-btn.xk-header-btn-theme {
  min-width: 0;
  gap: 6px;
  padding-left: 6px;
  padding-right: 10px;
}

body.panel-page .header-actions.panel-shell-actions .theme-toggle-btn.xk-header-btn-theme .theme-toggle-icon {
  width: 18px;
  height: 18px;
  font-size: calc(11px * var(--xk-font-scale));
}

body.panel-page .header-actions.panel-shell-actions .theme-toggle-btn.xk-header-btn-theme .theme-toggle-text {
  font-size: inherit;
}

body.panel-page .header-actions.panel-shell-actions .xk-header-btn.xk-header-btn-ui,
body.panel-page .header-actions.panel-shell-actions .xk-header-btn.xk-header-btn-devtools,
body.panel-page .header-actions.panel-shell-actions .xk-header-btn.xk-header-btn-logout {
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 900px) {
  body.panel-page .header-right.panel-shell-right {
    gap: 5px;
  }

  body.panel-page .header-actions.panel-shell-actions,
  body.panel-page .header-actions.panel-shell-actions .panel-shell-actions-primary,
  body.panel-page .header-actions.panel-shell-actions .panel-shell-actions-secondary {
    gap: 4px;
  }

  body.panel-page .header-actions.panel-shell-actions .panel-shell-actions-secondary {
    padding-left: 0;
    margin-left: 0;
  }
}


/* === Panel page: compact CodeMirror search panel (toolbar Find) v2 === */
body.panel-page #routing-body .xkeen-cm6-host .cm-panels,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panels {
  backdrop-filter: blur(12px) saturate(125%);
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 8px;
  row-gap: 6px;
  padding: 6px 34px 6px 8px;
  min-height: 0;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search br,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search br {
  display: none !important;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search > *,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search > * {
  flex: 0 0 auto;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input,
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button,
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search label,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search label {
  margin: 0 !important;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[type="text"],
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input:not([type]),
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[type="text"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input:not([type]) {
  width: 176px;
  min-width: 176px;
  max-width: 176px;
  height: 30px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 10px;
  line-height: 1.1;
  font-size: calc(13px * var(--xk-font-scale));
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[name="search"],
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[name="replace"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[name="search"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[name="replace"] {
  flex: 0 0 176px;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button {
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  line-height: 1;
  font-size: calc(12px * var(--xk-font-scale));
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button[name="next"],
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button[name="prev"],
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button[name="select"],
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button[name="replace"],
body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button[name="replaceAll"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button[name="next"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button[name="prev"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button[name="select"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button[name="replace"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button[name="replaceAll"] {
  min-width: 0;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search label,
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  min-height: 24px;
  font-size: calc(11px * var(--xk-font-scale));
  line-height: 1;
  white-space: nowrap;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[type="checkbox"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0 !important;
}

body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button[name="close"],
body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button[name="close"] {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  font-size: 14px;
}

@media (max-width: 1180px) {
  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search,
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search {
    column-gap: 6px;
    row-gap: 5px;
  }

  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[type="text"],
  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input:not([type]),
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[type="text"],
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input:not([type]) {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }

  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[name="search"],
  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[name="replace"],
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[name="search"],
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[name="replace"] {
    flex-basis: 160px;
  }
}

@media (max-width: 980px) {
  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search,
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search {
    padding: 6px 32px 6px 7px;
  }

  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[type="text"],
  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input:not([type]),
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[type="text"],
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input:not([type]) {
    width: min(180px, 38vw);
    min-width: 136px;
    max-width: min(180px, 38vw);
  }

  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[name="search"],
  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search input[name="replace"],
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[name="search"],
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search input[name="replace"] {
    flex-basis: min(180px, 38vw);
    min-width: 136px;
  }

  body.panel-page #routing-body .xkeen-cm6-host .cm-panel.cm-search button,
  body.panel-page #mihomo-body .xkeen-cm6-host .cm-panel.cm-search button {
    padding: 0 9px;
  }
}

/* === Panel header: Xray logs badge polish (compact premium status chip) === */
body.panel-page #xray-logs-badge {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  min-width: 42px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(95, 137, 239, 0.14);
  background:
    linear-gradient(180deg, rgba(16, 28, 50, 0.94), rgba(7, 14, 28, 0.92)),
    radial-gradient(circle at 24% 50%, rgba(251, 191, 36, 0.1), transparent 46%);
  color: rgba(232, 240, 255, 0.8);
  box-shadow:
    0 10px 24px rgba(1, 6, 16, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
  animation: none;
}

body.panel-page #xray-logs-badge > span {
  position: relative;
  z-index: 1;
}

body.panel-page #xray-logs-badge::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 65%);
  opacity: 0.78;
}

body.panel-page #xray-logs-badge .xray-logs-badge__glyph {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 0;
  opacity: 0.92;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='9' height='2' rx='1'/%3E%3Crect x='2' y='7' width='12' height='2' rx='1'/%3E%3Crect x='2' y='11' width='7' height='2' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3' width='9' height='2' rx='1'/%3E%3Crect x='2' y='7' width='12' height='2' rx='1'/%3E%3Crect x='2' y='11' width='7' height='2' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.panel-page #xray-logs-badge .xray-logs-badge__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.84);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.08);
}

body.panel-page #xray-logs-badge[data-state="on"] {
  display: inline-flex;
}

body.panel-page #xray-logs-badge[data-state="on"][data-live="off"] {
  border-color: rgba(251, 191, 36, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 28, 45, 0.96), rgba(8, 14, 25, 0.94)),
    radial-gradient(circle at 24% 50%, rgba(251, 191, 36, 0.14), transparent 46%);
  color: rgba(246, 238, 220, 0.9);
  box-shadow:
    0 12px 24px rgba(1, 6, 16, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.panel-page #xray-logs-badge[data-state="on"][data-live="on"] {
  border-color: rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(180deg, rgba(17, 32, 59, 0.98), rgba(8, 17, 33, 0.95)),
    radial-gradient(circle at 24% 50%, rgba(96, 165, 250, 0.18), transparent 48%);
  color: #eef5ff;
  box-shadow:
    0 14px 28px rgba(1, 6, 16, 0.24),
    0 0 0 1px rgba(96, 165, 250, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.panel-page #xray-logs-badge[data-state="on"][data-live="on"] .xray-logs-badge__dot {
  background: #60a5fa;
  box-shadow:
    0 0 0 4px rgba(96, 165, 250, 0.12),
    0 0 14px rgba(96, 165, 250, 0.42);
  animation: xk-header-log-badge-dot-pulse 1.45s ease-in-out infinite;
}

body.panel-page #xray-logs-badge[data-state="off"] {
  display: none;
}

html[data-theme="light"] body.panel-page #xray-logs-badge {
  border-color: rgba(63, 111, 203, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.95)),
    radial-gradient(circle at 24% 50%, rgba(251, 191, 36, 0.08), transparent 46%);
  color: rgba(31, 39, 51, 0.82);
  box-shadow:
    0 10px 22px rgba(59, 91, 154, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] body.panel-page #xray-logs-badge .xray-logs-badge__dot {
  background: rgba(217, 119, 6, 0.82);
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1);
}

html[data-theme="light"] body.panel-page #xray-logs-badge[data-state="on"][data-live="off"] {
  border-color: rgba(217, 119, 6, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 244, 234, 0.96)),
    radial-gradient(circle at 24% 50%, rgba(245, 158, 11, 0.12), transparent 46%);
  color: #5b3f12;
}

html[data-theme="light"] body.panel-page #xray-logs-badge[data-state="on"][data-live="on"] {
  border-color: rgba(63, 111, 203, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(238, 245, 255, 0.98)),
    radial-gradient(circle at 24% 50%, rgba(59, 130, 246, 0.14), transparent 48%);
  color: #18335e;
  box-shadow:
    0 12px 24px rgba(59, 91, 154, 0.1),
    0 0 0 1px rgba(63, 111, 203, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] body.panel-page #xray-logs-badge[data-state="on"][data-live="on"] .xray-logs-badge__dot {
  background: #3566c9;
  box-shadow:
    0 0 0 4px rgba(53, 102, 201, 0.12),
    0 0 12px rgba(53, 102, 201, 0.22);
}

@keyframes xk-header-log-badge-dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.7;
  }
}

/* ========================================================================== 
   Tall-screen editor sizing hotfix (5K / high-DPI desktop monitors)
   --------------------------------------------------------------------------
   Previous rules capped the main panel editors around 900-1040px. On 4K/5K
   displays this left a large unused area under the editor cards. Keep the
   existing proportions, but raise the ceiling so routing/mihomo editors can
   grow with the viewport almost to full screen height.
   ========================================================================== */
body.panel-page {
  --xk-panel-editor-tall-min-height: clamp(420px, 62vh, 2200px);
  --xk-panel-editor-tall-height: clamp(420px, 76vh, 2200px);
  --xk-panel-editor-tall-max-height: calc(100vh - 220px);
}

body.panel-page #routing-body {
  --xk-routing-editor-min-height: var(--xk-panel-editor-tall-min-height);
  --xk-routing-editor-height: var(--xk-panel-editor-tall-height);
  --xk-routing-editor-max-height: var(--xk-panel-editor-tall-max-height);
}

body.panel-page #routing-body .CodeMirror {
  min-height: var(--xk-routing-editor-min-height) !important;
}

body.panel-page #routing-body .CodeMirror-scroll {
  max-height: var(--xk-routing-editor-max-height) !important;
}

body.panel-page #routing-body #routing-editor-monaco,
body.panel-page #routing-body .xkeen-cm6-host,
body.panel-page #routing-body textarea#routing-editor {
  min-height: var(--xk-routing-editor-min-height) !important;
  height: var(--xk-routing-editor-height) !important;
  max-height: var(--xk-routing-editor-max-height) !important;
}

body.panel-page #mihomo-body {
  --xk-mihomo-editor-min-height: clamp(420px, 62vh, 2200px);
  --xk-mihomo-editor-height: clamp(420px, 76vh, 2200px);
  --xk-mihomo-editor-max-height: calc(100vh - 220px);
}

body.panel-page #mihomo-body .CodeMirror {
  min-height: var(--xk-mihomo-editor-min-height) !important;
}

body.panel-page #mihomo-body .CodeMirror-scroll {
  max-height: var(--xk-mihomo-editor-max-height) !important;
}

body.panel-page #mihomo-body #mihomo-editor-monaco,
body.panel-page #mihomo-body .xkeen-cm6-host,
body.panel-page #mihomo-body textarea#mihomo-editor {
  min-height: var(--xk-mihomo-editor-min-height) !important;
  height: var(--xk-mihomo-editor-height) !important;
  max-height: var(--xk-mihomo-editor-max-height) !important;
}


/* Shared Monaco custom context menu (used across routing, Mihomo editors and file-manager Monaco hosts) */
.xk-routing-monaco-menu {
  position: fixed;
  z-index: 2147483000;
  min-width: 290px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.65);
  background: #0b1220;
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.56), 0 0 0 1px rgba(59, 130, 246, 0.08);
  backdrop-filter: none;
}
.xk-routing-monaco-menu[hidden] {
  display: none !important;
}
.xk-routing-monaco-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e5eefc;
  text-align: left;
  font: 600 13px/1.2 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.xk-routing-monaco-menu-label {
  flex: 1 1 auto;
  min-width: 0;
}
.xk-routing-monaco-menu-shortcut {
  flex: 0 0 auto;
  color: rgba(191, 219, 254, 0.82);
  font: 500 12px/1.2 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: right;
  white-space: nowrap;
}
.xk-routing-monaco-menu-item:hover,
.xk-routing-monaco-menu-item:focus-visible {
  outline: none;
  background: rgba(37, 99, 235, 0.22);
}
.xk-routing-monaco-menu-item[disabled] {
  opacity: 0.45;
  cursor: default;
}
.xk-routing-monaco-menu-item[disabled]:hover,
.xk-routing-monaco-menu-item[disabled]:focus-visible {
  background: transparent;
}
.xk-routing-monaco-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: rgba(71, 85, 105, 0.55);
}
html[data-theme="light"] .xk-routing-monaco-menu {
  border-color: rgba(148, 163, 184, 0.72);
  background: #f8fafc;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
html[data-theme="light"] .xk-routing-monaco-menu-item {
  color: #0f172a;
}
html[data-theme="light"] .xk-routing-monaco-menu-shortcut {
  color: rgba(51, 65, 85, 0.86);
}
html[data-theme="light"] .xk-routing-monaco-menu-item:hover,
html[data-theme="light"] .xk-routing-monaco-menu-item:focus-visible {
  background: rgba(59, 130, 246, 0.14);
}
html[data-theme="light"] .xk-routing-monaco-menu-sep {
  background: rgba(148, 163, 184, 0.7);
}

/* ==========================================================================
   Panel page: mobile usability pass
   Keep the mobile layout compact and scroll-friendly without rewriting the
   desktop cascade. These overrides intentionally live at the end of the file.
   ========================================================================== */
@media (max-width: 760px) {
  body.panel-page .container-wide {
    padding: 10px 8px 18px;
  }

  body.panel-page .container-wide::before {
    inset: 10px 4px 18px;
    filter: blur(18px);
  }

  body.panel-page .panel-header {
    margin-bottom: 8px;
    padding: 10px 10px 8px;
    border-radius: 16px;
  }

  body.panel-page .panel-header-shell {
    gap: 6px;
  }

  body.panel-page .header-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.panel-page .header-title-group,
  body.panel-page .header-center,
  body.panel-page .header-right,
  body.panel-page .header-actions,
  body.panel-page .panel-shell-actions-primary,
  body.panel-page .panel-shell-actions-secondary {
    width: 100%;
    justify-content: flex-start;
  }

  body.panel-page .header-title-group,
  body.panel-page .panel-shell-branding,
  body.panel-page .panel-shell-status,
  body.panel-page .panel-shell-core,
  body.panel-page .panel-shell-summary,
  body.panel-page .panel-shell-actions-primary,
  body.panel-page .panel-shell-actions-secondary {
    gap: 6px;
  }

  body.panel-page .panel-header h1 {
    font-size: 1.34rem;
    letter-spacing: -0.03em;
  }

  body.panel-page .xk-brand-logo {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    border-radius: 8px;
  }

  body.panel-page .service-status-lamp {
    width: 8px;
    height: 8px;
    box-shadow: none;
  }

  body.panel-page .service-core-text,
  body.panel-page .theme-toggle-btn,
  body.panel-page .last-load-chip {
    min-height: 32px;
    padding: 0 10px;
    font-size: calc(10.5px * var(--xk-font-scale));
  }

  body.panel-page .last-load-chip {
    max-width: 100%;
  }

  body.panel-page .theme-toggle-btn.xk-header-btn-theme {
    min-width: 32px;
    padding: 0;
    justify-content: center;
  }

  body.panel-page .theme-toggle-btn.xk-header-btn-theme .theme-toggle-text {
    display: none;
  }

  body.panel-page .theme-toggle-btn.xk-header-btn-theme .theme-toggle-icon {
    margin: 0;
  }

  body.panel-page .top-tabs.header-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    gap: 6px;
    margin-top: 6px;
    border-radius: 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body.panel-page .top-tabs.header-tabs::-webkit-scrollbar {
    display: none;
  }

  body.panel-page .top-tabs.header-tabs .top-tab-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 126px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 12px;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: calc(11px * var(--xk-font-scale));
  }

  body.panel-page .xkeen-ctrl-row {
    margin-top: 8px;
    padding: 8px;
    gap: 8px;
    border-radius: 16px;
    align-items: stretch;
  }

  body.panel-page .xkeen-ctrl-group-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  body.panel-page .xkeen-ctrl-group-main .xkeen-ctrl-btn {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    justify-content: center;
    font-size: calc(10px * var(--xk-font-scale));
    white-space: nowrap;
  }

  body.panel-page .xkeen-ctrl-group-main .xkeen-ctrl-group-routing-focus {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }

  body.panel-page .routing-focus-switch,
  body.panel-page .routing-focus-switch-compact {
    width: 100%;
    justify-content: flex-start;
    padding: 4px;
    gap: 4px;
    border-radius: 12px;
  }

  body.panel-page .routing-focus-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 28px;
    padding: 0 6px;
  }

  body.panel-page .routing-focus-note {
    display: none;
  }

  body.panel-page .global-toggle-right {
    width: 100%;
    align-items: stretch;
    gap: 6px;
  }

  body.panel-page .xk-global-autorestart-switch {
    width: 100%;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.12);
    background: rgba(2, 8, 23, 0.34);
    box-sizing: border-box;
  }

  html[data-theme="light"] body.panel-page .xk-global-autorestart-switch {
    background: rgba(248, 251, 255, 0.82);
    border-color: rgba(63, 111, 203, 0.12);
  }

  body.panel-page .xk-routing-topbar,
  body.panel-page .xk-mihomo-topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 6px 0 8px;
  }

  body.panel-page .xk-routing-fileblock {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  body.panel-page .xk-routing-fileline {
    gap: 6px;
  }

  body.panel-page .xk-routing-fileline .xray-log-select {
    width: 100%;
    flex: 1 1 auto;
  }

  body.panel-page .xk-routing-active-inline {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    font-size: calc(11px * var(--xk-font-scale));
  }

  body.panel-page .xk-routing-toolbararea,
  body.panel-page .xk-mihomo-toolbararea {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  body.panel-page .xk-routing-toolbarhost,
  body.panel-page .xk-mihomo-toolbarhost {
    width: 100%;
    justify-content: flex-start;
  }

  body.panel-page .xk-routing-toolbarhost .xkeen-cm-toolbar,
  body.panel-page .xk-mihomo-toolbarhost .xkeen-cm-toolbar {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding-right: 0;
  }

  body.panel-page .xkeen-cm-tool {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  body.panel-page .xk-editor-engine {
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    padding: 0 8px;
  }

  body.panel-page .xk-editor-engine-label {
    display: none;
  }

  body.panel-page .xk-editor-engine-select {
    min-height: 34px;
    min-width: 0;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 30px;
    font-size: calc(11px * var(--xk-font-scale));
  }

  body.panel-page #routing-body {
    --xk-routing-editor-min-height: 280px;
    --xk-routing-editor-height: min(44vh, 360px);
    --xk-routing-editor-max-height: 430px;
  }

  body.panel-page #mihomo-body {
    --xk-mihomo-editor-min-height: 280px;
    --xk-mihomo-editor-height: min(44vh, 360px);
    --xk-mihomo-editor-max-height: 430px;
  }

  body.panel-page .routing-editor-meta {
    gap: 6px;
    margin: 8px 0 8px;
  }

  body.panel-page .routing-editor-badge {
    min-height: 24px;
    padding: 0 8px;
    font-size: calc(10.5px * var(--xk-font-scale));
  }

  body.panel-page #routing-status,
  body.panel-page #mihomo-status {
    margin-top: 6px;
    font-size: calc(11.5px * var(--xk-font-scale));
    line-height: 1.35;
  }

  body.panel-page .log-card {
    margin-top: 10px;
  }

  body.panel-page .log-header-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
  }

  body.panel-page .log-header-row h2 {
    flex: 1 1 100%;
    margin: 0;
  }

  body.panel-page .log-header-actions {
    width: 100%;
    gap: 6px;
    justify-content: flex-start;
    overflow: visible;
  }

  body.panel-page .log-card .log-block {
    min-height: 140px;
    max-height: 220px;
    padding: 10px;
    border-radius: 14px;
    font-size: calc(11px * var(--xk-font-scale));
    line-height: 1.35;
  }

  body.panel-page .routing-dat-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.panel-page .routing-dat-toolbar-left {
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
  }

  body.panel-page .routing-dat-toolbar .status {
    font-size: calc(11px * var(--xk-font-scale));
  }

  body.panel-page .routing-dat-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.panel-page .routing-dat-item {
    padding: 10px;
    border-radius: 16px;
  }

  body.panel-page .routing-dat-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  body.panel-page .routing-dat-meta {
    text-align: left;
  }

  body.panel-page .routing-dat-actions-inline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body.panel-page .routing-dat-actions-inline .btn-icon {
    width: 100%;
    min-width: 0;
    padding: 0;
    justify-content: center;
  }

  body.panel-page .routing-side-card .commands-header {
    gap: 8px;
    align-items: center;
  }

  body.panel-page .routing-side-card .commands-header h2 {
    font-size: calc(13px * var(--xk-font-scale));
    line-height: 1.2;
  }

  body.panel-page .routing-side-card > [id$="-body"] {
    margin-top: 10px;
    padding-top: 10px;
  }

  body.panel-page .routing-side-card .xk-fragment-row,
  body.panel-page .routing-side-card #outbounds-body .outbounds-hints {
    padding: 8px;
    border-radius: 14px;
  }

  body.panel-page .routing-side-card .xk-fragment-row {
    flex-direction: column;
    align-items: stretch;
  }

  body.panel-page .routing-side-card .xk-fragment-select {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  body.panel-page .routing-side-card .xk-fragment-row .btn-icon {
    align-self: flex-start;
  }

  body.panel-page #outbounds-body .outbounds-hints {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.panel-page #outbounds-body .outbounds-help-popover {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Live Xray logs are user-resizable; keep the generic restart-log cap from
   limiting the browser resize handle on the online logs card. */
body.panel-page #view-xray-logs .log-card:not(.is-fullscreen) .xray-log-block {
  height: 420px;
  min-height: 420px;
  max-height: none;
  resize: vertical;
  overflow: auto;
}

@media (max-width: 420px) {
  body.panel-page .xkeen-ctrl-group-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.panel-page .xkeen-ctrl-group-main .xkeen-ctrl-group-routing-focus {
    grid-column: 1 / -1;
  }

  body.panel-page .top-tabs.header-tabs .top-tab-btn {
    min-width: 112px;
  }

  body.panel-page .routing-dat-actions-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.panel-page #outbounds-body .outbounds-hints {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Panel page: mobile second wave (file manager + modal ergonomics). */
@media (max-width: 760px) {
  body.panel-page .modal {
    padding: 8px;
    align-items: stretch;
  }

  body.panel-page .modal-content {
    width: min(calc(100vw - 12px), 100%);
    max-width: min(calc(100vw - 12px), 100%);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
    padding: 12px;
  }

  body.panel-page .modal-header {
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  body.panel-page .modal-header > * {
    min-width: 0;
  }

  body.panel-page .modal-title {
    line-height: 1.2;
  }

  body.panel-page .modal-body {
    min-height: 0;
    overflow-x: hidden;
  }

  body.panel-page .modal-actions {
    gap: 8px;
    flex-wrap: wrap;
  }

  body.panel-page .modal-actions > * {
    min-width: 0;
    max-width: 100%;
  }

  body.panel-page .fm-card {
    padding: 10px;
    border-radius: 18px;
  }

  body.panel-page .fm-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.panel-page .fm-header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.panel-page .fm-top-notes {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 6px;
  }

  body.panel-page .fm-top-notes #fm-disabled-note,
  body.panel-page .fm-top-notes #fm-footer-status {
    grid-column: 1;
    justify-self: stretch;
  }

  body.panel-page .fm-status-note {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }

  body.panel-page .fm-two {
    gap: 8px;
  }

  body.panel-page .fm-panel {
    border-radius: 16px;
    min-height: 280px;
  }

  body.panel-page .fm-panel-bar {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 6px;
  }

  body.panel-page .fm-panel-bar > .fm-target-select,
  body.panel-page .fm-panel-bar > .fm-root-btn,
  body.panel-page .fm-panel-bar > .fm-up-btn,
  body.panel-page .fm-panel-bar > .fm-refresh-btn {
    flex: 0 0 auto;
  }

  body.panel-page .fm-panel-bar > .fm-connect-btn,
  body.panel-page .fm-panel-bar > .fm-disconnect-btn {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
  }

  body.panel-page .fm-path-input {
    order: 10;
    flex: 1 1 100%;
    min-width: 0;
  }

  body.panel-page .fm-filter-wrap {
    order: 11;
    flex: 1 1 100%;
    min-width: 0;
  }

  body.panel-page .fm-list {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.panel-page .fm-row,
  body.panel-page .fm-panel.is-trash .fm-row {
    min-width: 560px;
  }

  body.panel-page .fm-hints {
    gap: 8px;
    margin-top: 8px;
  }

  body.panel-page .fm-hints-text {
    gap: 8px 12px;
    font-size: calc(11px * var(--xk-font-scale));
  }

  body.panel-page .fm-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.panel-page .fm-footer-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.panel-page .fm-help-btn {
    align-self: flex-start;
  }

  body.panel-page #json-editor-modal .modal-content,
  body.panel-page #fm-editor-modal .modal-content {
    height: min(90dvh, 820px);
    max-height: min(90dvh, 820px);
  }

  body.panel-page #json-editor-modal .modal-body,
  body.panel-page #fm-editor-modal .modal-body {
    gap: 6px;
  }

  body.panel-page #json-editor-modal .xk-editor-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
  }

  body.panel-page #json-editor-modal .xk-editor-engine {
    flex: 1 1 100%;
    max-width: none;
  }

  body.panel-page #json-editor-modal .modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.panel-page #json-editor-modal .modal-actions > * {
    flex: 1 1 calc(50% - 4px);
  }

  body.panel-page #json-editor-format-btn {
    flex-basis: 100%;
  }

  body.panel-page #fm-editor-modal .modal-header > div:last-child {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.panel-page #fm-editor-modal .xk-editor-engine {
    flex: 1 1 auto;
    max-width: none;
  }

  body.panel-page #fm-editor-modal .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.panel-page #fm-editor-modal .modal-actions > div {
    display: flex;
    width: 100%;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  body.panel-page #fm-editor-modal .modal-actions > div > * {
    flex: 1 1 calc(50% - 4px);
  }

  body.panel-page #routing-dat-contents-modal .xk-dat-modal-content {
    width: min(calc(100vw - 10px), 100%);
    height: min(94dvh, 860px);
    max-height: min(94dvh, 860px);
    padding: 10px;
    border-radius: 18px;
  }

  body.panel-page #routing-dat-contents-modal .xk-dat-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  body.panel-page #routing-dat-contents-modal .xk-dat-controls {
    width: 100%;
  }

  body.panel-page #routing-dat-contents-modal .xk-dat-controls > * {
    flex: 1 1 auto;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-search-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-tags,
  body.panel-page #routing-dat-contents-modal .dat-contents-items {
    padding: 10px;
    border-radius: 18px;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-items-top {
    align-items: stretch;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-toolbar {
    width: 100%;
    justify-content: space-between;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-routingbar {
    grid-template-columns: 1fr;
  }

  body.panel-page #routing-dat-contents-modal #routing-dat-contents-target-outbound {
    width: 100%;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-items-search-row {
    flex-wrap: wrap;
    align-items: stretch;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-search-mode,
  body.panel-page #routing-dat-contents-modal .dat-contents-ipfilter {
    width: 100%;
    overflow-x: auto;
  }

  body.panel-page #routing-dat-contents-modal .xk-dat-modal-actions {
    justify-content: flex-start;
  }

  body.panel-page #routing-dat-contents-modal .xk-dat-modal-actions .btn-secondary {
    width: 100%;
    min-width: 0;
  }

  body.panel-page #ui-settings-modal .xk-ui-settings-modal-content {
    width: min(calc(100vw - 12px), 100%);
    height: min(92dvh, 780px);
    max-height: min(92dvh, 780px);
    border-radius: 18px;
  }

  body.panel-page #ui-settings-modal .xk-ui-settings-header,
  body.panel-page #ui-settings-modal .xk-ui-settings-body,
  body.panel-page #ui-settings-modal .xk-ui-settings-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.panel-page #ui-settings-modal .xk-ui-settings-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
  }

  body.panel-page #ui-settings-modal .xk-ui-settings-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  body.panel-page .fm-header-actions .btn-secondary {
    flex: 1 1 calc(50% - 4px);
  }

  body.panel-page .fm-row,
  body.panel-page .fm-panel.is-trash .fm-row {
    min-width: 620px;
  }

  body.panel-page #json-editor-modal .modal-actions > *,
  body.panel-page #fm-editor-modal .modal-actions > div > * {
    flex-basis: 100%;
  }

  body.panel-page #routing-dat-contents-modal .dat-contents-toolbar {
    justify-content: flex-start;
  }
}

/* Panel page: mobile third wave (touch-first file manager + cleaner editor toolbars). */
@media (max-width: 760px) {
  body.panel-page header .header-actions,
  body.panel-page header .panel-shell-actions-primary,
  body.panel-page header .panel-shell-actions-secondary {
    gap: 6px;
  }

  body.panel-page header .xk-header-btn,
  body.panel-page header .theme-toggle-btn.xk-header-btn-theme {
    min-height: 32px;
    padding: 0 10px;
  }

  body.panel-page .routing-focus-note {
    display: none;
  }

  body.panel-page .xk-routing-toolbararea,
  body.panel-page .xk-mihomo-toolbararea {
    display: grid;
    grid-template-columns: repeat(3, 32px) minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    width: 100%;
    gap: 6px;
  }

  body.panel-page .xk-routing-toolbararea > .xk-editor-engine,
  body.panel-page .xk-mihomo-toolbararea > .xk-editor-engine {
    grid-column: 4;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body.panel-page .xk-routing-toolbarhost,
  body.panel-page .xk-mihomo-toolbarhost {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  body.panel-page .xk-routing-toolbarhost .xkeen-cm-toolbar,
  body.panel-page .xk-mihomo-toolbarhost .xkeen-cm-toolbar {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  body.panel-page .xk-editor-engine-select {
    width: 100%;
    min-width: 116px;
  }

  body.panel-page .fm-header-actions,
  body.panel-page .fm-footer-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  body.panel-page .fm-header-actions::-webkit-scrollbar,
  body.panel-page .fm-footer-actions::-webkit-scrollbar {
    display: none;
  }

  body.panel-page .fm-header-actions > *,
  body.panel-page .fm-footer-actions > * {
    flex: 0 0 auto;
  }

  body.panel-page .fm-hints {
    display: none;
  }

  body.panel-page .fm-list {
    min-height: 260px;
  }

  body.panel-page .fm-row-header {
    display: none;
  }

  body.panel-page .fm-row:not(.fm-row-header) {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
    align-items: center;
  }

  body.panel-page .fm-panel.is-trash .fm-row:not(.fm-row-header) {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px 8px;
  }

  body.panel-page .fm-cell.fm-size {
    justify-self: end;
    font-size: calc(11px * var(--xk-font-scale));
    opacity: 0.82;
    white-space: nowrap;
  }

  body.panel-page .fm-cell.fm-perm,
  body.panel-page .fm-cell.fm-mtime {
    display: none;
  }

  body.panel-page .fm-panel.is-trash .fm-cell.fm-size,
  body.panel-page .fm-panel.is-trash .fm-cell.fm-perm,
  body.panel-page .fm-panel.is-trash .fm-cell.fm-mtime {
    display: none;
  }

  body.panel-page .fm-panel.is-trash .fm-cell.fm-from {
    display: block;
    grid-column: 2;
    font-size: calc(10.5px * var(--xk-font-scale));
    line-height: 1.25;
    opacity: 0.74;
  }

  body.panel-page .fm-cell.fm-name {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   Diff viewer modal (compare two text versions side-by-side / inline).
   Built around the standard .modal/.modal-content layout, but the body is a
   flexible host for the Monaco diff editor that fills available height.
   --------------------------------------------------------------------------- */
.xkeen-diff-modal {
  z-index: 90;
}

.xkeen-diff-modal .modal-content.xkeen-diff-card {
  width: min(96vw, 1280px);
  max-width: 1280px;
  height: min(86vh, 880px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  gap: 8px;
}

.xkeen-diff-modal .xkeen-diff-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.xkeen-diff-modal .xkeen-diff-head .modal-title {
  font-size: calc(14px * var(--xk-font-scale, 1));
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xkeen-diff-modal .xkeen-diff-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  width: 100%;
  flex-wrap: wrap;
}

/* The diff toolbar occupies its own header row. Keep icon-and-label actions
 * on one baseline so a button never grows into the title/source rows. */
body.panel-page .xkeen-diff-modal .xkeen-diff-head-actions :is(.xkeen-diff-apply-btn, .xkeen-diff-close-x):has(.xk-action-icon) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.xkeen-diff-modal .xkeen-diff-mode {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--modal-border, #475569d1);
}

.xkeen-diff-modal .xkeen-diff-ignore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid var(--modal-border, #475569d1);
  background: rgba(15, 23, 42, 0.18);
  color: var(--muted, #cbd5e1);
  font-size: calc(11.5px * var(--xk-font-scale, 1));
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}

.xkeen-diff-modal .xkeen-diff-ignore-toggle input {
  margin: 0;
  accent-color: var(--accent, #2563eb);
  cursor: pointer;
}

.xkeen-diff-modal .xkeen-diff-ignore-toggle.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.xkeen-diff-modal .xkeen-diff-ignore-toggle.is-disabled input {
  cursor: not-allowed;
}

.xkeen-diff-modal .xkeen-diff-mode-btn {
  padding: 4px 10px;
  font-size: calc(11.5px * var(--xk-font-scale, 1));
  border-radius: 0;
  border: 0;
}

.xkeen-diff-modal .xkeen-diff-mode-btn.is-active {
  background: var(--accent, #2563eb);
  color: #f8fafc;
}

.xkeen-diff-modal .xkeen-diff-nav {
  display: inline-flex;
  gap: 4px;
}

.xkeen-diff-modal .xkeen-diff-apply-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.xkeen-diff-modal .xkeen-diff-apply-btn {
  font-size: calc(12px * var(--xk-font-scale, 1));
  padding: 4px 10px;
  white-space: nowrap;
}

.xkeen-diff-modal .xkeen-diff-apply-btn.is-disabled,
.xkeen-diff-modal .xkeen-diff-save-btn.is-disabled,
.xkeen-diff-modal .xkeen-diff-revert-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.xkeen-diff-modal .xkeen-diff-save-btn.is-dirty::before {
  content: '● ';
  color: var(--accent, #f59e0b);
  font-size: 0.85em;
  margin-right: 2px;
}

.xkeen-diff-modal .monaco-editor .xkeen-diff-active-hunk-line {
  background: rgba(96, 165, 250, 0.12);
  box-shadow: inset 3px 0 0 rgba(147, 197, 253, 0.55);
  border-radius: 2px;
}

.xkeen-diff-modal .monaco-editor .xkeen-diff-active-hunk-line-left {
  background: rgba(251, 191, 36, 0.10);
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.55);
}

.xkeen-diff-modal .monaco-editor .xkeen-diff-active-hunk-line-right {
  background: rgba(59, 130, 246, 0.11);
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.6);
}

.xkeen-diff-modal .monaco-editor .margin .xkeen-diff-active-hunk-gutter {
  border-left: 2px solid rgba(147, 197, 253, 0.7);
}

.xkeen-diff-modal .monaco-editor .margin .xkeen-diff-active-hunk-gutter-left {
  border-left-color: rgba(251, 191, 36, 0.75);
}

.xkeen-diff-modal .monaco-editor .margin .xkeen-diff-active-hunk-gutter-right {
  border-left-color: rgba(96, 165, 250, 0.8);
}

html[data-theme="light"] .xkeen-diff-modal .monaco-editor .xkeen-diff-active-hunk-line {
  background: rgba(37, 99, 235, 0.10);
  box-shadow: inset 3px 0 0 rgba(29, 78, 216, 0.35);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-ignore-toggle {
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
}

html[data-theme="light"] .xkeen-diff-modal .monaco-editor .xkeen-diff-active-hunk-line-left {
  background: rgba(245, 158, 11, 0.12);
  box-shadow: inset 3px 0 0 rgba(217, 119, 6, 0.35);
}

html[data-theme="light"] .xkeen-diff-modal .monaco-editor .xkeen-diff-active-hunk-line-right {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.35);
}

.xkeen-diff-modal .xkeen-diff-close-x {
  font-size: 18px;
  line-height: 1;
  padding: 2px 8px;
}

.xkeen-diff-modal .xkeen-diff-labels {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(11.5px * var(--xk-font-scale, 1));
  color: var(--muted, #9ca3af);
  flex: 0 0 auto;
}

.xkeen-diff-modal .xkeen-diff-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.xkeen-diff-modal .xkeen-diff-side-right {
  justify-content: flex-end;
}

.xkeen-diff-modal .xkeen-diff-side-sep {
  flex: 0 0 auto;
  opacity: 0.6;
  padding: 0 4px;
  color: var(--muted, #9ca3af);
}

.xkeen-diff-modal .xkeen-diff-label {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46%;
  flex: 0 0 auto;
}

.xkeen-diff-modal .xkeen-diff-label-left {
  text-align: left;
}

.xkeen-diff-modal .xkeen-diff-label-right {
  text-align: left;
}

.xkeen-diff-modal .xkeen-diff-source {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 280px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.06);
  color: var(--text, #e5e7eb);
  font: inherit;
  font-size: calc(11.5px * var(--xk-font-scale, 1));
  cursor: pointer;
}

.xkeen-diff-modal .xkeen-diff-source:focus {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: 1px;
}

.xkeen-diff-modal .xkeen-diff-source option {
  background: var(--card-bg, #020617);
  color: var(--text, #e5e7eb);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-source option {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111827);
}

.xkeen-diff-modal .xkeen-diff-source.hidden {
  display: none;
}

.xkeen-diff-modal .xkeen-diff-error {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
  font-size: calc(12px * var(--xk-font-scale, 1));
}

.xkeen-diff-modal .xkeen-diff-error.hidden {
  display: none;
}

.xkeen-diff-modal .xkeen-diff-host {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--modal-border, #475569d1);
  background: var(--xk-cm-bg, #01030a);
}

/* Selection: CM6 default cm-selectionLayer is light grey on dark and white on
   light, both invisible against changed-line backgrounds. Bind it to our own
   --xk-cm-selection so highlighted text remains readable. */
.xkeen-diff-modal .xkeen-diff-host .cm-selectionBackground,
.xkeen-diff-modal .xkeen-diff-host .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
  background-color: var(--xk-cm-selection) !important;
}

.xkeen-diff-modal .xkeen-diff-host .cm-content ::selection,
.xkeen-diff-modal .xkeen-diff-host .cm-line::selection,
.xkeen-diff-modal .xkeen-diff-host .cm-line ::selection {
  background-color: var(--xk-cm-selection-native);
  color: inherit;
}

/* Gutters and editor surface inherit the same CM6 palette as the main editor. */
.xkeen-diff-modal .xkeen-diff-host .cm-editor {
  background-color: var(--xk-cm-bg, #01030a);
  color: var(--xk-cm-fg, var(--text, #e5e7eb));
}

.xkeen-diff-modal .xkeen-diff-host .cm-content {
  background-color: transparent;
  caret-color: var(--xk-cm-caret, #d4d4d4);
}

.xkeen-diff-modal .xkeen-diff-host .cm-lineWrapping {
  white-space: break-spaces;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.xkeen-diff-modal .xkeen-diff-host .cm-lineWrapping .cm-line {
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.xkeen-diff-modal .xkeen-diff-host .cm-gutters {
  background-color: var(--xk-cm-gutter-bg, var(--xk-cm-bg, #01030a));
  color: var(--xk-cm-gutter-fg, #858585);
  border-right: 1px solid rgba(96, 165, 250, 0.10);
}

.xkeen-diff-modal .xkeen-diff-host .cm-lineNumbers .cm-gutterElement,
.xkeen-diff-modal .xkeen-diff-host .cm-foldGutter .cm-gutterElement {
  color: var(--xk-cm-gutter-fg, #858585);
}

.xkeen-diff-modal .xkeen-diff-host .cm-activeLineGutter {
  background-color: transparent;
  color: var(--xk-cm-active-line-fg, #c6c6c6);
}

/* mergeView center strip and per-side change indicator gutter */
.xkeen-diff-modal .xkeen-diff-host .cm-mergeSpacer,
.xkeen-diff-modal .xkeen-diff-host .cm-merge-revert,
.xkeen-diff-modal .xkeen-diff-host .cm-changeGutter {
  background-color: color-mix(in srgb, var(--xk-cm-bg, #01030a) 88%, #071427 12%);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-gutters {
  border-right-color: rgba(37, 99, 235, 0.16);
}

.xkeen-diff-modal .xkeen-diff-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
}

.xkeen-diff-modal .xkeen-diff-summary {
  font-size: calc(11.5px * var(--xk-font-scale, 1));
  color: var(--muted, #9ca3af);
}

.xkeen-diff-modal .xkeen-diff-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.xkeen-diff-modal .xkeen-diff-save-btn {
  white-space: nowrap;
}

.xkeen-diff-modal .xkeen-diff-revert-btn {
  white-space: nowrap;
}

/* Toolbar "Сравнить" button — shares the .xkeen-cm-tool look so it matches
   existing fullscreen/help icons in routing/inbounds/outbounds/mihomo. */
.xkeen-cm-tool.xkeen-diff-trigger {
  font-weight: 600;
}

/* CodeMirror 6 @codemirror/merge backend — fits the merge view inside our
   .xkeen-diff-host card and uses the same CM6 palette as the main editor.
   Scrolling: every level on the chain to .cm-scroller MUST keep min-height:0
   and overflow:hidden so that expanding a collapsed-fold doesn't push the
   document past the modal's viewport. The .cm-scroller itself must take
   overflow:auto + a bounded height for the internal scrollbar to appear,
   matching the fix already applied to .xkeen-cm6-host above. */
.xkeen-diff-modal .xkeen-diff-host .cm-mergeView,
.xkeen-diff-modal .xkeen-diff-host .cm-mergeViewEditors {
  height: 100%;
  width: 100%;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.xkeen-diff-modal .xkeen-diff-host .cm-mergeView {
  background: var(--xk-cm-bg, #01030a);
  color: var(--text, #e5e7eb);
}

.xkeen-diff-modal .xkeen-diff-host .cm-mergeViewEditor {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.xkeen-diff-modal .xkeen-diff-host .cm-editor {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  font-family: 'Consolas', 'Menlo', 'Liberation Mono', monospace;
  font-size: calc(13px * var(--xk-font-scale, 1));
}

.xkeen-diff-modal .xkeen-diff-host.xkeen-cm6-host .cm-editor {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.xkeen-diff-modal .xkeen-diff-host .cm-scroller {
  font-family: inherit;
  background-color: var(--xk-cm-bg, #01030a);
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overscroll-behavior: contain;
}

/* Diff line/text backgrounds — calibrated against Monaco's default vs-dark
   diff palette (subtle red for removed lines, subtle green for added lines,
   stronger inline highlights for the actual changed runs of text). */
.xkeen-diff-modal .xkeen-diff-host .cm-changedLine {
  background: rgba(255, 0, 0, 0.18);
}

.xkeen-diff-modal .xkeen-diff-host .cm-deletedChunk {
  background: rgba(255, 0, 0, 0.18);
}

.xkeen-diff-modal .xkeen-diff-host .cm-deletedChunk .cm-deletedText,
.xkeen-diff-modal .xkeen-diff-host .cm-deletedLine .cm-deletedText {
  background: rgba(255, 0, 0, 0.42);
  color: inherit;
}

.xkeen-diff-modal .xkeen-diff-host .cm-insertedLine {
  background: rgba(46, 204, 113, 0.20);
}

.xkeen-diff-modal .xkeen-diff-host .cm-changedText {
  background: rgba(46, 204, 113, 0.42);
  color: inherit;
}

.xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-line {
  position: relative;
  background: rgba(147, 197, 253, 0.16) !important;
  box-shadow:
    inset 4px 0 0 rgba(191, 219, 254, 0.92),
    inset 0 0 0 1px rgba(191, 219, 254, 0.20);
}

.xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-line-left {
  background: rgba(245, 158, 11, 0.22) !important;
  box-shadow:
    inset 4px 0 0 rgba(251, 191, 36, 0.96),
    inset 0 0 0 1px rgba(251, 191, 36, 0.24);
}

.xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-line-right {
  background: rgba(59, 130, 246, 0.18) !important;
  box-shadow:
    inset 4px 0 0 rgba(96, 165, 250, 0.98),
    inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}

.xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-start {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-end {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-changedLine,
html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-deletedChunk {
  background: rgba(229, 83, 83, 0.18);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-deletedChunk .cm-deletedText,
html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-deletedLine .cm-deletedText {
  background: rgba(229, 83, 83, 0.36);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-insertedLine {
  background: rgba(46, 160, 67, 0.20);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-changedText {
  background: rgba(46, 160, 67, 0.36);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-line {
  background: rgba(37, 99, 235, 0.10) !important;
  box-shadow:
    inset 4px 0 0 rgba(37, 99, 235, 0.55),
    inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-line-left {
  background: rgba(245, 158, 11, 0.16) !important;
  box-shadow:
    inset 4px 0 0 rgba(217, 119, 6, 0.56),
    inset 0 0 0 1px rgba(217, 119, 6, 0.14);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-line.xkeen-diff-cm6-active-hunk-line-right {
  background: rgba(59, 130, 246, 0.12) !important;
  box-shadow:
    inset 4px 0 0 rgba(37, 99, 235, 0.58),
    inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

/* "$ unchanged lines" fold marker — @codemirror/merge default styles use a
   white-ish gradient that screams against our dark palette. Repaint it so it
   matches the modal background but stays visible (subtle blue tint on hover
   makes the click affordance obvious). */
.xkeen-diff-modal .xkeen-diff-host .cm-collapsedLines {
  background: linear-gradient(
      to bottom,
      transparent 0,
      rgba(37, 65, 106, 0.30) 30%,
      rgba(37, 65, 106, 0.30) 70%,
      transparent 100%
    );
  color: var(--muted, #9ca3af);
  border-top: 1px solid rgba(96, 165, 250, 0.18);
  border-bottom: 1px solid rgba(96, 165, 250, 0.18);
  transition: background 0.12s ease, color 0.12s ease;
}

.xkeen-diff-modal .xkeen-diff-host .cm-collapsedLines:hover,
.xkeen-diff-modal .xkeen-diff-host .cm-collapsedLines:focus-visible {
  background: linear-gradient(
      to bottom,
      transparent 0,
      rgba(96, 165, 250, 0.40) 30%,
      rgba(96, 165, 250, 0.40) 70%,
      transparent 100%
    );
  color: var(--text, #e5e7eb);
  outline: none;
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-collapsedLines {
  background: linear-gradient(
      to bottom,
      transparent 0,
      rgba(96, 165, 250, 0.18) 30%,
      rgba(96, 165, 250, 0.18) 70%,
      transparent 100%
    );
  color: #475569;
  border-top: 1px solid rgba(96, 165, 250, 0.32);
  border-bottom: 1px solid rgba(96, 165, 250, 0.32);
}

html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-collapsedLines:hover,
html[data-theme="light"] .xkeen-diff-modal .xkeen-diff-host .cm-collapsedLines:focus-visible {
  background: linear-gradient(
      to bottom,
      transparent 0,
      rgba(96, 165, 250, 0.32) 30%,
      rgba(96, 165, 250, 0.32) 70%,
      transparent 100%
    );
  color: #1e293b;
}

@media (max-width: 720px) {
  .xkeen-diff-modal .modal-content.xkeen-diff-card {
    width: 96vw;
    height: 90vh;
    max-height: 90vh;
    padding: 10px;
  }

  .xkeen-diff-modal .xkeen-diff-apply-group {
    width: 100%;
    justify-content: flex-start;
  }

  .xkeen-diff-modal .xkeen-diff-labels {
    flex-wrap: wrap;
  }

  .xkeen-diff-modal .xkeen-diff-side {
    flex: 1 1 100%;
  }

  .xkeen-diff-modal .xkeen-diff-side-right {
    justify-content: flex-start;
  }

  .xkeen-diff-modal .xkeen-diff-side-sep {
    display: none;
  }

  .xkeen-diff-modal .xkeen-diff-source {
    max-width: none;
  }

  .xkeen-diff-modal .xkeen-diff-foot {
    flex-wrap: wrap;
  }

  .xkeen-diff-modal .xkeen-diff-foot-actions {
    width: 100%;
    justify-content: flex-end;
  }
}