.district-map {
            color-scheme: dark;
            --navy: var(--on-surface);
            --blue: var(--color-primary);
            --blue-dark: var(--color-raised);
            --gold: var(--color-accent);
            --ink: var(--on-surface);
            --muted: var(--color-muted);
            --line: var(--color-border);
            --surface: var(--color-surface);
            --canvas: var(--color-page);
        }

        * { box-sizing: border-box; }

        .district-map {
            margin: 0;
            min-height: 100vh;
            padding: 24px;
            background: var(--canvas);
            color: var(--ink);
            font-family: Arial, Helvetica, sans-serif;
        }

        .map-shell {
            width: min(1200px, 100%);
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--surface);
            box-shadow: 0 10px 30px rgba(23, 50, 77, 0.12);
        }

        .toolbar {
            padding: 20px;
            border-bottom: 1px solid var(--line);
        }

        .district-map h1 {
            margin: 0 0 6px;
            color: var(--navy);
            font-size: clamp(1.35rem, 3vw, 2rem);
        }

        .intro {
            margin: 0 0 16px;
            color: var(--muted);
            line-height: 1.45;
        }

        .address-form {
            display: grid;
            grid-template-columns: minmax(240px, 1fr) auto auto;
            gap: 10px;
        }

        .district-map label {
            grid-column: 1 / -1;
            font-weight: 700;
            color: var(--navy);
        }

        .district-map input,
        .district-map button {
            min-height: 46px;
            border-radius: 8px;
            font: inherit;
        }

        .district-map input {
            width: 100%;
            border: 1px solid #aebac5;
            padding: 10px 13px;
            color: var(--ink);
            background: var(--color-surface);
            font-size: 16px;
        }

        .district-map input:focus {
            outline: 3px solid rgba(35, 105, 166, 0.22);
            border-color: var(--blue);
        }

        .district-map button {
            border: 0;
            padding: 10px 16px;
            cursor: pointer;
            font-weight: 700;
        }

        .maps-button {
            color: #fff;
            background: var(--blue);
        }

        .maps-button:hover { background: var(--blue-dark); }

        .assessor-button {
            color: var(--navy);
            background: var(--gold);
        }

        .assessor-button:hover { background: #dda02e; }

        .hint {
            min-height: 1.25em;
            margin: 9px 0 0;
            color: var(--muted);
            font-size: 0.88rem;
        }

        .hint.error { color: var(--color-accent-light); }

        .map-frame {
            position: relative;
            width: 100%;
            height: clamp(500px, 72vh, 850px);
            background: var(--color-surface);
        }

        .district-map iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        @media (max-width: 760px) {
            .district-map {
                min-height: 0;
                padding: 0;
                background: var(--surface);
            }
            .map-shell {
                width: 100%;
                border: 0;
                border-radius: 0;
                box-shadow: none;
            }
            .toolbar { padding: 16px 14px 14px; }
            .district-map h1 { font-size: 1.45rem; }
            .intro { margin-bottom: 14px; font-size: 0.94rem; }
            .address-form {
                grid-template-columns: minmax(0, 1fr);
                gap: 9px;
            }
            .district-map label { grid-column: auto; }
            .district-map button {
                width: 100%;
                min-height: 48px;
                padding-inline: 12px;
            }
            .hint { margin-top: 10px; line-height: 1.35; }
            .map-frame { height: max(430px, 62vh); }
        }

        @media (max-width: 380px) {
            .toolbar { padding-inline: 12px; }
            .district-map h1 { font-size: 1.3rem; }
            .intro { font-size: 0.9rem; }
            .map-frame { height: 420px; }
        }
    
.district-map .maps-button { color: var(--on-primary); border: 1px solid var(--color-border); }
.district-map .assessor-button { color: var(--on-accent); }