/* Portal CSS bundle. Generated from current stylesheet order. */

/* ---- public/style.css ---- */
:root {
  --bg: #0b1220;
  --bg-2: #0f172a;
  --surface: rgba(15, 23, 42, 0.92);
  --surface-2: rgba(17, 24, 39, 0.96);
  --surface-3: rgba(10, 17, 32, 0.84);
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(214, 187, 24, 0.34);
  --text: #e5edf7;
  --muted: #98a7bd;
  --muted-2: #74849d;
  --brand: #d6bb18;
  --brand-soft: rgba(214, 187, 24, 0.14);
  --accent: #38bdf8;
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --ok-bg: rgba(34, 197, 94, 0.14);
  --warn-bg: rgba(245, 158, 11, 0.16);
  --danger-bg: rgba(239, 68, 68, 0.16);
  --info-bg: rgba(56, 189, 248, 0.14);
  --shadow-soft: 0 18px 40px rgba(2, 6, 23, 0.34);
  --shadow-hard: 0 26px 80px rgba(2, 6, 23, 0.5);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 14px;
}

/* Dashboard revamp */
.dashboard-revamp {
  display: grid;
  gap: 18px;
}

.dashboard-revamp__section {
  min-width: 0;
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 18px;
  align-items: stretch;
}

.dashboard-command-card,
.dashboard-reading-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.28);
}

.dashboard-command-card {
  padding: 24px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.12), transparent 20%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(155deg, rgba(7, 12, 22, 0.99), rgba(14, 22, 38, 0.97));
}

.dashboard-command-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.94fr);
  gap: 18px;
  align-items: stretch;
}

.dashboard-command-card__copy {
  display: grid;
  align-content: start;
  gap: 12px;
}

.dashboard-command-card__eyebrow {
  color: #f2de73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dashboard-command-card h1 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(38px, 4vw, 58px);
  line-height: .94;
  letter-spacing: -.06em;
}

.dashboard-command-card__lede,
.dashboard-command-card__summary {
  margin: 0;
  max-width: none;
}

.dashboard-command-card__lede {
  color: #d7e2f1;
  font-size: 15px;
  line-height: 1.62;
}

.dashboard-command-card__summary {
  color: #b8c8de;
  font-size: 14px;
  line-height: 1.72;
}

.dashboard-command-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.dashboard-command-card__stat {
  min-height: 108px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 32%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.05), transparent 20%),
    rgba(7, 13, 24, 0.66);
  display: grid;
  gap: 8px;
  align-content: start;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 12px 24px rgba(2, 6, 23, 0.14);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dashboard-command-card__stat:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 16px 28px rgba(2, 6, 23, 0.2);
}

.dashboard-command-card__stat span {
  color: #8ea4c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dashboard-command-card__stat strong {
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.05em;
}

.dashboard-command-card__stat small {
  color: #c1d0e4;
  font-size: 12px;
  line-height: 1.5;
}

.dashboard-command-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-command-card__actions .btn {
  min-height: 44px;
  border-radius: 16px;
}

.dashboard-command-card__featuregrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-command-card__feature {
  min-height: 84px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 24%),
    rgba(6, 11, 21, 0.62);
  display: grid;
  gap: 8px;
  align-content: start;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.dashboard-command-card__feature strong {
  font-size: 14px;
  line-height: 1.3;
}

.dashboard-command-card__feature span {
  color: #aabbd2;
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-command-card .dashboard-weather-inline {
  height: 100%;
  margin-top: 0;
  padding: 16px;
  border-radius: 22px;
  display: grid;
  align-content: start;
  gap: 12px;
  border-color: rgba(56, 189, 248, 0.18);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%),
    linear-gradient(145deg, rgba(8, 14, 24, 0.94), rgba(12, 18, 31, 0.94));
}

.dashboard-command-card .dashboard-weather-inline__head {
  align-items: flex-start;
}

.dashboard-command-card .dashboard-weather-inline__title {
  font-size: 16px;
}

.dashboard-command-card .dashboard-weather-inline__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  gap: 12px;
  align-items: stretch;
}

.dashboard-command-card .dashboard-weather-inline__focus {
  gap: 12px;
}

.dashboard-command-card .dashboard-weather-inline__facts {
  gap: 8px;
}

.dashboard-command-card .dashboard-weather-inline__fact {
  min-height: 76px;
  align-content: start;
}

.dashboard-command-card .dashboard-weather-inline__rail {
  width: auto;
  min-width: 0;
  gap: 8px;
}

.dashboard-reading-card {
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto auto minmax(260px, 1fr) auto;
  gap: 12px;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 20%),
    linear-gradient(180deg, rgba(7, 12, 21, 0.99), rgba(8, 13, 24, 0.97));
  align-content: start;
}

.dashboard-reading-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-reading-card__eyebrow {
  color: #94a9c6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dashboard-reading-card__plate {
  display: block;
  margin-top: 6px;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.05em;
}

.dashboard-reading-card__meta {
  color: #96a9c5;
  font-size: 12px;
  line-height: 1.5;
}

.dashboard-reading-card__name {
  color: #dce6f5;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-reading-card__media {
  appearance: none;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  overflow: hidden;
  background: #04070d;
  display: block;
  min-height: 0;
  height: 100%;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dashboard-reading-card__media:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.26);
}

.dashboard-reading-card__media:focus-visible {
  outline: 2px solid rgba(214, 187, 24, 0.34);
  outline-offset: 4px;
}

.dashboard-reading-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.dashboard-reading-card__placeholder {
  min-height: 0;
  height: 100%;
  min-height: 260px;
  border-radius: 22px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  place-items: center;
  padding: 22px;
  color: #8fa3bf;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.dashboard-reading-card__portfolio {
  display: grid;
  gap: 10px;
  align-content: start;
}

.dashboard-reading-card__account {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dashboard-reading-card__account:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(255, 255, 255, 0.05);
}

.dashboard-reading-card__account strong {
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-reading-card__account span,
.dashboard-reading-card__account small {
  color: #9fb0c7;
  font-size: 11px;
  line-height: 1.45;
}

.dashboard-reading-card__metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: auto;
  min-height: 0;
  align-content: start;
  grid-auto-rows: minmax(92px, auto);
}

.dashboard-reading-card__metric {
  min-height: 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.024), transparent 24%),
    rgba(255, 255, 255, 0.035);
  display: grid;
  gap: 6px;
  align-content: start;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.dashboard-reading-card__metric span {
  color: #8ca1bd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dashboard-reading-card__metric strong {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.05em;
}

.dashboard-reading-card__metric small {
  color: #c1d0e4;
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-client-feed {
  display: grid;
  gap: 12px;
}

.dashboard-client-feed__item {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.022), transparent 26%),
    rgba(255, 255, 255, 0.032);
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.012),
    0 10px 22px rgba(2, 6, 23, 0.1);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.dashboard-client-feed__item:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.26);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 16px 28px rgba(2, 6, 23, 0.16);
}

.dashboard-client-feed--attention .dashboard-client-feed__item {
  border-color: rgba(245, 158, 11, 0.18);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(8, 13, 24, 0.92);
}

.dashboard-client-feed__item--attention:hover {
  border-color: rgba(245, 158, 11, 0.32);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(8, 13, 24, 0.95);
}

.dashboard-client-feed__item strong {
  color: #f8fafc;
  font-size: 14px;
}

.dashboard-client-feed__item span,
.dashboard-client-feed__item small {
  color: #9fb0c7;
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-client-feed__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-client-feed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.dashboard-client-feed__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 6, 23, 0.3);
  color: #dbe7f5;
}

.dashboard-client-feed__metric--muted {
  color: #9fb0c7;
  background: rgba(15, 23, 42, 0.38);
}

.dashboard-client-feed__metric--ok {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(20, 83, 45, 0.22);
}

.dashboard-client-feed__metric--info {
  color: #bfdbfe;
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(7, 89, 133, 0.22);
}

.dashboard-client-feed__metric--warning {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(120, 53, 15, 0.22);
}

.dashboard-client-feed__metric--danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.22);
}

.dashboard-overview-grid {
  gap: 14px;
}

.dashboard-revamp .dashboard-priority-card {
  min-height: 134px;
  padding: 18px;
  border-radius: 20px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 26%),
    radial-gradient(circle at bottom right, rgba(214, 187, 24, 0.05), transparent 18%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.98), rgba(8, 12, 22, 0.98));
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

.dashboard-revamp .panel-grid {
  gap: 16px;
}

.dashboard-revamp .panel {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 28%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.96), rgba(6, 11, 21, 0.98));
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

.dashboard-revamp .panel-header {
  margin-bottom: 4px;
}

.dashboard-revamp .panel-header h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.08;
}

.dashboard-revamp .panel-header p {
  margin: 6px 0 0;
  color: #aabbd2;
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-revamp .compact-feed,
.dashboard-revamp .health-feed {
  gap: 12px;
}

.dashboard-revamp .compact-feed__item,
.dashboard-revamp .health-item {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.028);
}

.dashboard-revamp .detail-list__item,
.dashboard-revamp .device-strip__item,
.dashboard-revamp .chart-row {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.dashboard-revamp .detail-list__item,
.dashboard-revamp .device-strip__item {
  padding: 14px 16px;
}

.dashboard-revamp .chart-stack {
  display: grid;
  gap: 12px;
}

.dashboard-revamp .chart-row {
  grid-template-columns: minmax(96px, 148px) minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px 14px;
  align-items: center;
}

.dashboard-revamp .chart-label {
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-revamp .chart-value {
  min-width: 42px;
  font-size: 15px;
  font-weight: 900;
}

.dashboard-revamp .chart-bar {
  height: 10px;
}

.dashboard-weather-inline__pill-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.dashboard-weather-inline__pill-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-weather-inline__pill-copy strong,
.dashboard-weather-inline__pill-copy span {
  display: block;
  min-width: 0;
}

.dashboard-weather-inline__pill-copy small {
  color: #8fa7c6;
  font-size: 10px;
  line-height: 1.35;
}

.dashboard-weather-inline__icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.dashboard-weather-inline__icon span,
.dashboard-weather-inline__icon::before,
.dashboard-weather-inline__icon::after {
  position: absolute;
  content: "";
}

.dashboard-weather-inline__icon--sun::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #facc15 72%);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.14);
  animation: dashboardWeatherSunPulse 2.4s ease-in-out infinite;
}

.dashboard-weather-inline__icon--sun::after {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(250, 204, 21, 0.42);
  animation: dashboardWeatherSunSpin 9s linear infinite;
}

.dashboard-weather-inline__icon--moon::before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eef5ff, #b8c8e6 72%);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.dashboard-weather-inline__icon--moon::after {
  width: 11px;
  height: 11px;
  top: 1px;
  left: 7px;
  border-radius: 50%;
  background: rgba(8, 13, 24, 0.94);
}

.dashboard-weather-inline__icon--cloud::before {
  width: 14px;
  height: 8px;
  bottom: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #cfe0f7, #93abc8);
}

.dashboard-weather-inline__icon--cloud::after {
  width: 8px;
  height: 8px;
  top: 4px;
  left: 2px;
  border-radius: 50%;
  background: #d7e6f8;
  box-shadow: 5px -2px 0 1px #bfd1ea, 9px 1px 0 0 #a8bdd8;
  animation: dashboardWeatherCloudFloat 3.8s ease-in-out infinite;
}

.dashboard-weather-inline__icon--cloud span {
  width: 6px;
  height: 6px;
  right: 1px;
  top: 6px;
  border-radius: 50%;
  background: #d7e6f8;
}

.dashboard-weather-inline__icon--cloud-night::before {
  width: 14px;
  height: 8px;
  bottom: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c1d1ea, #7891b1);
}

.dashboard-weather-inline__icon--cloud-night::after {
  width: 8px;
  height: 8px;
  top: 4px;
  left: 2px;
  border-radius: 50%;
  background: #d7e6f8;
  box-shadow: 5px -2px 0 1px #bfd1ea, 9px 1px 0 0 #a8bdd8;
}

.dashboard-weather-inline__icon--cloud-night span {
  width: 8px;
  height: 8px;
  top: 1px;
  right: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eef5ff, #b8c8e6 72%);
  box-shadow: -4px 3px 0 rgba(8, 13, 24, 0.94);
}

.dashboard-weather-inline__icon--rain::before {
  width: 14px;
  height: 8px;
  top: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d5e3f6, #9ab1cd);
}

.dashboard-weather-inline__icon--rain::after {
  width: 8px;
  height: 8px;
  top: 0;
  left: 2px;
  border-radius: 50%;
  background: #e3eefc;
  box-shadow: 5px -1px 0 1px #c7d9ef, 9px 2px 0 0 #adc3dc;
}

.dashboard-weather-inline__icon--rain span {
  width: 2px;
  height: 7px;
  bottom: 0;
  left: 5px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 4px 1px 0 #38bdf8, 8px -1px 0 #38bdf8;
  animation: dashboardWeatherRainDrop 1.4s linear infinite;
}

@media (max-width: 1440px) {
  .dashboard-command-card__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  .dashboard-command-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-command-card .dashboard-weather-inline__body {
    grid-template-columns: 1fr;
  }

  .dashboard-revamp .chart-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dashboard-command-card,
  .dashboard-reading-card {
    padding: 18px;
    border-radius: 24px;
  }

  .dashboard-command-card__featuregrid,
  .dashboard-command-card__stats,
  .dashboard-reading-card__metric-grid,
  .dashboard-overview-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-command-card h1 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .dashboard-command-card,
  .dashboard-reading-card,
  .dashboard-revamp .panel {
    padding: 16px;
  }

  .dashboard-command-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .dashboard-reading-card__media,
  .dashboard-reading-card__placeholder {
    min-height: 220px;
  }
}

@keyframes dashboardWeatherSunPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .88; }
}

@keyframes dashboardWeatherSunSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dashboardWeatherCloudFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}

@keyframes dashboardWeatherRainDrop {
  0% { transform: translateY(-1px); opacity: .55; }
  50% { transform: translateY(1px); opacity: 1; }
  100% { transform: translateY(3px); opacity: .2; }
}

/* Dashboard top compression overrides */
.dashboard-command-grid {
  align-items: start;
}

.dashboard-command-card,
.dashboard-reading-card {
  height: auto;
  align-self: start;
}

.dashboard-command-card {
  grid-template-rows: auto;
  gap: 16px;
}

.dashboard-command-card__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-command-card .dashboard-weather-inline {
  height: auto;
}

.dashboard-reading-card {
  gap: 10px;
}

.dashboard-reading-card__media,
.dashboard-reading-card__placeholder {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

.dashboard-reading-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1440px) {
  .dashboard-command-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-command-card__stats {
    grid-template-columns: 1fr;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 24%),
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 22%),
    linear-gradient(180deg, #0b1220, #111827 48%, #0b1220);
  color: var(--text);
  font-family: "Aptos", "Segoe UI Variable", "Trebuchet MS", sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
code { font-family: "Cascadia Mono", "Consolas", monospace; font-size: 13px; }
img,
video {
  max-width: 100%;
}

.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(8, 14, 26, 0.98), rgba(9, 15, 26, 0.94));
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(18px);
  overflow-x: hidden;
  overflow-y: auto;
}

.content {
  min-width: 0;
  padding: max(18px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.playback-download-dock {
  position: fixed;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 28;
  width: min(420px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.94), rgba(3, 7, 16, 0.98));
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
  backdrop-filter: blur(14px);
}

.playback-download-dock__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.playback-download-dock__head strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
}

.playback-download-dock__head span {
  display: block;
  margin-top: 3px;
  color: rgba(148, 163, 184, 0.78);
  font-size: 11px;
  line-height: 1.45;
}

.playback-download-dock__list {
  display: grid;
  gap: 10px;
}

.playback-download-dock__item {
  display: grid;
  gap: 9px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.22);
  background: rgba(9, 14, 25, 0.84);
}

.playback-download-dock__item--ready {
  border-color: rgba(34, 197, 94, 0.3);
}

.playback-download-dock__item--failed,
.playback-download-dock__item--canceled {
  border-color: rgba(239, 68, 68, 0.24);
}

.playback-download-dock__item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.playback-download-dock__copy {
  min-width: 0;
}

.playback-download-dock__copy strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
}

.playback-download-dock__copy span,
.playback-download-dock__item-meta {
  color: rgba(191, 219, 254, 0.74);
  font-size: 11px;
}

.playback-download-dock__item-meta {
  display: grid;
  gap: 3px;
  color: rgba(148, 163, 184, 0.82);
}

.playback-download-dock__progress {
  position: relative;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(71, 85, 105, 0.2);
}

.playback-download-dock__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.92), rgba(214, 187, 24, 0.96));
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.28);
}

.playback-download-dock__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.playback-download-dock__stats span {
  display: grid;
  gap: 2px;
}

.playback-download-dock__stats small {
  color: rgba(148, 163, 184, 0.74);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playback-download-dock__stats strong {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.playback-download-dock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playback-download-dock__actions .btn {
  min-height: 34px;
  padding-inline: 12px;
}

.content-appbar,
.brand-card,
.profile-card,
.panel,
.stat-card,
.login-panel,
.list-card,
.notification-popover,
.account-popover,
.camera-fold,
.recorder-fold {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 30%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.92), rgba(8, 13, 24, 0.98));
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.28);
}

.content-appbar {
  position: sticky;
  top: 12px;
  z-index: 12;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  backdrop-filter: blur(18px);
}

.content-appbar__main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.content-appbar__eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.content-appbar__title {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.content-appbar__meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.content-appbar__side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.is-hidden {
  display: none !important;
}

.dashboard-weather-spotlight {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(214, 187, 24, 0.12), transparent 26%),
    linear-gradient(145deg, rgba(7, 13, 24, 0.98), rgba(12, 19, 33, 0.96));
  box-shadow: 0 20px 46px rgba(2, 6, 23, 0.28);
  overflow: hidden;
}

.dashboard-weather-spotlight[data-weather-state="raining"] {
  border-color: rgba(245, 158, 11, 0.24);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 26%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.12), transparent 24%),
    linear-gradient(145deg, rgba(10, 14, 24, 0.98), rgba(18, 23, 36, 0.96));
}

.dashboard-weather-spotlight__head,
.dashboard-weather-spotlight__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-weather-spotlight__head h2 {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -.03em;
}

.dashboard-weather-spotlight__head p {
  margin: 6px 0 0;
  color: #9cb0cc;
  font-size: 13px;
}

.dashboard-weather-spotlight__eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: #93dfff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dashboard-weather-spotlight__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-weather-spotlight__focus {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 20px;
  background: rgba(7, 13, 24, 0.62);
}

.dashboard-weather-spotlight__statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dashboard-weather-spotlight__updated {
  color: #9cb0cc;
  font-size: 12px;
}

.dashboard-weather-spotlight__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-weather-spotlight__fact {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.dashboard-weather-spotlight__fact span {
  color: #8ea1bc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dashboard-weather-spotlight__fact strong {
  font-size: 16px;
  letter-spacing: -.02em;
}

.dashboard-weather-spotlight__detail {
  color: #d6e2f2;
  font-size: 13px;
  line-height: 1.6;
}

.dashboard-weather-spotlight__progress {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.dashboard-weather-spotlight__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(214, 187, 24, 0.82));
  animation: dashboardWeatherProgress 5200ms linear forwards;
}

.dashboard-weather-spotlight__rail {
  width: min(320px, 34%);
  min-width: 220px;
  display: grid;
  gap: 8px;
}

.dashboard-weather-spotlight__pill {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 14, 24, 0.56);
  color: #dbe7f7;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.dashboard-weather-spotlight__pill:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.26);
}

.dashboard-weather-spotlight__pill.is-active {
  border-color: rgba(56, 189, 248, 0.34);
  background: rgba(15, 27, 42, 0.82);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
}

.dashboard-weather-spotlight__pill.is-raining {
  border-color: rgba(245, 158, 11, 0.28);
}

.dashboard-weather-spotlight__pill strong {
  font-size: 13px;
}

.dashboard-weather-spotlight__pill span {
  color: #96a9c5;
  font-size: 12px;
}

.dashboard-weather-inline {
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 12px 14px;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(8, 13, 23, 0.92), rgba(12, 19, 32, 0.92));
}

.dashboard-weather-inline[data-weather-state="raining"] {
  border-color: rgba(245, 158, 11, 0.22);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.1), transparent 24%),
    linear-gradient(145deg, rgba(10, 14, 24, 0.94), rgba(18, 23, 36, 0.94));
}

.dashboard-weather-inline__head,
.dashboard-weather-inline__body,
.dashboard-weather-inline__statusline,
.dashboard-weather-inline__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-weather-inline__head {
  align-items: flex-start;
}

.dashboard-weather-inline__eyebrow {
  display: inline-flex;
  margin-bottom: 4px;
  color: #93dfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dashboard-weather-inline__title {
  display: block;
  font-size: 14px;
  letter-spacing: -.02em;
}

.dashboard-weather-inline__meta,
.dashboard-weather-inline__updated {
  margin: 3px 0 0;
  color: #93a8c4;
  font-size: 11px;
}

.dashboard-weather-inline__body {
  align-items: stretch;
}

.dashboard-weather-inline__focus {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.dashboard-weather-inline__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.dashboard-weather-inline__fact {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.02);
}

.dashboard-weather-inline__fact span {
  color: #7f96b4;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dashboard-weather-inline__fact strong {
  font-size: 13px;
  letter-spacing: -.02em;
}

.dashboard-weather-inline__detail {
  color: #d3e1f2;
  font-size: 11px;
  line-height: 1.45;
}

.dashboard-weather-inline__progress {
  position: relative;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.12);
}

.dashboard-weather-inline__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.92), rgba(214, 187, 24, 0.78));
  animation: dashboardWeatherProgress 5200ms linear forwards;
}

.dashboard-weather-inline__rail {
  width: min(228px, 34%);
  min-width: 180px;
  display: grid;
  gap: 6px;
}

.dashboard-weather-inline__pill {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.02);
  color: #dce7f7;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dashboard-weather-inline__pill:hover {
  transform: translateY(-1px);
}

.dashboard-weather-inline__pill.is-active {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(14, 23, 38, 0.9);
}

.dashboard-weather-inline__pill.is-raining {
  border-color: rgba(245, 158, 11, 0.24);
}

.dashboard-weather-inline__pill strong {
  font-size: 12px;
}

.dashboard-weather-inline__pill span {
  color: #90a5c3;
  font-size: 11px;
}

@keyframes dashboardWeatherProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.dashboard-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
  gap: 14px;
  align-items: stretch;
}

.dashboard-showcase__main,
.dashboard-showcase__side {
  min-width: 0;
  height: 100%;
}

.dashboard-showcase__main {
  padding: 26px;
  border: 1px solid rgba(214, 187, 24, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.14), transparent 24%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.12), transparent 32%),
    linear-gradient(140deg, rgba(9, 15, 27, 0.98), rgba(14, 22, 38, 0.95));
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.34);
  display: grid;
  align-content: start;
  gap: 14px;
}

.dashboard-showcase__hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
}

.dashboard-showcase__intro {
  display: grid;
  align-content: start;
  gap: 12px;
}

.dashboard-showcase__eyebrow {
  color: #f2de73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dashboard-showcase__main h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(34px, 4vw, 54px);
  line-height: .98;
  letter-spacing: -.05em;
}

.dashboard-showcase__main p {
  margin: 0;
  max-width: 62ch;
  color: #c7d3e4;
  font-size: 14px;
  line-height: 1.68;
}

.dashboard-showcase__summary {
  max-width: 58ch;
  color: #dbe7f7;
}

.dashboard-showcase__utility {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}

.dashboard-showcase__utility-main {
  display: grid;
  gap: 10px;
  align-content: start;
}

.dashboard-showcase__chips,
.dashboard-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-showcase__brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  grid-auto-rows: 1fr;
}

.dashboard-showcase__brief-item {
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  background: rgba(7, 13, 24, 0.54);
  display: grid;
  gap: 6px;
  min-height: 78px;
}

.dashboard-showcase__brief-item strong {
  font-size: 13px;
  letter-spacing: -.01em;
}

.dashboard-showcase__brief-item span {
  color: #aebed5;
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-showcase__side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  align-content: stretch;
  align-self: stretch;
}

.dashboard-focus-card {
  appearance: none;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.98), rgba(5, 10, 18, 0.98));
  color: var(--text);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.28);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  text-align: left;
  align-self: stretch;
  height: 100%;
}

.dashboard-focus-card--interactive {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dashboard-focus-card--interactive:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.28);
  box-shadow: 0 22px 42px rgba(2, 6, 23, 0.34);
}

.dashboard-focus-card--interactive:focus-visible {
  outline: 2px solid rgba(214, 187, 24, 0.36);
  outline-offset: 4px;
}

.dashboard-focus-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-focus-card__eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dashboard-focus-card__head strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.04em;
}

.dashboard-focus-card__meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-focus-card__detail {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-focus-card__image {
  width: 100%;
  justify-self: stretch;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: #02060d;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.dashboard-focus-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.dashboard-focus-card__placeholder {
  min-height: 160px;
  padding: 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metric-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 108px;
}

.dashboard-metric-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dashboard-metric-card strong {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.05em;
}

.dashboard-metric-card small {
  color: #c4d0e2;
  font-size: 12px;
  line-height: 1.45;
}

.hero-dashboard-slim {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: start;
}

.hero-dashboard-slim__main {
  display: grid;
  gap: 12px;
}

.hero-dashboard-slim__side {
  min-width: 0;
}

.dashboard-priority-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.dashboard-priority-grid--premium {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-priority-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(8, 13, 24, 0.98));
  display: grid;
  gap: 8px;
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: 160px;
}

.dashboard-priority-card--interactive {
  border-color: rgba(214, 187, 24, 0.16);
}

.dashboard-priority-card__action {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  text-align: left;
  cursor: pointer;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
}

.dashboard-priority-card__action:hover {
  color: var(--accent);
}

.dashboard-priority-card__action:focus-visible {
  outline: 2px solid rgba(214, 187, 24, 0.34);
  outline-offset: 4px;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.dashboard-priority-card__label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dashboard-priority-card__value {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.03em;
}

.dashboard-priority-card__note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dashboard-photo-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-photo-fact {
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.dashboard-photo-fact span {
  display: block;
  margin-bottom: 5px;
  color: rgba(148, 163, 184, 0.84);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dashboard-photo-fact strong {
  display: block;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.35;
}

.dashboard-quick-strip .panel-header {
  margin-bottom: 8px;
}

.dashboard-quick-strip .button-row {
  gap: 10px;
}

.dashboard-ops-band {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.dashboard-ops-card {
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(8, 13, 24, 0.98));
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
}

.dashboard-ops-card--primary {
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.12), transparent 24%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 24, 1));
}

.dashboard-ops-card__eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dashboard-ops-card h2,
.dashboard-ops-card strong {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.dashboard-ops-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.stats-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.compact-feed {
  display: grid;
  gap: 10px;
}

.compact-feed__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.compact-feed__item:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(255, 255, 255, 0.045);
}

.compact-feed__main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.compact-feed__title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.compact-feed__meta,
.compact-feed__hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.compact-feed__side {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

.health-feed {
  display: grid;
  gap: 10px;
}

.health-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.health-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.health-item__title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.health-item__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.health-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
}

.health-item__facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.health-item__issues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.health-issue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.health-issue--ok {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

.health-issue--warning {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
}

.health-issue--danger {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
}

.panel--offline {
  border-color: rgba(239, 68, 68, 0.2);
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(20, 8, 12, 0.98), rgba(14, 9, 15, 0.98));
}

.device-offline-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, 0.26);
  background: rgba(127, 29, 29, 0.14);
  color: #fecaca;
}

.device-offline-banner strong {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.device-offline-banner span {
  color: rgba(254, 226, 226, 0.9);
  font-size: 12px;
  line-height: 1.45;
}

.detail-list {
  display: grid;
  gap: 8px;
}

.detail-list__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
}

.detail-list__item strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.detail-list__item span {
  flex: 1 1 auto;
  text-align: right;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}

.device-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.device-strip__item {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  gap: 6px;
}

.device-strip__item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.device-strip__item strong {
  font-size: 14px;
  line-height: 1.35;
}

.device-section {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  margin-top: 12px;
  overflow: hidden;
}

.device-section__summary {
  list-style: none;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.device-section__summary::-webkit-details-marker {
  display: none;
}

.device-section__summary strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.device-section__summary span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.device-section__meta {
  white-space: nowrap;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.device-section__body {
  padding: 0 14px 14px;
}

.technical-panel {
  padding: 0;
  overflow: hidden;
}

.technical-panel__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.technical-panel__summary::-webkit-details-marker {
  display: none;
}

.technical-panel__summary h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.technical-panel__summary p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.technical-panel__meta {
  white-space: nowrap;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.technical-panel__body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.compact-table-wrap table {
  min-width: 640px;
}

.toggle-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.toggle-field input {
  margin-top: 2px;
}

.wireguard-fold {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.022), transparent 24%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.94), rgba(6, 10, 18, 0.98));
  overflow: hidden;
}

.wireguard-fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}

.wireguard-fold__summary::-webkit-details-marker {
  display: none;
}

.wireguard-fold__titleblock {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.wireguard-fold__titleblock strong {
  font-size: 14px;
  line-height: 1.2;
}

.wireguard-fold__titleblock span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wireguard-fold__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.wireguard-fold__body {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.admin-client-consolebar {
  position: sticky;
  top: 86px;
  z-index: 11;
  margin: 14px 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(214, 187, 24, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 22%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(9, 15, 26, 0.96), rgba(7, 12, 22, 0.98));
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.22);
  backdrop-filter: blur(18px);
}

.admin-client-consolebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-client-consolebar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  background: rgba(255, 255, 255, 0.03);
  color: #dbe5f3;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-client-consolebar__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-client-consolebar__eyebrow {
  color: #f2de73;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.admin-client-consolebar__copy strong {
  font-size: 15px;
  line-height: 1.2;
}

.admin-client-consolebar__copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-client-consolebar__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px 0 4px;
}

.admin-client-consolebar__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(9, 15, 26, 0.92));
  color: rgba(226, 232, 240, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.admin-client-consolebar__tab:hover {
  border-color: rgba(56, 189, 248, 0.45);
  color: #f8fafc;
  transform: translateY(-1px);
}

.admin-client-consolebar__tab.is-active {
  border-color: rgba(214, 187, 24, 0.44);
  background: linear-gradient(180deg, rgba(214, 187, 24, 0.2), rgba(15, 23, 42, 0.94));
  color: #fef3c7;
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.12);
}

.admin-client-consolebar__subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.admin-client-consolebar__subnav-label {
  flex: 0 0 auto;
  color: rgba(148, 163, 184, 0.9);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.admin-client-consolebar__subnav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-client-consolebar__subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.22);
  background: rgba(9, 15, 26, 0.58);
  color: rgba(203, 213, 225, 0.88);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.admin-client-consolebar__subtab:hover {
  border-color: rgba(56, 189, 248, 0.34);
  color: #f8fafc;
}

.admin-client-consolebar__subtab.is-active {
  border-color: rgba(125, 211, 252, 0.34);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(15, 23, 42, 0.84));
  color: #dff5ff;
}

.client-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.client-workspace-card {
  display: grid;
  gap: 14px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 26%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.client-workspace-card .panel-header {
  margin-bottom: 0;
}

.client-workspace-card .panel-header p {
  max-width: 48ch;
}

.client-workspace-card .detail-list {
  margin: 0;
}

.client-workspace-card .button-row {
  margin-top: auto;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-section-label {
  margin: 10px 10px 2px;
  color: rgba(148, 163, 184, 0.7);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  min-height: 52px;
  border-radius: 16px;
  color: var(--muted);
  font-weight: 800;
  border: 1px solid transparent;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.menu-item--button {
  width: 100%;
  background: transparent;
  appearance: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.menu-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.08);
  color: rgba(226, 232, 240, 0.88);
}

.menu-item__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.menu-item__label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
  letter-spacing: .01em;
}

.menu-item:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.menu-item.active {
  color: #f8f1bf;
  border-color: rgba(214, 187, 24, 0.26);
  background:
    linear-gradient(90deg, rgba(214, 187, 24, 0.14), rgba(214, 187, 24, 0.03)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.08);
}

.menu-item.active .menu-item__icon {
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(214, 187, 24, 0.14);
  color: #f8e38d;
}

body.role-client .menu {
  gap: 4px;
}

body.role-client .menu-section-label {
  margin-top: 12px;
}

body.role-client .menu-item {
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 14px;
}

body.role-client .menu-item__icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  border-radius: 18px;
  border: 1px solid transparent;
}

.menu-group.active {
  border-color: rgba(214, 187, 24, 0.16);
  background: rgba(214, 187, 24, 0.04);
}

.menu-group__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  min-height: 48px;
  color: var(--text);
  font-weight: 900;
}

.menu-group__children {
  display: grid;
  gap: 4px;
  padding: 0 4px 4px 50px;
}

.menu-subitem {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  border: 1px solid transparent;
}

.menu-subitem:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.14);
}

.menu-subitem.active {
  color: #f8e38d;
  background: rgba(214, 187, 24, 0.12);
  border-color: rgba(214, 187, 24, 0.22);
}

.hero,
.panel { padding: 18px; }

.hero {
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.16), transparent 26%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.12), transparent 32%),
    linear-gradient(140deg, rgba(11, 18, 32, 0.98), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(214, 187, 24, 0.14);
  box-shadow: var(--shadow-hard);
}

.hero.compact { padding: 16px 18px; }
.hero h1 { margin: 10px 0 8px; font-size: clamp(28px, 3vw, 38px); line-height: 1.02; letter-spacing: -.03em; }
.hero p { margin: 0; color: #c7d3e4; max-width: 860px; line-height: 1.72; }

.hero-dashboard { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: 18px; }
.hero-main { display: flex; flex-direction: column; gap: 18px; }
.hero-rail { display: grid; gap: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.photo-card {
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

.photo-card__media-button {
  cursor: zoom-in;
}

.photo-card__badges {
  position: absolute;
  left: 12px;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  pointer-events: none;
}

.photo-card__badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 10px;
  background: rgba(2, 6, 23, 0.82);
  border: 1px solid rgba(214, 187, 24, 0.26);
  color: #f8e58d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.photo-card__badge--secondary {
  background: rgba(6, 95, 70, 0.78);
  border-color: rgba(52, 211, 153, 0.28);
  color: #d1fae5;
}

.photo-card__ai {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.photo-card__ai .badge {
  width: fit-content;
}

.photo-name-form {
  margin-top: 6px;
}

.photo-name-form__plate {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 187, 24, 0.22);
  background: rgba(214, 187, 24, 0.08);
  color: #f8fafc;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.range-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.range-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.range-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  color: var(--text);
}

.range-chip--active {
  border-color: rgba(214, 187, 24, 0.3);
  background: rgba(214, 187, 24, 0.12);
  color: #f7e79a;
}

.metric-chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.metric-chip {
  min-width: 160px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.metric-chip strong { display: block; font-size: 23px; line-height: 1.05; }
.metric-chip span { display: block; margin-top: 6px; color: #b4c3d8; font-size: 13px; }

.insight-card {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.24);
}

.insight-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #b9c7da;
}

.insight-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.08;
}

.insight-card p {
  margin: 8px 0 0;
  color: #c7d3e4;
  line-height: 1.6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.stat-card {
  padding: 16px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), rgba(214, 187, 24, 0));
  opacity: .9;
}

.stat-label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stat-value { margin-top: 10px; font-size: clamp(28px, 3vw, 34px); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.stat-note { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.panel-grid.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.panel-grid.two-col > * {
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: 360px;
}

.list-row,
.list-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: var(--muted);
  min-width: 0;
}

.list-card {
  flex-direction: column;
  align-items: flex-start;
}

.list-card > * {
  min-width: 0;
}

.list-card > strong,
.list-card > span,
.list-card > small {
  display: block;
}

.list-card span,
.table-subtext {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.list-card strong,
.activity-title { color: var(--text); }

.client-card-link { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.client-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 187, 24, 0.28);
  box-shadow: 0 20px 34px rgba(2, 6, 23, 0.32);
}

.link-hint { color: #f2de77; font-weight: 800; }
.muted-link { color: #8adfff; text-decoration: underline; }

.chart-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 70px;
  gap: 12px;
  align-items: center;
}

.chart-label,
.chart-value { font-size: 14px; }
.chart-value { color: var(--text); font-weight: 800; text-align: right; }

.chart-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  overflow: hidden;
}

.chart-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #facc15);
  box-shadow: 0 0 18px rgba(214, 187, 24, 0.24);
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.signal-card {
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.92));
}

.signal-card span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.signal-card strong { display: block; margin-top: 8px; font-size: 20px; line-height: 1.2; }

.activity-list { display: grid; gap: 12px; }

.activity-main { min-width: 0; display: grid; gap: 6px; }
.activity-title { font-size: 15px; font-weight: 900; line-height: 1.4; }
.activity-meta { color: var(--muted); font-size: 13px; line-height: 1.55; }

.camera-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.monitoring-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.monitoring-selection-tools {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.monitoring-selection-search {
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.monitoring-selection-search span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.monitoring-selection-search input {
  width: 100%;
}

.monitoring-selection-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.monitoring-selection-filters .btn.is-active {
  border-color: rgba(214, 187, 24, 0.34);
  background: rgba(214, 187, 24, 0.14);
  color: #f7e79a;
}

.monitoring-selection-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
}

.monitoring-selection-bulk strong {
  font-size: 13px;
  line-height: 1.45;
}

[data-monitor-chip][hidden] {
  display: none !important;
}

.monitoring-select-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
}

.monitoring-select-chip input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.monitoring-select-chip__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.monitoring-select-chip__copy strong {
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
}

.monitoring-select-chip__copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.monitoring-select-chip__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.monitoring-select-chip--visual {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.monitoring-select-chip__preview {
  grid-column: 1 / -1;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #020617;
}

.monitoring-select-chip__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.monitoring-select-chip__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.92));
}

.monitoring-select-chip__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.monitoring-select-chip--visual input {
  grid-column: 1;
  grid-row: 1;
}

.monitoring-select-chip--visual .monitoring-select-chip__copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.monitoring-select-chip.is-selected {
  border-color: rgba(214, 187, 24, 0.28);
  background: rgba(214, 187, 24, 0.08);
}

.monitoring-select-chip.is-selected .monitoring-select-chip__state {
  color: #f7e79a;
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(214, 187, 24, 0.12);
}

.monitoring-select-chip.is-disabled {
  opacity: 0.58;
  filter: saturate(0.65);
}

.monitoring-select-chip.is-disabled .monitoring-select-chip__copy strong,
.monitoring-select-chip.is-disabled .monitoring-select-chip__copy small,
.monitoring-select-chip.is-disabled .monitoring-select-chip__state {
  color: rgba(226, 232, 240, 0.72);
}

.monitoring-select-chip.is-disabled input {
  cursor: not-allowed;
}

.monitoring-toolbar {
  margin-top: 12px;
}

.monitoring-selected-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.monitoring-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.monitoring-layout-card {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 13, 24, 0.96);
  display: grid;
  gap: 6px;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

.monitoring-layout-card--offline {
  border-color: rgba(239, 68, 68, 0.22);
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, 0.08), transparent 30%),
    rgba(8, 13, 24, 0.98);
}

.monitoring-layout-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  background: #030712;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.monitoring-layout-card__alert {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.34);
  background: rgba(127, 29, 29, 0.9);
  color: #fee2e2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.monitoring-layout-card__media--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.98), rgba(3, 7, 18, 1));
}

.monitoring-layout-card__thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #030712;
}

.monitoring-layout-card__thumb--pending {
  opacity: 0.68;
  filter: saturate(0) blur(1px);
  background:
    linear-gradient(90deg, rgba(30, 41, 59, 0.92), rgba(51, 65, 85, 0.82), rgba(30, 41, 59, 0.92));
  background-size: 220% 100%;
  animation: monitoringThumbPulse 1.9s linear infinite;
}

@keyframes monitoringThumbPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -20% 0; }
}

.monitoring-layout-card__empty {
  padding: 12px;
  color: rgba(203, 213, 225, 0.74);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.monitoring-layout-card__media-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 10px 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.86));
}

.monitoring-layout-card__media-meta span {
  color: rgba(226, 232, 240, 0.76);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.monitoring-layout-card__media-meta strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.monitoring-layout-card.is-active {
  border-color: rgba(214, 187, 24, 0.28);
  box-shadow: 0 18px 34px rgba(214, 187, 24, 0.08);
}

.monitoring-layout-card__eyebrow {
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.monitoring-layout-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}

.monitoring-layout-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monitoring-layout-card__chips,
.monitoring-layout-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monitoring-layout-card__chips {
  min-height: 28px;
}

.monitoring-layout-card__actions .table-action-link {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.monitoring-layout-card__actions--secondary {
  gap: 6px;
}

.monitoring-layout-card__actions--secondary .table-action-link {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}

.monitoring-layout-card__actions form,
.monitoring-layout-card__actions--secondary form {
  display: inline-flex;
}

.monitoring-layout-card__actions--compact {
  align-items: center;
}

.recorder-rename-dialog {
  width: min(460px, 100%);
}

.recorder-rename-dialog__form {
  gap: 14px;
}

.subsection-block {
  display: grid;
  gap: 14px;
}

.subsection-block + .subsection-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.subsection-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subsection-block__header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.monitoring-recorder-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.device-subdetails {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.device-subdetails summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
}

.device-subdetails .monitoring-layout-grid {
  padding: 0 14px 14px;
}

.monitoring-layout-save {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.monitoring-layout-save label {
  flex: 1 1 260px;
  display: grid;
  gap: 6px;
}

.monitoring-layout-save label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.monitoring-layout-save input {
  width: 100%;
}

.monitoring-ready-strip {
  display: grid;
  gap: 12px;
}

.monitoring-ready-strip__summary {
  display: grid;
  gap: 4px;
}

.monitoring-ready-strip__summary strong {
  font-size: 18px;
  line-height: 1.1;
}

.monitoring-ready-strip__summary span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.inline-form {
  margin: 0;
}

.monitoring-selected-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.monitoring-tile {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 24, 0.98));
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 12px;
}

.monitoring-tile__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.monitoring-tile__head h2 {
  margin: 6px 0 4px;
  font-size: 18px;
  line-height: 1.15;
}

.monitoring-tile__head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.monitoring-tile__eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.monitoring-tile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.monitoring-stage {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: #020617;
  aspect-ratio: 16 / 9;
  cursor: default;
}

.monitoring-stage__video,
.monitoring-stage__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.monitoring-stage__empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #d7e6f7;
  font-size: 13px;
  line-height: 1.5;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.36));
}

.monitoring-stage__overlay {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.monitoring-tile__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monitoring-tile__meta {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}


.anpr-review-list {
  display: grid;
  gap: 16px;
}

.camera-fold-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.camera-live-card {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 18, 32, 0.98));
  box-shadow: var(--shadow-soft);
  min-width: 0;
  overflow: hidden;
}

.camera-live-card__head {
  align-items: flex-start;
  margin-bottom: 12px;
}

.camera-live-card__head h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.2;
}

.camera-live-card__head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.camera-fold {
  padding: 14px;
}

.camera-fold + .camera-fold {
  margin-top: 0;
}

.camera-fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.camera-fold__summary::-webkit-details-marker {
  display: none;
}

.camera-fold__summary-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.camera-fold__summary-actions {
  justify-content: flex-end;
}

.camera-fold__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(56, 189, 248, 0.08);
  color: #b9ebff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

.camera-fold__toggle::before {
  content: "+";
  font-size: 15px;
  line-height: 1;
}

.camera-fold__toggle-open {
  display: none;
}

.camera-fold[open] .camera-fold__toggle::before {
  content: "-";
}

.camera-fold[open] .camera-fold__toggle-closed {
  display: none;
}

.camera-fold[open] .camera-fold__toggle-open {
  display: inline;
}

.camera-fold__body {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.camera-fold__content {
  grid-template-columns: minmax(240px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 12px;
}

.device-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(145px, 193px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.device-summary__visual {
  min-height: 124px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.device-summary__visual--camera {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.38), transparent 36%),
    linear-gradient(145deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.82));
  padding: 0;
  border-radius: 0;
}

.device-summary__visual--has-thumb {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.device-summary__visual--recorder {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(145deg, rgba(31, 41, 55, 0.96), rgba(11, 18, 32, 0.96));
}

.device-illustration {
  width: 100%;
  height: auto;
  max-width: 170px;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(2, 6, 23, 0.22));
}

.device-illustration--camera {
  max-width: 132px;
}

.device-illustration--recorder {
  max-width: 156px;
  filter: drop-shadow(0 18px 26px rgba(2, 6, 23, 0.34));
}

.device-summary__thumb {
  width: 100%;
  height: 100%;
  min-height: 124px;
  display: block;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.device-summary__copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.device-summary__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.device-summary__eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.device-summary__copy h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
}

.device-summary__rename {
  flex: 0 0 auto;
}

.device-summary__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.device-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.device-summary__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.camera-live-shell {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(214, 187, 24, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.96), rgba(15, 23, 42, 0.92));
  box-shadow: var(--shadow-soft);
}

.camera-live-shell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.camera-live-shell__label {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.camera-live-shell__hint {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.camera-live-frame {
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(214, 187, 24, 0.16);
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.96), rgba(15, 23, 42, 0.92));
  aspect-ratio: 16 / 9;
}

.camera-live-frame--compact {
  max-width: 100%;
  min-height: 152px;
}

.camera-live-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.event-detail-shell {
  display: grid;
  gap: 14px;
}

.event-detail-topcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.event-detail-topcards--single {
  grid-template-columns: minmax(0, 1fr);
}

.event-image-card {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 10px;
  border-radius: 0;
}

.event-image-card--large {
  width: min(1180px, 100%);
  padding: 0;
}

.event-image-card__image {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: #000;
}

.event-image-card__image--large {
  max-height: 68vh;
}

.event-stage {
  margin: 0;
}

.event-image-card--flush {
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #020617;
  overflow: hidden;
}

.camera-live-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.camera-live-actions {
  margin-top: 10px;
}

.camera-edit-panel {
  border-style: solid;
}

.camera-edit-panel__meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.camera-edit-panel__save-feedback,
.recorder-rename-dialog__feedback {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(71, 85, 105, 0.24);
  background: rgba(15, 23, 42, 0.68);
  color: #dbeafe;
  font-size: 12px;
  line-height: 1.5;
}

.camera-edit-panel__save-feedback.is-success,
.recorder-rename-dialog__feedback.is-success {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(22, 101, 52, 0.22);
  color: #dcfce7;
}

.camera-edit-panel__save-feedback.is-error,
.recorder-rename-dialog__feedback.is-error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(127, 29, 29, 0.22);
  color: #fee2e2;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(11, 18, 32, 0.98));
}

.recorder-fold {
  padding: 18px;
}

.recorder-fold + .recorder-fold {
  margin-top: 14px;
}

.recorder-fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.recorder-fold__summary::-webkit-details-marker {
  display: none;
}

.recorder-fold__summary-side {
  display: grid;
  justify-items: end;
  gap: 12px;
  flex: 0 0 auto;
}

.recorder-fold__summary-side .button-row {
  justify-content: flex-end;
}

.recorder-fold__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 187, 24, 0.2);
  background: rgba(214, 187, 24, 0.08);
  color: #f7e79a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

.recorder-fold__toggle::before {
  content: "+";
  font-size: 15px;
  line-height: 1;
}

.recorder-fold__toggle-open {
  display: none;
}

.recorder-fold[open] .recorder-fold__toggle::before {
  content: "-";
}

.recorder-fold[open] .recorder-fold__toggle-closed {
  display: none;
}

.recorder-fold[open] .recorder-fold__toggle-open {
  display: inline;
}

.recorder-fold__body {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
}

table { width: 100%; border-collapse: collapse; min-width: 760px; }
thead { background: rgba(255, 255, 255, 0.03); }
th, td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
}

tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.table-subtext {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.table-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(214, 187, 24, 0.22);
  color: #f6e588;
  font-weight: 800;
  background: rgba(214, 187, 24, 0.08);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.table-action-link:hover {
  border-color: rgba(214, 187, 24, 0.36);
  background: rgba(214, 187, 24, 0.14);
  transform: translateY(-1px);
}

.table-action-link--primary {
  border-color: rgba(56, 189, 248, 0.26);
  background: rgba(56, 189, 248, 0.12);
  color: #b9ebff;
}

.table-action-link--primary:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.18);
}

.recorder-panel-shell {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(71, 85, 105, 0.22);
  background: linear-gradient(180deg, rgba(4, 8, 14, 0.99), rgba(1, 4, 8, 1));
  box-shadow: 0 20px 54px rgba(2, 6, 23, 0.34);
}

.recorder-panel-shell::before {
  display: none;
}

.recorder-panel-shell > * {
  position: relative;
  z-index: 1;
}

.recorder-panel-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.95fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}

.recorder-panel-intro__eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.recorder-panel-intro h2 {
  margin: 0 0 4px;
  font-size: clamp(24px, 2.7vw, 30px);
  line-height: 1.05;
}

.recorder-panel-intro p {
  margin: 0;
  max-width: 70ch;
  color: rgba(203, 213, 225, 0.82);
  line-height: 1.5;
  font-size: 14px;
}

.recorder-panel-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recorder-panel-kpi {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.22);
  background: rgba(7, 12, 22, 0.9);
}

.recorder-panel-kpi span {
  display: block;
  margin-bottom: 6px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.recorder-panel-kpi strong {
  display: block;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.15;
}

.recorder-panel-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.recorder-panel-toolbar__group {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.2);
  background: rgba(6, 11, 20, 0.92);
}

.recorder-panel-toolbar__label {
  display: inline-flex;
  margin-bottom: 8px;
  color: rgba(186, 230, 253, 0.84);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.recorder-panel-toolbar__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recorder-panel-toolbar__options--presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.recorder-panel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.24);
  background: rgba(10, 16, 28, 0.74);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.recorder-panel-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.34);
  background: rgba(14, 165, 233, 0.16);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

.recorder-panel-chip--active {
  border-color: rgba(214, 187, 24, 0.34);
  background:
    linear-gradient(180deg, rgba(214, 187, 24, 0.18), rgba(214, 187, 24, 0.1)),
    rgba(15, 23, 42, 0.72);
  color: #fff7d1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.recorder-panel-chip--stacked {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  border-radius: 22px;
  text-align: center;
}

.recorder-panel-chip--stacked small {
  display: block;
  margin-top: 5px;
  color: rgba(191, 219, 254, 0.72);
  font-size: 11px;
  font-weight: 600;
}

.recorder-panel-stage {
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.18);
  background: rgba(2, 5, 10, 0.96);
  box-shadow: 0 12px 34px rgba(2, 6, 23, 0.18);
}

.recorder-panel-stage__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.recorder-panel-stage__eyebrow {
  color: #facc15;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.recorder-panel-stage__head h3 {
  margin: 4px 0 4px;
  font-size: 18px;
  line-height: 1.1;
}

.recorder-panel-stage__head p {
  margin: 0;
  max-width: 62ch;
  color: rgba(203, 213, 225, 0.82);
  font-size: 12px;
  line-height: 1.45;
}

.recorder-panel-stage__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.recorder-panel-monitor {
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid rgba(71, 85, 105, 0.26);
  background: #000;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.2);
  overflow: hidden;
}

.recorder-panel-monitor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.28);
  background: rgba(7, 10, 16, 0.98);
}

.recorder-panel-monitor__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.recorder-panel-monitor__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.65);
}

.recorder-panel-monitor__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  flex: 1 1 360px;
}

.recorder-panel-monitor__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.24);
  background: rgba(10, 16, 28, 0.78);
  color: rgba(226, 232, 240, 0.82);
  font-size: 10px;
  font-weight: 700;
}

.recorder-panel-monitor__fullscreen {
  flex: 0 0 auto;
}

.recorder-panel-monitor__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.recorder-panel-stream-shell {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border-radius: 0 0 10px 10px;
  border-top: 0;
  background: #000;
  aspect-ratio: var(--recorder-monitor-ratio, 16 / 9);
  box-shadow: none;
}

.recorder-panel-stream-shell {
  isolation: isolate;
}

@keyframes stream-loading-spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes stream-loading-pulse {
  0%, 100% {
    opacity: .72;
    transform: scale(.985);
  }
  50% {
    opacity: 1;
    transform: scale(1.015);
  }
}

.stream-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 211, 79, 0.08), transparent 18%),
    radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(1, 3, 7, 0.98), rgba(0, 0, 0, 1));
  color: rgba(226, 232, 240, 0.92);
  text-align: center;
}

.stream-loading-overlay::before,
.live-dialog__empty::before {
  content: "";
  width: clamp(56px, 7vw, 86px);
  height: clamp(56px, 7vw, 86px);
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.14);
  border-top-color: #f2d34f;
  border-right-color: rgba(96, 165, 250, 0.95);
  animation: stream-loading-spinner .85s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 32px rgba(242, 211, 79, 0.14),
    0 0 54px rgba(96, 165, 250, 0.1);
  filter: drop-shadow(0 0 12px rgba(242, 211, 79, 0.12));
}

.stream-loading-overlay span,
.live-dialog__empty {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}

.stream-loading-overlay span {
  animation: stream-loading-pulse 2.2s ease-in-out infinite;
}

.stream-loading-overlay::after,
.live-dialog__empty::after {
  content: "Segurança Jaquirana";
  margin-top: -2px;
  color: rgba(148, 163, 184, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.stream-loading-overlay[hidden] {
  display: none;
}

.recorder-panel-stream {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: #000;
  cursor: zoom-in;
}

.recorder-panel-stream-shell:fullscreen {
  padding: 10px;
  border-radius: 0;
  min-height: 100vh;
  max-height: none;
  background: #000;
}

.recorder-panel-stream-shell:fullscreen::before,
.recorder-panel-stream-shell:fullscreen::after {
  inset: 10px;
  border-radius: 0;
}

.recorder-panel-stream-shell:fullscreen .recorder-panel-stream {
  border-radius: 0;
  object-fit: contain;
}

.recorder-panel-stream-shell--grid {
  aspect-ratio: auto;
  padding: 4px;
}

.recorder-playback-selector-shell {
  background: #010307;
}

.recorder-panel-stream-shell--grid:fullscreen {
  padding: 8px;
}

.recorder-panel-stream-shell--grid:fullscreen .recorder-playback-grid {
  min-height: calc(100vh - 16px);
  align-content: stretch;
}

.recorder-panel-stage__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 8px;
  color: rgba(148, 163, 184, 0.86);
  font-size: 11px;
  line-height: 1.45;
}

.recorder-live-dialog {
  width: min(1680px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 12px;
}

.recorder-live-dialog__media {
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 110px);
}

.recorder-live-dialog__frame {
  min-height: 0;
  height: 100%;
}

.recorder-live-dialog__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain !important;
  object-position: center center;
  background: #000;
}

.recorder-playback-shell {
  display: grid;
  gap: 18px;
}

.recorder-playback-grid {
  gap: 6px;
  padding: 0;
}

.recorder-playback-grid .empty-state {
  margin: 12px;
}

.recorder-playback-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  background: #02050a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.recorder-playback-card--solo {
  border-radius: 0 0 10px 10px;
  width: min(100%, 720px);
  justify-self: center;
}

.recorder-playback-card--selector {
  background: #010307;
}

.recorder-playback-card--selector.is-available {
  border-color: rgba(34, 197, 94, 0.18);
}

.recorder-playback-card--selector.is-empty {
  border-color: rgba(239, 68, 68, 0.14);
}

.recorder-playback-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  gap: 6px;
  aspect-ratio: 16 / 9;
  padding: 18px 12px;
  background:
    radial-gradient(circle at top, rgba(34, 197, 94, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(7, 12, 22, 0.98), rgba(2, 5, 10, 1));
  text-align: center;
}

.recorder-playback-card--selector.is-empty .recorder-playback-placeholder {
  background:
    radial-gradient(circle at top, rgba(239, 68, 68, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 12, 22, 0.98), rgba(2, 5, 10, 1));
}

.recorder-playback-placeholder__eyebrow {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.24);
  background: rgba(5, 10, 18, 0.8);
  color: rgba(226, 232, 240, 0.8);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-placeholder strong {
  display: block;
  max-width: 100%;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.recorder-playback-placeholder span {
  display: block;
  max-width: 260px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 11px;
  line-height: 1.35;
}

.recorder-playback-tile {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.05);
  cursor: zoom-in;
  text-align: left;
}

.recorder-playback-card .recorder-playback-tile {
  border: 0;
}

.recorder-playback-tile:focus-visible {
  outline: 2px solid rgba(214, 187, 24, 0.92);
  outline-offset: -2px;
}

.recorder-playback-tile .recorder-panel-tile__image {
  object-fit: contain;
}

.recorder-playback-tile .recorder-panel-tile__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px 8px;
  text-transform: none;
  letter-spacing: 0.03em;
}

.recorder-playback-tile .recorder-panel-tile__label strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-tile .recorder-panel-tile__label small {
  display: block;
  color: rgba(226, 232, 240, 0.82);
  font-size: 10px;
  line-height: 1.2;
}

.recorder-playback-tile .recorder-panel-tile__status {
  inset: auto 8px 8px 8px;
  min-height: 24px;
  font-size: 9px;
}

.recorder-playback-card__rail {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(71, 85, 105, 0.22);
  background: linear-gradient(180deg, rgba(7, 12, 22, 0.98), rgba(3, 7, 14, 1));
}

.recorder-playback-card__rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.recorder-playback-card__rail-title {
  min-width: 0;
}

.recorder-playback-card__rail-title strong {
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-card__rail-title span {
  display: block;
  color: rgba(148, 163, 184, 0.84);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-scrubber {
  display: grid;
  gap: 8px;
}

.recorder-playback-track--range {
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
}

.recorder-playback-track--range .recorder-playback-track__segment {
  top: 2px;
  bottom: 2px;
}

.recorder-playback-track--range .recorder-playback-track__cursor {
  width: 3px;
}

.recorder-playback-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.recorder-playback-range::-webkit-slider-runnable-track {
  height: 18px;
  background: transparent;
}

.recorder-playback-range::-moz-range-track {
  height: 18px;
  background: transparent;
}

.recorder-playback-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 999px;
  border: 2px solid rgba(248, 250, 252, 0.96);
  background: rgba(214, 187, 24, 0.98);
  box-shadow: 0 0 0 4px rgba(214, 187, 24, 0.18);
}

.recorder-playback-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(248, 250, 252, 0.96);
  background: rgba(214, 187, 24, 0.98);
  box-shadow: 0 0 0 4px rgba(214, 187, 24, 0.18);
}

.recorder-playback-range-shell {
  position: relative;
}

.recorder-playback-axis--scrubber {
  height: 16px;
  border-top: 0;
}

.recorder-playback-axis--scrubber span {
  top: 0;
  font-size: 10px;
}

.recorder-playback-card__rail-meta {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.recorder-playback-card__rail-meta span:nth-child(2) {
  min-width: 44px;
  color: rgba(226, 232, 240, 0.86);
}

.recorder-playback-card__rail-meta span:nth-child(3) {
  text-align: center;
  color: rgba(226, 232, 240, 0.86);
}

.recorder-playback-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.recorder-playback-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.recorder-playback-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recorder-playback-current-time--surface {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.18);
  background: rgba(5, 10, 18, 0.82);
}

.recorder-playback-timeline {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(7, 12, 22, 0.96), rgba(4, 8, 15, 0.98));
}

.recorder-playback-timeline__head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.recorder-playback-timeline__head p {
  margin: 0;
  color: rgba(203, 213, 225, 0.76);
  font-size: 13px;
}

.recorder-playback-axis {
  position: relative;
  height: 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.recorder-playback-axis span {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.recorder-playback-tracks {
  display: grid;
  gap: 12px;
}

.recorder-playback-current-time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: rgba(226, 232, 240, 0.88);
  font-size: 12px;
}

.recorder-playback-current-time strong {
  font-size: 14px;
}

.recorder-playback-track-row {
  display: grid;
  gap: 8px;
}

.recorder-playback-track-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.recorder-playback-track-row__head strong {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
}

.recorder-playback-track-row__head p {
  margin: 0;
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
}

.recorder-playback-track {
  position: relative;
  width: 100%;
  height: 44px;
  border: 1px solid rgba(71, 85, 105, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.92), rgba(7, 12, 20, 0.98)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc((100% / 24) - 1px),
      rgba(71, 85, 105, 0.22) calc((100% / 24) - 1px),
      rgba(71, 85, 105, 0.22) calc(100% / 24)
    );
  cursor: pointer;
  overflow: hidden;
}

.recorder-playback-track--master {
  height: 58px;
  border-color: rgba(214, 187, 24, 0.34);
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.1);
}

.recorder-playback-track.is-selected {
  border-color: rgba(214, 187, 24, 0.52);
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.18);
}

.recorder-playback-track__segment {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.9), rgba(59, 130, 246, 0.82));
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.16);
}

.recorder-playback-track__segment--master {
  top: 7px;
  bottom: 7px;
  background: linear-gradient(90deg, rgba(214, 187, 24, 0.9), rgba(34, 197, 94, 0.82));
}

.recorder-playback-track__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.1);
  transform: translateX(-50%);
}

.recorder-playback-presence {
  display: grid;
  gap: 8px;
}

.recorder-playback-presence__row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(71, 85, 105, 0.2);
  background: rgba(8, 13, 23, 0.72);
}

.recorder-playback-presence__row.is-selected {
  border-color: rgba(214, 187, 24, 0.4);
}

.recorder-playback-presence__meta {
  min-width: 0;
}

.recorder-playback-presence__meta strong {
  display: block;
  margin: 0 0 2px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-presence__meta span {
  display: block;
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-presence__bar {
  position: relative;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.92), rgba(7, 12, 20, 0.98)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc((100% / 24) - 1px),
      rgba(71, 85, 105, 0.18) calc((100% / 24) - 1px),
      rgba(71, 85, 105, 0.18) calc(100% / 24)
    );
  border: 1px solid rgba(71, 85, 105, 0.24);
}

.recorder-playback-presence__segment {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.88), rgba(59, 130, 246, 0.76));
}

.recorder-playback-presence__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(248, 250, 252, 0.94);
  transform: translateX(-50%);
}

.recorder-playback-presence__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 980px) {
  .recorder-playback-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .recorder-playback-card__rail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .recorder-playback-presence__row {
    grid-template-columns: 1fr;
  }

  .recorder-playback-presence__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .recorder-weather-overlay {
    padding: 12px;
  }

  .recorder-weather-overlay .live-dialog {
    width: min(100vw - 24px, 100%);
    max-height: calc(100vh - 24px);
    border-radius: 22px;
  }

  .recorder-weather-dialog .live-dialog__header {
    padding: 18px 18px 14px;
  }

  .recorder-weather-dialog .live-dialog__header h2 {
    font-size: 20px;
  }

  .recorder-weather-dialog__body {
    padding: 14px 18px 0;
    gap: 12px;
  }

  .recorder-weather-dialog__map-shell {
    min-height: 320px;
    border-radius: 18px;
  }

  .recorder-weather-dialog__map {
    height: 320px;
  }

  .recorder-weather-dialog__status strong {
    font-size: 14px;
  }

  .recorder-weather-dialog__status span,
  .recorder-weather-dialog__coordinates,
  .recorder-weather-inline__summary span,
  .recorder-weather-inline__summary small {
    font-size: 12px;
  }

  .recorder-weather-dialog__actions {
    padding: 14px 18px 18px;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .recorder-weather-dialog__actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .recorder-playback-toolbar {
    grid-template-columns: 1fr;
  }

  .recorder-playback-track--master {
    height: 52px;
  }

  .recorder-playback-current-time {
    align-items: flex-start;
    flex-direction: column;
  }
}

.recorder-panel-channel-map {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.recorder-panel-channel-map__head {
  margin-bottom: 14px;
}

.recorder-panel-channel-map__head h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.recorder-panel-channel-map__head p {
  margin: 0;
  color: rgba(203, 213, 225, 0.76);
  font-size: 13px;
  line-height: 1.55;
}

.recorder-panel-channel-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 292px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.recorder-panel-channel-card {
  min-height: 196px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(14, 20, 34, 0.92), rgba(7, 12, 22, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 34px rgba(2, 6, 23, 0.18);
  cursor: grab;
  user-select: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.recorder-panel-channel-card.is-dragging {
  opacity: 0.42;
  transform: scale(0.985);
  cursor: grabbing;
}

.recorder-panel-channel-card.is-drop-target {
  border-color: rgba(214, 187, 24, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(214, 187, 24, 0.28),
    0 16px 34px rgba(2, 6, 23, 0.22);
  transform: translateY(-2px);
}

.recorder-panel-channel-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.recorder-panel-channel-card__slot {
  color: rgba(186, 230, 253, 0.88);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.recorder-panel-channel-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.2;
}

.recorder-panel-channel-card p {
  margin: 0;
  min-height: 48px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 13px;
  line-height: 1.55;
}

.recorder-panel-channel-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.recorder-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--recorder-panel-min, 340px), 1fr));
  align-items: stretch;
  gap: 12px;
}

.recorder-panel-grid--monitor {
  grid-template-columns: repeat(var(--recorder-panel-columns, 4), minmax(0, 1fr));
  gap: 10px;
}

.recorder-panel-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recorder-panel-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recorder-panel-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recorder-panel-grid--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.recorder-panel-tile {
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: var(--recorder-panel-tile-height, 236px);
  height: clamp(220px, 25vh, 320px);
  overflow: hidden;
}

.recorder-panel-tile--monitor {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: #000;
}

.recorder-panel-tile__frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--recorder-panel-tile-height, 236px);
  border: 0;
  background: #000;
}

.recorder-panel-tile__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  background: #000;
}

.recorder-panel-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.86) 100%);
  pointer-events: none;
}

.recorder-panel-tile__status {
  position: absolute;
  inset: auto 10px 10px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.58);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.recorder-panel-tile.is-live .recorder-panel-tile__status {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.badge-success { color: #bbf7d0; background: var(--ok-bg); border-color: rgba(34, 197, 94, 0.34); }
.badge-warning { color: #fde68a; background: var(--warn-bg); border-color: rgba(245, 158, 11, 0.36); }
.badge-danger { color: #fecaca; background: var(--danger-bg); border-color: rgba(239, 68, 68, 0.36); }
.badge-default { color: #bae6fd; background: var(--info-bg); border-color: rgba(56, 189, 248, 0.28); }

.wireguard-card {
  gap: 14px;
}

.wireguard-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.wireguard-actions {
  margin-bottom: 12px;
}

.wireguard-runtime-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.wireguard-helper-copy {
  margin: 0 0 12px;
}

.btn.is-disabled,
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.56;
  pointer-events: none;
}

.btn-danger-outline {
  border-color: rgba(239, 68, 68, 0.38);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.18);
}

.btn-danger-outline:hover {
  border-color: rgba(248, 113, 113, 0.56);
  background: rgba(127, 29, 29, 0.28);
}

.filters-grid,
.three-col-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.filters-grid label,
.form-stack label,
.three-col-form label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.checkbox-field { justify-content: flex-end; }
.checkbox-field input { width: 18px; height: 18px; margin-top: 6px; accent-color: var(--brand); }
.form-actions-span { display: flex; align-items: end; }
.form-span-3 { grid-column: 1 / -1; }
.panel-narrow { max-width: 760px; }

input,
select,
textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 28%),
    rgba(8, 13, 24, 0.82);
  color: var(--text);
  padding: 13px 14px;
  font-size: 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

input::placeholder,
textarea::placeholder { color: rgba(148, 163, 184, 0.82); }

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(214, 187, 24, 0.44);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.045), transparent 28%),
    rgba(10, 16, 28, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0 0 3px rgba(214, 187, 24, 0.12);
}

.filters-grid label > span,
.form-stack label > span,
.three-col-form label > span {
  color: rgba(191, 219, 254, 0.78);
}

input[type="date"],
input[type="datetime-local"] {
  min-width: 0;
  max-width: 100%;
  display: block;
  line-height: 1.2;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  min-height: 1.4em;
  text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin: 0;
}

.filters-actions,
.button-row {
  display: flex;
  gap: 10px 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 14px;
  padding: 10px 15px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-dark {
  background: linear-gradient(180deg, rgba(214, 187, 24, 0.9), rgba(183, 152, 10, 0.92));
  color: #111827;
  box-shadow: 0 10px 24px rgba(214, 187, 24, 0.18);
}

.btn-dark:hover { box-shadow: 0 18px 28px rgba(214, 187, 24, 0.24); }

.btn-outline {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
}

.btn-outline:hover { border-color: rgba(214, 187, 24, 0.28); background: rgba(255, 255, 255, 0.06); }
.btn-outline.is-active {
  border-color: rgba(214, 187, 24, 0.34);
  background: rgba(214, 187, 24, 0.14);
  color: #f7e79a;
}
.btn-full { width: 100%; }

.btn-compact {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.code-block {
  background: rgba(2, 6, 23, 0.96);
  color: #d7e6f7;
  border: 1px solid rgba(56, 189, 248, 0.16);
  padding: 18px;
  border-radius: 22px;
  overflow-x: auto;
}

.code-block pre { margin: 0; font-family: "Cascadia Mono", "Consolas", monospace; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.helper-text { color: var(--muted); line-height: 1.7; }

.empty-state {
  padding: 26px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.045), transparent 26%),
    rgba(255, 255, 255, 0.03);
  color: var(--muted);
  text-align: center;
  line-height: 1.65;
}

.picture-info-grid {
  display: grid;
  gap: 12px;
}

.picture-info-card {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(11, 18, 32, 0.96));
  display: grid;
  gap: 8px;
}

.picture-info-card__title {
  color: var(--text);
  line-height: 1.4;
}

.picture-info-card__meta,
.picture-info-card__link {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.picture-info-card__link {
  color: #8adfff;
  text-decoration: underline;
}

.plate-editor-card {
  scroll-margin-top: 96px;
}

.plate-editor-banner {
  margin-top: 10px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.1);
}

.plate-editor-banner strong {
  font-size: 16px;
  color: #dff7ff;
}

.plate-editor-banner span {
  color: #b9ebff;
  font-size: 13px;
  line-height: 1.5;
}

.live-overlay {
  position: fixed;
  inset: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(6px);
  z-index: 60;
}

.live-overlay[hidden] {
  display: none;
}

.live-modal-open {
  overflow: hidden;
}

.live-dialog {
  width: min(960px, 100%);
  padding: 14px;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.98), rgba(2, 6, 23, 0.995));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}

.live-dialog--player {
  width: min(1380px, 100%);
}

.live-dialog__header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.live-dialog__eyebrow {
  color: #f2d34f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.live-dialog__header h2 {
  margin: 6px 0 4px;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .01em;
}

.live-dialog__header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.live-dialog__window-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.live-dialog__action,
.live-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.live-dialog__close {
  width: 40px;
  min-width: 40px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.live-dialog__media {
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #000;
  aspect-ratio: 16 / 9;
}

.live-dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
}

.live-dialog__stage {
  display: grid;
  gap: 12px;
}

.live-dialog__media--player {
  position: relative;
}

.live-dialog__media--player:fullscreen {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

.live-dialog__video,
.live-dialog__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

.live-dialog__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

.live-dialog__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 18px;
  text-align: center;
  color: rgba(226, 232, 240, 0.92);
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 211, 79, 0.08), transparent 18%),
    radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(1, 3, 7, 0.98), rgba(0, 0, 0, 1));
  z-index: 2;
}

.live-dialog__empty[hidden],
.live-dialog__video[hidden],
.live-dialog__image[hidden],
.live-dialog__frame[hidden] {
  display: none;
}

.live-dialog__media--player.is-loading .live-dialog__frame,
.live-dialog__media--player.is-loading .live-dialog__video,
.live-dialog__media--player.is-loading .live-dialog__image {
  opacity: 0;
}

.live-dialog--monitoring {
  max-width: min(1100px, 96vw);
}

.live-dialog__body--solo {
  grid-template-columns: minmax(0, 1fr);
}

.live-dialog__footnote {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.live-dialog__footnote .shell-pill {
  border-radius: 0;
  min-height: 30px;
}

.live-rail {
  min-width: 0;
  padding: 14px;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(4, 9, 20, 0.98), rgba(2, 6, 18, 0.99));
  display: grid;
  gap: 14px;
  max-height: 72vh;
  overflow: auto;
}

.live-rail__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.live-rail__header strong {
  display: block;
  font-size: 15px;
}

.live-rail__header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}

.live-rail__group {
  display: grid;
  gap: 8px;
}

.live-rail__group-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.live-rail__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-rail__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-filter-chip,
.live-range-chip {
  padding: 8px 11px;
  border-radius: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.live-filter-chip.is-active,
.live-range-chip.is-active {
  border-color: rgba(214, 187, 24, 0.42);
  background: rgba(214, 187, 24, 0.12);
  color: #fff4bb;
}

.live-rail__range-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.live-rail__list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
  min-width: 0;
}

.live-rail__item {
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.live-rail__item strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.live-rail__item span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.live-rail__badge {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.live-rail__badge--vehicle {
  background: rgba(56, 189, 248, 0.16);
  color: #b6efff;
}

.live-rail__badge--person {
  background: rgba(234, 88, 12, 0.16);
  color: #ffd1ad;
}

.live-rail__badge--event {
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
}

.live-rail__empty {
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 13px;
}


.logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  margin-bottom: 14px;
  border-radius: 22px;
  border: 1px dashed rgba(214, 187, 24, 0.22);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.logo-preview { max-width: 100%; max-height: 150px; object-fit: contain; }
.logo-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.logo-upload-field {
  flex: 1 1 260px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-inline-input {
  padding: 10px 12px;
  font-size: 13px;
}

.upload-hint { margin-top: 10px; font-size: 12px; }

.alert {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  margin-top: 18px;
}

.alert-danger { color: #fecaca; border-color: rgba(239, 68, 68, 0.28); background: rgba(127, 29, 29, 0.18); }
.alert-success { color: #bbf7d0; border-color: rgba(34, 197, 94, 0.28); background: rgba(20, 83, 45, 0.18); }

.hero-panel { background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.92)); }
.hero-panel h1 { margin: 18px 0 12px; font-size: 42px; line-height: 1.02; letter-spacing: -.03em; }
.hero-panel p,
.hero-list { color: #c7d3e4; line-height: 1.78; }
.hero-list { display: grid; gap: 10px; margin-top: 22px; }

.form-panel { background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(11, 18, 32, 0.94)); }
.form-title { font-size: 30px; font-weight: 900; line-height: 1.05; }
.form-subtitle { margin-top: 8px; color: var(--muted); line-height: 1.7; }
.form-stack { margin-top: 22px; display: grid; gap: 14px; }

.compact-header h3 { margin: 0 0 4px; }
.wrap-row { flex-wrap: wrap; }
.tight-stack { gap: 8px; margin-top: 14px; }
.small-code pre { font-size: 12px; line-height: 1.55; word-break: break-word; }

.attention-grid {
  display: grid;
  gap: 12px;
}

.attention-card {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(11, 18, 32, 0.92));
}

.attention-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attention-card__meta {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.attention-card__hint {
  margin-top: 8px;
  font-size: 13px;
  color: #cbd5e1;
}

.camera-secondary-grid {
  margin-top: 14px;
}

.panel--compact .attention-grid {
  gap: 10px;
}

.panel--compact .attention-card {
  padding: 12px 14px;
}

.panel--compact .attention-card__meta,
.panel--compact .attention-card__hint {
  font-size: 12px;
}

body.role-client .content-appbar__meta,
body.role-client .hero p,
body.role-client .panel-header p,
body.role-client .stat-note,
body.role-client .dashboard-priority-card__note {
  max-width: 62ch;
  line-height: 1.45;
}

body.role-client .content {
  gap: 12px;
}

body.role-client .hero.compact,
body.role-client .panel,
body.role-client .stat-card,
body.role-client .camera-fold,
body.role-client .recorder-fold {
  border-radius: 20px;
}

body.role-client .hero.compact {
  padding: 18px 20px;
}

body.role-client .panel {
  padding: 18px;
}

body.role-client .panel-header {
  margin-bottom: 12px;
}

body.role-client .panel-header h2 {
  font-size: 18px;
}

body.role-client .dashboard-priority-grid {
  gap: 12px;
}

body.role-client .monitoring-layout-card {
  border-radius: 16px;
}

body.role-client .dashboard-priority-card {
  padding: 14px 16px;
  border-radius: 18px;
}

body.role-client .metric-chip {
  min-width: 148px;
  padding: 12px 14px;
  border-radius: 18px;
}

body.role-client .compact-feed__item,
body.role-client .health-item,
body.role-client .detail-list__item,
body.role-client .history-timeline__item,
body.role-client .history-photo-card,
body.role-client .monitoring-select-chip {
  border-radius: 16px;
}

body.role-client .photo-card,
body.role-client .photo-card__media,
body.role-client .photo-card__media img {
  border-radius: 0;
}

body.role-client .hero-actions,
body.role-client .button-row.wrap-row {
  gap: 8px;
}

body.role-client .subtle-panel {
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.9), rgba(10, 15, 27, 0.98));
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .stats-grid,
  .panel-grid.two-col,
  .filters-grid,
  .three-col-form,
  .hero-grid,
  .hero-dashboard-slim,
  .signal-grid,
  .camera-live-grid { grid-template-columns: 1fr; }
  .dashboard-ops-band { grid-template-columns: 1fr; }
  .dashboard-weather-spotlight__head,
  .dashboard-weather-spotlight__body { flex-direction: column; }
  .dashboard-weather-spotlight__summary { justify-content: flex-start; }
  .dashboard-weather-spotlight__rail { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-weather-spotlight__facts { grid-template-columns: 1fr 1fr 1fr; }
  .dashboard-priority-grid--premium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-appbar,
  .panel-header.between,
  .between { flex-direction: column; align-items: flex-start; }
  .content-appbar__side { justify-content: flex-start; }
  .device-summary {
    width: 100%;
    grid-template-columns: 148px minmax(0, 1fr);
  }
  .camera-fold__summary,
  .camera-fold__summary-side { align-items: flex-start; }
  .camera-fold__summary-side { justify-items: flex-start; }
  .recorder-fold__summary,
  .recorder-fold__summary-side { align-items: flex-start; }
  .recorder-fold__summary-side { justify-items: flex-start; }
  .camera-live-shell { width: 100%; }
  .chart-row { grid-template-columns: 1fr; }
  .metric-chip-row { flex-direction: column; }
}

@media (max-width: 1080px) {
  .dashboard-showcase { grid-template-columns: 1fr; }
  .dashboard-showcase__hero { grid-template-columns: 1fr; }
  .dashboard-showcase__utility { grid-template-columns: 1fr; }
  .dashboard-weather-inline__head,
  .dashboard-weather-inline__body,
  .dashboard-weather-inline__statusline {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-weather-inline__summary {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dashboard-weather-inline__rail {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-weather-inline__facts {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .dashboard-showcase__side {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    align-self: start;
    height: auto;
  }
}

@media (max-width: 980px) {
  .app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .sidebar,
  .content,
  .content-appbar,
  .hero,
  .panel,
  .camera-fold,
  .recorder-fold,
  .photo-card,
  .monitoring-layout-card,
  .monitoring-select-chip,
  .live-dialog {
    width: 100%;
    max-width: 100%;
  }
  .device-section__meta {
    white-space: normal;
  }
  .metric-chip,
  body.role-client .metric-chip {
    min-width: 0;
  }
  .menu {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .menu-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .menu-section-label {
    display: none;
  }
  .menu-group {
    flex: 0 0 min(236px, 78vw);
    scroll-snap-align: start;
  }
  .menu-group__children {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 4px 4px;
  }
  .menu-subitem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-showcase__main h1 {
    max-width: 14ch;
  }
  .dashboard-showcase__side {
    grid-template-columns: 1fr;
  }
  .camera-fold-list { grid-template-columns: 1fr; }
  .recorder-panel-intro {
    grid-template-columns: 1fr;
  }
  .recorder-panel-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recorder-panel-stage__head,
  .recorder-panel-stage__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .dashboard-priority-grid,
  .dashboard-ops-band,
  .stats-grid,
  .signal-grid,
  .monitoring-layout-grid,
  .recorder-panel-grid,
  .monitoring-select-grid {
    grid-template-columns: 1fr;
  }
  .hero-dashboard-slim,
  .profile-hero,
  .company-overview__hero {
    grid-template-columns: 1fr;
  }
  .profile-hero--large .profile-hero__avatar,
  .company-overview__logo {
    justify-self: start;
  }
  .recorder-panel-shell {
    padding: 18px 16px;
    border-radius: 24px;
  }
  .recorder-panel-kpis {
    grid-template-columns: 1fr;
  }
  .dashboard-photo-facts {
    grid-template-columns: 1fr;
  }
  .recorder-panel-toolbar__options--presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recorder-panel-channel-strip {
    grid-auto-columns: minmax(240px, 84vw);
  }
  .recorder-panel-monitor__bar,
  .recorder-panel-monitor__meta {
    justify-content: flex-start;
  }
  .recorder-panel-monitor__bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .live-dialog__window-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .recorder-panel-stream-shell {
    padding: 3px;
    border-radius: 0 0 22px 22px;
  }
  .recorder-panel-stream {
    border-radius: 14px;
  }
  .monitoring-layout-save,
  .button-row,
  .filters-actions,
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .button-row > *,
  .filters-actions > *,
  .hero-actions > * {
    width: 100%;
    justify-content: center;
  }
  .monitoring-layout-save label,
  .form-actions-span {
    width: 100%;
  }
  .dashboard-quick-strip .button-row {
    grid-template-columns: 1fr;
  }
  .panel-header.between,
  .between {
    gap: 10px;
  }
  table { min-width: 640px; }
}

@media (max-width: 760px) {
  .sidebar { padding: 12px; gap: 10px; }
  .content { padding: 14px; }
  .content-appbar {
    position: static;
    top: auto;
    padding: 14px 15px;
  }
  .content-appbar__title,
  .content-appbar__meta,
  .menu-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .content-appbar__title { font-size: 20px; }
  .content-appbar__main,
  .content-appbar__side {
    width: 100%;
    min-width: 0;
  }
  .menu {
    gap: 8px;
    padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar {
    display: none;
  }
  .menu-item {
    scroll-snap-align: start;
  }
  .menu-group .menu-item {
    width: 100%;
  }
  .menu-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .dashboard-showcase__main,
  .dashboard-focus-card {
    padding: 18px;
  }
  .dashboard-showcase__main h1 {
    font-size: clamp(30px, 9vw, 40px);
  }
  .dashboard-showcase__actions {
    width: 100%;
  }
  .dashboard-showcase__actions .btn {
    flex: 1 1 160px;
  }
  .dashboard-showcase__brief {
    grid-template-columns: 1fr;
  }
  .dashboard-metric-grid {
    grid-template-columns: 1fr 1fr;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .health-item__head { flex-direction: column; }
  .detail-list__item { flex-direction: column; }
  .detail-list__item span { text-align: left; }
  .camera-fold { padding: 16px; }
  .camera-fold__summary { flex-direction: column; }
  .recorder-fold { padding: 16px; }
  .recorder-fold__summary { flex-direction: column; }
  .device-summary { grid-template-columns: 1fr; gap: 14px; }
  .device-summary__visual { min-height: 104px; }
  .device-illustration--camera { max-width: 148px; }
  .device-illustration--recorder { max-width: 160px; }
  .settings-summary-grid { grid-template-columns: 1fr 1fr; }
  .monitoring-selection-bulk {
    flex-direction: column;
    align-items: stretch;
  }
  .monitoring-selection-search {
    max-width: 100%;
  }
  .monitoring-select-chip--visual { grid-template-columns: auto 1fr; }
  .monitoring-select-chip--visual .monitoring-select-chip__copy {
    grid-column: 2;
    grid-row: 1;
  }
  .monitoring-select-chip__preview {
    grid-column: 1 / -1;
    width: 100%;
    height: 190px;
  }
  .monitoring-select-chip__state {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }
  .camera-live-shell { width: 100%; }
  .hero h1 { font-size: 28px; }
  .hero-panel h1 { font-size: 34px; }
  .activity-row,
  .list-row { flex-direction: column; align-items: flex-start; }
  .compact-feed__item,
  .device-section__summary,
  .settings-toggle { flex-direction: column; align-items: flex-start; }
  .compact-feed__side { justify-items: flex-start; text-align: left; }
  .live-overlay { padding: 12px; }
  .live-dialog { padding: 14px; }
  .live-dialog__header { flex-direction: column; }
  .live-dialog__body { grid-template-columns: 1fr; }
  .live-dialog__footnote { flex-direction: column; align-items: flex-start; }
  .live-rail { max-height: none; }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .filters-grid,
    .three-col-form,
    .form-stack {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    input[type="date"],
    input[type="datetime-local"] {
      -webkit-appearance: none;
      appearance: none;
      inline-size: 100%;
      min-inline-size: 0;
      max-inline-size: 100%;
      width: -webkit-fill-available;
      font-size: 16px;
      box-sizing: border-box;
      padding-right: 12px;
      overflow: hidden;
    }
    .filters-grid label,
    .three-col-form label,
    .form-stack label {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    input[type="date"]::-webkit-datetime-edit,
    input[type="datetime-local"]::-webkit-datetime-edit {
      padding: 0;
      margin: 0;
      min-width: 0;
    }
    input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
      padding: 0;
      min-width: 0;
    }
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      flex: 0 0 auto;
      margin: 0 0 0 8px;
      padding: 0;
    }
  }
}

@media (max-width: 560px) {
  .content { padding: 12px; }
  .content-appbar {
    top: 0;
    padding: 12px 13px;
    gap: 12px;
  }
  .content-appbar__title { font-size: 18px; }
  .content-appbar__meta { font-size: 12px; }
  .menu-item { padding: 8px 10px; min-height: 46px; }
  .menu-item__label { font-size: 11px; max-width: 11ch; }
  .menu-group { flex-basis: min(218px, 82vw); }
  .menu-subitem { font-size: 11px; padding-inline: 8px; }
  .dashboard-metric-grid,
  .dashboard-priority-grid--premium {
    grid-template-columns: 1fr;
  }
  .dashboard-showcase__chips {
    gap: 8px;
  }
  .dashboard-weather-spotlight {
    padding: 16px;
    border-radius: 22px;
  }
  .dashboard-weather-inline {
    padding: 14px;
    border-radius: 18px;
  }
  .dashboard-weather-inline__facts,
  .dashboard-weather-inline__rail {
    grid-template-columns: 1fr;
  }
  .dashboard-weather-spotlight__facts {
    grid-template-columns: 1fr;
  }
  .dashboard-weather-spotlight__rail {
    grid-template-columns: 1fr;
  }
  .dashboard-showcase__main {
    padding: 16px;
    border-radius: 22px;
  }
  .dashboard-focus-card {
    padding: 14px;
    border-radius: 20px;
  }
  .settings-summary-grid { grid-template-columns: 1fr; }
  .panel,
  .camera-fold,
  .recorder-fold { padding: 14px; }
  .live-dialog {
    width: min(calc(100vw - 12px), 100%);
    padding: 12px;
    border-radius: 0;
  }
  .live-dialog__media {
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
  .table-wrap { border-radius: 16px; }
  .panel-header h2 { font-size: 18px; }
  .stat-value { font-size: 30px; }
}

.recorder-playback-shell {
  display: grid;
  gap: 16px;
}

.recorder-playback-page-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.recorder-playback-page-head__title {
  min-width: 0;
}

.recorder-playback-page-head__title h1 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
}

.recorder-playback-page-head__title p {
  margin: 8px 0 0;
  color: rgba(203, 213, 225, 0.78);
  font-size: 14px;
}

.recorder-playback-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.recorder-playback-inline-note {
  justify-self: start;
}

.recorder-playback-toolbar--refined {
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
}

.recorder-playback-toolbar__actions--refined {
  justify-content: flex-end;
}

.recorder-playback-filters {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(71, 85, 105, 0.42);
  background: rgba(6, 11, 19, 0.92);
}

.recorder-playback-filters--timeline {
  padding: 12px 14px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(10, 16, 27, 0.98), rgba(6, 10, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.recorder-playback-inline-controls {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(140px, 170px) 1fr;
  gap: 10px;
  align-items: end;
  padding-bottom: 6px;
}

.recorder-playback-inline-controls__field {
  display: grid;
  gap: 6px;
}

.recorder-playback-inline-controls__field span {
  color: rgba(148, 163, 184, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recorder-playback-inline-controls__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.recorder-playback-filters legend {
  padding: 0 4px;
  color: rgba(203, 213, 225, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recorder-playback-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.52);
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  cursor: pointer;
}

.recorder-playback-filter input {
  margin: 0;
  accent-color: #f59e0b;
}

.recorder-playback-filter span {
  font-size: 13px;
  font-weight: 700;
}

.recorder-playback-filter small {
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.94);
  color: rgba(148, 163, 184, 0.96);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.recorder-playback-filter--empty {
  opacity: 0.62;
}

.recorder-playback-filter--vehicle {
  border-color: rgba(56, 189, 248, 0.45);
}

.recorder-playback-filter--person {
  border-color: rgba(34, 197, 94, 0.42);
}

.recorder-playback-filter--event {
  border-color: rgba(245, 158, 11, 0.46);
}

.recorder-playback-summary--refined {
  gap: 10px;
}

.recorder-playback-stage {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(71, 85, 105, 0.44);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(7, 12, 22, 0.98), rgba(2, 6, 14, 0.98));
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.45);
  color: #e2e8f0;
}

.recorder-playback-stage__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.recorder-playback-stage__meta strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 20px;
  line-height: 1.1;
}

.recorder-playback-stage__meta > div:first-child > span:last-child {
  display: block;
  color: rgba(203, 213, 225, 0.78);
  font-size: 13px;
}

.recorder-playback-stage__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(148, 163, 184, 0.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recorder-playback-stage__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recorder-playback-stage__canvas {
  display: grid;
  justify-items: center;
}

.recorder-playback-card--solo {
  width: min(100%, 1440px);
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(71, 85, 105, 0.42);
  border-radius: 28px;
  background: rgba(8, 13, 22, 0.96);
  box-shadow:
    0 20px 42px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.recorder-panel-stream-shell--playback {
  background:
    radial-gradient(circle at top, rgba(34, 197, 94, 0.08), transparent 25%),
    linear-gradient(180deg, #070c14, #020305);
}

.recorder-panel-stream-shell--playback .recorder-panel-stream {
  object-fit: contain;
  background: #000;
}

.recorder-playback-card__rail {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(71, 85, 105, 0.32);
  background: linear-gradient(180deg, rgba(8, 13, 22, 0.98), rgba(3, 7, 14, 1));
}

.recorder-playback-card__rail-head--timeline {
  align-items: center;
}

.recorder-playback-card__rail-title strong {
  margin: 0 0 4px;
  color: #f8fafc;
  font-size: 16px;
}

.recorder-playback-card__rail-title span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}

.recorder-playback-chipbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recorder-playback-detail {
  display: grid;
  gap: 8px;
}

.recorder-playback-range-shell {
  position: relative;
}

.recorder-playback-range-shell--detail {
  height: 78px;
  padding-top: 18px;
}

.recorder-playback-track {
  position: relative;
  overflow: hidden;
}

.recorder-playback-track--detail {
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.5);
  background:
    linear-gradient(180deg, rgba(14, 21, 34, 0.98), rgba(8, 12, 22, 0.98)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 1px),
      rgba(71, 85, 105, 0.24) calc(25% - 1px),
      rgba(71, 85, 105, 0.24) 25%
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.recorder-playback-track__segment {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8ea4ff, #5972ff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.recorder-playback-track--detail .recorder-playback-track__segment {
  top: 10px;
  bottom: 10px;
  border-radius: 10px;
}

.recorder-playback-track__segment--motion {
  background: linear-gradient(90deg, #f7c948, #f59e0b);
  opacity: 0.96;
}

.recorder-playback-track__window {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.58);
  background: rgba(59, 130, 246, 0.12);
  pointer-events: none;
}

.recorder-playback-track__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: #ff5f4a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.recorder-playback-track__cursor--detail {
  width: 3px;
}

.recorder-playback-range {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 2;
}

.recorder-playback-range--detail {
  height: 78px;
}

.recorder-playback-range::-webkit-slider-runnable-track,
.recorder-playback-range::-moz-range-track {
  background: transparent;
}

.recorder-playback-range--detail::-webkit-slider-runnable-track,
.recorder-playback-range--detail::-moz-range-track {
  height: 78px;
}

.recorder-playback-range--detail::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 29px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  background: #ff5f4a;
  box-shadow: 0 0 0 4px rgba(255, 95, 74, 0.18);
}

.recorder-playback-range--detail::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  background: #ff5f4a;
  box-shadow: 0 0 0 4px rgba(255, 95, 74, 0.18);
}

.recorder-playback-axis {
  position: relative;
}

.recorder-playback-axis--detail {
  height: 22px;
}

.recorder-playback-axis span {
  position: absolute;
  transform: translateX(-50%);
  color: rgba(203, 213, 225, 0.82);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.recorder-playback-axis span::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -8px;
  width: 1px;
  height: 8px;
  background: rgba(148, 163, 184, 0.34);
}

.recorder-playback-axis span.is-minor {
  font-size: 0;
}

.recorder-playback-axis span.is-minor::before {
  height: 6px;
  background: rgba(100, 116, 139, 0.24);
}

.recorder-playback-card__rail-meta {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.34);
  background: rgba(10, 15, 24, 0.9);
  color: rgba(148, 163, 184, 0.88);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.recorder-playback-card__rail-meta span:nth-child(2) {
  min-width: 50px;
  color: #f8fafc;
}

.recorder-playback-card__rail-meta span:nth-child(3) {
  text-align: center;
}

.recorder-playback-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: rgba(203, 213, 225, 0.82);
  font-size: 12px;
  font-weight: 600;
}

.recorder-playback-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.recorder-playback-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.recorder-playback-legend__dot--recording {
  background: linear-gradient(90deg, #8ea4ff, #5972ff);
}

.recorder-playback-legend__dot--motion {
  background: linear-gradient(90deg, #f7c948, #f59e0b);
}

.recorder-playback-legend__dot--event {
  background: #f8fafc;
}

.recorder-playback-legend__dot--current {
  background: #ff5f4a;
}

.recorder-playback-event-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.recorder-playback-event-marker {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  cursor: pointer;
  color: #0b1120;
  background: linear-gradient(180deg, #f8fafc, #cbd5e1);
  box-shadow: 0 10px 18px rgba(2, 6, 23, 0.34);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.recorder-playback-event-marker::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
}

.recorder-playback-event-marker--detail {
  top: -2px;
}

.recorder-playback-event-marker:hover,
.recorder-playback-event-marker:focus-visible {
  outline: none;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  transform: translateX(-50%) scale(1.08);
}

.recorder-playback-event-marker--vehicle {
  color: #082f49;
  background: linear-gradient(180deg, #bae6fd, #38bdf8);
}

.recorder-playback-event-marker--person {
  color: #052e16;
  background: linear-gradient(180deg, #bbf7d0, #22c55e);
}

.recorder-playback-event-marker--event {
  color: #431407;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
}

@media (max-width: 980px) {
  .recorder-playback-page-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .recorder-playback-page-head__actions {
    justify-content: flex-start;
  }

  .recorder-playback-stage__meta {
    flex-direction: column;
  }

  .recorder-playback-stage__chips {
    justify-content: flex-start;
  }

  .recorder-playback-card--solo {
    width: 100%;
  }

  .recorder-playback-filters__list {
    justify-content: flex-start;
  }

  .recorder-playback-inline-controls {
    grid-template-columns: 1fr 1fr;
  }

  .recorder-playback-inline-controls__meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .recorder-playback-shell {
    gap: 14px;
  }

  .recorder-playback-stage {
    padding: 14px;
    border-radius: 22px;
  }

  .recorder-playback-card__rail {
    padding: 12px;
  }

  .recorder-playback-range-shell--detail {
    height: 72px;
    padding-top: 16px;
  }

  .recorder-playback-track--detail {
    height: 52px;
  }

  .recorder-playback-range--detail {
    height: 72px;
  }

  .recorder-playback-range--detail::-webkit-slider-thumb {
    margin-top: 24px;
  }

  .recorder-playback-inline-controls {
    grid-template-columns: 1fr;
  }

  .recorder-playback-axis span {
    font-size: 10px;
  }

  .recorder-playback-card__rail-meta {
    grid-template-columns: 1fr 1fr;
  }

  .recorder-playback-card__rail-meta span:nth-child(3),
  .recorder-playback-card__rail-meta span:nth-child(4) {
    text-align: left;
  }

  .recorder-playback-filter {
    width: 100%;
    justify-content: space-between;
  }
}

/* Playback redesign */
.recorder-playback-shell {
  max-width: 1680px;
  margin: 0 auto;
  gap: 10px;
}

.recorder-playback-topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(71, 85, 105, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(10, 15, 25, 0.96), rgba(5, 8, 15, 0.98));
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
}

.recorder-playback-topline__back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
}

.recorder-playback-topline__title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.recorder-playback-topline__title strong {
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-topline__title span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-inline-note {
  justify-self: start;
}

.recorder-playback-commandbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 14px 18px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(12, 18, 30, 0.98), rgba(6, 10, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.recorder-playback-commandbar__primary {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.recorder-playback-commandbar__copy {
  min-width: 0;
}

.recorder-playback-commandbar__copy strong {
  display: block;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.recorder-playback-commandbar__copy span {
  display: block;
  margin-top: 4px;
  color: rgba(191, 219, 254, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.recorder-playback-commandbar__badges,
.recorder-playback-commandbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recorder-playback-commandbar__actions {
  align-self: stretch;
  align-items: center;
  justify-content: flex-end;
}

.recorder-playback-stage {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(71, 85, 105, 0.4);
  background:
    radial-gradient(circle at top center, rgba(56, 189, 248, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(8, 13, 22, 0.99), rgba(4, 8, 14, 0.99));
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.22);
}

.recorder-playback-stage__canvas {
  display: block;
}

.recorder-playback-card--solo {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.38);
  background:
    linear-gradient(180deg, rgba(8, 13, 22, 0.98), rgba(3, 7, 14, 1));
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

.recorder-playback-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 0;
}

.recorder-playback-viewbar__time {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.recorder-playback-viewbar__time small {
  color: rgba(148, 163, 184, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-viewbar__time strong {
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.1;
}

.recorder-playback-viewbar__time span {
  color: rgba(191, 219, 254, 0.72);
  font-size: 10px;
  line-height: 1.3;
}

.recorder-playback-viewbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.recorder-playback-viewbar__actions .btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
}

.recorder-panel-stream-shell--playback {
  padding: 8px 10px 10px;
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(2, 5, 10, 0.96), rgba(1, 3, 7, 1));
}

.recorder-panel-stream-shell--playback .recorder-panel-stream {
  border-radius: 12px;
  background: #000;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

.recorder-panel-stream-shell--playback:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.recorder-panel-stream-shell--playback:fullscreen .recorder-panel-stream {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

.recorder-playback-card__rail {
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(71, 85, 105, 0.3);
  background:
    linear-gradient(180deg, rgba(9, 14, 24, 0.98), rgba(4, 8, 15, 1));
}

.recorder-playback-card__rail-head--timeline {
  align-items: start;
}

.recorder-playback-card__rail-title {
  display: grid;
  gap: 6px;
}

.recorder-playback-card__rail-title strong {
  margin: 0;
  font-size: 15px;
  color: #f8fafc;
}

.recorder-playback-card__rail-title span {
  color: rgba(203, 213, 225, 0.76);
  font-size: 11px;
  line-height: 1.35;
}

.recorder-playback-chipbar {
  gap: 8px;
}

.recorder-playback-filters--timeline {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(11, 17, 29, 0.94), rgba(8, 12, 20, 0.96));
}

.recorder-playback-filters--timeline legend {
  padding: 0 10px;
  color: rgba(148, 163, 184, 0.8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.recorder-playback-filters__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.recorder-playback-filters__header-copy {
  min-width: 0;
}

.recorder-playback-filters__header-copy strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.2;
}

.recorder-playback-filters__header-copy span {
  display: block;
  margin-top: 3px;
  color: rgba(191, 219, 254, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

.recorder-playback-filters__header-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recorder-playback-filters__header-badges:empty {
  display: none;
}

.recorder-playback-filters__surface {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(3, 7, 14, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.recorder-playback-inline-controls {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 220px) minmax(240px, 1fr);
  gap: 10px;
  align-items: end;
}

.recorder-playback-inline-controls__field {
  display: grid;
  gap: 8px;
}

.recorder-playback-inline-controls__field span {
  color: rgba(148, 163, 184, 0.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-inline-controls__field input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(71, 85, 105, 0.42);
  background: rgba(7, 12, 20, 0.96);
  color: #f8fafc;
  font-size: 13px;
}

.recorder-playback-inline-controls__field input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.8);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.recorder-playback-inline-controls__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.recorder-playback-inline-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.recorder-playback-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recorder-playback-download-controls {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 220px) minmax(240px, 1fr);
  gap: 10px;
  align-items: end;
}

.recorder-playback-download-controls__field {
  display: grid;
  gap: 8px;
}

.recorder-playback-download-controls__field span {
  color: rgba(148, 163, 184, 0.84);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-download-controls__field input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(71, 85, 105, 0.42);
  background: rgba(7, 12, 20, 0.96);
  color: #f8fafc;
  font-size: 13px;
}

.recorder-playback-download-controls__field input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.8);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.recorder-playback-download-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.recorder-playback-download-panel {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.32);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(7, 12, 20, 0.94), rgba(3, 7, 16, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.recorder-playback-download-panel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 14px;
  align-items: center;
}

.recorder-playback-download-panel__head strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.recorder-playback-download-panel__head span {
  display: block;
  margin-top: 4px;
  color: rgba(148, 163, 184, 0.8);
  font-size: 12px;
  line-height: 1.45;
}

.recorder-playback-download-panel__progress {
  position: relative;
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(71, 85, 105, 0.22);
}

.recorder-playback-download-panel__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.92), rgba(214, 187, 24, 0.96));
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.28);
  transition: width 0.18s ease;
}

.recorder-playback-download-panel__progress-bar[data-indeterminate="true"] {
  width: 38%;
  animation: playback-download-progress 1.2s linear infinite;
}

.recorder-playback-download-panel__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.recorder-playback-download-stat {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid rgba(71, 85, 105, 0.22);
  background: rgba(9, 14, 25, 0.82);
}

.recorder-playback-download-stat small {
  color: rgba(148, 163, 184, 0.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-download-stat strong {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  word-break: break-word;
}

.recorder-playback-download-stat--file {
  grid-column: span 2;
}

@keyframes playback-download-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(260%);
  }
}

.recorder-playback-filter {
  min-width: 118px;
  padding: 9px 10px 9px 12px;
  border-radius: 12px;
  border-width: 1px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(8, 12, 20, 0.96));
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.recorder-playback-filter:hover {
  transform: translateY(-1px);
}

.recorder-playback-filter__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.recorder-playback-filter__count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.recorder-playback-filter--vehicle .recorder-playback-filter__count {
  background: rgba(8, 47, 73, 0.72);
  border-color: rgba(56, 189, 248, 0.3);
}

.recorder-playback-filter--person .recorder-playback-filter__count {
  background: rgba(5, 46, 22, 0.72);
  border-color: rgba(34, 197, 94, 0.3);
}

.recorder-playback-filter--event .recorder-playback-filter__count {
  background: rgba(67, 20, 7, 0.72);
  border-color: rgba(245, 158, 11, 0.3);
}

.recorder-playback-detail {
  gap: 8px;
}

.recorder-playback-range-shell--detail {
  height: 82px;
  padding-top: 16px;
}

.recorder-playback-track--detail {
  height: 56px;
  border-radius: 14px;
  border-color: rgba(71, 85, 105, 0.4);
  background:
    linear-gradient(180deg, rgba(13, 19, 30, 0.98), rgba(8, 12, 20, 0.98)),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.04) 0,
      rgba(148, 163, 184, 0.04) 1px,
      transparent 1px,
      transparent calc(100% / 24)
    );
}

.recorder-playback-track--detail .recorder-playback-track__segment {
  top: 10px;
  bottom: 10px;
  border-radius: 10px;
}

.recorder-playback-track__segment {
  background: linear-gradient(90deg, #90a4ff, #5f75ff);
}

.recorder-playback-track__segment--motion {
  background: linear-gradient(90deg, #f8d463, #f59e0b);
}

.recorder-playback-event-markers--detail {
  top: -4px;
}

.recorder-playback-event-marker {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  font-size: 10px;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.3);
}

.recorder-playback-event-marker::after {
  top: 16px;
  height: 12px;
}

.recorder-playback-axis--detail {
  height: 20px;
}

.recorder-playback-axis span {
  color: rgba(203, 213, 225, 0.88);
  font-size: 10px;
  font-weight: 700;
}

.recorder-playback-card__rail-meta--cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
}

.recorder-playback-meta-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  background:
    linear-gradient(180deg, rgba(10, 15, 25, 0.94), rgba(6, 10, 18, 0.98));
}

.recorder-playback-meta-card small {
  color: rgba(148, 163, 184, 0.8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-meta-card strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.2;
}

.recorder-playback-meta-card span {
  color: rgba(191, 219, 254, 0.72);
  font-size: 11px;
  line-height: 1.4;
}

.recorder-playback-meta-card--highlight {
  border-color: rgba(96, 165, 250, 0.4);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(9, 16, 30, 0.96), rgba(6, 10, 18, 0.98));
}

.recorder-playback-meta-card--status {
  border-color: rgba(245, 158, 11, 0.32);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(19, 15, 10, 0.96), rgba(10, 8, 7, 0.98));
}

.recorder-playback-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 2px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 11px;
}

.recorder-playback-legend span {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.24);
  background: rgba(7, 12, 20, 0.66);
}

.recorder-weather-inline {
  margin-top: 14px;
}

.recorder-weather-inline__surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(10, 15, 24, 0.94), rgba(6, 10, 18, 0.98));
}

.recorder-weather-inline__summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.recorder-weather-inline__summary strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.2;
}

.recorder-weather-inline__summary span {
  color: rgba(226, 232, 240, 0.86);
  font-size: 13px;
  line-height: 1.45;
}

.recorder-weather-inline__summary small {
  color: rgba(148, 163, 184, 0.8);
  font-size: 12px;
  line-height: 1.4;
}

.recorder-weather-inline__surface--form {
  align-items: stretch;
}

.recorder-weather-inline__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 auto;
}

.recorder-weather-inline__fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.recorder-weather-inline__fields span {
  color: rgba(191, 219, 254, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .recorder-playback-card__rail-meta--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .recorder-playback-topline {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .recorder-weather-inline__surface {
    flex-direction: column;
    align-items: stretch;
  }

  .recorder-weather-inline__fields {
    grid-template-columns: 1fr;
  }

  .recorder-playback-filters__header-badges {
    justify-content: flex-start;
  }

  .recorder-playback-inline-controls {
    grid-template-columns: 1fr 1fr;
  }

  .recorder-playback-inline-controls__meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .recorder-playback-download-controls {
    grid-template-columns: 1fr 1fr;
  }

  .recorder-playback-download-controls__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .recorder-playback-download-panel__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recorder-playback-download-stat--file {
    grid-column: span 3;
  }
}

@media (max-width: 720px) {
  .recorder-playback-topline,
  .recorder-playback-stage,
  .recorder-playback-card__rail {
    padding: 10px;
  }

  .recorder-playback-card__rail-meta--cards {
    grid-template-columns: 1fr;
  }

  .recorder-playback-filters__header,
  .recorder-playback-card__rail-head--timeline {
    flex-direction: column;
  }

  .recorder-playback-viewbar {
    flex-direction: column;
    align-items: start;
  }

  .recorder-playback-viewbar__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .recorder-playback-inline-controls {
    grid-template-columns: 1fr;
  }

  .recorder-playback-download-controls {
    grid-template-columns: 1fr;
  }

  .recorder-playback-download-panel {
    padding: 13px;
  }

  .recorder-playback-download-panel__stats {
    grid-template-columns: 1fr 1fr;
  }

  .recorder-playback-download-stat,
  .recorder-playback-download-stat--file {
    grid-column: auto;
    min-height: 0;
  }

  .recorder-playback-filter {
    width: 100%;
  }

  .recorder-playback-range-shell--detail {
    height: 76px;
    padding-top: 14px;
  }

  .recorder-playback-track--detail {
    height: 52px;
  }

  .recorder-playback-range--detail {
    height: 76px;
  }

  .recorder-playback-range--detail::-webkit-slider-thumb {
    margin-top: 28px;
  }
}

@media (max-width: 900px) {
  .event-detail-topcards {
    grid-template-columns: 1fr;
  }

  .event-image-card--large {
    width: 100%;
  }

  .event-image-card__image--large {
    max-height: 52vh;
  }

  .playback-download-dock {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
  }
}

/* Premium global refresh */

.hero {
  padding: 20px 22px;
  border-radius: 24px;
  border-color: rgba(214, 187, 24, 0.12);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.12), transparent 22%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.1), transparent 28%),
    linear-gradient(145deg, rgba(8, 14, 24, 0.98), rgba(13, 20, 35, 0.95));
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
}

.hero.compact,
.panel {
  padding: 16px 18px;
}

.hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.hero p {
  max-width: 72ch;
  color: #c8d5e7;
  font-size: 14px;
  line-height: 1.68;
}

.hero-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.panel {
  overflow: hidden;
  border-radius: 20px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 28%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(7, 12, 21, 0.98));
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.2);
}

.subtle-panel {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 26%),
    linear-gradient(180deg, rgba(13, 20, 35, 0.88), rgba(9, 14, 24, 0.98));
}

.stats-grid {
  gap: 14px;
}

.stat-card,
.metric-chip,
.signal-card,
.insight-card {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 28%),
    linear-gradient(180deg, rgba(12, 18, 31, 0.94), rgba(8, 13, 24, 0.98));
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
}

.filters-grid,
.three-col-form {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.filters-grid label,
.form-stack label,
.three-col-form label {
  gap: 10px;
  color: #aebed5;
  font-size: 11px;
  letter-spacing: .14em;
}

.filters-grid label > span,
.form-stack label > span,
.three-col-form label > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

input,
select,
textarea {
  min-height: 48px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(6, 11, 20, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

textarea {
  min-height: 110px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(214, 187, 24, 0.34);
  box-shadow: 0 0 0 3px rgba(214, 187, 24, 0.1);
}

table {
  min-width: 720px;
}

thead {
  background: rgba(255, 255, 255, 0.025);
}

th,
td {
  padding: 13px 14px;
}

tbody tr {
  transition: background .16s ease;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.detail-list {
  gap: 8px;
}

.detail-list__item {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.range-chip {
  padding: 9px 13px;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.025);
}

.live-dialog {
  width: min(1040px, 100%);
  padding: 16px;
  border-radius: 24px;
  border-color: rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 24%),
    linear-gradient(180deg, rgba(4, 8, 16, 0.98), rgba(2, 6, 18, 0.995));
}

.live-dialog--player {
  width: min(1220px, 100%);
}

.live-dialog__header {
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.live-dialog__header h2 {
  font-size: 20px;
  letter-spacing: -.03em;
}

.live-dialog__action,
.live-dialog__close {
  min-height: 42px;
  border-radius: 14px;
}

.live-dialog__close {
  width: 42px;
  min-width: 42px;
}

.live-dialog__media,
.camera-live-frame,
.monitoring-stage,
.monitoring-layout-card__media,
.event-image-card,
.event-image-card--flush {
  border-radius: 20px;
}

.live-dialog__footnote {
  border-radius: 16px;
}

.device-section,
.subsection-block {
  border-radius: 20px;
  border-color: rgba(148, 163, 184, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.device-section__summary {
  padding: 14px 16px;
}

.device-section__body {
  padding: 16px;
}

.camera-fold,
.recorder-fold {
  padding: 16px;
  border-radius: 24px;
  border-color: rgba(148, 163, 184, 0.12);
}

.camera-fold__body,
.recorder-fold__body {
  gap: 14px;
}

.camera-fold__content {
  gap: 14px;
}

.device-summary {
  gap: 14px;
}

.device-summary__visual,
.device-summary__thumb {
  border-radius: 22px;
}

.device-summary__copy h3 {
  font-size: 20px;
  letter-spacing: -.03em;
}

.device-summary__copy p {
  line-height: 1.58;
}

.monitoring-selection-tools,
.monitoring-selection-bulk {
  border-radius: 18px;
}

.monitoring-selection-bulk,
.monitoring-select-chip,
.monitoring-layout-card,
.monitoring-tile {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(7, 12, 21, 0.98));
}

.monitoring-select-chip,
.monitoring-layout-card,
.monitoring-tile {
  border-radius: 18px;
}

.monitoring-select-chip__preview,
.monitoring-layout-card__media,
.monitoring-stage {
  border-radius: 16px;
}

.monitoring-layout-card {
  padding: 12px;
  gap: 8px;
}

.monitoring-layout-card__actions,
.monitoring-tile__toolbar,
.monitoring-recorder-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monitoring-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.monitoring-tile {
  padding: 16px;
}

.event-detail-shell {
  gap: 18px;
}

.event-detail-topcards {
  gap: 16px;
}

.event-image-card--large {
  width: min(1320px, 100%);
  padding: 12px;
  margin: 0 auto;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 26%),
    linear-gradient(180deg, rgba(7, 12, 21, 0.98), rgba(3, 7, 14, 1));
}

.event-image-card__image--large {
  max-height: 72vh;
  border-radius: 18px;
}

@media (max-width: 1280px) {
  .camera-fold-list,
  .camera-live-grid {
    grid-template-columns: 1fr;
  }

  .camera-fold__content,
  .event-detail-topcards,
  .hero-grid,
  .monitoring-grid {
    grid-template-columns: 1fr;
  }

  .monitoring-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 980px) {
  .filters-grid,
  .three-col-form,
  .panel-grid.two-col,
  .signal-grid,
  .settings-summary-grid,
  .event-detail-topcards {
    grid-template-columns: 1fr;
  }

  .live-dialog__body {
    grid-template-columns: 1fr;
  }

  .monitoring-grid,
  .monitoring-select-grid,
  .camera-fold-list {
    grid-template-columns: 1fr;
  }

  .device-summary {
    grid-template-columns: 1fr;
  }

  .recorder-fold__summary,
  .camera-fold__summary,
  .monitoring-selection-bulk {
    flex-direction: column;
    align-items: flex-start;
  }

  .recorder-fold__summary-side,
  .camera-fold__summary-side {
    justify-items: flex-start;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 18px;
    border-radius: 22px;
  }

  .hero h1 {
    font-size: clamp(24px, 8vw, 34px);
  }

  .hero-actions,
  .button-row {
    width: 100%;
  }

  .photo-gallery,
  .monitoring-layout-grid,
  .monitoring-grid,
  .dashboard-metric-grid {
    grid-template-columns: 1fr;
  }

  .live-dialog,
  .photo-dialog {
    width: 100%;
    padding: 14px;
    border-radius: 20px;
  }

  .event-image-card--large {
    padding: 10px;
  }

  .event-image-card__image--large {
    max-height: 56vh;
  }
}

@media (max-width: 560px) {
  .hero.compact,
  .panel,
  .camera-fold,
  .recorder-fold {
    padding: 14px;
  }

  .btn,
  .table-action-link {
    min-height: 40px;
  }

  .hero-actions .btn,
  .button-row .btn,
  .button-row .table-action-link,
  .button-row form {
    width: 100%;
  }

  .monitoring-layout-card__actions form {
    width: 100%;
  }

  .table-wrap {
    border-radius: 16px;
  }

  table {
    min-width: 640px;
  }

  .event-image-card__image--large {
    max-height: 48vh;
  }
}

/* Refinamento premium: DVRs, mural e playback */

.recorder-panel-shell {
  padding: 16px;
  border-radius: 24px;
  border-color: rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 22%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(4, 8, 14, 0.99), rgba(2, 5, 10, 1));
}

.recorder-panel-intro {
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}

.recorder-panel-intro h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -.04em;
}

.recorder-panel-intro p {
  max-width: 66ch;
  line-height: 1.6;
}

.recorder-panel-kpis {
  gap: 10px;
}

.recorder-panel-kpi {
  padding: 12px 14px;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(8, 13, 22, 0.9), rgba(4, 8, 14, 0.94));
}

.recorder-panel-toolbar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.recorder-panel-toolbar__group {
  padding: 12px 13px;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(7, 12, 20, 0.94);
}

.recorder-panel-toolbar__options {
  gap: 7px;
}

.recorder-panel-chip {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 11px;
}

.recorder-panel-chip--stacked {
  min-height: 72px;
  border-radius: 18px;
}

.recorder-panel-stage {
  padding: 12px;
  border-radius: 20px;
  border-color: rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top center, rgba(56, 189, 248, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(4, 8, 14, 0.99), rgba(1, 4, 8, 1));
}

.recorder-panel-stage__head {
  margin-bottom: 10px;
}

.recorder-panel-stage__head h3 {
  font-size: 20px;
  letter-spacing: -.03em;
}

.recorder-panel-stage__head p {
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.55;
}

.recorder-panel-monitor {
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.26);
}

.recorder-panel-monitor__bar {
  padding: 8px 10px;
}

.recorder-panel-monitor__meta {
  gap: 6px;
}

.recorder-panel-monitor__meta span {
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.recorder-panel-monitor__fullscreen {
  min-height: 34px;
  border-radius: 10px;
}

.recorder-panel-stage__foot {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.12);
  color: rgba(191, 219, 254, 0.72);
}

.recorder-panel-channel-strip {
  grid-auto-columns: minmax(232px, 260px);
  gap: 12px;
}

.recorder-panel-channel-card {
  min-height: 0;
  padding: 14px;
  border-radius: 20px;
  gap: 0;
}

.recorder-panel-channel-card__preview {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #02060d;
  aspect-ratio: 16 / 9;
}

.recorder-panel-channel-card__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recorder-panel-channel-card__preview--empty {
  display: grid;
  place-items: center;
  color: rgba(191, 219, 254, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.recorder-panel-channel-card h3 {
  margin-bottom: 6px;
  font-size: 16px;
}

.recorder-panel-channel-card p {
  min-height: 0;
  font-size: 12px;
  line-height: 1.5;
}

.recorder-panel-channel-card__actions {
  margin-top: 12px;
}

.recorder-panel-channel-card__actions .table-action-link,
.monitoring-layout-card__actions .table-action-link,
.monitoring-layout-card__actions form,
.recorder-panel-channel-card__actions form {
  flex: 1 1 auto;
}

.monitoring-selection-tools {
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.94), rgba(6, 10, 18, 0.98));
}

.monitoring-selection-search {
  max-width: 620px;
}

.monitoring-selection-bulk {
  padding: 12px 14px;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.monitoring-select-grid {
  gap: 14px;
}

.monitoring-select-chip {
  padding: 14px;
  border-radius: 18px;
}

.monitoring-select-chip__preview {
  height: 180px;
  border-radius: 14px;
}

.monitoring-select-chip__copy strong {
  font-size: 15px;
  letter-spacing: -.02em;
}

.monitoring-select-chip__copy small {
  font-size: 12px;
}

.monitoring-layout-grid {
  gap: 12px;
}

.monitoring-layout-card {
  padding: 12px;
  border-radius: 18px;
}

.monitoring-layout-card__media {
  border-radius: 14px;
}

.monitoring-layout-card h3 {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.monitoring-layout-card p {
  font-size: 12px;
  line-height: 1.5;
}

.monitoring-layout-save {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.02);
}

.monitoring-layout-save label {
  gap: 10px;
}

.monitoring-layout-save input {
  min-height: 44px;
}

.recorder-playback-shell {
  max-width: 1540px;
  gap: 12px;
}

.recorder-playback-topline {
  padding: 12px 14px;
  border-radius: 18px;
}

.recorder-playback-topline__title strong {
  font-size: 18px;
  letter-spacing: -.03em;
}

.recorder-playback-commandbar {
  gap: 12px 16px;
  padding: 14px 16px;
  border-radius: 20px;
  border-color: rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.96), rgba(5, 8, 15, 0.98));
}

.recorder-playback-commandbar__copy strong {
  font-size: 18px;
  letter-spacing: -.03em;
}

.recorder-playback-commandbar__copy span {
  font-size: 12px;
  line-height: 1.5;
}

.recorder-playback-stage {
  padding: 14px;
  border-radius: 22px;
}

.recorder-playback-card--solo {
  border-radius: 18px;
}

.recorder-playback-viewbar {
  padding: 10px 12px 0;
}

.recorder-playback-viewbar__time strong {
  font-size: 18px;
  letter-spacing: -.03em;
}

.recorder-panel-stream-shell--playback {
  padding: 10px 12px 12px;
}

.recorder-panel-stream-shell--playback .recorder-panel-stream {
  border-radius: 14px;
}

.recorder-playback-card__rail {
  gap: 14px;
  padding: 14px 14px 16px;
}

.recorder-playback-filters--timeline {
  padding: 14px;
  border-radius: 18px;
}

.recorder-playback-filters__surface {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
}

.recorder-playback-inline-controls {
  grid-column: 1 / -1;
}

.recorder-playback-filters__list {
  align-content: start;
}

.recorder-playback-download-controls {
  grid-template-columns: 1fr;
  align-content: start;
}

.recorder-playback-download-controls__actions {
  justify-content: stretch;
}

.recorder-playback-download-controls__actions .btn {
  width: 100%;
}

.recorder-playback-detail {
  gap: 12px;
}

.recorder-playback-card__rail-meta--cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recorder-playback-meta-card {
  min-height: 92px;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 1180px) {
  .recorder-panel-toolbar {
    grid-template-columns: 1fr;
  }

  .monitoring-layout-save,
  .recorder-playback-commandbar {
    grid-template-columns: 1fr;
  }

  .recorder-playback-commandbar__actions {
    justify-content: flex-start;
  }

  .recorder-playback-filters__surface {
    grid-template-columns: 1fr;
  }

  .recorder-playback-card__rail-meta--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .recorder-panel-shell,
  .monitoring-selection-tools,
  .recorder-playback-stage {
    padding: 12px;
  }

  .recorder-panel-channel-strip {
    grid-auto-columns: minmax(220px, 232px);
  }

  .monitoring-layout-save {
    grid-template-columns: 1fr;
  }

  .monitoring-layout-save .btn {
    width: 100%;
  }

  .recorder-playback-card__rail-meta--cards {
    grid-template-columns: 1fr;
  }
}

/* Fine tuning: recorder, monitoring and playback */
.recorder-panel-intro p,
.monitoring-selection-bulk strong,
.recorder-playback-card__rail-title span {
  max-width: 72ch;
}

.recorder-panel-monitor__meta {
  gap: 6px 10px;
}

.recorder-panel-monitor__meta span,
.recorder-panel-stage__foot span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.recorder-panel-stage__foot {
  gap: 6px 14px;
  padding: 9px 12px;
}

.recorder-panel-stage__foot span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(214, 187, 24, 0.72);
  flex: 0 0 auto;
}

.recorder-panel-channel-map__head h3 {
  letter-spacing: -.02em;
}

.recorder-panel-channel-map__head p {
  max-width: 68ch;
  font-size: 12px;
}

.recorder-panel-channel-card {
  gap: 8px;
}

.recorder-panel-channel-card h3 {
  font-size: 15px;
  letter-spacing: -.02em;
}

.recorder-panel-channel-card p {
  font-size: 11px;
  line-height: 1.45;
}

.monitoring-layout-card {
  gap: 9px;
}

.monitoring-layout-card__mosaic {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
  background: rgba(2, 6, 23, 0.96);
}

.monitoring-layout-card__mosaic--1 {
  grid-template-columns: 1fr;
}

.monitoring-layout-card__mosaic--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-layout-card__mosaic--3,
.monitoring-layout-card__mosaic--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.monitoring-layout-card__mosaic-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: rgba(8, 13, 24, 0.96);
}

.monitoring-layout-card__mosaic-tile .monitoring-layout-card__thumb,
.monitoring-layout-card__mosaic-tile .monitoring-layout-card__empty {
  width: 100%;
  height: 100%;
}

.monitoring-layout-card__mosaic-tile .monitoring-layout-card__empty {
  display: grid;
  place-items: center;
  padding: 8px;
  font-size: 10px;
}

.monitoring-layout-card__media-meta {
  padding: 18px 10px 10px;
}

.monitoring-layout-card__media-meta strong {
  font-size: 12px;
}

.monitoring-layout-card__chips {
  gap: 6px;
  min-height: 0;
}

.monitoring-selection-bulk {
  align-items: center;
}

.monitoring-selection-bulk strong {
  font-size: 13px;
  letter-spacing: -.01em;
}

.recorder-playback-topline {
  gap: 10px;
}

.recorder-playback-commandbar {
  gap: 10px 14px;
  padding: 12px 14px;
}

.recorder-playback-commandbar__copy {
  display: grid;
  gap: 2px;
}

.recorder-playback-commandbar__copy strong {
  font-size: 17px;
}

.recorder-playback-commandbar__copy span {
  color: rgba(191, 219, 254, 0.62);
}

.recorder-playback-commandbar__badges .badge {
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
}

.recorder-playback-viewbar {
  padding-bottom: 8px;
}

.recorder-playback-viewbar__time small {
  letter-spacing: .12em;
}

.recorder-playback-filters__header-copy span {
  color: rgba(191, 219, 254, 0.64);
}

.recorder-playback-download-controls {
  gap: 10px;
  align-items: end;
}

.recorder-playback-card__rail-head--timeline {
  gap: 8px 14px;
}

.recorder-playback-card__rail-meta--cards {
  gap: 10px;
}

.recorder-playback-meta-card {
  min-height: 80px;
}

@media (max-width: 760px) {
  .monitoring-layout-card__mosaic {
    gap: 1px;
  }

  .recorder-panel-stage__foot {
    padding: 8px 10px;
  }

  .recorder-playback-commandbar {
    padding: 11px 12px;
  }
}

/* Premium finish: modals and tables */
.live-overlay {
  background: rgba(2, 6, 16, 0.74);
  backdrop-filter: blur(10px);
}

.live-dialog,
.photo-dialog,
.recorder-rename-dialog {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.live-dialog {
  padding: 14px;
  border-radius: 22px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 22%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.04), transparent 20%),
    linear-gradient(180deg, rgba(5, 10, 18, 0.98), rgba(2, 6, 16, 0.995));
}

.live-dialog__header {
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

.live-dialog__header h2 {
  margin: 4px 0 3px;
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.live-dialog__header p {
  color: rgba(191, 219, 254, 0.68);
  line-height: 1.5;
}

.live-dialog__eyebrow {
  color: rgba(214, 187, 24, 0.9);
  letter-spacing: .14em;
}

.live-dialog__window-actions,
.photo-dialog__actions {
  gap: 10px;
}

.live-dialog__action,
.live-dialog__close {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.035);
  color: #e6eef8;
}

.live-dialog__action:hover,
.live-dialog__close:hover {
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

.live-dialog__close {
  width: 40px;
  min-width: 40px;
  font-size: 23px;
  line-height: 1;
}

.live-dialog__media,
.live-dialog__media {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.table-wrap {
  border-radius: 20px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 24%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.94), rgba(6, 10, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

table {
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  background: rgba(255, 255, 255, 0.025);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(12, 18, 31, 0.96);
  color: rgba(191, 219, 254, 0.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

th,
td {
  padding: 13px 15px;
  border-bottom-color: rgba(148, 163, 184, 0.08);
}

tbody tr:nth-child(2n) td {
  background: rgba(255, 255, 255, 0.015);
}

tbody tr:hover td {
  background: rgba(56, 189, 248, 0.045);
}

td strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.28;
  letter-spacing: -.01em;
}

.table-subtext {
  color: rgba(148, 163, 184, 0.8);
}

.table-action-link {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #dbe7f6;
  font-size: 12px;
  font-weight: 700;
}

.table-action-link:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.26);
  background: rgba(255, 255, 255, 0.055);
}

.table-action-link--primary {
  border-color: rgba(56, 189, 248, 0.2);
  background: rgba(56, 189, 248, 0.1);
  color: #c8f2ff;
}

.table-action-link--primary:hover {
  border-color: rgba(56, 189, 248, 0.32);
  background: rgba(56, 189, 248, 0.15);
}

.list-card--account,
.list-card--camera {
  gap: 7px;
}

.list-card--account strong,
.list-card--camera strong {
  font-size: 14px;
  line-height: 1.25;
}

.list-card--account {
  display: grid;
  align-content: start;
  padding: 14px 16px;
  border-radius: 18px;
}

.list-card--account strong,
.list-card--account span {
  display: block;
}

.list-card__meta {
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
  line-height: 1.45;
}

.list-card__role {
  width: max-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 187, 24, 0.2);
  background: rgba(214, 187, 24, 0.08);
  color: #f3d458;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.list-card--camera {
  display: grid;
  align-content: start;
  padding: 14px 16px;
  border-radius: 18px;
}

.list-card--camera strong,
.list-card--camera span {
  display: block;
}

.list-card--camera span {
  line-height: 1.45;
}

.list-card--camera span:first-of-type {
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
}

.list-card--camera span:last-of-type {
  color: rgba(148, 163, 184, 0.9);
  font-size: 12px;
}

.camera-compact-list {
  gap: 10px;
}

@media (max-width: 760px) {
  .live-dialog,
  .photo-dialog {
    padding: 14px;
    border-radius: 20px;
  }

  .live-dialog__window-actions,
  .photo-dialog__actions {
    width: 100%;
  }

  .table-wrap {
    border-radius: 16px;
  }

  table {
    min-width: 680px;
  }
}

/* Premium finish: photos, events and settings */
.photo-library-hero {
  padding-bottom: 22px;
}

.photo-gallery {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

@media (max-width: 980px) {
  .settings-revamp {
    grid-template-columns: 1fr;
  }

  .settings-layout--primary,
  .settings-layout--secondary {
    grid-column: 1;
  }

  .settings-summary-grid--premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-toggle-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .settings-summary-grid--premium {
    grid-template-columns: 1fr;
  }

  .settings-device-actions {
    flex-direction: column;
  }

}

/* Premium finish: login, profile and company */
/* Mobile-first hardening across the portal */
.table-wrap code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 760px) {
  .playback-download-dock__item {
    padding: 12px;
  }

  .playback-download-dock__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .playback-download-dock__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .live-dialog,
  .photo-dialog {
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
  }

  .live-dialog__media,
  .photo-dialog__media {
    min-height: 0;
  }

  .table-wrap--mobile-cards {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table-wrap--mobile-cards table,
  .table-wrap--mobile-cards thead,
  .table-wrap--mobile-cards tbody,
  .table-wrap--mobile-cards tr,
  .table-wrap--mobile-cards td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .table-wrap--mobile-cards table {
    min-width: 0;
    background: transparent;
  }

  .table-wrap--mobile-cards thead {
    display: none;
  }

  .table-wrap--mobile-cards tbody {
    display: grid;
    gap: 12px;
  }

  .table-wrap--mobile-cards tr {
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 26%),
      linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(7, 12, 21, 0.98));
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
  }

  .table-wrap--mobile-cards td {
    padding: 0;
    border: 0;
    display: grid;
    gap: 4px;
  }

  .table-wrap--mobile-cards td + td {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
  }

  .table-wrap--mobile-cards td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.62);
  }

  .table-wrap--mobile-cards td[colspan] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .table-wrap--mobile-cards td[colspan]::before {
    content: none;
  }

  .table-wrap--mobile-cards .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .table-wrap--mobile-cards .button-row > *,
  .table-wrap--mobile-cards .table-action-link,
  .table-wrap--mobile-cards .btn,
  .table-wrap--mobile-cards form {
    width: 100%;
    justify-content: center;
  }

  .photo-card__body .button-row,
  .monitoring-layout-card__actions,
  .recorder-panel-channel-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .photo-card__body .button-row > *,
  .monitoring-layout-card__actions > *,
  .recorder-panel-channel-card__actions > * {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .playback-download-dock__stats {
    grid-template-columns: 1fr;
  }

  .table-wrap--mobile-cards tr {
    padding: 12px;
    border-radius: 16px;
  }

  .photo-card__body .button-row,
  .monitoring-layout-card__actions,
  .recorder-panel-channel-card__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .filters-grid,
  .three-col-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .filters-grid label,
  .form-stack label,
  .three-col-form label {
    gap: 6px;
    font-size: 11px;
  }

  input,
  select,
  textarea {
    padding: 12px 12px;
    font-size: 13px;
    border-radius: 14px;
  }

  .filters-actions,
  .hero-actions,
  .button-row {
    gap: 8px;
  }

  .filters-actions > *,
  .hero-actions > *,
  .button-row.wrap-row > * {
    flex: 1 1 100%;
  }

  .range-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -2px;
    padding: 0 2px 4px;
    scrollbar-width: none;
  }

  .range-chip-row::-webkit-scrollbar {
    display: none;
  }

  .range-chip {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .empty-state {
    padding: 18px 14px;
    border-radius: 18px;
    font-size: 12px;
    line-height: 1.55;
  }

  .table-wrap--mobile-cards tbody {
    gap: 10px;
  }

  .table-wrap--mobile-cards tr {
    padding: 11px;
    border-radius: 15px;
  }

  .table-wrap--mobile-cards td::before {
    font-size: 9px;
  }

  .table-wrap--mobile-cards td + td {
    margin-top: 7px;
    padding-top: 7px;
  }
}

/* Loader polish: live vs playback */
.stream-loading-overlay,
.live-dialog__empty {
  --loader-ring-a: #f2d34f;
  --loader-ring-b: rgba(96, 165, 250, 0.95);
  --loader-glow-a: rgba(242, 211, 79, 0.14);
  --loader-glow-b: rgba(96, 165, 250, 0.1);
  --loader-bg-a: rgba(242, 211, 79, 0.08);
  --loader-bg-b: rgba(96, 165, 250, 0.08);
  --loader-label: "Seguranca Jaquirana";
  background:
    radial-gradient(circle at 50% 42%, var(--loader-bg-a), transparent 18%),
    radial-gradient(circle at 50% 42%, var(--loader-bg-b), transparent 34%),
    linear-gradient(180deg, rgba(1, 3, 7, 0.98), rgba(0, 0, 0, 1));
}

.stream-loading-overlay--live,
.live-dialog__empty--live {
  --loader-ring-a: #38bdf8;
  --loader-ring-b: rgba(96, 165, 250, 0.98);
  --loader-glow-a: rgba(56, 189, 248, 0.16);
  --loader-glow-b: rgba(96, 165, 250, 0.12);
  --loader-bg-a: rgba(56, 189, 248, 0.1);
  --loader-bg-b: rgba(96, 165, 250, 0.1);
  --loader-label: "Ao vivo | Seguranca Jaquirana";
}

.stream-loading-overlay--playback {
  --loader-ring-a: #f59e0b;
  --loader-ring-b: rgba(251, 113, 133, 0.9);
  --loader-glow-a: rgba(245, 158, 11, 0.16);
  --loader-glow-b: rgba(251, 113, 133, 0.12);
  --loader-bg-a: rgba(245, 158, 11, 0.1);
  --loader-bg-b: rgba(251, 113, 133, 0.08);
  --loader-label: "Playback | Seguranca Jaquirana";
}

.stream-loading-overlay[data-loader-state="boot"],
.live-dialog__empty[data-loader-state="boot"] {
  --loader-ring-a: #f2d34f;
  --loader-ring-b: rgba(96, 165, 250, 0.95);
  --loader-glow-a: rgba(242, 211, 79, 0.14);
  --loader-glow-b: rgba(96, 165, 250, 0.1);
  --loader-bg-a: rgba(242, 211, 79, 0.08);
  --loader-bg-b: rgba(96, 165, 250, 0.08);
  --loader-label: "Preparando live | Seguranca Jaquirana";
}

.stream-loading-overlay[data-loader-state="sync"],
.live-dialog__empty[data-loader-state="sync"] {
  --loader-ring-a: #38bdf8;
  --loader-ring-b: rgba(96, 165, 250, 0.98);
  --loader-glow-a: rgba(56, 189, 248, 0.18);
  --loader-glow-b: rgba(96, 165, 250, 0.12);
  --loader-bg-a: rgba(56, 189, 248, 0.1);
  --loader-bg-b: rgba(96, 165, 250, 0.08);
  --loader-label: "Sincronizando | Seguranca Jaquirana";
}

.stream-loading-overlay[data-loader-state="reconnect"],
.live-dialog__empty[data-loader-state="reconnect"] {
  --loader-ring-a: #fb7185;
  --loader-ring-b: rgba(248, 113, 113, 0.96);
  --loader-glow-a: rgba(251, 113, 133, 0.18);
  --loader-glow-b: rgba(248, 113, 113, 0.12);
  --loader-bg-a: rgba(251, 113, 133, 0.1);
  --loader-bg-b: rgba(248, 113, 113, 0.08);
  --loader-label: "Reconectando | Seguranca Jaquirana";
}

.stream-loading-overlay--playback[data-loader-state="playback"],
.stream-loading-overlay--playback[data-loader-state="boot"],
.stream-loading-overlay--playback[data-loader-state="sync"] {
  --loader-ring-a: #f59e0b;
  --loader-ring-b: rgba(251, 113, 133, 0.9);
  --loader-glow-a: rgba(245, 158, 11, 0.16);
  --loader-glow-b: rgba(251, 113, 133, 0.12);
  --loader-bg-a: rgba(245, 158, 11, 0.1);
  --loader-bg-b: rgba(251, 113, 133, 0.08);
  --loader-label: "Preparando replay | Seguranca Jaquirana";
}

.stream-loading-overlay--playback[data-loader-state="reconnect"] {
  --loader-ring-a: #fb7185;
  --loader-ring-b: rgba(245, 158, 11, 0.92);
  --loader-glow-a: rgba(251, 113, 133, 0.18);
  --loader-glow-b: rgba(245, 158, 11, 0.14);
  --loader-bg-a: rgba(251, 113, 133, 0.1);
  --loader-bg-b: rgba(245, 158, 11, 0.08);
  --loader-label: "Reconectando replay | Seguranca Jaquirana";
}

.stream-loading-overlay::before,
.live-dialog__empty::before {
  border-top-color: var(--loader-ring-a);
  border-right-color: var(--loader-ring-b);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 32px var(--loader-glow-a),
    0 0 54px var(--loader-glow-b);
  filter: drop-shadow(0 0 12px var(--loader-glow-a));
}

.stream-loading-overlay::after,
.live-dialog__empty::after {
  content: var(--loader-label);
}

.recorder-playback-mobile-toolbar,
.recorder-playback-mobile-rail {
  display: none;
}

.recorder-playback-mobile-daynav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.recorder-playback-mobile-daynav__current {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(71, 85, 105, 0.26);
  background: rgba(7, 12, 20, 0.7);
  text-align: center;
}

.recorder-playback-mobile-daynav__current small {
  color: rgba(148, 163, 184, 0.76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recorder-playback-mobile-daynav__current strong {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorder-playback-mobile-times {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.recorder-playback-mobile-times .btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
}

.recorder-playback-mobile-times .btn.is-active {
  border-color: rgba(214, 187, 24, 0.42);
  background: rgba(214, 187, 24, 0.12);
  color: #f8fafc;
}

.recorder-playback-mobile-rail {
  gap: 8px;
}

.recorder-playback-mobile-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recorder-playback-mobile-rail__head strong {
  color: #f8fafc;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.recorder-playback-mobile-rail__head span {
  color: rgba(191, 219, 254, 0.8);
  font-size: 11px;
  font-weight: 800;
}

.recorder-playback-range-shell--mobile {
  height: 58px;
  padding-top: 10px;
}

.recorder-playback-track--mobile {
  height: 36px;
  border-radius: 10px;
  border-color: rgba(71, 85, 105, 0.34);
}

.recorder-playback-track--mobile .recorder-playback-track__segment {
  top: 7px;
  bottom: 7px;
  border-radius: 7px;
}

.recorder-playback-track__cursor--mobile {
  width: 3px;
}

.recorder-playback-event-markers--mobile {
  top: -2px;
}

.recorder-playback-range--mobile {
  height: 58px;
}

.recorder-playback-range--mobile::-webkit-slider-runnable-track,
.recorder-playback-range--mobile::-moz-range-track {
  height: 58px;
}

.recorder-playback-range--mobile::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  background: #ff5f4a;
  box-shadow: 0 0 0 4px rgba(255, 95, 74, 0.16);
}

.recorder-playback-range--mobile::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  background: #ff5f4a;
  box-shadow: 0 0 0 4px rgba(255, 95, 74, 0.16);
}

.recorder-playback-axis--mobile {
  height: 18px;
}

/* Mobile rescue: playback */
@media (max-width: 760px) {
  .recorder-playback-shell {
    gap: 8px;
  }

  .recorder-playback-topline {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .recorder-playback-topline__back {
    min-height: 34px;
    padding: 0 10px;
  }

  .recorder-playback-topline__title strong {
    font-size: 15px;
  }

  .recorder-playback-topline__title span {
    font-size: 10px;
  }

  .recorder-playback-commandbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  .recorder-playback-commandbar__primary {
    gap: 8px;
  }

  .recorder-playback-commandbar__copy strong {
    font-size: 15px;
  }

  .recorder-playback-commandbar__copy span {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
  }

  .recorder-playback-commandbar__badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .recorder-playback-commandbar__badges .badge {
    min-width: 0;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recorder-playback-commandbar__actions {
    width: 100%;
    justify-content: stretch;
  }

  .recorder-playback-commandbar__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }

  .recorder-playback-shell > .panel.subtle-panel .button-row.wrap-row {
    width: 100%;
  }

  .recorder-playback-shell > .panel.subtle-panel .button-row.wrap-row > * {
    flex: 1 1 220px;
  }

  .recorder-playback-stage {
    padding: 8px;
    gap: 8px;
    border-radius: 16px;
  }

  .recorder-playback-card--solo {
    border-radius: 14px;
  }

  .recorder-playback-viewbar {
    padding: 8px 8px 0;
  }

  .recorder-playback-viewbar__time {
    gap: 1px;
  }

  .recorder-playback-viewbar__time small {
    font-size: 9px;
  }

  .recorder-playback-viewbar__time strong {
    font-size: 14px;
  }

  .recorder-playback-viewbar__time span {
    display: none;
  }

  .recorder-panel-stream-shell--playback {
    padding: 6px 8px 8px;
  }

  .recorder-panel-stream-shell--playback .recorder-panel-stream {
    border-radius: 10px;
  }

  .recorder-playback-card__rail {
    gap: 10px;
    padding: 10px;
  }

  .recorder-playback-card__rail-head--timeline {
    gap: 8px;
  }

  .recorder-playback-card__rail-title strong {
    font-size: 13px;
  }

  .recorder-playback-card__rail-title span {
    font-size: 11px;
    line-height: 1.35;
    max-width: none;
  }

  .recorder-playback-chipbar {
    gap: 6px;
  }

  .recorder-playback-chipbar .badge {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .recorder-playback-filters--timeline {
    padding: 10px;
    border-radius: 14px;
  }

  .recorder-playback-filters__header {
    gap: 6px;
  }

  .recorder-playback-filters__header-copy strong {
    font-size: 12px;
  }

  .recorder-playback-filters__header-copy span {
    display: none;
  }

  .recorder-playback-filters__surface {
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
  }

  .recorder-playback-mobile-toolbar {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
  }

  .recorder-playback-mobile-daynav .btn {
    min-height: 36px;
    padding: 0 11px;
    justify-content: center;
  }

  .recorder-playback-mobile-daynav__current {
    padding: 8px 9px;
  }

  .recorder-playback-inline-controls {
    display: none;
  }

  .recorder-playback-inline-controls__field,
  .recorder-playback-download-controls__field {
    gap: 6px;
  }

  .recorder-playback-inline-controls__field span,
  .recorder-playback-download-controls__field span {
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .recorder-playback-inline-controls__field input,
  .recorder-playback-download-controls__field input {
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }

  .recorder-playback-filters__list {
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -2px;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
  }

  .recorder-playback-filter {
    position: relative;
    width: auto;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: start;
    flex: 0 0 auto;
    min-height: 30px;
    min-width: 0;
    padding: 4px 8px;
    gap: 6px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .recorder-playback-filter input {
    position: absolute;
    inset: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .recorder-playback-filter__label {
    font-size: 10px;
    line-height: 1;
  }

  .recorder-playback-filter__count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 8px;
  }

  .recorder-playback-mobile-times {
    margin-inline: -2px;
    padding: 0 2px 4px;
    scroll-snap-type: x proximity;
  }

  .recorder-playback-mobile-times .btn {
    min-height: 36px;
    padding: 0 11px;
    scroll-snap-align: start;
  }

  .recorder-playback-download-controls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .recorder-playback-download-controls__actions {
    grid-column: 1 / -1;
  }

  .recorder-playback-download-controls__actions .btn {
    width: 100%;
    min-height: 38px;
    justify-content: center;
  }

  .recorder-playback-detail {
    gap: 8px;
  }

  .recorder-playback-mobile-rail {
    display: grid;
  }

  .recorder-playback-detail--desktop {
    display: none;
  }

  .recorder-playback-range-shell--detail {
    height: 68px;
    padding-top: 12px;
  }

  .recorder-playback-track--detail {
    height: 44px;
    border-radius: 12px;
  }

  .recorder-playback-track--detail .recorder-playback-track__segment {
    top: 8px;
    bottom: 8px;
    border-radius: 8px;
  }

  .recorder-playback-range--detail {
    height: 68px;
  }

  .recorder-playback-range--detail::-webkit-slider-thumb {
    margin-top: 24px;
  }

  .recorder-playback-event-marker {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    font-size: 9px;
  }

  .recorder-playback-event-marker::after {
    top: 14px;
    height: 9px;
  }

  .recorder-playback-axis--detail {
    height: 18px;
  }

  .recorder-playback-axis span {
    font-size: 9px;
  }

  .recorder-playback-card__rail-meta--cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .recorder-playback-meta-card {
    min-height: 0;
    padding: 9px 10px;
    gap: 2px;
  }

  .recorder-playback-meta-card small {
    font-size: 9px;
  }

  .recorder-playback-meta-card strong {
    font-size: 13px;
  }

  .recorder-playback-meta-card span {
    font-size: 10px;
    line-height: 1.35;
  }

  .recorder-playback-legend {
    gap: 6px;
  }

  .recorder-playback-legend span {
    padding: 5px 7px;
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  .recorder-playback-download-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .recorder-playback-shell {
    gap: 6px;
  }

  .recorder-playback-topline {
    padding: 8px 9px;
  }

  .recorder-playback-topline__back {
    min-height: 32px;
    padding: 0 9px;
  }

  .recorder-playback-topline__title strong {
    font-size: 14px;
  }

  .recorder-playback-topline__title span,
  .recorder-playback-commandbar__copy span,
  .recorder-playback-card__rail-title span,
  .recorder-playback-legend {
    display: none;
  }

  .recorder-playback-commandbar {
    padding: 9px;
    gap: 7px;
  }

  .recorder-playback-commandbar__badges {
    grid-template-columns: 1fr;
  }

  .recorder-playback-commandbar__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .recorder-playback-commandbar__actions .btn {
    width: 100%;
    padding: 0 8px;
  }

  .recorder-playback-stage {
    padding: 7px;
  }

  .recorder-playback-viewbar {
    padding: 7px 7px 0;
  }

  .recorder-playback-viewbar__time strong {
    font-size: 13px;
  }

  .recorder-playback-card__rail {
    padding: 9px;
    gap: 9px;
  }

  .recorder-playback-mobile-toolbar {
    gap: 6px;
  }

  .recorder-playback-mobile-daynav {
    gap: 6px;
  }

  .recorder-playback-mobile-daynav .btn {
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .recorder-playback-mobile-daynav__current {
    padding: 7px 8px;
  }

  .recorder-playback-mobile-daynav__current strong {
    font-size: 11px;
  }

  .recorder-playback-mobile-times {
    gap: 6px;
  }

  .recorder-playback-mobile-times .btn {
    min-height: 34px;
    padding: 0 10px;
  }

  .recorder-playback-filters--timeline {
    padding: 9px;
  }

  .recorder-playback-inline-controls,
  .recorder-playback-download-controls,
  .recorder-playback-card__rail-meta--cards {
    grid-template-columns: 1fr;
  }

  .recorder-playback-mobile-daynav {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .recorder-playback-mobile-daynav .btn {
    min-height: 32px;
    padding: 0 10px;
  }

  .recorder-playback-mobile-times .btn {
    min-height: 32px;
    padding: 0 10px;
  }

  .recorder-playback-filter {
    width: auto;
    min-height: 28px;
    min-width: 0;
    padding: 4px 7px;
    gap: 5px;
  }

  .recorder-playback-filter__label {
    font-size: 9px;
  }

  .recorder-playback-filter__count {
    min-width: 15px;
    height: 15px;
    font-size: 8px;
  }

  .recorder-playback-download-controls__field input.recorder-playback-text-clock {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }

  .recorder-playback-download-controls__field span {
    font-size: 8px;
  }

  .recorder-playback-mobile-times .btn {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }

  .recorder-playback-range-shell--detail {
    height: 62px;
    padding-top: 10px;
  }

  .recorder-playback-track--detail {
    height: 40px;
  }

  .recorder-playback-range--detail {
    height: 62px;
  }

  .recorder-playback-range--detail::-webkit-slider-thumb {
    margin-top: 22px;
  }

  .recorder-playback-event-marker {
    width: 13px;
    height: 13px;
  }

  .recorder-playback-axis span {
    font-size: 8px;
  }

  .recorder-playback-meta-card:nth-child(1),
  .recorder-playback-meta-card:nth-child(4) {
    display: none;
  }

  .recorder-playback-mobile-daynav__current {
    padding: 7px 8px;
  }

  .recorder-playback-mobile-daynav__current strong {
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .recorder-playback-commandbar__actions {
    grid-template-columns: 1fr;
  }

  .recorder-playback-shell > .panel.subtle-panel .button-row.wrap-row > * {
    flex: 1 1 100%;
  }
}

@media (max-width: 1100px) {
  .admin-client-consolebar {
    top: 80px;
  }

  .admin-client-consolebar__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-client-consolebar__subnav {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-client-consolebar__subnav-links {
    justify-content: flex-start;
  }

  .client-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .admin-client-consolebar {
    top: 74px;
    padding: 12px;
    border-radius: 18px;
  }

  .admin-client-consolebar__nav {
    gap: 6px;
  }

  .admin-client-consolebar__tab,
  .admin-client-consolebar__back {
    min-height: 32px;
    padding-inline: 11px;
    font-size: 10px;
  }

  .admin-client-consolebar__subnav {
    margin-top: 10px;
    padding-top: 10px;
  }

  .admin-client-consolebar__subnav-links {
    gap: 6px;
  }

  .admin-client-consolebar__subtab {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 9px;
  }

  .client-settings-shell__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .client-settings-shell__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .client-settings-subtabs {
    top: 136px;
  }

  .settings-card-fold__summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .wireguard-stack__summary {
    grid-template-columns: 1fr;
  }

  .wireguard-fold__summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-action-fold__summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .wireguard-fold__chips {
    justify-content: flex-start;
  }
}

.camera-preview-surface--offline {
  position: relative;
}

.camera-preview-surface--offline img,
.camera-preview-surface--offline .monitoring-layout-card__thumb,
.camera-preview-surface--offline .recorder-panel-channel-card__preview-image {
  filter: brightness(0.38) saturate(0.6);
}

.camera-preview-offline-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.08), rgba(2, 6, 23, 0.52)),
    radial-gradient(circle at center, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.74));
  pointer-events: none;
}

.camera-preview-offline-overlay span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.82);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  color: #fee2e2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .dashboard-command-grid {
    gap: 12px;
  }

  .dashboard-command-card,
  .dashboard-reading-card {
    padding: 14px;
    border-radius: 20px;
  }

  .dashboard-command-card {
    gap: 12px;
  }

  .dashboard-command-card__copy {
    gap: 10px;
  }

  .dashboard-command-card h1 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1;
  }

  .dashboard-command-card__lede {
    font-size: 13px;
    line-height: 1.55;
  }

  .dashboard-command-card__summary {
    font-size: 12px;
    line-height: 1.6;
  }

  .dashboard-command-card__stat {
    min-height: 0;
    padding: 13px 14px;
    border-radius: 16px;
  }

  .dashboard-command-card__feature {
    min-height: 0;
    padding: 13px 14px;
    border-radius: 16px;
  }

  .dashboard-command-card__actions {
    gap: 8px;
  }

  .dashboard-command-card__actions .btn {
    flex: 1 1 220px;
  }

  .dashboard-reading-card {
    gap: 9px;
  }

  .dashboard-reading-card__head {
    gap: 10px;
  }

  .dashboard-reading-card__plate {
    font-size: 18px;
  }

  .dashboard-reading-card__media,
  .dashboard-reading-card__placeholder {
    min-height: 200px;
    border-radius: 16px;
  }

  .dashboard-reading-card__metric {
    min-height: 0;
    padding: 12px 13px;
    border-radius: 16px;
  }

  .dashboard-showcase {
    gap: 12px;
  }

  .dashboard-showcase__main {
    padding: 18px;
    border-radius: 22px;
  }

  .dashboard-showcase__main h1 {
    font-size: clamp(28px, 8vw, 38px);
    max-width: none;
  }

  .dashboard-showcase__main p,
  .dashboard-showcase__summary {
    font-size: 13px;
    line-height: 1.58;
  }

  .dashboard-showcase__actions {
    width: 100%;
    gap: 8px;
  }

  .dashboard-showcase__actions .btn {
    flex: 1 1 220px;
  }

  .dashboard-showcase__brief-item {
    padding: 11px 12px;
    border-radius: 16px;
  }

  .dashboard-photo-fact {
    padding: 9px 10px;
    border-radius: 14px;
  }

  .stats-grid {
    gap: 10px;
  }

  .stat-card {
    padding: 13px 14px;
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  .dashboard-command-card,
  .dashboard-reading-card,
  .dashboard-showcase__main {
    padding: 12px;
    border-radius: 18px;
  }

  .dashboard-command-card h1,
  .dashboard-showcase__main h1 {
    font-size: 24px;
  }

  .dashboard-command-card__actions .btn,
  .dashboard-showcase__actions .btn {
    flex: 1 1 100%;
  }

  .dashboard-command-card__stat strong,
  .dashboard-reading-card__metric strong {
    font-size: 22px;
  }

  .dashboard-reading-card__plate {
    font-size: 16px;
  }

  .dashboard-reading-card__media,
  .dashboard-reading-card__placeholder {
    min-height: 172px;
  }

  .dashboard-showcase__brief-item span,
  .dashboard-command-card__feature span {
    font-size: 11px;
  }

  .stat-card {
    padding: 12px 13px;
  }
}

@media (max-width: 430px) {
  .dashboard-command-card__stats,
  .dashboard-command-card__featuregrid,
  .dashboard-priority-grid--premium {
    grid-template-columns: 1fr;
  }

  .dashboard-priority-card {
    padding: 13px 14px;
    border-radius: 18px;
  }

  .dashboard-priority-card__value,
  .dashboard-priority-card__action {
    font-size: 17px;
  }

  .dashboard-priority-card__note {
    font-size: 11px;
    line-height: 1.45;
  }
}

@media (max-width: 760px) {
  .page-intro--recorders .page-intro__actions > * {
    flex: 1 1 240px;
  }

  .recorder-panel-shell {
    padding: 14px;
    border-radius: 20px;
  }

  .recorder-panel-intro {
    gap: 12px;
    margin-bottom: 12px;
  }

  .recorder-panel-kpis {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .recorder-panel-toolbar {
    gap: 10px;
  }

  .recorder-panel-toolbar__group {
    padding: 10px 11px;
  }

  .recorder-panel-toolbar__options {
    gap: 6px;
  }

  .recorder-panel-chip {
    min-height: 36px;
  }

  .recorder-panel-chip--stacked {
    min-height: 64px;
    padding: 8px 10px;
  }

  .recorder-panel-stage {
    padding: 10px;
    border-radius: 18px;
  }

  .recorder-panel-stage__head h3 {
    font-size: 18px;
  }

  .recorder-panel-monitor__bar {
    gap: 8px;
  }

  .recorder-panel-monitor__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .recorder-panel-monitor__actions > * {
    flex: 1 1 180px;
  }

  .recorder-panel-stream-shell {
    padding: 2px;
    border-radius: 0 0 18px 18px;
  }

  .recorder-panel-stage__foot {
    padding: 8px 10px;
    gap: 8px 10px;
  }

  .recorder-panel-channel-strip {
    grid-auto-columns: minmax(212px, 82vw);
    gap: 10px;
  }

  .recorder-panel-channel-card {
    padding: 12px;
    border-radius: 18px;
  }

  .recorder-panel-channel-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .recorder-panel-channel-card__actions > * {
    width: 100%;
    justify-content: center;
  }

  .recorder-panel-stream-shell--playback {
    padding: 6px 8px 8px;
  }
}

@media (max-width: 560px) {
  .page-intro--recorders .page-intro__actions > * {
    flex: 1 1 100%;
  }

  .recorder-panel-shell {
    padding: 12px;
    border-radius: 18px;
  }

  .recorder-panel-toolbar__options--presets {
    grid-template-columns: 1fr;
  }

  .recorder-panel-chip {
    padding: 6px 9px;
    font-size: 10px;
  }

  .recorder-panel-chip--stacked {
    min-height: 58px;
  }

  .recorder-panel-stage__head h3 {
    font-size: 17px;
  }

  .recorder-panel-monitor__actions > * {
    flex: 1 1 100%;
  }

  .recorder-panel-channel-strip {
    grid-auto-columns: minmax(200px, 86vw);
  }

  .recorder-panel-channel-card__actions {
    grid-template-columns: 1fr;
  }

  .recorder-panel-stream-shell--playback {
    padding: 5px 6px 6px;
  }

  .recorder-panel-stream-shell--playback .recorder-panel-stream {
    border-radius: 10px;
  }

  .recorder-playback-topline {
    gap: 6px;
    align-items: start;
  }

  .recorder-playback-commandbar__actions .btn {
    min-height: 36px;
  }
}

/* Dashboard stabilization */
body.role-client .dashboard-command-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 420px);
  gap: 16px;
  align-items: start;
}

body.role-client .dashboard-command-card {
  grid-template-rows: auto;
  gap: 14px;
  align-self: start;
}

body.role-client .dashboard-command-card h1 {
  max-width: 12ch;
  font-size: clamp(32px, 3.2vw, 46px);
}

body.role-client .dashboard-command-card__top {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.role-client .dashboard-command-card__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.role-client .dashboard-command-card__featuregrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(88px, auto);
}

body.role-client .dashboard-command-card__feature {
  min-height: 0;
}

body.role-client .dashboard-reading-card {
  grid-template-rows: auto auto auto auto auto;
  gap: 14px;
  align-self: start;
}

body.role-client .dashboard-reading-card__media,
body.role-client .dashboard-reading-card__placeholder {
  width: 100%;
  height: auto;
  min-height: 248px;
  max-height: 360px;
  aspect-ratio: 16 / 10;
}

body.role-client .dashboard-reading-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

body.role-client .dashboard-reading-card__media--contain {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    #04111d;
}

body.role-client .dashboard-reading-card__media--contain img {
  object-fit: contain;
  padding: 12px;
}

body.role-client .dashboard-reading-card__metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .page-intro,
  .surface-card,
  .subtle-panel,
  .panel {
    border-radius: 18px !important;
  }

  .page-intro {
    padding: 12px !important;
    gap: 8px !important;
  }

  .page-intro__main {
    gap: 4px !important;
  }

  .page-intro__eyebrow,
  .page-intro__meta {
    display: none !important;
  }

  .page-intro h1 {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .page-intro p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-revamp .panel,
  body.role-client .dashboard-priority-card,
  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-revamp .panel,
  body.role-admin .dashboard-priority-card {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__copy,
  body.role-admin .dashboard-command-card__copy {
    gap: 6px !important;
  }

  body.role-client .dashboard-command-card__summary,
  body.role-admin .dashboard-command-card__summary,
  body.role-client .dashboard-revamp .panel-header p,
  body.role-admin .dashboard-revamp .panel-header p {
    display: none !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__actions .btn:last-child,
  body.role-admin .dashboard-command-card__actions .btn:last-child {
    grid-column: 1 / -1;
  }

  body.role-client .dashboard-command-card__featuregrid,
  body.role-admin .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-command-card__featuregrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__featuregrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__feature,
  body.role-admin .dashboard-command-card__feature,
  body.role-client .dashboard-command-card__stat,
  body.role-admin .dashboard-command-card__stat,
  body.role-client .dashboard-reading-card__metric,
  body.role-admin .dashboard-reading-card__metric {
    padding: 10px !important;
  }

  body.role-client .dashboard-command-card__feature span,
  body.role-admin .dashboard-command-card__feature span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.role-client .dashboard-command-card__feature {
    padding: 8px !important;
    gap: 5px !important;
  }
}

@media (max-width: 1100px) {
  body.role-client .dashboard-command-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .page-intro,
  .surface-card,
  .subtle-panel,
  .panel {
    border-radius: 18px !important;
  }

  .page-intro {
    padding: 12px !important;
    gap: 8px !important;
  }

  .page-intro__main {
    gap: 4px !important;
  }

  .page-intro__eyebrow,
  .page-intro__meta {
    display: none !important;
  }

  .page-intro h1 {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .page-intro p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-revamp .panel,
  body.role-client .dashboard-priority-card,
  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-revamp .panel,
  body.role-admin .dashboard-priority-card {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__copy,
  body.role-admin .dashboard-command-card__copy {
    gap: 6px !important;
  }

  body.role-client .dashboard-command-card__summary,
  body.role-admin .dashboard-command-card__summary,
  body.role-client .dashboard-revamp .panel-header p,
  body.role-admin .dashboard-revamp .panel-header p {
    display: none !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__actions .btn:last-child,
  body.role-admin .dashboard-command-card__actions .btn:last-child {
    grid-column: 1 / -1;
  }

  body.role-client .dashboard-command-card__featuregrid,
  body.role-admin .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-command-card__feature,
  body.role-admin .dashboard-command-card__feature,
  body.role-client .dashboard-command-card__stat,
  body.role-admin .dashboard-command-card__stat,
  body.role-client .dashboard-reading-card__metric,
  body.role-admin .dashboard-reading-card__metric {
    padding: 10px !important;
  }

  body.role-client .dashboard-command-card__feature span,
  body.role-admin .dashboard-command-card__feature span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.role-client .dashboard-command-card__feature {
    padding: 8px !important;
    gap: 5px !important;
  }
}

@media (max-width: 560px) {
  .page-intro,
  .surface-card,
  .subtle-panel,
  .panel {
    border-radius: 18px !important;
  }

  .page-intro {
    padding: 12px !important;
    gap: 8px !important;
  }

  .page-intro__main {
    gap: 4px !important;
  }

  .page-intro__eyebrow,
  .page-intro__meta {
    display: none !important;
  }

  .page-intro h1 {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .page-intro p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-revamp .panel,
  body.role-client .dashboard-priority-card,
  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-revamp .panel,
  body.role-admin .dashboard-priority-card {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__copy,
  body.role-admin .dashboard-command-card__copy {
    gap: 6px !important;
  }

  body.role-client .dashboard-command-card__summary,
  body.role-admin .dashboard-command-card__summary,
  body.role-client .dashboard-revamp .panel-header p,
  body.role-admin .dashboard-revamp .panel-header p {
    display: none !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__actions .btn:last-child,
  body.role-admin .dashboard-command-card__actions .btn:last-child {
    grid-column: 1 / -1;
  }

  body.role-client .dashboard-command-card__featuregrid,
  body.role-admin .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-command-card__feature,
  body.role-admin .dashboard-command-card__feature,
  body.role-client .dashboard-command-card__stat,
  body.role-admin .dashboard-command-card__stat,
  body.role-client .dashboard-reading-card__metric,
  body.role-admin .dashboard-reading-card__metric {
    padding: 10px !important;
  }

  body.role-client .dashboard-command-card__feature span,
  body.role-admin .dashboard-command-card__feature span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 760px) {
  body.role-client .dashboard-command-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-showcase__main,
  body.role-client .dashboard-showcase__side,
  body.role-client .dashboard-revamp .panel,
  body.role-client .stat-card,
  body.role-client .panel {
    padding: 10px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__top {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__copy {
    gap: 6px !important;
  }

  body.role-client .dashboard-command-card__eyebrow,
  body.role-client .dashboard-reading-card__eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }

  body.role-client .dashboard-command-card h1,
  body.role-client .dashboard-showcase__main h1 {
    font-size: 20px !important;
    max-width: none !important;
    line-height: 1 !important;
  }

  body.role-client .dashboard-command-card__lede,
  body.role-client .dashboard-showcase__main p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.role-client .dashboard-command-card__summary,
  body.role-client .dashboard-showcase__summary {
    display: none !important;
  }

  body.role-client .dashboard-command-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.role-client .dashboard-command-card__stat {
    min-height: 72px !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }

  body.role-client .dashboard-command-card__stat span {
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
  }

  body.role-client .dashboard-command-card__stat strong {
    font-size: 20px !important;
  }

  body.role-client .dashboard-command-card__stat small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.role-client .dashboard-command-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.role-client .dashboard-command-card__actions .btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    justify-content: center !important;
  }

  body.role-client .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.role-client .dashboard-command-card__feature {
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }

  body.role-client .dashboard-command-card__feature strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.role-client .dashboard-command-card__feature span {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.role-client .dashboard-reading-card__head {
    gap: 8px !important;
  }

  body.role-client .dashboard-reading-card__plate {
    font-size: 15px !important;
  }

  body.role-client .dashboard-reading-card__meta,
  body.role-client .dashboard-reading-card__name {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 150px !important;
    max-height: 210px !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.role-client .dashboard-reading-card__metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-content: start !important;
  }

  body.role-client .dashboard-reading-card__metric {
    min-height: 0 !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }

  body.role-client .dashboard-reading-card__metric strong {
    font-size: 18px !important;
  }

  body.role-client .panel-header h2,
  body.role-client .dashboard-revamp .panel-header h2 {
    font-size: 15px !important;
  }

  body.role-client .panel-header p,
  body.role-client .dashboard-revamp .panel-header p {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 560px) {
  body.role-client .dashboard-command-card__actions {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-command-card__stats,
  body.role-client .dashboard-reading-card__metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.role-client .dashboard-command-card__lede {
    display: none !important;
  }

  body.role-client .dashboard-command-card h1,
  body.role-client .dashboard-showcase__main h1 {
    font-size: 18px !important;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 138px !important;
    max-height: 190px !important;
  }
}

@media (max-width: 980px) {
  .filters-grid,
  .three-col-form,
  .signal-grid,
  .stats-grid {
    gap: 10px;
  }

  .button-row.wrap-row,
  .hero-actions,
  .filters-actions {
    gap: 8px;
  }

  .button-row.wrap-row > *,
  .hero-actions > *,
  .filters-actions > * {
    flex: 1 1 180px;
  }

  .dashboard-showcase {
    gap: 12px;
  }

  .dashboard-showcase__main,
  .dashboard-command-card,
  .dashboard-reading-card {
    padding: 14px;
    border-radius: 20px;
  }

  .dashboard-showcase__hero,
  .dashboard-showcase__utility,
  .dashboard-showcase__side,
  .dashboard-command-card__top,
  .dashboard-command-card__stats,
  .dashboard-command-card__featuregrid,
  .dashboard-reading-card__metric-grid,
  .dashboard-photo-facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboard-command-card h1,
  .dashboard-showcase__main h1 {
    max-width: none;
    font-size: clamp(26px, 7vw, 34px);
  }

  .dashboard-command-card__lede,
  .dashboard-command-card__summary,
  .dashboard-showcase__main p,
  .dashboard-showcase__summary {
    font-size: 13px;
    line-height: 1.56;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 224px;
    max-height: none;
    aspect-ratio: 16 / 10;
  }

  .playback-download-dock {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 24px));
  }
}

@media (max-width: 560px) {
  .panel,
  .camera-fold,
  .recorder-fold,
  .photo-card,
  .monitoring-layout-card {
    padding: 12px;
    border-radius: 18px;
  }

  .button-row.wrap-row,
  .hero-actions,
  .filters-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .button-row.wrap-row > *,
  .hero-actions > *,
  .filters-actions > * {
    width: 100%;
    flex: 1 1 100%;
  }

  .dashboard-showcase__main,
  .dashboard-command-card,
  .dashboard-reading-card {
    padding: 12px;
    border-radius: 18px;
  }

  .dashboard-command-card h1,
  .dashboard-showcase__main h1 {
    font-size: 24px;
  }

  .dashboard-command-card__stat,
  .dashboard-command-card__feature,
  .dashboard-reading-card__metric,
  .dashboard-photo-fact,
  .dashboard-showcase__brief-item {
    padding: 11px 12px;
    border-radius: 14px;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 208px;
  }

  .playback-download-dock {
    left: 10px;
    right: 10px;
    width: auto;
  }
}

@media (max-width: 760px) {
  body.role-client .dashboard-command-card__stats,
  body.role-client .dashboard-command-card__featuregrid,
  body.role-client .dashboard-reading-card__metric-grid {
    grid-template-columns: 1fr;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 210px;
    max-height: 280px;
  }
}

@media (max-width: 760px) {
  .panel,
  .surface-card,
  .stat-card,
  .company-overview,
  .client-workspace-card,
  .dashboard-showcase__main,
  .dashboard-command-card,
  .dashboard-reading-card {
    padding: 10px;
    border-radius: 16px;
  }

  .panel-header,
  .panel-header.between,
  .between {
    gap: 8px;
    margin-bottom: 10px;
  }

  .panel-header h2,
  .dashboard-revamp .panel-header h2,
  body.role-client .panel-header h2 {
    font-size: 16px;
    line-height: 1.1;
  }

  .panel-header p,
  .dashboard-revamp .panel-header p,
  body.role-client .panel-header p {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.4;
  }

  .filters-grid,
  .three-col-form,
  .signal-grid,
  .stats-grid {
    gap: 8px;
  }

  .field,
  .field label,
  .filters-grid label {
    gap: 4px;
  }

  .btn,
  button.btn,
  .table-action-link,
  .hero-actions .btn,
  .filters-actions .btn {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 11px;
    border-radius: 11px;
  }

  .dashboard-command-card h1,
  .dashboard-showcase__main h1 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 0.98;
  }

  .dashboard-command-card__lede,
  .dashboard-command-card__summary,
  .dashboard-showcase__main p,
  .dashboard-showcase__summary {
    font-size: 12px;
    line-height: 1.45;
  }

  .dashboard-command-card__summary,
  .dashboard-showcase__summary {
    display: none;
  }

  .dashboard-command-card__stat,
  .dashboard-command-card__feature,
  .dashboard-reading-card__metric,
  .dashboard-photo-fact,
  .dashboard-showcase__brief-item {
    padding: 9px 10px;
    border-radius: 12px;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 188px;
    max-height: 240px;
    aspect-ratio: 16 / 9;
  }

  .events-stat-grid .stat-card,
  .photo-library-summary__card,
  .settings-summary-card {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .panel,
  .surface-card,
  .stat-card,
  .company-overview,
  .client-workspace-card,
  .dashboard-showcase__main,
  .dashboard-command-card,
  .dashboard-reading-card {
    padding: 9px;
    border-radius: 14px;
  }

  .panel-header h2,
  .dashboard-revamp .panel-header h2,
  body.role-client .panel-header h2 {
    font-size: 15px;
  }

  .panel-header p,
  .dashboard-revamp .panel-header p,
  body.role-client .panel-header p {
    font-size: 10px;
  }

  .dashboard-command-card h1,
  .dashboard-showcase__main h1 {
    font-size: 20px;
  }

  .dashboard-command-card__lede,
  .dashboard-showcase__main p {
    font-size: 11px;
    line-height: 1.38;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder {
    min-height: 176px;
    max-height: 220px;
  }

  input,
  select,
  textarea {
    min-height: 38px;
    font-size: 16px;
  }
}

@media (max-width: 760px) {
  body.role-admin .dashboard-command-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-showcase__main,
  body.role-admin .dashboard-showcase__side,
  body.role-admin .dashboard-revamp .panel,
  body.role-admin .stat-card {
    padding: 10px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }

  body.role-admin .dashboard-command-card__top {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.role-admin .dashboard-command-card__copy {
    gap: 6px !important;
  }

  body.role-admin .dashboard-command-card__eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }

  body.role-admin .dashboard-command-card h1,
  body.role-admin .dashboard-showcase__main h1 {
    font-size: 20px !important;
    max-width: none !important;
    line-height: 1 !important;
  }

  body.role-admin .dashboard-command-card__lede {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.role-admin .dashboard-command-card__summary,
  body.role-admin .dashboard-showcase__summary {
    display: none !important;
  }

  body.role-admin .dashboard-command-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.role-admin .dashboard-command-card__stat {
    min-height: 72px !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }

  body.role-admin .dashboard-command-card__stat span {
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
  }

  body.role-admin .dashboard-command-card__stat strong {
    font-size: 20px !important;
  }

  body.role-admin .dashboard-command-card__stat small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.role-admin .dashboard-command-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.role-admin .dashboard-command-card__actions .btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    justify-content: center !important;
  }

  body.role-admin .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.role-admin .dashboard-command-card__feature {
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }

  body.role-admin .dashboard-command-card__feature strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.role-admin .dashboard-command-card__feature span {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.role-admin .dashboard-reading-card__media,
  body.role-admin .dashboard-reading-card__placeholder {
    min-height: 150px !important;
    max-height: 210px !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.role-admin .dashboard-reading-card__plate {
    font-size: 15px !important;
  }

  body.role-admin .dashboard-reading-card__metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.role-admin .dashboard-reading-card__metric {
    min-height: 0 !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }

  body.role-admin .dashboard-reading-card__metric strong {
    font-size: 18px !important;
  }

  body.role-admin .dashboard-revamp .panel-header h2,
  body.role-admin .panel-header h2 {
    font-size: 15px !important;
  }

  body.role-admin .dashboard-revamp .panel-header p,
  body.role-admin .panel-header p {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  body.role-admin .stat-card {
    min-height: 0 !important;
    padding: 9px !important;
  }
}

@media (max-width: 560px) {
  body.role-admin .dashboard-command-card__actions {
    grid-template-columns: 1fr !important;
  }

  body.role-admin .dashboard-command-card__stats,
  body.role-admin .dashboard-reading-card__metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.role-admin .dashboard-command-card__lede {
    display: none !important;
  }

  body.role-admin .dashboard-command-card h1,
  body.role-admin .dashboard-showcase__main h1 {
    font-size: 18px !important;
  }
}

/* Client dashboard hardening */
body.role-client .dashboard-command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

body.role-client .dashboard-command-card h1 {
  max-width: 16ch;
}

body.role-client .dashboard-reading-card {
  height: auto !important;
  align-self: start;
  grid-template-rows: auto auto auto auto auto;
}

body.role-client .dashboard-reading-card__media,
body.role-client .dashboard-reading-card__placeholder {
  min-height: 458px;
  max-height: 552px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

body.role-client .dashboard-reading-card__media img {
  object-fit: cover;
  object-position: center;
}

body.role-client .dashboard-reading-card__metric-grid {
  align-content: start;
}

@media (max-width: 1100px) {
  body.role-client .dashboard-command-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .page-intro,
  .surface-card,
  .subtle-panel,
  .panel {
    border-radius: 18px !important;
  }

  .page-intro {
    padding: 12px !important;
    gap: 8px !important;
  }

  .page-intro__main {
    gap: 4px !important;
  }

  .page-intro__eyebrow,
  .page-intro__meta {
    display: none !important;
  }

  .page-intro h1 {
    font-size: 23px !important;
    line-height: 1.04 !important;
  }

  .page-intro p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-revamp .panel,
  body.role-client .dashboard-priority-card,
  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-revamp .panel,
  body.role-admin .dashboard-priority-card {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__copy,
  body.role-admin .dashboard-command-card__copy {
    gap: 6px !important;
  }

  body.role-client .dashboard-command-card__summary,
  body.role-admin .dashboard-command-card__summary,
  body.role-client .dashboard-revamp .panel-header p,
  body.role-admin .dashboard-revamp .panel-header p {
    display: none !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__actions .btn:last-child,
  body.role-admin .dashboard-command-card__actions .btn:last-child {
    grid-column: 1 / -1;
  }

  body.role-client .dashboard-command-card__featuregrid,
  body.role-admin .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-command-card__feature,
  body.role-admin .dashboard-command-card__feature,
  body.role-client .dashboard-command-card__stat,
  body.role-admin .dashboard-command-card__stat,
  body.role-client .dashboard-reading-card__metric,
  body.role-admin .dashboard-reading-card__metric {
    padding: 10px !important;
  }

  body.role-client .dashboard-command-card__feature span,
  body.role-admin .dashboard-command-card__feature span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}
/* MOBILE FINAL OVERRIDE */
@media (max-width: 560px) {
  body.role-client .dashboard-command-card__featuregrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__feature {
    padding: 8px !important;
    gap: 5px !important;
  }
}

/* Mural fullscreen hardening */
body.monitoring-fullscreen-active {
  overflow: hidden !important;
}

.recorder-panel-stream-shell__fullscreen-exit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 13, 23, 0.82);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.recorder-panel-stream-shell__fullscreen-exit:hover {
  background: rgba(15, 23, 42, 0.92);
}

.recorder-panel-stream-shell--pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

.recorder-panel-stream-shell--pseudo-fullscreen::before,
.recorder-panel-stream-shell--pseudo-fullscreen::after {
  display: none !important;
}

.recorder-panel-stream-shell--pseudo-fullscreen .recorder-panel-stream {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: #000 !important;
}

.recorder-panel-stream-shell--pseudo-fullscreen .recorder-panel-stream-loader {
  inset: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 560px) {
  .recorder-panel-stream-shell__fullscreen-exit {
    top: 10px;
    right: 10px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 11px;
  }

  .recorder-panel-stream-shell--pseudo-fullscreen {
    padding-top: max(env(safe-area-inset-top, 0px), 0px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
  }
}

/* Lookup top-up modal refresh */
.photo-dialog__lookup--topup-modal {
  padding: 18px;
  overflow: hidden;
}

.photo-dialog__lookup-topup-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.photo-dialog__lookup-topup-summary,
.photo-dialog__lookup-topup-main {
  min-width: 0;
}

.photo-dialog__lookup-topup-summary-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(6, 11, 21, 0.99));
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.2);
}

.photo-dialog__lookup-topup-summary-head {
  display: grid;
  gap: 12px;
}

.photo-dialog__lookup-topup-summary-head h3 {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.photo-dialog__lookup-topup-summary-head .photo-dialog__lookup-badge {
  justify-self: start;
}

.photo-dialog__lookup-topup-summary-list {
  display: grid;
  gap: 10px;
}

.photo-dialog__lookup-topup-summary-list .list-card {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.photo-dialog__lookup-topup-summary-list span {
  color: rgba(191, 219, 254, 0.72);
  line-height: 1.55;
}

.photo-dialog__lookup-topup-main {
  display: grid;
  gap: 16px;
  align-content: start;
}

.photo-dialog__lookup-topup-main-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.photo-dialog__lookup-topup-main-head h3 {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.photo-dialog__lookup-topup-main-head p {
  max-width: 38ch;
  margin: 0;
  color: rgba(191, 219, 254, 0.7);
  line-height: 1.6;
}

.lookup-topup-grid,
.lookup-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.lookup-topup-card,
.lookup-catalog-card {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.95), rgba(7, 12, 21, 0.99));
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.18);
}

.lookup-topup-card--featured {
  border-color: rgba(214, 187, 24, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(214, 187, 24, 0.08),
    0 18px 34px rgba(2, 6, 23, 0.22);
}

.lookup-topup-card--custom {
  border-style: dashed;
}

.lookup-topup-card__head,
.lookup-catalog-card__head {
  display: grid;
  gap: 10px;
}

.lookup-topup-card__head strong,
.lookup-catalog-card__head strong {
  font-size: 18px;
  line-height: 1.2;
}

.lookup-topup-card__amount,
.lookup-catalog-card__price {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.lookup-topup-card p,
.lookup-catalog-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.lookup-topup-card__form,
.lookup-topup-form {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.lookup-topup-card__form .btn,
.lookup-topup-form .btn {
  width: 100%;
  justify-content: center;
}

.lookup-topup-form label {
  display: grid;
  gap: 8px;
}

.lookup-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lookup-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.photo-dialog__lookup-topup-grid {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-dialog__lookup-topup-actions {
  margin-top: 0;
}

@media (max-width: 980px) {
  .photo-dialog__lookup-topup-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .photo-dialog__lookup--topup-modal {
    padding: 15px;
  }

  .photo-dialog__lookup-topup-summary-card,
  .lookup-topup-card,
  .lookup-catalog-card {
    padding: 16px;
    border-radius: 20px;
  }

  .photo-dialog__lookup-topup-main-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .photo-dialog__lookup-topup-main-head p {
    max-width: none;
  }

  .photo-dialog__lookup-topup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .photo-dialog__lookup-topup-grid,
  .lookup-topup-grid,
  .lookup-catalog-grid {
    grid-template-columns: 1fr;
  }
}

.lookup-documents-list {
  display: grid;
  gap: 12px;
}

.lookup-document-card {
  display: grid;
  gap: 10px;
}

.lookup-document-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lookup-document-card__head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lookup-document-card__head > div > span {
  color: rgba(191, 219, 254, 0.72);
  line-height: 1.55;
}

@media (max-width: 560px) {
  .lookup-document-card .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lookup-document-card .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Account page refresh */
.account-hero {
  padding-bottom: 22px;
}

.account-page-shell {
  display: grid;
  gap: 24px;
}

.account-page-shell [id] {
  scroll-margin-top: 110px;
}

.account-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-section-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.account-section-nav__link:hover {
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(214, 187, 24, 0.08);
  transform: translateY(-1px);
}

.account-section-block {
  display: grid;
  gap: 16px;
}

.account-section-block__header {
  display: grid;
  gap: 8px;
}

.account-section-block__header.between {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.account-section-block__header h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.account-section-block__header p {
  margin: 0;
  max-width: 70ch;
  color: rgba(191, 219, 254, 0.72);
  line-height: 1.65;
}

.account-section-block__eyebrow {
  color: rgba(214, 187, 24, 0.88);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.account-infrastructure-grid > * {
  min-width: 0;
}

.profile-overview--premium {
  gap: 16px;
}

.profile-overview--premium .profile-overview__hero {
  border-radius: 26px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.05), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
}

.profile-hero--large {
  gap: 18px;
}

.profile-hero--large .profile-hero__avatar {
  width: 78px;
  height: 78px;
  border-radius: 24px;
}

.profile-hero__name {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.profile-hero__meta {
  color: rgba(191, 219, 254, 0.7);
}

.profile-stat-strip {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.profile-stat-chip {
  min-height: 108px;
  align-content: start;
}

.profile-stat-chip strong {
  font-size: 22px;
  letter-spacing: -.04em;
}

.profile-panel-actions {
  margin-top: 16px;
}

.lookup-balance-summary .lookup-summary-card {
  gap: 8px;
  min-height: 142px;
}

.lookup-balance-summary .lookup-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lookup-balance-summary .lookup-summary-card strong {
  display: block;
  font-size: 28px;
  letter-spacing: -0.05em;
  line-height: 1;
}

.lookup-balance-summary .lookup-summary-card small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.lookup-summary-card--accent {
  border-color: rgba(56, 189, 248, 0.2);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(10, 18, 31, 0.96), rgba(7, 12, 21, 0.99));
}

.lookup-summary-card--success {
  border-color: rgba(34, 197, 94, 0.18);
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(10, 18, 31, 0.96), rgba(7, 12, 21, 0.99));
}

.lookup-summary-card--warning {
  border-color: rgba(245, 158, 11, 0.18);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(10, 18, 31, 0.96), rgba(7, 12, 21, 0.99));
}

.lookup-summary-card--danger {
  border-color: rgba(239, 68, 68, 0.18);
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(10, 18, 31, 0.96), rgba(7, 12, 21, 0.99));
}

.lookup-balance-guide {
  display: grid;
  gap: 14px;
}

.lookup-billing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lookup-billing-step {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(7, 12, 21, 0.98));
}

.lookup-billing-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.12);
  color: #b9ebff;
  font-size: 13px;
  font-weight: 900;
}

.lookup-billing-step strong {
  font-size: 17px;
  line-height: 1.2;
}

.lookup-billing-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.lookup-billing-note {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(8, 15, 28, 0.94), rgba(5, 10, 19, 0.98));
}

.lookup-billing-note strong {
  font-size: 16px;
}

.lookup-billing-note span {
  color: var(--muted);
  line-height: 1.6;
}

.lookup-order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.12);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lookup-order-status--success {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
}

.lookup-order-status--warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
}

.lookup-order-status--danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}

.lookup-order-status--muted {
  color: #dbe7f4;
}

.lookup-ledger-amount--credit {
  color: #86efac;
}

.lookup-ledger-amount--debit {
  color: #fca5a5;
}

.lookup-ledger-amount--muted {
  color: var(--text);
}

.ai-ops-panel {
  overflow: visible;
}

.ai-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ai-ops-card {
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(56, 189, 248, 0.14);
  border-radius: 8px;
  background: rgba(8, 15, 28, 0.74);
}

.ai-ops-card small,
.ai-quality-item__metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-ops-card strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.ai-ops-card span {
  color: #b8d5ff;
  font-size: 13px;
  line-height: 1.45;
}

.ai-quality-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ai-quality-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.58);
}

.ai-quality-item strong,
.ai-quality-item span {
  display: block;
}

.ai-quality-item strong {
  color: var(--text);
  font-size: 14px;
}

.ai-quality-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.ai-quality-item__metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ai-quality-item__metrics span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(214, 187, 24, 0.22);
  border-radius: 999px;
  color: #facc15;
  background: rgba(214, 187, 24, 0.09);
}

.ai-intel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ai-intel-grid > section {
  min-width: 0;
}

.ai-intel-grid h3 {
  margin: 0 0 10px;
  color: #e5edf7;
  font-size: 13px;
  letter-spacing: 0;
}

.ai-intel-list {
  display: grid;
  gap: 8px;
}

.ai-intel-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(8, 15, 28, 0.56);
}

.ai-intel-item strong,
.ai-intel-item span {
  display: block;
}

.ai-intel-item strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.ai-intel-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ai-intel-item small {
  min-width: 56px;
  padding: 5px 8px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 999px;
  color: #bae6fd;
  text-align: center;
  background: rgba(56, 189, 248, 0.08);
}

.anpr-review-feedback {
  padding-top: 2px;
}

.event-view-ai-feedback {
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .lookup-billing-steps {
    grid-template-columns: 1fr;
  }

  .profile-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-intel-grid {
    grid-template-columns: 1fr;
  }

  .ai-quality-item {
    grid-template-columns: 1fr;
  }

  .ai-quality-item__metrics {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .account-page-shell {
    gap: 18px;
  }

  .account-section-block__header.between {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .account-section-nav__link {
    flex: 1 1 calc(50% - 8px);
  }

  .account-infrastructure-grid {
    grid-template-columns: 1fr;
  }

  .profile-hero--large .profile-hero__avatar {
    width: 66px;
    height: 66px;
    border-radius: 20px;
  }
}

@media (max-width: 560px) {
  .profile-stat-strip {
    grid-template-columns: 1fr;
  }

  .ai-ops-grid {
    grid-template-columns: 1fr;
  }

  .account-section-nav__link {
    flex-basis: 100%;
  }
}


/* ---- public/styles/ui-foundation.css ---- */
/* Canonical UI foundation: shared surfaces, headers and account shells */

.surface-card {
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.028), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 34px rgba(2, 6, 23, 0.18);
}

.surface-card--interactive {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.surface-card--interactive:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 187, 24, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 22px 40px rgba(2, 6, 23, 0.24);
}

.surface-card__actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  gap: 8px 10px;
  align-items: center;
}

.surface-card__actions > * {
  flex: 0 0 auto;
}

.company-overview--premium {
  gap: 18px;
}

.company-overview--premium .company-overview__hero {
  padding: 24px;
  gap: 20px;
  border-radius: 26px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 22%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.06), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.18);
}

.company-overview__brand {
  grid-template-columns: minmax(108px, 172px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.company-overview__logo {
  min-height: 172px;
  border-radius: 26px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.company-overview__copy {
  gap: 10px;
}

.company-overview__copy h2 {
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: -.05em;
}

.company-overview__copy p {
  max-width: 56ch;
  color: rgba(191, 219, 254, 0.7);
  line-height: 1.66;
}

.company-overview__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.company-stat-card {
  min-height: 118px;
  padding: 16px 18px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 28%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.04), transparent 20%),
    linear-gradient(180deg, rgba(12, 18, 31, 0.94), rgba(8, 13, 24, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 28px rgba(2, 6, 23, 0.16);
}

.company-stat-card strong {
  font-size: 24px;
  letter-spacing: -.04em;
}

.company-stat-card span {
  color: rgba(191, 219, 254, 0.68);
}

.client-workspace-grid {
  gap: 18px;
  margin-bottom: 20px;
}

.client-workspace-card.surface-card {
  min-height: 100%;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.035), transparent 20%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.04), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.client-workspace-card.surface-card:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 22px 40px rgba(2, 6, 23, 0.22);
}

.client-workspace-card .panel-header h2 {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.client-workspace-card .panel-header p {
  color: rgba(191, 219, 254, 0.68);
}

.client-workspace-card .detail-list {
  gap: 12px;
}

.client-settings-shell--compact.surface-card {
  padding: 14px;
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 20px 36px rgba(2, 6, 23, 0.2);
}

.settings-section .panel.surface-card {
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.16);
}

.form-panel-card.surface-card,
.wireguard-card.surface-card {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.97), rgba(7, 12, 21, 0.99));
}

.form-panel-card.surface-card .panel-header,
.wireguard-card.surface-card .panel-header {
  margin-bottom: 16px;
}

.client-settings-shell .surface-list--scroller,
.wireguard-card.surface-card .wireguard-stack__folds {
  border-radius: 18px;
}

body[data-user-theme="true"] {
  --ui-surface-card-border: rgba(148, 163, 184, 0.12);
  --ui-surface-card-border-strong: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.28);
  --ui-surface-card-divider: rgba(148, 163, 184, 0.08);
  --ui-surface-card-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 34px rgba(2, 6, 23, 0.18);
  --ui-surface-card-shadow-strong:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 22px 40px rgba(2, 6, 23, 0.24);
  --ui-surface-card-bg:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 24%),
    linear-gradient(180deg, rgba(var(--user-theme-panel-rgb, 16, 24, 38), 0.98), rgba(var(--user-theme-panel-rgb, 16, 24, 38), 0.92));
  --ui-surface-shell-bg:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.12), transparent 24%),
    linear-gradient(180deg, rgba(var(--user-theme-surface-rgb, 11, 18, 32), 0.98), rgba(var(--user-theme-panel-rgb, 16, 24, 38), 0.96));
  --ui-surface-soft-bg:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.024), transparent 24%),
    rgba(255, 255, 255, 0.03);
  --ui-surface-soft-bg-strong:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 28%),
    rgba(255, 255, 255, 0.05);
  --ui-surface-logo-bg:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 24%),
    rgba(var(--user-theme-panel-rgb, 16, 24, 38), 0.82);
  --ui-surface-media-bg: rgba(var(--user-theme-panel-rgb, 16, 24, 38), 0.82);
  --ui-accent-text: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.98);
  --ui-accent-soft: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.12);
  --ui-accent-soft-strong: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.18);
  --ui-accent-panel-bg:
    radial-gradient(circle at top right, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.12), transparent 34%),
    rgba(var(--user-theme-panel-rgb, 16, 24, 38), 0.96);
  --ui-text-strong: var(--user-theme-text, #f8fafc);
  --ui-text-muted: var(--user-theme-muted, rgba(226, 232, 240, 0.74));
  --ui-text-subtle: rgba(148, 163, 184, 0.84);
  --ui-focus-outline: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.34);
  --ui-success-bg: rgba(6, 95, 70, 0.22);
  --ui-success-border: rgba(52, 211, 153, 0.28);
  --ui-success-text: #d1fae5;
  --ui-warning-bg: rgba(120, 53, 15, 0.22);
  --ui-warning-border: rgba(245, 158, 11, 0.3);
  --ui-warning-text: #fde68a;
  --ui-danger-bg: rgba(127, 29, 29, 0.22);
  --ui-danger-border: rgba(248, 113, 113, 0.3);
  --ui-danger-text: #fecaca;
  --ui-info-bg: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14);
  --ui-info-border: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.28);
  --ui-info-text: var(--ui-accent-text);
  --ui-neutral-bg: rgba(255, 255, 255, 0.04);
  --ui-neutral-border: rgba(148, 163, 184, 0.18);
  --ui-neutral-text: rgba(226, 232, 240, 0.9);
}

body[data-theme-mode="light"][data-user-theme="true"] {
  --bg: #f3f6fb;
  --bg-2: #e8eef6;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-2: rgba(255, 255, 255, 0.98);
  --surface-3: rgba(248, 250, 252, 0.92);
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.26);
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.68);
  --muted-2: rgba(51, 65, 85, 0.78);
  --brand-soft: rgba(214, 187, 24, 0.16);
  --ok-bg: rgba(34, 197, 94, 0.12);
  --warn-bg: rgba(245, 158, 11, 0.14);
  --danger-bg: rgba(239, 68, 68, 0.12);
  --info-bg: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14);
  --ui-surface-card-border: rgba(15, 23, 42, 0.1);
  --ui-surface-card-divider: rgba(15, 23, 42, 0.08);
  --ui-surface-card-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 18px 36px rgba(15, 23, 42, 0.08);
  --ui-surface-card-shadow-strong:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 22px 40px rgba(15, 23, 42, 0.12);
  --ui-surface-card-bg:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  --ui-surface-shell-bg:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-surface-rgb, 244, 247, 251), 0.96));
  --ui-surface-soft-bg:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.05), transparent 28%),
    rgba(255, 255, 255, 0.82);
  --ui-surface-soft-bg-strong:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.1), transparent 30%),
    rgba(255, 255, 255, 0.94);
  --ui-surface-logo-bg:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 28%),
    rgba(255, 255, 255, 0.94);
  --ui-surface-media-bg: rgba(255, 255, 255, 0.88);
  --ui-accent-panel-bg:
    radial-gradient(circle at top right, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.9));
  --ui-text-strong: #0f172a;
  --ui-text-muted: rgba(15, 23, 42, 0.68);
  --ui-text-subtle: rgba(51, 65, 85, 0.78);
  --ui-success-bg: rgba(34, 197, 94, 0.12);
  --ui-success-border: rgba(22, 163, 74, 0.24);
  --ui-success-text: #166534;
  --ui-warning-bg: rgba(245, 158, 11, 0.14);
  --ui-warning-border: rgba(217, 119, 6, 0.24);
  --ui-warning-text: #92400e;
  --ui-danger-bg: rgba(239, 68, 68, 0.12);
  --ui-danger-border: rgba(220, 38, 38, 0.24);
  --ui-danger-text: #b91c1c;
  --ui-info-bg: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14);
  --ui-info-border: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.22);
  --ui-info-text: var(--ui-text-strong);
  --ui-neutral-bg: rgba(255, 255, 255, 0.82);
  --ui-neutral-border: rgba(15, 23, 42, 0.12);
  --ui-neutral-text: rgba(51, 65, 85, 0.94);
}

.surface-card {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-card-bg);
  color: var(--ui-text-strong, #f8fafc);
  box-shadow: var(--ui-surface-card-shadow);
}

.surface-card--interactive:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  box-shadow: var(--ui-surface-card-shadow-strong);
}

.surface-card__actions {
  border-top-color: var(--ui-surface-card-divider, rgba(148, 163, 184, 0.08));
}

.company-overview--premium .company-overview__hero {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.1));
  background: var(--ui-surface-shell-bg);
  box-shadow: var(--ui-surface-card-shadow);
}

.company-overview__logo {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.1));
  background: var(--ui-surface-logo-bg);
}

.company-overview__copy p,
.company-stat-card span,
.client-workspace-card .panel-header p {
  color: var(--ui-text-muted, rgba(191, 219, 254, 0.7));
}

.company-stat-card,
.client-workspace-card.surface-card,
.client-settings-shell--compact.surface-card,
.settings-section .panel.surface-card,
.form-panel-card.surface-card,
.wireguard-card.surface-card {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-card-bg);
  box-shadow: var(--ui-surface-card-shadow);
}

.client-workspace-card.surface-card:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  background: var(--ui-surface-card-bg);
  box-shadow: var(--ui-surface-card-shadow-strong);
}


/* ---- public/styles/ui-headers.css ---- */
/* Canonical UI headers and compact page intros */

.content-appbar {
  position: sticky;
  top: 16px;
  z-index: 12;
  min-height: 84px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.07), transparent 20%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.06), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(8, 13, 24, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 22px 42px rgba(2, 6, 23, 0.24);
}

.content-appbar__main {
  min-width: 0;
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
}

.content-appbar__eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.content-appbar__title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.content-appbar__meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: 56ch;
}

.content-appbar__side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: flex-start;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .content-appbar {
    min-height: 0;
    padding: 16px 18px;
    flex-direction: column;
    align-items: stretch;
  }

  .content-appbar__side {
    justify-content: flex-start;
  }

  .content-appbar__title {
    font-size: 24px;
  }
}

@media (max-width: 560px) {
  .content-appbar {
    top: 10px;
    padding: 14px;
    border-radius: 22px;
  }

  .content-appbar__title {
    font-size: 22px;
  }

  .content-appbar__meta {
    font-size: 12px;
  }
}

.page-intro {
  display: grid;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.1), transparent 18%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.08), transparent 24%),
    linear-gradient(145deg, rgba(8, 13, 24, 0.98), rgba(12, 19, 32, 0.96));
  box-shadow: 0 24px 54px rgba(2, 6, 23, 0.22);
}

.page-intro__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
  gap: 18px;
  align-items: start;
}

.page-intro__copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

.page-intro__eyebrow {
  color: #f2de73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-intro h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.page-intro__description,
.page-intro__summary {
  margin: 0;
  max-width: none;
}

.page-intro__description {
  color: #d5dfed;
  font-size: 14px;
  line-height: 1.66;
}

.page-intro__summary {
  color: #aebfd5;
  font-size: 13px;
  line-height: 1.72;
}

.page-intro__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.page-intro__metric {
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 34%),
    rgba(6, 11, 21, 0.58);
  display: grid;
  gap: 6px;
  align-content: start;
}

.page-intro__metric::before {
  display: none;
}

.page-intro__metric span {
  color: #8ea4c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-intro__metric strong {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.page-intro__metric small {
  color: #c0d0e3;
  font-size: 12px;
  line-height: 1.5;
}

.page-intro__footer {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-intro__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.page-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 4px;
  align-items: center;
}

.page-intro__actions .btn,
.page-intro__actions button,
.page-intro__actions .table-action-link {
  min-height: 38px;
  padding-inline: 13px;
  border-radius: 14px;
  flex: 0 0 auto;
}

.page-intro__copy > * {
  min-width: 0;
}

.page-intro__metric strong,
.page-intro__metric small {
  overflow-wrap: anywhere;
}

.panel-header + .button-row.wrap-row,
.panel-header + .hero-actions,
.panel-header + .filters-actions,
.shell-panel__meta + .button-row.wrap-row,
.page-intro + .button-row.wrap-row {
  margin-top: 16px;
}

.panel-header.between .button-row,
.panel-header.between .filters-actions {
  row-gap: 12px;
  column-gap: 12px;
}

.page-intro--monitoring {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 18%),
    radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.08), transparent 26%),
    linear-gradient(145deg, rgba(6, 12, 22, 0.98), rgba(9, 18, 32, 0.96));
}

.page-intro--exports,
.page-intro--events,
.page-intro--reports {
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 18%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.06), transparent 26%),
    linear-gradient(145deg, rgba(7, 12, 23, 0.98), rgba(11, 19, 33, 0.96));
}

.page-intro--history,
.page-intro--library {
  background:
    radial-gradient(circle at top right, rgba(168, 85, 247, 0.08), transparent 16%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.08), transparent 24%),
    linear-gradient(145deg, rgba(7, 12, 23, 0.98), rgba(12, 19, 33, 0.96));
}

.page-intro--clients,
.page-intro--client-overview,
.page-intro--client-settings {
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 18%),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.07), transparent 24%),
    linear-gradient(145deg, rgba(7, 12, 23, 0.98), rgba(12, 19, 33, 0.96));
}

.page-intro--recorders {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 18%),
    radial-gradient(circle at bottom left, rgba(214, 187, 24, 0.07), transparent 24%),
    linear-gradient(145deg, rgba(7, 12, 23, 0.98), rgba(12, 19, 33, 0.96));
}

.page-intro--integration,
.page-intro--diagnostics,
.page-intro--review {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 18%),
    radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.05), transparent 22%),
    linear-gradient(145deg, rgba(7, 12, 23, 0.98), rgba(12, 19, 33, 0.96));
}

@media (max-width: 1100px) {
  .page-intro__top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .content-appbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .content-appbar__side {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .content-appbar__side {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .page-intro {
    padding: 16px;
    border-radius: 22px;
  }

  .page-intro h1 {
    font-size: 30px;
  }

  .page-intro__metrics {
    grid-template-columns: 1fr;
  }

  .page-intro__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .content-appbar {
    position: static;
    top: auto;
    min-height: 0;
    padding: 16px;
  }

  .content-appbar__title,
  .content-appbar__meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content-appbar__title {
    font-size: 20px;
  }

  .content-appbar__main,
  .content-appbar__side {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .page-intro {
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  .page-intro__eyebrow {
    letter-spacing: 0.14em;
  }

  .page-intro h1 {
    font-size: 26px;
  }

  .page-intro__description,
  .page-intro__summary {
    font-size: 13px;
    line-height: 1.58;
  }

  .page-intro__metric {
    min-height: 0;
    padding: 13px 14px;
  }

  .page-intro__metric strong {
    font-size: 22px;
  }

  .page-intro__metric small {
    font-size: 11px;
  }

  .page-intro__pills {
    gap: 6px;
  }

  .page-intro__actions {
    gap: 10px;
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    min-height: 42px;
    padding-inline: 12px;
    justify-content: flex-start;
  }

  .content-appbar {
    top: 0;
    padding: 14px;
    gap: 12px;
  }

  .content-appbar__title {
    font-size: 20px;
  }

  .content-appbar__meta {
    font-size: 12px;
  }
}

@media (max-width: 980px) {
  .content-appbar {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 18px;
    gap: 10px;
  }

  .content-appbar__main {
    gap: 3px;
  }

  .content-appbar__title {
    font-size: 20px;
    line-height: 1.04;
  }

  .content-appbar__meta {
    font-size: 11px;
    line-height: 1.42;
    max-width: none;
  }

  .content-appbar__side {
    gap: 8px;
  }

  .page-intro {
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
  }

  .page-intro__top {
    gap: 14px;
  }

  .page-intro__copy {
    gap: 10px;
  }

  .page-intro h1 {
    font-size: clamp(24px, 6vw, 32px);
  }

  .page-intro__description,
  .page-intro__summary {
    font-size: 13px;
    line-height: 1.58;
  }

  .page-intro__metrics {
    gap: 10px;
  }

  .page-intro__metric {
    min-height: 0;
    padding: 12px 13px;
    border-radius: 16px;
  }

  .page-intro__actions {
    gap: 8px;
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    min-height: 40px;
    padding-inline: 12px;
    flex: 1 1 180px;
  }
}

@media (max-width: 760px) {
  .content-appbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 10px 12px;
    gap: 10px;
  }

  .content-appbar__main {
    width: auto;
  }

  .content-appbar__side {
    width: auto;
    min-width: auto;
    justify-content: flex-end;
    align-self: start;
  }
}

@media (max-width: 560px) {
  .content-appbar {
    padding: 9px 10px;
    border-radius: 16px;
    gap: 8px;
  }

  .content-appbar__eyebrow {
    display: none;
  }

  .content-appbar__title {
    font-size: 16px;
  }

  .content-appbar__meta {
    display: none;
  }

  .page-intro__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .page-intro__pills::-webkit-scrollbar {
    display: none;
  }

  .page-intro__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .page-intro {
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .page-intro__top {
    gap: 10px;
  }

  .page-intro h1 {
    font-size: clamp(21px, 6vw, 28px);
    line-height: 1.02;
  }

  .page-intro__description {
    font-size: 12px;
    line-height: 1.5;
  }

  .page-intro__summary {
    display: none;
  }

  .page-intro__metric {
    padding: 10px 11px;
    border-radius: 14px;
  }

  .page-intro__metric strong {
    font-size: 18px;
  }

  .page-intro__metric small {
    font-size: 10px;
  }

  .content-appbar {
    padding: 8px 10px;
    border-radius: 14px;
  }

  body.role-admin .content-appbar {
    padding: 7px 9px;
    border-radius: 12px;
  }

  body.role-admin .content-appbar__eyebrow,
  body.role-admin .content-appbar__meta {
    display: none;
  }

  body.role-admin .content-appbar__title {
    font-size: 15px;
    line-height: 1;
  }

  body.role-admin .page-intro {
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  body.role-admin .page-intro h1 {
    font-size: 20px;
  }

  body.role-admin .page-intro__description {
    font-size: 11px;
    line-height: 1.4;
  }

  body.role-admin .page-intro__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.role-admin .page-intro__metric {
    padding: 8px 9px;
    border-radius: 12px;
  }

  body.role-admin .page-intro__metric strong {
    font-size: 15px;
  }

  body.role-admin .page-intro__metric small {
    font-size: 9px;
  }

  body.role-admin .page-intro__actions .btn,
  body.role-admin .page-intro__actions button,
  body.role-admin .page-intro__actions .table-action-link {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 10px;
  }

  body.role-client .content-appbar {
    padding: 7px 9px;
    border-radius: 12px;
  }

  body.role-client .content-appbar__eyebrow,
  body.role-client .content-appbar__meta {
    display: none;
  }

  body.role-client .content-appbar__title {
    font-size: 15px;
    line-height: 1;
  }

  body.role-client .page-intro {
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  body.role-client .page-intro h1 {
    font-size: 20px;
  }

  body.role-client .page-intro__description {
    font-size: 11px;
    line-height: 1.4;
  }

  body.role-client .page-intro__metric {
    padding: 8px 9px;
    border-radius: 12px;
  }

  body.role-client .page-intro__metric strong {
    font-size: 15px;
  }

  body.role-client .page-intro__metric small {
    font-size: 9px;
  }

  body.role-client .page-intro__actions .btn,
  body.role-client .page-intro__actions button,
  body.role-client .page-intro__actions .table-action-link {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 10px;
  }
}

@media (max-width: 560px) {
  .page-intro {
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  .page-intro h1 {
    font-size: 20px;
  }

  .page-intro__description {
    font-size: 11px;
    line-height: 1.45;
  }

  .page-intro__metric {
    padding: 9px 10px;
    border-radius: 12px;
  }

  .page-intro__metric strong {
    font-size: 16px;
  }

  .page-intro__metric small {
    font-size: 9px;
  }

  body.role-admin .page-intro__description {
    display: none;
  }

  body.role-admin .page-intro__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.role-client .page-intro__description {
    display: none;
  }

body.role-client .page-intro__metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--monitoring,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--exports,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--events,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--reports,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--history,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--library,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--clients,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--client-overview,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--client-settings,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--recorders,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--integration,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--diagnostics,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro.page-intro--review {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top right, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14), transparent 20%),
    radial-gradient(circle at bottom left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow: var(--ui-surface-card-shadow-strong, 0 22px 40px rgba(15, 23, 42, 0.12));
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro__eyebrow {
  color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.88);
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro__description,
body[data-theme-mode="light"][data-user-theme="true"] .page-intro__summary {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro__metric {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 16px 28px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro__metric span {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro__metric strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .page-intro__metric small {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

@media (max-width: 1360px) {
  .content-appbar {
    top: 12px;
    min-height: 0;
    padding: 12px 14px;
    gap: 12px;
    border-radius: 20px;
  }

  .content-appbar__title {
    font-size: 22px;
  }

  .content-appbar__meta {
    max-width: none;
  }

  .page-intro {
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
  }

  .page-intro__top {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-intro__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    flex: 1 1 190px;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .page-intro__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .page-intro__metrics,
  .page-intro__actions {
    grid-template-columns: 1fr;
  }

  .page-intro__actions .btn,
  .page-intro__actions button,
  .page-intro__actions .table-action-link {
    justify-content: flex-start;
  }
}


/* ---- public/styles/ui-panels.css ---- */
/* Canonical admin panels, settings shells and section headers */

.panel-header {
  display: grid;
  gap: 6px;
  align-content: start;
  margin-bottom: 16px;
}

.panel-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.panel-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.panel-header.between,
.between {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.panel-header.between > *,
.between > * {
  min-width: 0;
}

.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.settings-summary-card {
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.98));
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 6px;
  align-content: start;
}

.settings-summary-card strong {
  font-size: 20px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.settings-summary-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.settings-summary-grid--premium {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.settings-summary-grid--premium .settings-summary-card {
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.96), rgba(5, 9, 17, 0.99));
}

.settings-summary-grid--premium .settings-summary-card strong {
  font-size: 24px;
  letter-spacing: -.04em;
}

.settings-summary-grid--brand {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-summary-grid--brand .settings-summary-card strong {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.settings-action-row {
  padding-top: 6px;
}

.client-settings-subtabs-panel {
  display: grid;
  gap: 14px;
}

.client-settings-shell {
  display: grid;
  gap: 18px;
}

.client-settings-shell--compact {
  padding: 14px;
  gap: 14px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(9, 15, 26, 0.96), rgba(7, 12, 21, 0.99));
}

.client-settings-shell__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.client-settings-shell__head > * {
  min-width: 0;
}

.client-settings-shell__intro {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.client-settings-shell__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-settings-shell__intro h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.client-settings-shell__intro p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.client-settings-shell__actions {
  justify-content: flex-end;
  flex: 0 0 auto;
}

.client-settings-shell__actions .btn {
  min-height: 40px;
  padding-inline: 14px;
}

.client-settings-shell__stats {
  margin-top: 2px;
}

.client-settings-subtabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: 8px;
  position: static;
  padding: 8px;
  margin-bottom: 2px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(11, 17, 29, 0.94), rgba(8, 13, 22, 0.94));
  box-shadow: 0 16px 28px rgba(2, 6, 23, 0.16);
}

.client-settings-subtab {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 13px 14px;
  align-content: start;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 30%),
    rgba(255, 255, 255, 0.028);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.client-settings-subtab strong {
  font-size: 12px;
  line-height: 1.2;
}

.client-settings-subtab span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.client-settings-subtab em {
  color: rgba(214, 187, 24, 0.82);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-settings-subtab:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.36);
  color: #f8fafc;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
}

.client-settings-subtab.is-active {
  border-color: rgba(214, 187, 24, 0.38);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(214, 187, 24, 0.12), rgba(15, 23, 42, 0.94));
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.1);
}

.client-settings-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.client-settings-overview__card {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.04), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(7, 12, 21, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  align-content: start;
}

.client-settings-overview__card small {
  color: rgba(148, 163, 184, 0.74);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.client-settings-overview__card strong {
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.client-settings-overview__card span {
  color: rgba(191, 219, 254, 0.72);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.settings-section {
  display: none;
}

.settings-section.is-active {
  display: block;
}

.settings-section + .settings-section {
  margin-top: 18px;
}

.settings-form-stack {
  gap: 18px;
}

.settings-form-sections {
  display: grid;
  gap: 18px;
}

.settings-card-fold {
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.024), transparent 24%),
    rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.settings-card-fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  cursor: pointer;
}

.settings-card-fold__summary::-webkit-details-marker {
  display: none;
}

.settings-card-fold__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.settings-card-fold__copy strong {
  font-size: 15px;
  line-height: 1.2;
}

.settings-card-fold__copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-card-fold__body {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.settings-form-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.024), transparent 24%),
    rgba(255, 255, 255, 0.02);
}

.settings-form-card__header {
  display: grid;
  gap: 5px;
}

.settings-form-card__header h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
}

.settings-form-card__header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-form-grid {
  gap: 12px;
}

.settings-action-fold {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.022), transparent 24%),
    rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.settings-action-fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
}

.settings-action-fold__summary::-webkit-details-marker {
  display: none;
}

.settings-action-fold__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-action-fold__copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.settings-action-fold__copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-action-fold__body {
  display: grid;
  gap: 14px;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.settings-action-fold--inline {
  border: 0;
  background: transparent;
  overflow: visible;
}

.settings-action-fold__summary--inline {
  padding: 0;
  border: 0;
  background: transparent;
}

.settings-action-fold__summary--inline .btn {
  pointer-events: none;
}

.settings-action-fold--inline .settings-action-fold__body {
  padding: 12px 0 0;
  border-top: 0;
}

.surface-list--scroller {
  max-height: 500px;
  overflow: auto;
  padding-right: 4px;
}

.wireguard-stack {
  display: grid;
  gap: 16px;
}

.wireguard-stack__summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wireguard-stack__folds {
  display: grid;
  gap: 12px;
}

@media (max-width: 980px) {
  .settings-summary-grid--premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-settings-shell__head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-settings-shell__actions {
    justify-content: flex-start;
  }

  .client-settings-subtabs {
    position: static;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-settings-overview {
    grid-template-columns: 1fr;
  }

  .wireguard-stack__summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .panel-header.between,
  .between {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-header.between .button-row,
  .panel-header.between .filters-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .settings-summary-grid,
  .settings-summary-grid--premium {
    grid-template-columns: 1fr;
  }

  .client-settings-shell--compact {
    padding: 12px;
    gap: 12px;
  }

  .client-settings-shell__meta {
    gap: 6px;
  }

  .client-settings-shell__actions {
    width: 100%;
  }

  .client-settings-shell__actions .btn {
    flex: 1 1 220px;
  }

  .client-settings-subtabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
    top: auto;
    padding: 8px;
    gap: 8px;
    border-radius: 18px;
  }

  .client-settings-subtab {
    min-height: 82px;
    padding: 12px 13px;
    border-radius: 16px;
  }

  .settings-card-fold__summary,
  .settings-action-fold__summary {
    padding: 14px;
  }

  .settings-card-fold__body,
  .settings-action-fold__body {
    padding: 0 14px 14px;
  }

  .settings-form-card {
    padding: 14px;
  }

  .surface-list--scroller {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .client-settings-overview__card {
    min-height: 0;
    padding: 14px;
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  .settings-summary-card {
    min-height: 0;
    padding: 13px 14px;
  }

  .settings-summary-card strong {
    font-size: 18px;
  }

  .client-settings-subtabs {
    grid-template-columns: 1fr;
  }

  .client-settings-shell__actions .btn {
    flex: 1 1 100%;
  }

  .client-settings-subtab strong {
    font-size: 12px;
  }

  .client-settings-subtab span {
    font-size: 10px;
  }
}

@media (max-width: 980px) {
  .client-settings-shell--compact {
    padding: 12px;
    gap: 12px;
  }

  .settings-card-fold__summary,
  .settings-action-fold__summary {
    padding: 14px;
  }

  .settings-card-fold__body,
  .settings-action-fold__body {
    padding: 0 14px 14px;
  }

  .settings-form-card {
    padding: 14px;
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  .client-settings-shell--compact {
    padding: 10px;
    gap: 10px;
    border-radius: 20px;
  }

  .client-settings-subtabs {
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
  }

  .client-settings-subtab {
    min-height: 74px;
    padding: 10px 11px;
    border-radius: 14px;
  }

  .settings-card-fold,
  .settings-action-fold,
  .settings-form-card {
    border-radius: 16px;
  }
}

@media (max-width: 760px) {
  .client-settings-shell--compact {
    padding: 10px;
    gap: 10px;
    border-radius: 18px;
  }

  .client-settings-shell__meta {
    gap: 4px;
  }

  .client-settings-subtabs {
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
  }

  .client-settings-subtab {
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 12px;
  }

  .client-settings-subtab strong {
    font-size: 11px;
    line-height: 1.2;
  }

  .client-settings-subtab span {
    font-size: 10px;
    line-height: 1.25;
  }

  .settings-summary-card,
  .client-settings-overview__card {
    padding: 12px;
    border-radius: 14px;
  }

  .settings-summary-card strong {
    font-size: 16px;
  }

  .settings-card-fold__summary,
  .settings-action-fold__summary {
    gap: 10px;
    padding: 12px;
  }

  .settings-card-fold__body,
  .settings-action-fold__body,
  .settings-form-card {
    padding: 12px;
  }

  .settings-form-card__header p,
  .settings-action-fold__copy span {
    font-size: 11px;
    line-height: 1.4;
  }
}

@media (max-width: 560px) {
  .client-settings-subtabs {
    gap: 5px;
    padding: 5px;
  }

  .client-settings-subtab {
    min-height: 60px;
    padding: 8px 9px;
  }

  .settings-summary-card,
  .client-settings-overview__card,
  .settings-form-card,
  .settings-card-fold__body,
  .settings-action-fold__body {
    padding: 10px;
  }
}

.client-settings-subtabs {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-shell-bg);
  box-shadow: var(--ui-surface-card-shadow);
}

.client-settings-subtab,
.client-settings-overview__card,
.settings-card-fold,
.settings-action-fold,
.settings-form-card {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  color: var(--ui-text-strong, inherit);
}

.client-settings-subtab,
.client-settings-overview__card,
.settings-form-card {
  background: var(--ui-surface-soft-bg);
}

.settings-card-fold,
.settings-action-fold {
  background: var(--ui-surface-card-bg);
}

.client-settings-subtab strong,
.client-settings-overview__card strong,
.settings-card-fold__copy strong,
.settings-action-fold__copy strong,
.settings-form-card__header h3 {
  color: var(--ui-text-strong, inherit);
}

.client-settings-subtab span,
.client-settings-overview__card span,
.client-settings-overview__card small,
.settings-card-fold__copy span,
.settings-action-fold__copy span,
.settings-form-card__header p {
  color: var(--ui-text-muted, var(--muted));
}

.client-settings-subtab em {
  color: var(--ui-accent-text, rgba(56, 189, 248, 0.98));
}

.client-settings-subtab:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  background: var(--ui-surface-soft-bg-strong);
  box-shadow: var(--ui-surface-card-shadow);
}

.client-settings-subtab.is-active {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  background: var(--ui-accent-panel-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08);
}

.settings-card-fold__body,
.settings-action-fold__body {
  border-top-color: var(--ui-surface-card-divider, rgba(148, 163, 184, 0.08));
}

.settings-summary-card {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-soft-bg);
  color: var(--ui-text-strong, inherit);
  box-shadow: var(--ui-surface-card-shadow);
}

.settings-summary-grid--premium .settings-summary-card {
  background: var(--ui-surface-card-bg);
}

.settings-summary-card span {
  color: var(--ui-text-subtle, var(--ui-text-muted, var(--muted)));
}

.list-card__role {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.28));
  background: var(--ui-info-bg, rgba(56, 189, 248, 0.14));
  color: var(--ui-info-text, #dbeafe);
}

.settings-section {
  scroll-margin-top: 136px;
}

@media (max-width: 900px) {
  .client-settings-subtabs {
    display: none;
  }

  .settings-section {
    display: block !important;
    scroll-margin-top: 92px;
  }

  .settings-section + .settings-section {
    margin-top: 14px;
  }
}

@media (max-width: 760px) {
  .client-settings-shell--compact.surface-card {
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 18px !important;
  }

  .client-settings-overview {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .client-settings-overview__card,
  .settings-card-fold,
  .settings-action-fold,
  .settings-form-card {
    border-radius: 16px !important;
  }

  .settings-card-fold__summary,
  .settings-action-fold__summary {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .settings-card-fold__body,
  .settings-action-fold__body,
  .settings-form-card {
    padding: 12px !important;
  }
}

@media (max-width: 560px) {
  .client-settings-shell--compact.surface-card {
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  .client-settings-overview__card,
  .settings-form-card,
  .settings-card-fold__body,
  .settings-action-fold__body {
    padding: 10px !important;
  }

  .client-settings-overview__card,
  .settings-card-fold,
  .settings-action-fold,
  .settings-form-card {
    border-radius: 14px !important;
  }
}

@media (max-width: 1360px) {
  .settings-summary-grid--premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-summary-grid--brand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-settings-shell__head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-settings-shell__actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .settings-summary-grid--brand {
    grid-template-columns: 1fr;
  }
}


/* ---- public/styles/ui-layouts.css ---- */
/* Canonical lightweight layouts, list shells and admin grids */

.surface-list {
  display: grid;
  gap: 10px;
}

.client-console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.client-console-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(71, 85, 105, 0.3);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(9, 15, 26, 0.92));
  color: rgba(226, 232, 240, 0.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.client-console-tab:hover {
  border-color: rgba(56, 189, 248, 0.45);
  color: #f8fafc;
  transform: translateY(-1px);
}

.client-console-tab--active {
  border-color: rgba(214, 187, 24, 0.44);
  background: linear-gradient(180deg, rgba(214, 187, 24, 0.2), rgba(15, 23, 42, 0.94));
  color: #fef3c7;
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.12);
}

.filters-grid > .filters-actions,
.filters-grid > .button-row,
.filters-grid > .form-actions-span {
  align-self: end;
  min-height: 42px;
  display: flex;
  align-items: center;
  align-content: center;
}

.filters-grid > .filters-actions {
  justify-content: flex-start;
}

.filters-grid > .filters-actions > .btn,
.filters-grid > .filters-actions > button,
.filters-grid > .filters-actions > a,
.filters-grid > .button-row > .btn,
.filters-grid > .button-row > button,
.filters-grid > .button-row > a {
  min-height: 42px;
}

.list-stack,
.chart-stack {
  display: grid;
  gap: 12px;
}

.list-row,
.activity-row {
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(11, 18, 32, 0.96));
}

.list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: var(--muted);
}

.list-row span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.list-row strong,
.activity-title {
  color: var(--text);
}

.activity-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
}

.settings-layout {
  align-items: start;
}

.settings-revamp {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 18px;
  align-items: start;
}

.settings-revamp > .settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.settings-layout--primary {
  grid-column: 1;
}

.settings-layout--secondary {
  grid-column: 2;
}

.admin-summary-grid .settings-summary-card {
  min-height: 116px;
}

.admin-clients-stage,
.admin-account-grid {
  display: grid;
  gap: 18px;
}

.admin-clients-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: start;
}

.admin-clients-stage__directory,
.admin-clients-stage__side,
.admin-form-grid,
.admin-account-grid__items {
  display: grid;
  gap: 14px;
}

.admin-clients-stage__side {
  align-content: start;
}

@media (min-width: 981px) {
  .admin-clients-stage__side {
    position: sticky;
    top: 112px;
  }
}

.admin-account-grid__items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-account-grid__items .list-card {
  min-height: 126px;
  align-content: start;
}

@media (max-width: 760px) {
  .filters-grid > .filters-actions,
  .filters-grid > .button-row,
  .filters-grid > .form-actions-span {
    align-self: stretch;
    width: 100%;
  }

  .list-row,
  .activity-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .client-console-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-inline: -2px;
    padding-inline: 2px;
    scrollbar-width: none;
  }

  .client-console-tabs::-webkit-scrollbar {
    display: none;
  }

  .client-console-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 11px;
    font-size: 10px;
  }

  .list-row,
  .activity-row {
    padding: 13px 14px;
    border-radius: 16px;
  }
}

@media (max-width: 900px) {
  .settings-revamp {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .settings-revamp > .settings-layout,
  .settings-layout--primary,
  .settings-layout--secondary {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
  }

  .panel-grid.two-col > * {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
}

@media (max-width: 1360px) {
  .settings-revamp,
  .admin-clients-stage__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .admin-account-grid__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .admin-account-grid__items {
    grid-template-columns: 1fr;
  }
}


/* ---- public/styles/ui-admin.css ---- */
/* Canonical admin console surfaces */

.admin-client-card {
  min-height: 100%;
  padding: 18px;
  gap: 12px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.05), transparent 24%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.05), transparent 20%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 16px 30px rgba(2, 6, 23, 0.14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-client-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 187, 24, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 22px 38px rgba(2, 6, 23, 0.2);
}

.admin-client-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.admin-client-card__head > div {
  display: grid;
  gap: 4px;
}

.admin-client-card__head strong {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.admin-client-card__head span {
  color: rgba(191, 219, 254, 0.66);
  font-size: 12px;
  line-height: 1.5;
}

.admin-client-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: rgba(191, 219, 254, 0.7);
  font-size: 13px;
}

.admin-client-card__meta + .admin-client-card__meta {
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.admin-client-card .badge {
  white-space: nowrap;
}

.admin-client-card .button-row {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.admin-side-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.04), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.94), rgba(7, 12, 21, 0.98));
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
}

.admin-side-panel .surface-list {
  gap: 12px;
}

.admin-side-panel .list-card strong {
  font-size: 14px;
  line-height: 1.28;
}

.admin-side-panel .list-card span {
  line-height: 1.5;
}

.admin-side-panel .list-card {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 26%),
    rgba(255, 255, 255, 0.028);
}

.admin-clients-stage__directory,
.admin-clients-stage__side {
  gap: 16px;
}

.portfolio-admin-directory,
.portfolio-admin-side {
  gap: 18px;
}

.portfolio-admin-card {
  gap: 16px;
  padding: 20px;
}

.portfolio-admin-card__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.portfolio-admin-card__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.portfolio-admin-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(18, 30, 48, 0.98), rgba(8, 14, 24, 0.98));
  border: 1px solid rgba(214, 187, 24, 0.18);
  color: rgba(248, 250, 252, 0.98);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  flex: 0 0 auto;
}

.portfolio-admin-card__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portfolio-admin-card__copy strong {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.portfolio-admin-card__copy span {
  color: rgba(191, 219, 254, 0.7);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.portfolio-admin-card__eyebrow {
  color: rgba(214, 187, 24, 0.95);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.portfolio-admin-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.portfolio-admin-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.portfolio-admin-card__stats--health {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portfolio-admin-card__stat {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 30%),
    rgba(255, 255, 255, 0.02);
}

.portfolio-admin-card__stat strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.portfolio-admin-card__stat span {
  color: rgba(191, 219, 254, 0.7);
  font-size: 12px;
  line-height: 1.4;
}

.portfolio-admin-card__health {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-admin-card__health-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.9);
  font-size: 12px;
  line-height: 1.35;
}

.portfolio-admin-card__health-pill--default {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.portfolio-admin-card__health-pill--success {
  border-color: rgba(74, 222, 128, 0.18);
  background: rgba(74, 222, 128, 0.1);
  color: rgba(187, 247, 208, 0.95);
}

.portfolio-admin-card__health-pill--warning {
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(250, 204, 21, 0.12);
  color: rgba(254, 240, 138, 0.96);
}

.portfolio-admin-card__health-pill--danger {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.12);
  color: rgba(254, 202, 202, 0.96);
}

.portfolio-admin-card__clients {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-admin-card__client-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
}

.portfolio-admin-card__client-pill:hover {
  border-color: rgba(214, 187, 24, 0.2);
  background: rgba(214, 187, 24, 0.08);
}

.portfolio-admin-card__client-pill--muted {
  color: rgba(191, 219, 254, 0.66);
}

.portfolio-admin-card__actions {
  margin-top: 0;
}

.portfolio-admin-card__form {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.portfolio-admin-card__form-grid,
.portfolio-admin-card__tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portfolio-admin-card__tool {
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.028), transparent 32%),
    rgba(255, 255, 255, 0.02);
}

.portfolio-admin-card__tool-copy {
  display: grid;
  gap: 4px;
}

.portfolio-admin-card__tool-copy strong {
  font-size: 14px;
  line-height: 1.3;
}

.portfolio-admin-card__tool-copy span {
  color: rgba(191, 219, 254, 0.7);
  font-size: 12px;
  line-height: 1.5;
}

.role-admin .brand-card {
  border-color: rgba(214, 187, 24, 0.16);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 24%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.98), rgba(6, 10, 18, 0.99));
}

.role-admin .sidebar__footer {
  border-color: rgba(214, 187, 24, 0.14);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.06), transparent 22%),
    rgba(255, 255, 255, 0.025);
}

.role-admin .sidebar__utility {
  border-color: rgba(214, 187, 24, 0.12);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.06), transparent 26%),
    rgba(255, 255, 255, 0.02);
}

.role-admin .content-appbar__eyebrow {
  color: rgba(214, 187, 24, 0.96);
  letter-spacing: .18em;
}

.role-admin .hero-actions .btn,
.role-admin .button-row .btn,
.role-admin .button-row .table-action-link,
.role-admin .filters-actions .btn {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  gap: 6px;
}

.role-admin .hero-actions,
.role-admin .button-row {
  gap: 10px;
}

.role-admin .panel--compact .button-row.wrap-row,
.role-admin .shell-panel__meta + .button-row,
.role-admin .panel .button-row.wrap-row + .button-row.wrap-row,
.admin-console-actions {
  margin-top: 14px;
}

.role-admin .panel--compact .button-row.wrap-row {
  row-gap: 12px;
  column-gap: 12px;
}

.diagnostic-log-list {
  display: grid;
  gap: 10px;
}

@media (max-width: 980px) {
  .admin-clients-stage__grid,
  .admin-account-grid__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-clients-stage__grid {
    grid-template-columns: 1fr;
  }

  .portfolio-admin-card__stats--health {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-account-grid__items {
    grid-template-columns: 1fr;
  }

  .admin-client-card__head,
  .admin-client-card__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-client-card {
    padding: 16px;
    border-radius: 20px;
  }

  .admin-client-card .button-row,
  .admin-side-panel .button-row {
    width: 100%;
  }

  .admin-client-card .button-row > *,
  .admin-side-panel .button-row > * {
    flex: 1 1 100%;
  }

  .admin-side-panel {
    padding: 16px;
    border-radius: 20px;
  }

  .admin-side-panel .list-card {
    padding: 13px 14px;
    border-radius: 16px;
  }

  .portfolio-admin-card__hero,
  .portfolio-admin-card__identity,
  .portfolio-admin-card__badges {
    width: 100%;
  }

  .portfolio-admin-card__hero,
  .portfolio-admin-card__identity {
    flex-direction: column;
    align-items: flex-start;
  }

  .portfolio-admin-card__badges {
    justify-content: flex-start;
  }

  .portfolio-admin-card__stats,
  .portfolio-admin-card__form-grid,
  .portfolio-admin-card__tool-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .admin-client-card,
  .admin-side-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .admin-client-card__head strong {
    font-size: 15px;
  }

  .admin-client-card__meta {
    gap: 8px;
    font-size: 12px;
  }

  .portfolio-admin-card {
    padding: 16px;
  }

  .portfolio-admin-card__avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 14px;
  }

  .portfolio-admin-card__copy strong {
    font-size: 16px;
  }

  .portfolio-admin-card__stat {
    padding: 11px 12px;
    border-radius: 14px;
  }

  .portfolio-admin-card__stat strong {
    font-size: 20px;
  }

  .admin-client-card .button-row,
  .admin-side-panel .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.portfolio-admin-card__health-pill {
  border-color: var(--ui-neutral-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-neutral-bg, rgba(255, 255, 255, 0.03));
  color: var(--ui-neutral-text, rgba(226, 232, 240, 0.9));
}

.portfolio-admin-card__health-pill--default {
  border-color: var(--ui-neutral-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-neutral-bg, rgba(255, 255, 255, 0.03));
  color: var(--ui-neutral-text, rgba(226, 232, 240, 0.9));
}

.portfolio-admin-card__health-pill--success {
  border-color: var(--ui-success-border, rgba(74, 222, 128, 0.18));
  background: var(--ui-success-bg, rgba(74, 222, 128, 0.1));
  color: var(--ui-success-text, rgba(187, 247, 208, 0.95));
}

.portfolio-admin-card__health-pill--warning {
  border-color: var(--ui-warning-border, rgba(250, 204, 21, 0.22));
  background: var(--ui-warning-bg, rgba(250, 204, 21, 0.12));
  color: var(--ui-warning-text, rgba(254, 240, 138, 0.96));
}

.portfolio-admin-card__health-pill--danger {
  border-color: var(--ui-danger-border, rgba(248, 113, 113, 0.22));
  background: var(--ui-danger-bg, rgba(248, 113, 113, 0.12));
  color: var(--ui-danger-text, rgba(254, 202, 202, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .admin-client-card,
body[data-theme-mode="light"][data-user-theme="true"] .admin-side-panel,
body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 18px 32px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .admin-client-card:hover,
body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card:hover {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 22px 38px rgba(15, 23, 42, 0.12);
}

body[data-theme-mode="light"][data-user-theme="true"] .admin-client-card__head span,
body[data-theme-mode="light"][data-user-theme="true"] .admin-client-card__meta,
body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__copy span,
body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__stat span,
body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__tool-copy span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__avatar {
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.9));
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.2);
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__stat,
body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__tool {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: var(--ui-surface-soft-bg, rgba(255, 255, 255, 0.82));
}

body[data-theme-mode="light"][data-user-theme="true"] .portfolio-admin-card__client-pill {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.78);
  color: var(--ui-text-strong, #0f172a);
}


/* ---- public/styles/ui-settings.css ---- */
/* Canonical settings and preferences surfaces */

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-toggle--checked {
  border-color: rgba(214, 187, 24, 0.18);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.04);
}

.settings-toggle__copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.settings-toggle__eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 187, 24, 0.86);
}

.settings-toggle__copy strong {
  font-size: 14px;
  line-height: 1.35;
}

.settings-toggle__copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-toggle__switch {
  position: relative;
  flex: 0 0 auto;
}

.settings-toggle__switch-block {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.settings-toggle__state {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-toggle__switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-toggle__slider {
  width: 56px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.18);
  transition: background .16s ease, border-color .16s ease;
}

.settings-toggle__slider::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.34);
  transition: transform .16s ease;
}

.settings-toggle__switch input:checked + .settings-toggle__slider {
  background: rgba(214, 187, 24, 0.34);
  border-color: rgba(214, 187, 24, 0.28);
}

.settings-toggle__switch input:checked + .settings-toggle__slider::after {
  transform: translateX(24px);
}

.notification-settings-note {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.16);
  color: #c5efff;
  font-size: 13px;
  line-height: 1.5;
}

.settings-hero {
  padding-bottom: 22px;
}

.settings-form {
  gap: 14px;
}

.settings-form .settings-toggle {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.settings-form textarea,
.settings-form input,
.settings-form select {
  border-radius: 14px;
}

.settings-panel {
  overflow: hidden;
}

.settings-panel--control {
  display: grid;
  gap: 18px;
}

.settings-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-panel--device,
.settings-panel--vehicle,
.settings-panel--watchlist,
.settings-panel--theme {
  display: grid;
  gap: 16px;
}

.settings-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-mode-choice {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.settings-mode-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-mode-choice.is-active {
  border-color: rgba(214, 187, 24, 0.32);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

.settings-mode-choice__eyebrow,
.settings-theme-preview__eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 187, 24, 0.86);
}

.settings-mode-choice strong {
  font-size: 15px;
}

.settings-mode-choice small {
  color: var(--muted);
  line-height: 1.5;
}

.settings-theme-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-theme-swatch {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.settings-theme-swatch code {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-theme-swatch input[type="color"] {
  inline-size: 100%;
  min-block-size: 54px;
  border-radius: 14px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: transparent;
  cursor: pointer;
}

.settings-theme-preview {
  display: grid;
  gap: 12px;
}

.settings-theme-preview__card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--preview-accent) 18%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--preview-surface) 82%, #ffffff 18%), var(--preview-surface));
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

.settings-theme-preview__badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--preview-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--preview-accent) 32%, transparent);
  color: color-mix(in srgb, var(--preview-accent) 86%, #ffffff 14%);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}

.settings-theme-preview__card strong {
  font-size: 16px;
}

.settings-theme-preview__card small {
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.5;
}

.settings-device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-vehicle-meta {
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.settings-action-row--dense {
  padding-top: 6px;
}

.settings-toggle.settings-toggle--compact {
  border-radius: 16px;
}

@media (max-width: 980px) {
  .settings-toggle-grid {
    grid-template-columns: 1fr;
  }

  .settings-mode-grid,
  .settings-theme-palette {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .settings-device-actions {
    flex-direction: column;
  }
}

.settings-toggle,
.settings-form .settings-toggle,
.settings-mode-choice,
.settings-theme-swatch {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-soft-bg);
  color: var(--ui-text-strong, inherit);
}

.settings-toggle__eyebrow,
.settings-mode-choice__eyebrow,
.settings-theme-preview__eyebrow {
  color: rgba(214, 187, 24, 0.86);
}

.settings-toggle__copy strong,
.settings-mode-choice strong,
.settings-theme-preview__card strong {
  color: var(--ui-text-strong, inherit);
}

.settings-toggle__copy small,
.settings-mode-choice small,
.settings-theme-preview__card small,
.settings-toggle__state {
  color: var(--ui-text-muted, var(--muted));
}

.settings-toggle--checked,
.settings-mode-choice.is-active {
  border-color: rgba(214, 187, 24, 0.18);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

.settings-toggle__slider {
  background: rgba(148, 163, 184, 0.2);
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.18));
}

.settings-toggle__switch input:checked + .settings-toggle__slider {
  background: rgba(214, 187, 24, 0.34);
  border-color: rgba(214, 187, 24, 0.28);
}

.notification-settings-note {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.16));
  background: var(--ui-info-bg, rgba(56, 189, 248, 0.1));
  color: var(--ui-info-text, #c5efff);
}

.settings-theme-swatch code {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.14));
  background: var(--ui-surface-soft-bg-strong);
  color: var(--ui-text-muted, var(--muted));
}

.settings-theme-swatch input[type="color"] {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.14));
}

.settings-theme-preview__card {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  box-shadow: var(--ui-surface-card-shadow);
}

@media (max-width: 760px) {
  .settings-revamp {
    gap: 12px;
  }

  .settings-panel {
    overflow: visible;
  }

  .settings-toggle {
    align-items: flex-start;
  }

  .settings-toggle__switch-block {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .settings-theme-preview__card {
    padding: 14px;
    border-radius: 18px;
  }
}

@media (max-width: 560px) {
  .settings-toggle,
  .settings-theme-swatch,
  .settings-mode-choice {
    padding: 12px;
  }
}

@media (max-width: 760px) {
  .settings-revamp,
  .settings-layout,
  .settings-layout--primary,
  .settings-layout--secondary {
    gap: 12px !important;
  }

  .settings-panel {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .settings-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .settings-toggle__switch-block {
    width: auto !important;
    justify-items: end !important;
    gap: 6px !important;
  }

  .settings-mode-grid,
  .settings-theme-palette {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .settings-theme-preview__card {
    padding: 14px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 560px) {
  .settings-panel {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .settings-toggle,
  .settings-theme-swatch,
  .settings-mode-choice {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .settings-toggle__switch-block {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
}

@media (max-width: 760px) {
  .settings-panel--control .settings-toggle-grid {
    gap: 10px !important;
  }

  .settings-toggle {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .settings-toggle__copy {
    gap: 5px !important;
  }

  .settings-toggle__copy strong {
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  .settings-toggle__copy small {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .settings-toggle__switch-block {
    width: 100% !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .settings-toggle__state {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
}

@media (max-width: 560px) {
  .settings-toggle {
    gap: 8px !important;
  }

  .settings-toggle__copy strong {
    font-size: 12px !important;
  }

  .settings-toggle__copy small {
    font-size: 10px !important;
  }
}


/* ---- public/styles/ui-modals.css ---- */
/* Canonical modal surfaces for investigative and plate-control flows */

.antecedentes-overlay {
  z-index: 72;
  background: rgba(2, 6, 16, 0.82);
  backdrop-filter: blur(14px);
}

.antecedentes-dialog {
  width: min(920px, 100%);
  padding: 18px;
}

.antecedentes-dialog__intro {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    rgba(7, 12, 21, 0.86);
}

.antecedentes-dialog__intro strong {
  font-size: 15px;
  letter-spacing: -0.02em;
}

.antecedentes-dialog__intro span {
  color: rgba(191, 219, 254, 0.74);
  font-size: 13px;
  line-height: 1.55;
}

.antecedentes-dialog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.antecedentes-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.96), rgba(5, 10, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.antecedentes-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 187, 24, 0.22);
  background: rgba(214, 187, 24, 0.1);
  color: #f7e79a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.antecedentes-card__body {
  display: grid;
  gap: 6px;
}

.antecedentes-card__body h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.antecedentes-card__body p {
  margin: 0;
  color: rgba(191, 219, 254, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.antecedentes-card .btn {
  width: fit-content;
}

.photo-dialog--plate-control {
  width: min(1180px, 96vw);
}

.plate-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 18px;
}

.plate-control-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.plate-control-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.plate-control-panel__head h3 {
  margin: 4px 0 0;
}

.plate-control-list {
  display: grid;
  gap: 12px;
}

.plate-control-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(6, 12, 22, 0.72);
}

.plate-control-item__main {
  display: grid;
  gap: 6px;
}

.plate-control-item__main strong {
  font-size: 15px;
}

.plate-control-item__main span {
  color: var(--muted);
  font-size: 13px;
}

.plate-control-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plate-control-item__actions {
  justify-content: flex-end;
}

body[data-theme-mode="light"][data-user-theme="true"] .live-overlay {
  background: rgba(241, 245, 249, 0.76);
  backdrop-filter: blur(12px);
}

body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-overlay {
  background: rgba(241, 245, 249, 0.82);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog,
body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-rename-dialog {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.09), transparent 24%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.05), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 28px 70px rgba(15, 23, 42, 0.16);
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__header {
  border-bottom-color: var(--ui-surface-card-divider, rgba(15, 23, 42, 0.08));
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__eyebrow {
  color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.88);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__header h2,
body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-dialog__intro strong,
body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-card__body h3,
body[data-theme-mode="light"][data-user-theme="true"] .plate-control-panel__head h3,
body[data-theme-mode="light"][data-user-theme="true"] .plate-control-item__main strong,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__header strong,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__item strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__header p,
body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-dialog__intro span,
body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-card__body p,
body[data-theme-mode="light"][data-user-theme="true"] .plate-control-item__main span,
body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__footnote,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__header span,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__group-label,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__range-note,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__item span,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail__empty {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__action,
body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__close {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ui-text-strong, #0f172a);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__action:hover,
body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__close:hover {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.24);
  background: rgba(255, 255, 255, 0.98);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__media,
body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__footnote,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-dialog__footnote,
body[data-theme-mode="light"][data-user-theme="true"] .live-rail {
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 28%),
    rgba(255, 255, 255, 0.84);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-rail__item {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.76);
}

body[data-theme-mode="light"][data-user-theme="true"] .live-rail__empty {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
}

body[data-theme-mode="light"][data-user-theme="true"] .recorder-rename-dialog__feedback {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.94);
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .recorder-rename-dialog__feedback.is-success {
  border-color: var(--ui-success-border, rgba(22, 163, 74, 0.24));
  background: var(--ui-success-bg, rgba(34, 197, 94, 0.12));
  color: var(--ui-success-text, #166534);
}

body[data-theme-mode="light"][data-user-theme="true"] .recorder-rename-dialog__feedback.is-error {
  border-color: var(--ui-danger-border, rgba(220, 38, 38, 0.24));
  background: var(--ui-danger-bg, rgba(239, 68, 68, 0.12));
  color: var(--ui-danger-text, #b91c1c);
}

body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-dialog__intro,
body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-card,
body[data-theme-mode="light"][data-user-theme="true"] .plate-control-panel {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: var(--ui-surface-card-bg);
  box-shadow: var(--ui-surface-card-shadow);
}

body[data-theme-mode="light"][data-user-theme="true"] .antecedentes-card__badge {
  border-color: var(--ui-warning-border, rgba(217, 119, 6, 0.24));
  background: var(--ui-warning-bg, rgba(245, 158, 11, 0.14));
  color: var(--ui-warning-text, #92400e);
}

body[data-theme-mode="light"][data-user-theme="true"] .plate-control-item {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: var(--ui-surface-soft-bg-strong, rgba(255, 255, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

@media (max-width: 980px) {
  .plate-control-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .plate-control-item {
    grid-template-columns: 1fr;
  }

  .plate-control-item__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .antecedentes-dialog__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .antecedentes-dialog,
  .photo-dialog--plate-control {
    width: min(100%, calc(100dvw - 24px));
    padding: 14px;
  }

  .antecedentes-card,
  .plate-control-panel {
    padding: 14px;
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  .antecedentes-dialog,
  .photo-dialog--plate-control {
    width: min(100%, calc(100dvw - 16px));
    padding: 12px;
  }

  .antecedentes-dialog__grid,
  .plate-control-grid {
    grid-template-columns: 1fr !important;
  }

  .plate-control-panel__head {
    flex-direction: column;
    align-items: stretch;
  }

  .antecedentes-card .btn,
  .plate-control-item__actions,
  .plate-control-item__actions .btn,
  .plate-control-item__actions .table-action-link {
    width: 100%;
  }

  .plate-control-item__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .antecedentes-dialog__intro,
  .antecedentes-card,
  .plate-control-panel,
  .plate-control-item {
    padding: 12px;
    border-radius: 16px;
  }
}


/* ---- public/styles/ui-media-library.css ---- */
/* Canonical media library surfaces and photo dialogs */

.photo-dialog--naming {
  width: min(540px, 100%);
}

.photo-dialog {
  width: min(1040px, 100%);
  padding: 18px;
  border-radius: 24px;
}

.photo-dialog__media {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.photo-dialog__media img {
  width: 100%;
  max-height: 62vh;
  display: block;
  object-fit: contain;
  background: #020617;
}

.photo-dialog__actions {
  margin-top: 12px;
  justify-content: flex-start;
}

.photo-dialog__lookup {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    rgba(7, 12, 21, 0.84);
}

.photo-dialog__lookup[hidden] {
  display: none;
}

.photo-dialog__lookup-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.photo-dialog__lookup-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.photo-dialog__lookup-eyebrow {
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photo-dialog__lookup-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(214, 187, 24, 0.12);
  border: 1px solid rgba(214, 187, 24, 0.26);
  color: #f7e79a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.photo-dialog__lookup-status {
  margin: 0;
  color: rgba(226, 232, 240, 0.8);
  font-size: 13px;
  line-height: 1.5;
}

.photo-dialog__lookup-status[data-state="loading"] {
  color: #f7e79a;
}

.photo-dialog__lookup-status[data-state="error"] {
  color: #fca5a5;
}

.photo-dialog__lookup-status[data-state="success"] {
  color: #bbf7d0;
}

.photo-dialog__lookup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-dialog__lookup-actions[hidden] {
  display: none;
}

.photo-dialog__lookup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.photo-dialog__lookup-item {
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.photo-dialog__lookup-item small {
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photo-dialog__lookup-item strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.photo-dialog--lookup-advanced {
  width: min(1080px, 100%);
}

.photo-overlay--stacked {
  z-index: 64;
}

.photo-dialog__lookup--advanced-modal {
  margin-top: 0;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

.photo-dialog__lookup-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.photo-dialog__lookup-option {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.06), transparent 22%),
    rgba(255, 255, 255, 0.03);
}

.photo-dialog__lookup-option-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(214, 187, 24, 0.16);
  border: 1px solid rgba(214, 187, 24, 0.3);
  color: #f7e79a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photo-dialog__lookup-option strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.photo-dialog__lookup-option span {
  color: rgba(226, 232, 240, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

.photo-dialog__lookup-option-highlights {
  margin: 0;
  padding-left: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  color: rgba(226, 232, 240, 0.8);
  font-size: 12px;
  line-height: 1.5;
}

.photo-dialog__lookup-option-highlights li {
  margin: 0;
}

.photo-dialog__lookup-option-price {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(214, 187, 24, 0.12);
  border: 1px solid rgba(214, 187, 24, 0.28);
  color: #f7e79a !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.photo-library-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.photo-library-summary__card {
  display: grid;
  min-height: 118px;
  gap: 8px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.96), rgba(5, 9, 17, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 16px 28px rgba(2, 6, 23, 0.14);
}

.photo-library-summary__card small {
  color: rgba(148, 163, 184, 0.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.photo-library-summary__card strong {
  color: #f8fafc;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.photo-library-summary__card span {
  color: rgba(191, 219, 254, 0.72);
  font-size: 12px;
  line-height: 1.5;
}

.photo-library-filters {
  gap: 16px;
}

.photo-library-filters .panel-header {
  margin-bottom: 2px;
}

.photo-library-filters .filters-grid {
  margin-top: 2px;
}

.photo-gallery-panel .panel-header {
  margin-bottom: 18px;
}

.photo-gallery-panel__actions {
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
}

@media (max-width: 760px) {
  .photo-library-summary {
    grid-template-columns: 1fr;
  }

  .photo-library-summary__card {
    min-height: 0;
    padding: 16px;
  }

  .photo-library-filters {
    gap: 14px;
  }

  .photo-library-filters .filters-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .photo-library-filters .button-row {
    width: 100%;
    justify-content: flex-start;
  }

  .photo-gallery-panel__actions {
    justify-content: flex-start;
  }

  .photo-gallery-panel__actions > * {
    flex: 1 1 220px;
  }

  .photo-dialog__actions {
    flex-wrap: wrap;
  }

  .photo-dialog__lookup-grid {
    grid-template-columns: 1fr;
  }

  .photo-dialog__lookup-actions > * {
    flex: 1 1 220px;
  }
}

@media (max-width: 560px) {
  .photo-dialog {
    padding: 14px;
    border-radius: 20px;
  }

  .photo-dialog__media img {
    max-height: 52vh;
  }

  .photo-dialog__lookup {
    padding: 14px;
  }

  .photo-dialog--lookup-advanced {
    padding: 14px;
  }

  .photo-dialog__lookup--advanced-modal {
    max-height: calc(100vh - 150px);
  }

  .photo-dialog__lookup-options {
    grid-template-columns: 1fr;
  }

  .photo-dialog__lookup-option-highlights {
    grid-template-columns: 1fr;
  }

  .photo-dialog__lookup-head {
    flex-direction: column;
    align-items: stretch;
  }

  .photo-dialog__actions {
    width: 100%;
  }

  .photo-dialog__actions > * {
    flex: 1 1 100%;
  }

  .photo-library-summary__card strong {
    font-size: 20px;
  }

  .photo-library-summary__card span {
    font-size: 11px;
  }

  .photo-gallery-panel__actions {
    width: 100%;
  }

  .photo-gallery-panel__actions > * {
    flex: 1 1 100%;
  }
}

@media (max-width: 980px) {
  .photo-library-summary__card {
    min-height: 0;
    padding: 16px;
    border-radius: 18px;
  }

  .photo-gallery-panel .panel-header {
    margin-bottom: 14px;
  }

  .photo-gallery-panel__actions {
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .photo-dialog__media img {
    max-height: 46vh;
  }

  .photo-library-filters .button-row,
  .photo-gallery-panel__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .photo-library-filters .button-row > *,
  .photo-gallery-panel__actions > * {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 760px) {
  .photo-library-summary {
    gap: 10px;
  }

  .photo-library-summary__card {
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
  }

  .photo-library-summary__card small {
    font-size: 10px;
  }

  .photo-library-summary__card strong {
    font-size: 18px;
  }

  .photo-library-summary__card span {
    font-size: 11px;
    line-height: 1.4;
  }

  .photo-library-filters {
    gap: 10px;
  }

  .photo-gallery-panel .panel-header {
    margin-bottom: 10px;
  }

  .photo-gallery-panel__actions {
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .photo-library-summary__card {
    padding: 10px;
    border-radius: 14px;
  }

  .photo-library-summary__card strong {
    font-size: 16px;
  }
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 16px 28px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card--success {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 253, 244, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card--warning {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 251, 235, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card--info {
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card--neutral {
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card small {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-library-summary__card span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-eyebrow,
body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-item small {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-status {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-item {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.7);
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-option {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 24%),
    rgba(255, 255, 255, 0.82);
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-option strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-option span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-option-badge {
  background: rgba(214, 187, 24, 0.12);
  border-color: rgba(214, 187, 24, 0.24);
  color: #8a6a00;
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-option-highlights {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .photo-dialog__lookup-item strong {
  color: var(--ui-text-strong, #0f172a);
}


/* ---- public/styles/ui-investigation.css ---- */
/* Canonical investigative surfaces: history, review and diagnostics */

.anpr-review-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(9, 14, 25, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.anpr-review-card__visual {
  min-height: 220px;
  background: #0f172a;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.anpr-review-card__visual img,
.anpr-review-card__visual-empty {
  width: 100%;
  height: 100%;
  display: block;
}

.anpr-review-card__visual img {
  object-fit: cover;
}

.anpr-review-card__visual-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.anpr-review-card__copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.anpr-review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.anpr-review-card__head h3 {
  margin: 4px 0 6px;
  font-size: 28px;
  line-height: 1.05;
}

.anpr-review-card__head p,
.anpr-review-card__eyebrow {
  margin: 0;
}

.anpr-review-card__eyebrow {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.anpr-review-card__head p {
  color: var(--muted);
}

.anpr-review-card__badges,
.anpr-review-card__facts,
.history-plate-chip-row,
.history-timeline__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.anpr-review-card__facts span,
.history-timeline__facts span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #d7e6f7;
  font-size: 12px;
  line-height: 1.35;
}

.anpr-review-form {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 12px;
}

.anpr-review-form .button-row {
  grid-column: 1 / -1;
}

.history-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.history-photo-card {
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 12px 24px rgba(2, 6, 23, 0.14);
}

.history-photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  background: #020617;
  transform: scale(1.04);
  transform-origin: center center;
}

.history-photo-card span {
  font-size: 12px;
  color: var(--muted);
  padding-inline: 2px;
}

.history-timeline {
  display: grid;
  gap: 12px;
}

.presence-list {
  display: grid;
  gap: 12px;
}

.presence-reset-row,
.exports-quick-range-row {
  margin-top: 16px;
}

.history-timeline__item {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(9, 14, 25, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.history-timeline__thumb {
  width: 144px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  object-fit: cover;
  object-position: center center;
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.history-timeline__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.history-timeline__copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.history-timeline__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.history-timeline__meta {
  color: var(--muted);
  font-size: 13px;
}

.history-timeline__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.presence-card--attention {
  border-color: rgba(245, 158, 11, 0.26);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08) inset;
}

.presence-card .history-timeline__thumb {
  min-height: 132px;
}

.presence-card .history-timeline__actions .button-row {
  justify-content: flex-end;
}

.diagnostic-log-card {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.04), transparent 28%),
    rgba(255, 255, 255, 0.028);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 16px 30px rgba(2, 6, 23, 0.14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.diagnostic-log-card[open] {
  border-color: rgba(214, 187, 24, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(214, 187, 24, 0.08),
    0 22px 36px rgba(2, 6, 23, 0.18);
}

.diagnostic-log-card__summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
}

.diagnostic-log-card__summary::-webkit-details-marker {
  display: none;
}

.diagnostic-log-card__summary-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.diagnostic-log-card__summary-main strong {
  font-size: 14px;
  line-height: 1.3;
}

.diagnostic-log-card__summary-main span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.diagnostic-log-card__summary-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.diagnostic-log-card__caret {
  color: #9fb0c7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagnostic-log-card[open] .diagnostic-log-card__caret {
  color: #f2de73;
}

.diagnostic-log-card__body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.diagnostic-log-card__meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.diagnostic-log-card__meta-grid .list-card {
  min-height: 0;
  padding: 12px 14px;
}

.diagnostic-log-card__actions {
  gap: 8px;
}

.diagnostic-log-card__raw {
  display: grid;
  gap: 8px;
}

.history-timeline__item:hover,
.anpr-review-card:hover,
.diagnostic-log-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 187, 24, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 22px 38px rgba(2, 6, 23, 0.2);
}

.history-timeline__actions .table-action-link,
.anpr-review-form .table-action-link,
.diagnostic-log-card__actions .table-action-link {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.diagnostic-log-card__raw > summary {
  cursor: pointer;
  color: #d7e2f1;
  font-size: 12px;
  font-weight: 800;
}

.diagnostic-log-card__raw .code-block.small-code {
  margin: 0;
}

.diagnostic-log-card__raw pre {
  max-height: 180px;
  overflow: auto;
}

@media (max-width: 900px) {
  .anpr-review-card,
  .history-timeline__item {
    grid-template-columns: 1fr;
  }

  .anpr-review-form {
    grid-template-columns: 1fr;
  }

  .history-timeline__thumb {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .anpr-review-card {
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  .anpr-review-card__visual {
    min-height: 220px;
    border-radius: 16px;
  }

  .anpr-review-card__head {
    flex-direction: column;
    align-items: stretch;
  }

  .anpr-review-card__head h3 {
    font-size: 24px;
  }

  .anpr-review-card__badges {
    justify-content: flex-start;
  }

  .anpr-review-form .button-row,
  .history-timeline__actions .button-row,
  .presence-card .history-timeline__actions .button-row {
    width: 100%;
    justify-content: flex-start;
  }

  .history-timeline__item {
    gap: 12px;
    padding: 13px;
    border-radius: 20px;
    align-items: start;
  }

  .history-timeline__thumb {
    max-width: none;
    aspect-ratio: 16 / 10;
  }

  .history-timeline__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .diagnostic-log-card__summary {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .diagnostic-log-card__summary-rail {
    justify-content: flex-start;
  }

  .diagnostic-log-card__body {
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .anpr-review-card {
    padding: 12px;
    border-radius: 18px;
  }

  .anpr-review-card__visual {
    min-height: 190px;
    border-radius: 14px;
  }

  .anpr-review-card__head h3 {
    font-size: 20px;
  }

  .anpr-review-card__facts span,
  .history-timeline__facts span {
    padding: 7px 9px;
    font-size: 11px;
  }

  .presence-reset-row,
  .exports-quick-range-row {
    margin-top: 12px;
  }

  .presence-reset-row,
  .presence-reset-row .button-row {
    width: 100%;
  }

  .presence-reset-row .button-row > *,
  .history-timeline__actions .button-row > *,
  .anpr-review-form .button-row > * {
    flex: 1 1 100%;
  }

  .history-timeline__item {
    padding: 12px;
    border-radius: 18px;
  }

  .history-timeline__meta {
    font-size: 12px;
    line-height: 1.5;
  }

  .diagnostic-log-card__summary,
  .diagnostic-log-card__body {
    padding-inline: 14px;
  }
}

body[data-theme-mode="light"][data-user-theme="true"] .anpr-review-card,
body[data-theme-mode="light"][data-user-theme="true"] .history-photo-card,
body[data-theme-mode="light"][data-user-theme="true"] .history-timeline__item,
body[data-theme-mode="light"][data-user-theme="true"] .diagnostic-log-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 16px 30px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .anpr-review-card__visual,
body[data-theme-mode="light"][data-user-theme="true"] .history-photo-card img,
body[data-theme-mode="light"][data-user-theme="true"] .history-timeline__thumb {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

body[data-theme-mode="light"][data-user-theme="true"] .anpr-review-card__visual-empty,
body[data-theme-mode="light"][data-user-theme="true"] .history-timeline__thumb--empty {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .anpr-review-card__head p,
body[data-theme-mode="light"][data-user-theme="true"] .anpr-review-card__eyebrow,
body[data-theme-mode="light"][data-user-theme="true"] .history-photo-card span,
body[data-theme-mode="light"][data-user-theme="true"] .history-timeline__meta {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .anpr-review-card__facts span,
body[data-theme-mode="light"][data-user-theme="true"] .history-timeline__facts span {
  background: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.1);
  color: var(--ui-text-strong, #0f172a);
}


/* ---- public/styles/ui-event-view.css ---- */
/* Canonical event detail view surfaces */

.event-view-hero {
  padding-bottom: 20px;
}

.event-view-hero__surface {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.1), transparent 26%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.1), transparent 34%),
    linear-gradient(160deg, rgba(8, 13, 24, 0.98), rgba(12, 18, 32, 0.95));
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.34);
}

.event-view-hero__copy {
  display: grid;
  align-content: start;
  gap: 14px;
}

.event-view-hero__copy h1 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.event-view-hero__copy p {
  margin: 0;
  max-width: 64ch;
  color: #c8d5e7;
  font-size: 14px;
  line-height: 1.7;
}

.event-view-hero__chips,
.event-view-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-view-hero__summary {
  display: grid;
  align-content: start;
}

.event-view-shell {
  display: grid;
  gap: 18px;
}

.event-view-main {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, 0.84fr);
  gap: 18px;
  align-items: start;
}

.event-view-stage-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(8, 13, 23, 0.98), rgba(3, 7, 14, 1));
  box-shadow: 0 22px 52px rgba(2, 6, 23, 0.32);
}

.event-view-stage-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.event-view-stage-card__eyebrow {
  color: rgba(214, 187, 24, 0.88);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-view-stage-card__head h2 {
  margin: 6px 0 0;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.event-view-stage-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.event-view-stage-card__media {
  appearance: none;
  width: 100%;
  min-height: 420px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  overflow: hidden;
  background: #01040a;
  display: block;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.event-view-stage-card__media:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.26);
}

.event-view-stage-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #02060d;
}

.event-view-stage-card__placeholder {
  min-height: 360px;
  border-radius: 22px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  place-items: center;
  padding: 26px;
  color: #95a9c5;
  text-align: center;
  line-height: 1.6;
}

.event-view-stage-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.event-view-stage-card__identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.event-view-stage-card__identity strong {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.event-view-stage-card__identity span {
  color: #b8c8dd;
  font-size: 13px;
  line-height: 1.6;
}

.event-view-stage-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-view-side,
.event-view-lower {
  display: grid;
  gap: 16px;
  align-content: start;
}

.event-view-lower {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-view-panel {
  border-color: rgba(148, 163, 184, 0.1);
}

.event-view-panel--lookup {
  border-color: rgba(214, 187, 24, 0.16);
  background:
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(12, 17, 27, 0.97), rgba(8, 12, 21, 0.99));
}

.event-view-panel--admin-context {
  border-color: rgba(56, 189, 248, 0.18);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.07), transparent 24%),
    linear-gradient(180deg, rgba(10, 17, 29, 0.97), rgba(7, 12, 21, 0.99));
}

.event-view-panel--exit {
  border-color: rgba(34, 197, 94, 0.18);
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(10, 18, 27, 0.97), rgba(7, 12, 21, 0.99));
}

.event-view-panel--passages {
  grid-column: 1 / -1;
  border-color: rgba(56, 189, 248, 0.2);
  background:
    linear-gradient(180deg, rgba(10, 17, 29, 0.98), rgba(6, 11, 20, 0.99));
}

.event-view-passages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
  gap: 12px;
  align-items: stretch;
  justify-content: start;
}

.event-view-passage-card {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(3, 7, 14, 0.78);
  display: grid;
  grid-template-rows: auto 1fr;
}

.event-view-passage-card__media,
.event-view-passage-card__placeholder {
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #02060d;
}

.event-view-passage-card__media {
  display: block;
  overflow: hidden;
}

.event-view-passage-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #02060d;
  transition: transform .18s ease;
}

.event-view-passage-card__media:hover img {
  transform: scale(1.025);
}

.event-view-passage-card__placeholder {
  display: grid;
  place-items: center;
  color: #8ea5c2;
  font-size: 13px;
}

.event-view-passage-card__body {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.event-view-passage-card__badges,
.event-view-passage-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-view-passage-card__body strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.event-view-passage-card__body span,
.event-view-passage-card__body p {
  margin: 0;
  color: #adc0d8;
  font-size: 12px;
  line-height: 1.55;
}

.event-view-passage-card__body p {
  color: #dbeafe;
}

.event-view-panel .panel-header {
  margin-bottom: 14px;
}

.event-view-panel__actions {
  margin-top: 14px;
}

.event-view-panel .panel-header h2 {
  margin-bottom: 4px;
}

.event-view-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.event-view-info-grid--hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-view-info-card {
  min-height: 96px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 24%),
    rgba(255, 255, 255, 0.025);
  display: grid;
  align-content: start;
  gap: 8px;
}

.event-view-info-card small {
  color: #8ea5c2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-view-info-card strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.event-view-admin {
  margin-top: 2px;
}

.event-view-exit {
  display: grid;
  gap: 14px;
}

.event-view-exit__media {
  display: block;
  min-height: 240px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: #02060d;
}

.event-view-exit__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #02060d;
}

.event-view-exit__placeholder {
  min-height: 180px;
  border-radius: 20px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: #95a9c5;
  line-height: 1.6;
}

.event-view-exit__content {
  display: grid;
  gap: 14px;
}

.event-view-exit__headline {
  display: grid;
  gap: 6px;
}

.event-view-exit__headline strong {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.event-view-exit__headline span {
  color: #b8c8dd;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .event-view-hero__surface,
  .event-view-main,
  .event-view-lower {
    grid-template-columns: 1fr;
  }

  .event-view-stage-card__media {
    min-height: 340px;
  }
}

@media (max-width: 760px) {
  .event-view-hero {
    padding-bottom: 16px;
  }

  .event-view-hero__surface {
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
  }

  .event-view-hero__copy {
    gap: 10px;
  }

  .event-view-hero__copy h1 {
    font-size: clamp(24px, 7vw, 34px);
  }

  .event-view-hero__copy p {
    font-size: 13px;
    line-height: 1.58;
  }

  .event-view-hero__chips,
  .event-view-hero__actions {
    gap: 8px;
  }

  .event-view-hero__actions > * {
    flex: 1 1 240px;
  }

  .event-view-shell {
    gap: 14px;
  }

  .event-view-stage-card__head {
    align-items: start;
  }

  .event-view-stage-card__badges,
  .event-view-stage-card__actions {
    justify-content: flex-start;
  }

  .event-view-stage-card {
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
  }

  .event-view-stage-card__head h2 {
    font-size: 20px;
  }

  .event-view-info-grid,
  .event-view-info-grid--hero {
    grid-template-columns: 1fr;
  }

  .event-view-stage-card__media {
    min-height: 260px;
  }

  .event-view-stage-card__placeholder {
    min-height: 240px;
  }

  .event-view-stage-card__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .event-view-stage-card__actions {
    width: 100%;
  }

  .event-view-stage-card__actions > * {
    flex: 1 1 220px;
  }

  .event-view-panel .panel-header {
    margin-bottom: 12px;
  }

  .event-view-panel__actions {
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .event-view-hero__surface {
    padding: 14px;
    border-radius: 20px;
  }

  .event-view-hero__copy h1 {
    font-size: 22px;
    line-height: 1;
  }

  .event-view-hero__actions > * {
    flex: 1 1 100%;
  }

  .event-view-stage-card {
    padding: 12px;
    border-radius: 20px;
  }

  .event-view-stage-card__head h2 {
    font-size: 18px;
  }

  .event-view-stage-card__media {
    min-height: 220px;
    border-radius: 18px;
  }

  .event-view-stage-card__placeholder {
    min-height: 200px;
    border-radius: 18px;
    padding: 18px;
  }

  .event-view-info-card {
    min-height: 0;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .event-view-info-card strong {
    font-size: 14px;
    line-height: 1.32;
  }

  .event-view-stage-card__identity strong {
    font-size: 16px;
  }

  .event-view-stage-card__identity span {
    font-size: 12px;
  }

  .event-view-passages {
    grid-template-columns: 1fr;
  }

  .event-view-passage-card {
    border-radius: 16px;
  }
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-hero__surface,
body[data-theme-mode="light"][data-user-theme="true"] .event-view-stage-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 20px 40px rgba(15, 23, 42, 0.1);
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-hero__copy p,
body[data-theme-mode="light"][data-user-theme="true"] .event-view-stage-card__identity span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-stage-card__media,
body[data-theme-mode="light"][data-user-theme="true"] .event-view-stage-card__media img {
  background: #f8fafc;
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-stage-card__placeholder {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-panel--lookup {
  border-color: rgba(245, 158, 11, 0.18);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 251, 235, 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-panel--admin-context {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.2);
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-panel--passages {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.82);
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card__media,
body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card__media img,
body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card__placeholder {
  background: #f8fafc;
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card__body strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card__body span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-passage-card__body p {
  color: #1d4ed8;
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-info-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.78);
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-info-card small {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .event-view-info-card strong {
  color: var(--ui-text-strong, #0f172a);
}


/* ---- public/styles/ui-tables.css ---- */
/* Canonical UI tables and list panels */

.table-wrap {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.92), rgba(7, 12, 21, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.14);
}

thead th {
  color: rgba(191, 219, 254, 0.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.table-action-link {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .01em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.list-card {
  padding: 14px 16px;
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 22%),
    linear-gradient(180deg, rgba(11, 17, 29, 0.86), rgba(8, 13, 22, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 26px rgba(2, 6, 23, 0.12);
}

.list-card strong {
  color: #f8fafc;
  letter-spacing: -.01em;
}

.list-card span {
  color: rgba(191, 219, 254, 0.68);
}

.list-card--account,
.list-card--camera {
  gap: 7px;
}

.list-card--account strong,
.list-card--camera strong {
  font-size: 14px;
  line-height: 1.25;
}

.diagnostic-log-card {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.04), transparent 28%),
    rgba(255, 255, 255, 0.028);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 16px 30px rgba(2, 6, 23, 0.14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.diagnostic-log-card[open] {
  border-color: rgba(214, 187, 24, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(214, 187, 24, 0.08),
    0 22px 36px rgba(2, 6, 23, 0.18);
}

.diagnostic-log-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 187, 24, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 22px 38px rgba(2, 6, 23, 0.2);
}

.diagnostic-log-card__actions .table-action-link {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.events-filter-panel .filters-grid {
  margin-top: 4px;
}

.events-stat-grid .stat-card {
  min-height: 124px;
}

.stat-card {
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 28%),
    linear-gradient(180deg, rgba(12, 18, 31, 0.94), rgba(8, 13, 24, 0.98));
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
  color: inherit;
}

.stat-card::before {
  background: linear-gradient(180deg, var(--brand), rgba(214, 187, 24, 0)) !important;
  opacity: .9;
}

.stat-label {
  color: var(--muted);
}

.stat-note {
  color: var(--muted);
}

.events-results-panel .panel-header {
  margin-bottom: 18px;
}

.events-results-panel .button-row {
  row-gap: 10px;
  column-gap: 10px;
}

.events-results-panel .table-wrap {
  margin-top: 2px;
}

.events-results-panel td strong {
  font-size: 14px;
  line-height: 1.35;
}

.events-results-panel .table-subtext {
  line-height: 1.5;
}

@media (max-width: 760px) {
  .table-wrap {
    border-radius: 16px;
  }

  .list-card {
    padding: 12px 13px;
    border-radius: 16px;
  }

  .events-filter-panel .filters-actions,
  .events-results-panel .panel-header.between .button-row {
    width: 100%;
    justify-content: flex-start;
  }

  .events-results-panel .button-row > * {
    flex: 1 1 100%;
  }
}

@media (max-width: 560px) {
  .table-action-link {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .diagnostic-log-card__actions.button-row,
  .events-results-panel .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .events-stat-grid .stat-card {
    min-height: 0;
  }

  .events-results-panel td strong {
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .table-wrap {
    border-radius: 14px;
  }

  .list-card {
    padding: 10px 11px;
    border-radius: 14px;
  }

  .list-card--account,
  .list-card--camera {
    gap: 5px;
  }

  .list-card--account strong,
  .list-card--camera strong {
    font-size: 13px;
  }

  .table-action-link {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .events-results-panel .panel-header {
    margin-bottom: 10px;
  }
}

body[data-theme-mode="light"][data-user-theme="true"] .table-wrap {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.05), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow: var(--ui-surface-card-shadow, 0 18px 32px rgba(15, 23, 42, 0.08));
}

body[data-theme-mode="light"][data-user-theme="true"] thead th {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .list-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: var(--ui-surface-soft-bg, rgba(255, 255, 255, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    0 12px 24px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .list-card strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .list-card span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-card--neutral {
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-card--info {
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-card--success {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 253, 244, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-card--warning {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 251, 235, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-card::before {
  opacity: 0.42;
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-value,
body[data-theme-mode="light"][data-user-theme="true"] .stat-card strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .stat-label,
body[data-theme-mode="light"][data-user-theme="true"] .stat-note {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}


/* ---- public/styles/ui-cards.css ---- */
/* Canonical UI content cards */

.photo-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

.dashboard-priority-card,
.dashboard-revamp .panel {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.photo-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #020617;
  isolation: isolate;
  position: relative;
}

.photo-card__media-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #04070d;
  line-height: 0;
  font-size: 0;
  vertical-align: top;
  position: relative;
  cursor: zoom-in;
}

.photo-card__media img {
  display: block;
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  margin: 0;
  vertical-align: top;
  object-fit: cover;
  object-position: center center;
  background: #020617;
  transform: translateZ(0) scale(1.06);
  transform-origin: center center;
  transition: transform .24s ease;
  backface-visibility: hidden;
}

.photo-card__media--empty {
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 18px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(15, 23, 42, 0.88)),
    repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 12px);
  border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}

.photo-card__media--empty span {
  color: rgba(253, 230, 138, 0.95);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.photo-card__media--empty strong {
  color: #f8fafc;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.12;
}

.photo-card__media--empty small {
  color: rgba(226, 232, 240, 0.74);
  font-size: 12px;
  line-height: 1.45;
}

.photo-card:hover .photo-card__media img {
  transform: translateZ(0) scale(1.08);
}

.photo-card__body {
  position: relative;
  margin-top: -2px;
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 24%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.98), rgba(5, 10, 18, 0.98));
}

.photo-card.surface-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 34px rgba(2, 6, 23, 0.2);
}

.photo-card__title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.photo-card__subtitle {
  color: rgba(191, 219, 254, 0.76);
  font-size: 12px;
  line-height: 1.5;
}

.photo-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.photo-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.photo-card__chip--kind {
  border-color: rgba(214, 187, 24, 0.26);
  background: rgba(214, 187, 24, 0.12);
  color: #f8e58d;
}

.photo-card__chip--status {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(30, 64, 175, 0.18);
  color: #bfdbfe;
}

.photo-card__chip--success,
.photo-card__chip--entry {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(6, 95, 70, 0.22);
  color: #d1fae5;
}

.photo-card__chip--warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(120, 53, 15, 0.22);
  color: #fde68a;
}

.photo-card__chip--danger,
.photo-card__chip--exit {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

.photo-card__chip--lane {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.74);
  color: rgba(226, 232, 240, 0.9);
}

.photo-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.photo-card__fact {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015)),
    rgba(15, 23, 42, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.photo-card__fact small {
  color: rgba(148, 163, 184, 0.78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.photo-card__fact span {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.photo-card__actions {
  gap: 8px;
}

.photo-card__actions--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
}

.photo-card__action {
  width: 100%;
  min-height: 38px;
  border-radius: 13px;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.photo-card__action--primary {
  border-color: rgba(56, 189, 248, 0.26);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(14, 116, 144, 0.18)),
    rgba(15, 23, 42, 0.82);
  color: #d6f4ff;
}

.photo-card__action--primary:hover {
  border-color: rgba(56, 189, 248, 0.42);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.28), rgba(14, 116, 144, 0.22)),
    rgba(15, 23, 42, 0.9);
}

.photo-card__action--secondary {
  border-color: rgba(214, 187, 24, 0.26);
  background: rgba(214, 187, 24, 0.1);
  color: #f6e588;
}

.photo-card__action--secondary:hover {
  border-color: rgba(214, 187, 24, 0.42);
  background: rgba(214, 187, 24, 0.16);
}

.photo-card .button-row {
  margin-top: auto;
}

@media (max-width: 560px) {
  .photo-card__title {
    font-size: 18px;
  }

  .photo-card__facts {
    grid-template-columns: 1fr;
  }

  .photo-card__chip {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .photo-card__media {
    aspect-ratio: 16 / 9;
  }

  .photo-card__body {
    gap: 8px;
    padding: 10px 11px 11px;
  }

  .photo-card__title {
    font-size: 16px;
  }

  .photo-card__subtitle {
    font-size: 11px;
    line-height: 1.4;
  }

  .photo-card__chips {
    gap: 6px;
  }

  .photo-card__chip {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .photo-card__facts {
    gap: 6px;
  }

  .photo-card__fact {
    padding: 7px 8px;
    border-radius: 12px;
  }

  .photo-card__fact span {
    font-size: 11px;
  }

  .photo-card__action {
    min-height: 34px;
    border-radius: 11px;
    font-size: 10px;
  }
}

@media (max-width: 560px) {
  .photo-card__media {
    aspect-ratio: 16 / 8.8;
  }

  .photo-card__body {
    gap: 7px;
    padding: 9px 10px 10px;
  }

  .photo-card__title {
    font-size: 15px;
  }

  .photo-card__fact small {
    font-size: 8px;
  }

  .photo-card__fact span {
    font-size: 10px;
  }
}

.anpr-review-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(9, 14, 25, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.anpr-review-card__visual {
  min-height: 220px;
  background: #0f172a;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.anpr-review-card:hover,
.history-timeline__item:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 187, 24, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 22px 38px rgba(2, 6, 23, 0.2);
}

.history-timeline__item {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(9, 14, 25, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.history-timeline__thumb {
  width: 144px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  object-fit: cover;
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.history-timeline__actions .table-action-link,
.anpr-review-form .table-action-link {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.badge-success {
  color: var(--ui-success-text, #bbf7d0);
  background: var(--ui-success-bg, rgba(20, 83, 45, 0.18));
  border-color: var(--ui-success-border, rgba(34, 197, 94, 0.34));
}

.badge-warning {
  color: var(--ui-warning-text, #fde68a);
  background: var(--ui-warning-bg, rgba(120, 53, 15, 0.22));
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.36));
}

.badge-danger {
  color: var(--ui-danger-text, #fecaca);
  background: var(--ui-danger-bg, rgba(127, 29, 29, 0.22));
  border-color: var(--ui-danger-border, rgba(239, 68, 68, 0.36));
}

.badge-default {
  color: var(--ui-info-text, #bae6fd);
  background: var(--ui-info-bg, rgba(56, 189, 248, 0.14));
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.28));
}

.alert {
  color: var(--ui-text-strong, inherit);
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-soft-bg);
}

.alert-danger {
  color: var(--ui-danger-text, #fecaca);
  border-color: var(--ui-danger-border, rgba(239, 68, 68, 0.28));
  background: var(--ui-danger-bg, rgba(127, 29, 29, 0.18));
}

.alert-success {
  color: var(--ui-success-text, #bbf7d0);
  border-color: var(--ui-success-border, rgba(34, 197, 94, 0.28));
  background: var(--ui-success-bg, rgba(20, 83, 45, 0.18));
}

.dashboard-command-card,
.dashboard-reading-card,
.dashboard-priority-card,
.dashboard-revamp .dashboard-priority-card {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  box-shadow: var(--ui-surface-card-shadow);
  color: var(--ui-text-strong, inherit);
}

.dashboard-command-card {
  background: var(--ui-surface-shell-bg);
}

.dashboard-reading-card,
.dashboard-priority-card,
.dashboard-revamp .dashboard-priority-card {
  background: var(--ui-surface-card-bg);
}

.dashboard-command-card__eyebrow,
.dashboard-reading-card__eyebrow {
  color: var(--ui-accent-text, rgba(56, 189, 248, 0.98));
}

.dashboard-command-card__lede,
.dashboard-command-card__summary,
.dashboard-command-card__feature span,
.dashboard-command-card__stat small,
.dashboard-reading-card__meta,
.dashboard-reading-card__name,
.dashboard-reading-card__account span,
.dashboard-reading-card__account small,
.dashboard-reading-card__metric small,
.dashboard-priority-card__note {
  color: var(--ui-text-muted, rgba(191, 219, 254, 0.72));
}

.dashboard-command-card__stat span,
.dashboard-reading-card__metric span,
.dashboard-priority-card__label,
.dashboard-photo-fact span {
  color: var(--ui-text-subtle, rgba(148, 163, 184, 0.84));
}

.dashboard-command-card__stat,
.dashboard-command-card__feature,
.dashboard-reading-card__account,
.dashboard-reading-card__metric,
.dashboard-photo-fact {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-soft-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.dashboard-command-card__stat:hover,
.dashboard-reading-card__account:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  box-shadow: var(--ui-surface-card-shadow);
}

.dashboard-reading-card__media {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.14));
  background: var(--ui-surface-media-bg, #04070d);
}

.dashboard-reading-card__media:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  box-shadow: var(--ui-surface-card-shadow);
}

.dashboard-reading-card__media:focus-visible,
.dashboard-priority-card__action:focus-visible {
  outline-color: var(--ui-focus-outline, rgba(56, 189, 248, 0.34));
}

.dashboard-reading-card__placeholder {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.18));
  background: var(--ui-surface-soft-bg);
  color: var(--ui-text-muted, rgba(148, 163, 184, 0.84));
}

.dashboard-revamp {
  display: grid;
  gap: 16px;
}

.dashboard-revamp__section {
  min-width: 0;
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.92fr);
  gap: 16px;
  align-items: stretch;
}

.dashboard-command-card,
.dashboard-reading-card,
.dashboard-revamp .panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
}

.dashboard-command-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.dashboard-command-card__copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.dashboard-command-card__copy h1,
.dashboard-revamp .panel-header h2 {
  margin: 0;
}

.dashboard-command-card__lede,
.dashboard-command-card__summary {
  margin: 0;
}

.dashboard-command-card__lede {
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-command-card__summary {
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-command-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-command-card__stat,
.dashboard-command-card__feature,
.dashboard-reading-card__account,
.dashboard-reading-card__metric,
.dashboard-photo-fact,
.dashboard-action-card {
  min-width: 0;
}

.dashboard-command-card__stat,
.dashboard-command-card__feature,
.dashboard-reading-card__metric,
.dashboard-reading-card__account {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
}

.dashboard-command-card__stat strong,
.dashboard-command-card__feature strong,
.dashboard-reading-card__metric strong,
.dashboard-action-card strong {
  font-size: 16px;
}

.dashboard-command-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-command-card__actions .btn {
  min-width: 0;
}

.dashboard-command-card__featuregrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.dashboard-command-card__feature--compact span {
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-reading-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.dashboard-reading-card__meta,
.dashboard-reading-card__name {
  margin: 0;
}

.dashboard-reading-card__plate {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.dashboard-reading-card__media,
.dashboard-reading-card__placeholder {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 260px;
  aspect-ratio: 16 / 8.5;
  border-width: 1px;
  border-style: solid;
  border-radius: 22px;
  overflow: hidden;
}

.dashboard-reading-card__placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.dashboard-reading-card__metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-reading-card__portfolio {
  display: grid;
  gap: 10px;
}

.dashboard-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-action-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ui-surface-card-border, rgba(148, 163, 184, 0.14));
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 34%),
    var(--ui-surface-card-bg);
  box-shadow: var(--ui-surface-card-shadow);
}

.dashboard-action-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-accent-text, rgba(56, 189, 248, 0.98));
}

.dashboard-action-card strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--ui-text-strong, #f8fafc);
}

.dashboard-action-card p,
.dashboard-action-card__meta {
  margin: 0;
  color: var(--ui-text-muted, rgba(191, 219, 254, 0.72));
}

.dashboard-action-card p {
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-action-card__meta {
  font-size: 11px;
}

.dashboard-action-card .table-action-link {
  justify-self: flex-start;
}

.dashboard-pulse {
  display: grid;
  gap: 12px;
}

.dashboard-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-pulse-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ui-surface-card-border, rgba(148, 163, 184, 0.14));
  border-radius: 16px;
  background: var(--ui-surface-soft-bg);
}

.dashboard-pulse-card span {
  font-size: 11px;
  color: var(--ui-text-subtle, rgba(148, 163, 184, 0.84));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dashboard-pulse-card strong {
  font-size: 20px;
  line-height: 1;
  color: var(--ui-text-strong, #f8fafc);
}

.dashboard-pulse-card small {
  color: var(--ui-text-muted, rgba(191, 219, 254, 0.72));
  line-height: 1.4;
}

.dashboard-pulse-card[data-tone="info"] {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.24));
}

.dashboard-pulse-card[data-tone="warning"] {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.24));
}

.dashboard-pulse-card[data-tone="success"] {
  border-color: var(--ui-success-border, rgba(34, 197, 94, 0.24));
}

.dashboard-action-card[data-tone="success"] {
  border-color: var(--ui-success-border, rgba(34, 197, 94, 0.26));
}

.dashboard-action-card[data-tone="warning"] {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.24));
}

.dashboard-action-card[data-tone="info"] {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.24));
}

.dashboard-priority-card__action:hover {
  color: var(--ui-accent-text, var(--accent));
}

.dashboard-photo-fact strong {
  color: var(--ui-text-strong, #f8fafc);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card h1,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__stat strong,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__feature strong,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__plate,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__metric strong,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-priority-card__value,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-revamp .panel-header h2,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill-copy strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__lede,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__summary,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__feature span,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__stat small,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__meta,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__name,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__account span,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__account small,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__metric small,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-priority-card__note,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-revamp .panel-header p,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill-copy small {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__eyebrow,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__eyebrow {
  color: var(--ui-accent-text, rgba(214, 187, 24, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.93));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 16px 30px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline[data-weather-state="raining"] {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.24));
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.1), transparent 26%),
    linear-gradient(145deg, rgba(255, 250, 240, 0.99), rgba(255, 255, 255, 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__eyebrow {
  color: var(--ui-accent-text, rgba(214, 187, 24, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__title {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__meta,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__updated,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__detail {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__fact {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__fact span {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__fact strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__progress {
  background: rgba(148, 163, 184, 0.16);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__progress span {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.92), rgba(214, 187, 24, 0.82));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background: rgba(255, 255, 255, 0.82);
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.26));
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill.is-active {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.26);
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.12), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill.is-raining {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.24));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__icon--moon::after {
  background: rgba(255, 255, 255, 0.95);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__icon--cloud-night span {
  box-shadow: -4px 3px 0 rgba(255, 255, 255, 0.92);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__stat span,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-reading-card__metric span,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-priority-card__label,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-photo-fact span,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-weather-inline__pill-copy span {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__actions .btn-outline,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-priority-card__action {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-command-card__actions .btn-outline:hover,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-priority-card__action:hover {
  background: var(--ui-surface-soft-bg-strong);
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-action-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 16px 30px rgba(15, 23, 42, 0.07);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-action-card strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-action-card p,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-action-card__meta {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-action-card__eyebrow {
  color: var(--ui-accent-text, rgba(214, 187, 24, 0.96));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-pulse-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background: rgba(255, 255, 255, 0.94);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-pulse-card span {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-pulse-card strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-pulse-card small {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-revamp .panel,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__item,
body[data-theme-mode="light"][data-user-theme="true"] .health-item,
body[data-theme-mode="light"][data-user-theme="true"] .attention-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.05), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 16px 30px rgba(15, 23, 42, 0.07);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed--attention .dashboard-client-feed__item {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.26));
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__item:hover,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__item--attention:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__item strong,
body[data-theme-mode="light"][data-user-theme="true"] .health-item__title,
body[data-theme-mode="light"][data-user-theme="true"] .attention-card__head strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__item span,
body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__item small,
body[data-theme-mode="light"][data-user-theme="true"] .health-item__meta,
body[data-theme-mode="light"][data-user-theme="true"] .attention-card__meta,
body[data-theme-mode="light"][data-user-theme="true"] .attention-card__hint {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__actions {
  border-top-color: var(--ui-surface-card-divider, rgba(15, 23, 42, 0.08));
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__metric,
body[data-theme-mode="light"][data-user-theme="true"] .health-item__facts span {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background: rgba(255, 255, 255, 0.92);
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__metric--muted {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.62));
  background: rgba(241, 245, 249, 0.96);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__metric--ok {
  border-color: var(--ui-success-border, rgba(34, 197, 94, 0.24));
  background: var(--ui-success-bg, rgba(34, 197, 94, 0.12));
  color: var(--ui-success-text, #166534);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__metric--info {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.24));
  background: var(--ui-info-bg, rgba(56, 189, 248, 0.12));
  color: var(--ui-info-text, #0f4c81);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__metric--warning {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.26));
  background: var(--ui-warning-bg, rgba(245, 158, 11, 0.14));
  color: var(--ui-warning-text, #92400e);
}

body[data-theme-mode="light"][data-user-theme="true"] .dashboard-client-feed__metric--danger {
  border-color: var(--ui-danger-border, rgba(239, 68, 68, 0.24));
  background: var(--ui-danger-bg, rgba(239, 68, 68, 0.12));
  color: var(--ui-danger-text, #b91c1c);
}

body[data-theme-mode="light"][data-user-theme="true"] .health-item__facts {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.7));
}

body[data-theme-mode="light"][data-user-theme="true"] .health-issue {
  background: rgba(255, 255, 255, 0.92);
}

.photo-card.surface-card,
.anpr-review-card,
.history-timeline__item {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background: var(--ui-surface-card-bg);
  box-shadow: var(--ui-surface-card-shadow);
  color: var(--ui-text-strong, inherit);
}

.photo-card__body,
.photo-card__fact {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.1));
  background: var(--ui-surface-soft-bg);
}

.photo-card__subtitle,
.photo-card__fact small {
  color: var(--ui-text-muted, rgba(191, 219, 254, 0.76));
}

.photo-card__fact span {
  color: var(--ui-text-strong, #f8fafc);
}

.photo-card__chip {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.18));
  background: var(--ui-surface-soft-bg);
  color: var(--ui-text-strong, #dbeafe);
}

.photo-card__chip--kind,
.photo-card__chip--status {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.26));
  background: var(--ui-info-bg, rgba(30, 64, 175, 0.18));
  color: var(--ui-info-text, #bfdbfe);
}

.photo-card__chip--success,
.photo-card__chip--entry {
  border-color: var(--ui-success-border, rgba(52, 211, 153, 0.28));
  background: var(--ui-success-bg, rgba(6, 95, 70, 0.22));
  color: var(--ui-success-text, #d1fae5);
}

.photo-card__chip--warning {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.3));
  background: var(--ui-warning-bg, rgba(120, 53, 15, 0.22));
  color: var(--ui-warning-text, #fde68a);
}

.photo-card__chip--danger,
.photo-card__chip--exit {
  border-color: var(--ui-danger-border, rgba(248, 113, 113, 0.3));
  background: var(--ui-danger-bg, rgba(127, 29, 29, 0.22));
  color: var(--ui-danger-text, #fecaca);
}

.photo-card__action--primary {
  border-color: var(--ui-info-border, rgba(56, 189, 248, 0.26));
  background: var(--ui-info-bg, rgba(15, 23, 42, 0.82));
  color: var(--ui-info-text, #d6f4ff);
}

.photo-card__action--primary:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.42));
  background: var(--ui-accent-panel-bg);
}

.photo-card__action--secondary {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.22));
  background: var(--ui-surface-soft-bg);
  color: var(--ui-text-strong, #f6e588);
}

.photo-card__action--secondary:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.42));
  background: var(--ui-surface-soft-bg-strong);
}

.anpr-review-card__visual,
.history-timeline__thumb {
  background: var(--ui-surface-media-bg, #0f172a);
}

.anpr-review-card:hover,
.history-timeline__item:hover {
  border-color: var(--ui-surface-card-border-strong, rgba(56, 189, 248, 0.28));
  box-shadow: var(--ui-surface-card-shadow-strong);
}

@media (max-width: 900px) {
  .dashboard-priority-card,
  .photo-card {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
}

@media (max-width: 760px) {
  body.role-client .dashboard-pulse-grid,
  body.role-admin .dashboard-pulse-grid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-action-grid,
  body.role-admin .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.role-client .dashboard-command-grid,
  body.role-admin .dashboard-command-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-priority-card,
  body.role-client .dashboard-revamp .panel,
  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-priority-card,
  body.role-admin .dashboard-revamp .panel {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  body.role-client .dashboard-command-card__top,
  body.role-admin .dashboard-command-card__top {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__actions .btn,
  body.role-admin .dashboard-command-card__actions .btn {
    width: 100% !important;
  }

  body.role-client .dashboard-command-card__stats,
  body.role-admin .dashboard-command-card__stats,
  body.role-client .dashboard-reading-card__metric-grid,
  body.role-admin .dashboard-reading-card__metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__featuregrid,
  body.role-admin .dashboard-command-card__featuregrid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-reading-card__head,
  body.role-admin .dashboard-reading-card__head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder,
  body.role-admin .dashboard-reading-card__media,
  body.role-admin .dashboard-reading-card__placeholder {
    min-height: 196px !important;
    max-height: 256px !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.role-client .dashboard-command-card__stat,
  body.role-client .dashboard-command-card__feature,
  body.role-client .dashboard-reading-card__metric,
  body.role-admin .dashboard-command-card__stat,
  body.role-admin .dashboard-command-card__feature,
  body.role-admin .dashboard-reading-card__metric {
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  body.role-client .dashboard-command-card__summary,
  body.role-admin .dashboard-command-card__summary {
    display: none !important;
  }

  body.role-client .dashboard-command-card__lede,
  body.role-client .dashboard-reading-card__meta,
  body.role-client .dashboard-reading-card__name,
  body.role-admin .dashboard-command-card__lede,
  body.role-admin .dashboard-reading-card__meta,
  body.role-admin .dashboard-reading-card__name {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 560px) {
  body.role-client .dashboard-action-grid,
  body.role-admin .dashboard-action-grid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-action-card,
  body.role-admin .dashboard-action-card {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.role-client .dashboard-command-card,
  body.role-client .dashboard-reading-card,
  body.role-client .dashboard-priority-card,
  body.role-client .dashboard-revamp .panel,
  body.role-admin .dashboard-command-card,
  body.role-admin .dashboard-reading-card,
  body.role-admin .dashboard-priority-card,
  body.role-admin .dashboard-revamp .panel {
    padding: 10px !important;
    border-radius: 16px !important;
    gap: 8px !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions,
  body.role-client .dashboard-command-card__stats,
  body.role-client .dashboard-command-card__featuregrid,
  body.role-client .dashboard-reading-card__metric-grid,
  body.role-admin .dashboard-command-card__stats,
  body.role-admin .dashboard-command-card__featuregrid,
  body.role-admin .dashboard-reading-card__metric-grid {
    grid-template-columns: 1fr !important;
  }

  body.role-client .dashboard-reading-card__media,
  body.role-client .dashboard-reading-card__placeholder,
  body.role-admin .dashboard-reading-card__media,
  body.role-admin .dashboard-reading-card__placeholder {
    min-height: 164px !important;
    max-height: 208px !important;
  }

  body.role-client .dashboard-reading-card__plate,
  body.role-admin .dashboard-reading-card__plate {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body.role-client .dashboard-priority-card__value,
  body.role-client .dashboard-priority-card__action,
  body.role-admin .dashboard-priority-card__value,
  body.role-admin .dashboard-priority-card__action {
    font-size: 18px !important;
  }
}

@media (max-width: 1360px) {
  body.role-client .dashboard-command-grid,
  body.role-admin .dashboard-command-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.role-client .dashboard-command-card__top,
  body.role-admin .dashboard-command-card__top {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.role-client .dashboard-overview-grid,
  body.role-admin .dashboard-overview-grid,
  body.role-client .dashboard-action-grid,
  body.role-admin .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.role-client .dashboard-command-card__actions,
  body.role-admin .dashboard-command-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.role-client .dashboard-command-card__actions .btn,
  body.role-admin .dashboard-command-card__actions .btn {
    width: 100%;
    min-width: 0;
  }
}


/* ---- public/styles/ui-account.css ---- */
/* Canonical login, account and profile surfaces */

.login-body {
  min-height: 100svh;
  margin: 0;
  padding: clamp(42px, 7vh, 92px) 18px 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.16), transparent 22%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 18%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.12), transparent 24%),
    linear-gradient(180deg, #0b1220, #111827);
}

.login-shell {
  width: min(640px, 100%);
}

.login-grid {
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}

.login-panel {
  padding: 42px 40px 38px;
}

.login-panel--compact {
  display: grid;
  gap: 20px;
}

.login-panel--compact .form-stack {
  margin-top: 0;
}

.login-panel--compact .btn {
  width: 100%;
  justify-content: center;
}

.login-brand-lockup {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.login-brand-copy {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.login-brand-lockup .hero-logo {
  width: min(100%, 312px);
  margin-bottom: 8px;
}

.login-brand-copy h1 {
  margin: 0;
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.login-brand-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.login-support-note {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 4px;
}

.login-support-note strong {
  font-size: 14px;
}

.login-support-note span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.login-socials {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.login-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(241, 245, 249, 0.9);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.login-social-link__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.login-social-link__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.login-social-link:hover {
  border-color: rgba(214, 187, 24, 0.3);
  background: rgba(214, 187, 24, 0.1);
  transform: translateY(-1px);
}

.login-social-link:focus-visible {
  outline: 2px solid rgba(214, 187, 24, 0.55);
  outline-offset: 2px;
}

.company-overview__stats,
.profile-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.company-stat-card,
.profile-stat-chip {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.98));
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 6px;
}

.company-stat-card strong,
.profile-stat-chip strong {
  font-size: 20px;
  line-height: 1.1;
}

.company-stat-card span,
.profile-stat-chip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.profile-card {
  padding: 16px;
}

.profile-name {
  font-size: 16px;
  font-weight: 900;
}

.profile-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-hero__avatar {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(214, 187, 24, 0.94), rgba(56, 189, 248, 0.72));
  color: #08111e;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  overflow: hidden;
}

.profile-hero__name {
  font-size: 16px;
  font-weight: 900;
}

.profile-hero__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.profile-panel-actions {
  margin-top: 18px;
}

.profile-overview,
.company-overview {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.profile-overview__hero,
.company-overview__hero {
  display: grid;
  gap: 14px;
}

.profile-overview__hero {
  border-radius: 24px;
}

.profile-hero--large {
  padding: 18px;
  gap: 16px;
}

.profile-hero--large .profile-hero__avatar {
  width: 72px;
  height: 72px;
}

.profile-stat-chip {
  min-width: 0;
}

.company-overview__brand {
  display: grid;
  grid-template-columns: minmax(108px, 172px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.company-overview__logo {
  min-height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.98));
  overflow: hidden;
}

.company-overview__logo .logo-preview {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.company-overview__logo-empty {
  color: var(--brand);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .08em;
}

.company-overview__copy {
  display: grid;
  gap: 10px;
}

.company-overview__eyebrow {
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.company-overview__copy h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.company-overview__copy p {
  margin: 0;
  color: rgba(191, 219, 254, 0.7);
  font-size: 14px;
  line-height: 1.66;
}

.company-overview--premium .company-overview__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1180px) {
  .login-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .company-overview__stats,
  .profile-stat-strip {
    grid-template-columns: 1fr;
  }

  .profile-hero,
  .company-overview__brand {
    grid-template-columns: 1fr;
  }

  .company-overview__logo {
    min-height: 140px;
  }
}

@media (max-width: 680px) {
  .profile-hero,
  .company-overview__hero {
    grid-template-columns: 1fr;
  }

  .profile-hero--large .profile-hero__avatar,
  .company-overview__logo {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .company-overview__stats,
  .profile-stat-strip {
    grid-template-columns: 1fr 1fr;
  }

  .login-body {
    padding: 16px;
  }

  .login-shell {
    width: 100%;
  }

  .login-panel {
    padding: 22px;
  }

  .login-brand-copy h1 {
    font-size: 30px;
  }

  .login-brand-lockup .hero-logo {
    width: min(100%, 187px);
  }

  .company-overview__copy h2 {
    font-size: 24px;
  }

  .profile-hero--large .profile-hero__avatar {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 560px) {
  .company-overview__stats,
  .profile-stat-strip {
    grid-template-columns: 1fr;
  }

  .login-panel {
    padding: 18px;
  }

  .login-brand-copy h1 {
    font-size: 28px;
  }

  .login-brand-lockup .hero-logo {
    width: min(100%, 170px);
  }
}

.login-shell--focused {
  width: min(640px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 18px;
}

.login-panel--premium {
  position: relative;
  overflow: hidden;
  padding: 44px 42px 40px;
  border-radius: 32px;
  border-color: rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.97), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 28px 80px rgba(2, 6, 23, 0.4);
}

.login-panel--premium::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.07), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(214, 187, 24, 0.06), transparent 18%);
}

.login-panel--premium > * {
  position: relative;
  z-index: 1;
}

.login-brand-lockup {
  gap: 22px;
}

.login-brand-lockup .hero-logo {
  width: min(100%, 316px);
  filter: drop-shadow(0 24px 50px rgba(214, 187, 24, 0.22));
}

.login-brand-copy h1 {
  font-size: 44px;
  line-height: .98;
  letter-spacing: -.05em;
  max-width: 12ch;
}

.login-brand-copy p {
  max-width: 32ch;
  color: rgba(191, 219, 254, 0.72);
  font-size: 14px;
}

.login-panel--premium .form-stack {
  gap: 14px;
}

.login-panel--premium .form-stack label {
  gap: 8px;
}

.login-panel--premium .form-stack input {
  min-height: 52px;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.login-panel--premium .btn {
  min-height: 48px;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.24);
}

.login-support-note {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 24%),
    rgba(255, 255, 255, 0.025);
}

.login-support-note strong {
  font-size: 15px;
  letter-spacing: -.02em;
}

.login-support-note span {
  color: rgba(191, 219, 254, 0.68);
}

.login-socials {
  margin-top: 16px;
  gap: 12px;
}

.login-social-link {
  min-height: 42px;
  padding: 10px 15px;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18);
}

.login-social-link:hover {
  box-shadow: 0 16px 28px rgba(2, 6, 23, 0.22);
}

body.login-body .login-shell--focused {
  width: min(640px, calc(100vw - 36px));
  display: grid;
  gap: 18px;
}

body.login-body .login-panel--premium.form-panel {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 32px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.97), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 28px 80px rgba(2, 6, 23, 0.4);
  padding: 44px 42px 40px;
}

body.login-body .login-brand-lockup,
body.login-body .login-brand-copy {
  justify-items: center;
  text-align: center;
}

body.login-body .login-support-note,
body.login-body .alert {
  margin-top: 0;
}

body.login-body .login-socials {
  width: 100%;
  margin: 0;
  justify-content: center;
}

.account-hero {
  padding-bottom: 22px;
}

.profile-overview--premium {
  gap: 16px;
}

.profile-overview--premium .profile-overview__hero {
  border-radius: 26px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.05), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.99));
}

.profile-hero--large {
  gap: 18px;
}

.profile-hero--large .profile-hero__avatar {
  width: 78px;
  height: 78px;
  border-radius: 24px;
}

.profile-hero__name {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.profile-hero__meta {
  color: rgba(191, 219, 254, 0.7);
}

.profile-stat-strip {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.profile-stat-chip {
  min-height: 108px;
  align-content: start;
}

.profile-stat-chip strong {
  font-size: 22px;
  letter-spacing: -.04em;
}

.profile-panel-actions {
  margin-top: 18px;
}

.client-settings-shell--compact.surface-card {
  padding: 14px;
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 20px 36px rgba(2, 6, 23, 0.2);
}

.settings-section .panel.surface-card {
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 32px rgba(2, 6, 23, 0.16);
}

.form-panel-card.surface-card,
.wireguard-card.surface-card {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.97), rgba(7, 12, 21, 0.99));
}

.form-panel-card.surface-card .panel-header,
.wireguard-card.surface-card .panel-header {
  margin-bottom: 16px;
}

.client-settings-shell .surface-list--scroller,
.wireguard-card.surface-card .wireguard-stack__folds {
  border-radius: 18px;
}

@media (max-width: 980px) {
  .company-overview__stats,
  .profile-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .login-panel--premium {
    padding: 24px;
    border-radius: 22px;
  }

  .company-overview__hero {
    padding: 16px;
    border-radius: 22px;
  }

  .login-brand-copy h1 {
    font-size: 32px;
  }

  .profile-hero--large .profile-hero__avatar {
    width: 66px;
    height: 66px;
    border-radius: 20px;
  }

  .company-overview__logo {
    min-height: 140px;
  }

  .company-overview__copy h2 {
    font-size: 26px;
  }

  .company-overview {
    gap: 16px;
  }

  .company-overview__copy {
    gap: 10px;
  }

  .company-overview__brand {
    gap: 16px;
  }

  .company-overview__logo {
    min-height: 128px;
    border-radius: 22px;
  }

  .company-overview__hero .button-row {
    width: 100%;
  }

  .company-overview__hero .button-row > * {
    flex: 1 1 220px;
  }

  .company-stat-card,
  .profile-stat-chip {
    min-height: 0;
    padding: 14px;
  }

  body.login-body .login-shell--focused {
    width: min(100%, calc(100vw - 24px));
    gap: 14px;
  }

  body.login-body .login-panel--premium.form-panel {
    border-radius: 22px;
    padding: 28px 24px 24px;
  }
}

@media (max-width: 560px) {
  .company-overview__stats,
  .profile-stat-strip {
    grid-template-columns: 1fr;
  }

  .company-overview {
    margin-bottom: 16px;
  }

  .company-overview__hero {
    gap: 12px;
  }

  .company-overview__brand {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .company-overview__logo {
    min-height: 112px;
    justify-self: stretch;
  }

  .company-overview__copy h2 {
    font-size: 24px;
    line-height: 1.04;
  }

  .company-overview__copy p {
    font-size: 13px;
    line-height: 1.58;
  }

  .company-overview__hero .button-row > * {
    flex: 1 1 100%;
  }

  .company-stat-card strong,
  .profile-stat-chip strong {
    font-size: 20px;
  }

  body.login-body .login-shell--focused {
    width: min(100%, calc(100vw - 20px));
    gap: 12px;
  }

  body.login-body .login-panel--premium.form-panel {
    padding: 20px 18px;
    border-radius: 20px;
  }

  body.login-body .login-brand-copy h1 {
    font-size: 30px;
  }

  body.login-body {
    padding: 28px 10px 30px;
    align-items: flex-start;
  }
}

/* Login premium pass */
body.login-body .login-stage {
  width: min(760px, calc(100vw - 32px));
  gap: 18px;
}

body.login-body .login-stage__panel {
  display: grid;
  gap: 24px;
  padding: 28px;
}

body.login-body .login-stage__hero {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

body.login-body .login-stage__brand-mark {
  width: min(100%, 300px);
  height: 164px;
  filter: drop-shadow(0 24px 50px rgba(214, 187, 24, 0.2));
}

body.login-body .login-stage__copy {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

body.login-body .login-stage__eyebrow,
body.login-body .login-form-card__eyebrow {
  color: #f2de73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.login-body .login-stage__copy h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

body.login-body .login-stage__copy p {
  margin: 0;
  max-width: 44ch;
  color: rgba(191, 219, 254, 0.78);
  font-size: 14px;
  line-height: 1.68;
}

body.login-body .login-stage__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

body.login-body .login-stage__chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 28%),
    rgba(255, 255, 255, 0.035);
  color: #d9e4f4;
  font-size: 12px;
  font-weight: 800;
}

body.login-body .login-form-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.92), rgba(5, 10, 18, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 38px rgba(2, 6, 23, 0.18);
}

body.login-body .login-form-card__header {
  display: grid;
  gap: 8px;
}

body.login-body .login-form-card__header h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

body.login-body .login-form-card__header p {
  margin: 0;
  color: rgba(191, 219, 254, 0.7);
  font-size: 13px;
  line-height: 1.58;
}

body.login-body .login-form-card__form {
  gap: 14px;
}

body.login-body .login-field {
  display: grid;
  gap: 8px;
}

body.login-body .login-field__label {
  color: #eef5ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.login-body .login-field__hint {
  color: rgba(159, 176, 199, 0.88);
  font-size: 12px;
  line-height: 1.45;
}

body.login-body .login-field__input {
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 28%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.016);
}

body.login-body .login-field__input:focus {
  border-color: rgba(214, 187, 24, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(214, 187, 24, 0.16),
    0 0 0 4px rgba(214, 187, 24, 0.08);
}

body.login-body .login-submit-button {
  min-height: 52px;
  font-size: 15px;
  font-weight: 900;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.24);
}

body.login-body .login-support-note--soft {
  margin: 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 26%),
    rgba(255, 255, 255, 0.025);
}

body.login-body .login-socials--rich {
  margin: 0;
  justify-content: center;
  gap: 12px;
}

body.login-body .login-socials--rich .login-social-link {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 14px 26px rgba(2, 6, 23, 0.16);
}

body.login-body .login-socials--rich .login-social-link__icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

body.login-body .login-socials--rich .login-social-link__icon svg {
  width: 20px;
  height: 20px;
}

body.login-body .login-socials--rich .login-social-link__text {
  font-size: 13px;
  font-weight: 800;
}

body.login-body .login-social-link--facebook:hover {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(59, 130, 246, 0.1);
}

body.login-body .login-social-link--instagram:hover {
  border-color: rgba(244, 114, 182, 0.34);
  background: rgba(236, 72, 153, 0.1);
}

@media (max-width: 760px) {
  body.login-body .login-stage {
    width: min(100%, calc(100vw - 20px));
  }

  body.login-body .login-stage__panel {
    padding: 20px;
    gap: 18px;
  }

  body.login-body .login-form-card {
    padding: 16px;
    border-radius: 20px;
  }

  body.login-body .login-stage__brand-mark {
    width: min(100%, 230px);
    height: 132px;
  }
}

/* Login premium hard reset */
body.login-body {
  min-height: 100svh;
  margin: 0;
  padding: 36px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 20%),
    linear-gradient(180deg, #08101c 0%, #0b1220 55%, #0c1524 100%);
}

body.login-body .login-stage {
  width: min(1120px, calc(100vw - 36px));
  display: block;
}

body.login-body .login-stage__panel {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 34px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 22%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.06), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.97), rgba(6, 10, 19, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 30px 90px rgba(2, 6, 23, 0.42);
}

body.login-body .login-stage__content {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.86fr);
  gap: clamp(22px, 3vw, 34px);
  align-items: stretch;
}

body.login-body .login-stage__hero {
  min-width: 0;
  align-content: center;
  justify-items: start;
  text-align: left;
  padding: clamp(12px, 2vw, 22px);
}

body.login-body .login-stage__eyebrow,
body.login-body .login-form-card__eyebrow {
  color: #f2de73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.login-body .login-stage__brand-logo {
  display: block;
  width: clamp(220px, 28vw, 360px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(214, 187, 24, 0.12));
}

body.login-body .login-stage__copy {
  justify-items: start;
  text-align: left;
  gap: 12px;
}

body.login-body .login-stage__copy h1 {
  margin: 0;
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

body.login-body .login-stage__copy p {
  margin: 0;
  max-width: 42ch;
  color: rgba(214, 226, 243, 0.78);
  font-size: 15px;
  line-height: 1.72;
}

body.login-body .login-stage__chips {
  justify-content: flex-start;
  gap: 10px;
}

body.login-body .login-stage__chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: #f1f5f9;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.055), transparent 28%),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.login-body .login-stage__hero-note {
  width: min(100%, 420px);
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.11);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 24%),
    rgba(255, 255, 255, 0.04);
}

body.login-body .login-stage__hero-note strong {
  color: #f8fafc;
  font-size: 14px;
}

body.login-body .login-stage__hero-note span {
  color: rgba(191, 219, 254, 0.72);
  font-size: 13px;
  line-height: 1.58;
}

body.login-body .login-form-card {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(9, 14, 25, 0.96), rgba(5, 9, 17, 0.985));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 22px 60px rgba(2, 6, 23, 0.26);
}

body.login-body .login-form-card__header {
  gap: 10px;
}

body.login-body .login-form-card__header h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

body.login-body .login-form-card__header p {
  margin: 0;
  color: rgba(191, 219, 254, 0.72);
  font-size: 14px;
  line-height: 1.62;
}

body.login-body .login-form-card__form {
  gap: 16px;
}

body.login-body .login-field {
  gap: 10px;
}

body.login-body .login-field__input {
  min-height: 58px;
  width: 100%;
  border-radius: 18px;
  color: #f8fafc;
  font-size: 15px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), transparent 26%),
    rgba(255, 255, 255, 0.03);
}

body.login-body .login-field__input::placeholder {
  color: rgba(148, 163, 184, 0.72);
}

body.login-body .login-submit-button {
  min-height: 56px;
  width: 100%;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 900;
}

body.login-body .login-form-card__footer {
  display: grid;
  gap: 14px;
}

body.login-body .login-support-note--soft {
  margin: 0;
  padding: 16px 18px;
  border-radius: 20px;
}

body.login-body .login-socials--rich {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
}

body.login-body .login-socials--rich .login-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
}

body.login-body .login-socials--rich .login-social-link__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.login-body .login-socials--rich .login-social-link__icon svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  display: block;
  flex: 0 0 20px;
}

body.login-body .login-socials--rich .login-social-link__text {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 920px) {
  body.login-body {
    padding: 18px 12px 28px;
    align-items: flex-start;
  }

  body.login-body .login-stage {
    width: min(100%, calc(100vw - 24px));
  }

  body.login-body .login-stage__content {
    grid-template-columns: 1fr;
  }

  body.login-body .login-stage__hero,
  body.login-body .login-stage__copy {
    justify-items: center;
    text-align: center;
  }

  body.login-body .login-stage__chips,
  body.login-body .login-socials--rich {
    justify-content: center;
  }

  body.login-body .login-stage__hero-note {
    width: 100%;
  }
}

@media (max-width: 560px) {
  body.login-body .login-stage__panel {
    padding: 16px;
    border-radius: 24px;
  }

  body.login-body .login-stage__brand-logo {
    width: min(100%, 240px);
  }

  body.login-body .login-stage__copy h1 {
    font-size: 34px;
  }

  body.login-body .login-form-card {
    padding: 16px;
    border-radius: 22px;
  }

  body.login-body .login-socials--rich .login-social-link {
    width: 100%;
  }
}

body[data-theme-mode="light"][data-user-theme="true"] .company-stat-card,
body[data-theme-mode="light"][data-user-theme="true"] .profile-stat-chip {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 16px 28px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .company-stat-card strong,
body[data-theme-mode="light"][data-user-theme="true"] .profile-stat-chip strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .company-stat-card span,
body[data-theme-mode="light"][data-user-theme="true"] .profile-stat-chip span {
  color: var(--ui-text-subtle, rgba(51, 65, 85, 0.78));
}

body[data-theme-mode="light"][data-user-theme="true"] .profile-hero {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 28%),
    rgba(255, 255, 255, 0.78);
}

.lookup-balance-shell {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 24%),
    radial-gradient(circle at top right, rgba(214, 187, 24, 0.07), transparent 20%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.97), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 24px 48px rgba(2, 6, 23, 0.2);
}

.lookup-balance-summary {
  gap: 14px;
}

.lookup-summary-card {
  min-height: 124px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.lookup-summary-card span {
  color: var(--ui-text-muted, var(--muted));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lookup-summary-card strong {
  color: var(--ui-text-strong, #f8fafc);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.lookup-summary-card small {
  color: var(--ui-text-muted, var(--muted));
  font-size: 13px;
  line-height: 1.55;
}

.lookup-summary-card.lookup-summary-card--accent {
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(10, 16, 28, 0.99));
}

.lookup-summary-card.lookup-summary-card--success {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(10, 16, 28, 0.99));
}

.lookup-summary-card.lookup-summary-card--warning {
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(10, 16, 28, 0.99));
}

.lookup-summary-card.lookup-summary-card--muted {
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(10, 16, 28, 0.99));
}

.lookup-balance-guide,
.lookup-balance-purchase,
.lookup-balance-catalog,
.lookup-balance-orders,
.lookup-balance-ledger {
  border-color: var(--ui-surface-card-border, rgba(148, 163, 184, 0.12));
}

.lookup-billing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lookup-billing-step {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%),
    rgba(255, 255, 255, 0.03);
}

.lookup-billing-step__index {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(214, 187, 24, 0.12);
  border: 1px solid rgba(214, 187, 24, 0.22);
  color: #f2de73;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.lookup-billing-step strong {
  color: var(--ui-text-strong, #f8fafc);
  font-size: 15px;
  line-height: 1.22;
}

.lookup-billing-step p {
  margin: 0;
  color: var(--ui-text-muted, var(--muted));
  font-size: 13px;
  line-height: 1.58;
}

.lookup-billing-note {
  margin-top: 16px;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 24%),
    rgba(255, 255, 255, 0.025);
}

.lookup-billing-note strong {
  color: var(--ui-text-strong, #f8fafc);
  font-size: 14px;
}

.lookup-billing-note > span {
  color: var(--ui-text-muted, var(--muted));
  font-size: 13px;
  line-height: 1.58;
}

.lookup-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lookup-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ui-text-subtle, rgba(226, 232, 240, 0.88));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.lookup-balance-main-grid {
  align-items: stretch;
}

.lookup-topup-grid,
.lookup-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lookup-topup-card,
.lookup-catalog-card {
  min-width: 0;
  height: 100%;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(14, 20, 33, 0.96), rgba(8, 13, 24, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.016),
    0 18px 36px rgba(2, 6, 23, 0.18);
}

.lookup-topup-card--featured {
  border-color: rgba(214, 187, 24, 0.22);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(18, 24, 38, 0.98), rgba(9, 14, 24, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(214, 187, 24, 0.08),
    0 22px 42px rgba(2, 6, 23, 0.24);
}

.lookup-topup-card__head,
.lookup-catalog-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lookup-topup-card__head strong,
.lookup-catalog-card__head strong {
  color: var(--ui-text-strong, #f8fafc);
  font-size: 16px;
  line-height: 1.2;
}

.lookup-topup-card__amount,
.lookup-catalog-card__price {
  color: var(--ui-text-strong, #f8fafc);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 0.96;
  letter-spacing: -0.06em;
  font-weight: 900;
}

.lookup-topup-card p,
.lookup-catalog-card p {
  margin: 0;
  color: var(--ui-text-muted, var(--muted));
  font-size: 13px;
  line-height: 1.62;
}

.lookup-topup-card__form,
.lookup-topup-form {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.lookup-topup-card__form .btn,
.lookup-topup-form .btn {
  width: 100%;
  justify-content: center;
}

.lookup-topup-form label {
  display: grid;
  gap: 8px;
}

.lookup-topup-form input {
  min-height: 48px;
  border-radius: 16px;
}

.lookup-billing-footnote {
  margin: 12px 0 0;
  color: var(--ui-text-muted, var(--muted));
  font-size: 13px;
  line-height: 1.58;
}

.lookup-order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.lookup-order-status--success,
.lookup-ledger-amount--success {
  color: #86efac;
}

.lookup-order-status--warning,
.lookup-ledger-amount--warning {
  color: #fdba74;
}

.lookup-order-status--danger,
.lookup-ledger-amount--danger {
  color: #fca5a5;
}

.lookup-order-status--muted,
.lookup-ledger-amount--muted {
  color: var(--ui-text-muted, var(--muted));
}

.lookup-order-status--success {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.12);
}

.lookup-order-status--warning {
  border-color: rgba(249, 115, 22, 0.24);
  background: rgba(249, 115, 22, 0.12);
}

.lookup-order-status--danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
}

.lookup-ledger-amount {
  font-weight: 900;
}

@media (max-width: 1100px) {
  .lookup-billing-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lookup-topup-grid,
  .lookup-catalog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .lookup-balance-shell {
    padding: 16px;
    border-radius: 22px;
    gap: 14px;
  }

  .lookup-summary-card {
    min-height: 0;
  }

  .lookup-summary-card strong,
  .lookup-topup-card__amount,
  .lookup-catalog-card__price {
    font-size: 24px;
  }

  .lookup-billing-steps {
    grid-template-columns: 1fr;
  }

  .lookup-topup-card,
  .lookup-catalog-card,
  .lookup-billing-step,
  .lookup-billing-note {
    padding: 14px;
    border-radius: 18px;
  }
}

@media (max-width: 560px) {
  .lookup-balance-shell {
    padding: 12px;
    border-radius: 18px;
  }

  .lookup-chip-list {
    gap: 6px;
  }

  .lookup-chip {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .lookup-topup-card__head,
  .lookup-catalog-card__head {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ---- public/styles/ui-shell.css ---- */
/* Canonical shell menus, chips and popovers */

.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(8, 14, 26, 0.98), rgba(9, 15, 26, 0.94));
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.content {
  min-width: 0;
  padding: max(18px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.role-client .content {
  gap: 12px;
}

.admin-client-consolebar {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.06), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 34px rgba(2, 6, 23, 0.18);
}

.admin-client-consolebar--client {
  border-color: rgba(56, 189, 248, 0.18);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.09), transparent 28%),
    radial-gradient(circle at bottom right, rgba(214, 187, 24, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(7, 12, 21, 0.98));
}

.admin-client-consolebar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-client-consolebar__back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.admin-client-consolebar__back:hover {
  border-color: rgba(214, 187, 24, 0.22);
  background: rgba(214, 187, 24, 0.08);
}

.admin-client-consolebar__copy {
  min-width: min(100%, 280px);
  flex: 1 1 320px;
  display: grid;
  gap: 4px;
}

.admin-client-consolebar__eyebrow,
.admin-client-consolebar__subnav-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(214, 187, 24, 0.84);
}

.admin-client-consolebar__copy strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #f8fafc;
}

.admin-client-consolebar__copy span:last-child {
  color: rgba(191, 219, 254, 0.74);
  font-size: 12px;
  line-height: 1.45;
}

.admin-client-consolebar__nav,
.admin-client-consolebar__subnav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-client-consolebar__tab,
.admin-client-consolebar__subtab {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.88);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.admin-client-consolebar__tab:hover,
.admin-client-consolebar__subtab:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.22);
  background: rgba(214, 187, 24, 0.08);
  color: #fff7cf;
}

.admin-client-consolebar__tab.is-active,
.admin-client-consolebar__subtab.is-active {
  border-color: rgba(214, 187, 24, 0.28);
  background:
    linear-gradient(135deg, rgba(214, 187, 24, 0.16), rgba(214, 187, 24, 0.05)),
    rgba(255, 255, 255, 0.06);
  color: #fff1b8;
  box-shadow: 0 10px 22px rgba(214, 187, 24, 0.12);
}

.admin-client-consolebar__subnav {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.shell-pill,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 187, 24, 0.24);
  background: rgba(214, 187, 24, 0.1);
  color: #f7e79a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

.shell-pill--accent,
.pill--accent {
  border-color: rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.12);
  color: #b9ebff;
}

.shell-pill--warning,
.pill--warning {
  border-color: var(--ui-warning-border, rgba(245, 158, 11, 0.28));
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 30%),
    var(--ui-warning-bg, rgba(245, 158, 11, 0.14));
  color: var(--ui-warning-text, #fde68a);
}

.shell-pill--success,
.pill--success {
  border-color: var(--ui-success-border, rgba(52, 211, 153, 0.28));
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 30%),
    var(--ui-success-bg, rgba(6, 95, 70, 0.22));
  color: var(--ui-success-text, #d1fae5);
}

.shell-pill--danger,
.pill--danger {
  border-color: var(--ui-danger-border, rgba(248, 113, 113, 0.3));
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 30%),
    var(--ui-danger-bg, rgba(127, 29, 29, 0.22));
  color: var(--ui-danger-text, #fecaca);
}

.brand-card {
  padding: 14px 15px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-radius: 22px;
  min-height: 90px;
  flex: 0 0 auto;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.1), transparent 24%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.09), transparent 20%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.98), rgba(7, 12, 21, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 24px 42px rgba(2, 6, 23, 0.24);
}

.brand-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 64px;
  flex: 0 0 auto;
}

.brand-card__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.brand-card__eyebrow {
  color: rgba(242, 222, 115, 0.86);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brand-icon,
.brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 48%),
    linear-gradient(135deg, rgba(214, 187, 24, 0.92), rgba(125, 211, 252, 0.48));
  color: #0b1220;
  font-weight: 900;
  letter-spacing: .08em;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 6px 16px rgba(2, 6, 23, 0.22));
}

.brand-logo--site {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #020202;
  object-fit: contain;
  padding: 5px;
}

.brand-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #f8fafc;
  line-height: 1.04;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.hero-logo {
  width: min(100%, 280px);
  height: auto;
  display: block;
  margin-bottom: 8px;
  filter: drop-shadow(0 18px 40px rgba(245, 179, 0, 0.16));
}

.brand-subtitle {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(191, 219, 254, 0.72);
  font-weight: 600;
  letter-spacing: .01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sidebar__footer {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 5px;
}

.sidebar__footer strong {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f7e79a;
}

.sidebar__footer span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.sidebar__utility {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  gap: 10px;
}

.sidebar__utility strong {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(214, 187, 24, 0.92);
}

.sidebar__utility-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar__utility-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.sidebar__utility-link:hover {
  border-color: rgba(214, 187, 24, 0.28);
  background: rgba(214, 187, 24, 0.08);
  transform: translateY(-1px);
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  min-height: 52px;
  border-radius: 16px;
  color: var(--muted);
  font-weight: 800;
  border: 1px solid transparent;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.menu-item--button {
  width: 100%;
  background: transparent;
  appearance: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-weight: 800;
}

.menu-item--button .menu-item__label {
  font-weight: 800;
}

.menu-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.08);
  color: rgba(226, 232, 240, 0.88);
}

.menu-item__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.menu-item__label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
  letter-spacing: .01em;
}

.menu-item:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.menu-item.active {
  color: #f8f1bf;
  border-color: rgba(214, 187, 24, 0.26);
  background:
    linear-gradient(90deg, rgba(214, 187, 24, 0.14), rgba(214, 187, 24, 0.03)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(214, 187, 24, 0.08);
}

.menu-item.active .menu-item__icon {
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(214, 187, 24, 0.14);
  color: #f8e38d;
}

.notification-menu,
.account-menu {
  position: relative;
}

.notification-menu summary,
.account-menu summary {
  list-style: none;
}

.notification-menu summary::-webkit-details-marker,
.account-menu summary::-webkit-details-marker {
  display: none;
}

.notification-chip,
.account-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  height: 60px;
  min-height: 60px;
  padding: 0;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.11), transparent 28%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(16, 24, 39, 0.97), rgba(8, 13, 24, 0.995));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(2, 6, 23, 0.22);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
  cursor: pointer;
}

.notification-chip::before,
.account-chip::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.notification-chip:hover,
.account-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.34);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(9, 15, 26, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 38px rgba(2, 6, 23, 0.28);
  filter: saturate(1.04);
}

.notification-menu[open] .notification-chip,
.account-menu[open] .account-chip {
  border-color: rgba(214, 187, 24, 0.36);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.14), transparent 22%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(9, 15, 26, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 42px rgba(2, 6, 23, 0.3);
}

.notification-chip {
  gap: 0;
}

.notification-chip__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--text);
}

.notification-chip__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
}

.theme-toggle__icon--sun {
  display: none;
}

.theme-toggle[data-theme-mode="light"] .theme-toggle__icon--sun {
  display: block;
}

.theme-toggle[data-theme-mode="light"] .theme-toggle__icon--moon {
  display: none;
}

.theme-toggle[disabled] {
  cursor: wait;
  opacity: 0.78;
  transform: none;
}

.notification-chip__copy,
.account-chip__copy {
  display: none;
}

.notification-chip__eyebrow,
.account-chip__eyebrow {
  color: rgba(242, 222, 115, 0.82);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.notification-chip__label,
.account-chip__name {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-chip__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, #fb7185, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.4);
}

.account-chip {
  gap: 0;
  width: 64px;
  min-width: 64px;
}

.account-chip__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(214, 187, 24, 0.96), rgba(56, 189, 248, 0.76));
  color: #08111e;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 20px rgba(2, 6, 23, 0.22);
}

.account-chip__avatar img,
.account-popover__avatar img,
.profile-hero__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.account-chip__avatar--logo,
.account-popover__avatar.account-chip__avatar--logo,
.profile-hero__avatar.account-chip__avatar--logo {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.notification-popover,
.account-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  display: grid;
  gap: 14px;
  z-index: 30;
  max-height: min(78vh, 720px);
  overflow: auto;
  border-color: rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.06), transparent 20%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.06), transparent 18%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.98), rgba(7, 12, 21, 1));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 28px 54px rgba(2, 6, 23, 0.3);
}

.content-appbar .notification-menu,
.content-appbar .account-menu {
  flex: 0 0 auto;
}

.notification-popover {
  display: grid;
  gap: 12px;
}

.notification-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.notification-popover__title {
  font-size: 15px;
  font-weight: 900;
}

.notification-popover__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.notification-popover__list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.notification-empty {
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}

.notification-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.025), transparent 24%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.notification-item:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(255, 255, 255, 0.07);
}

.notification-item--unread {
  border-color: rgba(214, 187, 24, 0.22);
  background: rgba(214, 187, 24, 0.08);
}

.notification-item__title {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.notification-item__body,
.notification-item__meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.notification-popover__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.notification-popover__footer a:hover {
  color: var(--text);
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.link-button:hover {
  color: #f7e79a;
}

.account-popover__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.account-popover__avatar {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(214, 187, 24, 0.94), rgba(56, 189, 248, 0.72));
  color: #08111e;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  overflow: hidden;
}

.account-popover__name {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.account-popover__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.account-popover__links {
  display: grid;
  gap: 8px;
}

.account-popover__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.024), transparent 24%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 800;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.account-popover__link:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 187, 24, 0.24);
  background: rgba(255, 255, 255, 0.07);
}

.account-popover__logout {
  margin: 0;
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-popover,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 24px 52px rgba(15, 23, 42, 0.12);
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-chip,
body[data-theme-mode="light"][data-user-theme="true"] .account-chip {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  color: var(--ui-text-strong, #0f172a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 16px 30px rgba(15, 23, 42, 0.1);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-chip__icon,
body[data-theme-mode="light"][data-user-theme="true"] .notification-chip__label,
body[data-theme-mode="light"][data-user-theme="true"] .account-chip__name {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .account-chip__avatar {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 20px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .account-chip__avatar--logo,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover__avatar.account-chip__avatar--logo,
body[data-theme-mode="light"][data-user-theme="true"] .profile-hero__avatar.account-chip__avatar--logo {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.1);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-popover__meta,
body[data-theme-mode="light"][data-user-theme="true"] .notification-empty,
body[data-theme-mode="light"][data-user-theme="true"] .notification-item__body,
body[data-theme-mode="light"][data-user-theme="true"] .notification-item__meta,
body[data-theme-mode="light"][data-user-theme="true"] .notification-popover__footer,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover__meta {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-empty,
body[data-theme-mode="light"][data-user-theme="true"] .notification-item,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover__link {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-empty {
  border-style: dashed;
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-item:hover,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover__link:hover {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.22);
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-item--unread {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.18);
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.1), transparent 28%),
    rgba(255, 255, 255, 0.86);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-item__title,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover__name,
body[data-theme-mode="light"][data-user-theme="true"] .account-popover__link {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-popover__footer a,
body[data-theme-mode="light"][data-user-theme="true"] .link-button {
  color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.96);
}

body[data-theme-mode="light"][data-user-theme="true"] .notification-popover__footer a:hover,
body[data-theme-mode="light"][data-user-theme="true"] .link-button:hover {
  color: var(--ui-text-strong, #0f172a);
}

@media (max-width: 760px) {
  .notification-chip,
  .account-chip {
    width: 50px;
    height: 50px;
    min-height: 50px;
    min-width: 50px;
    padding: 0;
    justify-content: center;
  }

  .account-chip__avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 13px;
  }

  .notification-chip__copy,
  .account-chip__copy {
    display: none;
  }

  .notification-popover,
  .account-popover {
    right: auto;
    left: 0;
    width: min(320px, calc(100vw - 28px));
  }

  .brand-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 14px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .brand-subtitle {
    font-size: 11px;
    line-height: 1.4;
  }

  .sidebar__footer {
    display: none;
  }

  .sidebar {
    padding: 12px;
    gap: 10px;
  }

  .sidebar__utility {
    margin-top: 8px;
    padding: 10px 12px;
  }

  .sidebar__utility-links {
    gap: 6px;
  }

  .sidebar__utility-link {
    min-height: 32px;
    padding: 0 9px;
    font-size: 11px;
  }

  .content {
    padding: 14px;
  }

  .menu {
    gap: 8px;
    padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  .menu-item {
    scroll-snap-align: start;
  }

  .menu-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .menu-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 560px) {
  .notification-popover,
  .account-popover {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .menu-item {
    padding: 8px 10px;
    min-height: 46px;
  }

  .menu-item__label {
    font-size: 11px;
    max-width: 11ch;
  }

  .content {
    padding: 12px;
  }

  .sidebar__utility {
    display: none;
  }
}

@media (max-width: 430px) {
  .sidebar {
    padding: 10px;
    gap: 8px;
  }

  .menu {
    gap: 6px;
  }

  .menu-item {
    min-height: 44px;
    padding: 8px 9px;
    border-radius: 13px;
  }

  .menu-item__icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .menu-item__label {
    font-size: 10px;
    max-width: 10ch;
  }

  .content {
    padding: 10px;
  }
}

@media (max-width: 980px) {
  .menu {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-inline: -2px;
    padding-inline: 2px;
    scrollbar-width: none;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  .menu-item {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 14px;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .brand-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    min-height: 0;
  }

  .brand-icon,
  .brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .notification-chip,
  .account-chip {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }
}

@media (max-width: 560px) {
  .brand-card {
    gap: 9px;
    padding: 10px;
    border-radius: 18px;
  }

  .brand-title {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .notification-chip,
  .account-chip {
    width: 44px;
    height: 44px;
  }

  .account-chip__avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 12px;
  }
}

@media (max-width: 980px) {
  .sidebar {
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    gap: 10px;
  }

  .brand-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    min-height: 0;
    border-radius: 20px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
      0 16px 28px rgba(2, 6, 23, 0.18);
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .brand-card__copy {
    gap: 4px;
  }

  .brand-card__eyebrow {
    font-size: 9px;
    letter-spacing: .14em;
  }

  .brand-title {
    font-size: 16px;
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  .brand-subtitle {
    font-size: 11px;
    line-height: 1.35;
  }

  .sidebar__utility,
  .sidebar__footer {
    display: none;
  }

  .menu {
    gap: 8px;
    padding: 0 2px 2px;
    margin-inline: -2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .menu-item {
    min-height: 44px;
    padding: 7px 10px;
  }

  .menu-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 12px;
  }

  .menu-item__label {
    font-size: 12px;
  }

  .content {
    padding: 12px;
    gap: 12px;
  }

  .notification-chip,
  .account-chip {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    border-radius: 16px;
  }

  .account-chip__avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 12px;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    gap: 8px;
  }

  .brand-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .brand-card__eyebrow {
    display: none;
  }

  .brand-title {
    font-size: 15px;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .brand-subtitle {
    font-size: 10px;
  }

  .menu-item {
    min-height: 42px;
    padding: 7px 9px;
  }

  .menu-item__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
  }

  .menu-item__label {
    font-size: 11px;
    max-width: 11ch;
  }

  .notification-chip,
  .account-chip {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .account-chip__avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
  }
}

@media (max-width: 760px) {
  .sidebar {
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    gap: 8px;
  }

  .brand-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
    border-radius: 16px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-subtitle {
    font-size: 10px;
    line-height: 1.3;
  }

  .menu {
    gap: 6px;
    padding-bottom: 2px;
  }

  .menu-item {
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .menu-item__icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
  }

  .menu-item__label {
    font-size: 10px;
    max-width: 10ch;
  }

  .content {
    padding: 10px;
    gap: 10px;
  }

  body.role-admin .brand-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
    border-radius: 14px;
  }

  body.role-admin .brand-icon,
  body.role-admin .brand-logo,
  body.role-admin .brand-logo--site {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  body.role-admin .brand-card__eyebrow,
  body.role-admin .brand-subtitle {
    display: none;
  }

  body.role-admin .brand-title {
    font-size: 13px;
    line-height: 1.05;
  }

  body.role-admin .menu-item {
    min-height: 36px;
    padding: 5px 7px;
    border-radius: 11px;
  }

  body.role-admin .menu-item__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
  }

  body.role-admin .menu-item__icon svg {
    width: 14px;
    height: 14px;
  }

  body.role-admin .menu-item__label {
    font-size: 9px;
    max-width: 8.5ch;
  }

  body.role-client .brand-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
    border-radius: 14px;
  }

  body.role-client .brand-icon,
  body.role-client .brand-logo,
  body.role-client .brand-logo--site {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  body.role-client .brand-card__eyebrow,
  body.role-client .brand-subtitle {
    display: none;
  }

  body.role-client .brand-title {
    font-size: 13px;
    line-height: 1.05;
  }

  body.role-client .menu-item {
    min-height: 36px;
    padding: 5px 7px;
    border-radius: 11px;
  }

  body.role-client .menu-item__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
  }

  body.role-client .menu-item__icon svg {
    width: 14px;
    height: 14px;
  }

  body.role-client .menu-item__label {
    font-size: 9px;
    max-width: 8.5ch;
  }
}

@media (max-width: 560px) {
  .brand-subtitle {
    display: none;
  }

  .notification-chip,
  .account-chip {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  .account-chip__avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
  }

  body.role-admin .brand-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 7px;
  }

  body.role-admin .brand-icon,
  body.role-admin .brand-logo,
  body.role-admin .brand-logo--site {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  body.role-admin .brand-title {
    font-size: 12px;
  }

  body.role-admin .menu-item {
    min-height: 34px;
    padding: 4px 6px;
  }

  body.role-admin .menu-item__icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  body.role-admin .menu-item__label {
    font-size: 8px;
  }

  body.role-client .brand-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 7px;
  }

  body.role-client .brand-icon,
  body.role-client .brand-logo,
  body.role-client .brand-logo--site {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  body.role-client .brand-title {
    font-size: 12px;
  }

  body.role-client .menu-item {
    min-height: 34px;
    padding: 4px 6px;
  }

  body.role-client .menu-item__icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  body.role-client .menu-item__label {
    font-size: 8px;
  }
}

@media (max-width: 980px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip;
  }

  .app-shell > .sidebar,
  .app-shell > .content,
  .sidebar,
  .content,
  .content-appbar,
  .menu {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .sidebar,
  .content {
    align-self: stretch;
  }

  .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .menu > * {
    flex: 0 0 auto;
    max-width: none;
  }

  .menu-item--button {
    width: auto !important;
  }
}

@media (max-width: 1440px) {
  .app-shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .sidebar {
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    gap: 12px;
  }

  .content {
    padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    gap: 14px;
  }

  .brand-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px;
    border-radius: 20px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .brand-title {
    font-size: 16px;
  }

  .menu-item {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .menu-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

@media (max-width: 1320px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    top: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    gap: 10px;
  }

  .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    margin-inline: -2px;
    padding-inline: 2px;
    scrollbar-width: none;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  .menu > * {
    flex: 0 0 auto;
    max-width: none;
  }

  .menu-item {
    white-space: nowrap;
  }

  .content {
    padding: 14px 16px 18px;
  }
}

@media (max-width: 760px) {
  .content {
    padding: 12px;
  }

  .content > *,
  .panel,
  .surface-card,
  .page-intro,
  .content-appbar {
    min-width: 0;
    max-width: 100%;
  }

  .button-row,
  .filters-actions,
  .hero-actions,
  .surface-card__actions,
  .panel-header.between .button-row,
  .panel-header.between .filters-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px !important;
  }

  .button-row > *,
  .filters-actions > *,
  .hero-actions > *,
  .surface-card__actions > *,
  .panel-header.between .button-row > *,
  .panel-header.between .filters-actions > * {
    width: 100%;
    min-width: 0;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 560px) {
  .content {
    padding: 10px;
  }

  .button-row,
  .filters-actions,
  .hero-actions,
  .surface-card__actions,
  .panel-header.between .button-row,
  .panel-header.between .filters-actions {
    grid-template-columns: 1fr;
  }
}

/* Final shell pass: keep the brand block and navigation in normal flow on narrow screens. */
@media (max-width: 1320px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    top: auto;
    height: auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 10px 12px;
    overflow: visible;
  }

  .brand-card {
    position: relative;
    z-index: 1;
    grid-column: 1;
    width: 100%;
    max-width: 300px;
    min-width: 0;
    align-self: start;
  }

  .brand-card__copy,
  .brand-title,
  .brand-subtitle,
  .brand-card__eyebrow {
    min-width: 0;
    max-width: 100%;
  }

  .brand-title,
  .brand-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    align-self: start;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .menu > *,
  .menu-item {
    flex: 0 0 auto;
  }

  .menu-item {
    max-width: 180px;
    min-height: 44px;
    padding: 7px 9px;
    gap: 9px;
    scroll-snap-align: start;
  }

  .menu-item__label {
    min-width: 0;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar__utility,
  .sidebar__footer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  .sidebar {
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  }

  .brand-card {
    max-width: 250px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .brand-title {
    font-size: 14px;
    line-height: 1.06;
  }

  .brand-subtitle {
    font-size: 11px;
  }

  .menu-item {
    max-width: 160px;
  }
}

@media (max-width: 900px) {
  .sidebar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .brand-card,
  .menu {
    grid-column: 1;
  }

  .brand-card {
    max-width: none;
  }

  .menu-item {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .sidebar {
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    gap: 8px;
  }

  .brand-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
    border-radius: 14px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand-subtitle {
    display: none;
  }

  .menu {
    gap: 6px;
    padding-bottom: 6px;
  }

  .menu-item {
    min-height: 38px;
    padding: 5px 7px;
    gap: 7px;
    border-radius: 11px;
  }

  .menu-item__icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
  }

  .menu-item__icon svg {
    width: 14px;
    height: 14px;
  }

  .menu-item__label {
    font-size: 10px;
    max-width: 9.5ch;
  }

  .content-appbar {
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 100%;
    overflow: visible;
  }

  .content-appbar__main {
    min-width: 0;
  }

  .content-appbar__side {
    width: auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .notification-chip,
  .account-chip {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 430px) {
  .brand-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 8px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .brand-card__eyebrow {
    display: none;
  }

  .brand-title {
    font-size: 13px;
  }

  .menu-item__label {
    max-width: 8.5ch;
  }
}

@media (max-width: 360px) {
  .brand-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 7px;
  }

  .brand-icon,
  .brand-logo,
  .brand-logo--site {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .brand-title {
    font-size: 12px;
  }

  .menu-item {
    padding: 4px 6px;
    gap: 5px;
  }

  .menu-item__label {
    font-size: 9px;
    max-width: 7.5ch;
  }
}

.sidebar > .brand-card,
.sidebar__utility,
.sidebar__footer {
  flex: 0 0 auto !important;
}

.sidebar > .menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

@media (max-width: 1320px) {
  .sidebar > .brand-card {
    min-height: 0;
  }

  .sidebar > .menu {
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
  }
}

/* Final filter pass: action buttons align with field controls, not label rows. */
.filters-grid > .filters-actions,
.filters-grid > .button-row,
.filters-grid > .form-actions-span {
  align-self: end;
  min-height: 48px;
  display: flex;
  align-items: center;
  align-content: center;
}

.filters-grid > .filters-actions > .btn,
.filters-grid > .filters-actions > button,
.filters-grid > .filters-actions > a,
.filters-grid > .button-row > .btn,
.filters-grid > .button-row > button,
.filters-grid > .button-row > a {
  min-height: 48px;
  padding-block: 0;
}

@media (max-width: 760px) {
  .filters-grid > .filters-actions,
  .filters-grid > .button-row,
  .filters-grid > .form-actions-span {
    align-self: stretch;
    width: 100%;
    min-height: 40px;
  }

  .filters-grid > .filters-actions > .btn,
  .filters-grid > .filters-actions > button,
  .filters-grid > .filters-actions > a,
  .filters-grid > .button-row > .btn,
  .filters-grid > .button-row > button,
  .filters-grid > .button-row > a {
    min-height: 40px;
  }
}

/* Client design pass: keep the operational shell compact and predictable. */
body.role-client .app-shell {
  grid-template-columns: 236px minmax(0, 1fr);
}

body.role-client .sidebar {
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

body.role-client .brand-card {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 76px;
  padding: 10px 11px;
  gap: 10px;
  border-radius: 18px;
  overflow: hidden;
}

body.role-client .brand-card__media {
  max-width: 52px;
}

body.role-client .brand-logo,
body.role-client .brand-logo--site {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

body.role-client .brand-card__eyebrow {
  font-size: 8px;
  letter-spacing: .13em;
}

body.role-client .brand-title {
  font-size: 15px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

body.role-client .brand-subtitle {
  font-size: 10px;
  line-height: 1.28;
  -webkit-line-clamp: 1;
}

body.role-client .sidebar__utility,
body.role-client .sidebar__footer {
  display: none;
}

body.role-client .sidebar > .menu {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 2px;
}

body.role-client .menu {
  gap: 5px;
}

body.role-client .menu-item {
  min-height: 44px;
  padding: 6px 8px;
  gap: 9px;
  border-radius: 14px;
}

body.role-client .menu-item__icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 11px;
}

body.role-client .menu-item__label {
  font-size: 12px;
  line-height: 1.15;
}

@media (max-width: 1320px) {
  body.role-client .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.role-client .sidebar {
    display: grid;
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
  }

  body.role-client .brand-card {
    max-width: 250px;
    min-height: 64px;
    grid-column: 1;
  }

  body.role-client .sidebar > .menu {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 7px;
    padding: 0 2px 4px;
    scrollbar-width: thin;
  }

  body.role-client .menu-item {
    flex: 0 0 auto;
    max-width: 154px;
    white-space: nowrap;
  }

  body.role-client .menu-item__label {
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  body.role-client .sidebar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  body.role-client .brand-card,
  body.role-client .sidebar > .menu {
    grid-column: 1;
  }

  body.role-client .brand-card {
    max-width: none;
  }

  body.role-client .menu-item {
    max-width: none;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body.role-client .content-appbar {
    flex-direction: row;
    align-items: center;
  }

  body.role-client .content-appbar__side {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  body.role-client {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  body.role-client .content {
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  }

  body.role-client .content-appbar {
    position: static;
    top: auto;
    padding: 10px 12px;
    border-radius: 16px;
  }

  body.role-client .content-appbar__main {
    width: auto;
  }

  body.role-client .content-appbar__side {
    width: auto;
    justify-content: flex-start;
  }

  body.role-client .sidebar {
    position: fixed;
    z-index: 60;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    top: auto;
    width: auto !important;
    height: 64px;
    padding: 7px;
    display: block;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    background:
      radial-gradient(circle at top left, rgba(214, 187, 24, 0.14), transparent 28%),
      linear-gradient(180deg, rgba(9, 15, 26, 0.98), rgba(5, 9, 17, 0.99));
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.42);
    backdrop-filter: blur(18px);
  }

  body.role-client .brand-card {
    display: none;
  }

  body.role-client .sidebar > .menu {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px;
    margin: 0;
    scrollbar-width: none;
  }

  body.role-client .sidebar > .menu::-webkit-scrollbar {
    display: none;
  }

  body.role-client .menu-item {
    position: relative;
    flex: 0 0 50px;
    width: 50px;
    max-width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 5px;
    justify-content: center;
    gap: 0;
    border-radius: 15px;
  }

  body.role-client .menu-item__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body.role-client .menu-item__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 430px) {
  body.role-client .sidebar {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    height: 60px;
    padding: 6px;
    border-radius: 18px;
  }

  body.role-client .menu-item {
    flex-basis: 46px;
    width: 46px;
    max-width: 46px;
    height: 46px;
    min-height: 46px;
    border-radius: 13px;
  }

  body.role-client .menu-item__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}


/* ---- public/styles/ui-monitoring.css ---- */
/* Canonical monitoring wall surfaces and layout controls */

.monitoring-selection-tools {
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.04), transparent 24%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.94), rgba(6, 10, 18, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 34px rgba(2, 6, 23, 0.16);
}

.monitoring-selection-search {
  max-width: none;
  gap: 10px;
}

.monitoring-selection-search input {
  min-height: 42px;
}

.monitoring-selection-bulk {
  padding: 16px 18px;
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(214, 187, 24, 0.05), transparent 28%),
    rgba(255, 255, 255, 0.035);
}

.monitoring-selection-bulk strong {
  max-width: 58ch;
}

.monitoring-select-grid {
  gap: 18px;
}

.monitoring-select-chip {
  border-radius: 18px;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent 22%),
    linear-gradient(180deg, rgba(11, 17, 29, 0.88), rgba(8, 13, 22, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 28px rgba(2, 6, 23, 0.12);
}

.monitoring-select-chip--visual {
  gap: 14px;
}

.monitoring-select-chip__preview {
  height: 208px;
  border-radius: 16px;
}

.monitoring-select-chip__copy strong {
  font-size: 15px;
  line-height: 1.28;
}

.monitoring-select-chip__copy small {
  line-height: 1.5;
}

.monitoring-select-chip__state {
  min-height: 30px;
  padding: 0 10px;
}

.monitoring-layout-grid {
  gap: 14px;
}

.monitoring-layout-card {
  padding: 12px;
  border-radius: 18px;
  gap: 8px;
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 16px 30px rgba(2, 6, 23, 0.14);
}

.monitoring-layout-card__media {
  border-radius: 14px;
}

.monitoring-layout-card h3 {
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.monitoring-layout-card p {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}

.monitoring-layout-save {
  margin-top: 2px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.03), transparent 22%),
    rgba(255, 255, 255, 0.025);
}

.monitoring-layout-save label {
  gap: 8px;
}

.monitoring-layout-save input {
  min-height: 42px;
}

.recorder-panel-stage__head {
  gap: 16px;
}

.recorder-panel-stage__badges {
  row-gap: 10px;
}

@media (max-width: 980px) {
  .monitoring-selection-tools {
    padding: 16px;
  }

  .monitoring-select-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 760px) {
  .monitoring-selection-tools {
    padding: 14px;
    border-radius: 20px;
  }

  .monitoring-selection-search {
    align-items: stretch;
  }

  .monitoring-selection-bulk,
  .monitoring-layout-save {
    align-items: stretch;
  }

  .monitoring-selection-bulk strong {
    max-width: none;
  }

  .monitoring-selection-bulk .button-row,
  .monitoring-layout-save .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .monitoring-selection-bulk .button-row > *,
  .monitoring-layout-save .btn {
    flex: 1 1 100%;
  }

  .monitoring-select-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .monitoring-select-chip__preview {
    height: 188px;
  }

  .monitoring-layout-grid {
    grid-template-columns: 1fr;
  }

  .monitoring-layout-save {
    padding: 14px;
    border-radius: 18px;
  }

  .monitoring-layout-card__actions > * {
    flex: 1 1 220px;
  }
}

@media (max-width: 560px) {
  .monitoring-selection-tools {
    gap: 12px;
    padding: 12px;
  }

  .monitoring-selection-search span {
    font-size: 11px;
  }

  .monitoring-selection-bulk .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .monitoring-select-chip {
    padding: 12px;
    gap: 12px;
  }

  .monitoring-select-chip__preview {
    height: 170px;
    border-radius: 14px;
  }

  .monitoring-select-chip__copy strong {
    font-size: 14px;
  }

  .monitoring-select-chip__copy small {
    font-size: 11px;
  }

  .monitoring-layout-card {
    padding: 10px;
    border-radius: 16px;
  }

  .monitoring-layout-card__media {
    border-radius: 12px;
  }

  .monitoring-layout-card__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .monitoring-selection-tools {
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
  }

  .monitoring-selection-bulk,
  .monitoring-layout-save {
    padding: 14px;
    border-radius: 18px;
  }

  .monitoring-selection-search input,
  .monitoring-layout-save input {
    min-height: 40px;
  }
}

@media (max-width: 560px) {
  .monitoring-selection-bulk,
  .monitoring-layout-save {
    padding: 12px;
    border-radius: 16px;
  }

  .monitoring-select-chip__preview {
    height: 156px;
  }
}

@media (max-width: 760px) {
  .monitoring-selection-tools {
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  .monitoring-selection-bulk,
  .monitoring-layout-save {
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .monitoring-select-chip {
    padding: 10px;
    gap: 10px;
    border-radius: 16px;
  }

  .monitoring-select-chip__preview {
    height: 144px;
    border-radius: 12px;
  }

  .monitoring-select-chip__copy strong {
    font-size: 13px;
  }

  .monitoring-select-chip__copy small {
    font-size: 10px;
    line-height: 1.35;
  }

  .monitoring-layout-card {
    padding: 9px;
    border-radius: 14px;
  }

  .monitoring-layout-card h3 {
    font-size: 13px;
  }
}

/* Final mobile mural overrides */
@media (max-width: 680px) {
  .monitoring-selection-tools {
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .monitoring-selection-search {
    gap: 8px !important;
  }

  .monitoring-selection-search span {
    display: none !important;
  }

  .monitoring-selection-search input,
  .monitoring-layout-save input {
    min-height: 38px !important;
    font-size: 13px !important;
  }

  .monitoring-selection-bulk,
  .monitoring-layout-save {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .monitoring-selection-bulk strong {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .monitoring-selection-bulk .button-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .monitoring-selection-bulk .button-row .btn:last-child {
    grid-column: 1 / -1;
  }

  .monitoring-select-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .monitoring-select-chip,
  .monitoring-select-chip--visual {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .monitoring-select-chip input {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important;
  }

  .monitoring-select-chip--visual input {
    align-self: center;
  }

  .monitoring-select-chip--visual .monitoring-select-chip__copy {
    align-self: center !important;
  }

  .monitoring-select-chip__copy {
    gap: 3px !important;
  }

  .monitoring-select-chip__copy strong {
    font-size: 14px !important;
    line-height: 1.24 !important;
  }

  .monitoring-select-chip__copy small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .monitoring-select-chip__state {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .monitoring-select-chip__preview {
    height: 180px !important;
    border-radius: 14px !important;
  }

  .monitoring-select-chip__badges {
    gap: 6px !important;
  }

  .monitoring-select-chip__badges .badge {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  .monitoring-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .monitoring-layout-card {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .monitoring-layout-card__media {
    min-height: 150px !important;
  }

  .recorder-panel-stage__head {
    gap: 10px !important;
  }

  .recorder-panel-stage__head h3 {
    font-size: 16px !important;
  }

  .recorder-panel-stage__head p,
  .recorder-panel-channel-map__head p {
    display: none !important;
  }

  .recorder-panel-monitor__bar {
    gap: 8px !important;
  }

  .recorder-panel-monitor__meta {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
  }

  .recorder-panel-monitor__meta span {
    font-size: 10px !important;
  }

  .recorder-panel-monitor__fullscreen {
    min-height: 34px !important;
    padding: 0 12px !important;
    margin-left: auto !important;
  }

  .recorder-panel-channel-strip {
    grid-auto-columns: 92vw !important;
    gap: 12px !important;
    scroll-snap-type: x proximity;
  }

  .recorder-panel-channel-card {
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    scroll-snap-align: start;
  }

  .recorder-panel-channel-card__top {
    margin-bottom: 10px !important;
  }

  .recorder-panel-channel-card__preview {
    margin-bottom: 10px !important;
    min-height: 176px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 14px !important;
  }

  .recorder-panel-channel-card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .recorder-panel-channel-card p {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .recorder-panel-channel-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .recorder-panel-channel-card__actions > * {
    width: 100% !important;
    min-height: 36px !important;
    justify-content: center !important;
  }
}

@media (max-width: 420px) {
  .monitoring-selection-bulk .button-row,
  .recorder-panel-channel-card__actions {
    grid-template-columns: 1fr !important;
  }

  .monitoring-select-chip__preview {
    height: 166px !important;
  }

  .recorder-panel-channel-strip {
    grid-auto-columns: 94vw !important;
  }
}

body[data-theme-mode="light"][data-user-theme="true"] .monitoring-selection-tools,
body[data-theme-mode="light"][data-user-theme="true"] .monitoring-selection-bulk,
body[data-theme-mode="light"][data-user-theme="true"] .monitoring-select-chip,
body[data-theme-mode="light"][data-user-theme="true"] .monitoring-layout-save,
body[data-theme-mode="light"][data-user-theme="true"] .monitoring-layout-card {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 16px 30px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .monitoring-select-chip__copy small,
body[data-theme-mode="light"][data-user-theme="true"] .monitoring-layout-card p {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .monitoring-select-chip__preview {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

body[data-theme-mode="light"][data-user-theme="true"] .recorder-fold,
body[data-theme-mode="light"][data-user-theme="true"] .device-section,
body[data-theme-mode="light"][data-user-theme="true"] .device-subdetails,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-weather-inline__surface {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.1));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--user-theme-panel-rgb, 244, 247, 251), 0.93));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 18px 32px rgba(15, 23, 42, 0.08);
}

body[data-theme-mode="light"][data-user-theme="true"] .device-summary__visual,
body[data-theme-mode="light"][data-user-theme="true"] .device-summary__thumb {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background:
    radial-gradient(circle at top left, rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.08), transparent 28%),
    linear-gradient(180deg, rgba(243, 247, 252, 0.98), rgba(226, 232, 240, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

body[data-theme-mode="light"][data-user-theme="true"] .device-summary__copy h3,
body[data-theme-mode="light"][data-user-theme="true"] .device-strip__item strong,
body[data-theme-mode="light"][data-user-theme="true"] .device-section__summary strong,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-weather-inline__summary strong {
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .device-summary__copy p,
body[data-theme-mode="light"][data-user-theme="true"] .device-strip__item span,
body[data-theme-mode="light"][data-user-theme="true"] .device-section__summary span,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-weather-inline__summary span,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-weather-inline__summary small,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-weather-inline__fields span {
  color: var(--ui-text-muted, rgba(15, 23, 42, 0.68));
}

body[data-theme-mode="light"][data-user-theme="true"] .device-summary__eyebrow,
body[data-theme-mode="light"][data-user-theme="true"] .device-section__meta {
  color: var(--ui-accent-text, rgba(214, 187, 24, 0.98));
}

body[data-theme-mode="light"][data-user-theme="true"] .device-summary__chip,
body[data-theme-mode="light"][data-user-theme="true"] .recorder-fold__toggle,
body[data-theme-mode="light"][data-user-theme="true"] .device-strip__item {
  border-color: var(--ui-surface-card-border, rgba(15, 23, 42, 0.12));
  background: rgba(255, 255, 255, 0.92);
  color: var(--ui-text-strong, #0f172a);
}

body[data-theme-mode="light"][data-user-theme="true"] .recorder-fold__toggle {
  border-color: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.24);
  background: rgba(var(--user-theme-accent-rgb, 56, 189, 248), 0.1);
  color: var(--ui-accent-text, #0f4c81);
}

body[data-theme-mode="light"][data-user-theme="true"] .device-section__body,
body[data-theme-mode="light"][data-user-theme="true"] .technical-panel__body {
  border-top-color: var(--ui-surface-card-divider, rgba(15, 23, 42, 0.08));
}

body[data-theme-mode="light"][data-user-theme="true"] .device-offline-banner {
  border-color: var(--ui-danger-border, rgba(239, 68, 68, 0.24));
  background: var(--ui-danger-bg, rgba(239, 68, 68, 0.12));
  color: var(--ui-danger-text, #b91c1c);
}

body[data-theme-mode="light"][data-user-theme="true"] .device-offline-banner span {
  color: var(--ui-danger-text, #b91c1c);
}