@scope (.calculator-page) {
/* Result card: a quiet specification sheet with a dimensioned sketch. */
.result { padding: 28px 30px; background: #f7f9f7; color: #243d36; border-top: 1px solid #dce5df; }
.result-top { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.result .step-label { color: #657a6f; letter-spacing: .12em; font-size: .65rem; }
.result .status { border: 1px solid #d3e3d8; background: #eaf2ec; color: #386049; font-size: .66rem; font-weight: 600; padding: 5px 10px; }
.result-number { display: grid; grid-template-columns: max-content 1fr; column-gap: 9px; row-gap: 4px; margin-top: 24px; align-items: baseline; }
.result-number strong { font-family: var(--sans); font-size: 3.5rem; font-weight: 600; letter-spacing: -.05em; line-height: 1.05; color: #164e43; }
.result-number > span { color: #637c6e; font-size: 1.05rem; font-weight: 500; }
.result-number em { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: #63716a; }
.result-meta { gap: 0; margin: 22px 0 0; padding: 16px 0; border-top: 1px solid #dce5df; border-bottom: 1px solid #dce5df; grid-template-columns: repeat(3,minmax(0,1fr)); }
.result-meta div { padding: 0 12px; border: 0; border-left: 1px solid #dce5df; background: transparent; border-radius: 0; }
.result-meta div:first-child { padding-left: 0; border-left: 0; }
.result-meta span { color: #708077; font-size: .66rem; line-height: 1.5; margin-bottom: 5px; }
.result-meta strong { color: #2e4b3f; font-weight: 600; font-size: .88rem; }
.result .visual { padding: 18px 20px 12px; margin-top: 22px; border: 1px solid #e0e6e0; border-radius: 14px; background-color: #fff; background-image: linear-gradient(#edf1ed 1px,transparent 1px),linear-gradient(90deg,#edf1ed 1px,transparent 1px); background-size: 20px 20px; }
.preview-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: #476054; font-size: .68rem; }
.preview-heading span:first-child { font-weight: 700; }
.preview-heading span:last-child { color: #77847b; }
.dimension-line { display: flex; align-items: center; gap: 8px; margin: 22px auto 9px; width: 90%; color: #657e70; font-size: .65rem; }
.dimension-line::before,.dimension-line::after { content: ''; flex: 1; height: 5px; border-top: 1px solid #a0b6a8; }
.dimension-line::before { border-left: 1px solid #a0b6a8; }
.dimension-line::after { border-right: 1px solid #a0b6a8; }
.result .wall-line { height: 125px; align-items: center; padding-bottom: 14px; }
.result .mirror-shape { height: 100px; border: 2px solid #66887b; background: linear-gradient(135deg,#f1f7f5,#dceae5 55%,#f5faf8); box-shadow: 0 3px 7px #294e3d12; position: relative; flex-shrink: 0; }
.result .mirror-shape::after { content: ''; position: absolute; inset: 5px; border: 1px solid #fff9; border-radius: inherit; }
.result .mirror-shape.round { height: auto; max-height: none; max-width: 100px; aspect-ratio: 1; }
.result .vanity-shape { height: 43px; background: #e6e1d7; border: 1px solid #c7c0b2; border-top: 5px solid #d3ccbd; border-radius: 2px; box-shadow: none; }
.result .vanity-shape::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; border-left: 1px solid #c7c0b2; }
.result .vanity-shape i { border-color: #8a9c92; background: #fafbf9; width: 24%; height: 9px; }
.vanity-dimension { margin-top: 12px; width: 100%; }
.preview-caption { margin: 12px 0 0; text-align: center; color: #7c8980; font-size: .6rem; line-height: 1.5; }
.result .notice { margin: 18px 0; padding: 0 0 0 12px; border-left: 2px solid #bda581; background: transparent; }
.result .notice strong { color: #56684d; font-weight: 600; font-size: .73rem; }
.result .notice p { color: #6b766d; font-size: .7rem; line-height: 1.65; }
.result .copy { width: 100%; padding: 12px 16px; margin-top: 0; border: 1px solid #244f40; border-radius: 9px; background: #244f40; color: #fff; font-size: .76rem; font-weight: 600; }
.result .copy:hover { background: #173d30; }
.result .copy:focus-visible { outline: 3px solid #b5cbbd; outline-offset: 3px; }
.result .disclaimer { color: #7f8a81; text-align: center; font-size: .6rem; margin-top: 12px; }
@media(max-width:420px) {
  .result { padding: 22px 18px; }
  .result-number strong { font-size: 3rem; }
  .result-meta div { padding: 0 7px; }
  .result-meta span { font-size: .6rem; }
  .result-meta strong { font-size: .74rem; }
  .result .visual { padding: 14px 12px 10px; }
}

}