html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QGISRed Web App — design system
   Brand: #60bcd3 (cyan) · #7fa828 (green) · #0d1f2d (deep navy)

   Theming: dark is the default (:root). The light palette is applied via
   [data-theme="light"] on <html>, set by index.html before first paint and
   toggled from the Settings menu. Only the app chrome is themed — the
   "paper" overlays that float on the map (dialog, element card, search
   dropdown, welcome card) stay light in both themes by design.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand — identical in both themes */
    --qgr-accent:        #60bcd3;
    --qgr-green:         #7fa828;
    --qgr-warn:          #f5a623;

    /* Surfaces */
    --qgr-bg-app:          #0d1f2d;
    --qgr-bg-chrome:       #1a2e3f;
    --qgr-bg-panel:        #172a3a;
    --qgr-bg-panel-header: #1a3348;
    --qgr-bg-input:        #1e3448;
    --qgr-bg-input-focus:  #172c3f;
    --qgr-bg-map:          #223546;
    /* Scrim over the map for the welcome / loading / dialog states. Translucent
       on purpose: the base map stays visible underneath. */
    --qgr-scrim:           rgba(5,15,24,.62);

    /* Text */
    --qgr-text:            #c0d8e8;
    --qgr-text-strong:     #ffffff;
    --qgr-text-soft:       #b0cce0;
    --qgr-text-bright:     #e0eaf4;
    --qgr-text-dim:        #4a7a95;
    --qgr-text-header:     #7ab4cc;
    --qgr-text-rail:       #6a90aa;
    --qgr-text-rail-hover: #aecfdf;
    --qgr-text-meta:       #5a8099;
    --qgr-text-status:     #8ab4cf;
    --qgr-text-on-accent:  var(--qgr-accent);

    /* Lines, hovers, depth */
    --qgr-border:         rgba(255,255,255,.07);
    --qgr-border-soft:    rgba(255,255,255,.06);
    --qgr-border-panel:   rgba(255,255,255,.10);
    --qgr-border-strong:  rgba(255,255,255,.14);
    --qgr-dot-border:     rgba(255,255,255,.25);
    --qgr-hover:          rgba(255,255,255,.06);
    --qgr-hover-subtle:   rgba(255,255,255,.05);
    --qgr-hover-strong:   rgba(255,255,255,.13);
    --qgr-shadow-panel:   0 4px 24px rgba(0,0,0,.4);

    /* Active state of the floating map buttons. These sit on the basemap, not
       on the app chrome, so their base state stays light in both themes — only
       the "on" state flips. */
    --qgr-mapbtn-on-bg:       #1a2e3f;
    --qgr-mapbtn-on-bg-hover: #243a50;
    --qgr-mapbtn-on-fg:       var(--qgr-accent);
    --qgr-mapbtn-on-border:   var(--qgr-accent);
}

:root[data-theme="light"] {
    --qgr-bg-app:          #dbe4ec;
    --qgr-bg-chrome:       #ffffff;
    --qgr-bg-panel:        #ffffff;
    --qgr-bg-panel-header: #eef4f8;
    --qgr-bg-input:        #ffffff;
    --qgr-bg-input-focus:  #ffffff;
    --qgr-bg-map:          #e8edf2;
    --qgr-scrim:           rgba(14,32,46,.45);

    --qgr-text:            #2c4155;
    --qgr-text-strong:     #0d1f2d;
    --qgr-text-soft:       #3d5568;
    --qgr-text-bright:     #0d1f2d;
    /* These sit on light surfaces as small/bold text, so they are darker than
       a naive inversion would suggest — each clears 4.5:1 against its own bg. */
    --qgr-text-dim:        #5d7788;
    --qgr-text-header:     #23708a;
    --qgr-text-rail:       #445f70;
    --qgr-text-rail-hover: #1b4a5d;
    --qgr-text-meta:       #63798a;
    --qgr-text-status:     #23708a;
    /* Brand cyan is too light on white — darken it for text/borders only */
    --qgr-text-on-accent:  #166b85;

    --qgr-border:         rgba(13,31,45,.10);
    --qgr-border-soft:    rgba(13,31,45,.08);
    --qgr-border-panel:   rgba(13,31,45,.12);
    --qgr-border-strong:  rgba(13,31,45,.18);
    --qgr-dot-border:     rgba(13,31,45,.25);
    --qgr-hover:          rgba(13,31,45,.06);
    --qgr-hover-subtle:   rgba(13,31,45,.04);
    --qgr-hover-strong:   rgba(13,31,45,.12);
    --qgr-shadow-panel:   0 4px 24px rgba(31,56,77,.20);

    --qgr-mapbtn-on-bg:       #dff1f6;
    --qgr-mapbtn-on-bg-hover: #cbe8f1;
    --qgr-mapbtn-on-fg:       #166b85;
    --qgr-mapbtn-on-border:   #4aa6c0;
}

