:root {
  --kx-bg: #0b1220;
  --kx-panel: rgba(17, 27, 45, .78);
  --kx-panel-strong: rgba(17, 27, 45, .92);
  --kx-line: rgba(190, 216, 245, .17);
  --kx-text: #f2f5fb;
  --kx-muted: #b4c0d0;
  --kx-cyan: #78dce7;
  --kx-lilac: #baa2ff;
  --kx-pink: #f09ac1;
  --kx-shadow: 0 18px 48px rgba(1, 7, 18, .34);
  --kx-radius: 18px;
}

.kx-theme-page {
  min-height: 100vh;
  color: var(--kx-text);
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  background-color: var(--kx-bg);
  background-image:
    radial-gradient(ellipse at 12% 4%, rgba(65, 150, 184, .20), transparent 36rem),
    radial-gradient(ellipse at 90% 24%, rgba(150, 99, 190, .18), transparent 38rem),
    linear-gradient(145deg, #0b1220, #11182b 58%, #171329);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.kx-theme-page.kx-art-page {
  background: transparent;
}
.kx-theme-page.kx-art-page::before {
  background:
    linear-gradient(135deg, rgba(6, 12, 24, .24), rgba(13, 18, 38, .44)),
    repeating-linear-gradient(45deg, rgba(120, 220, 231, .018) 0 1px, transparent 1px 24px);
}
.kx-theme-page.kx-art-page::after { background-color: #0b1220; }

.kx-theme-page h1,
.kx-theme-page h2,
.kx-theme-page h3 { color: var(--kx-text); }

.kx-theme-page .sub,
.kx-theme-page .hint,
.kx-theme-page .desc,
.kx-theme-page .eyebrow,
.kx-theme-page .field label,
.kx-theme-page .label,
.kx-theme-page .foot,
.kx-theme-page footer { color: var(--kx-muted); }

.kx-theme-page .card,
.kx-theme-page .game,
.kx-theme-page .feat,
.kx-theme-page .client-banner,
.kx-theme-page .download-card,
.kx-theme-page .model-strip,
.kx-theme-page .stage,
.kx-theme-page .main-panel,
.kx-theme-page .auth-card,
.kx-theme-page .s-item,
.kx-theme-page .panel-card,
.kx-theme-page .admin-card,
.kx-theme-page .admin-row,
.kx-theme-page .stat,
.kx-theme-page .auth-panel,
.kx-theme-page .auth-overlay,
.kx-theme-page .dialog-body,
.kx-theme-page .upload-wrap,
.kx-theme-page .workspace,
.kx-theme-page .main-panel,
.kx-theme-page .panel,
.kx-theme-page .separator-card,
.kx-theme-page .stem-card,
.kx-theme-page .result-panel,
.kx-theme-page .result-dialog,
.kx-theme-page .history-item,
.kx-theme-page .sr-panel,
.kx-theme-page .pc-box,
.kx-theme-page .bgpanel,
.kx-theme-page .musbox,
.kx-theme-page .statsbar,
.kx-theme-page .task,
.kx-theme-page .linkline,
.kx-theme-page .fingerprint {
  color: var(--kx-text);
  background: linear-gradient(145deg, rgba(27, 47, 70, .86), var(--kx-panel));
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  box-shadow: var(--kx-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.kx-theme-page input,
.kx-theme-page select,
.kx-theme-page textarea {
  color: var(--kx-text);
  background: rgba(7, 15, 29, .76);
  border-color: var(--kx-line);
  border-radius: 12px;
}

.kx-theme-page input::placeholder,
.kx-theme-page textarea::placeholder { color: rgba(196, 208, 225, .62); }

.kx-theme-page input:focus,
.kx-theme-page select:focus,
.kx-theme-page textarea:focus {
  border-color: rgba(120, 220, 231, .72);
  outline: 3px solid rgba(120, 220, 231, .15);
  box-shadow: 0 0 24px rgba(120, 220, 231, .13);
}

.kx-theme-page a { color: #9de9ef; transition: color .2s ease, border-color .2s ease, box-shadow .25s ease; }
.kx-theme-page a:hover { color: #d1c4ff; }
.kx-theme-page a:focus-visible,
.kx-theme-page button:focus-visible {
  outline: 3px solid rgba(120, 220, 231, .65);
  outline-offset: 3px;
}

.kx-sitebar {
  position: relative;
  z-index: 2;
  width: min(100% - 36px, 1240px);
  min-height: 68px;
  margin: 0 auto 26px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--kx-line);
  border-radius: 20px;
  background: rgba(11, 20, 35, .68);
  box-shadow: 0 14px 36px rgba(1, 7, 18, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.kx-site-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  color: var(--kx-text) !important;
  text-decoration: none !important;
}

.kx-site-brand img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(190, 138, 235, .22);
}

.kx-site-brand b { display: block; font-size: 13px; letter-spacing: 1.4px; }
.kx-site-brand small { display: block; margin-top: 3px; color: var(--kx-muted); font-size: 10px; }
.kx-site-links { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.kx-site-links a {
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--kx-muted);
  font-size: 12px;
  text-decoration: none;
}
.kx-site-links a:hover {
  border-color: var(--kx-line);
  background: rgba(255, 255, 255, .07);
  color: var(--kx-text);
}

.kx-theme-page .game:hover,
.kx-theme-page .feat:hover,
.kx-theme-page .links a:hover {
  border-color: rgba(120, 220, 231, .46);
  box-shadow: 0 22px 52px rgba(1, 7, 18, .4), 0 0 28px rgba(120, 220, 231, .12);
}
.kx-theme-page .links a:hover { background: rgba(255, 255, 255, .075); color: var(--kx-text); }
.kx-theme-page .flow .step { color: #a9edf0; background: rgba(120, 220, 231, .12); }

.kx-theme-page .tabs { border-color: var(--kx-line); background: rgba(255, 255, 255, .035); }
.kx-theme-page .tab,
.kx-theme-page .auth-tab,
.kx-theme-page .meta b { color: var(--kx-muted); }
.kx-theme-page .tab.active,
.kx-theme-page .auth-tab.active { color: var(--kx-text); }
.kx-theme-page .tab.active,
.kx-theme-page .primary,
.kx-theme-page .cb-btn {
  border-color: transparent;
  background: linear-gradient(100deg, var(--kx-cyan), var(--kx-lilac));
  color: #11172a;
}
.kx-theme-page .primary:hover,
.kx-theme-page .cb-btn:hover { filter: brightness(1.08); }
.kx-theme-page .badge,
.kx-theme-page .status-line,
.kx-theme-page .tip,
.kx-theme-page .note { border-color: var(--kx-line); }

.kx-theme-page table { color: var(--kx-text); border-color: var(--kx-line); }
.kx-theme-page th,
.kx-theme-page td { border-color: var(--kx-line); }
.kx-theme-page th { color: var(--kx-muted); background: rgba(255, 255, 255, .055); }
.kx-theme-page tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.kx-theme-page code:not(pre code) { color: #f4b7d4; background: rgba(234, 167, 207, .10); }
.kx-theme-page pre { border: 1px solid var(--kx-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

@media (max-width: 640px) {
  .kx-sitebar { width: calc(100% - 24px); min-height: 60px; margin-bottom: 20px; padding: 8px 10px; border-radius: 16px; }
  .kx-site-brand { gap: 8px; }
  .kx-site-brand img { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; }
  .kx-site-brand b { font-size: 11px; letter-spacing: 1px; }
  .kx-site-brand small { font-size: 9px; }
  .kx-site-links { gap: 2px; }
  .kx-site-links a { padding: 7px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-theme-page *, .kx-sitebar * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}