@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --red: #e65755;
    --red-dark: #c94142;
    --red-soft: #f8dddd;
    --ink: #17181d;
    --muted: #797b83;
    --line: #e8e4e2;
    --paper: #fcfbfa;
    --cream: #f5f1ef;
    --white: #fff;
    --blue: #7999b5;
    --green: #34a477;
    --orange: #d88d4d;
    --shadow: 0 16px 42px rgba(41, 28, 28, .08);
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink)
}

button,
input,
select {
    font: inherit
}

button,
a {
    cursor: pointer
}

button {
    border: 0
}

.view {
    display: none
}

.view.is-active {
    display: flex
}

.splash-view {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    padding: 9vh 12vw;
    background: linear-gradient(132deg, #de4e4e 0%, #ea7170 48%, #f2c5c3 100%);
    color: white
}

.splash-view:before,
.splash-view:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09)
}

.splash-view:before {
    width: 80vw;
    height: 80vw;
    right: -36vw;
    top: -30vw
}

.splash-view:after {
    width: 35vw;
    height: 35vw;
    left: -22vw;
    bottom: -21vw
}

.splash-copy {
    position: relative;
    z-index: 1;
    max-width: 530px
}

.brand-mark {
    height: 42px;
    width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--red);
    color: #fff;
    box-shadow: 0 7px 14px rgba(187, 46, 48, .18)
}

.brand-mark-large {
    height: 78px;
    width: 78px;
    border-radius: 24px;
    background: #fff;
    color: var(--red);
    font-size: 31px;
    box-shadow: 0 15px 35px rgba(86, 20, 20, .17)
}

.brand-flame {
    display: inline-block;
    transform: rotate(-10deg)
}

.splash-copy h1 {
    font: 700 clamp(4rem, 8vw, 7rem)/.85 'Space Grotesk', sans-serif;
    letter-spacing: -.08em;
    margin: 34px 0 22px
}

.splash-copy h1 em,
.brand-lockup em,
.sidebar-brand em {
    font-style: normal;
    color: #fff
}

.splash-copy>p:not(.eyebrow) {
    font-size: 18px;
    max-width: 350px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase
}

.eyebrow.light {
    color: rgba(255, 255, 255, .74)
}

.splash-footer {
    position: absolute;
    z-index: 1;
    bottom: 33px;
    left: 12vw;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    letter-spacing: .05em
}

.button {
    align-items: center;
    border-radius: 12px;
    display: inline-flex;
    gap: 12px;
    justify-content: center;
    padding: 12px 18px;
    font-weight: 700;
    transition: .2s ease;
    white-space: nowrap
}

.button:hover {
    transform: translateY(-1px);
    filter: brightness(.98)
}

.button span {
    font-size: 18px;
    line-height: 0
}

.button-light {
    background: #fff;
    color: var(--red);
    margin-top: 30px;
    box-shadow: 0 8px 20px rgba(121, 28, 28, .2)
}

.button-large {
    padding: 17px 25px;
    border-radius: 14px
}

.splash-art {
    position: relative;
    z-index: 1;
    width: min(45vw, 590px);
    height: 510px;
    filter: drop-shadow(0 26px 28px rgba(75, 16, 16, .19))
}

.splash-orbit {
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    position: absolute
}

.orbit-one {
    height: 400px;
    width: 400px;
    left: 80px;
    top: 48px
}

.orbit-two {
    height: 280px;
    width: 280px;
    left: 140px;
    top: 108px;
    border-color: rgba(255, 255, 255, .25)
}

.splash-wheel {
    border: 18px solid #15171b;
    background: #b4b5b6;
    border-radius: 50%;
    height: 115px;
    position: absolute;
    width: 115px;
    top: 290px;
    box-shadow: inset 0 0 0 12px #d7d7d7
}

.wheel-back {
    left: 130px
}

.wheel-front {
    left: 345px
}

.splash-bike {
    position: absolute;
    left: 190px;
    top: 212px;
    width: 220px;
    height: 160px
}

.splash-bike:before,
.splash-bike:after {
    content: "";
    position: absolute;
    background: #17181d;
    height: 14px;
    border-radius: 8px;
    transform-origin: left center
}

.splash-bike:before {
    width: 130px;
    top: 83px;
    left: 53px;
    transform: rotate(-26deg)
}

.splash-bike:after {
    width: 105px;
    top: 88px;
    left: 90px;
    transform: rotate(26deg)
}

.splash-bike span {
    position: absolute;
    width: 15px;
    height: 90px;
    background: #17181d;
    left: 102px;
    top: 35px;
    transform: rotate(23deg);
    border-radius: 9px
}

.splash-bike i {
    position: absolute;
    width: 95px;
    height: 17px;
    background: var(--red);
    left: 66px;
    top: 57px;
    transform: rotate(-17deg);
    border-radius: 10px
}

.splash-bike b {
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 10px solid #17181d;
    left: 83px;
    top: 0
}

.auth-view {
    min-height: 100vh;
    background: var(--white)
}

.auth-visual {
    width: 48%;
    min-height: 100vh;
    padding: 54px clamp(45px, 8vw, 130px);
    position: relative;
    overflow: hidden;
    background: linear-gradient(148deg, #da4c4d 0%, #e87674 55%, #f7d9d8 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.auth-visual:before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    right: -360px;
    bottom: -270px
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff
}

.brand-lockup strong {
    font: 700 23px 'Space Grotesk', sans-serif;
    letter-spacing: -.06em
}

.brand-lockup .brand-mark {
    background: #fff;
    color: var(--red)
}

.auth-visual-copy {
    position: relative;
    z-index: 1;
    max-width: 470px
}

.auth-visual-copy h1 {
    font: 700 clamp(3rem, 5vw, 5rem)/.98 'Space Grotesk', sans-serif;
    letter-spacing: -.07em;
    margin: 14px 0 23px
}

.auth-visual-copy h1 em {
    font-style: normal;
    color: #ffd9d6
}

.auth-visual-copy>p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    max-width: 340px
}

.auth-road {
    height: 100px;
    position: relative;
    opacity: .38
}

.auth-road:before {
    content: "";
    position: absolute;
    inset: 0 -100px;
    background: repeating-linear-gradient(90deg, transparent 0 65px, rgba(255, 255, 255, .7) 65px 90px, transparent 90px 140px);
    transform: skewY(-22deg);
    height: 2px;
    top: 50%
}

.auth-road span {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    width: 12px;
    height: 12px
}

.auth-road span:nth-child(1) {
    left: 20%;
    top: 58%
}

.auth-road span:nth-child(2) {
    left: 58%;
    top: 15%
}

.auth-road span:nth-child(3) {
    left: 84%;
    top: 70%
}

.auth-panel {
    width: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px
}

.auth-panel-inner {
    width: min(100%, 440px)
}

.mobile-brand {
    display: none
}

.auth-card {
    display: none;
    animation: fade-in .25s ease
}

.auth-card-active {
    display: block
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

h2,
h3,
h1 {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -.055em
}

h2 {
    font-size: 32px;
    margin: 4px 0 6px
}

h3 {
    margin: 0;
    font-size: 18px
}

.auth-card .muted {
    margin: 0 0 29px
}

.muted {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55
}

.text-button {
    background: none;
    color: var(--red-dark);
    font-weight: 700;
    padding: 0
}

.align-right {
    align-self: flex-end;
    font-size: 12px;
    margin-top: -11px
}

.stack-form {
    display: flex;
    flex-direction: column;
    gap: 17px
}

.stack-form label,
.settings-form label {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700
}

.stack-form input,
.settings-form input,
.search-field input {
    background: #fff;
    border: 1px solid #d9d5d2;
    border-radius: 11px;
    color: var(--ink);
    display: block;
    outline: none;
    margin-top: 8px;
    padding: 13px 14px;
    width: 100%;
    transition: .2s
}

.stack-form input:focus,
.settings-form input:focus,
.search-field input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(230, 87, 85, .1)
}

.stack-form input::placeholder,
.settings-form input::placeholder,
.search-field input::placeholder {
    color: #b5b1ae
}

.password-field {
    position: relative
}

.password-field input {
    padding-right: 42px
}

.password-toggle {
    background: transparent;
    position: absolute;
    right: 9px;
    top: 7px;
    color: #aaa;
    padding: 9px;
    font-size: 14px
}

.button-primary {
    background: var(--red);
    color: #fff;
    box-shadow: 0 7px 16px rgba(210, 65, 65, .18)
}

.button-danger {
    background: #ac2629;
    color: #fff
}

.button-full {
    width: 100%;
    margin-top: 7px
}

.divider {
    align-items: center;
    color: #bbb;
    display: flex;
    gap: 12px;
    font-size: 11px;
    margin: 29px 0 19px
}

.divider:before,
.divider:after {
    content: "";
    background: #ece8e6;
    height: 1px;
    flex: 1
}

.divider span {
    white-space: nowrap
}

.social-row {
    display: flex;
    gap: 11px;
    justify-content: center
}

.social-button {
    background: #1b1d21;
    border-radius: 50%;
    color: #fff;
    font: bold 24px Arial;
    height: 42px;
    width: 42px
}

.social-button.google {
    background: #f7f5f4;
    color: #1b1d21
}

.back-button {
    background: none;
    color: var(--red-dark);
    font-weight: 700;
    margin-bottom: 38px;
    padding: 0
}

.back-button span {
    color: var(--muted);
    font-size: 12px;
    margin-left: 5px
}

.code-input {
    text-align: center;
    letter-spacing: .5em;
    font-size: 20px
}

.product-view {
    min-height: 100vh;
    background: var(--cream)
}

.sidebar {
    background: #1d1f24;
    color: #f7f5f4;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 30px 22px 20px;
    width: 262px;
    flex: none
}

.sidebar-brand {
    align-items: center;
    display: flex;
    gap: 11px;
    font: 700 22px 'Space Grotesk', sans-serif;
    letter-spacing: -.06em;
    padding: 0 12px
}

.sidebar-brand .brand-mark {
    height: 38px;
    width: 38px;
    border-radius: 12px
}

.topbar-user strong,
.topbar-user small {
    display: block
}

.avatar {
    align-items: center;
    background: #f3cfcd;
    border-radius: 50%;
    color: #a1383b;
    display: inline-flex;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    height: 39px;
    justify-content: center;
    width: 39px
}

.avatar-image,
.avatar-profile {
    background: var(--red);
    color: #fff
}

.avatar-small {
    height: 31px;
    width: 31px;
    font-size: 10px
}

.avatar-large {
    height: 59px;
    width: 59px;
    font-size: 15px
}

.peach {
    background: #efc1b7;
    color: #9d4a40
}

.blue-avatar {
    background: #cbdce8;
    color: #507b9a
}

.lilac {
    background: #dfd0e6;
    color: #835d91
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.nav-label {
    color: #777a83;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 12px 9px;
    text-transform: uppercase
}

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

.nav-item {
    align-items: center;
    background: transparent;
    border-radius: 11px;
    color: #a9abb1;
    display: flex;
    gap: 13px;
    padding: 12px;
    position: relative;
    text-align: left;
    width: 100%;
    transition: .2s
}

.nav-item:hover {
    background: #292b31;
    color: #fff
}

.nav-item.is-active {
    background: var(--red);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    color: #fff
}

.nav-icon {
    font-size: 20px;
    width: 19px;
    text-align: center
}

.nav-item span:nth-child(2) {
    font-size: 13px;
    font-weight: 600
}

.nav-badge {
    background: #fff;
    color: var(--red-dark);
    font-size: 8px;
    font-weight: 700;
    margin-left: auto;
    padding: 4px 6px;
    border-radius: 5px
}

.sidebar-bottom {
    border-top: 1px solid #34363c;
    margin-top: auto;
    padding-top: 20px
}

.sidebar-bottom .nav-item+.nav-item {
    margin-top: 5px
}

.sidebar-help {
    align-items: center;
    background: #292b31;
    border-radius: 12px;
    display: flex;
    gap: 9px;
    margin-top: 27px;
    padding: 12px
}

.help-icon {
    align-items: center;
    background: #3b3d44;
    border-radius: 50%;
    display: flex;
    height: 25px;
    justify-content: center;
    width: 25px
}

.sidebar-help strong,
.sidebar-help small {
    display: block;
    font-size: 10px
}

.sidebar-help small {
    color: #898b92;
    font-size: 9px;
    margin-top: 2px
}

.sidebar-help>span:last-child {
    color: #888;
    margin-left: auto
}

.content-shell {
    flex: 1;
    min-width: 0
}

.topbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    height: 80px;
    justify-content: space-between;
    padding: 0 clamp(25px, 4vw, 62px)
}

.topbar-actions {
    align-items: center;
    display: flex;
    gap: 20px
}

.system-status {
    color: #6a6b70;
    font-size: 11px
}

.system-status span,
.live-pill i,
.status-dot,
.status-tag i {
    background: var(--green);
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    margin-right: 6px;
    width: 7px
}

.icon-button {
    background: none;
    color: var(--muted);
    font-size: 20px;
    padding: 4px
}

.notification-button {
    position: relative
}

.notification-button b {
    align-items: center;
    background: var(--red);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 8px;
    height: 15px;
    justify-content: center;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 15px
}

.topbar-divider {
    height: 25px;
    width: 1px;
    background: var(--line)
}

.topbar-user {
    align-items: center;
    background: none;
    display: flex;
    gap: 9px;
    text-align: left
}

.topbar-user strong {
    font-size: 11px
}

.topbar-user small {
    color: var(--muted);
    font-size: 10px;
    margin-top: 2px
}

.topbar-user>span:last-child {
    color: #aaa;
    margin-left: 8px
}

.menu-button {
    display: none;
    background: none;
    color: var(--ink);
    font-size: 22px
}

.screen {
    display: none;
    max-width: 1400px;
    margin: 0 auto;
    padding: 45px clamp(25px, 4vw, 62px) 70px
}

.screen.is-screen-active {
    display: block
}

.page-heading {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px
}

.page-heading h1 {
    font-size: 35px;
    margin: 0 0 7px
}

.page-heading h1 span {
    color: var(--red);
    font-size: 24px
}

.page-heading .muted {
    margin: 0
}

.compact-heading {
    align-items: center
}

.button-outline {
    background: transparent;
    border: 1px solid #d4cfcc;
    color: var(--ink)
}

.button-soft {
    background: #f6e8e6;
    color: var(--red-dark)
}

.dashboard-grid {
    display: grid;
    gap: 19px;
    grid-template-columns: minmax(0, 1.58fr) minmax(320px, .8fr);
    grid-template-rows: auto auto auto
}

.card {
    background: #fff;
    border: 1px solid rgba(230, 225, 221, .8);
    border-radius: 18px;
    box-shadow: var(--shadow)
}

.map-card {
    grid-row: span 2;
    overflow: hidden
}

.card-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 25px 26px 20px
}

.card-heading h2 {
    font-size: 20px;
    margin: 0
}

.live-pill,
.status-tag {
    align-items: center;
    background: #eaf7f0;
    border-radius: 20px;
    color: #278661;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    padding: 7px 10px
}

.map-area {
    height: 340px;
    background: #e8ebe9;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(28deg, transparent 0 49%, rgba(255, 255, 255, .7) 49% 50%, transparent 50%), linear-gradient(110deg, transparent 0 51%, rgba(255, 255, 255, .64) 51% 52%, transparent 52%), linear-gradient(170deg, transparent 0 71%, rgba(255, 255, 255, .7) 71% 72%, transparent 72%), linear-gradient(90deg, transparent 0 28%, rgba(255, 255, 255, .78) 28% 29%, transparent 29%);
    background-size: 170px 140px, 220px 160px, 280px 210px, 130px 190px
}

.map-area:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(171, 205, 217, .9) 0 13%, transparent 13% 100%);
    clip-path: polygon(0 0, 10% 0, 21% 20%, 13% 41%, 16% 64%, 6% 100%, 0 100%);
    opacity: .9
}

.map-water {
    position: absolute;
    right: 0;
    top: 0;
    width: 21%;
    height: 100%;
    background: #b8d9e4;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 50% 100%, 66% 78%, 38% 57%, 57% 37%, 20% 17%)
}

.map-street {
    background: rgba(255, 255, 255, .8);
    height: 10px;
    position: absolute;
    transform: rotate(20deg);
    width: 95%;
    z-index: 1
}

.s1 {
    top: 80px;
    left: -10px
}

.s2 {
    top: 205px;
    left: -25px;
    transform: rotate(-11deg)
}

.s3 {
    top: 282px;
    left: 20px;
    transform: rotate(36deg);
    width: 80%
}

.s4 {
    top: 35px;
    left: 170px;
    transform: rotate(74deg);
    width: 70%
}

.map-label {
    color: #91999b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    position: absolute;
    z-index: 2
}

.label-one {
    left: 24%;
    top: 40%
}

.label-two {
    left: 38%;
    top: 23%
}

.map-pin {
    align-items: center;
    background: var(--red);
    border: 5px solid #fff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 7px 15px rgba(150, 32, 32, .25);
    color: #fff;
    display: flex;
    font-size: 23px;
    height: 48px;
    justify-content: center;
    left: 58%;
    position: absolute;
    top: 51%;
    transform: rotate(-45deg);
    width: 48px;
    z-index: 3
}

.map-pin span {
    transform: rotate(45deg)
}

.map-location-card {
    background: rgba(28, 30, 35, .9);
    border-radius: 10px;
    bottom: 18px;
    color: #fff;
    display: flex;
    flex-direction: column;
    left: 20px;
    padding: 11px 14px;
    position: absolute;
    z-index: 4
}

.map-location-card small {
    color: #e9a6a4;
    font-size: 9px;
    text-transform: uppercase
}

.map-location-card strong {
    font-size: 12px;
    margin-top: 3px
}

.map-location-card span {
    color: #c0c0c0;
    font-size: 10px;
    margin-top: 2px
}

.map-controls {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 5
}

.map-controls button {
    background: #fff;
    color: #666;
    font-size: 17px;
    height: 32px;
    width: 32px
}

.map-controls button+button {
    border-top: 1px solid #ddd
}

.map-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 16px 25px
}

.map-footer strong {
    font-size: 11px;
    text-transform: uppercase
}

.map-footer small {
    color: var(--muted);
    display: block;
    font-size: 10px;
    margin-left: 16px
}

.map-updated {
    color: #aaa;
    font-size: 10px
}

.sos-card {
    background: linear-gradient(135deg, #b93235, #ed6764);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 258px;
    overflow: hidden;
    padding: 25px;
    position: relative
}

.sos-card:before {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    content: "";
    height: 260px;
    position: absolute;
    right: -95px;
    top: -88px;
    width: 260px
}

.sos-card h2 {
    font-size: 30px;
    margin: 0 0 5px
}

.sos-card p:not(.eyebrow) {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    line-height: 1.5;
    max-width: 240px;
    margin: 0
}

.sos-button {
    align-items: center;
    background: #98292e;
    border: 2px solid rgba(255, 255, 255, .52);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 126px;
    justify-content: center;
    position: absolute;
    right: 30px;
    top: 61px;
    width: 126px;
    z-index: 1;
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .05)
}

.sos-button:hover {
    background: #8d2228
}

.sos-button strong {
    font: 700 30px 'Space Grotesk', sans-serif
}

.sos-button small {
    font-size: 9px;
    color: #f3c8c7
}

.sos-meta {
    font-size: 10px;
    position: relative;
    z-index: 1
}

.sos-meta span {
    font-size: 16px;
    vertical-align: middle
}

.stat-card {
    align-items: center;
    display: flex;
    gap: 14px;
    min-height: 127px;
    padding: 20px 23px;
    position: relative
}

.stat-icon {
    align-items: center;
    border-radius: 13px;
    display: flex;
    font-size: 23px;
    height: 47px;
    justify-content: center;
    width: 47px
}

.stat-icon.red {
    background: #fbe5e3;
    color: var(--red)
}

.stat-icon.blue {
    background: #e5eef4;
    color: #5a829e
}

.stat-card .eyebrow {
    font-size: 9px;
    margin-bottom: 4px
}

.stat-card h3 {
    font-size: 16px
}

.stat-card a {
    color: var(--red-dark);
    font-size: 11px;
    display: block;
    margin-top: 8px;
    text-decoration: none;
    font-weight: 700
}

.stat-card a span {
    font-size: 16px
}

.small-muted {
    color: var(--muted);
    font-size: 11px;
    margin: 6px 0 0
}

.small-muted strong {
    color: var(--ink)
}

.mini-avatars {
    display: flex;
    margin-left: auto
}

.mini-avatars span {
    align-items: center;
    background: #f2cbc7;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #a24a45;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    height: 29px;
    justify-content: center;
    margin-left: -7px;
    width: 29px
}

.mini-avatars span:nth-child(2) {
    background: #e3d4e7;
    color: #75547f
}

.mini-avatars span:nth-child(3) {
    background: #cadfe9;
    color: #577c92
}

.mini-avatars span:nth-child(4) {
    background: #f2efed;
    color: #aaa
}

.activity-card {
    grid-column: 1;
    padding-bottom: 13px
}

.activity-list {
    padding: 0 25px
}

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

.activity-row div:nth-child(2) {
    flex: 1
}

.activity-row strong,
.activity-row small {
    display: block
}

.activity-row strong {
    font-size: 12px
}

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

.activity-row time {
    color: #aaa;
    font-size: 10px
}

.activity-icon,
.summary-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex: none;
    font-weight: 700;
    height: 31px;
    justify-content: center;
    width: 31px
}

.activity-icon.green,
.summary-icon.green {
    background: #e4f5ed;
    color: #3e9e74
}

.activity-icon.orange,
.summary-icon.orange {
    background: #fbeedc;
    color: #c77a33
}

.activity-icon.blue {
    background: #e5eef4;
    color: #5b839f
}

.activity-icon.red,
.summary-icon.red {
    background: #f9e1df;
    color: var(--red)
}

.tamper-card {
    padding-bottom: 20px
}

.status-tag.success {
    font-size: 10px
}

.tamper-visual {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 12px 25px 20px
}

.radar {
    align-items: center;
    background: #e6f5ee;
    border-radius: 50%;
    display: flex;
    height: 63px;
    justify-content: center;
    position: relative;
    width: 63px
}

.radar:before,
.radar:after {
    border: 1px solid #a8ddc3;
    border-radius: 50%;
    content: "";
    position: absolute
}

.radar:before {
    height: 76px;
    width: 76px
}

.radar:after {
    height: 92px;
    width: 92px
}

.radar b {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px #b9daca;
    color: #32956d;
    padding: 5px;
    position: relative
}

.tamper-visual strong {
    font-size: 12px
}

.tamper-visual p {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
    margin: 5px 0 0
}

.tamper-card .button {
    margin: 0 25px;
    width: calc(100% - 50px);
    font-size: 11px
}

.emergency-layout {
    display: grid;
    gap: 19px;
    grid-template-columns: 1.35fr .9fr
}

.emergency-hero {
    background: linear-gradient(120deg, #ab2d31, #e76563);
    color: #fff;
    display: flex;
    min-height: 330px;
    overflow: hidden;
    padding: 33px;
    position: relative
}

.emergency-copy {
    max-width: 360px;
    position: relative;
    z-index: 2
}

.warning-icon {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 12px;
    display: flex;
    font-size: 20px;
    height: 42px;
    justify-content: center;
    margin-bottom: 28px;
    width: 42px
}

.emergency-copy h2 {
    font-size: 35px;
    line-height: 1;
    margin: 8px 0 12px
}

.emergency-copy>p:not(.eyebrow) {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 26px
}

.sos-wide {
    background: #fff;
    border-radius: 11px;
    color: #a92f34;
    font-weight: 700;
    padding: 13px 17px
}

.sos-wide span {
    font-size: 19px;
    margin-right: 8px
}

.emergency-copy small {
    display: block;
    color: rgba(255, 255, 255, .59);
    font-size: 10px;
    margin-top: 11px
}

.emergency-orbit {
    height: 270px;
    position: absolute;
    right: 5%;
    top: 32px;
    width: 270px
}

.orbit-circle {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    position: absolute
}

.c1 {
    inset: 0
}

.c2 {
    inset: 31px
}

.c3 {
    inset: 65px;
    border-color: rgba(255, 255, 255, .3)
}

.orbit-sos {
    align-items: center;
    background: #8d252b;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    display: flex;
    font: 700 34px 'Space Grotesk', sans-serif;
    height: 100px;
    justify-content: center;
    left: 85px;
    position: absolute;
    top: 85px;
    width: 100px
}

.emergency-info {
    padding-bottom: 13px
}

.contact-mini-list {
    padding: 0 25px
}

.contact-mini {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    padding: 15px 0
}

.contact-mini div {
    flex: 1
}

.contact-mini strong,
.contact-mini small {
    display: block
}

.contact-mini strong {
    font-size: 12px
}

.contact-mini small {
    color: var(--muted);
    font-size: 10px;
    margin-top: 4px
}

.contact-check {
    align-items: center;
    background: #e2f5eb;
    border-radius: 50%;
    color: #2d9b6d;
    display: flex;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    width: 24px
}

.emergency-numbers {
    display: grid;
    gap: 19px;
    grid-template-columns: 1fr 1fr;
    margin-top: 19px
}

.service-card {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 22px
}

.service-icon {
    align-items: center;
    border-radius: 12px;
    display: flex;
    font-size: 20px;
    height: 48px;
    justify-content: center;
    width: 48px
}

.service-icon.red {
    background: #f9e3e1;
    color: var(--red)
}

.service-icon.dark {
    background: #ecebed;
    color: #37353a
}

.service-card h3 {
    font-size: 19px
}

.service-card p {
    margin: 4px 0 0
}

.call-button {
    background: #f8e6e4;
    border-radius: 9px;
    color: var(--red-dark);
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
    padding: 12px 15px;
    text-decoration: none
}

.call-button span {
    font-size: 16px;
    margin-left: 8px
}

.contact-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 15px 20px
}

.search-field {
    align-items: center;
    display: flex;
    gap: 10px;
    width: min(360px, 100%)
}

.search-field span {
    color: #a8a5a2;
    font-size: 24px
}

.search-field input {
    border: 0;
    margin: 0;
    padding: 10px 0
}

.search-field input:focus {
    box-shadow: none
}

.contact-count {
    color: var(--muted);
    font-size: 11px
}

.contact-count strong {
    color: var(--ink);
    font-size: 16px;
    margin-right: 3px
}

.contact-count .status-dot {
    margin-left: 13px
}

.contacts-grid {
    display: grid;
    gap: 19px;
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.contact-card {
    padding: 22px
}

.contact-card-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

.contact-card h3 {
    font-size: 16px;
    margin-top: 17px
}

.contact-card .small-muted {
    margin-top: 4px
}

.contact-detail {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--red-dark);
    display: flex;
    font-size: 17px;
    gap: 8px;
    margin-top: 21px;
    padding-top: 15px
}

.contact-detail span {
    color: var(--muted);
    font-size: 11px
}

.contact-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 19px
}

.contact-card-actions .button {
    font-size: 11px;
    padding: 9px 14px
}

.form-layout,
.profile-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: .8fr 1.2fr
}

.profile-layout {
    align-items: stretch;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr)
}

.vehicle-preview {
    background: linear-gradient(140deg, #24262c, #3a3a3e);
    color: #fff;
    min-height: 450px;
    overflow: hidden;
    padding: 30px;
    position: relative
}

.vehicle-badge {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border-radius: 12px;
    display: flex;
    font-size: 24px;
    height: 48px;
    justify-content: center;
    margin-bottom: 70px;
    width: 48px
}

.vehicle-preview .eyebrow {
    color: #aeb0b4
}

.vehicle-preview h2 {
    font-size: 30px;
    margin: 6px 0
}

.vehicle-line {
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 17px
}

.vehicle-line span {
    font-size: 11px
}

.vehicle-line small {
    color: #9a9ca1;
    font-size: 10px
}

.settings-form {
    padding: 28px
}

.settings-form .card-heading {
    padding: 0 0 25px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 23px
}

.required-note {
    color: #aaa;
    font-size: 10px
}

.settings-form>label {
    display: block;
    margin-bottom: 17px
}

.settings-form input {
    margin-top: 8px
}

.profile-preferences-note {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    margin: 12px 0 0;
    padding-top: 14px
}

.two-fields {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px
}

.form-actions .button {
    font-size: 12px
}

.alert-summary {
    display: grid;
    gap: 19px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px
}

.summary-card {
    align-items: center;
    display: flex;
    gap: 14px;
    padding: 21px 25px
}

.summary-icon {
    height: 42px;
    width: 42px
}

.summary-card strong,
.summary-card small {
    display: block
}

.summary-card strong {
    font: 700 24px 'Space Grotesk', sans-serif
}

.summary-card small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px
}

.alert-panel {
    padding-bottom: 12px
}

.alert-panel .card-heading {
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px
}

.alert-list {
    padding: 0 25px
}

.alert-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 14px;
    padding: 19px 0
}

.alert-row:last-child {
    border-bottom: 0
}

.alert-row div:nth-child(2) {
    flex: 1
}

.alert-row strong {
    font-size: 12px
}

.alert-row p {
    color: var(--muted);
    font-size: 11px;
    margin: 5px 0 0
}

.alert-row time {
    color: #aaa;
    font-size: 10px
}

.alert-row.unread:after {
    background: var(--red);
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px
}

.profile-card {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    padding: 32px;
    text-align: center
}

.avatar-profile {
    font-size: 24px;
    height: 88px;
    width: 88px
}

.profile-card h2 {
    font-size: 24px;
    margin: 20px 0 0
}

.profile-card .button {
    margin-top: 24px
}

.toggle-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    min-height: 74px;
    position: relative;
    padding: 17px 0 !important
}

.settings-form>.toggle-row {
    display: flex;
    margin: 0
}

.toggle-row:last-child {
    border: 0
}

.toggle-row span {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.toggle-row strong {
    font-size: 12px
}

.toggle-row small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 400
}

.toggle-row input {
    background: transparent;
    border: 0;
    height: 1px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.toggle-row i {
    background: #ddd;
    border-radius: 20px;
    flex: 0 0 40px;
    height: 23px;
    position: relative;
    transition: background .2s ease;
    width: 40px
}

.toggle-row input:focus-visible+i {
    outline: 3px solid rgba(220, 52, 63, .24);
    outline-offset: 3px
}

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

.toggle-row input:checked+i {
    background: var(--red)
}

.toggle-row input:checked+i:before {
    left: 20px
}

.modal {
    display: none;
    inset: 0;
    position: fixed;
    z-index: 20
}

.modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-backdrop {
    background: rgba(24, 22, 24, .48);
    inset: 0;
    position: absolute
}

.modal-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 22px 80px rgba(25, 15, 15, .2);
    max-width: 460px;
    padding: 34px;
    position: relative;
    width: calc(100% - 40px);
    z-index: 1
}

.modal-card h2 {
    font-size: 27px;
    margin: 5px 0 8px
}

.modal-card .muted {
    margin: 0 0 25px
}

.modal-close {
    background: #f5f1ef;
    border-radius: 50%;
    color: #888;
    font-size: 20px;
    height: 29px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 29px
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px
}

.sos-modal-card {
    text-align: center
}

.sos-modal-icon {
    align-items: center;
    background: #f9e1df;
    border-radius: 50%;
    color: var(--red-dark);
    display: flex;
    font-size: 27px;
    height: 61px;
    justify-content: center;
    margin: 0 auto 20px;
    width: 61px
}

.sos-modal-card .modal-actions {
    justify-content: center
}

.toast {
    align-items: center;
    background: #1e2422;
    border-radius: 10px;
    bottom: 25px;
    color: #fff;
    display: flex;
    gap: 10px;
    left: 50%;
    opacity: 0;
    padding: 13px 18px;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 15px);
    transition: .25s;
    z-index: 30
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0)
}

body.auth-overlay-open .toast {
    max-width: calc(100vw - 32px);
    width: max-content;
    z-index: 1201;
}

.toast-icon {
    align-items: center;
    background: #2f9d72;
    border-radius: 50%;
    display: flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    width: 20px
}

@media(max-width:1100px) {
    .sidebar {
        width: 220px;
        padding-left: 14px;
        padding-right: 14px
    }

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

    .map-card {
        grid-column: span 2;
        grid-row: auto
    }

    .activity-card {
        grid-column: span 2
    }

    .contacts-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .sos-card {
        min-height: 255px
    }

    .sos-button {
        right: 45px
    }

    .splash-view {
        padding-left: 8vw;
        padding-right: 8vw
    }

    .splash-footer {
        left: 8vw
    }
}

@media(max-width:760px) {
    .splash-view {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 50px 28px
    }

    .splash-art {
        height: 280px;
        order: -1;
        width: 100%;
        transform: scale(.65);
        transform-origin: left top;
        margin-bottom: -50px
    }

    .splash-copy h1 {
        font-size: 4.3rem
    }

    .splash-footer {
        bottom: 20px;
        left: 28px
    }

    .auth-view {
        display: block
    }

    .auth-visual {
        display: none
    }

    .auth-panel {
        min-height: 100vh;
        padding: 32px 24px
    }

    .mobile-brand {
        display: flex;
        margin-bottom: 70px;
        color: var(--ink)
    }

    .mobile-brand .brand-mark {
        background: var(--red)
    }

    .mobile-brand strong {
        font-size: 20px
    }

    .mobile-brand em {
        color: var(--red)
    }

    .sidebar {
        display: none;
        position: fixed;
        z-index: 10;
        width: 270px
    }

    .sidebar.is-open {
        display: flex
    }

    .content-shell {
        width: 100%
    }

    .topbar {
        height: 66px;
        padding: 0 20px
    }

    .menu-button {
        display: block
    }

    .topbar-actions {
        gap: 11px
    }

    .system-status,
    .topbar-divider,
    .topbar-user>span:not(.avatar) {
        display: none
    }

    .topbar-user strong {
        display: none
    }

    .screen {
        padding: 29px 18px 50px
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 25px
    }

    .page-heading h1 {
        font-size: 29px
    }

    .dashboard-grid,
    .emergency-layout,
    .emergency-numbers,
    .form-layout,
    .profile-layout {
        grid-template-columns: 1fr
    }

    .map-card,
    .activity-card {
        grid-column: auto
    }

    .map-area {
        height: 270px
    }

    .map-location-card {
        left: 11px
    }

    .sos-card {
        min-height: 290px
    }

    .sos-button {
        right: 34px;
        top: 98px
    }

    .sos-card>div:first-child {
        max-width: calc(100% - 130px)
    }

    .stat-card {
        min-height: 105px
    }

    .activity-card .card-heading {
        align-items: center
    }

    .emergency-hero {
        min-height: 475px
    }

    .emergency-orbit {
        bottom: 20px;
        right: 6%;
        top: auto;
        transform: scale(.78);
        transform-origin: bottom right
    }

    .emergency-copy {
        max-width: 100%
    }

    .emergency-info {
        margin-top: 0
    }

    .contact-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    .search-field {
        width: 100%
    }

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

    .alert-summary {
        gap: 10px
    }

    .summary-card {
        padding: 15px
    }

    .summary-card strong {
        font-size: 19px
    }

    .summary-card small {
        font-size: 9px
    }

    .alert-row {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .alert-row time {
        margin-left: 45px
    }

    .settings-form {
        padding: 22px
    }

    .topbar-actions .notification-button {
        display: block
    }
}

.brand-mark img {
    border-radius: inherit;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.onboarding-two-fields {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr
}

.onboarding-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 7px
}

@media(max-width:520px) {

    .onboarding-two-fields,
    .onboarding-actions {
        grid-template-columns: 1fr;
        display: grid
    }

    .onboarding-actions .button {
        width: 100%
    }
}

.splash-art {
    align-items: center;
    display: flex;
    height: 510px;
    justify-content: center;
    position: relative;
    width: min(45vw, 590px);
    z-index: 1
}

.splash-logo-art {
    background: transparent;
    border-radius: 0;
    box-shadow: 0 24px 36px rgba(75, 16, 16, .2);
    height: min(31vw, 360px);
    object-fit: contain;
    width: min(31vw, 360px)
}

@media(max-width:760px) {
    .splash-logo-art {
        height: 260px;
        width: 260px
    }
}

.splash-logo-art {
    animation: logo-entrance 1.1s cubic-bezier(.22, 1, .36, 1) both, logo-breathe 4.5s ease-in-out 1.1s infinite;
    object-fit: contain
}

@keyframes logo-entrance {
    0% {
        opacity: 0;
        transform: scale(.62) rotate(-8deg)
    }

    65% {
        opacity: 1;
        transform: scale(1.06) rotate(2deg)
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

@keyframes logo-breathe {

    0%,
    100% {
        filter: drop-shadow(0 20px 28px rgba(75, 16, 16, .16));
        transform: translateY(0) scale(1)
    }

    50% {
        filter: drop-shadow(0 28px 34px rgba(75, 16, 16, .25));
        transform: translateY(-7px) scale(1.025)
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }

    .splash-logo-art {
        filter: none;
        transform: none
    }
}

.empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    grid-column: 1/-1;
    justify-content: center;
    min-height: 220px;
    padding: 30px;
    text-align: center
}

.empty-state-icon {
    align-items: center;
    background: var(--red-soft);
    border-radius: 50%;
    color: var(--red-dark);
    display: flex;
    font-size: 24px;
    height: 52px;
    justify-content: center;
    width: 52px
}

.empty-state h3 {
    margin: 15px 0 5px
}

.empty-state p {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 17px
}

.empty-state-inline {
    min-height: 180px
}

.empty-state-inline .empty-state-icon {
    background: #e5f5ed;
    color: var(--green)
}

/* Landing hero refinement: asymmetric, editorial, and focused on the rider's mark. */
.splash-view {
    align-items: stretch;
    gap: clamp(40px, 8vw, 150px);
    min-height: 100dvh;
    padding: clamp(34px, 7vh, 78px) clamp(28px, 8vw, 150px);
    background: radial-gradient(circle at 16% 50%, rgba(255, 255, 255, .1), transparent 27%), radial-gradient(circle at 87% 84%, rgba(255, 255, 255, .22), transparent 33%), linear-gradient(115deg, #d94749 0%, #e45c5c 43%, #f1b4b3 100%)
}

.splash-view:before {
    background: radial-gradient(circle, rgba(255, 255, 255, .13) 0 1px, transparent 1.5px);
    background-size: 18px 18px;
    border-radius: 0;
    height: 70%;
    opacity: .22;
    right: 0;
    top: 0;
    width: 42%;
    clip-path: polygon(26% 0, 100% 0, 100% 100%, 61% 100%, 0 33%)
}

.splash-view:after {
    background: rgba(99, 25, 28, .12);
    bottom: -29vw;
    height: 46vw;
    left: -25vw;
    width: 58vw
}

.splash-art {
    align-items: center;
    display: flex;
    flex: 1 1 52%;
    height: auto;
    justify-content: center;
    min-height: 420px;
    position: relative;
    width: auto;
    filter: none;
    isolation: isolate
}

.splash-art:before,
.splash-art:after {
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    content: "";
    position: absolute;
    z-index: -1
}

.splash-art:before {
    height: min(39vw, 570px);
    width: min(39vw, 570px)
}

.splash-art:after {
    border-color: rgba(255, 255, 255, .13);
    height: min(47vw, 690px);
    width: min(47vw, 690px)
}

.splash-logo-art {
    animation: logo-entrance 1.1s cubic-bezier(.22, 1, .36, 1) both, logo-breathe 5.5s ease-in-out 1.1s infinite;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 26px 30px rgba(96, 23, 23, .2));
    height: min(29vw, 430px);
    mix-blend-mode: multiply;
    object-fit: contain;
    width: min(29vw, 430px)
}

.splash-copy {
    align-self: center;
    flex: 0 1 510px;
    max-width: 510px;
    padding-bottom: 5vh;
    position: relative;
    z-index: 1
}

.splash-copy:before {
    background: rgba(255, 255, 255, .32);
    content: "";
    height: 1px;
    left: -48px;
    position: absolute;
    top: 10px;
    width: 28px
}

.splash-copy h1 {
    font-size: clamp(4.4rem, 7.5vw, 8rem);
    letter-spacing: -.095em;
    line-height: .88;
    margin: 32px 0 27px
}

.splash-copy h1 em {
    color: #ffe6e3;
    font-style: normal
}

.splash-copy>p:not(.eyebrow) {
    font-size: clamp(17px, 1.45vw, 22px);
    letter-spacing: -.02em;
    line-height: 1.45;
    max-width: 390px;
    color: rgba(255, 255, 255, .82)
}

.splash-copy .eyebrow {
    font-size: 12px;
    letter-spacing: .21em
}

.button-light {
    border: 1px solid rgba(255, 255, 255, .68);
    box-shadow: 0 18px 34px rgba(118, 30, 30, .2);
    font-size: 14px;
    min-width: 204px;
    justify-content: space-between;
    padding: 17px 19px 17px 23px
}

.button-light span {
    align-items: center;
    background: var(--red);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 16px;
    height: 28px;
    justify-content: center;
    width: 28px
}

.splash-footer {
    bottom: 30px;
    left: clamp(28px, 8vw, 150px);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase
}

@media(max-width:900px) {
    .splash-view {
        gap: 25px;
        padding-left: 6vw;
        padding-right: 6vw
    }

    .splash-art:before {
        height: 44vw;
        width: 44vw
    }

    .splash-art:after {
        height: 54vw;
        width: 54vw
    }

    .splash-logo-art {
        height: 35vw;
        width: 35vw
    }

    .splash-copy h1 {
        font-size: clamp(3.7rem, 8vw, 6rem)
    }
}

@media(max-width:760px) {
    .splash-view {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        min-height: 100dvh;
        overflow: hidden;
        padding: 35px 28px 70px
    }

    .splash-art {
        flex: none;
        height: 52vh;
        min-height: 280px;
        width: 100%
    }

    .splash-art:before {
        height: 72vw;
        width: 72vw
    }

    .splash-art:after {
        height: 92vw;
        width: 92vw
    }

    .splash-logo-art {
        height: 57vw;
        width: 57vw
    }

    .splash-copy {
        align-self: stretch;
        flex: none;
        max-width: none;
        padding: 0;
        text-align: center
    }

    .splash-copy:before {
        display: none
    }

    .splash-copy h1 {
        font-size: clamp(3.6rem, 16vw, 5.3rem);
        margin: 18px 0 16px
    }

    .splash-copy>p:not(.eyebrow) {
        font-size: 16px;
        margin: 0 auto;
        max-width: 290px
    }

    .splash-copy .eyebrow {
        font-size: 10px
    }

    .button-light {
        margin-top: 25px
    }

    .splash-footer {
        bottom: 23px;
        left: 0;
        text-align: center;
        width: 100%;
        font-size: 9px;
        letter-spacing: .1em
    }
}

@media(prefers-reduced-motion:reduce) {
    .splash-logo-art {
        animation: none;
        filter: none;
        transform: none
    }

    .button,
    .splash-copy h1 {
        transition: none
    }
}

.splash-view {
    isolation: isolate
}

.splash-topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: clamp(28px, 8vw, 150px);
    position: absolute;
    right: clamp(28px, 8vw, 150px);
    top: 28px;
    z-index: 4
}

.splash-wordmark {
    align-items: center;
    color: #fff;
    display: flex;
    font: 700 15px/1 'Space Grotesk', sans-serif;
    gap: 9px;
    letter-spacing: -.04em
}

.splash-wordmark img {
    height: 31px;
    mix-blend-mode: multiply;
    object-fit: contain;
    width: 31px
}

.splash-wordmark b {
    font-weight: 500;
    opacity: .72
}

.splash-corner-label {
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase
}

.splash-art:after {
    animation: halo-breathe 8s ease-in-out 1.1s infinite
}

@keyframes halo-breathe {

    0%,
    100% {
        opacity: .55;
        transform: scale(.98)
    }

    50% {
        opacity: 1;
        transform: scale(1.02)
    }
}

.splash-copy h1,
.splash-copy>p:not(.eyebrow),
.button-light {
    font-family: 'Manrope', system-ui, sans-serif
}

.splash-copy h1 {
    font-weight: 800
}

@media(max-width:760px) {
    .splash-topbar {
        left: 24px;
        right: 24px;
        top: 22px
    }

    .splash-corner-label {
        display: none
    }

    .splash-wordmark {
        font-size: 14px
    }

    .splash-wordmark img {
        height: 28px;
        width: 28px
    }
}

@media(prefers-reduced-motion:reduce) {
    .splash-art:after {
        animation: none
    }
}

.brand-mark img,
.splash-wordmark img {
    clip-path: circle(49% at 50% 50%)
}

.splash-view {
    background: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .08), transparent 25%), radial-gradient(circle at 88% 76%, rgba(255, 255, 255, .2), transparent 32%), linear-gradient(112deg, #a62d35 0%, #d94f52 42%, #efaaa7 100%)
}

