:root {
    --color-ink: #0f172a;
    --color-primary: #2563eb;
    --color-accent: #f97316;
    --color-soft: #f8fafc;
    --color-text: #475569;
    --color-white: #ffffff;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    --radius: 8px;
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: 15px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--color-ink);
    background: var(--color-soft);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(18px, 4vw, 52px);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    backdrop-filter: blur(18px);
    transition: box-shadow 180ms ease, padding 180ms ease;
}

.site-header.is-scrolled {
    padding-block: 10px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

.brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--color-text);
    font-weight: 650;
}

.site-nav a:hover,
.link-button:hover {
    color: var(--color-primary);
}

.nav-toggle,
.link-button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.nav-toggle {
    display: none;
    font-size: 28px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 750;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
}

.button-primary {
    color: var(--color-white);
    background: var(--color-primary);
}

.button-accent {
    color: var(--color-white);
    background: var(--color-accent);
}

.button-light {
    color: var(--color-ink);
    background: var(--color-white);
}

.button-outline {
    color: var(--color-ink);
    background: transparent;
    border-color: rgba(15, 23, 42, 0.18);
}

.button-small {
    min-height: 36px;
    padding-inline: 14px;
    font-size: 14px;
    background: var(--color-ink);
    color: var(--color-white);
}

.flash {
    max-width: var(--container);
    margin: 16px auto 0;
    padding: 12px 16px;
    border-radius: var(--radius);
}

.flash-error {
    color: #7f1d1d;
    background: #fee2e2;
}

.flash-success {
    color: #14532d;
    background: #dcfce7;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 34px;
    max-width: var(--container);
    min-height: calc(100vh - 78px);
    margin: 0 auto;
    padding: 64px 20px 40px;
    align-items: center;
}

.hero-copy h1,
.page-hero h1,
.section-heading h2,
.feature-band h2 {
    margin: 0;
    line-height: 1.05;
    letter-spacing: 0;
}

.hero-copy h1 {
    max-width: 720px;
    font-size: clamp(42px, 8vw, 78px);
}

.hero-copy p {
    max-width: 580px;
    margin: 22px 0 0;
    color: var(--color-text);
    font-size: 18px;
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.hero-media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #e0f2fe, #ffffff);
    box-shadow: var(--shadow);
}

.hero-media img {
    width: 100%;
    min-height: 380px;
    object-fit: cover;
}

.search-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
}

label {
    display: grid;
    gap: 8px;
    color: var(--color-ink);
    font-size: 14px;
    font-weight: 750;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: var(--radius);
    padding: 12px 13px;
    color: var(--color-ink);
    background: var(--color-white);
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(37, 99, 235, 0.16);
    border-color: var(--color-primary);
}

.section,
.page-hero,
.catalog-layout,
.detail-layout,
.form-section,
.auth-page,
.dashboard-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: 70px 20px;
}

.page-hero {
    padding-bottom: 34px;
}

.page-hero.compact {
    padding-top: 36px;
}

.page-hero h1,
.section-heading h2,
.feature-band h2 {
    font-size: clamp(32px, 5vw, 52px);
}

.page-hero p,
.section-heading p {
    color: var(--color-text);
}

.section-heading {
    margin-bottom: 26px;
}

.car-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.car-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.car-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.car-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.car-card-body {
    padding: 18px;
}

.car-card h2,
.car-card h3 {
    margin: 10px 0 6px;
    font-size: 22px;
}

.car-card p {
    color: var(--color-text);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e3a8a;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

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

.feature-band {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: start;
    color: var(--color-white);
    background: var(--color-ink);
    max-width: none;
    padding-inline: max(20px, calc((100vw - var(--container)) / 2));
}

.feature-list {
    display: grid;
    gap: 12px;
}

.feature-list article {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
}

.feature-list span {
    color: #cbd5e1;
}

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

.stats article,
.stat-card,
.admin-panel,
.empty-state,
.panel-form,
.auth-card,
.detail-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.stats article,
.stat-card {
    padding: 22px;
}

.stats strong,
.stat-card strong {
    display: block;
    color: var(--color-primary);
    font-size: 36px;
    line-height: 1;
}

.stats span,
.stat-card span {
    color: var(--color-text);
}

.catalog-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.filters {
    position: sticky;
    top: 92px;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.filters form,
.panel-form,
.auth-card {
    display: grid;
    gap: 16px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.pagination a {
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--color-white);
}

.detail-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    align-items: start;
}

.detail-media img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.detail-card,
.panel-form,
.auth-card,
.admin-panel {
    padding: 24px;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.spec-grid div {
    padding: 12px;
    border-radius: var(--radius);
    background: var(--color-soft);
}

.spec-grid dt {
    color: var(--color-text);
    font-size: 13px;
}

.spec-grid dd {
    margin: 0;
    font-weight: 800;
}

.form-section {
    max-width: 760px;
}

.price-result,
.form-feedback {
    min-height: 32px;
    color: var(--color-text);
}

.auth-page {
    display: grid;
    min-height: 78vh;
    place-items: center;
}

.auth-card {
    width: min(440px, 100%);
}

.auth-card img {
    width: 68px;
    margin-bottom: 8px;
}

.muted {
    color: var(--color-text);
    font-size: 13px;
}

.site-footer {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 28px;
    padding: 46px max(20px, calc((100vw - var(--container)) / 2));
    color: #cbd5e1;
    background: var(--color-ink);
}

.site-footer h2 {
    color: var(--color-white);
    font-size: 16px;
}

.site-footer a {
    display: block;
    margin: 8px 0;
}

.footer-logo {
    width: 58px;
    margin-bottom: 14px;
}

.admin-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    padding: 22px;
    color: var(--color-white);
    background: var(--color-ink);
}

.admin-sidebar nav {
    display: grid;
    gap: 8px;
    margin-top: 28px;
}

.admin-sidebar a {
    padding: 10px 12px;
    border-radius: var(--radius);
}

.admin-sidebar a:hover {
    background: rgba(255, 255, 255, 0.09);
}

.brand-admin img {
    background: var(--color-white);
    border-radius: var(--radius);
}

.admin-main {
    padding: 26px;
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

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

.admin-panel {
    margin-top: 24px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.module-grid span {
    padding: 12px;
    border-radius: var(--radius);
    background: var(--color-soft);
    font-weight: 750;
}

.error-page,
.maintenance-page {
    display: grid;
    min-height: 70vh;
    place-items: center;
    align-content: center;
    padding: 30px;
    text-align: center;
}

.error-page h1,
.maintenance-page h1 {
    margin: 0;
    font-size: clamp(40px, 8vw, 84px);
}

.maintenance-page img {
    width: 86px;
    margin-bottom: 18px;
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 420ms ease, transform 420ms ease;
}

@media (max-width: 980px) {
    .hero,
    .detail-layout,
    .feature-band,
    .catalog-layout,
    .site-footer,
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .search-panel,
    .car-grid,
    .stats,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        inset: 74px 16px auto 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        border-radius: var(--radius);
        background: var(--color-white);
        box-shadow: var(--shadow);
    }

    .site-nav.is-open {
        display: flex;
    }

    .client-header .site-nav {
        position: static;
        display: flex;
        box-shadow: none;
        padding: 0;
    }

    .hero {
        padding-top: 38px;
    }

    .hero-copy h1 {
        font-size: 42px;
    }

    .search-panel,
    .car-grid,
    .stats,
    .dashboard-grid,
    .module-grid,
    .spec-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Admin dashboard */
.admin-shell {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 32%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.12), transparent 28%),
        #0f172a;
}

.brand-admin {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
}

.brand-admin img {
    width: 54px;
    height: 54px;
}

.brand-admin span {
    display: grid;
    line-height: 1.15;
}

.brand-admin small {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.admin-nav {
    display: grid;
    gap: 8px;
    margin-top: 28px;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: #cbd5e1;
    font-weight: 800;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-nav a:hover,
.admin-nav a.is-active {
    color: #ffffff;
    background: rgba(37, 99, 235, 0.24);
    transform: translateX(2px);
}

.admin-nav svg,
.admin-sidebar-card svg,
.stat-icon svg,
.ops-strip svg,
.alert-icon svg,
.quick-actions svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex: none;
}

.admin-sidebar-card {
    display: grid;
    gap: 8px;
    margin-top: 32px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar-card span {
    color: #94a3b8;
    font-size: 13px;
}

.admin-main {
    padding: clamp(20px, 3vw, 36px);
}

.admin-topbar {
    padding: 18px 0 28px;
}

.admin-topbar h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1;
}

.admin-kicker {
    display: inline-flex;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    margin-bottom: 22px;
    padding: clamp(22px, 4vw, 36px);
    border-radius: var(--radius);
    color: #ffffff;
    background:
        radial-gradient(circle at 78% 20%, rgba(249, 115, 22, 0.34), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.admin-hero h2 {
    max-width: 780px;
    margin: 8px 0 0;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.05;
}

.admin-hero p {
    max-width: 720px;
    margin: 16px 0 0;
    color: #dbeafe;
    font-size: 17px;
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.admin-hero-panel {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    min-height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(16px);
}

.admin-hero-panel > span {
    color: #bfdbfe;
    font-weight: 800;
}

.admin-hero-panel > strong {
    font-size: 52px;
    line-height: 1;
}

.progress-ring {
    --progress: 0;
    display: grid;
    width: 116px;
    height: 116px;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side, rgba(15, 23, 42, 0.84) 68%, transparent 69%),
        conic-gradient(#f97316 calc(var(--progress) * 1%), rgba(255, 255, 255, 0.18) 0);
}

.progress-ring span {
    font-weight: 900;
}

.dashboard-grid-pro {
    margin-bottom: 18px;
}

.stat-card-pro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 146px;
    position: relative;
    overflow: hidden;
}

.stat-card-pro::after {
    content: "";
    position: absolute;
    inset: auto -30px -42px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
}

.stat-card-pro strong {
    margin: 8px 0;
    font-size: clamp(30px, 3vw, 44px);
}

.stat-card-pro small {
    color: var(--color-text);
    font-weight: 700;
}

.stat-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius);
    color: #ffffff;
}

.stat-blue {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.stat-green {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.stat-orange {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.stat-purple {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.ops-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.ops-strip article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.ops-strip svg {
    color: var(--color-primary);
}

.ops-strip span {
    color: var(--color-text);
    font-weight: 800;
}

.ops-strip strong {
    font-size: 22px;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.chart-card-wide {
    grid-column: 1 / -1;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-heading h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

.panel-heading a {
    color: var(--color-primary);
    font-weight: 900;
}

.panel-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e3a8a;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
}

.dashboard-chart {
    width: 100%;
    min-height: 260px;
}

.dashboard-lower {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 18px;
    margin-top: 18px;
}

.alert-list {
    display: grid;
    gap: 12px;
}

.alert-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--color-soft);
}

.alert-item p {
    margin: 2px 0 0;
    color: var(--color-text);
    font-size: 14px;
}

.alert-item b {
    display: inline-grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
}

.alert-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--radius);
}

.alert-warning .alert-icon {
    color: #92400e;
    background: #ffedd5;
}

.alert-danger .alert-icon {
    color: #991b1b;
    background: #fee2e2;
}

.alert-info .alert-icon {
    color: #1e40af;
    background: #dbeafe;
}

.alert-success .alert-icon {
    color: #166534;
    background: #dcfce7;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 13px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    text-align: left;
    white-space: nowrap;
}

.admin-table th {
    color: var(--color-text);
    font-size: 12px;
    text-transform: uppercase;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-success {
    color: #166534;
    background: #dcfce7;
}

.status-warning {
    color: #92400e;
    background: #ffedd5;
}

.status-info {
    color: #1e40af;
    background: #dbeafe;
}

.status-danger {
    color: #991b1b;
    background: #fee2e2;
}

.status-muted {
    color: #334155;
    background: #e2e8f0;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.quick-actions a {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius);
    color: var(--color-ink);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.quick-actions a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.quick-actions svg {
    width: 30px;
    height: 30px;
    color: var(--color-primary);
}

.quick-actions span {
    color: var(--color-text);
    font-size: 14px;
}

@media (max-width: 1180px) {
    .admin-hero,
    .dashboard-lower,
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .quick-actions,
    .ops-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .admin-sidebar {
        position: static;
        height: auto;
    }

    .admin-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-nav,
    .quick-actions,
    .ops-strip {
        grid-template-columns: 1fr;
    }

    .admin-hero {
        padding: 22px;
    }
}

/* Admin visual polish */
.admin-shell svg {
    display: inline-block;
    max-width: 1em;
    max-height: 1em;
    vertical-align: middle;
}

.admin-main {
    position: relative;
}

.admin-main::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 260px;
    height: 280px;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.13), transparent 26%),
        radial-gradient(circle at 86% 8%, rgba(249, 115, 22, 0.13), transparent 24%);
    z-index: -1;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: -20px -8px 22px;
    padding: 18px 8px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(18px);
}

.admin-topbar .button-outline,
.panel-actions .button-outline {
    background: #ffffff;
}

.admin-hero {
    position: relative;
    isolation: isolate;
}

.admin-hero::before,
.admin-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.admin-hero::before {
    width: 280px;
    height: 280px;
    right: -70px;
    top: -92px;
    background: rgba(249, 115, 22, 0.26);
}

.admin-hero::after {
    width: 180px;
    height: 180px;
    left: 44%;
    bottom: -90px;
    background: rgba(14, 165, 233, 0.24);
}

.admin-hero-compact {
    grid-template-columns: 1fr;
    min-height: 210px;
}

.admin-hero-compact h2 {
    font-size: clamp(34px, 5vw, 62px);
}

.dashboard-grid-pro .stat-card-pro {
    border: 0;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(249, 115, 22, 0.20)) border-box;
    border: 1px solid transparent;
}

.dashboard-grid-pro .stat-card-pro:nth-child(2) {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(22, 163, 74, 0.34), rgba(37, 99, 235, 0.18)) border-box;
}

.dashboard-grid-pro .stat-card-pro:nth-child(3) {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(249, 115, 22, 0.34), rgba(245, 158, 11, 0.18)) border-box;
}

.dashboard-grid-pro .stat-card-pro:nth-child(4) {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(37, 99, 235, 0.18)) border-box;
}

.stat-card-pro .stat-icon svg,
.admin-nav svg,
.alert-icon svg,
.ops-strip svg,
.quick-actions svg {
    width: 22px !important;
    height: 22px !important;
}

.stat-card-pro .stat-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.stat-card-pro:hover,
.admin-panel:hover,
.ops-strip article:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10);
}

.stat-card-pro,
.admin-panel,
.ops-strip article {
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.chart-card,
.dashboard-lower .admin-panel,
.admin-panel {
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-compact {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 13px;
}

.list-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 220px auto;
    gap: 12px;
    align-items: end;
    margin: 0 0 18px;
    padding: 14px;
    border-radius: var(--radius);
    background: #f8fafc;
}

.list-toolbar label {
    gap: 6px;
}

.list-toolbar span {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.admin-table thead th {
    border-bottom: 0;
    padding: 0 12px 6px;
}

.admin-table tbody tr {
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.admin-table tbody td {
    border-bottom: 0;
    padding: 14px 12px;
}

.admin-table tbody td:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.admin-table tbody td:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.admin-table tbody tr:hover {
    outline: 1px solid rgba(37, 99, 235, 0.20);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.09);
}

.table-actions {
    display: flex;
    gap: 8px;
}

.table-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
}

.table-actions a:nth-child(2) {
    color: #9a3412;
    background: #ffedd5;
}

.status-pill {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.quick-actions a {
    position: relative;
    overflow: hidden;
}

.quick-actions a::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -46px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
}

.quick-actions a > * {
    position: relative;
}

@media (max-width: 980px) {
    .admin-main::before {
        left: 0;
    }

    .list-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Admin CRUD */
.crud-table .table-entity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}

.table-entity img {
    width: 72px;
    height: 52px;
    border-radius: var(--radius);
    object-fit: cover;
    background: #e2e8f0;
}

.table-entity span {
    display: block;
    color: var(--color-text);
    font-size: 13px;
}

.avatar-badge {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
    font-weight: 900;
}

.table-actions {
    align-items: center;
}

.table-actions form {
    margin: 0;
}

.table-actions button {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    color: #991b1b;
    background: #fee2e2;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.pagination-pro {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.pagination-pro a,
.pagination-pro span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    font-weight: 800;
}

.pagination-pro a {
    color: var(--color-primary);
}

.form-card {
    max-width: 1180px;
}

.crud-form {
    display: grid;
    gap: 20px;
}

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

.form-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crud-form label {
    color: #0f172a;
}

.crud-form input,
.crud-form select,
.crud-form textarea,
.list-toolbar input,
.list-toolbar select {
    border-color: rgba(148, 163, 184, 0.34);
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
}

.field-error {
    color: var(--color-danger);
    font-weight: 800;
}

.form-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--radius);
    color: #991b1b;
    background: #fee2e2;
    font-weight: 800;
}

.toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.toggle-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius);
    background: #f8fafc;
}

.toggle-field input {
    width: auto;
    box-shadow: none;
}

.current-media {
    display: grid;
    gap: 8px;
    width: min(360px, 100%);
    padding: 14px;
    border-radius: var(--radius);
    background: #f8fafc;
}

.current-media span {
    color: var(--color-text);
    font-weight: 900;
}

.current-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    object-fit: cover;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

@media (max-width: 1180px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .form-grid,
    .form-grid-two,
    .toggle-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }
}

/* Dashboard v2 */
.admin-shell {
    grid-template-columns: 292px minmax(0, 1fr);
    color: #111827;
    background:
        radial-gradient(circle at 86% 6%, rgba(37, 99, 235, 0.12), transparent 28%),
        radial-gradient(circle at 32% 0%, rgba(249, 115, 22, 0.10), transparent 26%),
        #f3f6fb;
}

.admin-sidebar {
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.16), transparent 22%),
        linear-gradient(180deg, #08111f 0%, #0f172a 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-brand-block {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.brand-admin {
    padding: 0;
    background: transparent;
}

.brand-admin img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
}

.brand-admin span {
    color: #ffffff;
    font-size: 18px;
}

.admin-role-pill {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.18);
    font-size: 12px;
    font-weight: 900;
}

.admin-nav {
    margin-top: 18px;
}

.admin-nav a {
    position: relative;
    min-height: 48px;
    padding: 0 12px;
    color: #94a3b8;
    border: 1px solid transparent;
}

.admin-nav a svg {
    width: 20px !important;
    height: 20px !important;
}

.admin-nav a.is-active,
.admin-nav a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: none;
}

.admin-nav a.is-active::before {
    content: "";
    width: 4px;
    height: 24px;
    position: absolute;
    left: -1px;
    border-radius: 999px;
    background: var(--color-accent);
}

.admin-sidebar-card {
    margin-top: 22px;
    color: #ffffff;
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.28), transparent 40%),
        rgba(255, 255, 255, 0.07);
}

.admin-sidebar-card a {
    color: #ffffff;
    font-weight: 900;
}

.admin-main {
    padding: 0 32px 36px;
}

.admin-main::before {
    display: none;
}

.admin-topbar {
    margin: 0 -32px 22px;
    padding: 18px 32px;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
}

.admin-topbar h1 {
    font-size: clamp(28px, 3vw, 38px);
}

.admin-topbar-tools {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.topbar-chip {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #1e40af;
    background: #dbeafe;
    font-weight: 900;
}

.topbar-chip:nth-child(2) {
    color: #9a3412;
    background: #ffedd5;
}

.dash-shell-v2 {
    display: grid;
    gap: 18px;
}

.dash-hero-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: stretch;
}

.dash-hero-main,
.dash-hero-score,
.panel-v2,
.kpi-card-v2,
.ops-strip-v2 article,
.quick-actions-v2 a {
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.dash-hero-main {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    padding: clamp(24px, 4vw, 42px);
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.78) 48%, rgba(37, 99, 235, 0.32) 100%),
        url("../images/hero-car-2.png") center right / cover no-repeat;
}

.dash-hero-main::after {
    content: "";
    position: absolute;
    inset: auto -60px -120px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.34);
}

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

.dash-hero-main h2 {
    max-width: 760px;
    margin: 8px 0 0;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1;
}

.dash-hero-main p {
    max-width: 670px;
    color: #dbeafe;
    font-size: 17px;
}

.dash-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.dash-hero-score {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 26px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 40%),
        #ffffff;
}

.dash-hero-score span {
    color: var(--color-text);
    font-weight: 900;
}

.dash-hero-score strong {
    color: var(--color-ink);
    font-size: 64px;
    line-height: 1;
}

.dash-hero-score small {
    color: var(--color-text);
    font-weight: 750;
}

.occupancy-bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.occupancy-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.kpi-row-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card-v2 {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 18px;
    overflow: hidden;
}

.kpi-card-v2::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent, var(--color-primary));
}

.kpi-card-v2 .kpi-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: var(--accent, var(--color-primary));
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, white);
}

.kpi-card-v2 svg {
    width: 22px !important;
    height: 22px !important;
}

.kpi-card-v2 small {
    color: var(--color-text);
    font-weight: 900;
}

.kpi-card-v2 strong {
    color: var(--color-ink);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
}

.kpi-card-v2 em {
    color: var(--color-text);
    font-style: normal;
    font-weight: 750;
}

.accent-blue {
    --accent: #2563eb;
}

.accent-green {
    --accent: #16a34a;
}

.accent-orange {
    --accent: #f97316;
}

.accent-purple {
    --accent: #7c3aed;
}

.ops-strip-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ops-strip-v2 article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    box-shadow: none;
}

.ops-strip-v2 span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 900;
}

.ops-strip-v2 svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--color-primary);
}

.ops-strip-v2 strong {
    font-size: 20px;
}

.dashboard-board-v2 {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
}

.chart-main-v2 {
    grid-row: span 2;
}

.panel-v2 {
    padding: 20px;
}

.panel-heading-v2,
.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.panel-heading-v2 span {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.panel-heading-v2 h2 {
    margin: 2px 0 0;
    font-size: 21px;
}

.panel-heading-v2 b {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 12px;
}

.dashboard-lower-v2 {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 18px;
}

.quick-actions-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.quick-actions-v2 a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--color-ink);
}

.quick-actions-v2 svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--color-primary);
}

.quick-actions-v2 span {
    display: grid;
    gap: 2px;
}

.quick-actions-v2 em {
    color: var(--color-text);
    font-size: 13px;
    font-style: normal;
}

@media (max-width: 1180px) {
    .dash-hero-v2,
    .dashboard-board-v2,
    .dashboard-lower-v2 {
        grid-template-columns: 1fr;
    }

    .chart-main-v2 {
        grid-row: auto;
    }

    .kpi-row-v2,
    .ops-strip-v2,
    .quick-actions-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-main {
        padding: 0 18px 28px;
    }

    .admin-topbar {
        margin-inline: -18px;
        padding-inline: 18px;
    }

    .admin-topbar-tools {
        display: none;
    }
}

@media (max-width: 720px) {
    .kpi-row-v2,
    .ops-strip-v2,
    .quick-actions-v2 {
        grid-template-columns: 1fr;
    }

    .dash-hero-main h2 {
        font-size: 34px;
    }
}

