:root {
  --bg: #edf1da;
  --bg-deep: #d7dfc6;
  --panel: #f7f5df;
  --panel-2: #dfe6c8;
  --ink: #18221c;
  --muted: #596759;
  --line: #304132;
  --green: #5b8f58;
  --green-deep: #325732;
  --red: #c96454;
  --amber: #c89c45;
  --sky: #9dc9bf;
  --blue: #7ca8bc;
  --peach: #f0cda9;
  --shadow: 0 8px 0 rgba(24, 34, 28, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(157, 201, 191, 0.22), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, #e1e5c6 100%);
}

button,
input {
  font: inherit;
}

.hidden {
  display: none !important;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 4px solid var(--line);
  background: rgba(247, 245, 223, 0.92);
  backdrop-filter: blur(8px);
}

.topbar-link,
.install-btn {
  border: 3px solid var(--line);
  background: var(--panel);
  box-shadow: 4px 4px 0 rgba(24, 34, 28, 0.18);
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 0.9rem;
}

.topbar-brand,
h1,
h2 {
  font-family: "Press Start 2P", monospace;
}

.topbar-brand {
  justify-self: center;
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  line-height: 1.5;
  text-align: center;
}

.install-btn {
  cursor: pointer;
}

.app-shell {
  width: min(1180px, calc(100vw - 1.5rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

.hero-panel,
.zone-card,
.panel-card,
.metric-card {
  border: 4px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-panel {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 1.2rem;
  padding: clamp(1rem, 3vw, 2rem);
  margin-bottom: 1rem;
}

.eyebrow,
.zone-kicker,
.metric-label,
.service-kind,
.tiny-label {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
}

h1 {
  margin: 0.7rem 0 1rem;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.35;
}

h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.hero-copy,
.status-copy {
  max-width: 56ch;
  color: #314132;
}

.hero-side {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.pulse-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.meta-chip {
  border: 3px solid var(--line);
  background: #edf3d6;
  padding: 0.7rem;
}

.meta-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.meta-chip strong {
  display: block;
  line-height: 1.4;
}

.status-badge {
  border: 4px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), #c7d7b4);
  padding: 1rem;
}

.status-badge span {
  display: block;
  font-family: "Press Start 2P", monospace;
  font-size: 0.95rem;
  line-height: 1.6;
}

.status-badge small {
  display: block;
  margin-top: 0.8rem;
  color: var(--muted);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.metric-card {
  padding: 1rem;
}

.metric-value {
  margin: 0.7rem 0 0.35rem;
  font-family: "Press Start 2P", monospace;
  font-size: 1rem;
  line-height: 1.4;
}

.metric-subtext {
  margin: 0;
  color: #314132;
}

.metric-track {
  margin-top: 0.8rem;
  height: 14px;
  border: 3px solid var(--line);
  background: #dde5cb;
}

.metric-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, #8dc27f 100%);
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.secondary-layout {
  grid-template-columns: 1.25fr 0.75fr;
}

.panel-card {
  padding: 1rem;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.zone-count,
.panel-meta,
.state-pill,
.table-pill {
  border: 3px solid var(--line);
  background: var(--panel-2);
  padding: 0.35rem 0.55rem;
  font-family: "Press Start 2P", monospace;
  font-size: 0.68rem;
  line-height: 1.5;
}

.map-panel {
  margin-bottom: 1rem;
}

.map-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.room-map {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1rem;
}

.room {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border: 4px solid var(--line);
  background: #edf3d7;
}

.workspace-room {
  background:
    linear-gradient(180deg, rgba(157, 201, 191, 0.25), transparent 42%),
    linear-gradient(180deg, #f6f6e8 0%, #dae4c8 100%);
}

.lounge-room {
  background:
    linear-gradient(180deg, rgba(200, 156, 69, 0.2), transparent 42%),
    linear-gradient(180deg, #fbf5e5 0%, #e7dcc0 100%);
}

.room::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(24, 34, 28, 0.08) 0 26px,
      rgba(24, 34, 28, 0.03) 26px 52px
    ),
    linear-gradient(180deg, rgba(24, 34, 28, 0.02), rgba(24, 34, 28, 0.08));
}

.room-banner {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.room-name,
.room-note,
.avatar-amenity,
.avatar-badge {
  border: 3px solid var(--line);
  padding: 0.35rem 0.5rem;
  background: rgba(247, 245, 223, 0.92);
}

.room-name {
  font-family: "Press Start 2P", monospace;
  font-size: 0.68rem;
  line-height: 1.5;
}

.room-note,
.avatar-amenity {
  font-size: 0.76rem;
  color: var(--muted);
}

.desk-grid,
.lounge-layout,
.avatar-layer {
  position: absolute;
  inset: 0;
}

.corridor {
  position: absolute;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(247, 245, 223, 0.94) 0 18px,
      rgba(230, 227, 199, 0.94) 18px 36px
    );
  border: 4px solid rgba(48, 65, 50, 0.14);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.workspace-corridor-h {
  top: 188px;
  left: 16px;
  right: 118px;
  height: 42px;
}

.workspace-corridor-v {
  top: 72px;
  left: 292px;
  width: 42px;
  bottom: 22px;
}

.lounge-corridor-h {
  top: 192px;
  left: 18px;
  right: 18px;
  height: 40px;
}

.lounge-corridor-v {
  top: 84px;
  left: 168px;
  width: 40px;
  bottom: 24px;
}

.furniture {
  position: absolute;
  border: 4px solid var(--line);
  box-shadow: 4px 4px 0 rgba(24, 34, 28, 0.12);
}

.desk {
  width: 110px;
  height: 60px;
  background:
    linear-gradient(180deg, #a3c2b2 0%, #6c8a7e 100%);
}

.desk::marker {
  content: "";
}

.desk::before,
.desk::after {
  content: "";
  position: absolute;
  bottom: -22px;
  width: 10px;
  height: 22px;
  background: #5b6e65;
  border-left: 4px solid var(--line);
  border-right: 4px solid var(--line);
}

.desk::before {
  left: 16px;
}

.desk::after {
  right: 16px;
}

.desk-a {
  background: linear-gradient(180deg, #9cc1b6 0%, #6c8a7e 100%);
}

.desk-b {
  background: linear-gradient(180deg, #b0c8d2 0%, #738ea3 100%);
}

.desk-c {
  background: linear-gradient(180deg, #d1c39c 0%, #ab8e58 100%);
}

.desk-d {
  background: linear-gradient(180deg, #c1bdde 0%, #847aa8 100%);
}

.desk-e {
  background: linear-gradient(180deg, #a8c9a2 0%, #688a61 100%);
}

.desk-f {
  background: linear-gradient(180deg, #d6b4a2 0%, #ac7d66 100%);
}

.desk-a,
.desk-b,
.desk-c,
.desk-d,
.desk-e,
.desk-f {
  overflow: visible;
}

.desk-a::after,
.desk-b::after,
.desk-c::after,
.desk-d::after,
.desk-e::after,
.desk-f::after {
  right: 16px;
}

.desk-a .monitor,
.desk-b .monitor,
.desk-c .monitor,
.desk-d .monitor,
.desk-e .monitor,
.desk-f .monitor {
  display: none;
}

.desk-a::selection,
.desk-b::selection,
.desk-c::selection,
.desk-d::selection,
.desk-e::selection,
.desk-f::selection {
  background: transparent;
}

.desk-a > *,
.desk-b > *,
.desk-c > *,
.desk-d > *,
.desk-e > *,
.desk-f > * {
  pointer-events: none;
}

.desk-a { top: 92px; left: 32px; }
.desk-b { top: 92px; left: 188px; }
.desk-c { top: 92px; left: 344px; }
.desk-d { top: 238px; left: 32px; }
.desk-e { top: 238px; left: 188px; }
.desk-f { top: 238px; left: 344px; }

.desk-a::after,
.desk-b::after,
.desk-c::after,
.desk-d::after,
.desk-e::after,
.desk-f::after {
  box-shadow:
    -26px -34px 0 -6px #f6f8ef,
    -26px -34px 0 0 var(--line),
    -6px -22px 0 -4px #2d3940,
    -6px -22px 0 0 var(--line);
}

.rack {
  top: 112px;
  right: 26px;
  width: 82px;
  height: 208px;
  background:
    repeating-linear-gradient(180deg, #2b3a32 0 16px, #567264 16px 32px);
}

.board {
  top: 342px;
  left: 30px;
  width: 230px;
  height: 64px;
  background: linear-gradient(180deg, #fbf3d9 0%, #e6d9b2 100%);
}

.board::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  width: 52px;
  height: 16px;
  background: #f08a72;
  box-shadow:
    64px 6px 0 #9dc9bf,
    132px 10px 0 #d6c66d,
    30px 28px 0 #7ca8bc,
    108px 28px 0 #c89c45;
}

.window {
  top: 24px;
  right: 138px;
  width: 118px;
  height: 56px;
  background: linear-gradient(180deg, #d8eef4 0%, #9dc9bf 100%);
}

.window::before,
.window::after {
  content: "";
  position: absolute;
  background: rgba(48, 65, 50, 0.6);
}

.window::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
}

.window::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
}

.poster {
  width: 58px;
  height: 78px;
  background: linear-gradient(180deg, #f7dfb7 0%, #d6a06b 100%);
}

.poster::before {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    linear-gradient(180deg, #46647f 0 18px, transparent 18px),
    linear-gradient(90deg, #5b8f58 0 18px, transparent 18px),
    linear-gradient(180deg, transparent 0 28px, #ef835d 28px 44px, transparent 44px);
}

.poster-a {
  top: 24px;
  left: 30px;
}

.tv {
  top: 104px;
  left: 32px;
  width: 118px;
  height: 86px;
  background:
    linear-gradient(180deg, #304132 0%, #1e2a22 100%);
}

.tv::after {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    linear-gradient(180deg, rgba(124, 168, 188, 0.85), rgba(157, 201, 191, 0.55));
}

.tv::before {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 44px;
  width: 22px;
  height: 18px;
  background: #304132;
  border-left: 4px solid var(--line);
  border-right: 4px solid var(--line);
  box-shadow: -18px 18px 0 -6px #304132, 18px 18px 0 -6px #304132;
}

.sofa {
  top: 228px;
  left: 44px;
  width: 144px;
  height: 88px;
  background: linear-gradient(180deg, #d68f70 0%, #bb6d4f 100%);
}

.coffee {
  top: 246px;
  left: 224px;
  width: 74px;
  height: 54px;
  background: linear-gradient(180deg, #e5d5a9 0%, #bda164 100%);
}

.coffee::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 18px;
  height: 18px;
  background: #f7f0dd;
  box-shadow: 28px 10px 0 #9dc9bf;
}

.coffee::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 14px;
  width: 8px;
  height: 18px;
  background: #8f7a55;
  box-shadow: 40px 0 0 #8f7a55;
}

.arcade {
  top: 112px;
  right: 38px;
  width: 84px;
  height: 150px;
  background:
    linear-gradient(180deg, #46647f 0%, #263b4d 100%);
}

.arcade::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  height: 46px;
  background: linear-gradient(180deg, #d8eef4 0%, #7ca8bc 100%);
  border: 4px solid rgba(24, 34, 28, 0.3);
}

.arcade::after {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef835d;
  box-shadow: 18px 8px 0 #d6c66d, 38px 2px 0 #5b8f58;
}

.bar {
  bottom: 42px;
  left: 34px;
  width: 160px;
  height: 64px;
  background: linear-gradient(180deg, #a67849 0%, #7d5534 100%);
}

.bar::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 10px;
  width: 26px;
  height: 22px;
  background: #f7f0dd;
  box-shadow: 34px 0 0 #9dc9bf, 68px 0 0 #f0cda9;
}

.bed {
  bottom: 38px;
  right: 38px;
  width: 148px;
  height: 84px;
  background:
    linear-gradient(180deg, #f2ddd4 0%, #d9bbb0 100%);
}

.bed::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 24px;
  background: #fff4ec;
}

.bed::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 22px;
  background: #d7bde4;
}

.table {
  top: 124px;
  left: 196px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0e2ba 0%, #ccb47a 100%);
}

.rug {
  top: 224px;
  left: 24px;
  width: 286px;
  height: 104px;
  border: 4px solid rgba(48, 65, 50, 0.2);
  background:
    linear-gradient(90deg, rgba(214, 143, 112, 0.25), rgba(240, 205, 169, 0.25)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.22) 22px 28px);
}

.bookshelf {
  top: 44px;
  left: 216px;
  width: 72px;
  height: 132px;
  background:
    repeating-linear-gradient(180deg, #7d5534 0 16px, #b78456 16px 22px);
}

.bookshelf::before {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    repeating-linear-gradient(90deg, #ef835d 0 8px, #d6c66d 8px 16px, #7ca8bc 16px 24px, #5b8f58 24px 32px);
}

.plant {
  width: 34px;
  height: 30px;
  background: linear-gradient(180deg, #9c6a3f 0%, #6e4528 100%);
}

.plant::before {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 16px;
  width: 24px;
  height: 26px;
  background:
    radial-gradient(circle at 50% 30%, #8ec67b 0 10px, transparent 11px),
    radial-gradient(circle at 20% 65%, #5b8f58 0 8px, transparent 9px),
    radial-gradient(circle at 80% 65%, #6ea468 0 8px, transparent 9px);
}

.plant-a {
  top: 96px;
  right: 144px;
}

.plant-b {
  bottom: 28px;
  right: 126px;
}

.plant-c {
  top: 82px;
  left: 316px;
}

.lamp {
  width: 18px;
  height: 118px;
  background: linear-gradient(180deg, #f8f0cc 0%, #dec980 24px, #645840 24px 100%);
}

.lamp::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -14px;
  width: 46px;
  height: 24px;
  background: #f8f0cc;
  border: 4px solid var(--line);
}

.lamp::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: -8px;
  width: 34px;
  height: 12px;
  background: #645840;
  border: 4px solid var(--line);
}

.lamp-a {
  top: 254px;
  right: 144px;
}

.lamp-b {
  top: 252px;
  right: 152px;
}

.poster-b {
  top: 34px;
  right: 150px;
  background: linear-gradient(180deg, #d4e5f0 0%, #81a3ba 100%);
}

.avatar-layer {
  z-index: 3;
}

.map-avatar {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 80px;
  transform: translate(-50%, -50%);
  animation: roam-avatar var(--float-duration, 4s) linear infinite;
}

.map-avatar[data-zone="lounge"] {
  animation-duration: calc(var(--float-duration, 3.2s) * 1.5);
}

.avatar-sprite {
  width: 64px;
  height: 72px;
  margin: 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(24, 34, 28, 0.18));
}

.map-avatar[data-motion="typing"] .arm-left {
  animation: typing-left 0.42s steps(2, end) infinite;
}

.map-avatar[data-motion="typing"] .arm-right {
  animation: typing-right 0.42s steps(2, end) infinite;
}

.map-avatar[data-motion="walking"] .leg-left,
.map-avatar[data-motion="resting"] .leg-left {
  animation: walk-left 0.7s steps(2, end) infinite;
}

.map-avatar[data-motion="patrol"] .leg-left {
  animation: walk-left 0.58s steps(2, end) infinite;
}

.map-avatar[data-motion="walking"] .leg-right,
.map-avatar[data-motion="resting"] .leg-right {
  animation: walk-right 0.7s steps(2, end) infinite;
}

.map-avatar[data-motion="patrol"] .leg-right {
  animation: walk-right 0.58s steps(2, end) infinite;
}

.map-avatar[data-motion="walking"] .arm-left,
.map-avatar[data-motion="resting"] .arm-left {
  animation: walk-right 0.7s steps(2, end) infinite;
}

.map-avatar[data-motion="patrol"] .arm-left {
  animation: walk-right 0.58s steps(2, end) infinite;
}

.map-avatar[data-motion="walking"] .arm-right,
.map-avatar[data-motion="resting"] .arm-right {
  animation: walk-left 0.7s steps(2, end) infinite;
}

.map-avatar[data-motion="patrol"] .arm-right {
  animation: walk-left 0.58s steps(2, end) infinite;
}

.map-avatar[data-motion="alert"] .arm-left,
.map-avatar[data-motion="alert"] .arm-right {
  animation: alert-arms 0.5s steps(2, end) infinite;
}

.map-avatar[data-motion="sleep"] .head,
.map-avatar[data-motion="resting"] .head {
  animation: nod-head 2.4s steps(2, end) infinite;
}

.map-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-badge,
.avatar-pin {
  font-family: "Press Start 2P", monospace;
  font-size: 0.55rem;
  line-height: 1.5;
}

.avatar-pin {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.12rem 0.2rem;
  border: 2px solid var(--line);
  background: rgba(247, 245, 223, 0.94);
}

.avatar-meta {
  position: absolute;
  left: calc(100% + 4px);
  top: 14px;
  display: grid;
  gap: 0.15rem;
  pointer-events: none;
}

.avatar-name-tag,
.avatar-role-tag {
  display: inline-block;
  max-width: 90px;
  padding: 0.12rem 0.3rem;
  border: 2px solid rgba(48, 65, 50, 0.85);
  background: rgba(247, 245, 223, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-name-tag {
  font-size: 0.68rem;
  font-weight: 700;
}

.avatar-role-tag {
  font-size: 0.58rem;
  color: var(--muted);
}

@keyframes roam-avatar {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(calc(-50% + var(--drift-x, 8px)), calc(-50% - var(--hop, 4px)));
  }
  50% {
    transform: translate(calc(-50% - var(--drift-x, 8px)), calc(-50% + var(--drift-y, 4px)));
  }
  75% {
    transform: translate(calc(-50% + var(--drift-x, 8px)), calc(-50% + var(--drift-y, 4px)));
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

@keyframes typing-left {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -1px); }
}

@keyframes typing-right {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3px, 1px); }
}

@keyframes walk-left {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 2px); }
}

@keyframes walk-right {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}

@keyframes alert-arms {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -4px); }
}

@keyframes nod-head {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, 2px); }
}

.worker-name {
  margin: 0 0 0.3rem;
  font-weight: 700;
}

.worker-role,
.worker-detail,
.source-meta p,
.alert-card p {
  margin: 0.2rem 0 0;
  color: #314132;
}

.service-table,
.process-list,
.alert-list,
.source-meta {
  display: grid;
  gap: 0.75rem;
}

.service-row,
.process-card,
.alert-card {
  border: 3px solid var(--line);
  background: #f1efd7;
  padding: 0.85rem;
}

.service-row {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 0.8rem;
  align-items: center;
}

.service-name {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.service-notes,
.service-meta {
  margin: 0.2rem 0 0;
  color: #314132;
  font-size: 0.94rem;
}

.service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.state-good,
.state-running {
  background: #d6edc8;
}

.state-resting {
  background: #f0debe;
}

.state-degraded,
.state-alert {
  background: #efc0b5;
}

.process-card {
  display: grid;
  gap: 0.45rem;
}

.process-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
}

.meter-line {
  display: grid;
  grid-template-columns: 3.7rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.meter-bar {
  height: 12px;
  border: 2px solid var(--line);
  background: #dde5cb;
}

.meter-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sky), var(--green));
}

.alert-card {
  background: #f8f2e3;
}

.alert-card strong {
  display: block;
  margin-bottom: 0.35rem;
}

@media (max-width: 900px) {
  .hero-panel,
  .detail-layout,
  .secondary-layout {
    grid-template-columns: 1fr;
  }

  .room-map,
  .pulse-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app-shell {
    width: min(100vw - 1rem, 100%);
  }

  .app-topbar {
    grid-template-columns: 1fr;
  }

  .topbar-brand {
    justify-self: start;
  }

  .service-row {
    grid-template-columns: 1fr;
  }

  .zone-count,
  .panel-meta,
  .state-pill,
  .table-pill {
    font-size: 0.62rem;
  }

  .room {
    min-height: 520px;
  }

  .desk-a { top: 112px; left: 10%; }
  .desk-b { top: 112px; left: 40%; }
  .desk-c { top: 112px; left: 69%; }
  .desk-d { top: 252px; left: 10%; }
  .desk-e { top: 252px; left: 40%; }
  .desk-f { top: 252px; left: 69%; }

  .desk {
    width: 82px;
    height: 48px;
  }

  .rack {
    right: 4%;
    width: 64px;
    height: 180px;
  }

  .workspace-corridor-v {
    left: 58%;
  }

  .workspace-corridor-h,
  .lounge-corridor-h {
    right: 14px;
  }

  .board {
    width: 170px;
  }

  .map-avatar {
    width: 74px;
  }
}