@import url('./design-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
/* Shared product components. Color and dimension sources: design/tokens.json. */
:root{font-family:var(--font-family),var(--font-fallback);font-synthesis:none;color-scheme:dark;color:var(--color-text);background:var(--color-background);--green:var(--color-success);--muted:var(--color-text-secondary);--line:var(--color-border);--dark:var(--color-background)}
*{box-sizing:border-box}body{margin:0;font-size:var(--font-size-body);line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;background:none;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--color-accent);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:var(--font-size-page-desktop);font-weight:600;line-height:1.2;letter-spacing:-1px}h2{font-size:var(--font-size-card-title);font-weight:600;line-height:1.35;letter-spacing:-.4px}h3{font-size:var(--font-size-body-large);font-weight:700;line-height:1.45}strong{font-weight:600}.icon{width:var(--size-icon);height:var(--size-icon);flex-shrink:0}.grow{flex:1;min-width:0}[hidden]{display:none!important}
/* Application shell. The space name appears only in the top bar. */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--size-sidebar);padding:var(--space-xxl) var(--space-lg);display:flex;flex-direction:column;background:var(--color-background);border-right:1px solid var(--line);z-index:10}.brand{padding:var(--space-sm);margin-bottom:var(--space-section)}.brand img{width:100%;display:block;}.nav{display:flex;flex-direction:column;gap:var(--space-sm)}.nav button{display:flex;align-items:center;gap:var(--space-md);text-align:left;padding:var(--space-lg);font-weight:600;border-radius:var(--radius-control);color:var(--muted);min-height:var(--size-control)}.nav button:hover{background:var(--color-surface)}.nav button.active{background:var(--color-accent-surface);color:var(--color-accent)}.sidebar-foot{margin-top:auto;padding:var(--space-lg);font-size:var(--font-size-caption);line-height:1.8;color:var(--color-text-subtle)}.sidebar-foot b{display:block;color:var(--color-text-secondary);font-weight:500}.layout{margin-left:var(--size-sidebar)}.topbar{min-height:96px;padding:var(--space-lg) var(--space-page);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);border-bottom:1px solid var(--line)}.space-switch{display:flex;align-items:center;gap:var(--space-md);padding:0;text-align:left;min-width:0;min-height:var(--size-control);border-radius:var(--radius-control)}.space-switch>span:not(.space-icon){min-width:0}.space-switch strong{font-size:var(--font-size-body-large);display:block;overflow-wrap:anywhere}.space-switch small{display:block;font-size:var(--font-size-caption);color:var(--muted);margin-top:var(--space-xs)}.space-switch>.icon{width:20px}.space-icon{width:var(--size-control);height:var(--size-control);border-radius:var(--radius-control);display:grid;place-items:center;background:var(--color-surface-raised);color:var(--color-text-secondary);flex-shrink:0}.top-right{display:flex;align-items:center;gap:var(--space-lg)}.avatar{border-radius:var(--radius-pill);width:var(--size-control);height:var(--size-control);background:var(--color-accent-surface);color:var(--color-accent);font-weight:600;flex-shrink:0}.content{max-width:var(--size-content-max);margin:0 auto;padding:var(--space-section) var(--space-page) var(--space-page)}.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-xxl)}.subtitle{font-size:var(--font-size-body);color:var(--muted);margin-top:var(--space-sm);line-height:1.7}.heading>div{min-width:0}.eyebrow{font-size:var(--font-size-caption);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--color-text-subtle);margin-bottom:var(--space-md)}
/* Actions and status are separate: accent = action, success = armed. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--color-surface-raised);font-size:var(--font-size-body);font-weight:600;min-height:var(--size-control);line-height:1.45;text-align:center}.button:hover:not(:disabled){background:var(--color-surface-hover)}.button.primary{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}.button.primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.button.soft{background:var(--color-accent-surface);color:var(--color-accent);border-color:transparent}.button.danger{background:var(--color-danger-surface);color:var(--color-danger);border-color:transparent}.button.wide{width:100%}.button .icon{width:20px;height:20px}.pill{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-pill);font-size:var(--font-size-caption);font-weight:600;white-space:nowrap;background:var(--color-surface-raised);color:var(--color-text-secondary);line-height:1.3}.pill.green{background:var(--color-success-surface);color:var(--color-success)}.pill.amber{background:var(--color-warning-surface);color:var(--color-warning)}.pill.red{background:var(--color-danger-surface);color:var(--color-danger)}.dot{width:6px;height:6px;background:currentColor;border-radius:var(--radius-pill)}.icon-button{min-width:var(--size-touch);min-height:var(--size-touch);display:grid;place-items:center;flex-shrink:0;border-radius:var(--radius-pill)}.icon-button:hover{background:var(--color-surface-raised)}.chip{border:1px solid var(--line);background:var(--color-surface);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-pill);font-size:var(--font-size-small);min-height:var(--size-touch);font-weight:600}.chip.active,.chip[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.filters{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-xl)}.select{background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--line);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-control);font-size:var(--font-size-small);max-width:100%;min-height:var(--size-control)}
/* Guard group: same component in the live app and design review. */
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl)}.group-card{border:0;background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-xl);position:relative;display:flex;flex-direction:column;min-width:0}.group-card.armed{background:var(--color-surface)}.group-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.shield-orb,.group-cameras{height:64px;width:64px;border-radius:var(--radius-pill);background:var(--color-surface-raised);color:var(--color-text-secondary);display:grid;place-items:center;flex-shrink:0}.shield-orb .icon,.group-cameras>.icon{width:32px;height:32px;stroke-width:1.5}.armed .shield-orb{background:var(--color-success-surface);color:var(--color-success)}.is-alarm .shield-orb{background:var(--color-danger-surface);color:var(--color-danger)}.group-title{text-align:left;padding:0;margin:var(--space-xl) 0 var(--space-lg);min-height:0}.group-title h2{font-size:var(--font-size-card-title);overflow-wrap:anywhere}.group-title small{font-size:var(--font-size-small);color:var(--muted);display:block;margin-top:var(--space-sm);line-height:1.6}.group-meta{font-size:var(--font-size-small);color:var(--muted);margin:auto 0 var(--space-lg);display:flex;gap:var(--space-sm);align-items:center;min-height:40px}.group-meta .icon{width:16px;height:16px}.arm-actions{display:grid;gap:var(--space-sm);margin-top:auto}.arm-button{width:100%;min-height:var(--size-arm-button);padding:var(--space-md) var(--space-lg);font-size:var(--font-size-body);border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-weight:700;background:var(--color-surface-raised);color:var(--color-text);border:1px solid transparent;line-height:1.4}.arm-button:hover:not(:disabled){background:var(--color-surface-hover)}.arm-button .icon{width:20px;height:20px;flex-shrink:0}.arm-button.is-selected{background:var(--color-accent);color:var(--color-on-accent)}.arm-button.is-selected:hover:not(:disabled){background:var(--color-accent-hover)}.group-note{font-size:var(--font-size-caption);line-height:1.6;color:var(--color-warning);margin-top:var(--space-md)}.detector-health{font-size:var(--font-size-caption);margin:var(--space-lg) 0;display:flex;align-items:flex-start;gap:var(--space-sm)}.detector-health .icon{width:16px;height:16px;margin-top:2px}.text-warning{color:var(--color-warning)!important}.text-danger{color:var(--color-danger)!important}.group-card .filters{margin-bottom:0;gap:var(--space-sm)}.group-card .filters .button{padding:var(--space-sm) var(--space-md);min-height:var(--size-touch);font-size:var(--font-size-caption);border-radius:var(--radius-small)}
/* Lists, cameras, empty states and supporting information. */
.panel{background:var(--color-surface);border:0;border-radius:var(--radius-card);overflow:hidden}.event-row,.list-row{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);width:100%;border-bottom:1px solid var(--line);text-align:left;min-height:var(--size-control)}.event-row:last-child,.list-row:last-child{border-bottom:0}.event-row:hover,.list-row:hover{background:var(--color-surface-raised)}.event-icon{background:var(--color-surface-raised);color:var(--muted);width:var(--size-control);height:var(--size-control);border-radius:var(--radius-control);display:grid;place-items:center;flex-shrink:0}.event-icon.alarm{background:var(--color-danger-surface);color:var(--color-danger)}.event-icon .icon{width:22px;height:22px}.event-row strong,.list-row strong{display:block;font-size:var(--font-size-body);font-weight:600;line-height:1.6;overflow-wrap:anywhere}.event-row small,.list-row small{font-size:var(--font-size-caption);color:var(--muted);display:block;line-height:1.7;margin-top:var(--space-xs);overflow-wrap:anywhere}.event-time{font-size:var(--font-size-caption);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.event-row>.icon{width:18px}.link-button{font-size:var(--font-size-small);color:var(--color-accent);display:flex;align-items:center;gap:var(--space-sm);min-height:var(--size-touch)}.link-button .icon{width:18px;height:18px}.summary-strip{display:flex;align-items:center;gap:var(--space-md);background:var(--color-surface);border:0;border-radius:var(--radius-control);padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-xl)}.summary-strip>.icon{color:var(--color-success)}.summary-strip strong{font-size:var(--font-size-body)}.summary-strip small{display:block;font-size:var(--font-size-caption);color:var(--muted);margin-top:var(--space-xs)}.summary-strip .status{margin-left:auto;color:var(--color-success);font-size:var(--font-size-caption);white-space:nowrap}.section-label{display:flex;align-items:center;justify-content:space-between;margin:var(--space-xl) 0 var(--space-lg);font-size:var(--font-size-body);font-weight:600}.section-label small{font-size:var(--font-size-caption);color:var(--muted);font-weight:400}.demo-note{font-size:var(--font-size-caption);color:var(--color-text-subtle);line-height:1.8;display:flex;gap:var(--space-sm);align-items:flex-start;margin-top:var(--space-xl);max-width:80ch}.demo-note .icon{width:16px;height:16px;margin-top:3px}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl)}.camera-card{background:var(--color-surface);border:0;border-radius:var(--radius-card);overflow:hidden;cursor:pointer;text-align:left;padding:0;min-width:0}.camera-card:hover{background:var(--color-surface-raised)}.camera-card canvas{width:100%;display:block;aspect-ratio:16/9}.camera-info{padding:var(--space-lg) var(--space-xl);display:flex;align-items:center;gap:var(--space-md)}.camera-info strong{font-size:var(--font-size-body-large)}.camera-info small{font-size:var(--font-size-caption);display:block;color:var(--muted);margin-top:var(--space-xs);line-height:1.7}.live-placeholder{height:176px;background:var(--color-surface-raised);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-md);color:var(--muted);font-size:var(--font-size-caption)}.live-placeholder>.icon{width:36px;height:36px}.live-open{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-small);color:var(--color-accent)}.live-open .icon{width:20px;height:20px}.live-heading{display:flex;justify-content:space-between;margin-bottom:var(--space-lg)}.real-video{background:var(--color-background);object-fit:contain;max-height:55dvh}.real-video+.help{margin-top:var(--space-md)}.empty{text-align:center;padding:var(--space-page) var(--space-xl);color:var(--muted)}.empty>.icon{width:48px;height:48px;color:var(--color-text-subtle);margin-bottom:var(--space-lg)}.empty h3{color:var(--color-text);margin-bottom:var(--space-sm)}.empty p{font-size:var(--font-size-body);line-height:1.8;max-width:390px;margin:0 auto var(--space-xl)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}.setting-card{background:var(--color-surface);border:0;border-radius:var(--radius-card);padding:var(--space-xl);text-align:left;display:flex;gap:var(--space-lg);align-items:center;min-width:0}.setting-card:hover{background:var(--color-surface-raised)}.setting-card strong{font-size:var(--font-size-body-large);display:block}.setting-card small{font-size:var(--font-size-caption);color:var(--muted);display:block;margin-top:var(--space-xs);line-height:1.7}
/* Forms and overlays share the same surfaces and controls. */
.modal-backdrop{position:fixed;inset:0;z-index:40;background:var(--color-overlay);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;padding:var(--space-xl)}.modal{width:560px;max-width:100%;max-height:90dvh;overflow:auto;background:var(--color-surface);border:0;border-radius:var(--radius-dialog)}.modal.large{width:820px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl);border-bottom:1px solid var(--line);gap:var(--space-lg)}.modal-header h2{font-size:var(--font-size-card-title)}.modal-body{padding:var(--space-xl)}.field{display:block;font-size:var(--font-size-small);font-weight:600;margin-bottom:var(--space-lg)}.field input,.field select,.field textarea,.invitation-code{display:block;width:100%;background:var(--color-background);border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-md) var(--space-lg);color:var(--color-text);margin-top:var(--space-sm);font-size:var(--font-size-body);min-height:var(--size-control)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-accent)}input::placeholder,textarea::placeholder{color:var(--color-text-subtle)}input[aria-invalid=true]{border-color:var(--color-danger)}.check-row{display:flex;align-items:center;gap:var(--space-md);font-size:var(--font-size-body);margin:var(--space-xs) 0;line-height:1.65;min-height:var(--size-touch)}.check-row{cursor:pointer}.check-row:has(input:disabled){cursor:not-allowed}.form-error{color:var(--color-danger);font-size:var(--font-size-small);line-height:1.7;margin-bottom:var(--space-md)}.form-error:empty{margin:0}.help{font-size:var(--font-size-small);color:var(--muted);line-height:1.8;margin-bottom:var(--space-lg)}.stream{width:100%;aspect-ratio:16/9;display:block;border-radius:var(--radius-control);background:var(--color-background)}.stream.editor{touch-action:none;cursor:crosshair}.video-controls{display:flex;align-items:center;gap:var(--space-md);margin:var(--space-md) 0 var(--space-xl);font-size:var(--font-size-caption);color:var(--muted)}.video-controls input{flex:1;accent-color:var(--color-accent);min-width:50px}.facts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);margin:var(--space-xl) 0}.facts dt{font-size:var(--font-size-caption);color:var(--muted);margin-bottom:var(--space-xs)}.facts dd{margin:0;font-size:var(--font-size-body);font-weight:600;overflow-wrap:anywhere}.rule-toolbar{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin:var(--space-md) 0 var(--space-xl)}.rule-toolbar small{margin-left:0;color:var(--muted);font-size:var(--font-size-caption)}.popover{position:fixed;z-index:30;top:88px;left:272px;background:var(--color-surface);border:0;padding:var(--space-sm);border-radius:var(--radius-card);width:320px;max-width:calc(100vw - 32px)}.popover button{width:100%;display:flex;gap:var(--space-md);align-items:center;padding:var(--space-lg);text-align:left;border-radius:var(--radius-control);font-size:var(--font-size-body);min-height:var(--size-control)}.popover button:hover{background:var(--color-surface-raised)}.popover small{display:block;color:var(--muted);font-size:var(--font-size-caption);margin-top:var(--space-xs)}.invitation-code{min-height:100px;resize:vertical;overflow-wrap:anywhere;font-family:monospace}.zone-preview{position:relative;aspect-ratio:16/9;background:var(--color-background);border-radius:var(--radius-control);overflow:hidden}.zone-preview img,.zone-preview svg{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.zone-preview svg{pointer-events:none}.rule-canvas{width:100%;height:auto;aspect-ratio:16/9;display:block;background:var(--color-background);border-radius:var(--radius-control);touch-action:none;cursor:crosshair}.rule-editor-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);margin:var(--space-md) 0 var(--space-xl)}.rule-objects{border:0;border-radius:var(--radius-control);padding:var(--space-md) var(--space-lg);margin:0 0 var(--space-lg);display:flex;flex-wrap:wrap;gap:var(--space-xl)}.rule-objects legend{font-size:var(--font-size-small);font-weight:600;padding:0 var(--space-sm)}.rule-frame-status{margin-top:var(--space-sm)}.rule-objects .check-row{margin:0}
/* Authentication is part of the same product, not a separate theme. */
.auth-shell{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;background:var(--color-background)}.auth-art{background:var(--color-surface);padding:var(--space-page);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;border-right:1px solid var(--line)}.auth-art>.icon{width:80px;height:80px;color:var(--color-accent);margin-bottom:var(--space-section)}.auth-art h1{font-size:var(--font-size-hero);line-height:1.25;max-width:480px;font-weight:500}.auth-art p{color:var(--muted);font-size:var(--font-size-body-large);line-height:1.9;margin-top:var(--space-xl);max-width:360px}.auth-main{display:flex;align-items:center;justify-content:center;padding:var(--space-page)}.auth-form{width:400px;max-width:100%}.auth-logo{display:block;width:230px;max-width:100%;margin-inline:auto;margin-bottom:var(--space-xxl);}.auth-form h2{font-size:var(--font-size-page-mobile);margin-bottom:var(--space-sm)}.auth-form .subtitle{margin-bottom:var(--space-xl)}.auth-links{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-lg);font-size:var(--font-size-small);gap:var(--space-md)}.text-button{color:var(--color-accent);font-size:var(--font-size-small);padding:var(--space-sm) 0;min-height:var(--size-touch)}.auth-demo{background:var(--color-surface);border:0;padding:var(--space-lg);border-radius:var(--radius-control);font-size:var(--font-size-caption);color:var(--muted);line-height:1.8;margin-top:var(--space-xl)}
#toast{position:fixed;bottom:var(--space-xl);left:calc(50% + 120px);transform:translateX(-50%) translateY(16px);z-index:100;background:var(--color-surface-raised);border:0;color:var(--color-text);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-control);opacity:0;pointer-events:none;transition:opacity var(--motion-fast),transform var(--motion-fast);font-size:var(--font-size-small);max-width:90vw}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.bottomnav{display:none}
@media(min-width:1100px){.live-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px) and (min-width:761px){.sidebar{width:200px}.layout{margin-left:200px}.topbar{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.content{padding:var(--space-xxl)}.group-card{padding:var(--space-lg)}.group-top{align-items:center}.popover{left:224px}#toast{left:calc(50% + 100px)}}
@media(max-width:760px){.sidebar{display:none}.layout{margin-left:0}.topbar{min-height:88px;padding:var(--space-lg) var(--space-xl);gap:var(--space-md)}.top-right{gap:var(--space-sm)}.top-right>.pill{display:none}.space-switch{gap:var(--space-md)}.space-switch strong{font-size:var(--font-size-body)}.space-switch small{font-size:var(--font-size-caption)}.space-switch .space-icon{width:var(--size-touch);height:var(--size-touch)}.content{padding:var(--space-xl) var(--space-xl) calc(104px + env(safe-area-inset-bottom))}.heading{margin-bottom:var(--space-xl);flex-wrap:wrap;align-items:center}h1{font-size:var(--font-size-page-mobile)}.subtitle{font-size:var(--font-size-small)}.groups,.camera-grid,.settings-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.group-card{padding:var(--space-xl)}.group-top{flex-direction:row}.shield-orb,.group-cameras{width:56px;height:56px}.group-title{min-height:0;margin:var(--space-xl) 0 var(--space-lg)}.group-meta{min-height:0;margin:0 0 var(--space-lg)}.group-title h2{font-size:var(--font-size-card-title)}.bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--color-background);border-top:1px solid var(--line);padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));z-index:15;justify-content:space-around;gap:var(--space-xs)}.bottomnav button{display:flex;flex:1;align-items:center;flex-direction:column;gap:var(--space-xs);padding:var(--space-sm) var(--space-xs);min-height:60px;min-width:0;border-radius:var(--radius-control);color:var(--muted);font-size:var(--font-size-caption);font-weight:500}.bottomnav button.active{color:var(--color-accent);background:var(--color-accent-surface)}.bottomnav .icon{width:22px;height:22px}.summary-strip{padding:var(--space-lg);flex-wrap:wrap}.summary-strip .status{margin-left:0}.event-row,.list-row{padding:var(--space-lg);gap:var(--space-md)}.event-row strong{font-size:var(--font-size-small)}.event-row small{font-size:var(--font-size-caption)}.event-row>.icon{display:none}.event-icon{width:40px;height:40px}.popover{left:var(--space-lg);top:80px}.modal-backdrop{padding:var(--space-md)}.modal{max-height:94dvh;border-radius:var(--radius-card)}.modal-header,.modal-body{padding:var(--space-xl)}.modal-header h2{font-size:20px}.auth-shell{display:block}.auth-art{display:none}.auth-main{min-height:100dvh;padding:var(--space-xxl) var(--space-xl)}.auth-logo{margin-bottom:var(--space-xxl)}.facts{gap:var(--space-lg)}#toast{left:50%;bottom:100px;width:max-content;max-width:calc(100vw - 32px)}.rule-toolbar small{width:100%;margin:0}.setting-card{padding:var(--space-xl)}}
@media(max-width:360px){.topbar{padding-left:var(--space-lg);padding-right:var(--space-lg)}.content{padding-left:var(--space-lg);padding-right:var(--space-lg)}.group-card{padding:var(--space-lg)}.space-switch .space-icon{display:none}.event-icon{display:none}.modal-header,.modal-body{padding:var(--space-lg)}.group-top{gap:var(--space-sm)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Inputs have a stronger boundary than decorative cards. */
.field input,.field select,.field textarea,.select{border-color:var(--color-control-border)}

body.modal-open{overflow:hidden}

/* Guard cards show only identity, status and the command; details live in settings. */
.group-card .group-title{margin-bottom:var(--space-xl)}.group-card>.arm-button{margin-top:auto}.group-card>.detector-health{margin:var(--space-lg) 0 0}

/* Weekly schedule controls; shared visual contract, preview-only behavior for now. */
.schedule-fieldset{border:0;padding:0;margin:0 0 var(--space-lg);min-width:0}.schedule-fieldset legend{font-size:var(--font-size-small);font-weight:600;margin-bottom:var(--space-sm)}.schedule-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-sm)}.schedule-days label{min-height:var(--size-touch);display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-xs);border-radius:var(--radius-small);background:var(--color-surface-raised);cursor:pointer}.schedule-days label:has(input:checked){background:var(--color-accent-surface);color:var(--color-accent)}@media(max-width:760px){.schedule-days{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Shared single-select control; popover escapes scrolling dialogs. */
.visually-hidden,.select-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.select-native{opacity:0;pointer-events:none}
.select-control{position:relative;display:inline-block;min-width:0;max-width:100%;vertical-align:middle}
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);width:100%;min-height:var(--size-control);padding:var(--space-md) var(--space-lg);padding-right:var(--space-xl);background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-control-border);border-radius:var(--radius-control);text-align:left;font-size:var(--font-size-small);font-weight:500;line-height:1.5}
.select-trigger:hover:not(:disabled){background:var(--color-surface-hover)}.select-trigger[aria-expanded=true]{border-color:var(--color-accent)}.select-trigger>.icon{width:18px;height:18px;flex:none}.select-value{min-width:0;overflow-wrap:anywhere}.select-control>.form-error{display:block;margin-top:var(--space-sm)}
.field>.select-control{display:block;width:100%}.select-control:has(>.select:disabled){opacity:1}.filters>.select-control{max-width:100%}
.select-menu{position:fixed;inset:auto;margin:0;padding:var(--space-sm);border:0;border-radius:var(--radius-control);background:var(--color-surface-raised);color:var(--color-text);box-shadow:0 var(--space-sm) var(--space-xl) var(--color-overlay);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-text-subtle) transparent;z-index:100;box-sizing:border-box}
.select-menu::backdrop{background:transparent;pointer-events:none}.select-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:var(--size-touch);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-small);font-size:var(--font-size-small);line-height:1.5;cursor:pointer}.select-option>span:first-child{min-width:0;overflow-wrap:anywhere}.select-option.is-active{background:var(--color-surface-hover)}.select-option[aria-selected=true]{background:var(--color-accent-surface);color:var(--color-accent);font-weight:600}.select-option[aria-disabled=true]{opacity:.45;cursor:not-allowed}.select-check{display:flex;flex-shrink:0;visibility:hidden}.select-check>.icon{width:18px;height:18px}.select-option[aria-selected=true] .select-check{visibility:visible}.select-group-label{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-caption);color:var(--color-text-subtle)}
.review-controls>.select-control{flex:1}@media(max-width:760px){.review-controls>.select-control{flex:1 1 100%;width:100%}}

