/* Match public/index.html: native controls, white sidebar, navy 800px viewport. */
.main { display: flex; gap: 20px; }
#app { flex: 1; min-width: 0; height: 800px; background-color: #071a43; position: relative; overflow: hidden; }
.sidebar { width: 600px; flex-shrink: 0; }
.tools { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 20px; }
.models { display: flex; flex-wrap: wrap; gap: 10px; }
.model-item { box-sizing: content-box; width: 100px; min-height: 130px; padding: 0; cursor: pointer; border: 2px solid #fff; text-align: center; background: #fff; color: #000; font: inherit; }
.model-item.active { border-color: #00ff80; }
.model-item img { display: block; width: 100%; height: 100px; object-fit: contain; background: #eee; }
.model-item span { display: block; padding-top: 3px; }
.model-item:disabled { cursor: default; opacity: .5; }
.model-item:focus-visible { outline: 2px solid #071a43; outline-offset: 2px; }
.sidebar fieldset { margin-bottom: 4px; min-width: 0; }
.size-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.size-fields label { display: flex; align-items: center; gap: 6px; }
.size-fields input { width: 90px; }
.metrics { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.metrics strong { font-weight: normal; }
.help { font-size: 13px; color: #666; }
#status, #size-message { font-size: 14px; }
[hidden] { display: none !important; }
#app canvas { display: block; touch-action: none; }
.dimension-label { padding: 4px 6px; border: 1px solid #ff7772; background: rgba(255,249,241,.95); color: #bd3b38; font: 13px sans-serif; white-space: nowrap; pointer-events: none; transform: translateY(-16px); }
@media (max-width: 1000px) {
  .main { flex-direction: column; }
  #app { flex: none; height: 60vh; min-height: 360px; width: 100%; }
  .sidebar { width: 100%; }
}