/* Dashboard pro refresh */
.dash-pro-refresh {
    gap: 22px;
}

.dash-pro-refresh .kpi-row-v2 {
    gap: 18px;
}

.dash-pro-refresh .kpi-card-v2 {
    min-height: 236px;
    padding: 22px;
    color: #ffffff;
    border: 0;
    isolation: isolate;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    box-shadow: 0 22px 46px rgba(var(--accent-rgb), 0.26);
}

.dash-pro-refresh .kpi-card-v2::before {
    inset: auto -72px -88px auto;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.dash-pro-refresh .kpi-card-v2::after {
    content: "";
    position: absolute;
    inset: 16px 16px auto auto;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    z-index: -1;
}

.dash-pro-refresh .accent-blue {
    --accent-rgb: 37, 99, 235;
    --grad-a: #2563eb;
    --grad-b: #06b6d4;
}

.dash-pro-refresh .accent-green {
    --accent-rgb: 22, 163, 74;
    --grad-a: #059669;
    --grad-b: #22c55e;
}

.dash-pro-refresh .accent-orange {
    --accent-rgb: 249, 115, 22;
    --grad-a: #f97316;
    --grad-b: #f59e0b;
}

.dash-pro-refresh .accent-purple {
    --accent-rgb: 124, 58, 237;
    --grad-a: #4f46e5;
    --grad-b: #9333ea;
}

.dash-pro-refresh .kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dash-pro-refresh .kpi-top b {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    text-transform: uppercase;
}

.dash-pro-refresh .kpi-card-v2 .kpi-icon {
    width: 58px;
    height: 58px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.dash-pro-refresh .kpi-card-v2 svg {
    width: 27px !important;
    height: 27px !important;
}

.dash-pro-refresh .kpi-card-v2 small,
.dash-pro-refresh .kpi-card-v2 em {
    color: rgba(255, 255, 255, 0.82);
}

.dash-pro-refresh .kpi-card-v2 small {
    margin-top: 14px;
    font-size: 14px;
    text-transform: uppercase;
}

.dash-pro-refresh .kpi-card-v2 strong {
    color: #ffffff;
    font-size: clamp(40px, 4vw, 58px);
    letter-spacing: 0;
}

.dash-pro-refresh .kpi-card-v2 em {
    font-size: 15px;
}

.kpi-progress {
    height: 8px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.kpi-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ffffff;
}

.dash-pro-refresh .ops-strip-v2 {
    gap: 18px;
}

.dash-pro-refresh .ops-strip-v2 article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    min-height: 96px;
    padding: 18px;
    color: #ffffff;
    border: 0;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.dash-pro-refresh .ops-strip-v2 article i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
}

.dash-pro-refresh .ops-strip-v2 span {
    color: rgba(255, 255, 255, 0.82);
}

.dash-pro-refresh .ops-strip-v2 strong {
    color: #ffffff;
    font-size: 26px;
}

.dash-pro-refresh .ops-strip-v2 svg {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff;
}

.dash-pro-refresh .ops-success {
    background: linear-gradient(135deg, #047857, #22c55e) !important;
}

.dash-pro-refresh .ops-blue {
    background: linear-gradient(135deg, #1d4ed8, #38bdf8) !important;
}

.dash-pro-refresh .ops-danger {
    background: linear-gradient(135deg, #b91c1c, #f97316) !important;
}

.dash-pro-refresh .ops-money {
    background: linear-gradient(135deg, #312e81, #7c3aed) !important;
}

.dash-pro-refresh .panel-v2 {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(37, 99, 235, 0.38), rgba(249, 115, 22, 0.24)) border-box;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.09);
}

.dash-pro-refresh .alerts-panel-v2 {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 36%),
        #ffffff;
}

.dash-pro-refresh .panel-heading-v2 {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.dash-pro-refresh .panel-link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--color-primary);
    font-weight: 900;
}

.dash-pro-refresh .alert-list {
    display: grid;
    gap: 14px;
}

.dash-pro-refresh .alert-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: none;
}

.dash-pro-refresh .alert-item strong {
    color: #111827;
    font-size: 17px;
}

.dash-pro-refresh .alert-item p {
    margin: 5px 0 0;
    color: #475569;
}

.dash-pro-refresh .alert-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

.dash-pro-refresh .alert-info .alert-icon {
    color: #1d4ed8;
    background: #dbeafe;
}

.dash-pro-refresh .alert-warning .alert-icon {
    color: #9a3412;
    background: #ffedd5;
}

.dash-pro-refresh .alert-count {
    display: grid;
    min-width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.dash-pro-refresh .reservations-panel-v2 {
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.10), transparent 34%),
        #ffffff;
}

.dash-pro-refresh .reservations-table-v2 {
    border-spacing: 0 12px;
}

.dash-pro-refresh .reservations-table-v2 thead th {
    color: #64748b;
    font-size: 12px;
    letter-spacing: 0;
}

.dash-pro-refresh .reservations-table-v2 tbody tr {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent 38%),
        #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.dash-pro-refresh .reservations-table-v2 tbody td {
    padding: 16px 14px;
}

.ref-code {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
}

.client-cell,
.car-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.client-cell b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
    font-size: 13px;
}

.car-cell svg {
    width: 20px !important;
    height: 20px !important;
    color: #2563eb;
}

.dash-pro-refresh .quick-actions-v2 {
    gap: 18px;
}

.dash-pro-refresh .quick-actions-v2 a {
    position: relative;
    min-height: 132px;
    padding: 18px;
    color: #ffffff;
    border: 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--quick-a), var(--quick-b));
    box-shadow: 0 20px 44px rgba(var(--quick-rgb), 0.22);
}

.dash-pro-refresh .quick-actions-v2 a::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -52px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.dash-pro-refresh .quick-actions-v2 a i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    z-index: 1;
}

.dash-pro-refresh .quick-actions-v2 a > span,
.dash-pro-refresh .quick-actions-v2 a > b {
    position: relative;
    z-index: 1;
}

.dash-pro-refresh .quick-actions-v2 strong {
    color: #ffffff;
    font-size: 17px;
}

.dash-pro-refresh .quick-actions-v2 em {
    color: rgba(255, 255, 255, 0.76);
}

.dash-pro-refresh .quick-actions-v2 a > b {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    margin-left: auto;
    padding: 0 10px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
}

.dash-pro-refresh .quick-actions-v2 svg {
    color: #ffffff;
    width: 24px !important;
    height: 24px !important;
}

.quick-blue {
    --quick-rgb: 37, 99, 235;
    --quick-a: #1d4ed8;
    --quick-b: #06b6d4;
}

.quick-green {
    --quick-rgb: 22, 163, 74;
    --quick-a: #047857;
    --quick-b: #22c55e;
}

.quick-orange {
    --quick-rgb: 249, 115, 22;
    --quick-a: #ea580c;
    --quick-b: #f59e0b;
}

.quick-purple {
    --quick-rgb: 124, 58, 237;
    --quick-a: #4338ca;
    --quick-b: #9333ea;
}

@media (max-width: 1180px) {
    .dash-pro-refresh .kpi-card-v2 {
        min-height: 210px;
    }
}

@media (max-width: 720px) {
    .dash-pro-refresh .kpi-card-v2 strong {
        font-size: 38px;
    }

    .dash-pro-refresh .ops-strip-v2 article,
    .dash-pro-refresh .alert-item,
    .dash-pro-refresh .quick-actions-v2 a {
        min-height: auto;
    }
}

/* Dashboard typography fix */
.dash-pro-refresh .kpi-row-v2 {
    gap: 14px;
}

.dash-pro-refresh .kpi-card-v2 {
    min-height: 184px;
    gap: 7px;
    padding: 18px;
}

.dash-pro-refresh .kpi-card-v2::before {
    right: -82px;
    bottom: -98px;
    width: 160px;
    height: 160px;
}

.dash-pro-refresh .kpi-card-v2::after {
    inset: 14px 14px auto auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.dash-pro-refresh .kpi-card-v2 .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.dash-pro-refresh .kpi-card-v2 svg {
    width: 18px !important;
    height: 18px !important;
}

.dash-pro-refresh .kpi-top b {
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px;
    line-height: 1;
}

.dash-pro-refresh .kpi-card-v2 small {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.15;
}

.dash-pro-refresh .kpi-card-v2 strong {
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1;
}

.dash-pro-refresh .kpi-card-v2 em {
    font-size: 13px;
    line-height: 1.25;
}

.dash-pro-refresh .kpi-money-value {
    max-width: 100%;
    font-size: clamp(26px, 2.05vw, 34px) !important;
    line-height: 1.05 !important;
    white-space: nowrap;
}

.dash-pro-refresh .kpi-progress {
    height: 6px;
    margin-top: 4px;
}

.dash-pro-refresh .ops-strip-v2 {
    gap: 14px;
}

.dash-pro-refresh .ops-strip-v2 article {
    min-height: 76px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
}

.dash-pro-refresh .ops-strip-v2 article i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.dash-pro-refresh .ops-strip-v2 span {
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
}

.dash-pro-refresh .ops-strip-v2 strong {
    font-size: 22px;
    line-height: 1;
}

.dash-pro-refresh .ops-money {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    align-content: center;
}

.dash-pro-refresh .ops-money i {
    grid-area: icon;
}

.dash-pro-refresh .ops-money span {
    grid-area: label;
    white-space: nowrap;
}

.dash-pro-refresh .ops-money-value {
    grid-area: value;
    justify-self: start;
    max-width: 100%;
    font-size: clamp(18px, 1.8vw, 24px) !important;
    line-height: 1.1 !important;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .dash-pro-refresh .kpi-card-v2 {
        min-height: 172px;
        padding: 16px;
    }

    .dash-pro-refresh .kpi-money-value {
        font-size: clamp(23px, 2vw, 30px) !important;
    }

    .dash-pro-refresh .ops-strip-v2 article:not(.ops-money) {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dash-pro-refresh .ops-strip-v2 article:not(.ops-money) strong {
        justify-self: end;
    }
}

/* Dashboard chart sizing fix */
.dash-pro-refresh .dashboard-board-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.dash-pro-refresh .chart-main-v2 {
    grid-row: auto;
}

.dash-pro-refresh .dashboard-chart {
    display: block;
    min-height: 0;
    max-height: 190px;
}

.dash-pro-refresh .panel-v2 {
    padding: 16px;
}

.dash-pro-refresh .panel-heading-v2 {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

@media (max-width: 1180px) {
    .dash-pro-refresh .dashboard-board-v2 {
        grid-template-columns: 1fr;
    }
}

/* Dashboard hero occupancy redesign */
.dash-pro-refresh .dash-hero-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 20px;
}

.dash-pro-refresh .dash-hero-main {
    min-height: 318px;
    padding: clamp(30px, 4vw, 48px);
    background:
        linear-gradient(90deg, rgba(10, 18, 32, 0.96) 0%, rgba(15, 23, 42, 0.80) 48%, rgba(37, 99, 235, 0.34) 100%),
        url("../images/hero-car-2.png") center right / cover no-repeat;
}

.dash-pro-refresh .dash-hero-main::after {
    right: -42px;
    bottom: -104px;
    width: 238px;
    height: 238px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.34), rgba(14, 165, 233, 0.16));
}

.dash-pro-refresh .dash-hero-main h2 {
    max-width: 690px;
    font-size: clamp(38px, 4.2vw, 64px);
    letter-spacing: 0;
}

.dash-pro-refresh .dash-hero-main p {
    max-width: 720px;
    margin-top: 22px;
    color: rgba(239, 246, 255, 0.92);
    line-height: 1.55;
}

.dash-pro-refresh .dash-hero-actions .button {
    min-height: 48px;
    padding-inline: 22px;
}

.dash-pro-refresh .occupancy-card-pro {
    position: relative;
    display: flex;
    min-height: 318px;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background:
        radial-gradient(circle at 90% 8%, rgba(37, 99, 235, 0.15), transparent 33%),
        radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.09), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.dash-pro-refresh .occupancy-card-pro::before {
    content: "";
    position: absolute;
    inset: auto -60px -74px auto;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
}

.dash-pro-refresh .occupancy-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dash-pro-refresh .occupancy-head span {
    color: #475569;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dash-pro-refresh .occupancy-head b {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
    white-space: nowrap;
}

.dash-pro-refresh .occupancy-gauge {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(196px, 76%);
    aspect-ratio: 1;
    margin: 0 auto;
    place-items: center;
}

.dash-pro-refresh .occupancy-gauge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.dash-pro-refresh .occupancy-track,
.dash-pro-refresh .occupancy-value {
    fill: none;
    stroke-width: 12;
}

.dash-pro-refresh .occupancy-track {
    stroke: #e2e8f0;
}

.dash-pro-refresh .occupancy-value {
    stroke: url("#occupancyGradient");
    stroke-linecap: round;
    filter: drop-shadow(0 8px 12px rgba(37, 99, 235, 0.20));
}

.dash-pro-refresh .occupancy-gauge div {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 4px;
}

.dash-pro-refresh .occupancy-card-pro .occupancy-gauge strong {
    color: #0f172a;
    font-size: clamp(46px, 4vw, 58px);
    line-height: 0.95;
}

.dash-pro-refresh .occupancy-card-pro .occupancy-gauge small {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.dash-pro-refresh .occupancy-card-pro .occupancy-bar {
    position: relative;
    z-index: 1;
    height: 10px;
    margin: 0;
    background: #e6edf6;
}

.dash-pro-refresh .occupancy-card-pro .occupancy-bar i {
    background: linear-gradient(90deg, #2563eb, #06b6d4 58%, #f97316);
}

.dash-pro-refresh .occupancy-card-pro p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.dash-pro-refresh .occupancy-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dash-pro-refresh .occupancy-metrics span {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 10px 8px;
    border-radius: 8px;
    color: #64748b;
    background: rgba(241, 245, 249, 0.92);
    font-size: 11px;
    font-weight: 850;
    text-align: center;
}

.dash-pro-refresh .occupancy-metrics b {
    color: #0f172a;
    font-size: 19px;
    line-height: 1;
}

@media (max-width: 1040px) {
    .dash-pro-refresh .dash-hero-v2 {
        grid-template-columns: 1fr;
    }

    .dash-pro-refresh .occupancy-card-pro {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .dash-pro-refresh .dash-hero-main {
        min-height: 280px;
        padding: 24px;
    }

    .dash-pro-refresh .dash-hero-main h2 {
        font-size: 36px;
    }

    .dash-pro-refresh .occupancy-gauge {
        width: min(178px, 84%);
    }

    .dash-pro-refresh .occupancy-metrics {
        grid-template-columns: 1fr;
    }
}

/* Admin sidebar refresh */
.admin-shell {
    grid-template-columns: 280px minmax(0, 1fr);
}

.admin-sidebar {
    padding: 16px 12px;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.28), transparent 30%),
        radial-gradient(circle at 120% 72%, rgba(249, 115, 22, 0.18), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #0d1728 52%, #08111f 100%);
}

.admin-brand-block {
    position: relative;
    gap: 14px;
    margin: 0 0 18px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(15, 23, 42, 0.72);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.admin-brand-block::after {
    content: "";
    position: absolute;
    right: -42px;
    top: -48px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.18);
    pointer-events: none;
}

.brand-admin {
    position: relative;
    z-index: 1;
    gap: 12px;
}

.brand-admin img {
    width: 48px;
    height: 48px;
    padding: 4px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.brand-admin span {
    gap: 2px;
    font-size: 18px;
    line-height: 1.1;
}

.brand-admin small {
    color: #93c5fd;
    font-size: 12px;
}

.admin-brand-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-role-pill,
.admin-session-dot {
    min-height: 26px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.admin-role-pill {
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.26);
}

.admin-session-dot {
    display: inline-flex;
    gap: 6px;
    color: #bbf7d0;
    background: rgba(22, 163, 74, 0.16);
}

.admin-session-dot::before,
.agency-status i {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.admin-nav {
    gap: 7px;
    margin-top: 12px;
}

.admin-nav::before {
    content: "Navigation principale";
    margin: 2px 10px 7px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-nav a {
    min-height: 58px;
    gap: 12px;
    padding: 9px 10px;
    color: #94a3b8;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
}

.admin-nav a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0;
    transform: rotate(45deg) translateX(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.admin-nav a:hover::after,
.admin-nav a.is-active::after {
    opacity: 0.75;
    transform: rotate(45deg) translateX(0);
}

.admin-nav a.is-active,
.admin-nav a:hover {
    color: #ffffff;
    border-color: rgba(148, 163, 184, 0.20);
    background:
        linear-gradient(90deg, rgba(249, 115, 22, 0.18), transparent 54%),
        rgba(255, 255, 255, 0.08);
    box-shadow: inset 3px 0 0 #f97316;
}

.admin-nav a.is-active::before {
    display: none;
}

.admin-nav-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: none;
    border-radius: 8px;
    color: #bfdbfe;
    background: rgba(148, 163, 184, 0.12);
}

.admin-nav a.is-active .admin-nav-icon,
.admin-nav a:hover .admin-nav-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
}

.admin-nav-icon svg {
    width: 17px !important;
    height: 17px !important;
}

.admin-nav-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.admin-nav-copy strong {
    color: inherit;
    font-size: 14px;
    line-height: 1.15;
}

.admin-nav-copy small {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.admin-nav a.is-active .admin-nav-copy small,
.admin-nav a:hover .admin-nav-copy small {
    color: #bfdbfe;
}

.admin-sidebar-card {
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(249, 115, 22, 0.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.26), transparent 36%),
        rgba(255, 255, 255, 0.07);
}

.agency-kicker {
    color: #93c5fd !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sidebar-card strong {
    color: #ffffff;
    font-size: 17px;
}

.agency-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 800;
}

.admin-sidebar-card a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 0 12px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        height: auto;
    }

    .admin-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-nav::before {
        grid-column: 1 / -1;
    }
}

/* Public reservation page */
.reservation-hero-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
    gap: 24px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 42px 20px 22px;
    align-items: stretch;
}

.reservation-hero-copy,
.reservation-hero-media,
.reservation-summary-card,
.reservation-form-pro {
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

.reservation-hero-copy {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: clamp(26px, 5vw, 52px);
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.38), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 54%, #2563eb 100%);
}

.reservation-hero-copy::after {
    content: "";
    position: absolute;
    right: -76px;
    bottom: -110px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

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

.reservation-hero-copy .eyebrow {
    color: #fed7aa;
}

.reservation-hero-copy h1 {
    max-width: 760px;
    margin: 10px 0 0;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
}

.reservation-hero-copy p {
    max-width: 660px;
    margin: 18px 0 0;
    color: #dbeafe;
    font-size: 17px;
}

.reservation-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.reservation-steps span {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 850;
}

.reservation-steps b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #1e3a8a;
    background: #ffffff;
}

.reservation-hero-media {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: #0f172a;
}

.reservation-hero-media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.reservation-hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.88));
}

.reservation-hero-media figcaption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
    display: grid;
    gap: 3px;
    color: #ffffff;
}

.reservation-hero-media strong {
    font-size: 22px;
}

.reservation-hero-media span {
    color: #cbd5e1;
    font-weight: 750;
}

.reservation-layout-pro {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 24px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 22px 20px 70px;
    align-items: start;
}

.reservation-summary-card,
.reservation-form-pro {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.92);
}

.reservation-summary-card {
    position: sticky;
    top: 96px;
    overflow: hidden;
}

.reservation-summary-card > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.reservation-summary-body {
    padding: 18px;
}

.reservation-summary-body h2 {
    margin: 12px 0 6px;
    font-size: 26px;
}

.reservation-summary-body p {
    color: var(--color-text);
}

.reservation-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
}

.reservation-specs div {
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.reservation-specs dt {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 800;
}

.reservation-specs dd {
    margin: 3px 0 0;
    font-weight: 900;
}

.reservation-trust {
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
}

.reservation-trust span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #334155;
    font-size: 13px;
    font-weight: 850;
}

.reservation-trust span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.reservation-form-pro {
    display: grid;
    gap: 22px;
    padding: clamp(20px, 3vw, 30px);
}

.reservation-form-head h2,
.reservation-options-block h3 {
    margin: 4px 0 0;
    font-size: 28px;
}

.reservation-form-head p {
    max-width: 720px;
    color: var(--color-text);
}

.reservation-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.reservation-date-grid input {
    min-height: 52px;
}

.reservation-options-block {
    display: grid;
    gap: 14px;
}

.reservation-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reservation-option-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 98px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.reservation-option-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.36);
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.reservation-option-card input {
    width: 18px;
    height: 18px;
    box-shadow: none;
}

.reservation-option-card span {
    display: grid;
    gap: 3px;
}

.reservation-option-card strong {
    font-size: 15px;
}

.reservation-option-card em {
    color: var(--color-text);
    font-size: 13px;
    font-style: normal;
}

.reservation-option-card b {
    color: var(--color-primary);
    text-align: right;
}

.reservation-option-card small {
    display: block;
    color: var(--color-text);
    font-size: 11px;
}

.reservation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.reservation-price-result {
    display: grid;
    gap: 14px;
    min-height: 72px;
    padding: 16px;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed rgba(148, 163, 184, 0.46);
}

.reservation-price-result.is-loading {
    color: #1e40af;
    background: #dbeafe;
    border-style: solid;
    font-weight: 850;
}

.reservation-price-result.is-error {
    color: #991b1b;
    background: #fee2e2;
    border-style: solid;
    border-color: #fecaca;
}

.reservation-price-result.is-error strong,
.reservation-price-result.is-error span {
    display: block;
}

.reservation-price-result.is-ready {
    color: #ffffff;
    border: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.32), transparent 38%),
        linear-gradient(135deg, #0f172a, #1e3a8a);
}

.reservation-price-result.is-ready > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.reservation-price-result.is-ready span {
    color: #bfdbfe;
    font-weight: 850;
}

.reservation-price-result.is-ready strong {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
}

.reservation-price-result ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reservation-price-result li {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
}

.reservation-price-result li b {
    color: #ffffff;
}

@media (max-width: 980px) {
    .reservation-hero-pro,
    .reservation-layout-pro {
        grid-template-columns: 1fr;
    }

    .reservation-summary-card {
        position: static;
    }
}

@media (max-width: 720px) {
    .reservation-date-grid,
    .reservation-option-grid,
    .reservation-price-result ul {
        grid-template-columns: 1fr;
    }

    .reservation-hero-copy {
        min-height: auto;
    }
}

/* Admin cars/customers pro refresh */
.crud-hero-pro {
    min-height: 230px;
    margin-bottom: 18px;
    border: 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 58%, #f97316 130%);
}

.customers-hero-pro {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a 0%, #0f766e 56%, #2563eb 130%);
}

.crud-hero-pro h2 {
    max-width: 720px;
    font-size: clamp(34px, 4vw, 56px);
}

.crud-hero-pro p {
    max-width: 760px;
}

.crud-stats-grid {
    gap: 14px;
    margin-bottom: 18px;
}

.crud-stat-card {
    min-height: 130px;
    overflow: hidden;
    border: 0 !important;
    color: #ffffff;
    background: linear-gradient(135deg, var(--crud-a), var(--crud-b)) !important;
    box-shadow: 0 18px 38px rgba(var(--crud-rgb), 0.22);
}

