*, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            overflow: hidden;
            height: 100vh;
        }

        #map {
            width: 100%;
            height: 100vh;
        }

        #drawing-toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: #323232;
            color: #fff;
            padding: 8px 20px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
            z-index: 9999;
        }

        #drawing-toast.visible {
            opacity: 1;
        }

        #sidebar {
            position: fixed;
            top: 10px;
            right: 10px;
            width: 320px;
            max-height: calc(100vh - 20px);
            background: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            z-index: 1000;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #sidebar-header {
            background: #1a73e8;
            color: white;
            padding: 12px 16px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px 8px 0 0;
            flex-shrink: 0;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        #layers-panel {
            border-top: 1px solid #e8eaed;
            flex-shrink: 0;
        }

        #layers-tabs {
            display: flex;
            border-bottom: 1px solid #e8eaed;
            background: #f8f9fa;
        }

        .layers-tab {
            flex: 1;
            padding: 7px 2px;
            border: none;
            background: transparent;
            font-size: 11px;
            font-weight: 500;
            color: #5f6368;
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
            border-bottom: 2px solid transparent;
            font-family: inherit;
        }

        .layers-tab:hover {
            color: #202124;
        }

        .layers-tab.active[data-layer="aquifer"] {
            color: #1565C0;
            border-bottom-color: #1565C0;
            background: #e3f2fd;
        }

        .layers-tab.active[data-layer="borehole"] {
            color: #2e7d32;
            border-bottom-color: #2e7d32;
            background: #e8f5e9;
        }

        .layers-tab.active[data-layer="rainfall"] {
            color: #283593;
            border-bottom-color: #283593;
            background: #e8eaf6;
        }

        .layers-tab.active[data-layer="water-table"] {
            color: #6A1B9A;
            border-bottom-color: #6A1B9A;
            background: #f3e5f5;
        }

        .layers-tab-body {
            display: none;
            padding: 10px 16px;
        }

        .layers-tab-body.active {
            display: block;
        }

        .layer-toggle-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 500;
            color: #5f6368;
            cursor: pointer;
            margin-bottom: 6px;
        }

        .layer-toggle-label input {
            cursor: pointer;
        }

        #left-column {
            position: fixed;
            top: 10px;
            left: 10px;
            width: 300px;
            height: calc(100vh - 20px);
            display: flex;
            flex-direction: column;
            gap: 0;
            z-index: 1000;
        }

        #column-tabs {
            flex-shrink: 0;
            display: flex;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
        }

        .column-tab {
            flex: 1;
            padding: 10px 0;
            border: none;
            background: #e8eaed;
            font-size: 13px;
            font-weight: 500;
            color: #5f6368;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s, color 0.15s;
        }

        .column-tab:hover:not(.active) {
            background: #dadce0;
        }

        .column-tab:first-child.active {
            background: #2e7d32;
            color: #fff;
        }

        .column-tab:last-child.active {
            background: #1a73e8;
            color: #fff;
        }

        #polygon-panel {
            flex: 1 1 auto;
            min-height: 0;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #polygon-panel.hidden {
            display: none;
        }

        #rooftop-subtabs {
            display: flex;
            flex-shrink: 0;
            border-bottom: 1px solid #e8eaed;
            background: #f8f9fa;
        }

        .rooftop-subtab {
            flex: 1;
            padding: 7px 2px;
            border: none;
            background: transparent;
            font-size: 11px;
            font-weight: 500;
            color: #5f6368;
            cursor: pointer;
            font-family: inherit;
            border-bottom: 2px solid transparent;
            transition: color 0.15s, border-color 0.15s;
        }

        .rooftop-subtab:hover {
            color: #202124;
        }

        .rooftop-subtab.active {
            color: #2e7d32;
            border-bottom-color: #2e7d32;
        }

        .rooftop-subtab-body {
            display: none;
            flex: 1 1 auto;
            min-height: 0;
            flex-direction: column;
        }

        .rooftop-subtab-body.active {
            display: flex;
        }

        #subtab-polygon {
            overflow: hidden;
        }

        #subtab-overlays {
            overflow-y: auto;
            padding: 6px 12px 8px;
        }

        #polygon-panel-footer {
            padding: 12px 16px;
            border-top: 1px solid #e8eaed;
            flex-shrink: 0;
        }

        #polygon-list {
            list-style: none;
            overflow-y: auto;
            flex: 1;
            padding: 8px 0;
        }

        #polygon-list li {
            padding: 10px 16px;
            border-bottom: 1px solid #e8eaed;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            transition: background 0.15s;
        }

        #polygon-list li:hover {
            background: #f1f3f4;
        }

        #polygon-list li.selected {
            background: #e8f0fe;
            border-left: 3px solid #1a73e8;
            padding-left: 13px;
        }

        .polygon-info {
            flex: 1;
            min-width: 0;
        }

        .polygon-label {
            font-size: 13px;
            font-weight: 600;
            color: #202124;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .polygon-area {
            font-size: 12px;
            color: #5f6368;
        }

        .polygon-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s, opacity 0.15s;
            white-space: nowrap;
        }

        .btn-zoom {
            background: #e8f0fe;
            color: #1a73e8;
        }

        .btn-zoom:hover {
            background: #d2e3fc;
        }

        .btn-delete {
            background: #fce8e6;
            color: #c5221f;
        }

        .btn-delete:hover {
            background: #f8d7da;
        }

        #total-area {
            font-size: 14px;
            font-weight: 600;
            color: #202124;
            margin-bottom: 8px;
        }

        #soi-section {
            padding: 6px 12px 8px;
        }

        .soi-group {
            margin-bottom: 6px;
        }

        .soi-group:last-child {
            margin-bottom: 0;
        }

        .soi-group-header {
            font-size: 10px;
            font-weight: 600;
            color: #80868b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 0 2px;
        }

        .soi-toggle-label {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 0;
            font-size: 11px;
            font-weight: 500;
            color: #5f6368;
            cursor: pointer;
        }

        .soi-toggle-label input {
            cursor: pointer;
            margin: 0;
        }

        .soi-toggle-label:hover {
            color: #202124;
        }


        #btn-clear {
            width: 100%;
            padding: 8px 12px;
            background: #c5221f;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
        }

        #btn-clear:hover {
            background: #a50e0e;
        }

        #empty-state {
            text-align: center;
            padding: 24px 16px;
            color: #80868b;
            font-size: 13px;
            line-height: 1.5;
        }

        #empty-state strong {
            color: #5f6368;
        }

        #search-container {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1001;
        }

        #search-input {
            width: 360px;
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            font-size: 14px;
            font-family: inherit;
            outline: none;
        }

        #search-input:focus {
            box-shadow: 0 2px 8px rgba(26, 115, 232, 0.4);
        }

        .pac-container {
            z-index: 1002 !important;
        }

        .edge-label {
            position: absolute;
            background: rgba(0, 0, 0, 0.75);
            color: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 600;
            pointer-events: none;
            white-space: nowrap;
            z-index: 1003;
        }

        #aquifer-status {
            font-size: 11px;
            color: #80868b;
            padding: 6px 0;
        }

        #aquifer-status.loaded {
            color: #2e7d32;
        }

        #aquifer-info-window {
            max-width: 260px;
            font-size: 12px;
            line-height: 1.5;
        }

        #aquifer-info-window strong {
            color: #1565C0;
        }

        #borehole-status {
            font-size: 11px;
            color: #80868b;
            padding: 6px 0;
        }

        #borehole-status.loaded {
            color: #2e7d32;
        }

        #location-panel {
            padding: 10px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-bottom: 1px solid #e8eaed;
        }

        #btn-geolocate {
            width: 100%;
            padding: 7px 12px;
            background: #1565C0;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
        }

        #btn-geolocate:hover {
            background: #0D47A1;
        }

        .location-manual {
            display: flex;
            gap: 4px;
        }

        .location-manual input {
            flex: 1;
            padding: 6px 8px;
            border: 1px solid #dadce0;
            border-radius: 4px;
            font-size: 11px;
            font-family: inherit;
            outline: none;
            min-width: 0;
        }

        .location-manual input:focus {
            border-color: #1565C0;
        }

        .location-manual .btn-find {
            padding: 6px 10px;
            background: #e3f2fd;
            color: #1565C0;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .location-manual .btn-find:hover {
            background: #bbdefb;
        }

        #btn-clear-location {
            display: none;
            width: 100%;
            padding: 5px 12px;
            background: #fce8e6;
            color: #c5221f;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s;
        }

        #btn-clear-location:hover {
            background: #f8d7da;
        }

        #location-match-status {
            font-size: 11px;
            color: #2e7d32;
            display: none;
            text-align: center;
        }

        #rainfall-status {
            font-size: 11px;
            color: #80868b;
            padding: 6px 0;
        }

        #rainfall-status.loaded {
            color: #283593;
        }

        .rainfall-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10px;
            font-family: monospace;
        }

        .rainfall-table th {
            padding: 2px 4px;
            font-weight: 600;
            color: #5f6368;
            text-align: right;
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 1;
        }

        .rainfall-table th:first-child {
            text-align: left;
            min-width: 28px;
        }

        .rainfall-table td {
            padding: 1px 3px;
            text-align: right;
            white-space: nowrap;
        }

        .rainfall-table td:first-child {
            font-weight: 600;
            color: #5f6368;
            text-align: left;
        }

        .rainfall-table td.na {
            color: #ccc;
        }

        .rf-dry { background: #fff3e0; }
        .rf-light { background: #ffe0b2; }
        .rf-moderate { background: #81d4fa; }
        .rf-wet { background: #29b6f6; color: #fff; }
        .rf-very-wet { background: #1565C0; color: #fff; }

        .rainfall-table-wrapper {
            max-height: 360px;
            overflow: auto;
        }

        .rainfall-table-wrapper thead th {
            box-shadow: 0 1px 0 #ddd;
        }

        .rainfall-table tbody td.total-row {
            font-weight: 700;
            color: #283593;
            border-top: 2px solid #3949ab;
        }

        #water-table-status {
            font-size: 11px;
            color: #5f6368;
            padding: 6px 0;
        }

        .wt-chart-container {
            margin-bottom: 8px;
            text-align: center;
        }

        .wt-table {
            border-collapse: collapse;
            font-size: 10px;
            width: 100%;
        }

        .wt-table th {
            padding: 2px 4px;
            text-align: right;
            font-weight: 600;
            color: #6A1B9A;
            min-width: 36px;
            white-space: nowrap;
        }

        .wt-table td {
            padding: 1px 4px;
            text-align: right;
            white-space: nowrap;
        }

        .wt-table td:first-child {
            font-weight: 600;
            color: #5f6368;
            text-align: left;
        }

        .wt-table td.na {
            color: #ccc;
        }

        .wt-shallow { background: #c8e6c9; }
        .wt-moderate { background: #fff9c4; }
        .wt-deep { background: #ffcc80; }
        .wt-very-deep { background: #ef9a9a; }
        .wt-critical { background: #d32f2f; color: #fff; }

        .wt-table-wrapper {
            max-height: 280px;
            overflow: auto;
        }

        .wt-table-wrapper thead th {
            box-shadow: 0 1px 0 #ddd;
        }

        .wt-table tbody td.total-row {
            font-weight: 700;
            color: #6A1B9A;
            border-top: 2px solid #7B1FA2;
        }

        .water-inputs {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 6px;
            font-size: 12px;
            color: #5f6368;
        }

        .water-inputs label {
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-weight: 500;
            color: #5f6368;
        }

        .water-occupants {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid #dadce0;
            border-radius: 3px;
            font-size: 12px;
            font-family: inherit;
            outline: none;
            -moz-appearance: textfield;
        }

        .water-occupants::-webkit-inner-spin-button,
        .water-occupants::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .water-occupants:focus {
            border-color: #1a73e8;
        }

        .water-material,
        .water-building-type,
        .water-need {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid #dadce0;
            border-radius: 3px;
            font-size: 12px;
            font-family: inherit;
            outline: none;
            background: #fff;
        }

        .water-material:focus,
        .water-building-type:focus,
        .water-need:focus {
            border-color: #1a73e8;
        }

        .water-stats {
            margin-top: 4px;
            font-size: 12px;
            color: #1a73e8;
            font-weight: 500;
        }

        .water-stats.empty {
            color: #80868b;
            font-weight: 400;
            font-style: italic;
        }

        .water-formula {
            font-size: 12px;
            color: #5f6368;
            margin-top: 2px;
            line-height: 1.5;
        }

        .water-v {
            color: #1a73e8;
            font-weight: 500;
        }

        .lb-pairs {
            margin-top: 6px;
            padding: 6px 0;
            border-top: 1px solid #f1f3f4;
        }

        .lb-pairs-header {
            font-size: 12px;
            font-weight: 600;
            color: #202124;
            margin-bottom: 4px;
        }

        .lb-pairs-empty {
            font-size: 12px;
            color: #80868b;
            font-style: italic;
            margin-bottom: 4px;
        }

        .lb-pair {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 2px;
        }

        .lb-pair label {
            font-size: 12px;
            color: #5f6368;
            display: flex;
            align-items: center;
            gap: 2px;
            white-space: nowrap;
        }

        .lb-length,
        .lb-breadth {
            width: 50px;
            padding: 2px 4px;
            border: 1px solid #dadce0;
            border-radius: 3px;
            font-size: 12px;
            font-family: inherit;
            outline: none;
            text-align: center;
            -moz-appearance: textfield;
        }

        .lb-length::-webkit-inner-spin-button,
        .lb-length::-webkit-outer-spin-button,
        .lb-breadth::-webkit-inner-spin-button,
        .lb-breadth::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .lb-length:focus,
        .lb-breadth:focus {
            border-color: #1a73e8;
        }

        .lb-pair-area {
            font-size: 12px;
            color: #202124;
            font-weight: 500;
            white-space: nowrap;
            margin-left: auto;
        }

        .btn-lb-remove {
            padding: 1px 6px;
            border: none;
            border-radius: 3px;
            font-size: 12px;
            cursor: pointer;
            background: #fce8e6;
            color: #c5221f;
            transition: background 0.15s;
            line-height: 1.4;
        }

        .btn-lb-remove:hover {
            background: #f8d7da;
        }

        .lb-total {
            font-size: 12px;
            font-weight: 600;
            color: #202124;
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px solid #e8eaed;
        }

        .lb-tank-volume {
            font-size: 11px;
            color: #5f6368;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid #e8eaed;
            line-height: 1.5;
        }

        .btn-lb-add {
            padding: 3px 10px;
            border: 1px dashed #dadce0;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            background: transparent;
            color: #5f6368;
            transition: background 0.15s, border-color 0.15s;
            margin-top: 4px;
        }

        .btn-lb-add:hover {
            background: #f1f3f4;
            border-color: #1a73e8;
            color: #1a73e8;
        }

        #location-insights-panel {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            pointer-events: auto;
        }

        #location-insights-panel.hidden {
            display: none;
        }

        #location-insights-panel * {
            pointer-events: auto;
        }

        #insights-tabs {
            display: flex;
            border-bottom: 1px solid #e8eaed;
            background: #f8f9fa;
        }

        .insights-tab {
            flex: 1;
            padding: 8px 4px;
            border: none;
            background: transparent;
            font-size: 12px;
            font-weight: 500;
            color: #5f6368;
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s;
            border-bottom: 2px solid transparent;
            font-family: inherit;
        }

        .insights-tab.active {
            color: #1a73e8;
            border-bottom-color: #1a73e8;
        }

        .insights-tab:hover {
            color: #1a73e8;
        }

        .insights-tab-body {
            display: none;
        }

        .insights-tab-body.active {
            display: block;
        }

        #seasonality-header {
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
        }

        #seasonality-header.seasonal {
            background: #e65100;
        }

        #seasonality-header.moderate {
            background: #f9a825;
            color: #3e2723;
        }

        #seasonality-header.year-round {
            background: #00695c;
        }

        #seasonality-body {
            padding: 10px 14px;
        }

        #seasonality-months {
            font-size: 13px;
            font-weight: 600;
            color: #202124;
            margin-bottom: 4px;
        }

        #seasonality-desc {
            font-size: 11px;
            color: #5f6368;
            line-height: 1.4;
        }

        #seasonality-method {
            font-size: 10px;
            color: #80868b;
            margin-top: 6px;
        }

        #water-depth-header {
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: #6A1B9A;
        }

        #water-depth-body {
            padding: 10px 14px;
        }

        #water-depth-stations {
            font-size: 12px;
            color: #202124;
            line-height: 1.5;
        }

        .water-depth-station {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
            border-bottom: 1px solid #f1f3f4;
        }

        .water-depth-station:last-child {
            border-bottom: none;
        }

        .water-depth-station .station-name {
            font-weight: 500;
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .water-depth-station .station-depth {
            font-weight: 600;
            font-size: 13px;
        }

        .water-depth-shallow { color: #2e7d32; }
        .water-depth-moderate { color: #f9a825; }
        .water-depth-deep { color: #c62828; }

        #permeability-header {
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: #1565C0;
        }

        #permeability-body {
            padding: 10px 14px;
        }

        #permeability-stations {
            font-size: 12px;
            color: #202124;
            line-height: 1.5;
        }

        .permeability-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
            border-bottom: 1px solid #f1f3f4;
        }

        .permeability-row:last-child {
            border-bottom: none;
        }

        .permeability-row .litho-name {
            font-weight: 500;
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .permeability-row .litho-status {
            font-weight: 600;
            font-size: 13px;
        }

        .litho-permeable { color: #2e7d32; }
        .litho-impermeable { color: #c62828; }

        #recommendations-section {
            border-top: 1px solid #e8eaed;
            flex-shrink: 0;
        }

        #recommendations-header {
            padding: 10px 16px;
            background: #e8f5e9;
            font-size: 13px;
            font-weight: 600;
            color: #1B5E20;
        }

        #recommendations-body {
            padding: 8px 12px;
            font-size: 12px;
            color: #5f6368;
            line-height: 1.4;
        }

        .rec-row {
            padding: 8px 10px;
            border-bottom: 1px solid #f1f3f4;
            line-height: 1.6;
        }

        .rec-row:last-child {
            border-bottom: none;
        }

        .rec-condition {
            font-size: 12px;
            color: #202124;
        }

        .rec-condition .rec-val {
            font-weight: 600;
            color: #1a73e8;
        }

        .rec-condition .rec-label {
            font-weight: 500;
        }

        .rec-condition .rec-sign {
            font-weight: 700;
            margin: 0 3px;
        }

        .rec-condition .rec-gwl {
            font-weight: 500;
            color: #6A1B9A;
        }

        .rec-condition .rec-perm {
            font-weight: 600;
            color: #1B5E20;
        }

        .rec-condition .rec-imperm {
            font-weight: 600;
            color: #d93025;
        }

        .rec-result {
            font-size: 12px;
            font-weight: 700;
            color: #1a73e8;
            margin-top: 4px;
        }

        .rec-result.rec-recharge {
            color: #1B5E20;
        }

        #recharge-recommendations-section {
            border-top: 1px solid #e8eaed;
            flex-shrink: 0;
        }

        #recharge-recommendations-header {
            padding: 10px 16px;
            background: #FFF3E0;
            font-size: 13px;
            font-weight: 600;
            color: #E65100;
        }

        #recharge-recommendations-body {
            padding: 8px 12px;
            font-size: 12px;
            color: #5f6368;
            line-height: 1.4;
        }

        #tank-recommendations-section {
            border-top: 1px solid #e8eaed;
            flex-shrink: 0;
        }

        #tank-recommendations-header {
            padding: 10px 16px;
            background: #E3F2FD;
            font-size: 13px;
            font-weight: 600;
            color: #1565C0;
        }

        #tank-recommendations-body {
            padding: 8px 12px;
            font-size: 12px;
            color: #5f6368;
            line-height: 1.4;
        }

        #report-section {
            padding: 8px;
            border-top: 1px solid #e8eaed;
            flex-shrink: 0;
        }

        #btn-generate-report {
            width: 100%;
            padding: 8px 12px;
            background: #1565C0;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s, opacity 0.15s;
        }

        #btn-generate-report:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        #btn-generate-report:not(:disabled):hover {
            background: #0D47A1;
        }

        /* ---------- mobile ---------- */

        #mobile-bar {
            display: none;
        }

        #sheet-backdrop {
            display: none;
        }

        @media (max-width: 767px) {
            #mobile-bar {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 56px;
                background: rgba(255,255,255,0.95);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-top: 1px solid #dadce0;
                z-index: 2000;
                padding: 0 4px;
                padding-bottom: env(safe-area-inset-bottom, 0);
            }

            .mobile-bar-btn {
                flex: 1;
                border: none;
                background: transparent;
                font-size: 11px;
                font-weight: 600;
                color: #5f6368;
                cursor: pointer;
                font-family: inherit;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                padding: 4px 0;
                transition: color 0.15s;
            }

            .mobile-bar-btn:active {
                color: #1a73e8;
            }

            #mobile-bar-report:disabled {
                opacity: 0.4;
                pointer-events: none;
            }

            #sheet-backdrop {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.35);
                z-index: 1998;
                transition: opacity 0.25s;
            }

            body.sheet-open #sheet-backdrop {
                display: block;
            }

            /* left column as bottom sheet */
            #left-column {
                position: fixed;
                top: auto;
                left: 0;
                right: 0;
                bottom: 56px;
                width: 100vw;
                height: auto;
                max-height: 70vh;
                border-radius: 16px 16px 0 0;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
                transform: translateY(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1999;
                overflow-y: auto;
            }

            body.sheet-open[data-active-sheet="left"] #left-column {
                transform: translateY(0);
            }

            #column-tabs {
                border-radius: 16px 16px 0 0;
                position: sticky;
                top: 0;
                z-index: 2;
                flex-shrink: 0;
            }

            #polygon-panel {
                border-radius: 0;
                box-shadow: none;
                flex: 1 1 auto;
            }

            #location-insights-panel {
                border-radius: 0;
                box-shadow: none;
                flex: 1 1 auto;
            }

            /* sidebar as bottom sheet */
            #sidebar {
                position: fixed;
                top: auto;
                left: 0;
                right: 0;
                bottom: 56px;
                width: 100vw;
                max-height: 70vh;
                border-radius: 16px 16px 0 0;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
                transform: translateY(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1999;
                overflow-y: auto;
            }

            body.sheet-open[data-active-sheet="sidebar"] #sidebar {
                transform: translateY(0);
            }

            #sidebar-header {
                border-radius: 16px 16px 0 0;
                position: sticky;
                top: 0;
                z-index: 2;
            }

            /* search bar */
            #search-container {
                top: 8px;
                left: 8px;
                right: 8px;
                transform: none;
            }

            #search-input {
                width: 100%;
                max-width: 100%;
            }

            /* map padding for bottom bar */
            #map {
                height: 100vh;
                padding-bottom: 0;
            }

            /* toast position */
            #drawing-toast {
                bottom: 72px;
            }
        }