.map-page-root {
    height: 100vh;
    overflow: hidden;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */

.qgr-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--qgr-bg-app);
}

/* ── Top toolbar ──────────────────────────────────────────────────────────── */

.qgr-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 .75rem 0 .5rem;
    height: 44px;
    min-height: 44px;
    background: var(--qgr-bg-chrome);
    border-bottom: 1px solid var(--qgr-border);
    flex-shrink: 0;
    z-index: 100;
}

.qgr-brand-group {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    text-decoration: none;
}

.qgr-logo-img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.qgr-brand-text {
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    color: var(--qgr-text-strong);
    white-space: nowrap;
}

.qgr-net-badge {
    background: rgba(96,188,211,.18);
    color: var(--qgr-text-on-accent);
    border: 1px solid rgba(96,188,211,.35);
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 1px 8px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qgr-toolbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.qgr-toolbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
    flex-shrink: 0;
}

.qgr-status-text {
    font-size: .78rem;
    color: var(--qgr-text-status);
    animation: qgr-pulse 1.4s ease-in-out infinite;
}

@keyframes qgr-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

.qgr-error-text {
    font-size: .78rem;
    color: var(--qgr-warn);
    cursor: default;
}

.qgr-tb-icon-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--qgr-hover);
    border-radius: 6px;
    color: var(--qgr-text-status);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.qgr-tb-icon-btn:hover:not(:disabled) {
    background: var(--qgr-hover-strong);
    color: var(--qgr-text-strong);
}

.qgr-tb-icon-btn.is-on {
    background: rgba(96,188,211,.15);
    color: var(--qgr-text-on-accent);
}

.qgr-tb-icon-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.qgr-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Icon rail ────────────────────────────────────────────────────────────── */

.qgr-rail {
    display: flex;
    flex-direction: column;
    width: 58px;
    flex-shrink: 0;
    background: var(--qgr-bg-app);
    border-right: 1px solid var(--qgr-border-soft);
    padding: .25rem 0;
    gap: 2px;
    overflow: hidden;
    z-index: 90;
}

.qgr-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    padding: .55rem 0 .45rem;
    border: none;
    background: none;
    color: var(--qgr-text-rail);
    cursor: pointer;
    position: relative;
    transition: background .15s, color .15s;
    border-left: 2px solid transparent;
}

.qgr-rail-btn:hover {
    background: var(--qgr-hover);
    color: var(--qgr-text-rail-hover);
}

.qgr-rail-btn.is-active {
    background: rgba(96,188,211,.12);
    color: var(--qgr-text-on-accent);
    border-left-color: var(--qgr-accent);
}

.qgr-rail-btn img {
    width: 26px;
    height: 26px;
    opacity: .7;
    transition: opacity .15s;
}

.qgr-rail-btn:hover img,
.qgr-rail-btn.is-active img {
    opacity: 1;
}

.qgr-rail-btn span {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Side panel ───────────────────────────────────────────────────────────── */

.qgr-side-panel {
    width: 224px;
    min-width: 224px;
    flex-shrink: 0;
    background: var(--qgr-bg-panel);
    border-right: 1px solid var(--qgr-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qgr-panel-header {
    padding: .65rem .85rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--qgr-text-header);
    background: var(--qgr-bg-panel-header);
    border-bottom: 1px solid var(--qgr-border);
    flex-shrink: 0;
}

.qgr-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: .6rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* ── Panel actions (General menu) ─────────────────────────────────────────── */

.qgr-action-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--qgr-border-panel);
    border-radius: 6px;
    background: var(--qgr-hover);
    color: var(--qgr-text);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s, color .15s;
}