.crud-stat-card::after {
    width: 135px;
    height: 135px;
    background: rgba(255, 255, 255, 0.13);
}

.crud-stat-card .stat-icon {
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.crud-stat-card span,
.crud-stat-card small,
.crud-stat-card em {
    color: rgba(255, 255, 255, 0.82);
}

.crud-stat-card strong {
    color: #ffffff;
    font-size: 40px;
}

.crud-stat-card em {
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.stat-blue-card {
    --crud-rgb: 37, 99, 235;
    --crud-a: #2563eb;
    --crud-b: #06b6d4;
}

.stat-green-card {
    --crud-rgb: 22, 163, 74;
    --crud-a: #059669;
    --crud-b: #22c55e;
}

.stat-orange-card {
    --crud-rgb: 249, 115, 22;
    --crud-a: #f97316;
    --crud-b: #f59e0b;
}

.stat-purple-card {
    --crud-rgb: 124, 58, 237;
    --crud-a: #4f46e5;
    --crud-b: #9333ea;
}

.crud-list-panel,
.crud-form-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 30%),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.09);
}

.crud-list-panel .panel-actions .button-primary {
    min-width: 108px;
    color: #ffffff;
}

.customers-list-panel,
.customers-form-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 30%),
        rgba(255, 255, 255, 0.94);
}

.crud-toolbar-pro {
    grid-template-columns: minmax(280px, 1fr) 230px auto;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(249, 115, 22, 0.06)),
        #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.crud-toolbar-pro input,
.crud-toolbar-pro select {
    min-height: 46px;
}

.crud-table-pro {
    border-spacing: 0 10px;
}

.crud-table-pro thead th {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
}

.crud-table-pro tbody tr {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.05), transparent 38%),
        #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.customers-table-pro tbody tr {
    background:
        linear-gradient(90deg, rgba(16, 185, 129, 0.06), transparent 38%),
        #ffffff;
}

.crud-table-pro tbody td {
    padding: 16px 12px;
    vertical-align: middle;
}

.vehicle-entity img {
    width: 86px;
    height: 58px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.10);
}

.customer-entity .avatar-badge {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
}

.entity-meta-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.entity-meta-row em,
.soft-chip,
.doc-chip,
.plate-badge,
.reservation-count-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.entity-meta-row em,
.soft-chip {
    color: #1e40af;
    background: #dbeafe;
}

.plate-badge {
    color: #9a3412;
    background: #ffedd5;
}

.doc-chip {
    color: #334155;
    background: #e2e8f0;
}

.reservation-count-badge {
    min-width: 34px;
    justify-content: center;
    color: #047857;
    background: #dcfce7;
}

.crud-table-pro .table-actions {
    gap: 7px;
    flex-wrap: nowrap;
}

.crud-table-pro .table-actions a,
.crud-table-pro .table-actions button {
    min-height: 32px;
    border-radius: 8px;
}

.crud-table-pro .table-actions a {
    color: #ffffff;
    background: #2563eb;
}

.crud-table-pro .table-actions button {
    color: #991b1b;
    background: #fee2e2;
}

.crud-form-card {
    max-width: none;
}

.crud-form-pro {
    gap: 22px;
}

.crud-form-pro .form-grid {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #f8fafc;
}

.crud-form-pro label {
    gap: 7px;
}

.crud-form-pro label,
.crud-form-pro .toggle-field {
    font-size: 13px;
}

.crud-form-pro input,
.crud-form-pro select,
.crud-form-pro textarea {
    min-height: 46px;
    border-color: rgba(148, 163, 184, 0.32);
}

.crud-form-pro textarea {
    min-height: 130px;
}

.crud-form-pro .toggle-grid {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #ffffff;
}

.crud-form-pro .toggle-field {
    border-color: rgba(37, 99, 235, 0.16);
    background: #f8fafc;
    font-weight: 850;
}

.crud-form-pro .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -24px -24px;
    padding: 16px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(14px);
}

@media (max-width: 1180px) {
    .crud-toolbar-pro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .crud-stat-card {
        min-height: 112px;
    }

    .crud-form-pro .form-actions {
        position: static;
        margin: 0;
        padding: 0;
        border-top: 0;
        background: transparent;
    }
}

/* Admin reservations pro refresh */
.reservations-hero-pro {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #111827 0%, #4338ca 54%, #f97316 135%);
}

.reservations-stats-grid .stat-purple-card strong {
    max-width: 100%;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.05;
    white-space: nowrap;
}

.reservations-list-panel {
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.10), transparent 30%),
        rgba(255, 255, 255, 0.94);
}

.reservations-toolbar-pro {
    grid-template-columns: minmax(260px, 1fr) 190px 190px auto;
}

.reservations-table-admin tbody tr {
    background:
        linear-gradient(90deg, rgba(124, 58, 237, 0.06), transparent 40%),
        #ffffff;
}

.reservation-ref-cell,
.reservation-car-cell,
.reservation-period-cell {
    display: grid;
    gap: 5px;
}

.reservation-ref-cell strong {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #3730a3;
    background: #e0e7ff;
    font-size: 13px;
}

.reservation-ref-cell span,
.reservation-period-cell span,
.remaining-text {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.compact-entity .avatar-badge {
    width: 44px;
    height: 44px;
}

.reservation-car-cell strong {
    min-width: 160px;
}

.reservation-period-cell b {
    display: block;
    color: #111827;
    font-size: 13px;
}

.remaining-text {
    display: block;
    margin-top: 4px;
}

.reservation-status-form {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 210px;
}

.reservation-status-form select {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
}

.reservation-status-form button {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: #2563eb;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.reservations-table-admin .status-pill {
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .reservations-toolbar-pro {
        grid-template-columns: 1fr 1fr;
    }

    .reservations-toolbar-pro .button {
        min-height: 46px;
    }
}

@media (max-width: 720px) {
    .reservations-toolbar-pro {
        grid-template-columns: 1fr;
    }
}

/* Admin payments pro refresh */
.payments-hero-pro {
    grid-template-columns: minmax(0, 1fr) 300px;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.22), transparent 22%),
        linear-gradient(135deg, #052e2b 0%, #047857 46%, #2563eb 120%);
}

.payments-hero-panel {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.payments-hero-panel span,
.payments-hero-panel em {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.payments-hero-panel strong {
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1;
    white-space: nowrap;
}

.payments-stats-grid .crud-stat-card {
    min-height: 138px;
}

.payments-stats-grid .crud-stat-card strong {
    max-width: 100%;
    font-size: clamp(20px, 1.65vw, 26px);
    line-height: 1.08;
    white-space: nowrap;
}

.payments-list-panel {
    background:
        radial-gradient(circle at top right, rgba(5, 150, 105, 0.10), transparent 30%),
        rgba(255, 255, 255, 0.94);
}

.payments-toolbar-pro {
    grid-template-columns: minmax(260px, 1fr) 170px 170px 170px auto;
}

.payments-table-admin tbody tr {
    background:
        linear-gradient(90deg, rgba(5, 150, 105, 0.07), transparent 40%),
        #ffffff;
}

.payment-ref-cell,
.payment-car-cell,
.payment-method-cell,
.payment-amount-cell,
.payment-balance-cell {
    display: grid;
    gap: 5px;
}

.payment-ref-cell strong,
.payment-reservation-link {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.payment-ref-cell strong {
    color: #065f46;
    background: #d1fae5;
}

.payment-reservation-link {
    color: #1d4ed8;
    background: #dbeafe;
}

.payment-ref-cell span,
.payment-method-cell em,
.payment-amount-cell span,
.payment-balance-cell span {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.payment-method-cell .method-chip {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #0f172a;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 900;
}

.payment-method-cell .method-agency {
    color: #065f46;
    background: #d1fae5;
}

.payment-method-cell .method-bank_transfer {
    color: #1e40af;
    background: #dbeafe;
}

.payment-method-cell .method-online {
    color: #6d28d9;
    background: #ede9fe;
}

.payment-method-cell .method-cash {
    color: #9a3412;
    background: #ffedd5;
}

.payment-amount-cell strong {
    color: #065f46;
    font-size: 16px;
}

.payment-balance-cell b {
    color: #111827;
    font-size: 13px;
}

.payment-status-form {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 205px;
}

.payment-status-form select {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
}

.payment-status-form button {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: #059669;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.payments-table-admin .status-pill {
    white-space: nowrap;
}

@media (max-width: 1380px) {
    .payments-toolbar-pro {
        grid-template-columns: 1fr 1fr;
    }

    .payments-toolbar-pro .button {
        min-height: 46px;
    }
}

@media (max-width: 980px) {
    .payments-hero-pro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .payments-toolbar-pro {
        grid-template-columns: 1fr;
    }
}

/* Admin settings pro refresh */
.settings-admin-form {
    display: grid;
    gap: 22px;
}

.settings-hero-pro {
    grid-template-columns: minmax(0, 1fr) 280px;
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.18), transparent 22%),
        linear-gradient(135deg, #111827 0%, #1d4ed8 55%, #f97316 135%);
}

.settings-hero-panel {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.settings-hero-panel span,
.settings-hero-panel em {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.settings-hero-panel strong {
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1;
}

.settings-stats-grid .crud-stat-card {
    min-height: 132px;
}

.settings-stats-grid .crud-stat-card strong {
    font-size: clamp(28px, 2.2vw, 38px);
}

.settings-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
    gap: 18px;
}

.settings-focus-card,
.settings-palette-card,
.settings-list-panel {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 32%),
        rgba(255, 255, 255, 0.95);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.settings-focus-card h2,
.settings-palette-card h2 {
    margin: 6px 0 16px;
}

.settings-mini-list,
.settings-palette-list {
    display: grid;
    gap: 10px;
}

.settings-mini-list div,
.settings-palette-list div {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.settings-mini-list span,
.settings-palette-list span,
.settings-design-item > span {
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.settings-mini-list strong,
.settings-palette-list strong {
    overflow: hidden;
    color: #111827;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-palette-list div {
    grid-template-columns: auto minmax(130px, 0.8fr) minmax(0, 1fr);
}

.settings-palette-list i {
    width: 30px;
    height: 30px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: var(--swatch);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.settings-table-admin tbody tr,
.settings-seo-table tbody tr {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.05), transparent 38%),
        #ffffff;
}

.settings-design-panel {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.10), transparent 32%),
        rgba(255, 255, 255, 0.95);
}

.settings-seo-panel {
    background:
        radial-gradient(circle at top right, rgba(5, 150, 105, 0.10), transparent 32%),
        rgba(255, 255, 255, 0.95);
}

.setting-key-cell {
    display: grid;
    gap: 5px;
    min-width: 190px;
}

.setting-key-cell strong {
    color: #111827;
    font-size: 14px;
}

.setting-key-cell span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.settings-input,
.settings-public-select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 8px;
    color: #111827;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.settings-textarea {
    min-width: 320px;
    min-height: 86px;
    resize: vertical;
}

.settings-textarea.compact {
    min-height: 66px;
}

.settings-slug-input {
    min-width: 130px;
}

.settings-type-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

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

.settings-design-item {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #f8fafc;
}

.settings-design-item em {
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.settings-color-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}

.settings-color-field input {
    width: 58px;
    height: 42px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    background: #ffffff;
}

.settings-color-field span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #334155;
    background: #e2e8f0;
    font-size: 12px;
    font-weight: 900;
}

.settings-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
}

.settings-save-bar strong,
.settings-save-bar span {
    display: block;
}

.settings-save-bar span {
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.settings-flash {
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 900;
}

.settings-flash-success {
    color: #166534;
    background: #dcfce7;
}

.settings-flash-error {
    color: #991b1b;
    background: #fee2e2;
}

@media (max-width: 1180px) {
    .settings-hero-pro,
    .settings-overview-grid {
        grid-template-columns: 1fr;
    }

    .settings-design-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .settings-mini-list div,
    .settings-palette-list div {
        grid-template-columns: 1fr;
    }

    .settings-palette-list div {
        grid-template-columns: auto 1fr;
    }

    .settings-palette-list strong {
        grid-column: 1 / -1;
    }

    .settings-save-bar {
        position: static;
        display: grid;
    }
}

/* Admin operations feature pack */
.ops-suite-hero,
.calendar-hero-pro,
.returns-hero-pro,
.documents-hero-pro,
.deposits-hero-pro,
.contracts-hero-pro,
.marketing-hero-pro,
.reports-hero-pro,
.notifications-hero-pro {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a 0%, #2563eb 56%, #14b8a6 128%);
}

.calendar-hero-pro {
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: end;
}

.calendar-hero-pro::before {
    background: rgba(20, 184, 166, 0.22);
}

.calendar-hero-pro::after {
    background: rgba(37, 99, 235, 0.22);
}

.calendar-nav-button {
    min-height: 42px;
    padding: 0 18px;
    color: #1d4ed8;
    background: #ffffff;
}

.returns-hero-pro,
.deposits-hero-pro {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #111827 0%, #f97316 58%, #2563eb 130%);
}

.documents-hero-pro,
.contracts-hero-pro {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #172554 0%, #4f46e5 55%, #f97316 130%);
}

.marketing-hero-pro,
.reports-hero-pro {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #064e3b 0%, #059669 55%, #2563eb 130%);
}

.notifications-hero-pro {
    grid-template-columns: minmax(0, 1fr) 260px;
}

.ops-suite-stats .crud-stat-card {
    min-height: 126px;
}

.ops-suite-stats .crud-stat-card strong {
    max-width: 100%;
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.08;
    white-space: nowrap;
}

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

.ops-module-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    color: #111827;
    background:
        radial-gradient(circle at right bottom, rgba(37, 99, 235, 0.12), transparent 38%),
        #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.ops-module-card span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
}

.ops-module-card strong {
    font-size: 18px;
}

.ops-module-card em {
    color: #64748b;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
}

.ops-list-panel,
.ops-alert-panel,
.ops-form-panel,
.calendar-panel {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 30%),
        rgba(255, 255, 255, 0.95);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.ops-alert-list,
.ops-notification-list {
    display: grid;
    gap: 12px;
}

.ops-alert-list article,
.ops-notification-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
}

.ops-notification-list article.is-read {
    opacity: 0.72;
}

.ops-alert-list p,
.ops-notification-list p {
    margin: 4px 0;
    color: #475569;
}

.ops-alert-list time,
.ops-notification-list small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.ops-notification-list button,
.ops-action-stack button,
.ops-inline-form button,
.ops-deposit-form button {
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: #2563eb;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.calendar-month-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-self: end;
    align-content: center;
    gap: 10px;
    width: min(100%, 420px);
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.calendar-month-form label {
    display: grid;
    gap: 7px;
    color: #ffffff;
    font-weight: 900;
}

.calendar-month-form input {
    min-height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    font: inherit;
}

.calendar-month-form .button {
    width: auto;
    min-height: 42px;
    padding: 0 18px;
    white-space: nowrap;
}

.calendar-panel {
    overflow: hidden;
}

.calendar-panel .panel-heading {
    align-items: stretch;
}

.calendar-panel-tools {
    display: grid;
    justify-items: end;
    gap: 12px;
}

.calendar-stat-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.calendar-stat-strip span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.calendar-stat-strip strong {
    color: #111827;
    font-size: 14px;
}

.calendar-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    width: min(100%, 520px);
}

.calendar-legend span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 46px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    font-size: 12px;
    font-weight: 900;
}

.calendar-legend i {
    grid-row: 1 / 3;
    width: 14px;
    height: 26px;
    border-radius: 999px;
}

.calendar-legend strong {
    color: #111827;
    line-height: 1;
}

.calendar-legend em {
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    line-height: 1.2;
    text-transform: uppercase;
}

.calendar-legend .legend-free i {
    background: linear-gradient(180deg, #bbf7d0, #22c55e);
}

.calendar-legend .legend-weekend i {
    background: linear-gradient(180deg, #ddd6fe, #8b5cf6);
}

.calendar-legend .legend-booked i {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.calendar-legend .legend-pending i {
    background: linear-gradient(180deg, #fdba74, #f97316);
}

.calendar-legend .legend-maintenance i {
    background: linear-gradient(180deg, #94a3b8, #475569);
}

.calendar-scroll {
    overflow: auto;
    max-width: 100%;
    padding: 4px 0 12px;
    border-radius: 8px;
    scrollbar-color: #94a3b8 #e2e8f0;
    scrollbar-width: thin;
}

.calendar-scroll::-webkit-scrollbar {
    height: 12px;
}

.calendar-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #e2e8f0;
}

.calendar-scroll::-webkit-scrollbar-thumb {
    border: 3px solid #e2e8f0;
    border-radius: 999px;
    background: #64748b;
}

.ops-calendar-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0 9px;
}

.ops-calendar-table th,
.ops-calendar-table td {
    min-width: 54px;
    padding: 0;
    text-align: center;
    white-space: nowrap;
}

.ops-calendar-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 10px 5px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.ops-calendar-table th:first-child,
.ops-calendar-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 248px;
    padding: 0 10px 0 0;
    text-align: left;
    background: linear-gradient(90deg, #ffffff 82%, rgba(255, 255, 255, 0.82));
    box-shadow: 12px 0 22px rgba(15, 23, 42, 0.08);
}

.ops-calendar-table thead th:first-child {
    padding: 12px 16px;
    border-radius: 8px;
}

.ops-calendar-table th span,
.ops-calendar-table th em {
    display: block;
}

.ops-calendar-table th:not(:first-child) span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #111827;
    background: #f8fafc;
    font-size: 15px;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

.ops-calendar-table th em {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.ops-calendar-table th.is-weekend span {
    color: #5b21b6;
    background: #ede9fe;
}

.ops-calendar-table th.is-today span {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
}

.calendar-car-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 12px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.calendar-car-card b {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.calendar-car-card strong,
.calendar-car-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-car-card span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.calendar-car-card .car-state {
    grid-column: 1 / -1;
    width: fit-content;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.calendar-car-card .car-state.available {
    color: #166534;
    background: #dcfce7;
}

.calendar-car-card .car-state.maintenance {
    color: #334155;
    background: #e2e8f0;
}

.calendar-car-card .car-state.reserved {
    color: #1e40af;
    background: #dbeafe;
}

.calendar-cell {
    position: relative;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    color: #111827;
    font-size: 10px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.calendar-cell.free {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.74), transparent 28%),
        linear-gradient(180deg, #ecfdf5, #dffbea);
}

.calendar-cell.free::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 160ms ease;
}

.calendar-cell.free:hover::after {
    opacity: 1;
}

.calendar-cell.booked {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 35%),
        linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.20);
}

.calendar-cell.pending {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 35%),
        linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 10px 18px rgba(249, 115, 22, 0.20);
}

.calendar-cell.maintenance {
    color: #ffffff;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 8px, rgba(255, 255, 255, 0.02) 8px 16px),
        linear-gradient(135deg, #64748b, #475569);
}

.calendar-cell.is-middle {
    border-radius: 3px;
}

.calendar-cell.is-start {
    border-radius: 8px 3px 3px 8px;
}

.calendar-cell.is-end {
    border-radius: 3px 8px 8px 3px;
}

.calendar-cell.is-single {
    border-radius: 8px;
}

.calendar-cell.is-weekend.free {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.76), transparent 28%),
        linear-gradient(180deg, #faf5ff, #ede9fe);
}

.calendar-cell span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-return-list {
    display: grid;
    gap: 16px;
}

.ops-return-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border-radius: 8px;
    background: #f8fafc;
}

.ops-return-summary {
    display: grid;
    align-content: start;
    gap: 8px;
}

.ops-return-summary h3 {
    margin: 6px 0 0;
}

.ops-return-summary p {
    margin: 0;
    color: #475569;
    font-weight: 800;
}

.ops-return-form,
.ops-grid-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ops-return-form label,
.ops-grid-form label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.ops-return-form input,
.ops-return-form select,
.ops-return-form textarea,
.ops-grid-form input,
.ops-grid-form select {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
}

.ops-return-form textarea {
    min-height: 74px;
    resize: vertical;
}

.ops-return-form label:nth-last-child(2),
.ops-return-form label:nth-last-child(3) {
    grid-column: span 2;
}

.ops-return-form button,
.ops-grid-form button {
    align-self: end;
    min-height: 42px;
}

.ops-table-pro tbody tr {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.05), transparent 38%),
        #ffffff;
}

.ops-file-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
}

.ops-inline-form,
.ops-action-stack {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ops-inline-form select,
.ops-deposit-form select,
.ops-deposit-form input {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
}

.ops-deposit-form {
    display: grid;
    grid-template-columns: 140px 120px 170px 170px auto;
    gap: 7px;
    min-width: 720px;
}

.ops-action-stack {
    flex-wrap: wrap;
}

.ops-action-stack form {
    margin: 0;
}

.ops-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.ops-form-panel .ops-grid-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-form-panel .ops-grid-form button {
    grid-column: 1 / -1;
}

.ops-status-bars {
    display: grid;
    gap: 13px;
}

.ops-status-bars div {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
}

.ops-status-bars span,
.ops-status-bars strong {
    position: relative;
    z-index: 2;
    font-weight: 900;
}

.ops-status-bars i {
    position: absolute;
    inset: auto auto 0 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
}

@media (max-width: 1280px) {
    .calendar-hero-pro {
        grid-template-columns: 1fr;
    }

    .calendar-month-form {
        justify-self: stretch;
        width: 100%;
    }

    .ops-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-return-card,
    .ops-two-column,
    .notifications-hero-pro {
        grid-template-columns: 1fr;
    }

    .ops-return-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .calendar-month-form {
        grid-template-columns: 1fr;
    }

    .ops-module-grid,
    .ops-return-form,
    .ops-grid-form,
    .ops-form-panel .ops-grid-form {
        grid-template-columns: 1fr;
    }

    .ops-return-form label:nth-last-child(2),
    .ops-return-form label:nth-last-child(3) {
        grid-column: auto;
    }

    .ops-alert-list article,
    .ops-notification-list article {
        grid-template-columns: 1fr;
    }
}

/* Admin notifications compact refresh */
.admin-live-badge,
.admin-user-mini {
    display: none !important;
}

.admin-title-row {
    gap: 0;
}

.notifications-list-panel {
    padding: 28px;
}

.notification-list-pro {
    gap: 8px;
}

.notification-list-pro .notification-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: auto;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 4px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.notification-list-pro .notification-list-card.is-unread {
    border-color: rgba(37, 99, 235, 0.18);
    border-left-color: #2563eb;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.035), rgba(255, 255, 255, 0.98) 28%),
        #ffffff;
}

.notification-list-pro .notification-list-card.is-read {
    opacity: 1;
    border-left-color: #cbd5e1;
    background: #f8fafc;
}

.notification-list-pro .notification-main-link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    min-height: 76px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}

.notification-list-pro .notification-main-link:hover {
    background: rgba(37, 99, 235, 0.045);
}

.notification-icon-bubble {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #2563eb;
    background: #eff6ff;
}

.notification-icon-bubble svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.notification-list-card.is-read .notification-icon-bubble {
    color: #64748b;
    background: #e2e8f0;
}

