/* Interactive furniture plan — Modern Modular A.05 shell, drag/rotate the purchases. */
.planwrap { background: #fff; border-bottom: 2px solid var(--brand); padding: 0 22px 16px; }
.planwrap[hidden] { display: none; }
.plantop { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 12px 0 10px; }
.plantop h2 { margin: 0; font-size: 15px; font-weight: 700; }
.plantop .sub { font-size: 12px; color: #667; max-width: 640px; }
.plantop .grow { flex: 1 1 auto; }
.plantop button { background: #fff; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 8px; padding: 7px 13px; font-size: 13px; cursor: pointer; }
.plantop button:hover { background: var(--brand); color: #fff; }
.plantop .psync { font-size: 12px; background: #EFF3EB; border-radius: 8px; padding: 6px 11px; }

.planbody { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.plancanvas { flex: 1 1 640px; min-width: 320px; background: #FAFBF8;
  border: 1px solid #DDE3D8; border-radius: 10px; padding: 10px; }
.plancanvas svg { width: 100%; height: auto; display: block; touch-action: none; }

.planside { flex: 0 1 330px; min-width: 250px; font-size: 13px; }
.planside h3 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: #667; }
.planside h3:first-child { margin-top: 0; }
.planside .sel { background: #EFF3EB; border-radius: 10px; padding: 10px 12px; }
.planside .sel b { display: block; font-size: 14px; margin-bottom: 3px; }
.planside .sel .dim { color: #556; font-size: 12px; }
.planside .hint { color: #667; font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.planside .hint kbd { background: #fff; border: 1px solid #CCD4C4; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; }
.roomstat { width: 100%; border-collapse: collapse; font-size: 12px; }
.roomstat td { border: 1px solid #E6EBE0; padding: 4px 7px; }
.roomstat td.num { text-align: right; white-space: nowrap; }
.roomstat tr.tight td.num { color: var(--red); font-weight: 700; }
.planwarn { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.planwarn .err { color: var(--red); }
.planwarn .amb { color: #9A6B00; margin-top: 4px; }

/* --- SVG --- */
.rm { fill: #fff; stroke: none; }
.rm.wet { fill: #EDF4F6; }
.rm.biz { fill: #F4F7F0; }
.rm.home { fill: #FDFBF6; }
.wall line, .wall rect { stroke: #1E2A1A; stroke-linecap: butt; }
.opening .gap { fill: #fff; }
.opening .win { fill: #DCEBF2; stroke: #4B7C8C; stroke-width: 12; }
.opening .arc { fill: none; stroke: #B9C2B2; stroke-width: 14; stroke-dasharray: 60 45; }
.opening .leaf { stroke: #7B8874; stroke-width: 26; }
.opening .slide { stroke: #7B8874; stroke-width: 26; stroke-dasharray: 90 60; }
.lbls { pointer-events: none; }
.rmlbl { font-size: 150px; fill: #6E7A66; font-weight: 700; letter-spacing: 6px;
  paint-order: stroke; stroke: #fff; stroke-width: 34px; }
.rmsub { font-size: 118px; fill: #94A08C; paint-order: stroke; stroke: #fff; stroke-width: 30px; }
.rmtiny { font-size: 100px; fill: #94A08C; letter-spacing: 3px; paint-order: stroke;
  stroke: #fff; stroke-width: 26px; }
.pc { cursor: grab; }
.pc rect { fill: #C9DAB6; fill-opacity: .93; stroke: #4C6B35; stroke-width: 16; }
.pc.wet rect { fill: #BFD8E0; stroke: #35606B; }
.pc.big rect { fill: #E4CBA0; stroke: #8A6A2F; }
.pc.warn rect { fill: #F6E2B6; stroke: #B4881F; stroke-width: 26; }
.pc.bad rect { fill: #F3C9C3; stroke: #C0392B; stroke-width: 30; }
.pc.selected rect { stroke: #1E2A1A; stroke-width: 34; }
.pc text { font-size: 96px; fill: #2B3826; pointer-events: none; }
.dimline { stroke: #A9B2A2; stroke-width: 8; }
.dimtxt { font-size: 130px; fill: #7A8570; }
@media print { .planwrap { break-inside: avoid; } .planside { display: none; } }