:root {
  color-scheme: dark;
  --bg: #071018;
  --panel: rgba(9, 18, 27, .96);
  --panel-soft: rgba(18, 30, 42, .78);
  --glass: rgba(8, 18, 28, .72);
  --text: #f6f8fb;
  --muted: #9eacb9;
  --line: rgba(255,255,255,.11);
  --accent: #f5b84b;
  --accent-2: #7cc6ff;
  --good: #76d39b;
  --danger: #ff8f8f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--text); }
body.community-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: block; }
.map-stage { min-width: 0; min-height: 100vh; position: relative; overflow: hidden; background: #111b24; }
#map { position: absolute; inset: 0; }
.celestial-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
/* Atmospheric effects sit in front of astronomical objects, as real clouds
   obscure stars and soften the sun/moon rather than appearing behind them. */
.weather-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.boot-panel { position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 16px; width: min(440px, calc(100% - 32px)); padding: 20px; border-radius: 18px; box-shadow: 0 20px 70px rgba(0,0,0,.42); }
.boot-panel[hidden] { display: none; }
.boot-panel.error { border-color: rgba(255,143,143,.4); }
.boot-copy { min-width: 0; flex: 1; }
.boot-copy strong { display: block; font-size: 16px; }
.boot-copy p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.boot-copy details { margin-top: 12px; color: var(--muted); font-size: 11px; }
.boot-copy code { display: block; max-height: 110px; overflow: auto; margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.boot-copy button { min-height: 44px; margin-top: 14px; padding: 0 16px; border: 1px solid rgba(245,184,75,.45); border-radius: 11px; background: rgba(245,184,75,.15); color: var(--text); cursor: pointer; }
.boot-spinner { width: 24px; height: 24px; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.bi { --bi-icon: none; display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--bi-icon) center / contain no-repeat; mask: var(--bi-icon) center / contain no-repeat; }
.bi-search { --bi-icon: url("../vendor/bootstrap-icons/search.74dacfefd760.svg"); }.bi-square-fill { --bi-icon: url("../vendor/bootstrap-icons/square-fill.416341566130.svg"); }.bi-box-fill { --bi-icon: url("../vendor/bootstrap-icons/box-fill.b584666e461e.svg"); }.bi-sunrise-fill { --bi-icon: url("../vendor/bootstrap-icons/sunrise-fill.4c860a88462b.svg"); }.bi-arrows-fullscreen { --bi-icon: url("../vendor/bootstrap-icons/arrows-fullscreen.8fb88c254220.svg"); }.bi-people-fill { --bi-icon: url("../vendor/bootstrap-icons/people-fill.9d355a72513b.svg"); }.bi-geo-alt-fill { --bi-icon: url("../vendor/bootstrap-icons/geo-alt-fill.568bd8e0ae25.svg"); }.bi-sliders2 { --bi-icon: url("../vendor/bootstrap-icons/sliders2.878e760bacdd.svg"); }.bi-person-circle { --bi-icon: url("../vendor/bootstrap-icons/person-circle.02884a0d7850.svg"); }.bi-person-standing { --bi-icon: url("../vendor/bootstrap-icons/person-standing.ff45c629d87f.svg"); }.bi-map-fill { --bi-icon: url("../vendor/bootstrap-icons/map-fill.126654eff00b.svg"); }.bi-image-fill { --bi-icon: url("../vendor/bootstrap-icons/image-fill.6f6afb9cfce5.svg"); }
.topbar { position: absolute; z-index: 8; left: 18px; right: 18px; top: 18px; display: flex; gap: 10px; align-items: center; pointer-events: none; }
.topbar-search, .top-actions, .top-social { pointer-events: auto; border-color: rgba(255,255,255,.13); background: rgba(7,17,26,.84); box-shadow: 0 12px 38px rgba(3,10,16,.25), inset 0 1px 0 rgba(255,255,255,.035); }
.topbar-search { display: flex; flex: 1 1 560px; max-width: 760px; min-width: 360px; align-items: center; gap: 12px; min-height: 62px; padding: 8px; border-radius: 19px; }
.map-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 7px 0 3px; color: var(--text); text-decoration: none; font-size: 12px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.map-brand::after { content: ""; width: 1px; height: 28px; margin-left: 4px; background: var(--line); }
.map-brand img { width: 34px; height: 34px; border-radius: 10px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.search { position: relative; display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; }
.search svg, .icon-button svg, .ground-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.search > svg, .search > .bi { color: var(--muted); margin-left: 5px; }.search > .bi { width: 19px; height: 19px; }
.search input { min-width: 0; flex: 1; background: transparent; color: var(--text); border: 0; padding: 9px 2px; font-size: 15px; }
.search input::placeholder { color: #91a0ad; }
.search-button, .ground-button, .icon-button, .basemap-button, .settings-toggle, .community-button, .spot-action { border: 1px solid var(--line); background: rgba(255,255,255,.065); border-radius: 11px; min-height: 42px; cursor: pointer; }
.search-button { padding: 0 16px; border-color: rgba(124,198,255,.34); background: linear-gradient(145deg, rgba(124,198,255,.19), rgba(124,198,255,.1)); color: #e7f5ff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.search-button:hover { border-color: rgba(124,198,255,.58); background: rgba(124,198,255,.22); transform: translateY(-1px); }
.top-actions { display: flex; flex: 0 0 auto; gap: 5px; align-items: center; margin-left: auto; min-height: 62px; padding: 6px; border-radius: 19px; }
.top-social { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 62px; padding: 6px; border-radius: 19px; }
.toolbar-group { display: flex; align-items: center; gap: 3px; min-height: 48px; padding: 3px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(255,255,255,.025); }
.toolbar-group-primary { border-color: rgba(153,139,255,.16); background: linear-gradient(135deg, rgba(91,105,180,.08), rgba(255,255,255,.025)); }
.toolbar-group-account { border-color: transparent; background: transparent; }
.top-actions button, .top-actions a { transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.top-actions button:hover, .top-actions a:hover { background: rgba(255,255,255,.13); color: var(--text); }
.toolbar-divider { width: 1px; height: 28px; margin: 0 2px; background: var(--line); }
.community-button { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 12px; border-color: rgba(159,146,255,.45); background: linear-gradient(135deg, rgba(73,139,204,.21), rgba(105,78,196,.28)); color: #f2f0ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font-size: 12px; font-weight: 800; }
.community-button svg, .spot-action svg, .community-button > .bi, .spot-action > .bi { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.community-button-copy { display: grid; gap: 1px; text-align: left; line-height: 1.05; }.community-button-copy b { font-size: 11px; }.community-button-copy small { color: #bdb9e5; font-size: 8px; font-weight: 650; }
.community-button:hover { border-color: rgba(183,173,255,.78) !important; background: linear-gradient(135deg, rgba(82,151,226,.4), rgba(112,79,210,.46)) !important; transform: translateY(-1px); }
.community-button[aria-expanded="true"] { border-color: rgba(184,173,255,.82); background: linear-gradient(135deg, #3e86ca, #7254ce); color: #fff; box-shadow: 0 9px 26px rgba(82,91,211,.3); }
.profile-action { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(124,198,255,.18); border-radius: 13px; background: linear-gradient(145deg, rgba(124,198,255,.13), rgba(110,92,177,.08)); color: #e7f4ff; text-decoration: none; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.profile-action:hover { border-color: rgba(124,198,255,.42); background: rgba(124,198,255,.14); transform: translateY(-1px); }.profile-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.055); }.profile-avatar .bi { width: 20px; height: 20px; }.profile-status { position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border: 2px solid #0b1721; border-radius: 50%; background: var(--good); }
.account-top-action { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 10px 0 7px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #dbe8f2; text-decoration: none; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.account-avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(124,198,255,.35); border-radius: 9px; background: linear-gradient(145deg, rgba(124,198,255,.24), rgba(124,198,255,.08)); color: #ecf7ff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.account-register { border-color: var(--accent); background: var(--accent); color: #241a08; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; padding: 0 11px; color: #d9e4ed; font-size: 12px; font-weight: 700; }
.ground-button { display: flex; gap: 7px; align-items: center; padding: 0 13px; }
.ground-button[aria-pressed="true"] { background: var(--accent); color: #1f1606; border-color: transparent; }
.basemap-button { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #d9e4ed; font-size: 12px; font-weight: 700; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.basemap-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.basemap-button:hover { background: rgba(255,255,255,.13); }
.basemap-button[aria-pressed="true"] { color: #1d180b; background: linear-gradient(135deg, #f7cc67, #eaa83e); border-color: rgba(255,230,170,.58); box-shadow: 0 6px 18px rgba(245,184,75,.22); }
.view-switch { display: flex; padding: 3px; border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 11px; }
.view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 54px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 750; }.view-switch button .bi { width: 14px; height: 14px; opacity: .72; }.view-switch button.active .bi { opacity: 1; }
.view-switch button.active { background: rgba(255,255,255,.14); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.search-results { position: absolute; left: -10px; right: 0; top: calc(100% + 13px); overflow: hidden; border-radius: 14px; background: rgba(7, 15, 23, .97); border: 1px solid var(--line); box-shadow: 0 18px 55px rgba(0,0,0,.38); z-index: 20; }
.search-result { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 12px 14px; text-align: left; cursor: pointer; }
.search-result:last-child { border-bottom: 0; }
.search-result small { display: block; color: var(--muted); margin-top: 3px; }
.search-result:hover { background: rgba(255,255,255,.06); }
.place-hint { position: absolute; z-index: 9; left: 50%; top: 90px; transform: translateX(-50%); border-radius: 999px; padding: 10px 15px; font-size: 13px; white-space: nowrap; }
.status-strip { position: absolute; z-index: 7; left: 18px; bottom: 18px; display: flex; gap: 6px; padding: 5px; border-radius: 16px; box-shadow: 0 10px 28px rgba(4, 12, 18, .18); }
.status-strip > div { min-width: 118px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 10px; background: rgba(6, 15, 24, .26); }
.status-label { color: var(--muted); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 3px; }
.status-strip strong { font-size: 13px; font-weight: 650; }
.wind-indicator { position: absolute; z-index: 8; left: 56px; bottom: 10px; display: flex; align-items: center; gap: 9px; min-width: 132px; min-height: 48px; padding: 7px 11px 7px 8px; border-radius: 14px; box-shadow: 0 8px 25px rgba(0,0,0,.24); pointer-events: none; }
.wind-arrow { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(124,198,255,.28); border-radius: 10px; background: rgba(124,198,255,.1); color: #a9ddff; font-size: 23px; line-height: 1; transition: transform .25s ease; }
.wind-indicator small, .wind-indicator strong { display: block; white-space: nowrap; }.wind-indicator small { color: var(--muted); font-size: 9px; }.wind-indicator small b { color: #c9e9ff; }.wind-indicator strong { margin-top: 2px; font-size: 12px; }.wind-indicator.is-strong .wind-arrow { border-color: rgba(255,184,105,.48); background: rgba(255,150,67,.13); color: #ffc27c; }
.map-info-tools { position: absolute; z-index: 9; left: 18px; bottom: 70px; display: flex; gap: 6px; }
.map-info-tools button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 11px; color: #dbe7ef; cursor: pointer; font-size: 10px; font-weight: 750; }
.map-info-tools button > span:first-child { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.08); color: #b8dfff; }
.drone-map-toggle[aria-pressed="true"] { border-color: rgba(255,158,118,.38); background: rgba(126,39,31,.38); color: #ffd6ca; }.drone-map-toggle[aria-pressed="false"] { opacity: .72; }
.map-legend { position: absolute; z-index: 15; left: 18px; bottom: 116px; width: min(330px, calc(100vw - 36px)); padding: 15px; border-radius: 17px; box-shadow: 0 18px 52px rgba(0,0,0,.38); }.map-legend[hidden] { display: none; }
.map-legend header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--line); }.map-legend header strong { font-size: 14px; }.map-legend header .eyebrow { margin-bottom: 2px; }.map-legend header button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.05); color: var(--muted); cursor: pointer; font-size: 20px; }
.legend-row { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 10px; margin-top: 11px; }.legend-row i { display: block; width: 25px; height: 25px; position: relative; }.legend-row b, .legend-row small { display: block; }.legend-row b { font-size: 11px; }.legend-row small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }.legend-spot { font-size: 19px; font-style: normal; }.legend-sun::before { content: ""; position: absolute; top: 12px; left: 1px; right: 1px; border-top: 2px dashed #e5bd65; }.legend-drone-restricted { border: 1px solid rgba(255,110,103,.75); border-radius: 6px; background: repeating-linear-gradient(135deg, rgba(210,60,63,.22) 0 4px, rgba(210,60,63,.05) 4px 8px); }.legend-measure::before { content: ""; position: absolute; top: 11px; left: 1px; right: 1px; border-top: 3px dashed #78d8ff; }.legend-measure::after { content: ""; position: absolute; inset: 7px 0 auto; width: 7px; height: 7px; border: 2px solid #78d8ff; border-radius: 50%; background: #071018; box-shadow: 18px 0 0 -2px #071018, 18px 0 0 0 #78d8ff; }
.legend-drone-explainer { margin-top: 12px; padding: 10px; border: 1px solid rgba(255,170,121,.2); border-radius: 11px; background: rgba(158,69,38,.09); }.legend-drone-explainer b, .legend-drone-explainer small { display: block; }.legend-drone-explainer b { color: #ffddc8; font-size: 10px; }.legend-drone-explainer small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.drone-color-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px; margin-top: 10px; }.drone-color-legend > span { display: grid; grid-template-columns: 17px 1fr; column-gap: 6px; align-items: center; min-width: 0; }.drone-color-legend i { grid-row: 1 / 3; display: block; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 4px; background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 28%, transparent) 0 3px, color-mix(in srgb, currentColor 8%, transparent) 3px 6px); }.drone-color-legend b, .drone-color-legend small { display: block; }.drone-color-legend b { font-size: 9px; }.drone-color-legend small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.zone-air { color: #ff6969; }.zone-security { color: #ff9b54; }.zone-industry { color: #908ad7; }.zone-nature { color: #83b96f; }.zone-traffic { color: #9aa0a5; }.zone-water { color: #75bff0; }.zone-residential { color: #e8cc64; }
.drone-zone-popup .maplibregl-popup-content { overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: #0b1722; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.5); }.drone-zone-popup .maplibregl-popup-close-button { z-index: 2; width: 31px; height: 31px; color: #9dacb8; font-size: 22px; }.drone-zone-popup .maplibregl-popup-close-button:hover { background: rgba(255,255,255,.08); }.drone-zone-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #0b1722; }.drone-zone-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #0b1722; }
.drone-popup-loading { display: flex; align-items: center; gap: 9px; padding: 16px 18px; color: #cbd8e1; font-size: 11px; }.drone-popup-loading span { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.16); border-top-color: #ff9b72; border-radius: 50%; animation: boot-spin .8s linear infinite; }
.drone-popup-head { display: flex; align-items: center; gap: 10px; padding: 15px 42px 13px 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }.drone-popup-head > span { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border: 1px solid rgba(118,211,155,.3); border-radius: 9px; background: rgba(118,211,155,.09); color: #8be0ad; font-weight: 850; }.drone-popup-head.warning > span { border-color: rgba(255,132,101,.38); background: rgba(181,60,38,.16); color: #ffac93; }.drone-popup-head b, .drone-popup-head small { display: block; }.drone-popup-head b { font-size: 12px; }.drone-popup-head small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.drone-zone-results { max-height: min(330px, 48vh); overflow-y: auto; padding: 5px 13px 11px; }.drone-zone-group { margin-top: 10px; padding-left: 10px; border-left: 3px solid #9da7af; }.drone-zone-group.air { border-color: #ff6969; }.drone-zone-group.security { border-color: #ff9b54; }.drone-zone-group.industry { border-color: #908ad7; }.drone-zone-group.nature { border-color: #83b96f; }.drone-zone-group.traffic { border-color: #9aa0a5; }.drone-zone-group.water { border-color: #75bff0; }.drone-zone-group.residential { border-color: #e8cc64; }.drone-zone-group h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #dfe9ef; font-size: 10px; }.drone-zone-group article + article { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }.drone-zone-group article b { display: block; font-size: 11px; }.drone-zone-group article p { margin: 3px 0 0; color: #b7c4ce; font-size: 9px; line-height: 1.4; }.drone-zone-group article small, .drone-zone-group article em { display: block; margin-top: 4px; color: #7f919f; font-size: 8px; font-style: normal; }.drone-zone-group article em { padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.045); color: #bdcad3; line-height: 1.35; }.drone-popup-link { display: block; padding: 10px 14px 12px; border-top: 1px solid var(--line); color: #a9ddff; font-size: 9px; font-weight: 800; text-decoration: none; }
.legend-altitude { margin-top: 13px; padding: 11px; border: 1px solid rgba(255,184,105,.2); border-radius: 11px; background: rgba(255,159,78,.07); }.legend-altitude b, .legend-altitude small, .legend-altitude a { display: block; }.legend-altitude b { color: #ffe0b6; font-size: 10px; }.legend-altitude small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }.legend-altitude a, .drone-official-link { margin-top: 7px; color: #a9ddff; font-size: 9px; font-weight: 750; text-decoration: none; }
.measure-hud { position: absolute; z-index: 12; left: 50%; top: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; min-width: 245px; padding: 7px 8px 7px 11px; border-color: rgba(120,216,255,.32); border-radius: 13px; box-shadow: 0 10px 32px rgba(0,0,0,.28); }.measure-hud[hidden] { display: none; }.measure-hud > span { color: #78d8ff; font-size: 21px; }.measure-hud div { min-width: 0; flex: 1; }.measure-hud strong, .measure-hud small { display: block; }.measure-hud strong { color: #dff7ff; font-size: 13px; }.measure-hud small { margin-top: 1px; color: var(--muted); font-size: 9px; }.measure-hud button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--muted); cursor: pointer; font-size: 19px; }
.map-context-menu { position: absolute; z-index: 25; width: 260px; overflow: hidden; padding: 6px; border-radius: 15px; box-shadow: 0 20px 58px rgba(0,0,0,.46); }.map-context-menu[hidden], .map-context-menu button[hidden] { display: none; }.context-coordinates { padding: 7px 9px 9px; color: #81919f; font-size: 9px; font-variant-numeric: tabular-nums; }.map-context-menu button { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 9px; width: 100%; min-height: 49px; padding: 7px 9px; border: 0; border-radius: 10px; background: transparent; color: #e4edf3; text-align: left; cursor: pointer; }.map-context-menu button:hover, .map-context-menu button:focus-visible { background: rgba(255,255,255,.08); }.map-context-menu button > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: rgba(124,198,255,.1); color: #a9ddff; font-size: 17px; }.map-context-menu button strong, .map-context-menu button small { display: block; }.map-context-menu button strong { font-size: 11px; }.map-context-menu button small { margin-top: 2px; color: var(--muted); font-size: 9px; }.map-context-menu .context-clear { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: #ffc5c5; }
.map-stage.measure-active #map canvas { cursor: crosshair; }
.ground-controls { position: absolute; z-index: 9; right: 18px; bottom: 74px; padding: 9px; border-radius: 16px; text-align: center; }
.ground-controls > button, .ground-controls div button { width: 42px; height: 38px; border: 1px solid var(--line); background: rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; }
.ground-controls div { display: flex; gap: 5px; margin-top: 5px; }
.ground-controls small { display: block; color: var(--muted); margin-top: 7px; font-size: 10px; }
.pov-hud { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.pov-reticle { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.88); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 6px rgba(0,0,0,.55); }
.pov-reticle::before, .pov-reticle::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.9); transform: translate(-50%, -50%); }
.pov-reticle::before { width: 1px; height: 26px; }
.pov-reticle::after { width: 26px; height: 1px; }
.pov-heading { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(4,12,18,.58); color: #eaf2f8; box-shadow: 0 4px 18px rgba(0,0,0,.22); backdrop-filter: blur(8px); font-size: 10px; letter-spacing: .05em; }
.pov-heading b { color: var(--accent); font-size: 12px; min-width: 20px; text-align: center; }
.sun-orb { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; text-align: center; filter: drop-shadow(0 0 13px rgba(255,210,92,.75)); }
.sun-orb span { display: block; width: 33px; height: 33px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffde7 0 14%, #ffe780 34%, #ffc34d 68%, #f79436 100%); box-shadow: 0 0 18px rgba(255,205,92,.9), 0 0 52px rgba(255,180,66,.55); }
.sun-orb small { display: inline-block; margin-top: 7px; padding: 3px 7px; border-radius: 999px; color: #1b160b; background: rgba(255,239,182,.88); font-size: 9px; font-weight: 800; white-space: nowrap; }
.moon-orb { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; text-align: center; filter: drop-shadow(0 0 12px rgba(190,214,255,.5)); }
.moon-orb span { display: block; width: 25px; height: 25px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff 0 12%, #e7edf5 45%, #aebaca 100%); box-shadow: inset -5px -2px 7px rgba(39,52,72,.24), 0 0 20px rgba(185,211,255,.42); }
.moon-orb small { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 999px; color: #eaf3ff; background: rgba(20,32,49,.78); border: 1px solid rgba(191,215,255,.2); font-size: 9px; font-weight: 750; white-space: nowrap; }
.control-panel { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(390px, calc(100vw - 32px)); background: linear-gradient(180deg, #0b1520, #081019 65%); border-left: 1px solid var(--line); padding: 22px 22px 18px; overflow-y: auto; box-shadow: -18px 0 55px rgba(0,0,0,.34); transform: translateX(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.control-panel.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
.community-panel { position: fixed; z-index: 45; inset: 0; overflow-y: auto; background: radial-gradient(circle at 86% 4%, rgba(94,81,202,.24), transparent 26%), radial-gradient(circle at 7% 36%, rgba(26,130,171,.14), transparent 27%), linear-gradient(180deg, #071018, #09131d 58%, #071018); opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .24s ease, transform .28s ease, visibility 0s linear .28s; }
.community-panel.is-open { opacity: 1; visibility: visible; transform: scale(1); transition: opacity .24s ease, transform .28s ease; }
.community-shell { min-height: 100%; }
.community-header { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; padding: 10px max(24px, calc((100vw - 1320px) / 2)); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,16,24,.82); box-shadow: 0 10px 35px rgba(0,0,0,.12); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); }
.community-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.community-brand img { width: 36px; height: 36px; border-radius: 11px; }.community-brand b { padding: 5px 8px; border: 1px solid rgba(139,123,255,.3); border-radius: 8px; background: rgba(139,123,255,.1); color: #c9c0ff; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.community-nav { display: flex; align-items: center; gap: 20px; }.community-nav > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }.community-nav > span i { width: 6px; height: 6px; border-radius: 50%; background: #7cc6ff; box-shadow: 0 0 0 4px rgba(124,198,255,.09); }.community-nav > span.active { color: var(--text); }
.community-nav button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.055); color: #dce7ef; cursor: pointer; font-size: 11px; font-weight: 750; transition: background .16s ease, border-color .16s ease; }.community-nav button:hover { border-color: rgba(124,198,255,.32); background: rgba(124,198,255,.09); }.community-nav button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.community-content { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 80px; }
.community-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); align-items: center; gap: clamp(38px, 7vw, 96px); min-height: 378px; overflow: hidden; padding: clamp(36px, 4.5vw, 62px); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: linear-gradient(135deg, rgba(19,38,54,.96), rgba(12,24,36,.92) 54%, rgba(43,35,82,.78)); box-shadow: 0 28px 80px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025); }
.community-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 0 58%, rgba(134,118,255,.08)), radial-gradient(circle at 77% 36%, rgba(78,183,255,.16), transparent 22%); }
.community-hero-copy { position: relative; z-index: 1; }.community-kicker { display: inline-flex; align-items: center; gap: 9px; color: #b9dfff; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.community-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #6ed7ff; box-shadow: 0 0 0 5px rgba(110,215,255,.1), 0 0 18px rgba(110,215,255,.7); }
.community-hero h1 { max-width: 720px; margin: 18px 0 0; font-size: clamp(40px, 4.35vw, 62px); line-height: 1; letter-spacing: -.055em; }
.community-hero-copy > p { max-width: 680px; margin: 24px 0 0; color: #aebfcb; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.65; }
.community-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }.community-hero-actions button { min-height: 48px; padding: 0 18px; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 800; }
.community-create { border: 0; background: linear-gradient(135deg, #f7c35d, #f0a93e); color: #241907; box-shadow: 0 12px 30px rgba(245,184,75,.2); }.community-create span { margin-right: 6px; font-size: 18px; }.community-browse { border: 1px solid var(--line); background: rgba(255,255,255,.055); color: #e3ebf2; }
.community-hero-visual { position: relative; z-index: 1; display: grid; place-items: center; min-height: 270px; }
.community-stat { position: relative; z-index: 2; display: grid; place-items: center; width: 210px; height: 210px; border: 1px solid rgba(148,137,255,.25); border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(124,198,255,.19), rgba(90,72,156,.13) 52%, rgba(8,18,28,.65)); box-shadow: inset 0 0 55px rgba(142,126,255,.12), 0 25px 80px rgba(0,0,0,.22); }
.community-stat::before, .community-stat::after { content: ""; position: absolute; border: 1px solid rgba(124,198,255,.12); border-radius: 50%; }.community-stat::before { inset: -38px; }.community-stat::after { inset: -78px; }
.community-stat strong { font-size: 58px; line-height: 1; letter-spacing: -.06em; }.community-stat span { margin-top: -36px; color: #d8e8f4; font-size: 11px; font-weight: 700; }.community-stat small { margin-top: -50px; color: var(--muted); font-size: 9px; }
.visual-orbit { position: absolute; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(14,29,42,.92); box-shadow: 0 14px 35px rgba(0,0,0,.28); font-size: 26px; }.orbit-one { left: 3%; top: 9%; transform: rotate(-8deg); }.orbit-two { right: 0; top: 20%; transform: rotate(7deg); }.orbit-three { right: 12%; bottom: 0; transform: rotate(-4deg); }
.community-discover { padding-top: 52px; }.community-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.community-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.community-section-head h2 { margin: 0; font-size: 31px; letter-spacing: -.04em; }.community-section-head p { max-width: 380px; margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: right; }.community-result-count { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid rgba(124,198,255,.18); border-radius: 999px; background: rgba(124,198,255,.07); color: #b9dfff; font-size: 9px; font-weight: 800; }
.community-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.community-search { display: flex; align-items: center; gap: 9px; width: min(540px, 100%); min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.045); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }.community-search:focus-within { border-color: rgba(124,198,255,.48); background: rgba(124,198,255,.06); box-shadow: 0 0 0 4px rgba(124,198,255,.055); }.community-search svg { width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; }.community-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }.community-search input::placeholder { color: #748593; }
.community-filters { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); }.community-filters button { min-height: 35px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }.community-filters button.active { background: rgba(255,255,255,.11); color: var(--text); }
.community-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.community-card { overflow: hidden; border: 1px solid rgba(255,255,255,.095); border-radius: 21px; background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); cursor: pointer; box-shadow: 0 18px 45px rgba(0,0,0,.14); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.community-card:hover { transform: translateY(-4px); border-color: rgba(124,198,255,.38); background: rgba(255,255,255,.065); box-shadow: 0 24px 58px rgba(0,0,0,.22); }.community-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.community-card-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 72% 18%, rgba(126,107,224,.38), transparent 31%), radial-gradient(circle at 17% 88%, rgba(58,156,181,.18), transparent 35%), linear-gradient(140deg, #163448, #182821); font-size: 64px; }.community-card-media::after { content: ""; position: absolute; inset: 45% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(5,12,18,.38)); }
.community-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }.community-card:hover .community-card-media img { transform: scale(1.035); }
.community-media-label { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(6,15,23,.62); color: #eef7ff; backdrop-filter: blur(10px); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.community-card-placeholder { display: grid; place-items: center; gap: 8px; }.community-card-placeholder b { font-size: 58px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.28)); }.community-card-placeholder small { color: rgba(226,238,247,.6); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.community-card-body { padding: 17px 18px 18px; }.community-author { display: flex; align-items: center; gap: 9px; color: #d7e4ed; font-size: 10px; font-weight: 650; }.community-author > b { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid rgba(124,198,255,.16); border-radius: 10px; background: linear-gradient(145deg, rgba(124,198,255,.22), rgba(135,115,231,.17)); color: #ecf7ff; font-size: 10px; text-transform: uppercase; }.community-author span { display: grid; gap: 2px; }.community-author small { color: #758794; font-size: 8px; font-weight: 650; }
.community-card-heading { display: flex; align-items: center; gap: 8px; margin-top: 13px; }.community-card-heading > span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 9px; background: rgba(255,255,255,.055); font-size: 15px; }.community-card h3 { overflow: hidden; margin: 0; font-size: 18px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }.community-card p { display: -webkit-box; overflow: hidden; min-height: 38px; margin: 8px 0 0; color: #aebcc7; font-size: 11px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.community-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 9px; }.community-card-footer span:last-child { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(124,198,255,.075); color: #a9ddff; font-weight: 800; }.community-card-footer b { font-size: 12px; }
.community-empty { grid-column: 1 / -1; position: relative; overflow: hidden; padding: clamp(48px, 7vw, 84px) 26px; border: 1px solid rgba(124,198,255,.16); border-radius: 24px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(108,89,206,.16), transparent 42%), rgba(255,255,255,.025); }.community-empty::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(124,198,255,.15); border-radius: 17px; pointer-events: none; }.community-empty > * { position: relative; }.community-empty > span { display: block; color: #b7dcf6; font-size: 51px; filter: drop-shadow(0 9px 22px rgba(0,0,0,.25)); }.community-empty h3 { margin: 17px 0 7px; font-size: 22px; }.community-empty p { max-width: 460px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.6; }.community-empty button { min-height: 42px; margin-top: 20px; padding: 0 15px; border: 1px solid rgba(124,198,255,.3); border-radius: 11px; background: rgba(124,198,255,.1); color: #dff2ff; cursor: pointer; font-size: 11px; font-weight: 800; }
.drawer-close { width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer; font-size: 25px; line-height: 1; }
.drawer-close:hover, .settings-toggle:hover { background: rgba(255,255,255,.13); color: var(--text); }
.settings-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; color: #d9e4ed; font-size: 12px; font-weight: 700; }
.settings-toggle svg, .settings-toggle .bi { width: 18px; height: 18px; fill: currentColor; }
.spot-action { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-color: rgba(245,184,75,.58); background: linear-gradient(145deg, rgba(245,184,75,.2), rgba(245,184,75,.09)); color: #fff1ca; font-size: 12px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.spot-action:hover { border-color: rgba(245,184,75,.82) !important; background: rgba(245,184,75,.24) !important; color: #fff8e7 !important; }
.map-corner-tools { position: absolute; z-index: 10; right: 68px; bottom: max(38px, env(safe-area-inset-bottom)); display: flex; align-items: end; gap: 8px; pointer-events: auto; }
.basemap-switcher { position: relative; display: flex; align-items: center; gap: 8px; width: 126px; height: 66px; overflow: hidden; padding: 5px 9px 5px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(7,17,26,.9); color: #eef5fa; cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(14px); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }.basemap-switcher:hover { border-color: rgba(124,198,255,.55); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.36); }
.basemap-preview { position: relative; display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; background: radial-gradient(circle at 72% 24%, #b8d6aa 0 10%, transparent 11%), linear-gradient(145deg, transparent 0 40%, rgba(223,218,190,.6) 41% 49%, transparent 50%), repeating-linear-gradient(26deg, #405643 0 10px, #594f3e 11px 18px, #2d453e 19px 29px); box-shadow: inset 0 0 16px rgba(0,0,0,.25); color: rgba(255,255,255,.86); }.basemap-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(72deg, transparent 0 47%, rgba(191,218,235,.72) 48% 55%, transparent 56%); opacity: .8; }.basemap-preview .bi { position: relative; z-index: 1; width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.75)); }
.basemap-copy { display: grid; gap: 2px; min-width: 0; text-align: left; }.basemap-copy strong { font-size: 10px; }.basemap-copy small { color: #82929f; font-size: 8px; }.basemap-switcher.active .basemap-preview { background: linear-gradient(34deg, transparent 0 45%, #f4dca9 46% 55%, transparent 56%), linear-gradient(145deg, transparent 0 43%, #cbd1d5 44% 51%, transparent 52%), radial-gradient(circle at 72% 24%, #7fb887 0 20%, transparent 21%), #a9c6d5; color: #173448; }.basemap-switcher.active .basemap-preview::after { background: linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,.78) 48% 52%, transparent 53%); }
.pegman-control { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(245,184,75,.48); border-radius: 15px; background: linear-gradient(145deg, rgba(29,43,54,.96), rgba(14,25,35,.96)); color: #f6c75f; cursor: grab; touch-action: none; box-shadow: 0 12px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .18s ease, color .18s ease, transform .18s ease; }.pegman-control:hover { border-color: rgba(255,208,102,.82); color: #ffd879; transform: translateY(-2px); }.pegman-control:active, .pegman-control.is-dragging { cursor: grabbing; transform: scale(.96); }.pegman-control[aria-pressed="true"] { border-color: rgba(124,198,255,.65); background: linear-gradient(145deg, rgba(44,113,159,.5), rgba(75,66,155,.5)); color: #dff4ff; }.pegman-control > .bi { width: 28px; height: 28px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.pegman-drag-ghost { position: fixed; z-index: 100; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid rgba(255,226,152,.82); border-radius: 16px; background: rgba(14,27,38,.9); color: #f8c85d; box-shadow: 0 14px 38px rgba(0,0,0,.4); pointer-events: none; transform: translate(-50%, -82%); }.pegman-drag-ghost[hidden] { display: none; }.pegman-drag-ghost .bi { width: 27px; height: 27px; }.map-stage.pegman-dragging #map::after { content: "Hier ablegen"; position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 10px 14px; border: 1px solid rgba(245,184,75,.48); border-radius: 999px; background: rgba(7,17,26,.78); color: #ffe2a4; backdrop-filter: blur(12px); font-size: 11px; font-weight: 800; pointer-events: none; }.map-stage.pegman-can-drop #map canvas { filter: saturate(1.07); }
.spot-action[aria-pressed="true"] { background: var(--accent) !important; color: #211706 !important; border-color: transparent; }
.photo-spot-marker { width: 38px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.62)); }
.photo-spot-marker.has-photo { position: relative; width: 62px; height: 49px; overflow: visible; border: 2px solid #fff; border-radius: 7px; background: #17212b; box-shadow: 0 4px 12px rgba(0,0,0,.48); filter: none; }
.photo-spot-marker.has-photo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px; background: #fff; transform: translateX(-50%) rotate(45deg); z-index: -1; }
.photo-spot-marker.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.photo-spot-marker.has-photo span { position: absolute; right: -7px; top: -9px; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #fff; border-radius: 50%; background: #192430; font-size: 15px; line-height: 1; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.time-dock { position: absolute; z-index: 8; left: 50%; bottom: 18px; width: min(660px, calc(100% - 420px)); min-width: 430px; transform: translateX(-50%); padding: 13px 16px 12px; border-radius: 18px; box-shadow: 0 12px 42px rgba(0,0,0,.25); }
.dock-topline, .dock-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dock-actions { display: flex; align-items: center; gap: 7px; }
.shadow-play-button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 9px; border: 1px solid rgba(245,184,75,.3); border-radius: 9px; background: rgba(245,184,75,.08); color: #ffe8ae; cursor: pointer; font-size: 10px; }
.shadow-play-button span { font-size: 9px; }.shadow-play-button b { font-weight: 750; }
.shadow-play-button:hover, .shadow-play-button[aria-pressed="true"] { border-color: rgba(245,184,75,.65); background: rgba(245,184,75,.17); }
.shadow-play-button[aria-pressed="true"] span { color: #fff; }
.dock-topline .eyebrow { margin: 0; }
.dock-main { margin-top: 2px; }
.dock-place { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.dock-place strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-place span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-time { font-size: 28px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dock-controls { display: grid; grid-template-columns: 38px minmax(160px, 1fr) 38px; gap: 7px; margin-top: 9px; max-width: 315px; }
.dock-controls input, .dock-controls .step-button { height: 36px; border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--text); border-radius: 9px; }
.dock-controls input { padding: 0 8px; min-width: 0; }
.dock-controls .step-button { min-width: 0; font-size: 20px; }
.timeline-track { margin-top: 3px; }
.timeline-track .range { display: block; height: 24px; cursor: ew-resize; }
.quick-time button:hover { background: rgba(245,184,75,.15); border-color: rgba(245,184,75,.45); color: #fff5db; }
.map-stage > .status-strip { bottom: 210px; }
.map-stage > .ground-controls { bottom: 260px; }

/* On wide desktop screens there is room beside the centered time dock. Keep
   the status HUD close to the map edge instead of reserving its full height. */
@media (min-width: 1760px) {
  /* MapLibre keeps its attribution in the lower map corner. Reserve a clear
     visual lane for it, so the status cards never cover the source notice. */
  .map-stage > .status-strip { bottom: max(48px, env(safe-area-inset-bottom)); }
}
.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; filter: drop-shadow(0 5px 10px rgba(0,0,0,.22)); }
.brand-row h1 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.brand-row p { margin: 2px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.panel-section { border-top: 1px solid var(--line); padding: 18px 0; }
.timeline-section { border-top: 0; padding-top: 0; }
.section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.section-heading.compact { align-items: center; }
.eyebrow { display: block; color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 4px; }
.section-heading h2, .section-heading h3 { margin: 0; letter-spacing: -.025em; }
.section-heading h2 { font-size: 24px; }
.section-heading h3 { font-size: 15px; }
.text-button { border: 0; background: transparent; color: var(--accent-2); padding: 5px; cursor: pointer; font-size: 12px; }
.account-actions { display: flex; gap: 8px; margin-top: 12px; }
.account-actions a, .auth-form button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 12px; }
.account-actions .primary-link, .auth-form button { background: var(--accent); border-color: var(--accent); color: #1e1608; font-weight: 700; }
.spot-list { display: grid; gap: 8px; margin-top: 12px; }
.spot-card { display: grid; grid-template-columns: 52px 1fr; gap: 9px; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.035); cursor: pointer; }
.spot-card img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #172633; }
.spot-emoji { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, rgba(245,184,75,.25), rgba(124,198,255,.14)); font-size: 28px; }
.spot-card strong, .spot-card span { display: block; }
.spot-card strong { font-size: 12px; }.spot-card span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.spot-edit-button { margin-top: 7px; padding: 3px 7px; border: 1px solid rgba(124,198,255,.4); border-radius: 7px; background: rgba(124,198,255,.09); color: #cfeaff; cursor: pointer; font-size: 10px; }
.spot-empty { color: var(--muted); font-size: 11px; margin: 4px 0; }
.spot-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.58); }
.spot-modal[hidden] { display: none; }.spot-dialog { width: min(430px, 100%); padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #0c1823; box-shadow: 0 20px 65px rgba(0,0,0,.5); }
.spot-photo-preview { display: block; width: calc(100% + 40px); height: 225px; margin: -20px -20px 16px; object-fit: cover; border-radius: 16px 16px 0 0; background: #172633; }.spot-photo-placeholder { display: grid; place-items: center; width: calc(100% + 40px); height: 130px; margin: -20px -20px 16px; border-radius: 16px 16px 0 0; background: linear-gradient(135deg, #183146, #16221e); font-size: 56px; }.spot-modal-heading { display: flex; align-items: center; gap: 10px; }.spot-modal-heading > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(245,184,75,.14); font-size: 23px; }.spot-modal-heading h3 { margin: 0; }.spot-modal-heading p, .spot-description, .spot-photo-meta { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.spot-description { margin-top: 14px; color: #d7e1e9; }.spot-photo-meta { margin-top: 9px; font-size: 11px; }
.spot-dialog h3 { margin: 0 0 8px; }.spot-dialog label { display: block; color: var(--muted); font-size: 11px; margin-top: 12px; }.spot-dialog input, .spot-dialog textarea { width: 100%; margin-top: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.055); color: var(--text); }.spot-dialog textarea { min-height: 64px; resize: vertical; }
.spot-form-row { display: grid; grid-template-columns: 64px 1fr; gap: 9px; }.spot-dialog .emoji-input { text-align: center; font-size: 20px; padding: 7px; }.spot-dialog .share-check { display: flex; align-items: center; gap: 8px; color: #d8e4ed; }.spot-dialog .share-check input { width: 16px; margin: 0; accent-color: var(--accent); }
.emoji-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 7px; }.emoji-choice { height: 35px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 19px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }.emoji-choice:hover { border-color: rgba(124,198,255,.55); background: rgba(124,198,255,.10); transform: translateY(-1px); }.emoji-choice.selected { border-color: var(--accent); background: rgba(245,184,75,.17); box-shadow: inset 0 0 0 1px rgba(245,184,75,.08); }
.modal-actions { display: flex; justify-content: end; gap: 9px; margin-top: 16px; }.modal-actions button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--text); cursor: pointer; }.modal-actions button[type="submit"] { background: var(--accent); color: #1e1608; border-color: var(--accent); }
.modal-primary-link, .modal-secondary-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: #1e1608; text-decoration: none; font-size: 12px; font-weight: 700; }.modal-secondary-link { border-color: rgba(124,198,255,.5); background: rgba(124,198,255,.12); color: #d8ecff; }
.modal-actions .modal-secondary, .popup-actions button { border-color: rgba(124,198,255,.45); background: rgba(124,198,255,.11); color: #d8ecff; }.popup-actions { display: flex; gap: 6px; margin-top: 9px; }.popup-actions button { min-height: 29px; padding: 0 7px; border: 1px solid; border-radius: 7px; cursor: pointer; font-size: 10px; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top, #17334b, #071018 60%); }.auth-card { width: min(420px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 25px 80px rgba(0,0,0,.4); }.auth-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); text-decoration: none; font-weight: 800; letter-spacing: -.02em; }.auth-brand img { border-radius: 9px; filter: drop-shadow(0 3px 7px rgba(0,0,0,.2)); }.auth-card h1 { margin: 20px 0 6px; }.auth-card > p { color: var(--muted); font-size: 13px; line-height: 1.45; }.auth-form label { display: block; margin-top: 13px; color: var(--muted); font-size: 12px; }.auth-form input { width: 100%; margin-top: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(255,255,255,.06); }.auth-form button { width: 100%; margin-top: 20px; }.form-error { color: var(--danger); display: block; margin-top: 4px; }.auth-switch a { color: var(--accent-2); }
.date-row { display: grid; grid-template-columns: 38px 1fr 38px; gap: 8px; margin-top: 15px; }
.date-row input, .step-button { height: 44px; border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--text); border-radius: 11px; }
.date-row input { padding: 0 10px; width: 100%; }
.step-button { cursor: pointer; font-size: 23px; min-width: 44px; }
.time-display { display: flex; align-items: baseline; justify-content: space-between; margin-top: 15px; }
.time-display strong { font-size: 32px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.time-display span { color: var(--muted); font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range { width: 100%; accent-color: var(--accent); }
.range-labels { display: flex; justify-content: space-between; color: #6f8090; font-size: 9px; margin-top: 3px; }
.quick-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.quick-time button { border: 1px solid var(--line); background: rgba(255,255,255,.045); color: #cbd5df; border-radius: 10px; min-height: 44px; padding: 6px; font-size: 10px; cursor: pointer; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { padding: 11px 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.metric span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.metric strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { display: block; width: 42px; height: 24px; background: #263543; border-radius: 999px; position: relative; cursor: pointer; transition: .18s ease; }
.switch span::after { content: ""; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; left: 3px; top: 3px; transition: .18s ease; }
.switch input:checked + span { background: #327a5c; }
.switch input:checked + span::after { transform: translateX(18px); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 11px; padding: 3px; margin: 13px 0; }
.segmented button { min-height: 35px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.segmented button.active { background: rgba(255,255,255,.1); color: var(--text); }
.weather-cards, .city-cards, .terrain-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.weather-cards div, .city-cards div, .terrain-cards div { padding: 9px; border-radius: 11px; background: rgba(255,255,255,.035); min-width: 0; }
.weather-cards span, .city-cards span, .terrain-cards span { display: block; color: var(--muted); font-size: 9px; }
.weather-cards strong, .city-cards strong, .terrain-cards strong { display: block; margin-top: 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terrain-cards { margin-top: 13px; }
.terrain-cards strong { font-size: 11px; }
.night-sky-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.night-sky-cards > div { min-width: 0; padding: 10px 9px; border: 1px solid rgba(153,174,255,.08); border-radius: 11px; background: linear-gradient(145deg, rgba(99,92,172,.09), rgba(255,255,255,.025)); }
.night-sky-cards span, .night-sky-cards small { display: block; color: var(--muted); font-size: 9px; }
.night-sky-cards strong { display: block; overflow: hidden; margin: 4px 0 2px; color: #eef3ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.milky-way-summary { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 10px; border: 1px solid rgba(157,133,224,.13); border-radius: 11px; background: radial-gradient(circle at 10% 50%, rgba(128,104,202,.13), transparent 34%), rgba(255,255,255,.02); }
.milky-way-summary div { min-width: 0; }.milky-way-summary strong, .milky-way-summary small { display: block; }.milky-way-summary strong { font-size: 11px; }.milky-way-summary small { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.milky-way-mark { width: 31px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(191,164,255,.76), transparent); filter: blur(.2px) drop-shadow(0 0 5px rgba(166,136,236,.42)); transform: rotate(-18deg); }
.celestial-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: #93a1ae; font-size: 9px; }
.celestial-legend span::before { content: ""; display: inline-block; width: 15px; height: 2px; margin-right: 5px; vertical-align: middle; border-radius: 2px; background: currentColor; opacity: .72; }
.sun-path-key { color: #e5bd65; }.moon-path-key { color: #a9c8ef; }.milky-way-key { color: #ae91dc; }.constellation-key { color: #89a9dc; }
.terrain-section.is-shadowed #terrainShadowValue { color: #ffba7a; }
.terrain-section.is-lit #terrainShadowValue { color: var(--good); }
.note { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 10px 0 0; }
.slider-label { display: block; margin-top: 11px; }
.slider-label span { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.slider-label b { color: var(--text); }
.source-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.source-pills span { border: 1px solid rgba(124,198,255,.18); background: rgba(124,198,255,.06); color: #a9cce7; padding: 5px 8px; border-radius: 999px; font-size: 9px; }
.drone-summary { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 11px; border: 1px solid rgba(255,145,112,.18); border-radius: 12px; background: linear-gradient(135deg, rgba(159,52,43,.12), rgba(255,255,255,.025)); }.drone-summary > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(255,145,112,.27); border-radius: 10px; color: #ffb69f; font-size: 22px; }.drone-summary strong, .drone-summary small { display: block; }.drone-summary strong { color: #ffe2d8; font-size: 13px; }.drone-summary small { margin-top: 2px; color: var(--muted); font-size: 9px; }.drone-official-link { display: inline-block; margin-top: 10px; }
.credits { color: #657483; font-size: 9px; line-height: 1.4; padding-top: 10px; }
.maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.22) !important; }
.maplibregl-ctrl button { width: 38px; height: 38px; }
.maplibregl-ctrl-bottom-right { margin-bottom: 4px; }
.maplibregl-ctrl-attrib { background: rgba(5,12,18,.7) !important; color: #aeb9c4 !important; }
.maplibregl-ctrl-attrib a { color: #c5d2dd !important; }
.map-stage.ground-active .maplibregl-ctrl-group { opacity: .35; pointer-events: none; }
.map-stage.placement-active #map canvas { cursor: crosshair; }
.map-stage.spot-placement-active #map canvas { cursor: crosshair; }
.map-stage.ground-active #map canvas { cursor: grab; }
.map-stage.ground-active #map canvas:active { cursor: grabbing; }
.map-stage.ground-active #map, .map-stage.ground-active #map canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
/* DOM markers do not share the virtual head tilt applied to the WebGL scene.
   Hide them in first-person mode so no map pin or photo appears in the sky. */
.map-stage.ground-active .maplibregl-marker { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 640px) {
  .photo-spot-marker { opacity: 1 !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
  .photo-spot-marker.has-photo { border-color: #0b1823; border-width: 3px; background: #0b1823; box-shadow: 0 4px 15px rgba(0,0,0,.72); }
  .photo-spot-marker.has-photo::after { background: #0b1823; }
  .photo-spot-marker.has-photo img { opacity: 1; filter: saturate(1.08) contrast(1.08); }
}

@media (max-width: 980px) {
  .time-dock { width: min(620px, calc(100% - 310px)); }
  .status-strip { display: none; }
  .map-brand span, .community-button span, .spot-action span, .settings-toggle span { display: none; }
  .map-brand { padding-right: 3px; }
  .community-button, .spot-action, .settings-toggle { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 1450px) and (min-width: 981px) {
  .map-brand span, .sky-view-button span, .spot-action span, .settings-toggle span { display: none; }
  .map-brand { padding-right: 3px; }
  .sky-view-button, .spot-action, .settings-toggle { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 1180px) and (min-width: 981px) {
  .community-button span, .spot-action span { display: none; }
  .community-button, .spot-action { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 1759px) and (min-width: 641px) {
  .map-corner-tools { right: 18px; bottom: 258px; }
  .map-stage.ground-active .map-corner-tools { bottom: 350px; }
}
@media (max-width: 1100px) {
  .community-content { width: min(100% - 32px, 920px); padding-top: 32px; }
  .community-hero { grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); gap: 35px; min-height: 390px; padding: 42px; }
  .community-stat { width: 180px; height: 180px; }.community-stat::after { inset: -52px; }.community-stat strong { font-size: 52px; }
  .community-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .topbar-search { min-width: 0; }
  .view-switch button { min-width: 35px; }
  .toolbar-divider { display: none; }
}
@media (max-width: 640px) {
  .map-stage { min-height: 100dvh; }
  .topbar { left: 6px; right: 6px; top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 4px; }
  .topbar-search { width: 100%; max-width: none; min-height: 54px; padding: 6px; border-radius: 15px; }
  .topbar-search { grid-column: 1 / -1; }
  .map-brand { padding-left: 1px; }
  .map-brand::after { height: 25px; }
  .map-brand img { width: 32px; height: 32px; }
  .search input { font-size: 14px; }
  .search-button { display: none; }
  .top-actions { position: static; grid-column: 1; min-width: 0; min-height: 50px; margin: 0; padding: 4px; overflow: hidden; border-radius: 14px; gap: 2px; }
  .top-social { grid-column: 2; min-height: 50px; padding: 4px; border-radius: 14px; }
  .top-social .profile-action { width: 40px; height: 40px; border-radius: 11px; }
  .toolbar-group { min-height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; }
  .view-switch button { min-width: 39px; width: 39px; gap: 3px; padding: 0; }.view-switch button .bi { width: 12px; height: 12px; }
  .basemap-button { width: 44px; padding: 0; justify-content: center; }
  .basemap-button span { display: none; }
  .ground-button span { display: none; }
  .ground-button { width: 44px; padding: 0; justify-content: center; }
  .account-register { display: none; }
  .account-top-action { min-height: 40px; padding: 0 7px; font-size: 11px; }
  .account-name { display: none; }
  .account-avatar { width: 30px; height: 30px; }
  .spot-action { width: 42px; min-height: 40px; padding: 0; justify-content: center; }
  .map-corner-tools { right: 56px; bottom: 110px; gap: 6px; }
  .basemap-switcher { width: 102px; height: 52px; padding: 4px 7px 4px 4px; border-radius: 13px; }.basemap-preview { width: 42px; height: 42px; border-radius: 9px; }.basemap-copy strong { font-size: 9px; }.basemap-copy small { display: none; }.pegman-control { width: 46px; height: 46px; border-radius: 13px; }.pegman-control > .bi { width: 25px; height: 25px; }
  .desktop-only { display: none; }
  .map-stage > .ground-controls { right: 10px; bottom: 208px; }
  .wind-indicator { left: 48px; bottom: 170px; min-width: 124px; min-height: 42px; padding: 5px 9px 5px 6px; }.wind-arrow { width: 31px; height: 31px; }
  .map-info-tools { left: 10px; bottom: 220px; }.map-info-tools button { min-height: 34px; padding: 0 8px; }.map-info-tools button > span:last-child { display: none; }
  .map-legend { left: 10px; bottom: 264px; width: min(330px, calc(100vw - 20px)); max-height: calc(100dvh - 282px); overflow-y: auto; }
  .measure-hud { top: 128px; width: min(300px, calc(100vw - 24px)); min-width: 0; }.measure-hud small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .control-panel { width: min(390px, calc(100vw - 16px)); padding: 17px 16px max(18px, env(safe-area-inset-bottom)); }
  .community-header { min-height: 64px; padding: 9px 14px; }.community-brand span { display: none; }.community-brand b { font-size: 8px; }.community-nav > span, .community-nav button > span { display: none; }.community-nav { gap: 8px; }.community-nav button { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .community-content { width: calc(100% - 24px); padding: 14px 0 48px; }
  .community-hero { display: block; min-height: 0; padding: 28px 22px 26px; border-radius: 23px; }
  .community-kicker { font-size: 9px; letter-spacing: .06em; }.community-hero h1 { margin-top: 16px; font-size: clamp(34px, 10vw, 46px); line-height: 1.02; }.community-hero-copy > p { margin-top: 17px; font-size: 13px; line-height: 1.55; }
  .community-hero-actions { margin-top: 23px; }.community-hero-actions button { flex: 1 1 140px; }
  .community-hero-visual { min-height: 184px; margin-top: 25px; }.community-stat { width: 140px; height: 140px; }.community-stat::before { inset: -22px; }.community-stat::after { inset: -42px; }.community-stat strong { font-size: 43px; }.community-stat span { margin-top: -27px; font-size: 9px; }.community-stat small { margin-top: -36px; }.visual-orbit { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }.orbit-one { left: 8%; }.orbit-two { right: 7%; }.orbit-three { right: 18%; }
  .community-discover { padding-top: 39px; }.community-section-head { display: block; }.community-section-head h2 { font-size: 26px; }.community-section-head p { margin-top: 7px; }
  .community-toolbar { display: block; margin-top: 18px; }.community-search { width: 100%; }.community-filters { width: max-content; margin-top: 10px; }
  .community-feed { grid-template-columns: 1fr; gap: 14px; margin-top: 17px; }.community-card-media { aspect-ratio: 16 / 9; }.community-empty { padding: 56px 24px; border-radius: 20px; }
  .settings-toggle { width: 42px; min-height: 40px; padding: 0; justify-content: center; }
  /* Keep the map as the primary mobile surface: the complete time control
     remains available, but uses compact, still tap-friendly rows. */
  .time-dock { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; min-width: 0; transform: none; padding: 8px 10px 9px; border-radius: 15px; }
  /* Put "Jetzt" beside the time and remove the otherwise separate header row. */
  .dock-topline { position: absolute; top: 8px; right: 72px; min-height: 0; }
  .dock-topline .eyebrow { display: none; }
  .dock-topline .text-button { padding: 1px 3px; font-size: 10px; }
  .dock-actions { gap: 4px; }.shadow-play-button { min-height: 25px; padding: 0 7px; }.shadow-play-button b { display: none; }
  .dock-main { min-height: 29px; margin-top: 0; }
  .dock-place { gap: 7px; }
  .dock-place strong { font-size: 15px; }
  .dock-place span { font-size: 10px; }
  /* Date and time belong together on mobile; keep the location header calm. */
  .dock-time { position: absolute; top: 48px; right: 13px; font-size: 20px; }
  .dock-controls { max-width: none; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; margin-top: 6px; }
  .dock-controls input, .dock-controls .step-button { height: 34px; border-radius: 9px; }
  .dock-controls input { font-size: 15px; }
  .dock-controls .step-button { font-size: 18px; }
  .timeline-track { margin-top: 0; }
  .timeline-track .range { height: 20px; min-height: 20px; }
  .range-labels { margin-top: 0; font-size: 8px; }
  .date-row { grid-template-columns: 44px 1fr 44px; }
  .date-row input { min-height: 44px; }
  .range { min-height: 28px; }
  .section-heading h2 { font-size: 21px; }
  .time-display strong { font-size: 30px; }
  /* The slider reaches every time of day, so the three duplicate quick-jumps
     stay available on larger screens while mobile gets the map space back. */
  .quick-time { display: none; }
  .dock-controls { width: min(220px, 100%); }
  .place-hint { top: 132px; max-width: calc(100% - 24px); white-space: normal; text-align: center; }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: 162px; }
  .maplibregl-ctrl-scale { display: none; }
  /* MapLibre can expand its credit text after a style refresh.  On phones it
     must stay a single info affordance and never cover the map. */
  .maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact {
    width: 28px; height: 28px; min-height: 28px; margin: 0 0 0 10px;
    padding: 2px 0 2px 26px !important; overflow: hidden; border-radius: 14px;
  }
  .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { display: none !important; }
  .maplibregl-ctrl-attrib-button { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .boot-spinner { animation: none; border-color: var(--accent); }
}

/* Fotospot-Details deserve a proper gallery-sized surface on larger screens. */
.spot-modal { padding: clamp(20px, 5vh, 56px); }
.spot-dialog { width: min(700px, calc(100vw - 80px)); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 28px; border-radius: 22px; }
.spot-photo-preview { width: calc(100% + 56px); height: min(42vh, 370px); min-height: 260px; margin: -28px -28px 22px; border-radius: 21px 21px 0 0; }
.spot-photo-placeholder { width: calc(100% + 56px); height: 190px; margin: -28px -28px 22px; border-radius: 21px 21px 0 0; }
.spot-modal-heading h3 { font-size: 21px; }.spot-modal-heading p, .spot-description { font-size: 14px; }.spot-photo-meta { font-size: 12px; }
.spot-dialog label { font-size: 12px; }.spot-dialog input, .spot-dialog textarea { padding: 12px; }.spot-dialog textarea { min-height: 88px; }
.emoji-picker { grid-template-columns: repeat(12, 1fr); }.emoji-choice { height: 42px; font-size: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.spot-create-header { display: flex; align-items: center; gap: 14px; margin: -4px 0 14px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.spot-create-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid rgba(245,184,75,.30); border-radius: 15px; background: linear-gradient(145deg, rgba(245,184,75,.25), rgba(245,184,75,.07)); box-shadow: inset 0 1px rgba(255,255,255,.08); font-size: 26px; }
.spot-create-title { min-width: 0; flex: 1; }.spot-create-header h3 { margin: 0; font-size: 23px; letter-spacing: -.035em; }.spot-create-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.spot-modal-close { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.04); color: #aebdca; cursor: pointer; font-size: 23px; line-height: 1; transition: background .16s ease, color .16s ease; }.spot-modal-close:hover { background: rgba(255,255,255,.10); color: #fff; }
.spot-location-card { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 12px; border: 1px solid rgba(245,184,75,.18); border-radius: 12px; background: linear-gradient(100deg, rgba(245,184,75,.10), rgba(245,184,75,.025)); }.spot-location-card > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(245,184,75,.16); color: #ffe0a0; font-size: 19px; }.spot-location-card div { min-width: 0; flex: 1; }.spot-location-card strong, .spot-location-card small { display: block; }.spot-location-card strong { color: #f4eadb; font-size: 11px; }.spot-location-card small { margin-top: 2px; color: #b3a68f; font-size: 10px; font-variant-numeric: tabular-nums; }.spot-location-ready { padding: 4px 7px; border-radius: 999px; background: rgba(118,211,155,.12); color: #9fe8bb; font-size: 9px; font-weight: 750; }
.spot-create-form { display: grid; gap: 14px; }.spot-create-grid { display: grid; grid-template-columns: .96fr 1.04fr; gap: 14px; }
.spot-form-section { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(255,255,255,.026); }.spot-name-section { padding: 15px; border-color: rgba(124,198,255,.18); background: linear-gradient(110deg, rgba(124,198,255,.075), rgba(255,255,255,.025)); }
.spot-section-heading { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; }.spot-section-heading > span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid rgba(124,198,255,.32); border-radius: 7px; background: rgba(124,198,255,.12); color: #c9ebff; font-size: 10px; font-weight: 800; }.spot-section-heading div { min-width: 0; }.spot-section-heading strong, .spot-section-heading small { display: block; }.spot-section-heading strong { color: #e9f1f6; font-size: 12px; }.spot-section-heading small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.spot-create-form .spot-name-field { display: block; margin: 0; }.spot-create-form .spot-name-field input { min-height: 50px; margin: 0; border-color: rgba(124,198,255,.25); background: rgba(4,13,20,.34); font-size: 15px; }.spot-create-form .spot-name-field input:focus { border-color: rgba(124,198,255,.72); box-shadow: 0 0 0 3px rgba(124,198,255,.10); }
.spot-create-form .emoji-picker { grid-template-columns: repeat(6, 1fr); margin: 0; }.spot-create-form .emoji-choice { height: 39px; border-color: rgba(255,255,255,.10); }.spot-note-section label { display: block; margin: 0; }.spot-note-section textarea { min-height: 108px; margin: 0; background: rgba(4,13,20,.25); line-height: 1.45; }.spot-character-count { display: block; margin-top: 6px; color: #8293a1; font-size: 9px; text-align: right; }
.share-card { position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; }
.spot-dialog .share-card input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.share-card-content { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 13px 14px; border: 1px solid rgba(124,198,255,.24); border-radius: 14px; background: linear-gradient(135deg, rgba(124,198,255,.10), rgba(124,198,255,.035)); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.share-card-copy { flex: 1; min-width: 0; }.share-card strong, .share-card small { display: block; }.share-card strong { color: #e5f3ff; font-size: 13px; }.share-card strong em { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: rgba(124,198,255,.16); color: #bfe5ff; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }.share-card small { margin-top: 4px; color: #9eb2c1; font-size: 11px; line-height: 1.4; }
.share-toggle { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: #263543; transition: .18s ease; }.share-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d6e0e8; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease, background .18s ease; }
.share-card:has(input:checked) .share-card-content { border-color: rgba(124,198,255,.52); background: linear-gradient(135deg, rgba(124,198,255,.18), rgba(124,198,255,.06)); box-shadow: inset 0 0 0 1px rgba(124,198,255,.08); }.share-card:has(input:checked) .share-toggle { border-color: #72c4fa; background: #317dab; }.share-card:has(input:checked) .share-toggle::after { transform: translateX(18px); background: #fff; }
.share-card:hover .share-card-content { border-color: rgba(124,198,255,.5); }.share-card input:focus-visible + .share-card-content { outline: 2px solid #c3edff; outline-offset: 3px; }
.spot-sharing-section { padding-bottom: 13px; }.spot-sharing-section .spot-section-heading { margin-bottom: 10px; }.spot-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 2px; }.spot-form-note { display: flex; align-items: flex-start; gap: 7px; max-width: 255px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }.spot-form-note span { color: var(--accent); }.spot-form-footer .modal-actions { margin: 0; }.spot-form-footer .modal-actions button[type="submit"] { min-width: 170px; font-weight: 800; box-shadow: 0 7px 18px rgba(245,184,75,.14); }.spot-form-footer .modal-actions button[type="submit"] span { margin-left: 4px; font-size: 16px; }

@media (max-width: 640px) {
  .spot-modal { align-items: end; padding: 8px; }
  .spot-dialog { width: 100%; max-height: calc(100dvh - 16px); padding: 20px; border-radius: 18px; }
  .spot-photo-preview { width: calc(100% + 40px); height: min(34dvh, 290px); min-height: 180px; margin: -20px -20px 16px; border-radius: 17px 17px 0 0; }
  .spot-photo-placeholder { width: calc(100% + 40px); height: 125px; margin: -20px -20px 16px; border-radius: 17px 17px 0 0; }
  .emoji-picker { grid-template-columns: repeat(6, 1fr); }.emoji-choice { height: 39px; }
  .spot-create-grid { grid-template-columns: 1fr; }.spot-form-section { padding: 13px; }.spot-form-footer { display: block; }.spot-form-note { max-width: none; margin-bottom: 13px; }.spot-form-footer .modal-actions { justify-content: stretch; }.spot-form-footer .modal-actions button { flex: 1; }.spot-form-footer .modal-actions button[type="submit"] { min-width: 0; }
  .modal-actions { position: sticky; bottom: -20px; padding: 12px 0 max(2px, env(safe-area-inset-bottom)); background: #0c1823; flex-wrap: wrap; }
}

/* Keep multi-zone details clear of the time controls while remaining scrollable. */
.drone-zone-results { max-height: min(230px, 34vh); }

.drone-color-legend > label { position: relative; display: grid; grid-template-columns: 19px 1fr; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; opacity: .46; transition: opacity .16s ease, border-color .16s ease, background .16s ease; }
.drone-color-legend > label:hover { opacity: .78; background: rgba(255,255,255,.035); }
.drone-color-legend > label:has(input:checked) { border-color: color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); opacity: 1; }
.drone-color-legend input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.drone-color-legend label i { position: relative; display: grid; grid-row: auto; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 4px; background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 28%, transparent) 0 3px, color-mix(in srgb, currentColor 8%, transparent) 3px 6px); }
.drone-color-legend input:checked + i::after { content: "✓"; color: #fff; font-size: 11px; font-style: normal; font-weight: 900; line-height: 1; text-shadow: 0 1px 3px #000; }
.drone-color-legend input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }
.drone-color-legend label span, .drone-color-legend label b, .drone-color-legend label small { display: block; min-width: 0; }
.drone-color-legend label b { color: #edf4f7; font-size: 9px; }
.drone-color-legend label small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.zone-airspace { color: #ff8f82; }

/* One calm planning surface replaces the scattered lower-left HUD cards. */
.planning-card { position: absolute; z-index: 8; left: 50%; bottom: max(36px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(460px, 1fr) minmax(500px, 650px); gap: 10px; width: min(1420px, calc(100% - 110px)); padding: 8px; transform: translateX(-50%); border-radius: 20px; box-shadow: 0 14px 46px rgba(0,0,0,.29); }
.planner-compact-toggle { display: none; }
.planning-summary { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 7px; min-width: 0; }
.planning-card .map-info-tools, .planning-card .wind-indicator, .planning-card .status-strip, .planning-card .time-dock { position: static; inset: auto; transform: none; box-shadow: none; }
.planning-card .map-info-tools { display: flex; align-items: center; gap: 5px; }
.planning-card .map-info-tools button { min-height: 34px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.045); }
.planning-card .cloud-map-toggle[aria-pressed="true"] { border-color: rgba(124,198,255,.32); background: rgba(74,145,194,.18); color: #d8efff; }
.planning-card .cloud-map-toggle[aria-pressed="false"] { opacity: .62; }
.planning-card .wind-indicator { justify-self: end; min-width: 124px; min-height: 34px; padding: 3px 7px 3px 4px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.065); pointer-events: none; }
.planning-card .wind-arrow { width: 29px; height: 29px; font-size: 20px; }
.planning-card .status-strip { grid-column: 1 / -1; display: flex; gap: 5px; padding: 0; background: transparent; }
.planning-card .status-strip > div { min-width: 0; min-height: 46px; flex: 1 1 92px; padding: 8px 9px; }
.planning-card .status-strip strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.planning-card .status-label { font-size: 8px; }
.planning-card .time-dock { width: auto; min-width: 0; padding: 7px 9px 6px 16px; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0; background: transparent; }
.planning-card .quick-time { margin-top: 8px; }
.planning-card .quick-time button { min-height: 34px; }
.map-legend { bottom: 210px; }
.map-stage > .ground-controls { bottom: 222px; }
.sky-view-button[aria-pressed="true"] { border-color: rgba(177,163,255,.55); background: linear-gradient(145deg, rgba(85,125,190,.36), rgba(113,83,186,.4)); color: #f0edff; }
.sky-view-button svg { width: 19px; height: 19px; }
.map-stage.sky-look-active #map canvas { cursor: ns-resize !important; }

@media (max-width: 1100px) and (min-width: 641px) {
  .planning-card { grid-template-columns: minmax(250px, .8fr) minmax(440px, 1.2fr); width: calc(100% - 80px); }
  .planning-card .status-strip { display: none; }
  .planning-summary { display: flex; align-items: center; justify-content: space-between; }
}

@media (max-width: 640px) {
  .top-actions { left: 0; right: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .top-actions::-webkit-scrollbar { display: none; }
  .planning-card { left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); display: block; width: auto; padding: 8px; transform: none; border-radius: 22px; box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055); }
  .planner-compact-toggle { position: absolute; z-index: 2; right: 8px; top: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.055); color: #bfcbd4; cursor: pointer; }
  .planning-summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-right: 44px; }
  .planning-card .status-strip { display: none; }
  .planning-card .map-info-tools { flex: 1; gap: 6px; }
  .planning-card .map-info-tools button { width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
  .planning-card .map-info-tools button > span:last-child { display: none; }
  .planning-card .wind-indicator { min-width: 108px; min-height: 40px; padding: 3px 8px 3px 4px; border-radius: 12px; }
  .planning-card .wind-arrow { width: 31px; height: 31px; font-size: 19px; }
  .planning-card .wind-indicator small { display: none; }
  .planning-card .wind-indicator strong { margin: 0; font-size: 11px; }
  .planning-card .time-dock { left: auto; right: auto; bottom: auto; width: auto; margin-top: 8px; padding: 10px 4px 2px; border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }
  .planning-card .dock-topline { position: static; min-height: 27px; }
  .planning-card .dock-topline .eyebrow { display: block; }
  .planning-card .dock-main { min-height: 32px; }
  .planning-card .dock-place strong { font-size: 16px; }
  .planning-card .dock-time { position: static; font-size: 22px; }
  .planning-card .dock-controls { width: min(230px, calc(100% - 58px)); max-width: none; margin-top: 4px; }
  .planning-card .timeline-track { margin-top: 0; }
  .planning-card .quick-time { display: none; }
  .planning-card.is-compact .time-dock { margin-top: 7px; padding: 9px 44px 2px 4px; }
  .planning-card.is-compact .dock-topline, .planning-card.is-compact .dock-controls, .planning-card.is-compact .timeline-track { display: none; }
  .planning-card.is-compact .dock-place span { display: none; }
  .map-stage > .ground-controls { right: 10px; bottom: 136px; }
  .map-legend { left: 8px; bottom: 148px; width: min(330px, calc(100vw - 16px)); max-height: calc(100dvh - 168px); }
  .map-stage:has(.planning-card.is-compact) .maplibregl-ctrl-bottom-left,
  .map-stage:has(.planning-card.is-compact) .maplibregl-ctrl-bottom-right { bottom: 121px; }
  .map-stage:has(.planning-card.is-compact) .map-corner-tools { bottom: 130px; }
  .map-stage.ground-active:has(.planning-card.is-compact) .map-corner-tools { bottom: 280px; }
  .map-stage:not(:has(.planning-card.is-compact)) .maplibregl-ctrl-bottom-left,
  .map-stage:not(:has(.planning-card.is-compact)) .maplibregl-ctrl-bottom-right { bottom: 214px; }
  .map-stage:not(:has(.planning-card.is-compact)) .map-corner-tools { bottom: 222px; }
  .map-stage.ground-active:not(:has(.planning-card.is-compact)) .map-corner-tools { bottom: 362px; }
  .map-corner-tools { gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(8,18,27,.88); box-shadow: 0 14px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055); backdrop-filter: blur(14px); }
  .basemap-switcher { width: 104px; height: 50px; padding: 4px 7px 4px 4px; border-color: transparent; border-radius: 15px; background: rgba(255,255,255,.025); box-shadow: none; backdrop-filter: none; }
  .basemap-preview { width: 42px; height: 42px; border-radius: 12px; }
  .basemap-copy { padding-right: 2px; }
  .basemap-copy strong { font-size: 10px; }
  .pegman-control { width: 50px; height: 50px; border-radius: 15px; box-shadow: none; }
  .sky-view-button { width: 42px; padding: 0; }
  .sky-view-button span { display: none; }
}