* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  overflow: hidden;
  height: 100vh;
}

#canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 10;
}

header {
  padding: 16px 24px;
  background: rgba(16, 25, 43, .96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #2b3c52;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  pointer-events: auto;
}
header h1 { font-size: 18px; font-weight: 650; color: #f4f7fb; letter-spacing: -.025em; }
.header-left { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.property-link { color: #a9b9c9; font-size: 12px; text-decoration: none; }
.property-link:hover { color: #fff; }
.toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.mode-strip { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; border-top: 1px solid #26364a; padding-top: 10px; font-size: 12px; }
#selectedScan { color: #f0f5fa; font-weight: 550; }
#crouchBadge { color: #edce90; font-size: 11px; padding: 3px 8px; border: 1px solid #705e3e; border-radius: 20px; }
button:focus-visible, a:focus-visible { outline: 2px solid #91dcce; outline-offset: 3px; }
#scanPanel { width: min(1120px, calc(100vw - 32px)); max-height: 82dvh; margin: auto; padding: 24px; border: 1px solid #34475f; border-radius: 16px; background: #101b2c; color: #e5edf5; box-shadow: 0 24px 100px #0008; overflow: hidden; }
#scanPanel[open] { display: flex; flex-direction: column; gap: 24px; }
#scanPanel::backdrop { background: #050b17b3; backdrop-filter: blur(5px); }
.picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.picker-heading h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.picker-heading p, .picker-hint { color: #9cacc0; font-size: 12px; margin-top: 6px; }
#closeScanPanel { border: 1px solid #34475f; border-radius: 8px; background: #1b2a40; color: #fff; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; }
.picker-hint { display: none; }

.quality-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid #0f3460;
  border-radius: 6px;
  overflow: hidden;
  align-self: center;
}

.qual-btn {
  padding: 0.3rem 0.7rem;
  background: #16213e;
  color: #94a3b8;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}

.qual-btn + .qual-btn { border-left: 1px solid #0f3460; }

.qual-btn:hover { background: #1a2a4e; color: #e0e0e0; }

.qual-btn.active {
  background: #0f3460;
  color: #fff;
}

.qual-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.walk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.walk-controls button { min-height: 38px; padding: 8px 12px; border: 1px solid #40536d; border-radius: 8px; background: #1b2a40; color: #e9eff7; font-size: 12px; font-weight: 550; cursor: pointer; }
.navigation-mode { display: inline-flex; padding: 3px; border: 1px solid #40536d; border-radius: 10px; background: #0a1423; gap: 3px; }
.navigation-mode button { border-color: transparent; background: transparent; color: #a9b9c9; min-height: 32px; padding: 6px 12px; }
.navigation-mode button[aria-pressed="true"] { background: #a7dfd1; color: #102e29; box-shadow: 0 1px 4px #0004; }
.navigation-mode button[aria-pressed="true"]::before { content: '✓ '; }
.walk-controls button:disabled { opacity: .5; cursor: wait; }
#walkStatus { font-size: 12px; color: #9cacc0; }
.walking .vertical-pad { display: none; }
.walk-crosshair { display: none; position: fixed; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 2px black; pointer-events: none; }
.walking .walk-crosshair { display: block; }
#stairFade { position: fixed; inset: 0; background: #0f0f23; opacity: 0; transition: opacity .12s; pointer-events: none; z-index: 8; }
.stair-transition #stairFade { opacity: .95; }

.scan-grid {
  display: grid;
  grid-template-columns: 96px repeat(7, minmax(88px, 1fr));
  width: 100%;
  overflow: auto;
  padding: 3px 3px 12px;
  scrollbar-width: thin;
  gap: 0.4rem;
  align-items: center;
  pointer-events: auto;
}

.unassigned-scans {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.scan-note {
  grid-column: var(--scan-note-start, 3) / -1;
  min-width: 0;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #94a3b8;
}

.scan-grid .col-header,
.scan-grid .row-header {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.4rem;
}

.scan-grid .col-header {
  text-align: center;
  padding-bottom: 0.2rem;
}

.scan-grid .row-header {
  text-align: right;
  white-space: nowrap;
}

.scan-btn {
  padding: 0.4rem 1rem;
  border: 1px solid #0f3460;
  border-radius: 6px;
  background: #16213e;
  color: #94a3b8;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  pointer-events: auto;
  min-width: 0;
}

.scan-btn:hover:not(:disabled) {
  background: #1a2a4e;
  color: #e0e0e0;
}

.scan-btn.active {
  background: #0f3460;
  color: #fff;
  border-color: #1a5ab8;
}

.scan-btn:disabled {
  opacity: 0.3;
  border-color: transparent;
  background: transparent;
  cursor: default;
}