:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  color: #17211f;
  background: #e9eeec;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }

.app-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(180px, 320px) minmax(max-content, 1fr);
  align-items: center;
  min-height: 62px;
  padding: 8px 14px;
  border-bottom: 1px solid #c8d2ce;
  background: rgba(250, 252, 251, .98);
  box-shadow: 0 2px 12px rgba(27, 48, 43, .07);
}

.brand, .app-actions, .legend, .legend-group, .workspace-toolbar, .side-heading, .total-block, .confidence-summary { display: flex; align-items: center; }
.brand { gap: 9px; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #fff; background: #0f766e; font-weight: 900; }
.brand div { display: grid; line-height: 1.15; }
.brand strong { font-size: .92rem; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: #77827f; font-size: .64rem; }
.app-actions { justify-content: flex-end; gap: 7px; }

button { border: 1px solid #c6d0cc; border-radius: 7px; padding: 8px 12px; color: #33413e; background: #fff; font-size: .76rem; font-weight: 700; }
button:hover { border-color: #75aa9d; background: #f4faf8; }
button.primary { border-color: #0f766e; color: #fff; background: #0f766e; box-shadow: 0 3px 9px rgba(15, 118, 110, .2); }
button.primary:hover { background: #0b665f; }
.panel-toggle { white-space: nowrap; }
.upload-control { display: inline-flex; align-items: center; border: 1px solid #c6d0cc; border-radius: 7px; padding: 8px 11px; color: #33413e; background: #fff; font-size: .76rem; font-weight: 700; cursor: pointer; }
.upload-control:hover { border-color: #75aa9d; background: #f4faf8; }
.upload-control input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.image-picker-field { display: grid; min-width: 0; gap: 2px; }
.image-picker-field label { color: #66736f; font-size: .58rem; font-weight: 800; letter-spacing: .06em; }
.image-picker { width: 100%; min-width: 0; overflow: hidden; border: 1px solid #bfcac6; border-radius: 7px; padding: 7px 30px 7px 10px; color: #33413e; background: #fff; font-size: .74rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.image-picker:hover { border-color: #75aa9d; }
.image-picker:focus-visible { border-color: #0f766e; outline: 3px solid rgba(15, 118, 110, .18); }
.image-picker:disabled { cursor: wait; opacity: .62; }

.app-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; height: calc(100vh - 62px); }
.workspace { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 12px; background: #e9eeec; }
.workspace-toolbar { justify-content: space-between; gap: 14px; min-height: 40px; padding: 0 4px; }
.workspace-toolbar > div:first-child, .side-heading > div { display: grid; gap: 2px; }
.workspace-toolbar strong { font-size: .86rem; }
.eyebrow { color: #7b8884; font-size: .59rem; font-weight: 800; letter-spacing: .14em; }
.legend { flex-wrap: wrap; justify-content: flex-end; gap: 5px 14px; color: #65726f; font-size: .66rem; font-weight: 700; }
.legend-group { gap: 8px; }.legend-group b { color: #42504c; font-size: .62rem; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend .high { background: #0f9f72; }.legend .medium { background: #df8d16; }.legend .low { background: #dc4f56; }
.legend .shape-window, .legend .shape-door, .legend .shape-unknown { width: 13px; height: 10px; border: 2px solid #53635e; border-radius: 1px; }
.legend .shape-door { border-radius: 10px 10px 0 0; border-bottom-style: dashed; }
.legend .shape-unknown { width: 0; height: 0; border: 0; border-right: 6px solid transparent; border-bottom: 11px solid #53635e; border-left: 6px solid transparent; border-radius: 0; }

.canvas-shell { position: relative; display: flex; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: auto; overscroll-behavior: contain; border: 1px solid #cbd4d1; border-radius: 10px; background-color: #dce3e0; background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.35) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.35) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.35) 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
#resultCanvas { display: block; flex: 0 0 auto; max-width: none; max-height: none; background: #fff; box-shadow: 0 5px 22px rgba(27, 45, 40, .18); cursor: grab; touch-action: none; transform-origin: center center; }
#resultCanvas.is-panning { cursor: grabbing; }
.zoom-controls { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 4px; border: 1px solid #c7d4d0; border-radius: 8px; padding: 4px; background: rgba(250,252,251,.96); box-shadow: 0 4px 14px rgba(27,48,43,.14); }
.zoom-controls button { min-width: 31px; padding: 6px 8px; }
.zoom-controls button:first-child, .zoom-controls button:nth-of-type(2) { font-size: 1rem; line-height: 1; }
.zoom-controls span { min-width: 46px; color: #53625e; font-size: .67rem; font-variant-numeric: tabular-nums; font-weight: 800; text-align: center; }
.empty-state, .canvas-shell > .loading { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); border: 1px solid #c9d3cf; border-radius: 9px; padding: 13px 18px; color: #65736f; background: rgba(255,255,255,.94); font-size: .76rem; box-shadow: 0 7px 22px rgba(23, 43, 38, .12); }
.canvas-shell > .loading { display: grid; min-width: 220px; justify-items: center; gap: 7px; text-align: center; }
.canvas-shell > .loading[hidden], .empty-state.hidden, .error[hidden] { display: none; }
.canvas-shell > .loading span { width: 27px; height: 27px; border: 3px solid #b9d7cf; border-top-color: #0f766e; border-radius: 50%; animation: spin .75s linear infinite; }
.canvas-shell > .loading strong { font-size: .78rem; }.canvas-shell > .loading small { color: #7c8985; font-size: .64rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.canvas-note { margin: 0 3px; overflow: hidden; color: #66736f; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }

.side-panel { min-width: 0; overflow: hidden; border-left: 1px solid #c7d0cd; background: #f5f7f6; }
.side-heading { justify-content: space-between; min-height: 55px; padding: 9px 11px 9px 14px; border-bottom: 1px solid #d3dbd8; background: #fff; }
.side-heading strong { font-size: .9rem; }
.side-heading button { border: 0; padding: 3px 8px; background: transparent; font-size: 1.25rem; }
.side-content { display: grid; max-height: calc(100vh - 117px); gap: 9px; overflow-y: auto; padding: 10px; }
.status, .summary-card, .verification-card { border: 1px solid #d3dbd8; border-radius: 9px; background: #fff; }
.status { padding: 9px 10px; color: #5e6c68; font-size: .7rem; line-height: 1.45; }
.status.ready { border-color: #99d1bf; color: #0c6653; background: #effbf7; }.status.error { border-color: #e7a4a8; color: #a33037; background: #fff2f2; }.status.busy { border-color: #e8cc8f; color: #7a5a10; background: #fff9e9; }

.summary-card { display: grid; grid-template-columns: 108px minmax(0,1fr); overflow: hidden; }
.total-block { justify-content: center; padding: 14px 8px; border-right: 1px solid #e1e6e4; color: #687571; }
.total-block > span { align-self: flex-start; margin-right: 5px; font-size: .66rem; font-weight: 700; }.total-block strong { color: #132723; font-size: 2rem; line-height: 1; }.total-block small { align-self: flex-end; margin: 0 0 2px 3px; }
.confidence-summary { display: grid; grid-template-columns: repeat(3, 1fr); padding: 11px 6px; }
.confidence-summary div { display: grid; min-width: 0; justify-items: center; gap: 4px; color: #75817e; font-size: .6rem; text-align: center; }
.confidence-summary strong { max-width: 100%; overflow: hidden; color: #26332f; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

.verification-card { display: grid; grid-template-columns: auto 105px; align-items: center; gap: 6px 10px; padding: 11px; }
.verification-card > label { font-size: .74rem; font-weight: 800; }
.verified-input { display: flex; align-items: center; overflow: hidden; border: 1px solid #c9d3cf; border-radius: 7px; }
.verified-input:focus-within { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.verified-input input { width: 100%; min-width: 0; border: 0; padding: 7px 4px 7px 8px; outline: 0; font-size: .78rem; }.verified-input span { padding-right: 7px; color: #697773; font-size: .67rem; }
.count-diff { grid-column: 1 / -1; border-radius: 5px; padding: 6px 8px; font-size: .66rem; font-weight: 700; }.count-diff.neutral { color: #727d7a; background: #f0f3f2; }

.result-section { min-height: 0; }
.result-title { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 7px; font-size: .75rem; }.result-title span { color: #75817d; font-size: .66rem; }
.result-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.result-list li { position: relative; display: block; min-height: 44px; width: 100%; border: 1px solid #d3dbd8; border-left: 4px solid #0f9f72; border-radius: 8px; padding: 9px 9px 9px 43px; color: #26332f; background: #fff; font-size: .7rem; line-height: 1.45; }
.result-list li::before { position: absolute; top: 9px; left: 7px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #334742; content: counter(result); counter-increment: result; font-size: .66rem; }
.result-list { counter-reset: result; }
.result-list li.door { border-left-color: #df8d16; }
.result-list li.muted { display: block; border: 1px dashed #cbd4d1; padding: 20px 10px; color: #7a8682; background: #fafbfb; text-align: center; }
.result-list li.muted::before { display: none; }
.result-list .kind { color: #26332f; font-weight: 800; margin-right: 4px; }.result-list li.door .kind { color: #715313; }
.error { margin: 0; border: 1px solid #e7a4a8; border-radius: 9px; padding: 9px 10px; color: #a33037; background: #fff2f2; font-size: .7rem; line-height: 1.45; }

@media (max-width: 860px) {
  .app-bar { grid-template-columns: minmax(0, 1fr) max-content; }
  .brand { display: none; }
  .image-picker-field { grid-column: 1 / 2; }
  .app-actions { grid-column: 2 / 3; }
  .app-layout { grid-template-columns: minmax(0,1fr) 310px; }
  .upload-control { display: none; }
}

@media (max-width: 640px) {
  html, body { overflow: auto; }
  .app-bar { position: sticky; top: 0; grid-template-columns: 1fr; gap: 7px; }
  .image-picker-field, .app-actions { grid-column: auto; }
  .app-actions { justify-content: stretch; }.app-actions button { flex: 1; }
  .app-layout { grid-template-columns: 1fr; height: auto; }
  .workspace { min-height: 65vh; }
  .side-panel { border-top: 1px solid #c7d0cd; border-left: 0; }
  .side-content { max-height: none; }
  .legend { justify-content: flex-start; }
}