:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #e8edf2;
  background: #0b1118;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #152332, #0b1118 56%); }
header, main { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
header { padding: 36px 0 20px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: 1.12rem; }
.eyebrow { color: #74b8ff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 18px; padding-bottom: 40px; }
section { border: 1px solid #263646; border-radius: 14px; background: rgba(17, 26, 35, .94); padding: 20px; box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.setup-panel { display: flex; flex-direction: column; gap: 10px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-switch button[aria-pressed="false"] { background: #182635; }
.room-controls { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #34485a; border-radius: 10px; }
.room-controls[hidden] { display: none; }
.helper-controls { display: grid; gap: 8px; padding: 12px; border: 1px solid #34485a; border-radius: 10px; }
.helper-controls[hidden] { display: none; }
label { color: #c8d2dc; font-weight: 650; }
input, select, button { min-height: 44px; border-radius: 8px; border: 1px solid #405266; font: inherit; }
input, select { width: 100%; padding: 9px 11px; color: #f3f7fa; background: #0d151e; }
button { padding: 8px 14px; color: #f8fbff; background: #205f9d; cursor: pointer; font-weight: 700; }
button:hover:not(:disabled) { background: #2875bf; }
button:disabled { cursor: not-allowed; opacity: .48; }
.hint, .status, #updated-time, .legend, .asset-status, .position-status { color: #9eabb8; font-size: .92rem; }
.status { min-height: 1.25rem; margin: 4px 0 0; }
.status.error { color: #ffb4a8; }
.asset-status, .position-status { margin: 4px 0 0; }
.position-status { min-height: 1.25rem; color: #ffcf99; font-weight: 650; }
.map-panel { min-width: 0; }
.map-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.map-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.map-controls button { min-width: 44px; min-height: 36px; padding: 5px 10px; }
#map-canvas { display: block; width: 100%; max-height: 68vh; border: 1px solid #34485a; border-radius: 10px; background: #16202a; }
.legend { margin-top: 12px; }
.own-dot { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; background: #1687ff; }
.other-dot { display: inline-block; width: 11px; height: 11px; margin: 0 5px 0 14px; border-radius: 50%; background: #35c46a; }
.member-status { margin: 10px 0 0; padding-left: 20px; color: #c8d2dc; font-size: .9rem; }
.privacy-panel { grid-column: 1 / -1; }
.privacy-panel p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } }