.customer-shell { padding-bottom: 48px; }
.customer-topbar { margin-bottom: 18px; }
.customer-route-bar,
.route-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.route-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration: none;
}
.route-chip-active {
  border-color: rgba(212,177,112,.34);
  background: linear-gradient(180deg, rgba(212,177,112,.18), rgba(255,255,255,.03));
}
.customer-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.hero-copy { color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.hero-actions, .inline-actions, .stacked-actions, .card-head, .runtime-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.summary-grid.customer-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.compact-card { min-height: 132px; }
.compact-card strong { font-size: 2rem; }
.customer-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.chart-stack {
  display: grid;
  gap: 12px;
}
.chart-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 12px;
  align-items: center;
}
.chart-label { color: var(--muted); font-size: .94rem; }
.chart-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
}
.chart-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,177,112,.92), rgba(239,201,123,.78));
}
.chart-value { color: var(--text); font-weight: 700; font-size: .95rem; }
.customer-layout {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 18px;
  align-items: start;
}
.left-column,
.right-column {
  display: grid;
  gap: 18px;
  align-content: start;
}
.form-grid {
  display: grid;
  gap: 12px;
}
.form-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid label,
.upload-box {
  display: block;
}
.form-grid label span,
.upload-box span,
.toggle-line span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}
.form-grid textarea,
.form-grid input,
.form-grid select {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 12px 14px;
}
.form-grid textarea { resize: vertical; }
.form-grid .full { grid-column: 1 / -1; }
.consent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 14px;
}
.toggle-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.toggle-line input { width: auto; margin: 0; }
.toggle-line span { margin: 0; }
.helper-text { color: var(--muted); font-size: .88rem; }
.top-gap { margin-top: 14px; }
.photo-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, .92fr);
  gap: 16px;
  align-items: start;
}
.photo-stage {
  min-height: 320px;
  border-radius: 24px;
  border: 1px dashed rgba(212,177,112,.24);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.photo-preview,
.camera-video {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
}
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-video {
  object-fit: cover;
  background: #0e1116;
}
.hidden { display: none !important; }
.upload-box {
  border: 1px dashed rgba(212,177,112,.28);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.03);
}
.upload-box input { display: block; width: 100%; margin-top: 10px; }
.photo-actions-panel { display: grid; gap: 12px; align-content: start; }
.runtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.runtime-card {
  min-height: 92px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.runtime-label { color: var(--gold); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.selected-profile-box,
.response-box,
.empty-state {
  min-height: 140px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 16px;
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.6;
}
.profile-card-row,
.visit-row {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.profile-row-head,
.visit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.profile-row-meta,
.visit-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .88rem;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.profile-actions,
.visit-actions,
.list-stack { display: grid; gap: 12px; }
.profile-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.list-title { margin: 0; font-size: 1.03rem; }
.small-note { color: var(--muted); font-size: .9rem; }
.disabled-link {
  opacity: .55;
  pointer-events: none;
}
.pass-photo-thumb {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.selected-profile-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.status-good { color: var(--gold-strong); }
.status-danger { color: #ff8d8d; }
@media (max-width: 1180px) {
  .summary-grid.customer-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-layout,
  .customer-charts-grid,
  .photo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .customer-hero,
  .topbar,
  .profile-row-head,
  .visit-head,
  .selected-profile-header { flex-direction: column; align-items: stretch; }
  .form-grid.two-col,
  .consent-grid,
  .runtime-grid,
  .summary-grid.customer-summary-grid { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 1fr; }
}