* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f7;
  margin: 0;
  padding: 16px;
  color: #1d1d1f;
}

main {
  max-width: 540px;
  margin: 32px auto;
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

h1 { margin-top: 0; }

.lede { color: #6e6e73; }

button {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: #0066cc;
  color: white;
  cursor: pointer;
  margin: 8px 4px;
}
button:hover { background: #0052a3; }
button:disabled { background: #d2d2d7; cursor: not-allowed; }
button.secondary { background: #e8e8ed; color: #1d1d1f; }

input[type="text"] {
  width: 100%;
  padding: 14px;
  font-size: 28px;
  text-align: center;
  letter-spacing: 12px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  margin: 8px 0 16px 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

video {
  width: 100%;
  background: black;
  border-radius: 8px;
  margin: 16px 0;
  aspect-ratio: 16 / 9;
}

.code {
  font-size: 56px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 16px;
  padding: 24px;
  background: #f5f5f7;
  border-radius: 8px;
  margin: 16px 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: #0066cc;
}

.hint { color: #6e6e73; font-size: 14px; }

.privacy {
  font-size: 12px;
  color: #6e6e73;
  margin-top: 24px;
  padding: 12px;
  background: #f5f5f7;
  border-radius: 8px;
  line-height: 1.5;
}

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  margin: 8px 4px;
  font-weight: 500;
  background: #0066cc;
  color: white;
}
.btn-secondary { background: #e8e8ed; color: #1d1d1f; }
.btn-primary:hover { background: #0052a3; }
.btn-secondary:hover { background: #d2d2d7; }

.links { margin-top: 24px; }

#status {
  font-size: 12px;
  color: #6e6e73;
  margin-top: 16px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  word-break: break-word;
}

/* Connection quality badge (rep) */
.quality {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.quality.good { background: #e6f7ec; color: #1e7d3a; }
.quality.fair { background: #fff8e1; color: #b85800; }
.quality.poor { background: #fdecea; color: #c2272d; }
.quality.unknown { background: #f0f0f3; color: #6e6e73; }

/* Paused state (admin badge + customer notice) */
.badge.paused { background: #fdecea; color: #c2272d; }
.badge.active { background: #e6f7ec; color: #1e7d3a; }
.badge.hostname-pending { background: #fff8e1; color: #b85800; }
.badge.hostname-active { background: #e6f7ec; color: #1e7d3a; }
.badge.hostname-failed { background: #fdecea; color: #c2272d; }
tr.paused-row { background: #faf5f5; }
tr.paused-row td { color: #888; }
.paused-notice {
  text-align: center;
  padding: 32px;
  background: #fff8e1;
  border: 1px solid #ffe0a0;
  border-radius: 8px;
  color: #6e3700;
}
.paused-notice h2 { margin-top: 0; }

/* Camera selector (customer) */
#cameraSelectWrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #424247;
}
/* ID selector above (1,0,0) beats the UA [hidden] rule (0,1,0), so we have
   to restate the hidden=>none rule with at least matching specificity. */
#cameraSelectWrap[hidden] { display: none; }
#cameraSelectWrap select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: white;
  max-width: 220px;
}

/* Cam controls (rep + customer) */
.cam-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.cam-controls button.secondary {
  background: #e8e8ed;
  color: #1d1d1f;
}
.cam-controls button.secondary:hover { background: #d2d2d7; }

/* Rep video frame with fullscreen overlay button */
.video-frame {
  position: relative;
  width: 100%;
}
.video-frame video {
  width: 100%;
  background: black;
  border-radius: 8px;
  margin: 16px 0;
  aspect-ratio: 16 / 9;
}
.video-overlay-btn {
  position: absolute;
  top: 24px;
  right: 8px;
  padding: 6px 10px;
  font-size: 18px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 0;
  line-height: 1;
}
.video-overlay-btn:hover { background: rgba(0,0,0,0.7); }
.video-frame:fullscreen {
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.video-frame:fullscreen video {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}
.video-frame:fullscreen .video-overlay-btn {
  top: 16px;
  right: 16px;
  font-size: 22px;
  padding: 10px 14px;
}

/* Rep "Enlarge" mode — page-level zoom of video */
body.rep-enlarged main {
  max-width: none;
  margin: 8px;
  padding: 16px;
}
body.rep-enlarged main h1,
body.rep-enlarged main p,
body.rep-enlarged main #status { display: none; }
body.rep-enlarged .video-frame video {
  aspect-ratio: auto;
  height: calc(100vh - 80px);
  width: 100%;
  object-fit: contain;
}

/* ============================================================
   Marketing pages (body.marketing) — landing, pricing, contact.
   Rep + customer pages keep the simple stylesheet above.
   ============================================================ */

body.marketing {
  padding: 0;
  background: #fff;
  line-height: 1.55;
}

body.marketing .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

body.marketing h1, body.marketing h2, body.marketing h3 {
  letter-spacing: -0.01em;
}

body.marketing h1 { font-size: 56px; line-height: 1.05; margin: 16px 0 24px; }
body.marketing h2 { font-size: 36px; margin: 0 0 16px; }
body.marketing h3 { font-size: 20px; margin: 0 0 8px; }

body.marketing .section {
  padding: 80px 0;
  border-top: 1px solid #e8e8ed;
}

body.marketing .section-lede {
  color: #6e6e73;
  font-size: 19px;
  max-width: 720px;
  margin: 0 0 32px;
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e8e8ed;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-header .brand {
  font-weight: 700;
  font-size: 22px;
  color: #1d1d1f;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.site-header .brand span { color: #0066cc; }

.site-nav { display: flex; gap: 28px; }
.site-nav a {
  color: #1d1d1f;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.site-nav a:hover { color: #0066cc; }
.site-nav a.cta-link {
  background: #0066cc;
  color: white;
  padding: 8px 16px;
  border-radius: 999px;
}
.site-nav a.cta-link:hover { background: #0052a3; color: white; }
.site-nav a.signin-link {
  border: 1px solid #d2d2d7;
  padding: 7px 16px;
  border-radius: 999px;
}
.site-nav a.signin-link:hover { border-color: #0066cc; }

.powered-by {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #6e6e73;
}
.powered-by a { color: #0066cc; text-decoration: none; }
.powered-by a:hover { text-decoration: underline; }

/* ============================================================
   Admin console (body.admin)
   ============================================================ */

body.admin {
  padding: 0;
  background: #f5f5f7;
  line-height: 1.5;
}
body.admin .wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
body.admin .brand small {
  font-size: 12px;
  text-transform: uppercase;
  color: #6e6e73;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
body.admin .user-badge {
  font-size: 13px;
  color: #6e6e73;
  margin-right: 12px;
  white-space: nowrap;
}

.admin-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
.admin-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.admin-section h2 { margin: 0; font-size: 22px; }
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}
.admin-section-header > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-table { overflow-x: auto; }
.admin-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th {
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 2px solid #e8e8ed;
  color: #6e6e73;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f3;
  vertical-align: top;
}
.admin-table td.dim { color: #6e6e73; font-size: 12px; }
.admin-table td.detail {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table code {
  font-size: 12px;
  background: #f5f5f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.admin-table a { color: #0066cc; text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }
.admin-table .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,0.1);
}
.empty {
  color: #6e6e73;
  text-align: center;
  padding: 32px;
  font-size: 14px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tier-basic { background: #f0f0f3; color: #6e6e73; }
.tier-pro { background: #e6efff; color: #0052a3; }
.tier-enterprise { background: #1d1d1f; color: white; }
.role-rep { background: #e6efff; color: #0052a3; }
.role-primary-admin { background: #fff4e6; color: #b85800; }

.link-btn {
  background: transparent;
  border: none;
  color: #0066cc;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 13px;
}
.link-btn:hover { background: #f5f5f7; border-radius: 4px; }
.link-btn.danger { color: #c2272d; }

.select {
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  background: white;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-card h3 { margin-top: 0; }
.modal-card form label {
  display: block;
  margin: 14px 0;
  font-size: 14px;
  color: #1d1d1f;
}
.modal-card form input[type="text"],
.modal-card form input[type="email"],
.modal-card form input[type="url"],
.modal-card form input:not([type]),
.modal-card form select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  margin-top: 6px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-family: inherit;
  letter-spacing: 0;
  text-align: left;
}
.modal-card form input[type="color"] {
  width: 60px;
  height: 36px;
  padding: 2px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  margin-top: 6px;
  cursor: pointer;
}
.modal-card form input[readonly] {
  background: #f5f5f7;
  color: #6e6e73;
}
.modal-card form code {
  font-size: 12px;
  background: #f0f0f3;
  padding: 2px 4px;
  border-radius: 3px;
}
.modal-card .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-card .checkbox-row input { width: auto; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e8e8ed;
}
.invite-block {
  margin: 16px 0;
  padding: 16px;
  background: #f5f8ff;
  border: 1px solid #d6e4ff;
  border-radius: 8px;
}
.invite-block pre {
  background: white;
  padding: 12px;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid #d2d2d7;
}
.invite-url-input {
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  background: white;
  margin: 8px 0;
}
.hint.error { color: #c2272d; }
.hint.success { color: #1e7d3a; }

/* Settings form (manage page) */
.settings-form { margin-top: 8px; }
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.settings-grid label {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.settings-grid label.checkbox-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
}
.settings-grid label .hint {
  font-weight: normal;
  color: #6e6e73;
  font-size: 12px;
}
.settings-grid input[type="text"],
.settings-grid input[type="email"],
.settings-grid input[type="url"],
.settings-grid input:not([type]) {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  margin-top: 6px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-family: inherit;
  letter-spacing: 0;
  text-align: left;
}
.settings-grid input[type="color"] {
  width: 60px;
  height: 36px;
  padding: 2px;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  margin-top: 6px;
  cursor: pointer;
}
.settings-grid label.locked {
  position: relative;
  opacity: 0.55;
}
.settings-grid label.locked input,
.settings-grid label.locked select {
  cursor: not-allowed;
  background: #f5f5f7;
}
.lock-hint {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b85800;
  background: #fff4e6;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.tier-banner {
  background: #fff8e6;
  border: 1px solid #ffe0a0;
  color: #6e3700;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}
.tier-banner a { color: #0066cc; }
.tier-display { display: inline-flex; align-items: center; }
.settings-readonly {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e8e8ed;
}
.settings-readonly h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6e6e73;
  margin: 0 0 12px;
}
.settings-readonly dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
}
.settings-readonly dt { color: #6e6e73; font-size: 13px; }
.settings-readonly dd { margin: 0; font-size: 14px; }
.settings-readonly code {
  font-size: 13px;
  background: #f5f5f7;
  padding: 2px 6px;
  border-radius: 4px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e8e8ed;
}
.form-actions .hint { color: #6e6e73; font-size: 13px; }
.form-actions .hint.success { color: #1e7d3a; }
.form-actions .hint.error { color: #c2272d; }
@media (max-width: 700px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-readonly dl { grid-template-columns: 1fr; }
}

/* hero */
.hero {
  padding: 96px 0 80px;
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
  text-align: center;
}
.hero .lede {
  font-size: 21px;
  color: #424247;
  max-width: 680px;
  margin: 0 auto 36px;
}
.pill {
  display: inline-block;
  padding: 6px 14px;
  background: #e6efff;
  color: #0052a3;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.steps li {
  background: #f5f5f7;
  padding: 32px;
  border-radius: 16px;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #0066cc;
  color: white;
  border-radius: 50%;
  font-weight: 700;
  margin-bottom: 16px;
  font-size: 16px;
}
.steps p { color: #424247; margin: 0; }

/* pricing */
.pricing { background: #fafafa; }
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.pricing-card {
  background: white;
  border: 1px solid #e8e8ed;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  border-color: #0066cc;
  box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
  position: relative;
}
.pricing-card.featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #0066cc;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pricing-card .price {
  font-size: 32px;
  font-weight: 700;
  margin: 8px 0 16px;
  color: #1d1d1f;
}
.pricing-card .price-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: -0.02em;
}
.pricing-card .price-unit {
  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
  margin-left: 6px;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.pricing-card ul li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f3;
  color: #424247;
  font-size: 15px;
}
.pricing-card ul li:last-child { border-bottom: none; }
.pricing-card ul li code {
  font-size: 13px;
  background: #f5f5f7;
  padding: 2px 6px;
  border-radius: 4px;
}
.pricing-cta { text-align: center; margin-top: 40px; }

/* whitelabel two-column */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.feature-list li {
  padding: 12px 0 12px 28px;
  position: relative;
  color: #424247;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 14px;
  height: 14px;
  background: #0066cc;
  border-radius: 50%;
  opacity: 0.15;
}
.feature-list li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 22px;
  width: 6px;
  height: 6px;
  background: #0066cc;
  border-radius: 50%;
}
.feature-list li strong { color: #1d1d1f; }
.feature-list code {
  font-size: 14px;
  background: #f5f5f7;
  padding: 2px 6px;
  border-radius: 4px;
}
.feature-list.inline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  margin-top: 16px;
}
.features-aside {
  background: #f5f5f7;
  padding: 32px;
  border-radius: 16px;
}
.features-aside h3 { margin-bottom: 16px; }
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  padding: 10px 0 10px 26px;
  color: #424247;
  position: relative;
  font-size: 15px;
  border-bottom: 1px solid #e8e8ed;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: '✓';
  color: #0066cc;
  position: absolute;
  left: 0;
  top: 10px;
  font-weight: 700;
}

/* contact */
.contact { background: #f5f8ff; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.contact-grid > div {
  background: white;
  padding: 24px;
  border-radius: 12px;
}
.contact-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.contact-grid a {
  color: #0066cc;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}
.contact-grid a:hover { text-decoration: underline; }

/* footer */
.site-footer {
  border-top: 1px solid #e8e8ed;
  padding: 32px 0;
  background: #fafafa;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer p {
  margin: 0;
  font-size: 13px;
  color: #6e6e73;
}
.footer-links a {
  color: #6e6e73;
  font-size: 13px;
  text-decoration: none;
}
.footer-links a:hover { color: #0066cc; }

/* mobile */
@media (max-width: 800px) {
  body.marketing h1 { font-size: 38px; }
  body.marketing h2 { font-size: 28px; }
  body.marketing .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 13px; }
  .steps, .pricing-cards, .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .feature-list.inline { grid-template-columns: 1fr; }
}

/* Domain setup wizard */
.setup-section { border-left: 4px solid #0066cc; background: #f0f7ff; }
.dns-table { width: 100%; border-collapse: collapse; margin: 12px 0; background: #fff; border: 1px solid #d0d7de; }
.dns-table th, .dns-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #d0d7de; }
.dns-table th { background: #f6f8fa; font-weight: 600; font-size: 13px; }
.dns-table code { font-size: 13px; }
.badge.hostname-pending { background: #fff4d6; color: #8a6d00; }
.badge.hostname-active { background: #d4f4dd; color: #186a3b; }
.badge.hostname-failed { background: #ffd6d6; color: #8a0000; }

/* Danger zone (delete tenant) */
.danger-zone { margin-top: 24px; padding-top: 16px; border-top: 1px solid #f0d0d0; }
.danger-zone summary { color: #b00020; font-weight: 600; cursor: pointer; padding: 8px 0; }
.danger-zone summary:hover { color: #800000; }
.danger-zone p { margin: 8px 0; font-size: 14px; color: #555; }
.danger-zone input[type="text"] {
  width: 100%; padding: 8px 10px; margin: 8px 0; border: 1px solid #d0d7de;
  border-radius: 4px; font-family: monospace; font-size: 14px;
}
.btn-danger {
  background: #b00020; color: white; border: none; padding: 8px 16px;
  border-radius: 4px; cursor: pointer; font-weight: 600;
}
.btn-danger:hover:not(:disabled) { background: #800000; }
.btn-danger:disabled { background: #ccc; color: #888; cursor: not-allowed; }

/* Customer page white-label theming.
   Tenant primaryColor is set by JS on documentElement as --brand-color.
   Consumers use var(--brand-color, #0066cc) so the fallback only kicks in
   when the tenant didn't set a color. (Setting the fallback on body.customer
   would override the documentElement value because body is a closer ancestor.)
   These rules apply only on body.customer so admin/marketing pages keep the
   nXio palette. */
body.customer .brand-logo {
  display: block;
  max-height: 80px;
  max-width: 240px;
  margin: 0 auto 16px;
  object-fit: contain;
}
body.customer h1 {
  text-align: center;
}
body.customer #entry,
body.customer #active {
  text-align: center;
}
body.customer #entry input {
  display: block;
  margin: 0 auto 12px;
}
/* Stack camera dropdown and Stop sharing on separate lines, both centered. */
body.customer .cam-controls {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
body.customer .cam-controls > * {
  margin: 0 auto;
}
body.customer button {
  background: var(--brand-color, #0066cc);
}
body.customer button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-color, #0066cc) 85%, black);
}
body.customer button.secondary {
  background: #e8e8ed;
  color: #1d1d1f;
}
body.customer button.secondary:hover:not(:disabled) {
  background: #d2d2d7;
}
body.customer .powered-by a,
body.customer a {
  color: var(--brand-color, #0066cc);
}

/* Rep portal white-label theming — always-on (no tier gate). Same pattern as
   body.customer but the "Powered by nXio Cam" footer is always visible
   regardless of tenant.poweredByVisible (we want nXio attribution on every
   rep portal regardless of MSP tier). */
body.rep .rep-nav {
  text-align: right;
  margin-bottom: 8px;
  font-size: 14px;
}
body.rep .rep-nav a {
  color: var(--brand-color, #0066cc);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
}
body.rep .rep-nav a:hover {
  background: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
}
body.rep .brand-logo {
  display: block;
  max-height: 64px;
  max-width: 200px;
  margin: 0 0 12px;
  object-fit: contain;
}
body.rep button:not(.secondary):not(.video-overlay-btn) {
  background: var(--brand-color, #0066cc);
}
body.rep button:not(.secondary):not(.video-overlay-btn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-color, #0066cc) 85%, black);
}
body.rep .powered-by a,
body.rep a {
  color: var(--brand-color, #0066cc);
}