:root { color-scheme: light; font-family: "Yu Gothic UI", "Meiryo", sans-serif; }
* { box-sizing: border-box; }
html, body, #viewer { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: linear-gradient(180deg, #f8fafc 0%, #edf2f5 100%); }
canvas { display: block; width: 100%; height: 100%; outline: none; }
.view-toolbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  width: min(96%, 760px); padding: 7px; border-radius: 10px;
  background: rgba(255,255,255,.92); box-shadow: 0 4px 18px rgba(28,45,52,.16);
  backdrop-filter: blur(8px); z-index: 5;
}
.view-toolbar button {
  border: 1px solid #c9d4d9; border-radius: 6px; padding: 6px 10px;
  background: #fff; color: #26383e; font-size: 12px; cursor: pointer;
}
.view-toolbar button:hover { background: #e8f2ec; border-color: #6e997a; }
.model-badge, .paint-badge, .help {
  position: absolute; z-index: 4; border-radius: 7px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.model-badge { top: 70px; left: 12px; padding: 7px 11px; color: #fff; background: rgba(56,105,70,.9); font-weight: 700; }
.paint-badge { top: 112px; left: 12px; padding: 6px 10px; color: #fff; background: rgba(210,126,40,.92); }
.inspection-hint {
  position: absolute; right: 18px; bottom: 18px; z-index: 5;
  padding: 8px 13px; border: 1px solid rgba(75,108,84,.35); border-radius: 9px;
  color: #345640; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(28,45,35,.12);
  font-size: 13px; pointer-events: none; transition: background .18s ease, color .18s ease;
}
.inspection-hint-active { color: #fff; background: rgba(66,112,78,.94); }
.help { bottom: 10px; left: 50%; transform: translateX(-50%); padding: 6px 10px; background: rgba(255,255,255,.88); color: #52636a; font-size: 11px; white-space: nowrap; }
@media (max-width: 640px) { .help { white-space: normal; width: 92%; text-align: center; } .model-badge { top: 105px; } }