.splash-view:after {
    background: rgba(71, 17, 22, .18)
}

.portal-actions {
    display: grid;
    gap: 10px;
    margin-top: 36px;
    max-width: 430px
}

.portal-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 16px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 16px 17px 16px 21px;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease
}

.portal-button:hover {
    box-shadow: 0 16px 30px rgba(92, 22, 25, .2);
    transform: translateY(-2px)
}

.portal-button-copy {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.portal-button-copy strong {
    font: 800 14px/1 'Manrope', sans-serif;
    letter-spacing: -.02em
}

.portal-button-copy small {
    font-size: 10px;
    line-height: 1.35;
    opacity: .68
}

.portal-arrow {
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 18px;
    height: 32px;
    justify-content: center;
    width: 32px
}

.portal-driver {
    background: #fff;
    color: var(--red-dark)
}

.portal-driver .portal-arrow {
    background: var(--red);
    color: #fff
}

.portal-admin {
    background: rgba(35, 28, 32, .74);
    border-color: rgba(255, 255, 255, .25);
    color: #fff
}

.portal-admin .portal-arrow {
    background: rgba(255, 255, 255, .14);
    color: #fff
}

.portal-note {
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    margin: 13px 0 0
}

.auth-portal-note {
    color: var(--muted);
    margin-top: 17px
}

.auth-brand-lockup {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 13px
}

.auth-brand-lockup .auth-logo {
    clip-path: circle(49% at 50% 50%);
    height: 54px;
    mix-blend-mode: multiply;
    object-fit: contain;
    width: 54px
}

.auth-brand-lockup strong {
    display: block;
    font: 800 24px/1 'Manrope', sans-serif;
    letter-spacing: -.06em
}

.auth-brand-lockup strong em {
    color: #ffd9d6;
    font-style: normal
}

.auth-brand-lockup small {
    color: rgba(255, 255, 255, .62);
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    margin-top: 6px;
    text-transform: uppercase
}

.auth-panel .auth-brand-lockup {
    display: none
}

.auth-brand-lockup .auth-logo {
    background: transparent
}

#auth-admin-login .eyebrow {
    color: var(--red-dark)
}

@media(max-width:760px) {
    .portal-actions {
        margin: 24px auto 0;
        max-width: 330px
    }

    .portal-button {
        padding: 14px 15px 14px 18px
    }

    .portal-button-copy strong {
        font-size: 13px
    }

    .auth-panel .auth-brand-lockup {
        display: flex;
        margin-bottom: 58px
    }

    .auth-visual .auth-brand-lockup {
        display: none
    }

    .auth-brand-lockup strong {
        font-size: 20px
    }

    .auth-brand-lockup .auth-logo {
        height: 45px;
        width: 45px
    }
}

@media(prefers-reduced-motion:reduce) {
    .portal-button {
        transition: none
    }
}

.splash-view {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
    padding-bottom: 48px;
    padding-top: 88px
}

.splash-hero {
    align-items: center;
    display: grid;
    flex: 1;
    gap: clamp(40px, 7vw, 140px);
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    margin: 0 auto;
    max-width: 1500px;
    min-height: 0;
    width: 100%
}

.splash-art {
    height: 100%;
    min-height: 0;
    width: 100%
}

.splash-art:before {
    height: min(39vw, 620px);
    width: min(39vw, 620px)
}

.splash-art:after {
    height: min(49vw, 760px);
    width: min(49vw, 760px)
}

.splash-logo-art {
    clip-path: circle(49% at 50% 50%);
    height: min(31vw, 470px);
    width: min(31vw, 470px)
}

.splash-copy {
    align-self: center;
    max-width: 580px;
    padding: 0 0 3vh
}

.splash-copy h1 {
    font-size: clamp(5rem, 8.5vw, 9rem);
    line-height: .84;
    margin: 30px 0 28px
}

.splash-copy>p:not(.eyebrow) {
    font-size: clamp(17px, 1.3vw, 21px);
    max-width: 430px
}

.button-light {
    margin-top: 36px;
    min-width: 225px
}

.splash-feature-rail {
    align-items: stretch;
    background: rgba(126, 48, 50, .26);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto 0 0;
    max-width: 880px;
    padding: 10px;
    width: 58%;
    z-index: 2
}

.splash-feature {
    border-left: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 16px 21px
}

.splash-feature:first-child {
    border-left: 0
}

.splash-feature strong {
    color: #fff;
    font: 700 clamp(12px, 1vw, 15px)/1 'Manrope', sans-serif;
    letter-spacing: -.02em
}

.splash-feature span {
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    line-height: 1.35
}

@media(max-width:1100px) {
    .splash-hero {
        gap: 35px;
        grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr)
    }

    .splash-copy h1 {
        font-size: clamp(4rem, 8vw, 6.7rem)
    }

    .splash-feature-rail {
        width: 66%
    }
}

@media(max-width:760px) {
    .splash-view {
        gap: 0;
        padding: 74px 24px 28px
    }

    .splash-topbar {
        top: 22px
    }

    .splash-hero {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        margin: 0;
        min-height: 0
    }

    .splash-art {
        flex: none;
        height: 47vh;
        min-height: 255px;
        width: 100%
    }

    .splash-art:before {
        height: 72vw;
        width: 72vw
    }

    .splash-art:after {
        height: 94vw;
        width: 94vw
    }

    .splash-logo-art {
        height: 58vw;
        width: 58vw
    }

    .splash-copy {
        align-self: stretch;
        max-width: none;
        padding: 0;
        text-align: center
    }

    .splash-copy h1 {
        font-size: clamp(3.8rem, 16vw, 5.5rem);
        margin: 20px 0 15px
    }

    .splash-copy>p:not(.eyebrow) {
        font-size: 15px;
        margin: 0 auto;
        max-width: 290px
    }

    .button-light {
        margin-top: 24px
    }

    .splash-feature-rail {
        border-radius: 17px;
        grid-template-columns: repeat(2, 1fr);
        margin: 24px 0 0;
        padding: 5px;
        width: 100%
    }

    .splash-feature {
        padding: 12px 13px
    }

    .splash-feature:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .18)
    }

    .splash-feature:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .18)
    }
}

.splash-copy .portal-note {
    font-size: 10px;
    line-height: 1.35;
    max-width: none
}

.view:not(.is-active) {
    display: none !important
}

.view.is-active {
    display: flex
}

@media(max-width:760px) {
    .auth-view.is-active {
        display: block
    }

    .view:not(.is-active) {
        display: none !important
    }
}

