/* Monochromes Viewer-Layout */
:root {
  color-scheme: dark;
  --panel: rgba(0, 0, 0, 0.94);
  --panel-border: rgba(255, 255, 255, 0.24);
  --text: #ffffff;
  --muted: #bdbdbd;
  --accent: #ffffff;
  --button: #ffffff;
  --button-hover: #d9d9d9;
  --ok: #ffffff;
  --warn: #bdbdbd;
  --bad: #777777;
}
* { box-sizing: border-box; }
html, body, #app, #viewport { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #000; color: var(--text); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#menu { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px - env(safe-area-inset-top)); overflow: auto; border: 1px solid var(--panel-border); border-radius: 16px; background: var(--panel); backdrop-filter: blur(16px); box-shadow: 0 16px 55px rgba(0,0,0,.42); scrollbar-width: thin; }
.menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 15px 12px; border-bottom: 1px solid var(--panel-border); }
.menu-header strong { font-size: 17px; letter-spacing: .01em; }
.status { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.panel-section { padding: 13px 15px; border-bottom: 1px solid var(--panel-border); }
.panel-section:last-child { border-bottom: 0; }
h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .11em; color: var(--accent); }
.button { appearance: none; border: 1px solid #fff; border-radius: 9px; padding: 9px 12px; background: var(--button); color: #000; font: inherit; font-weight: 700; cursor: pointer; text-align: center; transition: background .15s ease, transform .15s ease; }
.button:hover { background: var(--button-hover); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button.secondary { width: 100%; margin-top: 8px; background: #111; color: #fff; border-color: #777; }
.button.secondary:hover { background: #fff; color: #000; border-color: #fff; }
.button.ghost { padding: 7px 9px; background: transparent; color: #fff; border: 1px solid var(--panel-border); font-size: 11px; }
.file-button { display: block; width: 100%; }
.file-button.secondary-file { margin-top: 7px; background: #111; color: #fff; border-color: #777; }
.file-button.small { margin-top: 7px; padding: 7px 10px; background: #111; color: #fff; border-color: #777; font-size: 12px; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.control-row { display: grid; gap: 5px; margin: 10px 0; }
.control-row > span { display: flex; justify-content: space-between; gap: 14px; color: #f2f2f2; font-size: 12px; }
.control-row output { color: var(--accent); font-variant-numeric: tabular-nums; }
.control-row.compact { margin-bottom: 4px; }
input[type="range"] { width: 100%; accent-color: #ffffff; }
input[type="number"] { width: 100%; padding: 6px 7px; border: 1px solid var(--panel-border); border-radius: 7px; background: #090909; color: var(--text); }
.check-row, .select-row { display: flex; align-items: center; gap: 9px; margin: 9px 0; font-size: 12px; }
.select-row { justify-content: space-between; }
select { max-width: 180px; padding: 6px 8px; border: 1px solid var(--panel-border); border-radius: 7px; background: #090909; color: var(--text); }
.three-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.three-controls label { font-size: 10px; color: var(--muted); }
.top-gap { margin-top: 15px; }
.hint { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.instructions p { margin: 6px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
kbd { border: 1px solid #777; border-bottom-width: 2px; border-radius: 4px; padding: 1px 4px; background: #111; color: #fff; font-family: inherit; font-size: 10px; }
.drop-zone { margin-bottom: 9px; padding: 15px 10px; border: 1px dashed #777; border-radius: 10px; background: rgba(255, 255, 255, .035); text-align: center; font-size: 12px; color: #fff; }
.drop-zone small { color: var(--muted); }
.drop-zone.dragging { border-color: #fff; background: rgba(255, 255, 255, .14); }
.diagnostic-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 11px; }
.diag { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.diag.ok { color: var(--ok); }
.diag.warn { color: var(--warn); }
.diag.bad { color: var(--bad); }
.diag.pending { color: var(--muted); }
.show-menu { position: fixed; z-index: 22; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
.vr-action { position: fixed; z-index: 26; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); min-width: 180px; padding: 13px 18px; border: 1px solid #fff; border-radius: 999px; background: rgba(0, 0, 0, .94); color: #fff; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vr-action.ready { background: #fff; color: #000; }
.vr-action.presenting { background: #333; color: #fff; }
.vr-action:disabled { opacity: .68; cursor: not-allowed; }
#reticle { position: fixed; z-index: 8; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.85); opacity: 0; pointer-events: none; }
body.pointer-locked #reticle { opacity: 1; }
#toast { position: fixed; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); max-width: min(620px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #777; border-radius: 10px; background: rgba(0,0,0,.92); color: white; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 600px) { #menu { width: min(345px, calc(100vw - 16px)); left: 8px; top: 8px; max-height: calc(100vh - 16px); } .panel-section { padding: 11px 13px; } .vr-action { right: 10px; bottom: 10px; min-width: 145px; } }

.axis-button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }

h3 { margin: 14px 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #d6d6d6; }
a.button { display: block; text-decoration: none; }
.data-pool { margin-bottom: 8px; }
.primary-action { margin: 10px 0 8px; }
.project-summary { margin: 8px 0 10px; padding: 9px 10px; border: 1px solid #444; border-radius: 8px; background: #080808; color: #d7d7d7; white-space: pre-wrap; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
details { margin: 8px 0; padding: 7px 8px; border: 1px solid #333; border-radius: 8px; background: #080808; }
summary { cursor: pointer; color: #d7d7d7; font-size: 11px; }
.button-grid.three-buttons { grid-template-columns: repeat(3, 1fr); }
.button-grid.three-buttons .button { padding-left: 6px; padding-right: 6px; }

.collision-toggle {
  border: 1px solid #ffffff;
  padding: 11px 12px;
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.collision-toggle input:checked + span::after {
  content: " · AKTIV";
}