/* Vertical detail rows: text at rest, explicit pencil / save / cancel while editing. */
.detail-fields{margin:0}.detail-row{padding:var(--space-lg) 0;border-bottom:1px solid var(--line);min-width:0}.detail-row:first-child{padding-top:0}.detail-row:last-child{border-bottom:0}.detail-row dt{font-size:var(--font-size-small);color:var(--muted);margin-bottom:var(--space-xs)}.detail-row dd{display:flex;align-items:center;gap:var(--space-lg);margin:0;min-height:var(--size-touch)}.detail-value{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--font-size-body-large);font-weight:600}.detail-pencil,.detail-cancel{background:var(--color-surface-raised);color:var(--color-text-secondary);border-radius:var(--radius-small)}.detail-pencil{color:var(--color-accent)}.detail-save{background:var(--color-accent);color:var(--color-on-accent);border-radius:var(--radius-small)}.detail-save:hover{background:var(--color-accent-hover)}.detail-pencil>.icon,.detail-save>.icon,.detail-cancel>.icon{width:20px;height:20px}.detail-editor{width:100%;min-width:0}.detail-input{display:block;width:100%;min-width:0;min-height:var(--size-control);padding:var(--space-md) var(--space-lg);border:1px solid var(--color-control-border);border-radius:var(--radius-control);background:var(--color-background);color:var(--color-text);font-size:var(--font-size-body-large)}.detail-edit-actions{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-sm)}.detail-editor .form-error{margin-top:var(--space-sm)}.detail-editor .form-error:empty{margin:0}

/* Destination menus are vertical rows; form actions and filters keep their own layout. */
.navigation-list{display:flex;flex-direction:column;background:var(--color-surface-raised);border-radius:var(--radius-control);overflow:hidden;margin-bottom:var(--space-xl)}.navigation-row{display:flex;align-items:center;gap:var(--space-md);width:100%;min-height:var(--size-arm-button);padding:var(--space-lg);text-align:left;border-bottom:1px solid var(--line);font-size:var(--font-size-body);font-weight:600}.navigation-row:last-child{border-bottom:0}.navigation-row:hover{background:var(--color-surface-hover)}.navigation-row>span{flex:1;min-width:0;overflow-wrap:anywhere}.navigation-row>.icon{width:20px;height:20px;color:var(--color-text-secondary)}.navigation-row>.icon:last-child{width:18px;height:18px}.navigation-row:focus-visible{outline-offset:-4px;border-radius:var(--radius-small)}

.group-status{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0}.group-status .pill{white-space:normal;padding:0;background:transparent;line-height:1.4;min-width:0}.group-status .dot{display:none}.group-cameras{position:relative;margin:0;padding:0;background:transparent;color:var(--color-accent)}.group-cameras:hover{background:transparent}.group-cameras.is-unavailable{color:var(--color-text)}.group-cameras.is-unknown{color:var(--color-text-secondary)}.group-cameras.is-partial{color:var(--color-warning)}.group-cameras>.camera-status-mark{position:absolute;right:0;bottom:0;width:var(--size-icon);height:var(--size-icon);padding:var(--space-xs);border-radius:var(--radius-pill);background:var(--color-surface-raised)}.camera-filters,.event-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}.camera-filter{display:block;min-width:0}.camera-filter>span:first-child{display:block;font-size:var(--font-size-small);color:var(--muted);margin-bottom:var(--space-sm)}.camera-filter>.select-control,.camera-filter>select{display:block;width:100%}.camera-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;margin:var(--space-sm) 0 var(--space-lg);min-height:var(--size-touch);color:var(--muted);font-size:var(--font-size-small)}@media(max-width:760px){.camera-filters,.event-filters{grid-template-columns:minmax(0,1fr)}}

/* Shared checkbox appearance; native semantics, labels, keyboard and FormData remain. */
input[type="checkbox"]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;box-sizing:border-box;width:var(--size-checkbox);height:var(--size-checkbox);min-width:var(--size-checkbox);min-height:var(--size-checkbox);flex:0 0 var(--size-checkbox);margin:0;padding:0;border:2px solid var(--color-control-border);border-radius:var(--radius-checkbox);background:var(--color-background);color:var(--color-on-accent);vertical-align:middle;cursor:pointer}
input[type="checkbox"]::before{content:"";display:block;width:var(--space-md);height:var(--space-md);background:currentColor;clip-path:polygon(0 48%,15% 33%,40% 59%,85% 5%,100% 20%,41% 91%);opacity:0}
input[type="checkbox"]:checked,input[type="checkbox"]:indeterminate{background:var(--color-accent);border-color:var(--color-accent)}input[type="checkbox"]:checked::before{opacity:1}input[type="checkbox"]:indeterminate::before{clip-path:none;height:2px;opacity:1}input[type="checkbox"]:hover:not(:disabled){border-color:var(--color-accent)}input[type="checkbox"]:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
@media(forced-colors:active){input[type="checkbox"]{-webkit-appearance:auto;appearance:auto;forced-color-adjust:auto}input[type="checkbox"]::before{display:none}}

