.planner-page {padding:40px 0 110px}
.planner-page [hidden] {display:none!important}
.planner-intro {max-width:760px;margin:0 0 28px}
.planner-intro .back-link {margin-bottom:18px}
.planner-intro h1 {font-size:clamp(42px,4.6vw,58px);font-weight:550;letter-spacing:-1.2px;margin-bottom:12px}
.planner-intro>p:last-child {font-size:17px;line-height:1.55;max-width:600px}
.planner-layout {display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:44px}
.planner-stage {position:sticky;top:22px;min-width:0}
.planner-stage-frame {position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;aspect-ratio:4/3;max-height:calc(100vh - 44px);background:#efe9df;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.planner-room-view,.planner-plan-view {position:relative;min-height:0;overflow:hidden}
.planner-canvas {position:absolute;inset:0;touch-action:none;cursor:grab}
.planner-canvas[data-dragging] {cursor:grabbing}
.planner-canvas canvas {display:block;width:100%;height:100%}
.planner-room-fallback {position:absolute;inset:0;display:grid;place-items:center;padding:24px;font-size:14px;text-align:center}
.planner-reset-view {position:absolute;top:12px;right:12px;padding:7px 12px;font-size:12.5px;background:#fffffff0;border:1px solid #cbd0c6;border-radius:20px}
.planner-plan-view {display:grid;place-items:center;background:#f5f2ec radial-gradient(#dcd7cb 1px,transparent 1.2px) 0 0/22px 22px}
.planner-drawing {display:grid;grid-template-columns:var(--plan-width,480px) 28px;grid-template-rows:28px var(--plan-height,240px);gap:10px 12px}
.planner-dimension {display:flex;align-items:center;gap:8px;color:#5c6358;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.planner-dimension::before,.planner-dimension::after {content:"";flex:1;background:#9aa091}
.planner-dimension-width {grid-area:1/1;height:14px;align-self:end;background:linear-gradient(#9aa091 0 0) left center/1px 100% no-repeat,linear-gradient(#9aa091 0 0) right center/1px 100% no-repeat}
.planner-dimension-width::before,.planner-dimension-width::after {height:1px}
.planner-dimension-depth {grid-area:2/2;flex-direction:column;width:14px;justify-self:start;background:linear-gradient(#9aa091 0 0) center top/100% 1px no-repeat,linear-gradient(#9aa091 0 0) center bottom/100% 1px no-repeat}
.planner-dimension-depth::before,.planner-dimension-depth::after {width:1px}
.planner-dimension-depth span {writing-mode:vertical-rl}
.planner-plan {grid-area:2/1;position:relative;width:var(--plan-width,480px);height:var(--plan-height,240px)}
.planner-slab-shadow {position:absolute;inset:0;filter:drop-shadow(0 14px 12px #4b382c2e) drop-shadow(0 2px 2px #4b382c33)}
.planner-slab {display:block;width:100%;height:100%;background:#6b4a33}
.planner-object {position:absolute;display:grid;place-items:center;padding:0;overflow:hidden;background:#dcddd8;border:1px solid #9c9f99;border-radius:3px;box-shadow:0 2px 4px #00000033;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.planner-object:active {cursor:grabbing}
.planner-object span {position:relative;z-index:1;padding:1px 6px;font-size:10px;line-height:1.4;color:#181b19;background:#fffffff0;border-radius:10px;pointer-events:none}
.planner-object[data-kind=display] {background:linear-gradient(#1d2321 0 30%,#d3d5d0 30%);border-color:#40443f}
.planner-object[data-kind=display]::before {content:"";position:absolute;left:32%;right:32%;top:36%;bottom:12%;background:#c2c5bf;border-radius:4px}
.planner-object[data-kind=laptop] {background:#d9dad6;border-color:#a6aaa3}
.planner-object[data-kind=laptop]::before {content:"";position:absolute;left:8%;right:8%;top:14%;bottom:36%;background:repeating-linear-gradient(0deg,#c4c7c1 0 2px,#e6e7e3 2px 6px)}
.planner-object[data-kind=laptop]::after {content:"";position:absolute;left:0;right:0;top:0;height:9%;background:#2a302e}
.planner-object[data-kind=keyboard] {background:repeating-linear-gradient(0deg,#c4c7c1 0 2px,#eceeea 2px 7px);border-color:#a6aaa3}
.planner-object[data-kind=pad] {background:#c4b7a2;border-color:#a89a83;border-radius:6px}
.planner-object[data-kind=computer] {background:linear-gradient(145deg,#e6e7e3,#c9ccc6);border-color:#a6aaa3;border-radius:6px}
.planner-object[data-kind=tower] {background:#2b2f2c repeating-linear-gradient(0deg,transparent 0 5px,#151816 5px 6px) center/60% 60% no-repeat;border-color:#141715}
.planner-object.is-selected {outline:2px solid var(--green);outline-offset:3px}
.planner-object.is-problem {outline:2px solid #b34f39;outline-offset:3px}
.planner-stage-bar {display:flex;align-items:center;gap:14px;padding:9px 12px;border-top:1px solid var(--line);background:#fffffff2}
.planner-views {display:flex;gap:2px;padding:3px;border:1px solid #cbd0c6;border-radius:3px;flex-shrink:0}
.planner-views button {padding:6px 12px;font-size:13px;border-radius:2px}
.planner-views button[aria-pressed=true] {background:#e9ece3;color:#243b2d}
.planner-views button:disabled {opacity:.4;cursor:default}
.planner-caption {flex:1;min-width:0;margin:0;font-size:13px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planner-caption-top::before {content:" · "}
.planner-share {flex-shrink:0;font-size:13px;text-decoration:underline;text-underline-offset:4px;padding:6px 0}
.planner-status {font-size:14px;line-height:1.5;min-height:21px;margin-top:12px}
.planner-input-status {font-size:13px;margin-top:8px;color:#8c382e}
.planner-page button:focus-visible,.planner-page input:focus-visible,.planner-page select:focus-visible {outline:3px solid #55724b;outline-offset:3px}
.planner-rail {min-width:0}
.planner-section {padding:26px 0 28px;border-top:1px solid var(--line)}
.planner-section:first-child,form>.planner-section:first-child {border-top:0;padding-top:0}
.planner-section h2 {font-size:31px;letter-spacing:-.5px;font-weight:550;line-height:1.1}
.planner-section>p {font-size:14px;line-height:1.5;color:var(--muted);margin:6px 0 0}
.planner-note {font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px}
.planner-note a {text-decoration:underline;text-underline-offset:3px}
.planner-dimension-control {margin-top:20px}
.planner-dimension-heading {display:flex;justify-content:space-between;align-items:center;gap:12px}
.planner-dimension-heading>label:first-child {font-size:15px;font-weight:600}
.planner-dimension-value {display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px}
.planner-dimension-value input {width:62px;min-height:36px;padding:4px 7px;border:1px solid #cbd0c3;border-radius:3px;background:#fff;text-align:right;font-size:17px;color:var(--green);font-variant-numeric:tabular-nums}
.planner-track {position:relative;padding:0 11px;margin-top:4px}
.planner-size-range {appearance:none;-webkit-appearance:none;display:block;width:100%;height:32px;margin:0;background:transparent;cursor:pointer}
.planner-size-range::-webkit-slider-runnable-track {height:4px;border-radius:2px;background:#c8cfc1}
.planner-size-range::-moz-range-track {height:4px;border-radius:2px;background:#c8cfc1}
.planner-size-range::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;background:#34523a;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #809178,0 2px 5px #22372226}
.planner-size-range::-moz-range-thumb {width:14px;height:14px;background:#34523a;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #809178}
.planner-size-ticks {position:absolute;left:11px;right:11px;top:22px;height:6px;pointer-events:none}
.planner-size-ticks i {position:absolute;width:1px;height:6px;background:#a6b09d}
.planner-size-chips,.planner-placed {display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.planner-size-chips button,.planner-chip {padding:5px 10px;font-size:12px;line-height:1.3;border:1px solid #cbd0c3;border-radius:20px;background:#fff;font-variant-numeric:tabular-nums}
.planner-size-chips button[aria-pressed=true],.planner-chip[aria-pressed=true] {background:var(--green);border-color:var(--green);color:#fff}
.planner-swatches {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.planner-swatch {position:relative;display:grid;align-content:start;gap:5px;cursor:pointer}
.planner-swatch input,.planner-option input {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.planner-swatch-chip {display:block;aspect-ratio:5/4;border-radius:4px;background:#7b4b30 center/cover;box-shadow:inset 0 0 0 1px #0000001f}
.planner-swatch-chip[data-wood=walnut] {background-image:url('/assets/textures/walnut.webp')}
.planner-swatch-chip[data-wood=saman] {background-image:url('/assets/textures/saman.webp')}
.planner-swatch-chip[data-wood=oak] {background-image:url('/assets/textures/oak.webp')}
.planner-swatch input:checked+.planner-swatch-chip {outline:2px solid var(--green);outline-offset:3px}
.planner-swatch input:focus-visible+.planner-swatch-chip {outline:3px solid #55724b;outline-offset:3px}
.planner-swatch strong {font-size:14px;font-weight:600;line-height:1.3;margin-top:4px}
.planner-swatch small {font-size:12px;line-height:1.4;color:var(--muted)}
.planner-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.planner-option {display:grid;justify-items:center;gap:7px;padding:12px 6px 11px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:12.5px;line-height:1.3;text-align:center;cursor:pointer;color:var(--ink)}
.planner-option svg {width:46px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.planner-option:has(input:checked) {border-color:var(--green);background:#f1f3ec;color:#243b2d;box-shadow:inset 0 0 0 1px var(--green)}
.planner-option:has(input:focus-visible) {outline:3px solid #55724b;outline-offset:3px}
.planner-thickness {display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;font-size:15px;font-weight:600}
.planner-stepper {display:flex;align-items:center;gap:6px;font-size:12px;font-weight:400;color:var(--muted)}
.planner-stepper button {width:34px;height:34px;border:1px solid #cbd0c3;border-radius:50%;font-size:18px;line-height:1;color:var(--green)}
.planner-stepper input {width:58px;min-height:36px;padding:4px 6px;border:1px solid #cbd0c3;border-radius:3px;background:#fff;text-align:center;font-size:16px;color:var(--green)}
.planner-tray {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.planner-tray-item {display:grid;justify-items:center;gap:5px;padding:10px 4px 9px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font-size:11.5px;line-height:1.25;text-align:center;transition:border-color .15s,transform .15s}
.planner-tray-item svg {width:44px;height:34px;fill:none;stroke:#3a4a3a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.planner-tray-item:hover {border-color:#819576}
.planner-tray-item:active {transform:translateY(1px)}
.planner-placed {margin-top:14px}
.planner-placed:empty {display:none}
.planner-selected {margin-top:12px;padding:12px 14px;background:#f5f6f1;border-radius:4px}
.planner-selected-name {font-size:13px;line-height:1.4;color:var(--muted)}
.planner-selected-name strong {color:var(--ink);font-weight:600}
.planner-selected-fields {display:flex;align-items:end;gap:12px;margin-top:10px}
.planner-selected-fields label {display:grid;gap:4px;font-size:11.5px;color:var(--muted)}
.planner-selected-fields label input {width:76px;min-height:34px;padding:4px 6px;border:1px solid #bbc1b4;border-radius:3px;background:#fff;font-size:13px;color:var(--ink)}
.planner-selected-fields label span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.planner-selected-fields button {margin-left:auto;padding:8px 0;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.planner-match {display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 0}
.planner-match+.planner-match {border-top:1px solid var(--line)}
[data-planner-matches] {margin-top:8px}
.planner-match img {width:72px;height:72px;object-fit:cover;border-radius:3px}
.planner-match h3 {font:600 14px/1.3 'DM Sans',sans-serif;letter-spacing:0}
.planner-match p {font-size:12.5px;line-height:1.45;margin-top:3px;color:var(--muted)}
.planner-match .planner-difference {color:#405740;margin-top:6px}
.planner-match .planner-price {color:var(--ink)}
.planner-estimate {margin-top:16px;padding:16px 18px 15px;background:#f1f3ec;border-radius:4px}
.planner-estimate-figure {font-size:15px;color:var(--muted)}
.planner-estimate-figure strong {font:600 34px/1 var(--serif);letter-spacing:-.5px;color:var(--ink);margin-right:4px}
.planner-estimate-detail {font-size:13px;margin-top:6px;color:var(--muted)}
.planner-estimate-cost {font-size:13px;line-height:1.5;margin-top:8px;color:var(--ink)}
.planner-wood-fields {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.planner-wood-fields label {display:grid;grid-template-columns:1fr auto;gap:4px;font-size:13px;font-weight:600}
.planner-wood-fields label span {font-size:11px;font-weight:400;color:var(--muted);align-self:center}
.planner-wood-fields input {width:100%;border:1px solid #bbc1b4;border-radius:3px;background:#fff;padding:8px 10px;grid-column:1/-1;min-height:40px}
.planner-wood-fields input:invalid {border-color:#a64a36}
.planner-share-row {margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.planner-share-wide {display:inline-flex;align-items:center;padding:12px 22px;background:var(--green);color:#fff;border:1px solid var(--green);text-decoration:none;font-size:14px}
.planner-share-wide:hover {background:#2c3d30}
@media(max-width:1050px) {
  .planner-layout {grid-template-columns:1fr;gap:26px}
  .planner-stage {position:sticky;top:0;z-index:6;background:var(--paper);padding:8px 0 6px}
  .planner-stage-frame {aspect-ratio:auto;height:clamp(280px,46vh,440px)}
  .planner-status {margin-top:8px;font-size:13px;min-height:0}
  .planner-rail {max-width:640px;padding-top:6px}
}
@media(max-width:760px) {
  .planner-page {padding:24px 0 70px}
  .planner-intro {margin-bottom:22px}
  .planner-intro h1 {font-size:44px;letter-spacing:-1px}
  .planner-intro>p:last-child {font-size:16px}
  .planner-stage {margin:0 -22px;padding:0 0 4px}
  .planner-stage-frame {height:clamp(260px,42vh,380px);border-radius:0;border-left:0;border-right:0}
  .planner-status,.planner-input-status {padding:0 22px}
  .planner-stage-bar {gap:10px;padding:8px 10px}
  .planner-views button {padding:6px 9px;font-size:12.5px}
  .planner-caption {font-size:12px;text-align:left}
  .planner-caption-top {display:none}
  .planner-section h2 {font-size:28px}
  .planner-tray-item {padding:8px 2px 7px;font-size:11px}
  .planner-tray-item svg {width:38px;height:30px}
  .planner-option {font-size:12px;padding:10px 4px}
  .planner-wood-fields {grid-template-columns:1fr}
  .planner-selected-fields {flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce) {.planner-tray-item {transition:none}}