body {
    background:
        radial-gradient(circle at top right, rgba(220, 53, 69, 0.07), transparent 28rem),
        #f5f6f8;
    color: #20242a;
    min-height: 100vh;
}

.panel-hero {
    background: linear-gradient(125deg, #8f1220 0%, #b7192b 48%, #dc3545 100%);
    border-radius: 1rem;
    color: #fff;
    box-shadow: 0 0.65rem 1.6rem rgba(86, 12, 21, 0.22) !important;
}

.panel-hero .badge {
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
}

.panel-hero .menu-konta .badge {
    padding: 0.32rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.panel-hero .belka-przycisk-kafelek {
    width: 2.45rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.panel-hero .belka-akcje .bi {
    font-size: 1rem !important;
    line-height: 1;
}

.panel-hero .belka-powrot-pojazdy {
    gap: 0.18rem;
}

.panel-hero .belka-powrot-pojazdy .bi {
    font-size: 0.86rem !important;
}

.panel-hero .belka-login {
    line-height: 1;
    padding-right: 0.15rem;
}

.panel-hero .btn-outline-light:hover,
.panel-hero .btn-outline-light:focus {
    color: #8f1220;
}

.ekspon-tabs .nav-link {
    color: #8f1220;
    background: #fff;
    border: 1px solid #c4939a;
    border-radius: 0.55rem 0.55rem 0 0;
    font-weight: 600;
}

.ekspon-tabs .nav-link:hover,
.ekspon-tabs .nav-link:focus {
    color: #72101b;
    background: #fff5f6;
    border-color: #a94a57;
}

.ekspon-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(120deg, #8f1220, #dc3545);
    border-color: #8f1220;
    border-top-width: 3px;
    font-weight: 700;
    box-shadow: 0 0.25rem 0.65rem rgba(143, 18, 32, 0.24);
}

main.container {
    min-height: calc(100vh - 10rem);
}

.card {
    border-radius: 0.8rem;
}

.ikona-samochodu-strazackiego {
    color: #dc3545;
    display: inline-flex;
    font-size: 2.5rem;
    line-height: 1;
    padding-top: 0.16em;
    position: relative;
}

.ikona-samochodu-strazackiego .bi {
    font-size: inherit;
    line-height: 1;
}

.ikona-samochodu-strazackiego-sygnaly {
    display: flex;
    gap: 0.12em;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.ikona-samochodu-strazackiego-sygnaly > span {
    background: #0d6efd;
    border: 0.025em solid #fff;
    border-radius: 0.08em 0.08em 0 0;
    box-shadow: 0 0 0.11em rgba(13, 110, 253, 0.85);
    display: block;
    height: 0.16em;
    width: 0.2em;
}

.card-header {
    border-top-left-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}

.table > :not(caption) > * > * {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.ql-toolbar.ql-snow {
    border-radius: 0.6rem 0.6rem 0 0;
    background: #f8f9fa;
}

.ql-container.ql-snow {
    border-radius: 0 0 0.6rem 0.6rem;
    background: #fff;
    font-size: 1rem;
}

.app-footer {
    color: #6c757d;
    font-size: 0.82rem;
}

.pojazd-zdjecia-przycisk {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    line-height: 1;
    padding: 0.25rem 0.35rem;
}

.pojazd-zdjecia-przycisk:hover,
.pojazd-zdjecia-przycisk:focus-visible {
    background: #eaf2ff;
}

.pojazd-zdjecia-licznik {
    font-size: 0.68rem;
    font-weight: 700;
}

.pojazd-kryptonim {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.04em;
}

.pojazd-podglad-hero {
    background: linear-gradient(125deg, #8f1220 0%, #b7192b 52%, #dc3545 100%);
    border-radius: 0.85rem;
    box-shadow: 0 0.6rem 1.4rem rgba(86, 12, 21, 0.2);
}

.pojazd-podglad-ikona {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.8rem;
    display: inline-flex;
    font-size: 1.8rem;
    height: 3.4rem;
    justify-content: center;
    width: 3.4rem;
}

.pojazd-podglad-jednostka {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
}

.pojazd-podglad-jednostka-lista dt,
.pojazd-podglad-jednostka-lista dd {
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.pojazd-podglad-jednostka-lista dt {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}

.pojazd-podglad-jednostka-lista dd {
    color: #fff;
}

.pojazd-podglad-lista dt,
.pojazd-podglad-lista dd {
    border-bottom: 1px solid #edf0f2;
    margin: 0;
    padding-bottom: 0.55rem;
    padding-top: 0.55rem;
}

.pojazd-podglad-lista dt {
    color: #6c757d;
    font-size: 0.82rem;
    font-weight: 600;
}

.pojazd-podglad-lista dd {
    color: #212529;
    overflow-wrap: anywhere;
}

.pojazd-podglad-lista dt:nth-last-of-type(1),
.pojazd-podglad-lista dd:nth-last-of-type(1) {
    border-bottom: 0;
}

.pojazd-podglad-uwagi {
    line-height: 1.55;
    white-space: pre-line;
}

.formularz-pojazdu-hero {
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.16), transparent 13rem),
        linear-gradient(125deg, #111827 0%, #273549 58%, #8f1220 100%);
    border-radius: 1rem;
    box-shadow: 0 0.7rem 1.8rem rgba(17, 24, 39, 0.2);
    color: #fff;
    padding: 1.5rem;
}

.formularz-pojazdu-hero-ikona {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.9rem;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.8rem;
    height: 3.8rem;
    justify-content: center;
    width: 3.8rem;
}

.formularz-pojazdu-hero-nadtytul {
    color: #ffadb6;
    letter-spacing: 0.08em;
}

.formularz-pojazdu {
    display: grid;
    gap: 1.25rem;
}

.formularz-pojazdu-sekcja {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 1rem;
    box-shadow: 0 0.35rem 1rem rgba(17, 24, 39, 0.07);
    overflow: hidden;
}

.formularz-pojazdu-sekcja-naglowek {
    align-items: center;
    background: linear-gradient(110deg, #fff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e9ecef;
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    position: relative;
}

.formularz-pojazdu-sekcja-ikona {
    align-items: center;
    background: #fff0f2;
    border: 1px solid #f5c2c7;
    border-radius: 0.7rem;
    color: #a41424;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.7rem;
    justify-content: center;
    width: 2.7rem;
}

.formularz-pojazdu-krok {
    color: #d9dde2;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    margin-left: auto;
}

.formularz-pojazdu-sekcja-tresc {
    padding: 1.25rem;
}

.formularz-pojazdu .form-label {
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 650;
    margin-bottom: 0.42rem;
}

.formularz-pojazdu .form-control,
.formularz-pojazdu .form-select {
    border-color: #cfd4da;
    border-radius: 0.65rem;
    min-height: 2.85rem;
}

.formularz-pojazdu .form-control:focus,
.formularz-pojazdu .form-select:focus {
    border-color: #b7192b;
    box-shadow: 0 0 0 0.22rem rgba(183, 25, 43, 0.13);
}

.formularz-pojazdu .form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
}

.formularz-pojazdu input.form-control::placeholder {
    color: #b8bec5;
    font-weight: 400;
    opacity: 1;
}

.formularz-pojazdu .form-text {
    color: #747b83;
    line-height: 1.4;
}

.formularz-pojazdu-wybor {
    align-items: center;
    background: #fbfbfc;
    display: flex;
    justify-content: space-between;
}

.formularz-pojazdu-wybor:hover {
    background: #fff5f6;
    border-color: #b7192b;
}

.formularz-pojazdu-kryptonim {
    background: #fbfbfc;
    border: 1px solid #e1e4e8;
    border-radius: 0.75rem;
    margin: 0;
    padding: 0.8rem;
}

.formularz-pojazdu-kryptonim legend {
    float: none;
    width: auto;
}

.formularz-pojazdu-kryptonim code {
    color: #a41424;
    font-size: 0.82rem;
    font-weight: 700;
}

.formularz-pojazdu-edytor {
    border-radius: 0 0 0.65rem 0.65rem;
}

.formularz-pojazdu-akcje {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dee2e6;
    border-radius: 0.9rem;
    bottom: 0.75rem;
    box-shadow: 0 0.55rem 1.4rem rgba(17, 24, 39, 0.13);
    padding: 0.85rem 1rem;
    position: sticky;
    z-index: 5;
}

.formularz-pojazdu-so {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formularz-pojazdu-so:has(.wybor-so:checked) {
    border-color: #b7192b;
    box-shadow: 0 0 0 0.18rem rgba(183, 25, 43, 0.1);
}

.pozycja-wyposazenia:has(.wybor-wyposazenia:checked) {
    background: #fff5f6;
    border-left: 3px solid #b7192b;
}

@media (max-width: 575.98px) {
    .formularz-pojazdu-hero,
    .formularz-pojazdu-sekcja-tresc {
        padding: 1rem;
    }

    .formularz-pojazdu-hero-ikona {
        font-size: 1.35rem;
        height: 3rem;
        width: 3rem;
    }

    .formularz-pojazdu-krok {
        display: none;
    }

    .formularz-pojazdu-akcje {
        bottom: auto;
        position: relative;
    }

    .formularz-pojazdu-akcje .btn {
        width: 100%;
    }
}

.pojazdy-galeria-naglowek {
    background: linear-gradient(120deg, #111827, #273549);
}

.pojazdy-galeria-plansza {
    background: radial-gradient(circle at center, #303b4a 0%, #111827 72%);
    min-height: min(68vh, 48rem);
    padding: 1.25rem 4.5rem;
}

.pojazdy-galeria-obraz {
    max-height: 68vh;
    object-fit: contain;
    width: auto;
}

.pojazdy-galeria-podpis {
    background: #111827;
    min-height: 5.5rem;
    padding-bottom: 2rem !important;
}

.pojazdy-galeria-wskazniki {
    bottom: 0.25rem;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .pojazdy-galeria-plansza {
        min-height: 52vh;
        padding: 0.75rem 2.75rem;
    }

    .pojazdy-galeria-obraz {
        max-height: 58vh;
    }
}

.wiersz-so[draggable="true"] {
    cursor: grab;
}

.wiersz-so[draggable="true"]:active {
    cursor: grabbing;
}

.uchwyt-so {
    cursor: inherit;
    touch-action: none;
}

.historia-metryka {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.8rem;
    padding: 1rem;
}

.historia-zmiana-przed {
    background: #fff5f5;
    border-right: 1px solid #dee2e6;
}

.historia-zmiana-po {
    background: #f2fbf5;
}

.historia-zmiana-etykieta {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.historia-wartosc,
.historia-json {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.historia-json {
    max-height: 22rem;
    overflow: auto;
    font-size: 0.78rem;
}

.historia-lista-danych > :nth-last-child(-n + 2) {
    border-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    .historia-zmiana-przed {
        border-right: 0;
        border-bottom: 1px solid #dee2e6;
    }

    .historia-lista-danych dt {
        border-bottom: 0 !important;
    }

    .historia-lista-danych dd:last-child {
        border-bottom: 0 !important;
    }
}

.raporty-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(239, 68, 68, 0.42), transparent 13rem),
        radial-gradient(circle at 72% 110%, rgba(37, 99, 235, 0.22), transparent 18rem),
        linear-gradient(125deg, #111827 0%, #273549 55%, #7f1420 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 0.9rem 2.2rem rgba(17, 24, 39, 0.2);
    color: #fff;
    overflow: hidden;
    padding: 1.6rem;
    position: relative;
}

.raporty-hero::after {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    content: "";
    height: 13rem;
    position: absolute;
    right: -4rem;
    top: -7rem;
    width: 13rem;
}

.raporty-hero > * {
    position: relative;
    z-index: 1;
}

.raporty-nadtytul,
.raporty-naglowek-sekcji {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.raporty-nadtytul {
    color: #fda4af;
}

.raporty-naglowek-sekcji {
    color: #b7192b;
    margin-bottom: 0.25rem;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

.raporty-hero-badge {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.42rem 0.7rem;
}

.raporty-eksporty .btn {
    border-radius: 0.65rem;
    font-weight: 650;
    min-height: 2.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.raporty-filtry {
    background: linear-gradient(115deg, #fff 0%, #fafbfc 100%);
    border-radius: 1rem;
}

.raporty-filtry .form-label {
    color: #344054;
    font-size: 0.82rem;
    font-weight: 700;
}

.raporty-filtry .form-control,
.raporty-filtry .form-select {
    border-color: #d7dce2;
    border-radius: 0.65rem;
    min-height: 2.75rem;
}

.raporty-filtry .form-control:focus,
.raporty-filtry .form-select:focus {
    border-color: #b7192b;
    box-shadow: 0 0 0 0.22rem rgba(183, 25, 43, 0.12);
}

.raporty-sekcja-ikona {
    align-items: center;
    background: #fff0f2;
    border: 1px solid #f4c4ca;
    border-radius: 0.75rem;
    color: #a41424;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.raporty-kpi {
    align-items: center;
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 0.95rem;
    box-shadow: 0 0.4rem 1.15rem rgba(17, 24, 39, 0.06);
    display: flex;
    gap: 1rem;
    overflow: hidden;
    padding: 1.15rem;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.raporty-kpi::before {
    background: var(--raporty-kpi-kolor);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 0.25rem;
}

.raporty-kpi:hover {
    box-shadow: 0 0.7rem 1.5rem rgba(17, 24, 39, 0.1);
    transform: translateY(-2px);
}

.raporty-kpi-pojazdy {
    --raporty-kpi-kolor: #b7192b;
    --raporty-kpi-tlo: #fff0f2;
}

.raporty-kpi-tankowania {
    --raporty-kpi-kolor: #2563eb;
    --raporty-kpi-tlo: #eff6ff;
}

.raporty-kpi-litry {
    --raporty-kpi-kolor: #0f766e;
    --raporty-kpi-tlo: #ecfdf5;
}

.raporty-kpi-dystans {
    --raporty-kpi-kolor: #d97706;
    --raporty-kpi-tlo: #fffbeb;
}

.raporty-kpi-ikona {
    align-items: center;
    background: var(--raporty-kpi-tlo);
    border-radius: 0.8rem;
    color: var(--raporty-kpi-kolor);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
    height: 3.2rem;
    justify-content: center;
    width: 3.2rem;
}

.raporty-kpi-etykieta {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 650;
}

.raporty-kpi-wartosc {
    color: #172033;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
    margin: 0.18rem 0;
}

.raporty-kpi-wartosc small {
    color: #667085;
    font-size: 0.72em;
    font-weight: 650;
    letter-spacing: normal;
}

.raporty-kpi-opis {
    color: #98a2b3;
    font-size: 0.7rem;
}

.raporty-panel {
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 1.25rem rgba(17, 24, 39, 0.06);
    overflow: hidden;
}

.raporty-panel-naglowek {
    align-items: center;
    border-bottom: 1px solid #edf0f3;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
}

.raporty-panel-znacznik {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e7eaee;
    border-radius: 0.65rem;
    color: #b7192b;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.45rem;
    justify-content: center;
    width: 2.45rem;
}

.raporty-wykres {
    padding: 1rem 1.15rem 1.25rem;
    position: relative;
    width: 100%;
}

.raporty-wykres-trend,
.raporty-wykres-donut {
    height: 22rem;
}

.raporty-wykres-ranking {
    height: 24rem;
}

.raporty-wykres canvas {
    max-height: 100%;
    max-width: 100%;
}

.raporty-pusty {
    border-radius: 1rem;
}

.raporty-pusty-ikona {
    align-items: center;
    background: #f1f5f9;
    border-radius: 50%;
    color: #94a3b8;
    display: inline-flex;
    font-size: 2rem;
    height: 4.5rem;
    justify-content: center;
    width: 4.5rem;
}

.raporty-terminy-naglowek {
    flex-wrap: wrap;
}

.raporty-tabela thead th {
    background: #f8fafc;
    border-bottom-color: #dde2e7;
    color: #667085;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    padding: 0.8rem 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.raporty-tabela tbody td {
    border-color: #edf0f3;
    padding: 0.85rem 1rem;
}

.raporty-tabela tbody tr:last-child td {
    border-bottom: 0;
}

.raporty-tabela tbody tr:hover td {
    background: #fbfcfd;
}

.raporty-paliwo {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 650;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    white-space: nowrap;
}

.raporty-paliwo .bi {
    color: #2563eb;
}

.raporty-link-pojazdu {
    color: #a41424;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.raporty-link-pojazdu:hover,
.raporty-link-pojazdu:focus {
    color: #7f101d;
    text-decoration: underline;
}

.raporty-pusty-wiersz {
    align-items: center;
    color: #667085;
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    min-height: 4rem;
}

@media (max-width: 767.98px) {
    .raporty-hero {
        padding: 1.2rem;
    }

    .raporty-hero .display-6 {
        font-size: 1.8rem;
    }

    .raporty-eksporty,
    .raporty-eksporty form,
    .raporty-eksporty .btn {
        width: 100%;
    }

    .raporty-panel-naglowek {
        align-items: flex-start;
        padding: 1rem;
    }

    .raporty-wykres {
        padding: 0.75rem;
    }

    .raporty-wykres-trend,
    .raporty-wykres-donut {
        height: 19rem;
    }

    .raporty-wykres-ranking {
        height: 22rem;
    }

    .raporty-tabela thead th,
    .raporty-tabela tbody td {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .raporty-kpi {
        transition: none;
    }
}