.qgr-action-btn:hover:not(:disabled) {
    background: rgba(96,188,211,.12);
    border-color: var(--qgr-accent);
    color: var(--qgr-text-strong);
}

.qgr-action-btn:disabled {
    opacity: .45;
    cursor: default;
}

.qgr-action-btn img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ── Project stats ────────────────────────────────────────────────────────── */

.qgr-stats-section {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--qgr-text-dim);
    padding: .5rem .25rem .2rem;
    margin-top: .25rem;
}

.qgr-stats-section:first-child { margin-top: 0; }

.qgr-stat-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 5px;
    font-size: .8rem;
    color: var(--qgr-text);
    transition: background .12s;
}

.qgr-stat-row:hover { background: var(--qgr-hover-subtle); }

.qgr-stat-label {
    flex: 1;
    color: var(--qgr-text-soft);
}

.qgr-stat-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--qgr-text-bright);
    font-size: .82rem;
    min-width: 24px;
    text-align: right;
}

/* ── Analysis panel ───────────────────────────────────────────────────────── */

.qgr-run-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .7rem .75rem;
    border: none;
    border-radius: 7px;
    background: linear-gradient(135deg, #7fa828 0%, #60bcd3 100%);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    margin-top: .25rem;
}

.qgr-run-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.qgr-run-btn:active:not(:disabled) { transform: translateY(0); }

.qgr-run-btn:disabled {
    opacity: .45;
    cursor: default;
    transform: none;
}

.qgr-sim-error {
    font-size: .74rem;
    color: #f5a623;
    background: rgba(245,166,35,.08);
    border: 1px solid rgba(245,166,35,.25);
    border-radius: 5px;
    padding: .45rem .55rem;
    word-break: break-word;
    margin-top: .25rem;
}

/* ── Layers panel ─────────────────────────────────────────────────────────── */

.qgr-layer-group-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .25rem .1rem;
    margin-top: .2rem;
    cursor: pointer;
    user-select: none;
}

.qgr-layer-group-header:first-child { margin-top: 0; }

.qgr-layer-group-header:hover .qgr-layer-group-title { color: var(--qgr-text-header); }

.qgr-fl-bg-sep {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--qgr-border-soft);
}

.qgr-layer-group-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--qgr-text-dim);
    margin: 0;
    padding: 0;
}

.qgr-layer-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .35rem;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

.qgr-layer-row-sub { padding-left: 1.5rem; }

/* Aligns the base map checkbox with the Input/Results group checkboxes.
   Must come after .qgr-layer-row — same specificity, so source order decides. */
.qgr-fl-bg-row { padding-left: .25rem; }

.qgr-layer-row:hover { background: var(--qgr-hover); }

.qgr-layer-toggle {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--qgr-accent);
}

.qgr-layer-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}

.qgr-layer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--qgr-dot-border);
}

.qgr-layer-line {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.qgr-layer-name {
    font-size: .8rem;
    color: var(--qgr-text-soft);
    flex: 1;
}

.qgr-layer-name-bold {
    font-weight: 600;
    color: var(--qgr-text-bright);
}

.qgr-rp-indent {
    padding-left: 2.1rem;
}

/* ── Results in layers panel ──────────────────────────────────────────────── */

.qgr-rp-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--qgr-text-dim);
    padding: .3rem .25rem .1rem;
}

.qgr-rp-select {
    font-size: .78rem;
    padding: .22rem .4rem;
    border: 1px solid var(--qgr-border-strong);
    border-radius: 4px;
    background: var(--qgr-bg-panel-header);
    color: var(--qgr-text);
    width: 100%;
    cursor: pointer;
}

.qgr-rp-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .25rem .25rem .1rem;
}

.qgr-rp-legend-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    color: var(--qgr-text-soft);
}

.qgr-rp-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid var(--qgr-border-strong);
    flex-shrink: 0;
}

.qgr-rp-legend-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qgr-rp-meta {
    font-size: .7rem;
    color: var(--qgr-text-meta);
    padding: .4rem .25rem .1rem;
    border-top: 1px solid var(--qgr-border-soft);
    margin-top: .25rem;
}

.qgr-rp-warning {
    font-size: .7rem;
    color: var(--qgr-warn);
    padding: .25rem .25rem;
    word-break: break-word;
}

/* ── Floating layers panel ────────────────────────────────────────────────── */

.qgr-floating-layers {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 20;
    width: 230px;
    max-height: calc(100% - 60px);
    background: var(--qgr-bg-panel);
    border: 1px solid var(--qgr-border-panel);
    border-radius: 8px;
    box-shadow: var(--qgr-shadow-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qgr-fl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem .45rem;
    background: var(--qgr-bg-panel-header);
    border-bottom: 1px solid var(--qgr-border);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--qgr-text-header);
    flex-shrink: 0;
}

.qgr-fl-close {
    background: none;
    border: none;
    color: var(--qgr-text-meta);
    cursor: pointer;
    font-size: .8rem;
    padding: 0 2px;
    line-height: 1;
    transition: color .12s;
}

.qgr-fl-close:hover { color: var(--qgr-text); }

.qgr-fl-body {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* ── Map area ─────────────────────────────────────────────────────────────── */

.qgr-map-area {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--qgr-bg-map);
}

/* ── Empty/welcome state ──────────────────────────────────────────────────── */

.qgr-welcome-card {
    position: relative;
    background: rgba(255,255,255,.97);
    border-radius: 18px;
    box-shadow: 0 24px 72px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.2);
    padding: 2.5rem 2rem 2rem;
    max-width: 380px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
}

.qgr-welcome-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #8a9ba8;
    font-size: .95rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.qgr-welcome-close:hover {
    background: rgba(13,31,45,.07);
    color: #0d1f2d;
}

.qgr-welcome-logo {
    width: 80px;
    height: 80px;
    margin-bottom: .25rem;
    filter: drop-shadow(0 2px 8px rgba(96,188,211,.3));
}

.qgr-welcome-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0d1f2d;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.15;
}

.qgr-welcome-sub {
    font-size: .88rem;
    color: #5a7080;
    margin: 0;
    line-height: 1.45;
}

.qgr-welcome-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin-top: .5rem;
    padding: .85rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #60bcd3 0%, #7fa828 100%);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: opacity .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 4px 18px rgba(96,188,211,.35);
    border: none;
    text-decoration: none;
}

.qgr-welcome-cta:hover {
    opacity: .93;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(96,188,211,.45);
    color: #fff;
}

.qgr-welcome-cta:active { transform: translateY(0); }

.qgr-welcome-actions {
    display: flex;
    gap: .6rem;
    width: 100%;
    margin-top: .5rem;
}

.qgr-welcome-actions .qgr-welcome-cta {
    flex: 1;
    margin-top: 0;
    font-size: .88rem;
    padding: .8rem 1rem;
}

/* Import is the secondary path now that Open leads */
.qgr-welcome-cta-alt {
    background: #eef3f7;
    color: #2c4055;
    box-shadow: none;
    border: 1px solid #c8d4de;
}

.qgr-welcome-cta-alt:hover {
    background: #e3ebf2;
    color: #0d1f2d;
    box-shadow: none;
}

.qgr-welcome-cta:disabled {
    opacity: .6;
    cursor: default;
    transform: none;
}

.qgr-welcome-error {
    font-size: .78rem;
    color: #c0392b;
    margin: .25rem 0 0;
    line-height: 1.35;
}

.qgr-welcome-hint {
    font-size: .74rem;
    color: #8a9ba8;
    margin: 0;
}

/* ── Loading overlay ──────────────────────────────────────────────────────── */

@keyframes qgr-spin {
    to { transform: rotate(360deg); }
}

/* ── Floating map controls (bottom-right inside map) ─────────────────────── */

.qgr-map-controls {
    position: absolute;
    bottom: 52px;
    right: 10px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qgr-basemap-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px 5px 7px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 6px;
    background: rgba(255,255,255,.92);
    color: #2c4055;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
    transition: background .15s, border-color .15s;
    backdrop-filter: blur(4px);
}

.qgr-basemap-btn:hover { background: rgba(255,255,255,1); border-color: rgba(0,0,0,.28); }