.event-filters{align-items:end}

.live-camera-controls{display:grid;gap:var(--space-lg);margin:var(--space-xl) 0}.live-camera-controls>.button{width:100%}

.event-actions{display:grid;gap:var(--space-lg)}.event-actions>.navigation-list{margin:0}.event-actions>.button{width:100%}

.space-icon-field{border:0;padding:0;margin:0 0 24px;min-width:0}.space-icon-field legend{font-weight:700;margin-bottom:12px}.space-icon-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.space-icon-picker label{position:relative;min-width:0;cursor:pointer}.space-icon-picker input{position:absolute;opacity:0;width:1px;height:1px}.space-icon-picker span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:76px;padding:8px 4px;border-radius:var(--radius-control);background:var(--color-surface-raised);text-align:center}.space-icon-picker input:checked+span{background:var(--color-accent);color:var(--color-on-accent)}.space-icon-picker input:focus-visible+span{outline:2px solid var(--color-accent);outline-offset:3px}.space-icon-picker small{font-size:12px}

.select-menu-searchable{display:none;overflow:hidden;gap:var(--space-sm)}.select-menu-searchable:popover-open{display:flex;flex-direction:column}.select-menu .select-search{flex-shrink:0;min-width:0;width:100%;box-sizing:border-box;margin:0;min-height:var(--size-touch);font-size:16px}.select-results{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.select-empty{padding:var(--space-sm) var(--space-md);margin:0}.select-empty[hidden]{display:none}

/* Empty modal lists are explanatory text, never a button-like surface. */
.modal-empty{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-small);line-height:1.8;overflow-wrap:anywhere}