.notification-card-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.notification-card-topline {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.notification-card-topline strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-card-topline .status-pill {
    min-height: 24px;
    padding-inline: 9px;
    font-size: 11px;
    white-space: nowrap;
}

.notification-message {
    overflow: hidden;
    color: #475569;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-card-copy small {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.notification-date-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e3a8a;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.notification-main-link b {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 950;
    text-transform: none;
}

.notification-list-pro .notification-list-card form {
    display: flex;
    align-items: center;
    padding: 12px 14px 12px 0;
}

.notification-list-pro .notification-list-card button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: #0f172a;
    font-size: 12px;
    white-space: nowrap;
}

.notification-list-pro .notification-list-card button:hover {
    background: #1d4ed8;
}

@media (max-width: 980px) {
    .notification-list-pro .notification-main-link {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .notification-date-chip {
        display: none;
    }
}

@media (max-width: 720px) {
    .notifications-list-panel {
        padding: 18px;
    }

    .notification-list-pro .notification-list-card,
    .notification-list-pro .notification-main-link {
        grid-template-columns: 1fr;
    }

    .notification-list-pro .notification-list-card form {
        padding: 0 16px 14px;
    }

    .notification-card-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-card-topline strong,
    .notification-message {
        white-space: normal;
    }
}

/* Admin notifications badge and detail pages */
.topbar-action-notifications {
    position: relative;
    color: #5b21b6;
    background: linear-gradient(135deg, #f5f3ff, #ffffff);
}

.topbar-action-notifications .topbar-action-icon {
    position: relative;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.topbar-notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: #f97316;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28);
}

.topbar-notification-badge.is-empty {
    color: #64748b;
    background: #e2e8f0;
    box-shadow: none;
}

.notification-hero-stats {
    display: grid;
    gap: 12px;
}

.notification-hero-stats article,
.notification-detail-status {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.notification-hero-stats span,
.notification-detail-status span {
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.notification-hero-stats strong {
    font-size: 34px;
    line-height: 1;
}

.notification-hero-stats em,
.notification-detail-status em {
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.notifications-list-panel .panel-actions {
    align-items: center;
}

.notification-list-pro {
    gap: 10px;
}

.notification-list-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.notification-list-card.is-unread {
    border-color: rgba(37, 99, 235, 0.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
        #ffffff;
}

.notification-list-card.is-read {
    opacity: 1;
    background: #f8fafc;
}

.notification-main-link {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 16px;
}

.notification-main-link:hover {
    background: rgba(37, 99, 235, 0.04);
}

.notification-state-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.10);
}

.notification-list-card.is-read .notification-state-dot {
    background: #94a3b8;
    box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.12);
}

.notification-card-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.notification-card-copy strong {
    color: #0f172a;
    font-size: 16px;
}

.notification-card-copy span {
    overflow: hidden;
    color: #475569;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-card-copy small {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.notification-main-link b {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.notification-list-card form {
    padding-right: 14px;
}

.notification-detail-hero {
    grid-template-columns: minmax(0, 1fr) 260px;
}

.notification-detail-status strong {
    font-size: 26px;
    line-height: 1.1;
}

.notification-detail-panel {
    display: grid;
    gap: 18px;
}

.notification-detail-grid,
.notification-reservation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.notification-detail-grid article,
.notification-reservation-grid article,
.notification-reservation-detail {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.notification-detail-grid article,
.notification-reservation-grid article {
    display: grid;
    gap: 6px;
    min-height: 106px;
    padding: 16px;
}

.notification-detail-grid span,
.notification-reservation-grid span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.notification-detail-grid strong,
.notification-reservation-grid strong {
    color: #0f172a;
    font-size: 18px;
}

.notification-reservation-grid em {
    color: #64748b;
    font-style: normal;
    font-weight: 800;
}

.notification-reservation-detail {
    padding: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.08), transparent 28%),
        #ffffff;
}

.notification-empty-detail {
    margin: 0;
}

@media (max-width: 1180px) {
    .notification-detail-grid,
    .notification-reservation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .notification-main-link,
    .notification-list-card,
    .notification-detail-hero {
        grid-template-columns: 1fr;
    }

    .notification-list-card form {
        padding: 0 16px 16px;
    }

    .notification-card-copy span {
        white-space: normal;
    }

    .notification-detail-grid,
    .notification-reservation-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin topbar professional refresh */
.admin-topbar.admin-topbar-pro {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin: 0 -32px 24px;
    padding: 18px 32px;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
    background:
        radial-gradient(circle at 82% -20%, rgba(37, 99, 235, 0.13), transparent 28%),
        radial-gradient(circle at 100% 120%, rgba(249, 115, 22, 0.10), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.90));
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(18px);
}

.admin-topbar.admin-topbar-pro::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #2563eb, #14b8a6 58%, #f97316);
}

.admin-topbar.admin-topbar-pro::after {
    content: "";
    position: absolute;
    inset: auto 24% -54px auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    z-index: -1;
}

.admin-title-group {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.admin-top-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-top-eyebrow i,
.admin-live-badge i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.13);
}

.admin-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.admin-topbar.admin-topbar-pro h1 {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 0.98;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-live-badge {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.topbar-action,
.admin-user-mini,
.topbar-logout-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.topbar-action {
    padding: 7px 12px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.topbar-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.10);
}

.topbar-action-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
}

.topbar-action-icon svg {
    width: 18px;
    height: 18px;
    max-width: none;
    max-height: none;
    fill: currentColor;
}

.topbar-action span:last-child,
.admin-user-mini span {
    display: grid;
    gap: 1px;
    line-height: 1.1;
}

.topbar-action strong,
.admin-user-mini strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
}

.topbar-action small,
.admin-user-mini small {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.topbar-action-blue {
    color: #1d4ed8;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.topbar-action-blue .topbar-action-icon {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.topbar-action-orange {
    color: #c2410c;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.topbar-action-orange .topbar-action-icon {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.admin-user-mini {
    padding: 6px 12px 6px 7px;
}

.admin-user-mini b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f172a, #2563eb);
    font-size: 13px;
    font-weight: 950;
}

.topbar-logout-form {
    margin: 0;
}

.topbar-logout-button {
    padding: 0 15px;
    color: #0f172a;
    font-weight: 950;
    cursor: pointer;
}

.topbar-logout-button svg {
    width: 18px;
    height: 18px;
    max-width: none;
    max-height: none;
    fill: currentColor;
}

.topbar-logout-button:hover {
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.22);
    background: #fff1f2;
}

@media (max-width: 1280px) {
    .admin-user-mini {
        display: none;
    }
}

@media (max-width: 980px) {
    .admin-topbar.admin-topbar-pro {
        grid-template-columns: 1fr;
        margin-inline: -18px;
        padding-inline: 18px;
    }

    .admin-topbar-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .admin-title-row {
        display: grid;
    }

    .admin-topbar.admin-topbar-pro h1 {
        white-space: normal;
    }

    .topbar-action,
    .topbar-logout-button {
        width: 100%;
        justify-content: center;
    }

    .admin-topbar-actions,
    .topbar-logout-form {
        width: 100%;
    }
}

/* Client dashboard refresh */
.client-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.12), transparent 28%),
        radial-gradient(circle at 95% 14%, rgba(249, 115, 22, 0.10), transparent 26%),
        #f5f7fb;
}

.client-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.client-shell .dashboard-page {
    max-width: none;
    padding: 28px max(20px, calc((100vw - 1220px) / 2)) 56px;
}

.client-dashboard-pro {
    display: grid;
    gap: 22px;
}

.client-hero-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    gap: 20px;
    align-items: stretch;
}

.client-hero-copy,
.client-next-card,
.client-kpi-card,
.client-panel,
.client-support-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.client-hero-copy {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    padding: clamp(28px, 4vw, 48px);
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.80) 52%, rgba(37, 99, 235, 0.24) 100%),
        url("../images/hero-car-1.png") center right / cover no-repeat;
}

.client-hero-copy::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -92px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.35), rgba(14, 165, 233, 0.12));
}

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

.client-kicker {
    display: inline-flex;
    color: #2563eb;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.client-hero-copy .client-kicker {
    color: #60a5fa;
}

.client-hero-copy h1 {
    max-width: 720px;
    margin: 10px 0 0;
    font-size: clamp(36px, 5vw, 66px);
    line-height: 1;
}

.client-hero-copy p {
    max-width: 660px;
    margin: 20px 0 0;
    color: rgba(239, 246, 255, 0.90);
    font-size: 17px;
}

.client-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.client-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.client-hero-strip span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    color: #e0f2fe;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    font-weight: 850;
}

.client-hero-strip svg,
.client-kpi-card svg,
.client-route-mini svg,
.client-support-card svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.client-next-card {
    overflow: hidden;
    display: grid;
    background: #ffffff;
}

.client-next-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.client-next-body,
.client-empty-next {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.client-card-heading,
.client-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-card-heading b {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
}

.client-next-body h2,
.client-panel-heading h2,
.client-empty-next h2 {
    margin: 0;
    color: #0f172a;
    line-height: 1.05;
}

.client-next-body p,
.client-empty-next p {
    margin: 0;
    color: #64748b;
    font-weight: 750;
}

.client-next-body dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 0;
}

.client-next-body dl div {
    padding: 11px;
    border-radius: 8px;
    background: #f8fafc;
}

.client-next-body dt,
.client-next-body dd {
    margin: 0;
}

.client-next-body dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.client-next-body dd {
    color: #0f172a;
    font-weight: 900;
}

.client-route-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font-weight: 850;
}

.client-empty-next {
    min-height: 100%;
    place-content: center;
    justify-items: start;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.13), transparent 38%),
        #ffffff;
}

.client-empty-next > span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.client-empty-next svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

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

.client-kpi-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 156px;
    padding: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--client-a), var(--client-b));
}

.client-kpi-card::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -74px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.client-kpi-card i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.17);
}

.client-kpi-card span,
.client-kpi-card strong,
.client-kpi-card em,
.client-kpi-card i {
    position: relative;
    z-index: 1;
}

.client-kpi-card span {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.client-kpi-card strong {
    color: #ffffff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
}

.client-kpi-card em {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.kpi-blue {
    --client-a: #2563eb;
    --client-b: #06b6d4;
}

.kpi-green {
    --client-a: #059669;
    --client-b: #22c55e;
}

.kpi-orange {
    --client-a: #f97316;
    --client-b: #f59e0b;
}

.kpi-purple {
    --client-a: #4f46e5;
    --client-b: #9333ea;
}

.client-dashboard-layout-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.client-panel {
    padding: 18px;
    background: rgba(255, 255, 255, 0.94);
}

.client-panel-heading {
    margin-bottom: 16px;
}

.client-panel-heading.compact {
    margin-bottom: 12px;
}

.client-panel-heading h2 {
    margin-top: 4px;
    font-size: 24px;
}

.client-panel-heading a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 13px;
    font-weight: 900;
}

.client-reservation-list,
.client-side-stack,
.client-payment-list,
.client-profile-checks {
    display: grid;
    gap: 12px;
}

.client-reservation-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.05), transparent 42%),
        #ffffff;
}

.client-reservation-date {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f172a, #2563eb);
    line-height: 1;
}

.client-reservation-date b {
    font-size: 22px;
}

.client-reservation-date span {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.client-reservation-main {
    min-width: 0;
}

.client-reservation-main h3,
.client-reservation-main p {
    margin: 0;
}

.client-reservation-main h3 {
    overflow: hidden;
    color: #0f172a;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-reservation-main p {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.client-reservation-status {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.client-reservation-item > strong {
    color: #0f172a;
    font-size: 16px;
    white-space: nowrap;
}

.client-empty-line {
    display: grid;
    gap: 4px;
    padding: 18px;
    border-radius: 8px;
    color: #64748b;
    background: #f8fafc;
}

.client-empty-line strong {
    color: #0f172a;
}

.client-profile-card {
    display: grid;
}

.client-panel-heading b {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    font-size: 13px;
}

.client-profile-ring {
    --profile: 0;
    display: grid;
    width: 176px;
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    margin: 8px 0 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ffffff 0 55%, transparent 56%),
        conic-gradient(#2563eb calc(var(--profile) * 1%), #e2e8f0 0);
}

.client-profile-ring span,
.client-profile-ring strong,
.client-profile-ring em {
    grid-area: 1 / 1;
}

.client-profile-ring span {
    transform: translateY(-36px);
    color: #2563eb;
}

.client-profile-ring svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.client-profile-ring strong {
    color: #0f172a;
    font-size: 36px;
    line-height: 1;
}

.client-profile-ring em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    transform: translateY(35px);
}

.client-profile-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-profile-checks span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 900;
}

.client-profile-checks span.is-done {
    color: #166534;
    background: #dcfce7;
}

.client-payment-progress {
    height: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.client-payment-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22c55e);
}

.client-payment-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.client-payment-list p,
.client-payment-list span {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
}

.client-payment-list strong {
    color: #0f172a;
    white-space: nowrap;
}

.client-support-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.20), transparent 34%),
        linear-gradient(135deg, #0f172a, #2563eb);
}

.client-support-card i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
}

.client-support-card strong {
    font-size: 22px;
}

.client-support-card span {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 750;
}

.client-support-card a {
    width: fit-content;
    margin-top: 4px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #0f172a;
    background: #ffffff;
    font-weight: 950;
}

@media (max-width: 1100px) {
    .client-hero-pro,
    .client-dashboard-layout-pro {
        grid-template-columns: 1fr;
    }

    .client-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .client-shell .dashboard-page {
        padding-inline: 14px;
    }

    .client-hero-copy {
        min-height: 300px;
        padding: 24px;
    }

    .client-hero-copy h1 {
        font-size: 36px;
    }

    .client-kpi-grid,
    .client-next-body dl,
    .client-profile-checks {
        grid-template-columns: 1fr;
    }

    .client-reservation-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .client-reservation-status,
    .client-reservation-item > strong {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Public boxed vitrines and car galleries */
.public-shell {
    min-height: 100vh;
    padding: 14px;
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.16), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(249, 115, 22, 0.13), transparent 26%),
        linear-gradient(180deg, #eaf0f8, #f8fafc);
}

.public-site-box {
    width: min(1500px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
}

.public-header.site-header {
    display: grid;
    gap: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.94);
}

.public-header.is-scrolled {
    padding-block: 0;
}

.public-top-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 28px;
    color: #dbeafe;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    font-size: 12px;
    font-weight: 850;
}

.public-top-strip span,
.public-top-strip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-top-strip i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.public-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 14px 28px;
}

.public-brand span {
    display: grid;
    line-height: 1.08;
}

.public-brand small {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.public-nav {
    gap: 10px;
}

.public-nav > a:not(.button),
.public-nav .link-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 10px;
    border-radius: 8px;
    font-weight: 850;
}

.public-nav > a:not(.button):hover,
.public-nav .link-button:hover {
    color: #1d4ed8;
    background: #eff6ff;
}

.public-main {
    background:
        radial-gradient(circle at 94% 8%, rgba(37, 99, 235, 0.08), transparent 26%),
        #ffffff;
}

.public-site-box .hero {
    min-height: 640px;
}

.public-site-box .section,
.public-site-box .page-hero,
.public-site-box .catalog-layout,
.public-site-box .detail-layout,
.public-site-box .form-section,
.public-site-box .auth-page,
.public-site-box .dashboard-page {
    padding-inline: 28px;
}

.public-site-box .feature-band {
    max-width: calc(var(--container) + 56px);
    margin: 14px auto;
    padding: 38px;
    border-radius: 8px;
}

.public-footer.site-footer {
    padding: 38px 42px;
}

.public-page-hero {
    padding-bottom: 20px;
}

.car-card-media {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.car-card-media > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.car-card-media figcaption {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.78);
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.car-card-thumbs {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 7px;
}

.car-card-thumbs button,
.car-card-thumbs span {
    width: 46px;
    height: 34px;
    overflow: hidden;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
    cursor: pointer;
}

.car-card-thumbs button.is-active,
.car-card-thumbs button:hover {
    border-color: #2563eb;
    transform: translateY(-1px);
}

.car-card-thumbs img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: auto;
    object-fit: cover;
}

.detail-gallery {
    display: grid;
    gap: 12px;
}

.detail-main-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.detail-main-media img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
}

.detail-main-media figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.78);
    font-size: 13px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

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

.detail-thumbs button {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 8px;
    background: #f1f5f9;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.detail-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 160ms ease;
    display: block;
}

.detail-thumbs button:hover,
.detail-thumbs button.is-active {
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.detail-thumbs button:hover img,
.detail-thumbs button.is-active img {
    transform: scale(1.04);
}

.detail-thumbs span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(37, 99, 235, 0.88);
    font-size: 11px;
    font-weight: 900;
}

.gallery-nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.62);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.24);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(12px);
}

.gallery-nav:hover {
    background: rgba(37, 99, 235, 0.86);
}

.gallery-prev {
    left: 16px;
}

.gallery-next {
    right: 16px;
}

.public-detail-card {
    position: sticky;
    top: 116px;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reservation-gallery-mini {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    background: #ffffff;
}

.reservation-gallery-mini button {
    padding: 0;
    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.reservation-gallery-mini button.is-active,
.reservation-gallery-mini button:hover {
    border-color: #2563eb;
}

.reservation-gallery-mini span {
    overflow: hidden;
    border-radius: 8px;
}

.reservation-gallery-mini img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.field-hint {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.car-gallery-admin {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: #f8fafc;
}

.car-gallery-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.car-gallery-admin-head h3 {
    margin: 4px 0 0;
}

.car-gallery-admin-head small {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-weight: 900;
}

.car-gallery-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.car-gallery-admin-item {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: #ffffff;
}

.car-gallery-admin-item.is-main {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.car-gallery-admin-item > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.car-gallery-admin-item > div {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.image-radio,
.image-remove {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
}

.image-radio input,
.image-remove input {
    width: auto;
}

@media (max-width: 980px) {
    .public-shell {
        padding: 0;
    }

    .public-site-box {
        border-radius: 0;
        border-inline: 0;
    }

    .public-nav-bar,
    .public-top-strip {
        padding-inline: 18px;
    }

    .public-top-strip {
        display: none;
    }

    .public-nav {
        inset: 76px 18px auto 18px;
    }

    .public-site-box .hero {
        min-height: auto;
    }

    .public-detail-card {
        position: static;
    }

    .car-gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .public-site-box .section,
    .public-site-box .page-hero,
    .public-site-box .catalog-layout,
    .public-site-box .detail-layout,
    .public-site-box .form-section,
    .public-site-box .auth-page,
    .public-site-box .dashboard-page {
        padding-inline: 16px;
    }

    .public-site-box .feature-band,
    .public-footer.site-footer {
        padding: 24px 18px;
    }

    .detail-main-media img {
        min-height: 340px;
    }

    .detail-thumbs,
    .reservation-gallery-mini,
    .car-gallery-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Public vitrine polish */
.public-shell {
    padding: 8px;
}

.public-site-box {
    width: min(1780px, calc(100vw - 16px));
}

.public-header.site-header {
    width: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-items: stretch;
    justify-content: stretch;
    border-bottom: 0;
}

.public-top-strip,
.public-nav-bar {
    width: 100%;
}

.public-top-strip {
    min-height: 42px;
    padding: 10px clamp(22px, 3vw, 42px);
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(30, 58, 138, 0.98) 56%, rgba(37, 99, 235, 0.96));
}

.public-nav-bar {
    min-height: 82px;
    padding: 16px clamp(22px, 3vw, 42px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at 94% 0%, rgba(249, 115, 22, 0.10), transparent 24%),
        #ffffff;
}

.public-brand img {
    width: 54px;
    height: 54px;
    padding: 5px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.public-brand span {
    font-size: 16px;
    color: #0f172a;
}

.public-nav {
    gap: 6px;
}

.public-nav .nav-link,
.public-nav .link-button {
    position: relative;
    color: #475569;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid transparent;
}

.public-nav .nav-link.is-active,
.public-nav .nav-link:hover,
.public-nav .link-button:hover {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.14);
    background: #eff6ff;
}

.public-nav .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #f97316);
}

.public-nav-cta {
    min-height: 50px;
    padding-inline: 24px;
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.24);
}

.public-main {
    min-height: 640px;
}

.public-site-box .page-hero {
    max-width: calc(var(--container) + 160px);
}

.auth-page.auth-page-pro,
.contact-layout-pro {
    max-width: calc(var(--container) + 120px);
    margin: 0 auto;
    padding: 42px 28px;
}

.auth-page.auth-page-pro {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.78fr);
    gap: 22px;
    align-items: stretch;
    min-height: auto;
}

.auth-intro-panel,
.contact-hero-pro,
.catalog-hero-pro {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.auth-intro-panel {
    display: grid;
    align-content: end;
    min-height: 470px;
    padding: 34px;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.58)),
        url("../images/hero-car-2.png") center / cover;
    box-shadow: var(--shadow);
}

.auth-intro-panel::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.28);
}

.auth-intro-panel > * {
    position: relative;
    z-index: 1;
}

.auth-intro-panel h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.02;
}

.auth-intro-panel p {
    max-width: 640px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
}

.auth-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}

.auth-benefits article {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
}

.auth-benefits strong,
.auth-benefits span {
    display: block;
}

.auth-benefits span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.auth-card.auth-card-pro {
    width: 100%;
    align-self: center;
    padding: 28px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
        #ffffff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
}

.auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-card-head img {
    width: 62px;
    height: 62px;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.auth-card-head span,
.auth-demo-box span,
.contact-info-panel span,
.catalog-toolbar > span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-card-head h2,
.form-title-row h2,
.catalog-toolbar h2 {
    margin: 2px 0 0;
    font-size: 26px;
    line-height: 1.1;
}

.auth-login-hint { margin: 18px 0 0; color: #52647d; font-size: 13px; line-height: 1.5; }

.auth-card-pro input,
.contact-form-pro input,
.contact-form-pro textarea,
.filters-pro select {
    min-height: 46px;
    background: #f8fafc;
}

.auth-card-pro .button {
    min-height: 48px;
}

.auth-demo-box {
    display: grid;
    gap: 3px;
    padding: 14px;
    border: 1px dashed rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    background: #eff6ff;
}

.auth-demo-box strong {
    color: #0f172a;
}

.auth-demo-box small {
    color: #475569;
    font-weight: 800;
}

.contact-hero-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 26px;
    align-items: end;
    margin-top: 44px;
    padding: 48px;
    color: #ffffff;
    background:
        radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a, #1d4ed8 72%, #f97316 130%);
    box-shadow: var(--shadow);
}

.contact-hero-pro h1 {
    max-width: 820px;
    color: #ffffff;
}

.contact-hero-pro p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.86);
}

.contact-hero-card {
    display: grid;
    gap: 8px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.contact-hero-card strong {
    font-size: 22px;
}

.contact-hero-card a {
    color: #ffffff;
    font-weight: 900;
}

.contact-layout-pro {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 22px;
    padding-top: 28px;
}

.contact-info-panel {
    display: grid;
    gap: 12px;
    align-content: start;
}

.contact-info-panel article {
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.08), transparent 32%),
        #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.contact-info-panel strong,
.contact-info-panel small {
    display: block;
}

.contact-info-panel strong {
    margin-top: 8px;
    font-size: 20px;
}

.contact-info-panel small {
    margin-top: 5px;
    color: #64748b;
    font-weight: 750;
}

.contact-form-pro {
    padding: 28px;
    border-color: rgba(37, 99, 235, 0.14);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.form-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.form-title-row small {
    padding: 7px 10px;
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    font-weight: 900;
}

.catalog-hero-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 26px;
    align-items: end;
    margin-top: 42px;
    padding: 46px 48px;
    background:
        radial-gradient(circle at 88% 10%, rgba(37, 99, 235, 0.16), transparent 28%),
        linear-gradient(135deg, #ffffff, #eef5ff);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);
}

.catalog-hero-pro h1 {
    max-width: 860px;
    font-size: clamp(36px, 5vw, 62px);
}

.catalog-hero-pro p {
    max-width: 720px;
    font-size: 17px;
}

.catalog-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.catalog-hero-stats article {
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.catalog-hero-stats strong,
.catalog-hero-stats span {
    display: block;
}

.catalog-hero-stats strong {
    color: #1d4ed8;
    font-size: 34px;
    line-height: 1;
}

.catalog-hero-stats span {
    margin-top: 8px;
    color: #475569;
    font-weight: 850;
}

.public-site-box .catalog-layout.catalog-layout-pro {
    max-width: calc(var(--container) + 160px);
    padding-top: 28px;
}

.catalog-layout-pro {
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 28px;
}

.filters-pro {
    top: 136px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.13);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.filters-head {
    padding: 22px 22px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
}

.filters-head .eyebrow {
    color: #fed7aa;
}

.filters-head h2,
.filters-head p {
    margin: 0;
}

.filters-head h2 {
    font-size: 26px;
}

.filters-head p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.filters-pro form {
    padding: 20px;
}

.filters-pro .button {
    min-height: 52px;
}

.catalog-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.catalog-toolbar .eyebrow {
    margin-bottom: 6px;
}

.catalog-toolbar > span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #dbeafe;
}

.car-card.car-card-pro {
    border-color: rgba(148, 163, 184, 0.20);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.car-card.car-card-pro:hover {
    transform: translateY(-5px);
}

.car-card-pro .car-card-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 44%;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.52));
    pointer-events: none;
}

.car-card-pro .car-card-body {
    display: grid;
    gap: 10px;
    padding: 20px;
}

.car-card-pro h2 {
    margin: 0;
    font-size: 24px;
}

.car-card-pro p {
    margin: 0;
}

.status-badge {
    width: max-content;
    color: #166534;
    background: #dcfce7;
}

.car-specs-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.car-specs-mini span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #475569;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 850;
}

.car-card-pro .card-row {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.car-card-pro .card-row strong {
    color: #0f172a;
    font-size: 18px;
}

.car-card-pro .button-small {
    background: #0f172a;
}

@media (max-width: 1100px) {
    .auth-page.auth-page-pro,
    .contact-hero-pro,
    .contact-layout-pro,
    .catalog-hero-pro,
    .catalog-layout-pro {
        grid-template-columns: 1fr;
    }

    .auth-intro-panel {
        min-height: 420px;
    }

    .filters-pro {
        position: static;
    }
}

@media (max-width: 720px) {
    .public-shell {
        padding: 0;
    }

    .public-site-box {
        width: 100%;
    }

    .public-nav-bar {
        min-height: 76px;
    }

    .public-nav .nav-link,
    .public-nav .link-button,
    .public-nav-cta {
        width: 100%;
        justify-content: center;
    }

    .auth-page.auth-page-pro,
    .contact-layout-pro {
        padding: 24px 16px;
    }

    .auth-intro-panel,
    .auth-card.auth-card-pro,
    .contact-hero-pro,
    .contact-form-pro,
    .catalog-hero-pro {
        padding: 22px;
    }

    .auth-benefits,
    .catalog-hero-stats {
        grid-template-columns: 1fr;
    }

    .auth-intro-panel h1,
    .catalog-hero-pro h1 {
        font-size: 30px;
    }

    .contact-hero-pro,
    .catalog-hero-pro {
        margin-top: 20px;
    }

    .catalog-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Public vitrine final pass */
.public-shell {
    padding: 22px;
    background:
        radial-gradient(circle at 8% 2%, rgba(37, 99, 235, 0.18), transparent 28%),
        radial-gradient(circle at 92% 14%, rgba(249, 115, 22, 0.14), transparent 24%),
        linear-gradient(135deg, #e8eef8 0%, #f8fafc 48%, #edf4ff 100%);
}

.public-site-box {
    width: min(1500px, calc(100vw - 44px));
    border-radius: 8px;
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);
}

.public-main {
    background:
        radial-gradient(circle at 92% 6%, rgba(37, 99, 235, 0.08), transparent 26%),
        linear-gradient(180deg, #ffffff, #f8fafc 55%, #ffffff);
}

.public-top-strip span:first-child {
    color: #ffffff;
}

.public-nav-cta {
    min-height: 46px;
    padding-inline: 20px;
}

.button-compact {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 14px;
}

.home-hero-pro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    max-width: calc(var(--container) + 160px);
    min-height: 560px;
    margin: 0 auto;
    padding: 46px 42px 32px;
    overflow: hidden;
    color: #ffffff;
    background: #0f172a;
}

.home-hero-media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.home-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero-pro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.72) 48%, rgba(15, 23, 42, 0.24) 100%),
        radial-gradient(circle at 88% 84%, rgba(249, 115, 22, 0.34), transparent 25%);
    z-index: 1;
}

.home-hero-content,
.home-hero-panel,
.home-search-pro {
    position: relative;
    z-index: 2;
}

.home-hero-content {
    align-self: center;
    max-width: 760px;
}

.home-hero-content .eyebrow {
    color: #fed7aa;
}

.home-hero-content h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.02;
}

.home-hero-content p {
    max-width: 680px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
}

.home-hero-panel {
    align-self: center;
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.home-hero-panel strong,
.home-hero-panel span,
.home-hero-panel b,
.home-hero-panel small {
    display: block;
}

.home-hero-panel strong {
    font-size: 22px;
}

.home-hero-panel span,
.home-hero-panel small {
    color: rgba(255, 255, 255, 0.78);
}

.home-hero-panel div {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.home-search-pro {
    grid-column: 1 / -1;
    max-width: none;
    margin: 12px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.home-search-pro label {
    color: #0f172a;
}

.home-section-pro {
    max-width: calc(var(--container) + 160px);
    margin: 0 auto;
    padding: 44px 42px;
}

.home-section-pro + .home-section-pro {
    padding-top: 18px;
}

.home-service-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding-top: 28px;
}

.home-service-strip article {
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.home-service-strip strong,
.home-service-strip span {
    display: block;
}

.home-service-strip span {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
}

.home-catalog-preview .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.home-catalog-preview .section-heading p {
    max-width: 420px;
    margin: 0;
}

.home-section-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.page-hero-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.page-hero-card {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    display: grid;
    align-content: end;
    gap: 7px;
    padding: 22px;
    border-radius: 8px;
    color: #ffffff;
    background: #0f172a;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.page-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.88));
    z-index: 1;
}

.page-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 180ms ease;
}

.page-hero-card:hover::after {
    transform: scale(1.07);
}

.page-hero-card > * {
    position: relative;
    z-index: 2;
}

.page-hero-card span {
    width: max-content;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fed7aa;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.page-hero-card strong {
    font-size: 22px;
    line-height: 1.1;
}

.page-hero-card small {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 750;
}

.page-hero-card.is-catalog::after {
    background-image: url("../images/hero-car-1.png");
}

.page-hero-card.is-reservation::after {
    background-image: url("../images/hero-car-2.png");
}

.page-hero-card.is-contact::after,
.page-hero-card.is-terms::after {
    background-image: url("../images/hero-car-3.png");
}

.home-process-band {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 16px;
    color: #ffffff;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a, #1d4ed8 65%, #f97316 135%);
    border-radius: 8px;
}

.home-process-band .eyebrow {
    color: #fed7aa;
}

.home-process-band h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
}

.process-grid {
    display: grid;
    gap: 12px;
}

.process-grid article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
}

.process-grid strong {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 8px;
    color: #1d4ed8;
    background: #ffffff;
}

.process-grid span {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 800;
}

.public-footer.public-footer-pro {
    grid-template-columns: 1.2fr 0.8fr 0.9fr;
    gap: 22px;
    padding: 34px 42px;
    background:
        radial-gradient(circle at 92% 12%, rgba(249, 115, 22, 0.18), transparent 26%),
        linear-gradient(135deg, #08111f, #111827);
}

.footer-brand-card {
    display: grid;
    gap: 10px;
    align-content: start;
}

.footer-brand-card .footer-logo {
    width: 72px;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    background: #ffffff;
}

.footer-brand-card h2,
.footer-brand-card p {
    margin: 0;
}

.footer-brand-card p {
    max-width: 420px;
}

.footer-brand-card .button {
    width: max-content;
    margin-top: 4px;
}

.footer-link-column {
    display: grid;
    gap: 8px;
    align-content: start;
}

.footer-link-column span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.footer-link-column a,
.footer-link-column p {
    margin: 0;
    color: #cbd5e1;
}

.footer-link-column a:hover {
    color: #ffffff;
}

.legal-hero-pro,
.cms-hero-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 26px;
    align-items: end;
    margin-top: 42px;
    padding: 48px;
    color: #ffffff;
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a, #1d4ed8 72%, #f97316 130%);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.legal-hero-pro h1,
.cms-hero-pro h1 {
    color: #ffffff;
}

.legal-hero-pro p {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.84);
}

.legal-hero-pro aside {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.legal-page-pro {
    max-width: calc(var(--container) + 120px);
    margin: 0 auto;
    padding: 28px 42px 54px;
}

.legal-summary-card {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}

.legal-summary-card span,
.legal-admin-content span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.legal-summary-card h2,
.legal-summary-card p {
    margin: 0;
}

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

.legal-section-grid article,
.legal-admin-content {
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.legal-section-grid span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
    font-weight: 900;
}

.legal-section-grid h2 {
    margin: 14px 0 8px;
    font-size: 22px;
}

.legal-section-grid p {
    margin: 0;
    color: #475569;
}

.legal-admin-content {
    margin-top: 16px;
    color: #475569;
}

.legal-contact-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 24px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
}

.legal-contact-band .eyebrow {
    margin-bottom: 6px;
    color: #fed7aa;
}

.legal-contact-band h2 {
    margin: 0;
    color: #ffffff;
}

.cms-content-pro {
    max-width: 900px;
    padding-top: 28px;
    color: #475569;
    font-size: 17px;
}

@media (max-width: 1100px) {
    .home-hero-pro,
    .home-process-band,
    .legal-hero-pro,
    .cms-hero-pro {
        grid-template-columns: 1fr;
    }

    .home-service-strip,
    .page-hero-card-grid,
    .public-footer.public-footer-pro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-catalog-preview .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .public-shell {
        padding: 0;
    }

    .public-site-box {
        width: 100%;
        border-radius: 0;
    }

    .home-hero-pro,
    .home-section-pro,
    .legal-hero-pro,
    .cms-hero-pro,
    .legal-page-pro {
        padding-inline: 18px;
    }

    .home-hero-pro {
        min-height: auto;
        padding-top: 36px;
    }

    .home-hero-content h1 {
        font-size: 38px;
    }

    .home-service-strip,
    .page-hero-card-grid,
    .public-footer.public-footer-pro {
        grid-template-columns: 1fr;
    }

    .home-search-pro {
        grid-template-columns: 1fr;
    }

    .legal-contact-band {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Public reservation request flow */
.reservation-success-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: calc(var(--container) + 120px);
    margin: 28px auto 0;
    padding: 24px 28px;
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 8px;
    color: #14532d;
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.14), transparent 28%),
        #f0fdf4;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.reservation-success-card h2,
.reservation-success-card p {
    margin: 0;
}

.reservation-success-card p {
    margin-top: 8px;
    color: #166534;
}

.reservation-customer-block {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 26%),
        #ffffff;
}

.reservation-customer-block h3,
.reservation-customer-block p {
    margin: 0;
}

.reservation-customer-block p {
    margin-top: 6px;
    color: #64748b;
}

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

.reservation-customer-grid input,
.reservation-customer-block textarea {
    min-height: 52px;
    background: #f8fafc;
}

.reservation-terms-check {
    display: flex;
    grid-template-columns: none;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #eff6ff;
    color: #334155;
}

.reservation-terms-check input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-top: 3px;
}

.reservation-terms-check a {
    color: #1d4ed8;
    font-weight: 900;
}

.reservation-next-step {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.10);
    font-weight: 850;
}

.reservation-actions .button-accent {
    box-shadow: 0 14px 26px rgba(249, 115, 22, 0.22);
}

@media (max-width: 720px) {
    .reservation-success-card {
        align-items: flex-start;
        flex-direction: column;
        margin-inline: 16px;
    }

    .reservation-customer-grid {
        grid-template-columns: 1fr;
    }
}

/* Public home/menu hero refresh */
.public-top-strip {
    min-height: 72px;
    padding: 12px 34px;
    gap: 16px;
    background:
        radial-gradient(circle at 8% 30%, rgba(34, 197, 94, 0.18), transparent 18%),
        linear-gradient(90deg, #0f172a 0%, #1e3a8a 58%, #2563eb 100%);
}

.public-top-strip .public-top-item {
    display: grid;
    min-height: 48px;
    align-content: center;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.public-top-strip .public-top-agency {
    grid-template-columns: auto 1fr;
    column-gap: 10px;
}

.public-top-strip .public-top-agency i {
    grid-row: 1 / span 2;
    align-self: center;
    width: 12px;
    height: 12px;
}

.public-top-strip small {
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-top-strip strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.15;
}

.public-nav-bar {
    min-height: 100px;
    padding: 20px 38px;
    background:
        radial-gradient(circle at 92% 0%, rgba(249, 115, 22, 0.14), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.public-brand {
    min-height: 64px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.public-nav {
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.public-nav .nav-link,
.public-nav .link-button {
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 8px;
    color: #334155;
    background: transparent;
}

.public-nav .nav-link.is-active,
.public-nav .nav-link:hover,
.public-nav .link-button:hover {
    color: #0f172a;
    border-color: rgba(37, 99, 235, 0.22);
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
}

.public-nav-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 8px;
    color: #2563eb;
    background: #eff6ff;
}

.public-nav-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.public-nav .nav-link.is-active .public-nav-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
}

.public-nav-cta {
    min-height: 48px;
    margin-left: 4px;
    border-radius: 8px;
}

.home-section-hero {
    position: relative;
    grid-column: 1 / -1;
    min-height: 220px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 14px;
    padding: 30px;
    border-radius: 8px;
    color: #ffffff;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #0f172a, #1d4ed8 70%, #f97316 135%);
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.14);
}

.home-section-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: right center;
    background-size: cover;
    opacity: 0.22;
    mix-blend-mode: screen;
}

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

.home-section-hero .eyebrow {
    color: #fed7aa;
}

.home-section-hero h2,
.home-section-hero p {
    margin: 0;
}

.home-section-hero h2 {
    max-width: 840px;
    color: #ffffff;
    font-size: clamp(34px, 4.8vw, 58px);
    line-height: 1.04;
}

.home-section-hero p {
    max-width: 660px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
}

.section-hero-services {
    background:
        radial-gradient(circle at 86% 18%, rgba(34, 197, 94, 0.22), transparent 26%),
        linear-gradient(135deg, #0f172a, #0f766e 58%, #2563eb 128%);
}

.section-hero-catalog::after {
    background-image: url("../images/hero-car-2.png");
}

.section-hero-pages::after {
    background-image: url("../images/hero-car-3.png");
}

.section-hero-badge {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 900;
}

.home-service-strip {
    padding-top: 34px;
}

.home-service-strip article {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    padding: 24px;
    border-color: rgba(37, 99, 235, 0.12);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
        #ffffff;
}

.home-service-strip article::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -54px;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.10);
}

.home-service-strip em {
    display: inline-grid;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
    font-style: normal;
    font-weight: 950;
}

.home-service-strip strong {
    font-size: 20px;
}

.home-catalog-preview .car-grid {
    margin-top: 18px;
}

.car-card-pro .status-badge {
    position: relative;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(22, 163, 74, 0.16);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.08);
}

.car-card-pro .status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.13);
}

.page-hero-card span {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.72), rgba(249, 115, 22, 0.72));
    backdrop-filter: blur(10px);
}

@media (max-width: 1100px) {
    .public-nav-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-nav {
        width: 100%;
        justify-content: space-between;
    }

    .home-section-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .public-top-strip {
        display: grid;
        min-height: auto;
        padding: 12px;
    }

    .public-top-strip .public-top-item {
        min-height: 44px;
    }

    .public-nav {
        border-radius: 8px;
    }

    .home-section-hero {
        min-height: auto;
        padding: 22px;
    }

    .home-section-hero h2 {
        font-size: 32px;
    }

    .home-service-strip article {
        min-height: auto;
    }
}

/* Public polish: header, active menu, cars hero and reservation options */
.public-header.site-header {
    background: rgba(255, 255, 255, 0.97);
}

.public-top-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: 58px;
    gap: 18px;
    align-items: center;
    padding: 0 clamp(24px, 4vw, 52px);
    background:
        radial-gradient(circle at 4% 50%, rgba(34, 197, 94, 0.16), transparent 20%),
        linear-gradient(90deg, #0b1220 0%, #172554 48%, #2563eb 100%);
}

.public-top-strip .public-top-item {
    display: inline-grid;
    min-height: auto;
    align-content: center;
    gap: 1px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    background: transparent;
    box-shadow: none;
}

.public-top-strip .public-top-agency {
    justify-self: start;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
}

.public-top-strip .public-top-item:nth-child(2) {
    justify-self: center;
    text-align: center;
}

.public-top-strip .public-top-item:last-child {
    justify-self: end;
    text-align: right;
}

.public-top-strip .public-top-agency i {
    grid-row: 1 / span 2;
    align-self: center;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16);
}

.public-top-strip small {
    color: #93c5fd;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.public-top-strip strong {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.18;
}

.public-nav-bar {
    min-height: 108px;
    padding: 18px clamp(26px, 4vw, 52px);
    background:
        linear-gradient(90deg, #ffffff 0%, #ffffff 54%, rgba(255, 247, 237, 0.72) 100%);
}

.public-brand {
    min-height: 76px;
    padding: 10px 18px 10px 10px;
    gap: 12px;
}

.public-brand img {
    width: 64px;
    height: 64px;
}

.public-brand span {
    font-size: 18px;
}

.public-brand small {
    margin-top: 3px;
    font-size: 12px;
}

.public-nav {
    gap: 6px;
    padding: 6px;
    border-radius: 8px;
}

.public-nav .nav-link,
.public-nav .link-button {
    min-height: 46px;
    padding: 0 13px;
    border-radius: 8px;
}

.public-nav .nav-link.is-active::after {
    display: none;
    content: none;
}

.public-nav .nav-link.is-active {
    color: #0f172a;
    border-color: rgba(37, 99, 235, 0.24);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(249, 115, 22, 0.42)) border-box;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

.public-nav-cta {
    min-height: 52px;
    padding-inline: 24px;
}

.catalog-hero-pro.catalog-hero-photo {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
    align-items: center;
    gap: 34px;
    margin-top: 46px;
    padding: clamp(34px, 5vw, 58px);
    color: #ffffff;
    background:
        radial-gradient(circle at 95% 4%, rgba(249, 115, 22, 0.30), transparent 25%),
        linear-gradient(120deg, rgba(15, 23, 42, 0.98), rgba(29, 78, 216, 0.94)),
        url("../images/hero-car-2.png") center / cover;
    border: 0;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.catalog-hero-pro.catalog-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.30));
}

.catalog-hero-pro.catalog-hero-photo > * {
    position: relative;
    z-index: 1;
}

.catalog-hero-pro.catalog-hero-photo .eyebrow {
    color: #fed7aa;
}

.catalog-hero-pro.catalog-hero-photo h1 {
    max-width: 780px;
    color: #ffffff;
    font-size: clamp(38px, 4.8vw, 66px);
}

.catalog-hero-pro.catalog-hero-photo p {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.84);
}

.catalog-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.catalog-hero-side {
    display: grid;
    gap: 14px;
}

.catalog-hero-visual {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.24);
}

.catalog-hero-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.catalog-hero-visual figcaption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.72);
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.catalog-hero-photo .catalog-hero-stats article {
    min-height: 94px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.catalog-hero-photo .catalog-hero-stats strong,
.catalog-hero-photo .catalog-hero-stats span {
    color: #ffffff;
}

.catalog-hero-photo .catalog-hero-stats span {
    color: rgba(255, 255, 255, 0.78);
}

.reservation-options-block {
    padding-top: 6px;
}

.reservation-option-grid {
    gap: 14px;
}

.reservation-option-card {
    position: relative;
    min-height: 112px;
    overflow: hidden;
    padding: 16px;
    border-color: rgba(37, 99, 235, 0.14);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.09), transparent 34%),
        #ffffff;
}

.reservation-option-card::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -46px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.08);
}

.reservation-option-card > * {
    position: relative;
    z-index: 1;
}

.reservation-option-card input {
    width: 20px;
    height: 20px;
    accent-color: #2563eb;
}

.reservation-option-card strong {
    font-size: 17px;
}

.reservation-option-card em {
    max-width: 360px;
    color: #475569;
    line-height: 1.45;
}

.reservation-option-card b {
    display: inline-grid;
    justify-items: end;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    white-space: nowrap;
}

.reservation-option-card small {
    color: #334155;
}

@media (max-width: 1100px) {
    .catalog-hero-pro.catalog-hero-photo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .public-top-strip {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 18px;
    }

    .public-top-strip .public-top-item,
    .public-top-strip .public-top-item:nth-child(2),
    .public-top-strip .public-top-item:last-child {
        justify-self: start;
        text-align: left;
    }

    .public-brand img {
        width: 58px;
        height: 58px;
    }

    .catalog-hero-pro.catalog-hero-photo {
        margin-top: 28px;
        padding: 26px;
    }

    .catalog-hero-stats,
    .reservation-option-grid {
        grid-template-columns: 1fr;
    }
}

/* Final admin notifications overrides */
.admin-live-badge,
.admin-user-mini {
    display: none !important;
}

.notification-list-pro .notification-list-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    border-left: 4px solid transparent;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.notification-list-pro .notification-list-card.is-unread {
    border-left-color: #2563eb;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.035), rgba(255, 255, 255, 0.98) 28%),
        #ffffff;
}

.notification-list-pro .notification-list-card.is-read {
    border-left-color: #cbd5e1;
}

.notification-list-pro .notification-main-link {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    min-height: 76px;
    padding: 12px 16px;
}

.notification-list-pro .notification-icon-bubble {
    display: grid;
}

.notification-list-pro .notification-state-dot {
    display: none;
}

.notification-list-pro .notification-card-topline {
    display: flex;
}

.notification-list-pro .notification-message {
    display: block;
}

.notification-list-pro .notification-main-link b {
    text-transform: none;
}

/* Admin returns list and detail refresh */
.alert-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.alert-action {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #ffffff;
    background: #2563eb;
    font-size: 12px;
    font-weight: 950;
}

.alert-action:hover {
    background: #1d4ed8;
}

.returns-hero-pro,
.return-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: 22px;
}

.return-hero-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.return-hero-mini article,
.return-detail-status {
    display: grid;
    gap: 8px;
    min-height: 136px;
    align-content: center;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.return-hero-mini span,
.return-detail-status em {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.return-hero-mini strong,
.return-detail-status strong {
    color: #ffffff;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 950;
    line-height: 1;
}

.return-hero-mini em {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.returns-list-panel {
    padding: 26px;
}

.returns-table-wrap {
    overflow-x: auto;
}

.returns-table-pro {
    min-width: 1040px;
}

.returns-table-pro tbody tr {
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.07), transparent 38%),
        #ffffff;
}

.returns-table-pro td strong,
.returns-table-pro td small {
    display: block;
}

.returns-table-pro td small {
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.returns-table-pro .table-actions a {
    white-space: nowrap;
}

.return-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    margin-top: 18px;
}

.return-detail-panel,
.return-summary-card,
.return-close-panel {
    padding: 26px;
}

.return-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.return-detail-grid article,
.return-summary-card div {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: #f8fafc;
}

.return-detail-grid span,
.return-summary-card span {
    color: #64748b;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.return-detail-grid strong,
.return-summary-card strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
}

.return-detail-grid em {
    color: #475569;
    font-style: normal;
    font-weight: 750;
}

.return-summary-card {
    align-content: start;
    gap: 12px;
}

.return-summary-card h2 {
    margin: 0;
    color: #2563eb;
    font-size: 34px;
}

.return-close-panel {
    margin-top: 18px;
}

.return-close-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.return-close-form label {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 13px;
    font-weight: 950;
}

.return-close-form input,
.return-close-form select,
.return-close-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 14px;
}

.return-close-form textarea {
    min-height: 96px;
    resize: vertical;
}

.return-close-form .form-wide {
    grid-column: span 2;
}

.return-close-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 10px;
}

.return-close-actions .button {
    min-height: 46px;
}

@media (max-width: 1180px) {
    .returns-hero-pro,
    .return-detail-hero,
    .return-detail-layout {
        grid-template-columns: 1fr;
    }

    .return-detail-grid,
    .return-close-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .alert-item,
    .return-hero-mini,
    .return-detail-grid,
    .return-close-form {
        grid-template-columns: 1fr;
    }

    .return-close-form .form-wide {
        grid-column: auto;
    }

    .return-close-actions {
        justify-content: stretch;
        flex-direction: column;
    }
}

/* Admin alerts and client messages final refresh */
.dash-pro-refresh .alerts-panel-v2 {
    background:
        radial-gradient(circle at 94% 5%, rgba(37, 99, 235, 0.10), transparent 34%),
        #ffffff;
}

.dash-pro-refresh .alert-list {
    gap: 12px;
}

.dash-pro-refresh .alert-item {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    min-height: 104px;
    align-items: center;
    padding: 16px 18px;
    border-color: rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.035), rgba(255, 255, 255, 0.98) 42%),
        #ffffff;
}

.dash-pro-refresh .alert-warning {
    background:
        linear-gradient(90deg, rgba(249, 115, 22, 0.06), rgba(255, 255, 255, 0.98) 42%),
        #ffffff;
}

.dash-pro-refresh .alert-danger {
    background:
        linear-gradient(90deg, rgba(239, 68, 68, 0.06), rgba(255, 255, 255, 0.98) 42%),
        #ffffff;
}

.dash-pro-refresh .alert-success {
    background:
        linear-gradient(90deg, rgba(16, 185, 129, 0.06), rgba(255, 255, 255, 0.98) 42%),
        #ffffff;
}

.dash-pro-refresh .alert-icon {
    width: 58px;
    height: 58px;
    border-radius: 8px;
}

.dash-pro-refresh .alert-item strong {
    font-size: 18px;
}

.dash-pro-refresh .alert-item p {
    max-width: 360px;
    line-height: 1.55;
}

.dash-pro-refresh .alert-meta {
    display: flex;
    min-width: 118px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.dash-pro-refresh .alert-count {
    min-width: 42px;
    height: 42px;
    font-size: 16px;
}

.dash-pro-refresh .alert-action {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.dash-pro-refresh .alert-action.is-disabled {
    color: #64748b;
    background: #e2e8f0;
    box-shadow: none;
}

.messages-hero-pro,
.message-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: 22px;
}

.message-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.message-hero-stats article,
.message-detail-status {
    display: grid;
    gap: 8px;
    align-content: center;
    min-height: 138px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.message-hero-stats span,
.message-detail-status em {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.message-hero-stats strong,
.message-detail-status strong {
    color: #ffffff;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 950;
    line-height: 1;
}

.messages-list-panel,
.message-body-panel,
.message-contact-panel {
    padding: 26px;
}

.message-toolbar-pro {
    grid-template-columns: minmax(260px, 1fr) 190px auto auto;
    margin-bottom: 16px;
}

.message-list-pro {
    display: grid;
    gap: 10px;
}

.message-card-pro {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 4px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.message-card-pro.message-status-new {
    border-left-color: #2563eb;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.04), transparent 34%),
        #ffffff;
}

.message-card-pro.message-status-answered {
    border-left-color: #16a34a;
}

.message-card-pro a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 14px 16px;
}

.message-card-pro a:hover {
    background: rgba(37, 99, 235, 0.04);
}

.message-avatar {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    font-weight: 950;
}

.message-main {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.message-topline {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.message-topline strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-main > span:not(.message-topline),
.message-main small {
    overflow: hidden;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-main small {
    color: #64748b;
}

.message-date {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.message-card-pro b {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border-radius: 8px;
    color: #ffffff;
    background: #2563eb;
    font-size: 12px;
    font-weight: 950;
}

.message-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    margin-top: 18px;
}

.message-full-text {
    min-height: 260px;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    color: #1f2937;
    background: #f8fafc;
    font-size: 16px;
    line-height: 1.75;
}

.message-contact-panel {
    display: grid;
    align-content: start;
    gap: 14px;
}

.message-contact-panel h2 {
    margin: 0;
}

.message-contact-panel div,
.message-contact-panel form {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: #f8fafc;
}

.message-contact-panel span,
.message-contact-panel label {
    color: #64748b;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.message-contact-panel a,
.message-contact-panel strong {
    color: #0f172a;
    font-weight: 950;
}

.message-contact-panel select {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
}

/* Public vehicle gallery lightbox */
.gallery-main-clickable {
    cursor: zoom-in;
}

.gallery-lightbox-open {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.gallery-lightbox.is-open {
    display: flex;
}

.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.22), transparent 34%),
        rgba(15, 23, 42, 0.86);
    backdrop-filter: blur(10px);
}

.gallery-lightbox-panel {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(1120px, 100%);
    max-height: calc(100vh - 56px);
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 16px;
}

.gallery-lightbox-panel figure {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.gallery-lightbox-panel img {
    width: 100%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

.gallery-lightbox-panel figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.74);
    backdrop-filter: blur(12px);
}

.gallery-lightbox-panel figcaption strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-lightbox-panel figcaption span {
    color: #bfdbfe;
    font-weight: 900;
    white-space: nowrap;
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.gallery-lightbox-close {
    position: absolute;
    z-index: 4;
    top: -18px;
    right: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 950;
}

.gallery-lightbox-nav {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover {
    background: #2563eb;
}

.gallery-lightbox-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 1180px) {
    .messages-hero-pro,
    .message-detail-hero,
    .message-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .dash-pro-refresh .alert-item,
    .message-toolbar-pro,
    .message-card-pro a,
    .message-hero-stats {
        grid-template-columns: 1fr;
    }

    .dash-pro-refresh .alert-meta {
        justify-content: flex-start;
    }

    .message-date {
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .gallery-lightbox {
        padding: 16px;
    }

    .gallery-lightbox-panel {
        max-height: calc(100vh - 32px);
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .gallery-lightbox-panel figure {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .gallery-lightbox-panel img {
        max-height: calc(100vh - 180px);
    }

    .gallery-lightbox-prev,
    .gallery-lightbox-next {
        grid-row: 2;
        justify-self: stretch;
        width: auto;
        height: 48px;
        border-radius: 8px;
        font-size: 34px;
    }

    .gallery-lightbox-close {
        top: 8px;
        right: 8px;
    }

    .gallery-lightbox-panel figcaption {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Admin dashboard hero final redesign */
.dash-pro-refresh .dash-hero-v2 {
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.65fr);
    align-items: stretch;
    gap: 18px;
}

.dash-pro-refresh .dash-control-hero {
    display: grid;
    min-height: 306px;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: end;
    gap: 22px;
    padding: clamp(26px, 3vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(7, 13, 28, 0.94), rgba(15, 23, 42, 0.82) 52%, rgba(37, 99, 235, 0.30)),
        url("../images/hero-car-2.png") center right / cover no-repeat;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
}

.dash-pro-refresh .dash-control-hero::after {
    right: -68px;
    bottom: -116px;
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.40), rgba(37, 99, 235, 0.12));
}

.dash-pro-refresh .dash-hero-copy-v3 {
    position: relative;
    z-index: 2;
}

.dash-pro-refresh .dash-hero-copy-v3 h2 {
    max-width: 590px;
    margin: 16px 0 0;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 0.98;
}

.dash-pro-refresh .dash-hero-copy-v3 p {
    max-width: 620px;
    margin: 18px 0 0;
    color: rgba(226, 232, 240, 0.94);
    font-size: 16px;
    line-height: 1.65;
}

.dash-pro-refresh .dash-hero-copy-v3 .dash-hero-actions {
    margin-top: 24px;
}

.dash-pro-refresh .dash-hero-insights {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
}

.dash-pro-refresh .dash-hero-insights a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.dash-pro-refresh .dash-hero-insights a:hover {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(37, 99, 235, 0.40);
    transform: translateY(-1px);
}

.dash-pro-refresh .dash-hero-insights span {
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.dash-pro-refresh .dash-hero-insights strong {
    grid-row: span 2;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.dash-pro-refresh .dash-hero-insights em {
    color: rgba(226, 232, 240, 0.86);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.dash-pro-refresh .occupancy-board-pro {
    min-height: 306px;
    padding: 20px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.30), transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.18), transparent 32%),
        linear-gradient(145deg, #0f172a 0%, #172554 52%, #1d4ed8 100%);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
}

.dash-pro-refresh .occupancy-board-pro::before {
    background: rgba(255, 255, 255, 0.08);
}

.dash-pro-refresh .occupancy-board-pro .occupancy-head span {
    color: #bfdbfe;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-head b {
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.12);
}

.dash-pro-refresh .occupancy-body-v3 {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-gauge {
    width: 142px;
    margin: 0;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-track {
    stroke: rgba(255, 255, 255, 0.16);
}

.dash-pro-refresh .occupancy-board-pro .occupancy-gauge strong {
    color: #ffffff;
    font-size: 42px;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-gauge small {
    color: #bfdbfe;
}

.dash-pro-refresh .occupancy-summary-v3 {
    display: grid;
    gap: 10px;
}

.dash-pro-refresh .occupancy-summary-v3 strong {
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
}

.dash-pro-refresh .occupancy-summary-v3 p {
    margin: 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-bar {
    height: 9px;
    background: rgba(255, 255, 255, 0.14);
}

.dash-pro-refresh .occupancy-board-pro .occupancy-metrics {
    gap: 10px;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-metrics span {
    position: relative;
    overflow: hidden;
    padding: 12px 10px 16px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dash-pro-refresh .occupancy-board-pro .occupancy-metrics b {
    color: #ffffff;
    font-size: 24px;
}

.dash-pro-refresh .occupancy-board-pro .occupancy-metrics i {
    position: absolute;
    left: 10px;
    right: auto;
    bottom: 8px;
    height: 4px;
    min-width: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #38bdf8);
}

.dash-pro-refresh .occupancy-actions-v3 {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dash-pro-refresh .occupancy-actions-v3 a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    font-size: 13px;
    font-weight: 950;
}

.dash-pro-refresh .occupancy-actions-v3 a:hover {
    background: #f97316;
}

@media (max-width: 1220px) {
    .dash-pro-refresh .dash-hero-v2,
    .dash-pro-refresh .dash-control-hero {
        grid-template-columns: 1fr;
    }

    .dash-pro-refresh .dash-hero-insights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dash-pro-refresh .dash-control-hero {
        min-height: auto;
        padding: 22px;
    }

    .dash-pro-refresh .dash-hero-copy-v3 h2 {
        font-size: 34px;
    }

    .dash-pro-refresh .dash-hero-insights,
    .dash-pro-refresh .occupancy-body-v3,
    .dash-pro-refresh .occupancy-actions-v3 {
        grid-template-columns: 1fr;
    }

    .dash-pro-refresh .occupancy-board-pro .occupancy-gauge {
        justify-self: center;
    }
}

/* Unified admin and client heroes refresh */
.admin-main .admin-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
}

.admin-main .crud-hero-pro {
    --hero-start: #0f172a;
    --hero-mid: #1e3a8a;
    --hero-accent: #2563eb;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 186px;
    padding: clamp(24px, 3vw, 34px);
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 6%, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at 56% 110%, rgba(14, 165, 233, 0.22), transparent 34%),
        linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 58%, var(--hero-accent) 125%);
}

.admin-main .crud-hero-pro::before {
    width: 260px;
    height: 260px;
    right: -90px;
    top: -112px;
    background: rgba(255, 255, 255, 0.10);
}

.admin-main .crud-hero-pro::after {
    width: 190px;
    height: 190px;
    left: auto;
    right: 26%;
    bottom: -118px;
    background: rgba(249, 115, 22, 0.18);
}

.admin-main .crud-hero-pro .admin-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    max-width: 860px;
}

.admin-main .crud-hero-pro .admin-kicker,
.dash-pro-refresh .dash-control-hero .admin-kicker {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(191, 219, 254, 0.24);
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(255, 255, 255, 0.10);
    letter-spacing: 0;
}

.admin-main .crud-hero-pro .admin-kicker::before,
.dash-pro-refresh .dash-control-hero .admin-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

.admin-main .crud-hero-pro h2 {
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.02;
    letter-spacing: 0;
}

.admin-main .crud-hero-pro p {
    max-width: 760px;
    margin: 0;
    color: rgba(226, 232, 240, 0.92);
    font-size: 14px;
    line-height: 1.62;
}

.admin-main .crud-hero-pro .admin-hero-actions {
    margin-top: 8px;
}

.admin-main .crud-hero-pro .button {
    min-height: 44px;
    border-radius: 8px;
}

.cars-hero-pro {
    --hero-mid: #1d4ed8;
    --hero-accent: #0ea5e9;
}

.customers-hero-pro {
    --hero-mid: #0f766e;
    --hero-accent: #22c55e;
}

.reservations-hero-pro,
.calendar-hero-pro {
    --hero-mid: #1d4ed8;
    --hero-accent: #f97316;
}

.payments-hero-pro,
.deposits-hero-pro {
    --hero-mid: #4f46e5;
    --hero-accent: #f97316;
}

.settings-hero-pro {
    --hero-mid: #334155;
    --hero-accent: #2563eb;
}

.notifications-hero-pro,
.messages-hero-pro {
    --hero-mid: #1e40af;
    --hero-accent: #06b6d4;
}

.returns-hero-pro,
.return-detail-hero {
    --hero-mid: #0f766e;
    --hero-accent: #f59e0b;
}

.contracts-hero-pro,
.documents-hero-pro,
.reports-hero-pro,
.marketing-hero-pro,
.ops-suite-hero {
    --hero-mid: #312e81;
    --hero-accent: #38bdf8;
}

.payments-hero-pro,
.settings-hero-pro,
.notifications-hero-pro,
.messages-hero-pro,
.returns-hero-pro,
.notification-detail-hero,
.message-detail-hero,
.return-detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
}

.payments-hero-panel,
.settings-hero-panel,
.notification-detail-status,
.message-detail-status,
.return-detail-status,
.notification-hero-stats article,
.message-hero-stats article,
.return-hero-mini article {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 118px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
}

.notification-hero-stats,
.message-hero-stats,
.return-hero-mini {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.payments-hero-panel span,
.settings-hero-panel span,
.notification-detail-status span,
.message-detail-status span,
.return-detail-status span,
.notification-hero-stats span,
.message-hero-stats span,
.return-hero-mini span {
    color: rgba(219, 234, 254, 0.86);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.payments-hero-panel strong,
.settings-hero-panel strong,
.notification-detail-status strong,
.message-detail-status strong,
.return-detail-status strong,
.notification-hero-stats strong,
.message-hero-stats strong,
.return-hero-mini strong {
    color: #ffffff;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 950;
    line-height: 1;
}

.payments-hero-panel em,
.settings-hero-panel em,
.notification-detail-status em,
.message-detail-status em,
.return-detail-status em,
.notification-hero-stats em,
.return-hero-mini em {
    color: rgba(226, 232, 240, 0.82);
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.admin-main .notification-detail-status strong,
.admin-main .message-detail-status strong,
.admin-main .return-detail-status strong {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.15;
}

.dash-pro-refresh .dash-hero-v2 {
    grid-template-columns: minmax(0, 1.55fr) minmax(350px, 0.68fr);
    gap: 18px;
}

.dash-pro-refresh .dash-control-hero {
    min-height: 286px;
    padding: clamp(24px, 3vw, 34px);
    border-color: rgba(96, 165, 250, 0.22);
    background:
        linear-gradient(90deg, rgba(8, 13, 28, 0.96) 0%, rgba(15, 23, 42, 0.86) 54%, rgba(37, 99, 235, 0.32) 100%),
        url("../images/hero-car-2.png") center right / cover no-repeat;
}

.dash-pro-refresh .dash-hero-copy-v3 h2 {
    max-width: 560px;
    font-size: clamp(32px, 3.6vw, 50px);
}

.dash-pro-refresh .dash-hero-copy-v3 p {
    max-width: 590px;
    margin-top: 14px;
}

.dash-pro-refresh .dash-hero-insights a {
    min-height: 78px;
    padding: 13px;
}

.dash-pro-refresh .occupancy-board-pro {
    min-height: 286px;
    padding: 18px;
    background:
        radial-gradient(circle at 92% 6%, rgba(14, 165, 233, 0.30), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(249, 115, 22, 0.16), transparent 30%),
        linear-gradient(145deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
}

.client-shell .dashboard-page {
    padding-top: 24px;
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 96% 8%, rgba(249, 115, 22, 0.08), transparent 28%),
        #f5f7fb;
}

/* Admin dashboard compact typography. Login typography is intentionally untouched. */
.admin-main:has(.dash-pro-refresh) .admin-topbar h1 { font-size: clamp(24px, 2.6vw, 34px); }
.dash-pro-refresh .dash-hero-copy-v3 h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.05; }
.dash-pro-refresh .dash-hero-copy-v3 p { font-size: 14px; line-height: 1.5; }
.dash-pro-refresh .dash-hero-insights strong { font-size: 28px; }
.dash-pro-refresh .occupancy-board-pro .occupancy-gauge strong { font-size: 36px; }
.dash-pro-refresh .occupancy-summary-v3 strong { font-size: 18px; }
.dash-pro-refresh .occupancy-summary-v3 p { font-size: 12px; }
.dash-pro-refresh .kpi-card-v2 strong { font-size: clamp(28px, 2.5vw, 40px); }
.dash-pro-refresh .kpi-money-value { font-size: clamp(23px, 1.8vw, 30px) !important; }
.dash-pro-refresh .ops-strip-v2 strong { font-size: 19px; }
.dash-pro-refresh .panel-heading-v2 h2 { font-size: 18px; }

.client-hero-redesign {
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
    gap: 18px;
}

.client-hero-redesign .client-hero-copy {
    min-height: 300px;
    padding: clamp(26px, 3.4vw, 40px);
    border-color: rgba(96, 165, 250, 0.22);
    background:
        linear-gradient(90deg, rgba(8, 13, 28, 0.96) 0%, rgba(15, 23, 42, 0.82) 54%, rgba(14, 165, 233, 0.20) 100%),
        url("../images/hero-car-1.png") center right / cover no-repeat;
}

.client-hero-redesign .client-kicker {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(191, 219, 254, 0.22);
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(255, 255, 255, 0.10);
}

.client-hero-redesign .client-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

.client-hero-redesign .client-hero-copy h1 {
    max-width: 680px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.02;
}

.client-hero-redesign .client-hero-copy p {
    max-width: 620px;
    margin-top: 16px;
    font-size: 16px;
}

.client-hero-redesign .client-hero-actions {
    margin-top: 22px;
}

.client-hero-redesign .client-hero-actions .button {
    min-height: 44px;
    border-radius: 8px;
}

.client-hero-redesign .client-hero-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.client-hero-redesign .client-hero-strip span {
    min-height: 58px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.client-hero-redesign .client-next-card {
    overflow: hidden;
    border-color: rgba(37, 99, 235, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 38%),
        #ffffff;
}

.client-hero-redesign .client-next-card img {
    aspect-ratio: 16 / 8.6;
}

.client-hero-redesign .client-next-body,
.client-hero-redesign .client-empty-next {
    padding: 20px;
}

.client-hero-redesign .client-next-body dl div {
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: #ffffff;
}

.client-hero-redesign .client-route-mini {
    border: 1px solid rgba(37, 99, 235, 0.12);
}

@media (max-width: 1180px) {
    .payments-hero-pro,
    .settings-hero-pro,
    .notifications-hero-pro,
    .messages-hero-pro,
    .returns-hero-pro,
    .notification-detail-hero,
    .message-detail-hero,
    .return-detail-hero,
    .dash-pro-refresh .dash-hero-v2,
    .client-hero-redesign {
        grid-template-columns: 1fr;
    }

    .notification-hero-stats,
    .message-hero-stats,
    .return-hero-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-hero-redesign .client-hero-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-main .crud-hero-pro {
        min-height: auto;
        padding: 22px;
    }

    .admin-main .crud-hero-pro h2,
    .client-hero-redesign .client-hero-copy h1 {
        font-size: 28px;
    }

    .notification-hero-stats,
    .message-hero-stats,
    .return-hero-mini,
    .client-hero-redesign .client-hero-strip {
        grid-template-columns: 1fr;
    }

    .client-hero-redesign .client-hero-copy {
        min-height: auto;
        padding: 22px;
    }
}

/* Marketing page final refresh */
.marketing-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    align-items: stretch;
    min-height: 236px;
    background:
        radial-gradient(circle at 94% 4%, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 60% 118%, rgba(249, 115, 22, 0.22), transparent 34%),
        linear-gradient(135deg, #06251f 0%, #0f766e 48%, #2563eb 128%);
}

.marketing-page-hero .admin-hero-copy {
    justify-content: center;
}

.marketing-hero-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-self: center;
}

.marketing-hero-panel article {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 138px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
}

.marketing-hero-panel span,
.marketing-summary-card span,
.marketing-record-meta b {
    color: rgba(219, 234, 254, 0.86);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.marketing-hero-panel strong {
    color: #ffffff;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 950;
    line-height: 1;
}

.marketing-hero-panel em {
    color: rgba(226, 232, 240, 0.82);
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.marketing-summary-grid,
.marketing-workbench,
.marketing-lists {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

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

.marketing-workbench,
.marketing-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.marketing-summary-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 18px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--summary-a), var(--summary-b));
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.marketing-summary-card::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -68px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.marketing-summary-card strong,
.marketing-summary-card em,
.marketing-summary-card span {
    position: relative;
    z-index: 1;
}

.marketing-summary-card strong {
    color: #ffffff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
}

.marketing-summary-card em {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.summary-blue {
    --summary-a: #1d4ed8;
    --summary-b: #0891b2;
}

.summary-green {
    --summary-a: #047857;
    --summary-b: #22c55e;
}

.summary-orange {
    --summary-a: #ea580c;
    --summary-b: #f59e0b;
}

.summary-purple {
    --summary-a: #4f46e5;
    --summary-b: #7c3aed;
}

.marketing-form-card,
.marketing-list-panel {
    padding: 26px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.06), transparent 34%),
        #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

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

.marketing-form-grid label {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 13px;
    font-weight: 950;
}

.marketing-form-grid .is-wide,
.marketing-form-actions {
    grid-column: 1 / -1;
}

.marketing-form-grid input,
.marketing-form-grid select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    color: #0f172a;
    background: #ffffff;
    font: inherit;
    font-weight: 800;
}

.marketing-form-grid input:focus,
.marketing-form-grid select:focus {
    outline: 3px solid rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.58);
}

.marketing-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.marketing-form-actions .button {
    min-width: 210px;
    min-height: 46px;
    border-radius: 8px;
}

.marketing-record-list {
    display: grid;
    gap: 12px;
}

.marketing-record-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.045), transparent 42%),
        #ffffff;
}

.season-record-card {
    background:
        linear-gradient(90deg, rgba(16, 185, 129, 0.055), transparent 42%),
        #ffffff;
}

.marketing-record-main {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.promo-code-badge {
    display: inline-flex;
    width: max-content;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.season-record-card .promo-code-badge {
    color: #065f46;
    background: #d1fae5;
}

.marketing-record-main h3 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.15;
}

.marketing-record-main p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.marketing-record-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.marketing-record-meta span {
    display: grid;
    gap: 4px;
    min-height: 58px;
    align-content: center;
    padding: 10px;
    border-radius: 8px;
    color: #0f172a;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 950;
}

.marketing-record-meta b {
    color: #64748b;
}

.marketing-record-status {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.marketing-record-status em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.marketing-empty-state {
    display: grid;
    gap: 6px;
    min-height: 120px;
    align-content: center;
    padding: 22px;
    border: 1px dashed rgba(148, 163, 184, 0.38);
    border-radius: 8px;
    color: #64748b;
    background: #f8fafc;
}

.marketing-empty-state strong {
    color: #0f172a;
    font-size: 18px;
}

@media (max-width: 1280px) {
    .marketing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketing-workbench,
    .marketing-lists,
    .marketing-page-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .marketing-hero-panel,
    .marketing-summary-grid,
    .marketing-form-grid,
    .marketing-record-card,
    .marketing-record-meta {
        grid-template-columns: 1fr;
    }

    .marketing-form-card,
    .marketing-list-panel {
        padding: 20px;
    }

    .marketing-form-actions,
    .marketing-record-status {
        justify-content: stretch;
        justify-items: stretch;
    }

    .marketing-form-actions .button {
        width: 100%;
        min-width: 0;
    }
}

/* Settings control center refresh */
.settings-control-center {
    display: grid;
    gap: 18px;
}

.settings-control-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 58% 120%, rgba(14, 165, 233, 0.24), transparent 36%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 58%, #2563eb 128%);
}

.settings-command-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.settings-command-grid a {
    display: grid;
    gap: 6px;
    min-height: 92px;
    align-content: center;
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
        #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.settings-command-grid a:hover {
    border-color: rgba(37, 99, 235, 0.36);
    transform: translateY(-1px);
}

.settings-command-grid strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}

.settings-command-grid span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.settings-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.settings-group-card,
.settings-email-panel,
.settings-seo-panel,
.settings-design-panel {
    padding: 26px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.06), transparent 34%),
        #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.settings-group-card > p {
    margin: -6px 0 18px;
    color: #64748b;
    font-weight: 750;
}

.settings-field-grid,
.settings-seo-grid,
.settings-email-grid {
    display: grid;
    gap: 14px;
}

.settings-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-field-card,
.settings-seo-card,
.settings-email-card {
    display: grid;
    gap: 8px;
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: #f8fafc;
}

.settings-field-card span,
.settings-design-item span,
.settings-seo-card label,
.settings-email-card label {
    color: #475569;
    font-size: 13px;
    font-weight: 950;
}

.settings-field-card em,
.settings-design-item em {
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.settings-field-card .settings-public-select {
    max-width: 150px;
}

.settings-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-seo-card > div,
.settings-email-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-seo-card > div strong,
.settings-email-head strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.settings-seo-card label,
.settings-email-card label {
    display: grid;
    gap: 7px;
}

.settings-email-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-email-card {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.035), transparent 46%),
        #ffffff;
}

.settings-email-card .settings-textarea {
    min-height: 120px;
}

.settings-save-bar {
    z-index: 6;
}

@media (max-width: 1280px) {
    .settings-command-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-group-grid,
    .settings-seo-grid,
    .settings-email-grid,
    .settings-control-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .settings-command-grid,
    .settings-field-grid {
        grid-template-columns: 1fr;
    }

    .settings-group-card,
    .settings-email-panel,
    .settings-seo-panel,
    .settings-design-panel {
        padding: 20px;
    }

    .settings-seo-card > div,
    .settings-email-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Client dashboard calmer redesign */
.client-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.12), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.08), transparent 26%),
        #f5f7fb;
}

.client-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 14px max(24px, calc((100vw - 1280px) / 2));
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055);
    backdrop-filter: blur(18px);
}

