
:root {
  --site-bg: var(--xh-bg, #0f0e0c);
  --site-bg-soft: var(--xh-bg-deep, #171511);
  --site-surface: color-mix(in srgb, var(--xh-surface, #1a1814) 94%, transparent);
  --site-surface-strong: var(--xh-surface-2, #1f1c17);
  --site-gold: var(--xh-accent, #c9a96e);
  --site-gold-strong: var(--xh-accent-strong, #ddb96f);
  --site-text: var(--xh-text, #e8e4dc);
  --site-muted: var(--xh-muted, #aaa093);
  --site-line: var(--xh-line, rgba(201, 169, 110, .17));
  --site-shadow: var(--xh-shadow-soft, 0 18px 54px rgba(0, 0, 0, .32));
  --site-radius: 16px;
}

html { background: var(--site-bg) !important; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% -8%, color-mix(in srgb,var(--site-gold) 10%,transparent), transparent 30rem),
    radial-gradient(circle at 92% 14%, color-mix(in srgb,var(--site-gold) 7%,transparent), transparent 25rem),
    var(--site-bg) !important;
  color: var(--site-text) !important;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body, p, li, label, td, dd, small { color: inherit; }
h1, h2, h3, h4, h5, h6, .page-title, .section-title, .hero-title {
  color: var(--site-text) !important;
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  letter-spacing: .035em;
}
.mingshu-result :is(h1, h2, h3, h4, h5, h6, .page-title, .section-title, .mingshu-paper-title) {
  color: var(--ms-ink, #201c18) !important;
}
a { color: var(--site-gold); }
a:hover { color: var(--site-gold-strong); }
::selection { color: var(--xh-accent-ink, #17120a); background: var(--site-gold); }

body > nav, body > header, .site-header, .main-header, .museum-nav, .top-nav, .navbar {
  color: var(--site-text) !important;
  background: color-mix(in srgb, var(--site-bg) 90%, transparent) !important;
  border-color: var(--site-line) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
nav a:not(.xh-site-nav-cta), header a:not(.xh-site-nav-cta), .museum-nav a:not(.xh-site-nav-cta), .top-nav a:not(.xh-site-nav-cta), .navbar a:not(.xh-site-nav-cta) { color: var(--xh-body, #c8c0b4) !important; }
nav a:not(.xh-site-nav-cta):hover, header a:not(.xh-site-nav-cta):hover, .museum-nav a:not(.xh-site-nav-cta):hover, .top-nav a:not(.xh-site-nav-cta):hover, .navbar a:not(.xh-site-nav-cta):hover,
nav a.active, header a.active, .museum-nav a.active { color: var(--site-gold) !important; }

:where(main, .main, .page, .page-shell, .content, .container) {
  color: var(--site-text);
}
:where(.card, .panel, .box, .module, .tool-card, .feature-card, .result-card,
  .form-card, .content-card, .info-card, .glass-card, .museum-card,
  .result-panel, .chart-panel, .section-card, fieldset, dialog) {
  color: var(--site-text) !important;
  background: var(--site-surface) !important;
  border-color: var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:where(.card, .tool-card, .feature-card, .museum-card, .section-card) {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
:where(.card, .tool-card, .feature-card, .museum-card, .section-card):hover {
  border-color: var(--xh-line-strong, rgba(201,169,110,.38)) !important;
  box-shadow: var(--xh-shadow, 0 20px 58px rgba(0,0,0,.38)) !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%;
  color: var(--site-text) !important;
  background: var(--xh-surface-2, rgba(9, 8, 7, .72)) !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 10px !important;
  outline: none;
}
:where(input, select, textarea):focus {
  border-color: var(--site-gold) !important;
  box-shadow: 0 0 0 3px var(--xh-accent-soft, rgba(201,169,110,.12)) !important;
}
input::placeholder, textarea::placeholder { color: var(--xh-muted, #746d64) !important; }
select option { color: var(--site-text); background: var(--xh-surface-2, #171511); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--site-gold); }

:where(button, .btn, [class*="btn-"], input[type="submit"], input[type="button"]) {
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
:where(.btn-primary, .primary-btn, .submit-btn, button[type="submit"], input[type="submit"]) {
  color: var(--xh-accent-ink, #14110c) !important;
  background: var(--site-gold) !important;
  border-color: transparent !important;
  font-weight: 650;
}
:where(.btn-primary, .primary-btn, .submit-btn, button[type="submit"], input[type="submit"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 22px color-mix(in srgb,var(--site-gold) 25%,transparent) !important;
}
:where(.btn-secondary, .btn-outline, .ghost-btn) {
  color: var(--site-gold) !important;
  background: var(--xh-accent-soft, rgba(201,169,110,.055)) !important;
  border-color: var(--xh-line-strong, rgba(201,169,110,.25)) !important;
}

table { width: 100%; border-color: var(--site-line) !important; }
:where(th):not(.mingshu-result th) { color: var(--site-gold) !important; background: var(--xh-accent-soft, rgba(201,169,110,.07)) !important; }
td, th { border-color: var(--site-line) !important; }
tr:nth-child(even) td { background: color-mix(in srgb, var(--xh-surface-2) 55%, transparent); }
.mingshu-result tr:nth-child(even) td { background: transparent; }
hr, .divider, .separator { border-color: var(--site-line) !important; }
.muted, .subtitle, .description, .help-text, .hint, .meta { color: var(--site-muted) !important; }
.badge, .tag, .pill { color: var(--site-gold) !important; border-color: var(--site-line) !important; background: var(--xh-accent-soft, rgba(201,169,110,.08)) !important; }

footer:not(.ix-footer), .site-footer, .museum-footer {
  color: var(--site-muted) !important;
  background: var(--xh-bg-deep, rgba(10, 9, 8, .94)) !important;
  border-color: var(--site-line) !important;
}

img, svg, canvas, video { max-width: 100%; }
.table-wrap, .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  :where(.cards-grid, .tool-grid, .feature-grid, .result-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  :where(.sidebar, aside) { max-width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  :where(main, .main, .page, .page-shell, .content, .container):not(.dv-page):not(.hc-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  :where(.cards-grid, .tool-grid, .feature-grid, .result-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :where(.card, .panel, .box, .module, .tool-card, .feature-card, .result-card,
    .form-card, .content-card, .info-card, .museum-card, .section-card, fieldset) {
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 13px !important;
  }
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, button, .btn) {
    min-height: 44px;
  }
  :where(.actions, .button-row, .btn-group, .form-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  :where(.actions, .button-row, .form-actions) > :where(button, .btn, a) { flex: 1 1 140px; }
  h1, .page-title, .hero-title { font-size: clamp(1.65rem, 8vw, 2.35rem) !important; }
  h2, .section-title { font-size: clamp(1.25rem, 6vw, 1.8rem) !important; }
  table { min-width: 560px; }
  footer:not(.ix-footer), .site-footer, .museum-footer { padding-left: 14px !important; padding-right: 14px !important; }
}

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