/* Shared hour/minute selection; no browser-native time popup. */
.time-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-md);align-items:end}.time-fields .field{margin:0;min-width:0}.time-label{font-size:var(--font-size-caption);color:var(--muted)}.time-separator{display:grid;place-items:center;min-height:var(--size-control);font-weight:600;padding-bottom:var(--space-sm)}.time-fields .select-value{font-variant-numeric:tabular-nums}

.installation-camera-choices{display:grid;gap:var(--space-md);margin-block:var(--space-lg)}.installation-camera-choices .help{display:block;margin:0}.installation-camera-choices .check-row{margin:0;min-height:var(--size-control)}

/* Recorder discovery: one physical camera per choice, streams are advanced settings. */
.discovery-camera{display:grid;grid-template-columns:auto 128px minmax(0,1fr);align-items:center;gap:var(--space-lg);padding:var(--space-md);background:var(--color-surface-raised);border-radius:var(--radius-small);cursor:pointer}
.discovery-camera:has(input:checked){background:var(--color-accent-surface)}
.discovery-preview{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:var(--color-background);border-radius:var(--radius-small);font-size:var(--font-size-caption);color:var(--muted);text-align:center}
.discovery-preview img{width:100%;height:100%;object-fit:contain}.discovery-preview [hidden]{display:none}
.discovery-name{min-width:0;overflow-wrap:anywhere}.discovery-name small{display:block;color:var(--muted);margin-top:var(--space-xs)}
.device-options{margin-block:var(--space-lg)}.device-options>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:var(--size-touch);padding:var(--space-md) 0;cursor:pointer;list-style:none;font-weight:600}.device-options>summary::-webkit-details-marker{display:none}.device-options>summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:var(--radius-small)}.device-options[open]>summary .icon{transform:rotate(90deg)}.device-options>.help{margin-bottom:var(--space-lg)}
@media(max-width:480px){.discovery-camera{grid-template-columns:auto 88px minmax(0,1fr);gap:var(--space-md);padding:var(--space-sm)}}

/* Camera catalog snapshots keep card geometry stable while refreshing. */
.camera-preview{display:block;position:relative;aspect-ratio:16/9;background:var(--color-surface-raised);overflow:hidden}
.camera-preview img{display:block;width:100%;height:100%;object-fit:cover}
.camera-preview-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);color:var(--muted);font-size:var(--font-size-caption)}
.camera-preview-empty>.icon{width:36px;height:36px}
.camera-preview-caption{position:absolute;left:var(--space-md);bottom:var(--space-md);max-width:calc(100% - 24px);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-small);background:var(--color-overlay);color:var(--color-text);font-size:var(--font-size-caption);line-height:1.5}
.camera-preview [hidden]{display:none}

/* Object selection shares the navigation list component. */
.navigation-row[aria-current="true"]{background:var(--color-accent-surface);color:var(--color-accent)}
.space-switch>.icon{flex-shrink:0}

/* Display the approved master without changing its pixels or geometry. */
.brand-art{display:block;position:relative;isolation:isolate;aspect-ratio:1582/360;overflow:hidden;background:var(--color-background)}
.brand-art img{position:absolute;display:block;width:121.302149%;max-width:none;height:auto;left:-10.935525%;top:-70.833333%;mix-blend-mode:lighten;filter:none}

/* A single focus edge for fields and select triggers, without a second outer ring. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,textarea:focus,select:focus,.select-trigger:focus-visible{border-color:var(--color-accent);outline:2px solid var(--color-accent);outline-offset:-2px}
.camera-selection-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.camera-selection-toolbar .help{flex-basis:100%;margin:0}.camera-selection-toolbar .button{flex:1;white-space:nowrap;padding-inline:var(--space-md)}


/* Background equipment tasks float above content; they never move page headings. */
.task-notice{position:fixed;z-index:95;top:var(--space-lg);right:var(--space-lg);width:420px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-card);background:var(--color-surface-raised);box-shadow:0 8px 32px #0005;font-size:var(--font-size-small)}
.task-notice-copy{min-width:0;overflow-wrap:anywhere;line-height:1.6}.task-notice-copy strong{display:block}.task-notice-copy p{margin:var(--space-xs) 0 0;color:var(--color-text-secondary)}
.task-notice[data-state="failed"] .task-notice-detail{color:var(--color-danger)}.task-notice[data-state="succeeded"] strong{color:var(--color-accent)}
.task-notice-close{align-self:start;width:44px;height:44px}.task-notice-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-sm)}.task-notice-actions .button{min-height:44px;padding:var(--space-sm) var(--space-md)}
@media(max-width:760px){.task-notice{top:max(var(--space-md),env(safe-area-inset-top));right:var(--space-md)}}

/* Camera selection and assignments keep navigation and save outside the scrolling fields. */
.modal:has(.modal-form){display:flex;flex-direction:column;overflow:hidden}
.modal:has(.modal-form)>.modal-header{flex-shrink:0}
.modal:has(.modal-form)>.modal-body{display:flex;flex-direction:column;min-height:0;padding:0}
.modal-form{display:flex;flex-direction:column;min-height:0}
.modal-form-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--space-xl)}


/* Keep operation controls separate from equipment navigation. */
.equipment-operation-actions{margin-block:var(--space-xl)}
.equipment-operation-actions:has(>[data-do="task-show"][hidden]){display:none}



/* App-styled confirmation in the native dialog top layer. */
.confirm-dialog{padding:0;color:var(--color-text);width:480px;max-width:calc(100vw - 2 * var(--space-md));margin:auto}
.confirm-dialog::backdrop{background:var(--color-overlay);backdrop-filter:blur(4px)}
.confirm-dialog #confirm-action-description>p:first-child{margin-bottom:var(--space-lg);overflow-wrap:anywhere}
.confirm-dialog .help{margin-bottom:0}

.confirm-dialog .form-error:not(:empty){margin-top:var(--space-lg)}

