.ceiling-layout-intro { max-width: 820px; }
.ceiling-layout-grid {
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: start;
}
.ceiling-layout-controls { padding-top: 8px; padding-bottom: 8px; }
.layout-reset { padding: 8px 11px; }
.layout-helper {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
  margin: 10px 0 0;
}
.dimension-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dimension-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.dimension-group legend {
  grid-column: 1 / -1;
  padding: 0 5px;
  font-size: .86rem;
  font-weight: 820;
}
.dimension-group legend span { color: var(--muted); font-size: .72rem; font-weight: 700; margin-left: 3px; }
.dimension-group .field-label { font-size: .72rem; }
.dimension-group .input-with-unit { gap: 4px; padding: 0 7px; border-radius: 11px; }
.dimension-group .input-with-unit input { padding: 11px 0; font-size: .92rem; }
.layout-choice-grid { margin-bottom: 0; }
.layout-subcontrol { margin-top: 15px; }
.layout-centering { margin: 8px 0 0; }
.layout-centering-intro { margin-bottom: 14px; }
.axis-centering-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.axis-centering-group {
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.axis-centering-group legend {
  padding: 0 5px;
  font-size: .84rem;
  font-weight: 820;
}
.axis-centering-group legend span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  margin-top: 2px;
}
.axis-centering-group .segmented span { padding-left: 8px; padding-right: 8px; font-size: .82rem; }
.layout-details {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.layout-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
}
.layout-details summary::-webkit-details-marker { display: none; }
.layout-details summary strong { display: block; font-size: .95rem; }
.layout-details summary em { color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 700; }
.layout-details summary small { display: block; color: var(--muted); font-size: .75rem; font-weight: 650; margin-top: 4px; line-height: 1.4; }
.layout-details[open] .pdf-details-chevron { transform: rotate(45deg); }
.layout-details-body { padding: 0 0 22px; }
.layout-pref-label { margin-top: 15px; }
.layout-preference-note { margin-bottom: 0; }

.layout-preview-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 90px;
}
.layout-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.layout-preview-head h2 { margin-bottom: 0; font-size: 1.35rem; }
.layout-warning {
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #e4b865;
  background: #fff5d8;
  font-size: .84rem;
  line-height: 1.45;
}
.layout-warning strong { font-weight: 850; }
.layout-canvas-wrap {
  margin-top: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcf9;
  overflow: hidden;
}
.layout-svg { width: 100%; height: auto; min-height: 360px; display: block; }
.layout-svg .plan-room { fill: #fff; stroke: #181a17; stroke-width: 3; vector-effect: non-scaling-stroke; }
.layout-svg .plan-main { stroke: #1c211a; stroke-width: 3; vector-effect: non-scaling-stroke; }
.layout-svg .plan-cross { stroke: #b7bcb2; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.layout-svg .plan-center { stroke: #bfd52c; stroke-width: 1.3; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.layout-svg .plan-dim { stroke: #6d716a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.layout-svg .plan-dim-text, .layout-svg .plan-wall-label, .layout-svg .plan-note {
  fill: #555b53;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.layout-svg .plan-dim-text { font-size: 16px; font-weight: 760; }
.layout-svg .plan-wall-label { font-size: 15px; font-weight: 850; letter-spacing: .08em; }
.layout-svg .plan-note { font-size: 14px; font-weight: 720; }
.layout-legend { display: flex; flex-wrap: wrap; gap: 13px 18px; margin-top: 12px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.layout-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { display: inline-block; width: 28px; height: 0; border-top: 1px solid #b7bcb2; }
.legend-main { border-top: 3px solid #1c211a; }
.legend-center { border-top: 2px dashed #bfd52c; }
.border-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.border-results div { padding: 11px 9px; border-radius: 12px; background: var(--bg); text-align: center; }
.border-results span { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.border-results strong { display: block; margin-top: 4px; font-size: .98rem; letter-spacing: -.02em; }
.border-results div.is-small { background: #fff5d8; outline: 1px solid #e4b865; }
.layout-summary { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; line-height: 1.55; }
.layout-summary strong { color: var(--text); }
.layout-disclaimer { color: var(--muted); font-size: .72rem; line-height: 1.5; margin: 15px 0 0; }
.ceiling-layout-related { margin-top: 22px; }

@media (max-width: 980px) {
  .ceiling-layout-grid { grid-template-columns: 1fr; }
  .layout-preview-panel { position: static; }
}

@media (max-width: 620px) {
  .ceiling-layout-page { padding-top: 36px; }
  .dimension-grid { grid-template-columns: 1fr; }
  .axis-centering-grid { grid-template-columns: 1fr; }
  .layout-preview-panel { padding: 15px; }
  .layout-svg { min-height: 300px; }
  .border-results { grid-template-columns: 1fr 1fr; }
  .layout-legend { gap: 10px 14px; }
}

@media (max-width: 420px) {
  .dimension-group { padding: 11px; }
  .layout-preview-head { align-items: flex-start; }
  .layout-preview-head .system-badge { padding: 6px 8px; font-size: .66rem; }
}