:root {
  --iv-bg: #f4f7fb; --iv-surface: #ffffff; --iv-surface-elevated: #f8fbff; --iv-border: #dce5ef;
  --iv-text: #152238; --iv-text-muted: #68788e; --iv-primary: #4b5fd1; --iv-primary-soft: #eef1ff;
  --iv-success: #16865b; --iv-warning: #b7791f; --iv-danger: #c24152; --iv-radius: 12px;
  --iv-shadow: 0 10px 30px rgba(30, 55, 90, .08); --iv-space-1: 4px; --iv-space-2: 8px;
  --iv-space-3: 12px; --iv-space-4: 16px; --iv-space-5: 24px; --iv-space-6: 32px;
  --iv-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.iv-shell-html { background: var(--iv-bg); color-scheme: light; }
body.iv-shell-body { min-width: 320px; margin: 0; background: var(--iv-bg) !important; color: var(--iv-text) !important; font-family: var(--iv-font) !important; }
body.iv-shell-body .iv-shell { min-height: 100vh; background: var(--iv-bg); }
.iv-shell-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--iv-border); background: rgba(255,255,255,.94); box-shadow: 0 2px 12px rgba(30,55,90,.04); backdrop-filter: blur(18px); }
.iv-shell-header-inner { display: flex; align-items: center; gap: 14px; min-height: 62px; max-width: 1600px; margin: auto; padding: 8px 22px; }
.iv-shell-brand { display: flex; align-items: center; gap: 10px; min-width: max-content; color: var(--iv-text); text-decoration: none; }.iv-shell-brand img { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; background: #eef2f8; }.iv-shell-brand strong { display: block; font-size: 14px; line-height: 1.1; }.iv-shell-brand small { display: block; margin-top: 3px; color: var(--iv-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.iv-shell-context { padding-left: 14px; border-left: 1px solid var(--iv-border); color: var(--iv-text-muted); font-size: 12px; font-weight: 700; }.iv-shell-spacer { flex: 1; }.iv-shell-status, .iv-shell-user { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--iv-border); border-radius: 999px; padding: 7px 10px; color: var(--iv-text-muted); font-size: 10px; font-weight: 750; white-space: nowrap; }.iv-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--iv-success); box-shadow: 0 0 0 4px rgba(22,134,91,.1); }
.iv-shell-toggle { display: none; border: 1px solid var(--iv-border); border-radius: 8px; background: var(--iv-surface); color: var(--iv-text); padding: 8px 10px; font-size: 15px; cursor: pointer; }.iv-shell-drawer { display: none; max-width: 1600px; margin: auto; padding: 0 14px 12px; }.iv-shell-drawer.open { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.iv-shell-drawer a { border: 1px solid var(--iv-border); border-radius: 8px; padding: 9px; color: var(--iv-text-muted); font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }.iv-shell-drawer a[aria-current=page] { border-color: #b9c2ff; background: var(--iv-primary-soft); color: var(--iv-primary); }
.iv-shell-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); max-width: 1600px; min-height: calc(100vh - 62px); margin: auto; }.iv-shell-sidebar { position: sticky; top: 62px; align-self: start; min-height: calc(100vh - 62px); border-right: 1px solid var(--iv-border); padding: 20px 12px; background: rgba(255,255,255,.88); }.iv-shell-sidebar-label { margin: 0 10px 7px; color: #8b98aa; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }.iv-shell-sidebar a { display: flex; align-items: center; gap: 9px; margin: 2px 0; border: 1px solid transparent; border-radius: 8px; padding: 9px 10px; color: var(--iv-text-muted); font-size: 11px; font-weight: 750; text-decoration: none; }.iv-shell-sidebar a:before { width: 6px; height: 6px; border: 1px solid #b6c2d1; border-radius: 50%; content: ""; }.iv-shell-sidebar a:hover, .iv-shell-sidebar a[aria-current=page] { border-color: #d2d8ff; background: var(--iv-primary-soft); color: var(--iv-primary); }.iv-shell-sidebar a[aria-current=page]:before { border-color: var(--iv-primary); background: var(--iv-primary); }.iv-shell-sidebar .separator { height: 1px; margin: 17px 8px; border: 0; background: var(--iv-border); }
.iv-shell-page { min-width: 0; max-width: none; padding: 0; }.iv-shell-page > .iv-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; max-width: 1540px; margin: auto; padding: 26px 24px 0; }.iv-shell-page > .iv-page-header h1 { margin: 5px 0 0; font-size: clamp(25px,3vw,36px); letter-spacing: -.04em; }.iv-shell-page > .iv-page-header p { max-width: 680px; margin: 8px 0 0; color: var(--iv-text-muted); font-size: 13px; line-height: 1.55; }.iv-shell-page > .iv-page-header .eyebrow { color: var(--iv-primary); font-size: 10px; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }.iv-shell-page > .monitor-main, .iv-shell-page > .app-main, .iv-shell-page > .shell, .iv-shell-page > main { max-width: 1540px !important; margin: 0 auto !important; padding: 24px 24px 44px !important; }
.iv-shell-page .button, .iv-shell-page .button-primary, .iv-shell-page .button-secondary, .iv-shell-page .button-ghost, .iv-shell-page .button-danger, .iv-shell-page .button-icon { min-height: 34px; border-radius: 8px; padding: 0 11px; font-family: var(--iv-font); font-size: 11px; font-weight: 800; }.iv-shell-page .button-primary { border-color: #4457c2; background: var(--iv-primary); color: #fff; }.iv-shell-page .button-secondary, .iv-shell-page .button-ghost { border: 1px solid var(--iv-border); background: var(--iv-surface); color: var(--iv-text); }.iv-shell-page .button-danger { border: 1px solid #efbdc5; background: #fff5f6; color: var(--iv-danger); }
.iv-shell-body [class~="bg-slate-50"], .iv-shell-body [class~="bg-white"], .iv-shell-body [class~="bg-white/80"] { background: var(--iv-surface) !important; }.iv-shell-body [class~="text-slate-900"], .iv-shell-body [class~="text-slate-950"], .iv-shell-body [class~="text-slate-700"] { color: var(--iv-text) !important; }.iv-shell-body [class~="text-slate-500"], .iv-shell-body [class~="text-slate-600"], .iv-shell-body [class~="text-slate-400"] { color: var(--iv-text-muted) !important; }.iv-shell-body [class~="border-slate-200"], .iv-shell-body [class~="border-slate-300"] { border-color: var(--iv-border) !important; }.iv-shell-body [class~="shadow-sm"], .iv-shell-body [class~="shadow-lg"] { box-shadow: var(--iv-shadow) !important; }.iv-shell-body [class~="bg-white/90"], .iv-shell-body [class~="bg-slate-50"], .iv-shell-body [class~="bg-slate-100"], .iv-shell-body [class~="bg-indigo-50"], .iv-shell-body [class~="bg-indigo-50/60"], .iv-shell-body [class~="bg-indigo-50/70"], .iv-shell-body [class~="bg-emerald-50"], .iv-shell-body [class~="bg-amber-50"], .iv-shell-body [class~="bg-cyan-50"], .iv-shell-body [class~="bg-sky-50"], .iv-shell-body [class~="bg-violet-50/50"], .iv-shell-body [class~="bg-fuchsia-50"], .iv-shell-body [class~="bg-fuchsia-50/60"] { background: var(--iv-surface-elevated) !important; }.iv-shell-body .field { border-color: var(--iv-border) !important; background: var(--iv-surface-elevated) !important; color: var(--iv-text) !important; }.iv-shell-body .field::placeholder { color: var(--iv-text-muted) !important; }.iv-shell-body [class~="bg-violet-600"], .iv-shell-body [class~="bg-fuchsia-600"], .iv-shell-body [class~="bg-sky-600"], .iv-shell-body [class~="bg-indigo-600"] { background: var(--iv-primary) !important; color: #fff !important; }.iv-shell-body [class~="text-indigo-950"], .iv-shell-body [class~="text-indigo-800"], .iv-shell-body [class~="text-violet-900"], .iv-shell-body [class~="text-fuchsia-950"] { color: var(--iv-text) !important; }.iv-shell-body [class~="border-indigo-200"], .iv-shell-body [class~="border-fuchsia-200"], .iv-shell-body [class~="border-emerald-200"], .iv-shell-body [class~="border-cyan-200"] { border-color: var(--iv-border) !important; }.iv-shell-body [class~="rounded-3xl"] { border-radius: var(--iv-radius) !important; }

/* Specialized screens retain their controls but use the same light product surface. */
.iv-shell-page .monitor-shell { --monitor-bg:var(--iv-bg); --monitor-panel:var(--iv-surface); --monitor-line:var(--iv-border); --monitor-muted:var(--iv-text-muted); --monitor-accent:var(--iv-primary); color:var(--iv-text)!important; background:var(--iv-bg)!important; }
.iv-shell-page .monitor-shell .topbar { background:rgba(255,255,255,.94)!important; border-color:var(--iv-border)!important; }
.iv-shell-page .monitor-shell .summary,.iv-shell-page .monitor-shell .activity-panel,.iv-shell-page .monitor-shell .camera-card,.iv-shell-page .monitor-shell .person-panel,.iv-shell-page .monitor-shell .detected-people-panel,.iv-shell-page .monitor-shell .analysis-panel { background:var(--iv-surface)!important; border-color:var(--iv-border)!important; box-shadow:var(--iv-shadow); }
.iv-shell-page .monitor-shell .brand,.iv-shell-page .monitor-shell .monitor-intro h1,.iv-shell-page .monitor-shell .live-toolbar h2,.iv-shell-page .monitor-shell .section-heading h2,.iv-shell-page .monitor-shell .activity-panel h3,.iv-shell-page .monitor-shell .detected-people-panel h2,.iv-shell-page .monitor-shell .analysis-panel h3,.iv-shell-page .monitor-shell .camera-name,.iv-shell-page .monitor-shell .summary-value { color:var(--iv-text)!important; }
.iv-shell-page .monitor-shell .brand-label,.iv-shell-page .monitor-shell .monitor-intro p,.iv-shell-page .monitor-shell .section-heading span,.iv-shell-page .monitor-shell .live-toolbar p,.iv-shell-page .monitor-shell .summary-label,.iv-shell-page .monitor-shell .summary-hint,.iv-shell-page .monitor-shell .camera-meta,.iv-shell-page .monitor-shell .record-hint,.iv-shell-page .monitor-shell .activity-main span,.iv-shell-page .monitor-shell .activity-time,.iv-shell-page .monitor-shell .detected-people-panel header span { color:var(--iv-text-muted)!important; }
.iv-shell-page .monitor-shell .system-chip,.iv-shell-page .monitor-shell .user-chip,.iv-shell-page .monitor-shell .area-button,.iv-shell-page .monitor-shell .view-controls select,.iv-shell-page .monitor-shell .icon-button,.iv-shell-page .monitor-shell .secondary-link,.iv-shell-page .monitor-shell .action,.iv-shell-page .monitor-shell .camera-stage-action { background:var(--iv-surface)!important; border-color:var(--iv-border)!important; color:var(--iv-text)!important; }
.iv-shell-page .monitor-shell .area-button.active,.iv-shell-page .monitor-shell .primary-link,.iv-shell-page .monitor-shell .action.primary { background:var(--iv-primary)!important; border-color:var(--iv-primary)!important; color:#fff!important; }
.iv-shell-page .monitor-shell .activity-row:hover,.iv-shell-page .monitor-shell .camera-card:hover { background:var(--iv-surface-elevated)!important; }
.iv-shell-page .monitor-shell .detected-person,.iv-shell-page .monitor-shell .analysis-metric { background:var(--iv-surface-elevated)!important; border-color:var(--iv-border)!important; color:var(--iv-text)!important; }
.iv-shell-page .monitor-shell .auth-popover { background:var(--iv-surface)!important; border-color:var(--iv-border)!important; box-shadow:var(--iv-shadow); }
.iv-shell-page .monitor-shell .auth-popover input { background:var(--iv-surface-elevated)!important; border-color:var(--iv-border)!important; color:var(--iv-text)!important; }
.iv-shell-page .monitor-shell .auth-popover label { color:var(--iv-text-muted)!important; }
.iv-shell-page > main .panel { background:var(--iv-surface)!important; border-color:var(--iv-border)!important; color:var(--iv-text)!important; box-shadow:var(--iv-shadow); }
.iv-shell-page > main .panel p,.iv-shell-page > main .hint,.iv-shell-page > main .status { color:var(--iv-text-muted)!important; }
.iv-shell-page > main .field { background:var(--iv-surface-elevated)!important; border-color:var(--iv-border)!important; color:var(--iv-text)!important; }
.iv-shell-page > main .map-wrap { background:#f8fbff!important; border-color:var(--iv-border)!important; }
.iv-shell-page > main .map { background:linear-gradient(90deg,rgba(75,95,209,.07) 1px,transparent 1px),linear-gradient(rgba(75,95,209,.07) 1px,transparent 1px)!important; border-color:#cbd6e5!important; }
.iv-shell-page > main .node { background:#fff!important; color:var(--iv-text)!important; box-shadow:0 5px 12px rgba(30,55,90,.08); }
.iv-shell-page > main .node small { color:var(--iv-text-muted)!important; }
.iv-shell-page > main .button { background:var(--iv-surface)!important; border-color:var(--iv-border)!important; color:var(--iv-text)!important; }
.iv-shell-page > main .button.primary { background:var(--iv-primary)!important; border-color:var(--iv-primary)!important; color:#fff!important; }
@media (max-width: 1050px) { .iv-shell-sidebar { width: 64px; padding-inline: 8px; }.iv-shell-sidebar a { justify-content: center; font-size: 0; }.iv-shell-sidebar a:before { width: 8px; height: 8px; }.iv-shell-sidebar-label, .iv-shell-sidebar .separator { display: none; }.iv-shell-layout { grid-template-columns: 64px minmax(0,1fr); } }
@media (max-width: 760px) { .iv-shell-header-inner { min-height: 60px; padding: 8px 14px; }.iv-shell-context, .iv-shell-status, .iv-shell-user, .iv-shell-sidebar { display: none; }.iv-shell-toggle { display: block; margin-left: auto; }.iv-shell-layout { display: block; }.iv-shell-page > .monitor-main, .iv-shell-page > .app-main, .iv-shell-page > .shell, .iv-shell-page > main { padding: 18px 14px 35px !important; }.iv-shell-page > .iv-page-header { display: block; padding: 19px 14px 0; }.iv-shell-page > .iv-page-header .iv-shell-heading-actions { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .iv-shell-body * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Cliente: configuración compacta y orientada a tareas. */
.iv-shell-page .settings-stack { display:grid; gap:14px; max-width:1120px; }
.iv-shell-page .settings-home { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:1120px; }
.iv-shell-page .settings-section { overflow:hidden; }
.iv-shell-page .settings-section .panel-heading { align-items:flex-start; }
.iv-shell-page .settings-section .panel-heading h2, .iv-shell-page .setting-card h2 { margin:0; font-size:16px; letter-spacing:-.02em; }
.iv-shell-page .settings-muted { margin:4px 0 0; color:var(--iv-text-muted); font-size:12px; font-weight:500; }
.iv-shell-page .settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; }
.iv-shell-page .settings-grid label { display:grid; gap:6px; color:var(--iv-text-muted); font-size:11px; font-weight:750; }
.iv-shell-page .settings-grid label > input[type=checkbox] { display:inline-flex; margin-right:7px; }
.iv-shell-page .settings-messages { grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:0; }
.iv-shell-page .settings-test { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; padding:0 14px 14px; }
.iv-shell-page .settings-test label { display:grid; gap:6px; color:var(--iv-text-muted); font-size:11px; font-weight:750; }
.iv-shell-page .settings-state { min-height:18px; color:var(--iv-text-muted); font-size:11px; font-weight:700; }
.iv-shell-page .settings-state.success { color:var(--iv-success); }
.iv-shell-page .settings-state.error { color:var(--iv-danger); }
.iv-shell-page .settings-switch { display:inline-flex!important; display:flex!important; grid-template-columns:none!important; align-items:center; gap:7px; color:var(--iv-success)!important; }
.iv-shell-page .setting-card { min-height:0; padding:18px; border:1px solid var(--iv-border); border-radius:var(--iv-radius); background:var(--iv-surface); box-shadow:var(--iv-shadow); }
.iv-shell-page .setting-card p { margin:8px 0 14px; color:var(--iv-text-muted); font-size:12px; line-height:1.5; }
.iv-shell-page .setting-kicker { display:block; margin-bottom:6px; color:var(--iv-primary); font-size:9px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.iv-shell-page .setting-status { display:inline-flex; color:var(--iv-success); font-size:11px; font-weight:800; }
.iv-shell-page .voice-audio { width:100%; margin:10px 14px 0; max-width:420px; }
@media (max-width:760px) { .iv-shell-page .settings-home,.iv-shell-page .settings-grid,.iv-shell-page .settings-messages { grid-template-columns:1fr; }.iv-shell-page .settings-test { grid-template-columns:1fr; }.iv-shell-page .settings-test .button-primary { width:100%; } }

/* Dispositivos: inventario compacto; la configuración detallada sigue en sus paneles existentes. */
.iv-shell-page .device-card { display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border:1px solid var(--iv-border); border-radius:var(--iv-radius); background:var(--iv-surface); box-shadow:var(--iv-shadow); }
.iv-shell-page .device-card > button:first-child { display:block; min-width:0; }
.iv-shell-page .device-card-image { display:none; }
.iv-shell-page .device-card-body { padding:14px; }
.iv-shell-page .device-card > div:last-child { border-top:1px solid var(--iv-border)!important; padding:10px 14px!important; }
.iv-shell-page .device-card .action-button { min-height:30px; border:1px solid var(--iv-border); border-radius:8px; padding:0 9px; background:var(--iv-surface-elevated); color:var(--iv-text); font-size:10px; font-weight:800; }
.iv-shell-page .device-card .live-action { border-color:#c8d0ff; background:var(--iv-primary-soft); color:var(--iv-primary); }
.iv-shell-page #camera-config,.iv-shell-page #diagnostic-config { border-radius:var(--iv-radius); padding:16px; }
.iv-shell-page .device-collapsible { border:1px solid var(--iv-border); border-radius:var(--iv-radius); background:var(--iv-surface); box-shadow:var(--iv-shadow); overflow:hidden; }
.iv-shell-page .device-collapsible > summary { cursor:pointer; list-style:none; padding:13px 16px; color:var(--iv-text); font-size:12px; font-weight:850; }
.iv-shell-page .device-collapsible > summary::-webkit-details-marker { display:none; }
.iv-shell-page .device-collapsible > summary:before { content:'＋'; display:inline-block; width:18px; color:var(--iv-primary); }
.iv-shell-page .device-collapsible[open] > summary:before { content:'−'; }
.iv-shell-page .device-collapsible > section, .iv-shell-page .device-collapsible > div { margin:0!important; border:0!important; border-top:1px solid var(--iv-border)!important; border-radius:0!important; box-shadow:none!important; }
.iv-shell-page #camera-config .grid,.iv-shell-page #diagnostic-config .grid { gap:10px; }
.iv-shell-page #camera-config .field,.iv-shell-page #diagnostic-config .field { margin-top:5px; }
.iv-shell-page #camera-config button,.iv-shell-page #diagnostic-config button { min-height:34px; }
.iv-shell-page #device-overview { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; padding:14px 16px; border:1px solid var(--iv-border); border-radius:var(--iv-radius); background:var(--iv-surface); box-shadow:var(--iv-shadow); }
.iv-shell-page #device-welcome { display:none; }
.iv-shell-page #device-stats { margin-bottom:14px; }
.iv-shell-page #device-stats > div { padding:11px!important; }
.iv-shell-page #device-overview h1 { margin:0; font-size:20px; letter-spacing:-.03em; }
.iv-shell-page #device-overview p { margin:4px 0 0; color:var(--iv-text-muted); font-size:12px; }
@media (max-width:760px) { .iv-shell-page #device-overview { align-items:flex-start; flex-direction:column; } }

/* Responsive foundation shared by every view mounted in the AppShell. */
*, *::before, *::after { box-sizing: border-box; }
html.iv-shell-html, body.iv-shell-body { overflow-x: hidden; }
body.iv-shell-body img, body.iv-shell-body video, body.iv-shell-body canvas, body.iv-shell-body svg { max-width: 100%; }
body.iv-shell-body input, body.iv-shell-body select, body.iv-shell-body textarea, body.iv-shell-body button { max-width: 100%; }
body.iv-shell-body input, body.iv-shell-body select, body.iv-shell-body textarea { min-width: 0; }
body.iv-shell-body pre, body.iv-shell-body code { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.iv-shell-header-inner, .iv-shell-layout, .iv-shell-page, .iv-shell-page > main, .iv-shell-page > .shell, .iv-shell-page > .app-main, .iv-shell-page > .monitor-main { min-width: 0; }
.iv-shell-brand { flex-shrink: 1; }
.iv-shell-brand > span { min-width: 0; }
.iv-shell-brand strong, .iv-shell-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-shell-page .field, .iv-shell-page input:not([type="checkbox"]):not([type="radio"]), .iv-shell-page select, .iv-shell-page textarea { width: 100%; }
.iv-shell-page .button-row, .iv-shell-page .heading-actions, .iv-shell-page .header-actions, .iv-shell-page .iv-shell-heading-actions { min-width: 0; }
.iv-shell-page .button-row > *, .iv-shell-page .heading-actions > *, .iv-shell-page .header-actions > * { max-width: 100%; }
.iv-shell-page .panel-heading h2, .iv-shell-page .panel-heading > span, .iv-shell-page .section-heading h2, .iv-shell-page .section-heading > span { min-width: 0; overflow-wrap: anywhere; }
.iv-shell-page .list-row, .iv-shell-page .recording-row, .iv-shell-page .company-row, .iv-shell-page .people-card { min-width: 0; }
.iv-shell-page .list-main, .iv-shell-page .company-row > div, .iv-shell-page .people-card > div { min-width: 0; }
.iv-shell-page .list-main strong, .iv-shell-page .list-main small, .iv-shell-page .company-row strong, .iv-shell-page .company-row small { overflow-wrap: anywhere; }

/* The inner pages use different legacy styles, so these rules intentionally
   target their shared layout contracts instead of individual implementations. */
.iv-shell-page .page-heading,
.iv-shell-page .monitor-intro,
.iv-shell-page .iv-page-header,
.iv-shell-page .company-section-head { min-width: 0; }
.iv-shell-page .page-heading > *,
.iv-shell-page .monitor-intro > *,
.iv-shell-page .iv-page-header > *,
.iv-shell-page .company-section-head > * { min-width: 0; }
.iv-shell-page .camera-actions { min-width: 0; }
.iv-shell-page .camera-actions > a, .iv-shell-page .camera-actions > button { min-width: 0; }

@media (max-width: 900px) {
  .iv-shell-page .content-grid { grid-template-columns: minmax(0, 1fr); }
  .iv-shell-page .people-research-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-shell-page .people-research-layout > .people-detail-panel { grid-column: 1 / -1; }
  .iv-shell-page .settings-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .iv-shell-header-inner { gap: 8px; }
  .iv-shell-brand { min-width: 0; max-width: calc(100% - 48px); }
  .iv-shell-brand img { flex: 0 0 34px; width: 34px; height: 34px; }
  .iv-shell-brand strong { font-size: 13px; }
  .iv-shell-brand small { font-size: 8px; }
  .iv-shell-drawer { padding-inline: 10px; }
  .iv-shell-drawer.open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-shell-page > .iv-page-header,
  .iv-shell-page > .monitor-main,
  .iv-shell-page > .app-main,
  .iv-shell-page > .shell,
  .iv-shell-page > main { width: 100%; max-width: 100%; }
  .iv-shell-page .page-heading,
  .iv-shell-page .monitor-intro,
  .iv-shell-page .iv-page-header,
  .iv-shell-page .company-section-head { display: block; }
  .iv-shell-page .page-heading .heading-actions,
  .iv-shell-page .iv-page-header .header-actions,
  .iv-shell-page .iv-page-header .iv-shell-heading-actions,
  .iv-shell-page .company-section-head > .button,
  .iv-shell-page .company-section-head > a { margin-top: 12px; }
  .iv-shell-page .heading-actions,
  .iv-shell-page .header-actions,
  .iv-shell-page .button-row { align-items: stretch; }
  .iv-shell-page .heading-actions > .button,
  .iv-shell-page .heading-actions > .button-primary,
  .iv-shell-page .header-actions > .button,
  .iv-shell-page .header-actions > .button-primary { flex: 1 1 150px; }
  .iv-shell-page .panel-heading { align-items: flex-start; flex-wrap: wrap; }
  .iv-shell-page .panel-heading > span { flex: 1 1 100%; }
  .iv-shell-page .summary { max-width: 100%; }
  .iv-shell-page .summary-item { min-width: 0; }
  .iv-shell-page .filterbar { align-items: stretch; }
  .iv-shell-page .filterbar > input, .iv-shell-page .filterbar > select { flex: 1 1 180px; max-width: none; }
  .iv-shell-page .recording-row { gap: 10px; }
  .iv-shell-page .recording-row .button-row { width: 100%; }
  .iv-shell-page .recording-row .button-row > * { flex: 1 1 140px; }
  .iv-shell-page .camera-actions { align-items: stretch; }
  .iv-shell-page .camera-actions > a, .iv-shell-page .camera-actions > button { flex: 1 1 135px; }
  .iv-shell-page .camera-more { flex: 0 0 auto!important; }
  .iv-shell-page .people-research-layout { grid-template-columns: minmax(0, 1fr); }
  .iv-shell-page .people-research-layout > .people-detail-panel { grid-column: auto; }
  .iv-shell-page .people-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-shell-page .people-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-shell-page .people-profile-header { align-items: flex-start; flex-wrap: wrap; }
  .iv-shell-page .people-dialog { width: 100%; max-height: calc(100dvh - 20px); overflow: auto; }
  .iv-shell-page .people-dialog-actions { flex-wrap: wrap; }
  .iv-shell-page .people-dialog-actions > * { flex: 1 1 130px; }
  .iv-shell-page .plant-canvas-head { align-items: flex-start; flex-wrap: wrap; }
  .iv-shell-page .plant-canvas-head > span { order: 3; flex: 1 1 100%; }
  .iv-shell-page .plant-zoom { margin-left: auto; }
  .iv-shell-page .tracking-filters { align-items: stretch; }
  .iv-shell-page .tracking-filters label { width: 100%; }
  .iv-shell-page .tracking-filters input, .iv-shell-page .tracking-filters select { max-width: none; flex: 1; }
  .iv-shell-page .activity-panel { position: static; }
  .iv-shell-page .monitor-intro h1 { font-size: clamp(24px, 8vw, 32px); }
  .iv-shell-page .monitor-workspace { grid-template-columns: minmax(0, 1fr); }
  .iv-shell-page .monitor-shell .camera-grid,
  .iv-shell-page .monitor-shell .camera-grid.layout-auto,
  .iv-shell-page .monitor-shell .camera-grid.layout-hero,
  .iv-shell-page .monitor-shell .camera-grid.layout-list,
  .iv-shell-page .monitor-shell .camera-grid.layout-dual,
  .iv-shell-page .monitor-shell .camera-grid.layout-surround,
  .iv-shell-page .monitor-shell .camera-grid.layout-grid-2,
  .iv-shell-page .monitor-shell .camera-grid.layout-grid-3,
  .iv-shell-page .monitor-shell .camera-grid.layout-grid-4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .iv-shell-page .monitor-shell .camera-grid.layout-hero .camera-card[data-layout-role="hero"],
  .iv-shell-page .monitor-shell .camera-grid.layout-list .camera-card[data-layout-role="hero"],
  .iv-shell-page .monitor-shell .camera-grid.layout-auto .camera-card[data-layout-role="hero"] { grid-row: auto; }
  .iv-shell-page .monitor-shell .camera-grid.layout-surround .camera-card[data-layout-role] { grid-column: auto; grid-row: auto; }
  .iv-shell-page .monitor-shell .camera-stage-action { opacity: 1; }
}

@media (max-width: 480px) {
  .iv-shell-header-inner { padding-inline: 10px; }
  .iv-shell-drawer.open { grid-template-columns: 1fr; }
  .iv-shell-page > .iv-page-header,
  .iv-shell-page > .monitor-main,
  .iv-shell-page > .app-main,
  .iv-shell-page > .shell,
  .iv-shell-page > main { padding-inline: 10px!important; }
  .iv-shell-page .summary { grid-template-columns: 1fr; }
  .iv-shell-page .summary-item { min-height: auto; }
  .iv-shell-page .people-detail-grid, .iv-shell-page .people-reference-grid { grid-template-columns: 1fr; }
  .iv-shell-page .people-confirm { grid-template-columns: 1fr; }
  .iv-shell-page .people-confirm img { width: 100%; height: 170px; }
  .iv-shell-page .people-steps { grid-template-columns: repeat(5, minmax(54px, 1fr)); overflow-x: auto; }
  .iv-shell-page .people-step-label { min-width: 54px; }
  .iv-shell-page .button-row > *, .iv-shell-page .heading-actions > *, .iv-shell-page .header-actions > * { width: 100%; flex-basis: 100%; }
  .iv-shell-page .camera-more { width: auto!important; flex-basis: auto!important; }
}