:root {
  --bg: #f2f4f6;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --text: #18212b;
  --muted: #647180;
  --line: #dce2e8;
  --primary: #b42318;
  --primary-dark: #8f1c13;
  --primary-soft: #fef0ee;
  --orange: #e88a12;
  --orange-soft: #fff4e2;
  --blue: #2563eb;
  --green: #16845b;
  --purple: #7554a6;
  --shadow: 0 8px 24px rgba(28, 39, 52, .07);
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.42;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-header {
  color: var(--text);
  background: #fff;
  border-top: 5px solid var(--primary);
  border-bottom: 1px solid #e4e8ec;
  padding: 10px 22px 12px;
}
.header-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.brand-logo {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  object-position: left center;
}
.header-copy { min-width: 0; }
.eyebrow, .section-kicker {
  margin: 0 0 3px;
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.app-header .eyebrow { color: var(--primary); }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.15; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
.header-actions { display: flex; gap: 8px; }

.button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 760;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(180, 35, 24, .2); }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { color: var(--primary); border-color: #e0b6b2; background: var(--primary-soft); }

.page-shell { width: min(1320px, calc(100% - 24px)); margin: 14px auto 28px; }
.card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid rgba(25, 35, 45, .08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.project-card, .calculation-card, .area-card, .chart-card, .guidelines-card, .signature-card { padding: 16px 18px; }
.project-card { margin-bottom: 12px; }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.section-heading h2, .result-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.section-kicker { color: var(--primary); }
.required-note { color: var(--muted); font-size: .78rem; }
.save-status, .calculation-state {
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .72rem;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.save-status.is-saved { color: var(--green); background: #eaf8f1; }
.calculation-state.is-automatic { color: var(--green); background: #eaf8f1; border-color: #c9eadb; }

.form-grid { display: grid; gap: 11px 13px; }
.project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.geometry-grid, .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.signature-grid { grid-template-columns: 1.15fr 1fr .65fr 1fr; align-items: end; }
.span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: .8rem; font-weight: 760; color: #344151; }
.field strong { color: var(--primary); }
.field small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
input, select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--text);
  border: 1px solid #cfd7df;
  border-radius: 9px;
  outline: none;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #647180 50%),
    linear-gradient(135deg, #647180 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  font-weight: 730;
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
input.is-calculated, input[readonly] { color: #156044; background: #effaf5; border-color: #b9ddcd; }
.input-with-unit, .select-with-unit { position: relative; }
.input-with-unit input { padding-right: 68px; font-weight: 730; }
.input-with-unit span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  pointer-events: none;
}
.area-formula {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 8px 11px;
  border: 1px solid #e5e9ee;
  border-radius: 9px;
  background: var(--surface-soft);
  font-size: .78rem;
}
.area-formula span { color: var(--muted); }
.area-formula strong { text-align: right; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(330px, .72fr); gap: 12px; }
.main-column { display: grid; gap: 12px; min-width: 0; }
.result-column { display: grid; gap: 12px; align-content: start; }
.validation-summary {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #f1aca5;
  border-radius: 9px;
  color: #8a1c14;
  background: #fff1ef;
  font-size: .83rem;
}
.validation-summary ul { margin: 4px 0 0; padding-left: 18px; }

.result-card { padding: 16px; }
.result-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.result-label { color: var(--muted); font-size: .7rem; font-weight: 780; text-transform: uppercase; letter-spacing: .08em; }
.sector-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 850;
}
.sector-result[data-sector="A"] { border-top: 4px solid var(--blue); }
.sector-result[data-sector="B"] { border-top: 4px solid var(--orange); }
.sector-result[data-sector="C"] { border-top: 4px solid var(--purple); }
.sector-result[data-sector="invalid"] { border-top: 4px solid #8793a0; }
.sector-result[data-sector="A"] .sector-badge { color: #1747a6; background: #eaf1ff; }
.sector-result[data-sector="B"] .sector-badge { color: #8b4c00; background: var(--orange-soft); }
.sector-result[data-sector="C"] .sector-badge { color: #583c7e; background: #f1ebfb; }
.sector-result[data-sector="invalid"] .sector-badge { color: #4e5965; background: #eef1f4; }
.result-card > p:not(.section-kicker):not(.template-note):not(.percent-source) { margin: 8px 0 0; color: #374454; font-size: .86rem; }
.metric-row, .result-list > div { display: flex; justify-content: space-between; gap: 14px; }
.metric-row { margin-top: 11px; padding: 8px 10px; border-radius: 8px; background: var(--orange-soft); }
.metric-row span { color: #7e5a28; font-size: .8rem; }
.percent-source { margin: 5px 0 0; color: var(--muted); font-size: .7rem; }
.is-muted { opacity: .68; }
.distance-value {
  margin-top: 11px;
  padding: 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #223247, #43546b);
  border-radius: 9px;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 850;
  letter-spacing: -.02em;
}
.result-list { margin: 10px 0 0; }
.result-list > div { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.result-list dt { color: var(--muted); }
.result-list dd { margin: 0; font-weight: 750; }
.template-note, .fine-print { color: #7a541a; background: #fff8e8; border-radius: 8px; padding: 8px 10px; font-size: .72rem; }

.chart-heading { align-items: center; }
.chart-value { padding: 5px 9px; color: var(--muted); background: var(--surface-soft); border-radius: 999px; font-size: .75rem; font-weight: 700; }
.chart-wrap { width: 100%; overflow-x: auto; }
.sector-chart { display: block; width: 100%; min-width: 590px; height: auto; }
.chart-background { fill: #fbfcfd; }
.chart-border { fill: none; stroke: #c9d1da; stroke-width: 1; }
.grid-line { stroke: #e5e9ee; stroke-width: 1; }
.x-axis-ticks { fill: none; stroke: #8793a0; stroke-width: 1; shape-rendering: crispEdges; }
.axis-label { fill: #667482; font-size: 12px; }
.axis-title { fill: #465361; font-size: 13px; font-weight: 700; }
.boundary-line { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.boundary-ab { stroke: var(--blue); }
.boundary-bc { stroke: #e1261c; }
.current-point-halo { fill: rgba(24,33,43,.16); }
.current-point { stroke: #fff; stroke-width: 2; }
.current-point.sector-a { fill: var(--blue); }
.current-point.sector-b { fill: var(--orange); }
.current-point.sector-c { fill: var(--purple); }
.current-point.sector-invalid { fill: #7e8995; }
.area-label {
  font-size: 20px;
  font-weight: 850;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(255,255,255,.94);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.area-label-a { fill: #1747a6; }
.area-label-b { fill: #a45b00; }
.area-label-c { fill: #5e4088; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; color: var(--muted); font-size: .72rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { display: inline-block; width: 19px; height: 3px; border-radius: 3px; }
.legend-line.blue { background: var(--blue); }
.legend-line.red { background: #e1261c; }
.legend-point { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(24,33,43,.12); }
.chart-footnote { margin: 6px 0 0; color: var(--muted); font-size: .7rem; }

.guidelines-card, .signature-card { margin-top: 12px; }
details:not([open]) > .guidelines-content { display: none; }
details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary strong { display: block; font-size: 1rem; }
.details-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: 1.15rem; font-weight: 500; }
.guidelines-content { min-width: 0; display: grid; gap: 20px; padding-top: 18px; }
.guideline-block { min-width: 0; }
.guideline-block h3 { margin: 0 0 9px; font-size: .98rem; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.rules-grid article { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.rules-grid p { margin: 0; color: #405061; font-size: .8rem; }
.mini-badge { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #fff; font-weight: 850; }
.area-a { background: var(--blue); }
.area-b { background: var(--orange); }
.area-c { background: var(--purple); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { padding: 9px 10px; text-align: left; vertical-align: top; border: 1px solid var(--line); }
th { color: #fff; background: #354558; font-size: .76rem; }
td { color: #394756; background: #fff; font-size: .78rem; }
tbody tr:nth-child(even) td { background: #f8fafc; }

.signature-line span { display: block; margin-bottom: 9px; color: #344151; font-size: .8rem; font-weight: 750; }
.signature-line div { height: 38px; border-bottom: 1px solid #5e6872; }
.app-footer { padding: 0 20px 24px; text-align: center; color: var(--muted); font-size: .72rem; }
.notice.error { margin-bottom: 12px; padding: 11px; color: #8a1c14; background: #fff1ef; border: 1px solid #f1aca5; border-radius: 9px; }

@media (max-width: 1050px) {
  .header-inner { grid-template-columns: 180px 1fr; }
  .brand-logo { width: 180px; }
  .header-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .main-grid { grid-template-columns: 1fr; }
  .result-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geometry-grid, .area-grid { grid-template-columns: 1fr; }
  .result-column { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: 1fr; }
  .signature-grid { grid-template-columns: 1fr 1fr; }
  .signature-line { grid-column: auto; }
}
@media (max-width: 600px) {
  .app-header { padding: 8px 12px 10px; }
  .header-inner { grid-template-columns: 125px minmax(0, 1fr); gap: 10px; }
  .brand-logo { width: 125px; }
  .eyebrow, .subtitle { display: none; }
  h1 { font-size: 1.08rem; }
  .header-actions { justify-content: stretch; }
  .header-actions .button { flex: 1; }
  .page-shell { width: min(100% - 14px, 1320px); margin-top: 8px; }
  .project-card, .calculation-card, .area-card, .chart-card, .guidelines-card, .signature-card, .result-card { padding: 13px; }
  .project-grid, .signature-grid { grid-template-columns: 1fr; }
  .span-2, .signature-line { grid-column: auto; }
  .section-heading { gap: 8px; }
  .calculation-state { white-space: normal; text-align: right; }
  .area-formula { flex-direction: column; gap: 3px; }
  .area-formula strong { text-align: left; }
  .chart-heading { align-items: flex-start; }
}

@media print {
  @page { size: A4 landscape; margin: 4mm; }
  :root { --shadow: none; --radius: 5px; }
  html, body { width: 100%; min-height: 0; }
  body { background: #fff; font-size: 6.7pt; line-height: 1.12; }
  .app-header {
    padding: 0 0 1.3mm;
    border-top: 0;
    border-bottom: 1px solid #777;
  }
  .header-inner {
    width: 100%;
    grid-template-columns: 30mm 1fr;
    gap: 2.5mm;
  }
  .brand-logo { width: 30mm; max-height: 10.5mm; }
  h1 { font-size: 12.5pt; }
  .subtitle { margin-top: .5mm; font-size: 6.3pt; }
  .eyebrow { margin-bottom: .3mm; font-size: 5.4pt; }
  .no-print, .app-footer { display: none !important; }
  .page-shell { width: 100%; margin: 1.5mm 0 0; }
  .card {
    box-shadow: none;
    break-inside: avoid;
    border-color: #999;
  }
  .project-card { margin-bottom: 1.3mm; }
  .project-card, .calculation-card, .area-card, .chart-card, .signature-card, .result-card {
    padding: 1.5mm 2mm;
  }
  .section-heading { margin-bottom: .9mm; }
  .section-heading h2, .result-card h2 { font-size: 7.8pt; }
  .section-kicker { margin-bottom: .25mm; font-size: 5pt; }
  .required-note { font-size: 5.5pt; }
  .form-grid { gap: .8mm 1.4mm; }
  .project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .geometry-grid, .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field { gap: .35mm; }
  .field > span { font-size: 5.8pt; }
  .field small, .chart-footnote { display: none !important; }
  input, select {
    min-height: 17px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 6.6pt;
  }
  select { background-position: calc(100% - 12px) 7px, calc(100% - 8px) 7px; }
  .input-with-unit span { right: 4px; font-size: 5.5pt; }
  .input-with-unit input { padding-right: 38px; }
  .main-grid {
    /* Mehr Platz für das Diagramm; die Ergebnis-Spalte bleibt kompakt. */
    grid-template-columns: minmax(0, 1fr) 64mm;
    gap: 1.3mm;
    break-inside: avoid;
  }
  .main-column, .result-column { gap: 1.3mm; }
  .result-column { display: grid; grid-template-columns: 1fr; align-content: start; }
  .result-column .result-card { padding: 1.2mm 1.6mm; }
  .result-column .result-card h2 { font-size: 7pt; line-height: 1.08; }
  .result-column .section-kicker,
  .result-column .result-label { font-size: 4.7pt; }
  .result-card > p:not(.section-kicker):not(.percent-source) {
    margin-top: .7mm;
    font-size: 5.25pt;
    line-height: 1.06;
  }
  .result-topline { margin-bottom: .55mm; }
  .sector-badge { min-height: 14px; padding: .7px 3.5px; font-size: 5pt; }
  .metric-row { margin-top: .7mm; padding: .8mm; }
  .metric-row span, .percent-source { font-size: 4.9pt; }
  .percent-source { margin-top: .35mm; line-height: 1.05; }
  .distance-value { margin-top: .7mm; padding: 1.2mm; border-radius: 3px; font-size: 9pt; }
  .result-list { margin-top: .55mm; }
  .result-list > div { padding: .5mm 0; font-size: 5.2pt; }
  .area-formula { margin-top: .8mm; padding: .8mm 1.2mm; border-radius: 3px; font-size: 5.5pt; }
  .calculation-state { padding: .7mm 1.2mm; font-size: 5pt; }
  .chart-card { min-height: 0; }
  .chart-heading { margin-bottom: .4mm; }
  .chart-value { padding: .7mm 1.2mm; font-size: 5.2pt; }
  .chart-wrap { overflow: hidden; }
  .sector-chart { min-width: 0; width: 100%; height: 78mm; max-height: 78mm; }
  .chart-legend { display: none; }
  .axis-label { font-size: 9px; }
  .axis-title { font-size: 10px; }
  .area-label { font-size: 15px; stroke-width: 3.5px; }
  .signature-card { margin-top: 1.3mm; }
  .signature-grid { grid-template-columns: 1.15fr 1fr .65fr 1fr; }
  .signature-line span { margin-bottom: .5mm; font-size: 5.8pt; }
  .signature-line div { height: 15px; }
  .validation-summary { margin-top: .8mm; padding: 1mm; font-size: 5.5pt; }
}

/* Seitennavigation */
.app-nav {
  width: min(1320px, 100%);
  margin: 9px auto -3px;
  border-top: 1px solid #edf0f3;
  padding-top: 8px;
}
.app-nav-inner { display: flex; gap: 7px; }
.app-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  color: #536171;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 780;
  text-decoration: none;
}
.app-nav a:hover { color: var(--primary); background: var(--primary-soft); }
.app-nav a.active { color: #fff; background: var(--primary); box-shadow: 0 3px 10px rgba(180, 35, 24, .18); }

/* Seite Anordnung BM */
.bm-main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr); gap: 12px; }
.bm-main-column { display: grid; gap: 12px; min-width: 0; }
.bm-result-column { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bm-input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-manual-card, .bm-plan-card, .bm-note-card { padding: 16px 18px; }
.bm-manual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(190px, .85fr); align-items: end; }
.text-button {
  padding: 3px 0;
  color: var(--primary);
  border: 0;
  background: transparent;
  font-size: .74rem;
  font-weight: 760;
}
.text-button:hover { text-decoration: underline; }
.manual-state {
  min-height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #d5e8df;
  border-radius: 9px;
  color: #166044;
  background: #effaf5;
}
.manual-state span { color: var(--muted); font-size: .7rem; }
.manual-state strong { font-size: .84rem; }
.manual-state.is-manual { color: #8b4c00; border-color: #f0d2a6; background: var(--orange-soft); }
.bm-plan-wrap { width: 100%; overflow: hidden; }
.bm-plan { display: block; width: 100%; height: auto; min-height: 330px; }
.bm-room { fill: #fbfcfd; stroke: #354558; stroke-width: 2.4; }
.bm-room-invalid { fill: #fff4f2; stroke: #b42318; }
.bm-room-empty { fill: #f8fafc; stroke: #ccd4dc; stroke-width: 1.5; stroke-dasharray: 8 6; }
.bm-empty-text { fill: #7b8794; font-size: 17px; font-weight: 700; }
.bm-grid-line { stroke: #cfd7df; stroke-width: 1; stroke-dasharray: 4 4; }
.bm-detector { fill: #e1261c; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 1px 1px rgba(24, 33, 43, .3)); }
.bm-detector-number { fill: #fff; font-size: 7px; font-weight: 850; pointer-events: none; }
.dimension-line { stroke: #566473; stroke-width: 1.25; }
.dimension-arrow { fill: #566473; }
.dimension-text { fill: #43505e; font-size: 13px; font-weight: 750; }
.bm-plan-caption { fill: #536171; font-size: 12px; font-weight: 680; }
.bm-plan-note { fill: #7b8794; font-size: 10px; }
.bm-plan-legend { display: flex; gap: 15px; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.bm-plan-legend span { display: inline-flex; align-items: center; gap: 6px; }
.detector-symbol { width: 10px; height: 10px; border-radius: 50%; background: #e1261c; box-shadow: 0 0 0 2px #f7cac6; }
.cell-symbol { width: 18px; height: 11px; border: 1px dashed #9ba7b3; background: #fbfcfd; }
.bm-status-card { border-top: 4px solid var(--green); }
.bm-status-card[data-status="not-ok"] { border-top-color: var(--primary); }
.bm-status-card[data-status="invalid"] { border-top-color: #8793a0; }
.bm-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #156044;
  background: #eaf8f1;
  font-size: .73rem;
  font-weight: 850;
}
.bm-status-card[data-status="not-ok"] .bm-status-badge { color: #8a1c14; background: #fff1ef; }
.bm-status-card[data-status="invalid"] .bm-status-badge { color: #4e5965; background: #eef1f4; }
.bm-count-block {
  display: grid;
  place-items: center;
  margin-top: 9px;
  padding: 12px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #223247, #43546b);
}
.bm-count-block strong { font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1; }
.bm-count-block span { margin-top: 5px; font-size: .72rem; opacity: .9; }
.bm-result-list > div { align-items: baseline; }
.bm-result-list .emphasis { margin: 3px -7px; padding: 7px; border: 0; border-radius: 7px; background: #edf7e4; }
.bm-result-list .emphasis dt, .bm-result-list .emphasis dd { color: #315e1c; font-weight: 820; }
.bm-note-card { margin-top: 12px; }
.bm-note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bm-note-grid > div { padding: 10px 12px; border-radius: 9px; background: #fff8e8; }
.bm-note-grid strong { color: #7a541a; }
.bm-note-grid p { margin: 4px 0 0; color: #5d5141; font-size: .78rem; }

@media (max-width: 1050px) {
  .bm-main-grid { grid-template-columns: 1fr; }
  .bm-result-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .bm-input-grid, .bm-manual-grid { grid-template-columns: 1fr; }
  .bm-result-column { grid-template-columns: 1fr; }
  .bm-note-grid { grid-template-columns: 1fr; }
  .bm-plan { min-width: 620px; }
  .bm-plan-wrap { overflow-x: auto; }
}

@media (max-width: 600px) {
  .app-nav { margin-top: 6px; padding-top: 6px; }
  .app-nav-inner { display: grid; grid-template-columns: 1fr 1fr; }
  .app-nav a { justify-content: center; }
  .bm-manual-card, .bm-plan-card, .bm-note-card { padding: 13px; }
}

@media print {
  .page-bm { font-size: 6.4pt; line-height: 1.08; }
  .page-bm .project-card { margin-bottom: 1.1mm; }
  .page-bm .bm-main-grid {
    grid-template-columns: minmax(0, 1fr) 69mm;
    gap: 1.2mm;
    break-inside: avoid;
  }
  .page-bm .bm-main-column, .page-bm .bm-result-column { gap: 1.1mm; }
  .page-bm .bm-result-column { display: grid; grid-template-columns: 1fr; align-content: start; }
  .page-bm .bm-manual-card, .page-bm .bm-plan-card, .page-bm .result-card { padding: 1.2mm 1.6mm; }
  .page-bm .bm-input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-bm .bm-manual-grid { grid-template-columns: 1fr 1fr .9fr; gap: .7mm 1mm; }
  .page-bm .manual-state { min-height: 17px; padding: .7mm 1mm; border-radius: 3px; }
  .page-bm .manual-state span { display: none; }
  .page-bm .manual-state strong { font-size: 5.4pt; }
  .page-bm .bm-plan-card .section-heading { margin-bottom: .3mm; }
  .page-bm .bm-plan { min-width: 0; min-height: 0; width: 100%; height: 86mm; max-height: 86mm; }
  .page-bm .bm-plan-legend { display: none; }
  .page-bm .dimension-text { font-size: 10px; }
  .page-bm .bm-plan-caption { font-size: 9px; }
  .page-bm .bm-detector-number { font-size: 6px; }
  .page-bm .bm-status-card h2 { font-size: 6.9pt; }
  .page-bm .bm-status-badge { min-height: 14px; padding: .7px 3.5px; font-size: 5pt; }
  .page-bm .bm-count-block { margin-top: .7mm; padding: 1.1mm; border-radius: 3px; }
  .page-bm .bm-count-block strong { font-size: 12pt; }
  .page-bm .bm-count-block span { margin-top: .3mm; font-size: 4.9pt; }
  .page-bm .bm-result-list { margin-top: .5mm; }
  .page-bm .bm-result-list > div { padding: .45mm 0; font-size: 5.1pt; }
  .page-bm .bm-result-list .emphasis { margin: .3mm -.5mm; padding: .6mm; }
  .page-bm .bm-note-card { display: none !important; }
  .page-bm .signature-card { margin-top: 1.1mm; }
}