/* Same specificity as the padding above, so it has to stay after it to win. */
.qgr-icon-only {
    justify-content: center;
    padding: 6px 7px;
    gap: 0;
}

.qgr-basemap-btn.is-on {
    background: var(--qgr-mapbtn-on-bg);
    color: var(--qgr-mapbtn-on-fg);
    border-color: var(--qgr-mapbtn-on-border);
}

.qgr-basemap-btn.is-on:hover { background: var(--qgr-mapbtn-on-bg-hover); }

/* ── Settings menu ────────────────────────────────────────────────────────── */

.qgr-settings-wrap {
    position: relative;
    display: flex;
}

.qgr-settings-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2000;
    min-width: 208px;
    background: var(--qgr-bg-panel);
    border: 1px solid var(--qgr-border-panel);
    border-radius: 8px;
    box-shadow: var(--qgr-shadow-panel);
    padding: .3rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qgr-settings-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .55rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--qgr-text);
    font-size: .8rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.qgr-settings-item:hover {
    background: var(--qgr-hover);
    color: var(--qgr-text-strong);
}

.qgr-settings-item svg { flex-shrink: 0; }

.qgr-settings-item-label { flex: 1; }

.qgr-settings-item-value {
    font-size: .72rem;
    font-weight: 600;
    color: var(--qgr-text-on-accent);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Click-away catcher behind the menu */
.qgr-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1999;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */

.qgr-search-wrap {
    position: relative;
}

.qgr-search-input {
    height: 28px;
    padding: 2px 8px;
    font-size: .8rem;
    border: 1px solid var(--qgr-border-strong);
    border-radius: 5px;
    background: var(--qgr-bg-input);
    color: var(--qgr-text-bright);
    width: 190px;
    outline: none;
    transition: border-color .15s, background .15s;
}

.qgr-search-input::placeholder { color: var(--qgr-text-meta); }

.qgr-search-input:focus {
    border-color: var(--qgr-accent);
    background: var(--qgr-bg-input-focus);
}

.qgr-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 2000;
    background: #fff;
    border: 1px solid #c8d4de;
    border-radius: 7px;
    box-shadow: 0 6px 24px rgba(0,0,0,.2);
    min-width: 250px;
    max-height: 290px;
    overflow-y: auto;
}

.qgr-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: .82rem;
    color: #2c3e50;
    border-bottom: 1px solid #f0f2f4;
    transition: background .1s;
}

