/* =========================================================
   LogicCalc Home styles
   Extracted from Home.razor for startup/performance optimization.
   Source: Home(20260807-095256).razor
   IMPORTANT: Razor escaped CSS directives (@@media, @@keyframes, etc.)
   were converted to normal CSS directives (@media, @keyframes, etc.).
========================================================= */

    
    /* =========================================================
           ✨ AI NAVBAR BUTTON (Максимально компактная)
        ========================================================= */
        .ai-nav-btn {
            background-color: rgba(168, 85, 247, 0.08); 
            border: 1px solid rgba(168, 85, 247, 0.2); 
            border-radius: 19px; 
            padding: 1px 8px !important; /* Убрали лишнюю высоту и ширину */
            transition: all 0.2s ease;
        }
        
        .ai-nav-btn:hover {
            background-color: rgba(168, 85, 247, 0.15); 
            transform: translateY(-1px);
        }

    /* Градиент для текста AI (в стиле Apple Intelligence) */
        .ai-gradient-text {
            background: linear-gradient(135deg, #6366F1, #A855F7, #EC4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }


        /* 🔥 НОВЫЙ КЛАСС: Тот же градиент, но светлее (для темного фона) */
    .ai-gradient-text-light {
        background: linear-gradient(135deg, #A5B4FC, #D8B4FE, #F9A8D4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }


    /* 🌿 Фисташковые переключатели (Stackable) */
        .form-check-input:checked {
            background-color: #A2B286 !important; /* Плотный фисташковый (чтобы белая точка читалась) */
            border-color: #92A276 !important;
        }
        .form-check-input:focus {
            box-shadow: 0 0 0 0.25rem rgba(162, 178, 134, 0.25) !important;
            border-color: #A2B286 !important;
        }

      main, .page, body, #app, article.content, .content {
    padding: 0 !important;
    margin: 0 !important;
}
        
       /* --- APPLE STYLE HEADER --- */
        .apple-header {
            position: sticky;
            top: 0;
            z-index: 1020;

            /* 1. Чистый белый цвет (75% непрозрачности) — дает свежесть и контраст на бежевом фоне */
            background-color: rgba(255, 255, 255, 0.92);
            
            /* 2. Мягкое размытие */
            -webkit-backdrop-filter: none;
             backdrop-filter: none;

            margin: 0 -1.5rem 1.5rem -1.5rem; 
            padding: 8px 1.5rem;
            
            /* 3. Очень тонкая серая линия снизу для жесткой границы */
            border-bottom: 1px solid rgba(0, 0, 0, 0.06); 

            /* 4. Широкая "воздушная" тень, которая приподнимает шапку над контентом */
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);

            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        .apple-btn {
            color: #1d1d1f;
            font-size: 12px;
            font-weight: 400;
            letter-spacing: -0.01em;
            background: transparent;
            border: none;
            padding: 6px 14px;
            border-radius: 980px; /* Закругленные края при наведении */
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        
        .apple-btn:hover {
            background-color: #e8e8ed;
            color: #000000;
        }
        /* --- КЛИКАБЕЛЬНЫЕ АНИМАЦИИ ДЛЯ КНОПОК --- */
        .click-anim {
            /* Плавное, упругое нажатие для больших кнопок */
            transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease !important;
        }
        .click-anim:active {
            transform: scale(0.96) !important;
        }

        .click-anim-fast {
            /* Очень быстрое, резкое нажатие (как просили для Add Point) */
            transition: transform 0.05s ease-out !important;
        }
        .click-anim-fast:active {
            transform: scale(0.92) !important;
        }


        /* 🔥 ПРИНУДИТЕЛЬНАЯ ВЫСОТА ДЛЯ КАРТЫ (ПЕРЕБИВАЕТ ВСЕ ОСТАЛЬНЫЕ НАСТРОЙКИ) */
        #map {
            height: 480px !important; 
            min-height: 550px !important;
            border-radius: 12px !important;
            width: 100% !important;
        }

        /* =========================================================
           ✨ DRAG & DROP ANIMATIONS 
        ========================================================= */
        /* Эффект для карточки, которую мы сейчас тащим */
        /* Эффект для карточки-мишени, над которой мы зависли */
      /* Анимация появления результатов на экране */
@keyframes fadeUpResults {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.anim-fade-up {
    animation: fadeUpResults 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}


/* =========================================================
   PDF / PRINT EXPORT
========================================================= */

@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Полностью убираем обычный интерфейс */
    #main-ui {
        display: none !important;
    }

    /* Показываем только PDF-отчёт */
    #print-section {
        display: block !important;
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: auto !important;
        background: #ffffff !important;
    }

    #pdf-export-container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        background: #ffffff !important;
        color: #000000 !important;

        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }

    /* Не разрываем карточки между страницами */
    #print-section .card,
    #print-section .glass-sub-panel,
    #print-section div[style*="page-break-inside: avoid"] {
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }

    /* Убираем экранные эффекты */
    #print-section *,
    #pdf-export-container * {
        animation: none !important;
        transition: none !important;
        text-shadow: none !important;
    }

    #print-section .shadow,
    #print-section .shadow-sm,
    #print-section .shadow-lg {
        box-shadow: none !important;
    }

    .anim-fade-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* =========================================================
   PREMIUM ONBOARDING
========================================================= */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    background:
        radial-gradient(circle at 12% 18%, rgba(162, 178, 134, 0.35), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(168, 85, 247, 0.14), transparent 30%),
        rgba(235, 237, 227, 0.78);

    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.onboarding-shell {
    width: min(1080px, 96vw);
    min-height: 620px;
    max-height: 92vh;

    display: grid;
    grid-template-columns: 42% 58%;

    overflow: hidden;
    position: relative;

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 32px;

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 40px 100px rgba(48, 54, 38, 0.18),
        0 12px 35px rgba(48, 54, 38, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    animation: onboardingAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-brand-panel {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 38px;

    color: #ffffff;

    background:
        radial-gradient(circle at 18% 15%, rgba(220, 227, 197, 0.28), transparent 30%),
        radial-gradient(circle at 80% 75%, rgba(168, 85, 247, 0.18), transparent 34%),
        linear-gradient(145deg, #263025 0%, #354134 48%, #1d241d 100%);
}

.onboarding-brand-panel::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -160px;
    top: -130px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
}

.onboarding-brand-panel::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: -130px;
    bottom: -120px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

.onboarding-brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 12px;
}

.onboarding-brand img {
    height: 42px;
    max-width: 170px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.onboarding-brand-badge {
    padding: 5px 9px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.75);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.onboarding-route-visual {
    position: relative;
    z-index: 2;

    flex: 1;
    min-height: 390px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-route-map {
    width: 100%;
    max-width: 390px;
    overflow: visible;
}

.onboarding-route-path {
    fill: none;
    stroke: rgba(220, 227, 197, 0.85);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 10;

    animation: onboardingRouteMove 8s linear infinite;
}

.onboarding-map-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.onboarding-route-point {
    fill: #dce3c5;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 4;

    transform-origin: center;
    animation: onboardingPointPulse 2.2s ease-in-out infinite;
}

.onboarding-route-point-delay {
    animation-delay: 0.7s;
}

.onboarding-route-point-delay-2 {
    animation-delay: 1.4s;
}

.onboarding-floating-card {
    position: absolute;
    z-index: 4;

    min-width: 130px;
    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);

    animation: onboardingCardFloat 4s ease-in-out infinite;
}

.onboarding-floating-card.distance {
    top: 21%;
    left: 0;
}

.onboarding-floating-card.cost {
    right: 0;
    top: 48%;
    animation-delay: 0.8s;
}

.onboarding-floating-card.cargo {
    left: 12%;
    bottom: 12%;
    animation-delay: 1.5s;
}

.onboarding-floating-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.onboarding-floating-value {
    margin-top: 2px;

    color: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.onboarding-brand-footer {
    position: relative;
    z-index: 2;

    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    line-height: 1.5;
}

.onboarding-content-panel {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 34px 42px 32px;
}

.onboarding-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.onboarding-language {
    width: auto !important;
    min-width: 118px;

    border: 1px solid #e5e7df !important;
    border-radius: 999px !important;

    background-color: #f6f7f2 !important;
    color: #4a4a44 !important;

    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.onboarding-skip {
    border: 0;
    border-radius: 999px;

    padding: 7px 12px;

    background: transparent;
    color: #8a8a85;

    font-size: 0.75rem;
    font-weight: 700;

    transition: background-color 0.2s ease, color 0.2s ease;
}

.onboarding-skip:hover {
    background: #f2f3ee;
    color: #33332f;
}

.onboarding-slide {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 30px 12px 24px;

    animation: onboardingSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-icon-box {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    border: 1px solid rgba(162, 178, 134, 0.38);
    border-radius: 19px;

    background:
        linear-gradient(145deg, rgba(220, 227, 197, 0.72), rgba(255, 255, 255, 0.92));

    box-shadow:
        0 12px 28px rgba(100, 112, 81, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    color: #526044;
}

.onboarding-icon-box svg {
    width: 30px;
    height: 30px;
}

.onboarding-eyebrow {
    margin-bottom: 10px;

    color: #7a8868;
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.onboarding-title {
    max-width: 580px;
    margin: 0 0 16px;

    color: #242622;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    font-weight: 850;
    letter-spacing: -2px;
    line-height: 1.02;
}

.onboarding-description {
    max-width: 570px;
    margin: 0;

    color: #74766f;
    font-size: 1rem;
    line-height: 1.65;
}

.onboarding-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 25px;
}

.onboarding-feature-chip {
    padding: 8px 11px;

    border: 1px solid #e5e7df;
    border-radius: 999px;

    background: #f8f9f5;

    color: #55584f;
    font-size: 0.72rem;
    font-weight: 750;
}

.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding-top: 22px;
    border-top: 1px solid #eceee7;
}

.onboarding-progress {
    display: flex;
    align-items: center;
    gap: 9px;
}

.onboarding-progress-label {
    min-width: 32px;

    color: #8a8a85;
    font-size: 0.68rem;
    font-weight: 800;
}

.onboarding-dot {
    width: 7px;
    height: 7px;

    padding: 0;
    border: 0;
    border-radius: 999px;

    background: #d9dcd2;

    transition:
        width 0.3s ease,
        background-color 0.3s ease,
        transform 0.2s ease;
}

.onboarding-dot:hover {
    transform: scale(1.25);
}

.onboarding-dot.active {
    width: 28px;
    background: #7f9066;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.onboarding-btn-back,
.onboarding-btn-next {
    min-height: 42px;

    border-radius: 999px;

    padding: 9px 20px;

    font-size: 0.78rem;
    font-weight: 800;

    transition:
        transform 0.16s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.onboarding-btn-back {
    border: 1px solid #e1e4da;
    background: #f7f8f4;
    color: #55584f;
}

.onboarding-btn-next {
    min-width: 132px;

    border: 1px solid #3f4a38;
    background: #343f31;
    color: #ffffff;

    box-shadow: 0 10px 22px rgba(52, 63, 49, 0.18);
}

.onboarding-btn-back:hover,
.onboarding-btn-next:hover {
    transform: translateY(-1px);
}

.onboarding-btn-next:hover {
    background: #293226;
    box-shadow: 0 14px 28px rgba(52, 63, 49, 0.24);
}

.onboarding-btn-back:active,
.onboarding-btn-next:active {
    transform: scale(0.97);
}

@keyframes onboardingAppear {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
    }

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

@keyframes onboardingSlideIn {
    from {
        opacity: 0;
        transform: translateX(22px);
    }

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

@keyframes onboardingRouteMove {
    to {
        stroke-dashoffset: -80;
    }
}

@keyframes onboardingPointPulse {
    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

@keyframes onboardingCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@media (max-width: 900px) {
    .onboarding-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .onboarding-brand-panel {
        display: none;
    }

    .onboarding-content-panel {
        min-height: 610px;
    }
}

@media (max-width: 600px) {
    .onboarding-overlay {
        padding: 12px;
    }

    .onboarding-shell {
        width: 100%;
        max-height: 96vh;
        border-radius: 24px;
    }

    .onboarding-content-panel {
        min-height: 570px;
        padding: 22px 20px;
    }

    .onboarding-slide {
        padding: 22px 2px 18px;
    }

    .onboarding-title {
        font-size: 2.15rem;
        letter-spacing: -1.4px;
    }

    .onboarding-description {
        font-size: 0.9rem;
    }

    .onboarding-progress-label {
        display: none;
    }

    .onboarding-btn-back,
    .onboarding-btn-next {
        padding-left: 15px;
        padding-right: 15px;
    }
}
    
/* =========================================================
   LOGICALC PREMIUM WORKSPACE — 2026 REDESIGN
   Visual-only layer: existing calculations and handlers stay intact.
========================================================= */

:root {
    --lc-bg: #f4f3ee;
    --lc-surface: rgba(255, 255, 255, 0.86);
    --lc-surface-solid: #ffffff;
    --lc-surface-soft: #f8f8f5;
    --lc-border: rgba(43, 48, 39, 0.10);
    --lc-border-strong: rgba(43, 48, 39, 0.16);
    --lc-text: #20231f;
    --lc-muted: #74796f;
    --lc-olive: #78964f;
    --lc-olive-dark: #4f6b2f;
    --lc-olive-soft: #e8efd9;
    --lc-purple: #7657e8;
    --lc-purple-dark: #32206d;
    --lc-purple-soft: #f0ebff;
    --lc-success: #238a57;
    --lc-warning: #b87816;
    --lc-danger: #c94852;
    --lc-shadow-sm: 0 6px 18px rgba(36, 41, 31, 0.055);
    --lc-shadow-md: 0 16px 42px rgba(36, 41, 31, 0.085);
    --lc-shadow-lg: 0 30px 80px rgba(36, 41, 31, 0.12);
}

html {
    scroll-behavior: auto;
}

body {
    color: var(--lc-text);

    /*
       Первые 320 px имеют один чистый цвет.
       Ни зелёного, ни фиолетового свечения за шапкой.
    */
    background:
        linear-gradient(
            180deg,
            #f5f4ef 0,
            #f5f4ef 320px,
            #f1f0ea 100%
        ) !important;
}

#main-ui.premium-app {
    min-height: 100vh;
    max-width: 1920px;
    margin: 0 auto !important;
    padding: 0 20px 34px !important;
    font-family:
        Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "Segoe UI", sans-serif !important;
    color: var(--lc-text);
    isolation: isolate;
}

/* Header */
.premium-brand-lockup {
    min-width: max-content;
    padding-right: 18px;
}

.premium-brand-lockup img {
    height: 38px !important;
    max-width: 174px;
}

.premium-nav {
    position: relative;
    z-index: 1200;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    min-width: 0;
    padding: 2px;

    overflow: visible;
}

.premium-nav > .position-relative {
    flex: 0 0 auto;
}


.premium-header .apple-btn {
    min-height: 34px;
    padding: 7px 12px !important;
    border: 1px solid transparent;
    color: #40453d;
    font-size: 0.75rem !important;
    font-weight: 720;
    white-space: nowrap;
}

.premium-header .apple-btn:hover {
    border-color: var(--lc-border);
    background: rgba(245, 246, 241, 0.90);
    color: #20231f;
}

.premium-header .ai-nav-btn {
    min-height: 36px;
    padding: 6px 13px !important;
    border: 1px solid rgba(118, 87, 232, 0.20) !important;
    background:
        linear-gradient(135deg, rgba(244, 240, 255, 0.94), rgba(255, 255, 255, 0.88)) !important;
    box-shadow: 0 7px 18px rgba(118, 87, 232, 0.10);
}

/* Context bar */
.premium-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 0 0 16px;
    padding: 6px 4px 8px;
}

.premium-context-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--lc-olive-dark);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.premium-context-title {
    margin: 0;
    color: #20231f;
    font-size: clamp(1.35rem, 2vw, 1.95rem);
    font-weight: 860;
    letter-spacing: -0.75px;
    line-height: 1.05;
}

.premium-context-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.premium-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--lc-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #555c51;
    box-shadow: var(--lc-shadow-sm);
    font-size: 0.69rem;
    font-weight: 760;
    white-space: nowrap;
}

.premium-context-chip.live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #62a638;
    box-shadow: 0 0 0 4px rgba(98, 166, 56, 0.12);
    animation: premiumStatusPulse 2.2s ease-in-out infinite;
}

/* Workspace */
.premium-workspace {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
    align-items: flex-start;
}

.premium-route-column,
.premium-command-column {
    animation: premiumPanelIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.premium-command-column {
    animation-delay: 0.08s;
}

.premium-route-builder.card,
.premium-command-card.card {
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
}

/* Command card keeps its current solid shell, without expensive backdrop blur. */
.premium-command-card.card {
    border-radius: 24px !important;
    background: var(--lc-surface) !important;
    box-shadow: var(--lc-shadow-md) !important;
}

.premium-route-builder > .card-body {
    padding: 18px !important;
}

.premium-command-card > .card-body {
    position: relative;
    padding: 0 !important;
}

/* General cards and form controls */
#main-ui .glass-panel,
#main-ui .glass-sub-panel {
    border-color: var(--lc-border) !important;
}

#main-ui .glass-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.88) !important;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
    box-shadow: var(--lc-shadow-lg) !important;
}

#main-ui input.form-control,
#main-ui select.form-select,
#main-ui .input-group-text {
    min-height: 36px;
    border-color: rgba(43, 48, 39, 0.10) !important;
    border-radius: 10px;
    background-color: rgba(249, 249, 246, 0.94) !important;
    color: #252923;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

#main-ui input.form-control:hover,
#main-ui select.form-select:hover {
    background-color: #ffffff !important;
    border-color: rgba(120, 150, 79, 0.28) !important;
}

#main-ui input.form-control:focus,
#main-ui select.form-select:focus {
    border-color: rgba(120, 150, 79, 0.58) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(120, 150, 79, 0.11) !important;
}

#main-ui .form-label {
    color: #51574e;
    font-weight: 760 !important;
}

/* Route builder */
.premium-route-builder h5 {
    letter-spacing: -0.35px !important;
}

.premium-route-stop {
    position: relative;
    margin-left: 20px !important;
    padding: 15px 14px 13px !important;
    border: 1px solid rgba(43, 48, 39, 0.095) !important;
    border-radius: 17px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(249, 249, 246, 0.96)) !important;
    box-shadow:
        0 9px 24px rgba(44, 49, 38, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
}

.premium-route-stop::after {
    content: "";
    position: absolute;
    left: -21px;
    top: 35px;
    bottom: -34px;
    width: 2px;
    z-index: -1;
    background:
        linear-gradient(
            to bottom,
            rgba(126, 157, 79, 0.62),
            rgba(126, 157, 79, 0.16)
        );
}

.premium-route-stop:hover {
    transform: translateY(-2px);
    border-color: rgba(120, 150, 79, 0.26) !important;
    box-shadow:
        0 16px 34px rgba(44, 49, 38, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.premium-route-stop > .badge:first-child {
    top: 27px !important;
    left: -20px !important;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 4px solid #f5f4ef;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #91ad64, #6e8e43) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(93, 121, 55, 0.24) !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.78rem !important;
}

.premium-route-stop > .badge:first-child span {
    display: none;
}

.premium-route-stop .btn-close {
    opacity: 0.38;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.premium-route-stop:hover .btn-close {
    opacity: 0.76;
}

.premium-route-stop .btn-close:hover {
    transform: rotate(5deg) scale(1.05);
}

.premium-route-stop .shadow-sm {
    box-shadow: none !important;
}

.premium-route-stop > div[style*="background: rgba(255, 255, 255, 0.45)"] {
    margin-top: 10px;
    border: 1px solid rgba(43, 48, 39, 0.07) !important;
    background: rgba(246, 247, 242, 0.80) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.premium-route-stop .badge.bg-light {
    background: #f4f5f0 !important;
}

.premium-run-button {
    min-height: 48px;
    border: 0 !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, #7c9a50 0%, #5f7e38 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 13px 26px rgba(91, 121, 51, 0.21),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    font-weight: 820 !important;
    letter-spacing: 0.1px;
}

.premium-run-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px rgba(91, 121, 51, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

.telemetry-recalc-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: -2px 0 9px;
    padding: 7px 10px;
    border: 1px solid rgba(166, 127, 38, 0.22);
    border-radius: 11px;
    background: rgba(255, 247, 221, 0.72);
    color: #75602c;
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.telemetry-recalc-notice-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.premium-run-button.telemetry-recalc-needed {
    position: relative;
    overflow: hidden;
}

.premium-run-button.telemetry-recalc-needed::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -55%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.08),
        transparent
    );
    transform: skewX(-18deg);
    animation: telemetry-recalc-shine 3.2s ease-in-out infinite;
}

@keyframes telemetry-recalc-shine {
    0%, 58% {
        left: -55%;
        opacity: 0;
    }

    66% {
        opacity: 1;
    }

    82%, 100% {
        left: 125%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-run-button.telemetry-recalc-needed::after {
        animation: none;
        display: none;
    }
}

.premium-add-point {
    width: 94% !important;
    min-height: 38px !important;
    margin: 0 auto 16px !important;
    padding: 7px 10px !important;

    border: 1px solid rgba(82, 96, 68, 0.14) !important;
    border-radius: 12px !important;

    background: rgba(255, 255, 255, 0.56) !important;
    background-image: none !important;
    color: #4e5948 !important;

    box-shadow: none !important;
    outline: none !important;
    filter: none !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}

.premium-add-point:hover {
    background: rgba(255, 255, 255, 0.56) !important;
    background-image: none !important;
    color: #4e5948 !important;
    border-color: rgba(82, 96, 68, 0.14) !important;

    transform: translateY(-2px) !important;
    box-shadow: 0 7px 16px rgba(46, 53, 39, 0.08) !important;

    outline: none !important;
    filter: none !important;
}

.premium-add-point:focus,
.premium-add-point:focus-visible {
    background: rgba(255, 255, 255, 0.56) !important;
    background-image: none !important;
    color: #4e5948 !important;
    border-color: rgba(82, 96, 68, 0.14) !important;

    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.premium-add-point:active,
.premium-add-point.active {
    background: rgba(255, 255, 255, 0.56) !important;
    background-image: none !important;
    color: #4e5948 !important;
    border-color: rgba(82, 96, 68, 0.14) !important;

    transform: translateY(0) !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

/* Physics card */
.premium-physics-card {
    margin-bottom: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
}

/* Map & map metrics */
.premium-map-kpis {
    position: absolute;
    z-index: 550;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    pointer-events: none;
}

.premium-map-kpi {
    border: 1px solid rgba(255, 255, 255, 0.86);
}

.premium-map-kpi-label {
    display: block;
    margin-bottom: 1px;
    color: #7a8075;
    font-size: 0.56rem;
    font-weight: 820;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.premium-map-kpi-value {
    color: #232720;
    font-size: 0.82rem;
    font-weight: 860;
    white-space: nowrap;
}

.premium-map-empty-state {
    color: #596253;
}

.premium-command-column #map {
    height: 590px !important;
    min-height: 590px !important;
    overflow: hidden;
    border: 1px solid rgba(43, 48, 39, 0.10) !important;
    border-radius: 22px !important;
    background: #e8ebe5;
    box-shadow: 0 20px 48px rgba(39, 44, 34, 0.11);
}

.premium-command-column .leaflet-container {
    font-family: inherit !important;
}



.premium-results-stack {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}


/* =========================================================
   ROUTE OVERVIEW — PREMIUM SUMMARY + COMPACT LEG CARDS
========================================================= */

.premium-route-breakdown {
    order: 2;
    margin-bottom: 13px;
    padding: 14px;
    border: 1px solid rgba(43, 48, 39, 0.09);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--lc-shadow-sm);
}

.premium-route-breakdown-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    padding: 2px 3px 12px;
    border-bottom: 1px solid rgba(43, 48, 39, 0.075);
}

.premium-route-breakdown-title strong {
    color: #30352d;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Main overview */
.logiccalc-route-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 0;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(57, 61, 53, 0.09);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(44, 48, 41, 0.045);
}

.logiccalc-overview-timeline {
    min-width: 0;
    padding: 18px 20px;
    border-right: 1px solid rgba(57, 61, 53, 0.085);
}

.logiccalc-overview-timeline-title {
    margin-bottom: 15px;
    color: #8b8d87;
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.logiccalc-overview-stop-list {
    position: relative;
    padding: 0;
}

.logiccalc-overview-stop-list::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 6px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        rgba(24, 159, 104, 0.75) 0%,
        rgba(24, 159, 104, 0.38) 20%,
        rgba(92, 67, 211, 0.52) 48%,
        rgba(92, 67, 211, 0.82) 100%
    );
}

.logiccalc-overview-stop {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 13px;
    min-height: 65px;
}

.logiccalc-overview-stop:last-child {
    min-height: 24px;
}

.logiccalc-overview-stop-dot {
    width: 13px;
    height: 13px;
    margin-top: 4px;
    border: 2px solid rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    background: currentColor;
}

.logiccalc-overview-stop--pickup {
    color: #159868;
}

.logiccalc-overview-stop--pickup .logiccalc-overview-stop-dot {
    box-shadow: 0 0 0 5px rgba(21, 152, 104, 0.13);
}

.logiccalc-overview-stop--delivery {
    color: #5b43d0;
}

.logiccalc-overview-stop--delivery .logiccalc-overview-stop-dot {
    box-shadow: 0 0 0 5px rgba(91, 67, 208, 0.13);
}

.logiccalc-overview-stop-copy {
    min-width: 0;
    padding-bottom: 14px;
}

.logiccalc-overview-stop:last-child .logiccalc-overview-stop-copy {
    padding-bottom: 0;
}

.logiccalc-overview-stop-name {
    color: #30342f;
    font-size: 0.80rem;
    font-weight: 850;
    line-height: 1.28;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.logiccalc-overview-stop-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.logiccalc-overview-stop-date {
    color: #858981;
    font-size: 0.67rem;
    font-weight: 680;
}

.logiccalc-overview-stop-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.57rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.logiccalc-overview-stop--pickup .logiccalc-overview-stop-badge {
    background: rgba(21, 152, 104, 0.10);
    color: #10794f;
}

.logiccalc-overview-stop--delivery .logiccalc-overview-stop-badge {
    background: rgba(91, 67, 208, 0.10);
    color: #4f39bb;
}

/* Overview metrics */
.logiccalc-overview-stats {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(102, 79, 210, 0.055), transparent 12rem),
        rgba(252, 252, 251, 0.78);
}

.logiccalc-overview-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.logiccalc-overview-stat {
    display: flex;
    min-height: 103px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 10px;
    border: 1px solid rgba(57, 61, 53, 0.085);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.90);
    text-align: center;
    box-shadow: 0 7px 18px rgba(44, 48, 41, 0.025);
}

.logiccalc-overview-stat-icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    color: #5c43d1;
}

.logiccalc-overview-stat-icon svg {
    width: 25px;
    height: 25px;
}

.logiccalc-overview-stat--distance .logiccalc-overview-stat-icon {
    color: #159868;
}

.logiccalc-overview-stat-value {
    color: #2f342e;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.1;
    white-space: nowrap;
}

.logiccalc-overview-stat-label {
    color: #7d8179;
    font-size: 0.63rem;
    font-weight: 720;
}

.logiccalc-overview-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 55px;
    padding: 10px 12px;
    border: 1px solid rgba(91, 67, 208, 0.10);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(245, 241, 255, 0.92), rgba(250, 248, 255, 0.84));
    color: #5140ad;
}

.logiccalc-overview-note-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.logiccalc-overview-note-icon svg {
    width: 22px;
    height: 22px;
}

.logiccalc-overview-note-text {
    font-size: 0.62rem;
    font-weight: 720;
    line-height: 1.4;
}

/* Empty positioning / deadhead run */
.logiccalc-deadhead-card {
    margin-bottom: 10px;
    padding: 11px 13px;
    border: 1px dashed rgba(88, 92, 84, 0.16);
    border-radius: 13px;
    background: rgba(247, 248, 245, 0.72);
}

.logiccalc-deadhead-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.logiccalc-deadhead-title {
    color: #666b63;
    font-size: 0.68rem;
    font-weight: 850;
}

.logiccalc-deadhead-route {
    color: #858981;
    font-size: 0.64rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* Compact route leg cards */
.premium-leg-card.logiccalc-route-leg {
    margin-bottom: 9px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(57, 61, 53, 0.085) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 8px 22px rgba(44, 48, 41, 0.025) !important;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.premium-leg-card.logiccalc-route-leg:last-child {
    margin-bottom: 0 !important;
}

.premium-leg-card.logiccalc-route-leg:hover {
    transform: translateY(-1px);
    border-color: rgba(91, 67, 208, 0.16) !important;
    background: #ffffff !important;
    box-shadow: 0 11px 27px rgba(44, 48, 41, 0.045) !important;
}

.logiccalc-leg-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.logiccalc-leg-index {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #5b43d0;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 950;
    box-shadow: 0 4px 10px rgba(91, 67, 208, 0.15);
}

.logiccalc-leg-index--first {
    background: #159868;
    box-shadow: 0 4px 10px rgba(21, 152, 104, 0.15);
}

.logiccalc-leg-title {
    min-width: 0;
    color: #30342f;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.logiccalc-leg-arrow {
    display: inline-block;
    margin: 0 0.65rem;
    color: #5b43d0;
    font-size: 1.02em;
    font-weight: 950;
    line-height: 1;
    transform: translateY(-0.02em);
}

.logiccalc-leg-distance {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(80, 84, 77, 0.10);
    border-radius: 9px;
    background: #f8f9f7;
    color: #30342f;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.logiccalc-leg-breakdown {
    padding: 8px 10px;
    border: 1px solid rgba(57, 61, 53, 0.065);
    border-radius: 11px;
    background: rgba(247, 248, 245, 0.70);
}

.logiccalc-country-row {
    display: grid;
    grid-template-columns: auto minmax(14px, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.logiccalc-country-formula {
    min-width: 0;
    color: #747871;
    font-size: 0.66rem;
    font-weight: 690;
    overflow-wrap: anywhere;
}

.logiccalc-country-dots {
    min-width: 12px;
    border-bottom: 1px dotted rgba(97, 101, 94, 0.24);
    transform: translateY(-3px);
}

.logiccalc-country-cost {
    color: #30342f;
    font-size: 0.69rem;
    font-weight: 950;
    white-space: nowrap;
}

.logiccalc-load-badges {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(57, 61, 53, 0.07);
}

.logiccalc-capacity-badge {
    border: 1px solid rgba(57, 61, 53, 0.10);
    background: #f8f9f7;
    color: #4c514a;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 920px */ {
    .logiccalc-route-overview {
        grid-template-columns: 1fr;
    }

    .logiccalc-overview-timeline {
        border-right: none;
        border-bottom: 1px solid rgba(57, 61, 53, 0.085);
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 560px */ {
    .premium-route-breakdown {
        padding: 11px;
        border-radius: 18px;
    }

    .premium-route-breakdown-title {
        align-items: flex-start;
    }

    .premium-route-breakdown-title strong {
        font-size: 0.74rem;
    }

    .logiccalc-overview-timeline {
        padding: 15px 14px;
    }

    .logiccalc-overview-stats {
        padding: 14px;
    }

    .logiccalc-overview-stat {
        min-height: 92px;
    }

    .logiccalc-leg-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .logiccalc-leg-distance {
        grid-column: 2;
        width: fit-content;
        margin-top: -2px;
    }

    .logiccalc-country-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .logiccalc-country-dots {
        display: none;
    }
}

.premium-economics-card,
.premium-price-card {
    order: 1;
    position: relative;
    overflow: hidden;
    margin-bottom: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 88% 15%, rgba(186, 155, 255, 0.30), transparent 15rem),
        radial-gradient(circle at 5% 110%, rgba(113, 67, 238, 0.58), transparent 18rem),
        linear-gradient(145deg, #2b1a61 0%, #402784 48%, #27164f 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 20px 44px rgba(52, 30, 112, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

.premium-price-card {
    min-height: 155px;
    padding: 20px !important;
}

.premium-price-card::before,
.premium-economics-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 100px;
    right: -30px;
    bottom: -25px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    transform: rotate(-8deg);
    box-shadow:
        0 -16px 0 -15px rgba(255, 255, 255, 0.22),
        0 -34px 0 -33px rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

.premium-price-card h3,
.premium-economics-card h3 {
    font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
    letter-spacing: -1.1px;
}

.premium-price-card .border-top {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.premium-economics-card {
    padding: 18px !important;
}

.premium-economics-card > .border-bottom {
    border-color: rgba(255, 255, 255, 0.13) !important;
}

.premium-economics-card .text-muted,
.premium-economics-card .text-dark,
.premium-economics-card .small {
    color: rgba(255, 255, 255, 0.77) !important;
}

.premium-economics-card > div[style*="background-color: #f7f9f2"] {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.premium-economics-card > div[style*="background-color: #45443b"] {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.premium-toll-panel {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(101, 73, 210, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 244, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.premium-toll-fleet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    background: rgba(101, 73, 210, 0.08);
    color: #4a4a44;
    font-size: 0.76rem;
    font-weight: 700;
}

.premium-toll-fleet strong {
    color: #6549d2;
}

.premium-toll-list {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 3px;
}

.premium-toll-country {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(74, 74, 68, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.premium-toll-country-main {
    min-width: 0;
}

.premium-toll-country-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #3f3f3a;
    font-size: 0.8rem;
    font-weight: 800;
}

.premium-toll-country-name img {
    width: 21px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
}

.premium-toll-country-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-toll-country-meta {
    margin-top: 3px;
    color: #77776f;
    font-size: 0.7rem;
    font-weight: 650;
}

.premium-toll-rate .input-group-text {
    min-width: 42px;
    justify-content: center;
}

.premium-toll-country-estimate {
    margin-top: 4px;
    text-align: right;
    color: #6549d2;
    font-size: 0.71rem;
    font-weight: 800;
}

.premium-toll-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 12px;
    background: #45443b;
    color: #ffffff;
}

.premium-toll-total span {
    font-size: 0.76rem;
    font-weight: 700;
    opacity: 0.78;
}

.premium-toll-total strong {
    font-size: 1rem;
}

.premium-toll-final {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(101, 73, 210, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.premium-toll-final-head,
.premium-toll-include {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.premium-toll-reset {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6549d2;
    font-size: 0.72rem;
    font-weight: 800;
}

.premium-toll-reset:hover {
    text-decoration: underline;
}

.premium-toll-note {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(255, 181, 71, 0.13);
    color: #6f572d;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.35;
}

.premium-toll-source-note {
    align-items: center;
    background: rgba(101, 73, 210, 0.08);
    color: #5f4c8f;
}

.premium-toll-source-link {
    color: #6549d2;
    font-weight: 800;
    text-decoration: none;
    text-underline-offset: 2px;
}

.premium-toll-source-link:hover {
    color: #4f35bd;
    text-decoration: underline;
}

/* =========================================================
   PRICE OVERVIEW — QUICK TOLL COUNTRY BREAKDOWN
========================================================= */
.price-toll-breakdown {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.price-toll-summary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.price-toll-summary:disabled {
    opacity: 1;
    cursor: default;
}

.price-toll-summary-label {
    min-width: 0;
    color: rgba(255, 255, 255, 0.77);
    font-size: 0.875rem;
    font-weight: 700;
}

.price-toll-summary-value {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 0.875rem;
    white-space: nowrap;
}

.price-toll-chevron {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.22s ease, background-color 0.22s ease;
}

.price-toll-summary:hover:not(:disabled) .price-toll-chevron {
    background: rgba(255, 255, 255, 0.14);
}

.price-toll-chevron svg {
    display: block;
    width: 12px;
    height: 12px;
    overflow: visible;
}

.price-toll-chevron svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


.price-toll-chevron.is-open {
    transform: rotate(180deg);
}

.price-toll-drawer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    transition:
        max-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.20s ease,
        transform 0.20s ease,
        margin-top 0.20s ease;
}

.price-toll-drawer.is-open {
    max-height: 900px;
    margin-top: 10px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.price-toll-drawer-inner {
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.price-toll-drawer-title {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.price-toll-manual-note {
    margin-bottom: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(214, 193, 255, 0.16);
    border-radius: 10px;
    background: rgba(196, 167, 255, 0.10);
    color: rgba(244, 237, 255, 0.88);
    font-size: 0.67rem;
    font-weight: 680;
    line-height: 1.35;
}

.price-toll-country-list {
    display: grid;
    gap: 6px;
}

.price-toll-country-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
}

.price-toll-country-main {
    min-width: 0;
}

.price-toll-country-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.73rem;
    font-weight: 800;
}

.price-toll-country-name img {
    width: 20px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.price-toll-country-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-toll-country-meta {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.63rem;
    font-weight: 640;
}

.price-toll-country-row > strong {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.72rem;
    white-space: nowrap;
}

.price-toll-route-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(16, 9, 37, 0.22);
}

.price-toll-route-total span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 730;
}

.price-toll-route-total strong {
    color: #ffffff;
    font-size: 0.78rem;
}

.price-toll-sources-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    color: #e5d9ff;
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
    text-underline-offset: 2px;
}

.price-toll-sources-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.price-toll-empty {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.68rem;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .price-toll-chevron,
    .price-toll-drawer {
        transition: none;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 620px */ {
    .premium-toll-country {
        grid-template-columns: 1fr;
    }

    .premium-toll-country-estimate {
        text-align: left;
    }
}

.premium-stat-card {
    order: 3;
    margin-top: 0 !important;
    margin-bottom: 10px;
    padding: 15px !important;
    border: 1px solid rgba(43, 48, 39, 0.09) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: var(--lc-shadow-sm) !important;
}

.premium-esg-card {
    order: 4;
    position: relative;
    overflow: hidden;

    margin-bottom: 10px;
    padding: 26px !important;

    border: 1px solid rgba(91, 159, 76, 0.22) !important;
    border-radius: 22px !important;

    background:
        radial-gradient(circle at 8% 0%, rgba(103, 190, 91, 0.11), transparent 24rem),
        linear-gradient(145deg, rgba(247, 253, 246, 0.99), rgba(253, 255, 252, 0.96)) !important;

    box-shadow:
        0 20px 46px rgba(53, 105, 46, 0.08),
        0 2px 8px rgba(53, 105, 46, 0.035) !important;
}

.esg-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.esg-card-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.esg-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #22933d;
    background: rgba(88, 190, 96, 0.11);
}

.esg-icon svg {
    width: 23px;
    height: 23px;
    display: block;
}

.esg-card-title-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.esg-card-title {
    margin: 0;
    color: #237b36;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.esg-card-source {
    color: #5b9d67;
    font-size: 0.76rem;
    font-weight: 700;
}

.esg-weight-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    color: #237b36;
    background: rgba(107, 196, 103, 0.12);
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

.esg-weight-badge-info {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0.75;
}

.esg-total {
    padding: 18px 12px 17px;
    text-align: center;
}

.esg-total-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.esg-total-value {
    color: #111820;
    font-size: clamp(1.75rem, 2.7vw, 2.45rem);
    font-weight: 910;
    letter-spacing: -0.035em;
    line-height: 0.90;
}



.esg-total-impact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #218535;
    background: rgba(91, 190, 91, 0.12);
    font-size: 0.88rem;
    font-weight: 900;
}

.esg-total-impact.is-empty {
    color: #67736a;
    background: rgba(88, 104, 92, 0.08);
}

.esg-total-label {
    display: block;
    margin-top: 8px;
    color: #58616a;
    font-size: 0.92rem;
    font-weight: 650;
}

.esg-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    border-top: 1px solid rgba(61, 111, 55, 0.09);
}

.esg-metric {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 22px 18px 12px;
}

.esg-metric + .esg-metric {
    border-left: 1px solid rgba(61, 111, 55, 0.08);
}

.esg-metric-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #20933b;
    background: rgba(88, 190, 96, 0.10);
}

.esg-metric-icon.is-purple {
    color: #7954d8;
    background: rgba(121, 84, 216, 0.10);
}

.esg-metric-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.esg-metric-copy {
    min-width: 0;
}

.esg-metric-title {
    display: block;
    margin-bottom: 3px;
    color: #1f2421;
    font-size: 0.78rem;
    font-weight: 850;
}

.esg-metric-value {
    display: block;
    color: #237d35;
    font-size: 1.18rem;
    font-weight: 920;
    line-height: 1.15;
}

.esg-metric-value.is-dark {
    color: #171c18;
}

.esg-metric-description {
    display: block;
    margin-top: 8px;
    color: #7b837d;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.4;
}

.esg-footnote {
    margin-top: 20px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(68, 135, 60, 0.08);
    border-radius: 12px;
    color: #657068;
    background: rgba(240, 248, 237, 0.72);
    font-size: 0.70rem;
    font-weight: 650;
    line-height: 1.4;
}

.esg-footnote svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #26923c;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 760px */ {
    .premium-esg-card {
        padding: 20px 16px !important;
    }

    .esg-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .esg-weight-badge {
        white-space: normal;
    }

    .esg-metrics {
        grid-template-columns: 1fr;
    }

    .esg-metric + .esg-metric {
        border-left: 0;
        border-top: 1px solid rgba(61, 111, 55, 0.08);
    }
}



/* =========================================================
   PREMIUM FOOTER — LARGE PRODUCT FOOTER
========================================================= */

.premium-footer {
    width: 100%;
    margin: 34px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #555b52;
}

.premium-footer-shell {
    width: 100%;
    padding: 34px 34px 0;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 30px;

    background:
        radial-gradient(circle at 5% 0%, rgba(139, 165, 87, 0.08), transparent 24rem),
        radial-gradient(circle at 100% 100%, rgba(118, 87, 232, 0.07), transparent 27rem),
        rgba(255, 255, 255, 0.78);

    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);

    box-shadow:
        0 24px 58px rgba(42, 47, 36, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.premium-footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(520px, 1.45fr);
    align-items: stretch;
    gap: 34px;
    padding-bottom: 30px;
}

.premium-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 8px 6px 8px 4px;
}

.premium-footer-logo {
    height: 48px;
    max-width: 220px;
    object-fit: contain;
}

.premium-footer-description {
    max-width: 430px;
    margin: 22px 0 24px;
    color: #676d63;
    font-size: 0.94rem;
    line-height: 1.7;
}

.premium-footer-bug {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 10px 16px;

    border: 1px solid rgba(120, 150, 79, 0.22);
    border-radius: 999px;

    background: rgba(244, 247, 236, 0.86);
    color: #46523d;

    font-size: 0.78rem;
    font-weight: 780;

    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.premium-footer-bug:hover {
    transform: translateY(-2px);
    border-color: rgba(120, 150, 79, 0.38);
    background: #f7f9f1;
    box-shadow: 0 10px 22px rgba(75, 91, 57, 0.10);
}

.premium-footer-bug-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #698449;
}

.premium-footer-bug-arrow {
    margin-left: 5px;
    font-size: 1rem;
    line-height: 1;
}

.premium-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.premium-footer-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 13px;
    min-height: 142px;
    padding: 20px;

    border: 1px solid rgba(43, 48, 39, 0.09);
    border-radius: 19px;

    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(249, 248, 250, 0.86));

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 9px 24px rgba(44, 49, 38, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

    transition:
        transform 0.20s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        background-color 0.20s ease;
}

.premium-footer-card:hover {
    transform: translateY(-3px);
    border-color: rgba(118, 87, 232, 0.19);
    color: inherit;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 17px 34px rgba(55, 45, 82, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.premium-footer-card-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(118, 87, 232, 0.09);
    border-radius: 14px;

    background: rgba(239, 235, 255, 0.78);
    color: #6953c8;
}

.premium-footer-card-icon svg {
    width: 21px;
    height: 21px;
}

.premium-footer-card-content {
    min-width: 0;
}

.premium-footer-card-title {
    display: block;
    margin: 2px 0 8px;

    color: #252a24;
    font-size: 0.90rem;
    font-weight: 850;
    letter-spacing: -0.2px;
}

.premium-footer-card-description {
    display: block;
    color: #74796f;
    font-size: 0.73rem;
    line-height: 1.55;
}

.premium-footer-card-arrow {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(120, 150, 79, 0.18);
    border-radius: 50%;

    background: rgba(239, 245, 226, 0.86);
    color: #647c45;

    font-size: 0.92rem;
    line-height: 1;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.premium-footer-card:hover .premium-footer-card-arrow {
    transform: translateX(2px);
    background: #edf4df;
}

.premium-footer-privacy {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    margin: 0 0 26px;
    padding: 18px 20px;

    border: 1px solid rgba(73, 113, 77, 0.15);
    border-radius: 20px;

    background:
        radial-gradient(circle at 0% 50%, rgba(139, 165, 87, 0.13), transparent 22rem),
        linear-gradient(135deg, rgba(244, 249, 240, 0.95), rgba(246, 243, 252, 0.91));

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(48, 67, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);

    transition:
        transform 0.20s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.20s ease,
        box-shadow 0.20s ease;
}

.premium-footer-privacy:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 113, 77, 0.27);
    color: inherit;
    box-shadow:
        0 17px 36px rgba(48, 67, 46, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.premium-footer-privacy-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(73, 113, 77, 0.16);
    border-radius: 16px;

    background: rgba(231, 242, 225, 0.92);
    color: #587448;
}

.premium-footer-privacy-icon svg {
    width: 25px;
    height: 25px;
}

.premium-footer-privacy-copy {
    min-width: 0;
}

.premium-footer-privacy-title {
    display: block;
    margin-bottom: 5px;

    color: #2f3a2c;
    font-size: 0.88rem;
    font-weight: 880;
    letter-spacing: -0.2px;
}

.premium-footer-privacy-text {
    display: block;
    color: #687064;
    font-size: 0.73rem;
    line-height: 1.55;
}

.premium-footer-privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #536c43;
    font-size: 0.72rem;
    font-weight: 820;
    white-space: nowrap;
}

.premium-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    margin: 0 -34px;
    padding: 18px 34px 20px;

    border-top: 1px solid rgba(43, 48, 39, 0.075);
    background: rgba(250, 250, 247, 0.58);
}

.premium-footer-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #60665c;
    font-size: 0.73rem;
    line-height: 1.45;
}

.premium-footer-copy strong {
    color: #3c4239;
    font-weight: 800;
}

.premium-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #686e64;
    font-size: 0.71rem;
    font-weight: 720;
    white-space: nowrap;
}

.premium-footer-status-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(120, 150, 79, 0.18);
    border-radius: 11px;

    background: rgba(239, 245, 226, 0.86);
    color: #688147;
}

.premium-footer-status-icon svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1050px */ {
    .premium-footer-main {
        grid-template-columns: 1fr;
    }

    .premium-footer-brand {
        align-items: center;
        text-align: center;
    }

    .premium-footer-description {
        max-width: 620px;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 700px */ {
    .premium-footer-shell {
        padding: 24px 18px 0;
        border-radius: 24px;
    }

    .premium-footer-links {
        grid-template-columns: 1fr;
    }

    .premium-footer-card {
        min-height: 126px;
        padding: 17px;
    }

    .premium-footer-privacy {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
        padding: 16px;
    }

    .premium-footer-privacy-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .premium-footer-privacy-link {
        grid-column: 2;
        white-space: normal;
    }

    .premium-footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        margin: 0 -18px;
        padding: 17px 18px 19px;
    }

    .premium-footer-status {
        white-space: normal;
    }
}

/* Refined micro-interactions */
#main-ui .btn,
#main-ui button {
    transition:
        transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.20s ease,
        background-color 0.20s ease,
        border-color 0.20s ease,
        color 0.20s ease;
}

#main-ui .btn:hover:not(:disabled),
#main-ui button:hover:not(:disabled) {
    transform: translateY(-1px);
}

#main-ui .form-check-input {
    cursor: pointer;
}

/* Scrollbars */
#main-ui * {
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 116, 88, 0.30) transparent;
}

#main-ui *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#main-ui *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(103, 116, 88, 0.28);
    background-clip: padding-box;
}

/* Animations */
@keyframes premiumPanelIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes premiumStatusPulse {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(0.92);
    }

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

@media (min-width: 1200px) {
    .premium-route-column {
        width: 43%;
    }

    .premium-command-column {
        width: 57%;
    }

    .premium-route-builder > .card-body {
        max-height: calc(100vh - 154px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 12px !important;
    }

    .premium-command-column {
        position: sticky;
        top: 92px;
        align-self: flex-start;
    }

    .premium-command-column .premium-command-card > .card-body {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 7px !important;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1199.98px */ {
    .premium-command-column {
        position: static;
    }

    .premium-map-kpis {
        overflow-x: auto;
        right: 10px;
    }

    .premium-map-kpi {
        min-width: 110px;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 991.98px */ {
    #main-ui.premium-app {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .premium-header.apple-header {
        top: 5px;
        flex-wrap: wrap !important;
        gap: 9px;
    }

    .premium-nav {
        width: 100%;
        justify-content: flex-start !important;
    }

    .premium-context-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-context-meta {
        justify-content: flex-start;
    }

    .premium-command-column #map {
        height: 470px !important;
        min-height: 470px !important;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 620px */ {

    .premium-context-title {
        font-size: 1.35rem;
    }

    .premium-context-chip {
        font-size: 0.62rem;
    }

    .premium-map-kpis {
        top: 9px;
        left: 9px;
        gap: 6px;
    }

    .premium-map-kpi {
        min-width: 98px;
        padding: 7px 9px;
    }

    .premium-map-kpi-value {
        font-size: 0.72rem;
    }

    .premium-command-column #map {
        height: 390px !important;
        min-height: 390px !important;
    }

    .premium-route-builder > .card-body {
        padding: 13px !important;
    }

    .premium-route-stop {
        margin-left: 15px !important;
        padding: 13px 11px !important;
    }
}


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

/* =========================================================
   PREMIUM POLISH — PASS 1
   Scale, layout, spacing and visual hierarchy
========================================================= */

/* Более собранная рабочая область */
#main-ui.premium-app {
    width: 100%;
    max-width: 1740px;

    margin: 0 auto !important;
   padding: 0 28px 8px !important;
}


/* =========================================================
   HEADER
========================================================= */

.premium-brand-lockup {
    padding-right: 24px;
}

.premium-brand-lockup img {
    height: 42px !important;
    max-width: 190px;
}

/* Важно: сохраняем работу выпадающих меню */
.premium-nav {
    position: relative;
    z-index: 1200;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 3px;

    overflow: visible;
}


.premium-header .apple-btn {
    min-height: 39px;

    padding: 8px 13px !important;

    border-radius: 12px;

    font-size: 0.79rem !important;
    font-weight: 740;
}

.premium-header .apple-btn:hover {
    transform: translateY(-1px);

    background: rgba(244, 246, 240, 0.96);
    box-shadow: 0 7px 16px rgba(43, 48, 39, 0.07);
}

.premium-header .ai-nav-btn {
    min-height: 40px;

    padding: 8px 15px !important;

    border-radius: 13px !important;

    font-size: 0.8rem !important;

    box-shadow:
        0 9px 22px rgba(118, 87, 232, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* =========================================================
   PAGE TITLE / CONTEXT
========================================================= */

.premium-context-bar {
    margin: 2px 0 22px;

    padding: 8px 4px 10px;
}

.premium-context-eyebrow {
    margin-bottom: 6px;

    font-size: 0.67rem;
    letter-spacing: 1.35px;
}

.premium-context-title {
    font-size: clamp(1.75rem, 2.2vw, 2.35rem);
    letter-spacing: -1.1px;
}

.premium-context-meta {
    gap: 9px;
}

.premium-context-chip {
    min-height: 35px;

    padding: 7px 13px;

    font-size: 0.72rem;

    background: rgba(255, 255, 255, 0.84);
}


/* =========================================================
   MAIN GRID
========================================================= */

.premium-workspace {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;

    align-items: flex-start;
}

@media (min-width: 1200px) {

    .premium-route-column {
        width: 41%;
    }

    .premium-command-column {
        width: 59%;

        /* Убираем странное прилипание всей правой колонки */
        position: static;
    }

    /*
       Убираем внутренние scroll-контейнеры.
       Теперь страница прокручивается естественно целиком.
    */
    .premium-route-builder > .card-body {
        max-height: none;
        overflow: visible;

        padding-right: 20px !important;
    }

    .premium-command-column .premium-command-card > .card-body {
        max-height: none;
        overflow: visible;

        padding-right: 0 !important;
    }
}


/* =========================================================
   MAIN SURFACES
========================================================= */

.premium-route-builder.card {
    border-radius: 26px !important;

    background: rgba(255, 255, 255, 0.91) !important;

    box-shadow:
        0 22px 55px rgba(38, 43, 33, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.premium-route-builder > .card-body {
    padding: 22px !important;
}

.premium-route-builder h5 {
    font-size: 1.25rem !important;
    letter-spacing: -0.55px !important;
}


/* =========================================================
   ROUTE POINT CARDS
========================================================= */

.premium-route-stop {
    margin-left: 23px !important;
    margin-bottom: 18px !important;

    padding: 18px 16px 15px !important;

    border-radius: 19px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1),
            rgba(248, 249, 245, 0.98)
        ) !important;

    box-shadow:
        0 11px 28px rgba(42, 47, 36, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.premium-route-stop:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(42, 47, 36, 0.105),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.premium-route-stop > .badge:first-child {
    width: 34px;
    height: 34px;

    left: -23px !important;

    font-size: 0.82rem !important;
}

#main-ui input.form-control,
#main-ui select.form-select {
    min-height: 40px;

    padding-top: 7px;
    padding-bottom: 7px;

    border-radius: 11px;

    font-size: 0.82rem;
}

#main-ui label.form-label {
    margin-bottom: 5px;

    font-size: 0.76rem;
}


.premium-command-column #map {
    height: 600px !important;
    min-height: 600px !important;

    border-radius: 25px !important;

    box-shadow: none !important;
}


.premium-map-kpis {
    top: 16px;
    left: 16px;
    right: 16px;

    gap: 9px;
}

.premium-map-kpi {
    min-width: 126px;

    padding: 10px 13px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.91);

    box-shadow:
        0 12px 30px rgba(38, 42, 34, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.premium-map-kpi-label {
    font-size: 0.59rem;
}

.premium-map-kpi-value {
    margin-top: 2px;

    font-size: 0.87rem;
}


/* =========================================================
   PHYSICS
========================================================= */

.premium-physics-card {
    border-radius: 24px !important;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(118, 87, 232, 0.09),
            transparent 18rem
        ),
        rgba(255, 255, 255, 0.93) !important;

    box-shadow:
        0 22px 52px rgba(42, 47, 36, 0.10) !important;
}

.premium-physics-card > .card-body {
    padding: 24px !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1199.98px */ {

    #main-ui.premium-app {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .premium-route-column,
    .premium-command-column {
        width: 100%;
    }

    .premium-header.apple-header {
        flex-wrap: wrap !important;
    }

    .premium-nav {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 720px */ {

    #main-ui.premium-app {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .premium-header.apple-header {
        border-radius: 17px;
    }

    .premium-context-title {
        font-size: 1.55rem;
    }

    .premium-command-column #map {
        height: 400px !important;
        min-height: 400px !important;
    }
}
/* =========================================================
   RIGHT COMMAND PANEL — INNER WIDTH
========================================================= */

/*
   Не даём содержимому расширять правую колонку.
*/
.premium-command-card,
.premium-command-card > .card-body {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.premium-command-card > .card-body {
    overflow-x: hidden !important;
}


/*
   Общий контейнер цены, breakdown, времени и ESG.
*/
.premium-results-stack {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
}


/*
   Все карточки внутри результатов строго занимают
   только доступную ширину родителя.
*/
.premium-price-card,
.premium-economics-card,
.premium-route-breakdown,
.premium-stat-card,
.premium-esg-card,
.premium-leg-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/*
   Не даём длинным строкам раздвигать карточки.
*/
.premium-price-card > .d-flex:first-child,
.premium-economics-card > .d-flex:first-child {
    flex-wrap: wrap !important;
    gap: 10px 16px;
}

.premium-stat-card .d-flex.justify-content-between,
.premium-esg-card .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 8px 18px;
}



/* =========================================================
   PREMIUM VERTICAL PAGE BACKGROUND
========================================================= */

:root {
    --lc-page-top: #eef3e4;
    --lc-page-middle: #f5f3ee;
   --lc-page-bottom: #eeeaf0;

}

html {
    min-height: 100%;
    margin: 0;

    /* 1. Базовый цвет страницы — лавандовый. 
       Браузер покажет его при отскоке ВНИЗУ. */
    background-color: var(--lc-page-bottom, #e9e1f6) !important;
    
    /* Убираем градиент с html, чтобы он не дублировался с body и не ломал логику */
    background-image: none !important;
}

body {
    min-height: 100vh;
    margin: 0 !important;

    /* 2. Основной градиент остается только на body */
    background-color: var(--lc-page-bottom, #e9e1f6) !important;
    background-image:
        linear-gradient(
            180deg,
            var(--lc-page-top) 0%,
            #f3f4ec 24%,
            var(--lc-page-middle) 52%,
            #f1eef1 76%,
            var(--lc-page-bottom) 100%
        ) !important;

    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
}

/* 3. МАГИЯ ДЛЯ ОТСКОКА СВЕРХУ */
/* Создаем физически невидимый блок фисташкового цвета, 
   который находится ровно НАД страницей (top: -100vh). */
body::before {
    content: "";
    position: absolute;
    top: -100vh; /* Поднимаем блок на весь экран вверх за пределы видимости */
    left: 0;
    right: 0;
    height: 100vh; /* Высота блока — чтобы хватило на любой резкий скролл */
    background-color: var(--lc-page-top, #eef3e4) !important;
    pointer-events: none; /* Чтобы не перехватывал случайные клики */
    z-index: -1; 
}

/*
   Все внешние контейнеры прозрачные:
   через них виден один общий градиент body.
*/
#app,
.page,
.page > main,
.page > main > article,
main,
article,
#main-ui.premium-app {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/*
   Убирает возможную светлую полоску
   из-за верхнего отступа первого элемента.
*/
#main-ui.premium-app {
    padding-top: 1px !important;
}

/* =========================================================
   SMART ORDER AUTOFILL — ENTERPRISE MODAL
========================================================= */

.ai-autofill-backdrop {
    position: fixed;
    inset: 0;
    z-index: 7000;
    background: rgba(26, 30, 25, 0.42);
    -webkit-backdrop-filter: blur(14px) saturate(105%);
    backdrop-filter: blur(14px) saturate(105%);
}

.ai-autofill-layer {
    position: fixed;
    inset: 0;
    z-index: 7010;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
}

.ai-autofill-dialog {
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 24px;
    color: #2e342c;
    background:
        linear-gradient(180deg, rgba(251, 251, 248, 0.985), rgba(246, 247, 242, 0.985));
    box-shadow:
        0 38px 100px rgba(22, 27, 21, 0.28),
        0 10px 28px rgba(22, 27, 21, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 86, 69, 0.20) transparent;
}

.ai-autofill-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 27px 30px 22px;
    border-bottom: 1px solid rgba(48, 57, 44, 0.085);
    background: rgba(255, 255, 255, 0.36);
}

.ai-autofill-brandmark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(80, 93, 72, 0.10);
    border-radius: 13px;
    background: #f0f2ed;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.ai-autofill-brandmark img {
    display: block;
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.ai-autofill-heading {
    min-width: 0;
}

.ai-autofill-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #687461;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ai-autofill-title {
    margin: 0;
    color: #252b24;
    font-size: clamp(1.55rem, 2.4vw, 2.08rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.ai-autofill-subtitle {
    max-width: 690px;
    margin: 8px 0 0;
    color: #737a70;
    font-size: 0.86rem;
    font-weight: 540;
    line-height: 1.55;
}

.ai-autofill-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border: 1px solid rgba(48, 57, 44, 0.09);
    border-radius: 12px;
    color: #70776d;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 5px 16px rgba(38, 43, 34, 0.05);
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.ai-autofill-close:hover {
    transform: translateY(-1px);
    border-color: rgba(48, 57, 44, 0.15);
    color: #282d26;
    background: #ffffff;
}

.ai-autofill-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(280px, 0.72fr);
    gap: 18px;
    padding: 22px 30px 30px;
}

.ai-autofill-main,
.ai-autofill-side {
    min-width: 0;
}

.ai-autofill-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 2px 10px;
}

.ai-autofill-section-heading strong {
    display: block;
    color: #323831;
    font-size: 0.78rem;
    font-weight: 870;
}

.ai-autofill-section-heading span {
    color: #90958d;
    font-size: 0.65rem;
    font-weight: 720;
}

.ai-autofill-editor {
    overflow: hidden;
    border: 1px solid rgba(57, 67, 52, 0.11);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 15px 38px rgba(46, 54, 42, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.ai-autofill-editor:focus-within {
    transform: translateY(-1px);
    border-color: rgba(83, 108, 67, 0.34);
    box-shadow:
        0 18px 42px rgba(46, 62, 38, 0.085),
        0 0 0 4px rgba(95, 122, 72, 0.07);
}

.ai-autofill-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(48, 57, 44, 0.075);
    background: rgba(247, 248, 244, 0.92);
}

.ai-autofill-editor-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #50574d;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.ai-autofill-editor-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #718f55;
    box-shadow: 0 0 0 4px rgba(113, 143, 85, 0.10);
}

.ai-autofill-editor-type {
    color: #92978f;
    font-size: 0.63rem;
    font-weight: 720;
}

.ai-autofill-textarea {
    width: 100%;
    min-height: 245px;
    padding: 18px;
    resize: vertical;
    border: 0 !important;
    outline: 0 !important;
    color: #292e28 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 0.89rem;
    font-weight: 540;
    line-height: 1.62;
}

.ai-autofill-textarea::placeholder {
    color: #a0a59d;
    opacity: 1;
}

.ai-autofill-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid rgba(48, 57, 44, 0.075);
    background: rgba(249, 250, 247, 0.88);
}

.ai-autofill-upload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid rgba(48, 57, 44, 0.10);
    border-radius: 11px;
    color: #3f463c;
    background: rgba(255, 255, 255, 0.80);
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.ai-autofill-upload:hover {
    transform: translateY(-1px);
    border-color: rgba(92, 116, 75, 0.24);
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(54, 66, 48, 0.07);
}

.ai-autofill-upload-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 9px;
    color: #617159;
    background: #eef2ea;
}

.ai-autofill-upload-icon svg,
.ai-autofill-file-chip svg,
.ai-autofill-trust-icon svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-autofill-upload-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.ai-autofill-upload-copy strong {
    color: #3e453b;
    font-size: 0.69rem;
    font-weight: 850;
}

.ai-autofill-upload-copy small {
    margin-top: 3px;
    color: #8c9288;
    font-size: 0.57rem;
    font-weight: 650;
}

.ai-autofill-file-meta {
    flex: 0 0 auto;
    color: #979c94;
    font-size: 0.60rem;
    font-weight: 700;
    text-align: right;
}

.ai-autofill-file-meta span {
    display: block;
    margin-top: 2px;
}

.ai-autofill-file-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(101, 124, 83, 0.14);
    border-radius: 11px;
    color: #4c5944;
    background: rgba(237, 242, 232, 0.80);
}

.ai-autofill-file-chip-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.69rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-autofill-file-remove {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-left: auto;
    border: 0;
    border-radius: 8px;
    color: #687260;
    background: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
    line-height: 1;
}

.ai-autofill-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 17px;
}

.ai-autofill-action-copy {
    min-width: 0;
}

.ai-autofill-action-copy strong,
.ai-autofill-action-copy span {
    display: block;
}

.ai-autofill-action-copy strong {
    color: #464d43;
    font-size: 0.72rem;
    font-weight: 850;
}

.ai-autofill-action-copy span {
    margin-top: 3px;
    color: #898f86;
    font-size: 0.62rem;
    font-weight: 650;
}

.ai-autofill-submit {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 46px;
    padding: 0 19px;
    border: 1px solid rgba(39, 48, 36, 0.08);
    border-radius: 12px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #344331 0%, #506348 100%);
    box-shadow:
        0 13px 28px rgba(52, 70, 47, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    font-size: 0.76rem;
    font-weight: 870;
    letter-spacing: 0.01em;
    transition:
        transform 0.17s ease,
        box-shadow 0.17s ease,
        filter 0.17s ease;
}

.ai-autofill-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: saturate(105%);
    box-shadow:
        0 17px 34px rgba(52, 70, 47, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.ai-autofill-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.ai-autofill-submit:disabled {
    cursor: wait;
    opacity: 0.68;
}

.ai-autofill-side {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgba(57, 67, 52, 0.10);
    border-radius: 17px;
    background:
        linear-gradient(180deg, rgba(242, 245, 239, 0.98), rgba(248, 248, 245, 0.96));
    box-shadow:
        0 13px 32px rgba(47, 57, 43, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.ai-autofill-privacy-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(83, 107, 68, 0.13);
    border-radius: 999px;
    color: #53664b;
    background: rgba(230, 240, 224, 0.88);
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ai-autofill-privacy-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #668a4b;
}

.ai-autofill-side h3 {
    margin: 14px 0 8px;
    color: #30372e;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.ai-autofill-side > p {
    margin: 0;
    color: #71796e;
    font-size: 0.76rem;
    font-weight: 560;
    line-height: 1.58;
}

.ai-autofill-trust-list {
    display: grid;
    gap: 8px;
    margin-top: 17px;
}

.ai-autofill-trust-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px;
    border: 1px solid rgba(57, 67, 52, 0.075);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.ai-autofill-trust-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #617159;
    background: #eef2ea;
}

.ai-autofill-trust-text strong,
.ai-autofill-trust-text span {
    display: block;
}

.ai-autofill-trust-text strong {
    color: #41483e;
    font-size: 0.67rem;
    font-weight: 880;
}

.ai-autofill-trust-text span {
    margin-top: 3px;
    color: #7b8278;
    font-size: 0.59rem;
    font-weight: 640;
    line-height: 1.42;
}

.ai-autofill-caution {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
    color: #685d49;
}

.ai-autofill-caution-icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    color: #806a40;
    background: rgba(248, 235, 207, 0.88);
    font-size: 0.72rem;
    font-weight: 900;
}

.ai-autofill-caution strong,
.ai-autofill-caution span {
    display: block;
}

.ai-autofill-caution strong {
    color: #65583f;
    font-size: 0.63rem;
    font-weight: 880;
}

.ai-autofill-caution span {
    margin-top: 2px;
    color: #8a806d;
    font-size: 0.56rem;
    font-weight: 640;
    line-height: 1.42;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 800px */ {
    .ai-autofill-layer {
        place-items: start center;
        padding: 14px;
    }

    .ai-autofill-dialog {
        max-height: none;
        border-radius: 21px;
    }

    .ai-autofill-header {
        padding: 22px 20px 18px;
    }

    .ai-autofill-grid {
        grid-template-columns: 1fr;
        padding: 18px 20px 22px;
    }

    .ai-autofill-side {
        order: -1;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 560px */ {
    .ai-autofill-layer {
        padding: 0;
    }

    .ai-autofill-dialog {
        min-height: 100vh;
        border-radius: 0;
    }

    .ai-autofill-header {
        gap: 10px;
        padding: 17px 14px 15px;
    }

    .ai-autofill-brandmark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .ai-autofill-title {
        font-size: 1.32rem;
    }

    .ai-autofill-subtitle {
        font-size: 0.75rem;
    }

    .ai-autofill-close {
        width: 34px;
        height: 34px;
    }

    .ai-autofill-grid {
        padding: 14px;
    }

    .ai-autofill-side {
        padding: 16px;
    }

    .ai-autofill-editor-footer,
    .ai-autofill-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-autofill-upload,
    .ai-autofill-submit {
        width: 100%;
    }

    .ai-autofill-file-meta {
        text-align: left;
    }

    .ai-autofill-action-copy {
        display: none;
    }
}



.route-builder-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.route-builder-toolbar-title {
    flex: 0 0 45%;
    max-width: 45%;
    min-width: 0;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: break-word;
}

.route-builder-toolbar-actions {
    display: flex;
    flex: 0 0 53%;
    max-width: 53%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    margin-left: auto;
}

.route-builder-toolbar-button {
    min-height: 30px;
    height: auto !important;
    max-width: none;
    padding: 5px 9px !important;
    font-size: 0.72rem !important;
    line-height: 1.1;
    white-space: nowrap !important;
    text-align: center;
    justify-content: center;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 900px */ {
    .route-builder-toolbar {
        flex-wrap: wrap;
    }

    .route-builder-toolbar-title {
        flex: 1 1 100%;
        white-space: normal;
    }

    .route-builder-toolbar-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
    }
}


@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 575.98px */ {
    .route-builder-toolbar-actions {
        align-items: stretch;
    }

    .route-builder-toolbar-actions > .position-relative {
        width: 100%;
    }

    .route-builder-toolbar-button {
        width: 100%;
    }
}

.route-command-title:focus {
    outline: none !important;
    box-shadow: none !important;
}
@media print {
    html,
    body,
    #app,
    .page,
    .page > main,
    .page > main > article,
    main,
    article,
    #print-section,
    #pdf-export-container {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }

    html,
    body {
        min-height: 0 !important;
        height: auto !important;
    }

    #print-section,
    #pdf-export-container {
        min-height: 0 !important;
        box-shadow: none !important;
    }
}


#pdf-export-container,
.pdf-export-root {
    width: 794px;
    max-width: 794px;
    box-sizing: border-box;
    background: #ffffff;
    color: #252821;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.42;
}

.pdf-report {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: 34px 36px 28px;
    background: #ffffff;
}

.pdf-report *,
.pdf-report *::before,
.pdf-report *::after {
    box-sizing: border-box;
}

.pdf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dfe4d1;
}

.pdf-brand {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.pdf-brand-logo {
    width: 156px;
    height: 44px;
    object-fit: contain;
    object-position: left center;
}

.pdf-company {
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid #d8ddd0;
}

.pdf-company-name {
    margin-bottom: 4px;
    color: #252821;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pdf-company-line {
    margin-top: 2px;
    color: #73776e;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.pdf-report-meta {
    flex: 0 0 auto;
    text-align: right;
}

.pdf-report-title {
    color: #252821;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-transform: uppercase;
}

.pdf-report-name {
    max-width: 250px;
    margin: 5px 0 0 auto;
    color: #6e745f;
    font-size: 10px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pdf-meta-line {
    margin-top: 4px;
    color: #73776e;
    font-size: 10px;
}

.pdf-route-hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    margin-top: 20px;
    padding: 20px 22px;
    border: 1px solid #dfe5d2;
    border-radius: 14px;
    background: #f7f8f2;
}

.pdf-route-main {
    min-width: 0;
    flex: 1 1 auto;
}

.pdf-eyebrow {
    margin-bottom: 8px;
    color: #7b806f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.pdf-route-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pdf-route-place {
    min-width: 0;
    color: #20231e;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.pdf-route-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #ccd5b7;
    border-radius: 50%;
    color: #5e7042;
    background: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.pdf-route-distance {
    flex: 0 0 auto;
    min-width: 132px;
    padding-left: 22px;
    border-left: 1px solid #d9dfcd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}

.pdf-route-distance-value {
    color: #252821;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
}

.pdf-route-distance-unit {
    margin-top: 5px;
    color: #7b806f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pdf-section {
    margin-top: 22px;
}

.pdf-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #31352d;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pdf-section-heading::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: #e3e6dc;
}

.pdf-leg-card,
.pdf-deadhead-card {
    margin-bottom: 12px;
    padding: 18px 20px 16px 22px;
    border: 1px solid #e0e4d9;
    border-left: 4px solid #a8ba7b;
    border-radius: 10px;
    background: #ffffff;
}

.pdf-deadhead-card {
    border-left-color: #aeb2aa;
    border-style: dashed;
    background: #fafaf8;
}

.pdf-leg-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.pdf-leg-route {
    min-width: 0;
    color: #252821;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pdf-leg-route-label {
    display: block;
    margin-bottom: 3px;
    color: #8a8e84;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pdf-leg-distance {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid #e1e6d8;
    border-radius: 7px;
    background: #f4f6ee;
    color: #4d593d;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.pdf-date-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 7px;
    background: #f8f8f5;
    color: #5e625a;
    font-size: 9px;
}

.pdf-country-table {
    margin-top: 12px;
    border-top: 1px solid #eceee8;
}

.pdf-country-row {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 6px;
    border-bottom: 1px solid #f0f1ed;
    color: #4f534c;
    font-size: 9px;
}

.pdf-country-code {
    flex: 0 0 62px;
    color: #252821;
    font-weight: 850;
}

.pdf-country-calc {
    flex: 1 1 auto;
    min-width: 0;
}

.pdf-country-cost {
    flex: 0 0 92px;
    text-align: right;
    color: #252821;
    font-weight: 850;
    white-space: nowrap;
}

.pdf-leg-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 12px;
    padding: 2px 6px 0;
    color: #71766d;
    font-size: 9px;
}


.pdf-leg-footer strong {
    color: #252821;
    font-weight: 850;
}

.pdf-cost-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: 14px;
    background: #252a22;
    color: #ffffff;
}

.pdf-cost-label {
    margin-bottom: 5px;
    color: #cdd8b7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pdf-cost-value {
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    white-space: nowrap;
}

.pdf-cost-details {
    min-width: 225px;
    color: #d9ddd4;
    font-size: 9px;
    text-align: right;
}

.pdf-cost-detail-row {
    margin-top: 4px;
}

.pdf-cost-detail-row strong {
    color: #ffffff;
    font-weight: 850;
}

.pdf-summary-grid {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
}

.pdf-summary-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #e0e4dc;
    border-radius: 11px;
    background: #fafbf8;
}

.pdf-summary-card--green {
    border-color: #d6e8dc;
    background: #f4faf6;
}

.pdf-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.pdf-summary-title {
    min-width: 0;
    color: #666b62;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pdf-summary-card--green .pdf-summary-title {
    color: #397154;
}

.pdf-summary-primary {
    flex: 0 0 auto;
    color: #252821;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.pdf-summary-card--green .pdf-summary-primary {
    color: #245a40;
}

.pdf-summary-stats {
    display: flex;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid #e3e6df;
}

.pdf-summary-card--green .pdf-summary-stats {
    border-top-color: #d8e9dd;
}

.pdf-summary-stat {
    flex: 1 1 0;
    min-width: 0;
}

.pdf-summary-stat + .pdf-summary-stat {
    padding-left: 8px;
    border-left: 1px solid #e1e4de;
}

.pdf-summary-card--green .pdf-summary-stat + .pdf-summary-stat {
    border-left-color: #d7e7dc;
}

.pdf-summary-stat-label {
    margin-bottom: 2px;
    color: #8a8e86;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pdf-summary-card--green .pdf-summary-stat-label {
    color: #5b816c;
}

.pdf-summary-stat-value {
    color: #2e322c;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.pdf-summary-card--green .pdf-summary-stat-value {
    color: #245a40;
}

.pdf-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid #e4e6df;
    color: #93978f;
    font-size: 8px;
}

.pdf-footer strong {
    color: #676c62;
}

.pdf-no-break {
    break-inside: avoid;
    page-break-inside: avoid;
}

.pdf-break-before {
    break-before: page;
    page-break-before: always;
}

@media print {
    #pdf-export-container {
        width: 100% !important;
        max-width: none !important;
    }

    .pdf-report {
        padding: 0 !important;
    }
}

/* =========================================================
   PREMIUM HEADER MORPH — FINAL PERFORMANCE FIX
   Геометрия header больше не меняется при прокрутке.
   Анимируется только отдельный белый слой и его содержимое.
========================================================= */



.premium-header.apple-header {
    /*
       Текущий основной контейнер:
       max-width: 1740px;
       padding-left/right: 28px.
    */
    --lc-header-shell-inset:
        max(28px, calc((100vw - 1740px) / 2 + 28px));

    --lc-header-content-inset:
        max(56px, calc((100vw - 1740px) / 2 + 56px));

    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;

    /*
       Размер самого sticky-элемента всегда одинаковый.
       Поэтому браузеру не приходится пересчитывать страницу.
    */
    width: 100vw !important;
    height: 76px !important;
    min-height: 76px !important;

    margin-top: 0 !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 24px !important;
    margin-left: calc(50% - 50vw) !important;

    padding-top: 14px !important;
    padding-right: var(--lc-header-content-inset) !important;
    padding-bottom: 14px !important;
    padding-left: var(--lc-header-content-inset) !important;

    overflow: visible !important;
    box-sizing: border-box !important;
    isolation: isolate;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    /*
       В обычном состоянии шапка визуально находится на 11px ниже.
       transform не вызывает перерасчёт страницы.
    */
    transform: translate3d(0, 11px, 0);

    transition:
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: transform;
    backface-visibility: hidden;

    /*
       Прозрачная нижняя часть реального header
       не блокирует элементы страницы.
    */
    pointer-events: none;
}

.premium-header.apple-header > * {
    pointer-events: auto;
}


/* Белая форма шапки */
.premium-header.apple-header::before {
    content: "";

    position: absolute;
    top: 0;
    right: var(--lc-header-shell-inset);
    bottom: 0;
    left: var(--lc-header-shell-inset);

    z-index: -1;
    pointer-events: none;

    border: 1px solid rgba(75, 84, 65, 0.08);
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 18px 48px rgba(39, 45, 34, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    transform: scaleY(1);
    transform-origin: top center;

    /*
       left/right меняются только у псевдоэлемента.
       Размер sticky-header и страницы остаётся неизменным.
    */
    transition:
        left 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        right 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.48s cubic-bezier(0.22, 1, 0.36, 1);

    backface-visibility: hidden;
}


/* Состояние после начала прокрутки */
.premium-header.apple-header.header-scrolled {
    /*
       Все геометрические свойства специально оставляем
       такими же, как в обычном состоянии.
    */
    top: 0 !important;

    width: 100vw !important;
    height: 76px !important;
    min-height: 76px !important;

    margin-top: 0 !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 24px !important;
    margin-left: calc(50% - 50vw) !important;

    padding-top: 14px !important;
    padding-right: var(--lc-header-content-inset) !important;
    padding-bottom: 14px !important;
    padding-left: var(--lc-header-content-inset) !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    transform: translate3d(0, 0, 0);
}


/*
   Белая карточка расширяется до краёв окна
   и визуально уменьшается с 76px до примерно 54px.
*/
.premium-header.apple-header.header-scrolled::before {
    right: 0;
    left: 0;

    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: 0 0 18px 18px;

    box-shadow:
        0 14px 38px rgba(35, 40, 31, 0.14),
        0 1px 0 rgba(45, 52, 39, 0.06);

    transform: scaleY(0.71);
}


/* =========================================================
   ВНУТРЕННИЕ ЭЛЕМЕНТЫ
   Их реальные размеры не меняются — только внешний вид.
========================================================= */

.premium-header .premium-brand-lockup,
.premium-header .premium-nav > .position-relative,
.premium-header .premium-nav > .ai-nav-btn {
    position: relative;
    top: 0;

    transition:
        top 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Логотип */
.premium-header .premium-brand-lockup img,
.premium-header.header-scrolled .premium-brand-lockup img {
    height: 42px !important;

    transform: scale(1);
    transform-origin: left center;

    transition:
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: transform;
    backface-visibility: hidden;
}


/* Обычные кнопки — реальные размеры всегда одинаковые */
.premium-header .apple-btn,
.premium-header.header-scrolled .apple-btn {
    height: 39px !important;
    min-height: 39px !important;

    padding: 8px 13px !important;

    font-size: 0.79rem !important;

    transform: scale(1);
    transform-origin: center;

    transition:
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.20s ease,
        box-shadow 0.20s ease !important;

    will-change: transform;
    backface-visibility: hidden;
}


/* AI Autofill — реальные размеры всегда одинаковые */
.premium-header .ai-nav-btn,
.premium-header.header-scrolled .ai-nav-btn {
    height: 40px !important;
    min-height: 40px !important;

    padding: 8px 15px !important;

    font-size: 0.80rem !important;

    transform: scale(1);
    transform-origin: center;

    transition:
        top 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.20s ease,
        box-shadow 0.20s ease !important;

    will-change: transform;
    backface-visibility: hidden;
}


/*
   При сворачивании элементы поднимаются внутрь
   визуально уменьшенной белой панели.
*/
.premium-header.header-scrolled .premium-brand-lockup,
.premium-header.header-scrolled .premium-nav > .position-relative,
.premium-header.header-scrolled .premium-nav > .ai-nav-btn {
    top: -11px;
}

.premium-header.header-scrolled .premium-brand-lockup img {
    transform: scale(0.78);
}

.premium-header.header-scrolled .apple-btn {
    transform: scale(0.88);
}

.premium-header.header-scrolled .ai-nav-btn {
    transform: scale(0.86);
}


/* Сохраняем hover-анимацию и правильный масштаб */
.premium-header .apple-btn:hover {
    transform: translateY(-1px) scale(1);
}

.premium-header.header-scrolled .apple-btn:hover {
    transform: translateY(-1px) scale(0.88);
}


/*
   Старый .click-anim использует !important.
   Перебиваем его, чтобы он не делал кнопки резкими.
*/
.premium-header .apple-btn.click-anim {
    transition:
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.20s ease,
        box-shadow 0.20s ease !important;
}

.premium-header .apple-btn.click-anim:active {
    transform: scale(0.96) !important;
}

.premium-header.header-scrolled .apple-btn.click-anim:active {
    transform: scale(0.84) !important;
}


/* Выпадающие меню не обрезаются */
.premium-header,
.premium-header .premium-nav {
    overflow: visible !important;
}


/* =========================================================
   TABLET / MOBILE
   На узких экранах меню переносится на две строки,
   поэтому desktop-морф безопасно отключаем.
========================================================= */

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1199.98px */ {
    .premium-header.apple-header,
    .premium-header.apple-header.header-scrolled {
        top: 5px !important;

        width: 100% !important;
        height: auto !important;
        min-height: 72px !important;

        margin-top: 14px !important;
        margin-right: 0 !important;
        margin-bottom: 22px !important;
        margin-left: 0 !important;

        padding: 12px 18px !important;

        border: 1px solid rgba(75, 84, 65, 0.08) !important;
        border-radius: 22px !important;

        background: #ffffff !important;

        box-shadow:
            0 18px 48px rgba(39, 45, 34, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 1) !important;

        transform: none !important;

        pointer-events: auto;
    }

    .premium-header.apple-header::before {
        content: none !important;
        display: none !important;
    }

    .premium-header .premium-brand-lockup,
    .premium-header .premium-nav > .position-relative,
    .premium-header .premium-nav > .ai-nav-btn,
    .premium-header.header-scrolled .premium-brand-lockup,
    .premium-header.header-scrolled .premium-nav > .position-relative,
    .premium-header.header-scrolled .premium-nav > .ai-nav-btn {
        top: 0;
    }

    .premium-header .premium-brand-lockup img,
    .premium-header.header-scrolled .premium-brand-lockup img,
    .premium-header .apple-btn,
    .premium-header.header-scrolled .apple-btn,
    .premium-header .ai-nav-btn,
    .premium-header.header-scrolled .ai-nav-btn {
        transform: none;
    }
}

/* =========================================================
   ALIGN DIRECT HEADER BUTTONS
   Impressum и Profile двигаются вместе с остальным меню.
========================================================= */

.premium-header .premium-nav > .premium-menu-trigger {
    position: relative;
    top: 0;

    transition:
        top 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.premium-header.header-scrolled .premium-nav > .premium-menu-trigger {
    top: -11px;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1199.98px */ {
    .premium-header .premium-nav > .premium-menu-trigger,
    .premium-header.header-scrolled .premium-nav > .premium-menu-trigger {
        top: 0;
    }
}

.impressum-layer {
    position: fixed;
    inset: 0;
    z-index: 7600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(28, 32, 27, 0.42);
    -webkit-backdrop-filter: blur(16px) saturate(108%);
    backdrop-filter: blur(16px) saturate(108%);
    animation: impressumFadeIn 0.20s ease-out both;
}

.impressum-card {
    position: relative;
    width: min(100%, 760px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 24px;
    color: #30362f;
    background:
        linear-gradient(
            180deg,
            rgba(250, 250, 247, 0.985),
            rgba(246, 247, 243, 0.985)
        );
    box-shadow:
        0 38px 100px rgba(23, 28, 22, 0.28),
        0 10px 30px rgba(23, 28, 22, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    animation:
        impressumCardIn
        0.28s
        cubic-bezier(0.2, 0.8, 0.2, 1)
        both;
}

.impressum-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 94px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(50, 59, 46, 0.085);
    background:
        linear-gradient(
            90deg,
            rgba(237, 243, 233, 0.92),
            rgba(248, 248, 245, 0.68) 48%,
            rgba(240, 236, 247, 0.78)
        );
}

.impressum-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.impressum-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 46px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.impressum-logo-wrap img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 112px;
    object-fit: contain;
    object-position: left center;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.impressum-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #6d7768;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.impressum-hero h3 {
    margin: 0;
    color: #30362e;
    font-size: 1.52rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.impressum-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0 0 2px;
    border: 1px solid rgba(50, 59, 46, 0.09);
    border-radius: 12px;
    color: #70776d;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 5px 15px rgba(43, 50, 39, 0.05);
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.impressum-close:hover {
    transform: translateY(-1px);
    border-color: rgba(50, 59, 46, 0.15);
    color: #2d332b;
    background: #ffffff;
}

.impressum-body {
    max-height: calc(100vh - 190px);
    padding: 24px 26px 25px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(72, 84, 66, 0.20) transparent;
}

.impressum-description {
    max-width: 650px;
    margin: 0 0 22px;
    color: #767e73;
    font-size: 0.80rem;
    line-height: 1.58;
}

.impressum-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 1px 10px;
    color: #6b7466;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.impressum-section-title i {
    display: none;
}

.impressum-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(250px, 1.25fr)
        minmax(0, 0.90fr);
    gap: 11px;
}

.impressum-info-card {
    min-width: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(57, 67, 52, 0.09);
    border-radius: 15px;
    color: inherit;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        0 10px 26px rgba(52, 62, 48, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.impressum-info-card:hover {
    transform: translateY(-2px);
    border-color: rgba(84, 105, 72, 0.18);
    color: inherit;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 15px 32px rgba(52, 62, 48, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.impressum-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(69, 84, 62, 0.08);
    border-radius: 12px;
    color: #607155;
    background: #eef2ea;
}

.impressum-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.impressum-info-card > div {
    min-width: 0;
}

.impressum-info-card--email strong {
    font-size: 0.76rem;
    white-space: nowrap;
}

.impressum-info-card small {
    display: block;
    margin-bottom: 4px;
    color: #7f867c;
    font-size: 0.64rem;
    font-weight: 720;
    line-height: 1.35;
}

.impressum-info-card strong {
    display: block;
    overflow-wrap: anywhere;
    color: #41483e;
    font-size: 0.80rem;
    font-weight: 880;
    letter-spacing: -0.01em;
    line-height: 1.42;
}

.impressum-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 15px 26px 17px;
    border-top: 1px solid rgba(50, 59, 46, 0.075);
    color: #8c9289;
    background: rgba(246, 247, 243, 0.84);
    font-size: 0.66rem;
    font-weight: 720;
}

.impressum-footer b {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b4b9b0;
}

@keyframes impressumFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes impressumCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 720px */ {
    .impressum-layer {
        align-items: flex-end;
        padding: 12px;
    }

    .impressum-card {
        max-height: calc(100vh - 24px);
        border-radius: 21px;
    }

    .impressum-hero {
        min-height: 84px;
        padding: 18px;
    }

    .impressum-logo-wrap {
        height: 40px;
    }

    .impressum-logo-wrap img {
        height: 34px;
        max-width: 96px;
    }

    .impressum-hero h3 {
        font-size: 1.27rem;
    }

    .impressum-body {
        max-height: calc(100vh - 166px);
        padding: 20px 17px 23px;
    }

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

    .impressum-info-card {
        min-height: 76px;
    }

    .impressum-footer {
        padding: 14px 17px 16px;
    }
}


/* =========================================================
   PROFILE — REFINED ACCOUNT MODAL
========================================================= */

.profile-layer {
    position: fixed;
    inset: 0;
    z-index: 7700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(28, 32, 27, 0.42);
    -webkit-backdrop-filter: blur(16px) saturate(108%);
    backdrop-filter: blur(16px) saturate(108%);
    animation: profileFadeIn 0.20s ease-out both;
}

/* Smooth route transition: Profile -> My Analytics */
.profile-layer.is-leaving-for-analytics {
    pointer-events: none;
}

.profile-layer.is-leaving-for-analytics .profile-shell {
    animation: profileToAnalyticsCardOut 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.profile-layer.is-leaving-for-analytics::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 4%, rgba(221, 233, 213, 0.96), transparent 31rem),
        radial-gradient(circle at 90% 6%, rgba(229, 221, 242, 0.94), transparent 34rem),
        linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 100%);
    animation: profileToAnalyticsWashIn 0.32s ease-out both;
}

.profile-shell {
    position: relative;
    width: min(100%, 760px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 24px;
    color: #30362f;
    background:
        linear-gradient(180deg, rgba(250, 250, 247, 0.985), rgba(246, 247, 243, 0.985));
    box-shadow:
        0 38px 100px rgba(23, 28, 22, 0.28),
        0 10px 30px rgba(23, 28, 22, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    animation: profileCardIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 94px;
    padding: 22px 26px;
    border-bottom: 1px solid rgba(50, 59, 46, 0.085);
    background:
        linear-gradient(90deg, rgba(237, 243, 233, 0.92), rgba(248, 248, 245, 0.68) 48%, rgba(240, 236, 247, 0.78));
}

.profile-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.profile-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 46px;
    flex: 0 0 auto;
    padding: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

.profile-logo-wrap img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 112px;
    object-fit: contain;
    object-position: left center;
    transform: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.profile-hero-copy {
    min-width: 0;
}

.profile-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #6d7768;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-hero h3 {
    margin: 0;
    color: #30362e;
    font-size: 1.52rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.profile-hero-note {
    display: block;
    margin-top: 5px;
    color: #7b8278;
    font-size: 0.69rem;
    font-weight: 620;
}

.profile-close,
.profile-back {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(50, 59, 46, 0.09);
    color: #70776d;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 5px 15px rgba(43, 50, 39, 0.05);
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.profile-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1;
}

.profile-back {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1rem;
}

.profile-close:hover,
.profile-back:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(50, 59, 46, 0.15);
    color: #2d332b;
    background: #ffffff;
}

.profile-close:hover {
    transform: translateY(-1px);
}

.profile-main-scroll {
    max-height: calc(100vh - 142px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(72, 84, 66, 0.20) transparent;
}

.profile-content {
    padding: 24px 26px 28px;
}

.profile-login-intro {
    margin: 2px auto 22px;
    text-align: center;
}

.profile-login-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border: 1px solid rgba(74, 88, 66, 0.10);
    border-radius: 20px;
    background: rgba(239, 243, 235, 0.92);
    box-shadow: 0 12px 30px rgba(56, 68, 50, 0.08);
}

.profile-login-icon img {
    width: 43px;
    height: 43px;
    object-fit: contain;
}

.profile-login-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 3px solid #f8f8f5;
    border-radius: 50%;
    color: #ffffff;
    background: #637b51;
    font-size: 0.78rem;
    font-weight: 850;
}

.profile-auth-pane {
    animation: profilePaneSwap 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.profile-login-intro h5 {
    margin: 0 0 7px;
    color: #343a32;
    font-size: 1.16rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.profile-login-intro p {
    max-width: 500px;
    margin: 0 auto;
    color: #7a8177;
    font-size: 0.80rem;
    line-height: 1.55;
}

.profile-auth-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 22px;
    padding: 4px;
    border: 1px solid rgba(57, 67, 52, 0.09);
    border-radius: 13px;
    background: rgba(239, 241, 236, 0.86);
}

.profile-auth-tab {
    min-height: 39px;
    border: 0;
    border-radius: 10px;
    color: #788075;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 840;
    transition:
        color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.profile-auth-tab:hover:not(:disabled) {
    color: #4a5247;
}

.profile-auth-tab.is-active {
    color: #35402f;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(46, 56, 42, 0.07);
}

.profile-auth-tab:disabled {
    cursor: wait;
    opacity: 0.65;
}

.profile-auth-secondary {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.profile-auth-link {
    border: 0;
    color: #65725e;
    background: transparent;
    font-size: 0.73rem;
    font-weight: 800;
}

.profile-auth-link:hover:not(:disabled) {
    color: #34402f;
    text-decoration: underline;
}

.profile-auth-link:disabled {
    opacity: 0.62;
}


.profile-auth-notice {
    margin-bottom: 16px;
}

.profile-ai-access-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 17px;
    padding: 14px 15px;
    border: 1px solid rgba(127, 104, 178, 0.17);
    border-radius: 14px;
    color: #554b69;
    background:
        linear-gradient(
            135deg,
            rgba(247, 242, 255, 0.96),
            rgba(255, 255, 255, 0.91)
        );
    box-shadow: 0 10px 28px rgba(96, 76, 138, 0.07);
}

.profile-ai-access-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 10px;
    color: #725ca7;
    background: rgba(129, 104, 184, 0.12);
    font-size: 0.9rem;
}

.profile-ai-access-copy {
    display: grid;
    gap: 4px;
}

.profile-ai-access-copy strong {
    color: #4f4562;
    font-size: 0.78rem;
    line-height: 1.3;
}

.profile-ai-access-copy span {
    color: #71677f;
    font-size: 0.72rem;
    line-height: 1.5;
}

.profile-error {


    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px solid rgba(166, 73, 79, 0.15);
    border-radius: 12px;
    color: #8d4349;
    background: rgba(255, 246, 246, 0.86);
    font-size: 0.75rem;
    line-height: 1.45;
}

.profile-error > span:first-child {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    color: #ffffff;
    background: #aa5a60;
    font-size: 0.67rem;
    font-weight: 900;
}

.profile-form-grid {
    display: grid;
    gap: 14px;
}

.profile-field label {
    display: block;
    margin: 0 0 6px 2px;
    color: #5f685a;
    font-size: 0.68rem;
    font-weight: 850;
}

.profile-field .form-control {
    min-height: 45px;
    border: 1px solid rgba(57, 67, 52, 0.11) !important;
    border-radius: 11px !important;
    color: #30362f !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
    font-size: 0.84rem;
}

.profile-field .form-control:focus {
    border-color: rgba(92, 118, 73, 0.34) !important;
    box-shadow: 0 0 0 4px rgba(92, 118, 73, 0.07) !important;
}

.profile-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    margin-top: 18px;
    border: 1px solid rgba(39, 48, 36, 0.08) !important;
    border-radius: 12px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #354431 0%, #53664a 100%) !important;
    box-shadow:
        0 13px 28px rgba(52, 70, 47, 0.21),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    font-size: 0.80rem;
    font-weight: 860;
    transition:
        transform 0.17s ease,
        box-shadow 0.17s ease,
        filter 0.17s ease,
        opacity 0.17s ease;
}

.profile-primary-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 17px 34px rgba(52, 70, 47, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.profile-primary-button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.profile-session-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 22px;
    padding: 16px 17px;
    border: 1px solid rgba(72, 88, 64, 0.11);
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgba(238, 244, 234, 0.90), rgba(249, 249, 246, 0.86));
    box-shadow:
        0 11px 28px rgba(54, 66, 49, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.profile-session-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(66, 82, 59, 0.08);
    border-radius: 12px;
    color: #5e7054;
    background: rgba(255, 255, 255, 0.80);
}

.profile-avatar svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-session-label {
    margin-bottom: 3px;
    color: #778172;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.profile-session-email {
    overflow: hidden;
    color: #3f473d;
    font-size: 0.87rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-session-meta {
    display: block;
    margin-top: 3px;
    color: #81887e;
    font-size: 0.63rem;
    font-weight: 650;
}

.profile-logout {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid rgba(167, 78, 84, 0.14);
    border-radius: 10px;
    color: #9b4c52;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.69rem;
    font-weight: 840;
    transition:
        transform 0.16s ease,
        background 0.16s ease;
}

.profile-logout:hover {
    transform: translateY(-1px);
    background: rgba(255, 248, 248, 0.96);
}

.profile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 1px 10px;
    color: #6b7466;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.profile-section-title i {
    display: none;
}

.profile-section-note {
    color: #989d95;
    font-size: 0.59rem;
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
}

.profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 20px;
}

.profile-actions.profile-actions-single {
    grid-template-columns: 1fr;
}

.profile-action-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(57, 67, 52, 0.09);
    border-radius: 15px;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        0 10px 26px rgba(52, 62, 48, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

button.profile-action-card {
    cursor: pointer;
}

.profile-action-card:hover {
    transform: translateY(-2px);
    border-color: rgba(84, 105, 72, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 15px 32px rgba(52, 62, 48, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.profile-action-card.is-featured {
    min-height: 84px;
    background:
        linear-gradient(135deg, rgba(237, 243, 233, 0.96), rgba(249, 249, 246, 0.90));
}

.profile-action-card.is-static {
    cursor: default;
}

.profile-action-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(69, 84, 62, 0.08);
    border-radius: 12px;
    color: #607155;
    background: #eef2ea;
}

.profile-action-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-action-copy {
    min-width: 0;
}

.profile-action-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #41483e;
    font-size: 0.82rem;
    font-weight: 880;
    letter-spacing: -0.01em;
}

.profile-action-description {
    display: block;
    margin: 0;
    color: #7f867c;
    font-size: 0.69rem;
    line-height: 1.42;
}

.profile-action-arrow {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    color: #778171;
    background: rgba(241, 244, 238, 0.90);
    font-size: 0.88rem;
    transition:
        transform 0.16s ease,
        background 0.16s ease;
}

button.profile-action-card:hover .profile-action-arrow {
    transform: translateX(2px);
    background: rgba(232, 238, 227, 0.98);
}

.profile-action-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 7px;
    border: 1px solid rgba(87, 105, 77, 0.09);
    border-radius: 999px;
    color: #6d7866;
    background: rgba(244, 246, 241, 0.94);
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.profile-action-card.has-status .profile-action-arrow {
    margin-top: 20px;
}

.profile-subpanel {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 27px 28px 30px;
    visibility: hidden;
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
    color: #30362f;
    background:
        linear-gradient(180deg, rgba(250, 250, 247, 0.995), rgba(246, 247, 243, 0.995));
    transition:
        transform 0.30s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.20s ease,
        visibility 0.30s;
}

.profile-subpanel.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
    transition:
        transform 0.30s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.20s ease,
        visibility 0s;
}

.profile-subpanel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 21px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(57, 67, 52, 0.085);
}

.profile-subpanel-header h4 {
    margin: 0;
    color: #373e35;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.profile-subpanel-description {
    margin: 0 0 20px;
    color: #767e73;
    font-size: 0.80rem;
    line-height: 1.58;
}

.profile-company-form {
    display: grid;
    gap: 14px;
}

.profile-save-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    padding: 11px 13px;
    border: 1px solid rgba(113, 139, 96, 0.15);
    border-radius: 12px;
    color: #586751;
    background: rgba(235, 243, 231, 0.82);
    font-size: 0.72rem;
    font-weight: 760;
}

.profile-billing-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 470px;
    margin: auto;
    padding: 30px 20px;
    text-align: center;
}

.profile-wip-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 17px;
    border: 1px solid rgba(70, 83, 63, 0.09);
    border-radius: 20px;
    color: #617159;
    background: #eef2ea;
    box-shadow: 0 15px 36px rgba(54, 66, 49, 0.08);
}

.profile-wip-icon svg {
    display: block;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-billing-empty h5 {
    margin: 0 0 8px;
    color: #3f473d;
    font-size: 1.08rem;
    font-weight: 900;
}

.profile-billing-empty p {
    margin: 0;
    color: #7c8479;
    font-size: 0.80rem;
    line-height: 1.58;
}

.profile-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    padding: 6px 10px;
    border: 1px solid rgba(95, 116, 82, 0.12);
    border-radius: 999px;
    color: #66745e;
    background: rgba(244, 247, 241, 0.94);
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

@keyframes profilePaneSwap {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes profileFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes profileCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes profileToAnalyticsCardOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
        filter: blur(3px);
    }
}

@keyframes profileToAnalyticsWashIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-layer.is-leaving-for-analytics .profile-shell,
    .profile-layer.is-leaving-for-analytics::after {
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 720px */ {
    .profile-layer {
        align-items: flex-end;
        padding: 12px;
    }

    .profile-shell {
        max-height: calc(100vh - 24px);
        border-radius: 21px;
    }

    .profile-hero {
        min-height: 84px;
        padding: 18px;
    }

    .profile-logo-wrap {
        height: 40px;
    }

    .profile-logo-wrap img {
        height: 34px;
        max-width: 96px;
    }

    .profile-hero h3 {
        font-size: 1.27rem;
    }

    .profile-hero-note {
        display: none;
    }

    .profile-main-scroll {
        max-height: calc(100vh - 116px);
    }

    .profile-content {
        padding: 20px 17px 23px;
    }

    .profile-session-card {
        grid-template-columns: 1fr;
    }

    .profile-logout {
        width: 100%;
    }

    .profile-actions {
        grid-template-columns: 1fr;
    }

    .profile-action-card {
        min-height: 82px;
    }

    .profile-subpanel {
        padding: 22px 18px 25px;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 480px */ {
    .profile-brand {
        gap: 10px;
    }

    .profile-logo-wrap img {
        max-width: 84px;
    }

    .profile-eyebrow {
        font-size: 0.56rem;
    }

    .profile-hero h3 {
        font-size: 1.12rem;
    }

    .profile-close {
        width: 35px;
        height: 35px;
    }
}


/* =========================================================
   RUN TELEMETRY — MICRO SEQUENCE
========================================================= */

.telemetry-stage-text {
    display: inline-block;
    animation: telemetryStageSwap 0.18s ease both;
}

.telemetry-ready-mark {
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    animation: telemetryReadyPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes telemetryStageSwap {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

@keyframes telemetryReadyPop {
    from {
        opacity: 0;
        transform: scale(0.55);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   REALISTIC VEHICLE OVERLAY — EURO-TENT V1
========================================================= */

.real-truck-stage {
    position: relative;

    width: calc(100% + 48px);
    height: 218px;
    margin: 0 -24px 18px;

    overflow: visible;

    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    isolation: isolate;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


.real-truck-profile {
    position: absolute;
    top: 11px;
    left: 13px;
    z-index: 30;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 28px;
    max-width: calc(100% - 26px);
    padding: 5px 10px;

    overflow: hidden;

    border: 1px solid rgba(91, 105, 72, 0.14);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 7px 18px rgba(48, 55, 41, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    color: #4e5a45;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.25px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.real-truck-profile::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;
    background: #7f9e55;

    box-shadow: 0 0 0 4px rgba(127, 158, 85, 0.13);
}

.real-truck-canvas {
    position: absolute;
    left: 0.5%;
    right: 0.5%;
    bottom: 7px;
    z-index: 2;

    aspect-ratio: 1588 / 452;

    transform: scale(1.03);
    transform-origin: center bottom;

    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.real-truck-image {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;
    display: block;

    object-fit: fill;
    background: transparent !important;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/*
   Интерактивная область точно накладывается
   на боковую часть полуприцепа в truck-euro-render.png.
*/
.real-truck-deck {
    position: absolute;
    z-index: 10;

    left: 23.4%;
    top: 8%;
    width: 73.2%;
    height: 52%;

    overflow: hidden;

pointer-events: auto;
touch-action: none;

user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;

    border: 1px solid rgba(83, 92, 76, 0.09);
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.10)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);

    cursor: default;
}

.real-truck-deck::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 40;

    height: 5px;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(45, 52, 42, 0.055)
    );
}

.real-truck-cargo {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(142, 102, 239, 0.94),
            rgba(87, 92, 220, 0.94)
        ) !important;

    box-shadow:
        0 7px 16px rgba(75, 67, 176, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;

}

.real-truck-cargo::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            118deg,
            rgba(255, 255, 255, 0.25),
            transparent 35%,
            transparent 72%,
            rgba(255, 255, 255, 0.08)
        );
}

.real-truck-caption {
    position: absolute;
    right: 14px;
    bottom: 6px;
    z-index: 25;

    color: rgba(72, 80, 65, 0.48);
    font-size: 0.53rem;
    font-weight: 850;
    letter-spacing: 0.85px;
    text-transform: uppercase;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 760px */ {
    .real-truck-stage {
        width: calc(100% + 32px);
        height: 185px;
        margin: 0 -16px 14px;
    }

   

    .real-truck-profile {
        top: 9px;
        left: 10px;
        min-height: 25px;
        padding: 4px 8px;
        font-size: 0.58rem;
    }

    .real-truck-canvas {
        left: 0;
        right: 0;
        bottom: 4px;
        transform: none;
    }

    .real-truck-caption {
        display: none;
    }
}

.real-truck-stage,
.real-truck-stage * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.real-truck-stage img,
.real-truck-stage span,
.real-truck-stage div {
    -webkit-user-drag: none;
}

/* =========================================================
   PHYSICS TELEMETRY CARDS
========================================================= */

.premium-physics-card {
    container-type: inline-size;
}

.physics-telemetry-panel {
    margin-top: 8px;
}

.physics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.physics-kpi-card {
    min-width: 0;
    min-height: 104px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px;

    border: 1px solid rgba(67, 76, 60, 0.09);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(250, 251, 247, 0.72)
        );

    box-shadow:
        0 8px 22px rgba(46, 53, 40, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.physics-kpi-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}

.physics-kpi-icon svg {
    width: 22px;
    height: 22px;
}

.physics-kpi-icon--payload {
    color: #7c5ce1;
    background: rgba(124, 92, 225, 0.11);
}

.physics-kpi-icon--floor {
    color: #3285dc;
    background: rgba(50, 133, 220, 0.11);
}

.physics-kpi-icon--balance {
    color: #21a765;
    background: rgba(33, 167, 101, 0.11);
}

.physics-kpi-icon--front {
    color: #dd771d;
    background: rgba(221, 119, 29, 0.11);
}

.physics-kpi-icon--rear {
    color: #427bd6;
    background: rgba(66, 123, 214, 0.11);
}

.physics-kpi-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.physics-kpi-label {
    color: #697064;
    font-size: 0.66rem;
    font-weight: 760;
    line-height: 1.2;
}

.physics-kpi-value {
    margin-top: 3px;

    color: #252925;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.1;

    white-space: nowrap;
}

.physics-kpi-meta {
    margin-top: 4px;

    color: #858b82;
    font-size: 0.61rem;
    font-weight: 650;
    line-height: 1.2;
}

.physics-kpi-card.is-danger .physics-kpi-value,
.physics-kpi-card.is-danger .physics-kpi-meta {
    color: #dc3545;
}

.physics-kpi-card--balance {
    justify-content: center;
    text-align: left;
    gap: 12px;
}

.physics-kpi-card--balance .physics-kpi-icon {
    transform: none;
}

.physics-kpi-card--balance .physics-kpi-copy {
    align-items: flex-start;
    transform: none;
}


.physics-kpi-card--balance.is-ok .physics-kpi-value {
    color: #20a35e;
}

.physics-kpi-card--balance.is-warning .physics-kpi-value,
.physics-kpi-card--balance.is-warning .physics-kpi-meta {
    color: #e33d49;
}

.physics-kpi-card--balance.is-warning .physics-kpi-icon {
    color: #e33d49;
    background: rgba(227, 61, 73, 0.10);
}
/* =========================================================
   LOADING POSITION INSTRUCTION
========================================================= */

.physics-loading-card {
    margin-top: 10px;
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    padding: 14px 16px;

    border: 1px solid rgba(67, 76, 60, 0.09);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.90),
            rgba(248, 250, 244, 0.78)
        );

    box-shadow:
        0 8px 22px rgba(46, 53, 40, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.physics-loading-main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;
}

.physics-loading-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #6d58d6;
    background: rgba(109, 88, 214, 0.10);
}

.physics-loading-icon svg {
    width: 23px;
    height: 23px;
}

.physics-loading-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.physics-loading-label {
    color: #697064;
    font-size: 0.65rem;
    font-weight: 760;
    line-height: 1.2;
}

.physics-loading-title {
    margin-top: 3px;

    color: #252925;
    font-size: 0.92rem;
    font-weight: 860;
    line-height: 1.2;
}

.physics-loading-meta {
    margin-top: 4px;

    color: #858b82;
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1.3;
}

.physics-loading-distances {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 8px;
}

.physics-loading-distance {
    min-width: 100px;
    padding: 9px 11px;

    border: 1px solid rgba(67, 76, 60, 0.075);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.72);
}

.physics-loading-distance span {
    display: block;

    color: #7a8177;
    font-size: 0.56rem;
    font-weight: 720;
    line-height: 1.15;
}

.physics-loading-distance strong {
    display: block;
    margin-top: 3px;

    color: #292d28;
    font-size: 0.88rem;
    font-weight: 880;
    line-height: 1.1;

    white-space: nowrap;
}

.physics-loading-card.is-balanced .physics-loading-icon {
    color: #20a35e;
    background: rgba(32, 163, 94, 0.10);
}

.physics-loading-card.is-recommended .physics-loading-icon {
    color: #d77b24;
    background: rgba(215, 123, 36, 0.11);
}

.physics-loading-card.is-impossible .physics-loading-icon {
    color: #e33d49;
    background: rgba(227, 61, 73, 0.10);
}

.physics-loading-card.is-impossible .physics-loading-title,
.physics-loading-card.is-impossible .physics-loading-meta {
    color: #e33d49;
}



.physics-spec-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;

    margin-top: 10px;
    padding: 8px 4px;

    border: 1px solid rgba(67, 76, 60, 0.085);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.68);

    box-shadow:
        0 7px 20px rgba(46, 53, 40, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.physics-spec-item {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 11px;

    border-right: 1px solid rgba(67, 76, 60, 0.075);
}

.physics-spec-item:last-child {
    border-right: none;
}

.physics-spec-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #7560d9;
    background: rgba(117, 96, 217, 0.09);

    font-size: 0.76rem;
    font-weight: 850;
}

.physics-spec-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.physics-spec-label {
    color: #747b71;
    font-size: 0.57rem;
    font-weight: 700;
    line-height: 1.15;
}

.physics-spec-value {
    margin-top: 2px;

    color: #282c27;
    font-size: 0.72rem;
    font-weight: 820;
    line-height: 1.15;

    white-space: nowrap;
}

@container (max-width: 720px) {
    .physics-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .physics-kpi-card--balance {
        grid-column: span 2;
    }

    .physics-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .physics-spec-item {
        border-right: none;
        border-bottom: 1px solid rgba(67, 76, 60, 0.07);
    }

    .physics-spec-item:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .physics-spec-item:last-child {
        grid-column: span 2;
    }
    .physics-loading-card {
        grid-template-columns: 1fr;
    }

    .physics-loading-distances {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 410px) {
    .physics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .physics-kpi-card--balance {
        grid-column: auto;
    }

    .physics-spec-grid {
        grid-template-columns: 1fr;
    }

    .physics-spec-item,
    .physics-spec-item:last-child {
        grid-column: auto;
        border-bottom: 1px solid rgba(67, 76, 60, 0.07);
    }

    .physics-spec-item:last-child {
        border-bottom: none;
    }
    .physics-loading-main {
        align-items: flex-start;
    }

    .physics-loading-distances {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PREMIUM SYSTEM NOTICES
========================================================= */

.logiccalc-notice {
    --notice-accent: #6b7280;
    --notice-border: rgba(107, 114, 128, 0.18);
    --notice-icon-bg: rgba(107, 114, 128, 0.10);
    --notice-title: #27303a;
    --notice-text: #59636f;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;

    padding: 17px 18px 17px 20px;
    border: 1px solid var(--notice-border);
    border-radius: 18px;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.90));
    box-shadow:
        0 14px 34px rgba(42, 49, 43, 0.08),
        0 2px 8px rgba(42, 49, 43, 0.04);

    overflow: hidden;
    isolation: isolate;

    animation: logiccalcNoticeEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.logiccalc-notice::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--notice-accent);
}

.logiccalc-notice::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -58px;
    right: -44px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--notice-icon-bg) 0%, transparent 70%);
    pointer-events: none;
}

.logiccalc-notice--info {
    --notice-accent: #4f7fbf;
    --notice-border: rgba(79, 127, 191, 0.22);
    --notice-icon-bg: rgba(79, 127, 191, 0.11);
    --notice-title: #315f96;
    --notice-text: #4c647f;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(244, 249, 255, 0.97));
}

.logiccalc-notice--warning {
    --notice-accent: #c58a2c;
    --notice-border: rgba(197, 138, 44, 0.24);
    --notice-icon-bg: rgba(197, 138, 44, 0.12);
    --notice-title: #835a18;
    --notice-text: #6d5a37;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 250, 239, 0.97));
}

.logiccalc-notice--danger {
    --notice-accent: #c65b69;
    --notice-border: rgba(198, 91, 105, 0.22);
    --notice-icon-bg: rgba(198, 91, 105, 0.11);
    --notice-title: #8e3845;
    --notice-text: #68484e;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 247, 248, 0.97));
}

.logiccalc-notice--maritime {
    --notice-accent: #2685c7;
    --notice-border: rgba(38, 133, 199, 0.22);
    --notice-icon-bg: rgba(38, 133, 199, 0.11);
    --notice-title: #12679f;
    --notice-text: #3f6278;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(241, 249, 255, 0.97));
}

.logiccalc-notice-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    color: var(--notice-accent);
    background: var(--notice-icon-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.logiccalc-notice-icon svg {
    width: 22px;
    height: 22px;
}

.logiccalc-notice-content {
    min-width: 0;
    padding-top: 1px;
}

.logiccalc-notice-title {
    display: block;
    margin: 0 0 4px;

    color: var(--notice-title);
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.logiccalc-notice-text {
    display: block;
    color: var(--notice-text);
    font-size: 0.84rem;
    font-weight: 560;
    line-height: 1.5;
}

.logiccalc-notice-close {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: -3px -4px 0 0;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--notice-title);

    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;

    opacity: 0.56;
    transition:
        opacity 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.logiccalc-notice-close:hover {
    opacity: 0.92;
    background: var(--notice-icon-bg);
    transform: scale(1.04);
}

.logiccalc-notice-close:active {
    transform: scale(0.92);
}

.logiccalc-notice--danger .logiccalc-notice-icon {
    animation: logiccalcNoticePulse 0.72s ease-out 0.18s both;
}

@keyframes logiccalcNoticeEnter {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }

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

@keyframes logiccalcNoticePulse {
    0% {
        transform: scale(0.82);
        box-shadow: 0 0 0 0 rgba(217, 72, 95, 0.24);
    }

    55% {
        transform: scale(1.07);
        box-shadow: 0 0 0 10px rgba(217, 72, 95, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(217, 72, 95, 0);
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 575px */ {
    .logiccalc-notice {
        gap: 11px;
        padding: 15px 14px 15px 17px;
        border-radius: 16px;
    }

    .logiccalc-notice-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
    }

    .logiccalc-notice-icon svg {
        width: 20px;
        height: 20px;
    }

    .logiccalc-notice-title {
        font-size: 0.90rem;
    }

    .logiccalc-notice-text {
        font-size: 0.79rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-notice,
    .logiccalc-notice--danger .logiccalc-notice-icon {
        animation: none !important;
    }

    .logiccalc-notice-close {
        transition: none !important;
    }
}

/* =========================================================
   DISPATCH TIMELINE
========================================================= */


.dispatch-timeline-card {
    order: 5;
    width: 100%;
    min-width: 0;
    margin-bottom: 24px !important;

    padding: 22px 22px 32px;
    border: 1px solid rgba(116, 105, 170, 0.15);
    border-radius: 20px;

    background:
        radial-gradient(circle at 94% 4%, rgba(139, 92, 246, 0.08), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 255, 0.96));
    box-shadow:
        0 18px 42px rgba(59, 52, 92, 0.08),
        0 2px 8px rgba(59, 52, 92, 0.04);
}

.dispatch-timeline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.dispatch-timeline-title {
    margin: 0;
    color: #27272a;
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.dispatch-timeline-subtitle {
    display: block;
    margin-top: 4px;
    color: #85858f;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
}

.dispatch-timeline-status {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid rgba(104, 159, 66, 0.20);
    border-radius: 999px;
    color: #5f873e;
    background: rgba(231, 241, 220, 0.78);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dispatch-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.dispatch-control {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(107, 114, 128, 0.13);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
}

.dispatch-control-label {
    display: block;
    margin-bottom: 5px;
    color: #7a7a80;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.dispatch-control-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: #323236;
    background: transparent;
    font-size: 0.80rem;
    font-weight: 750;
}


.dispatch-stepper-field input[type="number"]::-webkit-outer-spin-button,
.dispatch-stepper-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dispatch-stepper-field input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.dispatch-control-input:focus {
    box-shadow: none;
}

.dispatch-stepper-field {
    position: relative;
    width: 100%;
}

.dispatch-stepper-field .dispatch-control-input {
    padding-right: 27px;
}

.dispatch-stepper-buttons {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 21px;
    overflow: hidden;
    border-left: 1px solid rgba(107, 114, 128, 0.12);
    border-radius: 5px;
    transform: translateY(-50%);
}

.dispatch-stepper-buttons button {
    display: flex;
    width: 21px;
    height: 11px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #8a8a85;
    font-size: 7px;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.dispatch-stepper-buttons button:first-child {
    border-bottom: 1px solid rgba(107, 114, 128, 0.10);
}

.dispatch-stepper-buttons button:hover {
    color: #4f6034;
    background: rgba(139, 168, 86, 0.12);
}

.dispatch-stepper-buttons button:active {
    background: rgba(139, 168, 86, 0.22);
}

.dispatch-timeline-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 17px;
}

.dispatch-summary-chip {
    padding: 9px 10px;
    border: 1px solid rgba(139, 92, 246, 0.10);
    border-radius: 12px;
    background: rgba(245, 243, 255, 0.66);
}

.dispatch-summary-chip span {
    display: block;
    color: #92909a;
    font-size: 0.61rem;
    font-weight: 750;
    text-transform: uppercase;
}

.dispatch-summary-chip strong {
    display: block;
    margin-top: 2px;
    color: #4b4661;
    font-size: 0.78rem;
    font-weight: 850;
}

.dispatch-timeline-list {
    position: relative;
    margin-left: 3px;
}

.dispatch-timeline-list::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 25px;
    left: 20px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(104, 159, 66, 0.52),
        rgba(139, 92, 246, 0.44),
        rgba(104, 159, 66, 0.52));
}

.dispatch-timeline-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(77, 88, 70, 0.08);
}

.dispatch-timeline-row:last-child {
    border-bottom: 0;
}

.dispatch-timeline-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    color: #7357dc;
    background: #f0ebff;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12);
    font-size: 0.92rem;
    font-weight: 900;
}

.dispatch-timeline-row--start .dispatch-timeline-icon,
.dispatch-timeline-row--arrival .dispatch-timeline-icon {
    color: #2b9d58;
    background: #e9f7ee;
    box-shadow: 0 0 0 1px rgba(43, 157, 88, 0.13);
}

.dispatch-timeline-row--rest .dispatch-timeline-icon {
    color: #6652c7;
    background: #eeebff;
}

.dispatch-timeline-copy {
    min-width: 0;
}

.dispatch-timeline-copy strong {
    display: block;
    overflow: hidden;
    color: #343438;
    font-size: 0.83rem;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatch-timeline-copy span {
    display: block;
    margin-top: 3px;
    color: #8a8991;
    font-size: 0.70rem;
    font-weight: 600;
    line-height: 1.35;
}

.dispatch-timeline-time {
    padding-left: 10px;
    color: #67646f;
    font-size: 0.72rem;
    font-weight: 750;
    text-align: right;
    white-space: nowrap;
}

.dispatch-timeline-time.is-final {
    color: #7357dc;
    font-size: 0.83rem;
    font-weight: 900;
}

.dispatch-timeline-note {
    margin-top: 13px;
    padding: 9px 11px;
    border-radius: 11px;
    color: #817f88;
    background: rgba(244, 244, 238, 0.72);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.45;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1199px */ {
    .dispatch-controls,
    .dispatch-timeline-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 575px */ {
    .dispatch-timeline-card {
        padding: 17px 14px;
        border-radius: 17px;
    }

    .dispatch-timeline-head {
        flex-direction: column;
        gap: 10px;
    }

    .dispatch-controls,
    .dispatch-timeline-summary {
        grid-template-columns: 1fr;
    }

    .dispatch-timeline-row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
    }

    .dispatch-timeline-icon {
        width: 38px;
        height: 38px;
    }

    .dispatch-timeline-list::before {
        left: 18px;
    }

    .dispatch-timeline-time {
        grid-column: 2;
        padding-left: 0;
        text-align: left;
    }
}


/* =========================================================
   PREMIUM FOOTER — COMPACT PASS
========================================================= */

.premium-footer {
    margin: 232px 0 30px !important;
}

.premium-footer-shell {
    padding: 24px 26px 0 !important;
    border-radius: 26px !important;
}

.premium-footer-main {
    grid-template-columns: minmax(240px, 0.72fr) minmax(520px, 1.55fr);
    gap: 26px !important;
    padding-bottom: 20px !important;
}

.premium-footer-brand {
    padding: 2px 4px !important;
}

.premium-footer-logo {
    height: 40px !important;
    max-width: 190px !important;
}

.premium-footer-description {
    max-width: 390px;
    margin: 14px 0 16px !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

.premium-footer-bug {
    min-height: 40px !important;
    padding: 8px 13px !important;
    gap: 9px !important;
    font-size: 0.72rem !important;
}

.premium-footer-bug-icon {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
}

.premium-footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.premium-footer-card {
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    gap: 9px !important;

    min-height: 88px !important;
    padding: 12px 12px 11px !important;

    border-radius: 16px !important;
}

.premium-footer-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
}

.premium-footer-card-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.premium-footer-card-title {
    margin: 0 0 4px !important;
    font-size: 0.79rem !important;
}

.premium-footer-card-description {
    font-size: 0.64rem !important;
    line-height: 1.36 !important;
}

.premium-footer-card-arrow {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.80rem !important;
}

.premium-footer-bottom {
    margin: 0 -26px !important;
    padding: 13px 26px 14px !important;
}

.premium-footer-copy {
    gap: 1px !important;
    font-size: 0.67rem !important;
}

.premium-footer-status {
    gap: 7px !important;
    font-size: 0.67rem !important;
}

.premium-footer-status-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
}

.premium-footer-status-icon svg {
    width: 15px !important;
    height: 15px !important;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1050px */ {
    .premium-footer-main {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 700px */ {
    .premium-footer {
    margin: 44px 0 20px !important;
}

    .premium-footer-shell {
        padding: 20px 14px 0 !important;
        border-radius: 21px !important;
    }

    .premium-footer-main {
        gap: 20px !important;
    }

    .premium-footer-card {
        min-height: 100px !important;
    }

    .premium-footer-bottom {
        margin: 0 -14px !important;
        padding: 13px 14px 15px !important;
    }
}

/* =========================================================
   MAP POINT PICK BUTTON
========================================================= */

.route-map-pick-wrap {
    position: relative;
    display: inline-flex;
}

.route-map-pick-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(120, 150, 79, 0.28);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(232, 239, 217, 0.88), rgba(255, 255, 255, 0.96));
    color: #5f7e38;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 18px rgba(44, 49, 38, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.route-map-pick-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(120, 150, 79, 0.45);
    background: linear-gradient(145deg, rgba(236, 243, 222, 0.98), rgba(255, 255, 255, 1));
    box-shadow:
        0 12px 24px rgba(44, 49, 38, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.route-map-pick-btn.is-active {
    border-color: rgba(120, 150, 79, 0.70);
    background: linear-gradient(145deg, rgba(220, 232, 197, 1), rgba(244, 248, 235, 1));
    box-shadow:
        0 0 0 4px rgba(120, 150, 79, 0.10),
        0 12px 24px rgba(44, 49, 38, 0.10);
}

.route-map-pick-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.route-map-pick-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(34, 38, 32, 0.94);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 50;
}

.route-map-pick-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    pointer-events: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(34, 38, 32, 0.94);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 50;
}

.route-map-pick-wrap:hover::after,
.route-map-pick-wrap:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* Map button inside Point Name input */

.route-point-input-wrap {
    position: relative;
}

.route-point-input-wrap .form-control {
    padding-right: 74px !important;
}

.route-map-pick-inside {
    position: absolute;
    right: 5px;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
}

.route-map-pick-inside .route-map-pick-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.route-map-pick-inside .route-map-pick-btn svg {
    width: 16px;
    height: 16px;
}

.route-map-pick-inside::after,
.route-map-pick-inside::before {
    z-index: 1100;
}

/* Address suggestions must stay above following route controls */
.premium-route-stop:focus-within {
    position: relative;
    z-index: 3000;
}

.premium-route-stop:focus-within .route-point-input-wrap {
    z-index: 3001;
}



/* =========================================================
   ROUTE STOP UI V2 — visual-only refresh
   Keeps existing bindings, events and route/cargo logic intact.
========================================================= */

.route-stop-v2 {
    margin-left: 24px !important;
    margin-bottom: 20px !important;
    padding: 22px 18px 18px !important;

    border: 1px solid rgba(72, 82, 64, 0.10) !important;
    border-radius: 24px !important;

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.99),
            rgba(251, 251, 248, 0.985)
        ) !important;

    box-shadow:
        0 16px 38px rgba(43, 50, 38, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;

    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.route-stop-v2:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(120, 150, 79, 0.18) !important;
    box-shadow:
        0 19px 42px rgba(43, 50, 38, 0.082),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.route-stop-v2::after {
    left: -24px !important;
    top: 34px !important;
    bottom: -39px !important;
    width: 1px !important;
    background:
        linear-gradient(
            to bottom,
            rgba(126, 157, 79, 0.42),
            rgba(126, 157, 79, 0.10)
        ) !important;
}

.route-stop-v2 > .route-stop-index {
    top: 26px !important;
    left: -24px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;

    border: 5px solid #f5f4ef !important;
    border-radius: 50% !important;

    background:
        linear-gradient(145deg, #eef3e4, #e1e9d2) !important;
    color: #52633d !important;

    box-shadow:
        0 8px 18px rgba(75, 92, 58, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    font-size: 0.81rem !important;
    font-weight: 850 !important;
}

.route-stop-v2 .route-stop-remove {
    top: 7px !important;
    right: 7px !important;
    width: 31px;
    height: 31px;
    margin: 0 !important;
    padding: 9px !important;

    border-radius: 999px;
    opacity: 0.44;
    background-color: transparent;
    transition:
        opacity 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.route-stop-v2 .route-stop-remove:hover {
    opacity: 0.82;
    background-color: rgba(81, 87, 77, 0.055);
    transform: none !important;
}

.route-stop-v2 .route-stop-fields {
    margin-bottom: 14px !important;
}

.route-stop-v2 .route-stop-label {
    margin-bottom: 6px !important;
    color: #535a50 !important;
    font-size: 0.71rem !important;
    font-weight: 760 !important;
    letter-spacing: -0.01em;
}

.route-stop-v2 .route-stop-control,
.route-stop-v2 .route-cargo-control {
    min-height: 44px !important;
    border: 1px solid rgba(67, 76, 61, 0.12) !important;
    border-radius: 12px !important;

    background-color: rgba(250, 250, 247, 0.93) !important;
    color: #2b2f29 !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    font-size: 0.81rem !important;
    font-weight: 560 !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.route-stop-v2 .route-stop-control:hover,
.route-stop-v2 .route-cargo-control:hover {
    border-color: rgba(120, 150, 79, 0.23) !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
}

.route-stop-v2 .route-stop-control:focus,
.route-stop-v2 .route-cargo-control:focus {
    border-color: rgba(120, 150, 79, 0.42) !important;
    background-color: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(120, 150, 79, 0.075) !important;
}

.route-stop-v2 .route-stop-action.is-pickup {
    background-color: rgba(246, 249, 239, 0.96) !important;
}

.route-stop-v2 .route-stop-action.is-delivery {
    background-color: rgba(246, 245, 251, 0.96) !important;
    border-color: rgba(103, 86, 167, 0.13) !important;
}

.route-stop-v2 .route-stop-date {
    margin-top: 7px !important;
}

.route-stop-v2 .route-point-input-wrap .form-control {
    padding-right: 52px !important;
}

.route-stop-v2 .route-map-pick-inside {
    right: 7px;
}

.route-stop-v2 .route-map-pick-inside .route-map-pick-btn {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Cargo: one clean section instead of a card-inside-card stack. */
.route-stop-v2 .route-cargo-shell {
    margin: 2px 0 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(67, 76, 61, 0.095) !important;
    border-radius: 17px !important;

    background:
        linear-gradient(
            145deg,
            rgba(250, 251, 247, 0.82),
            rgba(255, 255, 255, 0.82)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;

    overflow: hidden;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease !important;
}

.route-stop-v2 .route-cargo-shell.is-enabled {
    border-color: rgba(120, 150, 79, 0.15) !important;
}

.route-stop-v2 .route-cargo-header {
    min-height: 52px;
    margin: 0 !important;
    padding: 10px 12px;
    border-bottom: 1px solid transparent;
}

.route-stop-v2 .route-cargo-header.is-enabled {
    border-bottom-color: rgba(67, 76, 61, 0.085);
}

.route-stop-v2 .route-cargo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-stop-v2 .route-cargo-toggle-input {
    width: 2.05em;
    height: 1.08em;
    margin-top: 0 !important;
    cursor: pointer;
}

.route-stop-v2 .route-cargo-title {
    color: #444b41 !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
    letter-spacing: -0.015em;
}

.route-stop-v2 .route-cargo-add {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px !important;

    border: 1px solid rgba(120, 150, 79, 0.28) !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.68) !important;
    color: #566b3d !important;

    box-shadow: none !important;

    font-size: 0.72rem !important;
    font-weight: 760 !important;
}

.route-stop-v2 .route-cargo-add:hover {
    border-color: rgba(120, 150, 79, 0.43) !important;
    background: #ffffff !important;
    transform: translateY(-1px);
}

.route-stop-v2 .route-cargo-add-plus {
    font-size: 1rem;
    font-weight: 550;
    line-height: 1;
}

.route-stop-v2 .route-cargo-item {
    margin: 0;
    padding: 13px 12px 11px;
}

.route-stop-v2 .route-cargo-item.has-separator {
    border-bottom: 1px solid rgba(67, 76, 61, 0.075);
}

.route-stop-v2 .route-cargo-remove {
    top: 5px !important;
    right: 7px !important;
    opacity: 0.34;
}

.route-stop-v2 .route-cargo-item:hover .route-cargo-remove {
    opacity: 0.7;
}

.route-stop-v2 .route-cargo-grid {
    margin-bottom: 9px;
}

.route-stop-v2 .route-custom-dimensions-panel {
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid rgba(120, 150, 79, 0.12);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(244, 247, 239, 0.80),
            rgba(252, 252, 249, 0.86)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.route-stop-v2 .route-custom-dimensions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.route-stop-v2 .route-custom-dimensions-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 8px;
    color: #7b8178;
    font-size: 0.64rem;
    font-weight: 720;
}

.route-stop-v2 .route-custom-dimensions-summary strong {
    color: #54693d;
    font-size: 0.76rem;
    font-weight: 900;
}

.route-stop-v2 .route-custom-dimensions-summary.is-invalid {
    color: #a33d45;
}

.route-stop-v2 .route-custom-dimensions-summary.is-invalid strong {
    color: #b52f3b;
}

.route-stop-v2 .route-cargo-control.is-invalid {
    border-color: rgba(201, 72, 82, 0.78) !important;
    background-color: rgba(255, 246, 247, 0.96) !important;
    box-shadow: 0 0 0 3px rgba(201, 72, 82, 0.09) !important;
}

.route-stop-v2 .route-cargo-fit-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(201, 72, 82, 0.23);
    border-radius: 11px;
    background: rgba(255, 244, 245, 0.88);
    color: #8f3039;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.45;
}

.route-stop-v2 .route-cargo-fit-alert-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(201, 72, 82, 0.13);
    color: #b4323e;
    font-size: 0.72rem;
    font-weight: 950;
}

.route-stop-v2 .route-cargo-fit-alert-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.route-stop-v2 .route-cargo-fit-alert-copy strong {
    color: #842a33;
    font-size: 0.68rem;
    font-weight: 900;
}

.route-stop-v2 .route-cargo-fit-alert-copy span {
    display: block;
}

.physics-cargo-fit-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 16px;
    padding: 12px 13px;
    border: 1px solid rgba(201, 72, 82, 0.24);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 243, 244, 0.96),
            rgba(255, 250, 250, 0.92)
        );
    color: #8e3139;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.physics-cargo-fit-alert-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(201, 72, 82, 0.12);
    color: #b7333f;
    font-size: 0.86rem;
    font-weight: 950;
}

.physics-cargo-fit-alert-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.physics-cargo-fit-alert-copy strong {
    color: #7f2831;
    font-size: 0.78rem;
    font-weight: 900;
}

.physics-cargo-fit-alert-copy span {
    color: #9a4950;
    font-size: 0.68rem;
    font-weight: 680;
    line-height: 1.45;
}

.route-stop-v2 .route-cargo-label {
    margin-bottom: 5px;
    color: #858a81 !important;
    font-size: 0.61rem !important;
    font-weight: 760;
    letter-spacing: 0.025em;
}

.route-stop-v2 .route-cargo-control {
    min-height: 40px !important;
    font-size: 0.78rem !important;
}

.route-stop-v2 .route-cargo-meta {
    min-height: 34px;
    margin-top: 3px;
    padding-top: 2px;
}

.route-stop-v2 .route-stackable {
    display: flex;
    align-items: center;
    gap: 6px;
}

.route-stop-v2 .route-stackable .form-check-input {
    margin-top: 0 !important;
    box-shadow: none !important;
}

.route-stop-v2 .route-stackable-label {
    color: #696f66 !important;
    font-size: 0.70rem !important;
    font-weight: 560;
}

.route-stop-v2 .route-cargo-ldm-pill {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 9px;

    border: 1px solid rgba(67, 76, 61, 0.095);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.74);
    color: #687067;

    font-size: 0.66rem;
    font-weight: 650;
}

.route-stop-v2 .route-cargo-ldm-pill strong {
    margin-left: 4px;
    color: #596b43;
    font-weight: 820;
}

.route-stop-v2 .route-cargo-summary {
    width: fit-content;
    max-width: calc(100% - 24px);
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 0 12px 12px auto;
    padding: 7px 10px;

    border: 1px solid rgba(120, 150, 79, 0.14);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(239, 244, 228, 0.88),
            rgba(249, 250, 245, 0.96)
        );

    color: #50584b;
}

.route-stop-v2 .route-cargo-summary.is-disabled {
    border-color: rgba(67, 76, 61, 0.07);
    background: rgba(246, 247, 243, 0.86);
    color: #969a92;
}

/* Point total replaces the duplicate LDM pill on the last cargo row. */
.route-stop-v2 .route-cargo-summary--inline {
    max-width: 100%;
    min-height: 29px;
    margin: 0 !important;
    padding: 5px 9px;
    border-radius: 10px;
    gap: 9px;
}

.route-stop-v2 .route-cargo-summary--inline .route-cargo-summary-divider {
    height: 15px;
}

.route-stop-v2 .route-cargo-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.route-stop-v2 .route-cargo-summary-label {
    color: currentColor;
    opacity: 0.78;
    font-size: 0.64rem;
    font-weight: 690;
}

.route-stop-v2 .route-cargo-summary-item strong {
    color: #53653f;
    font-size: 0.76rem;
    font-weight: 850;
}

.route-stop-v2 .route-cargo-summary.is-disabled strong {
    color: #92978f;
}

.route-stop-v2 .route-cargo-summary-divider {
    width: 1px;
    height: 18px;
    background: rgba(87, 99, 77, 0.13);
}

/* Do not let old selector-based cargo styling recreate the old inner card. */
.route-stop-v2 > div[style*="background: rgba(255, 255, 255, 0.45)"] {
    margin-top: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 767.98px */ {
    .route-stop-v2 {
        margin-left: 18px !important;
        padding: 18px 13px 14px !important;
        border-radius: 20px !important;
    }

    .route-stop-v2 > .route-stop-index {
        left: -18px !important;
        width: 32px !important;
        height: 32px !important;
        border-width: 4px !important;
    }

    .route-stop-v2::after {
        left: -18px !important;
    }

    .route-stop-v2 .route-cargo-grid {
        flex-wrap: wrap !important;
        padding-right: 0 !important;
    }

    .route-stop-v2 .route-cargo-grid > .col-4 {
        width: 100%;
        flex: 0 0 100%;
    }

    .route-stop-v2 .route-cargo-summary {
        max-width: calc(100% - 20px);
        margin-right: 10px;
        margin-left: 10px;
    }
}


/* =========================================================
   HEADER LANGUAGE SWITCHER
========================================================= */

.premium-language-switcher {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}

.premium-language-trigger {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0 !important;
    padding: 3px;
    line-height: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: opacity 0.16s ease;
}

.premium-language-trigger:hover,
.premium-language-trigger.is-active {
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.82;
    transform: none;
}

.premium-language-trigger:active {
    transform: none;
    opacity: 0.68;
}

.premium-language-trigger:focus-visible {
    outline: 2px solid rgba(120, 150, 79, 0.38);
    outline-offset: 3px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#premiumHeader .premium-language-trigger,
#premiumHeader.header-scrolled .premium-language-trigger {
    position: relative;
    top: 0;
    bottom: auto;
    transform: none !important;
    transform-origin: center;
}

.premium-language-trigger-flag {
    width: 20px !important;
    height: 13px !important;
    min-width: 20px !important;
    min-height: 13px !important;
    max-width: 20px !important;
    max-height: 13px !important;
    flex: 0 0 20px !important;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 13px;
    box-shadow: none;
    transform: translateZ(0) !important;
    transform-origin: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: strict;
    pointer-events: none;
}

.premium-language-panel {
    position: absolute;
    z-index: 5600;
    top: calc(100% + 12px);
    right: 0;
    width: 202px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 24px 60px rgba(36, 41, 31, 0.15),
        0 7px 20px rgba(36, 41, 31, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    animation: premiumMenuIn 0.20s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

.premium-language-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 17px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(43, 48, 39, 0.08);
    border-left: 1px solid rgba(43, 48, 39, 0.08);
    background: rgba(255, 255, 255, 0.98);
    transform: rotate(45deg);
}

.premium-language-option {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #444941;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.premium-language-option:hover {
    background: rgba(232, 239, 217, 0.58);
    color: #293224;
    transform: translateX(1px);
}

.premium-language-option.is-selected {
    background:
        linear-gradient(
            135deg,
            rgba(226, 235, 207, 0.88),
            rgba(244, 247, 237, 0.92));
    color: #40532d;
}

.premium-language-option-flag {
    width: 27px;
    height: 18px;
    flex: 0 0 27px;
    display: block;
    object-fit: cover;
    border-radius: 3px;
    box-shadow:
        0 1px 4px rgba(28, 31, 25, 0.17),
        0 0 0 1px rgba(28, 31, 25, 0.07);
}

.premium-language-option-name {
    flex: 1 1 auto;
    font-size: 0.77rem;
    font-weight: 760;
    letter-spacing: -0.01em;
}

.premium-language-option-check {
    width: 18px;
    color: #6d8848;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
}

/* =========================================================
   COUNTRY RATES — FIRST-USE TIP
========================================================= */

.country-rates-tip {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1450;

    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;

    width: min(390px, calc(100vw - 32px));
    padding: 16px;

    border: 1px solid rgba(101, 73, 210, 0.12);
    border-radius: 20px;

    background:
        radial-gradient(circle at 7% 8%, rgba(119, 91, 221, 0.10), transparent 28%),
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 24px 60px rgba(49, 42, 82, 0.16),
        0 4px 16px rgba(49, 42, 82, 0.07);

    animation: countryRatesTipIn 0.36s cubic-bezier(.2,.8,.2,1) both;
}

.country-rates-tip-icon {
    width: 56px;
    height: 56px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(101, 73, 210, 0.10);
    border-radius: 17px;

    color: #6549d2;
    background:
        linear-gradient(
            145deg,
            rgba(238, 233, 255, 0.96),
            rgba(250, 248, 255, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 20px rgba(83, 57, 174, 0.08);
}

.country-rates-tip-icon span {
    font-size: 1.16rem;
    font-weight: 900;
    line-height: 1;
}

.country-rates-tip-icon small {
    margin-top: 3px;
    color: #8071bc;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.country-rates-tip-content {
    min-width: 0;
}

.country-rates-tip-content h3 {
    margin: 1px 0 6px;

    color: #30332e;
    font-size: 0.91rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.018em;
}

.country-rates-tip-content p {
    margin: 0;

    color: #74786f;
    font-size: 0.72rem;
    font-weight: 620;
    line-height: 1.5;
}

.country-rates-tip-content p span {
    display: block;
    margin-top: 3px;
}

.country-rates-tip-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
}

.country-rates-tip-primary,
.country-rates-tip-later {
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.69rem;
    font-weight: 850;
}

.country-rates-tip-primary {
    padding: 7px 12px;

    border: 1px solid rgba(101, 73, 210, 0.12);
    color: #ffffff;
    background:
        linear-gradient(135deg, #7357d9, #6549d2);

    box-shadow:
        0 8px 18px rgba(101, 73, 210, 0.16);
}

.country-rates-tip-later {
    padding: 7px 9px;

    border: 1px solid transparent;
    color: #7b7e77;
    background: transparent;
}

.country-rates-tip-later:hover {
    color: #4d504a;
    background: rgba(82, 87, 78, 0.05);
}

/* Persistent active state for Avoid Countries. */
.avoid-countries-active-tip {
    border-color: rgba(184, 120, 22, 0.18);

    background:
        radial-gradient(circle at 7% 8%, rgba(214, 158, 54, 0.13), transparent 30%),
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 24px 60px rgba(94, 68, 22, 0.14),
        0 4px 16px rgba(94, 68, 22, 0.06);
}

.avoid-countries-active-tip-icon {
    border-color: rgba(184, 120, 22, 0.16);
    color: #a66b13;
    background:
        linear-gradient(
            145deg,
            rgba(255, 243, 211, 0.98),
            rgba(255, 251, 239, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 8px 20px rgba(146, 97, 19, 0.08);
}

.avoid-countries-active-tip-icon span {
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;
}

.avoid-countries-active-codes {
    color: #7b5518 !important;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.avoid-countries-active-tip-primary {
    border-color: rgba(166, 107, 19, 0.18);
    background: linear-gradient(135deg, #c58a2c, #a96b12);
    box-shadow: 0 8px 18px rgba(166, 107, 19, 0.17);
}

.avoid-countries-active-tip-primary:hover {
    background: linear-gradient(135deg, #b97d22, #985e0d);
}

.premium-menu-section-title--rates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.country-rates-status {
    flex: 0 0 auto;

    padding: 4px 8px;

    border: 1px solid rgba(107, 114, 128, 0.12);
    border-radius: 999px;

    color: #858984;
    background: rgba(245, 246, 243, 0.94);

    font-size: 0.57rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.country-rates-status.is-custom {
    border-color: rgba(101, 73, 210, 0.15);
    color: #6549d2;
    background: rgba(238, 233, 255, 0.88);
}

@keyframes countryRatesTipIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.975);
    }

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

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 560px */ {
    .country-rates-tip {
        right: 14px;
        bottom: 14px;
        width: calc(100vw - 28px);
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .country-rates-tip-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .country-rates-tip {
        animation: none !important;
    }
}

    .workspace-empty-card {
        width: calc(100% - 28px);
        margin: 2px auto 16px;
        padding: 25px;

        border: 1px solid rgba(52, 61, 47, 0.08);
        border-radius: 22px;

        background: rgba(255, 255, 255, 0.76);

        box-shadow:
            0 14px 34px rgba(45, 53, 40, 0.045);

        color: #3f473b;
    }

    .workspace-empty-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;

        margin-bottom: 20px;
    }

    .workspace-empty-icon {
        width: 44px;
        height: 44px;

        display: grid;
        place-items: center;
        flex: 0 0 44px;

        border-radius: 14px;

        color: #60724f;
        background: #edf3e5;

        font-size: 1.15rem;
        font-weight: 900;
    }

    .workspace-empty-title {
        margin: 0 0 5px;

        color: #343b31;

        font-size: 1.10rem;
        font-weight: 850;
    }

    .workspace-empty-description {
        margin: 0;

        color: #737a6f;

        font-size: 0.90rem;
        line-height: 1.58;
    }

    .workspace-empty-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 11px;

        margin-bottom: 19px;
    }

    .workspace-empty-stat {
        min-width: 0;
        padding: 14px 15px;

        border: 1px solid rgba(54, 63, 49, 0.08);
        border-radius: 15px;

        background: #fafbf8;
    }

    .workspace-empty-stat-label {
        display: block;

        margin-bottom: 5px;

        color: #858b80;

        font-size: 0.66rem;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .workspace-empty-stat-value {
        display: block;
        overflow: hidden;

        color: #3a4236;

        font-size: 0.93rem;
        font-weight: 850;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .workspace-empty-preview-title {
        margin: 0 0 10px;

        color: #747c70;

        font-size: 0.69rem;
        font-weight: 850;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .workspace-empty-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .workspace-empty-feature {
        display: flex;
        align-items: center;
        gap: 11px;

        min-width: 0;
        padding: 12px 13px;

        border-radius: 14px;

        color: #566050;
        background: rgba(237, 240, 232, 0.78);

        font-size: 0.82rem;
        font-weight: 760;
    }

    .workspace-empty-feature-icon {
        width: 28px;
        height: 28px;

        display: grid;
        place-items: center;
        flex: 0 0 28px;

        border-radius: 9px;

        color: #627451;
        background: #ffffff;

        box-shadow: 0 3px 10px rgba(47, 57, 42, 0.05);

        font-weight: 850;
    }

    .workspace-empty-footer {
        margin-top: 16px;
        padding-top: 14px;

        border-top: 1px solid rgba(54, 63, 49, 0.08);

        color: #737b70;

        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* =========================================================
       FIRST-RUN WORKSPACE CARDS
    ========================================================= */

    .workspace-guide-grid {
        width: calc(100% - 28px);
        margin: 0 auto 18px;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .workspace-guide-card {
        min-width: 0;
        min-height: 330px;
        padding: 20px;

        display: flex;
        flex-direction: column;

        border: 1px solid rgba(52, 61, 47, 0.08);
        border-radius: 20px;

        background: rgba(255, 255, 255, 0.78);

        box-shadow:
            0 12px 30px rgba(45, 53, 40, 0.04);
    }

    .workspace-guide-head {
        display: flex;
        align-items: flex-start;
        gap: 11px;

        margin-bottom: 15px;
        padding-bottom: 14px;

        border-bottom: 1px solid rgba(54, 63, 49, 0.07);
    }

    .workspace-guide-icon {
        width: 34px;
        height: 34px;

        display: grid;
        place-items: center;
        flex: 0 0 34px;

        border-radius: 11px;

        font-size: 0.92rem;
        font-weight: 900;
    }

    .workspace-guide-icon--green {
        color: #437854;
        background: #e9f5ec;
    }

    .workspace-guide-icon--amber {
        color: #b57918;
        background: #fff5df;
    }

    .workspace-guide-icon--violet {
        color: #6d5bd0;
        background: #f0edff;
    }

    .workspace-guide-title {
        margin: 1px 0 4px;

        color: #343b31;

        font-size: 0.98rem;
        font-weight: 850;
    }

    .workspace-guide-description {
        margin: 0;

        color: #7a8176;

        font-size: 0.76rem;
        line-height: 1.45;
    }

    .workspace-guide-steps,
    .workspace-tip-list,
    .workspace-setup-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .workspace-guide-step,
    .workspace-tip-row,
    .workspace-setup-row {
        min-width: 0;

        display: flex;
        align-items: center;
        gap: 11px;

        padding: 10px 0;

        border-bottom: 1px solid rgba(54, 63, 49, 0.06);
    }

    .workspace-guide-step:last-child,
    .workspace-tip-row:last-child,
    .workspace-setup-row:last-child {
        border-bottom: 0;
    }

    .workspace-guide-step-marker,
    .workspace-tip-icon {
        width: 28px;
        height: 28px;

        display: grid;
        place-items: center;
        flex: 0 0 28px;

        border-radius: 50%;

        font-size: 0.72rem;
        font-weight: 900;
    }

    .workspace-guide-step-marker {
        color: #61714f;
        background: #eef3e7;
    }

    .workspace-tip-icon {
        color: #7562dc;
        background: #f3f0ff;
    }

    .workspace-guide-step-copy,
    .workspace-tip-copy {
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .workspace-guide-step-copy strong,
    .workspace-tip-copy strong {
        color: #454d41;

        font-size: 0.78rem;
        font-weight: 820;
        line-height: 1.3;
    }

    .workspace-guide-step-copy span,
    .workspace-tip-copy span,
    .workspace-setup-label {
        color: #858c82;

        font-size: 0.69rem;
        line-height: 1.35;
    }

    .workspace-setup-row {
        justify-content: space-between;
        gap: 14px;
    }

    .workspace-setup-value {
        min-width: 0;
        max-width: 56%;

        overflow: hidden;

        color: #454d41;

        font-size: 0.76rem;
        font-weight: 850;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .workspace-guide-action {
        width: 100%;
        min-height: 42px;
        margin-top: auto;
        padding: 10px 14px;

        border: 1px solid rgba(91, 109, 77, 0.10);
        border-radius: 13px;

        color: #536548;
        background: rgba(239, 243, 234, 0.82);

        font-size: 0.76rem;
        font-weight: 850;

        transition:
            transform 160ms ease,
            background 160ms ease,
            border-color 160ms ease;
    }

    .workspace-guide-action:hover {
        border-color: rgba(91, 109, 77, 0.20);
        background: #eaf0e4;
        transform: translateY(-1px);
    }

    .workspace-guide-action:active {
        transform: translateY(0);
    }

    @media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1199px */ {
        .workspace-guide-grid {
            grid-template-columns: 1fr;
        }

        .workspace-guide-card {
            min-height: 0;
        }
    }


    @media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 760px */ {
        .workspace-empty-card {
            padding: 20px;
        }

        .workspace-empty-stats,
        .workspace-empty-features {
            grid-template-columns: 1fr;
        }
    }


/* =========================================================
   LOGICALC PREMIUM MENU SYSTEM — 2026
   Shared visual language for all dropdown panels.
========================================================= */

.premium-nav > .position-relative,
.route-builder-toolbar-actions > .position-relative {
    isolation: isolate;
}

.premium-menu-trigger {
    position: relative;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #3f443d;
    font-size: 0.76rem;
    font-weight: 790;
    white-space: nowrap;
    box-shadow: none;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.premium-menu-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(101, 73, 210, 0.13);
    background: rgba(248, 246, 255, 0.82);
    color: #4e38b8;
}

.premium-menu-trigger.is-active {
    border-color: rgba(101, 73, 210, 0.17);
    background:
        linear-gradient(145deg, rgba(246, 242, 255, 0.98), rgba(255, 255, 255, 0.94));
    color: #6549d2;
    box-shadow:
        0 9px 23px rgba(86, 58, 180, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.premium-menu-trigger--compact {
    min-height: 36px;
    padding: 7px 12px;
    border-color: rgba(78, 89, 69, 0.10);
    background: rgba(255, 255, 255, 0.54);
    color: #4f574b;
}

.premium-menu-chevron {
    color: #858987;
    font-size: 0.58rem;
    line-height: 1;
    transform: translateY(1px);
    transition: transform 0.2s ease, color 0.2s ease;
}

.premium-menu-trigger.is-active .premium-menu-chevron {
    color: #6549d2;
    transform: rotate(180deg) translateY(-1px);
}

.premium-menu-panel {
    position: absolute;
    z-index: 6000;
    top: calc(100% + 14px);
    right: 0;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: min(78vh, 760px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(101, 73, 210, 0.13);
    border-radius: 23px;
    background:
        radial-gradient(circle at 8% 0%, rgba(118, 87, 232, 0.065), transparent 15rem),
        rgba(255, 255, 255, 0.96);
    box-shadow:
        0 30px 80px rgba(41, 35, 69, 0.16),
        0 10px 28px rgba(42, 47, 37, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    animation: premiumMenuIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: top right;
    scrollbar-width: thin;
    scrollbar-color: rgba(101, 73, 210, 0.22) transparent;
}

.premium-menu-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 28px;
    width: 14px;
    height: 14px;
    border-left: 1px solid rgba(101, 73, 210, 0.12);
    border-top: 1px solid rgba(101, 73, 210, 0.12);
    background: rgba(255, 255, 255, 0.98);
    transform: rotate(45deg);
}

.premium-menu-panel--archive { width: 430px; }
.premium-menu-panel--tariffs { width: 650px; }
.premium-menu-panel--economics { width: 920px; }
.premium-menu-panel--avoid { width: 430px; }
.premium-menu-panel--settings { width: 370px; }
.premium-menu-panel--actions { width: 470px; top: calc(100% + 12px); }


/* Actions & Fleet Profile — always above route cards and map */
.premium-route-builder.route-actions-on-top {
    position: relative;
    z-index: 4900;
    overflow: visible !important;
}

.premium-route-builder.route-actions-on-top > .card-body {
    overflow: visible !important;
}

.premium-route-builder.route-actions-on-top .route-builder-toolbar {
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

.premium-route-builder.route-actions-on-top
.route-builder-toolbar-actions > .position-relative {
    z-index: 3;
    isolation: auto !important;
}

.premium-route-builder.route-actions-on-top
.premium-menu-panel--actions {
    z-index: 4 !important;
}

.premium-menu-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 11px;
    border-bottom: 1px solid rgba(50, 55, 48, 0.08);
    color: #737870;
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.premium-menu-panel .glass-sub-panel {
    border: 1px solid rgba(54, 59, 51, 0.075) !important;
    border-radius: 15px !important;
    background:
        linear-gradient(145deg, rgba(251, 250, 255, 0.95), rgba(248, 249, 246, 0.90)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 7px 18px rgba(45, 49, 41, 0.035) !important;
}

.premium-menu-panel input.form-control,
.premium-menu-panel select.form-select,
.premium-menu-panel .input-group-text {
    min-height: 38px;
    border-color: rgba(54, 59, 51, 0.09) !important;
    background: rgba(255, 255, 255, 0.88) !important;
}

.premium-menu-panel input.form-control:focus,
.premium-menu-panel select.form-select:focus {
    border-color: rgba(101, 73, 210, 0.32) !important;
    box-shadow: 0 0 0 4px rgba(101, 73, 210, 0.08) !important;
}

.premium-menu-panel .form-check-input:checked {
    border-color: #6549d2 !important;
    background-color: #6549d2 !important;
}

.premium-menu-scroll {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(101, 73, 210, 0.22) transparent;
}

.premium-menu-empty-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 1px solid rgba(101, 73, 210, 0.10);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(238, 233, 255, 0.92), rgba(255, 255, 255, 0.94));
    color: #6549d2;
    box-shadow: 0 12px 28px rgba(83, 57, 174, 0.09);
}

.premium-menu-empty-icon svg {
    width: 24px;
    height: 24px;
}

.premium-archive-list { gap: 9px !important; }

.premium-archive-card {
    padding: 12px !important;
    border-color: rgba(54, 59, 51, 0.075) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.premium-archive-card:hover {
    transform: translateY(-1px);
    border-color: rgba(101, 73, 210, 0.15) !important;
    box-shadow: 0 10px 25px rgba(45, 39, 75, 0.06) !important;
}

.premium-archive-card .badge {
    border-color: rgba(54, 59, 51, 0.08) !important;
    background: rgba(247, 248, 245, 0.92) !important;
}

.premium-archive-card .btn-outline-success {
    border-color: rgba(21, 151, 99, 0.22) !important;
    border-radius: 8px;
    color: #13784f !important;
}

/* Tariffs */
.premium-tariff-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.premium-tariff-summary-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(101, 73, 210, 0.07);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(245, 241, 255, 0.88), rgba(252, 252, 250, 0.95));
}

.premium-tariff-summary-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(101, 73, 210, 0.095);
    color: #6549d2;
}

.premium-tariff-summary-icon svg { width: 25px; height: 25px; }

.premium-tariff-summary-label {
    display: block;
    margin-bottom: 5px;
    color: #676c65;
    font-size: 0.71rem;
    font-weight: 760;
}

.premium-tariff-country-list {
    border-top: 1px solid rgba(54, 59, 51, 0.075);
}

.premium-tariff-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.9fr) 150px;
    align-items: center;
    gap: 15px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(54, 59, 51, 0.07);
}

.premium-country-label {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #343934;
    font-size: 0.79rem;
    font-weight: 820;
}

.premium-country-label img {
    width: 27px !important;
    height: 19px;
    object-fit: cover;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.premium-rate-range {
    width: 100%;
    accent-color: #6549d2;
    cursor: pointer;
}

.premium-tariff-rate-input { width: 150px; }

.premium-menu-info-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid rgba(101, 73, 210, 0.07);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(239, 234, 255, 0.88), rgba(250, 248, 255, 0.94));
    color: #4b3b8f;
    font-size: 0.66rem;
    font-weight: 720;
    line-height: 1.4;
}

.premium-menu-info-note svg {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    color: #6549d2;
}

/* Economics / Avoid / Settings */
.premium-menu-panel--economics .glass-sub-panel {
    padding: 12px !important;
    margin-bottom: 10px !important;
}

.premium-menu-panel--economics hr {
    opacity: 0.55;
}

.premium-menu-panel--avoid .form-check.form-switch {
    min-height: 52px;
    padding: 10px 5px !important;
    border-color: rgba(54, 59, 51, 0.07) !important;
}

.premium-menu-panel--avoid .form-check.form-switch:hover {
    background: rgba(246, 243, 255, 0.66);
}

.premium-menu-panel--settings > .mb-3,
.premium-menu-panel--settings > .mb-2,
.premium-menu-panel--settings > .mb-1 {
    padding: 12px;
    border: 1px solid rgba(54, 59, 51, 0.07);
    border-radius: 14px;
    background: rgba(249, 249, 247, 0.88);
}

.premium-menu-panel--actions {
    width: 520px;
    max-height: calc(100vh - 120px);
    padding: 17px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(111, 79, 219, 0.095),
            transparent 15rem),
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.985),
            rgba(249, 248, 255, 0.97));
    scrollbar-width: thin;
    scrollbar-color:
        rgba(101, 73, 210, 0.22)
        transparent;
}

.premium-actions-hero {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px;
    padding: 4px 3px 14px;
    border-bottom: 1px solid rgba(54, 59, 51, 0.075);
}

.premium-actions-hero-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 73, 210, 0.09);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(235, 229, 255, 0.96),
            rgba(250, 248, 255, 0.96));
    color: #6549d2;
    box-shadow:
        0 12px 26px rgba(83, 57, 174, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.premium-actions-hero-icon svg {
    width: 27px;
    height: 27px;
}

.premium-actions-hero-copy {
    min-width: 0;
}

.premium-actions-hero-kicker {
    display: block;
    margin-bottom: 4px;
    color: #858981;
    font-size: 0.60rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.premium-actions-hero-title {
    display: block;
    color: #30342f;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.premium-actions-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #159763;
    box-shadow:
        0 0 0 6px rgba(21, 151, 99, 0.11);
}

.premium-actions-card {
    margin-bottom: 10px;
    padding: 13px;
    border: 1px solid rgba(54, 59, 51, 0.075);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(253, 253, 251, 0.96),
            rgba(248, 249, 246, 0.91));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 8px 22px rgba(45, 49, 41, 0.035);
}

.premium-actions-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.premium-actions-section-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(101, 73, 210, 0.085);
    color: #6549d2;
}

.premium-actions-section-icon svg {
    width: 19px;
    height: 19px;
}

.premium-actions-section-title {
    margin: 0 !important;
    color: #3d423c !important;
    font-size: 0.73rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2;
    text-transform: none !important;
}

.premium-actions-section-caption {
    display: block;
    margin-top: 3px;
    color: #858981;
    font-size: 0.62rem;
    font-weight: 680;
    line-height: 1.25;
}

.premium-actions-select,
.premium-actions-input {
    min-height: 46px !important;
    border: 1px solid rgba(89, 100, 79, 0.15) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #393e38 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 5px 12px rgba(45, 49, 41, 0.035) !important;
}

.premium-actions-select {
    padding-left: 13px !important;
}

.premium-actions-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.premium-actions-metric {
    min-width: 0;
    padding: 9px 7px;
    border: 1px solid rgba(54, 59, 51, 0.06);
    border-radius: 11px;
    background: rgba(247, 248, 245, 0.86);
    text-align: center;
}

.premium-actions-metric-value {
    display: block;
    color: #30352f;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.premium-actions-metric-label {
    display: block;
    margin-top: 3px;
    color: #8a8e87;
    font-size: 0.54rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.premium-actions-input-wrap {
    position: relative;
}

.premium-actions-input-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    width: 19px;
    height: 19px;
    color: #75816b;
    transform: translateY(-50%);
    pointer-events: none;
}

.premium-actions-input-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.premium-actions-input {
    padding-left: 42px !important;
}

.premium-actions-save-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.premium-actions-save-input {
    min-width: 0;
    min-height: 44px;
    border: 1px solid rgba(54, 59, 51, 0.09) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
}

.premium-actions-save-input:focus {
    border-color: rgba(101, 73, 210, 0.30) !important;
    box-shadow:
        0 0 0 4px rgba(101, 73, 210, 0.075) !important;
}

.premium-actions-save-button {
    min-width: 108px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid rgba(101, 73, 210, 0.11);
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #7255dd,
            #5a3ec4);
    color: #ffffff;
    font-size: 0.70rem;
    font-weight: 900;
    box-shadow:
        0 10px 22px rgba(86, 59, 184, 0.18);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.premium-actions-save-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 13px 26px rgba(86, 59, 184, 0.23);
}

.premium-actions-save-button:disabled {
    cursor: default;
    opacity: 0.72;
}

.premium-actions-save-button.is-saved {
    border-color: rgba(21, 151, 99, 0.16);
    background:
        linear-gradient(
            145deg,
            #20a973,
            #138154);
}

.premium-actions-save-button svg {
    width: 18px;
    height: 18px;
}

.premium-actions-footer {
    display: flex;
    gap: 9px;
    padding-top: 3px;
}

.premium-actions-footer-button {
    flex: 1 1 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 12px;
    font-size: 0.70rem;
    font-weight: 900;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.premium-actions-footer-button:hover {
    transform: translateY(-1px);
}

.premium-actions-footer-button svg {
    width: 18px;
    height: 18px;
}

.premium-actions-footer-button--reverse {
    border: 1px solid rgba(101, 73, 210, 0.11);
    background: rgba(241, 237, 255, 0.72);
    color: #5940bd;
}

.premium-actions-footer-button--reverse:hover {
    border-color: rgba(101, 73, 210, 0.20);
    background: rgba(236, 230, 255, 0.92);
}

.premium-actions-footer-button--clear {
    border: 1px solid rgba(197, 64, 79, 0.14);
    background: rgba(255, 245, 246, 0.88);
    color: #b12f40;
}

.premium-actions-footer-button--clear:hover {
    border-color: rgba(197, 64, 79, 0.24);
    background: rgba(255, 239, 241, 0.96);
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 720px */ {
    .premium-menu-panel--actions {
        width: auto;
        max-height: calc(100vh - 96px);
    }

    .premium-actions-hero {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .premium-actions-hero-icon {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 480px */ {
    .premium-actions-metrics {
        grid-template-columns: 1fr;
    }

    .premium-actions-save-row {
        grid-template-columns: 1fr;
    }

    .premium-actions-save-button {
        width: 100%;
    }

    .premium-actions-footer {
        flex-direction: column;
    }
}


@keyframes premiumMenuIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 1120px */ {
    .premium-menu-panel--tariffs { width: 580px; }
    .premium-tariff-row {
        grid-template-columns: minmax(135px, 1fr) 120px 145px;
    }
}

@media (max-width: 0px) /* Desktop layout lock; previous breakpoint: 720px */ {
    .premium-menu-panel {
        position: fixed;
        top: 78px;
        left: 12px;
        right: 12px;
        width: auto !important;
        max-width: none;
        max-height: calc(100vh - 94px);
        transform-origin: top center;
    }

    .premium-menu-panel::before { display: none; }

    .premium-tariff-summary-grid { grid-template-columns: 1fr; }

    .premium-tariff-row {
        grid-template-columns: minmax(0, 1fr) 145px;
    }

    .premium-rate-range {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
/* Actions & Fleet Profile — slight desktop shift right */
@media (min-width: 721px) {
    .premium-menu-panel--actions {
        right: -64px;
    }

    .premium-menu-panel--actions::before {
        right: 72px;
    }
}


/* =========================================================
   DESKTOP LAYOUT LOCK — PHONE / NARROW WINDOW
   The workspace always keeps the desktop geometry.
   App.razor viewport: width=1280, zoom remains enabled.
========================================================= */

html,
body {
    min-width: 1280px !important;
}

/*
   Horizontal scrolling belongs to the root viewport, not to body.
   Safari treats body with overflow-x:auto as a separate scroll container,
   which breaks the sticky/morphing premium header.
*/
html {
    overflow-x: auto !important;
}

body {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

#main-ui.premium-app {
    width: 100% !important;
    min-width: 1280px !important;
    max-width: 1740px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 28px 8px !important;
}

/*
   Header uses 100vw in the normal desktop animation.
   On a narrow desktop window, keep it as wide as the locked workspace
   instead of squeezing it to the visible browser width.
*/
.premium-header.apple-header,
.premium-header.apple-header.header-scrolled {
    width: max(100vw, 1280px) !important;
    margin-right: min(0px, calc(50% - 50vw)) !important;
    margin-left: min(0px, calc(50% - 50vw)) !important;
    flex-wrap: nowrap !important;
}

.premium-nav {
    width: auto !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

/* Keep the two desktop workspace columns at every browser width. */
.premium-workspace {
    flex-wrap: nowrap !important;
}

.premium-route-column {
    width: 41% !important;
    max-width: 41% !important;
    flex: 0 0 41% !important;
}

.premium-command-column {
    width: 59% !important;
    max-width: 59% !important;
    flex: 0 0 59% !important;
    position: static !important;
}

.premium-route-builder > .card-body {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 20px !important;
}

.premium-command-column .premium-command-card > .card-body {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

/* Preserve the full desktop map size. */
.premium-command-column #map {
    height: 600px !important;
    min-height: 600px !important;
}

/*
   Dropdowns remain desktop-sized.
   Tariffs opens to the right of its trigger so the 650px panel
   cannot disappear beyond the left edge of the page.
*/
.premium-menu-panel {
    position: absolute !important;
    max-width: none !important;
}

.premium-menu-panel--tariffs {
    width: 650px !important;
    right: auto !important;
    left: 0 !important;
    transform-origin: top left !important;
}

.premium-menu-panel--tariffs::before {
    right: auto !important;
    left: 28px !important;
}

.premium-menu-panel--actions {
    width: 470px !important;
    right: -64px !important;
    left: auto !important;
    top: calc(100% + 12px) !important;
}

.premium-menu-panel--actions::before {
    right: 72px !important;
    left: auto !important;
}


/* =========================================================
   GEMINI ADVICE + SYSTEM TELEMETRY — PREMIUM REDESIGN
   Keeps the original gimi.png project icon.
========================================================= */

/* Gemini insight card */
.logiccalc-ai-insight {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 8px auto 18px !important;
    overflow: hidden;

    border: 1px solid rgba(118, 87, 232, 0.16) !important;
    border-radius: 20px !important;

    background:
        radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.075), transparent 16rem),
        linear-gradient(135deg, rgba(249, 247, 255, 0.98), rgba(255, 255, 255, 0.92)) !important;

    box-shadow:
        0 13px 34px rgba(82, 62, 164, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;

    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.logiccalc-ai-insight:hover {
    transform: translateY(-1px);
    border-color: rgba(118, 87, 232, 0.25) !important;
    box-shadow:
        0 18px 42px rgba(82, 62, 164, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.logiccalc-ai-insight.is-expanded {
    border-color: rgba(118, 87, 232, 0.24) !important;
}

.logiccalc-ai-insight-trigger {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 15px;

    min-height: 78px;
    padding: 14px 18px;

    cursor: pointer;
    user-select: none;
}

.logiccalc-ai-insight-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(130, 92, 226, 0.10);
    border-radius: 15px;

    background:
        linear-gradient(145deg, rgba(236, 227, 255, 0.94), rgba(251, 248, 255, 0.96));

    box-shadow:
        0 8px 20px rgba(103, 75, 190, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.logiccalc-ai-insight-logo {
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.logiccalc-ai-insight-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.logiccalc-ai-insight-title {
    width: max-content;
    max-width: 100%;

    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: -0.25px;
    line-height: 1.15;
}

.logiccalc-ai-insight-subtitle {
    overflow: hidden;
    color: #8b8d98;
    font-size: 0.72rem;
    font-weight: 620;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-ai-insight-chevron {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;
    justify-self: end;

    border-radius: 999px;
    color: #7657e8;

    transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.18s ease;
}

.logiccalc-ai-insight-trigger:hover .logiccalc-ai-insight-chevron {
    background: rgba(118, 87, 232, 0.08);
}

.logiccalc-ai-insight-chevron.is-open {
    transform: rotate(90deg);
}

.logiccalc-ai-insight-chevron svg {
    width: 18px;
    height: 18px;
}

.logiccalc-ai-insight-loader {
    width: 18px;
    height: 18px;
    justify-self: end;

    border: 2px solid rgba(118, 87, 232, 0.18);
    border-top-color: #7657e8;
    border-radius: 50%;

    animation: logiccalcAiInsightSpin 0.75s linear infinite;
}

.logiccalc-ai-insight-response {
    margin: 0 18px 17px 81px;
    padding: 16px 18px 4px;

    border-top: 1px solid rgba(118, 87, 232, 0.12);

    color: #565a52;
    font-size: 0.76rem;
    line-height: 1.55;
}

@keyframes logiccalcAiInsightSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Telemetry title and actions */


.logiccalc-telemetry-header {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;

    margin: 0 auto 14px !important;
    padding: 7px 18px 14px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(43, 48, 39, 0.085) !important;
}

.logiccalc-telemetry-heading {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.logiccalc-telemetry-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(52, 125, 85, 0.10);
    border-radius: 14px;

    background:
        linear-gradient(145deg, rgba(232, 247, 237, 0.96), rgba(247, 252, 248, 0.96));

    color: #347d55;

    box-shadow:
        0 8px 19px rgba(49, 111, 77, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.logiccalc-telemetry-icon svg {
    width: 23px;
    height: 23px;
}

.logiccalc-telemetry-title-group {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.logiccalc-telemetry-header h5 {
    margin: 0 !important;

    color: #2e332d !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.105em !important;
    line-height: 1.15;
    text-transform: uppercase;
}

.logiccalc-telemetry-subtitle {
    overflow: hidden;

    color: #8a8e86;
    font-size: 0.66rem;
    font-weight: 620;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-telemetry-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.logiccalc-telemetry-action {
    min-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;

    padding: 8px 15px !important;

    border: 1px solid rgba(43, 48, 39, 0.10) !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    color: #3c463d !important;

    box-shadow:
        0 7px 18px rgba(36, 41, 31, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    font-size: 0.73rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

    transition:
        transform 0.16s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.logiccalc-telemetry-action::after {
    display: none !important;
}

.logiccalc-telemetry-action svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #347d55;
}

.logiccalc-telemetry-action:hover {
    transform: translateY(-1px);
    border-color: rgba(52, 125, 85, 0.20) !important;
    background: rgba(248, 250, 246, 0.98) !important;

    box-shadow:
        0 11px 24px rgba(36, 41, 31, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.logiccalc-telemetry-action:active {
    transform: scale(0.97) !important;
}

/* Results become one coherent telemetry surface. */
.logiccalc-telemetry-surface {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;

    margin: 0 auto 16px !important;
    padding: 14px !important;

    border: 1px solid rgba(118, 87, 232, 0.13);
    border-radius: 22px;

    background:
        radial-gradient(circle at 100% 0%, rgba(118, 87, 232, 0.035), transparent 18rem),
        rgba(255, 255, 255, 0.76);

    box-shadow:
        0 15px 38px rgba(44, 48, 41, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.logiccalc-telemetry-surface > :last-child {
    margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-ai-insight,
    .logiccalc-ai-insight-chevron,
    .logiccalc-telemetry-action {
        transition: none !important;
    }

    .logiccalc-ai-insight-loader {
        animation: none !important;
    }
}


.logiccalc-telemetry-action:hover,
.logiccalc-telemetry-action:focus,
.logiccalc-telemetry-action:focus-visible {
    color: #20231f !important;
}


/* =========================================================
   PDF ACTION — SAFARI / BOOTSTRAP HOVER COLOR FIX
   The dedicated class keeps the label color stable in Safari.
========================================================= */

#main-ui .logiccalc-telemetry-action--pdf {
    --bs-btn-color: #3c463d;
    --bs-btn-hover-color: #20231f;
    --bs-btn-active-color: #20231f;
    --bs-btn-disabled-color: #3c463d;

    color: #3c463d !important;
    -webkit-text-fill-color: #3c463d !important;
}

#main-ui .logiccalc-telemetry-action--pdf:hover,
#main-ui .logiccalc-telemetry-action--pdf:focus,
#main-ui .logiccalc-telemetry-action--pdf:focus-visible,
#main-ui .logiccalc-telemetry-action--pdf:active {
    color: #20231f !important;
    -webkit-text-fill-color: #20231f !important;
}

#main-ui .logiccalc-telemetry-action--pdf > span,
#main-ui .logiccalc-telemetry-action--pdf:hover > span,
#main-ui .logiccalc-telemetry-action--pdf:focus > span,
#main-ui .logiccalc-telemetry-action--pdf:focus-visible > span,
#main-ui .logiccalc-telemetry-action--pdf:active > span {
    color: #20231f !important;
    -webkit-text-fill-color: #20231f !important;
    opacity: 1 !important;
}

#main-ui .logiccalc-telemetry-action--pdf > svg,
#main-ui .logiccalc-telemetry-action--pdf:hover > svg,
#main-ui .logiccalc-telemetry-action--pdf:focus > svg,
#main-ui .logiccalc-telemetry-action--pdf:focus-visible > svg,
#main-ui .logiccalc-telemetry-action--pdf:active > svg {
    color: #347d55 !important;
    stroke: currentColor;
    opacity: 1 !important;
}


/* =========================================================
   PREMIUM HEADER — STICKY SCROLL SAFETY
   Keeps the header attached to the viewport while the locked
   desktop layout scrolls horizontally on narrow screens.
========================================================= */

#main-ui.premium-app {
    overflow: visible !important;
}

#premiumHeader.premium-header.apple-header,
#premiumHeader.premium-header.apple-header.header-scrolled {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
}
/* =========================================================
   GEMINI ADVICE — LONG TEXT WRAP FIX
   Prevents AI response lines from escaping the card.
========================================================= */

.logiccalc-ai-insight-response {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.logiccalc-ai-insight-response p,
.logiccalc-ai-insight-response div,
.logiccalc-ai-insight-response span,
.logiccalc-ai-insight-response li {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* =========================================================
   GEMINI ADVICE — FINAL WIDTH + WRAP FIX
   app.css defines .ai-response-content { width: 100%; }.
   Combined with the premium response's left/right margins,
   that makes the response box wider than its parent.
========================================================= */

.logiccalc-ai-insight-response {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.logiccalc-ai-insight-response ul,
.logiccalc-ai-insight-response ol {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 0;
}

.logiccalc-ai-insight-response p,
.logiccalc-ai-insight-response div,
.logiccalc-ai-insight-response span,
.logiccalc-ai-insight-response li {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* =========================================================
   ECONOMY 2.0 — TRIP ECONOMICS + TRUCK OPERATING COST
   ========================================================= */
.premium-menu-panel--economics {
    width: 1020px;
    max-width: calc(100vw - 32px);
    max-height: min(84vh, 900px);
    padding: 20px;
}

.premium-economics-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 18px;
    align-items: start;
}

.premium-economics-column {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(54, 59, 51, 0.075);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(249, 249, 247, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 28px rgba(45, 49, 41, 0.035);
}

.premium-operating-cost-column {
    border-color: rgba(101, 73, 210, 0.11);
    background:
        radial-gradient(circle at 96% 0%, rgba(105, 73, 216, 0.075), transparent 16rem),
        linear-gradient(145deg, rgba(253, 252, 255, 0.97), rgba(248, 247, 255, 0.91));
}

.premium-economics-column-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(54, 59, 51, 0.075);
}

.premium-economics-column-head h6 {
    margin: 2px 0 0;
    color: #343934;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.premium-economics-kicker {
    display: block;
    color: #7b8178;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.premium-economics-mode-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(28, 143, 94, 0.13);
    border-radius: 999px;
    background: rgba(28, 143, 94, 0.075);
    color: #197650;
    font-size: 0.59rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.premium-economics-mode-badge.is-analysis {
    border-color: rgba(101, 73, 210, 0.14);
    background: rgba(101, 73, 210, 0.08);
    color: #6549d2;
}

.premium-economics-order-terms {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(54, 59, 51, 0.075);
}

.premium-operating-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(101, 73, 210, 0.10);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(244, 241, 255, 0.90), rgba(255, 255, 255, 0.92));
}

.premium-operating-profile > div,
.premium-operating-profile-consumption {
    min-width: 0;
}

.premium-operating-profile span {
    display: block;
    margin-bottom: 2px;
    color: #7a7f77;
    font-size: 0.70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.premium-operating-profile strong {
    display: block;
    color: #3d365d;
    font-size: 0.84rem;
    font-weight: 900;
}

.premium-operating-profile-consumption {
    text-align: right;
}

.premium-operating-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 11px;
    border: 1px solid rgba(101, 73, 210, 0.08);
    border-radius: 12px;
    background: rgba(245, 242, 255, 0.72);
    color: #625878;
    font-size: 0.67rem;
    font-weight: 670;
    line-height: 1.42;
}

.premium-operating-note > span:first-child {
    flex: 0 0 auto;
    color: #6549d2;
    font-size: 0.76rem;
}

.premium-operating-section {
    margin-top: 11px;
    padding: 12px;
    border: 1px solid rgba(54, 59, 51, 0.065);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
}

.premium-operating-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.premium-operating-section-title > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(101, 73, 210, 0.085);
    color: #6549d2;
    font-size: 0.56rem;
    font-weight: 950;
}

.premium-operating-section-title > strong {
    color: #4a4f48;
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.premium-operating-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.premium-operating-field {
    display: block;
    min-width: 0;
    margin: 0;
}

.premium-operating-field--wide {
    grid-column: 1 / -1;
}

.premium-operating-field > span {
    display: block;
    margin: 0 0 5px 2px;
    color: #6d726b;
    font-size: 0.68rem;
    font-weight: 800;
}

.premium-menu-panel--economics input.form-control,
.premium-menu-panel--economics select.form-select,
.premium-menu-panel--economics .input-group-text {
    font-size: 0.82rem;
}

.premium-operating-field .input-group-text {
    padding-left: 8px;
    padding-right: 8px;
    color: #7b8079;
    font-size: 0.66rem;
    font-weight: 750;
    white-space: nowrap;
}

.premium-operating-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(247, 245, 255, 0.82);
}

.premium-operating-toggle-row strong,
.premium-operating-toggle-row small {
    display: block;
}

.premium-operating-toggle-row strong {
    color: #514a69;
    font-size: 0.70rem;
    font-weight: 870;
}

.premium-operating-toggle-row small {
    margin-top: 2px;
    color: #86828f;
    font-size: 0.62rem;
    font-weight: 650;
}

.premium-operating-summary {
    position: relative;
    overflow: hidden;
    margin-top: 13px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 17px;
    background:
        radial-gradient(circle at 90% 5%, rgba(190, 160, 255, 0.27), transparent 13rem),
        linear-gradient(145deg, #312061 0%, #472f86 52%, #2c1c57 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(52, 30, 112, 0.18);
}

.premium-operating-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.premium-operating-summary-head span,
.premium-operating-summary-head strong {
    display: block;
}

.premium-operating-summary-head > div > span {
    color: rgba(255, 255, 255, 0.63);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.premium-operating-summary-head > div > strong {
    margin-top: 2px;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 900;
}

.premium-operating-summary-head > span {
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.57rem;
    font-weight: 800;
}

.premium-operating-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.premium-operating-summary-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.075);
}

.premium-operating-summary-card.is-highlight {
    border-color: rgba(218, 204, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
}

.premium-operating-summary-card span,
.premium-operating-summary-card strong,
.premium-operating-summary-card small {
    display: block;
}

.premium-operating-summary-card span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.60rem;
    font-weight: 780;
}

.premium-operating-summary-card strong {
    margin-top: 3px;
    color: #fff;
    font-size: 1.00rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.premium-operating-summary-card small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.57rem;
    font-weight: 650;
}

.premium-operating-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.premium-operating-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.60rem;
}

.premium-operating-breakdown strong {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 850;
}

@media (max-width: 980px) {
    .premium-menu-panel--economics {
        width: min(720px, calc(100vw - 24px));
    }

    .premium-economics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .premium-menu-panel--economics {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        right: -8px;
        padding: 12px;
    }

    .premium-economics-column {
        padding: 11px;
    }

    .premium-operating-fields-grid,
    .premium-operating-summary-grid,
    .premium-operating-breakdown {
        grid-template-columns: 1fr;
    }

    .premium-operating-field--wide {
        grid-column: auto;
    }

    .premium-operating-profile {
        grid-template-columns: 1fr;
    }

    .premium-operating-profile-consumption {
        text-align: left;
    }
}



/* =========================================================
   ECONOMY 2.0 — BIG MASTER SWITCH
   Only the Financial Model switch is enlarged.
   ========================================================= */
.premium-menu-panel--economics .economy-master-switch {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    height: 1.75rem !important;
    margin-top: 0 !important;
    cursor: pointer;
    border-radius: 999px !important;
    background-size: 1.35rem 1.35rem !important;
    background-position: left 0.18rem center !important;
}

.premium-menu-panel--economics .economy-master-switch:checked {
    background-position: right 0.18rem center !important;
}

.premium-menu-panel--economics .economy-master-switch:focus {
    box-shadow: 0 0 0 4px rgba(101, 73, 210, 0.10) !important;
}


/* =========================================================
   QUOTE MODE v1 — ENTRY + MODAL SHELL
   Step 1: entry point and visual workspace only.
   Existing route/copy/PDF logic remains untouched.
   ========================================================= */

.logiccalc-quote-entry {
    border-color: rgba(91, 121, 51, 0.18) !important;
    background:
        linear-gradient(135deg, rgba(239, 245, 229, 0.98), rgba(255, 255, 255, 0.96)) !important;
    color: #34412f !important;
    box-shadow:
        0 8px 20px rgba(73, 96, 48, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    animation: logiccalcQuoteEntryIn 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logiccalc-quote-entry svg {
    color: #5f7e38 !important;
}

.logiccalc-quote-entry:hover {
    border-color: rgba(91, 121, 51, 0.30) !important;
    background:
        linear-gradient(135deg, rgba(233, 241, 220, 1), rgba(255, 255, 255, 0.98)) !important;
    box-shadow:
        0 12px 26px rgba(73, 96, 48, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

@keyframes logiccalcQuoteEntryIn {
    from {
        opacity: 0;
        transform: translateX(-12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.quote-mode-layer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(29, 34, 28, 0.48);
    animation: quoteModeLayerIn 0.22s ease both;
}

.quote-mode-dialog {
    width: min(1180px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 28px;
    background: #f7f7f3;
    box-shadow:
        0 42px 110px rgba(24, 29, 23, 0.28),
        0 12px 34px rgba(24, 29, 23, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    animation: quoteModeDialogIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quote-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(43, 48, 39, 0.085);
    background: rgba(255, 255, 255, 0.92);
}

.quote-mode-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.quote-mode-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(95, 126, 56, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, #eef4e4, #ffffff);
    color: #5f7e38;
    box-shadow: 0 9px 22px rgba(73, 96, 48, 0.08);
}

.quote-mode-icon svg {
    width: 23px;
    height: 23px;
}

.quote-mode-kicker,
.quote-mode-section-kicker {
    display: block;
    color: #74835f;
    font-size: 0.60rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.quote-mode-title {
    margin: 4px 0 3px;
    color: #252a23;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.quote-mode-subtitle {
    margin: 0;
    color: #7b8177;
    font-size: 0.73rem;
    font-weight: 620;
}

.quote-mode-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quote-mode-version,
.quote-mode-step-badge,
.quote-mode-preview-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid rgba(95, 126, 56, 0.12);
    border-radius: 999px;
    background: #f0f4e9;
    color: #627150;
    font-size: 0.61rem;
    font-weight: 850;
    white-space: nowrap;
}

.quote-mode-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(43, 48, 39, 0.08);
    border-radius: 50%;
    background: #f4f5f1;
    color: #666d62;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        background-color 0.16s ease,
        color 0.16s ease;
}

.quote-mode-close:hover {
    transform: rotate(3deg);
    background: #e9ece5;
    color: #272c25;
}

.quote-mode-body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.22fr);
}

.quote-mode-builder,
.quote-mode-preview {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.quote-mode-builder {
    padding: 22px;
    border-right: 1px solid rgba(43, 48, 39, 0.08);
    background:
        linear-gradient(180deg, rgba(249, 250, 246, 0.98), rgba(244, 245, 240, 0.96));
}

.quote-mode-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.quote-mode-section-head h3 {
    margin: 5px 0 0;
    color: #30352d;
    font-size: 1rem;
    font-weight: 880;
    letter-spacing: -0.025em;
}

.quote-mode-placeholder-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    padding: 13px;
    border: 1px solid rgba(43, 48, 39, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        0 8px 20px rgba(43, 48, 39, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.quote-mode-placeholder-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #eef3e6;
    color: #637451;
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.quote-mode-placeholder-card strong {
    display: block;
    margin-bottom: 3px;
    color: #3c4238;
    font-size: 0.77rem;
    font-weight: 850;
}

.quote-mode-placeholder-card span:not(.quote-mode-placeholder-icon) {
    display: block;
    color: #82877e;
    font-size: 0.67rem;
    line-height: 1.42;
}

.quote-mode-builder-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    margin-top: 15px;
    padding: 11px 12px;
    border: 1px solid rgba(91, 67, 208, 0.10);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(245, 241, 255, 0.88), rgba(251, 250, 255, 0.92));
    color: #5a49aa;
    font-size: 0.66rem;
    font-weight: 720;
    line-height: 1.4;
}

.quote-mode-builder-note > span:first-child {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(91, 67, 208, 0.09);
    font-weight: 900;
}

.quote-mode-preview {
    padding: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(118, 87, 232, 0.055), transparent 18rem),
        #efefea;
}

.quote-mode-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 0 2px;
}

.quote-mode-preview-toolbar strong {
    display: block;
    margin-top: 5px;
    color: #343a31;
    font-size: 0.79rem;
    font-weight: 850;
}

.quote-mode-preview-status {
    border-color: rgba(118, 87, 232, 0.10);
    background: #f1edff;
    color: #6650bd;
}

.quote-mode-paper {
    min-height: 530px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid rgba(43, 48, 39, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 22px 48px rgba(43, 48, 39, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.quote-mode-paper-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid #eceee8;
}

.quote-mode-paper-logo {
    color: #384330;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.quote-mode-paper-label {
    color: #959990;
    font-size: 0.60rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.quote-mode-paper-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 390px;
    margin: 0 auto;
    color: #848a80;
    text-align: center;
}

.quote-mode-paper-placeholder-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border: 1px solid rgba(95, 126, 56, 0.12);
    border-radius: 16px;
    background: #f2f5ed;
    color: #687a53;
}

.quote-mode-paper-placeholder-icon svg {
    width: 25px;
    height: 25px;
}

.quote-mode-paper-placeholder strong {
    margin-bottom: 6px;
    color: #4d5549;
    font-size: 0.88rem;
    font-weight: 880;
}

.quote-mode-paper-placeholder span {
    font-size: 0.70rem;
    line-height: 1.5;
}

@keyframes quoteModeLayerIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes quoteModeDialogIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

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

@media (max-width: 900px) {
    .quote-mode-dialog {
        width: min(760px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
    }

    .quote-mode-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .quote-mode-builder,
    .quote-mode-preview {
        overflow: visible;
    }

    .quote-mode-builder {
        border-right: 0;
        border-bottom: 1px solid rgba(43, 48, 39, 0.08);
    }
}

@media (max-width: 620px) {
    .quote-mode-layer {
        padding: 8px;
    }

    .quote-mode-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 21px;
    }

    .quote-mode-header {
        align-items: flex-start;
        padding: 16px;
    }

    .quote-mode-version {
        display: none;
    }

    .quote-mode-subtitle {
        display: none;
    }

    .quote-mode-builder,
    .quote-mode-preview {
        padding: 16px;
    }

    .quote-mode-paper {
        min-height: 420px;
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-quote-entry,
    .quote-mode-layer,
    .quote-mode-dialog {
        animation: none !important;
    }
}


/* =========================================================
   QUOTE MODE v1 — READY BUILDER + LIVE CUSTOMER PREVIEW
   Added on top of the Step 1 shell. Existing calculator logic
   remains untouched; this block only styles the final Quote UI.
========================================================= */

.quote-mode-dialog {
    width: min(1540px, calc(100vw - 42px));
    height: min(930px, calc(100vh - 42px));
    max-height: calc(100vh - 42px);
}

.quote-mode-body {
    grid-template-columns: minmax(430px, 39%) minmax(0, 61%);
    min-height: 0;
}

.quote-mode-builder,
.quote-mode-preview {
    min-height: 0;
}

.quote-mode-builder {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
}

.quote-mode-builder-scroll {
    min-height: 0;
    overflow-y: auto;
    padding: 27px 28px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(92, 107, 74, 0.28) transparent;
}

.quote-mode-builder-scroll::-webkit-scrollbar {
    width: 8px;
}

.quote-mode-builder-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(92, 107, 74, 0.22);
    background-clip: padding-box;
}

.quote-builder-section {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(63, 72, 56, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 9px 26px rgba(43, 49, 38, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.quote-builder-section-title {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.quote-builder-index {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #edf2e6;
    color: #61734f;
    font-size: 0.67rem;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.quote-builder-section-title strong {
    display: block;
    color: #343a31;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
}

.quote-builder-section-title span:not(.quote-builder-index) {
    display: block;
    margin-top: 3px;
    color: #878c82;
    font-size: 0.65rem;
    line-height: 1.4;
}

.quote-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quote-field {
    min-width: 0;
}

.quote-field--wide {
    grid-column: 1 / -1;
}

.quote-field > span,
.quote-commercial-card > span,
.quote-note-label {
    display: block;
    margin-bottom: 6px;
    color: #71786b;
    font-size: 0.60rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.quote-field .form-control,
.quote-commercial-card .form-control,
.quote-note-input {
    min-height: 38px !important;
    border: 1px solid rgba(62, 71, 55, 0.11) !important;
    border-radius: 11px !important;
    background: #fafbf8 !important;
    color: #2f352d !important;
    font-size: 0.75rem !important;
    font-weight: 690;
    box-shadow: none !important;
}

.quote-field .form-control:focus,
.quote-commercial-card .form-control:focus,
.quote-note-input:focus {
    border-color: rgba(111, 139, 75, 0.48) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(111, 139, 75, 0.09) !important;
}

.quote-field-readonly {
    color: #81877d !important;
    background: #f3f5f0 !important;
}

.quote-commercial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.quote-commercial-card {
    position: relative;
    min-width: 0;
    min-height: 100px;
    padding: 12px;
    border: 1px solid rgba(62, 71, 55, 0.085);
    border-radius: 14px;
    background: #f8f9f6;
}

.quote-commercial-card.is-private {
    background: linear-gradient(145deg, #f5f6f2, #fafbf8);
}

.quote-commercial-card.is-offer {
    border-color: rgba(103, 130, 70, 0.20);
    background: linear-gradient(145deg, #edf3e4, #f8faF3);
}

.quote-commercial-card > strong {
    display: block;
    margin-top: 8px;
    color: #343a31;
    font-size: 0.95rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.quote-commercial-card small {
    display: block;
    margin-top: 7px;
    color: #94998f;
    font-size: 0.56rem;
    font-weight: 760;
}

.quote-commercial-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.quote-commercial-input-row .form-control {
    min-width: 0;
    padding-right: 6px;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
}

.quote-commercial-input-row > span {
    color: #697261;
    font-size: 0.72rem;
    font-weight: 900;
}

.quote-reset-price {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #748465;
    font-size: 0.64rem;
    font-weight: 800;
}

.quote-reset-price:hover {
    color: #526440;
}

.quote-block-list {
    display: grid;
    gap: 7px;
}

.quote-block-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 9px 11px;
    border: 1px solid rgba(61, 69, 55, 0.075);
    border-radius: 12px;
    background: #fafbf8;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        transform 0.16s ease;
}

.quote-block-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(101, 127, 70, 0.16);
    background: #ffffff;
}

.quote-block-toggle.is-muted {
    opacity: 0.56;
}

.quote-block-toggle-copy {
    min-width: 0;
}

.quote-block-toggle-copy strong {
    display: block;
    color: #41473d;
    font-size: 0.72rem;
    font-weight: 850;
}

.quote-block-toggle-copy small {
    display: block;
    margin-top: 2px;
    color: #8c9188;
    font-size: 0.60rem;
    line-height: 1.35;
}

.quote-block-toggle .form-check-input {
    width: 34px;
    height: 19px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;
}

.quote-note-input {
    min-height: 74px !important;
    resize: vertical;
}

.quote-builder-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 70px;
    padding: 13px 24px;
    border-top: 1px solid rgba(64, 71, 58, 0.085);
    background: rgba(250, 251, 248, 0.97);
    box-shadow: 0 -10px 30px rgba(43, 48, 39, 0.035);
}

.quote-action-message {
    min-width: 0;
    color: #5c704a;
    font-size: 0.63rem;
    font-weight: 760;
    line-height: 1.35;
}

.quote-action-message.is-muted {
    color: #999e95;
    font-weight: 650;
}

.quote-create-button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 17px;
    border: 1px solid #5e743f;
    border-radius: 12px;
    background: linear-gradient(135deg, #789750, #617e3f);
    color: #ffffff;
    box-shadow: 0 9px 20px rgba(91, 119, 59, 0.20);
    font-size: 0.70rem;
    font-weight: 900;
}

.quote-create-button:hover {
    background: linear-gradient(135deg, #6f8e48, #587337);
}

.quote-mode-preview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(122, 101, 207, 0.045), transparent 20rem),
        #f4f4f0;
}

.quote-mode-preview-toolbar {
    min-height: 67px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(60, 67, 55, 0.08);
    background: rgba(250, 250, 247, 0.94);
}

.quote-preview-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quote-output-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(62, 70, 56, 0.10);
    border-radius: 9px;
    background: #ffffff;
    color: #50584b;
    font-size: 0.63rem;
    font-weight: 820;
    box-shadow: 0 5px 14px rgba(46, 52, 42, 0.035);
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.quote-output-button:hover {
    transform: translateY(-1px);
    border-color: rgba(100, 127, 69, 0.20);
    background: #fbfcf9;
}

.quote-mode-preview-status.is-ready {
    border-color: rgba(57, 139, 88, 0.18);
    background: rgba(235, 247, 239, 0.92);
    color: #3c8258;
}

.quote-preview-stage {
    min-height: 0;
    overflow: auto;
    padding: 22px;
}

.quote-mode-paper {
    position: relative;
    width: min(820px, 100%);
    min-height: 1000px;
    margin: 0 auto;
    padding: 38px 42px 30px;
    overflow: hidden;
    border: 1px solid rgba(51, 58, 46, 0.08);
    border-radius: 18px;
    background: #ffffff;
    color: #30362f;
    box-shadow: 0 22px 54px rgba(39, 45, 34, 0.09);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.quote-paper-topline {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #79974f 0 56%, #7258cf 56% 100%);
}

.quote-paper-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8ebe4;
}

.quote-paper-company-subtitle {
    margin-top: 5px;
    color: #90958d;
    font-size: 0.60rem;
    font-weight: 720;
}

.quote-paper-document-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.quote-paper-document-title span {
    color: #989c94;
    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.quote-paper-document-title strong {
    color: #424a3e;
    font-size: 0.76rem;
    font-weight: 900;
}

.quote-paper-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.quote-paper-meta-card {
    min-width: 0;
    min-height: 72px;
    padding: 10px 11px;
    border: 1px solid #eceee9;
    border-radius: 11px;
    background: #fafbf9;
}

.quote-paper-meta-card > span,
.quote-metric-card > span,
.quote-vehicle-row span,
.quote-terms-grid span,
.quote-paper-note > span {
    display: block;
    color: #979c94;
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.quote-paper-meta-card strong {
    display: block;
    margin-top: 7px;
    overflow-wrap: anywhere;
    color: #3c4338;
    font-size: 0.67rem;
    font-weight: 850;
    line-height: 1.25;
}

.quote-paper-meta-card small {
    display: block;
    margin-top: 3px;
    color: #90958c;
    font-size: 0.56rem;
}

.quote-paper-section {
    margin-top: 20px;
}

.quote-paper-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #eceee9;
}

.quote-paper-section-head > span {
    color: #50594a;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.quote-paper-section-head > small {
    color: #9ca097;
    font-size: 0.56rem;
    font-weight: 720;
}

.quote-route-timeline {
    position: relative;
    display: grid;
    gap: 0;
    padding: 3px 0;
}

.quote-route-timeline::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(40, 152, 102, 0.55), rgba(102, 76, 195, 0.55));
}

.quote-route-stop {
    position: relative;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 11px;
    min-height: 48px;
}

.quote-route-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #6c8d45;
    box-shadow: 0 0 0 4px rgba(108, 141, 69, 0.10);
}

.quote-route-stop.is-delivery .quote-route-dot {
    background: #6951c6;
    box-shadow: 0 0 0 4px rgba(105, 81, 198, 0.10);
}

.quote-route-stop-copy strong {
    display: block;
    color: #3a4136;
    font-size: 0.70rem;
    font-weight: 860;
    overflow-wrap: anywhere;
}

.quote-route-stop-copy span {
    display: block;
    margin-top: 2px;
    color: #969b92;
    font-size: 0.56rem;
    font-weight: 680;
}

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

.quote-metric-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid #eceee9;
    border-radius: 10px;
    background: #fbfcfa;
}

.quote-metric-card strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    color: #3e4639;
    font-size: 0.68rem;
    font-weight: 900;
}

.quote-cargo-table {
    overflow: hidden;
    border: 1px solid #e9ece6;
    border-radius: 11px;
}

.quote-cargo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 56px 90px 70px;
    align-items: center;
    min-height: 40px;
    border-top: 1px solid #eef0eb;
}

.quote-cargo-row:first-child {
    border-top: 0;
}

.quote-cargo-row > span {
    min-width: 0;
    padding: 8px 10px;
    color: #555d50;
    font-size: 0.60rem;
}

.quote-cargo-row > span:not(:first-child) {
    text-align: right;
}

.quote-cargo-row strong {
    display: block;
    color: #41483d;
    font-size: 0.63rem;
    font-weight: 850;
}

.quote-cargo-row small {
    display: block;
    margin-top: 2px;
    color: #9ca098;
    font-size: 0.53rem;
}

.quote-cargo-row--head {
    min-height: 31px;
    border-top: 0;
    background: #f6f8f4;
}

.quote-cargo-row--head > span {
    color: #959a91;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.quote-paper-empty-inline {
    padding: 12px;
    border: 1px dashed #e4e7df;
    border-radius: 10px;
    color: #9b9f97;
    background: #fafbf9;
    font-size: 0.62rem;
    text-align: center;
}

.quote-vehicle-row,
.quote-terms-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quote-vehicle-row > div,
.quote-terms-grid > div {
    padding: 10px 11px;
    border: 1px solid #eceee9;
    border-radius: 10px;
    background: #fbfcfa;
}

.quote-vehicle-row strong,
.quote-terms-grid strong {
    display: block;
    margin-top: 6px;
    color: #41483c;
    font-size: 0.65rem;
    font-weight: 850;
}

.quote-toll-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 12px;
    border: 1px solid #eceee9;
    border-radius: 10px;
    background: #fbfcfa;
}

.quote-toll-row span {
    color: #737a70;
    font-size: 0.61rem;
    font-weight: 700;
}

.quote-toll-row strong {
    color: #3e4639;
    font-size: 0.70rem;
    font-weight: 900;
    white-space: nowrap;
}

.quote-paper-disclaimer {
    display: block;
    margin-top: 6px;
    color: #a0a49d;
    font-size: 0.51rem;
    line-height: 1.4;
}

.quote-paper-note {
    margin-top: 18px;
    padding: 12px 13px;
    border-left: 3px solid #93a977;
    border-radius: 0 10px 10px 0;
    background: #f7f9f4;
}

.quote-paper-note p {
    margin: 5px 0 0;
    color: #5e665a;
    font-size: 0.62rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.quote-paper-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 17px 19px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3f493a, #30382d);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(47, 56, 43, 0.12);
}

.quote-paper-price span {
    display: block;
    color: #d9e2ce;
    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.quote-paper-price small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.54rem;
}

.quote-paper-price > strong {
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.quote-paper-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 23px;
    padding-top: 11px;
    border-top: 1px solid #eceee9;
    color: #a3a79f;
    font-size: 0.50rem;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .quote-mode-body {
        grid-template-columns: minmax(390px, 44%) minmax(0, 56%);
    }

    .quote-commercial-grid {
        grid-template-columns: 1fr;
    }

    .quote-commercial-card {
        min-height: auto;
    }

    .quote-paper-meta-grid,
    .quote-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .quote-mode-dialog {
        width: calc(100vw - 20px);
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
    }

    .quote-mode-body {
        display: block;
        overflow-y: auto;
    }

    .quote-mode-builder {
        min-height: 720px;
    }

    .quote-mode-preview {
        min-height: 850px;
        border-left: 0;
        border-top: 1px solid rgba(60, 67, 55, 0.08);
    }

    .quote-mode-builder-scroll {
        overflow: visible;
    }
}

@media (max-width: 620px) {
    .quote-mode-header {
        padding: 16px;
    }

    .quote-mode-icon {
        display: none;
    }

    .quote-mode-title {
        font-size: 1.25rem;
    }

    .quote-mode-subtitle,
    .quote-mode-version {
        display: none;
    }

    .quote-mode-builder-scroll {
        padding: 18px 15px;
    }

    .quote-form-grid,
    .quote-paper-meta-grid,
    .quote-metric-grid,
    .quote-vehicle-row,
    .quote-terms-grid {
        grid-template-columns: 1fr;
    }

    .quote-builder-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .quote-create-button {
        width: 100%;
    }

    .quote-mode-preview-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .quote-preview-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .quote-output-button {
        flex: 1 1 auto;
    }

    .quote-preview-stage {
        padding: 10px;
    }

    .quote-mode-paper {
        min-height: 900px;
        padding: 28px 20px 24px;
        border-radius: 13px;
    }

    .quote-paper-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .quote-paper-document-title {
        align-items: flex-start;
        text-align: left;
    }

    .quote-cargo-row {
        grid-template-columns: minmax(0, 1fr) 45px 75px 58px;
    }

    .quote-cargo-row > span {
        padding: 7px 6px;
        font-size: 0.55rem;
    }

    .quote-paper-price {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    #quote-mode-paper {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   QUOTE MODE v1.1 — BRANDING / PRESETS / COMMERCIAL EXTRAS
   Adds the production quotation controls on top of Quote v1.
========================================================= */

.quote-mode-dialog--v11 {
    width: min(1680px, calc(100vw - 30px));
    height: min(970px, calc(100vh - 30px));
    max-height: calc(100vh - 30px);
}

.quote-mode-dialog--v11 .quote-mode-body {
    grid-template-columns: minmax(540px, 43%) minmax(0, 57%);
}

.quote-mode-dialog--v11 .quote-mode-builder-scroll {
    padding: 24px 25px 28px;
}

.quote-mode-dialog--v11 .quote-builder-section {
    padding: 15px;
}

.quote-field .form-select,
.quote-detail-control .form-select,
.quote-presentation-row .form-select {
    min-height: 38px !important;
    border: 1px solid rgba(62, 71, 55, 0.11) !important;
    border-radius: 11px !important;
    background-color: #fafbf8 !important;
    color: #2f352d !important;
    font-size: 0.73rem !important;
    font-weight: 690;
    box-shadow: none !important;
}

.quote-field .form-select:focus,
.quote-detail-control .form-select:focus,
.quote-presentation-row .form-select:focus {
    border-color: rgba(111, 139, 75, 0.48) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(111, 139, 75, 0.09) !important;
}

.quote-field-help {
    display: block;
    margin-top: 5px;
    color: #a0a49b;
    font-size: 0.53rem;
    font-weight: 650;
    line-height: 1.35;
}

.quote-master-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid rgba(95, 119, 65, 0.13);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(238, 244, 229, 0.94), rgba(251, 252, 248, 0.96));
    cursor: pointer;
}

.quote-master-toggle--soft {
    margin-top: 12px;
    border-color: rgba(83, 91, 76, 0.08);
    background: #fafbf8;
}

.quote-master-toggle > span {
    min-width: 0;
}

.quote-master-toggle strong {
    display: block;
    color: #414a3d;
    font-size: 0.73rem;
    font-weight: 900;
}

.quote-master-toggle small {
    display: block;
    margin-top: 3px;
    color: #8f958a;
    font-size: 0.59rem;
    line-height: 1.35;
}

.quote-master-toggle .form-check-input {
    width: 38px;
    height: 21px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;
}

.quote-branding-editor {
    margin-top: 11px;
    padding: 12px;
    border: 1px solid rgba(68, 79, 59, 0.08);
    border-radius: 14px;
    background: rgba(248, 250, 245, 0.78);
}

.quote-logo-editor {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(68, 79, 59, 0.07);
}

.quote-logo-preview {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border: 1px solid rgba(87, 103, 72, 0.11);
    border-radius: 15px;
    background: #ffffff;
    color: #5f734d;
    box-shadow: 0 7px 18px rgba(48, 55, 42, 0.04);
    font-size: 0.86rem;
    font-weight: 950;
}

.quote-logo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.quote-logo-editor-copy strong {
    display: block;
    color: #454d41;
    font-size: 0.71rem;
    font-weight: 880;
}

.quote-logo-editor-copy > small {
    display: block;
    margin-top: 3px;
    color: #969b92;
    font-size: 0.56rem;
}

.quote-logo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.quote-upload-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    overflow: hidden;
    border: 1px solid rgba(91, 113, 67, 0.14);
    border-radius: 9px;
    background: #ffffff;
    color: #5c7149;
    cursor: pointer;
    font-size: 0.59rem;
    font-weight: 850;
}

.quote-logo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.quote-inline-text-button {
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: #92988e;
    font-size: 0.57rem;
    font-weight: 760;
}

.quote-inline-text-button:hover {
    color: #5f6d55;
}

.quote-accent-control {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid rgba(62, 71, 55, 0.11);
    border-radius: 11px;
    background: #fafbf8;
}

.quote-accent-control input[type="color"] {
    width: 34px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.quote-accent-control code {
    color: #6c7467;
    font-size: 0.65rem;
}

.quote-style-divider {
    height: 1px;
    margin: 13px 0;
    background: rgba(67, 75, 61, 0.075);
}

.quote-document-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.quote-document-control-row > div:first-child strong {
    display: block;
    color: #484f44;
    font-size: 0.71rem;
    font-weight: 880;
}

.quote-document-control-row > div:first-child small {
    display: block;
    margin-top: 3px;
    color: #969b92;
    font-size: 0.56rem;
}

.quote-preset-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.quote-preset-button {
    min-height: 29px;
    padding: 5px 8px;
    border: 1px solid rgba(65, 74, 59, 0.09);
    border-radius: 8px;
    background: #ffffff;
    color: #70786a;
    font-size: 0.57rem;
    font-weight: 850;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.quote-preset-button:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 124, 69, 0.18);
}

.quote-preset-button.is-active {
    border-color: rgba(96, 125, 65, 0.20);
    background: #edf3e5;
    color: #58713f;
}

.quote-preset-custom {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f1eefc;
    color: #6c58b6;
    font-size: 0.52rem;
    font-weight: 850;
}

.quote-commercial-grid--v11 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-commercial-card.is-total {
    border-color: rgba(103, 80, 193, 0.13);
    background: linear-gradient(145deg, #f4f0ff, #fbfaff);
}

.quote-profit-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 9px 11px;
    border: 1px solid rgba(57, 132, 85, 0.11);
    border-radius: 11px;
    background: rgba(242, 249, 244, 0.82);
}

.quote-profit-strip > span {
    color: #55705c;
    font-size: 0.61rem;
    font-weight: 850;
}

.quote-profit-strip > span small {
    display: block;
    margin-top: 2px;
    color: #8b988e;
    font-size: 0.51rem;
    font-weight: 650;
}

.quote-profit-strip strong {
    color: #346449;
    font-size: 0.72rem;
    font-weight: 950;
}

.quote-profit-strip em {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(69, 137, 91, 0.09);
    color: #4c7c5d;
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 900;
}

.quote-presentation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    gap: 10px;
    align-items: end;
}

.quote-extra-summary {
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid rgba(67, 75, 61, 0.08);
    border-radius: 11px;
    background: #fafbf8;
}

.quote-extra-summary span {
    display: block;
    color: #92978f;
    font-size: 0.54rem;
    font-weight: 850;
    text-transform: uppercase;
}

.quote-extra-summary strong {
    display: block;
    margin-top: 6px;
    color: #41483d;
    font-size: 0.72rem;
    font-weight: 950;
}

.quote-charge-list {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.quote-charge-empty {
    padding: 10px 11px;
    border: 1px dashed rgba(68, 77, 62, 0.11);
    border-radius: 10px;
    background: rgba(249, 250, 247, 0.72);
    color: #989d94;
    font-size: 0.57rem;
    line-height: 1.4;
}

.quote-charge-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 28px;
    align-items: center;
    gap: 7px;
}

.quote-charge-row > .form-control,
.quote-charge-amount .form-control {
    min-height: 35px !important;
    border: 1px solid rgba(62, 71, 55, 0.10) !important;
    border-radius: 10px !important;
    background: #fafbf8 !important;
    font-size: 0.68rem !important;
    box-shadow: none !important;
}

.quote-charge-amount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
}

.quote-charge-amount > span {
    color: #777f71;
    font-size: 0.60rem;
    font-weight: 850;
}

.quote-charge-remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(151, 73, 77, 0.09);
    border-radius: 8px;
    background: #fffafa;
    color: #ae797c;
    font-size: 0.92rem;
}

.quote-charge-remove:hover {
    background: #fff4f4;
    color: #965e61;
}

.quote-add-charge {
    margin-top: 9px;
    padding: 5px 1px;
    border: 0;
    background: transparent;
    color: #647d50;
    font-size: 0.61rem;
    font-weight: 850;
}

.quote-detail-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 10px;
    margin: -2px 0 2px;
    padding: 6px 10px 8px 14px;
}

.quote-detail-control > span {
    color: #8b9186;
    font-size: 0.57rem;
    font-weight: 800;
}

.quote-detail-control .form-select {
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.62rem !important;
}

.quote-detail-control.is-disabled {
    opacity: 0.46;
}

.quote-internal-note-field {
    margin-top: 11px;
    padding: 10px;
    border: 1px dashed rgba(104, 84, 166, 0.15);
    border-radius: 12px;
    background: rgba(247, 244, 253, 0.66);
}

.quote-internal-note-field > span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quote-internal-note-field > span em {
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(113, 89, 190, 0.09);
    color: #7863ba;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: none;
}

.quote-warning-panel {
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(175, 126, 42, 0.16);
    border-radius: 13px;
    background: rgba(255, 249, 232, 0.86);
}

.quote-warning-head {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.quote-warning-head > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(182, 132, 49, 0.11);
    color: #a47429;
    font-size: 0.65rem;
    font-weight: 950;
}

.quote-warning-head strong {
    color: #765d2c;
    font-size: 0.65rem;
    font-weight: 900;
}

.quote-warning-head small {
    color: #a08c65;
    font-size: 0.50rem;
}

.quote-warning-item {
    margin-left: 29px;
    padding: 2px 0;
    color: #8b744a;
    font-size: 0.56rem;
    line-height: 1.35;
}

.quote-preview-warning-badge {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border: 1px solid rgba(177, 127, 43, 0.15);
    border-radius: 999px;
    background: #fff7df;
    color: #a16f20;
    font-size: 0.55rem;
    font-weight: 950;
}

.quote-mode-paper--v11 {
    --quote-accent: #78964f;
    min-height: 1040px;
}

.quote-mode-paper--v11 .quote-paper-topline {
    background: var(--quote-accent);
}

.quote-paper-header--v11 {
    align-items: flex-start;
}

.quote-paper-identity {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    max-width: 68%;
}

.quote-paper-company-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 120px;
    height: 48px;
    object-fit: contain;
    object-position: left center;
}

.quote-paper-company-mark {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--quote-accent);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.quote-paper-company-copy {
    min-width: 0;
}

.quote-paper-company-copy > strong {
    display: block;
    color: #353d32;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.quote-paper-company-copy > span {
    display: block;
    margin-top: 4px;
    color: #858b82;
    font-size: 0.55rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.quote-paper-company-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin-top: 5px;
}

.quote-paper-company-lines span {
    position: relative;
    color: #92978f;
    font-size: 0.51rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}

.quote-paper-company-lines span:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: -6px;
    color: #c2c5bf;
}

.quote-paper-neutral-brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quote-paper-neutral-brand span {
    color: #9a9e97;
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.quote-paper-neutral-brand strong {
    color: #424940;
    font-size: 0.82rem;
    font-weight: 950;
}

.quote-mode-paper--v11 .quote-route-dot {
    background: var(--quote-accent);
}

.quote-route-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #eceee9;
    border-radius: 11px;
    background: #fbfcfa;
}

.quote-route-summary > div {
    min-width: 0;
}

.quote-route-summary > div:last-child {
    text-align: right;
}

.quote-route-summary span:not(.quote-route-summary-arrow) {
    display: block;
    color: #9a9e97;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quote-route-summary strong {
    display: block;
    margin-top: 5px;
    color: #3e463a;
    font-size: 0.67rem;
    font-weight: 880;
    overflow-wrap: anywhere;
}

.quote-route-summary-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 28px;
    border-radius: 999px;
    background: rgba(93, 113, 76, 0.07);
    color: var(--quote-accent);
    font-size: 0.88rem;
}

.quote-cargo-summary-card {
    padding: 12px 13px;
    border: 1px solid #eceee9;
    border-radius: 11px;
    background: #fbfcfa;
}

.quote-cargo-summary-card > span {
    display: block;
    color: #999e96;
    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quote-cargo-summary-card > strong {
    display: block;
    margin-top: 6px;
    color: #3f473b;
    font-size: 0.73rem;
    font-weight: 930;
}

.quote-cargo-summary-card > small {
    display: block;
    margin-top: 4px;
    color: #9da199;
    font-size: 0.52rem;
}

.quote-terms-grid--v11 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-paper-note--conditions {
    border-left-color: var(--quote-accent);
    background: #fafbf8;
}

.quote-paper-price-breakdown {
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid #e6e9e2;
    border-radius: 14px;
    background: #ffffff;
}

.quote-paper-price-breakdown-head {
    padding: 9px 13px;
    border-bottom: 1px solid #eceee9;
    background: #f7f9f5;
}

.quote-paper-price-breakdown-head span {
    color: #677160;
    font-size: 0.55rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quote-paper-price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 39px;
    padding: 8px 13px;
    border-top: 1px solid #f0f1ee;
}

.quote-paper-price-line:first-of-type {
    border-top: 0;
}

.quote-paper-price-line span {
    min-width: 0;
    color: #687064;
    font-size: 0.60rem;
    overflow-wrap: anywhere;
}

.quote-paper-price-line strong {
    flex: 0 0 auto;
    color: #3f473b;
    font-size: 0.66rem;
    font-weight: 900;
}

.quote-paper-price-line--total {
    min-height: 52px;
    border-top: 1px solid #dfe4db;
    background: #3a4237;
}

.quote-paper-price-line--total span {
    color: rgba(255, 255, 255, 0.70);
    font-weight: 900;
    text-transform: uppercase;
}

.quote-paper-price-line--total strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
}

.quote-mode-paper--v11 .quote-paper-price {
    border: 0;
    box-shadow: 0 12px 25px rgba(47, 56, 43, 0.12);
}

.quote-paper-footer--v11 {
    align-items: flex-end;
}

.quote-paper-footer-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.quote-paper-footer-left span {
    overflow-wrap: anywhere;
}

@media (max-width: 1320px) {
    .quote-mode-dialog--v11 .quote-mode-body {
        grid-template-columns: minmax(485px, 46%) minmax(0, 54%);
    }

    .quote-commercial-grid--v11 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .quote-mode-dialog--v11 {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);
        max-height: calc(100vh - 18px);
    }

    .quote-mode-dialog--v11 .quote-mode-body {
        display: block;
        overflow-y: auto;
    }

    .quote-document-control-row,
    .quote-presentation-row {
        grid-template-columns: 1fr;
    }

    .quote-preset-group {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .quote-mode-dialog--v11 .quote-mode-builder-scroll {
        padding: 18px 14px 22px;
    }

    .quote-form-grid,
    .quote-commercial-grid--v11 {
        grid-template-columns: 1fr;
    }

    .quote-field--wide {
        grid-column: auto;
    }

    .quote-charge-row {
        grid-template-columns: minmax(0, 1fr) 110px 28px;
    }

    .quote-detail-control {
        grid-template-columns: 1fr;
        padding-left: 10px;
    }

    .quote-paper-identity {
        max-width: 100%;
    }

    .quote-paper-header--v11 {
        flex-direction: column;
    }

    .quote-paper-document-title {
        align-items: flex-start;
        text-align: left;
    }

    .quote-route-summary {
        grid-template-columns: 1fr;
    }

    .quote-route-summary > div:last-child {
        text-align: left;
    }

    .quote-route-summary-arrow {
        transform: rotate(90deg);
    }
}

/* =========================================================
   QUOTE MODE v1.1 — DEDICATED A4 PDF EXPORT LAYOUT
   Applied only while ExportQuotePdfAsync captures #quote-mode-paper.
   The live preview keeps its normal spacious styling.
========================================================= */
.quote-mode-paper--pdf-export {
    width: 794px !important;
    max-width: 794px !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 22px 28px 16px !important;

    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;

    color: #30362f !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.quote-mode-paper--pdf-export,
.quote-mode-paper--pdf-export * {
    box-sizing: border-box !important;
    animation: none !important;
    transition: none !important;
}

/* Keep the accent safely inside the printable canvas. */
.quote-mode-paper--pdf-export .quote-paper-topline {
    inset: 0 0 auto 0 !important;
    height: 4px !important;
}

/* Header: compact, balanced, and protected from edge clipping. */
.quote-mode-paper--pdf-export .quote-paper-header,
.quote-mode-paper--pdf-export .quote-paper-header--v11 {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    min-height: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #e8ebe4 !important;
}

.quote-mode-paper--pdf-export .quote-paper-identity {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 64% !important;
    gap: 10px !important;
}

.quote-mode-paper--pdf-export .quote-paper-company-logo {
    max-width: 92px !important;
    height: 36px !important;
}

.quote-mode-paper--pdf-export .quote-paper-company-mark {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 0.62rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-company-copy > strong {
    font-size: 0.75rem !important;
    line-height: 1.12 !important;
}

.quote-mode-paper--pdf-export .quote-paper-company-copy > span {
    margin-top: 3px !important;
    font-size: 0.49rem !important;
    line-height: 1.25 !important;
}

.quote-mode-paper--pdf-export .quote-paper-company-lines {
    gap: 3px 8px !important;
    margin-top: 4px !important;
}

.quote-mode-paper--pdf-export .quote-paper-company-lines span {
    font-size: 0.46rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-document-title {
    flex: 0 0 32% !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: 3px !important;
    padding-top: 1px !important;
}

.quote-mode-paper--pdf-export .quote-paper-document-title span {
    font-size: 0.50rem !important;
    letter-spacing: 0.10em !important;
}

.quote-mode-paper--pdf-export .quote-paper-document-title strong {
    max-width: 100% !important;
    font-size: 0.68rem !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
}

/* Meta is always one compact row in A4 export, regardless of viewport breakpoints. */
.quote-mode-paper--pdf-export .quote-paper-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 11px !important;
}

.quote-mode-paper--pdf-export .quote-paper-meta-card {
    min-height: 52px !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
}

.quote-mode-paper--pdf-export .quote-paper-meta-card > span,
.quote-mode-paper--pdf-export .quote-metric-card > span,
.quote-mode-paper--pdf-export .quote-vehicle-row span,
.quote-mode-paper--pdf-export .quote-terms-grid span,
.quote-mode-paper--pdf-export .quote-paper-note > span {
    font-size: 0.47rem !important;
    letter-spacing: 0.055em !important;
}

.quote-mode-paper--pdf-export .quote-paper-meta-card strong {
    margin-top: 4px !important;
    font-size: 0.59rem !important;
    line-height: 1.18 !important;
}

.quote-mode-paper--pdf-export .quote-paper-meta-card small {
    margin-top: 2px !important;
    font-size: 0.49rem !important;
}

/* Section rhythm is intentionally much tighter than the on-screen preview. */
.quote-mode-paper--pdf-export .quote-paper-section {
    margin-top: 11px !important;
}

.quote-mode-paper--pdf-export .quote-paper-section-head {
    gap: 10px !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
}

.quote-mode-paper--pdf-export .quote-paper-section-head > span {
    font-size: 0.54rem !important;
    letter-spacing: 0.085em !important;
}

.quote-mode-paper--pdf-export .quote-paper-section-head > small {
    font-size: 0.48rem !important;
}

/* Route */
.quote-mode-paper--pdf-export .quote-route-summary {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
}

.quote-mode-paper--pdf-export .quote-route-summary span:not(.quote-route-summary-arrow) {
    font-size: 0.46rem !important;
}

.quote-mode-paper--pdf-export .quote-route-summary strong {
    margin-top: 3px !important;
    font-size: 0.58rem !important;
}

.quote-mode-paper--pdf-export .quote-route-summary-arrow {
    width: 30px !important;
    height: 23px !important;
    font-size: 0.74rem !important;
}

.quote-mode-paper--pdf-export .quote-route-timeline {
    padding: 1px 0 !important;
}

.quote-mode-paper--pdf-export .quote-route-timeline::before {
    top: 11px !important;
    bottom: 11px !important;
}

.quote-mode-paper--pdf-export .quote-route-stop {
    min-height: 34px !important;
    gap: 9px !important;
}

.quote-mode-paper--pdf-export .quote-route-dot {
    width: 10px !important;
    height: 10px !important;
    margin-top: 2px !important;
    box-shadow: 0 0 0 3px rgba(108, 141, 69, 0.09) !important;
}

.quote-mode-paper--pdf-export .quote-route-stop.is-delivery .quote-route-dot {
    box-shadow: 0 0 0 3px rgba(105, 81, 198, 0.09) !important;
}

.quote-mode-paper--pdf-export .quote-route-stop-copy strong {
    font-size: 0.60rem !important;
}

.quote-mode-paper--pdf-export .quote-route-stop-copy span {
    margin-top: 1px !important;
    font-size: 0.49rem !important;
}

/* Transport metrics are forced into a single four-column row. */
.quote-mode-paper--pdf-export .quote-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.quote-mode-paper--pdf-export .quote-metric-card {
    padding: 7px 8px !important;
    border-radius: 8px !important;
}

.quote-mode-paper--pdf-export .quote-metric-card strong {
    margin-top: 4px !important;
    font-size: 0.58rem !important;
}

/* Cargo */
.quote-mode-paper--pdf-export .quote-cargo-summary-card,
.quote-mode-paper--pdf-export .quote-paper-empty-inline {
    padding: 8px 9px !important;
    border-radius: 8px !important;
}

.quote-mode-paper--pdf-export .quote-cargo-summary-card > span {
    font-size: 0.46rem !important;
}

.quote-mode-paper--pdf-export .quote-cargo-summary-card > strong {
    margin-top: 3px !important;
    font-size: 0.61rem !important;
}

.quote-mode-paper--pdf-export .quote-cargo-summary-card > small,
.quote-mode-paper--pdf-export .quote-paper-empty-inline {
    margin-top: 2px !important;
    font-size: 0.48rem !important;
}

.quote-mode-paper--pdf-export .quote-cargo-row {
    min-height: 30px !important;
}

.quote-mode-paper--pdf-export .quote-cargo-row > span {
    padding: 5px 7px !important;
    font-size: 0.52rem !important;
}

.quote-mode-paper--pdf-export .quote-cargo-row strong {
    font-size: 0.54rem !important;
}

.quote-mode-paper--pdf-export .quote-cargo-row small,
.quote-mode-paper--pdf-export .quote-cargo-row--head > span {
    font-size: 0.46rem !important;
}

/* Vehicle / commercial terms */
.quote-mode-paper--pdf-export .quote-vehicle-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.quote-mode-paper--pdf-export .quote-terms-grid,
.quote-mode-paper--pdf-export .quote-terms-grid--v11 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.quote-mode-paper--pdf-export .quote-vehicle-row > div,
.quote-mode-paper--pdf-export .quote-terms-grid > div {
    padding: 7px 8px !important;
    border-radius: 8px !important;
}

.quote-mode-paper--pdf-export .quote-vehicle-row strong,
.quote-mode-paper--pdf-export .quote-terms-grid strong {
    margin-top: 4px !important;
    font-size: 0.56rem !important;
    line-height: 1.2 !important;
}

/* Tolls */
.quote-mode-paper--pdf-export .quote-toll-row {
    gap: 12px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
}

.quote-mode-paper--pdf-export .quote-toll-row span {
    font-size: 0.52rem !important;
}

.quote-mode-paper--pdf-export .quote-toll-row strong {
    font-size: 0.61rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-disclaimer {
    margin-top: 3px !important;
    font-size: 0.43rem !important;
    line-height: 1.25 !important;
}

/* Price moves before terms/notes in the markup and becomes the commercial focal point. */
.quote-mode-paper--pdf-export .quote-paper-price,
.quote-mode-paper--pdf-export .quote-paper-price-breakdown {
    margin-top: 13px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.quote-mode-paper--pdf-export .quote-paper-price {
    gap: 16px !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.quote-mode-paper--pdf-export .quote-paper-price span {
    font-size: 0.50rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-price small {
    margin-top: 2px !important;
    font-size: 0.46rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-price > strong {
    font-size: 1.22rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-breakdown {
    border-radius: 10px !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-breakdown-head {
    padding: 6px 9px !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-breakdown-head span {
    font-size: 0.48rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-line {
    min-height: 29px !important;
    padding: 5px 9px !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-line span {
    font-size: 0.52rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-line strong {
    font-size: 0.57rem !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-line--total {
    min-height: 38px !important;
}

.quote-mode-paper--pdf-export .quote-paper-price-line--total strong {
    font-size: 0.83rem !important;
}

/* Conditions / note */
.quote-mode-paper--pdf-export .quote-paper-note {
    margin-top: 9px !important;
    padding: 7px 9px !important;
    border-radius: 0 8px 8px 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.quote-mode-paper--pdf-export .quote-paper-note p {
    margin-top: 3px !important;
    font-size: 0.52rem !important;
    line-height: 1.35 !important;
}

/* Footer */
.quote-mode-paper--pdf-export .quote-paper-footer,
.quote-mode-paper--pdf-export .quote-paper-footer--v11 {
    align-items: flex-end !important;
    gap: 12px !important;
    margin-top: 11px !important;
    padding-top: 7px !important;
    font-size: 0.44rem !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.quote-mode-paper--pdf-export .quote-paper-footer-left {
    gap: 2px !important;
}

/* Protect compact blocks from ugly page cuts. Long route/cargo tables remain pageable. */
.quote-mode-paper--pdf-export .quote-paper-meta-grid,
.quote-mode-paper--pdf-export .quote-metric-grid,
.quote-mode-paper--pdf-export .quote-vehicle-row,
.quote-mode-paper--pdf-export .quote-terms-grid,
.quote-mode-paper--pdf-export .quote-toll-row,
.quote-mode-paper--pdf-export .quote-route-summary,
.quote-mode-paper--pdf-export .quote-cargo-summary-card,
.quote-mode-paper--pdf-export .quote-paper-empty-inline {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* html2canvas/html2pdf can otherwise inherit modal/container clipping. */
.quote-mode-paper--pdf-export img,
.quote-mode-paper--pdf-export svg {
    max-width: 100% !important;
}

@media print {
    .quote-mode-paper--pdf-export {
        width: 210mm !important;
        max-width: 210mm !important;
        margin: 0 !important;
        padding: 6mm 7.4mm 4mm !important;
    }
}



/* =========================================================
   WORKSPACE v1 — Archive evolution
   Recent Work / Quotes / Saved Routes
   Existing route archive API remains intact.
========================================================= */

.workspace-nav-anchor {
    z-index: 5200;
}

.workspace-panel {
    position: fixed !important;
    z-index: 6500 !important;
    top: 82px !important;
    left: 50% !important;
    right: auto !important;

    width: 1120px !important;
    max-width: calc(100vw - 48px) !important;
    min-height: 650px;
    max-height: calc(100vh - 108px) !important;

    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    background: rgba(250, 250, 247, 0.992) !important;
    box-shadow:
        0 34px 92px rgba(38, 43, 34, 0.18),
        0 12px 32px rgba(38, 43, 34, 0.09) !important;

    transform-origin: top center !important;
    animation: workspacePanelIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.workspace-panel::before {
    display: none !important;
}

@keyframes workspacePanelIn {
    from {
        opacity: 0;
        transform: translate(-50%, -8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.workspace-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 17px;
    border-bottom: 1px solid rgba(48, 54, 44, 0.075);
    background:
        radial-gradient(circle at 8% 0%, rgba(126, 157, 79, 0.10), transparent 16rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 246, 0.96));
}

.workspace-panel-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.workspace-panel-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(106, 132, 73, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, #eef3e5, #f9faf6);
    color: #627a44;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.workspace-panel-icon svg {
    width: 22px;
    height: 22px;
}

.workspace-panel-kicker {
    display: block;
    margin-bottom: 2px;
    color: #7b8d66;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.workspace-panel-heading h5 {
    margin: 0;
    color: #292e28;
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.workspace-panel-heading p {
    max-width: 520px;
    margin: 3px 0 0;
    color: #81867d;
    font-size: 0.68rem;
    line-height: 1.4;
}

.workspace-new-button {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 0;
    border-radius: 11px;
    background: #3c4738;
    color: #ffffff;
    box-shadow: 0 9px 20px rgba(54, 67, 48, 0.17);
    font-size: 0.70rem;
    font-weight: 850;
}

.workspace-new-button:hover {
    background: #303a2d;
}

.workspace-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px 12px;
    background: #f7f8f4;
}

.workspace-overview-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 12px 13px;
    border: 1px solid rgba(54, 61, 50, 0.075);
    border-radius: 14px;
    background: rgba(255,255,255,0.88);
    text-align: left;
    box-shadow: 0 5px 14px rgba(45, 50, 41, 0.025);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.workspace-overview-card:hover {
    transform: translateY(-1px);
    border-color: rgba(112, 139, 77, 0.20);
    box-shadow: 0 9px 21px rgba(45, 50, 41, 0.05);
}

.workspace-overview-card.is-active {
    border-color: rgba(112, 139, 77, 0.24);
    background: linear-gradient(145deg, #ffffff, #f6f9f0);
}

.workspace-overview-label {
    align-self: end;
    color: #5e6758;
    font-size: 0.64rem;
    font-weight: 850;
}

.workspace-overview-card strong {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    color: #34402f;
    font-size: 1.34rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.workspace-overview-card small {
    min-width: 0;
    overflow: hidden;
    color: #93978f;
    font-size: 0.54rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 18px;
    border-top: 1px solid rgba(54, 61, 50, 0.05);
    border-bottom: 1px solid rgba(54, 61, 50, 0.08);
    background: rgba(255,255,255,0.92);
}

.workspace-tab {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #858a80;
    font-size: 0.68rem;
    font-weight: 820;
}

.workspace-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: transparent;
}

.workspace-tab.is-active {
    color: #3f4c38;
}

.workspace-tab.is-active::after {
    background: #78964f;
}

.workspace-tab > span {
    min-width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #eef2e8;
    color: #657753;
    font-size: 0.53rem;
    font-weight: 900;
}

.workspace-panel-body {
    min-height: 430px;
    max-height: calc(100vh - 330px);
    overflow-y: auto;
    padding: 18px 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 101, 80, 0.22) transparent;
}

.workspace-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.workspace-section-head > div > span {
    display: block;
    margin-bottom: 2px;
    color: #8c9188;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.workspace-section-head strong {
    display: block;
    color: #3c4239;
    font-size: 0.78rem;
    font-weight: 900;
}

.workspace-section-head--split small {
    max-width: 260px;
    color: #9a9e97;
    font-size: 0.55rem;
    line-height: 1.4;
    text-align: right;
}

.workspace-item-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.workspace-item-card {
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 11px 12px;
    border: 1px solid rgba(55, 62, 51, 0.075);
    border-radius: 15px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 17px rgba(42, 48, 38, 0.025);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.workspace-item-card:hover {
    transform: translateY(-1px);
    border-color: rgba(111, 138, 76, 0.16);
    box-shadow: 0 10px 24px rgba(42, 48, 38, 0.05);
}

.workspace-item-card--live {
    border-color: rgba(53, 139, 88, 0.13);
    background: linear-gradient(145deg, rgba(251,253,249,0.98), rgba(246,250,243,0.94));
}

.workspace-item-card--activity {
    min-height: 78px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.workspace-recent-activity-list {
    padding-bottom: 2px;
}

.workspace-item-type-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f1f3ee;
    color: #727b6a;
    font-size: 0.76rem;
    font-weight: 950;
}

.workspace-item-type-icon.is-live {
    background: #eaf4e8;
    color: #35784e;
}

.workspace-item-type-icon.is-quote,
.workspace-empty-icon.is-quote {
    background: #f0edff;
    color: #6751c8;
}

.workspace-item-type-icon.is-route,
.workspace-empty-icon.is-route {
    background: #edf3e6;
    color: #6a8150;
}

.workspace-item-main {
    min-width: 0;
}

.workspace-item-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: #969b92;
    font-size: 0.52rem;
    font-weight: 780;
}

.workspace-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #42a06a;
    box-shadow: 0 0 0 3px rgba(66,160,106,0.10);
}

.workspace-quote-status {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.48rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.workspace-quote-status.is-ready {
    background: #e8f4e9;
    color: #39744c;
}

.workspace-quote-status.is-draft {
    background: #f0edff;
    color: #6751c8;
}

.workspace-item-title {
    display: block;
    overflow: hidden;
    color: #343a32;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-item-subtitle {
    margin-top: 3px;
    overflow: hidden;
    color: #7e8579;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 6px;
    color: #878d83;
    font-size: 0.54rem;
    font-weight: 680;
}

.workspace-item-meta span + span {
    position: relative;
}

.workspace-item-meta span + span::before {
    content: "·";
    position: absolute;
    left: -7px;
    color: #c2c5bf;
}

.workspace-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.workspace-item-actions--quote {
    min-width: 220px;
}

.workspace-action-primary,
.workspace-action-secondary,
.workspace-action-ghost,
.workspace-empty-action {
    min-height: 31px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 0.58rem;
    font-weight: 850;
    white-space: nowrap;
}

.workspace-action-primary,
.workspace-empty-action {
    border: 1px solid #566b46;
    background: #60794c;
    color: #ffffff;
}

.workspace-action-primary:hover,
.workspace-empty-action:hover {
    background: #50663f;
}

.workspace-action-secondary {
    border: 1px solid rgba(73, 84, 66, 0.12);
    background: #f7f8f5;
    color: #5e6758;
}

.workspace-action-ghost {
    border: 0;
    background: transparent;
    color: #72796d;
}

.workspace-icon-button {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(69, 77, 64, 0.08);
    border-radius: 8px;
    background: #f7f8f5;
    color: #9a9e97;
    font-size: 0.84rem;
    line-height: 1;
}

.workspace-icon-button:hover {
    border-color: rgba(181, 74, 78, 0.15);
    background: #fff5f5;
    color: #b54a4e;
}

.workspace-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.workspace-route-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(55, 62, 51, 0.075);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 6px 17px rgba(42, 48, 38, 0.025);
}

.workspace-route-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.workspace-route-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef3e8;
    color: #667c4e;
    font-size: 0.78rem;
    font-weight: 900;
}

.workspace-route-card > strong {
    display: block;
    overflow: hidden;
    color: #343a32;
    font-size: 0.75rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-route-card > p {
    min-height: 29px;
    margin: 4px 0 10px;
    display: -webkit-box;
    overflow: hidden;
    color: #858b81;
    font-size: 0.56rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.workspace-route-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 11px;
}

.workspace-route-metrics > span {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 9px;
    background: #f7f8f5;
    color: #596154;
    font-size: 0.57rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-route-metrics small {
    display: block;
    margin-bottom: 2px;
    color: #9a9e97;
    font-size: 0.45rem;
    font-weight: 780;
}

.workspace-route-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(55, 62, 51, 0.06);
}

.workspace-empty-state {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
}

.workspace-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 15px;
    background: #eef2e9;
    color: #6b7d59;
    font-size: 1rem;
    font-weight: 900;
}

.workspace-empty-state strong {
    color: #41483e;
    font-size: 0.82rem;
    font-weight: 900;
}

.workspace-empty-state p {
    max-width: 430px;
    margin: 6px 0 14px;
    color: #8b9087;
    font-size: 0.62rem;
    line-height: 1.5;
}

.workspace-account-actions {
    display: flex;
    gap: 7px;
}

.workspace-loading-state {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #858b81;
    font-size: 0.66rem;
    font-weight: 750;
}

/* =========================================================
   RESULT TOOLBAR v1 — COMPACT GEMINI ROUTE ADVICE + ACTIONS
   2026-08-20
   Removes the oversized Gemini card from the normal flow and
   keeps output actions in one compact dropdown.
========================================================= */

.logiccalc-telemetry-header {
    position: relative;
    z-index: 610;
    margin: 8px auto 10px !important;
    padding: 8px 14px 11px !important;
    gap: 14px;
}

.logiccalc-telemetry-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

/* Compact Gemini route-advice chip. */
.logiccalc-gemini-route-action {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 7px 11px 7px 8px !important;
    border: 1px solid rgba(118, 87, 232, 0.15) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, rgba(248, 245, 255, 0.97), rgba(255, 255, 255, 0.96)) !important;
    color: #5f46cb !important;
    box-shadow:
        0 7px 18px rgba(82, 62, 164, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    font-size: 0.71rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
    transition:
        transform 0.16s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.logiccalc-gemini-route-action:hover:not(:disabled),
.logiccalc-gemini-route-action.is-active {
    transform: translateY(-1px);
    border-color: rgba(118, 87, 232, 0.28) !important;
    background:
        linear-gradient(135deg, rgba(243, 238, 255, 0.99), rgba(255, 255, 255, 0.98)) !important;
    box-shadow:
        0 10px 24px rgba(82, 62, 164, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.logiccalc-gemini-route-action:disabled {
    opacity: 0.48;
    cursor: default;
    box-shadow: none !important;
}

.logiccalc-gemini-route-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(118, 87, 232, 0.10);
    border-radius: 9px;
    background: rgba(247, 242, 255, 0.92);
}

.logiccalc-gemini-route-logo {
    display: block;
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.logiccalc-gemini-route-label {
    width: max-content;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-gemini-route-chevron {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #7657e8;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.logiccalc-gemini-route-chevron.is-open {
    transform: rotate(90deg);
}

.logiccalc-gemini-route-chevron svg {
    width: 15px;
    height: 15px;
}

.logiccalc-gemini-route-loader {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid rgba(118, 87, 232, 0.18);
    border-top-color: #7657e8;
    border-radius: 50%;
    animation: logiccalcAiInsightSpin 0.75s linear infinite;
}

/* Single Actions button. */
.logiccalc-result-actions-wrap {
    position: relative;
    flex: 0 0 auto;
}

.logiccalc-result-actions-trigger {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 8px 13px !important;
    border: 1px solid rgba(43, 48, 39, 0.11) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #384137 !important;
    box-shadow:
        0 7px 18px rgba(36, 41, 31, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
}



.logiccalc-result-actions-trigger:hover,
.logiccalc-result-actions-trigger.is-open {
    border-color: rgba(118, 87, 232, 0.28) !important;

    background:
        linear-gradient(
            135deg,
            rgba(243, 238, 255, 0.99),
            rgba(255, 255, 255, 0.98)
        ) !important;

    color: #5f46cb !important;

    box-shadow:
        0 10px 24px rgba(82, 62, 164, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.logiccalc-result-actions-trigger > svg {
    color: #7657e8;
}

.logiccalc-result-actions-trigger:hover .logiccalc-result-actions-chevron,
.logiccalc-result-actions-trigger.is-open .logiccalc-result-actions-chevron {
    color: #7657e8;
}



.logiccalc-result-actions-chevron {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    color: #7b8178;
    transition: transform 0.18s ease;
}

.logiccalc-result-actions-trigger.is-open .logiccalc-result-actions-chevron {
    transform: rotate(180deg);
}

.logiccalc-result-actions-chevron svg {
    width: 14px;
    height: 14px;
}

.logiccalc-result-actions-menu {
    position: absolute;
    z-index: 1700;
    top: calc(100% + 9px);
    right: 0;
    width: 220px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid rgba(43, 48, 39, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow:
        0 20px 48px rgba(36, 41, 31, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    animation: logiccalcResultActionsIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logiccalc-result-actions-menu::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 24px;
    width: 10px;
    height: 10px;
    border-top: 1px solid rgba(43, 48, 39, 0.10);
    border-left: 1px solid rgba(43, 48, 39, 0.10);
    background: #ffffff;
    transform: rotate(45deg);
}

.logiccalc-result-actions-item {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #3b4339;
    text-align: left;
    font-size: 0.71rem;
    font-weight: 780;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.logiccalc-result-actions-item:hover,
.logiccalc-result-actions-item:focus-visible {
    outline: none;
    background: #f5f7f2;
    color: #253027;
    transform: translateX(1px);
}

.logiccalc-result-actions-item--quote {
    color: #4c6537;
}

.logiccalc-result-actions-item-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f0f4ea;
    color: #5c7a43;
}

.logiccalc-result-actions-item-icon svg {
    width: 16px;
    height: 16px;
}

@keyframes logiccalcResultActionsIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Gemini response appears only on demand, below the compact toolbar. */
.logiccalc-gemini-route-response {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin: -2px auto 11px;
    padding: 11px 14px 12px;
    border: 1px solid rgba(118, 87, 232, 0.13);
    border-left: 3px solid rgba(118, 87, 232, 0.52);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(249, 247, 255, 0.96), rgba(255, 255, 255, 0.94));
    box-shadow: 0 8px 22px rgba(82, 62, 164, 0.05);
    animation: logiccalcGeminiResponseIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logiccalc-gemini-route-response-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.logiccalc-gemini-route-response-head strong {
    font-size: 0.69rem;
    font-weight: 850;
    line-height: 1.2;
}

.logiccalc-gemini-route-response-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(244, 239, 255, 0.92);
}

.logiccalc-gemini-route-response-icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.logiccalc-gemini-route-response-body {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 29px !important;
    box-sizing: border-box !important;
    color: #5d6159;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.logiccalc-gemini-route-response-body p,
.logiccalc-gemini-route-response-body div,
.logiccalc-gemini-route-response-body span,
.logiccalc-gemini-route-response-body li {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

@keyframes logiccalcGeminiResponseIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 820px) {
    .logiccalc-telemetry-header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .logiccalc-telemetry-actions {
        width: 100%;
        justify-content: space-between;
    }

    /* Gemini + Actions — equal size */
.logiccalc-gemini-route-action,
.logiccalc-result-actions-trigger {
    width: 170px !important;
    min-width: 170px !important;

    height: 38px !important;
    min-height: 38px !important;

    box-sizing: border-box !important;
}

/* Gemini has a larger 26px icon, so its vertical padding must be smaller */
.logiccalc-gemini-route-action {
    padding: 5px 11px 5px 8px !important;
}

.logiccalc-result-actions-trigger {
    height: 47px !important;
    min-height: 47px !important;
}

    .logiccalc-gemini-route-action {
        min-width: 0;
        flex: 1 1 auto;
    }

    .logiccalc-gemini-route-label {
        max-width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-gemini-route-action,
    .logiccalc-gemini-route-chevron,
    .logiccalc-result-actions-trigger,
    .logiccalc-result-actions-chevron,
    .logiccalc-result-actions-item,
    .logiccalc-result-actions-menu,
    .logiccalc-gemini-route-response {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   GEMINI ROUTE ADVICE — TEXT LINK VARIANT
   Add this block at the VERY END of home.css.
   Keeps the existing button/handler for accessibility and logic,
   but visually renders it as a simple clickable text label.
========================================================= */

.logiccalc-gemini-route-action {
    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 5px 2px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    outline: none !important;

    gap: 5px !important;

    color: inherit !important;

    font-size: 0.72rem !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;

    transform: none !important;
}

/* Pure text: remove the old Gemini tile and arrow. */
.logiccalc-gemini-route-icon,
.logiccalc-gemini-route-chevron {
    display: none !important;
}

.logiccalc-gemini-route-label {
    width: auto !important;
    max-width: none !important;

    overflow: visible !important;
    text-overflow: clip !important;

    line-height: 1.2 !important;
    white-space: nowrap !important;

    transition:
        opacity 0.16s ease,
        filter 0.16s ease !important;
}

/* No pill returns on hover/open state. */
.logiccalc-gemini-route-action:hover:not(:disabled),
.logiccalc-gemini-route-action:focus,
.logiccalc-gemini-route-action:focus-visible,
.logiccalc-gemini-route-action.is-active {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* Small link-like interaction without turning it back into a button. */
.logiccalc-gemini-route-action:hover:not(:disabled) .logiccalc-gemini-route-label,
.logiccalc-gemini-route-action:focus-visible .logiccalc-gemini-route-label {
    opacity: 0.72;
}

.logiccalc-gemini-route-action:active:not(:disabled) .logiccalc-gemini-route-label {
    opacity: 0.55;
}

/* Keep loading visible next to the text. */
.logiccalc-gemini-route-loader {
    margin-left: 3px;
}

/* Disabled = readable, but clearly inactive. */
.logiccalc-gemini-route-action:disabled {
    opacity: 0.42 !important;
    cursor: default !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   MAP → SYSTEM TELEMETRY LOG — COMPACT VERTICAL GAP
   Pull the whole telemetry toolbar upward in normal document flow,
   so the result area below moves upward with it as well.
========================================================= */
.logiccalc-telemetry-header {
    margin-top: -14px !important;
}

/* =========================================================
   ROUTE ALTERNATIVES v1
   Temporary English-first validation UI. Localization follows
   after routing/selection behaviour is accepted.
========================================================= */
.logiccalc-route-alternatives {
    margin: 14px 14px 0;
    padding: 14px;
    border: 1px solid rgba(43, 48, 39, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 28px rgba(44, 48, 41, 0.045);
}

.logiccalc-route-alternatives + .logiccalc-telemetry-header {
    margin-top: 0 !important;
}

.logiccalc-route-alternatives-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 11px;
    padding: 0 2px;
}

.logiccalc-route-alternatives-head > div {
    min-width: 0;
}

.logiccalc-route-alternatives-head strong {
    display: block;
    margin-top: 2px;
    color: #2c312a;
    font-size: 0.9rem;
    font-weight: 880;
    letter-spacing: -0.2px;
}

.logiccalc-route-alternatives-eyebrow {
    display: block;
    color: #758263;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.logiccalc-route-alternatives-hint {
    flex: 0 0 auto;
    color: #8a8e86;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.logiccalc-route-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.logiccalc-route-alternatives-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.logiccalc-route-alternatives-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.logiccalc-route-alternative-card {
    min-width: 0;
    padding: 12px;
    text-align: left;
    border: 1px solid rgba(51, 57, 47, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: #252a23;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.logiccalc-route-alternative-card:hover {
    transform: translateY(-2px);
    border-color: rgba(101, 113, 124, 0.26);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(44, 48, 41, 0.07);
}

.logiccalc-route-alternative-card:focus-visible {
    outline: 2px solid rgba(118, 87, 232, 0.42);
    outline-offset: 2px;
}

.logiccalc-route-alternative-card.is-selected {
    border-color: rgba(118, 87, 232, 0.30);
    background: rgba(251, 249, 255, 0.98);
    box-shadow:
        0 10px 24px rgba(118, 87, 232, 0.075),
        inset 0 0 0 1px rgba(118, 87, 232, 0.045);
}

.logiccalc-route-alternative-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
}

.logiccalc-route-alternative-title {
    min-width: 0;
    overflow: hidden;
    color: #2a2f28;
    font-size: 0.78rem;
    font-weight: 880;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-route-alternative-active {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(118, 87, 232, 0.10);
    color: #6549d2;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.logiccalc-route-alternative-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 21px;
    margin-top: 6px;
}

.logiccalc-route-alternative-badge {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 2px 6px;
    border: 1px solid rgba(120, 150, 79, 0.16);
    border-radius: 999px;
    background: rgba(232, 239, 217, 0.62);
    color: #58703b;
    font-size: 0.55rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.logiccalc-route-alternative-badge.is-cost {
    border-color: rgba(35, 138, 87, 0.14);
    background: rgba(226, 242, 233, 0.72);
    color: #277450;
}

.logiccalc-route-alternative-badge.is-fast {
    border-color: rgba(118, 87, 232, 0.14);
    background: rgba(240, 235, 255, 0.78);
    color: #6650b9;
}

.logiccalc-route-alternative-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 9px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(51, 57, 47, 0.075);
}

.logiccalc-route-alternative-metrics > span,
.logiccalc-route-alternative-costline > span {
    min-width: 0;
}

.logiccalc-route-alternative-metrics small,
.logiccalc-route-alternative-costline small {
    display: block;
    margin-bottom: 1px;
    color: #8a8e86;
    font-size: 0.54rem;
    font-weight: 760;
    line-height: 1.2;
}

.logiccalc-route-alternative-metrics strong,
.logiccalc-route-alternative-costline strong {
    display: block;
    overflow: hidden;
    color: #30352d;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-route-alternative-costline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(248, 248, 248, 0.88);
}

.logiccalc-route-alternative-card.is-selected .logiccalc-route-alternative-costline {
    background: rgba(240, 235, 255, 0.64);
}

.logiccalc-route-alternative-delta {
    display: block;
    margin-top: 8px;
    color: #70766c;
    font-size: 0.61rem;
    font-weight: 780;
    line-height: 1.35;
}

.logiccalc-route-alternative-delta.is-active {
    color: #6549d2;
}

@media (max-width: 760px) {
    .logiccalc-route-alternatives {
        margin: 12px 10px 0;
        padding: 11px;
        border-radius: 17px;
    }

    .logiccalc-route-alternatives-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .logiccalc-route-alternatives-hint {
        white-space: normal;
    }

    .logiccalc-route-alternative-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-route-alternative-card {
        transition: none;
    }

    .logiccalc-route-alternative-card:hover {
        transform: none;
    }
}

/* =========================================================
   ROUTE ALTERNATIVES v1.5 — SMOOTH LOADING / REVEAL
   UX-only: calculation logic remains unchanged.
========================================================= */
.logiccalc-route-alternatives {
    min-height: 250px;
    animation: logiccalcAlternativesShellIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logiccalc-route-alternatives.is-ready {
    min-height: 0;
}

.logiccalc-route-alternatives-hint.is-loading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7d8279;
}

.logiccalc-route-alternatives-loading-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #869578;
    box-shadow: 0 0 0 0 rgba(134, 149, 120, 0.24);
    animation: logiccalcAlternativeLoadingPulse 1.45s ease-in-out infinite;
}

.logiccalc-route-alternatives-skeleton-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.logiccalc-route-alternative-skeleton {
    position: relative;
    min-height: 194px;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
    transform: none !important;
    border-color: rgba(51, 57, 47, 0.075);
    background: rgba(249, 249, 246, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.logiccalc-route-alternative-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-115%);
    background: linear-gradient(
        100deg,
        transparent 16%,
        rgba(255, 255, 255, 0.22) 36%,
        rgba(255, 255, 255, 0.72) 50%,
        rgba(255, 255, 255, 0.22) 64%,
        transparent 84%
    );
    animation: logiccalcAlternativeShimmer 1.45s ease-in-out infinite;
}

.logiccalc-route-alternatives-skeleton-grid .logiccalc-route-alternative-skeleton:nth-child(2)::after {
    animation-delay: 0.10s;
}

.logiccalc-route-alternatives-skeleton-grid .logiccalc-route-alternative-skeleton:nth-child(3)::after {
    animation-delay: 0.20s;
}

.logiccalc-route-skeleton-block {
    display: block;
    border-radius: 999px;
    background: #e8eae4;
}

.logiccalc-route-skeleton-row,
.logiccalc-route-skeleton-badges,
.logiccalc-route-skeleton-costline {
    display: flex;
    align-items: center;
}

.logiccalc-route-skeleton-row-top {
    justify-content: space-between;
    gap: 12px;
}

.logiccalc-route-skeleton-badges {
    gap: 6px;
    margin-top: 10px;
}

.skeleton-title {
    width: 42%;
    height: 11px;
}

.skeleton-pill {
    width: 45px;
    height: 18px;
}

.skeleton-badge {
    width: 64px;
    height: 17px;
}

.skeleton-badge.short {
    width: 46px;
}

.logiccalc-route-skeleton-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 12px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid rgba(51, 57, 47, 0.055);
}

.logiccalc-route-skeleton-metrics > span {
    min-width: 0;
}

.skeleton-label {
    width: 48%;
    height: 6px;
    margin-bottom: 5px;
    background: #eceee9;
}

.skeleton-value {
    width: 70%;
    height: 9px;
}

.logiccalc-route-skeleton-costline {
    gap: 8px;
    margin-top: 12px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(241, 243, 238, 0.68);
}

.skeleton-cost {
    width: 31%;
    height: 20px;
    border-radius: 6px;
}

.skeleton-delta {
    width: 56%;
    height: 7px;
    margin-top: 10px;
}

.logiccalc-route-alternatives.is-ready .logiccalc-route-alternative-card {
    animation: logiccalcAlternativeCardReveal 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logiccalc-route-alternatives.is-ready .logiccalc-route-alternative-card:nth-child(2) {
    animation-delay: 0.065s;
}

.logiccalc-route-alternatives.is-ready .logiccalc-route-alternative-card:nth-child(3) {
    animation-delay: 0.13s;
}

/* Leaflet SVG paths created for Route Alternatives.  JS starts them at
   zero opacity, then refreshes to their real selected / alternative style. */
.leaflet-overlay-pane path.logiccalc-route-alternative-line {
    transition:
        stroke-opacity 0.38s ease,
        stroke-width 0.20s ease,
        stroke 0.20s ease;
}

@keyframes logiccalcAlternativesShellIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logiccalcAlternativeCardReveal {
    from {
        opacity: 0;
        transform: translateY(7px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes logiccalcAlternativeShimmer {
    0% {
        transform: translateX(-115%);
    }
    55%,
    100% {
        transform: translateX(115%);
    }
}

@keyframes logiccalcAlternativeLoadingPulse {
    0%,
    100% {
        opacity: 0.58;
        box-shadow: 0 0 0 0 rgba(134, 149, 120, 0.18);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(134, 149, 120, 0.10);
    }
}

@media (max-width: 760px) {
    .logiccalc-route-alternatives {
        min-height: 0;
    }

    .logiccalc-route-alternatives-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .logiccalc-route-alternatives-skeleton-grid .logiccalc-route-alternative-skeleton:nth-child(3) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-route-alternatives,
    .logiccalc-route-alternatives.is-ready .logiccalc-route-alternative-card,
    .logiccalc-route-alternative-skeleton::after,
    .logiccalc-route-alternatives-loading-dot {
        animation: none !important;
    }

    .leaflet-overlay-pane path.logiccalc-route-alternative-line {
        transition: none !important;
    }
}

/* =========================================================
   STOP ORDER OPTIMIZER v1
   English-first validation UI. No localization keys yet.
========================================================= */
.stop-order-optimizer-trigger {
    gap: 6px;
    border: 1px solid rgba(91, 121, 67, 0.16) !important;
    background: rgba(242, 246, 238, 0.78) !important;
    color: #5d704f !important;
}

.stop-order-optimizer-trigger svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.stop-order-optimizer-trigger:hover:not(:disabled) {
    border-color: rgba(91, 121, 67, 0.27) !important;
    background: rgba(235, 242, 229, 0.96) !important;
    color: #4c623f !important;
}

.stop-order-optimizer-trigger:disabled {
    opacity: 0.55;
    cursor: default;
}

.stop-order-optimizer-panel {
    margin: -2px 0 16px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(77, 91, 68, 0.105);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(250, 251, 248, 0.98), rgba(246, 248, 243, 0.96));
    box-shadow:
        0 10px 26px rgba(43, 51, 38, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: stopOrderPanelIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stop-order-optimizer-panel.is-loading {
    min-height: 128px;
}

.stop-order-optimizer-head,
.stop-order-optimizer-message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stop-order-optimizer-head > div,
.stop-order-optimizer-message > div {
    min-width: 0;
}

.stop-order-optimizer-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #7a896a;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.stop-order-optimizer-head strong,
.stop-order-optimizer-message strong {
    display: block;
    color: #333a30;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: -0.15px;
    line-height: 1.3;
}

.stop-order-optimizer-live {
    position: relative;
    flex: 0 0 auto;
    padding: 4px 8px 4px 18px;
    border: 1px solid rgba(94, 132, 70, 0.14);
    border-radius: 999px;
    background: rgba(234, 242, 228, 0.75);
    color: #627553;
    font-size: 0.54rem;
    font-weight: 850;
}

.stop-order-optimizer-live::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7d9a61;
    transform: translateY(-50%);
    animation: stopOrderLivePulse 1.25s ease-in-out infinite;
}

.stop-order-optimizer-close {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #a0a69c;
    font-size: 1.05rem;
    line-height: 1;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.stop-order-optimizer-close:hover {
    background: rgba(70, 79, 65, 0.06);
    color: #626a5e;
    transform: scale(1.04);
}

.stop-order-optimizer-loading-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 8px;
    margin-top: 13px;
}

.stop-order-optimizer-loading-grid span {
    height: 43px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(66, 75, 62, 0.055);
    border-radius: 11px;
    background: #f0f2ed;
}

.stop-order-optimizer-loading-grid span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.62) 48%,
        transparent 100%);
    animation: stopOrderShimmer 1.35s ease-in-out infinite;
}

.stop-order-optimizer-loading-grid span:nth-child(2)::after {
    animation-delay: 90ms;
}

.stop-order-optimizer-loading-grid span:nth-child(3)::after {
    animation-delay: 170ms;
}

.stop-order-optimizer-note {
    display: block;
    margin-top: 9px;
    color: #92988f;
    font-size: 0.56rem;
    font-weight: 680;
    line-height: 1.4;
}

.stop-order-sequence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px;
    overflow-x: auto;
    border: 1px solid rgba(64, 73, 60, 0.065);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.70);
    scrollbar-width: thin;
}

.stop-order-sequence-stop {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    padding: 5px 7px;
    border-radius: 9px;
    background: rgba(244, 247, 241, 0.92);
}

.stop-order-sequence-stop > b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    border-radius: 50%;
    background: #78955f;
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 900;
}

.stop-order-sequence-stop > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.stop-order-sequence-stop strong {
    max-width: 155px;
    overflow: hidden;
    color: #4b5347;
    font-size: 0.60rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stop-order-sequence-stop small {
    margin-top: 1px;
    color: #969c92;
    font-size: 0.49rem;
    font-weight: 730;
}

.stop-order-sequence-arrow {
    flex: 0 0 auto;
    color: #aeb4aa;
    font-size: 0.72rem;
    font-weight: 900;
}

.stop-order-optimizer-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.stop-order-optimizer-metrics > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(63, 72, 59, 0.065);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.72);
}

.stop-order-optimizer-metrics small {
    display: block;
    color: #92988f;
    font-size: 0.51rem;
    font-weight: 780;
}

.stop-order-optimizer-metrics strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #3b4238;
    font-size: 0.70rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stop-order-optimizer-metrics span {
    display: block;
    margin-top: 2px;
    font-size: 0.52rem;
    font-weight: 820;
}

.stop-order-optimizer-metrics .is-saving {
    color: #39845a;
}

.stop-order-optimizer-metrics .is-costlier {
    color: #a66b46;
}

.stop-order-optimizer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
}

.stop-order-optimizer-footer > span {
    min-width: 0;
    color: #858c81;
    font-size: 0.54rem;
    font-weight: 680;
    line-height: 1.4;
}

.stop-order-optimizer-apply {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 6px 11px;
    border: 1px solid #647c51;
    border-radius: 9px;
    background: #6f8959;
    color: #ffffff;
    font-size: 0.59rem;
    font-weight: 880;
    box-shadow: 0 6px 14px rgba(83, 108, 63, 0.12);
}

.stop-order-optimizer-apply:hover {
    background: #60794d;
}

@keyframes stopOrderPanelIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes stopOrderLivePulse {
    0%, 100% { opacity: 0.45; transform: translateY(-50%) scale(0.85); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}

@keyframes stopOrderShimmer {
    to { transform: translateX(110%); }
}

@media (max-width: 760px) {
    .stop-order-optimizer-metrics {
        grid-template-columns: 1fr;
    }

    .stop-order-optimizer-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .stop-order-optimizer-apply {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stop-order-optimizer-panel,
    .stop-order-optimizer-live::before,
    .stop-order-optimizer-loading-grid span::after {
        animation: none !important;
    }
}

/* Extra toolbar room for the Optimize order action.
   Keep the three controls visually grouped and move the whole action
   cluster a little farther left from the card's right edge. */
.route-builder-toolbar-actions {
    flex-basis: 62%;
    max-width: 62%;
    box-sizing: border-box;
    padding-right: 42px;
}

/* =========================================================
   ROUTE BUILDER TOOLBAR — LANGUAGE-SAFE LAYOUT v1.3
   Replaces the old percentage-based toolbar sizing.
   Keeps Actions / Optimize order / Add Point on one clean row
   whenever space allows, without clipping longer translations.
========================================================= */
.route-builder-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    column-gap: 14px !important;
    width: 100%;
}

.route-builder-toolbar-title {
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.route-builder-toolbar-actions {
    display: flex !important;
    flex: none !important;
    flex-basis: auto !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-right: 22px !important;
    box-sizing: border-box;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
}

.route-builder-toolbar-actions > * {
    flex: 0 0 auto !important;
    min-width: 0;
}

.route-builder-toolbar-button,
.route-builder-toolbar-actions .premium-menu-trigger,
.route-builder-toolbar-actions .stop-order-optimizer-trigger {
    flex: 0 0 auto !important;
    min-width: max-content;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.69rem !important;
    letter-spacing: -0.01em;
    white-space: nowrap !important;
}

/* Long localized labels get a little more room by letting the title
   wrap naturally before any action button is squeezed or clipped. */
html[lang="de"] .route-builder-toolbar,
html[lang="fr"] .route-builder-toolbar,
html[lang="it"] .route-builder-toolbar,
html[lang="es"] .route-builder-toolbar,
html[lang="pl"] .route-builder-toolbar,
html[lang="pt"] .route-builder-toolbar,
html[lang="ro"] .route-builder-toolbar,
html[lang="uk"] .route-builder-toolbar {
    column-gap: 10px !important;
}

html[lang="de"] .route-builder-toolbar-actions,
html[lang="fr"] .route-builder-toolbar-actions,
html[lang="it"] .route-builder-toolbar-actions,
html[lang="es"] .route-builder-toolbar-actions,
html[lang="pl"] .route-builder-toolbar-actions,
html[lang="pt"] .route-builder-toolbar-actions,
html[lang="ro"] .route-builder-toolbar-actions,
html[lang="uk"] .route-builder-toolbar-actions {
    gap: 4px !important;
    padding-right: 18px !important;
}

html[lang="de"] .route-builder-toolbar-button,
html[lang="fr"] .route-builder-toolbar-button,
html[lang="it"] .route-builder-toolbar-button,
html[lang="es"] .route-builder-toolbar-button,
html[lang="pl"] .route-builder-toolbar-button,
html[lang="pt"] .route-builder-toolbar-button,
html[lang="ro"] .route-builder-toolbar-button,
html[lang="uk"] .route-builder-toolbar-button,
html[lang="de"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="fr"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="it"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="es"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="pl"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="pt"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="ro"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="uk"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="de"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="fr"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="it"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="es"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="pl"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="pt"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="ro"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="uk"] .route-builder-toolbar-actions .stop-order-optimizer-trigger {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 0.665rem !important;
}

/* Safety net for genuinely narrow route-builder cards: wrap the toolbar
   cleanly instead of cutting off translated labels. */
@container (max-width: 610px) {
    .route-builder-toolbar {
        grid-template-columns: 1fr !important;
        row-gap: 9px !important;
    }

    .route-builder-toolbar-actions {
        width: 100% !important;
        padding-right: 0 !important;
        justify-content: flex-start !important;
    }
}

/* =========================================================
   DRIVER ROUTE SHARE v1
========================================================= */
.logiccalc-result-actions-item--driver-share .logiccalc-result-actions-item-icon {
    color: #5f7d47;
    background: rgba(235, 242, 229, 0.90);
}

.driver-share-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(32, 37, 30, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: driverShareBackdropIn 0.18s ease both;
}

.driver-share-modal {
    width: min(520px, 100%);
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 28px 80px rgba(30, 36, 27, 0.18);
    animation: driverShareModalIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.driver-share-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(53, 60, 49, 0.07);
}

.driver-share-modal-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #73845f;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.driver-share-modal-head h3 {
    margin: 0;
    color: #2d332a;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.driver-share-modal-close {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(57, 64, 53, 0.08);
    border-radius: 50%;
    background: #f6f7f3;
    color: #7d8379;
    font-size: 1.1rem;
    line-height: 1;
}

.driver-share-modal-loading,
.driver-share-modal-summary,
.driver-share-modal-error {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 14px;
}

.driver-share-modal-loading {
    border: 1px solid rgba(93, 111, 79, 0.08);
    background: #f7f9f4;
}

.driver-share-modal-summary {
    border: 1px solid rgba(52, 139, 88, 0.12);
    background: #f1f8f3;
}

.driver-share-modal-error {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(181, 74, 78, 0.12);
    background: #fff5f5;
}

.driver-share-modal-loading strong,
.driver-share-modal-summary strong,
.driver-share-modal-error strong {
    display: block;
    color: #3e4639;
    font-size: 0.72rem;
    font-weight: 880;
}

.driver-share-modal-loading span:not(.driver-share-modal-spinner),
.driver-share-modal-summary span:not(.driver-share-modal-summary-icon),
.driver-share-modal-error span {
    display: block;
    margin-top: 2px;
    color: #7e8579;
    font-size: 0.63rem;
    line-height: 1.45;
}

.driver-share-modal-spinner {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border: 3px solid #e1e6dd;
    border-top-color: #718b56;
    border-radius: 50%;
    animation: driverShareSpin 0.8s linear infinite;
}

.driver-share-modal-summary-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dcefe2;
    color: #348b58;
    font-size: 0.75rem;
    font-weight: 950;
}

.driver-share-link-label {
    display: block;
    margin: 16px 0 6px;
    color: #70786b;
    font-size: 0.61rem;
    font-weight: 820;
}

.driver-share-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.driver-share-link-row input {
    min-width: 0;
    min-height: 39px;
    padding: 8px 10px;
    border: 1px solid rgba(57, 65, 53, 0.10);
    border-radius: 11px;
    outline: none;
    background: #f8f9f6;
    color: #596153;
    font-size: 0.66rem;
}

.driver-share-link-row button,
.driver-share-action-secondary,
.driver-share-action-primary {
    min-height: 39px;
    padding: 8px 13px;
    border-radius: 11px;
    font-size: 0.66rem;
    font-weight: 850;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.driver-share-link-row button,
.driver-share-action-secondary {
    border: 1px solid rgba(57, 65, 53, 0.10);
    background: #f7f8f5;
    color: #626b5c;
}

.driver-share-link-row button:hover,
.driver-share-action-secondary:hover,
.driver-share-action-primary:hover {
    transform: translateY(-1px);
}

.driver-share-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 8px;
    margin-top: 14px;
}

.driver-share-action-primary {
    border: 1px solid #536946;
    background: #536946;
    color: #ffffff;
    box-shadow: 0 9px 20px rgba(83, 105, 70, 0.16);
}

.driver-share-action-message,
.driver-share-modal-expiry {
    display: block;
    margin-top: 9px;
    color: #81877d;
    font-size: 0.59rem;
    line-height: 1.4;
}

.driver-share-action-message {
    color: #617653;
    font-weight: 760;
}

@keyframes driverShareSpin {
    to { transform: rotate(360deg); }
}

@keyframes driverShareBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes driverShareModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 560px) {
    .driver-share-modal-backdrop {
        padding: 10px;
        align-items: end;
    }

    .driver-share-modal {
        width: 100%;
        padding: 17px;
        border-radius: 20px 20px 14px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .driver-share-modal-backdrop,
    .driver-share-modal,
    .driver-share-modal-spinner {
        animation: none !important;
    }
}

/* =========================================================
   ROUTE BUILDER — LANGUAGE-SAFE INLINE TOOLBAR
   Desktop: title + all actions stay in the SAME row.
   Long translations may wrap only inside the title area.
   Mobile: toolbar stacks cleanly.
========================================================= */

.route-builder-toolbar {
    display: grid !important;
    grid-template-columns: minmax(140px, 36%) minmax(0, 64%) !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
}

.route-builder-toolbar-title {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    font-size: 0.97rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.route-builder-toolbar-actions {
    display: flex !important;
    flex: none !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
}

.route-builder-toolbar-actions > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.route-builder-toolbar-button,
.route-builder-toolbar-actions .premium-menu-trigger,
.route-builder-toolbar-actions .stop-order-optimizer-trigger {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 5px 7px !important;
    font-size: 0.64rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
}

/* Give translated actions a little more horizontal room. */
html[lang="de"] .route-builder-toolbar,
html[lang="fr"] .route-builder-toolbar,
html[lang="it"] .route-builder-toolbar,
html[lang="es"] .route-builder-toolbar,
html[lang="pl"] .route-builder-toolbar,
html[lang="uk"] .route-builder-toolbar,
html[lang="pt"] .route-builder-toolbar,
html[lang="cs"] .route-builder-toolbar,
html[lang="ro"] .route-builder-toolbar,
html[lang="sk"] .route-builder-toolbar,
html[lang="hr"] .route-builder-toolbar,
html[lang="sl"] .route-builder-toolbar,
html[lang="nl"] .route-builder-toolbar {
    grid-template-columns: minmax(125px, 32%) minmax(0, 68%) !important;
    column-gap: 6px !important;
}

html[lang="de"] .route-builder-toolbar-title,
html[lang="fr"] .route-builder-toolbar-title,
html[lang="it"] .route-builder-toolbar-title,
html[lang="es"] .route-builder-toolbar-title,
html[lang="pl"] .route-builder-toolbar-title,
html[lang="uk"] .route-builder-toolbar-title,
html[lang="pt"] .route-builder-toolbar-title,
html[lang="cs"] .route-builder-toolbar-title,
html[lang="ro"] .route-builder-toolbar-title,
html[lang="sk"] .route-builder-toolbar-title,
html[lang="hr"] .route-builder-toolbar-title,
html[lang="sl"] .route-builder-toolbar-title,
html[lang="nl"] .route-builder-toolbar-title {
    font-size: 0.92rem !important;
}

html[lang="de"] .route-builder-toolbar-button,
html[lang="fr"] .route-builder-toolbar-button,
html[lang="it"] .route-builder-toolbar-button,
html[lang="es"] .route-builder-toolbar-button,
html[lang="pl"] .route-builder-toolbar-button,
html[lang="uk"] .route-builder-toolbar-button,
html[lang="pt"] .route-builder-toolbar-button,
html[lang="cs"] .route-builder-toolbar-button,
html[lang="ro"] .route-builder-toolbar-button,
html[lang="sk"] .route-builder-toolbar-button,
html[lang="hr"] .route-builder-toolbar-button,
html[lang="sl"] .route-builder-toolbar-button,
html[lang="nl"] .route-builder-toolbar-button,
html[lang="de"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="fr"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="it"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="es"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="pl"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="uk"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="pt"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="cs"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="ro"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="sk"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="hr"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="sl"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="nl"] .route-builder-toolbar-actions .premium-menu-trigger,
html[lang="de"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="fr"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="it"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="es"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="pl"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="uk"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="pt"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="cs"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="ro"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="sk"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="hr"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="sl"] .route-builder-toolbar-actions .stop-order-optimizer-trigger,
html[lang="nl"] .route-builder-toolbar-actions .stop-order-optimizer-trigger {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 0.595rem !important;
}

/* Real phone layout: readability wins over forcing four items into one row. */
@media (max-width: 575.98px) {
    .route-builder-toolbar {
        grid-template-columns: 1fr !important;
        row-gap: 8px !important;
    }

    .route-builder-toolbar-title {
        width: 100% !important;
        font-size: 1rem !important;
    }

    .route-builder-toolbar-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   ROUTE ALTERNATIVES v3 — MAP-INTEGRATED FIRST CONCEPT
   Visual/UX only. Existing route selection, hover preview,
   economics, toll and downstream calculations stay untouched.
========================================================= */

.logiccalc-map-stage {
    position: relative;
    width: 100%;
    container-type: inline-size;
}

/* Give the route itself more vertical room now that comparison lives on map. */
.premium-command-column .logiccalc-map-stage #map {
    height: 780px !important;
    min-height: 780px !important;
}

/* Floating glass dock inside the map. Keep 28px clearance for OSM attribution. */
.logiccalc-map-stage .logiccalc-route-alternatives--map {
    position: absolute;
    z-index: 850;
    left: 16px;
    right: 16px;
    bottom: 28px;

    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;

    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 18px !important;

    background: rgba(252, 252, 250, 0.88) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);

    box-shadow:
        0 18px 46px rgba(37, 42, 34, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.logiccalc-route-alternatives-head--map {
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 0 2px !important;
}

.logiccalc-route-alternatives-head--map strong {
    margin-top: 1px !important;
    font-size: 0.78rem !important;
    letter-spacing: -0.12px !important;
}

.logiccalc-route-alternatives--map .logiccalc-route-alternatives-eyebrow {
    font-size: 0.50rem !important;
    letter-spacing: 0.11em !important;
}

.logiccalc-route-alternatives--map .logiccalc-route-alternatives-hint {
    font-size: 0.57rem !important;
}

.logiccalc-route-alternatives-grid--map {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

/* Dynamic column count: 1 / 2 / 3 real alternatives must always fill the dock. */
.logiccalc-route-alternatives-grid--map.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.logiccalc-route-alternatives-grid--map.is-single {
    grid-template-columns: minmax(0, 1fr) !important;
}

.logiccalc-route-alternative-card--map {
    min-height: 112px !important;
    padding: 10px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.91) !important;
    box-shadow:
        0 5px 15px rgba(38, 43, 35, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.logiccalc-route-alternative-card--map:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(118, 87, 232, 0.20) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow:
        0 9px 22px rgba(44, 48, 41, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.logiccalc-route-alternative-card--map.is-selected {
    border-color: rgba(118, 87, 232, 0.36) !important;
    background:
        linear-gradient(145deg, rgba(252, 249, 255, 0.98), rgba(247, 244, 255, 0.94)) !important;
    box-shadow:
        0 10px 24px rgba(118, 87, 232, 0.10),
        inset 0 0 0 1px rgba(118, 87, 232, 0.055) !important;
}

.logiccalc-route-alternative-topline--map {
    min-height: 22px;
    gap: 7px !important;
}

.logiccalc-route-alternatives--map .logiccalc-route-alternative-title {
    font-size: 0.69rem !important;
    line-height: 1.15 !important;
}

.logiccalc-route-alternatives--map .logiccalc-route-alternative-active,
.logiccalc-route-alternatives--map .logiccalc-route-alternative-badge {
    padding: 3px 6px !important;
    border-radius: 999px !important;
    font-size: 0.47rem !important;
}

.logiccalc-route-alternative-badges--map {
    min-height: 16px;
    margin-top: 2px !important;
    gap: 4px !important;
}

.logiccalc-map-alt-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 7px;
}

.logiccalc-map-alt-metrics > span {
    min-width: 0;
}

.logiccalc-map-alt-metrics small {
    display: block;
    margin-bottom: 1px;
    color: #8b8f87;
    font-size: 0.46rem;
    font-weight: 780;
    line-height: 1.15;
}

.logiccalc-map-alt-metrics strong {
    display: block;
    overflow: hidden;
    color: #292e27;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-route-alternative-delta--map {
    margin-top: 7px !important;
    overflow: hidden;
    font-size: 0.52rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-map-alt-skeleton-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.logiccalc-map-alt-skeleton-metrics > span {
    min-width: 0;
}

.logiccalc-route-alternative-skeleton--map {
    min-height: 112px !important;
}

.logiccalc-route-alternative-skeleton--map .skeleton-delta {
    width: 52% !important;
    margin-top: 10px !important;
}

/* Compact laptop widths: keep the dock in-map, but make cards horizontally scrollable. */
@container (max-width: 760px) {
    /* Three alternatives may scroll horizontally when the map column is genuinely narrow. */
    .logiccalc-route-alternatives-grid--map {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 3px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .logiccalc-route-alternative-card--map {
        flex: 0 0 215px !important;
        scroll-snap-align: start;
    }

    /* But with only two real alternatives, never leave an empty third-column gap. */
    .logiccalc-route-alternatives-grid--map.is-two {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    .logiccalc-route-alternatives-grid--map.is-two .logiccalc-route-alternative-card--map {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .logiccalc-route-alternatives-grid--map.is-single {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: visible !important;
        padding-bottom: 0;
    }

    .logiccalc-route-alternatives-grid--map.is-single .logiccalc-route-alternative-card--map {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
    }
}

/* Phone/tablet: do not cover most of the map. The same cards become a dock just below it. */
@media (max-width: 767.98px) {
    .premium-command-column .logiccalc-map-stage #map {
        height: 540px !important;
        min-height: 540px !important;
    }

    .logiccalc-map-stage .logiccalc-route-alternatives--map {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: auto;

        margin: 10px 0 0 !important;
        border-color: rgba(43, 48, 39, 0.09) !important;
        background: rgba(255, 255, 255, 0.90) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .logiccalc-route-alternatives-head--map {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-route-alternative-card--map {
        transition: none !important;
    }
}


/* =========================================================
   LOGICALC — DESKTOP ON MOBILE CLEANUP v2
   2026-08-21

   Intent:
   - KEEP the existing 1280px desktop workspace on phones.
   - DO NOT stack the main workspace into one long mobile column.
   - Neutralize only the responsive rules that create a mixed
     desktop/mobile layout on narrow touch screens.
   - Desktop/laptop layout remains unchanged.
========================================================= */

@media (max-width: 767.98px) {
    /* -----------------------------------------------------
       1. Preserve the existing desktop canvas exactly.
       ----------------------------------------------------- */
    html,
    body {
        min-width: 1280px !important;
    }

    html {
        overflow-x: auto !important;
    }

    body {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    #main-ui.premium-app {
        width: 100% !important;
        min-width: 1280px !important;
        max-width: 1740px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 28px 8px !important;
    }

    .premium-workspace {
        flex-wrap: nowrap !important;
    }

    .premium-route-column {
        width: 41% !important;
        max-width: 41% !important;
        flex: 0 0 41% !important;
    }

    .premium-command-column {
        width: 59% !important;
        max-width: 59% !important;
        flex: 0 0 59% !important;
        position: static !important;
    }

    /* -----------------------------------------------------
       2. Keep the desktop header/nav geometry.
       ----------------------------------------------------- */
    .premium-header.apple-header,
    .premium-header.apple-header.header-scrolled {
        width: max(100vw, 1280px) !important;
        margin-right: min(0px, calc(50% - 50vw)) !important;
        margin-left: min(0px, calc(50% - 50vw)) !important;
        flex-wrap: nowrap !important;
    }

    .premium-nav {
        width: auto !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }

    /* -----------------------------------------------------
       3. Route Builder toolbar must stay in the desktop row.
       The older phone rule stacked it and created a mixed UI.
       ----------------------------------------------------- */
    .route-builder-toolbar {
        grid-template-columns: minmax(140px, 36%) minmax(0, 64%) !important;
        row-gap: 0 !important;
        column-gap: 8px !important;
    }

    .route-builder-toolbar-title {
        width: auto !important;
        font-size: 0.97rem !important;
    }

    .route-builder-toolbar-actions {
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }

    /* Keep the language-safe desktop split for longer labels. */
    html[lang="de"] .route-builder-toolbar,
    html[lang="fr"] .route-builder-toolbar,
    html[lang="it"] .route-builder-toolbar,
    html[lang="es"] .route-builder-toolbar,
    html[lang="pl"] .route-builder-toolbar,
    html[lang="uk"] .route-builder-toolbar,
    html[lang="pt"] .route-builder-toolbar,
    html[lang="cs"] .route-builder-toolbar,
    html[lang="ro"] .route-builder-toolbar,
    html[lang="sk"] .route-builder-toolbar,
    html[lang="hr"] .route-builder-toolbar,
    html[lang="sl"] .route-builder-toolbar,
    html[lang="nl"] .route-builder-toolbar {
        grid-template-columns: minmax(125px, 32%) minmax(0, 68%) !important;
        column-gap: 6px !important;
    }

    /* -----------------------------------------------------
       4. Keep Route Alternatives inside the map on phones.
       The previous phone rule moved the dock below the map,
       which made the page look half-mobile / half-desktop.
       ----------------------------------------------------- */
    .premium-command-column .logiccalc-map-stage #map {
        height: 720px !important;
        min-height: 720px !important;
    }

    .logiccalc-map-stage .logiccalc-route-alternatives--map {
        position: absolute !important;
        z-index: 850 !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 28px !important;

        margin: 0 !important;
        padding: 12px !important;

        border-color: rgba(255, 255, 255, 0.82) !important;
        background: rgba(252, 252, 250, 0.88) !important;
        -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
        backdrop-filter: blur(16px) saturate(125%) !important;
    }

    .logiccalc-route-alternatives-head--map {
        align-items: center !important;
        flex-direction: row !important;
        gap: 14px !important;
    }

    /* -----------------------------------------------------
       5. Result toolbar stays compact and horizontal.
       ----------------------------------------------------- */
    .logiccalc-telemetry-header {
        align-items: center !important;
        flex-direction: row !important;
    }

    .logiccalc-telemetry-actions {
        width: auto !important;
        justify-content: flex-end !important;
    }

    .logiccalc-gemini-route-action,
    .logiccalc-result-actions-trigger {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 38px !important;
        flex: 0 0 auto !important;
    }

    .logiccalc-gemini-route-action {
        padding: 7px 11px 7px 8px !important;
    }

    /* -----------------------------------------------------
       6. Economics dropdown keeps desktop proportions.
       It can be reached by the same horizontal desktop canvas;
       do not squeeze a 2-column tool into a 390px phone panel.
       ----------------------------------------------------- */
    .premium-menu-panel--economics {
        width: 1020px !important;
        max-width: none !important;
        right: 0 !important;
        padding: 20px !important;
    }

    .premium-economics-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    }

    .premium-economics-column {
        padding: 16px !important;
    }

    .premium-operating-fields-grid,
    .premium-operating-summary-grid,
    .premium-operating-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .premium-operating-field--wide {
        grid-column: 1 / -1 !important;
    }

    .premium-operating-profile {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .premium-operating-profile-consumption {
        text-align: right !important;
    }

    /* -----------------------------------------------------
       7. Stop Order Optimizer keeps its compact desktop card.
       ----------------------------------------------------- */
    .stop-order-optimizer-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .stop-order-optimizer-footer {
        align-items: center !important;
        flex-direction: row !important;
    }

    .stop-order-optimizer-apply {
        width: auto !important;
    }
}

/* Touch devices can keep a synthetic :hover state after a tap.
   Remove only the visual lift; click/selection logic is untouched. */
@media (hover: none) and (pointer: coarse) {
    .premium-route-stop:hover,
    .logiccalc-route-alternative-card--map:hover,
    .premium-run-button:hover:not(:disabled),
    .premium-add-point:hover {
        transform: none !important;
    }
}

/* =========================================================
   LOGICALC MOTION PACK v1 — ROUTE / TRUCK / ODOMETER
   2026-08-21
   Visual-only progressive enhancement.
========================================================= */

/* Route loading: A ---- truck ----> B */
.logiccalc-route-loader {
    --lc-loader-track-width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    color: currentColor;
    line-height: 1;
}

.logiccalc-route-loader--button {
    --lc-loader-track-width: 76px;
    color: rgba(255, 255, 255, 0.98);
}

.logiccalc-route-loader--compact {
    --lc-loader-track-width: 56px;
    color: #6549d2;
}

.logiccalc-route-loader-endpoint {
    min-width: 8px;
    color: currentColor;
    opacity: 0.72;
    font-size: 0.54rem;
    font-weight: 950;
    text-align: center;
}

.logiccalc-route-loader-track {
    position: relative;
    width: var(--lc-loader-track-width);
    height: 18px;
    flex: 0 0 var(--lc-loader-track-width);
}

.logiccalc-route-loader-line {
    position: absolute;
    left: 1px;
    right: 5px;
    top: 9px;
    height: 0;
    border-top: 1.5px dashed currentColor;
    opacity: 0.30;
}

.logiccalc-route-loader-track::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: 0.56;
    transform: rotate(45deg);
}

.logiccalc-route-loader-truck {
    position: absolute;
    z-index: 2;
    top: 0;
    left: -2px;
    width: 22px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Compact route-options loader can keep moving while alternatives are fetched. */
    animation: logiccalcRouteTruckDriveLoop 1.75s linear infinite;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

/* Main Calculate button: one deliberate drive only.  Transform-only motion keeps
   Safari on the compositor instead of re-laying out the track on every frame. */
.logiccalc-route-loader--button .logiccalc-route-loader-truck {
    animation: logiccalcRouteTruckDriveOnce 2.35s cubic-bezier(0.22, 0.68, 0.20, 1) 1 forwards;
}

.logiccalc-route-loader-truck svg {
    width: 22px;
    height: 14px;
    overflow: visible;
}

.logiccalc-route-loader-truck path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logiccalc-route-loader-truck circle {
    fill: currentColor;
    stroke: none;
}

.logiccalc-route-alternatives-hint.is-loading .logiccalc-route-loader {
    margin-right: 1px;
}

@keyframes logiccalcRouteTruckDriveOnce {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.96);
    }

    7% {
        opacity: 1;
    }

    92% {
        opacity: 1;
        transform: translate3d(calc(var(--lc-loader-track-width) - 20px), 0, 0) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate3d(calc(var(--lc-loader-track-width) - 20px), 0, 0) scale(1);
    }
}

@keyframes logiccalcRouteTruckDriveLoop {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.96);
    }

    8% {
        opacity: 1;
    }

    88% {
        opacity: 1;
        transform: translate3d(calc(var(--lc-loader-track-width) - 20px), 0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(var(--lc-loader-track-width) - 20px), 0, 0) scale(1);
    }
}

/* Numbered route markers: pop in sequentially without touching Leaflet's
   own transform on the marker element. */
.logiccalc-map-point-pin {
    transform-origin: 50% 100%;
    animation: logiccalcMapPointPop 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--logiccalc-marker-delay, 0ms);
}

@keyframes logiccalcMapPointPop {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translateY(5px) scale(0.42);
    }

    68% {
        opacity: 1;
        transform: rotate(-45deg) translateY(-1px) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: rotate(-45deg) translateY(0) scale(1);
    }
}

/* Keep the animated Leaflet path cheap to paint. A drop-shadow on a long
   SVG path forces expensive repaints in Safari and makes the draw stutter. */
.leaflet-overlay-pane path.logiccalc-route-line-drawing {
    filter: none !important;
}

/* Keep changing KPI / price digits visually stable while JS updates them. */
.logiccalc-odometer-value {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .logiccalc-route-loader-truck,
    .logiccalc-map-point-pin {
        animation: none !important;
    }

    .logiccalc-route-loader-truck {
        left: -2px !important;
        opacity: 1 !important;
        transform: translate3d(calc((var(--lc-loader-track-width) - 20px) / 2), 0, 0) !important;
    }

    .leaflet-overlay-pane path.logiccalc-route-line-drawing {
        filter: none !important;
    }
}

/* =========================================================
   LOGICALC — MAP FOCUS v2 / EDGE-TO-EDGE WORKSPACE
   2026-08-23

   Minimal visual-only patch for the restored/original project.
   Matches the approved intermediate screenshot more closely.

   IMPORTANT:
   - no Razor changes
   - no calculation changes
   - no map.js changes
   - no basemap/cartography changes
========================================================= */

/* RESTORED DESKTOP WIDTH — centered 2000px workspace */
#main-ui.premium-app {
    width: 100% !important;
    max-width: 2000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Restore header geometry to the centered 2000px workspace. */
.premium-header.apple-header,
.premium-header.apple-header.header-scrolled {
    --lc-header-shell-inset:
        max(28px, calc((100vw - 2000px) / 2 + 28px)) !important;

    --lc-header-content-inset:
        max(56px, calc((100vw - 2000px) / 2 + 56px)) !important;
}

/* Approved map-first desktop proportions. */
.premium-workspace {
    --bs-gutter-x: 18px !important;
}

.premium-route-column {
    width: 34% !important;
    max-width: 34% !important;
    flex: 0 0 34% !important;
}

.premium-command-column {
    width: 66% !important;
    max-width: 66% !important;
    flex: 0 0 66% !important;
}

/* Existing original-project map height is already correct. */
.premium-command-column .logiccalc-map-stage #map {
    height: 720px !important;
    min-height: 720px !important;
}

/* =========================================================
   LOGICALC — ROUTE ALTERNATIVES / NARROW CENTERED DOCK
   Desktop only. Visual change only.
   ========================================================= */
@media (min-width: 768px) {
    .logiccalc-map-stage .logiccalc-route-alternatives--map {
        left: 50% !important;
        right: auto !important;
        width: min(1080px, calc(100% - 56px)) !important;
        max-width: calc(100% - 56px) !important;
        transform: translateX(-50%) !important;
    }
}

/* =========================================================
   LOGICALC — ROUTE BUILDER ACCORDION REDESIGN v1
   Inspired by the approved visual concept.
   Presentation only: existing inputs, handlers, cargo logic,
   Saved Locations, map picking and drag/drop are preserved.
========================================================= */

.premium-route-builder.card {
    overflow: visible !important;
    border: 1px solid rgba(64, 73, 58, 0.085) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,252,249,.93)) !important;
    box-shadow:
        0 18px 48px rgba(42, 49, 37, 0.075),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.premium-route-builder > .card-body {
    padding: 18px 17px 17px !important;
}

/* HEADER */
.premium-route-builder .route-builder-toolbar {
    min-height: 54px;
    margin-bottom: 16px !important;
    padding: 0 0 13px;
    border-bottom: 1px solid rgba(65, 75, 59, 0.075);
}

.premium-route-builder .route-builder-title-stack {
    min-width: 0;
    display: grid;
    gap: 7px;
    align-content: center;
}

.premium-route-builder .route-builder-toolbar-title {
    color: #232722 !important;
    font-size: 1.12rem !important;
    font-weight: 890 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.02 !important;
}

.premium-route-builder .route-builder-title-rule {
    display: none;
}

.premium-route-builder .route-builder-toolbar-actions {
    gap: 6px !important;
}

.premium-route-builder .route-builder-toolbar-button,
.premium-route-builder .premium-menu-trigger--compact {
    min-height: 32px !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(70, 80, 64, .105) !important;
    border-radius: 999px !important;
    background: rgba(250,250,247,.90) !important;
    color: #4e5749 !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    font-weight: 760 !important;
}

.premium-route-builder .stop-order-optimizer-trigger {
    border-color: rgba(109, 139, 72, .18) !important;
    background: rgba(244, 248, 238, .94) !important;
    color: #627a45 !important;
}

.premium-route-builder .route-builder-toolbar-button:hover,
.premium-route-builder .premium-menu-trigger--compact:hover,
.premium-route-builder .stop-order-optimizer-trigger:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(102, 125, 77, .22) !important;
    background: #ffffff !important;
}

/* STOP CARD / TIMELINE */
.premium-route-builder .route-stop-v2 {
    margin-left: 23px !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(63, 72, 57, .09) !important;
    border-radius: 19px !important;
    background:
        linear-gradient(155deg, rgba(255,255,255,.995), rgba(250,251,248,.975)) !important;
    box-shadow:
        0 10px 27px rgba(43, 49, 38, .045),
        inset 0 1px 0 rgba(255,255,255,.99) !important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.premium-route-builder .route-stop-v2:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(104, 126, 79, .17) !important;
    box-shadow:
        0 13px 31px rgba(43,49,38,.06),
        inset 0 1px 0 rgba(255,255,255,.99) !important;
}

.premium-route-builder .route-stop-v2::after {
    left: -23px !important;
    top: 32px !important;
    bottom: -34px !important;
    width: 1px !important;
    background:
        linear-gradient(
            to bottom,
            rgba(116,145,75,.46),
            rgba(116,145,75,.16) 58%,
            rgba(116,87,220,.18)
        ) !important;
}

.premium-route-builder .route-stop-index {
    top: 28px !important;
    left: -23px !important;
    z-index: 12 !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 4px solid #f5f5f0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #8cab5d, #6c8d40) !important;
    color: #ffffff !important;
    box-shadow:
        0 6px 15px rgba(78, 103, 49, .18),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
    font-size: .73rem !important;
    font-weight: 880 !important;
}

.premium-route-builder .route-stop-index > span {
    display: none !important;
}

/* NATIVE ACCORDION */
.premium-route-builder .route-stop-details {
    display: block;
}

.premium-route-builder .route-stop-summary {
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 10px;
    padding: 14px 15px 14px 17px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.premium-route-builder .route-stop-summary::-webkit-details-marker {
    display: none;
}

.premium-route-builder .route-stop-summary::marker {
    content: "";
}

.premium-route-builder .route-stop-summary-grip {
    display: none;
}

.premium-route-builder .route-stop-summary-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.premium-route-builder .route-stop-summary-main > strong {
    overflow: hidden;
    color: #30352f;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-route-builder .route-stop-summary-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    color: #8a8f86;
    font-size: .60rem;
    font-weight: 690;
}

.premium-route-builder .route-stop-summary-meta > span + span::before {
    content: "•";
    margin-right: 8px;
    color: #b2b6ae;
}

.premium-route-builder .route-stop-summary-action {
    min-width: 122px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .67rem;
    font-weight: 800;
    white-space: nowrap;
}

.premium-route-builder .route-stop-summary-action.is-pickup {
    border-color: rgba(107,139,69,.14);
    background: rgba(238,245,228,.90);
    color: #527035;
}

.premium-route-builder .route-stop-summary-action.is-delivery {
    border-color: rgba(116,87,224,.14);
    background: rgba(244,240,255,.92);
    color: #674acc;
}

.premium-route-builder .route-stop-summary-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #656b62;
    border-bottom: 2px solid #656b62;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

/* Open stop keeps only a tiny collapse rail above the form. */
.premium-route-builder .route-stop-details[open] > .route-stop-summary {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 6;
    width: 24px;
    height: 24px;
    min-height: 24px;
    grid-template-columns: 24px;
    gap: 0;
    padding: 0;
}

.premium-route-builder .route-stop-details[open] > .route-stop-summary .route-stop-summary-grip,
.premium-route-builder .route-stop-details[open] > .route-stop-summary .route-stop-summary-main,
.premium-route-builder .route-stop-details[open] > .route-stop-summary .route-stop-summary-action {
    display: none;
}

.premium-route-builder .route-stop-details[open] > .route-stop-summary .route-stop-summary-chevron {
    grid-column: 1;
    justify-self: center;
    align-self: center;
    transform: rotate(225deg) translate(-1px, -1px);
}

/* EXPANDED FORM */
.premium-route-builder .route-stop-details[open] > .route-stop-remove {
    top: -7px !important;
    right: 26px !important;
    z-index: 7;
    opacity: .42;
}

.premium-route-builder .route-stop-details[open] > .route-stop-fields {
    margin: 0 !important;
    padding: 2px 16px 0 !important;
    --bs-gutter-x: 11px;
    --bs-gutter-y: 10px;
}

.premium-route-builder .route-stop-details[open] > .route-cargo-shell {
    margin: 12px 16px 16px !important;
}

.premium-route-builder .route-stop-label {
    margin-bottom: 5px !important;
    color: #626960 !important;
    font-size: .60rem !important;
    font-weight: 820 !important;
    letter-spacing: .025em !important;
}

.premium-route-builder .route-stop-control {
    min-height: 40px !important;
    border: 1px solid rgba(65,74,59,.105) !important;
    border-radius: 10px !important;
    background: rgba(249,250,247,.96) !important;
    color: #30352f !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
    font-size: .76rem !important;
    font-weight: 620 !important;
}

.premium-route-builder .route-stop-control:hover {
    border-color: rgba(106,128,80,.20) !important;
    background: #ffffff !important;
}

.premium-route-builder .route-stop-control:focus {
    border-color: rgba(110,140,76,.42) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(110,140,76,.08) !important;
}

.premium-route-builder .route-stop-action.is-pickup {
    border-color: rgba(107,139,69,.15) !important;
    background-color: rgba(239,246,230,.90) !important;
    color: #4f6d31 !important;
    font-weight: 780 !important;
}

.premium-route-builder .route-stop-action.is-delivery {
    border-color: rgba(116,87,224,.14) !important;
    background-color: rgba(245,241,255,.92) !important;
    color: #6448ca !important;
    font-weight: 780 !important;
}

/* CARGO */
.premium-route-builder .route-cargo-shell {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(70,80,64,.075) !important;
    border-radius: 14px !important;
    background: rgba(248,249,245,.77) !important;
    box-shadow: none !important;
}

.premium-route-builder .route-cargo-shell.is-enabled {
    border-color: rgba(111,139,78,.12) !important;
    background: rgba(249,250,246,.94) !important;
}

.premium-route-builder .route-cargo-header {
    min-height: 45px !important;
    padding: 8px 11px !important;
}

.premium-route-builder .route-cargo-header.is-enabled {
    border-bottom: 1px solid rgba(70,80,64,.065);
}

.premium-route-builder .route-cargo-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4f574a !important;
    font-size: .70rem !important;
    font-weight: 840 !important;
}

.premium-route-builder .route-cargo-add {
    min-height: 29px !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(108,137,76,.17) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    color: #607546 !important;
    box-shadow: none !important;
    font-size: .62rem !important;
    font-weight: 820 !important;
}

.premium-route-builder .route-cargo-item {
    padding: 10px 11px 10px !important;
}

.premium-route-builder .route-cargo-label {
    margin-bottom: 4px !important;
    color: #858a80 !important;
    font-size: .54rem !important;
    font-weight: 820 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}

.premium-route-builder .route-cargo-control {
    min-height: 36px !important;
    border-color: rgba(70,80,64,.10) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.91) !important;
    font-size: .72rem !important;
}

/* BOTTOM ACTIONS */
.premium-route-builder .premium-add-point {
    width: 100% !important;
    min-height: 42px !important;
    margin: 4px 0 12px !important;
    border: 1px dashed rgba(91,106,79,.22) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.46) !important;
    color: #5f6959 !important;
    box-shadow: none !important;
    font-size: .77rem !important;
    font-weight: 820 !important;
}

.premium-route-builder .premium-add-point:hover {
    border-color: rgba(91,121,63,.34) !important;
    background: rgba(255,255,255,.82) !important;
    color: #4f6141 !important;
}

.premium-route-builder .premium-run-button {
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background:
        linear-gradient(135deg, #7fa54e 0%, #61883a 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 25px rgba(87,119,47,.20),
        inset 0 1px 0 rgba(255,255,255,.23) !important;
    font-size: .88rem !important;
    font-weight: 860 !important;
    letter-spacing: -.01em;
}

.premium-route-builder .premium-run-button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow:
        0 15px 30px rgba(87,119,47,.25),
        inset 0 1px 0 rgba(255,255,255,.27) !important;
}

@media (max-width: 1380px) {
    .premium-route-builder .route-stop-summary {
        grid-template-columns: 20px minmax(0,1fr) auto 20px;
        gap: 8px;
        padding-left: 13px;
        padding-right: 12px;
    }

    .premium-route-builder .route-stop-summary-action {
        min-width: 105px;
        font-size: .62rem;
    }
}

/* =========================================================
   LOGICALC — BUGFIX 1–3 CLEAN FINAL
   2026-08-24

   1. Advanced Physics: remove the V6.2 -38px centre-workspace lift
      that physically overlaps the ruler/canvas with the top buttons.
   2. Economics: keep the large panel inside the viewport.
   3. Route Builder: activate its existing container-based narrow fallback.
      Mobile desktop 1:1 is handled by App.razor viewport=2000.
   ========================================================= */

/* 1) ADVANCED PHYSICS — THE ACTUAL OVERLAP FIX.
   PhysicsBalanceAdvanced V6.2 contains margin-top:-38px and
   margin-bottom:-38px on .advanced-load-panel. Neutralize exactly that. */
@media (min-width: 1051px) {
    .premium-physics-card--advanced .advanced-load-panel {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* 2) ECONOMICS — viewport-safe large window, same internal design. */
.premium-menu-panel--economics {
    position: fixed !important;
    top: 78px !important;
    left: max(16px, calc((100vw - 1020px) / 2)) !important;
    right: auto !important;

    width: min(1020px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 96px) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform-origin: top center !important;
}

.premium-menu-panel--economics::before {
    display: none !important;
}

/* 3) ROUTE BUILDER — make the already-existing @container idea real.
   The old file had @container rules but Route Builder was never declared
   as a size container, so those rules could not react to card width. */
.premium-route-builder {
    container-type: inline-size;
}

/* This rule is intentionally LAST, after the older toolbar overrides. */
@container (max-width: 610px) {
    .premium-route-builder .route-builder-toolbar {
        grid-template-columns: 1fr !important;
        row-gap: 9px !important;
    }

    .premium-route-builder .route-builder-title-stack,
    .premium-route-builder .route-builder-toolbar-title {
        width: 100% !important;
        max-width: 100% !important;
    }

    .premium-route-builder .route-builder-toolbar-actions {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   LOGICALC — FLUID CONTROLS FINAL
   2026-08-24
   Route Builder buttons shrink with their own card.
   No stacking, no max-content lock, no overflow outside the card.
   ========================================================= */

.premium-route-builder {
    container-type: inline-size;
}

.premium-route-builder .route-builder-toolbar {
    display: grid !important;
    grid-template-columns: minmax(110px, 30%) minmax(0, 70%) !important;
    align-items: center !important;
    column-gap: clamp(5px, 1.1cqw, 10px) !important;
    row-gap: 0 !important;
    width: 100% !important;
}

.premium-route-builder .route-builder-title-stack,
.premium-route-builder .route-builder-toolbar-title {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

.premium-route-builder .route-builder-toolbar-title {
    margin: 0 !important;
    font-size: clamp(0.74rem, 3.0cqw, 1.12rem) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* The three controls share all available action width.
   First button gets the most room because its label is longest. */
.premium-route-builder .route-builder-toolbar-actions {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, 1.20fr)
        minmax(0, 0.72fr) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    gap: clamp(3px, 0.75cqw, 6px) !important;
}

.premium-route-builder .route-builder-toolbar-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.premium-route-builder .route-builder-toolbar-button,
.premium-route-builder .route-builder-toolbar-actions .premium-menu-trigger,
.premium-route-builder .route-builder-toolbar-actions .stop-order-optimizer-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: clamp(26px, 6.7cqw, 32px) !important;
    height: auto !important;
    padding:
        clamp(4px, 0.85cqw, 6px)
        clamp(4px, 1.20cqw, 9px) !important;
    font-size: clamp(0.50rem, 1.60cqw, 0.72rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.018em !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.premium-route-builder .route-builder-toolbar-actions .premium-menu-trigger span:first-child,
.premium-route-builder .route-builder-toolbar-actions .stop-order-optimizer-trigger span,
.premium-route-builder .route-builder-toolbar-button span {
    min-width: 0 !important;
    white-space: nowrap !important;
}

.premium-route-builder .premium-menu-chevron {
    flex: 0 0 auto !important;
    margin-left: clamp(2px, 0.45cqw, 5px) !important;
    font-size: clamp(0.45rem, 1.15cqw, 0.62rem) !important;
}

/* IMPORTANT: defeat every older narrow-card/mobile rule that stacked
   the toolbar. It must stay one desktop row and scale instead. */
@container (max-width: 610px) {
    .premium-route-builder .route-builder-toolbar {
        grid-template-columns: minmax(95px, 30%) minmax(0, 70%) !important;
        row-gap: 0 !important;
    }

    .premium-route-builder .route-builder-toolbar-actions {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(0, 1.20fr)
            minmax(0, 0.72fr) !important;
        width: 100% !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 575.98px) {
    .premium-route-builder .route-builder-toolbar {
        grid-template-columns: minmax(95px, 30%) minmax(0, 70%) !important;
        row-gap: 0 !important;
    }

    .premium-route-builder .route-builder-toolbar-actions {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(0, 1.20fr)
            minmax(0, 0.72fr) !important;
        width: 100% !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }
}

/* =========================================================
   ACTIONS & FLEET PROFILE — ROBUST FINAL FIX
   2026-08-24

   Goals:
   1) panel never disappears beyond the LEFT viewport edge;
   2) panel stays ABOVE the map/right workspace column;
   3) panel size/content stays unchanged;
   4) trigger button geometry stays unchanged.

   The panel is rendered inside the trigger's .position-relative wrapper.
   That worked while the trigger was large, but after fluid toolbar scaling
   the 470px panel can be pushed beyond the page edge by right:-64px.

   While this menu is open, make that tiny wrapper position:static so the
   absolute panel uses .route-builder-toolbar as its containing block.
   The panel is then anchored to the Route Builder toolbar itself.
   ========================================================= */

/* The two workspace columns are animation-generated stacking contexts.
   Lift the LEFT column only while this menu is open.
   Keep this below the sticky header layer. */
.premium-route-column:has(.premium-route-builder.route-actions-on-top) {
    position: relative !important;
    z-index: 900 !important;
}

/* Route Builder and toolbar must allow the menu to extend over the map. */
.premium-route-builder.route-actions-on-top,
.premium-route-builder.route-actions-on-top > .card-body,
.premium-route-builder.route-actions-on-top .route-builder-toolbar,
.premium-route-builder.route-actions-on-top .route-builder-toolbar-actions {
    overflow: visible !important;
}

/* CRITICAL:
   stop using the small Actions button wrapper as the 470px panel's
   positioning reference. The toolbar already has position:relative. */
.premium-route-builder.route-actions-on-top
.route-builder-toolbar-actions
> .position-relative:has(.premium-menu-panel--actions) {
    position: static !important;
}

/* Stable panel geometry:
   align to the LEFT edge of the Route Builder toolbar.
   This guarantees it cannot run off the page's left edge. */
.premium-route-builder.route-actions-on-top .premium-menu-panel--actions {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: auto !important;

    width: 470px !important;
    max-width: 470px !important;

    z-index: 6000 !important;
    transform-origin: top left !important;
}

/* Point the little diamond back toward the Actions button.
   The panel itself remains anchored to the toolbar, so this is purely visual. */
.premium-route-builder.route-actions-on-top
.premium-menu-panel--actions::before {
    left: 215px !important;
    right: auto !important;
}

/* Ensure map/card children cannot establish a clipping boundary. */
.premium-route-column:has(.premium-route-builder.route-actions-on-top)
.premium-route-builder {
    overflow: visible !important;
}



/* =========================================================
   TOLL CLASSIFICATION / "NOT CLASSIFIED" INFO
   UI-only explanation. Does not alter toll calculation logic.
========================================================= */
.toll-not-classified-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0 1px;
    border: 0;
    border-bottom: 1px dotted rgba(123, 106, 171, 0.34);
    background: transparent;
    color: #7b6aab;
    font: inherit;
    font-weight: 760;
    line-height: inherit;
    cursor: help;
    vertical-align: baseline;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.toll-not-classified-link:hover {
    color: #6550a0;
    border-bottom-color: rgba(101, 80, 160, 0.62);
}

.toll-not-classified-link:focus-visible {
    outline: 2px solid rgba(101, 73, 210, 0.28);
    outline-offset: 3px;
    border-radius: 4px;
}

.toll-not-classified-link-note {
    margin-left: 2px;
    margin-right: 2px;
}

.toll-classification-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(38, 41, 36, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.toll-classification-modal {
    width: min(540px, 100%);
    max-height: min(720px, calc(100dvh - 32px));
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 25px;
    background:
        radial-gradient(circle at 100% 0%, rgba(226, 215, 246, 0.72), transparent 18rem),
        radial-gradient(circle at 0% 100%, rgba(220, 234, 211, 0.70), transparent 18rem),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 78px rgba(40, 45, 37, 0.24);
}

.toll-classification-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 14px;
}

.toll-classification-modal-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #6c7e62;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.toll-classification-modal-head h3 {
    margin: 0;
    color: #31382f;
    font-size: 1.35rem;
    line-height: 1.16;
    letter-spacing: -0.025em;
    font-weight: 900;
}

.toll-classification-modal-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 70, 58, 0.08);
    border-radius: 999px;
    background: rgba(246, 247, 243, 0.90);
    color: #687064;
    font-size: 1.22rem;
    line-height: 1;
    cursor: pointer;
}

.toll-classification-modal-body {
    padding: 4px 24px 8px;
}

.toll-classification-modal-lead {
    margin: 0 0 16px;
    color: #60695c;
    font-size: 0.9rem;
    line-height: 1.62;
    font-weight: 560;
}

.toll-classification-example-list {
    display: grid;
    gap: 8px;
}

.toll-classification-example-list span {
    position: relative;
    padding: 10px 12px 10px 31px;
    border: 1px solid rgba(71, 82, 66, 0.08);
    border-radius: 13px;
    background: rgba(249, 250, 247, 0.86);
    color: #697264;
    font-size: 0.78rem;
    line-height: 1.42;
    font-weight: 590;
}

.toll-classification-example-list span::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 15px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #91a482;
    box-shadow: 0 0 0 4px rgba(145, 164, 130, 0.12);
}

.toll-classification-modal-rule {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 14px 15px;
    border: 1px solid rgba(101, 73, 210, 0.12);
    border-radius: 15px;
    background: rgba(239, 234, 249, 0.66);
}

.toll-classification-modal-rule strong {
    color: #5d478f;
    font-size: 0.76rem;
    font-weight: 900;
}

.toll-classification-modal-rule span {
    color: #6f6682;
    font-size: 0.78rem;
    line-height: 1.5;
    font-weight: 560;
}

.toll-classification-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 24px 24px;
}

.toll-classification-method-link,
.toll-classification-close-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 850;
    text-decoration: none;
}

.toll-classification-method-link {
    border: 1px solid rgba(91, 111, 80, 0.12);
    background: rgba(238, 244, 233, 0.92);
    color: #53694a;
}

.toll-classification-method-link:hover {
    color: #42583a;
    background: #e8f0e2;
}

.toll-classification-close-button {
    border: 1px solid rgba(66, 73, 63, 0.09);
    background: #ffffff;
    color: #626a5f;
    cursor: pointer;
}

@media (max-width: 560px) {
    .toll-classification-modal-backdrop {
        align-items: flex-end;
        padding: 10px;
    }

    .toll-classification-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 23px;
    }

    .toll-classification-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .toll-classification-method-link,
    .toll-classification-close-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toll-not-classified-link {
        transition: none;
    }
}
/* =========================================================
   LOGICALC — ROUTE BUILDER TRANSLATION CLIP FIX
   2026-08-25

   Problem:
   The final FLUID CONTROLS override gave the third toolbar action
   only 0.72fr. Longer localized labels such as German
   "Punkt hinzufügen" were therefore clipped from the left/right.

   Fix:
   - give the action group more of the toolbar width;
   - rebalance all three action columns;
   - keep the existing one-row desktop layout;
   - preserve the existing button visuals and handlers.
   ========================================================= */

.premium-route-builder .route-builder-toolbar {
    grid-template-columns: minmax(110px, 24%) minmax(0, 76%) !important;
}

.premium-route-builder .route-builder-toolbar-actions {
    grid-template-columns:
        minmax(0, 1.32fr)
        minmax(0, 1.55fr)
        minmax(0, 1.18fr) !important;
    gap: clamp(4px, 0.70cqw, 6px) !important;
}

/* Never let a grid item keep an intrinsic text width that can push
   its neighbour underneath another pill. */
.premium-route-builder .route-builder-toolbar-actions > *,
.premium-route-builder .route-builder-toolbar-actions > .position-relative,
.premium-route-builder .route-builder-toolbar-actions > .stop-order-optimizer-trigger,
.premium-route-builder .route-builder-toolbar-actions > .route-builder-toolbar-button {
    min-width: 0 !important;
}

/* Keep localized text centered inside its own pill.
   At genuinely extreme widths it clips inside itself rather than
   painting underneath the neighbouring control. */
.premium-route-builder .route-builder-toolbar-button,
.premium-route-builder .route-builder-toolbar-actions .premium-menu-trigger,
.premium-route-builder .route-builder-toolbar-actions .stop-order-optimizer-trigger {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* The optimizer carries a 15px SVG, so give the label the remaining
   width instead of allowing the icon to squeeze the text unpredictably. */
.premium-route-builder .stop-order-optimizer-trigger > span {
    min-width: 0 !important;
}

/* Keep the same geometry when the old narrow-card rules become active.
   These declarations are intentionally at the very end of the file. */
@container (max-width: 610px) {
    .premium-route-builder .route-builder-toolbar {
        grid-template-columns: minmax(100px, 24%) minmax(0, 76%) !important;
    }

    .premium-route-builder .route-builder-toolbar-actions {
        grid-template-columns:
            minmax(0, 1.30fr)
            minmax(0, 1.58fr)
            minmax(0, 1.20fr) !important;
    }
}


/* =========================================================
   DRIVER HOURS & ETA — REST POINTS ON MAP
   Estimated short-break / daily-rest positions.
========================================================= */

.dispatch-v3-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 4px 10px 4px 8px;
    border: 1px solid rgba(99, 80, 173, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.80);
    color: #655f72;
    cursor: pointer;
    user-select: none;
}

.dispatch-v3-map-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dispatch-v3-map-toggle-track {
    position: relative;
    width: 30px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #d7d3df;
    transition: background-color .18s ease, box-shadow .18s ease;
}

.dispatch-v3-map-toggle-track > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(41, 35, 60, .24);
    transition: transform .18s ease;
}

.dispatch-v3-map-toggle input:checked + .dispatch-v3-map-toggle-track {
    background: #735bd4;
    box-shadow: 0 0 0 3px rgba(115, 91, 212, .10);
}

.dispatch-v3-map-toggle input:checked + .dispatch-v3-map-toggle-track > span {
    transform: translateX(12px);
}

.dispatch-v3-map-toggle input:focus-visible + .dispatch-v3-map-toggle-track {
    outline: 2px solid rgba(115, 91, 212, .42);
    outline-offset: 2px;
}

.dispatch-v3-map-toggle-copy {
    font-size: .64rem;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
}

/* Leaflet divIcon wrapper must stay transparent. */
.logiccalc-driver-rest-marker-shell {
    border: 0 !important;
    background: transparent !important;
}

.logiccalc-driver-rest-marker {
    position: relative;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .96);
    border-radius: 50%;
    color: #fff;
    box-shadow:
        0 7px 17px rgba(40, 37, 52, .20),
        0 2px 5px rgba(40, 37, 52, .12);
    transform-origin: center;
    transition: transform .16s ease, box-shadow .16s ease;
}

.logiccalc-driver-rest-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255, 255, 255, .96);
    border-bottom: 2px solid rgba(255, 255, 255, .96);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 3px 0;
}

.logiccalc-driver-rest-marker.is-break {
    background: linear-gradient(145deg, #d89633, #ae6f1e);
}

.logiccalc-driver-rest-marker.is-break::after {
    background: #ae6f1e;
}

.logiccalc-driver-rest-marker.is-rest {
    background: linear-gradient(145deg, #7058d9, #4d3aa8);
}

.logiccalc-driver-rest-marker.is-rest::after {
    background: #4d3aa8;
}

.logiccalc-driver-rest-marker > span {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    font-weight: 950;
    line-height: 1;
}

.logiccalc-driver-rest-marker-shell:hover .logiccalc-driver-rest-marker {
    transform: translateY(-1px) scale(1.08);
    box-shadow:
        0 9px 21px rgba(40, 37, 52, .23),
        0 2px 6px rgba(40, 37, 52, .14);
}

.logiccalc-driver-rest-leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 17px;
    box-shadow: 0 18px 50px rgba(40, 37, 52, .18);
}

.logiccalc-driver-rest-leaflet-popup .leaflet-popup-content {
    margin: 0;
    min-width: 250px;
}

.logiccalc-driver-rest-popup {
    padding: 15px 16px 14px;
    color: #33313a;
    font-family:
        Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "Segoe UI", sans-serif;
}

.logiccalc-driver-rest-popup-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.logiccalc-driver-rest-popup-kind {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-size: .88rem;
    font-weight: 950;
}

.logiccalc-driver-rest-popup-kind.break {
    background: #bd7b24;
}

.logiccalc-driver-rest-popup-kind.rest {
    background: #5f49c3;
}

.logiccalc-driver-rest-popup-head strong {
    display: block;
    color: #2d2a34;
    font-size: .87rem;
    font-weight: 900;
    line-height: 1.25;
}

.logiccalc-driver-rest-popup-head span:not(.logiccalc-driver-rest-popup-kind) {
    display: block;
    margin-top: 3px;
    color: #7e7987;
    font-size: .70rem;
    font-weight: 650;
    line-height: 1.4;
}

.logiccalc-driver-rest-popup-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 9px;
}

.logiccalc-driver-rest-popup-metrics > span {
    padding: 5px 8px;
    border: 1px solid rgba(79, 69, 121, .10);
    border-radius: 999px;
    background: #f7f6fa;
    color: #5f5969;
    font-size: .64rem;
    font-weight: 780;
}


.logiccalc-driver-rest-popup-coordinates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 8px 9px;
    border: 1px solid rgba(79, 69, 121, .10);
    border-radius: 11px;
    background: rgba(247, 246, 250, .78);
}

.logiccalc-driver-rest-popup-coordinate-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logiccalc-driver-rest-popup-coordinate-copy > span {
    color: #918b99;
    font-size: .56rem;
    font-weight: 760;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.logiccalc-driver-rest-popup-coordinate-copy > strong {
    overflow: hidden;
    color: #4d4854;
    font-family:
        ui-monospace, "SFMono-Regular", Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;
    font-size: .66rem;
    font-weight: 760;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logiccalc-driver-rest-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 29px;
    padding: 5px 9px;
    border: 1px solid rgba(95, 73, 195, .15);
    border-radius: 9px;
    background: #ffffff;
    color: #5f49c3;
    box-shadow: 0 3px 9px rgba(49, 42, 74, .05);
    font: inherit;
    font-size: .60rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition:
        transform .14s ease,
        background-color .14s ease,
        border-color .14s ease,
        color .14s ease;
}

.logiccalc-driver-rest-copy:hover {
    border-color: rgba(95, 73, 195, .28);
    background: #f8f6ff;
    transform: translateY(-1px);
}

.logiccalc-driver-rest-copy:active {
    transform: scale(.97);
}

.logiccalc-driver-rest-copy.is-copied {
    border-color: rgba(54, 139, 91, .18);
    background: #f1faf4;
    color: #27764a;
}

.logiccalc-driver-rest-popup > small {
    display: block;
    color: #98939f;
    font-size: .62rem;
    font-weight: 620;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .dispatch-v3-map-toggle-copy {
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .logiccalc-driver-rest-popup-coordinates {
        align-items: stretch;
        flex-direction: column;
    }

    .logiccalc-driver-rest-copy {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .dispatch-v3-map-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .dispatch-v3-map-toggle-copy {
        flex: 1;
    }
}


/* =========================================================
   FUEL PLANNING — ESTIMATED REFUEL POINTS ON MAP
========================================================= */

.fuel-planning-panel {
    margin: 13px 0 16px;
    padding: 13px;
    border: 1px solid rgba(51, 126, 88, .12);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(247, 252, 249, .98),
            rgba(255, 255, 255, .94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .90);
}

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

.fuel-planning-heading {
    min-width: 0;
}

.fuel-planning-kicker {
    display: block;
    margin-bottom: 3px;
    color: #39805e;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.fuel-planning-heading > strong {
    display: block;
    color: #313832;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.25;
}

.fuel-planning-heading > small {
    display: block;
    max-width: 420px;
    margin-top: 4px;
    color: #818881;
    font-size: .62rem;
    font-weight: 620;
    line-height: 1.4;
}

.fuel-planning-map-toggle {
    flex: 0 0 auto;
    border-color: rgba(51, 126, 88, .14);
}

.fuel-planning-map-toggle
.dispatch-v3-map-toggle-track {
    background: #d7dfda;
}

.fuel-planning-map-toggle
input:checked + .dispatch-v3-map-toggle-track {
    background: #37815d;
    box-shadow:
        0 0 0 3px rgba(55, 129, 93, .10);
}

.fuel-planning-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.fuel-planning-field {
    min-width: 0;
}

.fuel-planning-field > span {
    display: block;
    margin-bottom: 5px;
    color: #697069;
    font-size: .60rem;
    font-weight: 820;
}

.logiccalc-fuel-refuel-marker-shell {
    border: 0 !important;
    background: transparent !important;
}

.logiccalc-fuel-refuel-marker {
    position: relative;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .97);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #3f9b70,
            #27724f);
    color: #ffffff;
    box-shadow:
        0 7px 17px rgba(34, 96, 68, .22),
        0 2px 5px rgba(35, 74, 56, .12);
    transform-origin: center;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.logiccalc-fuel-refuel-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 7px;
    height: 7px;
    border-right:
        2px solid rgba(255, 255, 255, .97);
    border-bottom:
        2px solid rgba(255, 255, 255, .97);
    border-radius: 0 0 3px 0;
    background: #27724f;
    transform:
        translateX(-50%)
        rotate(45deg);
}

.logiccalc-fuel-refuel-marker svg {
    position: relative;
    z-index: 1;
    width: 15px;
    height: 15px;
}

.logiccalc-fuel-refuel-marker-shell:hover
.logiccalc-fuel-refuel-marker {
    transform:
        translateY(-1px)
        scale(1.08);
    box-shadow:
        0 9px 21px rgba(34, 96, 68, .25),
        0 2px 6px rgba(35, 74, 56, .14);
}

.logiccalc-driver-rest-popup-kind.fuel {
    background: #347e5a;
}

.logiccalc-driver-rest-popup-kind.fuel svg {
    width: 18px;
    height: 18px;
}

.logiccalc-fuel-refuel-popup
.logiccalc-driver-rest-popup-metrics > span {
    border-color: rgba(52, 126, 90, .10);
    background: #f4faf6;
    color: #4b6757;
}

.logiccalc-fuel-refuel-popup
.logiccalc-driver-rest-popup-coordinates {
    border-color: rgba(52, 126, 90, .10);
    background: rgba(245, 250, 247, .84);
}

.logiccalc-fuel-refuel-popup
.logiccalc-driver-rest-copy {
    border-color: rgba(52, 126, 90, .16);
    color: #347e5a;
}

.logiccalc-fuel-refuel-popup
.logiccalc-driver-rest-copy:hover {
    border-color: rgba(52, 126, 90, .28);
    background: #f3faf6;
}

@media (max-width: 620px) {
    .fuel-planning-head {
        flex-direction: column;
    }

    .fuel-planning-map-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .fuel-planning-grid {
        grid-template-columns: 1fr;
    }
}

/* LogicCalc Fuel Planning Map v1.1 FULL FIX — 2026-08-26 */


/* =========================================================
   FUEL PLANNING v1.1 — STATUS / RANGE
========================================================= */

.fuel-planning-panel {
    overflow: hidden;
}

.fuel-planning-heading,
.fuel-planning-heading > span,
.fuel-planning-heading > strong,
.fuel-planning-heading > small {
    min-width: 0;
}

.fuel-planning-grid .input-group {
    flex-wrap: nowrap;
}

.fuel-planning-grid .form-control,
.fuel-planning-grid .input-group-text {
    min-height: 34px;
}

.fuel-planning-grid .form-control:disabled {
    opacity: 1;
    color: #4d554f;
    background: rgba(249, 250, 249, .94);
}

.fuel-planning-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px 13px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(48, 102, 72, .10);
}

.fuel-planning-summary-range {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.fuel-planning-summary-range > span {
    color: #7a827c;
    font-size: .58rem;
    font-weight: 800;
}

.fuel-planning-summary-range > strong {
    color: #347e5a;
    font-size: .69rem;
    font-weight: 920;
}

.fuel-planning-summary-state {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #6e756f;
    font-size: .58rem;
    font-weight: 720;
    line-height: 1.35;
}

.fuel-planning-summary-state strong {
    color: #347e5a;
    font-weight: 920;
}

.fuel-planning-summary-state.is-ok {
    color: #52715e;
}

.fuel-planning-summary-state.is-muted {
    color: #909690;
}

.fuel-planning-summary-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 2px;
    border-radius: 50%;
    background: #65a27e;
    box-shadow: 0 0 0 3px rgba(101, 162, 126, .10);
}

.fuel-planning-summary-dot.is-active {
    background: #347e5a;
    box-shadow: 0 0 0 3px rgba(52, 126, 90, .12);
}

.fuel-planning-summary-state.is-muted
.fuel-planning-summary-dot {
    background: #c3c8c4;
    box-shadow: none;
}

@media (max-width: 620px) {
    .fuel-planning-summary {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   LOGICALC — UNIFIED MAP MARKER SYSTEM v1
   2026-08-26
========================================================= */

.logiccalc-map-marker-shell,
.logiccalc-map-point-marker,
.logiccalc-map-base-marker,
.logiccalc-driver-rest-marker-shell,
.logiccalc-fuel-refuel-marker-shell {
    border: 0 !important;
    background: transparent !important;
}

.logiccalc-map-marker-shell {
    width: 28px !important;
    height: 34px !important;
    overflow: visible !important;
}

.logiccalc-map-marker {
    --lc-marker-bg: #6f7e66;
    --lc-marker-fg: #ffffff;
    --lc-marker-shadow:
        0 7px 17px rgba(48, 55, 45, .20),
        0 2px 5px rgba(48, 55, 45, .12);

    position: relative !important;
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(255, 255, 255, .97) !important;
    border-radius: 50% !important;
    background: var(--lc-marker-bg) !important;
    color: var(--lc-marker-fg) !important;
    box-shadow: var(--lc-marker-shadow) !important;
    transform: translateY(0) scale(1);
    transform-origin: 50% 100% !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease !important;
}

.logiccalc-map-marker::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 50% !important;
    bottom: -5px !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid rgba(255, 255, 255, .97) !important;
    border-bottom: 2px solid rgba(255, 255, 255, .97) !important;
    border-radius: 0 0 3px 0 !important;
    background: var(--lc-marker-bg) !important;
    transform:
        translateX(-50%)
        rotate(45deg) !important;
}

.logiccalc-map-marker-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    line-height: 1;
}

.logiccalc-map-marker-number {
    font-family:
        Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "Segoe UI", sans-serif;
    font-size: .76rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.02em;
}

.logiccalc-map-marker-symbol {
    font-family:
        Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "Segoe UI", sans-serif;
    font-size: .75rem;
    font-weight: 950;
    line-height: 1;
}

.logiccalc-map-marker-fuel-icon {
    width: 15px;
    height: 15px;
    display: block;
}

/* Start — graphite */
.logiccalc-map-marker.logiccalc-map-marker--start {
    --lc-marker-bg: #4b5049;
    --lc-marker-fg: #ffffff;
    --lc-marker-shadow:
        0 7px 17px rgba(48, 54, 47, .24),
        0 2px 5px rgba(48, 54, 47, .13);
}

/* Intermediate route point — calm green */
.logiccalc-map-marker.logiccalc-map-marker--waypoint {
    --lc-marker-bg: #6f9948;
    --lc-marker-fg: #ffffff;
    --lc-marker-shadow:
        0 7px 17px rgba(83, 119, 55, .22),
        0 2px 5px rgba(83, 119, 55, .12);
}

/* Destination — pale sage */
.logiccalc-map-marker.logiccalc-map-marker--destination {
    --lc-marker-bg: #dce8d4;
    --lc-marker-fg: #42503f;
    --lc-marker-shadow:
        0 7px 17px rgba(69, 93, 62, .18),
        0 2px 5px rgba(69, 93, 62, .10);
}

/* Starting Base */
.logiccalc-map-marker.logiccalc-map-marker--base {
    --lc-marker-bg: #607a72;
    --lc-marker-fg: #ffffff;
    --lc-marker-shadow:
        0 7px 17px rgba(55, 87, 78, .22),
        0 2px 5px rgba(55, 87, 78, .12);
}

/* 45-minute break — clear warm yellow */
.logiccalc-map-marker.logiccalc-map-marker--short-break {
    --lc-marker-bg: #f3c74f;
    --lc-marker-fg: #4f431e;
    --lc-marker-shadow:
        0 7px 17px rgba(164, 126, 22, .22),
        0 2px 5px rgba(164, 126, 22, .12);
}

/* Daily rest / sleep — dark blue */
.logiccalc-map-marker.logiccalc-map-marker--daily-rest {
    --lc-marker-bg: #2f4f77;
    --lc-marker-fg: #ffffff;
    --lc-marker-shadow:
        0 7px 17px rgba(37, 64, 100, .24),
        0 2px 5px rgba(37, 64, 100, .13);
}

/* Fuel — muted teal */
.logiccalc-map-marker.logiccalc-map-marker--fuel {
    --lc-marker-bg: #438995;
    --lc-marker-fg: #ffffff;
    --lc-marker-shadow:
        0 7px 17px rgba(45, 105, 116, .22),
        0 2px 5px rgba(45, 105, 116, .12);
}

/* Win over legacy rest/fuel rules while keeping their popup logic intact. */
.logiccalc-map-marker.logiccalc-driver-rest-marker,
.logiccalc-map-marker.logiccalc-fuel-refuel-marker {
    width: 28px !important;
    height: 28px !important;
    border: 2px solid rgba(255, 255, 255, .97) !important;
    border-radius: 50% !important;
    background: var(--lc-marker-bg) !important;
    color: var(--lc-marker-fg) !important;
    box-shadow: var(--lc-marker-shadow) !important;
}

.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-rest,
.logiccalc-map-marker.logiccalc-fuel-refuel-marker {
    background: var(--lc-marker-bg) !important;
}

.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break::after,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-rest::after,
.logiccalc-map-marker.logiccalc-fuel-refuel-marker::after {
    background: var(--lc-marker-bg) !important;
}

/* Same hover for every point family. */
.logiccalc-map-marker-shell:hover .logiccalc-map-marker,
.logiccalc-map-point-marker:hover .logiccalc-map-marker,
.logiccalc-map-base-marker:hover .logiccalc-map-marker,
.logiccalc-driver-rest-marker-shell:hover .logiccalc-map-marker,
.logiccalc-fuel-refuel-marker-shell:hover .logiccalc-map-marker {
    transform:
        translateY(-2px)
        scale(1.08) !important;
    filter: saturate(1.03);
    box-shadow:
        0 10px 22px rgba(44, 52, 43, .23),
        0 3px 7px rgba(44, 52, 43, .12) !important;
}

/* Shared entrance animation. */
.logiccalc-map-marker--animated {
    animation:
        logiccalcUnifiedMarkerPop
        .42s cubic-bezier(.16, 1, .3, 1)
        both;
    animation-delay:
        var(--logiccalc-marker-delay, 0ms);
}

@keyframes logiccalcUnifiedMarkerPop {
    0% {
        opacity: 0;
        transform:
            translateY(5px)
            scale(.55);
    }

    70% {
        opacity: 1;
        transform:
            translateY(-1px)
            scale(1.06);
    }

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

@media (prefers-reduced-motion: reduce) {
    .logiccalc-map-marker--animated {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .logiccalc-map-marker-shell:hover .logiccalc-map-marker,
    .logiccalc-map-point-marker:hover .logiccalc-map-marker,
    .logiccalc-map-base-marker:hover .logiccalc-map-marker,
    .logiccalc-driver-rest-marker-shell:hover .logiccalc-map-marker,
    .logiccalc-fuel-refuel-marker-shell:hover .logiccalc-map-marker {
        transform: none !important;
        filter: none !important;
    }
}


/* =========================================================
   UNIFIED MARKERS v1.2 — BREAK COLOR HOTFIX
   Force 45-min pause to read as YELLOW, never olive/green.
========================================================= */

.logiccalc-map-marker.logiccalc-map-marker--short-break,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break {
    --lc-marker-bg: #F4C542 !important;
    --lc-marker-fg: #4f431e !important;
    background: #f3c74f !important;
    color: #4f431e !important;
}

.logiccalc-map-marker.logiccalc-map-marker--short-break::after,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break::after {
    background: #f3c74f !important;
}

.logiccalc-map-marker.logiccalc-map-marker--short-break
.logiccalc-map-marker-content,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break
.logiccalc-map-marker-content,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break
.logiccalc-map-marker-symbol {
    color: #4f431e !important;
}

/* =========================================================
   LOGICALC — BEE YELLOW 45-MIN BREAK FINAL OVERRIDE
   Bee-yellow body + dark symbol.
========================================================= */

/* Marker body — cover both unified and legacy break classes. */
.leaflet-marker-icon .logiccalc-map-marker--short-break,
.leaflet-marker-icon .logiccalc-driver-rest-marker.is-break,
.logiccalc-map-marker.logiccalc-map-marker--short-break,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break,
.logiccalc-driver-rest-marker.is-break {
    --lc-marker-bg: #FFC107 !important;
    --lc-marker-fg: #2B2413 !important;

    background: #FFC107 !important;
    background-color: #FFC107 !important;
    background-image: none !important;

    color: #2B2413 !important;
    border-color: #FFFFFF !important;
}

/* Pin tail / pointer. */
.leaflet-marker-icon .logiccalc-map-marker--short-break::after,
.leaflet-marker-icon .logiccalc-driver-rest-marker.is-break::after,
.logiccalc-map-marker.logiccalc-map-marker--short-break::after,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break::after,
.logiccalc-driver-rest-marker.is-break::after {
    background: #FFC107 !important;
    background-color: #FFC107 !important;
    background-image: none !important;
}

/* Pause glyph. */
.leaflet-marker-icon .logiccalc-map-marker--short-break *,
.leaflet-marker-icon .logiccalc-driver-rest-marker.is-break *,
.logiccalc-map-marker.logiccalc-map-marker--short-break *,
.logiccalc-map-marker.logiccalc-driver-rest-marker.is-break *,
.logiccalc-driver-rest-marker.is-break * {
    color: #2B2413 !important;
}


/* =========================================================
   LOGICALC — SHORT BREAK SVG MARKER FINAL ISOLATION
   The 45-minute break is rendered as an SVG in map.js.
   Reset wrapper effects so global Leaflet/icon filters cannot recolor it.
========================================================= */
.leaflet-marker-icon.logiccalc-break-marker-shell,
.logiccalc-break-marker-shell {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.leaflet-marker-icon.logiccalc-break-marker-shell:hover,
.logiccalc-break-marker-shell:hover,
.logiccalc-break-marker-shell .logiccalc-break-marker-svg {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* =========================================================
   SETTINGS DROPDOWN v2 — compact premium settings panel
   Visual-only redesign; existing handlers/bindings stay intact.
========================================================= */

.premium-menu-panel--settings.settings-v2-panel {
    width: 430px;
    max-width: calc(100vw - 24px);
    padding: 16px 16px 14px;
    border: 1px solid rgba(70, 72, 67, 0.10);
    border-radius: 22px;
    background: #fbfbf8 !important;
    box-shadow:
        0 28px 70px rgba(40, 42, 37, 0.16),
        0 8px 24px rgba(40, 42, 37, 0.07);
}

.premium-menu-panel--settings.settings-v2-panel::before {
    border-left-color: rgba(70, 72, 67, 0.10);
    border-top-color: rgba(70, 72, 67, 0.10);
    background: #fbfbf8;
}

.settings-v2-title {
    margin-bottom: 8px;
    padding: 1px 1px 12px;
    color: #666b64;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
}

.settings-v2-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-v2-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 9px 4px;
    border-radius: 13px;
    transition:
        background-color 0.16s ease,
        transform 0.16s ease;
}

.settings-v2-row--toggle {
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .settings-v2-row:hover {
        background: rgba(101, 73, 210, 0.035);
    }
}

.settings-v2-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(101, 73, 210, 0.07);
    background: rgba(238, 233, 255, 0.72);
    color: #6549d2;
}

.settings-v2-icon svg {
    width: 19px;
    height: 19px;
    display: block;
}

.settings-v2-icon--green {
    border-color: rgba(72, 145, 79, 0.09);
    background: rgba(232, 244, 228, 0.84);
    color: #4f9a52;
}

.settings-v2-copy {
    min-width: 0;
    margin: 0;
    color: #373b36;
    line-height: 1.25;
}

.settings-v2-copy strong {
    display: block;
    color: #373b36;
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.settings-v2-copy--toggle {
    cursor: pointer;
}

.settings-v2-control {
    width: 178px;
    min-width: 0;
}

.premium-menu-panel--settings .settings-v2-select {
    width: 100%;
    min-height: 38px !important;
    margin: 0;
    padding: 6px 31px 6px 10px !important;
    border: 1px solid rgba(63, 68, 61, 0.12) !important;
    border-radius: 11px !important;
    background-color: #ffffff !important;
    color: #343834 !important;
    font-size: 0.72rem !important;
    font-weight: 690;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 7px rgba(43, 47, 40, 0.025) !important;
}

.premium-menu-panel--settings .settings-v2-select:hover {
    border-color: rgba(101, 73, 210, 0.20) !important;
}

.premium-menu-panel--settings .settings-v2-select:focus {
    border-color: rgba(101, 73, 210, 0.34) !important;
    box-shadow: 0 0 0 3px rgba(101, 73, 210, 0.075) !important;
}

.settings-v2-divider {
    height: 1px;
    margin: 5px 4px;
    background: rgba(58, 63, 56, 0.075);
}

.premium-menu-panel--settings .settings-v2-toggle.form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: relative;
    flex: 0 0 auto;

    width: 42px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(73, 78, 70, 0.16) !important;
    border-radius: 999px !important;
    background: #d9dad5 !important;
    background-image: none !important;
    cursor: pointer;
    box-shadow: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.premium-menu-panel--settings .settings-v2-toggle.form-check-input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;

    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: #ffffff;
    box-shadow: 0 1px 3px rgba(24, 28, 22, 0.18);

    transition: transform 0.18s ease;
}

.premium-menu-panel--settings .settings-v2-toggle.form-check-input:checked {
    border-color: #6549d2 !important;
    background: #6549d2 !important;
    background-image: none !important;
}

.premium-menu-panel--settings .settings-v2-toggle.form-check-input:checked::after {
    transform: translateX(18px);
}

.premium-menu-panel--settings .settings-v2-toggle.form-check-input:focus {
    border-color: rgba(101, 73, 210, 0.34) !important;
    box-shadow: 0 0 0 3px rgba(101, 73, 210, 0.08) !important;
}

.premium-menu-panel--settings .settings-v2-toggle.form-check-input:focus:not(:checked) {
    background: #d9dad5 !important;
}

@media (max-width: 470px) {
    .premium-menu-panel--settings.settings-v2-panel {
        width: min(430px, calc(100vw - 20px));
        padding: 14px 13px 12px;
    }

    .settings-v2-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 9px;
        min-height: 56px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .settings-v2-icon {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .settings-v2-icon svg {
        width: 18px;
        height: 18px;
    }

    .settings-v2-control {
        width: 148px;
    }

    .settings-v2-copy strong {
        font-size: 0.72rem;
    }

    .premium-menu-panel--settings .settings-v2-select {
        font-size: 0.68rem !important;
    }
}

@media (max-width: 370px) {
    .settings-v2-row--select {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .settings-v2-row--select .settings-v2-control {
        grid-column: 2;
        width: 100%;
        margin-top: -2px;
        padding-bottom: 3px;
    }
}