/* Orbitra interactive prototype. Built from the Bungallow Figma frames at 1920 × 1010 and scaled to fit the browser window it sits in */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0f1316; -webkit-tap-highlight-color: transparent; }
body { display: grid; place-items: center; font-family: 'Barlow', system-ui, sans-serif; color: #ABB7C0; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: 0; }
button { cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
img { display: block; max-width: none; }
p, h4, h5 { margin: 0; }
hr { border: 0; border-top: 1px solid #272F34; margin: 8px 0; }
sup { font-size: 8px; }

.stage { position: relative; overflow: hidden; }
.app { position: absolute; left: 0; top: 0; width: 1920px; height: 1010px; overflow: hidden; background: #191E22; transform-origin: 0 0; user-select: none; -webkit-user-select: none; font-size: 12px; --pw: 0px; }
input { user-select: text; -webkit-user-select: text; }
.ico { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
.ico.y { color: #FCCA40; }
.pp { position: relative; display: inline-flex; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #2D343D; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* Top bar */
.top { position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 30; display: flex; align-items: center; background: #191E22; border-bottom: 1px solid #1D2428; box-shadow: 0 2px 1px rgba(0,0,0,.5); }
.top .menu, .top .tb { position: relative; display: block; transition: filter 150ms; }
.top .menu:hover, .top .tb:hover, .top .act { filter: brightness(1.35); }
.tabs { display: flex; height: 40px; }
.tab { display: flex; align-items: center; gap: 15px; padding: 0 30px; height: 40px; border-right: 1px solid #293237; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: #ABB7C0; transition: color 150ms, background 150ms; }
.tab:hover { background: #1d2328; }
.tab.on { color: #FCCA40; }
.tab.dis { color: #4A5863; }
.tab.dis .ico { opacity: 0; width: 0 !important; margin-right: -15px; }
.srch { position: relative; flex: 1; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: #14191E; color: #4A5863; }
.srch input { flex: 1; font-weight: 700; font-size: 12px; color: #ABB7C0; text-transform: uppercase; }
.srch input::placeholder { color: #4A5863; }
.srch:focus-within { color: #ABB7C0; }
.sres { position: absolute; left: 0; width: 520px; top: 44px; background: #20272D; border: 1px solid #272F34; border-radius: 10px; padding: 8px; display: none; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); }
.sres.open { display: block; animation: drop 150ms ease both; }
.sres h4, .pop h4 { margin: 6px 8px; font-size: 12px; font-weight: 700; color: #4A5863; display: flex; justify-content: space-between; }
.sres button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 5px; font-size: 14px; font-weight: 500; color: #ABB7C0; }
.sres button:hover { background: #191E22; color: #fff; }
.sres em { margin-left: auto; font-style: normal; font-size: 12px; color: #4A5863; }
.none { padding: 10px; color: #4A5863; font-size: 13px; }
.nb { position: absolute; right: 14px; top: 6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #FCCA40; color: #453303; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

/* Map */
.map { position: absolute; z-index: 0; left: var(--pw); top: 40px; right: 0; bottom: 0; background: #1c2622; transition: left 220ms cubic-bezier(.3,.9,.3,1); outline: 0; }
.map .base-dark { filter: url(#otint) brightness(1.08); }
.map .base-dark.labels { filter: url(#otint) brightness(1.7); }
.map .base-sat { filter: brightness(.82) saturate(.85); }
.map.nolabels .base-dark { filter: url(#otint) brightness(1.08); }
.loadmap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 700; color: #4A5863; }
.leaflet-container { background: #1c2622; font-family: 'Barlow', sans-serif; }
.map[data-tool="pin"] .leaflet-container, .map[data-tool="poly"] .leaflet-container, .map[data-tool="line"] .leaflet-container, .map[data-tool="rect"] .leaflet-container, .map[data-tool="qpoly"] .leaflet-container { cursor: crosshair; }
.leaflet-control-attribution { background: rgba(25,30,34,.75) !important; color: #4A5863 !important; font-size: 10px; border-radius: 4px 0 0 0; }
.leaflet-control-attribution a { color: #7d8b95 !important; }
.leaflet-overlay-pane .fp { stroke: #FCCA40; fill: #FCCA40; transition: stroke-opacity 150ms, fill-opacity 150ms; opacity: var(--fpo, 1); }
.fp.lo { stroke-opacity: .62; fill-opacity: .09; }
.fp.hi { stroke-opacity: .2; fill-opacity: .025; }
.fp:hover { stroke-opacity: .95; fill-opacity: .2; }
.fp.on { stroke-opacity: 1; stroke-width: 2; }
.map.no-Optical .t-Optical, .map.no-Clear .t-Clear, .map.no-Cloudy .t-Cloudy, .map.no-Radar .t-Radar { display: none; }
.qrect { stroke: #fff; fill: #fff; fill-opacity: .1; }
.mpoly { stroke: #DEE4E9; fill: #fff; fill-opacity: .1; }
.mline { stroke: #DEE4E9; fill: none; }
.mvx { fill: #DEE4E9; }
.mvx.first { fill: #FCCA40; cursor: pointer; }
.mlabel span { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; color: #DEE4E9; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 6px rgba(0,0,0,.6); pointer-events: none; }
.mlabel.qlab span { transform: translate(14px, 8px) !important; color: #fff; }
.mlabel.qlab span::before { content: ''; position: absolute; left: -14px; top: -8px; width: 0; height: 0; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: rotate(-135deg); }
.mlabel.tot span { transform: translate(12px, -26px) !important; background: #191E22; padding: 4px 8px; border-radius: 3px; color: #FCCA40; }
.satimg { box-shadow: 0 0 0 1px rgba(252,202,64,.6); cursor: zoom-in; }
.map.noov .satimg { display: none; }
.pinm img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: pinin 300ms cubic-bezier(.3,1.4,.5,1) both; }
@keyframes pinin { from { transform: translateY(-14px); opacity: 0; } }

/* Map tools */
.rail { position: absolute; right: 12px; top: 52px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; filter: drop-shadow(0 2px 1px rgba(0,0,0,.5)); }
.rail .pp { display: block; }
.rt { display: flex; align-items: center; justify-content: flex-end; height: 40px; width: 40px; background: #191E22; border-bottom: 1px solid #272F34; color: #ABB7C0; overflow: hidden; transition: width 180ms cubic-bezier(.3,.9,.3,1), background 150ms; }
.rail .pp:first-child .rt { border-radius: 5px 5px 0 0; }
.rail .pp:last-child .rt { border-radius: 0 0 5px 5px; border-bottom: 0; }
.rt b { order: -1; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; opacity: 0; padding-left: 14px; transition: opacity 150ms; }
.ri { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.rail:hover .rt { width: 170px; justify-content: space-between; }
.rail:hover .rt b { opacity: 1; }
.rt:hover { background: #20272D; }
.rt.on, .rt.act { background: #FCCA40; color: #453303; }
.rt.on b, .rt.act b { color: #453303; }

/* Timeline */
.tl { position: absolute; bottom: 12px; left: calc(var(--pw) + (100% - var(--pw)) / 2); transform: translateX(-50%); z-index: 20; height: 50px; display: flex; background: #191E22; border-radius: 5px; filter: drop-shadow(0 2px .5px rgba(0,0,0,.5)); transition: left 220ms cubic-bezier(.3,.9,.3,1); }
.tlb { display: flex; height: 50px; }
.tl .pp:first-child .tlb { border-right: 1px solid #272F34; }
.tl .pp:last-child .tlb { border-left: 1px solid #272F34; }
.tlb .sq { width: 42px; display: grid; place-items: center; color: #ABB7C0; border-radius: 5px 0 0 5px; transition: background 150ms; }
.tl .pp:last-child .tlb .sq { border-radius: 0; }
.tlb .cv { width: 28px; display: grid; place-items: center; color: #ABB7C0; }
.tl .pp:last-child .tlb .cv { border-radius: 0 5px 5px 0; }
.tlb .sq:hover, .tlb .cv:hover, .dates:hover { background: #20272D; }
.tlb .sq.on { background: #FCCA40; color: #453303; }
.tlb .sq.on .sqi { background: rgba(69,51,3,.3); border-color: #453303; box-shadow: none; }
.tlb .sq.off { color: #4A5863; }
.tlb .sq.nudge { animation: nudge 1.1s ease; }
@keyframes nudge { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: inset 0 0 0 2px #FCCA40; } 40%, 80% { box-shadow: none; } }
.tlb.act .cv { background: #20272D; }
.sqi { display: inline-block; width: 16px; height: 16px; background: rgba(255,255,255,.4); border: 1.5px solid #fff; border-radius: 2px; box-shadow: 0 0 5px rgba(255,255,255,.2), 0 0 10px rgba(255,255,255,.25); }
.dates { display: flex; align-items: center; gap: 15px; padding: 0 15px; font-size: 12px; font-weight: 700; color: #ABB7C0; transition: background 150ms; }
.dates > span { display: flex; align-items: center; gap: 6px; }
.dates i { font-style: normal; color: #4A5863; }
.dates em { font-style: normal; margin: 0 10px; }

/* Zoom bar */
.zb { position: absolute; right: 12px; bottom: 12px; z-index: 20; height: 35px; display: flex; align-items: center; background: #191E22; border-radius: 5px; filter: drop-shadow(0 2px .5px rgba(0,0,0,.5)); }
.ll { display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 10px; border-right: 1px solid #272F34; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.ll b { color: #ABB7C0; }
.ll span { color: #4A5863; width: 72px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.ll:hover .ico { color: #FCCA40; }
.zbtn { display: block; transition: filter 150ms; }
.zbtn:hover { filter: brightness(1.4); }
.zl { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 12px; font-weight: 700; color: #ABB7C0; }
.zl b { width: 14px; text-align: center; }
.zs { position: relative; width: 67px; height: 14px; cursor: pointer; }
.zs::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: #4A5863; }
.zs i { position: absolute; top: 2px; width: 4px; height: 10px; margin-left: -2px; border-radius: 2px; background: #ABB7C0; transition: left 200ms; }

/* Panel */
.panel { position: absolute; left: 0; top: 40px; bottom: 0; z-index: 10; width: 820px; background: #191E22; transform: translateX(-100%); transition: transform 220ms cubic-bezier(.3,.9,.3,1); }
.app.withpanel .panel { transform: none; }
.pw { display: flex; height: 100%; }
.pw.in .pmain > *:not(.ph) { animation: rise 220ms ease both; }
.pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rh { width: 15px; flex: none; background: #20272D; border-left: 1px solid #272F34; display: grid; place-items: center; cursor: col-resize; }
.rh i { width: 3px; height: 35px; border-radius: 10px; background: #ABB7C0; transition: background 150ms; }
.rh:hover i { background: #FCCA40; }
.ph { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 15px; background: #20272D; border-top: 1px solid #272F34; border-bottom: 1px solid #272F34; }
.ph > span:first-child { flex: 1; font-size: 12px; font-weight: 700; color: #4A5863; }
.pc { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; }
.pc:hover { background: #191E22; }
.pscroll { flex: 1; min-height: 0; overflow: auto; }
.lk { font-size: 12px; font-weight: 700; color: #FCCA40; }
.lk:hover { text-decoration: underline; }
.lk.big { font-size: 14px; font-weight: 500; margin-top: 4px; display: block; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 15px; }
.card { height: 71px; background: #20272D; border-radius: 5px; padding: 15px; display: flex; flex-direction: column; gap: 5px; }
.card small { font-size: 12px; font-weight: 700; color: #4A5863; }
.card b { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #ABB7C0; white-space: nowrap; }
.card b span { overflow: hidden; text-overflow: ellipsis; }
.mx { margin: 0 15px 15px; padding: 15px; background: #20272D; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; }
.chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.chip { height: 60px; background: #191E22; border-radius: 5px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.chip small { font-size: 12px; font-weight: 700; color: #4A5863; white-space: nowrap; }
.chip b { font-size: 14px; font-weight: 700; color: #ABB7C0; white-space: nowrap; }
.chip b.y, b.y { color: #FCCA40; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 104px; border-right: 1px solid #2D343D; }
.bar:last-child { border-right: 0; }
.bar i { width: 15px; border-radius: 3px; background: #ABB7C0; margin-bottom: 8px; animation: grow 500ms cubic-bezier(.3,.9,.3,1) both; transform-origin: bottom; }
@keyframes grow { from { transform: scaleY(0); } }
.bar b { font-size: 14px; font-weight: 500; color: #ABB7C0; }
.bar span, .kv span { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.up { color: #22F57A; }
.dn { color: #F52222; }
.tools { display: flex; align-items: center; gap: 10px; padding: 10px; background: #20272D; position: sticky; top: 0; z-index: 3; }
.tools .sp { flex: 1; }
.seg2 { display: flex; background: #191E22; border-radius: 50px; padding: 3px; }
.seg2 button { height: 33px; padding: 0 15px; border-radius: 50px; font-size: 12px; font-weight: 700; color: #ABB7C0; transition: background 150ms, color 150ms; }
.seg2 button.on { background: #FCCA40; color: #453303; }
.seg3, .seg4, .onoff { display: flex; background: #191E22; border-radius: 50px; padding: 3px; }
.seg3 button { height: 28px; padding: 0 14px; border-radius: 50px; font-size: 12px; font-weight: 700; color: #4A5863; transition: background 150ms, color 150ms; }
.seg3 button.on { background: #20272D; color: #ABB7C0; }
.pill { position: relative; height: 36px; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50px; background: #191E22; color: #ABB7C0; transition: background 150ms, color 150ms; }
.pill:hover { background: #14191E; }
.pill.y, .pill.act { background: #FCCA40; color: #453303; }
.pill .fd { position: absolute; right: 12px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #FCCA40; }
.pill.srp { width: 52px; padding: 0 18px; justify-content: flex-start; overflow: hidden; transition: width 200ms; cursor: text; }
.pill.srp input { width: 0; font-size: 12px; font-weight: 700; color: #ABB7C0; }
.pill.srp.open, .pill.srp:focus-within { width: 220px; }
.pill.srp.open input, .pill.srp:focus-within input { width: 160px; }
.ib { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; color: #ABB7C0; flex: none; }
.ib:hover, .ib.act { background: #20272D; }

/* Library table */
.lt { position: relative; }
.lth { position: sticky; top: 56px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: #1D2328; font-size: 12px; font-weight: 500; color: #ABB7C0; }
.lr { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 15px; border-bottom: 1px solid #272F34; background: #191E22; font-size: 12px; color: #ABB7C0; cursor: pointer; transition: background 120ms; }
.lr:hover { background: #1c2328; }
.lr.open { background: #20272D; }
.lr .m, .g5.m { color: #4A5863; }
.c1 { width: 197px; display: flex; gap: 12px; }
.c1 b { font-size: 14px; font-weight: 500; }
.lth .c1 { width: 197px; }
.c2, .c3 { width: 100px; }
.c4 { width: 60px; }
.c5 { width: 90px; }
.c6 { width: 60px; }
.c7 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpb { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; color: #4A5863; }
.fpb:hover { background: #191E22; color: #FCCA40; }
.lr.open .fpb { color: #FCCA40; }
.ck { display: inline-flex; cursor: pointer; padding: 4px; margin: -4px; }
.ck input, .cb input, .sw input { position: absolute; opacity: 0; pointer-events: none; }
.ck i { width: 10px; height: 10px; border: 1px solid #4A5863; border-radius: 2px; transition: background 120ms, border-color 120ms; }
.ck input:checked + i { background: #FCCA40; border-color: #FCCA40; }
.lx { display: flex; gap: 15px; padding: 15px; background: #20272D; border-bottom: 1px solid #272F34; animation: drop 180ms ease both; }
.lxi { position: relative; width: 261px; height: 313px; flex: none; overflow: hidden; border-radius: 3px; }
.lxi img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.lxi:hover img { transform: scale(1.05); }
.zoomi { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 50px; background: rgba(25,30,34,.85); font-size: 12px; font-weight: 700; color: #FCCA40; opacity: 0; transition: opacity 150ms; }
.lxi:hover .zoomi { opacity: 1; }
.lx dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-content: start; }
.lx dt { font-size: 12px; font-weight: 700; color: #4A5863; line-height: 18px; }
.lx dd { margin: 0; font-size: 14px; font-weight: 500; color: #ABB7C0; line-height: 18px; word-break: break-all; }
.lfoot { height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #1D2328; font-size: 12px; font-weight: 700; color: #ABB7C0; }
.lfoot.done { color: #4A5863; }
.spin { animation: spin .9s linear infinite; }
.chosen { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 15px; background: #232B32; font-size: 12px; font-weight: 700; position: sticky; top: 92px; z-index: 2; }
.chosen b { color: #fff; }
.chosen span { color: #4A5863; }
.chosen button { color: #FCCA40; }
.chosen button:first-of-type { margin-left: auto; }
.empty { padding: 60px 20px; text-align: center; }
.empty b { display: block; font-size: 14px; font-weight: 700; color: #ABB7C0; }
.empty span { display: block; margin-top: 6px; font-size: 13px; color: #4A5863; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 15px; }
.th { display: flex; flex-direction: column; gap: 8px; }
.ti { position: relative; height: 219px; overflow: hidden; background: #20272D; border-radius: 3px; }
.ti img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms, transform 300ms; }
.ti.ok img { opacity: 1; }
.ti .ld { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border: 2px solid #4A5863; border-right-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; }
.ti.ok .ld { display: none; }
.th:hover .ti img { transform: scale(1.05); }
.cap { display: flex; justify-content: space-between; font-size: 12px; }
.cap b { font-weight: 500; }
.calc { width: 288px; flex: none; display: flex; flex-direction: column; background: #191E22; border-left: 1px solid #272F34; animation: rise 200ms ease both; }
.calc .ph { background: #191E22; border: 0; }
.calc .ph > span:first-child { flex: 1; }
.mon { margin: 0 15px 15px; border: 1px solid #272F34; padding: 15px 10px; }
.mon h5 { font-size: 14px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 14px; }
.wd, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 3px; text-align: center; }
.wd span { font-size: 11px; font-weight: 500; color: #4A5863; margin-bottom: 4px; }
.days .pp { display: grid; place-items: center; }
.d { width: 28px; height: 28px; border-radius: 4px; font-size: 13px; font-weight: 500; color: #ABB7C0; text-align: center; cursor: default; }
.d.has { color: #fff; cursor: pointer; transition: transform 120ms, box-shadow 120ms; }
.d.has:hover { transform: scale(1.12); }
.d.on, .d.act { box-shadow: 0 0 0 2px #FCCA40; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 15px; font-size: 12px; color: #ABB7C0; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }

/* Sites and groups */
.site { padding: 15px; border-bottom: 1px solid #272F34; display: flex; flex-direction: column; gap: 15px; cursor: pointer; transition: background 120ms; }
.site:hover { background: #1c2328; }
.st { display: flex; align-items: center; gap: 15px; }
.st b { flex: 1; font-size: 14px; font-weight: 500; color: #fff; }
.st .muted { font-style: normal; font-size: 12px; color: #4A5863; }
.ssq { display: inline-block; width: 16px; height: 16px; flex: none; background: rgba(255,255,255,.4); border: 1.5px solid #fff; border-radius: 2px; box-shadow: 0 0 5px rgba(255,255,255,.2), 0 0 10px rgba(255,255,255,.25); }
.spoly { margin: -2px -3px; }
.sr { display: flex; gap: 15px; align-items: stretch; }
.schips { display: flex; gap: 5px; flex: 1; }
.chip.b { height: auto; padding: 15px; border: 1px solid #272F34; align-items: flex-start; justify-content: center; text-align: left; flex: 1; }
.heat { width: 229px; flex: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; padding: 5px; background: #191E22; border: 1px solid #272F34; border-radius: 5px; }
.heat i { height: 21px; transition: transform 100ms; }
.heat i:hover { transform: scale(1.25); outline: 1px solid #ABB7C0; position: relative; z-index: 1; }
.gh { display: flex; align-items: center; height: 40px; padding: 0 15px; border-bottom: 1px solid #272F34; font-size: 12px; font-weight: 500; color: #ABB7C0; padding-right: 45px; }
.gr { display: flex; align-items: center; height: 50px; padding: 0 15px 0 calc(15px + var(--d) * 35px); border-bottom: 1px solid #272F34; font-size: 12px; color: #ABB7C0; cursor: pointer; transition: background 120ms; }
.gr:hover { background: #1c2328; }
.gr.sub { background: #1b2126; animation: drop 160ms ease both; }
.g1 { width: calc(355px - var(--d, 0) * 35px); display: flex; align-items: center; gap: 15px; }
.gh .g1 { width: 355px; }
.g1 b { font-size: 14px; font-weight: 500; }
.gt { display: grid; place-items: center; width: 22px; height: 22px; margin: -4px; border-radius: 4px; color: #ABB7C0; }
.g2 { width: 102px; display: flex; align-items: center; gap: 6px; }
.g3 { width: 120px; }
.g4 { width: 128px; }
.g5 { flex: 1; }

/* Popovers */
.pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 200px; padding: 8px; background: #20272D; border: 1px solid #272F34; border-radius: 10px; color: #ABB7C0; box-shadow: 5px 5px 2.5px rgba(0,0,0,.1), 0 20px 40px -14px rgba(0,0,0,.6); animation: drop 150ms ease both; font-size: 13px; cursor: default; }
.pop.right { left: auto; right: 0; }
.pop.left { top: 0; left: auto; right: calc(100% + 8px); }
.pop.up { top: auto; bottom: calc(100% + 10px); animation-name: rise; }
.pop.range { left: 50%; transform: translateX(-50%); padding: 0; overflow: hidden; }
.lk2 { display: block; width: 100%; padding: 6px 0; font-size: 12px; font-weight: 700; color: #FCCA40; text-align: left; }
.lk2:hover { text-decoration: underline; }
.lk3 { display: block; width: 100%; padding: 9px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; color: #ABB7C0; text-align: left; }
.lk3:hover { background: #191E22; color: #fff; }
.lk3.c { text-align: center; color: #FCCA40; }
.pop.ctx { width: 190px; padding: 15px; }
.pop small, .fcard small { display: block; font-size: 12px; font-weight: 700; color: #4A5863; margin-bottom: 8px; }
.onoff button { flex: 1; height: 26px; border-radius: 50px; font-size: 12px; font-weight: 700; color: #4A5863; text-align: center; }
.onoff button.on { background: #FCCA40; color: #453303; }
.pop.dayp { width: 170px; padding: 15px; }
.pop.dayp b { font-size: 14px; font-weight: 500; }
.pop.filt { width: 240px; padding: 12px; }
.pop input[type=range] { width: calc(100% - 16px); margin: 4px 8px 10px; accent-color: #FCCA40; }
.cb { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 5px; }
.cb:hover { background: #191E22; }
.cb i { width: 14px; height: 14px; border: 1px solid #4A5863; border-radius: 3px; display: grid; place-items: center; flex: none; }
.cb input:checked + i { background: #FCCA40; border-color: #FCCA40; }
.cb input:checked + i::after { content: ''; width: 7px; height: 3px; border: 2px solid #453303; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.cb .dot { width: 10px; height: 10px; border-radius: 2px; }
.cb.big { font-size: 14px; color: #ABB7C0; padding: 0; }
.cb.big:hover { background: none; }
.sw { display: flex; align-items: center; gap: 12px; padding: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.sw span { flex: 1; }
.sw i { position: relative; width: 32px; height: 18px; border-radius: 9px; background: #4A5863; transition: background 150ms; flex: none; }
.sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #191E22; transition: transform 150ms; }
.sw input:checked + i { background: #FCCA40; }
.sw input:checked + i::after { transform: translateX(14px); }
.mt { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: 5px; font-size: 12px; font-weight: 700; color: #ABB7C0; }
.mt:hover { background: #191E22; color: #fff; }
.mt.on { color: #FCCA40; }
.sw2 { width: 26px; height: 18px; border-radius: 3px; border: 1px solid #272F34; }
.sw2.dark { background: linear-gradient(135deg, #24312b, #18211d); }
.sw2.sat { background: linear-gradient(135deg, #4b5a3a, #6b6a55 50%, #2e3f4f); }
.sw2.streets { background: linear-gradient(135deg, #efe9df, #d6e2ea); }
.pop.notes { width: 340px; }
.nt { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border-radius: 5px; text-align: left; }
.nt:hover { background: #191E22; }
.nt > i { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; flex: none; }
.nt.new > i { background: #FCCA40; }
.nt b { display: block; font-size: 13px; font-weight: 500; color: #ABB7C0; }
.nt.new b { color: #fff; }
.nt small { margin: 2px 0 0; font-weight: 500; }

/* Range picker */
.rp { display: flex; gap: 15px; padding: 15px; background: #191E22; }
.cal { width: 340px; display: flex; flex-direction: column; gap: 14px; }
.ch { display: flex; align-items: center; justify-content: space-between; }
.ch b { font-size: 14px; font-weight: 700; color: #fff; }
.ch b span { margin-left: 10px; }
.ch button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; }
.ch button:hover { background: #20272D; }
.cw { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 14px; font-weight: 500; opacity: .7; }
.cg { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 5px; }
.cg button { height: 30px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: #fff; }
.cg button span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; transition: background 120ms; }
.cg button:hover span { background: #272F34; }
.cg button.out { color: #4A5863; }
.cg button.inr { background: #272F34; }
.cg button.st { background: linear-gradient(90deg, transparent 50%, #272F34 50%); }
.cg button.en { background: linear-gradient(90deg, #272F34 50%, transparent 50%); }
.cg button.edge span { background: #ABB7C0; color: #191E22; }
.cg button:disabled { opacity: .25; }
.of { position: relative; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #4A5863; border-radius: 4px; transition: border-color 150ms; }
.of > span { position: absolute; left: 10px; top: -8px; padding: 0 4px; background: #20272D; font-size: 12px; font-weight: 700; color: #4A5863; transition: color 150ms; }
.rp .of > span { background: #191E22; }
.of input { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #ABB7C0; }
.of input::placeholder { color: #4A5863; }
.of:focus-within { border-color: #FCCA40; }
.of:focus-within > span { color: #FCCA40; }
.of.bad { border-color: #F52222; }
.of.sm { height: 44px; }
.of.srch2 input { text-transform: uppercase; font-size: 12px; font-weight: 700; }
.btn { display: block; width: 100%; padding: 10px; border-radius: 5px; font-size: 14px; font-weight: 500; text-align: center; transition: filter 150ms, opacity 150ms; }
.btn:hover { filter: brightness(1.08); }
.btn.y { background: #FCCA40; color: #453303; }
.btn.y:disabled { opacity: .2; filter: none; }
.btn.g { background: #4A5863; color: #ABB7C0; }
.btn.sm { padding: 8px; font-size: 13px; }
.pre { display: flex; flex-direction: column; gap: 8px; }
.pre button { height: 40px; padding: 0 12px; white-space: nowrap; min-width: 104px; border: 1px solid #4A5863; border-radius: 5px; font-size: 14px; color: #4A5863; transition: color 150ms, border-color 150ms; }
.pre button:hover { color: #ABB7C0; border-color: #ABB7C0; }

/* Dialogs */
.scrim { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.45); animation: fade 150ms ease both; transition: opacity 150ms; }
.scrim.out { opacity: 0; }
.dlg { width: 350px; padding: 15px; background: #20272D; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; filter: drop-shadow(5px 5px 2.5px rgba(0,0,0,.1)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); animation: rise 200ms cubic-bezier(.3,1.2,.5,1) both; }
.dlg h4 { font-size: 12px; font-weight: 700; color: #4A5863; }
.dlg .q { font-size: 14px; font-weight: 700; color: #ABB7C0; }
.dlg .q2 { font-size: 13px; color: #4A5863; margin-top: -8px; }
.dlg.assign .tree { max-height: 300px; overflow: auto; margin: -15px -15px 0; background: #191E22; border-radius: 10px 10px 0 0; }
.tr { display: flex; align-items: center; gap: 14px; width: 100%; height: 50px; padding-right: 15px; border-bottom: 1px solid #272F34; font-size: 14px; font-weight: 500; color: #ABB7C0; }
.tr:hover { background: #1d2328; }
.tr.on { background: #232B32; color: #fff; }
.dlg.lb { width: 910px; gap: 0; padding: 15px 15px 0; }
.lbimg { width: 880px; height: 694px; overflow: hidden; border-radius: 3px; }
.lbimg img { width: 100%; height: 100%; object-fit: cover; animation: fade 250ms ease both; }
.lbb { display: flex; align-items: center; gap: 15px; margin: 0 -15px; padding: 15px; background: #191E22; border-radius: 0 0 10px 10px; font-size: 14px; }
.lbb b { font-weight: 500; }
.lbb .m { color: #4A5863; }
.lbb button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; }
.lbb button:hover { background: #20272D; }
.lc { flex: 1; text-align: right; font-size: 12px; color: #4A5863; }

/* Floating cards on the map */
.fcard { position: absolute; left: 0; top: 0; z-index: 900; width: 320px; padding: 15px; background: #191E22; border-radius: 5px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); animation: fade 160ms ease both; }
.fcard .fr { display: flex; align-items: flex-start; gap: 10px; }
.fcard .fr > div { flex: 1; min-width: 0; }
.fcard .fr b { display: block; font-size: 14px; font-weight: 500; color: #ABB7C0; }
.fcard .fr small { margin-bottom: 4px; }
.fcard > small { margin: 0 0 -8px; }
.fcard .mono { font-size: 13px; word-break: break-all; }
.fx { position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: #20272D; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.fx:hover { background: #272F34; }
.acq { border: 1px solid #272F34; border-radius: 10px; padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.acq .chips { grid-template-columns: repeat(4, 1fr); }
.acq .chip.b { background: #20272D; border: 0; padding: 8px; align-items: center; text-align: center; height: 60px; }
.acq .chip b { font-size: 12px; }
.seg4 { background: #20272D; }
.seg4 button { flex: 1; height: 26px; border-radius: 50px; font-size: 12px; font-weight: 500; color: #4A5863; text-align: center; white-space: nowrap; }
.seg4 button.on { background: #191E22; color: #ABB7C0; }
.acq .kv { display: flex; justify-content: space-between; align-items: center; }
.acq .kv b { font-size: 14px; font-weight: 500; }
.acq > small { margin: 0 0 -8px; }
.fcard.img { width: 270px; background: #20272D; border-radius: 10px; }
.fcard .ci { border-radius: 5px; overflow: hidden; }
.fcard .ci img { width: 240px; height: 300px; object-fit: cover; transition: transform 300ms; }
.fcard .ci:hover img { transform: scale(1.04); }
.cc { display: flex; gap: 6px; flex-wrap: wrap; }
.cc span { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 3px; background: #191E22; font-size: 12px; }

.toast { position: absolute; left: 50%; top: 56px; z-index: 70; padding: 11px 18px; border-radius: 5px; background: #20272D; border: 1px solid #272F34; color: #ABB7C0; font-size: 13px; font-weight: 700; transform: translateX(-50%); animation: toast 2.8s ease both; pointer-events: none; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); white-space: nowrap; }
.toast::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #FCCA40; vertical-align: 2px; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 8%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }