:root {
    --gps-primary: #4b7d9b;
    --gps-primary-hover: #5e9ab8;
    --gps-primary-light: #dce9f0;
    --gps-primary-rgb: 75, 125, 155;
    --gps-accent: #f59e0b;
    --gps-success: #10b981;
    --gps-warning: #f97316;
    --gps-danger: #ef4444;
    --gps-dark: #0f172a;
    --gps-text: #1e293b;
    --gps-muted: #64748b;
    --gps-bg: #f8fafc;
    --gps-surface: #ffffff;
    --gps-border: #e2e8f0;
    --gps-radius: 14px;
    --gps-radius-lg: 20px;
    --gps-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --gps-shadow: 0 4px 6px -2px rgba(15, 23, 42, 0.06), 0 12px 24px -8px rgba(15, 23, 42, 0.10);
    --gps-shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.25), 0 8px 24px -8px rgba(15, 23, 42, 0.10);
    --gps-shadow-color: 0 16px 40px -16px rgba(var(--gps-primary-rgb), 0.40);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gps-text);
    background: var(--gps-surface);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; font-weight: 700; }

.public-body { background: var(--gps-surface); }

/* ─── Brand ─── */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--gps-primary) 0%, var(--gps-primary-hover) 100%);
    color: var(--gps-primary-text);
    border-radius: 10px;
    font-size: 1.05rem;
    box-shadow: 0 6px 18px -6px rgba(var(--gps-primary-rgb), 0.55);
}

/* ─── Buttons ─── */
.btn {
    border-radius: 10px;
    font-weight: 500;
    padding: 0.55rem 1.25rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-width: 1px;
}
.btn-lg { padding: 0.85rem 1.75rem; border-radius: 12px; font-size: 1.05rem; }
.btn-primary {
    --bs-btn-bg: var(--gps-primary);
    --bs-btn-border-color: var(--gps-primary);
    --bs-btn-color: var(--gps-primary-text);
    --bs-btn-hover-bg: var(--gps-primary-hover);
    --bs-btn-hover-border-color: var(--gps-primary-hover);
    --bs-btn-hover-color: var(--gps-primary-text);
    --bs-btn-active-bg: var(--gps-primary-hover);
    --bs-btn-active-border-color: var(--gps-primary-hover);
    --bs-btn-active-color: var(--gps-primary-text);
    box-shadow: 0 6px 18px -6px rgba(var(--gps-primary-rgb), 0.45);
    /* Smooth out hover: transform + shadow used to snap because Bootstrap's
       base .btn transition doesn't cover them. */
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
                background-color 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(var(--gps-primary-rgb), 0.55);
}
.btn-primary:active { transform: translateY(0); transition-duration: 0.08s; }
.btn-outline-primary {
    --bs-btn-color: var(--gps-primary);
    --bs-btn-border-color: var(--gps-primary);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--gps-primary);
    --bs-btn-hover-color: var(--gps-primary-text);
    --bs-btn-hover-border-color: var(--gps-primary);
    --bs-btn-active-bg: var(--gps-primary);
    --bs-btn-active-color: var(--gps-primary-text);
    --bs-btn-active-border-color: var(--gps-primary);
}

a { color: var(--gps-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--gps-primary-hover); }

/* ─── Glass navbar ─── */
.navbar.sticky-top {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}
.navbar-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.brand-wordmark { font-size: 1.25rem; letter-spacing: -0.025em; text-decoration: none; }
.brand-wordmark strong { font-weight: 700; }
.brand-wordmark span { font-weight: 400; }
.nav-link { font-weight: 500; color: var(--gps-text) !important; padding: 0.5rem 0.9rem !important; border-radius: 8px; transition: all 0.15s; }
.nav-link:hover { color: #000 !important; background: var(--gps-primary); }
.app-navbar .nav-link:hover { color: #000 !important; background: var(--gps-primary); }
.app-navbar .nav-link.active { color: var(--gps-primary-text) !important; background: var(--gps-primary); }

/* ─── Hero ─── */
.hero {
    position: relative;
    padding: 6rem 0 5rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--gps-primary-rgb), 0.18) 0%, transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }
.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}
.hero h1 .accent {
    background: linear-gradient(135deg, var(--gps-primary) 0%, var(--gps-primary-hover) 60%, var(--gps-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero .lead { font-size: 1.18rem; color: var(--gps-muted); line-height: 1.55; max-width: 540px; }
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(var(--gps-primary-rgb), 0.10);
    color: var(--gps-primary);
    padding: 0.45rem 0.95rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--gps-primary-rgb), 0.20);
}
.hero-pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gps-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Hero visual: stylised phone mockup with floating cards */
.hero-visual {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}
.hero-visual .phone {
    background: linear-gradient(155deg, #fff 0%, #f1f5f9 100%);
    border-radius: 26px;
    padding: 1rem;
    box-shadow: var(--gps-shadow-lg);
    border: 1px solid var(--gps-border);
    position: relative;
}
.hero-visual .phone-screen {
    aspect-ratio: 9/16;
    max-height: 480px;
    border-radius: 18px;
    background: linear-gradient(180deg, #0a0f1a 0%, #0f1b2d 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Phone status bar */
.ps-statusbar {
    position: relative; z-index: 3;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 1rem 0.4rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.72rem; font-weight: 600;
}
.ps-dots { display: inline-flex; gap: 3px; }
.ps-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.7); }

/* Map wrap */
.ps-mapwrap { position: relative; flex: 1; overflow: hidden; }
.ps-map { width: 100%; height: 100%; display: block; }
.ps-map .ps-trace {
    stroke-dashoffset: 0;
    animation: ps-trace-dash 1.4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(204,255,3,0.55));
}
@keyframes ps-trace-dash {
    to { stroke-dashoffset: -22; }
}

/* Cars */
.ps-car {
    position: absolute;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #0a0a0a; font-size: 0.7rem;
    background: var(--gps-primary);
    border: 2px solid #0a0f1a;
    box-shadow: 0 0 0 2px var(--gps-primary), 0 4px 10px rgba(0,0,0,0.45);
    z-index: 2;
}
.ps-car.stopped { background: #f59e0b; box-shadow: 0 0 0 2px #f59e0b, 0 4px 10px rgba(0,0,0,0.45); }
.ps-car-1 { top: 0; left: 0; transform: translate(-50%, -50%) rotate(0deg); will-change: top, left, transform; }
.ps-car-1 i { transform: rotate(0deg); }
.ps-car-2 { top: 62%; left: 24%; transform: rotate(-50deg); background: #60a5fa; box-shadow: 0 0 0 2px #60a5fa, 0 4px 10px rgba(0,0,0,0.45); color: #fff; }
.ps-car-3 { top: 18%; left: 28%; }
.ps-car-3 i { font-size: 0.55rem; }

.ps-pulse {
    position: absolute;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(204,255,3,0.35);
    animation: ps-pulse-anim 2s ease-out infinite;
    z-index: 1;
    pointer-events: none;
}
.ps-car-1-pulse {
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    will-change: top, left;
    animation: ps-pulse-anim 2s ease-out infinite;
}
@keyframes ps-pulse-anim {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* POI markers */
.ps-poi {
    position: absolute;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.92);
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 1;
}
.ps-poi-home { top: 75%; left: 70%; }
.ps-poi-work { top: 12%; left: 70%; }

/* Bottom card */
.ps-bottom {
    position: relative; z-index: 3;
    padding: 0.6rem 0.7rem 0.85rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.ps-bottom-row {
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    display: flex; align-items: center; gap: 0.6rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.ps-bottom-icon.ps-bottom-icon-zone {
    background: linear-gradient(135deg, var(--gps-primary), var(--gps-primary-hover));
}
.ps-bottom-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--gps-primary);
    color: var(--gps-primary-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.ps-bottom-text { flex: 1; min-width: 0; line-height: 1.15; }
.ps-bottom-text strong { display: block; font-size: 0.78rem; color: #0f172a; font-weight: 700; letter-spacing: -0.01em; }
.ps-bottom-text span { font-size: 0.68rem; color: #64748b; }
.ps-bottom-badge {
    background: #0a0a0a; color: var(--gps-primary);
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
    padding: 0.18rem 0.4rem; border-radius: 100px;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.ps-bottom-badge::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--gps-primary);
    box-shadow: 0 0 6px var(--gps-primary);
    animation: bento-blink 1.4s ease-in-out infinite;
}
.hero-visual .floating-card {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: var(--gps-shadow-lg);
    border: 1px solid var(--gps-border);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    animation: float 6s ease-in-out infinite;
}
.hero-visual .floating-card.fc-1 { top: 10%; left: -14%; animation-delay: 0s; }
.hero-visual .floating-card.fc-2 { top: 48%; right: -12%; animation-delay: -2s; }
.hero-visual .floating-card.fc-3 { bottom: 26%; left: -18%; animation-delay: -4s; }

/* Hero data widgets (replace floating-card pattern with richer cards on the side) */
.hero-widget {
    position: absolute;
    width: 200px;
    background: linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(10,15,26,0.92) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0.85rem 1rem 0.9rem;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
    color: #f1f5f9;
    animation: float 6s ease-in-out infinite;
}
.hero-widget.hw-trip { top: 6%; right: -16%; }
.hero-widget.hw-speed { bottom: 14%; left: -16%; animation-delay: -3s; }
.hero-widget.hw-fuel { top: 38%; right: -16%; animation-delay: -2s; }
.hero-widget.hw-mileage { top: 70%; right: -16%; animation-delay: -4s; }

.hw-trend-down { color: #f59e0b !important; }
.hw-fuel-avg { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.4rem; padding-top: 0.45rem; border-top: 1px solid rgba(255,255,255,0.07); }
.hw-fuel-avg span { font-size: 0.7rem; color: #94a3b8; }
.hw-fuel-avg strong { font-size: 0.95rem; color: #fff; font-weight: 700; }
.hw-fuel-avg em { font-size: 0.7rem; color: #94a3b8; font-style: normal; font-weight: 500; margin-left: 0.15rem; }

.hw-mileage-bar { margin-top: 0.55rem; height: 5px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; position: relative; }
.hw-mileage-fill { height: 100%; background: linear-gradient(90deg, var(--gps-primary), #6dd400); border-radius: 4px; }
.hw-mileage-note { display: block; margin-top: 0.45rem; font-size: 0.7rem; color: #94a3b8; }
.hw-mileage-note strong { color: var(--gps-primary); font-weight: 700; }
.hw-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.hw-eyebrow { font-size: 0.68rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.3rem; }
.hw-eyebrow i { color: var(--gps-primary); font-size: 0.7rem; }
.hw-trend { font-size: 0.7rem; font-weight: 700; color: var(--gps-primary); display: inline-flex; align-items: center; gap: 0.25rem; }
.hw-status { font-size: 0.65rem; font-weight: 600; color: var(--gps-primary); display: inline-flex; align-items: center; gap: 0.3rem; }
.hw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gps-primary); box-shadow: 0 0 6px var(--gps-primary); animation: bento-blink 1.4s ease-in-out infinite; }
.hw-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.hw-value span { font-size: 0.78rem; color: #94a3b8; font-weight: 500; margin-left: 0.2rem; }
.hw-spark { width: 100%; height: 30px; margin-top: 0.4rem; display: block; }
.hw-meter { margin-top: 0.55rem; height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.hw-meter-fill { height: 100%; background: linear-gradient(90deg, var(--gps-primary), #6dd400); border-radius: 4px; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.fc-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.fc-text { font-size: 0.82rem; line-height: 1.2; }
.fc-text strong { display: block; color: var(--gps-text); font-weight: 600; }
.fc-text span { color: var(--gps-muted); font-size: 0.75rem; }

@media (max-width: 991px) {
    .hero { padding: 4rem 0 3rem; }
    .hero-visual { margin-top: 3rem; max-width: 380px; }
    .hero-visual .floating-card.fc-1 { left: -4%; }
    .hero-visual .floating-card.fc-2 { right: -2%; }
}

/* Mobile: hide the floating widgets/cards (they're decorative desktop accents and
   clip off-screen otherwise). Phone mockup alone tells the story on small screens. */
@media (max-width: 767px) {
    .hero { padding: 3rem 0 2rem; }
    .hero h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
    .hero .lead { font-size: 1rem; }
    .hero-visual { margin: 2rem auto 0; max-width: 320px; }
    .hero-visual .floating-card,
    .hero-widget { display: none !important; }
    /* tighten the generous desktop section rhythm on phones (was 5rem = 160px/section) */
    .section { padding: 3.25rem 0; }
    .section-title { margin-bottom: 2rem; }
}

@media (max-width: 480px) {
    .hero-visual { max-width: 280px; }
}

/* ─── Section spacing & headings ─── */
.section { padding: 5rem 0; }
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 { font-size: clamp(1.85rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--gps-text); }
.section-title p { font-size: 1.1rem; color: var(--gps-muted); max-width: 600px; margin: 0.75rem auto 0; }
html.dark .section-title h2 { color: #fff; }
html.dark .section-title p { color: #cbd5e1; }
.section-tag {
    display: inline-block;
    background: var(--gps-primary);
    color: var(--gps-primary-text);
    padding: 0.35rem 0.95rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.85rem;
}

/* ─── Feature cards ─── */
.feature-card {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: var(--gps-radius);
    padding: 1.85rem;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--gps-primary-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gps-shadow-lg);
    border-color: rgba(var(--gps-primary-rgb), 0.30);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gps-primary-light) 0%, rgba(var(--gps-primary-rgb), 0.20) 100%);
    color: var(--gps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 1.25rem;
    transition: transform 0.3s;
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-3deg); }
.feature-card h5 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.94rem; color: var(--gps-muted); line-height: 1.55; }

/* ─── Legal pages ─── */
.legal-page { max-width: 820px; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
.legal-head { text-align: center; margin-bottom: 2.5rem; }
.legal-head h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; margin: 1rem 0 0.6rem; color: var(--gps-text); }
.legal-meta { color: var(--gps-muted); font-size: 0.92rem; margin: 0; }
.legal-lead { font-size: 1.08rem; color: var(--gps-muted); line-height: 1.65; margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-left: 3px solid var(--gps-primary); background: rgba(var(--gps-primary-rgb), 0.06); border-radius: 0 12px 12px 0; }
.legal-page h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; margin: 2.5rem 0 0.8rem; color: var(--gps-text); }
.legal-page h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.5rem; color: var(--gps-text); }
.legal-page p { color: var(--gps-text); line-height: 1.7; margin: 0 0 0.9rem; }
.legal-page ul, .legal-page ol { padding-left: 1.5rem; line-height: 1.75; color: var(--gps-text); margin: 0 0 1.1rem; }
.legal-page li { margin-bottom: 0.4rem; }
.legal-page li ul { margin: 0.45rem 0 0.6rem; }
.legal-page code { font-size: 0.85em; background: rgba(var(--gps-primary-rgb), 0.10); color: var(--gps-text); padding: 0.1em 0.4em; border-radius: 5px; }
/* :not(.btn) so Bootstrap buttons (.btn-primary etc.) inside legal
   pages keep their own text colour - otherwise the lime override made
   lime-on-lime button text invisible until hover. */
.legal-page a:not(.btn) { color: var(--gps-primary); }
.legal-page a:not(.btn):hover { text-decoration: underline; }

.legal-toc {
    background: rgba(var(--gps-primary-rgb), 0.05);
    border: 1px solid rgba(var(--gps-primary-rgb), 0.18);
    border-radius: 16px;
    padding: 1.25rem 1.5rem 1.25rem 2.25rem;
    margin: 0 0 2rem;
}
.legal-toc-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--gps-primary); margin: 0 0 0.55rem; padding-left: 0; }
.legal-toc ol { margin: 0; padding-left: 1rem; columns: 2; column-gap: 1.5rem; }
.legal-toc li { break-inside: avoid; margin-bottom: 0.3rem; }
.legal-toc a { color: var(--gps-text); font-size: 0.92rem; }
.legal-toc a:hover { color: var(--gps-primary); }

.legal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 0.85rem 0 1.5rem; }
.legal-card { background: rgba(15,23,42,0.04); border: 1px solid var(--gps-border); border-radius: 12px; padding: 0.85rem 1rem; }
.legal-card-name { font-weight: 700; font-size: 0.95rem; color: var(--gps-text); margin: 0 0 0.25rem; }
.legal-card-desc { font-size: 0.85rem; color: var(--gps-muted); margin: 0; line-height: 1.5; }
.legal-pill { display: inline-block; background: rgba(var(--gps-primary-rgb), 0.15); color: var(--gps-primary); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 100px; margin-left: 0.4rem; vertical-align: middle; }

/* Tiny edit/toggle button (used on dashboard cards) */
.btn-edit-tiny {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid var(--gps-border); background: transparent;
    color: var(--gps-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
    flex-shrink: 0;
}
.btn-edit-tiny:hover { background: #0a0a0a; color: var(--gps-primary); border-color: #0a0a0a; }
html.dark .btn-edit-tiny { border-color: rgba(255,255,255,0.12); color: #94a3b8; }

/* ── Paired card-header actions ──
   When a primary "+" button sits next to a .btn-edit-tiny chevron in a card
   header (Health / Maintenance / Service book / Sharing), shrink the primary
   to the same height as the tiny chevron so they read as a pair, not as a
   tall colored button next to a small grey one. */
.app-card .d-flex.align-items-center:has(.btn-edit-tiny) > .btn.btn-sm {
    height: 28px;
    padding: 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.app-card .d-flex.align-items-center:has(.btn-edit-tiny) > .btn.btn-sm i { font-size: 0.72rem; }
/* Bump the tiny chevron the same 2px so heights match exactly */
.app-card .d-flex.align-items-center:has(.btn.btn-sm) > .btn-edit-tiny {
    height: 28px; width: 28px;
}
html.dark .btn-edit-tiny:hover { background: var(--gps-primary); color: #0a0a0a; border-color: var(--gps-primary); }

/* Device table — name link with proper contrast.
   Hover colour differs per theme: lime on dark reads cleanly, but
   the same lime on a white row is washed out, so light mode uses a
   darker brand-green that holds contrast on white. */
.devices-name-link {
    color: var(--gps-text) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.devices-name-link:hover { color: #3e7800 !important; text-decoration: underline; }
html.dark .devices-name-link { color: #e2e8f0 !important; }
html.dark .devices-name-link:hover { color: var(--gps-primary) !important; }

/* Fleet rollup on dashboard */
.fleet-rollup { background: linear-gradient(180deg, #fff 0%, rgba(204,255,3,0.02) 100%); }
.fr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.85rem; }
.fr-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem; background: rgba(15,23,42,0.03); border: 1px solid var(--gps-border); border-radius: 12px; }
/* Clickable rollup cards (open the trip/stats detail) */
a.fr-card-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.12s ease, border-color 0.15s, box-shadow 0.15s; }
a.fr-card-link:hover { transform: translateY(-2px); border-color: rgba(var(--gps-primary-rgb), 0.45); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
a.fr-card-link:active { transform: translateY(0); }
.fr-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--gps-primary); color: var(--gps-primary-text); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
html.dark .fr-icon { background: var(--gps-primary); color: var(--gps-primary-text); }
.fr-num { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; color: var(--gps-text); line-height: 1.1; }
.fr-num small { font-size: 0.6em; font-weight: 600; color: var(--gps-muted); margin-left: 0.15em; }
.fr-lbl { font-size: 0.72rem; color: var(--gps-muted); margin-top: 0.1rem; }
.fr-card.fr-alert { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.25); }
.fr-card.fr-alert .fr-icon { background: #dc2626 !important; color: #fff !important; }
.fr-card.fr-alert .fr-num { color: #dc2626; }
.fr-card.fr-rating .fr-num { color: var(--gps-text); }
html.dark .fr-card.fr-rating .fr-num { color: #fff; }
html.dark .fleet-rollup { background: linear-gradient(180deg, #131c2c 0%, #0a0f1a 100%); }
html.dark .fr-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .fr-num { color: #fff; }

.fr-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 360px;
    overflow-y: auto;
    margin-right: -0.5rem;
    padding-right: 0.5rem;
}
.fr-rows::-webkit-scrollbar { width: 6px; }
.fr-rows::-webkit-scrollbar-track { background: transparent; }
.fr-rows::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.15); border-radius: 4px; }
.fr-rows::-webkit-scrollbar-thumb:hover { background: rgba(var(--gps-primary-rgb), 0.5); }
html.dark .fr-rows::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.fr-row {
    display: grid;
    grid-template-columns: 32px minmax(120px, 0.9fr) minmax(60px, 1.2fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(15,23,42,0.02);
    border-radius: 8px;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.fr-row > * { min-width: 0; }
.fr-row:hover { background: rgba(var(--gps-primary-rgb), 0.06); }
.fr-row-name { font-weight: 600; font-size: 0.9rem; color: var(--gps-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fr-row-bar { height: 6px; background: rgba(15,23,42,0.06); border-radius: 4px; overflow: hidden; position: relative; }
.fr-row-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gps-primary), #6dd400); border-radius: 4px; transition: width 0.3s; }
.fr-row-rank {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: rgba(15,23,42,0.06);
    color: var(--gps-muted);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
html.dark .fr-row-rank { background: rgba(255,255,255,0.06); }
.fr-row:nth-of-type(1) .fr-row-rank { background: linear-gradient(135deg, var(--gps-primary), #6dd400); color: var(--gps-primary-text); }
.fr-row:nth-of-type(2) .fr-row-rank { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #0f172a; }
.fr-row:nth-of-type(3) .fr-row-rank { background: linear-gradient(135deg, #f59e0b, #b45309); color: #fff; }

.fr-sort-pills { display: inline-flex; align-items: stretch; background: rgba(15,23,42,0.04); padding: 0.18rem; border-radius: 100px; gap: 0.2rem; height: 32px; }
.fr-sort-pills button { background: transparent; border: 0; padding: 0 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--gps-muted); border-radius: 100px; cursor: pointer; transition: all 0.15s; line-height: 1; display: inline-flex; align-items: center; white-space: nowrap; }
.fr-sort-pills button:hover { color: var(--gps-text); }
.fr-sort-pills button.active { background: var(--gps-primary); color: var(--gps-primary-text); }
html.dark .fr-sort-pills { background: rgba(255,255,255,0.06); }

/* Match leaderboard search input height to pills (32px) */
.fr-leaderboard input[type="search"].form-control-sm {
    height: 32px;
    padding: 0 0.7rem;
    font-size: 0.8rem;
    border-radius: 100px;
}

.fr-show-all {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px dashed var(--gps-border);
    border-radius: 8px;
    color: var(--gps-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.fr-show-all:hover { background: rgba(var(--gps-primary-rgb), 0.06); border-color: rgba(var(--gps-primary-rgb), 0.35); color: var(--gps-text); }
.fr-show-all strong { color: var(--gps-primary); }
html.dark .fr-show-all { border-color: rgba(255,255,255,0.12); }

.fr-row-val { text-align: right; font-size: 0.82rem; color: var(--gps-muted); white-space: nowrap; flex-shrink: 0; }
.fr-row-val strong { color: var(--gps-text); font-weight: 700; }
html.dark .fr-row { background: rgba(255,255,255,0.02); }
html.dark .fr-row-name, html.dark .fr-row-val strong { color: #e2e8f0; }
html.dark .fr-row-bar { background: rgba(255,255,255,0.06); }

@media (max-width: 991px) { .fr-grid { grid-template-columns: repeat(3, 1fr); } .fr-row { grid-template-columns: 32px 1fr auto; } .fr-row-bar { display: none; } }
@media (max-width: 575px) { .fr-grid { grid-template-columns: repeat(2, 1fr); } }

/* Device sharing list */
.share-list { display: flex; flex-direction: column; gap: 0.4rem; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.7rem; background: rgba(15,23,42,0.03); border-radius: 8px; }
.share-info { flex: 1; min-width: 0; }
.share-info strong { display: block; font-size: 0.88rem; color: var(--gps-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-meta { font-size: 0.75rem; color: var(--gps-muted); }
html.dark .share-row { background: rgba(255,255,255,0.03); }
html.dark .share-info strong { color: #e2e8f0; }

/* Service book year accordions */
.sr-years { display: flex; flex-direction: column; gap: 0.5rem; }
.sr-year {
    background: rgba(15,23,42,0.02);
    border: 1px solid var(--gps-border);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.2s, border-color 0.2s;
}
.sr-year[open] { background: #fff; border-color: rgba(var(--gps-primary-rgb), 0.35); }
.sr-year-head {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    user-select: none;
    transition: background 0.15s;
}
.sr-year-head::-webkit-details-marker { display: none; }
.sr-year-head:hover { background: rgba(var(--gps-primary-rgb), 0.05); }
.sr-year-num { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gps-text); font-variant-numeric: tabular-nums; }
.sr-year-meta { display: flex; gap: 0.7rem; align-items: center; flex: 1; flex-wrap: wrap; }
.sr-year-count { font-size: 0.78rem; color: var(--gps-muted); font-weight: 500; }
.sr-year-cost { font-size: 0.85rem; font-weight: 700; color: var(--gps-primary); background: rgba(var(--gps-primary-rgb), 0.12); padding: 0.15rem 0.55rem; border-radius: 100px; font-variant-numeric: tabular-nums; }
.sr-year-chev { font-size: 0.75rem; color: var(--gps-muted); transition: transform 0.25s; }
.sr-year[open] .sr-year-chev { transform: rotate(180deg); color: var(--gps-primary); }
.sr-year .sr-timeline {
    padding: 0.5rem 1rem 1rem 2.4rem;
    animation: sr-year-open 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 480px;
    overflow-y: auto;
}
.sr-year .sr-timeline::-webkit-scrollbar { width: 6px; }
.sr-year .sr-timeline::-webkit-scrollbar-thumb { background: rgba(var(--gps-primary-rgb), 0.3); border-radius: 4px; }
@keyframes sr-year-open {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

html.dark .sr-year { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); }
html.dark .sr-year[open] { background: rgba(255,255,255,0.04); border-color: rgba(var(--gps-primary-rgb), 0.35); }
html.dark .sr-year-num { color: #fff; }

/* Service book (Сервизна книжка) timeline */
.sr-timeline {
    position: relative;
    padding-left: 1.4rem;
}
.sr-timeline::before {
    content: '';
    position: absolute;
    left: 14px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--gps-primary-rgb), 0.3), rgba(var(--gps-primary-rgb), 0.05));
}
.sr-entry {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0.5rem 0.85rem 1.2rem;
    border-bottom: 1px dashed var(--gps-border);
    align-items: flex-start;
    position: relative;
}
.sr-entry .sr-body { min-width: 0; }
.sr-entry:last-child { border-bottom: 0; }
.sr-dot {
    position: absolute;
    left: -1.4rem;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gps-primary);
    color: var(--gps-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    z-index: 1;
    flex-shrink: 0;
}
.sr-body { flex: 1; min-width: 0; }
.sr-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.sr-head strong { font-size: 0.95rem; color: var(--gps-text); }
.sr-date { font-size: 0.8rem; color: var(--gps-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.sr-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--gps-muted); }
.sr-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sr-meta i { font-size: 0.72rem; }
.sr-type { background: rgba(15,23,42,0.05); padding: 0.1rem 0.5rem; border-radius: 100px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }
.sr-auto { color: var(--gps-primary); font-weight: 600; }
.sr-auto i { color: var(--gps-primary); }
.sr-desc { font-size: 0.85rem; color: var(--gps-muted); margin: 0.4rem 0 0; line-height: 1.4; padding: 0.4rem 0.7rem; background: rgba(15,23,42,0.03); border-radius: 6px; border-left: 2px solid rgba(var(--gps-primary-rgb), 0.3); }
.sr-del { flex-shrink: 0; }

html.dark .sr-dot { background: #131c2c; }
html.dark .sr-entry { border-bottom-color: rgba(255,255,255,0.06); }
html.dark .sr-head strong { color: #fff; }
html.dark .sr-type { background: rgba(255,255,255,0.06); }
html.dark .sr-desc { background: rgba(255,255,255,0.03); }

/* Maintenance reminders list */
.mr-form { background: rgba(var(--gps-primary-rgb), 0.04); border: 1px solid rgba(var(--gps-primary-rgb), 0.18); border-radius: 12px; padding: 1rem 1.15rem; }
.mr-list { display: flex; flex-direction: column; gap: 0.55rem; }
.mr-item {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 12px;
    border-left-width: 3px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mr-item:hover { transform: translateX(2px); box-shadow: 0 8px 18px -12px rgba(15,23,42,0.12); }
.mr-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(15,23,42,0.05); color: var(--gps-text); font-size: 0.9rem; }
.mr-body { flex: 1; min-width: 0; }
.mr-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.mr-title strong { font-size: 0.95rem; color: var(--gps-text); }
.mr-type { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gps-muted); background: rgba(15,23,42,0.05); padding: 0.1rem 0.5rem; border-radius: 100px; font-weight: 600; }
.mr-meta { display: flex; gap: 0.85rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--gps-muted); }
.mr-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.mr-meta i { color: var(--gps-muted); font-size: 0.75rem; }
.mr-recur i { color: var(--gps-primary); }
.mr-desc { font-size: 0.85rem; color: var(--gps-muted); margin: 0.4rem 0 0; line-height: 1.4; }
.mr-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.mr-actions .btn { padding: 0.3rem 0.55rem; }

.mr-item.mr-ok { border-left-color: #cbd5e1; }
.mr-item.mr-due_soon { border-left-color: #f59e0b; background: rgba(245,158,11,0.04); }
.mr-item.mr-due_soon .mr-icon { background: rgba(245,158,11,0.14); color: #f59e0b; }
.mr-item.mr-overdue { border-left-color: #dc2626; background: rgba(220,38,38,0.04); }
.mr-item.mr-overdue .mr-icon { background: rgba(220,38,38,0.14); color: #dc2626; }
.mr-item.mr-completed { opacity: 0.55; }
.mr-item.mr-completed .mr-icon { background: rgba(16,185,129,0.14); color: #10b981; }

html.dark .mr-item { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .mr-title strong { color: #fff; }
html.dark .mr-type { background: rgba(255,255,255,0.06); }
html.dark .mr-icon { background: rgba(255,255,255,0.05); color: #e2e8f0; }

/* Device stats bar */
.device-stats-bar { padding: 1.2rem 1.4rem 1.4rem; }
.dsb-period { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.dsb-period-label { font-size: 0.85rem; color: var(--gps-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.dsb-period-switch { display: flex; gap: 0.3rem; background: rgba(15,23,42,0.04); padding: 0.25rem; border-radius: 100px; }
.dsb-pill { padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 600; color: var(--gps-muted); border-radius: 100px; text-decoration: none; transition: all 0.15s; }
.dsb-pill:hover { color: var(--gps-text); background: rgba(15,23,42,0.04); }
.dsb-pill.active { background: var(--gps-primary); color: var(--gps-primary-text); }
.dsb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; }
.dsb-card {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.85rem;
    background: rgba(15,23,42,0.03);
    border: 1px solid var(--gps-border);
    border-radius: 12px;
    transition: transform 0.2s, border-color 0.2s;
}
.dsb-card:hover { transform: translateY(-2px); border-color: rgba(var(--gps-primary-rgb), 0.35); }
/* Inactive health card - shown greyed-out until live data arrives (engine on / OBD connected) */
.dsb-card-muted { opacity: 0.55; }
.dsb-card-muted:hover { transform: none; border-color: var(--gps-border); }
.dsb-card-muted .dsb-icon { background: #cbd5e1; color: #64748b; }
.dsb-card-muted .dsb-lbl { color: #94a3b8; }
.dsb-dash { color: #94a3b8; }
.dsb-stale { color: #94a3b8; font-weight: 400; font-size: 0.78em; }
html.dark .dsb-card-muted .dsb-icon { background: rgba(255,255,255,0.08); color: var(--gps-muted); }
.dsb-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--gps-primary); color: var(--gps-primary-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
html.dark .dsb-icon { background: var(--gps-primary); color: var(--gps-primary-text); }
.dsb-num { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; color: var(--gps-text); line-height: 1.1; }
.dsb-num small { font-size: 0.6em; font-weight: 600; color: var(--gps-muted); margin-left: 0.15em; }
.dsb-lbl { font-size: 0.72rem; color: var(--gps-muted); margin-top: 0.1rem; }

.dsb-card-alert.has-alert { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.25); }
.dsb-card-alert.has-alert .dsb-icon { background: #dc2626; color: #fff; }
.dsb-card-alert.has-alert .dsb-num { color: #dc2626; }

.dsb-rating-excellent .dsb-icon { background: #10b981; color: #fff; }
.dsb-rating-excellent .dsb-num { background: linear-gradient(135deg, #10b981, #059669); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dsb-rating-good .dsb-icon { background: var(--gps-primary); color: var(--gps-primary-text); }
.dsb-rating-good .dsb-num { background: linear-gradient(135deg, var(--gps-primary), #6dd400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dsb-rating-warning .dsb-icon { background: #f59e0b; color: #fff; }
.dsb-rating-warning .dsb-num { color: #f59e0b; }
.dsb-rating-bad .dsb-icon { background: #dc2626; color: #fff; }
.dsb-rating-bad .dsb-num { color: #dc2626; }
.dsb-rating-na .dsb-icon { background: #94a3b8; color: #fff; }

/* Hint when device has no OBD support */
.dsb-no-obd-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: rgba(96,165,250,0.06);
    border: 1px dashed rgba(96,165,250,0.35);
    border-radius: 12px;
}
.dsb-no-obd-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: #60a5fa; color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem;
}
.dsb-no-obd-hint strong { display: block; margin-bottom: 0.15rem; color: var(--gps-text); }
.dsb-no-obd-hint p { color: var(--gps-muted); margin: 0; line-height: 1.5; }
.dsb-no-obd-hint a { color: var(--gps-primary); }
html.dark .dsb-no-obd-hint { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.3); }
html.dark .dsb-no-obd-hint strong { color: #fff; }
.dsb-no-obd-hint a { color: var(--gps-text); text-decoration: underline; font-weight: 600; }
.dsb-no-obd-hint a:hover { color: var(--gps-primary); }
html.dark .dsb-no-obd-hint a { color: #fff; }

/* OBD-specific stat cards */
.dsb-icon-fuel { background: #3b82f6 !important; color: #fff !important; }
.dsb-icon-tank { background: #06b6d4 !important; color: #fff !important; }
.dsb-icon-rpm { background: #8b5cf6 !important; color: #fff !important; }
.dsb-icon-temp { background: #ef4444 !important; color: #fff !important; }
.dsb-icon-obd { background: #0f172a !important; color: var(--gps-primary) !important; }
.dsb-card.dsb-obd-info { opacity: 0.85; }

html.dark .dsb-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .dsb-num { color: #fff; }
html.dark .dsb-period-switch { background: rgba(255,255,255,0.06); }
html.dark .dsb-pill:hover { background: rgba(255,255,255,0.08); color: #fff; }

@media (max-width: 1199px) { .dsb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .dsb-grid { grid-template-columns: repeat(2, 1fr); } }

/* Devices catalog */
.devices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 1rem 0 2.5rem;
}
.dcard {
    position: relative;
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
}
.dcard:hover { transform: translateY(-4px); border-color: rgba(var(--gps-primary-rgb), 0.4); box-shadow: 0 24px 50px -24px rgba(var(--gps-primary-rgb), 0.45); }
.dcard-featured { border-color: var(--gps-primary); border-width: 2px; box-shadow: 0 14px 36px -18px rgba(var(--gps-primary-rgb), 0.5); }
.dcard-pick {
    position: absolute; top: 14px; left: -8px;
    background: linear-gradient(135deg, var(--gps-primary) 0%, var(--gps-primary-hover) 100%);
    color: var(--gps-primary-text);
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.4rem 0.85rem 0.4rem 1rem;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 6px 20px -4px rgba(var(--gps-primary-rgb), 0.55);
    display: inline-flex; align-items: center; gap: 0.4rem;
    z-index: 3;
}
.dcard-pick i { font-size: 0.78rem; }
.dcard-badge {
    position: absolute; top: 14px; right: 14px;
    background: rgba(15,23,42,0.85);
    color: #fff; font-size: 0.65rem;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    padding: 0.3rem 0.65rem; border-radius: 100px;
    z-index: 2;
}
.dcard-badge-pop { background: var(--gps-primary); color: var(--gps-primary-text); }
.dcard-badge-new { background: #60a5fa; color: #fff; }
.dcard-visual {
    background: linear-gradient(180deg, #0a0f1a 0%, #131c2c 100%);
    padding: 1.5rem 1rem 0;
    aspect-ratio: 16 / 11;
}
.dcard-visual svg { width: 100%; height: 100%; display: block; }
.dcard-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.dcard h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; margin: 0; color: var(--gps-text); }
.dcard-tagline { color: var(--gps-muted); font-size: 0.93rem; margin: 0; line-height: 1.45; }
.dcard-price { padding: 0.85rem 0; border-top: 1px solid var(--gps-border); border-bottom: 1px solid var(--gps-border); display: flex; flex-direction: column; gap: 0.2rem; }
.dcard-price-num { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gps-text); }
.dcard-price-vat { font-size: 0.78rem; color: var(--gps-muted); }
.dcard-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dcard-specs li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; color: var(--gps-text); line-height: 1.45; }
.dcard-specs i { color: var(--gps-primary); font-size: 0.8rem; margin-top: 0.25rem; flex-shrink: 0; }
.dcap-block { margin: 0.5rem 0 0; padding-top: 0.85rem; border-top: 1px dashed var(--gps-border); }
.dcap-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--gps-muted); margin-bottom: 0.5rem; }
.dcap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.dcap-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; line-height: 1.35; }
.dcap-row.has { color: var(--gps-text); }
.dcap-row.has i { color: #10b981; flex-shrink: 0; }
.dcap-row.no { color: var(--gps-muted); text-decoration: line-through; opacity: 0.7; }
.dcap-row.no i { color: #cbd5e1; flex-shrink: 0; }
html.dark .dcap-row.has { color: #e2e8f0; }
html.dark .dcap-row.no { color: #64748b; }

.dcard-best { margin-top: 0; font-size: 0.82rem; color: var(--gps-muted); padding-top: 0.85rem; border-top: 1px dashed var(--gps-border); line-height: 1.5; }
.dcard-manual { display: inline-flex; align-items: center; margin-top: 0.55rem; font-size: 0.82rem; font-weight: 600; color: var(--gps-primary); text-decoration: none; transition: opacity 0.15s; }
.dcard-manual:hover { opacity: 0.75; text-decoration: underline; }
.dcard-best strong { color: var(--gps-text); }
html.dark .dcard { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }
html.dark .dcard h3, html.dark .dcard-price-num, html.dark .dcard-best strong { color: #fff; }
html.dark .dcard-specs li { color: #cbd5e1; }
html.dark .dcard-price, html.dark .dcard-best { border-color: rgba(255,255,255,0.08); }
@media (max-width: 991px) { .devices-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .devices-grid { grid-template-columns: 1fr; } }

.devices-cta {
    text-align: center;
    padding: 2.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0.10), rgba(96,165,250,0.05));
    border: 1px solid rgba(var(--gps-primary-rgb), 0.28);
    border-radius: 20px;
    margin: 2rem 0;
}
.devices-cta h3 { font-size: 1.45rem; font-weight: 800; margin: 0 0 0.5rem; }
.devices-cta p { color: var(--gps-muted); margin: 0 0 1.25rem; }

.dcompare-wrap { overflow-x: auto; }
.dcompare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 16px;
    overflow: hidden;
}
.dcompare th, .dcompare td { padding: 0.85rem 1rem; text-align: left; font-size: 0.92rem; }
.dcompare thead th {
    background: rgba(var(--gps-primary-rgb), 0.06);
    font-weight: 700;
    color: var(--gps-text);
    text-transform: none;
}
.dcompare tbody tr { border-top: 1px solid var(--gps-border); }
.dcompare tbody tr:nth-child(even) { background: rgba(15,23,42,0.02); }
.dcompare td { color: var(--gps-text); }
.dcompare td:first-child { font-weight: 600; color: var(--gps-muted); width: 32%; }
.dcompare .dcompare-featured { background: rgba(var(--gps-primary-rgb), 0.08) !important; }
.dcompare i.ok { color: var(--gps-primary); font-size: 1rem; }
.dcompare i.no { color: #cbd5e1; font-size: 1rem; }
html.dark .dcompare { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }
html.dark .dcompare tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
html.dark .dcompare td, html.dark .dcompare thead th { color: #e2e8f0; }
html.dark .dcompare td:first-child { color: #94a3b8; }
html.dark .dcompare i.no { color: #475569; }

/* Mobile: keep the comparison table readable by letting it scroll
   horizontally instead of cramming 4 columns into ~375px (which clipped
   the last column). min-width forces the .dcompare-wrap overflow to engage. */
@media (max-width: 600px) {
    .dcompare-wrap {
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
        /* subtle right-edge fade hints there's more to scroll */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    }
    .dcompare { min-width: 540px; }
    .dcompare th, .dcompare td { padding: 0.6rem 0.7rem; font-size: 0.82rem; }
    .dcompare td:first-child { width: 30%; }
}

/* Manual page (device diagram + steps) */
.manual-diagram {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--gps-border);
    border-radius: 18px;
    padding: 1.25rem;
    margin: 1.25rem 0 2rem;
    overflow-x: auto;
}
.manual-diagram svg { width: 100%; height: auto; min-width: 600px; display: block; }
.manual-diagram-note { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--gps-muted); text-align: center; }
html.dark .manual-diagram { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }

.manual-steps { counter-reset: step; padding: 0; margin: 1.25rem 0 1.75rem; list-style: none; }
.manual-steps > li {
    counter-increment: step;
    position: relative;
    padding: 1.1rem 1.1rem 1.1rem 3.4rem;
    background: rgba(var(--gps-primary-rgb), 0.04);
    border: 1px solid rgba(var(--gps-primary-rgb), 0.15);
    border-radius: 14px;
    margin-bottom: 0.7rem;
    transition: border-color 0.2s, transform 0.2s;
}
.manual-steps > li:hover { border-color: rgba(var(--gps-primary-rgb), 0.4); transform: translateX(2px); }
.manual-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0.85rem; top: 1rem;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--gps-primary);
    color: var(--gps-primary-text);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px -4px rgba(var(--gps-primary-rgb), 0.6);
}
.manual-steps > li > strong { display: block; margin-bottom: 0.25rem; }
.manual-steps > li ul { padding-left: 1.2rem; margin: 0.4rem 0 0; font-size: 0.9rem; }

.manual-wire { display: inline-block; padding: 0.05em 0.5em; border-radius: 100px; font-weight: 700; font-size: 0.85em; }
.manual-wire.wmr { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.manual-wire.wmk { background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }
.manual-wire.wmy { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }

.manual-test { counter-reset: tstep; padding: 0; margin: 1rem 0 1.5rem; list-style: none; }
.manual-test > li {
    counter-increment: tstep;
    position: relative;
    padding: 0.85rem 1rem 0.85rem 3rem;
    background: rgba(96,165,250,0.05);
    border: 1px solid rgba(96,165,250,0.2);
    border-radius: 12px;
    margin-bottom: 0.55rem;
}
.manual-test > li::before {
    content: counter(tstep);
    position: absolute;
    left: 0.75rem; top: 0.85rem;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #60a5fa;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
}
.manual-test > li ul { padding-left: 1.1rem; margin: 0.4rem 0 0; font-size: 0.9rem; }
html.dark .manual-test > li { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.22); }

.manual-preconfig {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0.12), rgba(var(--gps-primary-rgb), 0.04));
    border: 1px solid rgba(var(--gps-primary-rgb), 0.35);
    border-radius: 14px;
    margin: 0.75rem 0 2rem;
}
.manual-preconfig i { font-size: 1.4rem; color: var(--gps-primary); margin-top: 0.1rem; }
.manual-preconfig strong { display: block; margin-bottom: 0.2rem; }
.manual-preconfig div { line-height: 1.55; color: var(--gps-text); }
html.dark .manual-preconfig div { color: #e2e8f0; }

.manual-faq { display: flex; flex-direction: column; gap: 0.55rem; margin: 1rem 0 1.5rem; }
.manual-faq details {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
}
.manual-faq details[open] {
    background: rgba(var(--gps-primary-rgb), 0.05);
    border-color: rgba(var(--gps-primary-rgb), 0.35);
}
.manual-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    color: var(--gps-text);
    display: flex; align-items: center; gap: 0.7rem;
    user-select: none;
}
.manual-faq summary::-webkit-details-marker { display: none; }
.manual-faq summary::before {
    content: '+';
    font-size: 1.2rem; font-weight: 400;
    color: var(--gps-primary);
    transition: transform 0.25s;
    flex-shrink: 0;
}
.manual-faq details[open] summary::before { transform: rotate(45deg); }
.manual-faq details > p { padding: 0 1.1rem 1rem; margin: 0; color: var(--gps-muted); line-height: 1.6; }
html.dark .manual-faq details { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .manual-faq details[open] { background: rgba(var(--gps-primary-rgb), 0.06); }
html.dark .manual-faq summary { color: #e2e8f0; }
html.dark .manual-steps > li { background: rgba(var(--gps-primary-rgb), 0.06); border-color: rgba(var(--gps-primary-rgb), 0.18); }
html.dark .manual-wire.wmk { background: rgba(255,255,255,0.06); color: #e2e8f0; border-color: rgba(255,255,255,0.15); }

/* Warranty + Shipping highlights */
.ws-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin: 1.5rem 0 2.25rem; }
.ws-hi {
    background: rgba(var(--gps-primary-rgb), 0.07);
    border: 1px solid rgba(var(--gps-primary-rgb), 0.22);
    border-radius: 14px;
    padding: 1.1rem 0.9rem 0.95rem;
    text-align: center;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ws-hi:hover { transform: translateY(-3px); border-color: rgba(var(--gps-primary-rgb), 0.5); box-shadow: 0 14px 30px -16px rgba(var(--gps-primary-rgb), 0.4); }
.ws-hi-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--gps-primary-rgb), 0.18); color: var(--gps-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; margin-bottom: 0.55rem; border: 1px solid rgba(var(--gps-primary-rgb), 0.3); }
.ws-hi-num { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.025em; background: linear-gradient(135deg, var(--gps-primary), #6dd400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
.ws-hi-lbl { font-size: 0.78rem; color: var(--gps-muted); margin-top: 0.15rem; }
@media (max-width: 575px) { .ws-highlights { grid-template-columns: repeat(2, 1fr); } }

.ws-shipping-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin: 1rem 0 1.75rem; }
.ws-ship { background: #fff; border: 1px solid var(--gps-border); border-radius: 14px; padding: 1.15rem 1.1rem; transition: transform 0.2s, border-color 0.2s; }
.ws-ship:hover { transform: translateY(-2px); border-color: rgba(var(--gps-primary-rgb), 0.4); }
.ws-ship-head { font-size: 0.85rem; font-weight: 600; color: var(--gps-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ws-ship-price { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gps-text); margin: 0.3rem 0 0.4rem; }
.ws-ship-note { font-size: 0.82rem; color: var(--gps-muted); line-height: 1.45; }
.ws-ship-highlight { background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0.10) 0%, rgba(var(--gps-primary-rgb), 0.03) 100%); border-color: rgba(var(--gps-primary-rgb), 0.35); }
.ws-ship-highlight .ws-ship-price { background: linear-gradient(135deg, var(--gps-primary), #6dd400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.dark .ws-ship { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }
html.dark .ws-ship-head, html.dark .ws-ship-note { color: #94a3b8; }
html.dark .ws-ship-price { color: #fff; }
html.dark .ws-hi { background: rgba(var(--gps-primary-rgb), 0.08); border-color: rgba(var(--gps-primary-rgb), 0.28); }
@media (max-width: 700px) { .ws-shipping-grid { grid-template-columns: 1fr; } }

.legal-identity {
    background: rgba(var(--gps-primary-rgb), 0.06);
    border: 1px solid rgba(var(--gps-primary-rgb), 0.18);
    border-radius: 12px;
    padding: 1.15rem 1.4rem 1.15rem 1.4rem;
    margin: 1.25rem 0 1.5rem;
}
.legal-identity > p { margin: 0 0 0.55rem; font-size: 0.9rem; color: var(--gps-text); }
.legal-identity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.legal-identity-list li { font-size: 0.92rem; color: var(--gps-text); line-height: 1.45; }
.legal-identity-list strong { display: inline-block; min-width: 150px; color: var(--gps-muted); font-weight: 600; }
html.dark .legal-identity { background: rgba(var(--gps-primary-rgb), 0.07); border-color: rgba(var(--gps-primary-rgb), 0.25); }
html.dark .legal-identity-list li, html.dark .legal-identity > p { color: #e2e8f0; }
html.dark .legal-identity-list strong { color: #94a3b8; }
@media (max-width: 575px) {
    .legal-identity-list strong { display: block; min-width: 0; }
}

html.dark .legal-head h1, html.dark .legal-page h2, html.dark .legal-page h3 { color: #fff; }
html.dark .legal-page p, html.dark .legal-page ul, html.dark .legal-page ol { color: #cbd5e1; }
html.dark .legal-page strong { color: #fff; }
html.dark .legal-lead { background: rgba(var(--gps-primary-rgb), 0.08); color: #cbd5e1; }
html.dark .legal-toc { background: rgba(var(--gps-primary-rgb), 0.06); border-color: rgba(var(--gps-primary-rgb), 0.25); }
html.dark .legal-toc a { color: #e2e8f0; }
html.dark .legal-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
html.dark .legal-card-name { color: #fff; }
html.dark .legal-page code { background: rgba(var(--gps-primary-rgb), 0.15); color: var(--gps-primary); }

@media (max-width: 640px) {
    .legal-toc ol { columns: 1; }
    .legal-grid { grid-template-columns: 1fr; }
}

/* ─── Contact page ─── */
.contact-hero {
    padding: 4.5rem 0 5rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 25%, rgba(var(--gps-primary-rgb), 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(96, 165, 250, 0.10) 0%, transparent 50%);
}
.contact-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin: 1rem 0 0.85rem; }
.contact-sub { font-size: 1.05rem; color: var(--gps-muted); max-width: 540px; margin: 0 auto; }
.contact-success {
    max-width: 760px; margin: 0 auto 2rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.05));
    border: 1px solid rgba(16,185,129,0.35);
    color: #047857;
    padding: 0.9rem 1.2rem; border-radius: 14px;
    display: flex; align-items: center; gap: 0.65rem;
    font-weight: 500;
}
.contact-success i { font-size: 1.25rem; }
html.dark .contact-success { color: #6ee7b7; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; max-width: 1080px; margin: 0 auto; }
@media (max-width: 991px) { .contact-layout { grid-template-columns: 1fr; } }

/* Form card */
.contact-form-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 24px;
    padding: 2.25rem;
    overflow: hidden;
}
.contact-form-glow {
    position: absolute; top: -120px; right: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gps-primary-rgb), 0.25) 0%, transparent 65%);
    pointer-events: none;
    filter: blur(20px);
}
.contact-form-head { margin-bottom: 1.75rem; position: relative; }
.contact-form-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; margin: 0.75rem 0 0; }

.contact-form { position: relative; display: flex; flex-direction: column; gap: 1.1rem; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 575px) { .cf-row { grid-template-columns: 1fr; } }

.cf-field { position: relative; }
.cf-input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.15rem 1rem 0.55rem;
    font-size: 0.98rem;
    color: var(--gps-text);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.cf-input:focus {
    outline: none;
    border-color: var(--gps-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--gps-primary-rgb), 0.18);
}
.cf-textarea { resize: vertical; min-height: 130px; padding-top: 1.5rem; }
.cf-label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 0.95rem;
    color: #94a3b8;
    pointer-events: none;
    transition: transform 0.18s ease, color 0.18s, font-size 0.18s;
    transform-origin: left top;
    background: transparent;
}
.cf-input:focus ~ .cf-label,
.cf-input:not(:placeholder-shown) ~ .cf-label {
    transform: translateY(-12px) scale(0.78);
    color: var(--gps-primary);
    font-weight: 600;
}
.cf-field.has-error .cf-input { border-color: #ef4444; background: rgba(239,68,68,0.04); }
.cf-error { color: #dc2626; font-size: 0.78rem; margin-top: 0.3rem; }

.cf-bottom {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 0.4rem;
}
.cf-captcha {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.7rem 1rem;
    background: rgba(var(--gps-primary-rgb), 0.08);
    border: 1px solid rgba(var(--gps-primary-rgb), 0.35);
    border-radius: 100px;
    font-weight: 600;
    color: var(--gps-text);
    font-size: 0.95rem;
}
.cf-captcha i { color: var(--gps-primary); }
.cf-captcha-input {
    width: 50px;
    border: 0;
    background: transparent;
    font-weight: 700;
    font-size: 1rem;
    color: var(--gps-text);
    outline: none;
    text-align: center;
}
.cf-captcha-input::-webkit-outer-spin-button,
.cf-captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf-captcha-input[type=number] { -moz-appearance: textfield; }
.cf-captcha.has-error { border-color: #ef4444; background: rgba(239,68,68,0.06); }

.btn-cf-submit {
    margin-left: auto;
    background: var(--gps-primary);
    color: var(--gps-primary-text);
    border: 0;
    padding: 0.85rem 1.5rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.98rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 8px 22px -8px rgba(var(--gps-primary-rgb), 0.6);
}
.btn-cf-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(var(--gps-primary-rgb), 0.8); }
.btn-cf-submit i { transition: transform 0.2s; }
.btn-cf-submit:hover i { transform: translateX(3px); }

/* Side cards */
.contact-side { display: flex; flex-direction: column; gap: 0.85rem; }
.contact-side-card {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 18px;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
a.contact-side-card:hover { transform: translateY(-2px); border-color: rgba(var(--gps-primary-rgb), 0.35); box-shadow: 0 14px 28px -16px rgba(var(--gps-primary-rgb), 0.45); }
.cs-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--gps-primary-rgb), 0.14); color: var(--gps-primary); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; border: 1px solid rgba(var(--gps-primary-rgb), 0.25); }
.cs-icon-time { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.25); }
.cs-icon-loc { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.cs-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.cs-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gps-muted); font-weight: 600; }
.cs-body strong { font-size: 1rem; font-weight: 700; color: var(--gps-text); letter-spacing: -0.015em; }
.cs-body small { color: var(--gps-muted); font-size: 0.78rem; }
.cs-arrow { color: var(--gps-muted); font-size: 0.78rem; opacity: 0; transition: opacity 0.2s, transform 0.2s; }
a.contact-side-card:hover .cs-arrow { opacity: 1; transform: translateX(2px); }

html.dark .contact-form-card,
html.dark .contact-side-card { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }
html.dark .cf-input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #fff; }
html.dark .cf-input:focus { background: rgba(255,255,255,0.07); border-color: var(--gps-primary); }
html.dark .cf-label { color: #94a3b8; }
html.dark .cs-body strong { color: #fff; }
html.dark .cf-captcha-input { color: #fff; }
html.dark .contact-form-head h3 { color: #fff; }

/* ─── Features page hero ─── */
.features-hero {
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 25%, rgba(var(--gps-primary-rgb), 0.20) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(96, 165, 250, 0.10) 0%, transparent 50%);
}
.features-hero-inner { text-align: center; max-width: 780px; margin: 0 auto; }
.features-hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 1rem 0 1.25rem; }
.features-hero p { font-size: 1.1rem; color: var(--gps-muted); margin: 0 auto 2.5rem; max-width: 580px; }
.features-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.features-stats > div { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1rem; border-radius: 14px; background: rgba(15,23,42,0.04); border: 1px solid var(--gps-border); }
.features-stats .fs-num { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--gps-primary), #6dd400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.features-stats .fs-lbl { font-size: 0.78rem; color: var(--gps-muted); font-weight: 500; }

html.dark .features-stats > div { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }

/* Features showcase trio */
.features-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.fshow {
    position: relative;
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 24px;
    padding: 1.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    min-height: 260px;
}
.fshow:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -28px rgba(var(--gps-primary-rgb), 0.55); border-color: rgba(var(--gps-primary-rgb), 0.4); }
.fshow.fshow-lg { grid-column: span 2; flex-direction: row; align-items: stretch; gap: 2rem; min-height: 320px; }
.fshow-body { flex: 1; display: flex; flex-direction: column; gap: 0.65rem; max-width: 440px; }
.fshow h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.fshow p { color: var(--gps-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.fshow-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fshow-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--gps-text); }
.fshow-list li i { color: var(--gps-primary); font-size: 0.8rem; margin-top: 0.3rem; }

.fshow-visual { position: relative; flex: 1; min-height: 200px; border-radius: 16px; overflow: hidden; }
.fshow-map { background: linear-gradient(180deg, #0a0f1a 0%, #0f1b2d 100%); }
.fshow-map svg { width: 100%; height: 100%; display: block; }
.fshow-map .fshow-trace { animation: ps-trace-dash 1.4s linear infinite; filter: drop-shadow(0 0 8px rgba(204,255,3,0.6)); }
.fshow-live { position: absolute; top: 12px; right: 12px; background: rgba(15,23,42,0.85); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.3rem 0.65rem; border-radius: 100px; backdrop-filter: blur(8px); }
.fshow-dot-main { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--gps-primary); box-shadow: 0 0 0 3px #0a0f1a, 0 0 0 4px var(--gps-primary), 0 0 24px rgba(204,255,3,0.8); transform: translate(-50%, -50%); will-change: left, top; z-index: 3; }
.fshow-dot-pulse { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(204,255,3,0.4); transform: translate(-50%, -50%); will-change: left, top; animation: fshow-pulse 2.2s ease-out infinite; z-index: 2; }
@keyframes fshow-pulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.fshow-zones { background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%); display: flex; align-items: center; justify-content: center; }
.fshow-zones svg { width: 80%; height: auto; }
html.dark .fshow-zones { background: linear-gradient(180deg, #0a0f1a 0%, #0f1b2d 100%); }

.fshow-timeline { background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; justify-content: center; }
.ft-row { display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.ft-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ft-dot-go { background: var(--gps-primary); box-shadow: 0 0 0 3px rgba(204,255,3,0.25); }
.ft-dot-stop { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.ft-dot-arr { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,0.25); }
.ft-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gps-text); min-width: 44px; }
.ft-text { color: var(--gps-muted); }
html.dark .fshow-timeline { background: linear-gradient(180deg, #0a0f1a 0%, #0f1b2d 100%); }
html.dark .ft-time { color: #e2e8f0; }

html.dark .fshow { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }
html.dark .fshow h3 { color: #fff; }
html.dark .fshow p, html.dark .fshow-list li { color: #cbd5e1; }

/* Features tile grid (smaller secondary cards) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.feature-tile {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 18px;
    padding: 1.5rem;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.feature-tile:hover { transform: translateY(-2px); border-color: rgba(var(--gps-primary-rgb), 0.3); box-shadow: 0 14px 30px -16px rgba(var(--gps-primary-rgb), 0.35); }
.feature-tile-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(var(--gps-primary-rgb), 0.12); color: var(--gps-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 0.85rem; border: 1px solid rgba(var(--gps-primary-rgb), 0.25); }
.feature-tile h5 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.4rem; }
.feature-tile p { color: var(--gps-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }
html.dark .feature-tile { background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%); border-color: rgba(255,255,255,0.08); }
html.dark .feature-tile h5 { color: #fff; }

/* Features CTA banner */
.features-cta {
    text-align: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0.10), rgba(96,165,250,0.06));
    border: 1px solid rgba(var(--gps-primary-rgb), 0.25);
    border-radius: 24px;
}
.features-cta h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.75rem; }
.features-cta p { color: var(--gps-muted); margin: 0 0 1.5rem; }
html.dark .features-cta { background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0.12), rgba(96,165,250,0.05)); }

@media (max-width: 991px) {
    .features-showcase { grid-template-columns: 1fr; }
    .fshow.fshow-lg { grid-column: span 1; flex-direction: column; }
    .fshow-body { max-width: none; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .features-stats { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: 1fr; }
}

/* ─── Bento grid (Robinhood-style features) ─── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 18px;
}
.bento-cell {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
    isolation: isolate;
}
.bento-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0) 0%, rgba(var(--gps-primary-rgb), 0) 60%, rgba(var(--gps-primary-rgb), 0.45) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -28px rgba(var(--gps-primary-rgb), 0.55), 0 8px 24px -16px rgba(15,23,42,0.18); }
.bento-cell:hover::before { opacity: 1; }
.bento-cell > * { position: relative; z-index: 1; }
.bento-cell h3 { font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.025em; margin: 0; line-height: 1.15; }
.bento-cell h4 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.bento-cell p { color: var(--gps-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* Big stat number for impact */
.bento-stat {
    font-size: clamp(2.6rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--gps-primary) 0%, #6dd400 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bento-stat-label { font-size: 0.85rem; color: var(--gps-muted); font-weight: 500; margin-top: -0.25rem; }

.bento-hero { grid-column: span 8; min-height: 320px; }
.bento-tall { grid-column: span 4; min-height: 320px; }
.bento-wide { grid-column: span 12; min-height: 200px; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
.bento-feature:not(.bento-hero):not(.bento-wide):not(.bento-tall) { grid-column: span 4; }

.bento-body { display: flex; flex-direction: column; gap: 0.55rem; max-width: 460px; position: relative; z-index: 2; }
.bento-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--gps-primary);
    background: var(--gps-primary-light);
    padding: 0.3rem 0.7rem; border-radius: 100px;
    align-self: flex-start;
}
.bento-icon-chip {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--gps-primary-light); color: var(--gps-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}

/* Map visual inside hero */
.bento-map-vis {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 80% at 75% 70%, rgba(var(--gps-primary-rgb), 0.22) 0%, transparent 60%),
        radial-gradient(circle at 15% 90%, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, transparent 30%, rgba(var(--gps-primary-rgb), 0.06) 100%);
    z-index: 0;
}
.bento-map-vis::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
    opacity: 0.6;
}
.bento-map-vis svg { position: absolute; right: 0; bottom: 0; width: 65%; height: 70%; z-index: 1; }
.bento-map-vis svg path { filter: drop-shadow(0 0 6px rgba(var(--gps-primary-rgb), 0.5)); }
.bento-map-dot {
    position: absolute; right: 18%; top: 32%;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--gps-primary);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gps-primary), 0 0 24px 4px rgba(var(--gps-primary-rgb), 0.7);
    z-index: 3;
}
.bento-map-pulse {
    position: absolute; right: calc(18% - 14px); top: calc(32% - 14px);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(var(--gps-primary-rgb), 0.4);
    animation: bento-pulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 2;
}
.bento-map-pulse::before {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: rgba(var(--gps-primary-rgb), 0.2);
    animation: bento-pulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.7s;
}
@keyframes bento-pulse {
    0% { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Live-data chip floating in hero */
.bento-live-chip {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
    z-index: 3;
}
.bento-live-chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gps-primary);
    box-shadow: 0 0 8px var(--gps-primary);
    animation: bento-blink 1.4s ease-in-out infinite;
}
@keyframes bento-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Phone mock in tall card */
.bento-phone {
    position: relative; align-self: center; margin-top: auto;
    width: 130px; height: 180px;
    border-radius: 22px;
    background: linear-gradient(160deg, #1f2937, #0f172a);
    padding: 10px;
    box-shadow: 0 24px 40px -20px rgba(15,23,42,0.5);
}
.bento-phone-screen {
    width: 100%; height: 100%; border-radius: 14px;
    background: linear-gradient(180deg, #e8eef5 0%, #d8e3f0 100%);
    position: relative; overflow: hidden;
}
.bento-phone-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 4px; background: rgba(0,0,0,0.25); }
.bento-phone-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gps-primary); color: var(--gps-primary-text);
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
    box-shadow: 0 0 0 6px rgba(var(--gps-primary-rgb), 0.25);
}

/* Avatars in wide card */
.bento-avatars { display: flex; align-items: center; }
.bento-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.05rem;
    border: 3px solid #fff;
    margin-left: -14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.bento-avatar:first-child { margin-left: 0; }
.bento-avatar-plus { background: var(--gps-primary); color: var(--gps-primary-text); font-size: 0.85rem; }

@media (max-width: 991px) {
    .bento-grid { grid-template-columns: repeat(6, 1fr); }
    .bento-hero { grid-column: span 6; }
    .bento-tall { grid-column: span 6; grid-row: auto; min-height: 280px; }
    .bento-feature:not(.bento-hero):not(.bento-wide):not(.bento-tall) { grid-column: span 3; }
    .bento-wide { grid-column: span 6; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-hero, .bento-tall, .bento-wide,
    .bento-feature:not(.bento-hero):not(.bento-wide):not(.bento-tall) { grid-column: span 1; }
    /* The map dot/pulse/route are absolutely positioned for the wide desktop
       card. On the tall single-column phone card they float over the text and
       the stretched (preserveAspectRatio=none) path crosses the stats. They're
       decorative (aria-hidden) - drop them on phones, keep the soft gradient. */
    .bento-map-vis svg,
    .bento-map-dot,
    .bento-map-pulse { display: none; }
}

/* Bento small-card demos */
.bento-rating-demo { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; padding-top: 0.85rem; }
.bento-rating-score { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--gps-primary), #6dd400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bento-rating-pill { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.3rem 0.7rem; border-radius: 100px; background: rgba(var(--gps-primary-rgb), 0.15); color: var(--gps-primary); border: 1px solid rgba(var(--gps-primary-rgb), 0.3); }

.bento-mr-demo { display: flex; flex-direction: column; gap: 0.45rem; margin-top: auto; padding-top: 0.85rem; }
.bmr-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; color: var(--gps-muted); }
.bmr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bmr-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.bmr-red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
html.dark .bmr-row { color: #cbd5e1; }

.bento-obd-demo { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.85rem; }
.bobd-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 100px; background: rgba(59,130,246,0.12); color: #3b82f6; border: 1px solid rgba(59,130,246,0.25); }
.bobd-chip i { font-size: 0.7rem; }
html.dark .bobd-chip { background: rgba(59,130,246,0.15); }

/* Bento meta row */
.bento-meta { display: flex; gap: 2rem; margin-top: auto; padding-top: 1rem; }
.bento-meta > div { display: flex; flex-direction: column; gap: 0.15rem; }

/* Dark mode for bento — deeper blacks, more contrast */
html.dark .bento-cell {
    background: linear-gradient(180deg, #0f1624 0%, #0a0f1a 100%);
    border-color: rgba(255,255,255,0.08);
    color: var(--gps-text);
}
html.dark .bento-cell h3, html.dark .bento-cell h4 { color: #fff; }
html.dark .bento-cell p { color: #94a3b8; }
html.dark .bento-eyebrow { background: rgba(var(--gps-primary-rgb), 0.12); color: var(--gps-primary); border: 1px solid rgba(var(--gps-primary-rgb), 0.25); }
html.dark .bento-icon-chip {
    background: linear-gradient(135deg, rgba(var(--gps-primary-rgb), 0.20), rgba(var(--gps-primary-rgb), 0.08));
    color: var(--gps-primary);
    border: 1px solid rgba(var(--gps-primary-rgb), 0.25);
}
html.dark .bento-cell:hover { border-color: rgba(var(--gps-primary-rgb), 0.45); box-shadow: 0 28px 64px -28px rgba(var(--gps-primary-rgb), 0.7), 0 0 0 1px rgba(var(--gps-primary-rgb), 0.15) inset; }
html.dark .bento-map-dot { box-shadow: 0 0 0 3px #0f1624, 0 0 0 4px var(--gps-primary), 0 0 28px 6px rgba(var(--gps-primary-rgb), 0.8); }
html.dark .bento-map-vis::after { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); }
html.dark .bento-avatar { border-color: #0f1624; }
html.dark .bento-phone { background: linear-gradient(160deg, #1e293b, #0f172a); }
html.dark .bento-phone-screen { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); }
html.dark .bento-stat-label { color: #94a3b8; }

/* ─── Plan cards ─── */
.plan-card {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: var(--gps-radius-lg);
    padding: 2.25rem;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}
.plan-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gps-shadow-lg);
}
.plan-card.featured {
    border: 2px solid var(--gps-primary);
    box-shadow: var(--gps-shadow-color);
    background: linear-gradient(180deg, rgba(var(--gps-primary-rgb), 0.04) 0%, #fff 30%);
}
/* Featured plan badge — diagonal corner ribbon (unique vs typical "Most popular" pills) */
.plan-card .plan-badge {
    position: absolute;
    top: 14px;
    right: -8px;
    background: linear-gradient(135deg, var(--gps-primary) 0%, var(--gps-primary-hover) 100%);
    color: var(--gps-primary-text);
    padding: 0.4rem 0.85rem 0.4rem 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 6px 20px -4px rgba(var(--gps-primary-rgb), 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 2;
}
.plan-card .plan-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    border-top: 6px solid var(--gps-primary-hover);
    border-right: 8px solid transparent;
    filter: brightness(0.75);
}
.plan-card .plan-badge i { font-size: 0.82rem; }
.plan-card h3 { font-weight: 800; margin-bottom: 0.3rem; font-size: 1.45rem; }
.plan-card .plan-desc { color: var(--gps-muted); font-size: 0.92rem; margin-bottom: 1.25rem; }
.plan-card .price { font-size: 2.85rem; font-weight: 800; color: var(--gps-dark); letter-spacing: -0.04em; }
.plan-card .price-cycle { color: var(--gps-muted); font-size: 0.95rem; }
/* Breathing room between the feature list and the CTA button */
.plan-card .btn { margin-top: 1.25rem; }
.price-vat-flag {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--gps-muted);
    background: rgba(15,23,42,0.06);
    padding: 0.1rem 0.45rem;
    border-radius: 100px;
    margin-left: 0.2rem;
    vertical-align: middle;
}
.price-with-vat { font-size: 0.78rem; color: var(--gps-muted); margin-top: 0.3rem; line-height: 1.4; }
.price-with-vat strong { color: var(--gps-text); font-weight: 700; }
html.dark .price-vat-flag { background: rgba(255,255,255,0.08); color: #94a3b8; }
html.dark .price-with-vat strong { color: #e2e8f0; }
.plan-card ul { list-style: none; padding: 0; margin: 1.5rem 0; flex-grow: 1; }
.plan-card ul li {
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--gps-border);
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.93rem;
}
.plan-card ul li:last-child { border-bottom: 0; }
.plan-card ul li i {
    color: var(--gps-success);
    margin-top: 3px;
    flex-shrink: 0;
}
/* Excluded features: muted + struck so plan differences are obvious */
.plan-card ul li.plan-feature-off { color: var(--gps-muted); }
.plan-card ul li.plan-feature-off span { text-decoration: line-through; opacity: 0.7; }
.plan-card ul li.plan-feature-off i { color: var(--gps-muted) !important; }

/* ─── Auth pages ─── */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f5;
    padding: 2rem 1rem;
}
.auth-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--gps-radius-lg);
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    margin: 0 auto;
}
.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand .brand-mark { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: 1rem; border-radius: 14px; }
.auth-brand h1 { font-weight: 700; font-size: 1.5rem; margin-bottom: 0.3rem; letter-spacing: -0.02em; color: #0f172a; }
.auth-brand p { color: #64748b; font-size: 0.95rem; margin: 0; }

/* ─── Forms ─── */
.form-label { font-weight: 500; font-size: 0.92rem; color: var(--gps-text); margin-bottom: 0.4rem; }
.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid var(--gps-border);
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    transition: all 0.15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gps-primary);
    box-shadow: 0 0 0 4px rgba(var(--gps-primary-rgb), 0.12);
}

/* ─── Footer (Robinhood chartreuse + tradesimple structure) ─── */
.public-footer {
    background: var(--gps-primary);
    color: var(--gps-primary-text);
    padding: 4.5rem 1rem 2rem;
    margin-top: 0;
}
.public-footer .footer-inner { max-width: 1200px; margin: 0 auto; }
.public-footer .footer-brand {
    display: inline-block; color: var(--gps-primary-text);
    text-decoration: none; font-size: 1.4rem;
    letter-spacing: -0.02em; margin-bottom: 2.5rem;
}
.public-footer .footer-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 3rem; margin-bottom: 3rem;
}
@media (max-width: 991.98px) { .public-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
@media (max-width: 575.98px) { .public-footer .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.public-footer .footer-brand { color: #000 !important; font-weight: 700; }
.public-footer .footer-grid h4 {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 1.25rem; color: #000;
}
.public-footer .footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.public-footer .footer-grid a {
    color: #000; text-decoration: none;
    font-size: 0.92rem; font-weight: 500;
}
.public-footer .footer-grid a:hover { text-decoration: underline; }
.public-footer .footer-social {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding: 1.75rem 0;
    border-top: 1px solid rgba(0,0,0,0.15);
    flex-wrap: wrap;
}
.public-footer .footer-contact {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    font-size: 0.92rem; color: #000; font-weight: 500;
}
.public-footer .footer-contact i { color: #000; }
.public-footer .footer-contact a { color: #000; text-decoration: none; transition: opacity 0.15s; }
.public-footer .footer-contact a:hover { opacity: 0.65; text-decoration: underline; }
.public-footer .footer-social-icons { display: flex; gap: 0.6rem; }
.public-footer .footer-social-icons a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0,0,0,0.10); color: #000;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.15s;
}
.public-footer .footer-social-icons a:hover { background: #000; color: var(--gps-primary); }
.public-footer .footer-disclaimer {
    border-top: 1px solid rgba(0,0,0,0.15);
    padding-top: 1.75rem;
}
.public-footer .footer-disclaimer p { line-height: 1.6; color: #000; }
.public-footer .footer-bottom-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.public-footer .footer-bottom-sep { color: rgba(0,0,0,0.45); }
.public-footer .footer-poweredby {
    color: #000;
    text-decoration: none;
    position: relative;
    transition: color 0.18s;
}
.public-footer .footer-poweredby strong { font-weight: 700; border-bottom: 1px solid transparent; transition: border-color 0.18s, color 0.18s; }
.public-footer .footer-poweredby:hover { color: #000; }
.public-footer .footer-poweredby:hover strong { border-bottom-color: #000; }
.public-footer .footer-poweredby::after {
    content: '↗';
    margin-left: 0.25rem;
    display: inline-block;
    transition: transform 0.18s;
}
.public-footer .footer-poweredby:hover::after { transform: translate(2px, -2px); }

/* ─── App / Dashboard layout ─── */
.app-wrapper { min-height: 100vh; background: var(--gps-bg); }
.app-navbar {
    background: #000 !important;
    border-bottom: 1px solid #111;
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 1020;
}
/* Dashboard top menu uses the admin-sidebar dark palette on light theme too */
.app-navbar .navbar-brand,
.app-navbar .brand-wordmark,
.app-navbar .brand-wordmark:hover { color: #fff !important; }
/* "GPS" inherits white from .brand-wordmark - matches marketing's hierarchy
   (weight 700 + 400) instead of also losing colour like before. */
.app-navbar .brand-wordmark span { color: #fff !important; opacity: 1; }
.app-navbar .nav-link { color: #cbd5e1 !important; }
.app-navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.06); }
.app-navbar .nav-link.active { color: var(--gps-primary) !important; background: rgba(var(--gps-primary-rgb), 0.12); }
.app-navbar .btn-outline-secondary {
    color: #cbd5e1; border-color: rgba(255,255,255,0.18); background: transparent;
}
.app-navbar .btn-outline-secondary:hover { background: var(--gps-primary); color: #0a0a0a; border-color: var(--gps-primary); }
.app-navbar .lang-globe {
    color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.20);
    width: 36px; height: 36px; /* match navbar .btn-outline-secondary height */
}
.app-navbar .lang-globe:hover { background: var(--gps-primary); color: #0a0a0a; border-color: var(--gps-primary); }
.app-content { padding: 1.75rem 0 2rem; }
.app-card {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: var(--gps-radius);
    padding: 1.5rem;
    box-shadow: var(--gps-shadow-sm);
    transition: box-shadow 0.2s;
}
.app-card:hover { box-shadow: var(--gps-shadow); }
.app-card h6 { font-weight: 700; letter-spacing: -0.01em; }

.stat-card {
    background: #fff;
    border: 1px solid var(--gps-border);
    border-radius: var(--gps-radius);
    padding: 1.35rem 1.45rem;
    box-shadow: var(--gps-shadow-sm);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--gps-shadow); }
.stat-card .stat-label { color: var(--gps-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat-card .stat-value { font-size: 1.95rem; font-weight: 800; color: var(--gps-dark); margin-top: 0.25rem; letter-spacing: -0.03em; }
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gps-primary-light) 0%, rgba(var(--gps-primary-rgb), 0.20) 100%);
    color: var(--gps-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* ─── Map ─── */
#main-map { height: 60vh; min-height: 400px; border-radius: var(--gps-radius); }
.device-marker {
    background: var(--gps-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
}

/* ─── Status pills ─── */
.status-pill {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.status-online { background: #d1fae5; color: #047857; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-active { background: var(--gps-primary); color: var(--gps-primary-text); }
.status-warning { background: #fef3c7; color: #92400e; }
.status-info { background: #dbeafe; color: #1e40af; }

/* ─── Tables ─── */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead { background: #f8fafc; }
.table > thead th { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gps-muted); padding: 0.9rem 1rem; border-bottom: 1px solid var(--gps-border); }
.table > tbody > tr > td,
.table > tfoot > tr > td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--gps-border); vertical-align: middle; }
.table > tbody > tr:hover { background: rgba(var(--gps-primary-rgb), 0.03); }
.table > tfoot > tr > td { border-bottom: 0; }

/* ─── Alerts (Bootstrap override) ─── */
.alert { border-radius: 10px; border: 0; padding: 0.85rem 1.1rem; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }

/* ─── FAQ accordion ─── */
.accordion-item { border-radius: var(--gps-radius) !important; border: 1px solid var(--gps-border); margin-bottom: 0.65rem; overflow: hidden; }
.accordion-button { font-weight: 600; padding: 1.15rem 1.35rem; background: #fff; color: var(--gps-text); border-radius: var(--gps-radius) !important; }
.accordion-button:not(.collapsed) { background: var(--gps-primary-light); color: var(--gps-text); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(var(--gps-primary-rgb), 0.12); }
.accordion-body { color: var(--gps-muted); line-height: 1.7; padding: 0.85rem 1.35rem 1.35rem; }

/* ─── Mobile bottom navigation ─── */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--gps-border);
    display: flex;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}
.mobile-bottom-nav .bn-item {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.25rem 0.55rem;
    color: var(--gps-muted);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    transition: all 0.15s;
}
.mobile-bottom-nav .bn-item i { font-size: 1.3rem; transition: all 0.15s; }
/* Active item: lime as text is unreadable on the white bar, so show it as a
   filled pill behind the icon (dark glyph) with a readable dark label. */
.mobile-bottom-nav .bn-item.active { color: var(--gps-text); font-weight: 600; }
.mobile-bottom-nav .bn-item.active i {
    color: var(--gps-primary-text);
    background: var(--gps-primary);
    padding: 0.18rem 0.9rem;
    border-radius: 100px;
}

@media (max-width: 767.98px) {
    .app-content { padding-bottom: 5.5rem; }
}

/* ─── Section background variants ─── */
.section-muted { background: var(--gps-bg); }
.section-gradient {
    background:
        radial-gradient(circle at 10% 10%, rgba(var(--gps-primary-rgb), 0.10) 0%, transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
        var(--gps-surface);
}

/* ─── Dark mode ─── */
html.dark {
    --gps-bg: #0a1119;
    --gps-surface: #0f172a;
    --gps-text: #e2e8f0;
    --gps-muted: #94a3b8;
    --gps-border: #1e293b;
    --gps-dark: #f1f5f9;
}
html.dark body { background: var(--gps-surface); color: var(--gps-text); }
html.dark .public-body { background: var(--gps-surface); }
html.dark .app-wrapper {
    background:
        radial-gradient(circle at 90% 0%, rgba(204,255,3,0.10) 0%, transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(96,165,250,0.06) 0%, transparent 35%),
        #000;
    min-height: 100vh;
}
html.dark body { background: #000; }

/* ─── User dashboard polish (mirror of admin effects) ─── */
.app-content > *,
main > .container > * {
    animation: app-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    /* fill-mode: backwards = apply the FROM state before animation, but after animation
       ends the element reverts to computed style (transform: none). This is critical so
       position:fixed descendants (fullscreen map) can escape the containing block. */
}
/* But for the 500ms the animation IS running, transform is non-none and
   creates a new containing block for position:fixed - so the wrap traps
   inside .app-content instead of going viewport-fullscreen. /monitor
   refreshes that landed mid-animation showed the dashboard chrome with
   the wrap stuck in flow. Opt the fullscreen page out of the fade. */
body.has-fullscreen-map .app-content > *,
body.has-fullscreen-map main > .container > * {
    animation: none !important;
    transform: none !important;
}
.app-content > *:nth-child(1) { animation-delay: 0.02s; }
.app-content > *:nth-child(2) { animation-delay: 0.08s; }
.app-content > *:nth-child(3) { animation-delay: 0.14s; }
.app-content > *:nth-child(4) { animation-delay: 0.20s; }
.app-content > *:nth-child(5) { animation-delay: 0.26s; }
@keyframes app-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.app-wrapper .stat-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
}
.app-wrapper .stat-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gps-primary), #6dd400);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-wrapper .stat-card:hover::after { transform: scaleY(1); }
.app-wrapper .stat-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 18px 42px -22px rgba(var(--gps-primary-rgb), 0.45), 0 6px 14px -8px rgba(0,0,0,0.25);
}
.app-wrapper .stat-card .stat-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.app-wrapper .stat-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }

.app-wrapper .app-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s;
}
/* cursor-tracked glow on .app-card removed per user request */
.app-wrapper .app-card:hover {
    border-color: rgba(204,255,3,0.25);
    box-shadow: 0 12px 28px -16px rgba(0,0,0,0.35);
}
.app-wrapper .app-card > *:not(.map-fs-toggle) { position: relative; z-index: 1; }
.app-wrapper .app-card.map-fs-wrap,
.app-wrapper .map-fs-wrap.app-card { overflow: hidden; }
.app-wrapper .app-card.map-fs-wrap::before,
.app-wrapper .map-fs-wrap.app-card::before { display: none; }

.app-wrapper .table tbody tr { transition: background 0.18s, box-shadow 0.18s; }
.app-wrapper .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(204,255,3,0.10), transparent 70%) !important;
    box-shadow: inset 3px 0 0 var(--gps-primary);
}

.app-wrapper .app-card > h6 {
    position: relative;
    padding-left: 0.9rem;
}
.app-wrapper .app-card > h6::before {
    content: '';
    position: absolute;
    left: 0; top: 0.15em; bottom: 0.15em;
    width: 3px;
    background: linear-gradient(180deg, var(--gps-primary), #6dd400);
    border-radius: 2px;
}

.app-wrapper .btn-primary {
    transition: transform 0.2s, box-shadow 0.2s;
}
.app-wrapper .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(204,255,3,0.55);
}

/* App navbar accent underline */
html.dark .app-navbar { position: relative; }
html.dark .app-navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(204,255,3,0.45), transparent);
}
html.dark .navbar.sticky-top { background: rgba(0, 0, 0, 0.92) !important; border-bottom-color: rgba(255,255,255,0.06) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
html.dark .navbar-brand, html.dark .navbar-brand:hover { color: #fff !important; }
html.dark .navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
html.dark .navbar .nav-link:hover { color: var(--gps-primary) !important; background: rgba(var(--gps-primary-rgb), 0.12); }
html.dark .navbar .btn-outline-primary { color: #fff; border-color: rgba(255,255,255,0.25); }
html.dark .navbar .btn-outline-primary:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); }

/* Burger toggler on mobile — switch to white-stroke icon when the navbar is dark */
html.dark .navbar-toggler { border-color: rgba(255,255,255,0.25); }
html.dark .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.15); }
html.dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
html.dark .nav-link { color: var(--gps-text) !important; }
html.dark .nav-link:hover { background: rgba(var(--gps-primary-rgb), 0.20); }
html.dark .app-navbar { background: rgba(0, 0, 0, 0.85) !important; border-bottom-color: rgba(255,255,255,0.06); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
/* Reusable back-link for detail/edit pages - small subtle pill that
   sits above the main heading. Shared by partials/back-link.blade.php
   so every page styles consistently. */
/* Small, unobtrusive back link. Sits on its own row above the heading
   so it never collides with header action buttons. Compact and tinted
   so it reads as navigation, not as a CTA. */
.back-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.55rem 0.2rem 0.45rem; border-radius: 100px;
    background: transparent;
    border: 0;
    color: var(--gps-muted); text-decoration: none;
    font-size: 0.78rem; font-weight: 500;
    margin: 0 0 0.5rem 0;
    transition: color 0.18s, background 0.18s, transform 0.18s;
}
.back-link i { font-size: 0.68rem; transition: transform 0.18s; }
.back-link:hover, .back-link:focus, .back-link:active {
    background: rgba(15,23,42,0.06);
    color: var(--gps-text, #0a0a0a);
    text-decoration: none;
}
.back-link:hover i, .back-link:focus i { transform: translateX(-2px); }
.back-link:active { transform: scale(0.97); }
html.dark .back-link { color: rgba(255,255,255,0.65); }
html.dark .back-link:hover, html.dark .back-link:focus, html.dark .back-link:active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Combined detail-page header: a circular back button sitting inline to
   the left of the page title + subtitle. Modern app-detail pattern
   (iOS/Material) - the back affordance and the title read as one unit
   instead of a stray link floating above the heading. */
.page-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.page-head .page-back {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gps-surface, #fff);
    border: 1px solid var(--gps-border);
    color: var(--gps-text, #0a0a0a);
    text-decoration: none; font-size: 0.95rem;
    box-shadow: var(--gps-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
    transition: background 0.16s, border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.page-head .page-back:hover {
    background: var(--gps-primary);
    border-color: var(--gps-primary);
    color: var(--gps-primary-text, #0a0a0a);
    transform: translateX(-2px);
    box-shadow: 0 6px 16px -6px rgba(var(--gps-primary-rgb), 0.6);
}
.page-head .page-back:active { transform: translateX(-2px) scale(0.94); }
.page-head .page-head-text { min-width: 0; }
.page-head .page-head-text h1 { overflow: hidden; text-overflow: ellipsis; }
html.dark .page-head .page-back { background: var(--gps-bg); border-color: rgba(255,255,255,0.12); color: #fff; }
@media (max-width: 575.98px) {
    .page-head { gap: 0.65rem; }
    .page-head .page-back { width: 38px; height: 38px; font-size: 0.9rem; }
}

html.dark .app-navbar .navbar-brand, html.dark .app-navbar .navbar-brand:hover { color: #fff !important; }
html.dark .app-navbar .nav-link { color: rgba(255,255,255,0.85) !important; }
html.dark .app-navbar .nav-link:hover { color: var(--gps-primary) !important; }
html.dark .app-navbar .nav-link.active { color: var(--gps-primary) !important; background: rgba(var(--gps-primary-rgb), 0.12); }

/* ─── Mobile nav drawer: language pills + full-width CTA ───
   Desktop keeps the original compact row (globe icon + buttons inline);
   below 992px we stack a clear language toggle on top and a primary CTA
   on the bottom so each gets its own visual weight. */
.nav-actions { display: flex; gap: 0.5rem; align-items: center; }
.nav-actions-row { display: flex; gap: 0.5rem; align-items: center; }
@media (max-width: 991.98px) {
    .nav-actions {
        flex-direction: column; align-items: stretch; gap: 0.75rem;
        margin-top: 1rem; padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .nav-lang-pills {
        display: flex; gap: 0.4rem; padding: 0.3rem;
        border-radius: 100px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
    }
    .nav-lang-pill {
        flex: 1; text-align: center;
        padding: 0.55rem 0.75rem; border-radius: 100px;
        font-size: 0.88rem; font-weight: 600;
        color: rgba(255,255,255,0.7); text-decoration: none;
        transition: background 0.18s, color 0.18s;
    }
    .nav-lang-pill:hover { color: #fff; background: rgba(255,255,255,0.04); }
    .nav-lang-pill.is-active {
        color: #0a0a0a;
        background: var(--gps-primary);
        box-shadow: 0 2px 8px -3px rgba(var(--gps-primary-rgb), 0.55);
    }
    .nav-actions-row { flex-direction: column; gap: 0.5rem; align-items: stretch; }
    .nav-actions-row .nav-cta {
        width: 100%; padding: 0.7rem 1rem;
        font-weight: 700; font-size: 0.95rem;
        border-radius: 10px;
    }
}
html:not(.dark) .nav-actions { border-top-color: rgba(0,0,0,0.08); }
html:not(.dark) .nav-lang-pills { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
html:not(.dark) .nav-lang-pill { color: rgba(0,0,0,0.6); }
html:not(.dark) .nav-lang-pill:hover { color: #0a0a0a; background: rgba(0,0,0,0.04); }
html:not(.dark) .nav-lang-pill.is-active { color: #0a0a0a; background: var(--gps-primary); }
html.dark .app-card, html.dark .stat-card, html.dark .feature-card, html.dark .plan-card, html.dark .accordion-item, html.dark .accordion-button { background: #131c2c; border-color: var(--gps-border); color: var(--gps-text); }
html.dark .plan-card.featured { background: linear-gradient(180deg, rgba(var(--gps-primary-rgb), 0.10) 0%, #131c2c 40%); }
html.dark .plan-card h3, html.dark .plan-card .price, html.dark .stat-card .stat-value, html.dark .feature-card h5, html.dark .auth-brand h1 { color: #fff; }
html.dark .table > thead { background: #131c2c; }
html.dark .table > thead th { color: var(--gps-muted); border-bottom-color: var(--gps-border); }
html.dark .table { --bs-table-color: #e2e8f0; --bs-table-bg: transparent; color: #e2e8f0; }
html.dark .table > tbody > tr > td { border-bottom-color: var(--gps-border); color: #e2e8f0; }
html.dark .table > tbody > tr > td code { color: #cbd5e1; background: rgba(255,255,255,0.06); }
html.dark .table > tbody > tr > td.text-muted,
html.dark .table > tbody > tr > td .text-muted { color: var(--gps-muted) !important; }
html.dark .table > tbody > tr:hover { background: rgba(var(--gps-primary-rgb), 0.08); }
html.dark .form-control, html.dark .form-select { background: #131c2c; color: var(--gps-text); border-color: var(--gps-border); }
html.dark .form-control::placeholder { color: var(--gps-muted); }
html.dark .form-label { color: var(--gps-text); }
/* Universal dropdown z-index fix — must float over any card/section */
.dropdown-menu { z-index: 1080 !important; }
.dropdown-menu.show { z-index: 1080 !important; }
/* Lift parent navbar so its dropdowns are not clipped by sibling content */
.navbar.sticky-top { z-index: 1040 !important; }
.app-navbar { z-index: 1040; position: sticky; top: 0; }
/* Any container with an open dropdown allows the dropdown to overflow.
   :has() supported in modern browsers; fallback: navbar overflow:visible. */
.app-navbar, .admin-navbar, .navbar { overflow: visible !important; }
.app-card:has(.dropdown.show), .app-card:has(.dropdown-menu.show) { overflow: visible !important; }

html.dark .dropdown-menu { background: #131c2c; border-color: var(--gps-border); }
html.dark .dropdown-item { color: var(--gps-text); }
html.dark .dropdown-item:hover { background: rgba(var(--gps-primary-rgb), 0.18); color: #fff; }
html.dark .accordion-button { color: #e2e8f0; }
html.dark .accordion-button:not(.collapsed) { background: rgba(var(--gps-primary-rgb), 0.10); color: var(--gps-primary); box-shadow: none; }
/* Highlight the whole item (button + body) when an FAQ is open so the answer
   doesn't look disconnected from the question above it. */
html.dark .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(var(--gps-primary-rgb), 0.4); }
html.dark .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-body { background: rgba(var(--gps-primary-rgb), 0.04); }
html.dark .accordion-button::after { filter: invert(1) hue-rotate(180deg) saturate(2); }
html.dark .accordion-body { color: #cbd5e1; }
html.dark .alert-success { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
html.dark .alert-danger { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
html.dark .alert-warning { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html.dark .hero { position: relative; }
html.dark .hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 180px;
    background: linear-gradient(180deg, transparent 0%, #000 100%);
    pointer-events: none;
    z-index: 1;
}
html.dark .hero > .container { position: relative; z-index: 2; }
html.dark .hero {
    background:
        radial-gradient(circle at 12% 25%, rgba(var(--gps-primary-rgb), 0.28) 0%, transparent 45%),
        radial-gradient(circle at 88% 75%, rgba(var(--gps-primary-rgb), 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #000 0%, #060a10 100%);
}
html.dark .hero::before { background-image: linear-gradient(rgba(226,232,240,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(226,232,240,0.04) 1px, transparent 1px); }
html.dark .hero h1 { color: #fff; }
html.dark .hero .accent { -webkit-text-fill-color: var(--gps-primary); color: var(--gps-primary); background: none; }
/* Auth pages stay LIGHT even on dark public layout (Robinhood-style clean login). */
html.dark .auth-wrapper {
    background: #f7f7f5;
    color: #0f172a;
}
html.dark .auth-card {
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}
html.dark .auth-card .form-label { color: #475569; }
html.dark .auth-card .form-control { background: #fff; color: #0f172a; border-color: #e2e8f0; }
html.dark .auth-card .form-check-label { color: #475569; }
html.dark .auth-brand h1 { color: #0f172a; }
html.dark .auth-brand p { color: #64748b; }
html.dark .auth-card hr { border-color: #e2e8f0; }
html.dark .auth-card a { color: var(--gps-text); }
html.dark .auth-card .text-center.small { color: #64748b !important; }
html.dark .section { background: #000; }
html.dark .section-muted { background: #000; }
html.dark .section-gradient { background: radial-gradient(circle at 10% 10%, rgba(var(--gps-primary-rgb), 0.18) 0%, transparent 50%), #000; position: relative; }
html.dark .section-gradient::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 160px;
    background: linear-gradient(180deg, #000 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
html.dark .section-gradient > .container { position: relative; z-index: 2; }
html.dark .public-body { background: #000; }
/* Footer stays chartreuse in dark mode too (Robinhood signature) */
html.dark .btn-outline-secondary { color: var(--gps-text); border-color: var(--gps-border); }
html.dark .btn-outline-secondary:hover { background: var(--gps-border); color: #fff; }
html.dark code { color: #fbb6ce; background: var(--gps-bg); padding: 0.125rem 0.35rem; border-radius: 4px; }
html.dark .mobile-bottom-nav { background: rgba(19, 28, 44, 0.92); border-top-color: var(--gps-border); }
html.dark .text-muted, html.dark .small.text-muted { color: var(--gps-muted) !important; }
html.dark .hero-visual .phone { background: linear-gradient(155deg, #131c2c 0%, #0a1119 100%); border-color: var(--gps-border); }
html.dark .hero-visual .floating-card { background: #131c2c; border-color: var(--gps-border); }
html.dark .fc-text strong { color: #fff; }
html.dark .hero-pill { background: rgba(var(--gps-primary-rgb), 0.20); border-color: rgba(var(--gps-primary-rgb), 0.35); }

/* ─── Shared Leaflet vehicle popup ─── */
.leaflet-popup-pane { z-index: 1100; }
.leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; box-shadow: 0 16px 40px rgba(15,23,42,0.22); }

/* ─── Route overlay (shared by history page + live dashboard quick-routes) ─── */
.ep-marker {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    color: #0a0a0a; box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    white-space: nowrap; border: 2px solid #0a0a0a;
}
.ep-marker i { font-size: 11px; }
/* Scoped to .ep-marker so the same class names on the route Start/End
   popups (.ep-popup.ep-start / .ep-popup.ep-end) don't get the
   marker-chip background/color. */
.ep-marker.ep-start { background: #ccff03; }
.ep-marker.ep-end { background: #0a0a0a; color: #ccff03; border-color: #ccff03; }
.stop-marker-wrap { position: relative; width: 40px; height: 40px; cursor: pointer; transition: transform 0.15s; }
.stop-marker-wrap:hover { transform: scale(1.1); }
.stop-marker {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.30));
}
.stop-marker.short { background: #f59e0b; }
.stop-marker.long { background: #ef4444; }
.stop-num {
    position: absolute; right: -6px; top: -6px;
    background: var(--gps-primary); color: #fff; font-size: 10px; font-weight: 700;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.30); z-index: 2;
}
.stop-popup { padding: 0.6rem 0.75rem 0.7rem; min-width: 240px; font-family: 'Inter', sans-serif; }
.stop-popup h6 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.65rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--gps-text); }
.stop-popup .duration { color: #10b981; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.stop-popup p { font-size: 0.85rem; color: var(--gps-muted); margin: 0 0 0.4rem; line-height: 1.45; }
.stop-popup .actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; flex-wrap: wrap; }
.stop-popup .btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.35rem 0.8rem; background: #fff; border: 1px solid var(--gps-border); border-radius: 100px; color: var(--gps-text); cursor: pointer; text-decoration: none; transition: all 0.15s; }
.stop-popup .btn-pill:hover { background: var(--gps-primary); color: var(--gps-primary-text); border-color: var(--gps-primary); }
.stop-popup .btn-pill.icon-only { padding: 0; width: 32px; height: 32px; flex-shrink: 0; }
html.dark .stop-popup .btn-pill { background: var(--gps-bg); color: #fff; border-color: rgba(255,255,255,0.18); }
html.dark .stop-popup .btn-pill:hover { background: var(--gps-primary); color: var(--gps-primary-text); border-color: var(--gps-primary); }
html.dark .stop-popup h6 { color: #fff; }
html.dark .stop-popup p { color: #cbd5e1; }
/* Route start/end popups: solid black header, max contrast on white;
   white on dark. Small-caps + heavy weight keep them distinct from
   regular stop popups without relying on colour. */
.stop-popup.ep-popup h6 {
    color: #0a0a0a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 800;
}
html.dark .stop-popup.ep-popup h6 { color: #fff; }

/* Route banner - floating control shown while a quick-route is on the
   live map. Defaults to fixed positioning so it's anchored to the
   viewport regardless of where the map sits in the page flow (the
   bug we just fixed: dashboard's map-wrap is mid-page, so an
   absolute-positioned banner landed ~960px from top, below the fold).
   When the parent map is in fullscreen mode the wrap covers the
   viewport anyway, so position:absolute inside it lands at top:14px
   correctly - kept as an override below. */
.route-banner {
    position: fixed; top: 84px; left: 50%; transform: translateX(-50%) translateY(-8px);
    z-index: 10001; display: none; align-items: center; gap: 0.6rem;
    max-width: calc(100vw - 32px);
    background: #0a0a0a; color: #f1f5f9; border: 1px solid rgba(255,255,255,0.12);
    padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-size: 0.85rem; font-weight: 600;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.map-fs-wrap.is-fullscreen .route-banner {
    position: absolute; top: 14px;
}
.route-banner.show { display: flex !important; opacity: 1 !important; transform: translateX(-50%) translateY(0); }
.route-banner .rb-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #ccff03; border-radius: 50%; animation: rb-spin 0.7s linear infinite; }
@keyframes rb-spin { to { transform: rotate(360deg); } }
.route-banner .rb-close {
    width: 26px; height: 26px; border-radius: 50%; border: 0; flex-shrink: 0;
    background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
    transition: background 0.15s;
}
.route-banner .rb-close:hover { background: #ef4444; }
.route-banner .rb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 0.35rem; }
.route-banner .rb-text .rb-ico { color: #ccff03; font-size: 0.78rem; }
.route-banner .rb-text .rb-sep { color: rgba(255,255,255,0.35); }
.route-banner .rb-text .rb-headline { font-weight: 700; }
.leaflet-popup-content {
    margin: 0.55rem 0.75rem 0.55rem 0.65rem !important;
    min-width: 240px !important;
    font-size: 0.92rem;
    line-height: 1.5;
}
.leaflet-popup-content strong { font-size: 1rem; }
.leaflet-popup-content br + * , .leaflet-popup-content strong + br + * { display: inline; }
.leaflet-popup-close-button {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 28px !important;
    height: 28px !important;
    background: #0f172a !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.35) !important;
    border: 2px solid #fff !important;
    z-index: 1200 !important;
    padding: 0 !important;
    transition: transform 0.15s, background 0.15s !important;
    font-size: 0 !important;
}
.leaflet-popup-close-button:hover { background: var(--gps-primary) !important; color: var(--gps-primary-text) !important; transform: scale(1.08); }
.leaflet-popup-close-button span {
    display: block !important;
    font-size: 22px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    font-family: Arial, sans-serif !important;
    width: 24px !important;
    height: 24px !important;
    text-align: center !important;
}
html.dark .leaflet-popup-close-button { border-color: #131c2c !important; }
.leaflet-popup-content { margin: 0; min-width: 210px; font-family: 'Inter', sans-serif; }

.veh-popup { padding: 0.7rem 0.85rem; }
.veh-popup-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.veh-popup-plate { font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em; color: #0f172a; margin: 0; }
.veh-popup-badges { display: flex; gap: 0.25rem; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
.veh-badge { position: relative; cursor: help; font-size: 0.65rem; font-weight: 600; padding: 0.18rem 0.45rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.veh-badge[data-tip]:hover { z-index: 1300; }
.veh-badge.ok { background: #d1fae5; color: #047857; }
.veh-badge.bad { background: #fee2e2; color: #991b1b; }
.veh-badge[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    background: #0f172a; color: #fff; font-size: 0.72rem; font-weight: 500;
    padding: 0.3rem 0.55rem; border-radius: 6px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.1s ease-out;
    z-index: 1301; text-transform: none; letter-spacing: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.veh-badge[data-tip]:hover::after { opacity: 1; }
.veh-stats { display: flex; gap: 0.7rem; padding: 0.4rem 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; margin-bottom: 0.5rem; font-size: 0.76rem; color: #475569; flex-wrap: wrap; }
.veh-stats > div { display: flex; align-items: center; gap: 0.3rem; }
.veh-stats i { color: #64748b; }
.veh-stats .veh-stat-bad { color: #dc2626; font-weight: 600; }
.veh-stats .veh-stat-bad i { color: #dc2626; }
.veh-status { font-size: 0.8rem; color: #475569; margin: 0 0 0.3rem; }
.veh-address-box { display: flex; align-items: flex-end; gap: 4px; margin: 0 0 0.55rem; }
.veh-address { font-size: 0.78rem; color: #64748b; line-height: 1.35; flex: 1; min-width: 0; }
.veh-address-caret { display: none; flex-shrink: 0; font-size: 0.6rem; color: #94a3b8; transition: transform 0.2s; margin-bottom: 2px; }
.veh-buttons { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
/* Desktop: merge the two popup action rows (copy/nav + time presets) into one centered row.
   On mobile they stay as two centered rows. */
/* Popup action groups stay as two centered rows (both desktop and mobile) */
.veh-actions .veh-buttons { justify-content: center; }
.leaflet-popup-content { min-width: 210px !important; }
.veh-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem; padding: 0.26rem 0.62rem;
    background: #fff; border: 1px solid var(--gps-border); border-radius: 100px;
    color: var(--gps-text); cursor: pointer; text-decoration: none;
    transition: all 0.15s;
}
.veh-btn:hover { background: var(--gps-primary); color: var(--gps-primary-text); border-color: var(--gps-primary); }
.veh-btn.icon-only { padding: 0; width: 32px; height: 32px; justify-content: center; flex-shrink: 0; }
.veh-btn.icon-only i { margin: 0; }
.veh-btn i { font-size: 0.85rem; }
html.dark .leaflet-popup-content-wrapper { background: #131c2c; color: var(--gps-text); }
html.dark .leaflet-popup-tip { background: #131c2c; }
html.dark .veh-popup-plate { color: #fff; }

/* Vehicle popup on phones: the bound minWidth 280-300 / maxWidth 360 is wider
   than the viewport once autoPan padding is added, so it clipped at the screen
   edge. Drop the min-width and cap to the viewport so it fits and pans fully. */
@media (max-width: 768px) {
    .leaflet-popup-content {
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 48px) !important;
        /* Cap the height so a long address can't stretch the popup down the
           whole screen - it scrolls internally instead. */
        max-height: 60vh;
        overflow-y: auto;
        /* Only scroll vertically - setting overflow-y alone makes the browser
           compute overflow-x as auto, which drew a stray horizontal scrollbar
           (the grey line) across the bottom. */
        overflow-x: hidden;
        overscroll-behavior: contain;
        /* Match the wrapper's rounding - an overflow:auto box has square corners,
           which otherwise shows as a straight line across the rounded bottom. */
        border-radius: 16px;
    }
    .veh-popup { padding: 0.7rem 0.8rem; }
    .veh-popup-plate { font-size: 0.85rem; flex-shrink: 0; }
    /* Keep GPS / GPRS / Engine on a single row beside the plate */
    .veh-popup-head { gap: 0.4rem; }
    .veh-popup-badges { flex-wrap: nowrap; gap: 0.2rem; }
    .veh-badge { padding: 0.15rem 0.32rem; font-size: 0.6rem; letter-spacing: 0.02em; }
    .veh-stats { gap: 0.45rem 0.85rem; font-size: 0.78rem; padding: 0.4rem 0; margin-bottom: 0.45rem; }
    .veh-status { font-size: 0.78rem; margin-bottom: 0.25rem; }
    /* Clamp the reverse-geocoded address to 2 lines so it doesn't balloon the
       popup height; the full text stays in the title tooltip. */
    .veh-address-box { cursor: pointer; margin-bottom: 0.45rem; }
    .veh-address {
        font-size: 0.78rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Caret hints the address is tappable; rotates when expanded */
    .veh-address-caret { display: inline-block; }
    /* Tap to reveal the full address (no hover tooltip on touch) */
    .veh-address-box.veh-address--full .veh-address { -webkit-line-clamp: unset; display: block; overflow: visible; }
    .veh-address-box.veh-address--full .veh-address-caret { transform: rotate(180deg); }
    /* Keep the action buttons on a single horizontal line (scroll if they
       overflow) instead of wrapping into a tall stack. */
    .veh-buttons { gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .veh-buttons::-webkit-scrollbar { display: none; }
    .veh-btn { padding: 0.26rem 0.6rem; font-size: 0.75rem; flex-shrink: 0; white-space: nowrap; }
}
html.dark .veh-stats { border-color: var(--gps-border); color: var(--gps-text); }
html.dark .veh-stats i { color: var(--gps-muted); }
html.dark .veh-status, html.dark .veh-address { color: var(--gps-muted); }
html.dark .veh-btn { background: var(--gps-bg); border-color: var(--gps-border); color: var(--gps-text); }

/* ─── Vehicle markers (moving arrow / stopped circle) ─── */
.v-marker { position: relative; display: flex; flex-direction: column; align-items: center; }
.v-marker-icon {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--mc, #4b7d9b);
    border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.30);
    z-index: 2;
}
.v-marker-icon::before,
.v-marker-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(var(--mc-rgb, 75,125,155), 0.30);
    z-index: -1;
    animation: radar-pulse 2.4s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}
.v-marker-icon::after { animation-delay: 1.2s; }
@keyframes radar-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    80%  { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(2.5); opacity: 0; }
}
.v-marker.moving .v-marker-icon i {
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.5s ease-out;
    font-size: 1.05rem;
}
.v-marker.stopped .v-marker-icon::before,
.v-marker.stopped .v-marker-icon::after {
    animation-duration: 3.5s;
    background: rgba(var(--mc-rgb, 75,125,155), 0.22);
}
.v-marker.stopped .v-marker-icon::after { animation-delay: 1.75s; }
.v-marker-label {
    margin-top: 4px;
    font-size: 11px; font-weight: 700;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px; border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
    white-space: nowrap; letter-spacing: 0.01em;
}
html.dark .v-marker-label { background: rgba(19, 28, 44, 0.95); color: #fff; }

/* Cluster marker */
.cluster-marker {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gps-primary) 0%, var(--gps-primary-hover) 100%);
    color: var(--gps-primary-text); font-weight: 700; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid rgba(255,255,255,0.95);
    box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 0 6px rgba(var(--gps-primary-rgb), 0.15);
    cursor: pointer; transition: transform 0.15s;
}
.cluster-marker:hover { transform: scale(1.1); }
.cluster-marker.md { width: 50px; height: 50px; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 0 8px rgba(var(--gps-primary-rgb), 0.20); }
.cluster-marker.lg { width: 58px; height: 58px; font-size: 1.2rem; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 0 10px rgba(245, 158, 11, 0.20); }
.marker-cluster, .marker-cluster div { background: transparent !important; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: transparent !important; }

/* Fullscreen map */
.map-fs-wrap {
    position: relative;
    /* no transition: fixed positioning can't animate; snap to fullscreen for instant invalidate */
}
.map-fs-wrap.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    margin: 0 !important;
    /* Reset app-card framing so the map covers every pixel. The card's
       padding + border + white background were showing through as a
       white frame around the map (most visible on /monitor). */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* Dark placeholder while tiles load. */
    background: #0a0a0a !important;
    box-shadow: none !important;
}
/* Same dark fallback under the Leaflet tile canvas. */
.map-fs-wrap.is-fullscreen .leaflet-container { background: #0a0a0a !important; }
.map-fs-wrap.is-fullscreen > .map-fs-target,
.map-fs-wrap.is-fullscreen #main-map,
.map-fs-wrap.is-fullscreen #history-map,
.map-fs-wrap.is-fullscreen #device-map,
.map-fs-wrap.is-fullscreen .leaflet-container {
    height: 100vh !important;
    width: 100vw !important;
    border-radius: 0 !important;
}

body.has-fullscreen-map { overflow: hidden; }
/* Fullscreen map wrap is z-index:9999 — lift modals (e.g. legend) above it
   while a fullscreen map is open, otherwise the modal renders behind it. */
body.has-fullscreen-map .modal { z-index: 10050 !important; }
body.has-fullscreen-map .modal-backdrop { z-index: 10040 !important; }

/* ─── Vehicle markers (shared across every Leaflet map on the site) ─── */
.v-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.v-marker-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mc, #4b7d9b);
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.30);
    z-index: 2;
}
/* Find-My-style radar pulse - two staggered HOLLOW rings that ripple
   outward from the marker's edge so the colour expression lives on
   moving energy, not as a wash through the icon. */
.v-marker-icon::before,
.v-marker-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(var(--mc-rgb, 75,125,155), 0.85);
    z-index: -1;
    animation: radar-pulse 2s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}
.v-marker-icon::after { animation-delay: 1s; }
@keyframes radar-pulse {
    0%   { transform: scale(1);   opacity: 0.9; border-width: 3px; }
    80%  { transform: scale(2.6); opacity: 0;   border-width: 1px; }
    100% { transform: scale(2.6); opacity: 0;   border-width: 1px; }
}
.v-marker.moving .v-marker-icon i {
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.5s ease-out;
    font-size: 1.05rem;
}
/* Stopped vehicles get a slower, more subtle pulse. */
.v-marker.stopped .v-marker-icon::before,
.v-marker.stopped .v-marker-icon::after {
    animation-duration: 3.5s;
    border-color: rgba(var(--mc-rgb, 75,125,155), 0.55);
}
.v-marker.stopped .v-marker-icon::after { animation-delay: 1.75s; }

/* Online / offline status colour rides only on the breathing rings -
   the icon centre stays on --mc so each vehicle keeps its identity. */
.v-marker.online .v-marker-icon::before,
.v-marker.online .v-marker-icon::after { border-color: rgba(204, 255, 3, 0.9); background: transparent; }
.v-marker.offline .v-marker-icon { filter: saturate(0.6) brightness(0.85); }
.v-marker.offline .v-marker-icon::before,
.v-marker.offline .v-marker-icon::after {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.95);
    animation: radar-pulse-offline 1.6s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}
.v-marker.offline .v-marker-icon::after { animation-delay: 0.8s; }
@keyframes radar-pulse-offline {
    0%   { transform: scale(1);   opacity: 0.95; border-width: 3px; }
    80%  { transform: scale(2.8); opacity: 0;   border-width: 1px; }
    100% { transform: scale(2.8); opacity: 0;   border-width: 1px; }
}

.v-marker-label {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
html.dark .v-marker-label { background: rgba(19, 28, 44, 0.95); color: #fff; }

/* The absolute map buttons (z-index ~1100) would otherwise float over an
   open Bootstrap modal (z-index 1055). Hide them while any modal is open. */
body.modal-open .map-fs-toggle,
body.modal-open .leaflet-control-layers,
body.modal-open .leaflet-control-zoom {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ─── RULE: zoom +/- ALWAYS top-right on EVERY map; everything else below ───
   Same vertical column on every map context (Monitor fullscreen, device,
   history, geofence-create, public). Same 40px width. Same 8px gap. */
.leaflet-top.leaflet-right {
    top: 12px !important; right: 12px !important;
    display: flex; flex-direction: column; align-items: flex-end;
}
.leaflet-top.leaflet-right .leaflet-control { margin: 0 0 8px 0 !important; clear: none !important; }
/* Leaflet inserts layers control before zoom; flex order forces zoom on top. */
.leaflet-top.leaflet-right .leaflet-control-zoom { order: 0; }
.leaflet-top.leaflet-right .leaflet-control-layers { order: 1; }
/* Below the zoom + layers stack: custom fullscreen/legend buttons (40px each
   with 8px gap → zoom (~80) + 8 + layers (40) + 8 = 136 → start at 144). */
.map-fs-wrap:not(.is-fullscreen) .map-fs-toggle:not(.map-legend-toggle) { top: 144px !important; right: 12px; }
.map-fs-wrap:not(.is-fullscreen) .map-legend-toggle { top: 192px !important; right: 12px; }
/* Device page has no fullscreen toggle - move legend up to fill that slot */
#device-map-wrap:not(.is-fullscreen) .map-legend-toggle { top: 140px !important; }

.map-fs-toggle {
    position: absolute;
    top: 58px; /* sit just below Leaflet layers control (10 + 40 + 8 gap) */
    right: 10px;
    z-index: 1100; /* above Leaflet controls (1000) */
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0a0a0a;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transition: transform 0.12s ease, background 0.15s, color 0.15s, border-color 0.15s;
}
.map-fs-toggle:hover { background: var(--gps-primary); color: var(--gps-primary-text); border-color: var(--gps-primary); }
.map-fs-toggle:active { background: var(--gps-primary-hover, var(--gps-primary)); }
html.dark .map-fs-toggle { background: #131c2c; border-color: rgba(255,255,255,0.15); color: #f1f5f9; }
html.dark .map-fs-toggle:hover { background: var(--gps-primary); color: var(--gps-primary-text); border-color: var(--gps-primary); }

/* Unified Leaflet controls: match map-fs-toggle (40x40, 8px radius, white bg, shadow) */
.leaflet-control-zoom {
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden;
    width: 40px !important;
    box-sizing: border-box !important;
}
/* Same outer width as the layers/fullscreen buttons (40px border-box) so the
   whole right-hand column lines up. Buttons fill the bordered wrapper. */
.leaflet-control-zoom .leaflet-control-zoom-in,
.leaflet-control-zoom .leaflet-control-zoom-out {
    width: 100% !important;
    height: 36px !important;
    line-height: 34px !important;
    box-sizing: border-box !important;
}
.map-fs-toggle { box-sizing: border-box !important; }
/* Layers wrapper: only style border/shadow when expanded (the toggle button has its own) */
.leaflet-control-layers {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
.leaflet-control-layers.leaflet-control-layers-expanded {
    background: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
    z-index: 1200;
    position: relative;
}
/* Hide stacked buttons (fullscreen, legend) while the layers panel is expanded
   so the panel doesn't visually overlap them. */
.map-fs-wrap:has(.leaflet-control-layers-expanded) .map-fs-toggle { opacity: 0; pointer-events: none; transition: opacity 0.15s; }

/* ─── Shared map legend modal (#legendModal) ───
   Used on dashboard monitor, device, and history pages. Lives in app.css
   (not the dashboard inline styles) so it works everywhere. */
.legend-section { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--gps-border); }
.legend-section:last-child { border-bottom: 0; }
.legend-section h6 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gps-muted); margin: 0 0 0.85rem; font-weight: 600; }
.legend-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.55rem 0; }
.legend-row:not(:last-child) { border-bottom: 1px dashed var(--gps-border); }
.legend-icon-slot {
    width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    min-height: 48px;
}
.legend-text { flex: 1; min-width: 0; }
.legend-text strong { display: block; font-weight: 600; font-size: 0.95rem; color: var(--gps-text); }
.legend-text span { font-size: 0.82rem; color: var(--gps-muted); }
html.dark .legend-text strong { color: #fff; }
/* Scale markers so they fit in the slot without their device label */
.legend-icon-slot .v-marker { transform: scale(0.85); }
.legend-icon-slot .stop-marker-wrap { transform: scale(0.9); }
.legend-icon-slot .cluster-marker { transform: scale(0.85); }
.legend-icon-slot .v-marker-label { display: none; }
.leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    font-size: 1.1rem !important;
    color: #0a0a0a !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    transition: background-color 0.15s, color 0.15s;
}
.leaflet-control-layers-toggle {
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    font-size: 1.1rem !important;
    color: #0a0a0a !important;
    background-color: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
    box-sizing: border-box !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.leaflet-bar a:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.10) !important; }
.leaflet-bar a:hover,
.leaflet-bar a:focus,
.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover,
.leaflet-control-layers-toggle:hover {
    background-color: var(--gps-primary) !important;
    color: var(--gps-primary-text) !important;
    border-color: var(--gps-primary) !important;
}
/* When any zoom button is hovered, also highlight the wrapper border for visual unity */
.leaflet-control-zoom:hover { border-color: var(--gps-primary) !important; }
/* Replace Leaflet default layers icon with our Font Awesome icon */
.leaflet-control-layers-toggle {
    background-image: none !important;
    position: relative;
}
.leaflet-control-layers-toggle::before {
    content: '\f5fd'; /* fa-layer-group */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    font-size: 1.05rem;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* When expanded, the toggle is hidden by Leaflet; keep the expanded panel clean */
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; }
.leaflet-control-layers-expanded {
    width: auto !important;
    height: auto !important;
    padding: 0.6rem 0.9rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem;
    background: #ffffff !important;
}
html.dark .leaflet-control-zoom { background: #131c2c !important; border-color: rgba(255,255,255,0.15) !important; }
html.dark .leaflet-control-layers.leaflet-control-layers-expanded { background: #131c2c !important; border-color: rgba(255,255,255,0.15) !important; color: #f1f5f9; }
html.dark .leaflet-bar a,
html.dark .leaflet-control-zoom-in,
html.dark .leaflet-control-zoom-out { background-color: #131c2c !important; color: #f1f5f9 !important; }
html.dark .leaflet-control-layers-toggle { background-color: #131c2c !important; color: #f1f5f9 !important; border-color: rgba(255,255,255,0.15) !important; }
html.dark .leaflet-bar a:not(:last-child) { border-bottom-color: rgba(255,255,255,0.10) !important; }
html.dark .leaflet-bar a:hover,
html.dark .leaflet-bar a:focus,
html.dark .leaflet-control-zoom-in:hover,
html.dark .leaflet-control-zoom-out:hover,
html.dark .leaflet-control-layers-toggle:hover {
    background-color: var(--gps-primary) !important;
    color: var(--gps-primary-text) !important;
    border-color: var(--gps-primary) !important;
}
html.dark .leaflet-control-zoom:hover { border-color: var(--gps-primary) !important; }

/* ─────────────────────────────────────────────────────────────────────
   Mobile responsiveness fixes (≤ ~992px / 375px target)
   ───────────────────────────────────────────────────────────────────── */

/* Admin/data tables live in `.app-card.p-0.overflow-hidden`; the
   `overflow:hidden` clips wide columns on phones (unreachable). Restore
   horizontal scroll for the x-axis only when the card holds a table. */
.app-card.overflow-hidden:has(> table.table),
.app-card.overflow-hidden:has(> .table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.app-card.overflow-hidden:has(> table.table) > .table,
.app-card.overflow-hidden:has(> .table) > .table {
    min-width: 640px; /* keep columns readable; card scrolls instead of squashing */
}

/* Wiring/manual SVG diagrams were forced to min-width:600px with no
   scroll parent — caused full-page horizontal overflow on manual pages. */
@media (max-width: 767.98px) {
    .manual-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .manual-diagram svg { min-width: 520px; }
}

/* Onboarding stepper: 3×110px steps + lines overflowed 375px screens. */
@media (max-width: 575.98px) {
    .ob-steps { gap: 0; }
    .ob-step { width: auto; flex: 1 1 0; font-size: 0.7rem; }
    .ob-step span { line-height: 1.15; }
    .ob-line { max-width: 24px; margin-bottom: 22px; }
    .ob-bullet { width: 32px; height: 32px; }
    .ob-cmd code { font-size: 0.78rem; }
}

/* Slightly larger inline-edit tap targets on touch screens. */
@media (hover: none) and (pointer: coarse) {
    .btn-edit-tiny { width: 38px !important; height: 38px !important; }
    .fr-sort-pills { height: 38px; }
    .fr-sort-pills button { padding: 0 0.8rem; }
}

/* ─── Language switcher ───
   Force lang-globe AND theme-toggle to identical 36x36 via one selector so
   Bootstrap or any context CSS cannot desync their sizes. */
.lang-switcher { position: relative; display: inline-block; }
.lang-globe,
#theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.lang-globe .lang-current,
.lang-globe .lang-caret { display: none; }
.lang-globe i.fa-globe,
.lang-globe i,
#theme-toggle i { font-size: 0.95rem !important; line-height: 1 !important; }
/* Open-state visual cue (hover/focus colours come from Bootstrap .btn classes) */
.lang-switcher[data-open="true"] .lang-globe { background-color: #6c757d; color: #fff; border-color: #6c757d; }

.lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px;
    background: #fff; border: 1px solid var(--gps-border); border-radius: 12px;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.18);
    padding: 0.35rem;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 1100;
}
.lang-switcher:hover .lang-menu,
.lang-switcher[data-open="true"] .lang-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-menu .lang-opt {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--gps-text); text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.12s;
}
.lang-menu .lang-opt:hover { background: rgba(var(--gps-primary-rgb), 0.10); }
.lang-menu .lang-opt.active { background: rgba(var(--gps-primary-rgb), 0.16); color: var(--gps-text); border: 1px solid rgba(var(--gps-primary-rgb), 0.35); }
.lang-menu .lang-opt:not(.active) { border: 1px solid transparent; }
.lang-menu .lang-code {
    flex: 0 0 32px;
    font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em;
    color: var(--gps-primary-text);
    background: var(--gps-primary);
    padding: 0.22rem 0.4rem; border-radius: 5px;
    text-align: center;
    line-height: 1;
}
.lang-menu .lang-name { flex: 1; font-weight: 600; color: var(--gps-text); }
.lang-menu .lang-opt.active .lang-name { font-weight: 700; }
.lang-menu .lang-check { color: var(--gps-link, var(--gps-primary)); font-size: 0.85rem; }

/* Dark / public-pages variant — globe sits in dark navbar */
/* Dark theme parity with btn-outline-secondary in our navbar */
html.dark .lang-globe { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.20); background: transparent; }
html.dark .lang-globe:hover,
html.dark .lang-switcher[data-open="true"] .lang-globe { color: var(--gps-primary); background-color: rgba(204,255,3,0.10); border-color: var(--gps-primary); }
html.dark .lang-menu { background: #131c2c; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.6); }
html.dark .lang-menu .lang-opt { color: rgba(255, 255, 255, 0.92); }
html.dark .lang-menu .lang-opt:hover { background: rgba(var(--gps-primary-rgb), 0.14); }
html.dark .lang-menu .lang-opt.active { background: rgba(var(--gps-primary-rgb), 0.18); }

@media (max-width: 575px) {
    .lang-globe { height: 34px; padding: 0 0.55rem; font-size: 0.78rem; }
    .lang-menu { right: -4px; min-width: 168px; }
}

/* ─── Account switch (impersonation) banner ─── */
.acct-switch-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    background: #0a0a0a; color: #ccff03;
    border: 1px solid rgba(204,255,3,0.4); border-radius: 10px;
    padding: 0.6rem 1rem; margin-bottom: 1rem;
    font-size: 0.9rem; font-weight: 600;
}
.acct-switch-banner button {
    background: #ccff03; color: #0a0a0a; border: 0;
    padding: 0.35rem 0.85rem; border-radius: 100px;
    font-size: 0.82rem; font-weight: 700; cursor: pointer;
    transition: filter 0.15s;
}
.acct-switch-banner button:hover { filter: brightness(1.08); }

/* ─── .table-cards: turn a data table into stacked cards on phones ───
   Wide multi-column tables (devices, geofences, …) need horizontal scrolling
   on mobile, hiding status + action columns. Below 640px each row becomes a
   card; td[data-label] keys show the column name so nothing is off-screen.
   Mark the name cell .tc-name (card header) and the actions cell .tc-actions. */
@media (max-width: 640px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody { display: block; width: 100%; }
    /* opt out of the generic .app-card.overflow-hidden min-width:640px (that
       forces horizontal scroll) - we use a stacked card layout instead */
    .table-cards { min-width: 0 !important; }
    .table-cards tr {
        display: block;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--gps-border);
    }
    .table-cards tbody tr:last-child { border-bottom: 0; }
    .table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.28rem 0;
        border: 0;
        text-align: right;
    }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gps-muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
        flex: 0 0 auto;
    }
    /* Name = card header: no label, larger, divider under it */
    .table-cards td.tc-name {
        justify-content: flex-start;
        font-size: 1.05rem;
        font-weight: 700;
        padding-bottom: 0.5rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px dashed var(--gps-border);
    }
    .table-cards td.tc-name::before { content: none; }
    .table-cards td.tc-name a { font-size: 1.05rem; font-weight: 700; }
    /* Actions row: right-aligned buttons, no label */
    .table-cards td.tc-actions { justify-content: flex-end; padding-top: 0.5rem; }
    .table-cards td.tc-actions::before { content: none; }
    /* Empty state spans full width, centered */
    .table-cards td[colspan] { display: block; text-align: center; }
    .table-cards td[colspan]::before { content: none; }
}

/* Notifications bell in top nav. Outlined-secondary button with a red
   pill badge over the top-right corner showing unread alerts count.
   Active state (currently on /alerts) gets a filled look so it reads
   like the other nav-link active state. */
.nav-bell {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.nav-bell.active {
    background: var(--gps-primary, #0d6efd);
    color: #0a0a0a;
    border-color: transparent;
}
.nav-bell-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    background: #dc3545; color: #fff;
    border-radius: 9px;
    font-size: 0.68rem; font-weight: 700; line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--gps-card-bg, #fff);
    pointer-events: none;
}