:root {
  --bg: #f3f6f5;
  --card: #ffffff;
  --card2: #eef3f3;
  --border: #d8e2e3;
  --gold: #176bb1;
  --gold2: #2f7fc2;
  --gold-dim: #7aa5c7;
  --golddim: #7aa5c7;
  --teal: #087d89;
  --teal-dim: #8bbbc0;
  --tealdim: #8bbbc0;
  --text: #18242c;
  --muted: #667680;
  --danger: #b43c43;
  --red: #b43c43;
  --orange: #b96d17;
  --success: #26755c;
  --green: #26755c;
  --radius: 6px;
  --r: 6px;
  --line: #d8e2e3;
  --brand: #176bb1;
}

html { background: #f3f6f5; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

header {
  height: 72px;
  padding: 0;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(24, 36, 44, .1);
  box-shadow: 0 1px 0 rgba(24, 36, 44, .03);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
}
.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: #18242c;
  color: white;
}
.logo span { color: #80909a; font-family: inherit; font-size: 11px; }
nav { display: flex; align-items: center; gap: 26px; }
nav a { margin: 0; color: #687780; font-size: 13px; font-weight: 560; }
nav a:hover, nav a.active { color: #176bb1; }
nav a.nav-contact {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 4px;
  background: #176bb1;
  color: white;
}

.page { width: min(1180px, calc(100% - 40px)); max-width: none; padding: 58px 0 96px; }
.hero { margin-bottom: 34px; }
.hero h1 {
  max-width: 900px;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: 0;
}
.hero h1 em { color: #176bb1; }
.hero p { max-width: 760px; color: #5f7079; font-size: 16px; line-height: 1.85; }
.hero-badge, .badge {
  background: #e6f1f5;
  border: 1px solid #c9dfe7;
  color: #17617f;
  border-radius: 999px;
  font-weight: 650;
}

.demo-panel, .panel, .card, .canvas-shell, .report-cta, .pro-lock {
  background: #fff;
  border: 1px solid #d8e2e3;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(31, 55, 63, .06);
}
.demo-panel { border-left: 4px solid #176bb1; }
.demo-panel h2, .panel h2, .card h2 { color: var(--text); }
.panel, .card { padding: 26px; }
.section-title, .card-title { color: #176bb1; letter-spacing: .06em; }
.card-title, .section-title { border-bottom-color: #e1e9ea; }

.steps-bar { background: #fff; border-color: #d8e2e3; border-radius: 6px; box-shadow: 0 8px 24px rgba(31,55,63,.04); }
.step-num.pending { background: #eef3f3; border-color: #d8e2e3; }
.step-num.current { color: #176bb1; border-color: #176bb1; background: #e9f2fa; }
.step-num.done { background: #176bb1; }
.step-label.done, .step-label.current { color: var(--text); }

input, select, textarea,
.input-group input, .input-group select, .dim-input, .project-input, .mat-input, .mat-select {
  background: #f7f9f9;
  border-color: #d4dfe0;
  color: var(--text);
  border-radius: 4px;
}
input:focus, select:focus, textarea:focus,
.input-group input:focus, .input-group select:focus, .dim-input:focus, .project-input:focus {
  border-color: #176bb1;
  box-shadow: 0 0 0 3px rgba(23,107,177,.1);
}

.scene-btn, .mode-btn, .secondary-btn, .btn-action, .btn-link, .link-strip a {
  background: #f6f8f8;
  border-color: #d8e2e3;
  color: #35454e;
  border-radius: 4px;
}
.scene-btn.active, .mode-btn.active {
  border-color: #176bb1;
  background: #ebf3fa;
  color: #176bb1;
}
.demo-btn, .primary-btn, .btn-report, .pro-btn {
  background: #176bb1;
  border: 1px solid #176bb1;
  border-radius: 4px;
  color: white;
  box-shadow: none;
}
.demo-btn.secondary { background: white; color: #176bb1; }

.vol-display, .summary-box, .decision-item.primary, .deng-box {
  background: #edf5fa;
  border-color: #cbdfe9;
}
.vol-value, .summary-value, .deng-title { color: #176bb1; font-family: inherit; }
.decision-item, .diagnosis-card, .report-item, .report-guide div, .priority-row, .analysis-card, .status-card {
  background: #f7f9f9;
  border-color: #dce5e6;
  color: var(--text);
}

.canvas-shell { padding: 18px; }
#roomCanvas, #rt60Canvas, #cmpCanvas { border-radius: 4px; }
.table-scroll, .mat-table-wrap, .gap-table-wrap { border: 1px solid #dde6e7; border-radius: 4px; }
table { background: white; color: var(--text); }
th { background: #eef3f3; color: #52636c; }
td, th { border-color: #e0e8e9 !important; }
.std-table th, .gap-table th, .construction-table th { background: #eef3f3; color: #52636c; }
.val-muted { color: #6d7c85; }
.val-gold { color: #176bb1; }

.report-cta { border-left: 4px solid #176bb1; }
.report-cta h3 { color: #176bb1; }
.dhx-contact-card { background: #f2f6f5 !important; border-color: #d2dfdd !important; }
.dhx-contact-card img { border: 8px solid white; box-shadow: 0 10px 28px rgba(31,55,63,.1); }

footer { background: #fff; border-top-color: #d8e2e3; color: #71808a; }
footer a { color: #176bb1; }

@media (max-width: 900px) {
  header { height: auto; }
  .nav-inner { width: min(100% - 28px, 1180px); min-height: 68px; padding: 10px 0; align-items: center; }
  nav { gap: 12px; overflow-x: auto; padding-bottom: 2px; }
  nav a { white-space: nowrap; font-size: 12px; }
  nav a.nav-contact { min-height: 34px; padding: 0 12px; }
  .page { width: min(100% - 28px, 1180px); padding-top: 38px; }
  .hero h1 { font-size: 40px; }
}

@media (max-width: 620px) {
  .nav-inner { display: block; }
  .logo { min-height: 40px; }
  nav { margin-top: 8px; }
  .hero h1 { font-size: 35px; }
  .hero p { font-size: 15px; }
  .panel, .card { padding: 18px; }
  .dhx-contact-card { grid-template-columns: 1fr !important; text-align: center !important; }
}