/* Current account and release identity, shared across application shells. */
.app-footer{position:fixed;inset:auto 0 0;z-index:15;height:var(--size-app-footer);display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);padding:var(--space-sm) var(--space-xl);background:var(--color-background);border-top:1px solid var(--line);color:var(--color-text-secondary)}
.footer-account{display:flex;align-items:center;gap:var(--space-md);min-height:var(--size-touch);min-width:0;max-width:55%;text-align:left;border-radius:var(--radius-small);padding:var(--space-xs) var(--space-sm)}
.footer-account:hover{background:var(--color-surface)}
.footer-avatar{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--color-accent-surface);color:var(--color-accent);font-weight:600}
.footer-account-copy{min-width:0}.footer-account-copy strong,.footer-account-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.footer-account-copy strong{font-size:var(--font-size-small);color:var(--color-text)}.footer-account-copy small{font-size:var(--font-size-caption)}
.footer-product{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-lg);flex-shrink:0;font-size:var(--font-size-caption)}
.footer-brand{display:inline-flex;align-items:center;gap:var(--space-sm);letter-spacing:.7px;white-space:nowrap}.footer-symbol{display:block;flex:none;width:var(--size-icon);height:var(--size-icon);background:currentColor;-webkit-mask:url("./assets/faida-symbol.svg") center/contain no-repeat;mask:url("./assets/faida-symbol.svg") center/contain no-repeat}.footer-version{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-text-subtle)}
@media(min-width:761px){#app:has(>.app-footer){padding-bottom:var(--size-app-footer)}#app:has(>.app-footer)>.sidebar{bottom:var(--size-app-footer);overflow-y:auto}#app:has(>.app-footer) .topbar .avatar{display:none}#app:has(>.app-footer)~#toast{bottom:calc(var(--size-app-footer) + var(--space-lg))}}
@media(max-width:760px){#app:has(>.app-footer){display:flex;flex-direction:column;min-height:100dvh}#app:has(>.app-footer)>.layout{flex:1}#app:has(>.app-footer) .content{padding-bottom:var(--space-xl)}.app-footer{position:static;height:auto;justify-content:center;border-top:0;padding:var(--space-lg) var(--space-xl) calc(104px + env(safe-area-inset-bottom))}.footer-account{display:none}.footer-product{justify-content:center;gap:var(--space-md);flex-wrap:wrap}}

/* Selecting history is separate from opening an event; keep native checkboxes. */
.event-selection-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-lg);padding:var(--space-lg);margin-bottom:var(--space-xl);border-radius:var(--radius-control);background:var(--color-surface);position:sticky;top:var(--space-sm);z-index:5}
.event-selection-options,.event-selection-delete{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md)}
.event-selection-delete>span{color:var(--muted);font-size:var(--font-size-small)}
.event-select-row{cursor:pointer}.event-select-row.is-selected{background:var(--color-accent-surface)}
.event-select-row input{flex-shrink:0}.event-description{min-width:0}
@media(max-width:760px){.event-selection-tools{position:static;align-items:stretch;gap:var(--space-md)}.event-selection-options,.event-selection-delete{width:100%;justify-content:space-between}.event-selection-options .button{flex:1;padding-inline:var(--space-md)}.event-select-row{display:grid;grid-template-columns:var(--size-checkbox) minmax(0,1fr);gap:var(--space-sm) var(--space-md)}.event-select-row .event-icon{display:none}.event-select-row .event-time{grid-column:2;text-align:left}.event-select-row input{grid-row:1 / span 2;align-self:center}}

/* One panel for all form/dialog actions. Layout is owned here, never by a caller. */
.form-actions{display:flex;align-items:stretch;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-xl);background:var(--color-surface)}
.form-actions-main,.form-actions-destructive{display:flex;align-items:stretch;gap:var(--space-md);min-width:0}
.form-actions-main{margin-left:auto}.form-actions-destructive{margin-right:auto}
.form-actions .button{min-width:0;min-height:var(--size-control);white-space:normal;overflow-wrap:anywhere}
.form-actions-main>.button,.form-actions-destructive>.button{height:auto}
.form-actions-dock{flex-shrink:0;padding:var(--space-lg) var(--space-xl) var(--space-xl);background:var(--color-surface)}
.form-actions-dock>.form-actions{margin-top:0}.form-actions-dock .form-error{max-height:20dvh;overflow:auto}
.form-actions-full{background:transparent}.form-actions-full .form-actions-main{width:100%}.form-actions-full .button{flex:1}
.modal-body form:not(.modal-form)>.form-actions{position:sticky;bottom:calc(-1 * var(--space-xl));z-index:1;padding-block:var(--space-lg);margin-bottom:calc(-1 * var(--space-xl))}
@media(max-width:760px){.form-actions-main,.form-actions-destructive{width:100%;margin-inline:0}.form-actions-main>.button,.form-actions-destructive>.button{flex:1;padding-inline:var(--space-lg)}}

