:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f6f2ea;
  background: #151816;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: flex; flex-direction: column; }

.navbar {
  width: 100%;
  min-height: 84px;
  padding: 14px 22px;
  background: #1d211e;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex;
  align-items: center;
  gap: 28px;
  z-index: 2;
}

.brand { min-width: 190px; }
.eyebrow { margin: 0 0 8px; color: #d3a45d; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.04em; }

.tabs { display: flex; gap: 8px; padding: 5px; background: #111411; border-radius: 12px; }
.view-button, .secondary-button { border: 0; border-radius: 8px; color: #dce1db; background: transparent; cursor: pointer; font: inherit; }
.view-button { min-width: 110px; padding: 10px 16px; font-weight: 700; }
.view-button.active { color: #1b1e1b; background: #d3a45d; }
.secondary-button { margin-left: auto; padding: 10px 14px; border: 1px solid rgba(255,255,255,.16); white-space: nowrap; }
.secondary-button:hover { background: rgba(255,255,255,.08); }
.status { margin: 0 0 0 4px; color: #d3a45d; font-size: .8rem; white-space: nowrap; }
#scene-container { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 700px) {
  .navbar { min-height: 70px; padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand .eyebrow { margin-bottom: 3px; font-size: .58rem; }
  h1 { font-size: 1.05rem; }
  .tabs { order: 3; width: 100%; padding: 3px; }
  .view-button { flex: 1; min-width: 0; padding: 8px 10px; font-size: .86rem; }
  .secondary-button { margin-left: 0; padding: 8px 10px; font-size: .76rem; }
  .status { font-size: .7rem; }
}