@media (max-width: 900px) {
  .brand b,
  .brand span { font-size: 18px; }
  .top-actions .platform-state b { display: none; }
  .install-button { height: 34px; padding: 0 9px; font-size: 11px; }
  .content { padding: 14px; }
  .mobile-controls {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
  }
  .mobile-controls label { font-size: 9px; color: #708087; font-weight: 800; }
  .mobile-controls select {
    display: block;
    width: 100%;
    height: 38px;
    margin-top: 5px;
    border: 1px solid #c9d4d7;
    background: #fff;
    padding: 0 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
  }
  .live-panel { grid-column: 1; grid-row: 1; }
  .live-stage { height: auto; aspect-ratio: 16 / 9; }
  .flow-chart-panel { grid-row: 2; }
  .metric-strip article { min-height: 96px; }
  .metric-strip article:last-child { grid-column: 1 / 3; }
  .metric-strip strong { font-size: 29px; }
  .page-heading h1 { font-size: 23px; }
}

@media (max-width: 520px) {
  .topbar { padding: 10px 12px; }
  .top-actions { gap: 7px; }
  .install-button { padding: 0 8px; }
  .brand small { display: none; }
  .primary-nav button,
  .primary-nav a { padding: 0 11px; font-size: 12px; }
  .content { padding: 10px; }
  .mobile-controls { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip article { padding: 12px; }
  .metric-strip em { position: static; display: block; margin-top: 4px; }
  .panel > header { padding: 12px; height: 58px; }
  .panel h2 { font-size: 14px; }
  .live-panel > footer span {
    max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .activity-row { grid-template-columns: 4px minmax(0, 1fr); }
  .activity-row > em { grid-column: 2; text-align: left; }
  .alert-toolbar { display: block; }
  .alert-toolbar > b { display: block; margin-top: 9px; }
  .heat-grid { grid-template-columns: repeat(4, 1fr); height: auto; padding: 14px; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .donut-wrap dl { width: 100%; margin-top: 14px; }
  .flow-map { height: 320px; }
}

.install-button {
  height: 34px;
  border: 1px solid #4ed7e8;
  background: #173945;
  color: #dffaff;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.install-button:hover { background: #20505e; }

.install-guide {
  width: min(420px, calc(100vw - 32px));
  border: 0;
  padding: 26px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 50px #08151c66;
}

.install-guide::backdrop { background: #08151caa; }
.install-guide form { position: absolute; right: 12px; top: 10px; }
.dialog-close { border: 0; background: transparent; color: #60717a; font-size: 26px; cursor: pointer; }
.install-guide > span { display: block; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.install-guide h2 { margin: 6px 0 14px; font-size: 23px; }
.install-guide p { margin: 0 0 12px; color: #60717a; font-size: 13px; line-height: 1.65; }
.install-guide p b { color: #173945; }
.guide-confirm { height: 38px; min-width: 96px; margin-top: 6px; border: 0; background: #173d49; color: #fff; font-weight: 800; cursor: pointer; }
.feature-control-panel { min-height: 238px; }
.feature-control-panel > header > b { color: #7f949d; font-size: 10px; }
.feature-control-body { padding: 14px; }
.feature-control-body p { min-height: 34px; margin: 0 0 10px; color: #203942; font-size: 12px; font-weight: 800; line-height: 1.45; }
.feature-control-body label { display: block; margin-bottom: 5px; color: #6b8088; font-size: 10px; font-weight: 800; }
.feature-control-body select { width: 100%; height: 36px; border: 1px solid #b9cbd0; background: #fff; padding: 0 9px; color: #17313a; font-size: 12px; font-weight: 700; }
.feature-control-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7px; margin-top: 9px; }
.feature-control-actions button { min-height: 36px; border: 1px solid #2c7c8d; background: #173945; color: #efffff; font-size: 12px; font-weight: 800; cursor: pointer; }
.feature-control-actions button:last-child { background: #149eaf; }
.feature-control-actions button:disabled, .feature-control-body select:disabled { opacity: .45; cursor: default; }
.feature-control-body small { display: block; margin-top: 9px; color: #71848a; font-size: 10px; line-height: 1.5; }