/* Security camera page */
.cams { padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.cams__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.cams__tabs { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-control); background: rgba(20,20,22,.7); }
.cams__tabs button { min-height: 36px; padding: .3rem 1rem; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 500 .9rem/1 var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.cams__tabs button[aria-pressed="true"] { background: var(--accent); color: var(--on-brand); }
.cams__tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cams__cov { font-size: .85rem; color: var(--ink-2); }
.cams__cov strong { color: var(--ink); font: 500 1.05rem/1 var(--font-head); font-variant-numeric: tabular-nums; margin-left: .3rem; }
.cams__svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.plan { display: none; }
.cams[data-plan="business"] .plan[data-plan="business"], .cams[data-plan="home"] .plan[data-plan="home"] { display: inline; }
.plan__bldg { fill: #1b1b1f; stroke: #6e6e76; stroke-width: 2.5; }
.plan__wall { fill: none; stroke: #5a5a62; stroke-width: 2; }
.plan__outline { fill: none; stroke: #6e6e76; stroke-width: 2.5; }
.plan__door { stroke: #1b1b1f; stroke-width: 4; }
.plan__lot, .plan__yard { fill: #18181b; stroke: #34343a; stroke-dasharray: 4 5; }
.plan__lines { stroke: #2e2e34; stroke-width: 1.5; }
.plan__room { fill: #8d8d94; font-size: 11px; paint-order: stroke; stroke: #161618; stroke-width: 3px; }
.plan__area { fill: #5a5a62; font-size: 10.5px; letter-spacing: .03em; }
.cone { fill: rgba(69,232,255,.16); stroke: rgba(69,232,255,.45); stroke-width: 1; opacity: 0; transform-box: fill-box; transition: opacity .5s, fill .3s; }
.camz.is-on .cone { opacity: 1; }
.camz.is-alert .cone { fill: rgba(255,138,128,.28); stroke: rgba(255,138,128,.8); }
.cam__body { fill: #f2f2f4; }
.cam__lens { fill: #45e8ff; }
.camz.is-alert .cam__lens { fill: #ff8a80; }
.cam__label { fill: #c8c8ce; font-size: 11px; font-weight: 500; opacity: 0; transition: opacity .4s; paint-order: stroke; stroke: #161618; stroke-width: 3px; }
.camz.is-on .cam__label { opacity: 1; }
.walker { fill: #ffd27a; stroke: #161618; stroke-width: 2; opacity: 0; transition: opacity .3s; }
.walker.is-on { opacity: 1; }
.cams__alert { display: flex; align-items: center; gap: .7rem; margin: .9rem 0 0; padding: .65rem .85rem; border-radius: var(--radius-md); border: 1px solid rgba(255,138,128,.5); background: #2a1716; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; min-height: 3.2rem; }
.cams__alert.is-on { opacity: 1; transform: none; }
.cams__alert-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ff8a80; animation: cams-pulse 1s ease-in-out infinite; }
.cams__alert strong { display: block; font-weight: 500; font-size: .9rem; }
.cams__alert span span { display: block; font-size: .8rem; color: var(--ink-2); }
.cams.no-anim * { transition: none !important; }
@keyframes cams-pulse { 50% { opacity: .35; } }
@media (max-width: 560px) { .cam__label { font-size: 14px; } .plan__room { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .cams__alert-dot { animation: none; } .cams * { transition: none !important; } }

.ph-split { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 900px) { .ph-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.ph-split .checks { margin: 0; }
.ma-cards { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 900px) { .ma-cards { grid-template-columns: 1fr 1fr; } }
.ma-card { padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ma-card .checks { margin: .75rem 0 0; }