.app-root{width:100%;height:auto;min-height:100dvh;overflow:visible}
.sr-page-main{padding:34px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--sr-primary) 3.5%,var(--sr-surface)) 0,var(--sr-surface) 320px)}
.page-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:end;margin-bottom:22px}
.page-intro-copy{max-width:850px}
.page-intro .eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--sr-primary) 9%,transparent);font-size:10px}
.page-intro h1{margin:10px 0 8px;font-size:clamp(28px,3.6vw,48px);line-height:1.25;letter-spacing:-.02em}
.page-intro p{margin:0;max-width:780px;color:var(--sr-muted);font-size:clamp(13px,1.2vw,16px);line-height:1.8}
.page-intro-badge{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--sr-border);border-radius:14px;background:var(--sr-surface-raised);color:var(--sr-muted);font-size:11px;white-space:nowrap}
.page-intro-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:#48a06c;box-shadow:0 0 0 4px rgba(72,160,108,.12)}
.map-workspace{margin-bottom:46px;padding:16px;border:1px solid var(--sr-border);border-radius:28px;background:color-mix(in srgb,var(--sr-surface-raised) 97%,transparent);box-shadow:0 22px 70px rgba(21,69,76,.10)}
.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 3px 15px}
.workspace-head-copy{min-width:0}
.workspace-head .section-kicker{display:block;margin-bottom:2px}
.workspace-head h2{margin:0;font-size:clamp(16px,1.8vw,22px);line-height:1.45}
.workspace-head p{margin:4px 0 0;color:var(--sr-muted);font-size:11px}
.workspace-filter-button{display:none;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 12px;border:1px solid var(--sr-border);border-radius:12px;background:var(--sr-surface-raised);color:var(--sr-primary);font-weight:800;cursor:pointer}
.workspace-filter-button .filter-icon{font-size:15px;line-height:1}
.side-panel{position:static;inset:auto;width:100%;max-height:none;border-radius:20px;overflow:visible;margin-bottom:14px;box-shadow:none}
.panel-scroll{max-height:none;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.62fr)}
.panel-section{padding:14px 15px}
.panel-section:first-child{grid-column:1/-1}
.legend-section{grid-column:1;background:color-mix(in srgb,var(--sr-surface-soft) 62%,transparent);border-inline-end:1px solid var(--sr-border);border-bottom:0}
.info-section{grid-column:2;border-bottom:0}
.drawer-handle{display:none!important}
.section-heading{margin-bottom:11px}
.layer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.layer-card{margin-top:0;height:100%;padding:11px;border-radius:15px}
.layer-card-head{height:100%}
.switch-row{grid-template-columns:30px 27px minmax(0,1fr);gap:7px}
.switch-row strong{font-size:11.5px}
.switch-row small{font-size:9px}
.quality{font-size:7.5px}
.opacity-control,.select-row,.site-key{margin-top:8px;padding-top:8px}
.site-key{gap:4px}
.legend-section .section-heading,.info-section .section-heading{margin-bottom:8px}
.info-section details{padding:7px 0}
.map-canvas-card{position:relative;height:clamp(620px,72vh,900px);min-height:620px;overflow:hidden;border-radius:22px;background:#eaf1f2;box-shadow:none}
.map-wrap{position:absolute;inset:0;background:#edf3f4;touch-action:none;cursor:grab}
.map-wrap.dragging{cursor:grabbing}
.map-svg{width:100%;height:100%;display:block}
.map-controls{inset-inline-start:14px;inset-block-end:46px}
.map-status{inset-inline-start:62px;inset-block-end:12px}
.attribution{inset-inline-end:7px;bottom:5px}
.popup{z-index:60}
@media(max-width:1120px){.layer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){.page-intro{grid-template-columns:1fr}
.page-intro-badge{width:max-content}
.panel-scroll{grid-template-columns:1fr}
.legend-section,.info-section{grid-column:1;border-inline-end:0}
.legend-section{border-bottom:1px solid var(--sr-border)}
}
@media(max-width:760px){.sr-page-main{padding-top:22px}
.page-intro{margin-bottom:16px;gap:14px}
.page-intro h1{font-size:clamp(25px,8vw,36px)}
.page-intro-badge{display:none}
.map-workspace{padding:10px;border-radius:20px;margin-bottom:28px}
.workspace-head{padding:3px 2px 10px;align-items:flex-end}
.workspace-head p{display:none}
.workspace-filter-button{display:flex;flex:0 0 auto}
.side-panel{max-height:0;opacity:0;overflow:hidden;margin-bottom:0;border-width:0;transform:translateY(-6px);transition:max-height .34s ease,opacity .2s ease,transform .26s ease,margin .26s ease,border-width .1s linear .22s}
.side-panel.open{max-height:1700px;opacity:1;overflow:visible;margin-bottom:10px;border-width:1px;transform:none;transition-delay:0s}
.panel-scroll{display:block}
.panel-section{padding:12px}
.layer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.section-heading h2{font-size:14px}
.live-badge{font-size:8px}
.layer-card{padding:9px}
.switch-row{grid-template-columns:28px 25px minmax(0,1fr);gap:6px}
.switch-row strong{font-size:10.5px}
.switch-row small{font-size:8px}
.quality{font-size:7px}
.opacity-control,.select-row,.site-key{font-size:8.5px}
.select-row{grid-template-columns:1fr}
.map-canvas-card{height:64vh;min-height:480px;border-radius:16px}
.map-controls{inset-inline-start:10px;inset-block-end:42px}
.map-controls button{width:37px;height:36px}
.map-status{inset-inline-start:54px;inset-block-end:10px}
.attribution{font-size:7px}
}
@media(max-width:430px){.layer-grid{grid-template-columns:1fr}
.map-canvas-card{height:62vh;min-height:450px}
}