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

:root {
    --p: #29d7b1;
    --pd: #a18bff;
    --ps: #102a34;
    --gold: #43d9ec;
    --ink: #eef5ff;
    --muted: #91a3bc;
    --line: #1e2d43;
    --bg: #060b16;
    --panel: #0b1423;
    --panel-raised: #101d30;
    --danger: #ff557f;
    --focus: #65e9f5;
    --accent-pink: #ff4fa3;
    --accent-violet: #be7bff;
    --accent-cyan: #54e7ff;
    --accent-lime: #49e1aa;
    --accent-amber: #ffd166;
    color-scheme: dark;
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink)
}

button,
input {
    font: inherit
}

button {
    cursor: pointer;
    border: 0
}

a {
    text-decoration: none;
    color: inherit
}

.app {
    min-height: 100vh
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    background: #10b981;
    color: #fff;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    z-index: 10
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 10px 28px
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gold);
    display: grid;
    place-items: center
}

.brand b,
.brand small,
.account b,
.account small {
    display: block
}

.brand b {
    font-size: 17px
}

.brand small {
    font-size: 10px;
    color: #b8cbc5;
    margin-top: 2px
}

.sidebar nav {
    display: grid;
    gap: 5px
}

.sidebar nav a,
.bottom>a {
    height: 46px;
    padding: 0 13px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 13px
}

.sidebar nav a:hover,
.sidebar nav a.active,
.bottom>a:hover {
    background: #ffffff12;
    color: #fff
}

.sidebar nav a.active {
    box-shadow: inset 3px 0 var(--gold)
}

.sidebar em {
    margin-left: auto;
    background: var(--gold);
    border-radius: 20px;
    padding: 3px 7px;
    font-size: 9px;
    font-style: normal
}

.bottom {
    margin-top: auto
}

.account {
    border-top: 1px solid #ffffff18;
    margin-top: 15px;
    padding: 15px 8px 0;
    display: flex;
    gap: 10px;
    align-items: center
}

.account>span,
.avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dbe9e5;
    color: var(--pd);
    font-weight: 800;
    overflow: hidden
}

.account b {
    font-size: 11px
}

.account small {
    font-size: 9px;
    color:white;
    margin-top: 2px
}

main {
    margin-left: 250px
}

.menu {
    display: none
}

header {
    height: 82px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 17px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.head-actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.head-actions button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    color: var(--muted)
}

header label,
.hero label,
.card-head label,
.safety label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--p)
}

header h1 {
    font-size: 21px;
    margin-top: 5px
}

.content {
    max-width: 1450px;
    margin: auto;
    padding: 26px 34px
}

.hero {
    padding: 30px;
    border: 1px solid #dce9e5;
    border-radius: 18px;
    background: #eaf4f1;
    display: flex;
    justify-content: space-between;
    gap: 25px
}

.hero h2 {
    font-size: 34px;
    letter-spacing: -1px;
    margin: 7px 0
}

.hero p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    max-width: 650px
}

.search {
    height: 50px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    padding: 6px 8px 6px 15px;
    gap: 10px
}

.search i {
    color: var(--muted)
}

.search input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0
}

.search button,
.card-head button,
.empty button,
.safety button,
.empty-link,
.safety-link {
    background: var(--p);
    color: #fff;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 10px;
    font-weight: 700;
    display: inline-block
}

.shortcuts {
    display: flex;
    gap: 8px;
    margin-top: 9px
}

.shortcuts button,
.shortcuts .shortcut-link {
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    display: inline-block
}

.hero-note {
    width: 215px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.hero-note i {
    font-size: 25px;
    color: var(--p);
    margin-bottom: 12px
}

.hero-note b {
    font-size: 13px
}

.hero-note span {
    font-size: 10px;
    color: var(--muted);
    margin-top: 5px;
    line-height: 1.5
}

.grid {
    display: grid;
    grid-template-columns: 1.65fr .7fr;
    gap: 18px;
    margin-top: 18px
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px #19322b0b
}

.card-head {
    padding: 20px 21px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.card-head h3 {
    font-size: 15px;
    margin-top: 4px
}

.card-head button {
    background: #fff;
    color: var(--pd);
    border: 1px solid var(--line)
}

#map {
    height: 390px;
    margin: 0 14px;
    border-radius: 12px;
    overflow: hidden
}

.legend {
    padding: 11px 21px 15px;
    color: var(--muted);
    font-size: 9px;
    display: flex;
    gap: 16px
}

.legend i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 4px
}

.legend .current {
    background: var(--p)
}

.legend .destination {
    background: var(--gold)
}

.actions {
    padding-bottom: 14px
}

.action {
    margin: 0 14px 8px;
    width: calc(100% - 28px);
    min-height: 67px;
    padding: 9px;
    display: grid;
    grid-template-columns: 38px 1fr 12px;
    gap: 10px;
    align-items: center;
    text-align: left;
    background: #f8faf9;
    border-radius: 11px
}

.action>i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--p);
    border-radius: 9px
}

.action b,
.action small {
    display: block
}

.action b {
    font-size: 11px
}

.action small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 3px
}

.action>strong {
    color: #9aa9a5
}

.action.primary {
    background: var(--ps)
}

.action.sos>i {
    color: #c94b4b
}

.journey {
    margin-top: 18px
}

.status {
    font-size: 9px;
    background: #f1f4f3;
    padding: 6px 9px;
    border-radius: 20px;
    color: var(--muted)
}

.empty {
    margin: 0 21px 21px;
    border: 1px dashed #d7e0dd;
    border-radius: 12px;
    padding: 19px;
    display: flex;
    align-items: center;
    gap: 13px
}

.empty>i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--ps);
    color: var(--p);
    border-radius: 10px
}

.empty b {
    font-size: 12px
}

.empty p {
    font-size: 9px;
    color: var(--muted);
    margin-top: 4px
}

.empty button,
.empty-link {
    margin-left: auto
}

.lower {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
    margin-top: 18px
}

.card-head a {
    font-size: 9px;
    color: var(--p);
    font-weight: 700
}

.rows {
    padding: 0 21px 14px
}

.rows>div,
.rows>a {
    min-height: 58px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px
}

.rows>a:hover {
    background: #fafcfb
}

.rows>div>i,
.rows>a>i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ps);
    color: var(--p);
    display: grid;
    place-items: center;
    font-size: 9px
}

.rows div div,
.rows a div {
    flex: 1
}

.rows b,
.rows small {
    display: block
}

.rows b {
    font-size: 10px
}

.rows small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 3px
}

.rows>div>strong,
.rows>a>strong {
    font-size: 10px
}

.contacts .person {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dbe9e5;
    color: var(--pd);
    font-size: 9px;
    font-weight: 800
}

.contacts button,
.msg-link {
    width: 29px;
    height: 29px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    display: grid;
    place-items: center
}

.safety {
    margin-top: 18px;
    padding: 18px 21px;
    background:#10b981;
    color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 14px
}

.safety>i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: black;
    color: #e5b654;
    border-radius: 10px
}

.safety label {
    color: #d8b35e
}

.safety h3 {
    font-size: 13px;
    margin-top: 3px
}

.safety p {
    font-size: 9px;
    color: white;
    margin-top: 3px
}

.safety button {
    margin-left: auto;
    background: transparent;
    border: 1px solid #ffffff2e
}

footer {
    padding: 0 34px 22px;
    color: #8b9995;
    font-size: 9px;
    display: flex;
    justify-content: space-between
}

@media(max-width:1050px) {
    .hero-note {
        display: none
    }

    .grid {
        grid-template-columns: 1fr
    }

    .lower {
        grid-template-columns: 1fr
    }
}

@media(max-width:800px) {
    .sidebar {
        transform: translateX(-100%);
        transition: .25s
    }

    .sidebar.open {
        transform: translateX(0)
    }

    main {
        margin-left: 0
    }

    .menu {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        background: var(--ps);
        color: var(--p);
        border-radius: 9px
    }

    header {
        padding: 15px 18px
    }

    .content {
        padding: 18px
    }

    .hero {
        padding: 21px
    }

    .hero h2 {
        font-size: 25px
    }

    .search {
        height: auto;
        min-height: 50px;
        flex-wrap: wrap
    }

    .search input {
        height: 34px
    }

    .search button {
        width: 100%
    }

    #map {
        height: 320px
    }

    .empty {
        flex-wrap: wrap;
        align-items: flex-start
    }

    .empty button {
        width: 100%;
        margin-left: 0
    }

    .safety {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .safety button {
        width: 100%;
        margin-left: 56px
    }

    footer {
        padding: 0 18px 18px;
        flex-direction: column;
        gap: 8px
    }
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px
}

.page-head h2 {
    font-size: 20px
}

.page-head p {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px
}

.btn-primary {
    background: var(--p);
    color: #fff;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.btn-ghost {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.tab {
    padding: 9px 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted)
}

.tab.active {
    background: var(--p);
    color: #fff;
    border-color: var(--p)
}

.journey-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px auto;
    padding: 6px 8px 6px 12px;
    border-radius: 14px;
}

.journey-filter-label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .9px;
    white-space: nowrap;
}

.journey-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.journey-filter-options .tab {
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 10px;
}

.journey-list {
    padding: 6px 21px 21px
}

.journey-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    cursor: pointer
}

.journey-row:first-child {
    border-top: 0
}

.journey-row .jicon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ps);
    color: var(--p);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.journey-row .jinfo {
    flex: 1;
    min-width: 0
}

.journey-row .jinfo b {
    font-size: 12px;
    display: block
}

.journey-row .jinfo small {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    display: block
}

.journey-row .jmeta {
    text-align: right
}

.journey-row .jmeta strong {
    display: block;
    font-size: 11px
}

.badge {
    font-size: 9px;
    padding: 4px 9px;
    border-radius: 20px;
    margin-top: 5px;
    display: inline-block;
    font-weight: 700
}

.badge.completed {
    background: #eaf6f0;
    color: #1f9d63
}

.badge.active {
    background: #fff4e2;
    color: #b9791f
}

.badge.cancelled {
    background: #fdecec;
    color: #c94b4b
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 35, 31, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100
}

.modal-overlay.open {
    display: flex
}

.modal {
    background: #fff;
    border-radius: 16px;
    max-width: 430px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    max-height: 88vh;
    overflow-y: auto
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px
}

.modal-head h3 {
    font-size: 16px
}

.modal-head p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px
}

.modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f4f3;
    color: var(--muted);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.modal-body {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8
}

.modal-body b {
    color: var(--ink)
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px
}

.modal-actions button,
.modal-actions a {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-actions .primary {
    background: var(--p);
    color: #fff
}

.modal-actions .danger {
    background: #c94b4b;
    color: #fff
}

.modal-actions .ghost {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink)
}

.modal .sos-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fdecec;
    color: #c94b4b;
    display: grid;
    place-items: center;
    font-size: 18px
}

.share-contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px
}

.share-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line)
}

.share-contact-row:first-child {
    border-top: 0
}

.share-contact-row .person {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dbe9e5;
    color: var(--pd);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800
}

.share-contact-row span {
    flex: 1;
    font-size: 11px;
    color: var(--ink)
}

.toggle {
    position: relative;
    width: 40px;
    height: 23px;
    flex-shrink: 0
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0
}

.toggle span {
    position: absolute;
    inset: 0;
    background: #dfe6e3;
    border-radius: 20px;
    transition: .2s;
    cursor: pointer
}

.toggle span:before {
    content: '';
    position: absolute;
    width: 17px;
    height: 17px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s
}

.toggle input:checked+span {
    background: var(--p)
}

.toggle input:checked+span:before {
    transform: translateX(17px)
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid var(--line)
}

.toggle-row:first-child {
    border-top: 0
}

.toggle-row b {
    font-size: 12px;
    display: block
}

.toggle-row small {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    display: block
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 6px 21px 21px
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.form-field.full {
    grid-column: 1 / -1
}

.form-field label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .5px;
    text-transform: uppercase
}

.form-field input,
.form-field select,
.form-field textarea {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    outline: 0;
    font-family: inherit;
    color: var(--ink)
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--p)
}

.form-field .hint {
    font-size: 9px;
    color: var(--muted)
}

.form-actions {
    padding: 6px 21px 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 6px 21px 21px
}

.contact-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.contact-card .top {
    display: flex;
    align-items: center;
    gap: 12px
}

.contact-card .top .person {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dbe9e5;
    color: var(--pd);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0
}

.contact-card .top div {
    flex: 1;
    min-width: 0
}

.contact-card .top b {
    font-size: 12px;
    display: block
}

.contact-card .top small {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    display: block
}

.contact-card .permission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--ink);
    border-top: 1px solid var(--line);
    padding-top: 10px
}

.contact-card .card-buttons {
    display: flex;
    gap: 8px
}

.contact-card .card-buttons button,
.contact-card .card-buttons a {
    flex: 1;
    padding: 9px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-buttons .remove-btn {
    color: #c94b4b
}

.add-contact-card {
    border: 1px dashed #d7e0dd;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--muted);
    min-height: 180px;
    background: none;
    cursor: pointer;
    width: 100%
}

.add-contact-card i {
    font-size: 22px;
    color: var(--p)
}

.sos-panel {
    background: #c94b4b;
    color: #fff;
    border-radius: 16px;
    padding: 26px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.sos-panel .sos-btn {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    color: #c94b4b;
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0
}

.sos-panel h3 {
    font-size: 17px
}

.sos-panel p {
    font-size: 11px;
    margin-top: 5px;
    color: #ffe0e0;
    max-width: 440px
}

.tip-list {
    padding: 6px 21px 21px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.tip-row {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.tip-row i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ps);
    color: var(--p);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 11px
}

.tip-row b {
    font-size: 12px;
    display: block
}

.tip-row p {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.6
}

.chat-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 540px
}

.chat-list {
    border-right: 1px solid var(--line);
    max-height: 620px;
    overflow-y: auto
}

.chat-search {
    padding: 16px
}

.chat-search input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 11px;
    outline: 0
}

.chat-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 21px;
    cursor: pointer;
    width: 100%;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    color: var(--ink);
    background: transparent;
    font: inherit
}

.chat-item.active {
    background: var(--ps);
    border-left-color: var(--p)
}

.chat-item:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--p);
    outline-offset: -2px;
}

.chat-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-list-items > li {
    margin: 0;
    padding: 0;
}

.ui-state {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    color: var(--ink);
    font-size: 11px;
    line-height: 1.5;
}

.ui-state__icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--p);
    background: var(--ps);
    font-size: 14px;
    font-weight: 800;
}

.ui-state--loading .ui-state__icon {
    border: 2px solid var(--line);
    border-top-color: var(--p);
    border-radius: 50%;
    background: transparent;
    animation: ui-state-spin .8s linear infinite;
}

.ui-state__content {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}

.ui-state__title {
    font-size: 11px;
    font-weight: 750;
}

.ui-state__message {
    color: var(--muted);
    font-size: 10px;
}

.ui-state--error .ui-state__icon,
.ui-state--offline .ui-state__icon {
    color: #e14b72;
    border-color: #e14b7240;
    background: #e14b7212;
}

.ui-state__retry,
.ui-state__link {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--p);
    background: var(--panel-raised);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.ui-state__retry:hover,
.ui-state__link:hover {
    border-color: var(--p);
}

.chat-notice:empty {
    display: none;
}

.chat-notice .ui-state {
    padding: 8px 16px;
}

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

.chat-item .person {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dbe9e5;
    color: var(--pd);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0
}

.chat-item .meta {
    flex: 1;
    min-width: 0
}

.chat-item .meta b {
    font-size: 12px;
    display: block
}

.chat-item .meta small {
    font-size: 10px;
    color: var(--muted);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.chat-panel {
    display: flex;
    flex-direction: column
}

.chat-head {
    padding: 18px 21px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px
}

.chat-head b {
    font-size: 12px;
    display: block
}

.chat-head small {
    font-size: 10px;
    color: var(--muted)
}

.chat-messages {
    flex: 1;
    padding: 21px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 420px
}

.bubble {
    max-width: 72%;
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.5
}

.bubble.them {
    background: #f1f4f3;
    align-self: flex-start;
    border-bottom-left-radius: 4px
}

.bubble.me {
    background: var(--p);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px
}

.chat-input {
    padding: 16px 21px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px
}

.chat-input input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    outline: 0;
    font-size: 12px
}

.chat-input button {
    background: var(--p);
    color: #fff;
    width: 44px;
    border-radius: 10px
}

.settings-tabs {
    display: flex;
    gap: 8px;
    padding: 6px 21px 0;
    flex-wrap: wrap
}

.settings-panel {
    display: none;
    padding: 18px 21px 24px
}

.settings-panel.active {
    display: block
}

.avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px
}

.avatar-row .big-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dbe9e5;
    color: var(--pd);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 18px;
    overflow: hidden
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.map-full #map {
    height: 520px;
    margin: 0 14px
}

.eta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 21px
}

.eta-chip {
    flex: 1;
    min-width: 130px;
    background: #f8faf9;
    border-radius: 12px;
    padding: 14px
}

.eta-chip label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--p)
}

.eta-chip strong {
    display: block;
    font-size: 15px;
    margin-top: 6px
}

@media(max-width:900px) {
    .chat-shell {
        grid-template-columns: 1fr
    }

    .chat-list {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        max-height: 220px
    }

    .contacts-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .form-grid {
        grid-template-columns: 1fr
    }

    .sos-panel {
        flex-direction: column;
        text-align: center
    }

    .page-head {
        flex-direction: column;
        align-items: flex-start
    }
}

.notif-wrap {
    position: relative
}

.notif-bell {
    position: relative
}

.notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c94b4b;
    border: 2px solid #fff
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 330px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .15s ease;
    z-index: 60
}

.notif-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.notif-dropdown-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
}

.notif-dropdown-head b {
    font-size: 12px
}

.notif-dropdown-head a {
    font-size: 10px;
    color: var(--p);
    font-weight: 700
}

.notif-list {
    max-height: 340px;
    overflow-y: auto
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start
}

.notif-item:last-child {
    border-bottom: 0
}

.notif-item i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ps);
    color: var(--p);
    display: grid;
    place-items: center;
    font-size: 11px;
    flex-shrink: 0
}

.notif-item.sos i {
    background: #fdecec;
    color: #c94b4b
}

.notif-item b {
    font-size: 11px;
    display: block
}

.notif-item small {
    font-size: 9px;
    color: var(--muted);
    display: block;
    margin-top: 3px
}

.notif-item.unread {
    background: #f8fbfa
}

.notif-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 11px
}

.notif-date-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--muted);
    padding: 16px 21px 6px
}

.notif-page-list {
    padding: 0 21px 10px
}

.notif-row {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    align-items: flex-start
}

.notif-row:first-child {
    border-top: 0
}

.notif-row .nicon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ps);
    color: var(--p);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.notif-row.sos .nicon {
    background: #fdecec;
    color: #c94b4b
}

.notif-row .ninfo {
    flex: 1;
    min-width: 0
}

.notif-row .ninfo b {
    font-size: 12px;
    display: block
}

.notif-row .ninfo p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.6
}

.notif-row .ninfo small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 6px;
    display: block
}

.notif-row .unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p);
    margin-top: 6px;
    flex-shrink: 0
}

@media(max-width:480px) {
    .notif-dropdown {
        width: 86vw;
        right: -8px
    }
}

.org-badge {
    display: inline-block;
    background: var(--gold);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 3px 7px;
    border-radius: 20px;
    margin-top: 4px
}

.platform-badge {
    display: inline-block;
    background: #7c1d3f;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 3px 7px;
    border-radius: 20px;
    margin-top: 4px
}

.platform-sidebar {
    background: #17231f
}

.platform-sidebar .logo {
    background: #7c1d3f
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 18px
}

.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px
}

.stat-card label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--p)
}

.stat-card strong {
    font-size: 24px;
    display: block;
    margin-top: 10px
}

.stat-card small {
    color: var(--muted);
    font-size: 10px;
    display: block;
    margin-top: 4px
}

.data-table-wrap {
    padding: 0 21px 21px;
    overflow-x: auto
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    min-width: 560px
}

.data-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle
}

.data-table tr:last-child td {
    border-bottom: 0
}

.table-person {
    display: flex;
    align-items: center;
    gap: 8px
}

.table-person .person {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dbe9e5;
    color: var(--pd);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0
}

.table-action {
    color: var(--p);
    font-weight: 700;
    font-size: 10px;
    text-decoration: none;
    margin-right: 10px
}

.table-action.danger {
    color: #c94b4b
}

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 21px 16px;
    flex-wrap: wrap
}

.filter-bar input {
    flex: 1;
    min-width: 180px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 11px;
    outline: 0
}

.filter-bar select {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 11px;
    outline: 0;
    color: var(--ink)
}
/* Restrict avatar containers and images */
.person, .avatar-img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ensure images inside .person scale correctly */
.person img, .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Fix chat header layout */
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.delete-chat-btn {
  transition: color 0.2s ease-in-out;
  padding: 6px;
}

.delete-chat-btn:hover {
  color: #dc2626 !important;
}

.form-message {
  margin: 10px 0 18px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
}

.form-message-success {
  background: #e9f7ef;
  color: #1e7e3a;
  border: 1px solid #bfe6cc;
}

.form-message-error {
  background: #fdecec;
  color: #c94b4b;
  border: 1px solid #f3d4d4;
}