.splash-art:before {
    background: conic-gradient(from 0deg, transparent 0 9%, #fff6cf 9.5% 11%, #ec530d 11.5% 13%, transparent 13.5% 37%, #ec530d 37.5% 39%, #fff8d8 39.5% 41%, transparent 41.5% 68%, #ec530d 68.5% 70%, #ec530d 70.5% 72%, transparent 72.5% 100%);
    border: 0;
    box-shadow: 0 0 18px rgba(255, 195, 111, .38), 0 0 42px rgba(255, 136, 68, .2);
    height: min(39vw, 620px);
    width: min(39vw, 620px);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: lightning-orbit 1.5s linear infinite;
    z-index: 0
}

.splash-art:after {
    border-color: rgba(255, 238, 202, .2);
    height: min(49vw, 760px);
    width: min(49vw, 760px);
    z-index: -1
}

.splash-logo-art {
    position: relative;
    z-index: 1
}

@keyframes lightning-orbit {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:760px) {
    .splash-art:before {
        height: 72vw;
        width: 72vw
    }

    .splash-art:after {
        height: 94vw;
        width: 94vw
    }
}

@media(prefers-reduced-motion:reduce) {
    .splash-art:before {
        animation: none
    }
}

.splash-art:before {
    inset: 50% auto auto 50%;
    height: min(31vw, 470px);
    width: min(31vw, 470px);
    transform: translate(-50%, -50%);
    z-index: 2
}

.splash-art:after {
    display: none
}

@keyframes lightning-circle {
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.splash-art:before {
    animation: lightning-circle 5.5s linear infinite
}

@media(max-width:760px) {
    .splash-art:before {
        height: 58vw;
        width: 58vw
    }
}

@media(prefers-reduced-motion:reduce) {
    .splash-art:before {
        animation: none;
        transform: translate(-50%, -50%)
    }
}

.splash-art:before {
    background: conic-gradient(from 218deg, transparent 0 12%, var(--red-dark) 12.5% 27%, var(--red) 27.5% 34%, transparent 34.5% 52%, var(--red-soft) 52.5% 55%, #fff4f2 55.5% 57%, var(--red) 57.5% 68%, transparent 68.5% 82%, var(--red-dark) 82.5% 89%, transparent 89.5% 100%);
    box-shadow: 0 0 0 1px rgba(201, 65, 66, .24), 0 0 13px rgba(230, 87, 85, .48), 0 0 28px rgba(201, 65, 66, .22);
    filter: drop-shadow(0 4px 7px rgba(126, 32, 37, .2));
    opacity: .96;
    will-change: transform
}

.splash-art:before {
    animation-duration: 7.5s
}

.auth-role-switch {
    background: #f6f0ee;
    border: 1px solid #ebe3e0;
    border-radius: 14px;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
    padding: 4px
}

.auth-role-tab {
    background: transparent;
    border-radius: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    padding: 11px 14px;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease
}

.auth-role-tab:hover {
    color: var(--red-dark)
}

.auth-role-tab.is-active {
    background: #fff;
    color: var(--red-dark);
    box-shadow: 0 5px 14px rgba(113, 44, 43, .1)
}

.auth-role-tab:focus-visible {
    outline: 3px solid rgba(230, 87, 85, .22);
    outline-offset: 2px
}

.login-role-copy {
    margin-bottom: 9px !important
}

.login-role-note {
    font-size: 11px !important;
    line-height: 1.5;
    margin-top: 24px !important
}

[hidden] {
    display: none !important
}

@media(prefers-reduced-motion:reduce) {
    .auth-role-tab {
        transition: none
    }
}

.splash-copy>.portal-actions {
    display: none
}

.portal-unified {
    background: #fff;
    color: var(--red-dark);
    margin-top: 36px;
    max-width: 430px;
    width: 100%
}

.portal-unified .portal-arrow {
    background: var(--red);
    color: #fff
}

@media(max-width:760px) {
    .portal-unified {
        margin: 24px auto 0;
        max-width: 330px
    }
}

.splash-view {
    background: #fff;
    color: var(--ink);
    overflow: hidden
}

.splash-view:before {
    background: linear-gradient(145deg, #f22f38 0%, #f35b62 42%, #ef9a9b 100%);
    border-radius: 0 58% 47% 0 / 0 19% 81% 0;
    clip-path: none;
    height: 115%;
    left: -8%;
    opacity: 1;
    right: auto;
    top: -7%;
    width: 66%;
    z-index: 0
}

.splash-view:after {
    background: radial-gradient(circle at 36% 47%, rgba(255, 255, 255, .16), transparent 23%), linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 58%);
    border-radius: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 1;
    right: auto;
    top: 0;
    width: 66%;
    z-index: 0
}

.splash-topbar,
.splash-hero,
.splash-copy,
.splash-feature-rail {
    z-index: 1
}

.splash-wordmark {
    color: var(--ink)
}

.splash-wordmark b {
    color: var(--red-dark);
    opacity: 1
}

.splash-corner-label {
    color: var(--red-dark)
}

.splash-copy h1 {
    color: var(--ink)
}

.splash-copy h1 em {
    color: var(--red-dark)
}

.splash-copy>p:not(.eyebrow) {
    color: #68636a
}

.splash-copy .eyebrow.light {
    color: var(--red-dark)
}

.portal-unified {
    background: var(--red-dark);
    box-shadow: 0 13px 25px rgba(190, 49, 55, .22);
    color: #fff
}

.portal-unified .portal-arrow {
    background: #fff;
    color: var(--red-dark)
}

.splash-copy .portal-note {
    color: #918b8f
}

.splash-art:before {
    border-color: rgba(255, 255, 255, .28)
}

.auth-view {
    background: #fff
}

.auth-panel {
    background: rgba(255, 255, 255, .96)
}

.product-view {
    background: linear-gradient(135deg, #fff 0%, #fff 70%, #fff5f3 100%)
}

@media(max-width:760px) {
    .splash-view:before {
        border-radius: 0 52% 39% 0 / 0 11% 89% 0;
        height: 78%;
        left: -23%;
        top: -5%;
        width: 123%
    }

    .splash-view:after {
        height: 78%;
        left: -23%;
        top: -5%;
        width: 123%
    }

    .splash-hero {
        z-index: 2
    }

    .splash-copy {
        background: rgba(255, 255, 255, .74);
        border-radius: 24px;
        padding: 16px 12px 19px
    }

    .splash-copy .portal-note {
        color: #777174
    }
}

.splash-view {
    background-color: #fff;
    background-image: url('../background-enhanced.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.splash-view:before,
.splash-view:after {
    display: none
}

@media(min-width:761px) {
    .splash-art {
        left: clamp(-100px, -1vw, -100px);
        top: clamp(-50px, -6vh, -50px)
    }
}

@media(max-width:760px) {
    .splash-art {
        top: -1.5vh
    }
}

@media(min-width:761px) {
    .splash-art {
        left: clamp(-110px, -5vw, -55px);
        top: clamp(-30px, -3vh, -12px)
    }

    .splash-logo-art {
        height: min(26vw, 390px);
        width: min(26vw, 390px)
    }

    .splash-art:before {
        height: min(26vw, 390px);
        width: min(26vw, 390px)
    }
}

@media(max-width:760px) {
    .splash-logo-art {
        height: 52vw;
        width: 52vw
    }

    .splash-art:before {
        height: 52vw;
        width: 52vw
    }
}

.auth-view .auth-visual {
    /* Shared user/admin portal background. Keep both login roles visually consistent. */
    background-color: #ef7377;
    background-image: linear-gradient(90deg, rgba(173, 29, 38, .14) 0%, rgba(204, 48, 57, .28) 48%, rgba(224, 86, 93, .62) 78%, rgba(226, 96, 103, .78) 100%), url('../background-enhanced.png');
    background-position: 0 0, left center;
    background-repeat: no-repeat;
    background-size: 100% 100%, cover
}

/* Landing-page polish: foreground enhancements only. The existing background remains unchanged. */
.splash-hero {
    isolation: isolate;
    position: relative;
}

.splash-hero::before {
    background: linear-gradient(90deg, rgba(20, 20, 25, .08), transparent 42%, rgba(255, 255, 255, .12));
    border-radius: 32px;
    content: "";
    inset: -18px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.splash-art {
    background: radial-gradient(circle, rgba(255, 255, 255, .2) 0 34%, rgba(255, 255, 255, .08) 48%, transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 26px 42px rgba(92, 19, 23, .16));
    transition: filter .35s ease, transform .35s ease;
}

.splash-art:hover {
    filter: drop-shadow(0 32px 48px rgba(92, 19, 23, .25));
    transform: translateY(-3px);
}

.splash-logo-art {
    filter: drop-shadow(0 16px 24px rgba(71, 17, 20, .28)) drop-shadow(0 0 12px rgba(255, 255, 255, .16));
    object-fit: contain;
    transition: filter .35s ease;
}

.splash-art:hover .splash-logo-art {
    filter: drop-shadow(0 20px 28px rgba(71, 17, 20, .32)) drop-shadow(0 0 18px rgba(255, 255, 255, .24));
}

.splash-copy {
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(83, 33, 35, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
    padding: clamp(30px, 4vw, 56px);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.splash-copy::before {
    background: var(--red);
    border-radius: 999px;
    height: 3px;
    left: clamp(30px, 4vw, 56px);
    top: 24px;
    width: 46px;
}

.splash-copy .eyebrow.light {
    align-items: center;
    display: flex;
    gap: 14px;
    text-shadow: 0 1px 12px rgba(255, 255, 255, .65);
}

.splash-copy .eyebrow.light::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 2px;
    opacity: .8;
    width: 34px;
}

.splash-copy h1 {
    letter-spacing: -.085em;
    text-shadow: 0 4px 20px rgba(255, 255, 255, .42);
}

.splash-copy h1 em {
    background: linear-gradient(135deg, #a92d34 0%, #d14b50 52%, #e66a68 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.splash-copy>p:not(.eyebrow) {
    color: #5f5a61;
    text-shadow: 0 1px 8px rgba(255, 255, 255, .6);
}

.portal-unified {
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 18px 32px rgba(156, 37, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.portal-unified:hover {
    background: #b9333a;
    box-shadow: 0 22px 38px rgba(156, 37, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
    transform: translateY(-3px);
}

.portal-unified:focus-visible {
    outline: 3px solid rgba(230, 87, 85, .36);
    outline-offset: 4px;
}

.portal-unified .portal-arrow {
    box-shadow: 0 4px 12px rgba(111, 29, 32, .15);
    transition: transform .25s ease;
}

.portal-unified:hover .portal-arrow {
    transform: translateX(3px);
}

.splash-copy .portal-note {
    letter-spacing: -.01em;
    margin-top: 18px;
}

@media (max-width: 760px) {
    .splash-hero::before {
        border-radius: 24px;
        inset: -8px;
    }

    .splash-art {
        background: radial-gradient(circle, rgba(255, 255, 255, .2) 0 34%, rgba(255, 255, 255, .07) 48%, transparent 70%);
    }

    .splash-copy {
        border-radius: 24px;
        padding: 30px 22px 24px;
    }

    .splash-copy::before {
        left: 22px;
    }

    .splash-copy .eyebrow.light {
        justify-content: center;
    }

    .splash-copy h1 {
        font-size: clamp(3.6rem, 16vw, 5.4rem);
    }
}

/* Rider motorcycle collection */
.motorcycle-heading {
    align-items: flex-end;
    gap: 22px;
}

.add-motorcycle-button {
    align-items: center;
    display: inline-flex;
    flex: none;
    gap: 8px;
}

.add-motorcycle-button > span {
    font-size: 19px;
    line-height: 1;
}

.motorcycle-list-section {
    margin: -12px 0 22px;
}

.motorcycle-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.motorcycle-option {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.motorcycle-option:hover,
.motorcycle-option.is-selected {
    background: #fffafa;
    border-color: var(--red);
    box-shadow: 0 8px 20px rgba(30, 25, 25, .07);
}

.motorcycle-option-icon {
    align-items: center;
    background: #f4f3f2;
    border-radius: 10px;
    color: #5e6067;
    display: flex;
    flex: none;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.motorcycle-option-icon svg {
    height: 19px;
    width: 19px;
}

.motorcycle-option-details {
    min-width: 0;
}

.motorcycle-option-details strong,
.motorcycle-option-details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.motorcycle-option-details strong {
    font-size: 12px;
}

.motorcycle-option-details small {
    color: #8c8c92;
    font-size: 10px;
    margin-top: 4px;
}

.motorcycle-option-current {
    color: var(--red);
    flex: none;
    font-size: 9px;
    font-weight: 700;
    margin-left: auto;
}

.motorcycle-list-empty {
    color: #85858c;
    font-size: 12px;
    margin: 0;
}

.status-tag.disconnected {
    background: rgba(255, 255, 255, .13);
    color: #e0e1e5;
}

#motorcycle-status-chips[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .motorcycle-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .add-motorcycle-button {
        justify-content: center;
        width: 100%;
    }

    .motorcycle-list-section {
        margin-top: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .splash-art,
    .splash-logo-art,
    .portal-unified,
    .portal-unified .portal-arrow {
        transition: none;
    }
}

/* Keep the original open landing layout: logo enhancement without foreground cards. */
.splash-hero::before {
    display: none;
}

.splash-copy {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 5vh;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.splash-copy::before {
    background: var(--red);
    left: -48px;
    top: 10px;
}

.splash-art {
    background: radial-gradient(circle, rgba(255, 255, 255, .25) 0 35%, rgba(255, 255, 255, .1) 48%, transparent 70%);
    filter: drop-shadow(0 26px 42px rgba(92, 19, 23, .22));
}

.splash-logo-art {
    filter: drop-shadow(0 18px 25px rgba(71, 17, 20, .34)) drop-shadow(0 0 16px rgba(255, 255, 255, .24));
}

.splash-art:hover {
    filter: drop-shadow(0 32px 48px rgba(92, 19, 23, .3));
}

.splash-art:hover .splash-logo-art {
    filter: drop-shadow(0 22px 30px rgba(71, 17, 20, .4)) drop-shadow(0 0 22px rgba(255, 255, 255, .32));
}

@media (max-width: 760px) {
    .splash-copy {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .splash-copy::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.auth-visual-copy>p:not(.eyebrow) {
    color: rgba(255, 255, 255, .9)
}

/* Static landing artwork and a compact brand lockup. */
.splash-art {
    align-self: stretch;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .16), transparent 66%);
    border-radius: 50%;
    filter: none;
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.splash-art::before,
.splash-art::after {
    animation: none;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    box-shadow: none;
    content: "";
    height: min(34vw, 500px);
    inset: 50% auto auto 50%;
    opacity: .82;
    position: absolute;
    transform: translate(-50%, -50%);
    width: min(34vw, 500px);
    z-index: -1;
}

.splash-art::after {
    border-color: rgba(255, 255, 255, .19);
    height: min(43vw, 630px);
    width: min(43vw, 630px);
}

.splash-orbit {
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    height: min(25vw, 360px);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(25vw, 360px);
}

.splash-orbit-inner {
    border-style: dashed;
    height: min(16vw, 230px);
    opacity: .76;
    width: min(16vw, 230px);
}

.splash-route {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72) 18%, rgba(255, 255, 255, .72) 82%, transparent);
    height: 1px;
    left: 12%;
    opacity: .64;
    position: absolute;
    top: 50%;
    transform: rotate(-34deg);
    width: 76%;
}

.splash-route::before,
.splash-route::after {
    background: rgba(255, 255, 255, .3);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 12px;
    width: 100%;
}

.splash-route::after {
    top: -12px;
}

.splash-route-node {
    background: #fff;
    border: 5px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .09), 0 8px 22px rgba(118, 20, 27, .2);
    height: 20px;
    left: 57%;
    position: absolute;
    top: 37%;
    width: 20px;
}

.splash-art-label {
    align-items: center;
    bottom: 14%;
    color: rgba(255, 255, 255, .78);
    display: flex;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    gap: 10px;
    left: 50%;
    letter-spacing: .2em;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.splash-art-label i {
    background: rgba(255, 255, 255, .68);
    border-radius: 50%;
    height: 4px;
    width: 4px;
}

.splash-copy .splash-brand-logo {
    display: block;
    height: clamp(76px, 8vw, 112px);
    margin: 28px 0 8px -5px;
    object-fit: contain;
    width: clamp(76px, 8vw, 112px);
}

.splash-copy h1 {
    margin-top: 0;
}

@media(max-width: 1100px) and (min-width: 761px) {
    .splash-art::before {
        height: 38vw;
        width: 38vw;
    }

    .splash-art::after {
        height: 48vw;
        width: 48vw;
    }

    .splash-orbit {
        height: 29vw;
        width: 29vw;
    }

    .splash-orbit-inner {
        height: 19vw;
        width: 19vw;
    }
}

@media(max-width: 760px) {
    .splash-art {
        flex: none;
        height: 23vh;
        margin: 0 auto 12px;
        min-height: 145px;
        width: min(78vw, 330px);
    }

    .splash-art::before {
        height: 47vw;
        width: 47vw;
    }

    .splash-art::after {
        height: 61vw;
        width: 61vw;
    }

    .splash-orbit {
        height: 35vw;
        width: 35vw;
    }

    .splash-orbit-inner {
        height: 23vw;
        width: 23vw;
    }

    .splash-art-label {
        bottom: 4%;
        font-size: 8px;
    }

    .splash-copy .splash-brand-logo {
        height: 76px;
        margin: 20px auto 7px;
        width: 76px;
    }

    .splash-copy h1 {
        margin-top: 0;
    }
}

/* Moto Aid interaction layer */
.product-view.is-active {
    display: block
}

.product-view .content-shell {
    margin-left: 262px;
    min-height: 100vh
}

/* Keep Leaflet's high-z-index panes inside the rider content layer so they
   cannot paint over the fixed primary sidebar (especially on narrow screens). */
.product-view:not(.admin-mode) > .content-shell {
    position: relative;
    z-index: 0
}

.product-view .sidebar {
    bottom: 0;
    height: 100vh;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 30
}

.profile-menu-wrap {
    position: relative
}

.profile-popover[hidden] {
    display: none
}

.profile-popover {
    animation: profile-popover-in .16s ease-out;
    background: #fff;
    border: 1px solid rgba(232, 228, 226, .9);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(34, 24, 24, .16);
    min-width: 218px;
    padding: 8px;
    position: absolute;
    z-index: 40
}

.profile-popover-topbar {
    right: 0;
    top: calc(100% + 10px)
}

.profile-popover-heading {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    margin: 0 4px 6px;
    padding: 5px 4px 11px
}

.profile-popover-heading strong,
.profile-popover-heading small {
    display: block
}

.profile-popover-heading strong {
    font-size: 11px
}

.profile-popover-heading small {
    color: var(--muted);
    font-size: 10px;
    margin-top: 3px
}

.profile-popover>button {
    align-items: center;
    background: transparent;
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    font-size: 11px;
    gap: 10px;
    padding: 11px 10px;
    text-align: left;
    width: 100%
}

.profile-popover>button:hover {
    background: #fff4f2;
    color: var(--red-dark)
}

.profile-popover .profile-popover-logout {
    border-top: 1px solid var(--line);
    border-radius: 0;
    color: var(--red-dark);
    margin-top: 4px;
    padding-top: 13px
}

@keyframes profile-popover-in {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.emergency-hero {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 250px;
    min-height: 330px
}

.emergency-copy {
    grid-column: 1;
    max-width: 360px
}

.emergency-orbit {
    grid-column: 2;
    grid-row: 1;
    justify-self: center
}

.sos-wide {
    align-items: center;
    display: inline-flex;
    gap: 8px
}

.emergency-info .contact-mini {
    transition: background .2s ease, padding .2s ease
}

.emergency-info .contact-mini:hover {
    background: #fff8f7;
    border-radius: 12px;
    padding-left: 8px;
    padding-right: 8px
}

.contact-card {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease
}

.contact-card:hover {
    border-color: #f0c9c5;
    box-shadow: 0 16px 30px rgba(84, 35, 35, .08);
    transform: translateY(-2px)
}

.contact-card-actions {
    align-items: center;
    display: flex;
    gap: 8px
}

.contact-card-actions .button {
    align-items: center;
    display: inline-flex;
    gap: 7px
}

.contact-call {
    align-items: center;
    background: #fff0ee;
    border-radius: 50%;
    color: var(--red-dark);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    margin-left: auto;
    width: 30px
}

.contact-call:hover {
    background: #f9d9d6;
    transform: translateY(-1px)
}

.motorcycle-photo {
    border-radius: 18px;
    bottom: 20px;
    box-shadow: 0 18px 35px rgba(17, 18, 22, .25);
    height: 190px;
    left: 28px;
    overflow: hidden;
    position: absolute;
    right: 28px
}

.motorcycle-photo:after {
    background: linear-gradient(180deg, transparent 25%, rgba(17, 18, 22, .72));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute
}

.motorcycle-photo img {
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    width: 100%
}

.alert-list {
    max-height: 480px;
    overflow-y: auto;
    padding: 8px 25px 12px
}

.alert-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 14px;
    grid-template-columns: 38px minmax(0, 1fr) auto 7px;
    padding: 16px 12px;
    transition: background .2s ease, transform .2s ease
}

.alert-row:hover {
    background: #fffaf9;
    transform: translateX(2px)
}

.alert-row:last-child {
    border-bottom-color: transparent
}

.alert-row strong {
    font-size: 12px
}

.alert-row p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    margin: 5px 0 0
}

.alert-row time {
    color: #aaa;
    font-size: 10px;
    white-space: nowrap
}

.alert-row.unread {
    background: #fff7f6;
    box-shadow: inset 3px 0 0 var(--red)
}

.alert-row.unread strong {
    font-weight: 800
}

.alert-row.unread:after {
    background: var(--red);
    border-radius: 50%;
    content: "";
    grid-column: 4;
    height: 6px;
    width: 6px
}

/* Unified Lucide icon system */
:where(.lucide, [data-lucide]) {
    display: inline-block;
    flex: 0 0 auto;
    height: 18px;
    stroke-width: 1.8;
    vertical-align: middle;
    width: 18px
}

.nav-item .nav-icon {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex: 0 0 22px;
    height: 22px;
    justify-content: center;
    width: 22px
}

.nav-icon .lucide {
    height: 20px;
    width: 20px
}

.button,
.text-button,
.back-button,
.portal-arrow {
    align-items: center;
    display: inline-flex;
    gap: 8px
}

.button .lucide,
.text-button .lucide,
.back-button .lucide {
    height: 16px;
    width: 16px
}

.portal-arrow {
    justify-content: center
}

.portal-arrow .lucide {
    height: 20px;
    width: 20px
}

.icon-button,
.notification-button,
.menu-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    transition: color .2s ease, transform .2s ease
}

.icon-button:hover,
.notification-button:hover,
.menu-button:hover {
    color: var(--red);
    transform: translateY(-1px)
}

.profile-popover>button>.lucide {
    color: var(--muted);
    height: 17px;
    width: 17px
}

.profile-popover>button:hover>.lucide {
    color: var(--red-dark)
}

.stat-icon .lucide,
.summary-icon .lucide,
.activity-icon .lucide {
    height: 19px;
    width: 19px
}

.search-field>span,
.contact-detail,
.contact-call,
.contact-check,
.service-icon,
.vehicle-badge,
.sos-modal-icon,
.warning-icon,
.sos-wide>span,
.sos-meta>span,
.toast-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center
}

.search-field>span .lucide,
.contact-detail .lucide {
    height: 17px;
    width: 17px
}

.contact-call .lucide {
    height: 17px;
    width: 17px
}

.modal-close .lucide {
    height: 16px;
    width: 16px
}

.input-icon-wrap {
    display: block;
    margin-top: 8px;
    position: relative
}

.input-icon-wrap input {
    margin-top: 0;
    padding-left: 42px
}

.input-icon-wrap>.lucide {
    color: #91a1b9;
    height: 16px;
    left: 14px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    z-index: 1
}

.password-toggle .lucide {
    height: 17px;
    width: 17px
}


.map-controls button {
    align-items: center;
    background: #fff;
    color: #666;
    display: inline-flex;
    justify-content: center;
    font-size: 17px;
    height: 32px;
    width: 32px
}

.map-controls button .lucide {
    height: 15px;
    width: 15px
}

.crop-zoom-control {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 18px;
    gap: 10px
}

.crop-zoom-control .crop-zoom-icon {
    align-items: center;
    display: inline-flex;
    justify-content: center
}

.crop-zoom-control .lucide {
    color: var(--muted);
    height: 16px;
    width: 16px
}

.heading-sparkle.lucide,
.heading-sparkle {
    color: var(--red);
    display: inline-block;
    height: 20px;
    vertical-align: -2px;
    width: 20px
}

.admin-nav-live .lucide {
    fill: currentColor;
    height: 7px;
    width: 7px
}

.radar b .lucide {
    height: 14px;
    stroke-width: 2.2;
    width: 14px
}

.empty-state-icon .lucide {
    color: var(--muted);
    height: 32px;
    width: 32px
}

.sos-meta .lucide {
    color: inherit;
    height: 14px;
    margin-right: 2px;
    width: 14px
}

/* Profile-picture cropper */
.avatar-has-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: transparent
}

.avatar-editable {
    cursor: pointer;
    outline: none;
    position: relative
}

.avatar-editable:after {
    align-items: center;
    background: var(--red);
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: -2px;
    color: #fff;
    content: '+';
    display: flex;
    font-size: 13px;
    height: 22px;
    justify-content: center;
    position: absolute;
    right: -2px;
    width: 22px
}

.avatar-editable:focus-visible {
    box-shadow: 0 0 0 4px rgba(230, 87, 85, .28)
}

.avatar-crop-modal {
    z-index: 60
}

.avatar-crop-card {
    max-width: 520px;
    padding: 30px
}

.profile-edit-card {
    max-width: 480px;
}

.change-password-card {
    max-width: 480px;
}

.change-password-card .stack-form {
    gap: 15px;
}

.profile-edit-card .form-actions {
    margin-top: 8px;
}

.sidebar-brand .brand-mark {
    background: #24262d;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(241, 93, 98, .12);
    flex: none;
    height: 50px;
    overflow: hidden;
    width: 50px;
}

.sidebar-brand .brand-mark img {
    clip-path: none;
    object-fit: contain;
    padding: 1px;
}

.crop-stage {
    background: radial-gradient(circle at 50% 35%, #3f424b, #24262c 72%);
    border-radius: 18px;
    height: 350px;
    margin: 22px 0 18px;
    overflow: hidden;
    position: relative;
    touch-action: none;
    user-select: none
}

#avatar-crop-image {
    cursor: grab;
    left: 50%;
    max-width: none;
    position: absolute;
    top: 50%;
    transform-origin: center center;
    user-select: none;
    z-index: 1
}

#avatar-crop-image.is-dragging {
    cursor: grabbing
}

.crop-frame {
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(8, 10, 14, .62), 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 28px rgba(0, 0, 0, .22);
    height: min(72vw, 280px);
    left: 50%;
    max-height: 280px;
    max-width: 280px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(72vw, 280px);
    z-index: 2
}

.crop-hint {
    bottom: 15px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    left: 0;
    letter-spacing: .08em;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    z-index: 3
}

.crop-zoom-control {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 18px;
    gap: 10px
}

.crop-zoom-control input {
    accent-color: var(--red);
    flex: 1;
    margin: 0
}

.crop-status {
    color: var(--muted);
    font-size: 10px;
    margin: 11px 0 0;
    min-height: 15px
}

.avatar-crop-card.is-saving {
    pointer-events: none
}

.avatar-crop-card.is-saving .crop-status {
    color: var(--red-dark)
}

@media(min-width:761px) {
    .product-view .content-shell {
        margin-left: 262px
    }

    .product-view .sidebar {
        bottom: 0;
        height: 100vh;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        position: fixed;
        top: 0;
        z-index: 30
    }
}

@media(max-width:1000px) and (min-width:761px) {
    .emergency-hero {
        grid-template-columns: minmax(0, 1fr) 205px;
        padding: 26px
    }

    .emergency-orbit {
        height: 205px;
        width: 205px
    }
}

@media(max-width:760px) {
    .product-view.is-active {
        display: flex
    }

    .product-view .content-shell {
        margin-left: 0;
        width: 100%
    }

    .profile-popover-topbar {
        right: -6px
    }

    .emergency-hero {
        grid-template-columns: 1fr;
        min-height: unset;
        padding: 24px
    }

    .emergency-copy {
        grid-column: 1
    }

    .emergency-orbit {
        grid-column: 1;
        grid-row: 2;
        height: 220px;
        justify-self: center;
        width: 220px
    }

    .emergency-numbers .call-button {
        margin-left: 64px;
        margin-top: 2px
    }

    .motorcycle-photo {
        height: 160px;
        left: 20px;
        right: 20px
    }

    .alert-list {
        padding-left: 12px;
        padding-right: 12px
    }

    .alert-row {
        align-items: start;
        grid-template-columns: 36px minmax(0, 1fr) 7px
    }

    .alert-row time {
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px
    }

    .alert-row.unread:after {
        grid-column: 3;
        grid-row: 1
    }

    .avatar-crop-card {
        padding: 25px 20px
    }

    .crop-stage {
        height: min(78vw, 330px)
    }

    .avatar-crop-card .modal-actions {
        flex-direction: column-reverse
    }

    .avatar-crop-card .modal-actions .button {
        width: 100%
    }
}

#live-map {
    background: #e6ebe9;
    background-image: none
}

#live-map .leaflet-container {
    font-family: inherit;
    height: 100%;
    width: 100%;
    z-index: 1
}

#live-map .map-location-card {
    z-index: 500
}

.map-status-banner {
    background: rgba(24, 26, 31, .82);
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    left: 20px;
    padding: 7px 11px;
    position: absolute;
    top: 18px;
    z-index: 500
}

.map-controls {
    z-index: 500
}

.live-marker-wrapper {
    background: transparent;
    border: 0
}

.live-location-marker {
    background: var(--red);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(230, 87, 85, .22), 0 5px 15px rgba(120, 30, 30, .3);
    display: block;
    height: 24px;
    width: 24px
}

.live-location-marker i {
    background: #fff;
    border-radius: 50%;
    display: block;
    height: 6px;
    margin: 5px;
    width: 6px
}

.session-loading {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    display: flex;
    gap: 10px;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 100
}

.session-loading[hidden] {
    display: none
}

.session-loading-spinner {
    border: 2px solid #f3d6d4;
    border-radius: 50%;
    border-top-color: var(--red);
    height: 20px;
    width: 20px
}

/* Emergency center and contact actions */
.emergency-layout {
    align-items: stretch;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr)
}

.emergency-hero {
    background: linear-gradient(135deg, #a9232c 0%, #d9474e 55%, #ed6967 100%);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 20px 44px rgba(171, 45, 49, .2);
    min-height: 390px;
    padding: 38px
}

.emergency-hero:after {
    background: radial-gradient(circle at 82% 50%, rgba(255, 255, 255, .16), transparent 32%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute
}

.emergency-copy h2 {
    font-size: clamp(32px, 3vw, 44px);
    letter-spacing: -.05em
}

.warning-icon {
    height: 48px;
    width: 48px
}

.warning-icon .lucide {
    height: 23px;
    width: 23px
}

.sos-wide {
    align-items: center;
    box-shadow: 0 10px 22px rgba(80, 15, 20, .16);
    display: inline-flex;
    gap: 10px;
    min-height: 54px;
    transition: transform .2s ease, box-shadow .2s ease
}

.sos-wide:hover {
    box-shadow: 0 14px 28px rgba(80, 15, 20, .24);
    transform: translateY(-2px)
}

.sos-wide .lucide {
    height: 20px;
    width: 20px
}

.sos-wide span {
    font-size: inherit;
    margin: 0
}

.orbit-sos {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, .08), 0 0 0 28px rgba(255, 255, 255, .05);
    animation: sos-pulse 2.8s ease-in-out infinite
}

@keyframes sos-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 14px rgba(255, 255, 255, .08), 0 0 0 28px rgba(255, 255, 255, .05)
    }

    50% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, .12), 0 0 0 38px rgba(255, 255, 255, .06)
    }
}

.emergency-info {
    border-radius: 24px;
    padding-bottom: 10px
}

.contact-mini-list {
    padding: 0 28px
}

.contact-mini {
    gap: 13px;
    padding: 18px 0
}

.contact-mini div {
    min-width: 0
}

.contact-mini small {
    margin-top: 3px
}

.contact-phone {
    align-items: center;
    color: #9b9698;
    display: flex;
    font-size: 10px;
    gap: 5px;
    margin-top: 6px
}

.contact-phone .lucide {
    height: 12px;
    width: 12px
}

.contact-mini-actions {
    display: flex;
    gap: 6px;
    margin-left: auto
}

.contact-call,
.contact-message {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    height: 31px;
    justify-content: center;
    margin-left: 0;
    width: 31px
}

.contact-call {
    background: #fbe7e5;
    color: var(--red-dark)
}

.contact-message {
    background: #f2f5fa;
    color: #637c9b
}

.contact-call:hover,
.contact-message:hover {
    transform: translateY(-1px)
}

.contact-call .lucide,
.contact-message .lucide {
    height: 15px;
    width: 15px
}

.contact-check {
    flex: 0 0 auto
}

.service-card {
    border-radius: 18px;
    min-height: 92px;
    padding: 19px 22px
}

.service-icon .lucide {
    height: 21px;
    width: 21px
}

.call-button {
    align-items: center;
    display: inline-flex;
    gap: 7px
}

.call-button .lucide {
    height: 15px;
    width: 15px
}

.contacts-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.contact-card {
    border-radius: 20px;
    min-height: 290px;
    padding: 24px
}

.contact-card .avatar-large {
    box-shadow: 0 0 0 7px #fff, 0 0 0 8px rgba(30, 31, 36, .05)
}

.contact-card h3 {
    font-size: 18px;
    margin-top: 20px
}

.contact-card-actions {
    align-items: center
}

.contact-card-actions .button {
    flex: 1;
    justify-content: center
}

.contact-call-button {
    box-shadow: 0 7px 14px rgba(194, 52, 59, .15)
}

.contact-message-button {
    background: #f3f6fb;
    color: #526a85
}

/* Motorcycle card */
.vehicle-preview {
    background: linear-gradient(160deg, #17191f, #30323a);
    border-radius: 24px;
    min-height: 620px;
    padding: 22px;
    display: block
}

.vehicle-card-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px
}

.vehicle-card-top .status-tag {
    background: rgba(226, 248, 237, .14);
    color: #c5f0d8
}

.vehicle-badge {
    background: rgba(255, 255, 255, .12);
    height: 44px;
    margin: 0;
    width: 44px
}

.vehicle-badge .lucide {
    height: 21px;
    width: 21px
}

.vehicle-image {
    background: linear-gradient(145deg, #353943, #181a20);
    border-radius: 18px;
    height: 250px;
    overflow: hidden;
    position: relative
}

.vehicle-image img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.vehicle-image:after {
    background: linear-gradient(180deg, transparent 44%, rgba(11, 12, 15, .72));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute
}

.vehicle-image.is-fallback {
    background: radial-gradient(circle at 50% 42%, #e45757 0 14%, transparent 15%), linear-gradient(145deg, #454955, #1a1c22)
}

.vehicle-image-label {
    align-items: center;
    bottom: 14px;
    color: #fff;
    display: flex;
    font-size: 10px;
    gap: 6px;
    left: 15px;
    position: absolute;
    z-index: 1
}

.vehicle-image-label .lucide {
    height: 14px;
    width: 14px
}

.vehicle-photo-upload {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(24, 26, 32, .76);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: 700 10px 'Manrope', sans-serif;
    gap: 7px;
    padding: 9px 11px;
    position: absolute;
    right: 12px;
    top: 12px;
    transition: background .18s ease, transform .18s ease;
    z-index: 2;
}

.vehicle-photo-upload:hover {
    background: rgba(24, 26, 32, .94);
    transform: translateY(-1px);
}

.vehicle-photo-upload:disabled {
    cursor: progress;
    opacity: .7;
}

.vehicle-photo-upload .lucide {
    height: 14px;
    width: 14px;
}

.vehicle-copy {
    padding: 24px 6px 0
}

.vehicle-preview .eyebrow {
    color: #b7bac3
}

.vehicle-preview h2 {
    font-size: clamp(25px, 2.7vw, 34px);
    letter-spacing: -.05em;
    margin: 6px 0
}

.vehicle-preview .muted {
    color: #9ca0ab
}

.vehicle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 22px 0 24px
}

.vehicle-chips span {
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    color: #dce0e7;
    display: inline-flex;
    font-size: 10px;
    gap: 6px;
    padding: 8px 10px
}

.vehicle-chips .lucide {
    height: 13px;
    width: 13px;
    color: #f5a4a4
}

.vehicle-preview .vehicle-line {
    margin-top: 0
}

.vehicle-preview .vehicle-line small {
    color: #9ca0ab
}

/* Alerts and notifications */
.alert-panel {
    border-radius: 22px;
    overflow: hidden
}

.alert-panel .card-heading {
    padding: 25px 25px 18px
}

.alert-filter-count {
    color: #aaa;
    font-size: 11px
}

.alert-filters {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 7px;
    padding: 0 25px 16px
}

.alert-filter {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 14px;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.alert-filter:hover {
    background: #fff5f3;
    color: var(--red-dark)
}

.alert-filter.is-active {
    background: #fff0ee;
    border-color: #f4d4d1;
    color: var(--red-dark)
}

.alert-list {
    max-height: 560px;
    overflow-y: auto;
    padding: 10px 25px 15px
}

.alert-group-title {
    align-items: center;
    color: #989397;
    display: flex;
    font-size: 10px;
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: .14em;
    padding: 15px 12px 7px;
    text-transform: uppercase
}

.alert-group-title span:last-child {
    background: #f5f1f0;
    border-radius: 999px;
    color: #aaa;
    font-size: 9px;
    letter-spacing: 0;
    padding: 3px 7px
}

.alert-row {
    border: 1px solid transparent;
    border-radius: 14px;
    display: grid;
    gap: 13px;
    grid-template-columns: 38px minmax(0, 1fr) auto 7px;
    margin-bottom: 4px;
    padding: 14px 12px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease
}

.alert-row:hover {
    background: #fffaf9;
    border-color: #f3e5e2;
    transform: translateX(2px)
}

.alert-row.unread {
    background: #fff7f6;
    border-color: #f8dfdc;
    box-shadow: inset 3px 0 0 var(--red)
}

.alert-row .activity-icon {
    align-items: center;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px
}

.alert-row .activity-icon .lucide {
    height: 18px;
    width: 18px
}

.alert-row strong {
    font-size: 12px
}

.alert-row.unread strong {
    font-weight: 800
}

.alert-row p {
    line-height: 1.45;
    margin: 4px 0 0
}

.alert-row time {
    font-size: 10px;
    white-space: nowrap
}

.alert-row.unread:after {
    grid-column: 4
}

@media(max-width:1100px) {
    .contacts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .vehicle-preview {
        min-height: 580px
    }
}

@media(max-width:760px) {
    .emergency-layout {
        grid-template-columns: 1fr
    }

    .emergency-hero {
        min-height: 570px;
        padding: 25px
    }

    .emergency-copy {
        max-width: none
    }

    .emergency-orbit {
        bottom: 25px;
        right: 50%;
        top: auto;
        transform: translateX(50%)
    }

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

    .contact-mini-list {
        padding: 0 18px
    }

    .contact-mini {
        align-items: flex-start
    }

    .contact-mini-actions {
        margin-left: auto
    }

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

    .contact-card {
        min-height: unset
    }

    .vehicle-preview {
        min-height: unset;
        padding: 16px
    }

    .vehicle-image {
        height: 210px
    }

    .vehicle-copy {
        padding: 20px 4px 0
    }

    .vehicle-chips {
        margin-bottom: 20px
    }

    .vehicle-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }

    .alert-panel .card-heading {
        padding-left: 18px;
        padding-right: 18px
    }

    .alert-filters {
        padding-left: 18px;
        padding-right: 18px
    }

    .alert-list {
        padding-left: 10px;
        padding-right: 10px
    }

    .alert-row {
        align-items: start;
        grid-template-columns: 36px minmax(0, 1fr) 7px
    }

    .alert-row time {
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px
    }

    .alert-row.unread:after {
        grid-column: 3;
        grid-row: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .orbit-sos {
        animation: none
    }

    .sos-wide,
    .contact-call,
    .contact-message,
    .alert-row {
        transition: none
    }
}

/* Keep contact actions inside each card at every desktop width. */
.contact-card-actions {
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
    width: 100%
}

.contact-card-actions>.button {
    min-width: 0;
    overflow: hidden;
    padding-left: 7px;
    padding-right: 7px;
    white-space: nowrap
}

.contact-card-actions>.button .lucide {
    flex: 0 0 auto;
    height: 15px;
    width: 15px
}

/* Final sizing pass for the contact action row. */
.contact-card-actions {
    gap: 6px;
    grid-template-columns: minmax(78px, 1fr) minmax(88px, 1.1fr) 40px
}

.contact-card-actions>.button {
    align-items: center;
    font-size: 10px !important;
    gap: 5px;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 9px 6px !important;
    text-decoration: none;
    white-space: nowrap
}

.contact-card-actions>.button .lucide {
    height: 14px;
    width: 14px
}

.contact-card-actions>.contact-message-button {
    color: #526a85;
    min-width: 0
}

/* Contact cards now use only the two primary actions. */
.contact-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(max-width:420px) {
    .contact-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 40px
    }

    .contact-card-actions .contact-call-button,
    .contact-card-actions .contact-message-button {
        grid-column: auto;
        grid-row: auto
    }
}

/* Interactive notification popover */
.notification-menu-wrap {
    position: relative
}

.notification-count[hidden],
.notification-button b[hidden] {
    display: none
}

.notification-popover[hidden] {
    display: none
}

.notification-popover {
    animation: notification-popover-in .18s ease-out;
    background: #fff;
    border: 1px solid rgba(232, 228, 226, .95);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(35, 27, 29, .18);
    overflow: hidden;
    position: absolute;
    right: -6px;
    top: calc(100% + 14px);
    width: min(380px, calc(100vw - 32px));
    z-index: 50
}

.notification-popover:before {
    background: #fff;
    border-left: 1px solid rgba(232, 228, 226, .95);
    border-top: 1px solid rgba(232, 228, 226, .95);
    content: "";
    height: 10px;
    position: absolute;
    right: 25px;
    top: -6px;
    transform: rotate(45deg);
    width: 10px
}

.notification-popover-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px 19px 15px;
    position: relative;
    z-index: 1
}

.notification-popover-header strong {
    display: block;
    font-size: 14px;
    letter-spacing: -.02em
}

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

.notification-mark-read {
    background: transparent;
    color: var(--red-dark);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 0;
    white-space: nowrap
}

.notification-mark-read:hover {
    text-decoration: underline
}

.notification-feed {
    max-height: 385px;
    overflow-y: auto;
    padding: 7px
}

.notification-item {
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 11px;
    padding: 12px;
    width: 100%;
    text-align: left;
    transition: background .2s ease, transform .2s ease
}

.notification-item:hover {
    background: #fff7f5;
    transform: translateX(2px)
}

.notification-item.unread {
    background: #fff5f3
}

.notification-item+.notification-item {
    margin-top: 2px
}

.notification-item-icon {
    align-items: center;
    border-radius: 11px;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center
}

.notification-item-icon .lucide {
    height: 17px;
    width: 17px
}

.notification-item-icon.red {
    background: #fbe1df;
    color: #b32832
}

.notification-item-icon.orange {
    background: #fff0d7;
    color: #c47a13
}

.notification-item-icon.green {
    background: #e4f6ed;
    color: #2c9e72
}

.notification-item-icon.blue {
    background: #e7f0f8;
    color: #4f83a6
}

.notification-item-copy {
    display: block;
    min-width: 0;
    padding-right: 3px
}

.notification-item-copy strong {
    color: var(--ink);
    display: block;
    font-size: 11px;
    line-height: 1.3
}

.notification-item-copy small {
    color: var(--muted);
    display: block;
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.notification-item-copy time {
    color: #aaa;
    display: block;
    font-size: 9px;
    margin-top: 6px
}

.notification-unread-dot {
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffe9e7;
    flex: 0 0 6px;
    height: 6px;
    margin: 7px 3px 0 auto;
    width: 6px
}

.notification-empty {
    color: var(--muted);
    padding: 34px 18px;
    text-align: center
}

.notification-empty>span {
    align-items: center;
    background: #fff1ef;
    border-radius: 50%;
    color: var(--red);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 9px;
    width: 42px
}

.notification-empty .lucide {
    height: 19px;
    width: 19px
}

.notification-empty strong {
    color: var(--ink);
    display: block;
    font-size: 12px
}

.notification-empty p {
    font-size: 10px;
    margin: 5px 0 0
}

.notification-popover-footer {
    align-items: center;
    background: #fffafa;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--red-dark);
    display: flex;
    font-size: 10px;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    padding: 14px;
    width: 100%
}

.notification-popover-footer:hover {
    background: #fff2f0
}

.notification-popover-footer .lucide {
    height: 14px;
    width: 14px
}

@keyframes notification-popover-in {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@media(max-width:760px) {
    .notification-popover {
        position: fixed;
        right: 14px;
        top: 72px;
        width: min(380px, calc(100vw - 28px))
    }

    .notification-popover:before {
        right: 70px
    }
}

@media(prefers-reduced-motion:reduce) {
    .notification-popover {
        animation: none
    }

    .notification-item {
        transition: none
    }
}

/* Admin operations console ------------------------------------------------ */
.product-view.admin-mode {
    background: #f5f7fb;
    color: #1e293b;
    display: block;
    min-height: 100vh;
}

.product-view.admin-mode > .sidebar,
.product-view.admin-mode > .content-shell { display: none; }

.admin-shell {
    background: #f5f7fb;
    color: #1e293b;
    display: none;
    min-height: 100vh;
    width: 100%;
}

.product-view.admin-mode .admin-shell { display: flex; }

.admin-sidebar {
    background: #172235;
    color: #fff;
    display: flex;
    flex: 0 0 256px;
    flex-direction: column;
    min-height: 100vh;
    padding: 26px 16px 20px;
    position: fixed;
    width: 256px;
    z-index: 20;
}

.admin-brand { align-items: center; display: flex; gap: 11px; padding: 0 12px 28px; }
.admin-brand-mark { align-items: center; background: #f15d62; border-radius: 10px; display: flex; height: 37px; justify-content: center; overflow: hidden; width: 37px; }
.admin-brand-mark img { filter: brightness(0) invert(1); height: 28px; object-fit: contain; width: 28px; }
.admin-brand strong { display: block; font: 800 21px/1 'Space Grotesk', sans-serif; letter-spacing: -.6px; }
.admin-brand small { color: #90a0b7; display: block; font-size: 10px; margin-top: 5px; }
.admin-workspace { align-items: center; background: #223149; border: 1px solid #2b3b55; border-radius: 12px; display: flex; gap: 10px; margin: 0 0 25px; padding: 11px; }
.admin-workspace > span:nth-child(2) { flex: 1; min-width: 0; }
.admin-workspace strong, .admin-workspace small { display: block; }
.admin-workspace strong { color: #f4f7fb; font-size: 11px; font-weight: 700; }
.admin-workspace small { color: #93a4bc; font-size: 10px; margin-top: 3px; }
.admin-workspace > svg { color: #8193ad; height: 14px; width: 14px; }
.admin-workspace-icon { align-items: center; background: #314563; border-radius: 8px; color: #82aefb; display: flex; height: 30px; justify-content: center; width: 30px; }
.admin-workspace-icon svg { height: 16px; width: 16px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav-label { color: #71829b; font-size: 10px; font-weight: 800; letter-spacing: .11em; margin: 0 12px 8px; text-transform: uppercase; }
.admin-nav-label-spaced { margin-top: 25px; }
.admin-nav-item { align-items: center; background: transparent; border: 0; border-radius: 9px; color: #a6b4c8; cursor: pointer; display: flex; font: 600 13px/1.2 'Manrope', sans-serif; gap: 12px; padding: 12px; text-align: left; transition: background .18s ease, color .18s ease; width: 100%; }
.admin-nav-item svg { color: #8394ac; height: 17px; stroke-width: 1.8; width: 17px; }
.admin-nav-item span { flex: 1; }
.admin-nav-item:hover { background: #223149; color: #fff; }
.admin-nav-item.is-active { background: #f15d62; box-shadow: 0 7px 16px rgba(241, 93, 98, .18); color: #fff; }
.admin-nav-item.is-active svg { color: #fff; }
.admin-nav-item b { align-items: center; background: #30425d; border-radius: 10px; color: #dce7f5; display: inline-flex; font-size: 9px; height: 19px; justify-content: center; min-width: 19px; padding: 0 5px; }
.admin-nav-item .admin-nav-alert { background: #fff1f1; color: #d65559; }
.admin-nav-item .admin-nav-live { background: transparent; color: #5fdb9a; font-size: 14px; padding: 0; }
.admin-sidebar-bottom { border-top: 1px solid #293951; margin-top: auto; padding-top: 17px; }
.admin-logout { margin-top: 3px; }
.admin-help-card { align-items: center; background: #223149; border: 1px solid #2b3b55; border-radius: 12px; display: flex; gap: 9px; margin-top: 20px; padding: 12px 10px; }
.admin-help-card > div { flex: 1; min-width: 0; }
.admin-help-card strong, .admin-help-card small { display: block; }
.admin-help-card strong { color: #e8eef7; font-size: 10px; }
.admin-help-card small { color: #93a4bc; font-size: 9px; margin-top: 3px; }
.admin-help-card > svg { color: #8294ad; height: 14px; width: 14px; }
.admin-help-icon { align-items: center; background: #334963; border-radius: 7px; color: #8ab4fb; display: flex; height: 28px; justify-content: center; width: 28px; }
.admin-help-icon svg { height: 15px; width: 15px; }

.admin-main { margin-left: 256px; min-height: 100vh; width: calc(100% - 256px); }
.admin-header { align-items: center; background: rgba(255, 255, 255, .94); border-bottom: 1px solid #e8edf4; display: flex; height: 74px; justify-content: space-between; padding: 0 clamp(24px, 4vw, 56px); position: sticky; top: 0; z-index: 10; }
.admin-breadcrumb { align-items: center; color: #94a0b2; display: flex; font-size: 12px; gap: 9px; }
.admin-breadcrumb svg { height: 14px; width: 14px; }
.admin-breadcrumb strong { color: #334155; font-size: 12px; }
.admin-header-actions { align-items: center; display: flex; gap: 19px; }
.admin-search { align-items: center; background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 8px; color: #9ca8b8; display: flex; gap: 9px; height: 38px; padding: 0 11px; width: min(300px, 32vw); }
.admin-search svg { height: 16px; width: 16px; }
.admin-search input, .admin-inline-search input { background: transparent; border: 0; color: #334155; font: 500 11px 'Manrope', sans-serif; min-width: 0; outline: 0; width: 100%; }
.admin-search input::placeholder, .admin-inline-search input::placeholder { color: #9ba7b6; }
.admin-search kbd { background: #fff; border: 1px solid #e0e6ee; border-radius: 4px; color: #a2adbb; font-size: 9px; padding: 3px 5px; white-space: nowrap; }
.admin-header-divider { background: #e4e9f0; height: 25px; width: 1px; }
.admin-icon-button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #77859a; cursor: pointer; display: inline-flex; height: 36px; justify-content: center; position: relative; width: 36px; }
.admin-icon-button:hover { background: #f1f4f8; color: #43546a; }
.admin-icon-button svg { height: 18px; width: 18px; }
.admin-notification-button b { align-items: center; background: #f15d62; border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: 8px; height: 17px; justify-content: center; position: absolute; right: 1px; top: 0; width: 17px; }
.admin-profile-wrap { position: relative; }
.admin-profile-button { align-items: center; background: transparent; border: 0; color: #1e293b; cursor: pointer; display: flex; gap: 9px; padding: 3px 0; text-align: left; }
.admin-profile-button > span:nth-child(2) { min-width: 92px; }
.admin-profile-button strong, .admin-profile-button small { display: block; }
.admin-profile-button strong { font-size: 11px; font-weight: 800; }
.admin-profile-button small { color: #8996a7; font-size: 10px; margin-top: 3px; }
.admin-profile-button > svg { color: #92a0af; height: 14px; width: 14px; }
.admin-avatar { align-items: center; background: #e3edff; border-radius: 50%; color: #4775cb; display: inline-flex; flex: none; font-size: 10px; font-weight: 800; height: 35px; justify-content: center; width: 35px; }
.admin-avatar-large { font-size: 16px; height: 52px; width: 52px; }
.admin-profile-menu { background: #fff; border: 1px solid #e7ecf2; border-radius: 12px; box-shadow: 0 18px 35px rgba(27, 47, 75, .14); min-width: 218px; padding: 8px; position: absolute; right: 0; top: 47px; z-index: 30; }
.admin-profile-menu[hidden] { display: none; }
.admin-profile-menu-heading { align-items: center; border-bottom: 1px solid #eef1f5; display: flex; gap: 9px; padding: 8px 8px 12px; }
.admin-profile-menu-heading strong, .admin-profile-menu-heading small { display: block; }
.admin-profile-menu-heading strong { font-size: 11px; }
.admin-profile-menu-heading small { color: #8b98a8; font-size: 10px; margin-top: 3px; }
.admin-profile-menu button { align-items: center; background: none; border: 0; border-radius: 7px; color: #536174; cursor: pointer; display: flex; font: 600 11px 'Manrope', sans-serif; gap: 10px; padding: 10px 8px; text-align: left; width: 100%; }
.admin-profile-menu button:hover { background: #f5f7fa; color: #24344b; }
.admin-profile-menu button svg { height: 15px; width: 15px; }
.admin-header-mobile { display: none; }

.admin-content { margin: 0 auto; max-width: 1560px; padding: 39px clamp(24px, 4vw, 56px) 64px; }
.admin-page { display: none; }
.admin-page.is-active { display: block; }
.admin-page-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 29px; }
.admin-page-heading h1 { color: #1e293b; font: 800 29px/1.12 'Space Grotesk', sans-serif; letter-spacing: -.75px; margin: 5px 0 8px; }
.admin-page-heading h1 span { color: #f0ab4b; font-size: 20px; }
.admin-page-heading p:not(.admin-eyebrow) { color: #8a97a8; font-size: 12px; margin: 0; }
.admin-eyebrow { color: #7d8ba0; font-size: 10px; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.admin-heading-actions, .admin-table-actions { align-items: center; display: flex; gap: 10px; }
.admin-button { align-items: center; border: 1px solid transparent; border-radius: 8px; cursor: pointer; display: inline-flex; font: 700 11px 'Manrope', sans-serif; gap: 8px; height: 38px; justify-content: center; padding: 0 14px; transition: all .18s ease; }
.admin-button svg, .admin-text-button svg, .admin-filter-button svg { height: 15px; width: 15px; }
.admin-button-primary { background: #f15d62; box-shadow: 0 5px 12px rgba(241, 93, 98, .18); color: #fff; }
.admin-button-primary:hover { background: #df4f55; transform: translateY(-1px); }
.admin-button-secondary, .admin-filter-button { background: #fff; border-color: #e2e8f0; color: #5c6a7d; }
.admin-button-secondary:hover, .admin-filter-button:hover { background: #f8fafc; border-color: #ced8e4; }
.admin-button-full { margin-top: 23px; width: 100%; }
.admin-stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 19px; }
.admin-stat-card, .admin-panel, .admin-alert-summary, .admin-report-card { background: #fff; border: 1px solid #e8edf3; border-radius: 12px; box-shadow: 0 8px 22px rgba(39, 58, 88, .035); }
.admin-stat-card { min-height: 160px; padding: 19px 20px; }
.admin-stat-top { align-items: center; display: flex; justify-content: space-between; }
.admin-stat-icon { align-items: center; border-radius: 9px; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.admin-stat-icon svg { height: 18px; width: 18px; }
.admin-stat-icon-blue { background: #e8f0ff; color: #5b88e8; }
.admin-stat-icon-green { background: #e5f7ed; color: #39a875; }
.admin-stat-icon-amber { background: #fff3dd; color: #db9a3f; }
.admin-stat-icon-red { background: #ffebec; color: #e15d63; }
.admin-stat-trend { align-items: center; border-radius: 5px; display: inline-flex; font-size: 9px; font-weight: 800; gap: 3px; padding: 5px 6px; }
.admin-stat-trend svg { height: 12px; width: 12px; }
.admin-stat-trend.positive { background: #edf9f3; color: #39a875; }
.admin-stat-trend.negative { background: #fff0f0; color: #dc6064; }
.admin-stat-trend.neutral { background: #fff7e8; color: #bd812b; }
.admin-stat-card p { color: #77859a; font-size: 11px; margin: 20px 0 4px; }
.admin-stat-card > strong { color: #1e293b; display: block; font: 800 25px/1 'Space Grotesk', sans-serif; }
.admin-stat-card > small { color: #9aa6b5; display: block; font-size: 10px; margin-top: 8px; }
.admin-dashboard-grid { display: grid; gap: 19px; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 1fr); margin-bottom: 19px; }
.admin-panel { overflow: hidden; }
.admin-panel-heading { align-items: center; display: flex; justify-content: space-between; padding: 21px 22px 0; }
.admin-panel-heading h2 { color: #26364d; font: 800 16px/1.2 'Space Grotesk', sans-serif; margin: 5px 0 0; }
.admin-panel-heading select { background: #fafbfd; border: 1px solid #e4eaf1; border-radius: 6px; color: #6f7d90; font: 600 10px 'Manrope', sans-serif; padding: 7px 10px; }
.admin-chart-panel { min-height: 360px; padding-bottom: 20px; }
.admin-chart-legend { display: flex; gap: 18px; padding: 19px 22px 2px; }
.admin-chart-legend span { align-items: center; color: #8995a5; display: inline-flex; font-size: 10px; gap: 7px; }
.legend-dot { border-radius: 50%; height: 7px; width: 7px; }
.legend-dot-blue { background: #5a8dee; }.legend-dot-red { background: #ef777a; }
.admin-chart { height: 255px; margin: 13px 22px 0; position: relative; }
.admin-chart-grid { bottom: 28px; display: flex; flex-direction: column; height: calc(100% - 28px); justify-content: space-between; left: 0; position: absolute; top: 0; }
.admin-chart-grid span { color: #aab4c1; font-size: 9px; transform: translateY(-50%); }
.admin-chart::before { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #edf1f6 calc(25% - 1px), #edf1f6 25%); bottom: 28px; content: ''; left: 30px; position: absolute; right: 0; top: 0; }
.admin-chart svg { bottom: 28px; height: calc(100% - 28px); left: 31px; overflow: visible; position: absolute; right: 0; top: 0; width: calc(100% - 31px); }
.chart-area { fill: url(#ride-fill); }.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }.chart-line-blue { stroke: #5a8dee; }.chart-line-red { stroke: #ee777b; stroke-dasharray: 5 5; stroke-width: 2; }
.admin-chart-labels { bottom: 0; color: #aab4c1; display: flex; font-size: 9px; justify-content: space-between; left: 30px; position: absolute; right: 0; }
.admin-activity-panel { min-height: 360px; }
.admin-text-button { align-items: center; background: transparent; border: 0; color: #5e86d2; cursor: pointer; display: inline-flex; font: 700 10px 'Manrope', sans-serif; gap: 5px; padding: 4px 0; }
.admin-text-button:hover { color: #e15b60; }.admin-activity-list { padding: 11px 22px 13px; }
.admin-activity-item { align-items: center; border-bottom: 1px solid #eef2f6; display: flex; gap: 10px; padding: 15px 0; }.admin-activity-item:last-child { border: 0; }
.admin-activity-item > div { flex: 1; min-width: 0; }.admin-activity-item strong { color: #45546a; display: block; font-size: 11px; }.admin-activity-item p { color: #98a4b3; font-size: 9px; margin: 4px 0 0; }.admin-activity-item time { color: #a2adba; font-size: 9px; white-space: nowrap; }
.admin-activity-icon { align-items: center; border-radius: 50%; display: inline-flex; flex: none; height: 31px; justify-content: center; width: 31px; }.admin-activity-icon svg { height: 15px; width: 15px; }.admin-activity-icon.green { background: #e9f7ef; color: #38a875; }.admin-activity-icon.amber { background: #fff3e1; color: #d79639; }.admin-activity-icon.blue { background: #eaf1ff; color: #5b87e2; }.admin-activity-icon.slate { background: #eef2f6; color: #7a8a9f; }
.admin-table-panel { padding-bottom: 7px; }.admin-table-panel > .admin-panel-heading { padding-bottom: 18px; }.admin-table-actions { gap: 16px; }.admin-filter-button { align-items: center; border-radius: 7px; cursor: pointer; display: inline-flex; font: 700 10px 'Manrope', sans-serif; gap: 6px; height: 32px; padding: 0 10px; }
.admin-table-wrap { overflow-x: auto; }.admin-table { border-collapse: collapse; min-width: 780px; width: 100%; }.admin-table th { background: #f8fafc; color: #8a97a7; font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 12px 22px; text-align: left; text-transform: uppercase; white-space: nowrap; }.admin-table td { border-top: 1px solid #eef2f6; color: #657387; font-size: 11px; padding: 13px 22px; vertical-align: middle; white-space: nowrap; }.admin-table tbody tr { transition: background .15s ease; }.admin-table tbody tr:hover { background: #fbfcfe; }.admin-table td small { color: #9ba7b5; display: block; font-size: 9px; margin-top: 4px; }.admin-user-cell { align-items: center; display: flex; gap: 9px; }.admin-user-cell strong { color: #415168; display: block; font-size: 11px; }.admin-table-avatar { align-items: center; border-radius: 50%; display: inline-flex; flex: none; font-size: 9px; font-weight: 800; height: 30px; justify-content: center; width: 30px; }.avatar-blue { background: #e3edff; color: #4d79cb; }.avatar-lilac { background: #efe7fa; color: #8c65b3; }.avatar-peach { background: #ffebdf; color: #bd7953; }.admin-status { align-items: center; display: inline-flex; font-size: 10px; font-weight: 700; gap: 5px; }.admin-status i { background: currentColor; border-radius: 50%; height: 6px; width: 6px; }.admin-status.active { color: #37a774; }.admin-status.idle, .admin-status.pending, .admin-status.investigating { color: #d89438; }.admin-status.critical { color: #dc6267; }.admin-status.resolved { color: #37a774; }.admin-trip-pill { align-items: center; background: #f1f6ff; border-radius: 5px; color: #6287ce; display: inline-flex; font-size: 10px; gap: 5px; padding: 5px 7px; }.admin-trip-pill svg { height: 12px; width: 12px; }.admin-table-muted { color: #a9b2be !important; }.admin-row-menu { background: transparent; border: 0; color: #99a5b4; cursor: pointer; padding: 3px; }.admin-row-menu svg { height: 16px; width: 16px; }

.admin-count-pill { background: #eef3fc; border-radius: 10px; color: #6285cb; font: 700 10px 'Manrope', sans-serif; margin-left: 5px; padding: 4px 7px; vertical-align: middle; }.admin-inline-search { align-items: center; background: #fafbfd; border: 1px solid #e4eaf1; border-radius: 7px; color: #9ba8b8; display: flex; gap: 7px; height: 32px; padding: 0 9px; width: 170px; }.admin-inline-search svg { height: 14px; width: 14px; }.admin-inline-search input { font-size: 10px; }
.admin-live-status { align-items: center; background: #eaf8f0; border-radius: 7px; color: #369d6d; display: inline-flex; font-size: 10px; font-weight: 800; gap: 7px; padding: 9px 11px; }.admin-live-status i { background: #39b779; border-radius: 50%; box-shadow: 0 0 0 4px rgba(57, 183, 121, .12); height: 6px; width: 6px; }
.admin-fleet-layout { display: grid; gap: 19px; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); }.admin-fleet-map { min-height: 470px; }.admin-map-placeholder { background: #e7eef3; height: 390px; margin: 19px 22px 22px; overflow: hidden; position: relative; }.admin-map-grid { background-image: linear-gradient(35deg, rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(130deg, rgba(255,255,255,.65) 1px, transparent 1px); background-size: 78px 78px; inset: 0; opacity: .8; position: absolute; }.admin-map-road { background: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(196,210,216,.32); display: block; height: 24px; position: absolute; transform: rotate(-28deg); width: 120%; }.road-one { left: -90px; top: 150px; }.road-two { left: -40px; top: 282px; transform: rotate(24deg); }.road-three { left: 80px; top: 58px; transform: rotate(68deg); }.admin-map-label { color: #8b9da7; font-size: 11px; font-weight: 800; position: absolute; }.map-label-one { left: 20%; top: 27%; }.map-label-two { right: 18%; top: 20%; }.map-label-three { bottom: 20%; left: 31%; }.admin-map-pin { background: #f15d62; border: 3px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 4px 9px rgba(119,67,75,.25); height: 17px; position: absolute; transform: rotate(-45deg); width: 17px; }.admin-map-pin::after { background: #fff; border-radius: 50%; content: ''; height: 5px; left: 3px; position: absolute; top: 3px; width: 5px; }.pin-one { left: 46%; top: 34%; }.pin-two { left: 67%; top: 59%; background: #5d8eea; }.pin-three { left: 25%; top: 69%; background: #5d8eea; }.admin-map-legend { background: rgba(255,255,255,.93); border: 1px solid #e2e9ee; border-radius: 7px; bottom: 14px; display: flex; gap: 13px; padding: 8px 10px; position: absolute; right: 14px; }.admin-map-legend span { align-items: center; color: #778695; display: inline-flex; font-size: 9px; gap: 5px; }.admin-map-dot { border-radius: 50%; display: inline-block; height: 7px; width: 7px; }.admin-map-dot.online { background: #39b779; }.admin-map-dot.idle { background: #f0ad4e; }.admin-map-dot.offline { background: #bdc6d1; }
.admin-device-panel { padding-bottom: 22px; }.admin-device-total { color: #293a52; font: 800 22px 'Space Grotesk', sans-serif; }.admin-device-total small { color: #8e9baa; font: 500 10px 'Manrope', sans-serif; }.admin-device-progress { background: #edf1f5; border-radius: 5px; height: 9px; margin: 28px 22px 27px; overflow: hidden; }.admin-device-progress span { background: linear-gradient(90deg, #4bbb80, #7bd69c); border-radius: 5px; display: block; height: 100%; }.admin-device-stat { align-items: center; border-bottom: 1px solid #edf1f5; color: #7b8797; display: flex; font-size: 11px; justify-content: space-between; margin: 0 22px; padding: 13px 0; }.admin-device-stat span { align-items: center; display: inline-flex; gap: 7px; }.admin-device-stat strong { color: #33445b; font-size: 12px; }
.admin-alert-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-bottom: 19px; }.admin-alert-summary { align-items: center; display: flex; gap: 12px; padding: 17px 19px; }.admin-alert-summary > div { flex: 1; }.admin-alert-summary strong, .admin-alert-summary small { display: block; }.admin-alert-summary strong { color: #26374e; font: 800 22px 'Space Grotesk', sans-serif; }.admin-alert-summary small { color: #8996a6; font-size: 10px; margin-top: 4px; }.admin-summary-note { color: #c08b3c; font-size: 9px; font-weight: 800; }.admin-summary-note.positive { color: #36a772; }.admin-summary-note.negative { color: #d85e63; }.admin-alert-name { align-items: center; display: inline-flex; gap: 7px; font-weight: 700; }.admin-alert-dot { border-radius: 50%; height: 7px; width: 7px; }.admin-alert-dot.critical { background: #eb6c70; }.admin-alert-dot.warning { background: #e4a043; }
.admin-report-grid { display: grid; gap: 17px; grid-template-columns: repeat(3, 1fr); }.admin-report-card { min-height: 208px; padding: 23px; }.admin-report-icon { align-items: center; border-radius: 9px; display: flex; height: 38px; justify-content: center; width: 38px; }.admin-report-icon svg { height: 18px; width: 18px; }.admin-report-icon.blue { background: #e9f0ff; color: #5d88e0; }.admin-report-icon.amber { background: #fff3df; color: #d89639; }.admin-report-icon.green { background: #e8f7ef; color: #38a875; }.admin-report-card h2 { color: #2c3c53; font: 800 16px 'Space Grotesk', sans-serif; margin: 20px 0 8px; }.admin-report-card p { color: #8c99a9; font-size: 11px; line-height: 1.6; margin: 0 0 22px; }
.admin-settings-grid { display: grid; gap: 19px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.admin-settings-card { padding-bottom: 25px; }.admin-settings-card > label:not(.admin-toggle-row) { color: #637186; display: block; font-size: 10px; font-weight: 800; margin: 19px 22px 0; }.admin-settings-card input { background: #fafbfd; border: 1px solid #e4eaf1; border-radius: 7px; box-sizing: border-box; color: #35465d; display: block; font: 500 11px 'Manrope', sans-serif; height: 38px; margin-top: 7px; outline: 0; padding: 0 11px; width: 100%; }.admin-settings-card input:focus { border-color: #7ca0e8; box-shadow: 0 0 0 3px rgba(90, 141, 238, .1); }.admin-toggle-row { align-items: center; border-bottom: 1px solid #eef2f6; display: flex; gap: 15px; justify-content: space-between; margin: 0 22px; padding: 17px 0; }.admin-toggle-row:last-child { border: 0; }.admin-toggle-row span { flex: 1; }.admin-toggle-row strong, .admin-toggle-row small { display: block; }.admin-toggle-row strong { color: #526177; font-size: 11px; }.admin-toggle-row small { color: #98a4b4; font-size: 10px; margin-top: 4px; }.admin-toggle-row input { display: none; }.admin-toggle-row i { background: #dce3eb; border-radius: 12px; cursor: pointer; display: block; height: 22px; position: relative; width: 38px; }.admin-toggle-row i::after { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.15); content: ''; height: 16px; left: 3px; position: absolute; top: 3px; transition: transform .18s ease; width: 16px; }.admin-toggle-row input:checked + i { background: #5b8ee9; }.admin-toggle-row input:checked + i::after { transform: translateX(16px); }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

.admin-sos-row { background: #fff7f7; }
.admin-sos-activity-item { background: #fffafa; }
.admin-activity-icon.red { background: #fff0f0; color: #d95457; }
.map-heading-actions { align-items: center; display: flex; flex-shrink: 0; gap: 8px; }
.map-view-button { font-size: 10px; min-height: 32px; padding: 7px 13px; }
.live-location-modal { box-sizing: border-box; padding: clamp(8px, 2vw, 24px); z-index: 1100; }
.live-location-dialog { background: #fff; border: 1px solid rgba(229, 232, 238, .9); border-radius: 20px; box-shadow: 0 24px 80px rgba(25, 35, 50, .22); box-sizing: border-box; max-height: calc(100vh - 32px); max-width: 1280px; overflow-y: auto; position: relative; width: min(100%, 1280px); z-index: 1; }
.live-location-dialog > .modal-close { right: 14px; top: 12px; z-index: 2; }
.live-location-dialog .map-card { grid-row: auto; margin: 0; min-width: 0; width: 100%; }
.live-location-dialog .map-card .card-heading { padding-right: 112px; }
.live-location-dialog .map-area { height: min(64vh, 680px); min-height: 300px; }

@media (max-width: 1120px) {
    .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-dashboard-grid, .admin-fleet-layout { grid-template-columns: 1fr; }
    .admin-activity-panel { min-height: auto; }
}

@media (max-width: 760px) {
    .admin-sidebar { box-shadow: 12px 0 28px rgba(18, 35, 58, .18); left: -256px; transition: left .2s ease; }
    .admin-sidebar.is-open { left: 0; }
    .admin-main { margin-left: 0; width: 100%; }
    .admin-header { gap: 12px; height: 66px; padding: 0 18px; }
    .admin-header-mobile { display: block; }.admin-breadcrumb span, .admin-breadcrumb svg { display: none; }.admin-header-actions { gap: 8px; }.admin-search { display: none; }.admin-header-divider { display: none; }.admin-profile-button > span:nth-child(2), .admin-profile-button > svg { display: none; }
    .admin-content { padding: 28px 17px 46px; }.admin-page-heading { align-items: flex-start; flex-direction: column; gap: 18px; }.admin-page-heading h1 { font-size: 26px; }.admin-heading-actions { width: 100%; }.admin-heading-actions .admin-button { flex: 1; }.admin-stat-grid, .admin-alert-grid, .admin-report-grid, .admin-settings-grid { grid-template-columns: 1fr; }.admin-stat-card { min-height: 145px; }.admin-panel-heading { gap: 12px; padding-left: 17px; padding-right: 17px; }.admin-chart-legend, .admin-activity-list { padding-left: 17px; padding-right: 17px; }.admin-chart { margin-left: 17px; margin-right: 17px; }.admin-table th, .admin-table td { padding-left: 15px; padding-right: 15px; }.admin-table-actions { gap: 7px; }.admin-inline-search { width: 132px; }.admin-map-placeholder { margin-left: 17px; margin-right: 17px; }.admin-live-status { align-self: flex-start; }.admin-settings-card .admin-panel-heading { align-items: flex-start; }.admin-report-card { min-height: auto; }
}

@media (max-width: 600px) {
    .live-location-dialog { border-radius: 14px; max-height: calc(100vh - 16px); width: 100%; }
    .live-location-dialog .map-area { height: 56vh; min-height: 240px; }
    .live-location-dialog .map-card .card-heading { padding: 22px 104px 17px 18px; }
}

/* Rider tracking page */
.admin-preview-status { background: #eef4ff; color: #5478bb; }
.admin-preview-status i { background: #6a8fda; box-shadow: 0 0 0 4px rgba(106, 143, 218, .13); }
.admin-preview-status.is-live { background: #eaf8f0; color: #369d6d; }
.admin-preview-status.is-live i { background: #39b779; box-shadow: 0 0 0 4px rgba(57, 183, 121, .12); }
.admin-fleet-layout { align-items: stretch; gap: 18px; grid-template-columns: minmax(0, 1.72fr) minmax(290px, .78fr); }
.admin-fleet-map { min-height: 0; padding-bottom: 17px; }
.admin-map-feed-note { align-items: center; color: #8a97a9; display: inline-flex; font-size: 10px; font-weight: 700; gap: 6px; }
.admin-map-feed-note svg { color: #6987c5; height: 14px; width: 14px; }
.admin-map-feed-note.is-live { color: #309b69; }
.admin-map-feed-note.is-live svg { color: #309b69; }
.admin-map-heading-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.admin-map-view-button { font-size: 9px; height: 30px; min-height: 30px; padding: 0 10px; }
.admin-map-view-button svg { height: 13px; width: 13px; }
.admin-map-wheel-hint { color: #8a97a9; display: none; font-size: 9px; }
.admin-map-toolbar { display: flex; gap: 7px; margin: 18px 22px 11px; }
.admin-map-filter { align-items: center; background: #f7f9fc; border: 1px solid #e9eef4; border-radius: 999px; color: #758297; cursor: pointer; display: inline-flex; font: 700 9px 'Manrope', sans-serif; gap: 7px; min-height: 29px; padding: 0 11px; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.admin-map-filter:hover { border-color: #cbd8e9; color: #405b84; }
.admin-map-filter.is-active { background: #edf3ff; border-color: #dce7fa; color: #4d73bb; }
.admin-map-filter .admin-map-dot { height: 6px; width: 6px; }
.admin-map-placeholder { background: #e7eef3; border-radius: 11px; height: 356px; margin: 0 22px; overflow: hidden; position: relative; }
.admin-map-placeholder.leaflet-container { background: #e7eef3; font: 10px 'Manrope', sans-serif; z-index: 0; }
.admin-map-placeholder .leaflet-control-zoom { border: 1px solid rgba(31, 49, 72, .12); border-radius: 9px; box-shadow: 0 4px 15px rgba(31, 49, 72, .12); margin: 12px; overflow: hidden; }
.admin-map-placeholder .leaflet-control-zoom a { color: #354b6a; height: 29px; line-height: 29px; width: 29px; }
.admin-map-placeholder .leaflet-control-attribution { background: rgba(255,255,255,.8); border-radius: 5px 0 0; font-size: 8px; }
.admin-map-loading, .admin-map-error { align-items: center; color: #758499; display: flex; font-size: 11px; gap: 9px; inset: 0; justify-content: center; position: absolute; }
.admin-map-loading span { animation: admin-map-spin .8s linear infinite; border: 2px solid #dce5ef; border-right-color: #6588cf; border-radius: 50%; height: 15px; width: 15px; }
@keyframes admin-map-spin { to { transform: rotate(360deg); } }
.admin-map-footnote { align-items: center; color: #91a0b1; display: flex; flex-wrap: wrap; font-size: 9px; gap: 8px 14px; justify-content: space-between; margin: 11px 22px 0; }
.admin-map-footnote span:first-child { align-items: center; display: inline-flex; gap: 5px; }
.admin-map-footnote svg { height: 12px; width: 12px; }
.admin-tracking-marker-wrap { background: transparent; border: 0; }
.admin-tracking-marker { align-items: center; background: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 3px 11px rgba(33, 52, 79, .29); display: flex; height: 30px; justify-content: center; position: relative; width: 30px; }
.admin-tracking-marker::before { border: 1px solid currentColor; border-radius: 50%; content: ''; inset: -5px; opacity: .28; position: absolute; }
.admin-tracking-marker i { background: currentColor; border-radius: 50%; height: 9px; width: 9px; }
.admin-tracking-marker.online { color: #39ae79; }
.admin-tracking-marker.idle { color: #e6a341; }
.admin-map-popup { display: grid; gap: 4px; min-width: 145px; padding: 2px; }
.admin-map-popup strong { color: #2c3a50; font: 800 11px 'Manrope', sans-serif; }
.admin-map-popup span, .admin-map-popup small { color: #8290a2; font: 500 9px 'Manrope', sans-serif; }
.admin-map-popup small { color: #478d6d; font-weight: 800; }
.admin-device-panel { align-self: stretch; padding: 0 0 18px; }
.admin-device-panel .admin-panel-heading { padding-bottom: 17px; }
.admin-device-panel .admin-panel-heading h2 { margin-top: 5px; }
.admin-device-sync { align-items: center; background: #f1f5fb; border-radius: 999px; color: #7588a5; display: inline-flex; font-size: 9px; font-weight: 800; gap: 6px; padding: 6px 9px; }
.admin-device-sync i { background: #879dc0; border-radius: 50%; height: 6px; width: 6px; }
.admin-device-sync.is-live { background: #eaf8f0; color: #369d6d; }
.admin-device-sync.is-live i { background: #39b779; }
.admin-device-summary { align-items: center; background: linear-gradient(115deg, #f3faf6, #f7fbf9); border: 1px solid #e5f3eb; border-radius: 12px; display: flex; gap: 11px; margin: 0 20px; min-height: 76px; padding: 12px; }
.admin-device-summary-icon { align-items: center; background: #e0f3e8; border-radius: 10px; color: #36a773; display: inline-flex; flex: none; height: 38px; justify-content: center; width: 38px; }
.admin-device-summary-icon svg { height: 18px; width: 18px; }
.admin-device-summary > div { flex: 1; }
.admin-device-total { color: #203b31; display: block; font: 800 22px/1 'Space Grotesk', sans-serif; }
.admin-device-summary > div > span { color: #7c9789; display: block; font-size: 9px; margin-top: 5px; }
.admin-device-rate { background: #fff; border: 1px solid #e6f1e9; border-radius: 7px; color: #359e6b; font: 800 11px 'Space Grotesk', sans-serif; padding: 6px 8px; }
.admin-device-progress { background: #edf1f5; border-radius: 999px; display: flex; height: 9px; margin: 19px 21px 18px; overflow: hidden; }
.admin-device-progress span { display: block; height: 100%; transition: width .35s ease; }
.admin-device-progress span.online { background: #48b980; }
.admin-device-progress span.idle { background: #f0b14e; }
.admin-device-progress span.offline { background: #c7cfda; }
.admin-device-stat-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 20px; }
.admin-device-stat { background: #fbfcfe; border: 1px solid #edf1f5; border-radius: 10px; display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; padding: 11px 9px; }
.admin-device-stat span { align-items: center; color: #7a8799; display: inline-flex; font-size: 9px; gap: 6px; }
.admin-device-stat strong { color: #30425b; font: 800 17px/1 'Space Grotesk', sans-serif; }
.admin-device-stat small { color: #a0aaba; font-size: 8px; white-space: nowrap; }
.admin-device-stat.online { background: #f8fcf9; border-color: #e8f3eb; }
.admin-device-stat.idle { background: #fffdfa; border-color: #f4edde; }
.admin-device-stat.offline { background: #fafbfd; }
.admin-device-panel-footer { align-items: center; border-top: 1px solid #edf1f5; color: #8a97a8; display: flex; font-size: 9px; justify-content: space-between; margin: 16px 20px 14px; padding-top: 13px; }
.admin-device-panel-footer span:first-child { align-items: center; display: inline-flex; gap: 6px; }
.admin-device-panel-footer svg { color: #6b8dcb; height: 13px; width: 13px; }
.admin-device-panel .admin-button-full { border-radius: 9px; margin: 0 20px; width: calc(100% - 40px); }
@media (max-width: 600px) {
  .admin-map-toolbar { margin-left: 17px; margin-right: 17px; }
  .admin-map-placeholder { height: 300px; margin-left: 17px; margin-right: 17px; }
  .admin-map-footnote { align-items: flex-start; flex-direction: column; margin-left: 17px; margin-right: 17px; }
  .admin-device-summary, .admin-device-stat-grid { margin-left: 17px; margin-right: 17px; }
  .admin-device-panel .admin-panel-heading { padding-left: 17px; padding-right: 17px; }
  .admin-device-panel-footer { margin-left: 17px; margin-right: 17px; }
  .admin-device-panel .admin-button-full { margin-left: 17px; width: calc(100% - 34px); }
}
@media (max-width: 1120px) {
  .admin-fleet-layout { grid-template-columns: 1fr; }
}
.admin-map-modal { z-index: 35; }
.admin-map-dialog { background: #fff; border-radius: 18px; box-shadow: 0 22px 80px rgba(25, 15, 15, .24); box-sizing: border-box; max-height: calc(100vh - 36px); max-width: 1500px; overflow-y: auto; position: relative; width: calc(100vw - 56px); z-index: 1; }
.admin-map-dialog > .modal-close { background: #f2f5f9; color: #53647a; right: 18px; top: 16px; z-index: 3; }
.admin-map-modal .admin-fleet-map { border: 0; box-shadow: none; min-height: 0; width: 100%; }
.admin-map-modal .admin-panel-heading { padding-right: 64px; }
.admin-map-modal .admin-map-view-button { display: none; }
.admin-map-modal .admin-map-wheel-hint { display: inline; }
.admin-map-modal .admin-map-placeholder { height: min(66vh, 740px); min-height: 390px; }
@media (max-width: 600px) {
  .admin-map-dialog { border-radius: 13px; max-height: calc(100vh - 16px); width: calc(100vw - 16px); }
  .admin-map-dialog > .modal-close { right: 12px; top: 12px; }
  .admin-map-modal .admin-panel-heading { align-items: flex-start; padding-right: 50px; }
  .admin-map-modal .admin-map-heading-actions { gap: 0; }
  .admin-map-modal .admin-map-placeholder { height: 58vh; min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-map-loading span { animation-duration: 2.5s; }
}

/* Dashboard and sidebar refinement; the admin logo asset remains untouched. */
.admin-sidebar {
  background: linear-gradient(180deg, #19263c 0%, #142035 100%);
  border-right: 1px solid rgba(255, 255, 255, .045);
  box-shadow: 8px 0 30px rgba(18, 31, 51, .08);
  padding: 26px 15px 18px;
}
.admin-workspace {
  background: linear-gradient(135deg, rgba(42, 60, 86, .96), rgba(32, 48, 72, .96));
  border-color: rgba(150, 175, 210, .12);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 8px 18px rgba(10, 20, 36, .12);
  min-height: 58px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.admin-workspace:hover { background: #2a3c57; border-color: rgba(150, 175, 210, .24); transform: translateY(-1px); }
.admin-workspace-icon { background: rgba(106, 143, 205, .18); color: #9dbcf1; }
.admin-nav { gap: 6px; }
.admin-nav-label { color: #8291a8; font-size: 9px; letter-spacing: .14em; margin-bottom: 9px; }
.admin-nav-label-spaced { margin-top: 28px; }
.admin-nav-item {
  border: 1px solid transparent;
  border-radius: 10px;
  color: #aebbd0;
  font-size: 12px;
  min-height: 43px;
  padding: 10px 11px;
  pointer-events: auto;
  position: relative;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  z-index: 1;
}
.admin-nav-item svg {
  background: rgba(255, 255, 255, .045);
  border-radius: 7px;
  box-sizing: content-box;
  color: #9cacbf;
  height: 16px;
  padding: 6px;
  width: 16px;
}
.admin-nav-item:hover { background: rgba(255, 255, 255, .065); border-color: rgba(255, 255, 255, .055); color: #fff; transform: translateX(2px); }
.admin-nav-item:hover svg { background: rgba(255, 255, 255, .08); color: #d9e5f5; }
.admin-nav-item.is-active {
  background: linear-gradient(105deg, #f45f65, #e9535b);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 9px 20px rgba(231, 75, 85, .23), inset 0 1px rgba(255, 255, 255, .16);
  color: #fff;
  transform: none;
}
.admin-nav-item.is-active svg { background: rgba(255, 255, 255, .13); color: #fff; }
.admin-nav-item b { background: rgba(255, 255, 255, .1); color: #e4edf9; }
.admin-nav-item.is-active b:not(.admin-nav-live) { background: rgba(255, 255, 255, .17); color: #fff; }
.admin-nav-item .admin-nav-alert { background: #fff1f1; color: #d65559; }
.admin-sidebar-bottom { border-color: rgba(205, 219, 239, .13); padding-top: 15px; }
.admin-help-card {
  background: linear-gradient(135deg, rgba(42, 61, 88, .96), rgba(32, 49, 73, .96));
  border-color: rgba(150, 175, 210, .13);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  transition: border-color .18s ease, transform .18s ease;
}
.admin-help-card:hover { border-color: rgba(150, 175, 210, .28); transform: translateY(-1px); }
.admin-help-icon { background: rgba(106, 143, 205, .2); color: #9dbcf1; }

.admin-shell { background: #f3f6fb; }
.admin-header {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(33, 50, 75, .025);
}
.admin-search { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.admin-search:focus-within { background: #fff; border-color: #c8d6ea; box-shadow: 0 0 0 3px rgba(91, 136, 232, .09); }
.admin-icon-button:focus-visible, .admin-nav-item:focus-visible, .admin-button:focus-visible, .admin-text-button:focus-visible {
  outline: 3px solid rgba(101, 143, 220, .45);
  outline-offset: 2px;
}
.admin-content { padding-top: 33px; }
.admin-page[data-admin-page="dashboard"] > .admin-page-heading {
  background: linear-gradient(112deg, #fff 0%, #fff 57%, #f5f8ff 100%);
  border: 1px solid #e6edf6;
  border-radius: 16px;
  box-shadow: 0 7px 24px rgba(39, 58, 88, .035);
  margin-bottom: 21px;
  overflow: hidden;
  padding: 19px 22px;
  position: relative;
}
.admin-page[data-admin-page="dashboard"] > .admin-page-heading::after {
  background: radial-gradient(circle, rgba(105, 145, 224, .09), rgba(105, 145, 224, 0) 70%);
  content: '';
  height: 230px;
  pointer-events: none;
  position: absolute;
  right: -60px;
  top: -110px;
  width: 350px;
}
.admin-page[data-admin-page="dashboard"] > .admin-page-heading > * { position: relative; z-index: 1; }
.admin-page[data-admin-page="dashboard"] > .admin-page-heading .admin-eyebrow {
  background: #f0f4fb;
  border-radius: 999px;
  color: #71829b;
  display: inline-flex;
  font-size: 9px;
  letter-spacing: .1em;
  padding: 6px 9px;
}
.admin-page[data-admin-page="dashboard"] > .admin-page-heading h1 { font-size: 31px; margin-top: 10px; }
.admin-heading-actions { position: relative; z-index: 1; }
.admin-heading-actions .admin-button { min-width: 126px; }
.admin-stat-grid { gap: 14px; margin-bottom: 17px; }
.admin-stat-card {
  border-color: #e5ebf3;
  border-radius: 14px;
  box-shadow: 0 7px 22px rgba(39, 58, 88, .04);
  min-height: 153px;
  overflow: hidden;
  padding: 19px 20px 17px;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.admin-stat-card::before { border-radius: 999px; content: ''; height: 3px; left: 20px; position: absolute; right: 20px; top: 0; }
.admin-stat-card::after { border-radius: 50%; content: ''; height: 120px; opacity: .55; pointer-events: none; position: absolute; right: -56px; top: -66px; width: 120px; }
.admin-stat-card:nth-child(1)::before { background: #7297ec; }
.admin-stat-card:nth-child(1)::after { background: radial-gradient(circle, rgba(114, 151, 236, .12), transparent 70%); }
.admin-stat-card:nth-child(2)::before { background: #49b983; }
.admin-stat-card:nth-child(2)::after { background: radial-gradient(circle, rgba(73, 185, 131, .12), transparent 70%); }
.admin-stat-card:nth-child(3)::before { background: #e8ad50; }
.admin-stat-card:nth-child(3)::after { background: radial-gradient(circle, rgba(232, 173, 80, .14), transparent 70%); }
.admin-stat-card:nth-child(4)::before { background: #e87278; }
.admin-stat-card:nth-child(4)::after { background: radial-gradient(circle, rgba(232, 114, 120, .13), transparent 70%); }
.admin-stat-card:hover { border-color: #d7e1ef; box-shadow: 0 13px 28px rgba(39, 58, 88, .085); transform: translateY(-2px); }
.admin-stat-top, .admin-stat-card p, .admin-stat-card > strong, .admin-stat-card > small { position: relative; z-index: 1; }
.admin-stat-icon { border-radius: 11px; height: 40px; width: 40px; }
.admin-stat-icon-blue { background: #edf3ff; }
.admin-stat-icon-green { background: #eaf8f0; }
.admin-stat-icon-amber { background: #fff6e8; }
.admin-stat-icon-red { background: #fff0f0; }
.admin-stat-card p { color: #6f7f95; font-size: 11px; margin: 17px 0 5px; }
.admin-stat-card > strong { color: #1d2b40; font-size: 27px; }
.admin-dashboard-grid { gap: 17px; margin-bottom: 17px; }
.admin-panel, .admin-alert-summary, .admin-report-card { border-color: #e5ebf3; border-radius: 14px; box-shadow: 0 7px 22px rgba(39, 58, 88, .035); }
.admin-chart-panel, .admin-activity-panel { min-height: 365px; }
.admin-panel-heading { padding-top: 20px; }
.admin-panel-heading h2 { color: #24344b; font-size: 16px; }
.admin-chart-legend { padding-top: 16px; }
.admin-chart { height: 260px; margin-top: 10px; }
.admin-chart::before { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #edf1f6 calc(25% - 1px), #edf1f6 25%); }
.admin-activity-list { padding-top: 8px; }
.admin-activity-item { gap: 12px; padding: 15px 0; }
.admin-activity-icon { border: 1px solid rgba(70, 92, 125, .055); height: 34px; width: 34px; }
.admin-activity-item strong { color: #34445a; font-size: 11px; }
.admin-activity-item p { color: #8492a5; font-size: 9px; }
.admin-activity-item time { color: #8f9bae; font-size: 9px; }
.admin-text-button { border-radius: 6px; padding: 6px 7px; transition: background .16s ease, color .16s ease; }
.admin-text-button:hover { background: #f0f4fc; }
.admin-table-panel { border-radius: 14px; box-shadow: 0 7px 22px rgba(39, 58, 88, .035); }
.admin-table-panel > .admin-panel-heading { padding-bottom: 15px; }
.admin-table th { background: #f7f9fc; color: #718199; padding-bottom: 13px; padding-top: 13px; }
.admin-table td { padding-bottom: 15px; padding-top: 15px; }
.admin-table tbody tr:hover { background: #f8faff; }
.admin-table-avatar { box-shadow: inset 0 0 0 1px rgba(35, 52, 78, .04); height: 33px; width: 33px; }
.admin-status { align-items: center; background: #eef9f3; border-radius: 999px; padding: 6px 9px; }
.admin-status.idle { background: #fff6e8; }
.admin-trip-pill { border-radius: 999px; padding: 6px 9px; }

@media (max-width: 1120px) {
  .admin-main { margin-left: 256px; width: calc(100% - 256px); }
  .admin-sidebar { flex-basis: 256px; width: 256px; }
  .admin-content { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 760px) {
  .admin-sidebar { left: -256px; }
  .admin-sidebar.is-open { left: 0; }
  .admin-main { margin-left: 0; width: 100%; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading { align-items: flex-start; padding: 18px; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading h1 { font-size: 26px; }
  .admin-heading-actions { width: 100%; }
  .admin-heading-actions .admin-button { flex: 1; min-width: 0; }
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dashboard-grid { grid-template-columns: 1fr; }
  .admin-chart-panel, .admin-activity-panel { min-height: auto; }
}
@media (max-width: 480px) {
  .admin-content { padding-left: 14px; padding-right: 14px; }
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading { padding: 16px; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading h1 { font-size: 24px; }
  .admin-heading-actions { flex-wrap: wrap; }
}

.admin-report-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-report-overview { margin-top: 19px; }
.admin-report-library { margin-top: 19px; padding-bottom: 0; }
.admin-report-library-heading { padding-bottom: 16px; }
.admin-report-library-heading h2 { align-items: center; display: flex; gap: 7px; }
.admin-report-library-heading .admin-text-button { flex: none; }
.admin-report-dropzone { align-items: center; background: #fbfcfe; border: 1px dashed #ccd7e5; border-radius: 10px; color: #65758a; cursor: pointer; display: flex; gap: 13px; justify-content: center; margin: 0 22px 9px; min-height: 80px; padding: 14px; text-align: left; transition: background .18s ease, border-color .18s ease; width: calc(100% - 44px); }
.admin-report-dropzone:hover, .admin-report-dropzone.is-dragging { background: #f2f6ff; border-color: #6b91e6; }
.admin-report-dropzone-icon { align-items: center; background: #eaf0ff; border-radius: 9px; color: #5a82d4; display: inline-flex; flex: none; height: 38px; justify-content: center; width: 38px; }
.admin-report-dropzone-icon svg { height: 18px; width: 18px; }
.admin-report-dropzone strong, .admin-report-dropzone small { display: block; }
.admin-report-dropzone strong { color: #40516a; font-size: 11px; }
.admin-report-dropzone small { color: #8e9aac; font-size: 10px; margin-top: 4px; }
.admin-report-storage-note { align-items: center; color: #97a2b0; display: flex; font-size: 9px; gap: 6px; margin: 0 22px 14px; }
.admin-report-storage-note svg { height: 13px; width: 13px; }
.admin-report-table { min-width: 560px; }
.admin-report-file-name { align-items: center; display: flex; gap: 10px; min-width: 210px; }
.admin-report-file-name > span:last-child { min-width: 0; }
.admin-report-file-name strong { color: #45546a; display: block; font-size: 11px; max-width: min(420px, 42vw); overflow: hidden; text-overflow: ellipsis; }
.admin-report-file-name small { color: #9ba7b5; display: block; font-size: 9px; margin-top: 4px; }
.admin-report-file-icon { align-items: center; background: #f0f4fb; border-radius: 8px; color: #6e88b5; display: inline-flex; flex: none; height: 34px; justify-content: center; width: 34px; }
.admin-report-file-icon svg { height: 16px; width: 16px; }
.admin-report-file-actions { align-items: center; display: flex; gap: 6px; justify-content: flex-end; }
.admin-report-action { align-items: center; background: #fff; border: 1px solid #e4eaf1; border-radius: 6px; color: #6d7b8e; cursor: pointer; display: inline-flex; height: 30px; justify-content: center; width: 31px; }
.admin-report-action:hover { background: #f3f6fb; border-color: #ccd7e5; color: #4e6fae; }
.admin-report-action.is-remove:hover { background: #fff3f3; border-color: #f0cbcd; color: #d45f65; }
.admin-report-action svg { height: 14px; width: 14px; }
.admin-report-empty { color: #98a4b3 !important; padding: 25px 22px !important; text-align: center; }

@media (max-width: 760px) {
  .admin-report-heading-actions { justify-content: flex-start; }
  .admin-report-heading-actions .admin-live-status { flex-basis: 100%; width: fit-content; }
  .admin-report-library-heading { align-items: flex-start; }
  .admin-report-file-name strong { max-width: 48vw; }
}

.admin-notification-wrap { position: relative; }
.admin-notification-button[aria-expanded="true"] { background: #f1f4f8; color: #43546a; }
.admin-notification-button b[hidden] { display: none; }
.admin-notification-popover { animation: notification-popover-in .18s ease-out; border-color: #e7ecf2; border-radius: 14px; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 100px)); position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 28px)); z-index: 100; }
.admin-notification-popover:before { right: 24px; }
.admin-notification-popover .notification-popover-header { align-items: center; border-color: #edf1f5; gap: 12px; padding: 16px; }
.admin-notification-popover .notification-popover-header > div { min-width: 0; }
.admin-notification-popover .notification-mark-read { background: #f5f7fb; border: 1px solid #e6ebf2; border-radius: 7px; color: #53647a; flex: none; padding: 8px 10px; }
.admin-notification-popover .notification-mark-read:hover { background: #edf2f8; text-decoration: none; }
.admin-notification-popover .notification-feed { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.admin-notification-popover .notification-popover-header strong { color: #293a52; font: 800 13px 'Manrope', sans-serif; }
.admin-notification-popover .notification-popover-header small { color: #8996a7; }
.admin-notification-popover .notification-item { border-radius: 9px; }
.admin-notification-popover .notification-item:hover { background: #f6f8fb; transform: none; }
.admin-notification-popover .notification-item.unread { background: #f7f9fd; }
.admin-notification-popover .notification-item-copy strong { color: #40516a; }
.admin-notification-popover .notification-item-copy small { color: #8492a5; }
.admin-notification-popover .notification-item-copy time { color: #8492a5; }
.admin-notification-popover .notification-popover-footer { background: #fbfcfe; border-color: #edf1f5; color: #587fc6; }
.admin-notification-popover .notification-popover-footer:hover { background: #f4f7fc; }
.admin-settings-card .admin-panel-heading { align-items: center; }
.admin-settings-card .admin-panel-heading h2 { color: #34445a; font: 800 15px 'Space Grotesk', sans-serif; margin: 5px 0 0; }
.admin-settings-card-icon { align-items: center; background: #edf3ff; border-radius: 9px; color: #5c83cf; display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.admin-settings-card-icon svg { height: 17px; width: 17px; }

@media (prefers-reduced-motion: reduce) {
  .admin-notification-popover { animation: none; }
}

@media (max-width: 760px) {
  .admin-profile-menu {
    left: 12px;
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
    min-width: 0;
    overflow-y: auto;
    position: fixed;
    right: 12px;
    top: 74px;
    width: auto;
    z-index: 1000;
  }
  .admin-profile-menu-heading > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .profile-popover-topbar {
    left: 12px;
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
    min-width: 0;
    overflow-y: auto;
    position: fixed;
    right: 12px;
    top: 74px;
    width: auto;
    z-index: 1000;
  }
  .profile-popover-heading > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .admin-notification-popover {
    left: 12px;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    position: fixed;
    right: 12px;
    top: 74px;
    width: auto;
    z-index: 1000;
  }
  .admin-notification-popover:before { display: none; }
  .admin-notification-popover .notification-feed { max-height: min(385px, calc(100vh - 230px)); max-height: min(385px, calc(100dvh - 230px)); }
  .admin-content { padding-bottom: 32px; padding-top: 18px; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px 15px;
  }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading h1 { font-size: 23px; margin: 5px 0 0; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading .admin-eyebrow { font-size: 8px; padding: 5px 8px; }
  .admin-page[data-admin-page="dashboard"] .admin-heading-actions { flex: none; width: auto; }
  .admin-page[data-admin-page="dashboard"] .admin-heading-actions .admin-button { flex: none; height: 36px; min-width: 0; padding: 0 11px; }
  .admin-stat-grid { gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
  .admin-stat-card { min-height: 132px; padding: 15px; }
  .admin-stat-card::before { left: 15px; right: 15px; }
  .admin-stat-icon { height: 34px; width: 34px; }
  .admin-stat-card p { font-size: 10px; margin: 11px 0 4px; }
  .admin-stat-card > strong { font-size: 23px; }
  .admin-stat-card > small { font-size: 9px; margin-top: 6px; }
  .admin-dashboard-grid { gap: 14px; margin-bottom: 14px; }
}

@media (max-width: 360px) {
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading { padding: 12px; }
  .admin-page[data-admin-page="dashboard"] > .admin-page-heading h1 { font-size: 20px; }
  .admin-page[data-admin-page="dashboard"] .admin-heading-actions .admin-button { padding: 0 9px; }
  .admin-stat-card { min-height: 124px; padding: 12px; }
  .admin-stat-card::before { left: 12px; right: 12px; }
}

.admin-alert-location { align-items: center; display: flex; gap: 9px; justify-content: space-between; min-width: 150px; }
.admin-location-view { align-items: center; background: #edf3ff; border: 1px solid transparent; border-radius: 6px; color: #557dc5; cursor: pointer; display: inline-flex; flex: none; font: 800 9px 'Manrope', sans-serif; gap: 4px; padding: 6px 8px; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.admin-location-view:hover { background: #e2ebfc; border-color: #d4e0f5; color: #3e66ad; }
.admin-location-view:focus-visible { outline: 2px solid #88a8e5; outline-offset: 2px; }
.admin-location-view svg { height: 12px; width: 12px; }
.admin-map-popup .admin-map-coordinates { color: #5f79a4; font-weight: 700; }
.admin-rider-follow { align-items: center; background: #f6f8fc; border: 1px solid #e8edf5; border-radius: 10px; display: flex; gap: 14px; justify-content: space-between; margin: 0 22px 12px; padding: 12px 14px; }
.admin-rider-follow-copy { align-items: center; display: flex; gap: 11px; min-width: 0; }
.admin-rider-follow-icon { align-items: center; background: #e9effc; border-radius: 9px; color: #5b7fc6; display: inline-flex; flex: none; height: 36px; justify-content: center; width: 36px; }
.admin-rider-follow-icon svg { height: 17px; width: 17px; }
.admin-rider-follow-copy > div { display: grid; gap: 3px; min-width: 0; }
.admin-rider-follow-copy small { color: #8592a4; font: 700 9px 'Manrope', sans-serif; }
.admin-rider-follow-copy strong { color: #34445a; font: 800 12px 'Manrope', sans-serif; }
.admin-rider-follow-copy div > span { color: #718096; font: 600 9px 'Manrope', sans-serif; overflow-wrap: anywhere; }

.admin-directory-panel { margin-bottom: 18px; }
.admin-directory-heading { align-items: center; gap: 14px; }
.admin-directory-heading > div { min-width: 0; }
.admin-directory-heading h2 { align-items: center; display: flex; gap: 8px; }
.admin-directory-heading p { color: #8794a6; font-size: 10px; margin: 5px 0 0; }
.admin-directory-heading .admin-count-pill { margin: 0; }
.admin-directory-heading .admin-inline-search { flex: 0 1 260px; width: 260px; }
.admin-rider-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 22px 22px; }
.admin-rider-card { background: linear-gradient(150deg, #fff, #fbfcff); border: 1px solid #e8edf4; border-radius: 12px; min-width: 0; padding: 15px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.admin-rider-card:hover { border-color: #d6e1f0; box-shadow: 0 9px 22px rgba(39, 58, 88, .07); transform: translateY(-1px); }
.admin-rider-card-top { align-items: flex-start; border-bottom: 1px solid #edf1f6; display: flex; gap: 10px; justify-content: space-between; min-width: 0; padding-bottom: 12px; }
.admin-rider-card-top .admin-user-cell { min-width: 0; }
.admin-rider-card-top .admin-user-cell > span:last-child { min-width: 0; }
.admin-rider-card-top .admin-user-cell strong { overflow-wrap: anywhere; }
.admin-rider-card-top .admin-status { flex: none; font-size: 9px; }
.admin-rider-card-details { display: grid; gap: 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px 0; }
.admin-rider-card-details > div > span:first-child { color: #98a4b4; display: block; font-size: 9px; margin-bottom: 5px; }
.admin-rider-card-details > div > strong { color: #53637a; display: block; font-size: 10px; font-weight: 600; overflow-wrap: anywhere; }
.admin-rider-card-details .admin-status { font-size: 9px; }
.admin-rider-card-actions { border-top: 1px solid #edf1f6; display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 12px; }
.admin-rider-card-actions .admin-button { font-size: 9px; height: 33px; min-width: 0; padding: 0 7px; width: 100%; }
.admin-rider-empty { color: #8794a6; grid-column: 1 / -1; padding: 30px 16px; text-align: center; }
.admin-rider-empty span, .admin-rider-empty small { display: block; }
.admin-rider-empty span { color: #40516a; font-size: 12px; font-weight: 800; }
.admin-rider-empty small { font-size: 10px; margin-top: 5px; }

@media (max-width: 760px) {
  .admin-page[data-admin-page="riders"] > .admin-page-heading { align-items: center; flex-direction: row; gap: 10px; margin-bottom: 14px; padding: 14px 15px; }
  .admin-page[data-admin-page="riders"] > .admin-page-heading h1 { font-size: 23px; margin: 5px 0 0; }
  .admin-page[data-admin-page="riders"] > .admin-page-heading .admin-eyebrow { font-size: 8px; padding: 5px 8px; }
  .admin-page[data-admin-page="riders"] .admin-heading-actions { flex: none; width: auto; }
  .admin-page[data-admin-page="riders"] .admin-heading-actions .admin-button { flex: none; height: 36px; min-width: 0; padding: 0 11px; }
  .admin-directory-heading { align-items: stretch; flex-direction: column; gap: 12px; padding: 16px; }
  .admin-directory-heading .admin-inline-search { flex: none; height: 40px; width: 100%; }
  .admin-rider-grid { grid-template-columns: 1fr; padding: 0 14px 14px; }
}

@media (max-width: 360px) {
  .admin-page[data-admin-page="riders"] > .admin-page-heading { padding: 12px; }
  .admin-page[data-admin-page="riders"] > .admin-page-heading h1 { font-size: 20px; }
  .admin-page[data-admin-page="riders"] .admin-heading-actions .admin-button { padding: 0 9px; }
  .admin-rider-card { padding: 12px; }
  .admin-rider-grid { padding-left: 10px; padding-right: 10px; }
}
.admin-rider-follow-actions { align-items: center; display: flex; flex: none; gap: 8px; }
.admin-rider-follow-actions .admin-button { font-size: 10px; min-height: 34px; padding: 0 11px; }
.admin-rider-follow-actions svg { height: 14px; width: 14px; }
.admin-tracking-marker.offline { color: #8793a2; }

.admin-map-route-guide { align-items: flex-start; background: rgba(255, 255, 255, .96); border: 1px solid #e4eaf2; border-radius: 10px; box-shadow: 0 4px 16px rgba(34, 52, 78, .15); display: flex; gap: 9px; max-width: min(270px, calc(100% - 100px)); padding: 9px 11px; pointer-events: none; position: absolute; right: 14px; top: 14px; z-index: 450; }
.admin-map-route-guide-line { border-top: 3px solid #4e82e7; border-radius: 99px; flex: none; margin-top: 6px; width: 22px; }
.admin-map-route-guide strong, .admin-map-route-guide small { display: block; }
.admin-map-route-guide strong { color: #34445a; font: 800 10px 'Manrope', sans-serif; }
.admin-map-route-guide small { color: #7d899a; font: 600 9px/1.45 'Manrope', sans-serif; margin-top: 2px; }

.admin-navigation-guide { background: #fff; border: 1px solid #e6ebf2; border-radius: 11px; margin: 14px 22px 3px; padding: 16px; }
.admin-navigation-guide-header { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.admin-navigation-guide-header h3 { color: #26374e; font: 800 15px 'Space Grotesk', sans-serif; margin: 4px 0; }
.admin-navigation-guide-header p:last-child { color: #8491a2; font: 600 10px 'Manrope', sans-serif; margin: 0; }
.admin-navigation-guide-header .admin-button { flex: none; font-size: 9px; height: 31px; }
.admin-navigation-guide-header .admin-button svg { height: 13px; width: 13px; }
.admin-navigation-status { background: #f4f7fc; border-radius: 7px; color: #667993; font: 600 10px/1.5 'Manrope', sans-serif; margin: 12px 0 0; padding: 9px 11px; }
.admin-navigation-status.is-error { background: #fff4f3; color: #b94d52; }
.admin-navigation-status.is-success { background: #eff8f3; color: #388863; }
.admin-navigation-steps { display: grid; gap: 0; list-style: none; margin: 12px 0 0; max-height: 270px; overflow: auto; padding: 0; }
.admin-navigation-step { align-items: flex-start; border-bottom: 1px solid #eef1f5; display: flex; gap: 10px; padding: 10px 2px; }
.admin-navigation-step:last-child { border-bottom: 0; }
.admin-navigation-step-number { align-items: center; background: #edf3ff; border-radius: 50%; color: #577dc3; display: inline-flex; flex: none; font: 800 9px 'Manrope', sans-serif; height: 23px; justify-content: center; width: 23px; }
.admin-navigation-step-copy { display: grid; gap: 3px; min-width: 0; }
.admin-navigation-step-copy strong { color: #48586e; font: 700 10px/1.45 'Manrope', sans-serif; }
.admin-navigation-step-copy small { color: #8d99a8; font: 600 9px 'Manrope', sans-serif; }
.admin-navigation-attribution { color: #a0aab7; display: block; font: 500 8px 'Manrope', sans-serif; margin-top: 10px; }
.admin-navigation-guide[hidden] { display: none; }

@media (max-width: 700px) {
  .admin-rider-follow { align-items: stretch; flex-direction: column; margin-left: 17px; margin-right: 17px; }
  .admin-rider-follow-actions { width: 100%; }
  .admin-rider-follow-actions .admin-button { flex: 1; justify-content: center; }
  .admin-navigation-guide { margin-left: 17px; margin-right: 17px; padding: 13px; }
  .admin-navigation-guide-header { align-items: flex-start; flex-direction: column; }
}