.qgr-search-item:last-child { border-bottom: none; }
.qgr-search-item:hover { background: #f0f7ff; }

.qgr-search-desc {
    font-size: .72rem;
    color: #8a9ba8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* ── Element type badges ──────────────────────────────────────────────────── */

.qgr-el-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    font-size: .63rem;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 3px;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .01em;
}

.qgr-el-J  { background: #2c3e50; }
.qgr-el-T  { background: #78b3dc; }
.qgr-el-R  { background: #5a9fbf; }
.qgr-el-P  { background: #0f1291; }
.qgr-el-Pu { background: #4a8f3f; }
.qgr-el-V  { background: #7a5ea0; }

/* ── Element properties card ──────────────────────────────────────────────── */

.qgr-el-card {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: rgba(255,255,255,.97);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.22);
    min-width: 200px;
    max-width: 270px;
    overflow: hidden;
    font-size: .8rem;
}

.qgr-el-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #1a2e3f;
    color: #e0eaf4;
}

.qgr-el-card-header strong {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
}

.qgr-el-close {
    background: none;
    border: none;
    color: #7aa8c5;
    cursor: pointer;
    font-size: .85rem;
    padding: 0 2px;
    line-height: 1;
    transition: color .12s;
}

.qgr-el-close:hover { color: #fff; }

.qgr-el-desc {
    font-size: .73rem;
    color: #6c757d;
    padding: 4px 10px;
    border-bottom: 1px solid #e8ecf0;
    font-style: italic;
}

.qgr-el-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.qgr-el-table tr:nth-child(even) { background: #f7f9fb; }

.qgr-el-table td {
    padding: 4px 10px;
    vertical-align: top;
}

.qgr-prop-key {
    color: #6c7d8a;
    white-space: nowrap;
    width: 85px;
}

.qgr-el-results-row td {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--qgr-accent);
    background: #eef6f9;
    border-top: 1px solid #dbe6ec;
    padding: 3px 10px;
}

/* ── Error detail ─────────────────────────────────────────────────────────── */

.qgr-error-detail {
    font-size: .76rem;
    color: #f08080;
    padding: .5rem .6rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.qgr-hint {
    font-size: .8rem;
    color: var(--qgr-text-dim);
    padding: .35rem .25rem;
}

/* ── Network name dialog ──────────────────────────────────────────────────── */

.qgr-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--qgr-scrim);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.qgr-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,.3);
    padding: 1.75rem 1.5rem 1.5rem;
    width: 350px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.qgr-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.qgr-dialog-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0d1f2d;
}

.qgr-dialog-close {
    background: none;
    border: none;
    color: #8a9ba8;
    font-size: .9rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.qgr-dialog-close:hover:not(:disabled) {
    background: rgba(13,31,45,.07);
    color: #0d1f2d;
}

.qgr-dialog-close:disabled { opacity: .35; cursor: default; }

/* ── Import dialog fields ─────────────────────────────────────────────────── */

.qgr-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.qgr-field-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c7d8a;
}

.qgr-check-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: #2c4055;
    cursor: pointer;
    user-select: none;
    padding: .1rem 0 .15rem;
}

/* ── Searchable CRS combo ─────────────────────────────────────────────────── */

.qgr-combo {
    position: relative;
}

.qgr-combo-list {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    z-index: 3100;          /* above .qgr-backdrop (3000) */
    max-height: 230px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c8d4de;
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(0,0,0,.18);
}

.qgr-combo-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: 5px 9px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f4;
}

.qgr-combo-item:last-child { border-bottom: none; }
.qgr-combo-item:hover      { background: #f0f7ff; }

.qgr-combo-item.is-selected {
    background: #e6f2f8;
    font-weight: 600;
}

.qgr-combo-name {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qgr-combo-code {
    flex-shrink: 0;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: #8a9ba8;
}

.qgr-field-hint {
    font-size: .72rem;
    color: #8a9ba8;
    line-height: 1.35;
}

/* Explains why a dialog opened, above the field that resolves it.
   The dialog card is white in both themes, so this colour is fixed too. */
.qgr-dialog-note {
    margin: 0 0 .2rem;
    font-size: .76rem;
    line-height: 1.45;
    color: #4a5b68;
}

.qgr-dialog-note strong { color: #0d1f2d; }

.qgr-file-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.qgr-file-btn {
    flex-shrink: 0;
    padding: .35rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    color: #2c4055;
    background: #eef2f6;
    border: 1px solid #c8d4de;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.qgr-file-btn:hover { background: #e2e9f0; border-color: #a9bccd; }

.qgr-file-btn.is-disabled { opacity: .45; pointer-events: none; }

/* Browsers never expose the real path, so this is the file name only */
.qgr-file-name {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
    color: #2c4055;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;      /* keep the tail visible when it overflows */
    text-align: left;
}

.qgr-file-none {
    flex: 1;
    font-size: .8rem;
    font-style: italic;
    color: #98a8b4;
}

.qgr-file-meta {
    font-size: .72rem;
    color: #8a9ba8;
}

.qgr-import-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
    font-size: .82rem;
    color: #2c4055;
}

.qgr-spinner-dark {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(13,31,45,.18);
    border-top-color: #1b6ec2;
    border-radius: 50%;
    animation: qgr-spin .7s linear infinite;
    flex-shrink: 0;
}


.qgr-dialog-input {
    width: 100%;
    padding: .45rem .65rem;
    font-size: .9rem;
    border: 1.5px solid #c8d4de;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.qgr-dialog-input:focus {
    border-color: #60bcd3;
    box-shadow: 0 0 0 3px rgba(96,188,211,.18);
}

.qgr-dialog-input.is-invalid { border-color: #dc3545; }

.qgr-dialog-error {
    font-size: .78rem;
    color: #dc3545;
    margin-top: -.25rem;
}

.qgr-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .25rem;
}

/* ── Spinner (inline, small) ──────────────────────────────────────────────── */

.qgr-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: qgr-spin .7s linear infinite;
    flex-shrink: 0;
}