.form-field .field-error {
  color: #c94b4b;
  font-size: 12.5px;
  margin: 4px 0 0;
  min-height: 15px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.profile-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.avatar-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar-btn:hover {
  transform: scale(1.04);
}

.avatar-btn:focus-visible {
  outline: 2px solid var(--p, #00A651);
  outline-offset: 2px;
}

.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background-color: #ffffff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  padding: 8px 0;
}

.profile-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown-header {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-dropdown-header b {
  font-size: 14px;
  color: var(--text, #1e293b);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dropdown-header small {
  font-size: 12px;
  color: var(--muted, #64748b);
}

.profile-dropdown-divider {
  border: none;
  border-top: 1px solid var(--line, #e2e8f0);
  margin: 6px 0;
}

.profile-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #334155);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.profile-dropdown-item i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: var(--muted, #64748b);
  transition: color 0.15s ease;
}

.profile-dropdown-item:hover {
  background-color: var(--bg-hover, #f8fafc);
  color: var(--p, #00A651);
}

.profile-dropdown-item:hover i {
  color: var(--p, #00A651);
}

.profile-dropdown-item.logout-link:hover {
  background-color: #fef2f2;
  color: #ef4444;
}

.profile-dropdown-item.logout-link:hover i {
  color: #ef4444;
}

/* Phase 1 shared application foundation */
html {
    scroll-behavior: smooth
}

html[data-theme="light"] {
    --p: #087f6a;
    --pd: #6847d1;
    --ps: #dff5ef;
    --gold: #087f9a;
    --ink: #152336;
    --muted: #586a7e;
    --line: #d6e0e8;
    --bg: #eef3f7;
    --panel: #fff;
    --panel-raised: #f3f7fa;
    --danger: #be123c;
    --focus: #0e7490;
    color-scheme: light
}

body {
    min-width: 320px;
    background:
        radial-gradient(ellipse at 72% -15%, rgba(126, 34, 206, .13), transparent 38%),
        var(--bg);
    color: var(--ink);
    transition: background-color .2s ease, color .2s ease
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px
}

.app {
    min-height: 100vh
}

.sidebar {
    width: 264px;
    padding: 23px 16px 16px;
    background: #0e0b14;
    border-right: 1px solid #ffffff0e;
    box-shadow: 12px 0 42px #0000001a;
    transition: transform .24s ease, background-color .2s ease
}

.brand {
    min-height: 48px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 4px 10px 25px;
    color: #f8f4ff
}

.logo {
    width: 42px;
    height: 42px;
    border: 1px solid #bd72ff54;
    border-radius: 13px;
    background: linear-gradient(145deg, #9b35fb, #5816be);
    box-shadow: 0 0 22px #a855f733;
    display: grid;
    place-items: center;
    color: white;
    font-size: 17px
}

.brand b,
.brand small {
    display: block
}

.brand b {
    color: inherit;
    font-size: 16px;
    letter-spacing: -.35px
}

.brand small {
    color: #a79ab9;
    font-size: 9px;
    margin-top: 4px
}

.sidebar nav {
    display: grid;
    gap: 5px
}

.nav-label {
    padding: 9px 12px 5px;
    color: #82778f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.25px
}

.nav-label-spaced {
    margin-top: 10px
}

.sidebar nav a,
.bottom>a {
    min-height: 43px;
    padding: 0 12px;
    border-radius: 10px;
    color: #b8b0c4;
    font-size: 12px;
    gap: 11px;
    transition: color .15s ease, background .15s ease, transform .15s ease
}

.sidebar nav a i,
.bottom>a i {
    width: 17px;
    text-align: center;
    color: #988ca7
}

.sidebar nav a:hover,
.bottom>a:hover {
    background: #ffffff0b;
    color: #fff
}

.sidebar nav a.active {
    color: #fff;
    background: linear-gradient(100deg, #9b35fb2b, #7024a810);
    box-shadow: inset 2px 0 #c084fc, 0 6px 20px #00000014
}

.sidebar nav a.active i {
    color: #d5a5ff
}

.sidebar em {
    color: #fff;
    background: #8b32d7
}

.bottom>a {
    min-height: 40px
}

.account {
    border-top-color: #ffffff15;
    padding-top: 13px
}

.account>span,
.avatar {
    flex: 0 0 auto;
    background: #2b2237;
    color: #d7b3ff
}

.account .avatar-img,
.avatar-btn .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.account b {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

main {
    min-height: 100vh;
    margin-left: 264px
}

.app-header,
header {
    min-height: 80px;
    height: auto;
    padding: 15px clamp(18px, 3vw, 38px);
    gap: 18px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    backdrop-filter: blur(18px)
}

.header-title {
    min-width: 0;
    margin-right: auto
}

.header-title label,
header label,
.hero label,
.card-head label,
.safety label {
    color: #c084fc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.35px
}

html[data-theme="light"] .header-title label,
html[data-theme="light"] header label,
html[data-theme="light"] .hero label,
html[data-theme="light"] .card-head label {
    color: #7e22ce
}

.header-title h1,
header h1 {
    max-width: 65vw;
    color: var(--ink);
    font-size: clamp(17px, 1.5vw, 21px);
    letter-spacing: -.4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.head-actions {
    flex: 0 0 auto;
    gap: 9px
}

.head-actions button,
.theme-toggle {
    color: var(--muted);
    background: var(--panel-raised);
    border-color: var(--line)
}

.head-actions button:hover,
.theme-toggle:hover {
    color: var(--ink);
    border-color: #a855f76b
}

.theme-toggle {
    width: auto !important;
    min-width: 83px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px
}

.avatar-btn {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #e8d3ff !important;
    background: #342344 !important;
    border: 1px solid #a855f75c !important;
    border-radius: 50% !important
}

.profile-dropdown-menu,
.notif-dropdown {
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 18px 55px #00000045
}

.profile-dropdown-header,
.profile-dropdown-divider,
.profile-dropdown-item,
.notif-dropdown-head {
    border-color: var(--line)
}

.profile-dropdown-header small,
.notif-list,
.notif-empty {
    color: var(--muted)
}

.content {
    max-width: 1520px;
    padding: clamp(18px, 3vw, 34px)
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 228px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid #a855f739;
    background:
        radial-gradient(ellipse at 95% 18%, #9b35fb28, transparent 35%),
        linear-gradient(125deg, #17111f, #100d17 66%, #17101e);
    color: #f8f4ff;
    box-shadow: 0 18px 55px #00000020
}

.hero > div:first-child {
    flex: 1;
    min-width: 0
}

.hero h2 {
    max-width: 740px;
    color: #fcfaff;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.14;
    letter-spacing: -1.3px
}

.hero p {
    color: #b8adca;
    font-size: 12px
}

.hero-note,
.card,
.modal,
.contact-card,
.journey-row {
    color: var(--ink);
    background: var(--panel);
    border-color: var(--line)
}

.hero-note {
    width: min(235px, 30%);
    border-color: #ffffff13;
    background: #ffffff08;
    color: #f4ecff
}

.hero-note span,
.card p,
.card small,
.empty p,
.page-head p,
.rows small {
    color: var(--muted)
}

.hero-note i,
.hero-note b {
    color: #d2a0ff
}

.search,
.form-field input,
.form-field select,
.form-field textarea,
.chat-search input,
.chat-input input {
    color: var(--ink);
    background: var(--panel-raised);
    border-color: var(--line)
}

.search input,
.chat-search input,
.chat-input input,
.form-field input,
.form-field select,
.form-field textarea {
    color: var(--ink)
}

.search input::placeholder,
.chat-search input::placeholder,
.chat-input input::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--muted);
    opacity: .8
}

.search button,
.btn-primary,
.tab.active {
    color: white;
    background: linear-gradient(110deg, #a13bf2, #7125cb);
    border-color: transparent;
    box-shadow: 0 8px 24px #852bd52a
}

.shortcuts button,
.shortcuts .shortcut-link {
    min-height: 32px;
    padding: 8px 10px;
    border: 1px solid #ffffff19;
    border-radius: 8px;
    color: #c7b8d8
}

.shortcuts button:hover,
.shortcuts .shortcut-link:hover {
    color: #fff;
    border-color: #a855f766
}

.grid,
.lower {
    gap: 16px
}

.card {
    border-radius: 15px;
    box-shadow: 0 12px 34px #00000020
}

.card-head {
    gap: 12px
}

.card-head h3,
.page-head h2,
.modal-head h3 {
    color: var(--ink)
}

.card-head a,
.empty-link,
.shortcut-link {
    color: #d0a2ff
}

.card-head button,
.btn-ghost,
.tab,
.modal-actions .ghost {
    color: var(--ink);
    background: var(--panel-raised);
    border-color: var(--line)
}

.action {
    background: var(--panel-raised)
}

.action.primary {
    background: #a855f71a
}

.action > i,
.action.sos > i,
.rows > div > i,
.rows > a > i,
.tip-row i,
.journey-row .jicon {
    color: #d0a2ff;
    background: #a855f71b
}

.status {
    color: #d4b1fa;
    background: #a855f71c
}

.empty {
    border-color: var(--line)
}

.empty > i {
    color: #d0a2ff;
    background: #a855f71d
}

.empty b,
.rows b,
.rows a,
.rows > div {
    color: var(--ink)
}

.rows > div,
.rows > a,
.journey-row,
.chat-head,
.chat-input,
.settings-panel,
.toggle-row {
    border-color: var(--line)
}

.rows > a:hover,
.chat-item:hover {
    background: var(--panel-raised)
}

.contacts .person,
.share-contact-row .person,
.contact-card .top .person,
.chat-item .person,
.avatar-row .big-avatar {
    color: #d8baff;
    background: #a855f71d
}

.msg-link,
.contacts button {
    color: var(--muted);
    background: var(--panel-raised);
    border-color: var(--line)
}

.safety {
    border: 1px solid #a855f72c;
    background: linear-gradient(105deg, #21142d, #17111f);
    color: var(--ink)
}

.safety > i {
    color: #e3c0ff;
    background: #a855f728
}

.safety label {
    color: #d0a2ff
}

.safety h3 {
    color: #f5edff
}

.safety p {
    color: #b9aec9
}

.safety-link {
    color: white;
    background: #a855f7
}

.footer,
footer {
    color: var(--muted)
}

.badge.completed {
    color: #6ee7b7;
    background: #064e3b55
}

.badge.active {
    color: #fde68a;
    background: #78350f66
}

.badge.cancelled {
    color: #fda4af;
    background: #88133766
}

.modal-overlay {
    background: #07050bba;
    backdrop-filter: blur(5px)
}

.modal {
    border: 1px solid var(--line);
    box-shadow: 0 24px 70px #00000070
}

.modal-close,
.modal-actions .ghost {
    color: var(--muted);
    background: var(--panel-raised)
}

.modal-body,
.toggle-row b,
.tip-row b,
.contact-card .top b {
    color: var(--ink)
}

.bubble.them {
    color: var(--ink);
    background: var(--panel-raised)
}

.chat-item.active {
    background: #a855f71b
}

.sos-panel {
    background: linear-gradient(110deg, #9f1239, #be123c);
    border: 1px solid #fb477a5c
}

.sidebar-backdrop {
    display: none
}

.planned-card {
    max-width: 760px;
    margin: clamp(20px, 7vh, 80px) auto;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid #a855f744;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 100% 0, #9b35fb20, transparent 44%),
        var(--panel);
    box-shadow: 0 22px 75px #0000002d
}

.planned-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    color: #e4c7ff;
    border: 1px solid #a855f755;
    border-radius: 14px;
    background: #a855f725
}

.status-pill {
    display: inline-flex;
    padding: 6px 10px;
    color: #e2c7ff;
    border: 1px solid #a855f74f;
    border-radius: 999px;
    background: #a855f71d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px
}

.status-pill-error {
    color: #fda4af;
    border-color: #fb477a66;
    background: #fb477a1c
}

.planned-card h2 {
    margin: 18px 0 9px;
    color: var(--ink);
    font-size: clamp(24px, 4vw, 34px);
    letter-spacing: -.8px
}

.planned-card > p {
    max-width: 620px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75
}

.planned-card .planned-note {
    margin-top: 22px;
    padding: 14px 16px;
    border-left: 3px solid var(--gold);
    border-radius: 0 10px 10px 0;
    color: var(--ink);
    background: #22d3ee0e;
    font-size: 12px
}

.planned-actions,
.welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px
}

.planned-actions .btn-primary,
.planned-actions .btn-ghost,
.welcome-actions .btn-primary,
.welcome-actions .btn-ghost {
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px
}

.welcome-page {
    min-height: 100vh;
    display: block;
    padding: 0;
    background:
        radial-gradient(ellipse at 73% 48%, #801fd52c, transparent 37%),
        radial-gradient(ellipse at 15% 90%, #062b3822, transparent 34%),
        #0a0810
}

.welcome-layout {
    position: relative;
    min-height: 100vh;
    max-width: 1440px;
    margin: auto;
    padding: 35px clamp(24px, 7vw, 96px) 24px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 30px
}

.welcome-brand {
    grid-column: 1 / -1;
    align-self: start;
    padding: 0;
    color: #f8f4ff
}

.welcome-copy {
    position: relative;
    z-index: 1;
    max-width: 600px;
    padding: 35px 0 55px;
    color: #f8f4ff
}

.welcome-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    color: #d9b5ff;
    border: 1px solid #a855f74a;
    border-radius: 999px;
    background: #a855f716;
    font-size: 11px;
    font-weight: 700
}

.welcome-copy h1 {
    margin: 24px 0 16px;
    font-size: clamp(43px, 6.7vw, 78px);
    line-height: .98;
    letter-spacing: -3.8px
}

.welcome-copy h1 span {
    color: #c084fc;
    text-shadow: 0 0 32px #a855f744
}

.welcome-copy > p {
    max-width: 460px;
    color: #b8adca;
    font-size: 15px;
    line-height: 1.8
}

.welcome-actions .btn-primary {
    min-height: 50px;
    padding: 0 19px;
    font-size: 13px
}

.welcome-actions .btn-ghost {
    min-height: 50px;
    padding: 0 20px;
    color: #eee6f7;
    border-color: #ffffff25;
    background: #ffffff09;
    font-size: 13px
}

.welcome-promises {
    display: grid;
    gap: 11px;
    margin-top: 28px;
    list-style: none;
    color: #b8adca;
    font-size: 11px
}

.welcome-promises i {
    width: 22px;
    color: #44d7df
}

.welcome-visual {
    position: relative;
    min-height: min(62vh, 590px);
    overflow: hidden;
    border: 1px solid #a855f72a;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 56% 48%, #8f2df01c, transparent 46%),
        linear-gradient(150deg, #14101b, #0c0a11 70%);
    box-shadow: inset 0 0 75px #a855f70b, 0 28px 80px #0000004d
}

.welcome-visual::before,
.welcome-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#aa91c31b .7px, transparent .8px);
    background-size: 22px 22px;
    mask-image: linear-gradient(135deg, transparent, black 40%, transparent 94%)
}

.welcome-visual::after {
    opacity: .22;
    transform: rotate(18deg) scale(1.3)
}

.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74%;
    aspect-ratio: 1;
    border: 1px solid #a855f728;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-23deg) scaleY(.56)
}

.orbit-two {
    width: 94%;
    border-color: #22d3ee1e;
    transform: translate(-50%, -50%) rotate(22deg) scaleY(.56)
}

.welcome-route {
    position: absolute;
    z-index: 1;
    inset: 18% 15% 19% 18%;
    border-bottom: 3px solid transparent;
    border-radius: 45% 50% 48% 42%;
    filter: drop-shadow(0 0 10px #a855f7);
    transform: rotate(-34deg) skewY(-8deg)
}

.welcome-route::before {
    content: "";
    position: absolute;
    inset: 0;
    border-bottom: 3px solid #ba67ff;
    border-radius: 35% 50% 42% 52%;
    transform: rotate(9deg) skewY(12deg)
}

.route-node {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 3px solid #f9efff;
    border-radius: 50%;
    background: #952ff4;
    box-shadow: 0 0 20px #a855f7
}

.route-start {
    left: 0;
    bottom: -7px;
    background: #22d3ee;
    box-shadow: 0 0 20px #22d3ee
}

.route-stop {
    left: 54%;
    bottom: -7px;
    background: #e879f9;
    box-shadow: 0 0 20px #e879f9
}

.route-end {
    right: 0;
    top: -4px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #f0d9ff;
    color: white;
    background: #7130d7
}

.welcome-map-label {
    position: absolute;
    right: 7%;
    bottom: 9%;
    z-index: 2;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #ffffff1a;
    border-radius: 12px;
    color: #efe6f8;
    background: #100d17e8;
    font-size: 11px
}

.welcome-map-label i {
    color: #e879f9
}

.welcome-layout > footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 0 0;
    border-top: 1px solid #ffffff13;
    color: #8f849d;
    font-size: 10px
}

html[data-theme="light"] body {
    background:
        radial-gradient(ellipse at 70% -15%, #a855f71c, transparent 38%),
        var(--bg)
}

html[data-theme="light"] .sidebar {
    color: #2c1b3b;
    background: #fff;
    border-right-color: var(--line);
    box-shadow: 8px 0 34px #3014460b
}

html[data-theme="light"] .brand {
    color: #29153a
}

html[data-theme="light"] .brand small,
html[data-theme="light"] .nav-label {
    color: #786a83
}

html[data-theme="light"] .sidebar nav a,
html[data-theme="light"] .bottom>a {
    color: #62556e
}

html[data-theme="light"] .sidebar nav a i,
html[data-theme="light"] .bottom>a i {
    color: #816b95
}

html[data-theme="light"] .sidebar nav a:hover,
html[data-theme="light"] .bottom>a:hover {
    color: #32184c;
    background: #f4eafa
}

html[data-theme="light"] .sidebar nav a.active {
    color: #4b176f;
    background: #f2e7fc;
    box-shadow: inset 2px 0 #9333ea
}

html[data-theme="light"] .sidebar nav a.active i {
    color: #7e22ce
}

html[data-theme="light"] .account {
    border-top-color: var(--line)
}

html[data-theme="light"] .account small {
    color: #756b7e
}

html[data-theme="light"] .hero {
    color: #24152f;
    border-color: #dec5f4;
    background:
        radial-gradient(ellipse at 92% 0, #b265ef25, transparent 38%),
        linear-gradient(120deg, #fff, #f3eafa)
}

html[data-theme="light"] .hero h2,
html[data-theme="light"] .hero-note b {
    color: #29143b
}

html[data-theme="light"] .hero p,
html[data-theme="light"] .hero-note span {
    color: #65576f
}

html[data-theme="light"] .hero-note {
    border-color: #e4d5ef;
    background: #ffffffc9
}

html[data-theme="light"] .shortcuts button,
html[data-theme="light"] .shortcuts .shortcut-link {
    color: #65576f;
    border-color: #d9c9e5
}

html[data-theme="light"] .safety {
    background: linear-gradient(105deg, #f3eafa, #fff);
    border-color: #dec5f4
}

html[data-theme="light"] .safety h3,
html[data-theme="light"] .safety p {
    color: #2d2038
}

html[data-theme="light"] .profile-dropdown-header,
html[data-theme="light"] .profile-dropdown-divider,
html[data-theme="light"] .profile-dropdown-item,
html[data-theme="light"] .notif-dropdown-head {
    border-color: var(--line)
}

@media (max-width: 800px) {
    .sidebar {
        z-index: 31;
        width: min(292px, calc(100vw - 52px));
        transform: translateX(-105%)
    }

    .rental-page,
    .fleet-page {
        display: grid;
        width: 100%;
        gap: 14px;
    }

    .rental-page-heading,
    .rental-bookings,
    .fleet-bookings,
    .fleet-vehicle-list {
        padding: 18px;
        border: 1px solid #b24fff65;
        border-radius: 20px;
        color: var(--ink);
        background: #0c0c1bd9;
        box-shadow: 0 16px 42px #0006, 0 0 20px #a939ff20, inset 0 1px #ffffff18;
        backdrop-filter: blur(24px) saturate(145%);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
    }

    .rental-page-heading h2,
    .rental-bookings h2,
    .fleet-page h2 {
        margin-top: 5px;
        color: var(--ink);
        font-size: 17px;
    }

    .rental-page-heading p,
    .fleet-page > .groups-section-heading p {
        max-width: 65ch;
        margin-top: 6px;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.6;
    }

    .rental-status {
        color: var(--muted);
        font-size: 11px;
    }

    .rental-vehicle-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
        gap: 12px;
    }

    .rental-vehicle-card {
        display: grid;
        align-content: start;
        justify-items: start;
        gap: 8px;
        min-width: 0;
        padding: 17px;
        border: 1px solid #b24fff65;
        border-radius: 18px;
        color: var(--ink);
        background: #0c0c1bd9;
        box-shadow: 0 14px 32px #0005, inset 0 1px #ffffff18;
        backdrop-filter: blur(22px) saturate(145%);
        -webkit-backdrop-filter: blur(22px) saturate(145%);
    }

    .rental-vehicle-card h3,
    .fleet-vehicle h3,
    .fleet-booking h3 {
        color: var(--ink);
        font-size: 13px;
    }

    .rental-vehicle-icon {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid #b45cff69;
        border-radius: 14px;
        color: #e3acff;
        background: #762dbb37;
        font-size: 17px;
    }

    .rental-provider,
    .rental-details,
    .fleet-vehicle p,
    .fleet-booking p {
        color: var(--muted);
        font-size: 10px;
    }

    .rental-rate {
        color: #dba6ff;
        font-size: 12px;
    }

    .rental-description,
    .fleet-vehicle small,
    .fleet-booking small {
        color: var(--muted);
        font-size: 9px;
        line-height: 1.5;
    }

    .rental-booking-list,
    .fleet-vehicle-list {
        display: grid;
        gap: 9px;
    }

    .rental-booking-item,
    .fleet-vehicle,
    .fleet-booking {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 13px;
        border: 1px solid #ffffff1c;
        border-radius: 14px;
        background: #ffffff08;
    }

    .rental-booking-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .rental-booking-item strong {
        font-size: 11px;
    }

    .rental-booking-item span,
    .rental-booking-item small {
        color: var(--muted);
        font-size: 9px;
    }

    .fleet-vehicle-list {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .fleet-vehicle,
    .fleet-booking {
        border-color: #b24fff65;
        background: #0c0c1bd9;
        box-shadow: 0 14px 32px #0005, inset 0 1px #ffffff18;
        backdrop-filter: blur(22px) saturate(145%);
        -webkit-backdrop-filter: blur(22px) saturate(145%);
    }

    .fleet-vehicle > div,
    .fleet-booking > div:first-child {
        display: grid;
        gap: 6px;
    }

    .fleet-status-control {
        display: grid;
        min-width: 145px;
        gap: 5px;
        color: var(--muted);
        font-size: 9px;
    }

    .fleet-status-control select,
    .form-field select {
        min-height: 38px;
        padding: 8px 10px;
        border: 1px solid #a855f75c;
        border-radius: 10px;
        color: var(--ink);
        background: #090b18d9;
        font: inherit;
        font-size: 10px;
    }

    .fleet-booking-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 7px;
    }

    .fleet-booking-review {
        padding: 8px 10px;
        border: 1px solid #b45cff69;
        border-radius: 10px;
        color: #e2afff;
        background: #762dbb30;
        font: inherit;
        font-size: 9px;
    }

    .fleet-booking-review.is-reject {
        border-color: #fb71855c;
        color: #ffb6c1;
        background: #fb718514;
    }

    .org-review-card,
    .org-enrollment-requests,
    .car-hire-dashboard-card {
        border-color: #b24fff65;
    }

    .org-enrollment-requests .jmeta {
        display: flex;
        gap: 10px;
    }

    html[data-theme="light"] .rental-page-heading,
    html[data-theme="light"] .rental-bookings,
    html[data-theme="light"] .fleet-bookings,
    html[data-theme="light"] .fleet-vehicle,
    html[data-theme="light"] .fleet-booking,
    html[data-theme="light"] .rental-vehicle-card {
        color: #28213b;
        background: #f8f7ffdc;
        box-shadow: 0 16px 42px #39205220, 0 0 20px #a939ff15, inset 0 1px #ffffffd9;
    }

    html[data-theme="light"] .rental-vehicle-card h3,
    html[data-theme="light"] .fleet-vehicle h3,
    html[data-theme="light"] .fleet-booking h3 {
        color: #28213b;
    }

    html[data-theme="light"] .fleet-status-control select,
    html[data-theme="light"] .form-field select {
        color: #28213b;
        background: #ffffffd9;
    }

    @media (max-width: 800px) {
        .rental-page-heading,
        .rental-bookings,
        .fleet-bookings {
            padding: 14px;
        }

        .rental-vehicle-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .fleet-vehicle,
        .fleet-booking {
            align-items: flex-start;
            flex-direction: column;
        }

        .fleet-status-control {
            width: 100%;
        }

        .fleet-booking-actions {
            width: 100%;
        }
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .sidebar-backdrop.open {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: block;
        background: #05030ab8;
        backdrop-filter: blur(3px)
    }

    main {
        margin-left: 0
    }

    .menu {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        color: #e2c7ff;
        background: #a855f720;
        border: 1px solid #a855f747;
        border-radius: 11px
    }

    .app-header,
    header {
        position: sticky;
        top: 0;
        z-index: 20;
        min-height: 69px;
        padding: 11px 14px;
        gap: 11px
    }

    .header-title label {
        display: none
    }

    .header-title h1 {
        max-width: 42vw;
        margin: 0;
        font-size: 15px
    }

    .head-actions {
        gap: 6px
    }

    .head-actions button {
        width: 38px;
        height: 38px
    }

    .theme-toggle {
        min-width: 38px;
        width: 38px !important;
        padding: 0
    }

    .theme-toggle span {
        display: none
    }

    .content {
        padding: 17px 14px 22px
    }

    .hero {
        min-height: 0;
        padding: 23px 18px
    }

    .hero h2 {
        font-size: clamp(25px, 7vw, 32px)
    }

    .hero-note {
        display: none
    }

    .search {
        min-height: 50px;
        height: auto;
        flex-wrap: wrap;
        padding: 8px 10px
    }

    .search input {
        min-height: 34px
    }

    .search button {
        width: 100%;
        min-height: 40px
    }

    .grid,
    .lower {
        grid-template-columns: 1fr
    }

    #map {
        height: min(54vh, 380px);
        min-height: 250px
    }

    .empty {
        flex-wrap: wrap;
        align-items: flex-start
    }

    .empty-link {
        width: 100%;
        margin-left: 53px
    }

    footer {
        padding: 0 15px 16px
    }

    .welcome-layout {
        min-height: 100svh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(210px, 31vh) auto;
        gap: 15px;
        padding: 23px 22px 16px
    }

    .welcome-brand {
        grid-column: 1;
        padding: 0
    }

    .welcome-copy {
        padding: 12px 0 4px
    }

    .welcome-copy h1 {
        margin: 18px 0 12px;
        font-size: clamp(42px, 12vw, 64px);
        letter-spacing: -2.5px
    }

    .welcome-copy > p {
        font-size: 13px
    }

    .welcome-promises {
        margin-top: 17px
    }

    .welcome-visual {
        min-height: 210px;
        border-radius: 20px
    }

    .welcome-layout > footer {
        grid-column: 1;
        font-size: 9px
    }
}

@media (max-width: 420px) {
    .head-actions {
        gap: 4px
    }

    .theme-toggle,
    .head-actions button {
        width: 35px !important;
        min-width: 35px;
        height: 35px
    }

    .header-title h1 {
        max-width: 38vw;
        font-size: 14px
    }

    .welcome-actions > a {
        flex: 1 1 auto
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

.map-projection-switch {
    display: flex;
    width: fit-content;
    gap: 4px;
    margin: 0 14px 12px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-raised);
}

html[data-theme="dark"] .live-map-page .sidebar {
    border-right: 1px solid #a855f733;
    background: #0b0912;
    color: var(--ink);
    box-shadow: 10px 0 36px #0005;
}

html[data-theme="dark"] .live-map-page .brand small,
html[data-theme="dark"] .live-map-page .account small {
    color: var(--muted);
}

html[data-theme="dark"] .live-map-page .sidebar nav a,
html[data-theme="dark"] .live-map-page .bottom>a {
    color: #c7bdd5;
}

html[data-theme="dark"] .live-map-page .sidebar nav a i,
html[data-theme="dark"] .live-map-page .bottom>a i {
    color: #c084fc;
}

html[data-theme="dark"] .live-map-page .sidebar nav a.active {
    border: 1px solid #a855f744;
    background: #8b5cf622;
    box-shadow: inset 2px 0 #c084fc, 0 0 20px #8b5cf611;
}

.map-projection-switch button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.map-projection-switch button[aria-pressed="true"] {
    background: var(--ps);
    color: var(--ink);
    box-shadow: 0 0 18px #8b5cf633, inset 0 0 0 1px #a855f766;
}

.map-projection-switch button:focus-visible,
.map-full #myLocation:focus-visible,
.st-map-point:focus-visible,
.st-live-marker:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.map-full #map {
    position: relative;
    height: min(68vh, 680px);
    min-height: 390px;
    margin: 0 14px;
    overflow: hidden;
    border: 1px solid #8b5cf633;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 45%, #251044 0%, #0b0b18 68%),
        #080812;
    box-shadow: inset 0 0 55px #8b5cf622, 0 18px 50px #0004;
}

.map-full .maplibregl-map {
    font: inherit;
}

.map-full .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid #a855f744;
    border-radius: 12px;
    background: #100d1ee8;
    box-shadow: 0 4px 18px #0005;
}

.map-full .maplibregl-ctrl-group button {
    background-color: transparent;
}

.map-full .maplibregl-ctrl-group button span {
    filter: invert(1);
}

.map-full .maplibregl-ctrl-attrib {
    background: #080812d9;
    color: #ddd4ee;
    font-size: 10px;
}

.map-full .maplibregl-ctrl-attrib a {
    color: #d7b9ff;
}

.map-full .card-head button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #8b5cf644;
    border-radius: 10px;
    background: #171222;
    color: #e8d9fb;
}

.map-status {
    min-height: 18px;
    padding: 8px 21px 0;
    color: var(--muted);
    font-size: 11px;
}

.map-status.is-error {
    color: var(--danger);
}

.location-status {
    margin-left: auto;
}

.location-status[data-state="fresh"] {
    color: #67e8f9;
}

.location-status[data-state="stale"] {
    color: #fbbf24;
}

.map-viewer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid #8b5cf644;
    border-radius: 10px;
    color: var(--pd);
    font-size: 11px;
    font-weight: 700;
}

.st-live-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 68px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.st-live-marker__avatar {
    position: absolute;
    bottom: 0;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 3px solid #2dd4bf;
    border-radius: 50% 50% 50% 12%;
    background: #14111b;
    box-shadow: 0 0 12px #2dd4bfaa, 0 0 27px #2dd4bf66;
    transform: rotate(-45deg);
}

.st-live-marker__avatar img,
.st-live-marker__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: inherit;
    object-fit: cover;
    color: #f7f5ff;
    font-size: 13px;
    font-weight: 800;
    transform: rotate(45deg);
}

.st-live-marker__speed {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    padding: 3px 6px;
    border: 1px solid #8b5cf688;
    border-radius: 20px;
    background: #100d1e;
    color: #f5f1fb;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 0 12px #8b5cf666;
    transform: translateX(-50%);
}

.st-live-marker[data-freshness="delayed"] .st-live-marker__avatar {
    border-color: #fb923c;
    box-shadow: 0 0 12px #fb923caa, 0 0 27px #fb923c66;
}

.st-map-point {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 9px #a855f7, 0 0 22px #a855f799;
}

.st-map-point--destination {
    background: #2dd4bf;
    box-shadow: 0 0 9px #2dd4bf, 0 0 22px #2dd4bf99;
}

.st-map-point__core {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.st-map-popup strong {
    color: #18121f;
    font-size: 12px;
}

html[data-theme="light"] .map-projection-switch {
    background: #f4efff;
}

html[data-theme="light"] .map-projection-switch button[aria-pressed="true"] {
    background: #e9ddff;
    color: #37145d;
    box-shadow: inset 0 0 0 1px #a855f766;
}

html[data-theme="light"] .map-full .maplibregl-ctrl-group {
    background: #ffffffed;
}

html[data-theme="light"] .map-full .maplibregl-ctrl-group button span {
    filter: none;
}

html[data-theme="light"] .map-full .maplibregl-ctrl-attrib {
    background: #fffffff0;
    color: #322341;
}

html[data-theme="light"] .map-full .maplibregl-ctrl-attrib a {
    color: #56239a;
}

html[data-theme="light"] .live-map-page .map-full .card-head button {
    border-color: #d6c2ec;
    background: #f9f5ff;
    color: #4c1d72;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(ellipse at 65% -20%, #132649 0, transparent 42%),
        var(--bg);
}

html[data-theme="dark"] .sidebar {
    background: #080f1c;
    border-right-color: #1c2d43;
    box-shadow: 12px 0 42px #0004;
}

.sidebar .logo {
    border-color: #d07cff77;
    background: linear-gradient(145deg, #c65bff, #6724bb);
    box-shadow: 0 0 22px #a855f755;
}

.sidebar nav a.active {
    color: #f6e9ff;
    background: linear-gradient(100deg, #a855f732, #7420bd12);
    box-shadow: inset 2px 0 #dd75f2, 0 5px 18px #0003;
}

.sidebar nav a.active i {
    color: #e4a1ff;
}

.sidebar em {
    background: #e64e7a;
}

.search button,
.btn-primary,
.tab.active {
    color: #fff;
    background: linear-gradient(110deg, #c146ff, #7125cb);
    border-color: transparent;
    box-shadow: 0 8px 24px #a13bf23d;
}

html[data-theme="light"] .sidebar nav a.active {
    color: #53247a;
    background: #f0e3fc;
    box-shadow: inset 2px 0 #9f3bd1;
}

html[data-theme="light"] .sidebar nav a.active i {
    color: #7623b5;
}

html[data-theme="light"] body {
    background:
        radial-gradient(ellipse at 65% -20%, #dff0f3 0, transparent 42%),
        var(--bg);
}

.mobile-brand,
.mobile-bottom-nav {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app--explore main {
    position: relative;
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 520px;
    flex-direction: column;
    overflow: hidden;
    margin-left: 0;
}

:is(.app--map-layout, .app--explore) .sidebar {
    z-index: 14;
    inset: 14px auto 14px 14px;
    width: 244px;
    height: auto;
    padding: 20px 13px 13px;
    border: 1px solid #b88bf14f;
    border-radius: 22px;
    background: linear-gradient(155deg, #131322e8, #0b101ee8);
    box-shadow: 0 18px 55px #0008, inset 0 1px #ffffff18, 0 0 28px #7843a31e;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    overflow-y: auto;
    scrollbar-color: #765b9c transparent;
    scrollbar-width: thin;
}

:is(.app--map-layout, .app--explore) .sidebar .brand {
    padding-bottom: 20px;
}

:is(.app--map-layout, .app--explore) .sidebar .logo {
    border-color: #d07cff77;
    background: linear-gradient(145deg, #c65bff, #6724bb);
    box-shadow: 0 0 22px #a855f755;
}

:is(.app--map-layout, .app--explore) .sidebar nav a {
    border-radius: 12px;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

:is(.app--map-layout, .app--explore) .sidebar nav a:hover,
:is(.app--map-layout, .app--explore) .sidebar nav a:focus-visible {
    color: #f5e8ff;
    background: #a855f723;
}

:is(.app--map-layout, .app--explore) .sidebar nav a.active {
    color: #f6e9ff;
    background: linear-gradient(100deg, #a855f732, #7420bd12);
    box-shadow: inset 2px 0 #dd75f2, 0 5px 18px #0003;
}

:is(.app--map-layout, .app--explore) .sidebar nav a.active i {
    color: #e4a1ff;
}

.app--explore .app-header {
    position: absolute;
    z-index: 13;
    top: 14px;
    right: 14px;
    left: 274px;
    min-height: 64px;
    height: 64px;
    flex: 0 0 64px;
    padding: 9px 16px;
    border: 1px solid #9f7ccc4a;
    border-radius: 19px;
    background: linear-gradient(120deg, #111522df, #111a2bdf);
    box-shadow: 0 12px 35px #0005, inset 0 1px #ffffff13;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.app--explore .dashboard-search {
    position: relative;
    display: flex;
    width: min(480px, 48vw);
    height: 42px;
    align-items: center;
    gap: 11px;
    margin-right: auto;
    padding: 0 10px 0 14px;
    border: 1px solid #293950;
    border-radius: 13px;
    background: #0a1322e8;
    color: #99a9c0;
    box-shadow: inset 0 1px #ffffff08, 0 8px 24px #0002;
}

.dashboard-search:focus-within {
    border-color: #bd76f1;
    box-shadow: 0 0 0 3px #a855f729, 0 0 18px #a855f720;
}

.dashboard-search > i {
    font-size: 13px;
}

.dashboard-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 12px;
}

.dashboard-search input::placeholder {
    color: #8192aa;
}

.dashboard-search button {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid #26364d;
    border-radius: 9px;
    color: #becbe0;
    background: #142239;
    font-size: 11px;
}

.app--explore .head-actions {
    display: inline-flex;
    width: max-content;
    max-width: calc(100vw - 24px);
    flex-direction: row;
    margin-left: auto;
}

.app--explore .head-actions button {
    border-color: #26364d;
    background: #0d1829;
    color: #b6c6dc;
}

.app--explore .head-actions button:hover {
    border-color: #bd76f1;
    color: #fff;
}

.app--explore .content--explore {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0;
    overflow: hidden;
}

.app--explore .explore-footer {
    display: none;
}

.explore-dashboard {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 450px;
    overflow: hidden;
    isolation: isolate;
    background: #050a15;
}

.explore-dashboard::before {
    display: none;
}

.explore-map {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, #0a2842 0, #070f1f 42%, #040812 78%);
}

.explore-map-canvas {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
}

.explore-map.maplibregl-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.explore-map::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(ellipse at 50% 47%, transparent 42%, #0409160a 72%, #03071142 100%),
        linear-gradient(90deg, #050b1600 45%, #050b1624 100%);
}

.explore-map .maplibregl-map,
.explore-map .maplibregl-canvas-container,
.explore-map .maplibregl-canvas {
    width: 100%;
    height: 100%;
}

.explore-map .maplibregl-canvas {
    filter: brightness(.98) saturate(1.16) contrast(1.06);
}

.explore-map-heading {
    position: absolute;
    z-index: 3;
    top: 91px;
    left: 280px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: min(430px, calc(100vw - 300px));
    padding: 9px 12px;
    border: 1px solid #9f7ccc4a;
    border-radius: 15px;
    color: #eef6ff;
    background: linear-gradient(120deg, #111522d9, #111a2bd9);
    box-shadow: 0 10px 30px #0004, inset 0 1px #ffffff13;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    text-shadow: 0 2px 12px #000;
}

.explore-map-heading.has-error {
    width: fit-content;
    max-width: min(340px, calc(100vw - 20px));
}

.explore-map-heading.has-error small {
    max-width: 270px;
}

.explore-map-heading > div {
    display: grid;
    gap: 4px;
}

.explore-map-heading strong {
    font-size: 14px;
}

.explore-map-heading small {
    color: #a5b8d0;
    font-size: 10px;
}

.explore-map-heading small.is-error {
    color: #ff829e;
}

.explore-live-indicator {
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: #df63f4;
    box-shadow: 0 0 0 5px #df63f425, 0 0 18px #df63f4;
}

.explore-map-modes {
    position: absolute;
    z-index: 4;
    top: 88px;
    left: 50%;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #40536d99;
    border-radius: 13px;
    background: #091426df;
    box-shadow: 0 8px 28px #0006;
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}

.explore-map-modes button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #a9bad0;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.explore-map-modes button[aria-selected="true"] {
    border-color: #b86cff82;
    color: #f8edff;
    background: linear-gradient(105deg, #49236acb, #281b52d1);
    box-shadow: 0 0 18px #b161f333, inset 0 1px #ffffff17;
}

.explore-map-controls {
    position: absolute;
    z-index: 3;
    top: 88px;
    right: calc(min(330px, 30vw) + 30px);
    display: grid;
    gap: 7px;
}

.explore-map-controls button {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid #465e7b88;
    border-radius: 12px;
    color: #d7e7ff;
    background: #0b1528d9;
    box-shadow: 0 7px 24px #0005;
    backdrop-filter: blur(10px);
}

.explore-map-controls button:hover,
.explore-map-controls button[aria-pressed="true"] {
    border-color: #6b5df0;
    color: #b6a7ff;
    background: #211c43e8;
    box-shadow: 0 0 18px #705cff50;
}

.explore-map .maplibregl-ctrl-bottom-right {
    right: 12px;
    bottom: 10px;
}

.explore-map .maplibregl-ctrl-bottom-left {
    top: auto;
    bottom: 18px;
    left: 270px;
}

.explore-map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid #425570;
    border-radius: 11px;
    background: #0a1424e8;
}

.explore-map .maplibregl-ctrl-group button {
    background-color: transparent;
}

.explore-map .maplibregl-ctrl-group button span {
    filter: invert(1);
}

.explore-map .maplibregl-ctrl-attrib {
    display: block;
    border: 1px solid #465a7380;
    border-radius: 8px;
    color: #a9bad0 !important;
    background-color: #07111ddd !important;
    font-size: 8px;
}

.explore-map .maplibregl-ctrl-attrib a {
    color: #c2d4e8;
}

html[data-theme="dark"] .explore-map .maplibregl-ctrl-attrib-button {
    filter: invert(1);
}

.dashboard-map-marker {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid #e8fbff;
    border-radius: 50% 50% 50% 12px;
    color: #fff;
    background: #6d4de7;
    box-shadow: 0 0 12px #8b5cf6, 0 0 27px #8b5cf688;
    transform: rotate(-45deg);
}

.dashboard-map-marker i {
    font-size: 11px;
    transform: rotate(45deg);
}

.dashboard-map-marker--destination {
    background: #d946ef;
    box-shadow: 0 0 12px #ec5bf1, 0 0 25px #cd3ee788;
}

.dashboard-map-marker--current,
.dashboard-map-marker--location {
    width: 36px;
    height: 36px;
    border-color: #fff;
    background: #ef4fca;
    box-shadow: 0 0 14px #ed55d8, 0 0 28px #ed55d888;
}

.dashboard-map-marker--location {
    position: relative;
    color: #fff;
    background: #e64bc9;
    box-shadow: 0 0 14px #ff6cdb, 0 0 30px #e64bc999;
    transform: none;
}

.dashboard-map-marker--location i {
    transform: none;
}

.dashboard-map-marker__label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 6px 9px;
    border: 1px solid #ef75e2b3;
    border-radius: 9px;
    color: #fff2ff;
    background: #281337ef;
    box-shadow: 0 0 16px #d454d755, 0 5px 18px #0006;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
}

.dashboard-map-marker__label::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #ef75e2b3;
    border-bottom: 1px solid #ef75e2b3;
    background: #281337;
    content: "";
    transform: translate(-50%, -4px) rotate(45deg);
}

.dashboard-shared-marker {
    position: relative;
    display: grid;
    min-width: 54px;
    justify-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    color: #f4f2ff;
    background: transparent;
}

.dashboard-shared-marker__avatar {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #b181ff;
    border-radius: 50%;
    color: #f7edff;
    background: #2e2050;
    box-shadow: 0 0 0 3px #592da055, 0 0 16px #a161ffcc, 0 4px 15px #0008;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-shared-marker__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-shared-marker__name {
    max-width: 115px;
    overflow: hidden;
    padding: 3px 6px;
    border: 1px solid #7b5ac277;
    border-radius: 12px;
    color: #f1e9ff;
    background: #111022eF;
    box-shadow: 0 3px 12px #0007;
    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-shared-marker__freshness {
    color: #c9b8e7;
    font-size: 7px;
    text-shadow: 0 1px 5px #000;
}

.dashboard-shared-marker[data-freshness="stale"] .dashboard-shared-marker__avatar {
    border-color: #f6b95d;
    box-shadow: 0 0 0 3px #c87d3044, 0 0 14px #dc994e99, 0 4px 15px #0008;
}

.dashboard-shared-marker[data-freshness="stale"] .dashboard-shared-marker__freshness {
    color: #ffd18c;
}

.explore-map-legend {
    position: absolute;
    z-index: 3;
    right: calc(min(330px, 30vw) + 30px);
    bottom: 20px;
    display: flex;
    gap: 13px;
    padding: 8px 10px;
    border: 1px solid #40536d77;
    border-radius: 10px;
    color: #b5c3d7;
    background: #07111edb;
    box-shadow: 0 6px 20px #0004;
    backdrop-filter: blur(14px);
    font-size: 8px;
}

.explore-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.explore-map-legend i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.explore-map-legend .is-you {
    background: #f05bd1;
    box-shadow: 0 0 9px #f05bd1;
}

.explore-map-legend .is-shared {
    background: #b181ff;
    box-shadow: 0 0 9px #a161ff;
}

.explore-panels {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    bottom: 90px;
    display: flex;
    width: min(330px, 30vw);
    flex-direction: column;
    gap: 11px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #334865 transparent;
}

.explore-panel {
    padding: 16px;
    border: 1px solid #34435cbb;
    border-radius: 15px;
    color: #ebf2ff;
    background: linear-gradient(145deg, #0b1526c9, #08111fc4);
    box-shadow: 0 12px 38px #0006, inset 0 1px #ffffff0a;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.explore-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.explore-eyebrow {
    color: #8c9bb3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.explore-panel h2 {
    margin-top: 5px;
    color: #f3f6ff;
    font-size: 15px;
    letter-spacing: -.25px;
}

.explore-trip-status {
    padding: 5px 8px;
    border: 1px solid #76829955;
    border-radius: 20px;
    color: #b8c5d7;
    background: #19263a;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.explore-trip-status.is-on-trip {
    border-color: #21d5a366;
    color: #47edc4;
    background: #0e443b66;
}

.explore-trip-destination {
    margin-top: 8px;
    color: #c4d0e1;
    font-size: 11px;
    line-height: 1.5;
}

.explore-trip-stats {
    display: grid;
    gap: 7px;
    margin-top: 11px;
    color: #9fb0c6;
    font-size: 10px;
}

.explore-trip-stats span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.explore-trip-stats i {
    width: 13px;
    color: #9f8cff;
    text-align: center;
}

.explore-trip-live-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 13px;
    padding: 10px 0;
    border-top: 1px solid #ffffff12;
    border-bottom: 1px solid #ffffff12;
}

.explore-trip-live-stats span {
    display: grid;
    gap: 4px;
}

.explore-trip-live-stats small {
    color: #8295af;
    font-size: 8px;
}

.explore-trip-live-stats strong {
    color: #ecf5ff;
    font-size: 10px;
}

.explore-panel-action,
.explore-text-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
}

.explore-panel-action {
    width: fit-content;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid #27d4af4d;
    border-radius: 9px;
    color: #7fead2;
    background: #0b352d66;
}

.explore-panel-action:hover {
    border-color: #27d4af;
    background: #0d463a;
}

.explore-count {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid #7c5cff66;
    border-radius: 50%;
    color: #c2b7ff;
    background: #39268766;
    font-size: 9px;
}

.explore-people-list {
    display: grid;
    gap: 1px;
    margin-top: 11px;
}

.explore-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-top: 1px solid #ffffff0d;
}

.explore-person-avatar {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border: 1px solid #4bd4b588;
    border-radius: 50%;
    color: #baffee;
    background: #103d3a;
    font-size: 9px;
    font-weight: 800;
}

.explore-person > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.explore-person strong,
.explore-recent-trip strong {
    overflow: hidden;
    color: #e2eaf8;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-person small,
.explore-recent-trip small {
    color: #889bb4;
    font-size: 8px;
}

.explore-person > i {
    margin-left: auto;
    color: #9a8cff;
    font-size: 11px;
}

.explore-empty-note {
    margin-top: 11px;
    color: #9eafc4;
    font-size: 10px;
    line-height: 1.5;
}

.explore-text-link {
    margin-top: 10px;
    color: #a99aff;
    font-size: 9px;
}

.explore-recent-trip {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
}

.explore-recent-trip > i {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 9px;
    color: #ad9aff;
    background: #34275a;
    font-size: 11px;
}

.explore-recent-trip > span {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.explore-shortcuts {
    position: absolute;
    z-index: 4;
    right: calc(min(330px, 30vw) + 34px);
    bottom: 16px;
    left: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.explore-shortcuts a {
    display: grid;
    min-height: 69px;
    grid-template-columns: 31px 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 9px;
    padding: 10px;
    border: 1px solid #31435cbb;
    border-radius: 13px;
    color: #eaf3ff;
    background: linear-gradient(145deg, #0a1424ca, #08111fc4);
    box-shadow: 0 8px 24px #0005;
    backdrop-filter: blur(15px);
}

.explore-shortcuts a:hover {
    border-color: #40d4b4;
    transform: translateY(-2px);
}

.explore-shortcuts i {
    display: grid;
    width: 30px;
    height: 30px;
    grid-row: 1 / 3;
    place-items: center;
    border-radius: 9px;
    color: #57e5c3;
    background: #0c4039;
    font-size: 12px;
}

.explore-shortcuts a:nth-child(2) i {
    color: #b09cff;
    background: #2a2051;
}

.explore-shortcuts a:nth-child(4) i {
    color: #ff7592;
    background: #4d1c34;
}

.explore-shortcuts strong {
    font-size: 10px;
}

.explore-shortcuts small {
    color: #97a9c0;
    font-size: 8px;
}

html[data-theme="light"] .app--explore .app-header {
    border-color: #b8c8dcba;
    background: linear-gradient(120deg, #f5f8f8dc, #edf2fbe3);
    box-shadow: 0 12px 35px #18304720, inset 0 1px #ffffffd9;
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar {
    border-color: #b7a4d6c9;
    color: #241d32;
    background: linear-gradient(155deg, #f7f3fbea, #e9eef7ef);
    box-shadow: 0 18px 45px #1830472e, inset 0 1px #ffffff;
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar .brand {
    color: #2e2140;
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar .logo {
    border-color: #ac71d5;
    color: #fff;
    background: linear-gradient(145deg, #bf68ed, #7d3ab9);
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar .brand small {
    color: #6a5d7b;
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar nav a:hover,
html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar nav a:focus-visible {
    color: #4b176f;
    background: #eee3fa;
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar nav a.active {
    color: #4b176f;
    background: linear-gradient(100deg, #eadcf9, #f3edfb);
    box-shadow: inset 2px 0 #a855f7, 0 5px 18px #56446f1c;
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) .sidebar nav a.active i {
    color: #7e22ce;
}

html[data-theme="light"] .app--explore .dashboard-search {
    border-color: #cad9e1;
    background: #ffffffed;
    color: #64788c;
}

html[data-theme="light"] .app--explore .dashboard-search:focus-within {
    border-color: #a46bd2;
    box-shadow: 0 0 0 3px #a855f722;
}

html[data-theme="light"] .dashboard-search input {
    color: #1c2b3c;
}

html[data-theme="light"] .dashboard-search input::placeholder {
    color: #77899a;
}

html[data-theme="light"] .dashboard-search button,
html[data-theme="light"] .app--explore .head-actions button {
    border-color: #d1dfe6;
    color: #42586b;
    background: #f8fbfc;
}

html[data-theme="light"] .explore-map {
    background: #dce9ee;
}

html[data-theme="light"] .explore-map .maplibregl-canvas {
    filter: brightness(1.02) saturate(1.04) contrast(1.02);
}

html[data-theme="light"] .explore-map::after {
    background:
        radial-gradient(ellipse at 50% 47%, transparent 40%, #10233908 68%, #10233945 100%),
        linear-gradient(90deg, #fff0 45%, #edf5f799 100%);
}

html[data-theme="light"] .explore-map-heading {
    color: #14293e;
    border-color: #b8c8dcba;
    background: linear-gradient(120deg, #f5f8f8e5, #edf2fbe8);
    box-shadow: 0 10px 30px #18304720, inset 0 1px #ffffffd9;
    text-shadow: 0 1px 10px #fff;
}

html[data-theme="light"] .explore-map-heading small {
    color: #50667c;
}

html[data-theme="light"] .explore-map-controls button {
    border-color: #c3d2db;
    color: #42596e;
    background: #f6fbfbe8;
}

html[data-theme="light"] .explore-map-controls button:hover,
html[data-theme="light"] .explore-map-controls button[aria-pressed="true"] {
    border-color: #5f4bce;
    color: #5f4bce;
    background: #f2efff;
}

html[data-theme="light"] .explore-map-modes {
    border-color: #c4d4df;
    background: #f5fafbe8;
}

html[data-theme="light"] .explore-map-modes button {
    color: #536a7d;
}

html[data-theme="light"] .explore-map-modes button[aria-selected="true"] {
    border-color: #bd9be9;
    color: #563285;
    background: linear-gradient(105deg, #f5e9ff, #edeaff);
    box-shadow: 0 0 16px #9e67d922, inset 0 1px #fff;
}

html[data-theme="light"] .dashboard-map-marker__label {
    border-color: #d455c0;
    color: #64245c;
    background: #fff2fd;
    box-shadow: 0 0 16px #d454d755, 0 5px 18px #18304733;
}

html[data-theme="light"] .dashboard-map-marker__label::after {
    border-color: #d455c0;
    background: #fff2fd;
}

html[data-theme="light"] .dashboard-shared-marker__avatar {
    border-color: #7955d5;
    color: #402b7b;
    background: #f0eaff;
}

html[data-theme="light"] .dashboard-shared-marker__name {
    border-color: #a995d6;
    color: #3f3064;
    background: #fbf9ff;
}

html[data-theme="light"] .dashboard-shared-marker__freshness {
    color: #53637a;
    text-shadow: 0 1px 5px #fff;
}

html[data-theme="light"] .explore-map-legend {
    border-color: #c7d6df;
    color: #52667a;
    background: #f6faf9df;
}

html[data-theme="light"] .explore-map .maplibregl-ctrl-group {
    border-color: #c6d4de;
    background: #f8fcfdf2;
}

html[data-theme="light"] .explore-map .maplibregl-ctrl-group button span {
    filter: none;
}

html[data-theme="light"] .explore-panel,
html[data-theme="light"] .explore-shortcuts a {
    border-color: #c3d5dfd9;
    color: #172a3f;
    background: linear-gradient(145deg, #f8fcf8f2, #eef5f8f2);
    box-shadow: 0 12px 38px #18304726, inset 0 1px #ffffffc9;
}

html[data-theme="light"] .explore-panel h2,
html[data-theme="light"] .explore-person strong,
html[data-theme="light"] .explore-recent-trip strong,
html[data-theme="light"] .explore-trip-live-stats strong,
html[data-theme="light"] .explore-shortcuts strong {
    color: #1b2d42;
}

html[data-theme="light"] .explore-eyebrow,
html[data-theme="light"] .explore-person small,
html[data-theme="light"] .explore-recent-trip small,
html[data-theme="light"] .explore-shortcuts small,
html[data-theme="light"] .explore-trip-live-stats small {
    color: #687c90;
}

html[data-theme="light"] .explore-trip-destination,
html[data-theme="light"] .explore-trip-stats {
    color: #536980;
}

html[data-theme="light"] .explore-trip-live-stats {
    border-color: #263d5418;
}

html[data-theme="light"] .explore-trip-status {
    border-color: #c9d5df;
    color: #52667b;
    background: #e9f0f4;
}

html[data-theme="light"] .explore-trip-status.is-on-trip {
    border-color: #79c9b5;
    color: #087963;
    background: #e2f7f0;
}

html[data-theme="light"] .explore-person {
    border-color: #263d540e;
}

html[data-theme="light"] .explore-person-avatar {
    border-color: #8acdbb;
    color: #087963;
    background: #e3f6f0;
}

html[data-theme="light"] .explore-panel-action {
    border-color: #83cbb8;
    color: #087963;
    background: #e3f6ef;
}

html[data-theme="light"] .explore-text-link {
    color: #684bd0;
}

html[data-theme="light"] .explore-shortcuts i {
    color: #087963;
    background: #ddf3ec;
}

.app--explore .explore-dashboard::before {
    display: none;
}

.app--explore .sidebar {
    background: linear-gradient(155deg, #131322cf, #0b101ed1);
}

.app--explore .app-header {
    background: linear-gradient(120deg, #111522c9, #111a2bcc);
}

.app--explore .explore-map-canvas {
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.explore-map-canvas > .gm-style,
.explore-map-canvas.maplibregl-map {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

html[data-map-provider="backup"] .app--explore .explore-map-modes {
    display: none;
}

.explore-chat-messages {
    display: grid;
    max-height: 158px;
    gap: 2px;
    margin-top: 8px;
    overflow: auto;
    scrollbar-width: thin;
}

.explore-chat-message {
    display: grid;
    min-width: 0;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 7px 0;
    border-top: 1px solid #ffffff10;
}

.explore-chat-message .explore-person-avatar {
    width: 25px;
    height: 25px;
    min-width: 25px;
    font-size: 8px;
}

.explore-chat-message > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.explore-chat-message strong {
    overflow: hidden;
    color: #e7efff;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-chat-message small {
    overflow: hidden;
    color: #9aabc1;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-chat-message time {
    color: #8293aa;
    font-size: 7px;
}

.explore-chat-message.is-mine .explore-person-avatar {
    border-color: #b989ff;
    color: #f0ddff;
    background: #352357;
}

.explore-chat-composer {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 3px 4px 3px 11px;
    border: 1px solid #354761;
    border-radius: 20px;
    background: #081321e8;
}

.explore-chat-composer:focus-within {
    border-color: #8c6cf4;
    box-shadow: 0 0 0 2px #8c6cf433;
}

.explore-chat-composer input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #eaf1ff;
    background: transparent;
    font-size: 9px;
}

.explore-chat-composer button {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 50%;
    color: #e8e0ff;
    background: linear-gradient(145deg, #a16bff, #6248d8);
}

.explore-chat-composer button:disabled {
    cursor: wait;
    opacity: .6;
}

html[data-theme="light"] .explore-chat-message strong {
    color: #1b2d42;
}

html[data-theme="light"] .explore-chat-message small,
html[data-theme="light"] .explore-chat-message time {
    color: #687c90;
}

html[data-theme="light"] .explore-chat-composer {
    border-color: #c4d2df;
    background: #f8fbffed;
}

html[data-theme="light"] .explore-chat-composer input {
    color: #1b2d42;
}

@media (max-width: 800px) {
    .app--explore .explore-dashboard::before {
        display: none;
    }

    .app--explore .explore-map-canvas {
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform: none;
    }

    .app:not(.app--explore) main {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .app--explore main {
        min-height: 0;
        height: 100dvh;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .app--explore .sidebar {
        inset: 12px auto 12px 12px;
        width: min(292px, calc(100vw - 52px));
        height: auto;
        padding: 20px 13px 13px;
        border-radius: 22px;
    }

    .app--explore .app-header {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        display: grid;
        min-height: 100px;
        height: 100px;
        flex: 0 0 100px;
        grid-template-columns: 35px minmax(0, 1fr) auto;
        grid-template-rows: 35px 42px;
        grid-template-areas: "menu brand actions" "search search search";
        gap: 7px 10px;
        padding: 7px 14px 8px;
        margin: 0;
        border: 0;
        border-bottom: 1px solid #22334b;
        border-radius: 0;
        background: #070d1bd9;
        backdrop-filter: blur(15px);
    }

    :is(.app--map-layout, .app--explore) .menu {
        grid-area: menu;
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        border: 1px solid #9f7ccc77;
        border-radius: 11px;
        color: #e5d4ff !important;
        background: #17152be8 !important;
        box-shadow: 0 5px 16px #0004;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .app--explore .mobile-brand {
        display: flex;
        min-width: 0;
        grid-area: brand;
        grid-area: brand;
        align-items: center;
        gap: 8px;
        color: #edf4ff;
    }

    .app--explore .mobile-brand .logo {
        width: 29px;
        height: 29px;
        border-radius: 9px;
        font-size: 12px;
    }

    .app--explore .mobile-brand b {
        font-size: 13px;
        letter-spacing: -.3px;
    }

    .app--explore .dashboard-search {
        width: 100%;
        height: 39px;
        grid-area: search;
        margin: 0;
        border-radius: 11px;
        background: #111c2eeF;
    }

    .app--explore .app-search-row {
        top: 112px;
        left: 10px;
        width: calc(100vw - 20px);
    }

    .dashboard-planner {
        gap: 7px;
        padding: 8px;
    }

    .dashboard-planner-fields {
        grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
        gap: 5px;
    }

    .dashboard-planner-field {
        padding: 6px 7px;
    }

    .dashboard-planner-field input {
        font-size: 11px;
    }

    .dashboard-planner-actions > button,
    .dashboard-planner-share > button {
        min-height: 31px;
        padding: 0 9px;
        font-size: 9px;
    }

    .app--explore .head-actions {
        grid-area: actions;
        gap: 5px;
    }

    .app--explore .head-actions button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
    }

    .app--explore .head-actions .avatar-btn {
        width: 30px;
        height: 30px;
    }

    .app--explore .content--explore {
        position: relative;
        inset: auto;
        padding: 0;
    }

    .explore-dashboard {
        min-height: 0;
    }

    .explore-dashboard::before {
        display: none;
    }

    .explore-map {
        bottom: auto;
        height: 100%;
    }

    .explore-map-heading {
        top: 12px;
        left: 60px;
        max-width: calc(100vw - 122px);
        padding: 7px 9px;
        border-radius: 12px;
    }

    .explore-map-heading > div {
        min-width: 0;
    }

    .explore-map-heading small {
        max-width: 100%;
        line-height: 1.35;
    }

    .explore-map-controls {
        top: 12px;
        right: 12px;
        gap: 5px;
    }

    .explore-map-controls button {
        width: 35px;
        height: 35px;
        border-radius: 11px;
    }

    .explore-map-modes {
        top: 82px;
        left: 50%;
        gap: 2px;
        padding: 3px;
    }

    .explore-map-modes button {
        min-height: 31px;
        gap: 5px;
        padding: 0 10px;
        font-size: 9px;
    }

    .explore-map .maplibregl-ctrl-bottom-right {
        right: 8px;
        bottom: 8px;
    }

    .explore-panels {
        top: auto;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        max-height: 46%;
        gap: 8px;
        overflow: auto;
    }

    .explore-panel {
        padding: 12px;
        border-radius: 13px;
        background: linear-gradient(145deg, #0b1526c9, #08111fc4);
    }

    .explore-trip-panel {
        margin-top: auto;
    }

    .explore-trip-stats {
        grid-template-columns: 1fr 1fr;
    }

    .explore-people-panel,
    .explore-recent-panel,
    .explore-shortcuts {
        display: none;
    }

    .explore-map .maplibregl-ctrl-bottom-left {
        top: auto;
        bottom: calc(46% + 28px);
        left: 8px;
    }

    .explore-map-legend {
        right: auto;
        bottom: calc(46% + 20px);
        left: 10px;
        gap: 9px;
        padding: 6px 8px;
        font-size: 7px;
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 25;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        min-height: calc(62px + env(safe-area-inset-bottom));
        grid-template-columns: repeat(5, 1fr);
        padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
        border-top: 1px solid #29384d;
        background: #07101eed;
        box-shadow: 0 -8px 25px #0004;
        backdrop-filter: blur(18px);
    }

    :is(.app--map-layout, .app--explore) .mobile-bottom-nav {
            border-top-color: #8e6db657;
            background: #111020df;
            box-shadow: 0 -8px 25px #0005, 0 0 24px #8547b522;
            backdrop-filter: blur(22px) saturate(145%);
            -webkit-backdrop-filter: blur(22px) saturate(145%);
        }
    }

    #appMapBackground {
        position: fixed;
        z-index: 0;
        inset: 0;
        overflow: hidden;
        background:
            radial-gradient(ellipse at 50% 45%, #0a2842 0, #070f1f 42%, #040812 78%);
        pointer-events: none;
    }

    #appMapBackground.maplibregl-map,
    #appMapBackground .maplibregl-canvas-container,
    #appMapBackground .maplibregl-canvas {
        width: 100%;
        height: 100%;
    }

    #appMapBackground .maplibregl-canvas {
        filter: brightness(.94) saturate(1.2) contrast(1.12);
    }

    .app-map-attribution {
        position: fixed !important;
        z-index: 40;
        right: 12px !important;
        bottom: 10px !important;
        pointer-events: auto;
    }

    .app-map-attribution .maplibregl-ctrl-attrib {
        border: 1px solid #465a7380;
        border-radius: 8px;
        color: #c5d4e5 !important;
        background-color: #07111ddd !important;
        font-size: 8px;
    }

    .app-map-attribution .maplibregl-ctrl-attrib a {
        color: #d9e5f3;
    }

    .app-map-background-status {
        position: fixed;
        z-index: 41;
        right: 12px;
        bottom: 102px;
        max-width: min(340px, calc(100vw - 24px));
        padding: 10px 13px;
        border: 1px solid #9f7ccc4a;
        border-radius: 12px;
        color: #eef6ff;
        background: #111a2bed;
        font-size: 11px;
        box-shadow: 0 8px 24px #0005;
        pointer-events: none;
    }

    .app--map-layout:not(.app--explore) {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        background: transparent;
        pointer-events: none;
    }

    .app--map-layout .sidebar {
        inset: 12px auto 12px 12px;
        width: min(292px, calc(100vw - 52px));
        height: auto;
        border-radius: 22px;
        pointer-events: auto;
    }

    .app--map-layout:not(.app--explore) > main {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        margin-left: 264px;
        background: transparent;
        pointer-events: none;
    }

    .app--map-layout:not(.app--explore) > main > header {
        position: relative;
        z-index: 3;
        min-height: 76px;
        margin: 14px 16px 0 0;
        padding: 13px clamp(16px, 2.5vw, 30px);
        border: 1px solid #9f7ccc45;
        border-radius: 16px;
        background: #0b1223c8;
        box-shadow: 0 12px 34px #0004, inset 0 1px #ffffff10;
        backdrop-filter: blur(20px) saturate(135%);
        -webkit-backdrop-filter: blur(20px) saturate(135%);
        pointer-events: auto;
    }

    .app--map-layout:not(.app--explore) > main > .content {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 1520px;
        min-height: calc(100vh - 92px);
        padding: clamp(16px, 2.5vw, 30px);
        background: transparent;
    }

    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs {
        border: 1px solid #a987cd48;
        background: #0b1223c8;
        box-shadow: 0 14px 40px #0004, inset 0 1px #ffffff0c;
        backdrop-filter: blur(18px) saturate(130%);
        -webkit-backdrop-filter: blur(18px) saturate(130%);
    }

    .app--map-layout:not(.app--explore) .content > .hero {
        background:
            radial-gradient(ellipse at 95% 18%, #9b35fb32, transparent 35%),
            linear-gradient(125deg, #111522e8, #101626e8 66%, #17101ee8);
    }

    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card {
        color: var(--ink);
    }

    .app--map-layout:not(.app--explore) .content > .card .card,
    .app--map-layout:not(.app--explore) .content > .card .journey-row,
    .app--map-layout:not(.app--explore) .content > .card .contact-card,
    .app--map-layout:not(.app--explore) .content > .card .eta-chip,
    .app--map-layout:not(.app--explore) .content > .card .chat-item,
    .app--map-layout:not(.app--explore) .content > .card .bubble.them {
        border-color: #ffffff20;
        color: var(--ink);
        background: #ffffff0b;
    }

    .app--map-layout:not(.app--explore) .content > .card .form-field input,
    .app--map-layout:not(.app--explore) .content > .card .form-field select,
    .app--map-layout:not(.app--explore) .content > .card .form-field textarea,
    .app--map-layout:not(.app--explore) .content > .card .chat-search input,
    .app--map-layout:not(.app--explore) .content > .card .chat-input input {
        border-color: #ffffff2b;
        color: var(--ink);
        background: #080f1ed9;
    }

    .app--map-layout:not(.app--explore) > main > footer {
        position: relative;
        z-index: 2;
        color: #d1d9e6;
        background: #09101fc9;
        backdrop-filter: blur(14px);
        pointer-events: auto;
    }

    :is(.app--map-layout:not(.app--explore), .app--explore) .mobile-bottom-nav {
        border-color: #a987cd52;
        border-top-color: #8e6db657;
        background: #111020df;
        box-shadow: 0 -8px 25px #0005, 0 0 24px #8547b522;
        backdrop-filter: blur(22px) saturate(145%);
        -webkit-backdrop-filter: blur(22px) saturate(145%);
    }

    html[data-theme="light"] #appMapBackground .maplibregl-canvas {
        filter: brightness(.98) saturate(1.08) contrast(1.04);
    }

    html[data-theme="light"] .app-map-attribution .maplibregl-ctrl-attrib {
        color: #29394b !important;
        background-color: #f7faf2e8 !important;
    }

    html[data-theme="light"] .app-map-attribution .maplibregl-ctrl-attrib a {
        color: #263b54;
    }

    html[data-theme="light"] .app--map-layout:not(.app--explore) .sidebar,
    html[data-theme="light"] .app--map-layout:not(.app--explore) > main > header,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .stat-card,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .panel,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .chat-shell,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .contact-card,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .page-head,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .tabs {
        border-color: #8f7ba957;
        color: #1d2635;
        background: #f7f8f2df;
        box-shadow: 0 14px 40px #23304724, inset 0 1px #ffffffb8;
    }

    html[data-theme="light"] .app--map-layout:not(.app--explore) .sidebar nav a,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .sidebar .bottom > a,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .header-title h1,
    html[data-theme="light"] .app--map-layout:not(.app--explore) header h1 {
        color: #263344;
    }

    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .card,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .journey-row,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .contact-card,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .eta-chip,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .chat-item,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .bubble.them {
        color: #263344;
        background: #ffffff82;
    }

    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .form-field input,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .form-field select,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .form-field textarea,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .chat-search input,
    html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card .chat-input input {
        border-color: #8c9aab;
        color: #263344;
        background: #ffffffde;
    }

    .app--live-map-layout .content > .page-head,
    .app--live-map-layout .content > .map-full > .card-head,
    .app--live-map-layout .content > .map-full > .map-projection-switch,
    .app--live-map-layout .content > .map-full > .map-status,
    .app--live-map-layout .content > .map-full > .legend,
    .app--live-map-layout .content > .map-full > .eta-strip,
    .app--live-map-layout .content > .lower > .card {
        border: 1px solid #a987cd52;
        border-radius: 14px;
        color: var(--ink);
        background: #0b1223d9;
        box-shadow: 0 12px 34px #0005, inset 0 1px #ffffff0c;
        backdrop-filter: blur(18px) saturate(135%);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
    }

    .app--live-map-layout .content > .page-head,
    .app--live-map-layout .content > .map-full > .card-head,
    .app--live-map-layout .content > .map-full > .map-projection-switch,
    .app--live-map-layout .content > .map-full > .map-status,
    .app--live-map-layout .content > .map-full > .legend {
        position: fixed;
        z-index: 2;
    }

    .app--live-map-layout .content > .page-head {
        top: 102px;
        right: 25px;
        max-width: min(440px, calc(100vw - 300px));
        padding: 14px 18px;
    }

    .app--live-map-layout .content > .map-full > .card-head {
        top: 14px;
        left: 278px;
        padding: 10px 14px;
    }

    .app--live-map-layout .content > .map-full > .map-projection-switch {
        top: 90px;
        left: 278px;
        padding: 4px;
    }

    .app--live-map-layout .content > .map-full > .map-status {
        bottom: 86px;
        left: 278px;
        margin: 0;
        padding: 9px 12px;
    }

    .app--live-map-layout .content > .map-full > .legend {
        right: 18px;
        bottom: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 9px 12px;
    }

    .app--live-map-layout .content > .map-full > .eta-strip {
        position: fixed;
        z-index: 2;
        right: 25px;
        bottom: 18px;
        display: flex;
        max-width: min(42vw, 620px);
        padding: 8px;
        gap: 6px;
    }

    .app--live-map-layout .content > .map-full > .eta-strip .eta-chip {
        min-width: 70px;
        padding: 8px;
        background: #ffffff0a;
    }

    .app--live-map-layout .content > .lower {
        position: relative;
        z-index: 2;
        margin: 0 18px 80px 278px;
        padding-top: calc(100vh + 25px);
    }

    @media (max-width: 900px) {
        .app-map-background-status {
            bottom: calc(70px + env(safe-area-inset-bottom));
        }

        .app--map-layout:not(.app--explore) > main {
            margin-left: 0;
        }

        .app--map-layout:not(.app--explore) > main > header {
            margin: 8px 10px 0 54px;
            min-height: 64px;
            padding: 9px 12px;
        }

        .app--map-layout:not(.app--explore) > main > .content {
            min-height: calc(100vh - 72px);
            padding: 14px 10px 82px;
        }

        .app--map-layout:not(.app--explore) > main > footer {
            display: none;
        }

        .app-map-attribution {
            right: 8px !important;
            bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        }

        .app--live-map-layout .content > .page-head {
            top: 86px;
            right: 10px;
            left: 10px;
            max-width: none;
            padding: 10px 12px;
        }

        .app--live-map-layout .content > .map-full > .card-head {
            top: 8px;
            right: 10px;
            left: 54px;
            max-width: calc(100vw - 64px);
        }

        .app--live-map-layout .content > .map-full > .map-projection-switch {
            top: 156px;
            left: 10px;
        }

        .app--live-map-layout .content > .map-full > .map-status {
            bottom: calc(72px + env(safe-area-inset-bottom));
            left: 10px;
        }

        .app--live-map-layout .content > .map-full > .legend {
            right: 10px;
            bottom: calc(128px + env(safe-area-inset-bottom));
            left: 10px;
        }

        .app--live-map-layout .content > .map-full > .eta-strip {
            right: 10px;
            bottom: calc(178px + env(safe-area-inset-bottom));
            left: 10px;
            max-width: none;
            overflow-x: auto;
        }

        .app--live-map-layout .content > .lower {
            margin: 0 10px 20px;
            padding-top: calc(100vh + 18px);
        }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        position: relative;
        display: grid;
        min-width: 0;
        justify-items: center;
        align-content: center;
        gap: 4px;
        border: 0;
        color: #8b9bb1;
        background: transparent;
        font-size: 9px;
    }

    .mobile-bottom-nav i {
        font-size: 15px;
    }

    .mobile-bottom-nav .active {
        color: #df91ff;
    }

    .mobile-bottom-nav em {
        position: absolute;
        top: 1px;
        margin-left: 25px;
        padding: 2px 5px;
        border-radius: 12px;
        color: #fff;
        background: #ee527e;
        font-size: 8px;
        font-style: normal;
    }

    html[data-theme="light"] .app--explore .app-header,
    html[data-theme="light"] .mobile-bottom-nav {
        border-color: #d1dfe6;
        background: #f4f9f9f2;
    }

    html[data-theme="light"] :is(.app--map-layout, .app--explore) .menu {
        border-color: #bd9be9;
        color: #583582 !important;
        background: #f7f1fce8 !important;
        box-shadow: 0 5px 16px #47345c20;
    }

    html[data-theme="light"] :is(.app--map-layout, .app--explore) .mobile-bottom-nav {
        border-top-color: #b7a4d6;
        background: #f2edf8df;
        box-shadow: 0 -8px 25px #18304720, 0 0 24px #8553b41a;
    }

    html[data-theme="light"] .app--explore .mobile-brand {
        color: #1c2b3c;
    }

    html[data-theme="light"] .app--explore .dashboard-search {
        background: #fff;
    }

    html[data-theme="light"] .mobile-bottom-nav a,
    html[data-theme="light"] .mobile-bottom-nav button {
        color: #65788a;
    }

    html[data-theme="light"] .mobile-bottom-nav .active {
        color: #7623b5;
    }
}

@media (max-width: 700px) {
    .map-full #map {
        height: 58vh;
        min-height: 340px;
        margin: 0 8px;
    }

    .map-projection-switch {
        margin-left: 8px;
    }

    .location-status {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.app--live-map-layout > main > .content {
    position: static !important;
    max-width: none !important;
    padding: 0 !important;
}

.app--live-map-layout .map-full {
    position: static;
    overflow: visible;
}

html[data-theme] .app--map-layout.app--live-map-layout:not(.app--explore) > main > .content > .map-full {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.app--live-map-layout .map-full #map {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
}

.app--live-map-layout .map-full > :not(#map) {
    position: relative;
    z-index: 2;
}

#appMapBackground {
    position: fixed !important;
    z-index: 0;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    background: #050711;
}

.app--map-layout:not(.app--explore) {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
}

#appMapBackground > .gm-style,
#dashboardMapCanvas > .gm-style {
    width: 100%;
    height: 100%;
}

.app-google-marker-label,
.dashboard-google-marker-label {
    padding: 3px 7px;
    border: 1px solid #d64dff78;
    border-radius: 7px;
    color: #f7eaff !important;
    background: #090815e8;
    font: 700 10px/1.3 Inter, Arial, sans-serif !important;
    text-shadow: 0 0 8px #df61ff;
    white-space: nowrap;
}

.app-google-marker-label--start,
.dashboard-google-marker-label--start {
    border-color: #47f5cf;
}

.app-google-marker-label--finish,
.dashboard-google-marker-label--finish {
    border-color: #ff4db8;
}

.app-google-marker-label--search,
.dashboard-google-marker-label--search {
    border-color: #ffcf5c;
}

.app-google-info {
    color: #181426;
    font: 600 12px/1.5 Inter, Arial, sans-serif;
}

.settings-consent,
.settings-export {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-raised);
}

.settings-consent h3,
.settings-export h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 14px;
}

.settings-consent .hint,
.settings-export .hint {
    margin: 0 0 12px;
    line-height: 1.55;
}

.consent-acceptance {
    display: grid;
    gap: 10px;
    color: var(--ink);
    font-size: 12px;
}

.consent-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.consent-acceptance input {
    margin-top: 2px;
}

.consent-acceptance a {
    color: var(--p);
    text-decoration: underline;
}

.settings-export .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 620px) {
    .journey-filter-bar {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        margin-left: 0;
    }
}

.app-map-controls {
    position: fixed;
    z-index: 22;
    top: 94px;
    right: 18px;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.app-map-controls button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #d94cff7a;
    border-radius: 13px;
    color: #f6e8ff;
    background: #090a18ad;
    box-shadow: 0 0 20px #b82cff3c, inset 0 0 12px #c733ff14;
    backdrop-filter: blur(14px) saturate(150%);
    pointer-events: auto;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-map-controls button[hidden] {
    display: none;
}

.app-map-controls button:hover,
.app-map-controls button:focus-visible {
    outline: 2px solid #e771ff;
    outline-offset: 2px;
    background: #1d1034e8;
    box-shadow: 0 0 26px #d938ff75;
}

.app-map-controls .is-loading i {
    animation: app-map-locate-pulse 1s ease-in-out infinite alternate;
}

@keyframes app-map-locate-pulse {
    to { color: #58efff; transform: scale(1.2); }
}

.app-map-marker {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 0 10px currentColor);
}

.app-map-marker-dot {
    width: 17px;
    height: 17px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 3px;
    background: #d538ff;
    box-shadow: 0 0 0 4px #d538ff4a, 0 0 22px #d538ff;
    transform: rotate(-45deg);
}

.app-map-marker--start .app-map-marker-dot {
    background: #47f5cf;
    box-shadow: 0 0 0 4px #47f5cf55, 0 0 22px #47f5cf;
}

.app-map-marker--finish .app-map-marker-dot {
    background: #ff4db8;
    box-shadow: 0 0 0 4px #ff4db855, 0 0 22px #ff4db8;
}

.app-map-marker--place .app-map-marker-dot,
.app-map-marker--saved-place .app-map-marker-dot,
.app-map-marker--home .app-map-marker-dot {
    background: #55ddff;
    box-shadow: 0 0 0 4px #55ddff55, 0 0 22px #55ddff;
}

.app-map-marker-label {
    position: absolute;
    top: 22px;
    left: 50%;
    max-width: 190px;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid #d64dff69;
    border-radius: 7px;
    color: #f7eaff;
    background: #090815d9;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
    text-shadow: 0 0 9px #df61ff;
}

.app-map-user-marker {
    position: relative;
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #00dcff;
    box-shadow: 0 0 0 7px #00dcff45, 0 0 30px #00dcff;
    animation: app-user-location-pulse 1.7s ease-out infinite;
}

.app-map-user-label {
    position: absolute;
    top: 25px;
    left: 50%;
    padding: 4px 8px;
    border: 1px solid #38ddff9c;
    border-radius: 7px;
    color: #e4fbff;
    background: #071321e8;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
    text-shadow: 0 0 8px #00d9ff;
}

@keyframes app-user-location-pulse {
    70% { box-shadow: 0 0 0 15px #00dcff00, 0 0 30px #00dcff; }
    100% { box-shadow: 0 0 0 7px #00dcff00, 0 0 30px #00dcff; }
}

.app--map-layout:not(.app--explore) .sidebar {
    background: #080913b8;
    border-color: #c44dff70;
    box-shadow: 0 10px 40px #0006, 0 0 26px #ad37f52b, inset 0 1px #ffffff15;
    opacity: 1;
    transition: background .22s ease, box-shadow .22s ease;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.app--map-layout:not(.app--explore) .sidebar:hover,
.app--map-layout:not(.app--explore) .sidebar:focus-within,
.app--map-layout:not(.app--explore) .sidebar.is-engaged {
    background: #090a18d9;
    box-shadow: 0 12px 42px #0008, 0 0 32px #ad37f54a, inset 0 1px #ffffff1b;
}

.app--map-layout:not(.app--explore) > main > header {
    position: fixed;
    top: 14px;
    right: 14px;
    left: 266px;
    min-height: 62px;
    margin: 0;
    background: #090a18b0;
    border-color: #c44dff52;
    box-shadow: 0 0 20px #a72bff20, inset 0 1px #ffffff18;
    opacity: 1;
    transition: background .22s ease;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.app--map-layout:not(.app--explore) > main > header:hover,
.app--map-layout:not(.app--explore) > main > header:focus-within,
.app--map-layout:not(.app--explore) > main > header.is-engaged {
    background: #090a18d9;
}

.app--map-layout:not(.app--explore) > main > .content {
    position: fixed;
    inset: 146px 14px 14px 266px;
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    width: auto;
    max-width: none;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    scrollbar-width: thin;
    pointer-events: none;
}

.app--map-layout:not(.app--explore) > main > .content > .lower,
.app--map-layout:not(.app--explore) > main > .content > .grid,
.app--map-layout:not(.app--explore) > main > .content > .stat-grid {
    display: contents;
}

.app--map-layout:not(.app--explore) > main > .content > * {
    min-width: 0;
    max-height: min(43vh, 430px);
    overflow: auto;
    pointer-events: auto;
}

.app--map-layout:not(.app--explore) > main > .content > .lower > *,
.app--map-layout:not(.app--explore) > main > .content > .grid > *,
.app--map-layout:not(.app--explore) > main > .content > .stat-grid > * {
    min-width: 0;
    max-height: min(43vh, 430px);
    overflow: auto;
    pointer-events: auto;
}

.app--map-layout:not(.app--explore) .content > .card,
.app--map-layout:not(.app--explore) .content > .hero,
.app--map-layout:not(.app--explore) .content > .stat-card,
.app--map-layout:not(.app--explore) .content > .panel,
.app--map-layout:not(.app--explore) .content > .chat-shell,
.app--map-layout:not(.app--explore) .content > .contact-card,
.app--map-layout:not(.app--explore) .content > .page-head,
.app--map-layout:not(.app--explore) .content > .tabs,
.app--map-layout:not(.app--explore) .content > .search {
    border-color: #c44dff63;
    background: #080915bf;
    box-shadow: 0 12px 36px #0006, 0 0 18px #ac36f524, inset 0 1px #ffffff18;
    opacity: 1;
    transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.app--map-layout:not(.app--explore) .content > .lower > .card,
.app--map-layout:not(.app--explore) .content > .grid > .card,
.app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card {
    border: 1px solid #c44dff63;
    color: var(--ink);
    background: #080915bf;
    box-shadow: 0 12px 36px #0006, 0 0 18px #ac36f524, inset 0 1px #ffffff18;
    opacity: 1;
    transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.app--map-layout:not(.app--explore) .content > .card:hover,
.app--map-layout:not(.app--explore) .content > .card:focus-within,
.app--map-layout:not(.app--explore) .content > .card.is-engaged,
.app--map-layout:not(.app--explore) .content > .hero:hover,
.app--map-layout:not(.app--explore) .content > .hero:focus-within,
.app--map-layout:not(.app--explore) .content > .stat-card:hover,
.app--map-layout:not(.app--explore) .content > .panel:hover,
.app--map-layout:not(.app--explore) .content > .chat-shell:hover,
.app--map-layout:not(.app--explore) .content > .contact-card:hover,
.app--map-layout:not(.app--explore) .content > .page-head:hover,
.app--map-layout:not(.app--explore) .content > .tabs:hover,
.app--map-layout:not(.app--explore) .content > .search:hover,
.app--map-layout:not(.app--explore) .content > .hero:focus-within,
.app--map-layout:not(.app--explore) .content > .tabs:focus-within,
.app--map-layout:not(.app--explore) .content > .search:focus-within {
    border-color: #de75ffbd;
    background: #080915d9;
    box-shadow: 0 14px 42px #0009, 0 0 24px #bd38ff45, inset 0 1px #ffffff20;
}

.app--map-layout:not(.app--explore) .content > .lower > .card:hover,
.app--map-layout:not(.app--explore) .content > .lower > .card:focus-within,
.app--map-layout:not(.app--explore) .content > .grid > .card:hover,
.app--map-layout:not(.app--explore) .content > .grid > .card:focus-within,
.app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card:hover,
.app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card:focus-within {
    border-color: #de75ffbd;
    background: #080915d9;
    box-shadow: 0 14px 42px #0009, 0 0 24px #bd38ff45, inset 0 1px #ffffff20;
}

.app--map-layout:not(.app--explore) .content > .page-head {
    padding: 14px 16px;
}

.app--map-layout:not(.app--explore) > main > footer {
    display: none;
}

.app--map-layout:not(.app--explore) .content .map-card {
    display: none;
}

.app--map-layout:not(.app--explore) .content .journey-row,
.app--map-layout:not(.app--explore) .content .jinfo small,
.app--map-layout:not(.app--explore) .content .card-head,
.app--map-layout:not(.app--explore) .content h2,
.app--map-layout:not(.app--explore) .content h3,
.app--map-layout:not(.app--explore) .content p {
    text-shadow: 0 1px 10px #000;
}

.app--map-layout:not(.app--explore) .content .data-table-wrap {
    max-width: 100%;
    overflow: auto;
}

.app--map-layout:not(.app--explore) .content #placesList {
    max-height: 32vh;
    overflow: auto;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .sidebar,
html[data-theme="light"] .app--map-layout:not(.app--explore) > main > header,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .hero,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .stat-card,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .panel,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .chat-shell,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .contact-card,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .page-head,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .tabs,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .search {
    color: #202039;
    background: #f8f7ffbf;
    border-color: #b249df8a;
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .lower > .card,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .grid > .card,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card {
    color: #202039;
    background: #f8f7ffbf;
    border-color: #b249df8a;
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .sidebar:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .sidebar:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .card:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .hero:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .hero:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .stat-card:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .panel:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .chat-shell:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .contact-card:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .page-head:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .tabs:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .tabs:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .search:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .search:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) > main > header:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) > main > header:focus-within {
    background: #f8f7ffdc;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .lower > .card:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .lower > .card:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .grid > .card:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .grid > .card:focus-within,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card:hover,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card:focus-within {
    background: #f8f7ffdc;
}

/* Map focus keeps the map controls available while clearing every page panel. */
.app-map-controls {
    z-index: 40;
}

.app-map-controls #appMapFocus {
    border-color: #c458ff99;
    color: #f4e8ff;
    background: #120d21e8;
}

.app-map-marker--search .app-map-marker-dot {
    border-color: #fff;
    background: #ff3b62;
    box-shadow: 0 0 0 7px #ff3b6244, 0 0 26px #ff3b62;
}

.location-autocomplete {
    position: relative;
}

.location-suggestions {
    position: absolute;
    z-index: 55;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: grid;
    max-height: 260px;
    overflow: auto;
    padding: 5px;
    border: 1px solid #bb59f699;
    border-radius: 12px;
    background: #0b0c19f5;
    box-shadow: 0 15px 36px #0009, 0 0 18px #ac36f52b;
    backdrop-filter: blur(18px);
}

.location-suggestions[hidden] {
    display: none;
}

.location-suggestion-status {
    position: absolute;
    z-index: 55;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    padding: 10px 12px;
    border: 1px solid #bb59f699;
    border-radius: 12px;
    color: #eee8ff;
    background: #0b0c19f5;
    box-shadow: 0 15px 36px #0009, 0 0 18px #ac36f52b;
    font-size: 12px;
}

.location-suggestion-status[hidden] {
    display: none;
}

.location-suggestion {
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    color: #eee8ff;
    background: transparent;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
}

.location-suggestion:hover,
.location-suggestion[aria-selected="true"],
.location-suggestion:focus-visible {
    outline: none;
    color: #fff;
    background: #a855f737;
}

.contact-finder {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.contact-finder h4 {
    font-size: 14px;
}

.contact-finder > p,
.contact-search-status {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.contact-search-results {
    display: grid;
    max-height: 220px;
    overflow: auto;
    gap: 6px;
}

.contact-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid #a74bdc44;
    border-radius: 11px;
    background: #0b0c19b8;
}

.contact-search-identity {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.contact-search-identity strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-search-identity small {
    color: var(--muted);
    font-size: 10px;
}

.contact-invite-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--muted);
    font-size: 10px;
}

.contact-invite-divider::before,
.contact-invite-divider::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
}

.route-preview-status {
    position: fixed;
    z-index: 12;
    right: 22px;
    bottom: 16px;
    max-width: min(420px, calc(100vw - 36px));
    padding: 9px 12px;
    border: 1px solid #c44dff63;
    border-radius: 12px;
    color: #eee8ff;
    background: #080915d9;
    box-shadow: 0 10px 28px #0007;
    font-size: 11px;
    backdrop-filter: blur(18px);
}

.journey-map-detail {
    position: fixed;
    z-index: 25;
    right: 18px;
    bottom: 20px;
    display: grid;
    width: min(340px, calc(100vw - 32px));
    max-height: min(42vh, 360px);
    gap: 8px;
    overflow: auto;
    padding: 16px;
    border: 1px solid #b24fff70;
    border-radius: 18px;
    color: var(--ink);
    background: #0c0c1bdf;
    box-shadow: 0 12px 34px #0007, 0 0 22px #b739ff24, inset 0 1px #ffffff18;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.journey-map-detail h3 {
    font-size: 15px;
    line-height: 1.35;
}

.journey-map-detail > p {
    color: #b9c6d8;
    font-size: 10px;
    line-height: 1.5;
}

.journey-map-detail dl {
    display: grid;
    gap: 7px;
}

.journey-map-detail dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ffffff1c;
}

.journey-map-detail dt {
    color: #98a9c0;
    font-size: 10px;
}

.journey-map-detail dd {
    max-width: 65%;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: 10px;
}

.journey-map-detail-note {
    margin-top: 2px;
}

.journey-row.is-map-selected {
    border-color: #d879ff;
    box-shadow: 0 0 0 1px #d879ff55, 0 0 18px #a855f733;
}

.badge.planned {
    color: #e9d7ff;
    background: #8f55c4;
}

.app--explore .app-search-row {
    position: fixed;
    z-index: 15;
    top: 88px;
    left: 274px;
    width: min(480px, calc(100vw - 300px));
}

.app--explore .app-search-row .dashboard-search {
    width: 100%;
    margin: 0;
}

.app--explore .app-search-row {
    z-index: 45;
    width: min(560px, calc(100vw - 300px));
}

.dashboard-planner {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #a74bdc70;
    border-radius: 16px;
    color: var(--ink);
    background: #0b0c1bd9;
    box-shadow: 0 12px 32px #0007, 0 0 22px #a74bdc20, inset 0 1px #ffffff18;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.dashboard-planner-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.dashboard-planner-field,
.dashboard-planner-departure {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid #2c3950;
    border-radius: 11px;
    background: #111c2eeF;
}

.dashboard-planner-field:focus-within,
.dashboard-planner-departure:focus-within {
    z-index: 60;
    border-color: #bd76f1;
    box-shadow: 0 0 0 2px #a855f729;
}

.dashboard-planner-field > label,
.dashboard-planner-departure > span {
    display: block;
    color: #94a6bf;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-planner-field input,
.dashboard-planner-departure input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 12px;
}

.dashboard-planner-field input::placeholder {
    color: #8192aa;
}

.dashboard-current-location {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0 0;
    border: 0;
    color: #a9d8ff;
    background: transparent;
    font-size: 10px;
    cursor: pointer;
}

.dashboard-current-location:hover,
.dashboard-current-location:focus-visible {
    color: #e2c6ff;
    text-decoration: underline;
}

.dashboard-planner-swap {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #394761;
    border-radius: 9px;
    color: #d9c8ff;
    background: #17152b;
}

.dashboard-planner-status,
.dashboard-planner-share p {
    color: #b9c6d8;
    font-size: 10px;
    line-height: 1.45;
}

.dashboard-planner-status.is-error {
    color: #ff9aaf;
}

.dashboard-planner-actions,
.dashboard-planner-share {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.dashboard-planner-actions > button,
.dashboard-planner-share > button {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 10px;
    font-size: 10px;
}

.dashboard-planner-actions > button:disabled,
.dashboard-planner-share > button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.dashboard-planner-departure {
    max-width: 260px;
}

.dashboard-planner-share {
    padding-top: 7px;
    border-top: 1px solid #ffffff1c;
}

.dashboard-planner-share p {
    flex: 1 1 100%;
}

.dashboard-planner-share input {
    flex: 1 1 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid #394761;
    border-radius: 8px;
    color: var(--ink);
    background: #111c2e;
    font-size: 10px;
}

.dashboard-shared-journey {
    display: grid;
    gap: 7px;
    padding-top: 7px;
    border-top: 1px solid #ffffff1c;
}

.dashboard-shared-journey summary {
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-shared-journey summary i {
    margin-right: 5px;
    color: #c99aff;
}

.dashboard-shared-journey > label,
.dashboard-shared-journey > p {
    margin: 0;
    color: #b9c6d8;
    font-size: 10px;
    line-height: 1.45;
}

.dashboard-shared-journey > input {
    width: 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid #394761;
    border-radius: 8px;
    color: var(--ink);
    background: #111c2e;
    font-size: 10px;
}

.dashboard-shared-journey > p.is-error {
    color: #ff9aaf;
}

.location-autocomplete:focus-within {
    z-index: 60;
}

.app--explore .explore-map-heading,
.app--explore .explore-map-modes {
    top: 146px;
}

.app--explore .explore-map-modes {
    top: auto;
    bottom: 20px;
}

.map-focus-mode .app--map-layout:not(.app--explore) .sidebar,
.map-focus-mode .app--map-layout:not(.app--explore) > main > header,
.map-focus-mode .app--map-layout:not(.app--explore) > main > .content,
.map-focus-mode .app--map-layout:not(.app--explore) > main > footer,
.map-focus-mode .app--map-layout:not(.app--explore) .mobile-bottom-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.map-focus-mode .journey-map-detail {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.map-focus-mode .app-map-background {
    pointer-events: auto;
}

body.map-focus-mode #appMapBackground,
body:not(.map-focus-mode) #appMapBackground {
    pointer-events: auto;
}

.map-focus-mode .app-map-controls {
    z-index: 70;
}

.app--map-layout:not(.app--explore) .content > .journey-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--map-layout:not(.app--explore) .content > .journey-filter-bar:is(:hover, :focus-within) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.journey-filter-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid #c44dff63;
    border-radius: 10px;
    color: var(--muted);
    background: #080915bf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.journey-filter-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.settings-tabs {
    align-items: center;
}

.journey-filter-options .tab,
#placeTabs .tab,
.tabs .tab,
.settings-tabs .tab {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #c44dff63;
    border-radius: 10px;
    color: #eee4ff;
    background: #080915bf;
    box-shadow: 0 7px 18px #0003, inset 0 1px #ffffff12;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.journey-filter-options .tab:hover,
#placeTabs .tab:hover,
.tabs .tab:hover,
.settings-tabs .tab:hover,
.journey-filter-options .tab:focus-visible,
#placeTabs .tab:focus-visible,
.tabs .tab:focus-visible,
.settings-tabs .tab:focus-visible {
    border-color: #d780ff;
    background: #321848d9;
    box-shadow: 0 0 18px #bc50ff35, inset 0 1px #ffffff20;
}

.journey-filter-options .tab.active,
#placeTabs .tab.active,
.tabs .tab.active,
.settings-tabs .tab.active {
    color: #fff;
    border-color: #d780ff;
    background: linear-gradient(120deg, #7926a9, #3d2877);
    box-shadow: 0 0 20px #b84fff40, inset 0 1px #ffffff25;
}

#placeTabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#placeTabs .tab {
    display: grid;
    min-height: 70px;
    justify-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
    font-size: 10px;
}

#placeTabs .tab i {
    font-size: 15px;
    color: #d795ff;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .journey-filter-bar,
html[data-theme="light"] #placeTabs {
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .content > .journey-filter-bar:is(:hover, :focus-within) {
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .journey-filter-label,
html[data-theme="light"] .journey-filter-options .tab,
html[data-theme="light"] #placeTabs .tab,
html[data-theme="light"] .tabs .tab,
html[data-theme="light"] .settings-tabs .tab {
   color: #35254e;
   background: #f8f7ffdf;
   box-shadow: 0 6px 16px #32274a12, inset 0 1px #ffffffc9;
}

html[data-theme="light"] .journey-filter-options .tab.active,
html[data-theme="light"] #placeTabs .tab.active,
html[data-theme="light"] .tabs .tab.active,
html[data-theme="light"] .settings-tabs .tab.active {
   color: #fff;
   background: linear-gradient(120deg, #8f32b5, #563794);
   box-shadow: 0 0 18px #7926a930, inset 0 1px #ffffff40;
}

html[data-theme="light"] .location-suggestions {
    background: #fffefdf5;
}

html[data-theme="light"] .location-suggestion-status {
    color: #302743;
    background: #fffefdf5;
}

html[data-theme="light"] .location-suggestion {
    color: #302743;
}

html[data-theme="light"] .route-preview-status {
    color: #29213c;
    background: #ffffffed;
}

@media (max-width: 900px) {
    .app--explore .app-search-row {
        top: 78px;
        right: 8px;
        left: 8px;
        width: auto;
    }

    .app--explore .explore-map-heading {
        top: 134px;
        left: 10px;
        max-width: calc(100vw - 20px);
    }

    .app--explore .explore-map-heading.has-error {
        width: fit-content;
        max-width: min(340px, calc(100vw - 20px));
    }

    .app--explore .explore-map-modes {
        top: auto;
        bottom: 82px;
    }

    .route-preview-status {
        right: 10px;
        bottom: 82px;
    }
}

.live-share-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
}

.live-share-card h3 {
    margin: 4px 0;
}

.live-share-card p {
    max-width: 720px;
    color: var(--muted);
    font-size: 11px;
}

.live-share-actions,
.invite-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.live-share-card > #liveShareUrl {
    grid-column: 1 / -1;
    width: 100%;
}

.live-share-card > #liveShareStatus {
    grid-column: 1 / -1;
}

.live-share-actions[hidden],
.invite-share-actions[hidden],
#liveShareUrl[hidden] {
    display: none !important;
}

.invite-share-actions {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.invite-share-actions label,
.invite-status {
    color: var(--muted);
    font-size: 11px;
}

.invite-share-actions input,
.live-share-card > input {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #c44dff63;
    border-radius: 9px;
    color: var(--ink);
    background: #080915bf;
}

.map-focus-mode .route-preview-status {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 900px) {
    .live-share-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-map-controls {
        top: 84px;
        right: 10px;
    }

    .app--map-layout:not(.app--explore) > main > header {
        top: 8px;
        right: 10px;
        left: 54px;
        min-height: 60px;
    }

    .app--map-layout:not(.app--explore) > main > .content {
        inset: 134px 8px calc(76px + env(safe-area-inset-bottom)) 8px;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 6px;
    }

    .app--map-layout:not(.app--explore) > main > .content > * {
        max-height: 35vh;
    }

}

@media (prefers-reduced-motion: reduce) {
    .app-map-user-marker,
    .app-map-controls .is-loading i {
        animation: none;
    }
}

@property --safaritrak-outline-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes safaritrak-outline-spin {
    to {
        --safaritrak-outline-angle: 360deg;
    }
}

:is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-controls button,
    .app-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown
) {
    isolation: isolate;
}

:is(
    .app--explore .explore-map-controls button,
    .app-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal
) {
    position: relative;
}

:is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-controls button,
    .app-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown
)::after {
    position: absolute;
    z-index: 20;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--safaritrak-outline-angle),
        transparent 0deg,
        transparent 285deg,
        #8b5cf6 312deg,
        #22d3ee 334deg,
        #e879f9 350deg,
        transparent 360deg
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

:is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-controls button,
    .app-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown
):is(:hover, :focus-within, .is-engaged)::after {
    opacity: 1;
    animation: safaritrak-outline-spin 7s linear infinite;
}

html[data-theme="light"] .explore-panel,
html[data-theme="light"] .explore-shortcuts a {
    background: linear-gradient(145deg, #f8fcf8d9, #eef5f8d9);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

html[data-theme="light"] .app--explore .sidebar {
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

html[data-theme="light"] .app--explore .app-header,
html[data-theme="light"] .explore-map-heading,
html[data-theme="light"] .explore-map-modes,
html[data-theme="light"] .explore-map-controls button,
html[data-theme="light"] .explore-map-legend {
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

/* Violet glass surfaces match the authentication theme. */
:is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .dashboard-search,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-modes button,
    .app--explore .explore-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app-map-controls button,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown,
    .journey-filter-bar,
    .journey-filter-options .tab,
    #placeTabs .tab,
    .tabs .tab,
    .settings-tabs .tab,
    .location-suggestions,
    .location-suggestion-status,
    .route-preview-status
) {
    border-color: #b24fff70;
    background: #0c0c1bcc;
    box-shadow: 0 12px 34px #0006, 0 0 18px #b739ff20, inset 0 1px #ffffff20;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

:is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .dashboard-search,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-modes button,
    .app--explore .explore-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app-map-controls button,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown,
    .journey-filter-bar,
    .journey-filter-options .tab,
    #placeTabs .tab,
    .tabs .tab,
    .settings-tabs .tab,
    .location-suggestions,
    .location-suggestion-status,
    .route-preview-status
):is(:hover, :focus-within, .is-engaged) {
    background: #171126e8;
    border-color: #cb48ffb8;
    box-shadow: 0 14px 38px #0008, 0 0 24px #b739ff35, inset 0 1px #ffffff25;
}

.journey-filter-options .tab,
#placeTabs .tab,
.tabs .tab,
.settings-tabs .tab {
    color: #f5f2ff;
}

.journey-filter-options .tab.active,
#placeTabs .tab.active,
.tabs .tab.active,
.settings-tabs .tab.active,
.explore-map-modes button[aria-selected="true"] {
    border-color: #cb48ff;
    color: #fff;
    background: linear-gradient(125deg, #8f32b5e8, #563794e8);
    box-shadow: 0 0 18px #b739ff35, inset 0 1px #ffffff2b;
}

html[data-theme="light"] :is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .dashboard-search,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-modes button,
    .app--explore .explore-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app-map-controls button,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown,
    .journey-filter-bar,
    .journey-filter-options .tab,
    #placeTabs .tab,
    .tabs .tab,
    .settings-tabs .tab,
    .location-suggestions,
    .location-suggestion-status,
    .route-preview-status
) {
    border-color: #a74bdc80;
    color: #221b35;
    background: #ffffffe0;
    box-shadow: 0 12px 34px #39205220, 0 0 18px #a74bdc18, inset 0 1px #ffffffd9;
}

html[data-theme="light"] :is(
    .app--explore .sidebar,
    .app--explore .app-header,
    .app--explore .dashboard-search,
    .app--explore .explore-map-heading,
    .app--explore .explore-map-modes,
    .app--explore .explore-map-modes button,
    .app--explore .explore-map-controls button,
    .app--explore .explore-panel,
    .app--explore .explore-shortcuts a,
    .app--explore .explore-map-legend,
    .app-map-controls button,
    .app--map-layout:not(.app--explore) .sidebar,
    .app--map-layout:not(.app--explore) > main > header,
    .app--map-layout:not(.app--explore) .content > .card,
    .app--map-layout:not(.app--explore) .content > .hero,
    .app--map-layout:not(.app--explore) .content > .stat-card,
    .app--map-layout:not(.app--explore) .content > .panel,
    .app--map-layout:not(.app--explore) .content > .chat-shell,
    .app--map-layout:not(.app--explore) .content > .contact-card,
    .app--map-layout:not(.app--explore) .content > .page-head,
    .app--map-layout:not(.app--explore) .content > .tabs,
    .app--map-layout:not(.app--explore) .content > .search,
    .app--map-layout:not(.app--explore) .content > .lower > .card,
    .app--map-layout:not(.app--explore) .content > .grid > .card,
    .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
    .app--map-layout:not(.app--explore) .modal,
    .app--map-layout:not(.app--explore) .profile-dropdown-menu,
    .app--map-layout:not(.app--explore) .notif-dropdown,
    .journey-filter-bar,
    .journey-filter-options .tab,
    #placeTabs .tab,
    .tabs .tab,
    .settings-tabs .tab,
    .location-suggestions,
    .location-suggestion-status,
    .route-preview-status
):is(:hover, :focus-within, .is-engaged) {
    background: #fffffff0;
}

html[data-theme="light"] .journey-filter-options .tab.active,
html[data-theme="light"] #placeTabs .tab.active,
html[data-theme="light"] .tabs .tab.active,
html[data-theme="light"] .settings-tabs .tab.active,
html[data-theme="light"] .explore-map-modes button[aria-selected="true"] {
    border-color: #a74bdc;
    color: #fff;
    background: linear-gradient(125deg, #8f32b5, #563794);
    box-shadow: 0 0 18px #b739ff35, inset 0 1px #ffffffd9;
}

html[data-theme="light"] .journey-filter-options .tab,
html[data-theme="light"] #placeTabs .tab,
html[data-theme="light"] .tabs .tab,
html[data-theme="light"] .settings-tabs .tab {
    color: #35254e;
}

html[data-theme="light"] .journey-filter-options .tab.active,
html[data-theme="light"] #placeTabs .tab.active,
html[data-theme="light"] .tabs .tab.active,
html[data-theme="light"] .settings-tabs .tab.active,
html[data-theme="light"] .explore-map-modes button[aria-selected="true"] {
    color: #fff;
}

/* Restore the violet glass theme used by the authentication screens. */
.app--map-layout:not(.app--explore),
.app--explore {
    --p: #cb48ff;
    --pd: #a18bff;
    --ps: #22152f;
    --gold: #4eeaff;
    --ink: #f5f2ff;
    --muted: #b8b2cd;
    --line: #6f4b8d80;
    --bg: #070711;
    --panel: #0c0c1bcc;
    --panel-raised: #151126e8;
    --focus: #4eeaff;
}

html[data-theme="light"] .app--map-layout:not(.app--explore),
html[data-theme="light"] .app--explore {
    --ink: #221b35;
    --muted: #655d78;
    --line: #a74bdc80;
    --bg: #eef0fa;
    --panel: #fffffff0;
    --panel-raised: #f6f1fbeb;
}

:is(.app--map-layout:not(.app--explore), .app--explore) .sidebar,
:is(.app--map-layout:not(.app--explore), .app--explore) > main > header,
:is(.app--map-layout:not(.app--explore), .app--explore) .app-header,
:is(.app--map-layout:not(.app--explore), .app--explore) .dashboard-search,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-heading,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-modes,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-modes button,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-controls button,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-panel,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-shortcuts a,
:is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-legend,
:is(.app--map-layout:not(.app--explore), .app--explore) .app-map-controls button,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .card,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .hero,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .stat-card,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .panel,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .chat-shell,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .contact-card,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .page-head,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .tabs,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .search,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .lower > .card,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .grid > .card,
:is(.app--map-layout:not(.app--explore), .app--explore) .content > .stat-grid > .stat-card,
:is(.app--map-layout:not(.app--explore), .app--explore) .modal,
:is(.app--map-layout:not(.app--explore), .app--explore) .profile-dropdown-menu,
:is(.app--map-layout:not(.app--explore), .app--explore) .notif-dropdown {
    border-color: #b24fff80;
    color: var(--ink);
    background: #0c0c1bcc;
    box-shadow: 0 16px 48px #0008, 0 0 28px #b739ff20, inset 0 1px #ffffff1c;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .sidebar,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) > main > header,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .app-header,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .dashboard-search,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-heading,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-modes,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-modes button,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-controls button,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-panel,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-shortcuts a,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .explore-map-legend,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .app-map-controls button,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .card,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .hero,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .stat-card,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .panel,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .chat-shell,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .contact-card,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .page-head,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .tabs,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .search,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .lower > .card,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .grid > .card,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .content > .stat-grid > .stat-card,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .modal,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .profile-dropdown-menu,
html[data-theme="light"] :is(.app--map-layout:not(.app--explore), .app--explore) .notif-dropdown {
    border-color: #a74bdc80;
    color: #221b35;
    background: #ffffffe0;
    box-shadow: 0 16px 42px #39205220, 0 0 24px #a74bdc18, inset 0 1px #ffffffd9;
}

/* Filter groups are layout only; every filter remains its own compact tile. */
.app--map-layout:not(.app--explore) .content > .journey-filter-bar,
.app--map-layout:not(.app--explore) .content > .tabs,
.app--map-layout:not(.app--explore) #placeTabs,
.app--map-layout:not(.app--explore) #notifTabs,
.app--map-layout:not(.app--explore) .settings-tabs,
.app--map-layout:not(.app--explore) .filter-bar {
    width: fit-content;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--map-layout:not(.app--explore) .content > .journey-filter-bar:is(:hover, :focus-within),
.app--map-layout:not(.app--explore) .content > .tabs:is(:hover, :focus-within),
.app--map-layout:not(.app--explore) #placeTabs:is(:hover, :focus-within),
.app--map-layout:not(.app--explore) #notifTabs:is(:hover, :focus-within),
.app--map-layout:not(.app--explore) .settings-tabs:is(:hover, :focus-within) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app--map-layout:not(.app--explore) .journey-filter-label,
.app--map-layout:not(.app--explore) .journey-filter-options .tab,
.app--map-layout:not(.app--explore) #placeTabs .tab,
.app--map-layout:not(.app--explore) #notifTabs .tab,
.app--map-layout:not(.app--explore) .settings-tabs .tab,
.app--map-layout:not(.app--explore) .content > .tabs .tab {
    border: 1px solid #b24fff70;
    border-radius: 11px;
    color: #f5f2ff;
    background: #0c0c1bcc;
    box-shadow: 0 8px 22px #0005, inset 0 1px #ffffff18;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.app--map-layout:not(.app--explore) .content > .page-head {
    padding: 0 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--map-layout:not(.app--explore) .content > .page-head:is(:hover, :focus-within) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app--map-layout:not(.app--explore) .content > .page-head::after,
.app--map-layout:not(.app--explore) .content > .journey-filter-bar::after,
.app--map-layout:not(.app--explore) .content > #placeTabs::after,
.app--map-layout:not(.app--explore) .content > #notifTabs::after,
.app--map-layout:not(.app--explore) .content > .settings-tabs::after {
    display: none;
}

.app--explore .explore-map-modes {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--explore .explore-map-modes::after {
    display: none;
}

.app--explore .explore-map-modes button {
    min-height: 38px;
    border: 1px solid #b24fff70;
    border-radius: 11px;
    color: #f5f2ff;
    background: #0c0c1bcc;
    box-shadow: 0 8px 22px #0005, inset 0 1px #ffffff18;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.app--explore .explore-map-modes button[aria-selected="true"] {
    border-color: #cb48ff;
    color: #fff;
    background: linear-gradient(125deg, #8f32b5e8, #563794e8);
}

html[data-theme="light"] .app--explore .explore-map-modes button {
    color: #35254e;
    background: #ffffffe0;
}

html[data-theme="light"] .app--explore .explore-map-modes button[aria-selected="true"] {
    color: #fff;
    background: linear-gradient(125deg, #8f32b5, #563794);
}

.app--map-layout:not(.app--explore) .journey-filter-options .tab:hover,
.app--map-layout:not(.app--explore) .journey-filter-options .tab:focus-visible,
.app--map-layout:not(.app--explore) #placeTabs .tab:hover,
.app--map-layout:not(.app--explore) #placeTabs .tab:focus-visible,
.app--map-layout:not(.app--explore) #notifTabs .tab:hover,
.app--map-layout:not(.app--explore) #notifTabs .tab:focus-visible,
.app--map-layout:not(.app--explore) .settings-tabs .tab:hover,
.app--map-layout:not(.app--explore) .settings-tabs .tab:focus-visible {
    border-color: #4eeaff;
    background: #241334e8;
    box-shadow: 0 0 18px #b739ff35, inset 0 1px #ffffff25;
}

.app--map-layout:not(.app--explore) .journey-filter-options .tab.active,
.app--map-layout:not(.app--explore) #placeTabs .tab.active,
.app--map-layout:not(.app--explore) #notifTabs .tab.active,
.app--map-layout:not(.app--explore) .settings-tabs .tab.active {
    border-color: #cb48ff;
    color: #fff;
    background: linear-gradient(125deg, #8f32b5e8, #563794e8);
    box-shadow: 0 0 18px #b739ff35, inset 0 1px #ffffff2b;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .journey-filter-options .tab,
html[data-theme="light"] .app--map-layout:not(.app--explore) #placeTabs .tab,
html[data-theme="light"] .app--map-layout:not(.app--explore) #notifTabs .tab,
html[data-theme="light"] .app--map-layout:not(.app--explore) .settings-tabs .tab {
    color: #35254e;
    background: #ffffffe0;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .journey-filter-options .tab.active,
html[data-theme="light"] .app--map-layout:not(.app--explore) #placeTabs .tab.active,
html[data-theme="light"] .app--map-layout:not(.app--explore) #notifTabs .tab.active,
html[data-theme="light"] .app--map-layout:not(.app--explore) .settings-tabs .tab.active {
    color: #fff;
    background: linear-gradient(125deg, #8f32b5, #563794);
}

[hidden] {
    display: none !important;
}

.dashboard-route-focus .app--explore .sidebar,
.dashboard-route-focus .app--explore .app-header,
.dashboard-route-focus .app--explore .explore-panels,
.dashboard-route-focus .app--explore .explore-map-heading,
.dashboard-route-focus .app--explore .explore-map-legend,
.dashboard-route-focus .app--explore .mobile-bottom-nav,
.dashboard-route-focus .app--explore .explore-footer {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.dashboard-route-focus .app--explore .app-search-row {
    position: fixed;
    z-index: 80;
    top: 16px;
    right: 18px;
    left: auto;
    width: min(390px, calc(100vw - 36px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: 1px;
    scrollbar-width: thin;
}

.dashboard-route-focus .dashboard-planner {
    border-color: color-mix(in srgb, var(--accent-pink) 64%, var(--accent-violet));
    background:
        radial-gradient(ellipse at 100% 0, #a349ff25, transparent 48%),
        color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 18px 54px #0008, 0 0 28px #a349ff35, inset 0 1px #ffffff20;
}

.dashboard-planner-focus-exit {
    justify-self: start;
    padding: 5px 8px;
    border: 1px solid #54e7ff70;
    border-radius: 9px;
    color: var(--accent-cyan);
    background: #112238d9;
    font-size: 10px;
}

.dashboard-planner-focus-exit:hover,
.dashboard-planner-focus-exit:focus-visible {
    border-color: var(--accent-pink);
    color: #fff;
    background: #51224ddd;
}

.dashboard-planner .btn-primary {
    background: linear-gradient(125deg, #9b36df, #633bd2);
    box-shadow: 0 6px 18px #843de34a;
}

.dashboard-planner-share .btn-ghost {
    border-color: #ff4fa370;
}

.journey-map-route-status {
    padding: 8px 10px;
    border: 1px solid #54e7ff42;
    border-radius: 10px;
    color: #a9f3ff !important;
    background: #17394b8c;
}

.journey-map-route-status.is-error {
    border-color: #ff557f80;
    color: #ffafc0 !important;
    background: #4a1e328c;
}

.settings-account-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #54e7ff4d;
    border-radius: 14px;
    background: linear-gradient(115deg, #16475a55, #59276044 72%, #74362933);
}

.settings-account-shortcut strong {
    display: block;
    color: var(--accent-cyan);
    font-size: 12px;
}

.settings-account-shortcut p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.settings-account-shortcut .btn-ghost {
    flex: 0 0 auto;
    border-color: #ff4fa370;
}

.app--map-layout:not(.app--explore) .journey-row.is-map-selected {
    border-color: var(--accent-pink);
    background: linear-gradient(105deg, #61305266, #22214399 58%, #17405166);
}

@media (max-width: 800px) {
    .dashboard-route-focus .app--explore main {
        height: 100dvh;
        padding: 0;
    }

    .dashboard-route-focus .app--explore .content--explore {
        position: fixed;
        z-index: 1;
        inset: 0;
        width: 100vw;
        height: 100dvh;
    }

    .dashboard-route-focus .app--explore .explore-dashboard,
    .dashboard-route-focus .app--explore .explore-map {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 0;
    }

    .dashboard-route-focus .app--explore .app-search-row {
        top: 10px;
        right: 10px;
        left: auto;
        width: min(360px, calc(100vw - 20px));
        max-height: min(72dvh, 560px);
    }

    .settings-account-shortcut {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Repeated records sit in their own floating tiles, not inside a large card. */
.app--map-layout:not(.app--explore) .content .card:has(.journey-list),
.app--map-layout:not(.app--explore) .content .card:has(.notif-page-list) {
    display: contents;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--map-layout:not(.app--explore) .content .journey-list,
.app--map-layout:not(.app--explore) .content .notif-page-list {
    display: contents;
    padding: 0;
}

.app--map-layout:not(.app--explore) .content .journey-row,
.app--map-layout:not(.app--explore) .content .notif-row,
.app--map-layout:not(.app--explore) .content .notif-date-label,
.app--map-layout:not(.app--explore) .content .toggle-row {
    border: 1px solid #b24fff65;
    border-radius: 14px;
    background: #0c0c1bcc;
    box-shadow: 0 10px 28px #0005, inset 0 1px #ffffff16;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.app--map-layout:not(.app--explore) .content .journey-row,
.app--map-layout:not(.app--explore) .content .notif-row {
    margin: 5px 0;
    padding: 12px 14px;
}

.app--map-layout:not(.app--explore) .content .journey-row:hover,
.app--map-layout:not(.app--explore) .content .notif-row:hover,
.app--map-layout:not(.app--explore) .content .toggle-row:hover {
    border-color: #4eeaff99;
    background: #171126e8;
}

html[data-theme="light"] .app--map-layout:not(.app--explore) .content .journey-row,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content .notif-row,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content .notif-date-label,
html[data-theme="light"] .app--map-layout:not(.app--explore) .content .toggle-row {
    border-color: #a74bdc70;
    background: #ffffffe0;
    box-shadow: 0 10px 28px #39205216, inset 0 1px #ffffffd9;
}

:is(.app--explore, .app--map-layout:not(.app--explore)) .app-header {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--map-layout:not(.app--explore) > main > header {
    right: 14px;
    left: auto;
    width: max-content;
    max-width: calc(100vw - 280px);
    min-height: 0;
    padding: 6px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app--map-layout:not(.app--explore) > main > header .header-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

:is(.app--explore, .app--map-layout:not(.app--explore)) .head-actions {
    gap: 8px;
    padding: 6px;
    border: 1px solid #b24fff70;
    border-radius: 18px;
    background: #0c0c1bd9;
    box-shadow: 0 12px 32px #0006, 0 0 22px #b739ff24, inset 0 1px #ffffff18;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

html[data-theme="light"] :is(.app--explore, .app--map-layout:not(.app--explore)) .head-actions {
    border-color: #a74bdc80;
    background: #ffffffe0;
    box-shadow: 0 12px 32px #39205220, 0 0 22px #a74bdc18, inset 0 1px #ffffffd9;
}

.google-user-location-marker {
    position: absolute;
    z-index: 1000;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff2d75;
    box-shadow: 0 0 0 4px #ff2d7552, 0 0 22px #ff2d75;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.google-user-location-marker__pulse {
    position: absolute;
    inset: -9px;
    border: 2px solid #ff2d75;
    border-radius: 50%;
    animation: google-user-location-pulse 1.8s ease-out infinite;
}

.google-user-location-marker__center {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff;
}

.google-user-location-marker__label {
    position: absolute;
    top: 31px;
    left: 50%;
    padding: 4px 8px;
    border: 1px solid #ff2d7599;
    border-radius: 8px;
    color: #fff;
    background: #0a0b10e8;
    box-shadow: 0 0 14px #ff2d7538;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    transform: translateX(-50%);
}

@keyframes google-user-location-pulse {
    0% { opacity: .8; transform: scale(.55); }
    85%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
    .google-user-location-marker__pulse {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .app--explore .sidebar,
        .app--explore .app-header,
        .app--explore .explore-map-heading,
        .app--explore .explore-map-modes,
        .app--explore .explore-map-controls button,
        .app-map-controls button,
        .app--explore .explore-panel,
        .app--explore .explore-shortcuts a,
        .app--explore .explore-map-legend,
        .app--map-layout:not(.app--explore) .sidebar,
        .app--map-layout:not(.app--explore) > main > header,
        .app--map-layout:not(.app--explore) .content > .card,
        .app--map-layout:not(.app--explore) .content > .hero,
        .app--map-layout:not(.app--explore) .content > .stat-card,
        .app--map-layout:not(.app--explore) .content > .panel,
        .app--map-layout:not(.app--explore) .content > .chat-shell,
        .app--map-layout:not(.app--explore) .content > .contact-card,
        .app--map-layout:not(.app--explore) .content > .page-head,
        .app--map-layout:not(.app--explore) .content > .tabs,
        .app--map-layout:not(.app--explore) .content > .search,
        .app--map-layout:not(.app--explore) .content > .lower > .card,
        .app--map-layout:not(.app--explore) .content > .grid > .card,
        .app--map-layout:not(.app--explore) .content > .stat-grid > .stat-card,
        .app--map-layout:not(.app--explore) .modal,
        .app--map-layout:not(.app--explore) .profile-dropdown-menu,
        .app--map-layout:not(.app--explore) .notif-dropdown
    )::after {
        animation: none;
    }
}

.groups-page {
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(340px, 1.55fr);
    gap: 14px;
    width: 100%;
    min-height: min(72vh, 760px);
}

.app--map-layout:not(.app--explore) > main > .content > .groups-page {
    max-height: none;
    overflow: visible;
}

.groups-list-panel,
.groups-chat-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #b24fff65;
    border-radius: 20px;
    color: var(--ink);
    background: #0c0c1bd9;
    box-shadow: 0 16px 42px #0006, 0 0 20px #a939ff20, inset 0 1px #ffffff18;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.groups-list-panel:focus-within,
.groups-list-panel:hover,
.groups-chat-panel:focus-within,
.groups-chat-panel:hover {
    border-color: #d477ff99;
    box-shadow: 0 18px 48px #0008, 0 0 24px #b739ff35, inset 0 1px #ffffff20;
}

.groups-section-heading,
.groups-chat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid #ffffff17;
}

.groups-section-heading h2,
.groups-chat-heading h2,
.groups-empty-panel h2 {
    margin-top: 5px;
    color: var(--ink);
    font-size: 17px;
}

.groups-chat-heading small {
    display: block;
    max-width: 44ch;
    margin-top: 5px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.groups-list {
    display: grid;
    gap: 6px;
    padding: 10px;
}

.groups-list-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 14px;
    gap: 11px;
    align-items: center;
    min-width: 0;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--ink);
    transition: background .16s ease, border-color .16s ease;
}

.groups-list-item:hover,
.groups-list-item:focus-visible,
.groups-list-item.is-active {
    border-color: #a855f76b;
    outline: none;
    background: #a855f723;
}

.groups-list-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #a855f761;
    border-radius: 13px;
    color: #e2a6ff;
    background: linear-gradient(145deg, #4c1c70ad, #201945ba);
    box-shadow: 0 0 20px #a855f72b;
}

.groups-list-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.groups-list-copy strong,
.groups-list-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.groups-list-copy strong {
    font-size: 12px;
}

.groups-list-copy small,
.groups-list-item > i {
    color: var(--muted);
    font-size: 9px;
}

.groups-list-copy .groups-preview {
    color: #a899bb;
}

.groups-chat-panel {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.groups-chat-heading {
    flex: 0 0 auto;
}

.groups-member-list {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 14px;
    border-bottom: 1px solid #ffffff12;
    list-style: none;
    scrollbar-width: thin;
}

.groups-member-list li {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-width: 120px;
    padding: 6px 9px;
    border: 1px solid #ffffff14;
    border-radius: 12px;
    background: #ffffff08;
}

.groups-member-avatar,
.groups-member-avatar img {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #ead9ff;
    background: #342344;
    font-size: 10px;
}

.groups-member-avatar img {
    object-fit: cover;
}

.groups-member-list li > span:last-child {
    display: grid;
    gap: 2px;
}

.groups-member-list strong {
    max-width: 100px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.groups-member-list small {
    color: var(--muted);
    font-size: 8px;
}

.groups-chat-messages {
    display: flex;
    flex: 1 1 auto;
    min-height: 190px;
    flex-direction: column;
    gap: 9px;
    overflow: auto;
    padding: 16px;
    list-style: none;
    scrollbar-width: thin;
}

.groups-chat-message {
    display: grid;
    width: fit-content;
    max-width: min(82%, 520px);
    gap: 4px;
    padding: 9px 12px;
    border: 1px solid #8b5cf650;
    border-radius: 14px 14px 14px 4px;
    background: #161327df;
}

.groups-chat-message.is-mine {
    align-self: flex-end;
    border-color: #bb4cff6b;
    border-radius: 14px 14px 4px 14px;
    background: linear-gradient(120deg, #55227a70, #311a5d7a);
}

.groups-chat-message strong {
    color: #dcaaff;
    font-size: 9px;
}

.groups-chat-message p {
    color: var(--ink);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.groups-chat-message small {
    justify-self: end;
    color: var(--muted);
    font-size: 8px;
}

.groups-chat-empty {
    margin: auto;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.groups-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #ffffff17;
}

.groups-chat-composer input,
.groups-dialog-card input,
.groups-dialog-card textarea {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid #a855f75c;
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: #090b18d9;
    font: inherit;
    font-size: 11px;
}

.groups-chat-composer input:focus,
.groups-dialog-card input:focus,
.groups-dialog-card textarea:focus {
    border-color: #4eeaff;
    box-shadow: 0 0 0 3px #4eeaff1e;
}

.groups-chat-composer button,
.groups-invite-result button {
    display: grid;
    min-width: 40px;
    min-height: 40px;
    place-items: center;
    border: 1px solid #cb66ff85;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(120deg, #8130c9, #a52ea1);
}

.groups-empty-panel {
    align-items: center;
    justify-content: center;
    padding: 28px;
    text-align: center;
}

.groups-empty-panel p,
.explore-empty-note {
    max-width: 42ch;
    margin: 8px auto 15px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.groups-empty-illustration {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid #ad58ee87;
    border-radius: 20px;
    color: #d694ff;
    background: #6f36af27;
    box-shadow: 0 0 32px #9f3ef546;
    font-size: 24px;
}

.groups-dialog[hidden],
.groups-invite-result[hidden] {
    display: none;
}

.groups-dialog {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #050611a8;
    backdrop-filter: blur(8px);
}

.groups-dialog-card {
    position: relative;
    display: grid;
    width: min(100%, 440px);
    gap: 10px;
    padding: 24px;
    border: 1px solid #bb59f699;
    border-radius: 20px;
    color: var(--ink);
    background: #0c0c1bf2;
    box-shadow: 0 20px 70px #000a, 0 0 26px #a939ff26;
    backdrop-filter: blur(24px);
}

.groups-dialog-card h2 {
    margin-bottom: 7px;
    font-size: 19px;
}

.groups-dialog-card label,
.groups-invite-result label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.groups-dialog-card label span {
    font-weight: 400;
}

.groups-dialog-card textarea {
    resize: vertical;
}

.groups-dialog-close {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #ffffff22;
    border-radius: 10px;
    color: var(--ink);
    background: #ffffff0a;
}

.groups-form-status {
    min-height: 17px;
    color: #bd96e2;
    font-size: 10px;
}

.groups-org-toggle,
.groups-org-member {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 10px;
}

.groups-org-toggle input,
.groups-org-member input {
    accent-color: #b34bff;
}

.groups-org-member-picker {
    display: grid;
    max-height: 180px;
    gap: 8px;
    overflow: auto;
    padding: 10px;
    border: 1px solid #ffffff1c;
    border-radius: 12px;
    background: #ffffff08;
}

.groups-invite-result {
    display: grid;
    gap: 7px;
    padding-top: 8px;
}

.groups-invite-result > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.groups-invite-result > a {
    color: #dcaaff;
    font-size: 10px;
}

html[data-theme="light"] .groups-list-panel,
html[data-theme="light"] .groups-chat-panel,
html[data-theme="light"] .groups-dialog-card {
    color: #28213b;
    background: #f8f7ffdc;
    box-shadow: 0 16px 42px #39205220, 0 0 20px #a939ff15, inset 0 1px #ffffffd9;
}

html[data-theme="light"] .groups-list-item {
    color: #28213b;
}

html[data-theme="light"] .groups-chat-composer input,
html[data-theme="light"] .groups-dialog-card input,
html[data-theme="light"] .groups-dialog-card textarea {
    color: #28213b;
    background: #ffffffd9;
}

html[data-theme="light"] .groups-chat-message {
    background: #eee8f8e8;
}

html[data-theme="light"] .groups-chat-message p {
    color: #28213b;
}

.sidebar nav a[href="index.php"] i,
.mobile-bottom-nav a[href="index.php"] i {
    color: var(--accent-cyan);
}

.sidebar nav a[href="my-journeys.php"] i,
.mobile-bottom-nav a[href="my-journeys.php"] i {
    color: var(--accent-lime);
}

.sidebar nav a[href="live-tracking.php"] i {
    color: var(--accent-pink);
}

.sidebar nav a[href="groups.php"] i,
.sidebar nav a[href="messages.php"] i,
.mobile-bottom-nav a[href="messages.php"] i {
    color: var(--accent-violet);
}

.sidebar nav a[href="group-travel.php"] i {
    color: var(--accent-amber);
}

.sidebar nav a[href="car-hire.php"] i,
.sidebar nav a[href="places.php"] i,
.mobile-bottom-nav a[href="places.php"] i {
    color: var(--accent-cyan);
}

.sidebar nav a[href="settings.php"] i {
    color: var(--accent-pink);
}

.app--map-layout .content .stat-grid > .stat-card:nth-child(4n + 1) {
    border-top: 2px solid var(--accent-cyan);
}

.app--map-layout .content .stat-grid > .stat-card:nth-child(4n + 2) {
    border-top: 2px solid var(--accent-violet);
}

.app--map-layout .content .stat-grid > .stat-card:nth-child(4n + 3) {
    border-top: 2px solid var(--accent-lime);
}

.app--map-layout .content .stat-grid > .stat-card:nth-child(4n) {
    border-top: 2px solid var(--accent-pink);
}

@media (min-width: 801px) {
    .app--map-layout .sidebar {
        inset: 14px auto 14px 14px;
        width: 72px;
        padding: 18px 8px 12px;
        overflow-x: visible;
        overflow-y: auto;
    }

    .app--map-layout .sidebar .brand {
        justify-content: center;
        padding: 4px 0 22px;
    }

    .app--map-layout .sidebar .brand > span:last-child,
    .app--map-layout .sidebar .nav-label,
    .app--map-layout .sidebar .account > div {
        display: none;
    }

    .app--map-layout .sidebar nav {
        gap: 7px;
    }

    .app--map-layout .sidebar nav a,
    .app--map-layout .sidebar .bottom > a {
        position: relative;
        justify-content: center;
        width: 54px;
        min-height: 48px;
        margin-inline: auto;
        padding: 0;
        overflow: visible;
        font-size: 0;
    }

    .app--map-layout .sidebar nav a i,
    .app--map-layout .sidebar .bottom > a i {
        width: auto;
        font-size: 17px;
    }

    .app--map-layout .sidebar nav a em {
        position: absolute;
        top: 2px;
        right: 1px;
        margin: 0;
        padding: 2px 5px;
        font-size: 8px;
    }

    .app--map-layout .sidebar nav a[title]::after,
    .app--map-layout .sidebar .bottom > a[title]::after {
        position: absolute;
        z-index: 20;
        top: 50%;
        left: calc(100% + 10px);
        padding: 7px 10px;
        border: 1px solid #b24fff80;
        border-radius: 8px;
        color: var(--ink);
        background: #0c0c1bf2;
        box-shadow: 0 8px 20px #0006;
        content: attr(title);
        font-size: 11px;
        font-weight: 650;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) translateX(-4px);
        transition: opacity .14s ease, transform .14s ease;
        white-space: nowrap;
    }

    .app--map-layout .sidebar nav a:hover::after,
    .app--map-layout .sidebar nav a:focus-visible::after,
    .app--map-layout .sidebar .bottom > a:hover::after,
    .app--map-layout .sidebar .bottom > a:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%);
    }

    .app--map-layout .sidebar .account {
        justify-content: center;
        padding: 12px 0 0;
    }

    .app--map-layout:not(.app--explore) > main {
        margin-left: 88px;
    }

    .app--map-layout:not(.app--explore) > main > .content {
        left: 88px;
    }
}

.app--journeys > main > header,
.app--journeys > main > .content > .page-head {
    display: none !important;
}

.app--journeys > main > .content > .journey-filter-bar {
    display: none !important;
}

.app--journeys > main > .content > .journey-picker-panel {
    display: none !important;
}

.app--journeys.journey-picker-open > main > .content > .journey-picker-panel {
    position: fixed;
    z-index: 27;
    top: 124px;
    bottom: 20px;
    left: 92px;
    display: block !important;
    width: min(390px, calc(100vw - 116px));
    max-height: none;
    overflow: auto;
    padding: 10px;
    border: 1px solid #b24fff70;
    border-radius: 16px;
    background: #0c0c1bf2;
    box-shadow: 0 16px 48px #0008, 0 0 24px #b739ff20;
    pointer-events: auto;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.app--journeys.journey-picker-open > main > .content > .journey-filter-bar {
    position: fixed;
    z-index: 28;
    top: 78px;
    left: 92px;
    display: flex !important;
    max-width: min(390px, calc(100vw - 116px));
    padding: 7px;
    border: 1px solid #b24fff70;
    border-radius: 13px;
    background: #0c0c1bf2;
    pointer-events: auto;
}

.app--journeys.journey-picker-open .journey-picker-panel .journey-list {
    display: block !important;
    padding: 0;
}

.app--journeys.journey-picker-open .journey-picker-panel .journey-row {
    display: flex !important;
    margin: 5px 0;
    padding: 11px;
}

.app--journeys .journey-map-detail {
    top: 148px;
    right: 18px;
    bottom: auto;
    width: min(370px, calc(100vw - 110px));
    max-height: calc(100vh - 170px);
    pointer-events: auto;
}

.journey-map-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

@media (max-width: 800px) {
    .app--journeys > main > .content {
        display: none !important;
    }

    .app--journeys .journey-map-detail {
        top: auto;
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        max-height: min(52dvh, 410px);
    }

    .app--journeys.journey-picker-open > main > .content > .journey-picker-panel {
        top: 10px;
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        max-height: none;
    }

    .app--journeys.journey-picker-open > main > .content {
        display: block !important;
        position: static;
        inset: auto;
        overflow: visible;
        pointer-events: none;
    }

    .app--journeys.journey-picker-open > main > .content > .journey-filter-bar {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

.app--explore .notif-bell i {
    color: var(--accent-pink);
}

.sidebar nav a.active {
    background: linear-gradient(100deg, #a855f72b, #27d7b114);
    box-shadow: inset 2px 0 var(--accent-violet), 0 5px 18px #0003;
}

.explore-trip-panel {
    border-left: 2px solid var(--accent-lime);
}

.explore-chat-panel {
    border-left: 2px solid var(--accent-violet);
}

.explore-recent-panel {
    border-left: 2px solid var(--accent-pink);
}

.explore-trip-panel .explore-eyebrow,
.explore-trip-panel .explore-trip-stats i {
    color: var(--accent-cyan);
}

.explore-chat-panel .explore-eyebrow,
.explore-chat-panel .explore-text-link {
    color: var(--accent-violet);
}

.explore-recent-panel .explore-eyebrow,
.explore-recent-trip > i {
    color: var(--accent-pink);
}

.explore-shortcuts a {
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.explore-shortcuts a:nth-child(1) i {
    color: var(--accent-lime);
    background: #0c4039;
}

.explore-shortcuts a:nth-child(2) i {
    color: var(--accent-violet);
    background: #2a2051;
}

.explore-shortcuts a:nth-child(3) i {
    color: var(--accent-cyan);
    background: #123849;
}

.explore-shortcuts a:nth-child(4) i {
    color: var(--accent-pink);
    background: #4d1c34;
}

.explore-shortcuts a:nth-child(1):hover {
    border-color: var(--accent-lime);
    box-shadow: 0 8px 24px #0005, 0 0 18px #49e1aa30;
}

.explore-shortcuts a:nth-child(2):hover {
    border-color: var(--accent-violet);
    box-shadow: 0 8px 24px #0005, 0 0 18px #be7bff30;
}

.explore-shortcuts a:nth-child(3):hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px #0005, 0 0 18px #54e7ff30;
}

.explore-shortcuts a:nth-child(4):hover {
    border-color: var(--accent-pink);
    box-shadow: 0 8px 24px #0005, 0 0 18px #ff4fa330;
}

.dashboard-planner-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-planner-status.is-loading::before {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 2px solid #be7bff55;
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: dashboard-route-spinner .75s linear infinite;
    content: "";
}

.dashboard-planner-status.is-error::before {
    color: var(--accent-pink);
    font-weight: 800;
    content: "!";
}

.dashboard-planner .btn-ghost {
    border-color: #ffd16666;
    color: var(--accent-amber);
    background: #4a351b70;
}

.dashboard-planner .btn-ghost:hover {
    border-color: var(--accent-amber);
    background: #59401e;
}

.dashboard-planner #retryDashboardRoute {
    border-color: #ff4fa370;
    color: var(--accent-pink);
    background: #4d1c3470;
}

.dashboard-planner #retryDashboardRoute:hover {
    border-color: var(--accent-pink);
    background: #5b203d;
}

html[data-theme="light"] .sidebar nav a[href="index.php"] i,
html[data-theme="light"] .mobile-bottom-nav a[href="index.php"] i,
html[data-theme="light"] .sidebar nav a[href="places.php"] i,
html[data-theme="light"] .mobile-bottom-nav a[href="places.php"] i {
    color: #087e9b;
}

html[data-theme="light"] .sidebar nav a[href="my-journeys.php"] i,
html[data-theme="light"] .mobile-bottom-nav a[href="my-journeys.php"] i {
    color: #078366;
}

html[data-theme="light"] .sidebar nav a[href="live-tracking.php"] i,
html[data-theme="light"] .sidebar nav a[href="settings.php"] i {
    color: #bd326e;
}

html[data-theme="light"] .sidebar nav a[href="groups.php"] i,
html[data-theme="light"] .sidebar nav a[href="messages.php"] i,
html[data-theme="light"] .mobile-bottom-nav a[href="messages.php"] i {
    color: #7041bb;
}

html[data-theme="light"] .sidebar nav a[href="group-travel.php"] i {
    color: #9a6700;
}

html[data-theme="light"] .sidebar nav a[href="car-hire.php"] i {
    color: #087e9b;
}

html[data-theme="light"] .explore-shortcuts a:nth-child(1) i {
    color: #078366;
    background: #ddf3ec;
}

html[data-theme="light"] .explore-shortcuts a:nth-child(2) i {
    color: #7041bb;
    background: #eee7ff;
}

html[data-theme="light"] .explore-shortcuts a:nth-child(3) i {
    color: #087e9b;
    background: #ddf4fa;
}

html[data-theme="light"] .explore-shortcuts a:nth-child(4) i {
    color: #bd326e;
    background: #ffebf2;
}

@keyframes dashboard-route-spinner {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-planner-status.is-loading::before {
        animation-duration: 2s;
    }
}

@media (max-width: 800px) {
    .groups-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, .7fr) minmax(0, 1.3fr);
        height: calc(100dvh - 222px - env(safe-area-inset-bottom));
        min-height: 0;
        max-height: 100%;
        gap: 8px;
        overflow: hidden;
    }

    .groups-list-panel {
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

    .groups-chat-panel {
        min-height: 0;
    }

    .groups-empty-panel {
        min-height: 0;
    }

    .groups-chat-heading,
    .groups-section-heading {
        padding: 13px;
    }

    .groups-chat-messages {
        min-height: 0;
    }
}

:root {
    --p: #10B981;
    --pd: #D946EF;
    --ps: #1C2541;
    --gold: #22D3EE;
    --ink: #FFFFFF;
    --muted: #94A3B8;
    --line: #1E293B;
    --bg: #090D16;
    --panel: #111827;
    --panel-raised: #172235;
    --danger: #EF4444;
    --focus: #22D3EE;
    --accent-pink: #D946EF;
    --accent-violet: #D946EF;
    --accent-cyan: #22D3EE;
    --accent-lime: #10B981;
    --accent-amber: #F97316;
    --glass-surface: #111827d9;
    --glass-surface-strong: #111827f2;
    --glass-control: #0F172Ad9;
    --glass-border: #1E293Bdb;
    --glass-shadow: 0 18px 52px #0007, 0 0 24px #10B98118, inset 0 1px #ffffff18;
}

html[data-theme="light"] {
    color-scheme: light;
    --p: #059669;
    --pd: #C026D3;
    --ps: #F0FDF4;
    --gold: #0891B2;
    --ink: #0F172A;
    --muted: #64748B;
    --line: #E2E8F0;
    --bg: #F1F5F9;
    --panel: #FFFFFF;
    --panel-raised: #F8FAFC;
    --danger: #DC2626;
    --focus: #0891B2;
    --accent-pink: #C026D3;
    --accent-violet: #C026D3;
    --accent-cyan: #0891B2;
    --accent-lime: #059669;
    --accent-amber: #EA580C;
    --glass-surface: #FFFFFFdc;
    --glass-surface-strong: #FFFFFFf2;
    --glass-control: #F8FAFCdc;
    --glass-border: #E2E8F0;
    --glass-shadow: 0 18px 46px #0F172A18, 0 0 22px #05966912, inset 0 1px #ffffffeb;
}

html[data-theme] body {
    color: var(--ink);
    background: var(--bg);
}

html[data-theme] .sidebar {
    color: var(--ink);
    background: var(--glass-surface-strong);
    border-right: 1px solid var(--glass-border);
}

html[data-theme] .sidebar nav a.active,
html[data-theme] .mobile-bottom-nav a.active {
    color: var(--ink);
    background: var(--ps);
    box-shadow: inset 3px 0 var(--p);
}

html[data-theme] .sidebar nav a.active i,
html[data-theme] .mobile-bottom-nav a.active i {
    color: var(--p);
}

html[data-theme="light"] .sidebar nav a.active,
html[data-theme="light"] .mobile-bottom-nav a.active {
    box-shadow: inset 3px 0 var(--p);
}

html[data-theme="dark"] .sos-panel {
    color: #EF4444;
    background: #991B1B;
    border-color: #EF4444;
}

html[data-theme="light"] .sos-panel {
    color: #DC2626;
    background: #FEE2E2;
    border-color: #FECACA;
}

#appMapBackground {
    display: none;
}

body.map-background-visible #appMapBackground {
    display: block;
}

body:not(.map-background-visible) .app-map-controls {
    display: none;
}

.app-map-panels-toggle {
    position: fixed;
    z-index: 75;
    top: 18px;
    left: 88px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    color: var(--ink);
    background: var(--glass-surface-strong);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.app-map-panels-toggle[hidden] {
    display: none;
}

.app-map-panels-toggle:hover,
.app-map-panels-toggle:focus-visible {
    outline: 2px solid var(--p);
    outline-offset: 2px;
}

.group-hub-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    background: var(--glass-surface);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.group-hub-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.group-hub-tabs a.is-active {
    color: var(--ink);
    background: var(--ps);
    box-shadow: inset 0 -2px var(--p);
}

.group-hub-tabs a.is-active i {
    color: var(--p);
}

@media (max-width: 800px) {
    .app-map-panels-toggle {
        top: 76px;
        left: 14px;
    }

    .group-hub-tabs {
        width: 100%;
    }

    .group-hub-tabs a {
        flex: 1;
        justify-content: center;
    }
}

:root {
    --glass-surface: #0c0c1bc2;
    --glass-surface-strong: #0c0c1be8;
    --glass-control: #111020a8;
    --glass-border: #b24fff80;
    --glass-shadow: 0 18px 52px #0007, 0 0 24px #a939ff20, inset 0 1px #ffffff20;
    --glass-blur: blur(28px) saturate(145%);
}

html[data-theme="light"] {
    --glass-surface: #f8f7ffbd;
    --glass-surface-strong: #ffffffdf;
    --glass-control: #ffffffa8;
    --glass-border: #a74bdc80;
    --glass-shadow: 0 18px 46px #39205224, 0 0 22px #a74bdc18, inset 0 1px #ffffffeb;
}

html[data-theme] :is(.app--map-layout, .app--explore) .content > :is(
    .card,
    .hero,
    .stat-card,
    .panel,
    .chat-shell,
    .contact-card,
    .page-head,
    .tabs,
    .search,
    .groups-list-panel,
    .groups-chat-panel,
    .rental-page-heading,
    .rental-bookings,
    .fleet-bookings,
    .fleet-vehicle-list
),
html[data-theme] :is(.app--map-layout, .app--explore) .content > .lower > .card,
html[data-theme] :is(.app--map-layout, .app--explore) .content > .grid > .card,
html[data-theme] :is(.app--map-layout, .app--explore) .content > .stat-grid > .stat-card,
html[data-theme] :is(.app--map-layout, .app--explore) .modal,
html[data-theme] :is(.app--map-layout, .app--explore) .journey-map-detail,
html[data-theme] :is(.app--map-layout, .app--explore) .explore-panel,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-dialog-card,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-list-panel,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-chat-panel,
html[data-theme] :is(.app--map-layout, .app--explore) .rental-vehicle-card,
html[data-theme] :is(.app--map-layout, .app--explore) .fleet-vehicle,
html[data-theme] :is(.app--map-layout, .app--explore) .notif-dropdown,
html[data-theme] :is(.app--map-layout, .app--explore) .profile-dropdown-menu {
    border-color: var(--glass-border);
    background-color: var(--glass-surface);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    .sidebar,
    .app-header,
   .app-map-background-status
) ,
html[data-theme] :is(.app--map-layout, .app--explore) > main > header {
    border-color: var(--glass-border);
    color: var(--ink);
    background: var(--glass-surface);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

html[data-theme] :is(.app--map-layout, .app--explore) .dashboard-planner,
html[data-theme] :is(.app--map-layout, .app--explore) .explore-chat-composer,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-chat-composer,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-dialog-card input,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-dialog-card select,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-dialog-card textarea,
html[data-theme] :is(.app--map-layout, .app--explore) .form-field input,
html[data-theme] :is(.app--map-layout, .app--explore) .form-field select,
html[data-theme] :is(.app--map-layout, .app--explore) .form-field textarea,
html[data-theme] :is(.app--map-layout, .app--explore) .chat-search input,
html[data-theme] :is(.app--map-layout, .app--explore) .chat-input input,
html[data-theme] :is(.app--map-layout, .app--explore) .groups-chat-composer input,
html[data-theme] :is(.app--map-layout, .app--explore) .rental-vehicle-card input,
html[data-theme] :is(.app--map-layout, .app--explore) .rental-vehicle-card select,
html[data-theme] :is(.app--map-layout, .app--explore) .rental-vehicle-card textarea {
    border-color: var(--glass-border);
    color: var(--ink);
    background-color: var(--glass-control);
    box-shadow: inset 0 1px #ffffff12, 0 8px 24px #0002;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    .dashboard-planner,
    .explore-chat-composer,
    .groups-chat-composer,
    .form-field input,
    .form-field select,
    .form-field textarea,
    .chat-search input,
    .chat-input input,
    .groups-dialog-card input,
    .groups-dialog-card select,
    .groups-dialog-card textarea,
    .rental-vehicle-card input,
    .rental-vehicle-card select,
    .rental-vehicle-card textarea
):focus,
html[data-theme] :is(.app--map-layout, .app--explore) :is(
    .form-field input,
    .form-field select,
    .form-field textarea,
    .chat-search input,
    .chat-input input,
    .groups-dialog-card input,
    .groups-dialog-card select,
    .groups-dialog-card textarea
):focus-visible {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px #54e7ff28, 0 0 22px #b24fff24, inset 0 1px #ffffff1a;
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
    select,
    textarea
) {
    border-color: var(--glass-border);
    color: var(--ink);
    background-color: var(--glass-control);
    box-shadow: inset 0 1px #ffffff12, 0 8px 24px #0002;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="light"] :is(.app--map-layout, .app--explore) select option {
    color: #221b35;
    background: #f8f7ff;
}

html[data-theme="dark"] :is(.app--map-layout, .app--explore) select option {
    color: #eef5ff;
    background: #0c0c1b;
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    [class~="panel"],
    [class$="-panel"],
    [class$="-card"],
    .card,
    .stat-card,
    .contact-card,
    .journey-row,
    .journey-map-detail,
    .modal,
    .notif-dropdown,
    .profile-dropdown-menu,
    .page-head,
    .tabs,
    .map-status,
    .legend,
    .eta-chip,
    .explore-map-heading,
    .explore-map-modes,
    .explore-map-legend
) {
    border-color: var(--glass-border);
    background-color: var(--glass-surface);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

html[data-theme] :is(.app--map-layout, .app--explore) .app-map-controls button {
    border-color: var(--glass-border);
    color: var(--ink);
    background-color: var(--glass-surface);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

@media (min-width: 801px) {
    .app--map-layout .sidebar,
    .app--explore .sidebar {
        width: 72px;
        padding: 18px 8px 12px;
    }

    .app--explore .sidebar .brand {
        justify-content: center;
        padding: 4px 0 22px;
    }

    .app--explore .app-header {
        left: 102px;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .app--explore .app-search-row {
        left: 98px;
        width: min(560px, calc(100vw - 124px));
    }

    .app--explore .explore-map-heading {
        left: 98px;
        max-width: min(430px, calc(100vw - 124px));
    }

    .explore-map .maplibregl-ctrl-bottom-left {
        left: 88px;
    }

    .explore-shortcuts {
        left: 98px;
    }

    .app--journeys .journey-map-detail {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

.app--explore .explore-shortcuts,
.app--explore .explore-trip-panel:not(:has(.explore-trip-live-stats)) {
    display: none;
}

.map-focus-mode .app--journeys .journey-map-detail {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > *:not(:has(.is-page-panel-selected)):not(.is-page-panel-selected) {
    display: none !important;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > :is(.grid, .lower, .stat-grid):has(.is-page-panel-selected) > *:not(:has(.is-page-panel-selected)):not(.is-page-panel-selected) {
    display: none !important;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content:has(.is-page-panel-selected) {
    display: block;
    overflow: visible;
    pointer-events: none;
}

.map-focus-mode.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content:has(.is-page-panel-selected) {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > .is-page-panel-selected,
.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > :is(.grid, .lower, .stat-grid) > .is-page-panel-selected {
    position: fixed;
    z-index: 24;
    top: 148px;
    right: 18px;
    left: auto;
    width: min(430px, calc(100vw - 116px));
    max-height: calc(100vh - 170px);
    overflow: auto;
    pointer-events: auto;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > :is(.grid, .lower, .stat-grid):has(.is-page-panel-selected) {
    display: contents;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > header,
.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) .sidebar,
.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > footer {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > .is-page-panel-selected,
.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > :is(.grid, .lower, .stat-grid) > .is-page-panel-selected {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) .mobile-bottom-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 800px) {
    .page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > .is-page-panel-selected,
    .page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) > main > .content > :is(.grid, .lower, .stat-grid) > .is-page-panel-selected {
        top: auto;
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        max-height: min(62dvh, 520px);
    }

    .page-panel-focus .app--map-layout:not(.app--explore):not(.app--journeys) .mobile-bottom-nav {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    .sidebar,
    .content > [class~="panel"],
    .content > [class$="-panel"],
    .content > [class$="-card"],
    .content > .card,
    .content > .hero,
    .content > .stat-card,
    .content > .page-head,
    .content > .tabs,
    .content > .lower > .card,
    .content > .grid > .card,
    .content > .stat-grid > .stat-card,
    .modal,
    .journey-map-detail,
    .journey-row,
    .explore-panel,
    .groups-dialog-card,
    .groups-list-panel,
    .groups-chat-panel,
    .rental-vehicle-card,
    .fleet-vehicle,
    .notif-dropdown,
    .profile-dropdown-menu
),
html[data-theme] :is(.app--map-layout, .app--explore) > main > header,
html[data-theme] .app-map-background-status {
    border-color: var(--glass-border) !important;
    color: var(--ink) !important;
    background: var(--glass-surface) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
    select,
    textarea,
    .dashboard-planner,
    .explore-chat-composer,
    .groups-chat-composer
) {
    border-color: var(--glass-border) !important;
    color: var(--ink) !important;
    background: var(--glass-control) !important;
    box-shadow: inset 0 1px #ffffff12, 0 8px 24px #0002 !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

html[data-theme] :is(.app--map-layout, .app--explore) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
    select,
    textarea
):is(:focus, :focus-visible) {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 0 3px #54e7ff28, 0 0 22px #b24fff24, inset 0 1px #ffffff1a !important;
}

html[data-theme] :is(.app--map-layout, .app--explore) .app-map-controls button {
    border-color: var(--glass-border) !important;
    color: var(--ink) !important;
    background: var(--glass-surface) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
}

@media (min-width: 801px) {
    .app--explore > main > .app-header {
        right: 14px;
        left: auto;
        width: max-content;
        max-width: calc(100vw - 120px);
        min-height: 0;
        height: auto;
        flex: 0 0 auto;
        padding: 0;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html[data-theme] .app--explore > main > header.app-header:not(.visually-hidden) {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .app--explore > main > .app-header .head-actions {
        pointer-events: auto;
    }

    .app--explore:has(> .sidebar:is(:hover, :focus-within)) .app-search-row,
    .app--explore:has(> .sidebar:is(:hover, :focus-within)) .explore-map-heading,
    .app--explore:has(> .sidebar:is(:hover, :focus-within)) .explore-shortcuts {
        left: 274px;
    }

    .app--explore:has(> .sidebar:is(:hover, :focus-within)) .app-search-row {
        width: min(560px, calc(100vw - 300px));
    }

    .app--map-layout:not(.app--explore):has(> .sidebar:is(:hover, :focus-within)) > main {
        margin-left: 264px;
    }

    .app--map-layout:not(.app--explore):has(> .sidebar:is(:hover, :focus-within)) > main > .content {
        left: 264px;
    }
}

@media (min-width: 801px) {
    :is(.app--map-layout, .app--explore) .sidebar {
        transition: width .2s ease, padding .2s ease;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) {
        z-index: 40;
        width: 244px;
        padding: 18px 13px 12px;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .brand {
        justify-content: flex-start;
        gap: 12px;
        padding: 4px 8px 22px;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .brand > span:last-child,
    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .nav-label,
    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .account > div {
        display: block;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) nav a,
    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .bottom > a {
        justify-content: flex-start;
        width: 100%;
        margin-inline: 0;
        padding: 0 12px;
        font-size: 12px;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) nav a i,
    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .bottom > a i {
        width: 20px;
        font-size: 15px;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .account {
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 8px 0;
    }

    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) nav a::after,
    :is(.app--map-layout, .app--explore) .sidebar:is(:hover, :focus-within) .bottom > a::after {
        display: none;
    }
}

@media (max-width: 800px) {
    .app--map-layout:not(.app--explore) > main {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    body:has(.app--map-layout:not(.app--explore)) #appMapControls {
        display: none;
    }

    .app--map-layout:not(.app--explore) > main > header {
        position: sticky;
        top: 0;
        right: auto;
        left: auto;
        width: auto;
        max-width: none;
        min-height: 69px;
        margin: 0 12px;
        padding: 11px 14px;
    }

    .app--map-layout:not(.app--explore) > main > header > div:nth-child(2) {
        position: static;
        width: auto;
        height: auto;
        min-width: 0;
        flex: 1;
        overflow: visible;
        clip: auto;
        white-space: normal;
        clip-path: none;
    }

    .app--map-layout:not(.app--explore) > main > header h1 {
        max-width: 42vw;
        margin: 0;
        overflow-wrap: anywhere;
        font-size: 15px;
    }

    .app--map-layout:not(.app--explore) > main > .content {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        align-content: stretch;
        gap: 14px;
        width: 100%;
        max-width: none;
        min-height: 0;
        overflow: visible;
        padding: 17px 14px 22px;
    }

    .app--map-layout:not(.app--explore) > main > .content > * {
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    .app--map-layout:not(.app--explore) > main > .content > .stat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

html[data-theme] .sidebar {
    background: var(--glass-surface-strong) !important;
    border-right: 1px solid var(--glass-border);
}

html[data-theme] .sidebar nav a.active,
html[data-theme] .mobile-bottom-nav a.active {
    color: var(--ink) !important;
    background: var(--ps) !important;
    box-shadow: inset 3px 0 var(--p) !important;
}

html[data-theme] .sidebar nav a.active i,
html[data-theme] .mobile-bottom-nav a.active i {
    color: var(--p) !important;
}

html[data-theme="dark"] .sos-panel {
    color: #EF4444 !important;
    background: #991B1B !important;
    border-color: #EF4444 !important;
}

html[data-theme="light"] .sos-panel {
    color: #DC2626 !important;
    background: #FEE2E2 !important;
    border-color: #FECACA !important;
}

body.map-background-visible #appMapControls {
    display: flex !important;
}

:root {
    --glass-surface: #111827d9;
    --glass-surface-strong: #111827f2;
    --glass-control: #0F172Ad9;
    --glass-border: #1E293Bdb;
    --glass-shadow: 0 18px 52px #0007, 0 0 24px #10B98118, inset 0 1px #ffffff18;
}

html[data-theme="light"] {
    --glass-surface: #FFFFFFdc;
    --glass-surface-strong: #FFFFFFf2;
    --glass-control: #F8FAFCdc;
    --glass-border: #E2E8F0;
    --glass-shadow: 0 18px 46px #0F172A18, 0 0 22px #05966912, inset 0 1px #ffffffeb;
}

html[data-theme="dark"] .sidebar {
    background: #0B132B !important;
}

html[data-theme="light"] .sidebar {
    background: #FFFFFF !important;
}