/* One video UI for live cameras and event clips. The HTML video remains the engine. */
.media-player{background:var(--color-background);border-radius:var(--radius-control);overflow:hidden;margin-bottom:var(--space-lg);min-width:0}
.media-picture{position:relative;min-width:0}.media-picture>video{border-radius:0;width:100%;display:block;object-fit:contain}
.media-live-badge{position:absolute;top:var(--space-sm);right:var(--space-sm);display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-small);background:var(--color-overlay);color:var(--color-text);font-size:var(--font-size-caption);pointer-events:none}.media-live-badge::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--color-accent)}
.media-live-badge[hidden]{display:none}.modal:has(#clean-video) .modal-body{padding:var(--space-md)}.camera-details{margin-block:0}.modal:has(#clean-video) .live-camera-controls{margin:var(--space-sm) 0}.live-camera-controls:empty{display:none}
.media-controls{padding:var(--space-sm) var(--space-md);background:var(--color-surface-raised)}
.media-toolbar{display:flex;align-items:center;gap:var(--space-sm);min-width:0}
.media-toolbar .icon-button{color:var(--color-text);width:var(--size-touch);height:var(--size-touch)}
.media-toolbar .icon-button:hover:not(:disabled){background:var(--color-surface-hover)}
.media-toolbar [data-player="play"]{color:var(--color-accent)}
.media-spacer{flex:1}.media-audio{display:flex;align-items:center;gap:var(--space-xs);flex:0 1 148px;min-width:calc(var(--size-touch) + var(--space-xs) + 40px)}
.media-audio:has(.media-volume[hidden]){flex:0 0 var(--size-touch);min-width:var(--size-touch)}
.media-volume{display:flex;align-items:center;flex:1;min-width:40px}.media-volume input{width:100%;min-width:0}.media-controls input[type="range"]{min-height:var(--size-touch);accent-color:var(--color-accent);cursor:pointer;padding:0}
.media-controls input:disabled{cursor:default}.media-controls [hidden]{display:none!important}
.media-progress{display:flex;align-items:center;gap:var(--space-md)}.media-progress input{flex:1;min-width:0;width:100%}
.media-time{font-size:var(--font-size-caption);color:var(--color-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.media-messages{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);font-size:var(--font-size-caption);line-height:1.6;color:var(--color-text-secondary);padding:var(--space-xs) 0}
.media-audio-state{margin-left:auto}.media-player[data-state="error"] .media-state,.media-player[data-state="unsupported"] .media-state{color:var(--color-warning)}
.media-player:fullscreen{width:100%;height:100%;display:flex;flex-direction:column;border-radius:0;margin:0}
.media-player:fullscreen>.media-picture{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.media-player:fullscreen>.media-picture>video{height:100%;max-height:none;aspect-ratio:auto}.media-player:fullscreen .media-controls{flex-shrink:0;padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom))}
@media(max-width:760px){.media-toolbar{gap:var(--space-xs)}.media-audio-state{margin-left:0}}

/* Guard mode stays selected while observation is unavailable. */
.has-fault .shield-orb{background:var(--color-warning-surface);color:var(--color-warning)}
.has-fault .pill{white-space:normal}
.detector-health{overflow-wrap:anywhere}

/* Storage bounds and rejected-input feedback occupy one separate line. */
.storage-field>.help,.storage-field>.form-error{display:block;margin:var(--space-xs) 0 0;font-weight:400}
.storage-field>.help[hidden],.storage-field>.form-error:empty{display:none}

/* Event history: calendar sections and progressive loading. */
.event-days{display:grid;gap:24px}
.event-day-title{font-size:16px;font-weight:600;color:var(--muted);margin:0 0 12px}


/* A shared filter row; reset and refresh live on the following summary row. */
.event-filters-period{grid-template-columns:repeat(3,minmax(0,1fr))}
.event-filter-actions{display:flex;align-items:center;gap:var(--space-sm);margin-left:auto}
.event-filter-actions .button{min-height:var(--size-touch);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-small)}
.period-calendar{max-width:392px;margin:auto}
.period-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);gap:var(--space-sm)}
.period-month strong{text-transform:capitalize}
.period-prev{transform:rotate(180deg)}
.period-week,.period-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-xs)}
.period-week{color:var(--muted);font-size:var(--font-size-small);text-align:center;margin-bottom:var(--space-sm)}
.period-day{border:0;border-radius:var(--radius-small);background:transparent;color:var(--text);font:inherit;min-width:0;height:44px;padding:0;cursor:pointer}
.period-day:hover,.period-day.in-range{background:var(--color-surface-hover)}
.period-day.outside{color:var(--muted)}
.period-day[aria-current=date]{text-decoration:underline;text-underline-offset:5px}
.period-day.endpoint{background:var(--color-accent);color:var(--color-on-accent)}
.period-picked{min-height:48px;color:var(--muted);margin:var(--space-lg) 0 0;font-size:var(--font-size-small)}
.event-feed-more{text-align:center;padding:24px 0;min-height:80px}
@media(max-width:760px){.event-filters-period{grid-template-columns:minmax(0,1fr)}.event-filter-actions{flex-wrap:wrap}.period-days{gap:0}.period-day{border-radius:var(--radius-small)}}

/* Mobile catalog tools: filters expand in place; summary/reset stays below. */
.screen-tools{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}
.mobile-filter-toggle{display:none;position:relative}
.event-selection-toggle>.icon{display:none}
.filter-active-dot{position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:var(--radius-pill);background:var(--color-accent)}
.mobile-filter-toggle.has-filters,.mobile-filter-toggle[aria-expanded="true"]{color:var(--color-accent);background:var(--color-accent-surface)}
@media(max-width:760px){
 .heading h1{min-height:var(--size-touch);display:flex;align-items:center}
 .heading:has(.screen-tools){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-sm)}
 .heading:has(.screen-tools)>div:first-child{display:contents}
 .heading:has(.screen-tools) h1{grid-column:1;grid-row:1}
 .heading:has(.screen-tools) .subtitle{grid-column:1/-1;grid-row:2;margin-top:0}
 .heading .screen-tools{grid-column:2;grid-row:1}
 .mobile-filter-toggle{display:grid}
 [data-mobile-filters="false"]{display:none}
 .event-selection-toggle{padding:0;width:var(--size-touch);height:var(--size-touch);min-height:var(--size-touch);border:0;background:transparent}
 .event-selection-toggle.soft{background:var(--color-accent-surface)}
 .event-selection-toggle>span{display:none}
 .event-selection-toggle>.icon{display:block;width:var(--size-icon);height:var(--size-icon)}
}

/* Installation auth: brand belongs to the desktop introduction. */
.auth-installation .auth-brand-desktop{width:100%;max-width:480px;background:var(--color-surface)}
@media(min-width:761px){.auth-installation .auth-form>.auth-logo{display:none}}

/* About: client updates and the future Android distribution. */
.about-app{display:grid;gap:var(--space-xxl)}
.about-section h3{margin:0 0 var(--space-md)}
.about-section p{margin:0 0 var(--space-lg)}
.about-section+.about-section{border-top:1px solid var(--color-border);padding-top:var(--space-xl)}
.about-build{color:var(--color-text-secondary);overflow-wrap:anywhere}
.about-update-actions{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.about-update-actions [hidden]{display:none}
.about-section .about-status{margin:var(--space-lg) 0 0}
.about-status:empty{display:none}
@media(max-width:600px){.about-app .button{width:100%;white-space:normal}.about-update-actions{flex-direction:column}.about-build{display:block}}