:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background: #020714; color: #f8fafc; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* Animated public beta launch */
.launch-page { --launch-ink: #f8fafc; --launch-cyan: #49d9ff; --launch-violet: #a278ff; --launch-pink: #fa5bd3; --launch-gradient: linear-gradient(110deg, #35dfff 0%, #6283ff 37%, #c65dff 67%, #ff8357 100%); --launch-line: rgb(171 193 230 / 14%); background: radial-gradient(ellipse at 78% 32%, rgb(97 90 255 / 20%), transparent 33rem), radial-gradient(ellipse at 17% 78%, rgb(255 82 202 / 10%), transparent 28rem), #020714; color: var(--launch-ink); min-height: 100vh; overflow-x: hidden; }
.launch-page::before { background-image: radial-gradient(rgb(146 190 255 / 16%) .65px, transparent .65px); background-size: 26px 26px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 85%); opacity: .22; pointer-events: none; position: fixed; z-index: -1; }
.launch-page a { color: inherit; }
.launch-shell { margin: 0 auto; width: min(1160px, calc(100% - 48px)); }
.launch-header { align-items: center; border-bottom: 1px solid var(--launch-line); display: flex; height: 88px; justify-content: space-between; }
.launch-brand { align-items: center; display: inline-flex; text-decoration: none; }
.launch-brand img { display: block; height: auto; width: 158px; }
.launch-note { background: rgb(9 17 34 / 72%); border: 1px solid rgb(171 193 230 / 18%); border-radius: 999px; color: #c2d3ec; font-size: .64rem; font-weight: 650; letter-spacing: .1em; padding: 9px 13px; text-transform: uppercase; }
.launch-main { align-items: center; display: grid; min-height: calc(100svh - 148px); }
.launch-hero { align-items: center; display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); padding: 62px 0 66px; }
.launch-copy { position: relative; z-index: 2; }
.launch-eyebrow { align-items: center; background: rgb(9 17 34 / 72%); border: 1px solid rgb(171 193 230 / 18%); border-radius: 999px; color: #c8d8ef; display: flex; font-size: .68rem; font-weight: 650; gap: 11px; letter-spacing: .12em; padding: 9px 13px; text-transform: uppercase; width: fit-content; }
.launch-live-dot { animation: launch-breathe 2.4s ease-in-out infinite; background: var(--launch-cyan); border-radius: 50%; box-shadow: 0 0 0 5px rgb(117 230 211 / 11%); height: 7px; width: 7px; }
.launch-copy h1 { font-size: clamp(3.1rem, 5.2vw, 4.95rem); font-weight: 720; letter-spacing: -.072em; line-height: .92; margin: 27px 0 23px; max-width: 640px; }
.launch-copy h1 span { background: var(--launch-gradient); background-clip: text; color: transparent; font-weight: 760; -webkit-background-clip: text; }
.launch-lede { color: #b4c4dc; font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.68; max-width: 460px; }
.launch-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.launch-button { align-items: center; background: var(--launch-gradient); border: 1px solid rgb(255 255 255 / 16%); border-radius: 10px; box-shadow: 0 10px 35px rgb(70 172 255 / 22%); color: #07111f; display: inline-flex; font-size: .91rem; font-weight: 700; gap: 15px; justify-content: center; min-height: 52px; padding: 0 21px; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.launch-button:hover { background: linear-gradient(110deg, #a3f3ff, #d9b7ff 60%, #ffca97); transform: translateY(-3px); }
.launch-button:focus-visible, .launch-brand:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.launch-arrow { font-size: 1.15rem; transition: transform .2s ease; }
.launch-button:hover .launch-arrow { transform: translateX(3px); }
.launch-hint { align-items: center; color: #95a7c0; display: flex; font-size: .81rem; gap: 8px; }
.launch-hint::before { background: #687f9a; content: ""; height: 1px; width: 16px; }
.launch-scene { aspect-ratio: .98; background: #07111f; border: 1px solid rgb(146 190 255 / 16%); border-radius: 20px; box-shadow: 0 25px 90px rgb(24 70 140 / 22%); display: grid; isolation: isolate; min-height: clamp(470px, 42vw, 560px); overflow: hidden; place-items: center; position: relative; }
.launch-clip { animation: launch-clip-cycle 24s ease-in-out infinite; background-position: center; background-size: cover; border-radius: inherit; filter: brightness(.63) saturate(1.3); inset: 0; opacity: 0; position: absolute; transform: scale(1.08); z-index: 0; }
.launch-clip-one { background-image: url("../images/flockpi-scene-crosswalk.png"); }
.launch-clip-two { animation-delay: 8s; background-image: url("../images/flockpi-scene-transit.png"); }
.launch-clip-three { animation-delay: 16s; background-image: url("../images/flockpi-scene-plaza.png"); }
.launch-scene::after { background: linear-gradient(90deg, rgb(2 7 20 / 8%), rgb(2 7 20 / 20%) 48%, rgb(2 7 20 / 40%)), linear-gradient(0deg, rgb(2 7 20 / 46%), transparent 48%); border-radius: inherit; content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.launch-halo, .launch-orbit, .launch-core, .launch-satellite, .launch-signal, .launch-caption { z-index: 2; }
.launch-halo { animation: launch-halo 9s ease-in-out infinite; aspect-ratio: 1; border: 1px solid rgb(142 182 235 / 16%); border-radius: 50%; position: absolute; width: min(94%, 450px); }
.launch-halo::before, .launch-halo::after { border: 1px dashed rgb(142 182 235 / 16%); border-radius: 50%; content: ""; inset: 8%; position: absolute; }
.launch-halo::after { border-style: solid; inset: 22%; opacity: .55; }
.launch-orbit { animation: launch-orbit 23s linear infinite; aspect-ratio: 1; border: 1px solid transparent; border-radius: 50%; border-top-color: rgb(73 217 255 / 65%); position: absolute; width: min(98%, 475px); }
.launch-orbit::before { background: var(--launch-pink); border-radius: 50%; box-shadow: 0 0 19px rgb(250 91 211 / 80%); content: ""; height: 9px; left: 22%; position: absolute; top: 7%; width: 9px; }
.launch-orbit-two { animation-direction: reverse; animation-duration: 17s; border-bottom-color: rgb(162 120 255 / 65%); border-top-color: transparent; width: min(76%, 365px); }
.launch-orbit-two::before { background: var(--launch-violet); bottom: 6%; height: 6px; left: 72%; top: auto; width: 6px; }
.launch-orbit-three { animation-duration: 29s; border-top-color: rgb(255 156 74 / 55%); width: min(59%, 285px); }
.launch-core { animation: launch-float 6s ease-in-out infinite; aspect-ratio: 1; background: linear-gradient(145deg, rgb(73 217 255 / 22%), rgb(162 120 255 / 11%) 52%, rgb(250 91 211 / 10%)); border: 1px solid rgb(145 205 255 / 36%); border-radius: 30% 70% 61% 39% / 39% 41% 59% 61%; box-shadow: 0 0 85px rgb(90 157 237 / 18%), inset 0 0 35px rgb(117 230 211 / 6%); display: grid; place-items: center; position: relative; width: min(47%, 205px); }
.launch-core::before { border: 1px solid rgb(178 213 255 / 18%); border-radius: inherit; content: ""; inset: 12px; position: absolute; transform: rotate(29deg); }
.launch-core::after { animation: launch-orbit 35s linear infinite reverse; border: 1px dashed rgb(178 213 255 / 17%); border-radius: 42% 58% 55% 45%; content: ""; inset: 24px; position: absolute; }
.launch-bird-mark { background-image: url("../images/flockpi-logo.png"); background-position: left center; background-repeat: no-repeat; background-size: 270% auto; display: block; filter: drop-shadow(0 4px 16px rgb(73 217 255 / 24%)); inset: 0; position: absolute; }
.launch-satellite { animation: launch-float 5s ease-in-out infinite; background: rgb(10 19 34 / 94%); border: 1px solid rgb(178 213 255 / 30%); border-radius: 15px; box-shadow: 0 14px 42px rgb(0 0 0 / 18%); color: #f7f8ff; display: grid; font-size: .78rem; font-weight: 700; height: 42px; letter-spacing: -.03em; min-width: 64px; padding: 0 9px; place-items: center; position: absolute; }
.launch-satellite::after { background: var(--launch-node, var(--launch-violet)); border-radius: 50%; content: ""; height: 5px; position: absolute; right: 5px; top: 5px; width: 5px; }
.launch-s1 { --launch-node: #35dfff; animation-delay: -.7s; left: 24%; top: 15%; }
.launch-s2 { --launch-node: #a278ff; animation-delay: -2.1s; right: 13%; top: 22%; }
.launch-s3 { --launch-node: #ff9c4a; animation-delay: -1.4s; bottom: 24%; right: 7%; }
.launch-s4 { --launch-node: #fa5bd3; animation-delay: -.2s; bottom: 13%; left: 24%; }
.launch-s5 { --launch-node: #5e91ff; animation-delay: -2.8s; left: 7%; top: 47%; }
.launch-signal { animation: launch-twinkle 2.5s ease-in-out infinite; background: var(--launch-cyan); border-radius: 50%; height: 5px; opacity: .7; position: absolute; width: 5px; }
.launch-p1 { right: 32%; top: 17%; }
.launch-p2 { animation-delay: .6s; bottom: 27%; right: 32%; }
.launch-p3 { animation-delay: 1.2s; bottom: 8%; left: 37%; }
.launch-caption { backdrop-filter: blur(10px); background: rgb(2 7 20 / 72%); border: 1px solid rgb(219 228 255 / 24%); border-radius: 999px; bottom: 14px; color: #f3f5ff; font-size: .64rem; font-weight: 650; letter-spacing: .11em; padding: 8px 11px; position: absolute; right: 14px; text-transform: uppercase; }
.launch-lower { align-items: center; border-top: 1px solid var(--launch-line); color: #8495ad; display: flex; font-size: .78rem; gap: 20px; justify-content: space-between; margin-top: 18px; padding: 17px 0 30px; }
.launch-lower strong { color: #c4d2e7; font-weight: 550; }
.launch-lower a { text-decoration: none; }
.launch-lower a:hover { color: var(--launch-cyan); }
.launch-copyright { color: #7f91ac; font-size: .68rem; letter-spacing: .04em; white-space: nowrap; }
@keyframes launch-clip-cycle { 0%, 2% { opacity: 0; transform: scale(1.08) translateX(-1%); } 8%, 29% { opacity: 1; transform: scale(1.14); } 36%, 100% { opacity: 0; transform: scale(1.19) translateX(1%); } }
@keyframes launch-orbit { to { transform: rotate(360deg); } }
@keyframes launch-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-11px) rotate(2deg); } }
@keyframes launch-halo { 0%, 100% { opacity: .8; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes launch-breathe { 0%, 100% { box-shadow: 0 0 0 4px rgb(117 230 211 / 8%); } 50% { box-shadow: 0 0 0 8px rgb(117 230 211 / 2%); } }
@keyframes launch-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.5); } }
@media (max-width: 760px) { .launch-shell { width: min(calc(100% - 36px), 570px); } .launch-header { height: 72px; } .launch-note { font-size: .62rem; } .launch-main { min-height: auto; } .launch-hero { gap: 0; grid-template-columns: 1fr; padding: 65px 0 40px; } .launch-copy h1 { font-size: clamp(3rem, 10.5vw, 4.45rem); margin-top: 20px; max-width: 550px; } .launch-lede { max-width: 480px; } .launch-scene { aspect-ratio: 1.12; margin: 16px -6px 0; min-height: min(92vw, 500px); } .launch-caption { bottom: 7px; right: 10px; } .launch-lower { align-items: flex-start; } }
@media (max-width: 420px) { .launch-shell { width: calc(100% - 28px); } .launch-note { letter-spacing: .09em; } .launch-hero { padding-top: 52px; } .launch-actions { align-items: flex-start; flex-direction: column; } .launch-scene { min-height: 310px; } .launch-caption { bottom: 8px; font-size: .55rem; letter-spacing: .08em; right: 8px; } .launch-lower { flex-direction: column; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .launch-page *, .launch-page *::before, .launch-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .launch-clip-one { animation: none; opacity: 1; transform: none; } .launch-clip-two, .launch-clip-three { display: none; } }

.brand { align-items: center; display: inline-flex; text-decoration: none; }
.brand img { display: block; height: auto; max-width: 11.5rem; width: 100%; }
.sidebar-header .brand img { max-width: 8.75rem; }
.beta-badge, .sidebar-kicker { align-items: center; border: 1px solid rgb(74 222 128 / 26%); border-radius: 999px; color: #7dd3fc; display: inline-flex; font-size: .78rem; gap: .5rem; margin: 0 0 1.75rem; padding: .48rem .88rem; }

/* Beta workspace */
.beta-page { display: flex; height: 100vh; overflow: hidden; }
.beta-sidebar { background: linear-gradient(180deg, #071122, #040a16); border-right: 1px solid #1b2a40; display: flex; flex: 0 0 18.75rem; flex-direction: column; min-height: 0; padding: 1.35rem 1rem 1rem; }
.sidebar-header { padding: .2rem .55rem 1.3rem; }
.sidebar-kicker { color: #8aa1bf; font-size: .68rem; margin: .9rem 0 0; padding: .32rem .55rem; }
.beta-nav { border-bottom: 1px solid #1b2a40; border-top: 1px solid #1b2a40; padding: .65rem 0; }
.beta-nav a { border-radius: .45rem; color: #93a4bd; display: block; font-size: .86rem; margin: .12rem 0; padding: .7rem .6rem; text-decoration: none; }
.beta-nav a span { color: #4f6988; display: inline-block; margin-right: .45rem; width: 1rem; }
.beta-nav a:hover, .beta-nav a.is-active { background: #10223a; color: #e0f2fe; }
.beta-nav a.is-active span { color: #56d9ff; }
.camera-stats { padding: 1.35rem .55rem 0; }
.section-label { color: #5e7796; font-size: .66rem; font-weight: 750; letter-spacing: .1em; margin: 0 0 .45rem; text-transform: uppercase; }
.camera-stats h1 { font-size: 1.05rem; letter-spacing: -.02em; margin: 0 0 .9rem; }
.camera-stats dl { margin: 0; }
.camera-stats dl div { align-items: baseline; border-top: 1px solid #17263a; display: flex; justify-content: space-between; padding: .72rem 0; }
.camera-stats dt { color: #90a1b9; font-size: .78rem; }
.camera-stats dd { color: #e2edf9; font-size: .8rem; font-weight: 700; margin: 0; }
.feed-status { color: #8092aa; font-size: .72rem; line-height: 1.4; margin: 0 0 .7rem; }
.feed-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.feed-list li { background: #091426; border: 1px solid #172b45; border-radius: .75rem; min-height: 8rem; padding: 1rem; }
.feed-list a { color: #d7e9f9; display: block; font-size: .9rem; font-weight: 650; line-height: 1.4; text-decoration: none; }
.feed-list a:hover { color: #67e8f9; }
.feed-list span { color: #6f829b; display: block; font-size: .68rem; margin-top: .25rem; }
.feed-list small { background: #102841; border-radius: 999px; color: #7dd3fc; display: inline-block; font-size: .62rem; margin-top: .7rem; padding: .24rem .45rem; }
.sidebar-footer { margin: auto .55rem 0; padding-top: 1rem; }
.sidebar-footer-links { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem 1rem; }
.back-link, .contact-link { color: #83ccef; display: inline-block; font-size: .78rem; text-decoration: none; }
.back-link:hover, .contact-link:hover { color: #dff7ff; }
.sidebar-copyright { color: #4f6077; font-size: .62rem; line-height: 1.45; margin: .75rem 0 0; }
.workspace { flex: 1; min-width: 0; position: relative; }
.workspace-panel { height: 100%; min-width: 0; }
.workspace-panel[hidden] { display: none; }
.map-workspace { position: relative; }
.dashboard-workspace, .intelligence-workspace { background: radial-gradient(circle at 90% 0, rgb(14 116 144 / 13%), transparent 28rem), #050b16; overflow-y: auto; padding: clamp(1.5rem, 4vw, 3.5rem); }
.workspace-header { border-bottom: 1px solid #17263a; margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
.workspace-header h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.04em; margin: 0; }
.workspace-header p:last-child { color: #8ca0ba; margin: .55rem 0 0; }
.workspace-header--actions { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.panel-status { color: #8295ad; font-size: .78rem; margin: 0 0 1rem; }
.secondary-button { background: #10223a; border: 1px solid #244263; border-radius: .5rem; color: #d8efff; cursor: pointer; font-weight: 700; padding: .62rem .85rem; }
.secondary-button:hover { background: #16304e; }
.stat-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.stat-card-grid article, .breakdown-card { background: #091426; border: 1px solid #172b45; border-radius: .8rem; padding: 1.15rem; }
.stat-card-grid p { color: #8295ad; font-size: .76rem; margin: 0 0 .45rem; }
.stat-card-grid strong { color: #e6f6ff; font-size: clamp(1.45rem, 3vw, 2.15rem); }
.breakdown-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.breakdown-card h2 { font-size: 1rem; margin: 0 0 1rem; }
.breakdown-row { display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr) auto; margin: .8rem 0; }
.breakdown-row span { color: #a9b9cb; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breakdown-row strong { color: #dcecf8; font-size: .74rem; }
.breakdown-row i { background: linear-gradient(90deg, #0ea5e9, #67e8f9); border-radius: 999px; display: block; grid-column: 1 / -1; height: .22rem; max-width: 100%; width: var(--bar-width); }
#map { background: #081713; height: 100%; width: 100%; }
.leaflet-gl-layer { filter: brightness(.58) saturate(.8) contrast(1.12); }
.leaflet-control-zoom a, .leaflet-control-layers, .leaflet-control-attribution, .leaflet-bar { background: #080a10 !important; border-color: #1d2938 !important; color: #9ca3af !important; }
.leaflet-control-zoom a { color: #cbd5e1 !important; }
.leaflet-control-zoom a:hover { background: #172033 !important; color: #38bdf8 !important; }
.leaflet-control-attribution a { color: #38bdf8; }
.refresh-control { background: #080a10; border: 1px solid #1d2938; border-radius: 4px; box-shadow: 0 1px 5px rgb(0 0 0 / 45%); }
.refresh-control button { background: transparent; border: 0; color: #9ca3af; cursor: pointer; font: 700 .72rem/1 Inter, sans-serif; min-height: 2.15rem; padding: 0 .7rem; }
.refresh-control button[aria-pressed="true"] { color: #67e8f9; }
.refresh-control button[aria-pressed="true"]::before { background: #22c55e; border-radius: 50%; content: ""; display: inline-block; height: .42rem; margin-right: .38rem; width: .42rem; }
.refresh-control button[aria-pressed="false"]::before { background: #64748b; border-radius: 50%; content: ""; display: inline-block; height: .42rem; margin-right: .38rem; width: .42rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #0b0f17; border: 1px solid #1e3a5f; color: #dbeafe; }
.leaflet-popup-close-button { color: #93c5fd !important; }
.user-location-marker, .camera-marker { background: transparent; border: 0; }
.user-location-marker__pin { align-items: center; background: #dc2626; border: 2px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 2px 7px rgb(0 0 0 / 35%); display: flex; height: 22px; justify-content: center; left: 4px; position: absolute; top: 2px; transform: rotate(-45deg); width: 22px; }
.user-location-marker__pin span { background: #fff; border-radius: 50%; height: 7px; transform: rotate(45deg); width: 7px; }
.camera-marker__body { background: #0f172a; border: 2px solid #38bdf8; border-radius: 50%; box-shadow: 0 2px 7px rgb(15 23 42 / 50%); box-sizing: border-box; display: block; height: 22px; left: 3px; position: absolute; top: 3px; width: 22px; z-index: 2; }
.camera-marker__lens { background: #e0f2fe; border: 2px solid #0284c7; border-radius: 50%; height: 7px; left: 5px; position: absolute; top: 5px; width: 7px; }
.camera-marker__direction { height: 60px; left: -16px; overflow: visible; pointer-events: none; position: absolute; top: -16px; transform-origin: center; width: 60px; z-index: 1; }
.camera-marker__direction path { fill: rgb(250 204 21 / 35%); stroke: rgb(250 204 21 / 80%); stroke-width: 1.25; }
.camera-cluster-marker { background: transparent; border: 0; }
.camera-cluster-marker span { align-items: center; background: rgb(8 23 38 / 88%); border: 2px solid #38bdf8; border-radius: 50%; box-shadow: 0 3px 12px rgb(0 0 0 / 45%); color: #e0f2fe; cursor: zoom-in; display: flex; font-size: .7rem; font-weight: 800; height: 38px; justify-content: center; min-width: 38px; padding: 0 .25rem; }
@media (max-width: 950px) { .stat-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .breakdown-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .beta-page { display: block; height: auto; min-height: 100vh; overflow: auto; } .beta-sidebar { border-bottom: 1px solid #1b2a40; border-right: 0; min-height: auto; padding-bottom: 1rem; } .back-link { display: none; } .camera-stats { padding-bottom: 0; } .workspace { min-height: 62vh; } .workspace-panel { min-height: 62vh; } .map-workspace { height: 62vh; min-height: 28rem; } .dashboard-workspace, .intelligence-workspace { padding: 1.25rem; } .workspace-header--actions { align-items: start; flex-direction: column; } .stat-card-grid { grid-template-columns: 1fr 1fr; } .feed-list { grid-template-columns: 1fr; } }