.client-header .brand {
    min-height: 54px;
}

.client-header .brand img {
    width: 54px;
    height: 54px;
}

.client-header .site-nav {
    gap: 10px;
}

.client-header .site-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #334155;
    font-weight: 900;
}

.client-header .site-nav a:hover {
    color: #1d4ed8;
    background: #eff6ff;
}

.client-header .button-outline {
    min-height: 46px;
    border-radius: 8px;
    background: #ffffff;
}

.client-shell .dashboard-page {
    padding: 28px max(20px, calc((100vw - 1240px) / 2)) 56px;
}

.client-dashboard-restyle {
    gap: 18px;
}

.client-dashboard-restyle .client-portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
    gap: 18px;
    align-items: stretch;
}

.client-dashboard-restyle .client-hero-copy,
.client-dashboard-restyle .client-next-card-soft,
.client-dashboard-restyle .client-kpi-card,
.client-dashboard-restyle .client-panel,
.client-dashboard-restyle .client-support-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.075);
}

.client-dashboard-restyle .client-hero-copy {
    min-height: 284px;
    padding: clamp(26px, 3vw, 38px);
    color: #0f172a;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.client-dashboard-restyle .client-hero-copy::after {
    right: -86px;
    bottom: -112px;
    width: 220px;
    height: 220px;
    background: rgba(37, 99, 235, 0.08);
}

.client-dashboard-restyle .client-hero-copy .client-kicker {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
}

.client-dashboard-restyle .client-hero-copy h1 {
    max-width: 680px;
    margin-top: 16px;
    color: #0f172a;
    font-size: clamp(32px, 3.7vw, 52px);
    line-height: 1.04;
}

.client-dashboard-restyle .client-hero-copy p {
    max-width: 660px;
    margin-top: 16px;
    color: #475569;
    font-size: 16px;
    line-height: 1.62;
}

.client-dashboard-restyle .client-hero-actions {
    margin-top: 22px;
}

.client-dashboard-restyle .client-hero-actions .button {
    min-height: 44px;
    border-radius: 8px;
}

.client-dashboard-restyle .client-hero-actions .button-light {
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: none;
}

.client-dashboard-restyle .client-portal-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.client-dashboard-restyle .client-portal-summary span {
    min-height: 58px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    color: #334155;
    background: #f8fafc;
    font-weight: 900;
}

.client-dashboard-restyle .client-portal-summary b {
    color: #1d4ed8;
}

.client-dashboard-restyle .client-portal-summary svg {
    color: #2563eb;
}

.client-dashboard-restyle .client-next-card-soft {
    overflow: hidden;
    display: grid;
    align-content: stretch;
}

.client-dashboard-restyle .client-next-card-soft img {
    aspect-ratio: 16 / 8.6;
}

.client-dashboard-restyle .client-next-body,
.client-dashboard-restyle .client-empty-next {
    padding: 22px;
}

.client-dashboard-restyle .client-empty-next {
    min-height: 100%;
    align-content: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.09), transparent 36%),
        #ffffff;
}

.client-dashboard-restyle .client-empty-next > span {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.client-dashboard-restyle .client-empty-next h2 {
    font-size: 26px;
}

.client-dashboard-restyle .client-kpi-grid {
    gap: 12px;
}

.client-dashboard-restyle .client-kpi-card {
    --tone: #2563eb;
    --tone-soft: #dbeafe;
    min-height: 132px;
    padding: 16px;
    color: #0f172a;
    background: #ffffff;
    border-left: 4px solid var(--tone);
}

.client-dashboard-restyle .client-kpi-card::after {
    display: none;
}

.client-dashboard-restyle .client-kpi-card i {
    width: 42px;
    height: 42px;
    color: var(--tone);
    background: var(--tone-soft);
}

.client-dashboard-restyle .client-kpi-card span {
    margin-top: 4px;
    color: #475569;
    font-size: 12px;
}

.client-dashboard-restyle .client-kpi-card strong {
    color: #0f172a;
    font-size: clamp(26px, 2.6vw, 36px);
}

.client-dashboard-restyle .client-kpi-card em {
    color: #64748b;
}

.client-dashboard-restyle .kpi-blue {
    --tone: #2563eb;
    --tone-soft: #dbeafe;
}

.client-dashboard-restyle .kpi-green {
    --tone: #059669;
    --tone-soft: #d1fae5;
}

.client-dashboard-restyle .kpi-orange {
    --tone: #f97316;
    --tone-soft: #ffedd5;
}

.client-dashboard-restyle .kpi-purple {
    --tone: #7c3aed;
    --tone-soft: #ede9fe;
}

.client-dashboard-restyle .client-dashboard-layout-pro {
    gap: 18px;
}

.client-dashboard-restyle .client-panel {
    padding: 20px;
}

.client-dashboard-restyle .client-panel-heading h2 {
    font-size: 22px;
}

.client-dashboard-restyle .client-panel-heading a {
    border-radius: 8px;
}

.client-dashboard-restyle .client-reservation-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    border-color: rgba(148, 163, 184, 0.18);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.client-dashboard-restyle .client-reservation-date {
    color: #1d4ed8;
    background: #eff6ff;
}

.client-dashboard-restyle .client-side-stack {
    gap: 14px;
}

.client-dashboard-restyle .client-profile-ring {
    width: 150px;
    height: 150px;
    margin: 4px auto 14px;
}

.client-dashboard-restyle .client-support-card {
    color: #0f172a;
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.10), transparent 36%),
        #ffffff;
}

.client-dashboard-restyle .client-support-card i {
    color: #f97316;
    background: #ffedd5;
}

.client-dashboard-restyle .client-support-card span {
    color: #64748b;
}

@media (max-width: 1180px) {
    .client-dashboard-restyle .client-portal-hero,
    .client-dashboard-restyle .client-dashboard-layout-pro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .client-header {
        padding-inline: 16px;
    }

    .client-header,
    .client-header .site-nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-dashboard-restyle .client-hero-copy {
        min-height: auto;
        padding: 22px;
    }

    .client-dashboard-restyle .client-hero-copy h1 {
        font-size: 31px;
    }

    .client-dashboard-restyle .client-portal-summary,
    .client-dashboard-restyle .client-kpi-grid,
    .client-dashboard-restyle .client-reservation-item {
        grid-template-columns: 1fr;
    }

    .client-dashboard-restyle .client-reservation-status {
        align-items: flex-start;
    }
}

/* Client dashboard color pass */
.client-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.24), transparent 30%),
        radial-gradient(circle at 88% 0%, rgba(249, 115, 22, 0.16), transparent 27%),
        linear-gradient(135deg, #dbeafe 0%, #eef4ff 45%, #f7eee7 100%);
}

.client-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background:
        radial-gradient(circle at 0 0, rgba(14, 165, 233, 0.20), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.94));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20);
}

.client-header .brand {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}

.client-header .brand span {
    color: #ffffff;
}

.client-header .site-nav a {
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.08);
}

.client-header .site-nav a:hover {
    color: #ffffff;
    background: rgba(37, 99, 235, 0.34);
}

.client-header .button-outline {
    border-color: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.client-header .button-outline:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.18);
}

.client-shell .dashboard-page {
    padding-top: 30px;
}

.client-dashboard-restyle .client-hero-copy,
.client-dashboard-restyle .client-next-card-soft,
.client-dashboard-restyle .client-kpi-card,
.client-dashboard-restyle .client-panel,
.client-dashboard-restyle .client-support-card {
    border-color: rgba(59, 130, 246, 0.16);
    box-shadow: 0 22px 54px rgba(30, 64, 175, 0.16);
}

.client-dashboard-restyle .client-hero-copy {
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.66)),
        radial-gradient(circle at 95% 15%, rgba(249, 115, 22, 0.22), transparent 26%),
        url("../images/hero-car-1.png") center / cover;
}

.client-dashboard-restyle .client-hero-copy::after {
    background: rgba(249, 115, 22, 0.16);
}

.client-dashboard-restyle .client-hero-copy .client-kicker {
    border-color: rgba(147, 197, 253, 0.40);
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.22);
}

.client-dashboard-restyle .client-hero-copy h1,
.client-dashboard-restyle .client-hero-copy p {
    color: #ffffff;
}

.client-dashboard-restyle .client-hero-copy p {
    color: #dbeafe;
}

.client-dashboard-restyle .client-hero-actions .button-light {
    color: #0f172a;
    background: #ffffff;
}

.client-dashboard-restyle .client-portal-summary span {
    border-color: rgba(255, 255, 255, 0.16);
    color: #e0f2fe;
    background: rgba(15, 23, 42, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.client-dashboard-restyle .client-portal-summary b,
.client-dashboard-restyle .client-portal-summary svg {
    color: #ffffff;
}

.client-dashboard-restyle .client-next-card-soft {
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.20), transparent 34%),
        linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
}

.client-dashboard-restyle .client-empty-next {
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.24), transparent 34%),
        linear-gradient(135deg, #13284d 0%, #1d4ed8 100%);
}

.client-dashboard-restyle .client-empty-next h2 {
    color: #ffffff;
}

.client-dashboard-restyle .client-empty-next p {
    color: #dbeafe;
}

.client-dashboard-restyle .client-empty-next .button-primary {
    color: #0f172a;
    background: #ffffff;
}

.client-dashboard-restyle .client-kpi-card {
    border-left-width: 0;
    color: #ffffff;
    background: var(--client-kpi-bg, linear-gradient(135deg, #1d4ed8, #0ea5e9));
}

.client-dashboard-restyle .client-kpi-card i {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.client-dashboard-restyle .client-kpi-card span,
.client-dashboard-restyle .client-kpi-card strong,
.client-dashboard-restyle .client-kpi-card em {
    color: #ffffff;
}

.client-dashboard-restyle .client-kpi-card em {
    opacity: 0.84;
}

.client-dashboard-restyle .kpi-blue {
    --client-kpi-bg: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}

.client-dashboard-restyle .kpi-green {
    --client-kpi-bg: linear-gradient(135deg, #059669, #22c55e);
}

.client-dashboard-restyle .kpi-orange {
    --client-kpi-bg: linear-gradient(135deg, #f97316, #f59e0b);
}

.client-dashboard-restyle .kpi-purple {
    --client-kpi-bg: linear-gradient(135deg, #5b21b6, #7c3aed);
}

.client-dashboard-restyle .client-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.09), transparent 28%),
        rgba(248, 250, 252, 0.94);
}

.client-dashboard-restyle .client-panel-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.client-dashboard-restyle .client-panel-heading a {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.client-dashboard-restyle .client-reservation-item {
    border-color: rgba(37, 99, 235, 0.12);
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
}

.client-dashboard-restyle .client-side-stack .client-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.08), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94));
}

.client-dashboard-restyle .client-support-card {
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #1e40af 62%, #f97316 130%);
}

.client-dashboard-restyle .client-support-card i {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

.client-dashboard-restyle .client-support-card span {
    color: #dbeafe;
}

.client-dashboard-restyle .client-support-card a {
    color: #0f172a;
    background: #ffffff;
}

/* Public contact and footer polish */
.contact-form-pro .contact-submit-button {
    width: auto;
    min-width: 220px;
    min-height: 48px;
    align-self: flex-start;
    padding-inline: 24px;
    border-radius: 8px;
    box-shadow: 0 16px 30px rgba(249, 115, 22, 0.20);
}

.contact-form-pro .form-title-row {
    align-items: flex-start;
}

.public-footer.public-footer-pro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    perspective: 1200px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.26), transparent 32%),
        radial-gradient(circle at 100% 16%, rgba(249, 115, 22, 0.26), transparent 30%),
        linear-gradient(135deg, #08111f 0%, #101a33 52%, #24160f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 -24px 60px rgba(15, 23, 42, 0.18);
}

.public-footer.public-footer-pro::before {
    content: "";
    position: absolute;
    inset: 18px 24px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    z-index: -1;
}

.public-footer.public-footer-pro::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -130px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.18);
    filter: blur(2px);
    z-index: -1;
}

.public-footer.public-footer-pro .footer-brand-card,
.public-footer.public-footer-pro .footer-link-column {
    transform: translateZ(0);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
    box-shadow:
        0 26px 52px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -22px 36px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(14px);
}

.public-footer.public-footer-pro .footer-brand-card {
    transform: rotateX(2deg) translateY(-4px);
}

.public-footer.public-footer-pro .footer-link-column {
    padding: 22px;
}

.public-footer.public-footer-pro .footer-brand-card:hover,
.public-footer.public-footer-pro .footer-link-column:hover {
    transform: translateY(-4px);
    box-shadow:
        0 34px 68px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.public-footer.public-footer-pro .footer-brand-card:hover {
    transform: rotateX(0deg) translateY(-6px);
}

.public-footer.public-footer-pro a,
.public-footer.public-footer-pro p,
.public-footer.public-footer-pro h2 {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.30);
}

@media (max-width: 760px) {
    .contact-form-pro .contact-submit-button {
        width: 100%;
        min-width: 0;
    }
}

/* Public footer centered logo, no animation */
.contact-form-pro button.contact-submit-button.button {
    width: fit-content !important;
    max-width: 260px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    justify-self: start;
    align-self: flex-start;
    padding: 11px 20px !important;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
}

.public-footer.public-footer-pro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding: 42px clamp(24px, 4vw, 58px);
    overflow: visible;
    perspective: none;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.18), transparent 34%),
        linear-gradient(135deg, #08111f 0%, #111827 70%, #1c120d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.public-footer.public-footer-pro::before,
.public-footer.public-footer-pro::after {
    display: none;
}

.public-footer.public-footer-pro *,
.public-footer.public-footer-pro *::before,
.public-footer.public-footer-pro *::after {
    transition: none !important;
}

.public-footer.public-footer-pro .footer-brand-card,
.public-footer.public-footer-pro .footer-link-column,
.public-footer.public-footer-pro .footer-brand-card:hover,
.public-footer.public-footer-pro .footer-link-column:hover {
    transform: none !important;
    box-shadow: none;
}

.public-footer.public-footer-pro .footer-brand-card {
    grid-column: 1 / -1;
    justify-items: center;
    align-content: center;
    padding: 0 0 8px;
    border: 0;
    background: transparent;
}

.public-footer.public-footer-pro .footer-brand-card .footer-logo {
    width: clamp(118px, 10vw, 160px);
    margin: 0 auto 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.public-footer.public-footer-pro .footer-brand-card h2 {
    font-size: clamp(24px, 2vw, 34px);
}

.public-footer.public-footer-pro .footer-brand-card p {
    max-width: 620px;
    margin-inline: auto;
    color: #dbeafe;
}

.public-footer.public-footer-pro .footer-brand-card .button {
    display: none;
}

.public-footer.public-footer-pro .footer-link-column {
    justify-items: center;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.public-footer.public-footer-pro a,
.public-footer.public-footer-pro p,
.public-footer.public-footer-pro h2 {
    text-shadow: none;
}

@media (max-width: 760px) {
    .contact-form-pro button.contact-submit-button.button {
        width: 100% !important;
        max-width: none !important;
    }

    .public-footer.public-footer-pro {
        grid-template-columns: 1fr;
    }
}

/* Compact three-column public footer */
.public-footer.public-footer-pro {
    grid-template-columns: 1.05fr 0.9fr 1fr;
    align-items: stretch;
    gap: 20px;
    padding: 28px clamp(24px, 3vw, 46px);
    text-align: left;
}

.public-footer.public-footer-pro .footer-brand-card {
    grid-column: auto;
    justify-items: center;
    align-content: start;
    padding: 0;
    text-align: center;
}

.public-footer.public-footer-pro .footer-brand-card .footer-logo {
    width: 112px;
    margin: 0 auto 12px;
    padding: 10px;
    border-radius: 10px;
}

.public-footer.public-footer-pro .footer-brand-card h2 {
    font-size: 22px;
}

.public-footer.public-footer-pro .footer-brand-card p {
    max-width: 360px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.55;
}

.public-footer.public-footer-pro .footer-link-column {
    justify-items: start;
    padding: 18px;
    text-align: left;
}

.public-footer.public-footer-pro .footer-link-column a,
.public-footer.public-footer-pro .footer-link-column p {
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .public-footer.public-footer-pro {
        grid-template-columns: 1fr;
    }
}

/* Public catalog hero: client promises instead of internal stats */
.catalog-hero-photo .catalog-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.catalog-hero-photo .catalog-hero-trust article {
    min-height: 84px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.catalog-hero-photo .catalog-hero-trust strong,
.catalog-hero-photo .catalog-hero-trust span {
    display: block;
    color: #ffffff;
}

.catalog-hero-photo .catalog-hero-trust strong {
    font-size: 15px;
    line-height: 1.2;
}

.catalog-hero-photo .catalog-hero-trust span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .catalog-hero-photo .catalog-hero-trust {
        grid-template-columns: 1fr;
    }
}

/* Client dashboard compact KPI cards */
.client-dashboard-restyle .client-kpi-grid {
    gap: 10px;
}

.client-dashboard-restyle .client-kpi-card {
    --kpi-tone: #2563eb;
    --kpi-soft: #eff6ff;
    min-height: 96px;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value"
        "icon hint";
    align-items: center;
    gap: 3px 12px;
    padding: 14px 15px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-left: 4px solid var(--kpi-tone);
    color: #0f172a;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--kpi-tone) 12%, transparent), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, var(--kpi-soft) 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.client-dashboard-restyle .client-kpi-card::after {
    display: none;
}

.client-dashboard-restyle .client-kpi-card i {
    grid-area: icon;
    width: 38px;
    height: 38px;
    color: var(--kpi-tone);
    background: color-mix(in srgb, var(--kpi-tone) 14%, #ffffff);
}

.client-dashboard-restyle .client-kpi-card span {
    grid-area: label;
    margin: 0;
    color: #334155;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1.15;
}

.client-dashboard-restyle .client-kpi-card strong {
    grid-area: value;
    color: #0f172a;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    white-space: nowrap;
}

.client-dashboard-restyle .client-kpi-card em {
    grid-area: hint;
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    opacity: 1;
}

.client-dashboard-restyle .client-kpi-card.kpi-purple strong {
    font-size: clamp(20px, 1.7vw, 26px);
}

.client-dashboard-restyle .kpi-blue {
    --kpi-tone: #2563eb;
    --kpi-soft: #eff6ff;
}

.client-dashboard-restyle .kpi-green {
    --kpi-tone: #059669;
    --kpi-soft: #ecfdf5;
}

.client-dashboard-restyle .kpi-orange {
    --kpi-tone: #f97316;
    --kpi-soft: #fff7ed;
}

.client-dashboard-restyle .kpi-purple {
    --kpi-tone: #7c3aed;
    --kpi-soft: #f5f3ff;
}

@media (max-width: 760px) {
    .client-dashboard-restyle .client-kpi-card {
        min-height: 90px;
    }
}

/* Client reservations list and detail pages */
.client-dashboard-restyle .client-reservation-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.client-reservation-detail-link,
.client-pagination a,
.client-back-link,
.client-page-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.client-reservation-detail-link,
.client-pagination a {
    color: #ffffff;
    background: #2563eb;
}

.client-reservation-detail-link:hover,
.client-pagination a:hover {
    background: #1d4ed8;
}

.client-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.20);
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
}

.client-pagination div {
    display: flex;
    gap: 8px;
}

.client-page-size {
    color: #1d4ed8;
    background: #dbeafe;
}

.client-reservations-page,
.client-reservation-detail-page {
    display: grid;
    gap: 18px;
}

.client-list-hero,
.client-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: 8px;
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.20), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
    box-shadow: 0 22px 54px rgba(30, 64, 175, 0.16);
}

