:root {
  color-scheme: light;
  --background: #f7f7f1;
  --surface: #fffefa;
  --ink: #24302a;
  --muted: #56645b;
  --line: #e1e4db;
  --forest: #254f3d;
  --accent: #edf3e8;
  font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible, #plan:focus-visible { outline: 2px solid #547957; outline-offset: 3px; }
[hidden] { display: none !important; }
.app { max-width: 1400px; margin: auto; padding: 35px clamp(14px, 4vw, 60px) 20px; }
.masthead { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 23px; }
.eyebrow { margin: 0 0 6px; font-size: .69rem; font-weight: 700; letter-spacing: .13em; color: var(--forest); }
.eyebrow span { margin: 0 4px; }
h1 { margin: 0; font: 500 clamp(2rem, 4vw, 3rem)/1.06 Georgia, serif; letter-spacing: -.035em; }
h2 { margin: 0; font: 500 1.42rem/1.15 Georgia, serif; overflow-wrap: anywhere; }
.intro { margin: 8px 0 0; color: var(--muted); }
.layout-files { display: grid; gap: 6px; justify-items: end; }
#active-plan { max-width: min(55vw, 250px); }
.save-state { display: flex; align-items: center; gap: 7px; margin: 0 0 3px; color: var(--muted); font-size: .82rem; }
.save-state:empty { display: none; }
.save-state span { width: 7px; height: 7px; border-radius: 50%; background: #668853; flex: none; }
dialog { width: min(740px, 94vw); max-height: 92vh; overflow: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
dialog::backdrop { background: #1b2a2466; }
.dialog-heading, .import-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dialog-heading { justify-content: space-between; }
.import-label { display: block; font-size: .85rem; font-weight: 600; margin: 14px 0 5px; }
.import-hint { font-size: .78rem; color: var(--muted); margin: 5px 0 0; }
.import-row input { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 6px; min-height: 34px; min-width: 0; }
#plan-link { flex: 1 1 200px; }
#plan-import-status, #calibration-help { font-size: .86rem; color: var(--muted); }
#plan-import-status:empty { display: none; }
#plan-calibration:not([hidden]) + #plan-import-status { display: block; min-height: 1.3em; }
.plan-candidates { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.plan-candidates button { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; font-size: .8rem; }
.plan-candidates button:hover { background: var(--accent); }
.plan-candidates img { display: block; width: 100%; height: 92px; object-fit: contain; margin-bottom: 4px; }
#more-plan-candidates { margin-top: 8px; }
#calibration-image { display: block; width: 100%; height: min(49vh, 480px); background: var(--background); cursor: crosshair; }
#plan-calibration[data-method="area"] #calibration-image { touch-action: none; }
#plan-calibration[data-method="area"] .calibration-corner { cursor: grab; }
#calibration-image.dragging-corner, #plan-calibration[data-method="area"] #calibration-image.dragging-corner .calibration-corner { cursor: grabbing; }
#calibration-progress { color: var(--ink); margin-top: 8px; }
.calibration-row { margin-top: 10px; }
#calibration-value { width: 8em; }
#structure-dialog { width: min(930px, 96vw); }
.structure-tools { margin-top: 10px; }
#structure-ceiling { width: 8em; }
#structure-image { display: block; width: 100%; height: min(48vh, 520px); background: var(--background); touch-action: none; cursor: crosshair; }
.structure-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: .79rem; }
#structure-dialog [data-kind="wall"] { --structure-color: #275742; }
#structure-dialog [data-kind="door"] { --structure-color: #a44914; }
#structure-dialog [data-kind="window"] { --structure-color: #12658f; }
.structure-legend span::before { content: ""; display: inline-block; width: 11px; height: 3px; margin: 0 5px 3px 0; background: var(--structure-color); }
#structure-lines line { stroke: var(--structure-color); stroke-width: 3px; vector-effect: non-scaling-stroke; opacity: .82; }
#structure-lines line.selected { stroke-width: 5px; opacity: 1; }
#structure-lines circle { fill: #fffefa; stroke: #275742; stroke-width: 2px; vector-effect: non-scaling-stroke; }
#structure-lines circle[data-endpoint] { cursor: grab; }
#structure-status:empty { display: none; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 295px); gap: 16px; align-items: start; }
.drawing-panel, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.drawing-panel { overflow: hidden; }
.drawing-toolbar, .drawing-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; }
.drawing-toolbar { border-bottom: 1px solid var(--line); }
.drawing-footer { border-top: 1px solid var(--line); font-size: .77rem; color: var(--muted); }
.drawing-footer label { display: flex; align-items: center; gap: 5px; }
.drawing-footer input { accent-color: var(--forest); }
.tool-group, .actions { display: flex; gap: 5px; flex-wrap: wrap; }
.tool, .subtle, .primary { border: 1px solid var(--line); border-radius: 8px; min-height: 34px; padding: 5px 10px; background: var(--surface); color: var(--ink); font-size: .81rem; white-space: nowrap; }
.tool:hover, .subtle:hover { background: var(--accent); }
.tool.active { background: var(--accent); border-color: #c6d4c3; color: var(--forest); }
.icon-button { width: 34px; padding: 0; font-size: 1.12rem; }
.primary { color: white; background: var(--forest); border-color: var(--forest); }
.primary:hover { background: #32634d; }
.drawing-stage { position: relative; background: #fbfbf8; }
#plan { display: block; width: 100%; height: clamp(350px, 67vh, 790px); touch-action: none; cursor: grab; user-select: none; }
#plan.dragging { cursor: grabbing; }
#plan.measuring { cursor: crosshair; }
#underlay { fill: #f6f6f0; pointer-events: none; }
#plan.original-visible #underlay { display: none; }
#floor-grid { pointer-events: none; }
#grid-minor, #grid-major { fill: none; stroke: #436d56; }
#grid-minor { stroke-width: .5; opacity: .26; }
#grid-major { stroke-width: .9; opacity: .34; }
#plan.grid-coarse #grid-minor { display: none; }
.shape { cursor: move; }
#plan.measuring .shape { cursor: crosshair; }
.shape .body { fill: var(--object-color); stroke: var(--object-outline); stroke-width: 1.2; }
.shape .detail { stroke: var(--object-outline); opacity: .55; fill: none; stroke-width: .8; pointer-events: none; }
.shape .tv-hit { fill: transparent; }
.shape .tv-footprint { fill-opacity: .16; stroke-dasharray: 3 2; }
.shape .tv-label { paint-order: stroke; stroke: #fffefa; stroke-width: 2.5px; }
.shape text { fill: #213029; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.shape.selected .body { stroke: #214f38; stroke-width: 2.4; }
.shape.selected:not(.primary-selection) .body { stroke-width: 2; stroke-dasharray: 4 2; }
.shape .grip { fill: #fff; stroke: #214f38; stroke-width: 1.1; cursor: nwse-resize; }
.shape .grip.back { cursor: nesw-resize; }
.shape .rotation-handle { cursor: grab; }
#plan.dragging .rotation-handle { cursor: grabbing; }
.shape .rotation-hit { fill: transparent; }
.shape .rotation-stem, .shape .rotation-symbol { stroke: #214f38; fill: none; stroke-width: 1.5; pointer-events: none; }
.shape .rotation-knob { fill: #fffefa; stroke: #214f38; stroke-width: 1.5; pointer-events: none; }
#plan.measuring .rotation-handle { cursor: crosshair; }
#drag-distances { pointer-events: none; }
.drag-gap { color: #236850; }
.drag-gap.overlap { color: #964734; }
.drag-gap line, .drag-gap circle { stroke: currentColor; stroke-width: 1.4; fill: #fffefa; vector-effect: non-scaling-stroke; }
.drag-gap line { stroke-dasharray: 4 2; }
.drag-gap rect { fill: #fffefa; stroke: currentColor; stroke-width: 1; }
.drag-gap text { font: 700 12px "Segoe UI", sans-serif; fill: currentColor; text-anchor: middle; dominant-baseline: central; }
#distance { pointer-events: none; }
#distance line, #distance circle { stroke: #ad511c; fill: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
#distance text { font: 700 12px "Segoe UI", sans-serif; fill: #713915; paint-order: stroke; stroke: #fff; stroke-width: 4px; text-anchor: middle; }
.scale-badge { position: absolute; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: #fffefa; border: 1px solid var(--line); border-radius: 6px; font-size: .74rem; pointer-events: none; }
#scale-line { display: block; border: solid var(--forest); border-width: 0 1px 2px; height: 7px; }
.sidebar { display: grid; gap: 12px; min-width: 0; }
.panel { padding: 14px; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#selection-title { margin: 0 0 8px; font-size: .94rem; font-weight: 600; overflow-wrap: anywhere; }
#custom-object-dialog { width: min(460px, 94vw); }
#custom-object-status:empty, #custom-object-error:empty { display: none; }
.selection-count { margin: 0 0 10px; color: var(--forest); font-size: .8rem; }
#properties label, #custom-object-form label { display: block; color: var(--muted); font-size: .76rem; margin-bottom: 4px; }
#properties input, #custom-object-form input, .add-row select { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); width: 100%; min-width: 0; padding: 6px 8px; min-height: 34px; font-size: .86rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.diameter-field { margin-top: 9px; }
.tv-product { margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
#tv-fields .field-row { align-items: end; }
.clearance { margin: 10px 0 0; background: var(--accent); padding: 7px 8px; border-radius: 7px; font-size: .8rem; color: var(--forest); }
.clearance.compact { color: #774617; background: #f8eee2; }
.actions { margin-top: 10px; }
.danger { color: #863f34; }
#no-selection, .empty-list { color: var(--muted); font-size: .82rem; }
.add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.furniture-list { list-style: none; padding: 0; margin: 10px 0; max-height: 224px; overflow: auto; }
.furniture-list button { display: flex; width: 100%; align-items: center; gap: 7px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 6px; min-height: 30px; font-size: .81rem; color: var(--ink); }
.furniture-list button:hover, .furniture-list button[aria-pressed="true"] { background: var(--accent); }
.furniture-list button[aria-pressed="true"] { border-color: #d3dfce; }
.furniture-list .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.furniture-list .size { color: var(--muted); font-size: .7rem; margin-left: auto; white-space: nowrap; }
.swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--object-color); border: 1px solid var(--object-outline); }
.reset { background: transparent; border: 0; color: var(--muted); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; font-size: .75rem; }
.page-footer { margin-top: 12px; font-size: .78rem; color: var(--muted); }
.showing-3d .plan-only { display: none; }
.three-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ceiling-field { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; }
.ceiling-field input { width: 66px; min-height: 32px; border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; background: var(--surface); color: var(--ink); }
.three-viewport { height: clamp(350px, 65vh, 780px); position: relative; overflow: hidden; background: #eeeae1; touch-action: none; }
.three-viewport:focus-visible { outline: 2px solid #547957; outline-offset: -2px; }
.three-viewport canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.three-viewport canvas:active { cursor: grabbing; }
.walk-pad { display: grid; position: absolute; right: 12px; bottom: 12px; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; z-index: 1; }
.walk-pad button { border: 1px solid #d0d8cf; border-radius: 9px; background: #fffef3; color: var(--forest); font-size: 1.3rem; padding: 0; touch-action: none; }
.walk-pad button:first-child { grid-column: 2; }
.walk-pad button:nth-child(2) { grid-column: 1; }
.walk-pad button:active { background: #dce9d7; }
.three-error { margin: 0; display: grid; height: 100%; place-content: center; padding: 20px; text-align: center; }

@media (max-width: 820px) {
  .app { padding-top: 22px; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #plan { height: clamp(330px, 62vh, 680px); }
}
@media (max-width: 540px) {
  .masthead { display: block; margin-bottom: 14px; }
  .layout-files { justify-items: start; margin-top: 10px; }
  .sidebar { grid-template-columns: 1fr; }
  .drawing-toolbar { padding: 7px; }
  .tool { padding-inline: 8px; }
  .drawing-footer { gap: 4px; padding: 8px; }
  #plan { height: clamp(290px, 49vh, 410px); }
  .three-viewport { height: clamp(300px, 50vh, 500px); }
}

@media print {
  @page { margin: 12mm; }
  body { background: white; print-color-adjust: exact; }
  .app { max-width: none; padding: 0; }
  .masthead { margin-bottom: 4mm; }
  h1 { font-size: 22pt; }
  .workspace { display: block; }
  .drawing-panel { border: 0; border-radius: 0; break-inside: avoid; }
  #plan-stage { display: block !important; background: white; }
  #plan { width: 100%; height: auto; max-height: 235mm; }
  #plan .shape.selected .body { stroke: var(--object-outline); stroke-width: 1.2; stroke-dasharray: none; }
  #plan .shape.selected .tv-footprint { stroke-dasharray: 3 2; }
  .intro, .layout-files, .drawing-toolbar, .drawing-footer, .scale-badge, #three-stage,
  .sidebar, .page-footer, .rotation-handle, .grip, #drag-distances, #distance, dialog { display: none !important; }
}