:root {
  --ink: #11181d;
  --ink-soft: #465159;
  --muted: #7b878e;
  --line: #dde3e5;
  --line-soft: #edf0f1;
  --paper: #ffffff;
  --canvas: #e9eef0;
  --panel: #f8faf9;
  --accent: #b8f14a;
  --accent-deep: #83b924;
  --accent-ink: #1d3208;
  --cyan: #59ddd0;
  --orange: #ff9864;
  --danger: #e65a58;
  --shadow: 0 16px 42px rgba(16, 27, 32, .12);
  --font: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "DM Sans", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #dfe5e7;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app { height: 100%; display: grid; grid-template-rows: 64px minmax(0, 1fr); }

.topbar {
  z-index: 20;
  height: 64px;
  display: grid;
  grid-template-columns: 208px minmax(260px, 1fr) auto;
  align-items: center;
  background: #0d1418;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand { height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 28px; display: grid; gap: 2px; }
.brand-mark span { display: block; height: 6px; border: 2px solid var(--accent); transform: skewY(-22deg); }
.brand-copy { display: flex; align-items: baseline; gap: 7px; font-family: var(--font-display); letter-spacing: .04em; }
.brand-copy strong { font-size: 14px; }
.brand-copy small { color: var(--accent); font-size: 9px; letter-spacing: .2em; }

.project-title-wrap { min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 22px; }
.eyebrow { color: #829097; font: 700 9px/1 var(--font-display); letter-spacing: .18em; }
.project-name { min-width: 180px; max-width: 420px; flex: 0 1 auto; padding: 6px 8px; color: #eff4f4; background: transparent; border: 1px solid transparent; border-radius: 6px; outline: none; font-weight: 600; }
.project-name:hover, .project-name:focus { border-color: #38464c; background: #152026; }
.save-state { color: #718087; font-size: 10px; white-space: nowrap; }
.save-state i { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: #536169; }
.save-state.dirty { color: #b6c1c5; }
.save-state.dirty i { background: var(--orange); }

.top-actions { height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.history-actions { display: flex; gap: 2px; margin-left: 4px; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #aeb9bd; background: transparent; cursor: pointer; }
.icon-button svg { width: 17px; }
.icon-button:hover:not(:disabled) { background: #1c292f; color: #fff; }
.icon-button:disabled { opacity: .25; cursor: default; }
.button { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 6px; border: 1px solid #35434a; background: transparent; color: #e6ecee; cursor: pointer; font-size: 11px; font-weight: 600; }
.button svg { width: 15px; }
.button:hover { background: #1c292f; }
.button-primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.button-primary:hover { background: #c8ff5b; }

.workspace { min-height: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) 380px; }

.toolrail { z-index: 12; display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 10px; background: #f8faf9; border-right: 1px solid #d7dddf; }
.tool-group { display: grid; gap: 4px; }
.tool-spacer { flex: 1; }
.tool-button { position: relative; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #66737a; cursor: pointer; font-size: 9px; font-weight: 600; }
.tool-button svg { width: 20px; height: 20px; stroke-width: 1.6; }
.tool-button:hover { background: #edf2ef; color: var(--ink); }
.tool-button.active { color: #1f3208; background: #e6f8c0; border-color: #d4efa0; }
.tool-button.active::before { content: ""; position: absolute; left: -9px; width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: var(--accent-deep); }
.tool-button.danger:hover { color: var(--danger); background: #fff0ef; }

.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--canvas); }
#canvas-container { position: absolute; inset: 0; }
#canvas-container canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }

.endpoint-extend-button {
  position: absolute;
  z-index: 9;
  transform: translateY(-50%);
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #a8ca68;
  border-radius: 999px;
  background: rgba(241, 252, 220, .96);
  box-shadow: 0 8px 20px rgba(36, 58, 18, .18);
  color: #263d10;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}
.endpoint-extend-button[hidden] { display: none; }
.endpoint-extend-button svg { width: 14px; stroke-width: 2; }
.endpoint-extend-button:hover { border-color: #7fae29; background: #ddf7aa; }
.endpoint-extend-button:focus-visible { outline: 2px solid #5f8e18; outline-offset: 2px; }
.touch-endpoint-hint { display: none; }

.handle-tooltip {
  position: absolute;
  z-index: 10;
  max-width: 150px;
  padding: 7px 10px;
  border: 1px solid rgba(120, 225, 233, .45);
  border-radius: 6px;
  background: rgba(17, 32, 38, .94);
  box-shadow: 0 8px 22px rgba(11, 24, 29, .22);
  color: #eafcfd;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(9px);
}
.handle-tooltip[hidden] { display: none; }

@media (any-pointer: coarse) {
  .mouse-endpoint-hint { display: none; }
  .touch-endpoint-hint { display: inline; }
  .endpoint-extend-button {
    min-height: 44px;
    padding: 0 15px;
    font-size: 12px;
    touch-action: manipulation;
  }
}

.stage-topline { position: absolute; z-index: 5; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.selection-path { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.75); border-radius: 8px; background: rgba(248,250,249,.78); box-shadow: 0 7px 18px rgba(29,45,53,.08); backdrop-filter: blur(12px); color: #7a878d; font-size: 10px; }
.selection-path i { color: #a9b2b6; font-style: normal; }
.selection-path strong { color: var(--ink); font-size: 11px; }
.view-presets { pointer-events: auto; display: flex; padding: 4px; border: 1px solid rgba(255,255,255,.78); border-radius: 9px; background: rgba(248,250,249,.82); box-shadow: 0 7px 18px rgba(29,45,53,.08); backdrop-filter: blur(12px); }
.preset-button { min-width: 60px; height: 29px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #6f7b81; cursor: pointer; font-size: 10px; font-weight: 600; }
.preset-button:hover { color: var(--ink); }
.preset-button.active { background: #142026; color: #fff; box-shadow: 0 3px 8px rgba(10,20,25,.18); }

.stage-status { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.edit-hint, .camera-hint { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.74); border-radius: 8px; background: rgba(248,250,249,.78); box-shadow: 0 7px 18px rgba(29,45,53,.07); backdrop-filter: blur(10px); color: #5f6c72; font-size: 9px; }
.edit-hint strong { color: var(--ink); }
.hint-divider { width: 1px; height: 16px; margin: 0 2px; background: #d4dadd; }
.hint-handle { display: inline-block; width: 10px; height: 10px; background: var(--accent); box-shadow: 0 0 0 3px rgba(131,185,36,.15); }
.hint-end { border-radius: 50%; }
.hint-height { transform: rotate(45deg); border-radius: 2px; }
.hint-opening { border-radius: 3px; background: #30b9c7; box-shadow: 0 0 0 3px rgba(48,185,199,.16); }
.hint-shelf { border-radius: 3px; background: #777ce7; box-shadow: 0 0 0 3px rgba(119,124,231,.16); }
.camera-hint span { padding-left: 9px; border-left: 1px solid #d2d9dc; }
.camera-hint span:first-child { padding-left: 0; border-left: 0; }
.camera-hint b { color: #38454b; font-weight: 600; }

.model-readout { position: absolute; z-index: 4; left: 18px; bottom: 64px; display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.76); border-radius: 8px; background: rgba(20,32,38,.9); box-shadow: 0 12px 26px rgba(14,27,34,.17); backdrop-filter: blur(12px); color: #fff; overflow: hidden; pointer-events: none; }
.model-readout > span { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 4px; min-width: 82px; padding: 8px 11px; border-right: 1px solid rgba(255,255,255,.12); }
.model-readout > span:last-child { border: 0; }
.model-readout small { grid-column: 1 / -1; color: #93a0a6; font-size: 8px; }
.model-readout strong { align-self: baseline; font: 700 15px/1.2 var(--font-display); }
.model-readout em { align-self: end; padding-bottom: 1px; color: #93a0a6; font-size: 8px; font-style: normal; }

.dimension-layer { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.dimension-label { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(126,143,151,.34); border-radius: 4px; background: rgba(248,251,250,.9); box-shadow: 0 3px 8px rgba(20,33,39,.08); color: #314047; font: 700 9px/1 var(--font-display); white-space: nowrap; }
.dimension-label::before, .dimension-label::after { content: ""; width: 13px; height: 1px; background: #85959d; }
.dimension-label.editable-dimension { pointer-events: auto; cursor: text; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.dimension-label.editable-dimension:hover, .dimension-label.editable-dimension:focus-visible { border-color: #6f9f1f; box-shadow: 0 0 0 3px rgba(184,241,74,.2), 0 5px 13px rgba(20,33,39,.13); outline: 0; }
.dimension-label.editing { z-index: 4; min-height: 34px; padding: 5px 8px; border-color: #6f9f1f; background: rgba(255,255,255,.98); box-shadow: 0 0 0 3px rgba(184,241,74,.24), 0 9px 24px rgba(20,33,39,.18); }
.dimension-label.editing::before, .dimension-label.editing::after { display: none; }
.dimension-label .dimension-editor-prefix, .dimension-label .dimension-editor-unit { color: inherit; font-size: 10px; font-weight: 700; }
.dimension-label .dimension-editor-input { width: 78px; height: 28px; padding: 0 6px; border: 1px solid #a8b6bb; border-radius: 4px; background: #fff; color: #17252b; outline: 0; font: 700 16px/1 var(--font-display); text-align: right; }
.dimension-label.angle-dimension .dimension-editor-input { width: 62px; }
.dimension-label .dimension-editor-input:focus { border-color: #76a91b; box-shadow: 0 0 0 2px rgba(118,169,27,.16); }
.dimension-label.opening-dimension { border-color: rgba(30,163,174,.5); color: #147984; }
.dimension-label.opening-dimension::before, .dimension-label.opening-dimension::after { background: #27aab5; }
.dimension-label.shelf-dimension { border-color: rgba(102,105,187,.48); color: #4d50a0; }
.dimension-label.shelf-dimension::before, .dimension-label.shelf-dimension::after { background: #686cc0; }
.dimension-label.angle-dimension { border-radius: 999px; padding: 5px 9px; font-size: 9px; box-shadow: 0 5px 13px rgba(20,33,39,.13); }
.dimension-label.angle-dimension::before, .dimension-label.angle-dimension::after { width: 7px; }
.dimension-label.angle-dimension.inner-angle { border-color: rgba(118,169,27,.62); background: rgba(245,252,230,.94); color: #4f7410; }
.dimension-label.angle-dimension.inner-angle::before, .dimension-label.angle-dimension.inner-angle::after { background: #76a91b; }
.dimension-label.angle-dimension.outer-angle { border-color: rgba(21,153,165,.58); background: rgba(234,251,252,.94); color: #147984; }
.dimension-label.angle-dimension.outer-angle::before, .dimension-label.angle-dimension.outer-angle::after { background: #1599a5; }
.dimension-label.panel-width-dimension { gap: 2px; padding: 3px 5px; border-color: rgba(126,143,151,.2); border-radius: 3px; background: rgba(247,250,248,.72); box-shadow: none; color: rgba(49,64,71,.78); font-size: 8px; font-weight: 600; backdrop-filter: blur(3px); }
.dimension-label.panel-width-dimension::before { content: none; display: none; }
.dimension-label.panel-width-dimension::after { content: "mm"; width: auto; height: auto; background: transparent; color: rgba(98,113,120,.68); font: 500 6px/1 var(--font-display); }

@media (any-pointer: coarse) {
  .dimension-label.editable-dimension { min-height: 44px; padding-left: 10px; padding-right: 10px; }
  .dimension-label.editable-dimension::before, .dimension-label.editable-dimension::after { width: 9px; }
  .dimension-label.editing { min-height: 44px; }
  .dimension-label .dimension-editor-input { height: 34px; font-size: 16px; }
}

.toast { position: absolute; z-index: 20; top: 64px; left: 50%; transform: translate(-50%, -12px); padding: 9px 14px; border-radius: 7px; background: #101a1f; color: white; box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.inspector { z-index: 11; min-width: 0; min-height: 0; display: grid; grid-template-rows: 52px minmax(0,1fr); background: var(--paper); border-left: 1px solid #d7dddf; box-shadow: -12px 0 30px rgba(26,38,44,.04); }
.inspector-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 14px 0; border-bottom: 1px solid var(--line); }
.inspector-tab { position: relative; border: 0; background: transparent; color: #899399; cursor: pointer; font-size: 11px; font-weight: 600; }
.inspector-tab::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: transparent; }
.inspector-tab.active { color: var(--ink); }
.inspector-tab.active::after { background: var(--ink); }
.inspector-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: #c9d0d3 transparent; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-section { padding: 20px 20px 19px; border-bottom: 1px solid var(--line-soft); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-heading > div { display: flex; align-items: center; gap: 9px; }
.section-heading h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.section-heading.compact { margin-bottom: 12px; }
.section-index { color: var(--accent-deep); font: 700 9px/1 var(--font-display); letter-spacing: .05em; }
.section-meta { color: #94a0a5; font-size: 9px; }
.selection-pill { padding: 4px 8px; border-radius: 99px; background: #edf1f1; color: #506067; font-size: 9px; font-weight: 600; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 8px; background: #eff3f1; }
.segmented button { min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #718087; cursor: pointer; font-size: 10px; font-weight: 600; }
.segmented button svg { width: 17px; }
.segmented button.active { border-color: #dae1de; background: #fff; color: var(--ink); box-shadow: 0 3px 9px rgba(24,38,44,.08); }
.segmented.large button { height: 48px; }
.segmented button small { color: #8b979c; font-size: 8px; font-weight: 500; }

.sub-options { margin-top: 14px; }
.sub-options.hidden { display: none; }
.field-label { display: block; margin: 0 0 7px; color: #69777d; font-size: 9px; font-weight: 600; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; height: 38px; padding: 0 36px 0 11px; border: 1px solid #d9e0e1; border-radius: 6px; background: #fff; color: #28343a; appearance: none; outline: none; font-size: 10px; }
.select-wrap select:focus { border-color: #93ba47; box-shadow: 0 0 0 3px rgba(184,241,74,.18); }
.select-wrap svg { position: absolute; top: 12px; right: 11px; width: 14px; pointer-events: none; color: #819097; }

.field-grid { display: grid; gap: 10px; margin-top: 13px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field-grid label > span { display: block; margin-bottom: 6px; color: #68767c; font-size: 9px; font-weight: 600; }
.unit-input { position: relative; height: 38px; display: flex; align-items: center; border: 1px solid #d9e0e1; border-radius: 6px; background: #fff; transition: .16s ease; }
.unit-input:focus-within { border-color: #93ba47; box-shadow: 0 0 0 3px rgba(184,241,74,.18); }
.unit-input input { min-width: 0; width: 100%; height: 100%; padding: 0 38px 0 10px; border: 0; background: transparent; color: var(--ink); outline: 0; font: 700 12px var(--font-display); }
.unit-input em { position: absolute; right: 9px; color: #8d989d; font-size: 8px; font-style: normal; }
.microcopy { margin: 9px 0 0; color: #8a969b; font-size: 8px; line-height: 1.65; }

.opening-add-actions { gap: 4px !important; }
.opening-toggle { height: 28px; padding: 0 8px; border: 1px solid #b9d4d7; border-radius: 6px; background: #eefafb; color: #197983; cursor: pointer; font-size: 8px; font-weight: 700; }
.opening-toggle.rect-toggle { border-color: #c6d0d1; background: #f5f8f8; color: #53686d; }
.opening-toggle.active { border-color: #efc7ba; background: #fff5f1; color: #a04b2e; }
.opening-toggle:disabled { cursor: not-allowed; opacity: .45; }
.opening-preview { position: relative; height: 52px; overflow: hidden; border: 1px solid #dce5e4; border-radius: 8px; background: linear-gradient(180deg,#f8faf7,#edf2ef); }
.opening-preview::before { content: ""; position: absolute; left: 50%; bottom: -1px; width: 58px; height: 42px; transform: translateX(-50%); border: 7px solid #b8c4bf; border-bottom: 0; border-radius: 32px 32px 0 0; background: #fff; transition: border-radius .16s ease; }
.opening-preview.rect::before { border-radius: 2px 2px 0 0; }
.opening-preview span, .opening-preview i { position: absolute; bottom: 0; width: 4px; height: 48px; border-radius: 99px 99px 0 0; background: #66757a; }
.opening-preview span { left: calc(50% - 49px); }
.opening-preview i { right: calc(50% - 49px); }
.opening-preview b { position: absolute; left: 50%; bottom: 4px; width: 70px; height: 1px; transform: translateX(-50%); border-top: 1px dashed #30aab6; }
.opening-options { margin-top: 12px; }
.opening-options.hidden { display: none; }
.opening-shape-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 7px; background: #eef2f1; }
.opening-shape-selector button { height: 31px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #6c787c; cursor: pointer; font-size: 9px; font-weight: 700; }
.opening-shape-selector button.active { border-color: #b9d4d7; background: #fff; color: #167782; box-shadow: 0 1px 4px rgba(30,62,66,.08); }
.opening-fields { margin-top: 0; }
.feature-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.feature-list:empty { display: none; }
.feature-chip { min-width: 58px; height: 26px; padding: 0 9px; border: 1px solid #cfdddd; border-radius: 99px; background: #f7faf9; color: #66777d; cursor: pointer; font-size: 8px; font-weight: 700; }
.feature-chip.active { border-color: #38b7c1; background: #eaf9fa; color: #167782; box-shadow: 0 0 0 2px rgba(56,183,193,.09); }
.shelf-feature-list .feature-chip.active { border-color: #8588d1; background: #f1f1fd; color: #50539d; box-shadow: 0 0 0 2px rgba(119,124,231,.09); }
.feature-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.feature-editor-head strong { color: #405057; font-size: 9px; }
.feature-editor-head button { padding: 5px 8px; border: 1px solid #edc9bd; border-radius: 5px; background: #fff7f3; color: #9b5036; cursor: pointer; font-size: 7px; font-weight: 700; }
.opening-center-button { width: 100%; height: 31px; margin-top: 9px; border: 1px solid #d7dfe0; border-radius: 6px; background: #fff; color: #536168; cursor: pointer; font-size: 9px; font-weight: 700; }
.opening-center-button:hover { border-color: #9bc7cb; color: #197983; }
.opening-status { margin: 9px 0 0; padding: 8px 9px; border-left: 2px solid #2eb3c0; background: #f0f9fa; color: #557176; font-size: 8px; line-height: 1.55; }
.opening-status.warning { border-left-color: #e98b5f; background: #fff5ef; color: #8b4d31; }

.shelf-toggle { border-color: #c7c9e8; background: #f4f3ff; color: #55569b; }
.shelf-preview { position: relative; height: 58px; overflow: hidden; border: 1px solid #dce5e4; border-radius: 8px; background: linear-gradient(180deg,#f8faf7,#edf2ef); }
.shelf-preview::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 6px; background: #c2cbc7; box-shadow: 0 1px 0 #99a7a2; }
.shelf-preview i { position: absolute; left: 18%; right: 9%; top: 29px; height: 11px; border: 1px solid #aaa993; background: linear-gradient(180deg,#e8dfc9,#c9bea4); transform: skewX(-22deg); transform-origin: left; box-shadow: 0 8px 10px rgba(40,48,50,.13); }
.shelf-preview span { position: absolute; left: 21%; right: 13%; top: 34px; height: 3px; background: #66757a; }
.shelf-preview b, .shelf-preview em { position: absolute; top: 29px; width: 4px; height: 20px; border-radius: 3px; background: #66757a; transform: rotate(56deg); }
.shelf-preview b { left: 31%; }
.shelf-preview em { right: 27%; }
.shelf-options { margin-top: 12px; }
.shelf-options.hidden { display: none; }
.shelf-fields { margin-top: 0; }
.shelf-basis-note { margin: 0 0 10px; padding: 7px 8px; border-radius: 6px; background: #f5f5fb; color: #686b85; }
.field-with-help { position: relative; }
.field-detail { padding: 0; border: 0; background: transparent; color: #6367ae; cursor: pointer; font-size: 7px; font-weight: 700; }
.field-detail:hover { text-decoration: underline; }
.field-explainer { display: none; grid-column: 1 / -1; margin-top: 5px; padding: 8px; border: 1px solid #d9daf0; border-radius: 6px; background: #f7f7fd; color: #5f6479; font-size: 7px; font-weight: 500; line-height: 1.6; }
.field-explainer.open { display: block; }
.shelf-calculation { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 10px; overflow: hidden; border: 1px solid #dde4e4; border-radius: 7px; background: #dde4e4; }
.shelf-calculation > div { min-width: 0; padding: 9px; background: #f8faf9; }
.shelf-calculation small { display: block; color: #7f8c92; font-size: 7px; }
.shelf-calculation strong { display: inline-block; margin-top: 3px; color: #26343a; font: 700 15px var(--font-display); }
.shelf-calculation em { margin-left: 3px; color: #879398; font-size: 7px; font-style: normal; }
.shelf-calculation.warning strong { color: #b25432; }
.shelf-status { border-left-color: #6569bb; background: #f4f4fb; color: #5e618b; }
.shelf-status.warning { border-left-color: #e98b5f; background: #fff5ef; color: #8b4d31; }

.orientation-icon { width: 18px; height: 22px; display: grid; gap: 1px; padding: 2px; border: 1px solid #aab5b8; }
.orientation-icon i { display: block; background: #b9c5c8; }
.orientation-icon.vertical { grid-template-columns: repeat(3, 1fr); }
.orientation-icon.horizontal { grid-template-rows: repeat(2, 1fr); }

.layer-list { display: grid; gap: 1px; }
.layer-list label { min-height: 49px; display: grid; grid-template-columns: 18px 1fr 34px; align-items: center; gap: 10px; border-bottom: 1px solid #f0f2f2; cursor: pointer; }
.layer-list label:last-child { border: 0; }
.layer-list label > span:nth-child(2) { display: grid; gap: 2px; }
.layer-list strong { font-size: 10px; }
.layer-list small { color: #8d989d; font-size: 8px; }
.layer-swatch { width: 14px; height: 14px; border-radius: 3px; }
.layer-swatch.panels { background: #f9faf5; border: 1px solid #bfc7c4; }
.layer-swatch.pipes { width: 8px; margin-left: 3px; border-radius: 99px; background: linear-gradient(90deg,#6d7a7f,#d9e0e1,#68757a); }
.layer-swatch.base { background: #b7bec0; background-image: linear-gradient(45deg,transparent 46%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.5) 52%,transparent 54%); }
.layer-swatch.dimensions { background: transparent; border-top: 1px solid #6b7b82; border-bottom: 1px solid #6b7b82; border-radius: 0; }
.layer-list input { position: absolute; opacity: 0; }
.layer-list label > i { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #d7dddf; transition: .2s; }
.layer-list label > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: .2s; }
.layer-list input:checked + i { background: #a8d94a; }
.layer-list input:checked + i::after { transform: translateX(14px); }

.compliance-card { margin: 18px 20px 22px; padding: 15px; border: 1px solid #d5e8ae; border-radius: 9px; background: #f5faeb; }
.compliance-card.warning { border-color: #f0c7aa; background: #fff7ef; }
.compliance-head { display: flex; align-items: center; gap: 8px; }
.compliance-head strong { font-size: 11px; }
.compliance-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
.warning .compliance-icon { background: #ffb277; color: #672d0a; }
.compliance-card p { margin: 8px 0 10px; color: #637168; font-size: 8px; line-height: 1.65; }
.compliance-card button { padding: 0; border: 0; background: transparent; color: #506a1e; cursor: pointer; font-size: 9px; font-weight: 700; }
.compliance-card button span { margin-left: 5px; }

.partner-price-selector { padding: 15px 16px 14px; border-bottom: 1px solid #dce3e3; background: linear-gradient(180deg,#fbfcfc,#f5f8f7); }
.partner-price-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.partner-price-heading span { color: #26343a; font-size: 10px; font-weight: 700; }
.partner-price-heading small { color: #849197; font-size: 7px; }
.partner-price-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.partner-price-buttons button { min-width: 0; height: 49px; display: grid; grid-template-columns: 19px minmax(0,1fr); align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #d6dedf; border-radius: 7px; background: #fff; color: #68767c; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.partner-price-buttons button i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #cbd5d6; border-radius: 5px; color: transparent; background: #f7f9f8; font-size: 10px; font-style: normal; font-weight: 800; }
.partner-price-buttons button span { min-width: 0; display: grid; gap: 2px; }
.partner-price-buttons button strong { overflow: hidden; color: inherit; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.partner-price-buttons button small { color: #9aa4a8; font-size: 6.5px; }
.partner-price-buttons button:hover { border-color: #aebdbe; }
.partner-price-buttons button.active { border-color: #9dbc64; background: #f5faeb; color: #3f5d16; box-shadow: 0 3px 10px rgba(86,116,31,.09); }
.partner-price-buttons button.active i { border-color: #8fba3f; color: #263d08; background: #b8ef55; }
.partner-price-selector > p { margin: 8px 0 0; color: #879398; font-size: 7px; line-height: 1.55; }

.estimate-hero { padding: 20px; color: white; background: #142026; }
.estimate-hero > span { display: block; color: #95a3a9; font-size: 9px; font-weight: 600; }
.estimate-hero > span small { margin-left: 5px; font-weight: 400; }
.estimate-hero > span em { color: #bedf7c; font-style: normal; }
.estimate-hero > strong { display: block; margin: 5px 0 13px; font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.estimate-hero > div { display: flex; gap: 20px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.12); }
.estimate-hero > div span { display: flex; gap: 8px; color: #829198; font-size: 8px; }
.estimate-hero > div b { color: #eaf0f1; font-size: 9px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.metric-grid > div { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; column-gap: 3px; padding: 3px 8px; border-right: 1px solid var(--line-soft); }
.metric-grid > div:last-child { border: 0; }
.metric-icon { grid-row: 1 / 3; align-self: center; width: 10px; height: 24px; margin-right: 4px; border-radius: 2px; }
.metric-icon.panel { background: #e8eee7; border: 1px solid #aab7ae; }
.metric-icon.pipe { width: 6px; border-radius: 99px; background: #718087; }
.metric-icon.area { width: 19px; height: 19px; background: repeating-linear-gradient(45deg,#bfcdcf,#bfcdcf 1px,transparent 1px,transparent 4px); border: 1px solid #9fadb1; }
.metric-grid small { grid-column: 2 / 4; color: #8c979c; font-size: 8px; }
.metric-grid strong { font: 700 15px/1.1 var(--font-display); }
.metric-grid em { align-self: end; color: #8c979c; font-size: 8px; font-style: normal; }

.estimate-section { padding-left: 16px; padding-right: 16px; }
.text-button { padding: 0; border: 0; background: transparent; color: #738188; cursor: pointer; font-size: 8px; text-decoration: underline; text-underline-offset: 2px; }
.estimate-table { display: grid; }
.estimate-row { display: grid; grid-template-columns: minmax(0,1fr) 72px 76px 76px; align-items: center; min-height: 46px; border-bottom: 1px solid #edf0f1; }
.estimate-row.header { min-height: 22px; color: #98a2a7; font-size: 7px; text-align: right; }
.estimate-row.header span:first-child { text-align: left; }
.material-name { min-width: 0; display: grid; gap: 2px; padding-right: 7px; }
.material-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.material-name small { color: #9aa4a8; font-size: 7px; }
.material-qty { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto 17px; align-items: center; gap: 2px; height: 28px; margin-left: 3px; color: #4d5b61; font: 600 8px var(--font-display); }
.material-qty input { min-width: 0; width: 100%; height: 26px; padding: 0 3px; border: 1px solid transparent; border-radius: 4px; outline: 0; color: #4d5b61; background: transparent; font: 600 9px var(--font-display); text-align: right; }
.material-qty input:focus { border-color: #9aba5c; background: #fff; }
.quantity-auto { width: 17px; height: 20px; padding: 0; border: 0; border-radius: 3px; color: #6f8e36; background: #edf5df; cursor: pointer; font-size: 10px; }
.quantity-auto:disabled { visibility: hidden; }
.quantity-overridden .material-qty input { border-color: #bdd88a; background: #f7fbea; }
.price-input { position: relative; height: 28px; margin-left: 5px; border: 1px solid #dfe4e5; border-radius: 4px; background: #fafbfb; }
.price-input b { position: absolute; left: 6px; top: 7px; color: #8c989d; font-size: 8px; }
.price-input input { width: 100%; height: 100%; padding: 0 4px 0 16px; border: 0; outline: 0; background: transparent; font: 600 9px var(--font-display); text-align: right; }
.price-input:focus-within { border-color: #9aba5c; background: #fff; }
.fixed-panel-price { border-color: transparent; background: transparent; }
.panel-unit-price { display: block; padding: 6px 4px 0 16px; text-align: right; font: 600 9px var(--font-display); }
.material-subtotal { font: 700 9px var(--font-display); text-align: right; }
.estimate-subtotal { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.estimate-subtotal span { color: #738087; font-size: 9px; }
.estimate-subtotal strong { font: 700 16px var(--font-display); }

.labor-summary { display: grid; grid-template-columns: .85fr 1fr 1fr; align-items: end; gap: 10px; padding: 12px; border-radius: 7px; background: #f2f5f3; }
.labor-summary > div:first-child { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 4px; }
.labor-summary small { grid-column: 1 / 3; color: #899499; font-size: 7px; }
.labor-summary strong { font: 700 21px var(--font-display); }
.labor-summary span { align-self: end; padding-bottom: 4px; color: #7d898e; font-size: 8px; }
.labor-summary label { display: grid; gap: 3px; }
.labor-summary label > div { height: 30px; display: flex; align-items: center; border-bottom: 1px solid #bdc7c8; }
.labor-summary label input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: 700 17px var(--font-display); }
.labor-rate { display: grid; grid-template-columns: 1fr 160px; align-items: center; margin-top: 12px; }
.labor-rate > span { color: #68767c; font-size: 9px; font-weight: 600; }
.unit-input.yen b { padding-left: 8px; color: #758188; font-size: 10px; }
.unit-input.yen input { padding-left: 4px; padding-right: 44px; text-align: right; }
.labor-breakdown { margin-top: 12px; padding: 10px 0; border-top: 1px solid #edf0f1; border-bottom: 1px solid #edf0f1; display: grid; gap: 5px; }
.labor-breakdown div { display: flex; justify-content: space-between; color: #899499; font-size: 8px; }
.labor-breakdown b { color: #59666c; font-weight: 600; }
.labor-calculation-note { margin: 10px 0; color: #59666c; font-size: 10px; line-height: 1.65; }
.labor-calculation-note summary { cursor: pointer; }
#labor-auto-reset { padding: 6px 10px; border: 1px solid #d8e0df; border-radius: 5px; background: #fff; color: #426b60; font-size: 10px; cursor: pointer; }
#labor-auto-reset:disabled { opacity: .45; cursor: default; }

.estimate-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px; padding: 12px; border-radius: 7px; background: #f5f7f7; color: #7b878c; }
.estimate-note svg { flex: 0 0 auto; width: 15px; }
.estimate-note p { margin: 0; font-size: 8px; line-height: 1.65; }

.rules-dialog { width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; padding: 30px; border: 0; border-radius: 13px; box-shadow: 0 30px 80px rgba(14,23,27,.3); }
.rules-dialog::backdrop { background: rgba(8,15,19,.52); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 17px; right: 18px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #eef2f1; cursor: pointer; font-size: 19px; line-height: 1; }
.dialog-eyebrow { color: var(--accent-deep); font: 700 9px var(--font-display); letter-spacing: .18em; }
.rules-dialog h2 { margin: 8px 0 23px; font-size: 20px; }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid #e2e7e7; background: #e2e7e7; }
.rule-grid > div { display: grid; grid-template-columns: 27px 1fr; padding: 14px; background: #fff; }
.rule-grid span { grid-row: 1 / 3; color: #a0b876; font: 700 9px var(--font-display); }
.rule-grid strong { font-size: 11px; }
.rule-grid p { margin: 4px 0 0; color: #6e7a7f; font-size: 9px; line-height: 1.6; }
.dialog-disclaimer { margin: 17px 0 0; padding: 12px; border-radius: 7px; background: #f4f6f5; color: #737f84; font-size: 8px; line-height: 1.7; }

/* PDF output studio */
.export-studio { position: fixed; z-index: 100; inset: 0; display: none; grid-template-rows: 64px minmax(0,1fr); background: #dce3e4; }
.export-studio.open { display: grid; }
.export-topbar { display: grid; grid-template-columns: 220px minmax(220px,1fr) auto; align-items: center; color: white; background: #0d1418; border-bottom: 1px solid rgba(255,255,255,.08); }
.export-brand { height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.1); }
.export-brand > div:last-child { display: grid; gap: 1px; }
.export-brand strong { font: 700 13px var(--font-display); letter-spacing: .05em; }
.export-brand small { color: var(--accent); font: 700 7px var(--font-display); letter-spacing: .18em; }
.export-title { display: grid; gap: 3px; padding: 0 20px; }
.export-title span { color: #7d8c93; font: 700 8px var(--font-display); letter-spacing: .18em; }
.export-title strong { font-size: 12px; }
.export-actions { display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.export-secondary { color: #cbd3d6; border-color: #3a474d; }
.export-print-button { height: 38px; padding-left: 16px; padding-right: 16px; }

.export-workspace { min-height: 0; display: grid; grid-template-columns: 220px minmax(0,1fr); }
.export-nav { display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; background: #f7f9f8; border-right: 1px solid #cfd7d9; }
.export-nav-label { margin: 0 8px 8px; color: #98a3a8; font: 700 8px var(--font-display); letter-spacing: .16em; }
.export-nav a { display: grid; grid-template-columns: 25px 1fr; gap: 9px; padding: 12px 10px; border: 1px solid transparent; border-radius: 8px; color: #6f7c82; text-decoration: none; }
.export-nav a:hover, .export-nav a.active { color: var(--ink); background: #fff; border-color: #dfe5e5; box-shadow: 0 4px 12px rgba(24,38,44,.05); }
.export-nav a b { padding-top: 2px; color: #8dbd33; font: 700 9px var(--font-display); }
.export-nav a span { display: grid; gap: 3px; }
.export-nav a strong { font-size: 10px; }
.export-nav a small { color: #939fa4; font-size: 8px; }
.export-nav-note { margin-top: auto; padding: 13px; border-radius: 8px; background: #eaf2da; }
.export-nav-note span { color: #506724; font-size: 9px; font-weight: 700; }
.export-nav-note p { margin: 6px 0 0; color: #718052; font-size: 8px; line-height: 1.65; }

.export-pages { min-width: 0; overflow: auto; scroll-behavior: smooth; padding: 28px max(30px, calc((100% - 794px) / 2)); }
.export-sheet { position: relative; width: 210mm; height: 297mm; margin: 0 auto 32px; padding: 12mm 13mm 10mm; overflow: hidden; background: white; box-shadow: 0 16px 45px rgba(17,29,34,.16); color: #162026; }
.sheet-header { position: relative; z-index: 2; height: 11mm; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #cfd7d8; background: white; }
.sheet-header > div:last-child { display: flex; align-items: center; gap: 14px; color: #8b989d; }
.sheet-header small { font: 700 7px var(--font-display); letter-spacing: .14em; }
.sheet-header b { color: #253137; font: 700 9px var(--font-display); }
.sheet-logo { display: flex; align-items: center; gap: 8px; }
.sheet-logo span { width: 20px; height: 15px; border-top: 4px double #88ba2f; border-bottom: 4px double #88ba2f; transform: skewY(-18deg); }
.sheet-logo strong { font: 700 11px var(--font-display); letter-spacing: .06em; }
.sheet-kicker { color: #8ab92f; font: 700 7px var(--font-display); letter-spacing: .18em; }
.sheet-footer { position: absolute; z-index: 2; left: 13mm; right: 13mm; bottom: 6mm; display: flex; justify-content: space-between; padding-top: 2mm; border-top: 1px solid #d7dddd; background: white; color: #899499; font: 600 7px var(--font-display); letter-spacing: .05em; }

.quote-heading { display: flex; justify-content: space-between; align-items: flex-start; padding: 8mm 0 4mm; }
.quote-heading h1, .sheet-title-row h1 { margin: 2mm 0 0; font-size: 24px; letter-spacing: .12em; }
.quote-meta { display: grid; gap: 2mm; width: 55mm; }
.quote-meta label, .quote-recipient-grid label { display: grid; grid-template-columns: 19mm 1fr; align-items: center; gap: 2mm; }
.quote-meta label span, .quote-recipient-grid label > span { color: #7e8b90; font-size: 7px; font-weight: 600; }
.quote-meta input, .quote-recipient-grid input { min-width: 0; width: 100%; height: 7mm; padding: 0 2mm; border: 0; border-bottom: 1px solid #cbd3d5; outline: 0; background: #f7f9f8; color: #1d292f; font-size: 9px; }
.quote-meta input:focus, .quote-recipient-grid input:focus { border-color: #8fbe37; background: #f3f9e8; }
.quote-alert { display: grid; align-content: center; gap: 1mm; min-height: 16mm; margin: 0 0 4mm; padding: 2.5mm 4mm; border-left: 1mm solid #c62828; background: #fff4f4; color: #c62828 !important; -webkit-text-fill-color: #c62828 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 15px; font-weight: 700; line-height: 1.35; }
.quote-alert p { margin: 0; color: #c62828 !important; -webkit-text-fill-color: #c62828 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; white-space: nowrap; }
.quote-recipient-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5mm 7mm; padding: 4mm 0 5mm; border-top: 1px solid #e0e5e6; }
.quote-recipient-grid .quote-recipient { grid-column: 1 / -1; grid-template-columns: 19mm 1fr; }
.quote-recipient-grid .quote-project { grid-column: 1 / -1; }
.quote-recipient input { height: 9mm; font-size: 13px; font-weight: 700; }

.quote-total-card { display: flex; align-items: flex-end; justify-content: space-between; padding: 5mm 6mm; color: white; background: #142026; }
.quote-total-card > div { display: grid; gap: 2mm; }
.quote-total-card span { color: #9ea9ad; font-size: 8px; font-weight: 600; }
.quote-total-card span small { margin-left: 2mm; font-weight: 400; }
.quote-total-card strong { font: 700 27px/1 var(--font-display); }
.quote-total-card p { margin: 0; color: #9ea9ad; font-size: 8px; }
.quote-summary { display: grid; grid-template-columns: 1.2fr repeat(4,1fr); margin: 4mm 0 5mm; border: 1px solid #dce2e3; }
.quote-summary div { display: grid; gap: 1mm; padding: 3mm 4mm; border-right: 1px solid #dce2e3; }
.quote-summary div:last-child { border: 0; }
.quote-summary small { color: #8d999e; font-size: 7px; }
.quote-summary strong { font: 700 11px var(--font-display); }
.quote-summary .quote-profile-summary { background: #f4f9e9; }
.quote-summary .quote-profile-summary small { color: #718451; }
.quote-summary .quote-profile-summary strong { color: #46621b; font-size: 9px; }

.sheet-section-title { display: flex; align-items: center; gap: 3mm; margin-bottom: 2mm; }
.sheet-section-title span { color: #8bb932; font: 700 7px var(--font-display); }
.sheet-section-title strong { font-size: 9px; }
.quote-table { border-top: 1.5px solid #263238; border-bottom: 1.5px solid #263238; }
.quote-table-row { display: grid; grid-template-columns: minmax(0,1fr) 24mm 24mm 27mm; align-items: center; min-height: 7mm; border-bottom: 1px solid #dfe4e5; }
.quote-table-row.header { min-height: 5mm; color: #89959a; background: #f6f8f7; font-size: 6.5px; text-align: right; }
.quote-table-row.header span:first-child { padding-left: 2mm; text-align: left; }
.quote-table-row > span, .quote-table-row > strong { padding: 0 2mm; font-size: 7.5px; text-align: right; }
.quote-table-row .quote-item { display: grid; gap: .5mm; text-align: left; }
.quote-table-row .quote-item b { font-size: 8px; }
.quote-table-row .quote-item small { color: #909ba0; font-size: 6px; }
.quote-table-row > strong { font: 700 8px var(--font-display); }
.quote-total-breakdown { width: 72mm; margin: 4mm 0 0 auto; }
.quote-total-breakdown div { display: flex; justify-content: space-between; padding: 2mm 2mm; border-bottom: 1px solid #dce1e2; font-size: 8px; }
.quote-total-breakdown .grand { padding: 3mm 2mm; border: 0; color: white; background: #172328; }
.quote-total-breakdown .grand b { font: 700 12px var(--font-display); }
.quote-notes { position: absolute; left: 13mm; right: 98mm; bottom: 17mm; padding: 3mm 4mm; background: #f4f6f5; }
.quote-notes strong { font-size: 7.5px; }
.quote-notes ul { margin: 2mm 0 0; padding-left: 4mm; color: #6f7b80; font-size: 6.5px; line-height: 1.7; }
.quote-notes b { color: #445d1c; }

.sheet-title-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 7mm 0 5mm; }
.sheet-title-row.compact { padding-bottom: 3mm; }
.sheet-project-name { max-width: 75mm; padding: 2mm 3mm; border-left: 2px solid #9bca42; color: #5e6a70; font-size: 8px; text-align: right; }
.export-perspective-wrap { position: relative; height: 158mm; overflow: hidden; border: 1px solid #cfd7d8; background: #e9eef0; }
#export-canvas-container { position: absolute; inset: 0; }
#export-canvas-container canvas { width: 100%; height: 100%; display: block; }
.export-dimension-layer { position: absolute; inset: 0; pointer-events: none; }
.export-dimension-label { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #aebabc; border-radius: 3px; background: rgba(255,255,255,.94); box-shadow: 0 2px 6px rgba(21,33,39,.08); color: #26343a; font: 700 9px var(--font-display); white-space: nowrap; }
.export-dimension-label::before, .export-dimension-label::after { content: ""; width: 16px; height: 1px; background: #7c8b91; }
.export-dimension-label.opening { border-color: #75bfc5; color: #147984; }
.export-dimension-label.opening::before, .export-dimension-label.opening::after { background: #3babb4; }
.export-dimension-label.shelf { border-color: #9a9dde; color: #4d50a0; }
.export-dimension-label.shelf::before, .export-dimension-label.shelf::after { background: #7377c8; }
.perspective-edit-badge { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 5px; background: rgba(18,29,34,.84); color: white; font-size: 8px; }
.perspective-edit-badge i { width: 6px; height: 6px; border-radius: 50%; background: #a9dd48; }
.perspective-edit-badge.editing i { background: #ff9864; animation: pulse 1.2s infinite; }
.perspective-controls-hint { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 10px; padding: 6px 9px; border-radius: 5px; background: rgba(255,255,255,.88); color: #56656b; font-size: 7px; }
@keyframes pulse { 50% { opacity: .35; } }
.perspective-editor-bar { min-height: 16mm; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4mm; padding: 3mm 0; border-bottom: 1px solid #dde3e4; }
.perspective-editor-bar > div { display: flex; gap: 2mm; }
.perspective-editor-bar p { margin: 0; color: #7c898e; font-size: 7px; }
.perspective-button { height: 8mm; padding: 0 3mm; border: 1px solid #cbd3d5; border-radius: 4px; background: white; color: #526167; cursor: pointer; font-size: 7.5px; font-weight: 700; }
.perspective-button.primary { color: #1f3208; border-color: #9dca48; background: #dff7b1; }
.perspective-button.confirm { color: white; border-color: #1b282e; background: #1b282e; }
.perspective-button:disabled { opacity: .35; cursor: default; }
.perspective-specs { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 4mm; border: 1px solid #dde3e4; }
.perspective-specs div { display: grid; gap: 1mm; padding: 3mm; border-right: 1px solid #dde3e4; }
.perspective-specs div:last-child { border: 0; }
.perspective-specs small { color: #89959a; font-size: 6.5px; }
.perspective-specs strong { font: 700 9px var(--font-display); }

.ortho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.ortho-grid figure { margin: 0; border: 1px solid #d5dcdd; background: #f8faf9; }
.ortho-grid .ortho-plan { grid-column: 1 / -1; }
.ortho-grid figcaption { height: 9mm; display: grid; grid-template-columns: 23mm 1fr auto; align-items: center; padding: 0 3mm; border-bottom: 1px solid #dce2e3; background: white; }
.ortho-grid figcaption span { color: #8bb932; font: 700 6.5px var(--font-display); letter-spacing: .1em; }
.ortho-grid figcaption strong { font-size: 8px; }
.ortho-grid figcaption small { color: #8d999e; font-size: 6.5px; }
.ortho-grid img { display: block; width: 100%; height: 38mm; object-fit: contain; background: #f6f9f8; }
.ortho-plan img { height: 62mm; }
.ortho-legend { display: flex; align-items: center; gap: 6mm; margin-top: 4mm; padding: 3mm 4mm; border: 1px solid #dce2e3; color: #647278; font-size: 7px; }
.ortho-legend span { display: flex; align-items: center; gap: 2mm; }
.ortho-legend i { display: inline-block; width: 4mm; height: 4mm; }
.legend-panel { border: 1px solid #acb8b2; background: #f4f6f1; }
.legend-pipe { width: 2mm !important; border-radius: 99px; background: #68767b; }
.legend-base { background: #aab2b2; }
.ortho-legend b { margin-left: auto; color: #2f3b40; font-size: 7px; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 64px minmax(0, 1fr) 340px; }
  .topbar { grid-template-columns: 180px minmax(180px, 1fr) auto; }
  .button-ghost { display: none; }
  .toolrail { padding-left: 5px; padding-right: 5px; }
  .camera-hint { display: none; }
  .export-workspace { grid-template-columns: 180px minmax(0,1fr); }
  .export-topbar { grid-template-columns: 180px minmax(160px,1fr) auto; }
  .export-title span { display: none; }
  .export-actions .export-secondary:first-child { display: none; }
}

@media (max-height: 720px) {
  .tool-button { height: 47px; }
  .panel-section { padding-top: 15px; padding-bottom: 14px; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 210mm; height: auto; overflow: visible; background: white; }
  body.export-print .app, body.export-print .rules-dialog { display: none !important; }
  body.export-print .export-studio { position: static; display: block; background: white; }
  body.export-print .export-topbar, body.export-print .export-nav, body.export-print .perspective-editor-bar, body.export-print .perspective-controls-hint { display: none !important; }
  body.export-print .export-workspace, body.export-print .export-pages { display: block; overflow: visible; padding: 0; }
  body.export-print .export-sheet { width: 210mm; height: 297mm; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  body.export-print .export-pages > .export-sheet:last-child { break-after: auto; page-break-after: auto; }
  body.export-print .export-perspective-wrap { height: 166mm; }
  body.export-print .quote-alert, body.export-print .quote-alert p { color: #c62828 !important; -webkit-text-fill-color: #c62828 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body.export-print .quote-meta input, body.export-print .quote-recipient-grid input { background: transparent; }
}

/* Independent wall placement and grouped estimates. */
.wall-group-list { display: grid; gap: 6px; margin-bottom: 10px; color: #657278; font-size: 11px; }
.wall-group-button { width: 100%; padding: 10px 12px; text-align: left; border: 1px solid #d3ded6; border-radius: 6px; background: white; color: #526167; cursor: pointer; font: inherit; }
.wall-group-button.active { border-color: #96bd49; background: #f1f8e5; color: #365217; font-weight: 700; }
.wall-group-delete { padding: 8px 10px; border: 1px solid #dfc8c3; border-radius: 5px; background: #fff9f7; color: #a65544; cursor: pointer; font-size: 10px; }
.wall-group-delete:disabled { opacity: .4; cursor: default; }
.placement-hint { position: absolute; z-index: 15; top: 68px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 10px 15px; border: 1px solid #b3d56b; border-radius: 6px; color: #365217; background: #f4fae9; font-size: 12px; pointer-events: none; box-shadow: 0 3px 14px #17332318; }
.placing-wall .dimension-layer, .placing-wall .dimension-layer * { pointer-events: none !important; }
.wall-detail-pages { display: contents; }
.wall-detail-summary { display: flex; justify-content: space-between; gap: 4mm; margin-bottom: 5mm; padding: 4mm; background: #f3f7ef; font-size: 9px; }
.wall-detail-summary strong { white-space: nowrap; }
.wall-detail-table .quote-table-row:not(.header) { min-height: 10mm; }
.wall-detail-table .quote-item small { overflow-wrap: anywhere; }
.wall-allocation-note { margin-top: 4mm; color: #6f7b80; font-size: 7px; line-height: 1.7; }
.export-nav { overflow-y: auto; }

.plan-action-row { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.plan-action-row button, .plan-import-dialog button { padding: 9px 12px; border: 1px solid #c6d5cd; border-radius: 5px; color: #365217; background: #f3f8eb; cursor: pointer; font: inherit; font-size: 11px; }
.plan-section .field-grid { margin-top: 12px; }
#plan-file-status { overflow-wrap: anywhere; }
.layer-swatch.plan { background: #f3f4e7; border: 1px solid #91ac77; }
.plan-import-dialog { width: min(1100px, 94vw); height: 92vh; max-width: 94vw; max-height: 94vh; padding: 0; border: 1px solid #b9c9c0; border-radius: 10px; color: #253438; background: #f8faf9; box-shadow: 0 22px 90px #0005; }
.plan-import-dialog[open] { display: flex; flex-direction: column; }
.plan-import-dialog::backdrop { background: #172526aa; }
.plan-import-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; background: #fff; border-bottom: 1px solid #d4ded8; }
.plan-import-header h2 { margin: 0; font-size: 18px; }
.plan-import-header p { margin: 5px 0 0; font-size: 11px; color: #697774; overflow-wrap: anywhere; }
.plan-import-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 20px; font-size: 12px; }
.plan-import-dialog input, .plan-import-dialog select { max-width: 150px; padding: 8px; border: 1px solid #bccdc2; border-radius: 4px; background: #fff; color: #253438; font: inherit; }
.plan-zoom-tools { display: flex; gap: 5px; margin-left: auto; }
.plan-import-message { min-height: 20px; margin: 0; padding: 4px 20px 10px; font-size: 12px; color: #326f4e; }
.plan-import-message.error { color: #a03524; }
.plan-preview-scroll { flex: 1; min-height: 120px; overflow: auto; margin: 0 20px; border: 1px solid #c7d1ca; background: #e0e7e3; }
#plan-preview-surface { position: relative; width: 100%; line-height: 0; }
#plan-preview-canvas { display: block; width: 100%; height: auto; background: white; }
#plan-preview-surface.calibrating { cursor: crosshair; }
#plan-calibration-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.calibration-line { stroke: #21edca; stroke-width: 3; stroke-dasharray: 10 7; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #006b62) drop-shadow(0 0 5px #21edca); animation: calibration-dashes .65s linear infinite; }
.calibration-point { fill: #fff; stroke: #04967a; stroke-width: 3; vector-effect: non-scaling-stroke; }
.calibration-number { fill: #006749; stroke: #fff; stroke-width: 3; paint-order: stroke; font: bold 34px sans-serif; }
@keyframes calibration-dashes { to { stroke-dashoffset: -34; } }
.plan-import-footer { padding: 12px 20px; background: white; border-top: 1px solid #d4ded8; }
.plan-import-choices { display: flex; gap: 8px; }
#plan-place-original, #plan-apply-scale { background: #bbef60; border-color: #91c834; font-weight: 700; }
#plan-known-distance-field { margin-top: 10px; font-size: 12px; }
.plan-import-footer p { margin: 8px 0 0; font-size: 10px; color: #6a7972; }
.plan-import-dialog button:disabled { opacity: .45; cursor: default; }
@media print { .plan-import-dialog { display: none !important; } }
.plan-loupe { position: absolute; width: 160px; height: 160px; border: 3px solid #008c72; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 5; background: #fff; box-shadow: 0 4px 24px #062f4766; }
.plan-loupe[hidden], .wall-move-button[hidden], .projection-status[hidden] { display: none; }
.plan-loupe canvas { width: 100%; height: 100%; display: block; }
.plan-loupe span { position: absolute; bottom: 6px; left: 62px; padding: 2px 7px; background: #006b58; color: white; border-radius: 10px; font-size: 11px; }
.wall-move-button { position: absolute; z-index: 25; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 9px; border: 1px solid #68a62d; border-radius: 50%; color: #244e20; background: #e7ffd1; box-shadow: 0 3px 14px #183c3333; cursor: grab; touch-action: none; user-select: none; transform: translate(-50%, -50%); }
.wall-move-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.wall-move-button.dragging { cursor: grabbing; background: #bded80; }
.projection-status { position: absolute; top: 64px; left: 20px; z-index: 5; padding: 6px 10px; background: #eef8f3; color: #386454; border-radius: 5px; font-size: 11px; pointer-events: none; }
.plan-import-message, .plan-preview-scroll { user-select: none; }
.corner-joint-layer { position: absolute; inset: 0; pointer-events: none; z-index: 18; }
.corner-joint-button { position: absolute; transform: translate(-50%, -100%); padding: 7px 10px; border: 1px solid #a5bdce; border-radius: 6px; background: #f1f8ff; color: #285574; box-shadow: 0 2px 9px #173f5424; font: 600 10px var(--font); white-space: nowrap; pointer-events: auto; cursor: pointer; }
.corner-joint-button:hover { background: #d9edfc; border-color: #618da8; }
.corner-joint-button:focus-visible { outline: 2px solid #417a9b; outline-offset: 2px; }
.corner-joint-button.needs-adjustment { border-color: #c98d37; background: #fff2d9; }
.corner-joint-button[hidden] { display: none; }