.client-list-hero h1,
.client-detail-hero h1 {
    margin: 8px 0 8px;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.02;
}

.client-list-hero p,
.client-detail-hero p {
    max-width: 720px;
    margin: 0;
    color: #dbeafe;
}

.client-detail-status-card {
    min-width: 210px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.client-detail-status-card strong {
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
}

.client-detail-status-card em {
    color: #dbeafe;
    font-style: normal;
    font-weight: 850;
}

.client-back-link {
    width: fit-content;
    min-height: 30px;
    margin-bottom: 10px;
    color: #0f172a;
    background: #ffffff;
}

.client-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 18px;
}

.client-detail-lower {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.client-detail-card {
    padding: 20px;
}

.client-detail-main {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.client-detail-main > img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border-radius: 8px;
    object-fit: cover;
}

.client-detail-dl,
.client-money-grid {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.client-detail-dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-detail-dl div,
.client-money-grid span {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #f8fafc;
}

.client-detail-dl dt,
.client-money-grid b {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.client-detail-dl dd,
.client-money-grid strong {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
}

.client-money-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.client-money-grid .is-total,
.client-money-grid .is-paid,
.client-money-grid .is-due {
    color: #ffffff;
    background: #0f172a;
}

.client-money-grid .is-paid {
    background: #059669;
}

.client-money-grid .is-due {
    background: #f97316;
}

.client-money-grid .is-total b,
.client-money-grid .is-paid b,
.client-money-grid .is-due b,
.client-money-grid .is-total strong,
.client-money-grid .is-paid strong,
.client-money-grid .is-due strong {
    color: #ffffff;
}

.client-detail-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.client-detail-list > div,
.client-timeline > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: #ffffff;
}

.client-detail-list span,
.client-timeline span {
    display: grid;
    gap: 2px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.client-detail-list strong,
.client-timeline strong {
    color: #0f172a;
    font-size: 14px;
}

.client-detail-list em {
    color: #475569;
    font-style: normal;
    font-weight: 900;
}

.client-timeline {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .client-detail-grid,
    .client-detail-lower,
    .client-detail-main {
        grid-template-columns: 1fr;
    }

    .client-detail-main > img {
        height: auto;
    }
}

@media (max-width: 760px) {
    .client-dashboard-restyle .client-reservation-item,
    .client-detail-dl,
    .client-money-grid {
        grid-template-columns: 1fr;
    }

    .client-list-hero,
    .client-detail-hero,
    .client-pagination,
    .client-detail-list > div,
    .client-timeline > div {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Client boxed width aligned with the public showcase */
.client-shell {
    padding: 22px;
}

.client-header,
.client-shell .dashboard-page {
    width: min(1500px, calc(100vw - 44px));
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

.client-header {
    top: 22px;
    padding: 16px clamp(22px, 3vw, 42px);
    border-radius: 8px 8px 0 0;
}

.client-shell .dashboard-page {
    padding: 34px clamp(28px, 4vw, 64px) 58px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background:
        radial-gradient(circle at 92% 6%, rgba(37, 99, 235, 0.08), transparent 26%),
        linear-gradient(180deg, #ffffff, #f8fafc 55%, #ffffff);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);
}

.client-header .site-nav {
    gap: 10px;
}

.client-header .client-nav-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    text-decoration: none;
}

.client-header .client-nav-link.is-active {
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 -2px 0 rgba(249, 115, 22, 0.92);
}

.client-header .client-nav-icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 8px;
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.10);
}

.client-header .client-nav-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.client-header .client-nav-link:hover .client-nav-icon,
.client-header .client-nav-link.is-active .client-nav-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #f97316);
}

.client-header .client-nav-logout {
    font-weight: 900;
}

@media (max-width: 760px) {
    .client-shell {
        padding: 12px;
    }

    .client-header,
    .client-shell .dashboard-page {
        width: min(100%, calc(100vw - 24px));
    }

    .client-header {
        top: 12px;
        padding: 14px;
    }

    .client-shell .dashboard-page {
        padding: 22px 14px 34px;
    }

    .client-header .client-nav-link {
        min-height: 44px;
        padding: 0 12px;
    }
}

.agency-scope-filter { display:grid; grid-template-columns:auto minmax(250px, 390px) auto minmax(0, 1fr); align-items:center; gap:12px; margin:0 0 22px; padding:14px 18px; background:linear-gradient(110deg,#fff 0%,#f8fbff 100%); border:1px solid #d7e2f1; border-radius:16px; box-shadow:0 10px 24px rgba(30,64,175,.07); }
.agency-scope-filter label { display:inline-flex; align-items:center; gap:8px; color:#173152; font-size:13px; font-weight:850; white-space:nowrap; }
.agency-scope-filter label::before { content:""; width:9px; height:9px; border-radius:50%; background:#2563eb; box-shadow:0 0 0 5px #dbeafe; }
.agency-scope-filter select { width:100%; min-width:0; min-height:46px; padding:9px 14px; border:1px solid #c7d6ea; border-radius:10px; outline:0; background:#fff; color:#172554; font-size:14px; font-weight:650; transition:border-color .15s ease,box-shadow .15s ease; }
.agency-scope-filter select:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.agency-scope-filter .button { min-height:46px; padding-inline:18px; border-radius:10px; font-size:14px; box-shadow:0 7px 14px rgba(37,99,235,.18); }
.agency-scope-filter > span { min-width:0; color:#52647d; font-size:12px; line-height:1.4; }
.admin-main, .admin-sidebar, .admin-panel { min-width: 0; }
.agency-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-admin .agency-brand-logo { object-fit: contain; flex: 0 0 48px; }
.brand-admin .agency-brand-name { min-width: 0; overflow-wrap: anywhere; }
.agency-logo-svg svg { width: 24px; height: 24px; fill: currentColor; }
.agency-logo-initial, .brand-admin .agency-logo-initial {
    display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
    border-radius: 10px; color: #1e40af; background: #eff6ff; font-size: 22px; font-weight: 800;
}
.agency-table-identity { min-width: 180px; }
.table-entity .agency-table-logo { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; padding: 4px; background: #fff; border: 1px solid #dce4ef; border-radius: 10px; }
.agency-logo-editor { display: flex; align-items: center; gap: 22px; padding: 22px; margin-bottom: 24px; border: 1px solid #dce4ef; border-radius: 14px; background: #f8fafc; }
.agency-logo-preview { display: grid; place-items: center; width: 104px; height: 104px; flex: 0 0 104px; padding: 10px; background: #fff; border: 1px solid #dce4ef; border-radius: 14px; }
.agency-logo-preview img { width: 100%; height: 100%; max-height: 82px; object-fit: contain; }
.agency-logo-preview span { color: #1e40af; font-size: 38px; font-weight: 800; }
.agency-logo-preview [hidden] { display: none; }
.agency-logo-fields { display: grid; gap: 8px; min-width: 0; flex: 1; }
.agency-logo-fields input[type="file"] { width: 100%; min-width: 0; background: #fff; }
.agency-logo-fields small { color: #52647d; font-size: 12px; }
.agency-logo-fields .field-error { color: #b91c1c; }
.crud-form .agency-logo-remove { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.crud-form .agency-logo-remove input { width: 18px; min-height: 18px; height: 18px; margin: 0; }
.agencies-table .table-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 225px; gap: 8px; }
.agencies-table .table-actions a, .agencies-table .table-actions button { width: 100%; padding: 8px 10px; text-align: center; white-space: normal; font-size: 12px; }

/* Agency dashboard polish: keep the management table readable without clipped actions. */
.agency-stats-grid .stat-card-pro {
    min-height: 118px;
    padding: 18px 22px;
    border-top: 3px solid #2563eb;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}
.agency-stats-grid .stat-card-pro:nth-child(2) { border-top-color: #10b981; }
.agency-stats-grid .stat-card-pro:nth-child(3) { border-top-color: #f97316; }
.agency-stats-grid .stat-card-pro span {
    color: #52647d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}
.agency-stats-grid .stat-card-pro strong { margin-top: 7px; font-size: 30px; line-height: 1; }
.admin-main .crud-hero-pro:not(.notifications-hero-pro) { box-shadow: 0 20px 42px rgba(30, 64, 175, .18); }
.admin-main .crud-hero-pro:not(.notifications-hero-pro) .button-accent {
    box-shadow: 0 8px 18px rgba(249, 115, 22, .28);
}
.agencies-table { table-layout: fixed; }
.agencies-table th:nth-child(1), .agencies-table td:nth-child(1) { width: 23%; }
.agencies-table th:nth-child(2), .agencies-table td:nth-child(2) { width: 16%; }
.agencies-table th:nth-child(3), .agencies-table td:nth-child(3) { width: 16%; }
.agencies-table th:nth-child(4), .agencies-table td:nth-child(4),
.agencies-table th:nth-child(5), .agencies-table td:nth-child(5),
.agencies-table th:nth-child(6), .agencies-table td:nth-child(6) { width: 7%; }
.agencies-table th:nth-child(7), .agencies-table td:nth-child(7) { width: 8%; }
.agencies-table th:nth-child(8), .agencies-table td:nth-child(8) { width: 16%; }
.agencies-table tbody td { white-space: normal; overflow-wrap: anywhere; }
.agencies-table .agency-table-identity { min-width: 0; }
.agencies-table .table-actions { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agencies-table .table-actions a, .agencies-table .table-actions button { min-height: 38px; line-height: 1.15; }
.notifications-hero-pro .notification-hero-stats article {
    min-height: 136px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}
.notifications-hero-pro .notification-hero-stats strong { font-size: 34px; }
.return-detail-status .status-pill {
    width: max-content;
    justify-self: start;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(254, 202, 202, .85);
    color: #991b1b;
    background: #fee2e2;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: none;
}
.return-detail-status .status-pill.status-success { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.return-detail-status .status-pill.status-warning { color: #92400e; background: #ffedd5; border-color: #fed7aa; }
.notifications-hero-pro .notification-hero-stats em { font-size: 12px; }
.customer-avatar-svg {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #0f766e 0%, #2563eb 100%);
    box-shadow: 0 8px 16px rgba(37, 99, 235, .20);
}
.customer-avatar-svg svg { width: 100%; height: 100%; }
.customer-avatar-svg .avatar-silhouette-head { fill: rgba(255,255,255,.92); }
.customer-avatar-svg .avatar-silhouette-body { fill: rgba(255,255,255,.78); }
.customer-avatar-svg .avatar-initials { fill: #fff; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.customer-avatar-svg svg { display: block; }
.client-cell-icon svg { width: 18px; height: 18px; fill: currentColor; }
.client-cell-icon { color: #2563eb; }
.calendar-car-icon svg { width: 21px; height: 21px; fill: currentColor; }
.calendar-car-icon { color: #fff; }
.message-avatar svg { width: 22px; height: 22px; fill: currentColor; }
/* Compact admin identity cards. */
.admin-brand-block { gap: 11px; padding: 12px; }
.brand-admin { gap: 10px; }
.brand-admin span { font-size: 16px; line-height: 1.08; }
.brand-admin small { font-size: 11px; }
.admin-role-pill, .admin-session-dot { min-height: 24px; padding: 0 8px; font-size: 10px; }
.admin-brand-footer { gap: 7px; }
.admin-sidebar-card { gap: 6px; padding: 12px; }
.admin-sidebar-card strong { font-size: 15px; }
.agency-status { gap: 6px; font-size: 11px !important; }
.admin-sidebar-card a { min-height: 34px; margin-top: 6px; padding: 0 10px; font-size: 12px; }
/* Keep application slogans concise while preserving the main page titles. */
.admin-shell .admin-hero p,
.admin-shell .crud-hero-pro p,
.admin-shell .dash-pro-refresh .dash-hero-copy-v3 p { font-size: 13px; line-height: 1.5; }
.client-shell .client-hero-copy p { font-size: 14px; line-height: 1.5; }
.public-shell .home-hero-content p,
.public-shell .hero-copy p,
.public-shell .contact-hero-pro p,
.public-shell .catalog-hero-pro p,
.public-shell .legal-hero-pro p { font-size: 15px; line-height: 1.55; }
.public-shell .reservation-hero-copy p { font-size: 14px; line-height: 1.5; }
.admin-shell .admin-main .crud-hero-pro h2 {
    font-size: clamp(23px, 2.3vw, 34px);
    line-height: 1.08;
}
@media (max-width: 760px) {
    .admin-shell .admin-main .crud-hero-pro h2 { font-size: 26px; }
}
.admin-shell .admin-main .admin-topbar.admin-topbar-pro h1 {
    font-size: clamp(22px, 2.15vw, 30px);
    line-height: 1.08;
}
@media (max-width: 640px) {
    .admin-shell .admin-main .admin-topbar.admin-topbar-pro h1 { font-size: 24px; }
}
@media (max-width: 600px) {
    .agency-stats-grid { grid-template-columns: 1fr; }
    .agency-scope-filter { grid-template-columns: 1fr; align-items: stretch; gap:10px; padding:14px; }
    .agency-scope-filter label, .agency-scope-filter select { width: 100%; min-width: 0; }
    .agency-logo-editor { align-items: flex-start; flex-direction: column; padding: 16px; }
    .agencies-table { table-layout: auto; min-width: 920px; }
}

/* Messages: compact statistics and a single-line filter on wide screens. */
.admin-shell .message-toolbar-pro {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 210px) auto auto;
    align-items: end;
    gap: 10px;
}
.admin-shell .message-toolbar-pro > label {
    display: grid;
    gap: 6px;
    color: #52647d;
    font-size: 12px;
    font-weight: 800;
}
.admin-shell .message-toolbar-pro input,
.admin-shell .message-toolbar-pro select {
    width: 100%;
    min-height: 42px;
    font-size: 13px;
}
.admin-shell .message-toolbar-pro .button {
    min-height: 42px;
    white-space: nowrap;
}
.admin-shell .crud-stat-card {
    min-height: 108px;
    padding: 16px 18px;
}
.admin-shell .crud-stat-card strong {
    font-size: 30px;
    line-height: 1;
}
.admin-shell .crud-stat-card em { font-size: 11px; }
.admin-shell .message-hero-stats article {
    min-height: 84px;
    padding: 12px 16px;
    border-radius: 12px;
}
.admin-shell .messages-hero-pro .message-hero-stats span {
    font-size: 10px;
    letter-spacing: .03em;
}
.admin-shell .message-hero-stats strong {
    font-size: 26px;
    line-height: 1;
}
@media (min-width: 901px) {
    .admin-shell .messages-hero-pro {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    }
    .admin-shell .messages-hero-pro .message-hero-stats {
        grid-template-columns: 1fr;
    }
    .admin-shell .returns-hero-pro {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    }
    .admin-shell .returns-hero-pro .return-hero-mini {
        grid-template-columns: 1fr;
    }
}
.admin-shell .returns-hero-pro .return-hero-mini article {
    min-height: 84px;
    padding: 12px 16px;
    border-radius: 12px;
}
.admin-shell .returns-hero-pro .return-hero-mini span {
    font-size: 10px;
    letter-spacing: .03em;
}
.admin-shell .returns-hero-pro .return-hero-mini strong {
    font-size: 26px;
    line-height: 1;
}
.admin-shell .returns-hero-pro .return-hero-mini em { font-size: 11px; }
@media (min-width: 901px) {
    .admin-shell .notifications-hero-pro {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    }
    .admin-shell .notifications-hero-pro .notification-hero-stats {
        grid-template-columns: 1fr;
    }
}
.admin-shell .notifications-hero-pro .notification-hero-stats article {
    min-height: 84px;
    padding: 12px 16px;
    border-radius: 12px;
}
.admin-shell .notifications-hero-pro .notification-hero-stats span {
    font-size: 10px;
    letter-spacing: .03em;
}
.admin-shell .notifications-hero-pro .notification-hero-stats strong {
    font-size: 26px;
    line-height: 1;
}
.admin-shell .notifications-hero-pro .notification-hero-stats em { font-size: 11px; }
@media (min-width: 901px) {
    .admin-shell .payments-hero-pro {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 350px);
    }
    .admin-shell .payments-hero-pro .payments-hero-panel {
        min-height: 96px;
        padding: 14px 16px;
        border-radius: 12px;
    }
    .admin-shell .payments-hero-pro .payments-hero-panel span {
        font-size: 10px;
        letter-spacing: .03em;
    }
    .admin-shell .payments-hero-pro .payments-hero-panel strong {
        font-size: 30px;
        line-height: 1;
    }
.admin-shell .payments-hero-pro .payments-hero-panel em { font-size: 11px; }
}
@media (min-width: 901px) {
    .admin-shell .reports-hero-pro {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    }
    .admin-shell .reports-hero-pro .calendar-month-form {
        width: 100%;
        max-width: 380px;
        justify-self: end;
        padding: 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .admin-shell .reports-hero-pro .calendar-month-form label {
        gap: 5px;
        font-size: 11px;
        letter-spacing: .03em;
        text-transform: uppercase;
    }
    .admin-shell .reports-hero-pro .calendar-month-form input {
        min-height: 40px;
        padding: 0 10px;
        font-size: 13px;
        font-weight: 800;
    }
.admin-shell .reports-hero-pro .calendar-month-form .button {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }
}
@media (min-width: 901px) {
    .admin-shell .calendar-hero-pro {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    }
    .admin-shell .calendar-hero-pro .calendar-month-form {
        width: 100%;
        max-width: 380px;
        justify-self: end;
        padding: 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .admin-shell .calendar-hero-pro .calendar-month-form label {
        gap: 5px;
        font-size: 11px;
        letter-spacing: .03em;
        text-transform: uppercase;
    }
    .admin-shell .calendar-hero-pro .calendar-month-form input {
        min-height: 40px;
        padding: 0 10px;
        font-size: 13px;
        font-weight: 800;
    }
    .admin-shell .calendar-hero-pro .calendar-month-form .button {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }
    .admin-shell .calendar-hero-pro .calendar-nav-button {
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px;
    }
}
/* Match agency totals with the compact colored statistic cards used elsewhere. */
.admin-shell .agency-stats-grid .stat-card-pro {
    min-height: 108px;
    padding: 16px 18px;
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
}
.admin-shell .agency-stats-grid .stat-card-pro:nth-child(1) {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}
.admin-shell .agency-stats-grid .stat-card-pro:nth-child(2) {
    background: linear-gradient(135deg, #059669, #22c55e);
}
.admin-shell .agency-stats-grid .stat-card-pro:nth-child(3) {
    background: linear-gradient(135deg, #ea580c, #f59e0b);
}
.admin-shell .agency-stats-grid .stat-card-pro::after {
    background: rgba(255, 255, 255, .14);
}
.admin-shell .agency-stats-grid .stat-card-pro span {
    color: rgba(255, 255, 255, .88);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.admin-shell .agency-stats-grid .stat-card-pro strong {
    margin-top: 7px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
}
.admin-shell .agencies-table {
    table-layout: fixed;
}
.admin-shell .agencies-table th {
    padding-inline: 8px;
    font-size: 11px;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.admin-shell .agencies-table th:nth-child(1),
.admin-shell .agencies-table td:nth-child(1) { width: 22%; }
.admin-shell .agencies-table th:nth-child(2),
.admin-shell .agencies-table td:nth-child(2) { width: 15%; }
.admin-shell .agencies-table th:nth-child(3),
.admin-shell .agencies-table td:nth-child(3) { width: 15%; }
.admin-shell .agencies-table th:nth-child(4),
.admin-shell .agencies-table td:nth-child(4) { width: 7%; }
.admin-shell .agencies-table th:nth-child(5),
.admin-shell .agencies-table td:nth-child(5),
.admin-shell .agencies-table th:nth-child(6),
.admin-shell .agencies-table td:nth-child(6) { width: 8%; }
.admin-shell .agencies-table th:nth-child(7),
.admin-shell .agencies-table td:nth-child(7) { width: 7%; }
.admin-shell .agencies-table th:nth-child(8),
.admin-shell .agencies-table td:nth-child(8) { width: 18%; }
.admin-shell .agencies-table .table-actions a,
.admin-shell .agencies-table .table-actions button {
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}
.admin-shell .agencies-table .table-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.admin-shell .agencies-table .table-actions form {
    display: contents;
}
.admin-shell .agencies-table .table-actions form button {
    width: 100%;
    color: #991b1b;
    background: #fee2e2;
}
.admin-shell .agencies-table .table-actions form button:hover {
    background: #fecaca;
}
.admin-shell .agencies-filter-toolbar {
    grid-template-columns: minmax(280px, 1fr) 230px auto;
    align-items: end;
    gap: 10px;
}
.admin-shell .agencies-filter-toolbar > a {
    grid-column: 3;
    justify-self: start;
    min-width: 145px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    color: #1d4ed8;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .admin-shell .agencies-filter-toolbar { grid-template-columns: 1fr; }
    .admin-shell .agencies-filter-toolbar > a {
        grid-column: auto;
        justify-self: stretch;
        justify-content: center;
    }
}
@media (max-width: 700px) {
    .admin-shell .message-toolbar-pro { grid-template-columns: 1fr; }
    .admin-shell .message-toolbar-pro > label:first-child { grid-column: auto; }
    .admin-shell .message-toolbar-pro .button,
    .admin-shell .message-toolbar-pro > a {
        width: 100%;
        justify-content: center;
    }
}