.site-header {
    position: relative;
    z-index: 100;
    min-height: 62px;
    padding: 9px max(16px, calc((100vw - 1500px) / 2));
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 20px;
    background: rgba(5, 15, 23, .97);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    backdrop-filter: blur(16px);
}

.site-header.has-map-controls {
    grid-template-columns: minmax(220px, 1fr) auto minmax(0, 1fr);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f8fafc;
    text-decoration: none;
    font-weight: 850;
    white-space: nowrap;
}

.site-brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(145deg, #14b8a6, #2563eb);
    color: white;
    font-size: .78rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.site-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
}

.site-nav a {
    padding: 8px 12px;
    border-radius: 9px;
    color: #91a2b2;
    text-decoration: none;
    font-weight: 700;
    font-size: .88rem;
}

.site-nav a.active,
.site-nav a:hover {
    background: #172635;
    color: #f8fafc;
}

.site-header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.editor-actions,
.map-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-save-state {
    max-width: 260px;
    overflow: hidden;
    color: #cbd5e1;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-pill {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .14);
    color: #9fb0bf;
    font-size: .78rem;
    white-space: nowrap;
}

.status-pill.editor {
    background: rgba(20, 184, 166, .18);
    color: #7ce7dd;
}

.site-button {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: #172635;
    color: #f8fafc;
    font: inherit;
    font-size: .86rem;
    font-weight: 750;
    cursor: pointer;
}

.site-button:hover { filter: brightness(1.15); }
.site-button.primary { border-color: transparent; background: #14b8a6; color: #031514; }
.site-button.ghost { background: transparent; }
.site-button.map-reload { border-color: #fb923c; background: #ea580c; }
.site-button.map-reload:hover { background: #f97316; }

.site-header + dialog,
dialog#login-dialog {
    width: min(460px, calc(100% - 28px));
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: #101c27;
    color: #f8fafc;
}

dialog#login-dialog::backdrop {
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
}

dialog#login-dialog .dialog-card {
    padding: 22px;
    display: grid;
    gap: 14px;
    position: relative;
}

dialog#login-dialog h2,
dialog#login-dialog p { margin: 0; }
dialog#login-dialog p { color: #9fb0bf; line-height: 1.5; }
dialog#login-dialog label { display: grid; gap: 6px; color: #9fb0bf; }
dialog#login-dialog input {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: #09141e;
    color: #f8fafc;
    font: inherit;
}
dialog#login-dialog .dialog-close {
    position: absolute;
    right: 12px;
    top: 10px;
    border: 0;
    background: transparent;
    color: #9fb0bf;
    font-size: 1.5rem;
    cursor: pointer;
}
dialog#login-dialog .form-error { color: #fca5a5; }

@media (max-width: 1350px) {
    .site-header.has-map-controls {
        grid-template-columns: auto 1fr;
    }

    .site-header.has-map-controls .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .site-header.has-map-controls .site-header-actions {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 800px) {
    .site-header {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
    }

    .site-header.has-map-controls .site-header-actions {
        align-items: flex-end;
        flex-direction: column-reverse;
    }

    .header-save-state { max-width: 190px; }
}

@media (max-width: 520px) {
    .site-brand > span:last-child,
    .status-pill {
        display: none;
    }

    .site-nav a {
        padding-inline: 9px;
        font-size: .82rem;
    }

    .map-header-actions {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .header-save-state {
        grid-column: 1 / -1;
        max-width: 220px;
        text-align: right;
    }
}