/**
 * RollMeter — világos UI, közös komponensek
 */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bg: #f1f5f4;
    --bg-mesh-1: rgba(204, 251, 241, 0.7);
    --bg-mesh-2: rgba(224, 242, 254, 0.55);
    --bg-mesh-3: rgba(237, 233, 254, 0.35);
    --bg-mesh-4: rgba(254, 243, 199, 0.3);
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #0f172a;
    --muted: #64748b;
    --accent: #0d9488;
    --accent-hover: #0f766e;
    --accent-soft: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.18);
    --warn: #d97706;
    --warn-soft: #fffbeb;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --ok-bg: #ecfdf5;
    --ok-border: #6ee7b7;
    --ok-text: #065f46;
    --err-bg: #fef2f2;
    --err-border: #fecaca;
    --err-text: #991b1b;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.1), 0 8px 20px rgba(15, 23, 42, 0.06);
    --header-h: 64px;
    --layout-max-width: 960px;
    --layout-side-pad: clamp(1rem, 4vw, 1.75rem);

    /* Szekció paletta */
    --c-perf: #0d9488;
    --c-perf-soft: #ccfbf1;
    --c-perf-glow: rgba(13, 148, 136, 0.22);
    --c-blue: #2563eb;
    --c-blue-soft: #dbeafe;
    --c-blue-glow: rgba(37, 99, 235, 0.18);
    --c-violet: #7c3aed;
    --c-violet-soft: #ede9fe;
    --c-violet-glow: rgba(124, 58, 237, 0.18);
    --c-amber: #d97706;
    --c-amber-soft: #fef3c7;
    --c-amber-glow: rgba(217, 119, 6, 0.18);
    --c-emerald: #059669;
    --c-emerald-soft: #d1fae5;
    --c-emerald-glow: rgba(5, 150, 105, 0.18);
    --c-sky: #0ea5e9;
    --c-sky-soft: #e0f2fe;
    --c-sky-glow: rgba(14, 165, 233, 0.18);
    --c-red: #dc2626;
    --c-red-soft: #fee2e2;

    /* Gradient tokenek */
    --grad-primary: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%);
    --grad-hero: linear-gradient(135deg, #0d9488, #0ea5e9, #6366f1, #7c3aed, #0ea5e9, #0d9488);

    /* Colored shadows */
    --shadow-colored-teal: 0 8px 24px rgba(13, 148, 136, 0.28);
    --shadow-colored-blue: 0 8px 24px rgba(37, 99, 235, 0.22);
}

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

html {
    scroll-behavior: smooth;
}

body.app-body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font);
    color: var(--text);
    line-height: 1.55;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 100% 80% at 0% -20%, var(--bg-mesh-1), transparent 50%),
        radial-gradient(ellipse 80% 60% at 100% 0%, var(--bg-mesh-2), transparent 45%),
        radial-gradient(ellipse 50% 50% at 80% 90%, var(--bg-mesh-3), transparent 45%),
        radial-gradient(ellipse 60% 50% at 20% 100%, var(--bg-mesh-4), transparent 50%);
    background-attachment: fixed;
}

body.app-body--auth {
    min-height: 100dvh;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.auth-page {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    min-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}

.auth-page__topbar {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.auth-modal-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-stack {
    width: min(460px, 100%);
}

.auth-stack .brand {
    margin-bottom: 1.25rem;
    justify-content: center;
}

.auth-stack .brand--quiet {
    pointer-events: none;
}

.auth-title {
    text-align: center;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 1rem;
    width: 100%;
}

/* Bot honeypot — rejtett mező, ember nem látja */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ——— Site header & menu ——— */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.site-header__inner {
    position: relative;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0.65rem var(--layout-side-pad);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
    color: var(--text);
    text-decoration: none;
    margin-left: 0;
}

.brand__mark {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--accent-soft), #fff);
    border: 1px solid rgba(13, 148, 136, 0.25);
    border-radius: 12px;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.brand__mark .bi {
    font-size: 1.15rem;
    color: var(--accent);
}

.brand__text {
    background: linear-gradient(120deg, #0f766e, #0d9488 40%, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (min-width: 861px) {
    .nav-burger {
        display: none !important;
    }

    .nav-backdrop {
        display: none !important;
    }

    .site-header__inner {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem 1.25rem;
    }

    .site-header__row1 {
        margin-right: 0;
        flex: 0 0 auto;
        width: auto;
        order: 0;
    }

    .site-header .main-nav,
    .site-header .main-nav--app,
    .site-header .main-nav--bar {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        width: auto;
        order: 0;
        padding: 0;
        margin: 0;
        border-top: none;
        max-height: none;
        overflow: visible;
        gap: 0.75rem 1rem;
    }

    .main-nav__links {
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem 0.25rem;
        min-width: 0;
        flex-direction: row;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    .main-nav__links .nav-link {
        white-space: nowrap;
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: var(--radius-sm);
        padding: 0.55rem 0.8rem;
        font-size: 0.9rem;
    }

    .main-nav__links .nav-link:hover {
        background: var(--surface-2);
    }

    .main-nav__links .nav-link.is-active {
        color: var(--accent);
        background: var(--accent-soft);
        box-shadow: inset 0 -2px 0 var(--accent);
    }

    .site-header__extras {
        flex: 0 0 auto;
        min-width: 0;
        margin-left: 0;
        width: auto;
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        border-top: none;
    }

    .site-header__extras-tools {
        flex-wrap: nowrap;
        gap: 0.35rem 0.5rem;
        flex-direction: row;
        width: auto;
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }

    .site-header__extras .nav-link--auth {
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 0.5rem 0.75rem;
        font-size: 0.88rem;
    }

    .site-header__extras .nav-link--auth.nav-link--cta {
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.22);
    }

    .site-header__extras .nav-link--auth.nav-link--cta:hover {
        background: #ccfbf1;
    }

    .user-menu__trigger {
        padding: 0.38rem 0.65rem;
    }
}

/* Mobile menu toggle — képernyőn kívül, ne takarjon kattintható elemet */
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
    left: -9999px;
    top: 0;
}

.site-header__row1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-right: auto;
    flex: 0 1 auto;
    min-width: 0;
}

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
}

.nav-burger span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-backdrop {
    display: none;
}

.nav-toggle:focus-visible ~ .site-header__row1 .nav-burger {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-toggle:checked ~ .site-header__row1 .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked ~ .site-header__row1 .nav-burger span:nth-child(2) {
    opacity: 0;
}

.nav-toggle:checked ~ .site-header__row1 .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
}

.main-nav--app,
.main-nav--bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.65rem 1rem;
}

.main-nav__links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    min-height: 44px;
    position: relative;
    z-index: 2;
}

/* Nem admin: harmadik „Admin” szélesség lefoglalása (üres), hogy ne ugráljon a sáv */
.nav-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: transparent;
    user-select: none;
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.nav-link__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.nav-link:hover .nav-link__ico {
    transform: scale(1.12);
}

.nav-link--perf .nav-link__ico { color: var(--c-perf); }
.nav-link--garage .nav-link__ico { color: var(--c-blue); }
.nav-link--rollers .nav-link__ico { color: var(--c-violet); }
.nav-link--serial .nav-link__ico { color: var(--c-amber); }
.nav-link--admin .nav-link__ico { color: var(--c-red); }
.nav-link--home .nav-link__ico { color: var(--c-sky); }

button.nav-link--auth {
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    line-height: 1.2;
    text-align: left;
}

.app-body--landing .site-header,
.app-body--auth .site-header {
    margin-bottom: 0.75rem;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface-2);
}

.nav-link.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* Per-szekció aktív és hover stílusok */
.nav-link--perf.is-active   { color: var(--c-perf);   background: var(--c-perf-soft);   box-shadow: inset 0 -2px 0 var(--c-perf); }
.nav-link--garage.is-active { color: var(--c-blue);   background: var(--c-blue-soft);   box-shadow: inset 0 -2px 0 var(--c-blue); }
.nav-link--rollers.is-active{ color: var(--c-violet); background: var(--c-violet-soft); box-shadow: inset 0 -2px 0 var(--c-violet); }
.nav-link--serial.is-active { color: var(--c-amber);  background: var(--c-amber-soft);  box-shadow: inset 0 -2px 0 var(--c-amber); }
.nav-link--admin.is-active  { color: var(--c-red);    background: var(--c-red-soft);    box-shadow: inset 0 -2px 0 var(--c-red); }
.nav-link--home.is-active   { color: var(--c-sky);    background: var(--c-sky-soft);    box-shadow: inset 0 -2px 0 var(--c-sky); }

.nav-link--perf:hover   { background: rgba(204, 251, 241, 0.6); color: var(--c-perf); }
.nav-link--garage:hover { background: rgba(219, 234, 254, 0.6); color: var(--c-blue); }
.nav-link--rollers:hover{ background: rgba(237, 233, 254, 0.6); color: var(--c-violet); }
.nav-link--serial:hover { background: rgba(254, 243, 199, 0.6); color: var(--c-amber); }
.nav-link--admin:hover  { background: rgba(254, 226, 226, 0.6); color: var(--c-red); }
.nav-link--home:hover   { background: rgba(224, 242, 254, 0.6); color: var(--c-sky); }

.nav-link--ghost {
    color: var(--muted);
    font-weight: 500;
}

.site-header__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    flex-shrink: 0;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: min(400px, 100%);
}

/* Roller váltó + fiók menü egy csoportban (asztalon jobbra zárva, mobilon egy sor) */
.site-header__extras-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.user-chip {
    font-size: 0.86rem;
    color: var(--muted);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Felhasználónév → lenyíló (Fiók, Kijelentkezés) */
.user-menu {
    position: relative;
    flex-shrink: 0;
}

.user-menu__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.user-menu__avatar--placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(13, 148, 136, 0.28);
}

.user-menu__trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.user-menu__trigger-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    max-width: min(200px, 26vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.user-menu__trigger::-webkit-details-marker {
    display: none;
}

.user-menu__trigger::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-top-color 0.15s ease;
}

.user-menu[open] .user-menu__trigger {
    border-color: var(--accent);
    color: var(--accent);
}

.user-menu[open] .user-menu__trigger::after {
    border-top-color: var(--accent);
    transform: rotate(180deg);
}

.user-menu__trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.user-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 200px;
    padding: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 200;
}

.user-menu__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.user-menu__link-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--accent);
}

.user-menu__link--logout .user-menu__link-ico {
    color: var(--muted);
}

.user-menu__link:hover {
    background: var(--surface-2);
}

.user-menu__link.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.2);
}

.user-menu__link.is-disabled {
    color: var(--muted);
    opacity: 0.72;
    cursor: not-allowed;
    background: transparent;
}

.user-menu__link--logout {
    color: var(--muted);
    font-weight: 500;
    margin-top: 0.15rem;
    border-top: 1px solid var(--border);
    padding-top: 0.55rem;
}

.roller-form {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.roller-form label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
}

.roller-form select {
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    max-width: min(220px, 55vw);
    cursor: pointer;
}

.roller-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.roller-form--header {
    flex-shrink: 0;
    align-items: center;
    padding: 0.2rem 0;
}

.roller-form--header label {
    color: var(--accent);
    font-weight: 700;
}

.ride-new-entry__roller-hint {
    margin: 0 0 1rem;
}

@media (max-width: 860px) {
    .site-header__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    .site-header__row1 {
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        margin-right: 0;
        flex: none;
        order: 1;
        z-index: 104;
        position: relative;
        background: inherit;
    }

    .brand {
        flex: 1;
        min-width: 0;
        margin-right: 0;
    }

    .nav-burger {
        display: flex;
        flex-shrink: 0;
    }

    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 101;
        background: rgba(15, 23, 42, 0.4);
        cursor: pointer;
    }

    .nav-toggle:checked ~ .nav-backdrop {
        display: block;
    }

    /* Nyitott menü: tömör fehér panel a homályos háttér felett */
    .site-header:has(.nav-toggle:checked) {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 110;
    }

    .site-header:has(.nav-toggle:checked) .site-header__row1 {
        background: #ffffff;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        order: 2;
        flex: none;
        justify-content: flex-start;
        padding: 0.35rem 0 0.65rem;
        border-top: 1px solid var(--border);
        gap: 0.5rem;
        max-height: min(78vh, calc(100dvh - 4.5rem));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 1;
    }

    .nav-toggle:checked ~ .main-nav {
        display: flex;
        position: relative;
        z-index: 103;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    }

    .site-header__extras {
        margin-left: 0;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border-top: 1px solid var(--border);
    }

    .main-nav__links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        min-height: 0;
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }

    .main-nav__links .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.72rem 0.85rem;
        border-radius: var(--radius-sm);
        font-size: 1rem;
    }

    .nav-slot {
        display: none;
    }

    .main-nav--app,
    .main-nav--bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0.5rem;
    }

    .site-header__extras .nav-link--auth {
        width: 100%;
        justify-content: flex-start;
        padding: 0.72rem 0.85rem;
        border-radius: var(--radius-sm);
        border: none;
        box-shadow: none;
        background: transparent;
        font-size: 1rem;
    }

    .site-header__extras .nav-link--auth.nav-link--cta {
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.2);
    }

    .user-chip {
        max-width: 100%;
    }

    .site-header__extras-tools {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.35rem;
        width: 100%;
        flex: none;
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }

    .site-header__extras-tools:only-child {
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }

    .user-menu {
        width: 100%;
    }

    .user-menu__trigger {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        border-radius: var(--radius-sm);
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
        box-shadow: none;
    }

    .user-menu__trigger-label {
        max-width: min(9rem, 42vw);
        font-size: 0.82rem;
    }

    .user-menu__trigger::after {
        margin-left: 0;
    }

    .user-menu__panel {
        left: 0;
        right: auto;
        width: min(100%, 15rem);
        min-width: 11rem;
    }

    .roller-form {
        width: auto;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .roller-form select {
        max-width: 100%;
        flex: 1;
        min-width: 0;
    }

    .roller-form--header {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

/* ——— Layout ——— */
.container {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: var(--layout-side-pad);
}

.container--narrow {
    max-width: 520px;
}

.main-content {
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow-md);
    padding: clamp(1rem, 3vw, 1.35rem);
    margin-top: 0.35rem;
    padding-bottom: 2.5rem;
}

.page-title {
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
    margin: 0 0 0.35rem;
}

.page-sub {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--muted);
}

.main-content a:not(.nav-link):not(.page-head__cta):not(.ride-roller-picker__link):not(.btn-del):not(.secondary):not(.primary):not(.brand) {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.main-content a:not(.nav-link):not(.page-head__cta):not(.ride-roller-picker__link):not(.btn-del):not(.secondary):not(.primary):not(.brand):hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Futás oldal: több roller esetén látható váltó (nem csak a fejlécben / mobil menüben) */
.ride-roller-switch {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.roller-form--ride-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    width: 100%;
    margin: 0;
}

.roller-form--ride-page label {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--accent);
}

.roller-form--ride-page select {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.25rem;
}

.page-head .page-title {
    margin-bottom: 0;
}

.page-head__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: var(--shadow-colored-teal);
    border: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

button.page-head__cta {
    font-family: inherit;
    cursor: pointer;
}

.page-head__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(13, 148, 136, 0.38);
    filter: brightness(1.06);
}

.page-head__cta:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-colored-teal);
}

.garage-new-roller {
    margin-top: 2rem;
    scroll-margin-top: 5.5rem;
    border: 1px solid rgba(13, 148, 136, 0.22);
    border-radius: var(--radius);
    background: rgba(13, 148, 136, 0.05);
    overflow: hidden;
}

.garage-new-roller__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.88rem 1.1rem;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--accent);
    user-select: none;
    transition: background 0.15s ease;
}

.garage-new-roller__summary::-webkit-details-marker {
    display: none;
}

.garage-new-roller__summary::marker {
    content: '';
}

.garage-new-roller__summary:hover {
    background: rgba(13, 148, 136, 0.08);
}

.garage-new-roller[open] > .garage-new-roller__summary {
    border-bottom: 1px solid rgba(13, 148, 136, 0.18);
    background: rgba(13, 148, 136, 0.08);
}

.garage-new-roller__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    opacity: 0.65;
    transition: transform 0.2s ease;
}

.garage-new-roller__chev::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--accent);
}

.garage-new-roller[open] .garage-new-roller__chev {
    transform: rotate(180deg);
}

.garage-new-roller__body.card {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: var(--shadow);
    border-top: 1px solid var(--border);
}

.garage-new-card {
    margin-top: 0;
}

.garage-new-roller-inline-link {
    color: var(--accent);
    font-weight: 600;
}

/* Futás: lenyíló „Új bejegyzés” (ugyanaz a minta, mint a garázs Új roller) */
.ride-new-entry.garage-new-roller {
    margin-top: 1.35rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 5.5rem;
}

.ride-new-entry .ride-new-entry__body.form-section.form-hero {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: var(--shadow);
}

.section-heading--card {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hint--stat-note {
    font-size: 0.82rem;
    margin: 0 0 0.85rem;
    line-height: 1.45;
}

.fuel-manual-label--stats {
    flex: 1 1 100%;
    margin-top: 0.35rem;
}

.fuel-manual-label--maintenance {
    flex: 1 1 100%;
    margin-top: 0.2rem;
}

.ride-maintenance-fields {
    margin: 0.7rem 0 0.25rem;
    padding: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: rgba(13, 148, 136, 0.05);
}

.field--wide {
    flex: 2 1 280px;
}

#maintenance_notes {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #cbd5e1;
}

.entry-maintenance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
    font-size: 0.8rem;
}

.entry-maintenance strong {
    color: var(--accent-hover);
    font-size: 0.82rem;
}

.row--align-center {
    flex-wrap: wrap;
}

.row-excluded-stats td {
    opacity: 0.72;
}

.th-entry-actions,
.td-entry-actions {
    width: 2.75rem;
    text-align: center;
    vertical-align: middle;
}

.btn-edit-entry {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.28rem 0.42rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-edit-entry:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
}

.modal--entry-edit {
    width: min(1040px, 96vw);
    max-height: 90vh;
    overflow: auto;
}

.modal--entry-edit .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.modal--entry-edit .field {
    min-width: 0;
}

.modal--entry-edit .field--wide {
    grid-column: span 2;
}

.modal--entry-edit #entry-edit-maintenance-fields {
    margin-top: 0.4rem;
}

@media (max-width: 900px) {
    .modal--entry-edit {
        width: min(760px, 96vw);
    }

    .modal--entry-edit .row {
        grid-template-columns: 1fr 1fr;
    }

    .modal--entry-edit .field--wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .modal--entry-edit .row {
        grid-template-columns: 1fr;
    }

    .modal--entry-edit .field--wide {
        grid-column: auto;
    }
}

.entry-edit-sub {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0 0 0.85rem;
}

.entry-edit-block {
    margin-bottom: 0.25rem;
}

.entry-edit-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    margin: 0 0 0.5rem;
}

.entry-edit-label input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.entry-edit-hint {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0 0 0.85rem;
}

.entry-edit-block--danger {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.roller-tile__active-pin {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 3;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0d9488, #0f766e);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.roller-tile--active {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.45), var(--shadow);
    border-top: 3px solid var(--c-perf);
}

.roller-tile__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-top: 0.35rem;
}

.roller-tile__toolbar .roller-tile__details {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex: 0 0 auto;
    align-self: center;
}

.roller-tile__toolbar .roller-tile__delete-form--icon {
    margin-top: 0;
    align-self: center;
    flex: 0 0 auto;
}

.roller-tile__toolbar .roller-tile__details[open] {
    flex: 1 1 100%;
}

.roller-tile__toolbar .roller-tile__details .roller-tile__summary-btn {
    color: #0f766e;
    font-size: 1.15rem;
}

.roller-share-box {
    margin-top: 0.6rem;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.roller-share-box__title {
    font-weight: 700;
    margin-bottom: 0;
}

.roller-share-box__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.roller-share-box__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.roller-share-box__views {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f766e;
}

.roller-share-box__row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.roller-share-box__input {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
}

.roller-share-box__disable {
    margin-top: 0.45rem;
    display: flex;
    justify-content: center;
}

.roller-share-box__opts {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    align-items: center;
    border-top: 1px dashed var(--border);
    padding-top: 0.55rem;
}

.roller-share-box__price-label {
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}

.roller-share-disable-btn {
    min-width: 160px;
}

.roller-share-box__price-input {
    width: 170px;
    max-width: 100%;
}

.roller-share-box__price-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.roller-share-btn {
    min-width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    line-height: 1;
}

.roller-share-generate {
    white-space: nowrap;
}

.roller-share-box form {
    margin: 0;
}

.roller-share-box--compact {
    display: grid;
    gap: 0.65rem;
}

.roller-public-settings-btn {
    width: 100%;
}

.modal-backdrop.modal-backdrop--public-settings {
    align-items: flex-start;
    overflow-y: auto;
    padding: 1rem;
}

.modal.modal--public-settings {
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto 0;
}

.public-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.public-settings-head .hint {
    margin: 0.25rem 0 0;
}

.public-settings-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
}

.public-settings-status.is-live {
    border-color: rgba(13, 148, 136, 0.3);
    background: var(--accent-soft);
    color: #0f766e;
}

.public-settings-status.is-draft {
    border-color: rgba(217, 119, 6, 0.3);
    background: var(--warn-soft);
    color: #92400e;
}

.roller-share-modal-form {
    display: grid;
    gap: 0.9rem;
}

.public-settings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    padding: 0.95rem;
}

.public-settings-section--link {
    margin-bottom: 0.9rem;
    border-color: rgba(13, 148, 136, 0.24);
    background: linear-gradient(170deg, rgba(236, 253, 245, 0.75), #fff);
}

.public-settings-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.public-settings-section__head h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.public-settings-section__head p {
    margin: 0.18rem 0 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.public-settings-views {
    flex: 0 0 auto;
    border: 1px solid rgba(13, 148, 136, 0.24);
    border-radius: 999px;
    background: #fff;
    color: #0f766e;
    padding: 0.28rem 0.58rem;
    font-weight: 800;
    font-size: 0.82rem;
}

.public-settings-link-row {
    align-items: stretch;
}

.public-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.public-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.public-toggle:hover {
    border-color: rgba(13, 148, 136, 0.38);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.public-toggle input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.12rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.public-toggle span {
    display: grid;
    gap: 0.08rem;
}

.public-toggle strong {
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--text);
}

.public-toggle small {
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--muted);
}

.public-toggle--wide {
    min-height: 64px;
}

.public-settings-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.75fr);
    gap: 0.75rem;
    align-items: stretch;
}

.public-price-field {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.public-price-field .roller-share-box__price-input {
    width: 100%;
}

.modal-actions--wrap {
    flex-wrap: wrap;
    margin-top: 0.25rem;
    justify-content: flex-end;
}

.roller-share-modal-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.roller-share-modal-secondary__label {
    flex: 1 1 100%;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.roller-share-modal-secondary form {
    margin: 0;
}

@media (max-width: 680px) {
    .modal-backdrop.modal-backdrop--public-settings {
        padding: 0.5rem;
    }

    .modal.modal--public-settings {
        width: min(100%, calc(100vw - 1rem));
        max-height: calc(100dvh - 1rem);
    }

    .public-settings-head,
    .public-settings-section__head {
        display: grid;
    }

    .public-field-grid,
    .public-settings-options {
        grid-template-columns: 1fr;
    }

    .public-settings-link-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .public-settings-link-row .roller-share-box__input,
    .public-settings-link-row .roller-share-btn {
        width: 100%;
    }
}

.roller-tile__summary-btn {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: rgba(13, 148, 136, 0.12);
    border: 1px solid rgba(13, 148, 136, 0.35);
    font-size: 1.15rem;
    line-height: 1;
}

.roller-tile__summary-btn::-webkit-details-marker {
    display: none;
}

.roller-tile__summary-btn:hover {
    background: rgba(13, 148, 136, 0.2);
}

.roller-tile__glyph {
    font-weight: 700;
    font-style: normal;
}

.roller-tile__glyph--edit {
    color: #0f766e;
}

.roller-tile__glyph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.45);
    background: rgba(254, 226, 226, 0.65);
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.roller-tile__glyph-btn:hover {
    background: rgba(254, 202, 202, 0.9);
}

.roller-tile__glyph--trash {
    font-size: 1.1rem;
    line-height: 1;
    filter: none;
}

/* ——— Cards & stats ——— */
.cards {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
    margin-top: 0.35rem;
}

@media (min-width: 520px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.05rem 1.15rem;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.card.centered {
    text-align: center;
}

.card.full {
    grid-column: 1 / -1;
}

.card span.label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.card strong.num {
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Stat kártya modifier osztályok */
.card--km    { border-top: 3px solid var(--c-blue); }
.card--fuel  { border-top: 3px solid var(--c-amber); }
.card--maint { border-top: 3px solid var(--c-violet); }
.card--goal  { border-top: 3px solid var(--c-emerald); }
.card--stats { border-top: 3px solid var(--c-sky); }

.card--km .num,
.card--fuel .num,
.card--maint .num {
    font-size: 1.65rem;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Icon badge a stat kártyákon */
.card__icon-badge {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin: 0 auto 0.65rem;
    flex-shrink: 0;
}

.card__icon-badge--km    { background: var(--c-blue-soft);   color: var(--c-blue);   box-shadow: 0 4px 12px var(--c-blue-glow); }
.card__icon-badge--fuel  { background: var(--c-amber-soft);  color: var(--c-amber);  box-shadow: 0 4px 12px var(--c-amber-glow); }
.card__icon-badge--maint { background: var(--c-violet-soft); color: var(--c-violet); box-shadow: 0 4px 12px var(--c-violet-glow); }

/* Teljes szélességű kártyákon a badge dekoratív vízjel a jobb sarokban */
.card.full .card__icon-badge {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    margin: 0;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    font-size: 2.5rem;
    opacity: 0.1;
    pointer-events: none;
}

.card--goal  { position: relative; }
.card--stats { position: relative; }

.card__icon-badge--goal  { color: var(--c-emerald); }
.card__icon-badge--stats { color: var(--c-sky); }

.stat-grid {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

@media (min-width: 520px) {
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.7rem;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-top {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
}

.stat-top .bi { font-size: 1rem; }

/* Stat-box color variánsok */
.stat-box--receipts { border-top: 2px solid var(--c-perf); }
.stat-box--receipts .stat-top,
.stat-box--receipts .bi { color: var(--c-perf); }

.stat-box--avg { border-top: 2px solid var(--c-sky); }
.stat-box--avg .stat-top,
.stat-box--avg .bi { color: var(--c-sky); }

.stat-box--max { border-top: 2px solid var(--c-amber); }
.stat-box--max .stat-top,
.stat-box--max .bi { color: var(--c-amber); }

.stat-box--min { border-top: 2px solid var(--c-violet); }
.stat-box--min .stat-top,
.stat-box--min .bi { color: var(--c-violet); }

.stat-value {
    margin-top: 0.35rem;
    font-size: 1.12rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.stat-sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* Progress */
.progress-wrap {
    margin-top: 0.75rem;
}

@keyframes progress-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.progress-bar {
    position: relative;
    height: 14px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.45s ease, left 0.45s ease;
    border-radius: 999px;
    pointer-events: none;
}

.progress-fill.roller {
    background: linear-gradient(90deg, #0f766e, #14b8a6, #5eead4, #14b8a6, #0d9488);
    background-size: 200% auto;
    animation: progress-shimmer 2.5s linear infinite;
}

.progress-fill.helmet {
    background: linear-gradient(90deg, #ea580c, #fb923c, #fbbf24, #fb923c, #ea580c);
    background-size: 200% auto;
    animation: progress-shimmer 2.8s linear infinite;
    border-radius: 0 999px 999px 0;
}

.progress-fill.gloves {
    background: linear-gradient(90deg, #2563eb, #60a5fa, #38bdf8, #60a5fa, #2563eb);
    background-size: 200% auto;
    animation: progress-shimmer 3.1s linear infinite;
    border-radius: 0 999px 999px 0;
}

@media (prefers-reduced-motion: reduce) {
    .progress-fill.roller,
    .progress-fill.helmet,
    .progress-fill.gloves { animation: none; }
}

.celebrate {
    color: var(--warn);
    font-weight: 700;
}

/* Form hero */
.form-section.form-hero {
    margin-bottom: 1.5rem;
    border-radius: calc(var(--radius) + 2px);
    padding: 1.45rem 1.35rem;
    background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 100%);
    border: 1px solid rgba(13, 148, 136, 0.22);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    position: relative;
    overflow: hidden;
}

.form-section.form-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0f766e, #14b8a6, #22d3ee);
}

.form-hero-title {
    margin: 0 0 1.1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Aktív roller az „Új bejegyzés” blokkban (fejléc helyett) */
.ride-roller-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    background: rgba(13, 148, 136, 0.07);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: var(--radius);
}

.ride-roller-picker__thumb {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--surface-2), #e2e8f0);
    border: 1px solid rgba(13, 148, 136, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.ride-roller-picker__thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.ride-roller-picker__ph {
    font-size: 2.25rem;
    line-height: 1;
    opacity: 0.55;
}

.ride-roller-picker__main {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: center;
}

.ride-roller-picker__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.25;
}

.ride-roller-picker__single-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.ride-roller-picker__link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin-top: 0.2rem;
    align-self: flex-start;
}

.ride-roller-picker__link:hover {
    text-decoration: underline;
}

.roller-form--hero {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    max-width: none !important;
}

.roller-form--hero label {
    margin-bottom: 0.2rem;
}

.roller-form--hero select {
    max-width: 100% !important;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
}

@media (min-width: 520px) {
    .ride-roller-picker {
        align-items: center;
    }

    .ride-roller-picker__thumb {
        width: 100px;
        height: 100px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.row--align-center {
    align-items: center;
}

.field {
    flex: 1 1 140px;
    min-width: 0;
}

label {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.form-hero label {
    color: #475569;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.62rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.is-invalid {
    border-color: var(--danger);
    background: var(--danger-soft);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.field-error {
    margin: 0.28rem 0 0.65rem;
    color: var(--danger);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.97rem;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
    min-height: 76px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.roller-condition-select {
    width: 100%;
    padding: 0.62rem 2.2rem 0.62rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, transparent 50%, #0f766e 50%),
        linear-gradient(135deg, #0f766e 50%, transparent 50%),
        linear-gradient(180deg, rgba(13, 148, 136, 0.12), rgba(59, 130, 246, 0.08));
    background-position:
        calc(100% - 17px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px),
        0 0;
    background-size:
        6px 6px,
        6px 6px,
        100% 100%;
    background-repeat: no-repeat;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.roller-condition-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

input[readonly] {
    background: var(--surface-2);
    color: var(--muted);
}

.fuel-manual-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.fuel-manual-label input {
    width: auto;
    cursor: pointer;
    accent-color: var(--accent);
}

button[type="submit"]:not(.btn-del):not(.modal-btn):not(.danger):not(.secondary):not(.roller-tile__glyph-btn) {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.82rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #0ea5e9 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.35);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

button[type="submit"]:not(.btn-del):not(.modal-btn):not(.danger):not(.secondary):not(.roller-tile__glyph-btn):hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 28px rgba(13, 148, 136, 0.42);
}

button[type="submit"]:not(.btn-del):not(.modal-btn):not(.danger):not(.secondary):not(.roller-tile__glyph-btn):active {
    transform: translateY(0px);
}

.hint {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.55rem;
}

.section-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.65rem 0 0.55rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.section-heading .bi {
    font-size: 1.1rem;
    vertical-align: -0.12em;
    flex-shrink: 0;
}

.section-heading--chart .bi { color: var(--c-perf); }
.section-heading--table .bi { color: var(--c-blue); }

.celebrate--spaced {
    margin: 0.5rem 0 0;
}

.num--block-top {
    display: block;
    margin-top: 0.35rem;
}

.hint--tight-top {
    margin-top: 0.4rem;
}

/* Chart */
.chart-section {
    margin-top: 1.75rem;
}

.chart-wrap {
    position: relative;
    height: min(320px, 55vh);
    width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--border);
    border-top: 3px solid var(--c-perf);
    border-radius: var(--radius);
    padding: 0.5rem 0.35rem 0.35rem;
    box-shadow: var(--shadow-md);
}

.chart-wrap canvas {
    max-height: 100%;
}

/* Table */
.table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

th,
td {
    padding: 0.55rem 0.65rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

th:last-child,
td:last-child {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    width: 1%;
    white-space: nowrap;
}

table th:nth-child(4),
table td:nth-child(4),
table th:nth-child(5),
table td:nth-child(5) {
    white-space: nowrap;
}

@media (max-width: 520px) {
    table {
        font-size: 0.8rem;
    }

    th,
    td {
        padding: 0.35rem 0.28rem;
    }
}

th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--border);
}

th .bi {
    font-size: 0.88rem;
    vertical-align: -0.1em;
    margin-right: 0.2rem;
    opacity: 0.75;
}

tr:last-child td {
    border-bottom: none;
}

tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.85);
}

tr:hover td {
    background: rgba(13, 148, 136, 0.03) !important;
}

.num {
    font-variant-numeric: tabular-nums;
}

.btn-del {
    width: auto !important;
    height: auto !important;
    padding: 0.35rem 0.45rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--muted) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    cursor: pointer;
    min-width: 0;
    min-height: 0;
}

.btn-del:hover {
    color: var(--danger) !important;
    background: var(--danger-soft) !important;
}

tr.row-baseline td {
    color: var(--muted);
    background: var(--accent-soft) !important;
}

.tag {
    font-size: 0.82rem;
    font-weight: 600;
}

/* Alerts */
.alert {
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.85rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

.alert.err {
    background: var(--err-bg);
    color: var(--err-text);
    border-color: var(--err-border);
}

.alert.ok {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-border);
}

.alert.flash-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: min(420px, calc(100vw - 2rem));
    z-index: 10060;
    box-shadow: var(--shadow-lg);
    margin: 0;
    animation: flash-toast-in 0.2s ease-out, flash-toast-out 0.35s ease-in 4.6s forwards;
}

@keyframes flash-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash-toast-out {
    to {
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
    }
}

@media (max-width: 640px) {
    .alert.flash-toast {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
    }
}

/* Footer */
.site-footer {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.site-footer a,
.landing-footer a {
    color: var(--accent-hover);
    text-decoration: none;
    font-weight: 600;
}

.main-content .site-footer a {
    color: var(--accent-hover);
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover,
.landing-footer a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(15, 118, 110, 0.45);
}

.main-content .site-footer a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(15, 118, 110, 0.45);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    display: flex;
}

.modal {
    width: min(420px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--c-perf);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow-lg);
    padding: 1.15rem 1.2rem;
    position: relative;
}

/* A sima .modal szabály után kell felülírni, különben keskeny marad. */
.modal.modal--entry-edit {
    width: min(1240px, 95vw);
    max-height: 92vh;
    overflow: auto;
}

.modal.modal--new-roller {
    width: min(760px, 94vw);
    max-height: 92vh;
    overflow: auto;
}

.modal.modal--new-roller .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.modal.modal--new-roller .field--wide {
    grid-column: span 2;
}

.modal.modal--entry-edit .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.modal.modal--entry-edit .field--wide {
    grid-column: span 2;
}

@media (max-width: 980px) {
    .modal.modal--entry-edit {
        width: min(860px, 96vw);
    }

    .modal.modal--entry-edit .row {
        grid-template-columns: 1fr 1fr;
    }

    .modal.modal--entry-edit .field--wide {
        grid-column: span 2;
    }

    .modal.modal--new-roller {
        width: min(700px, 96vw);
    }
}

@media (max-width: 680px) {
    .modal.modal--entry-edit .row {
        grid-template-columns: 1fr;
    }

    .modal.modal--entry-edit .field--wide {
        grid-column: auto;
    }

    .modal.modal--new-roller .row {
        grid-template-columns: 1fr;
    }

    .modal.modal--new-roller .field--wide {
        grid-column: auto;
    }
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.45rem;
    font-size: 1.05rem;
}


.modal-body {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 1rem;
}

.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.modal-btn {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.92rem;
    transition: background 0.15s ease;
}

.modal-btn:hover {
    background: #e2e8f0;
}

.modal-btn.danger {
    border-color: #fecaca;
    background: var(--danger-soft);
    color: var(--danger);
}

.modal-close-x {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal-close-x:hover {
    background: #e2e8f0;
    color: var(--text);
}

.auth-landing-modal .modal-actions {
    grid-template-columns: 1fr;
}

/* Auth pages */
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: calc(var(--radius) + 12px);
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.75);
    z-index: -1;
    backdrop-filter: blur(4px);
}

.auth-card label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.auth-links {
    margin-top: 1.1rem;
    font-size: 0.92rem;
    color: var(--muted);
    text-align: center;
}

.auth-links--compact {
    margin-top: 0.65rem;
    font-size: 0.84rem;
}

.auth-links a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-link-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.auth-links a:hover,
.auth-link-button:hover {
    text-decoration: underline;
}

.btn-oauth {
    width: 100%;
    margin-top: 0.45rem;
    padding: 0.62rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    cursor: not-allowed;
    font-family: inherit;
    font-size: 0.9rem;
}

.roller-share-open-btn {
    text-decoration: none;
}

.oauth-row {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.oauth-row p {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0 0 0.45rem;
}

/* Garage / secondary buttons */
button.primary,
button[type="submit"].primary {
    width: auto;
    display: inline-block;
    padding: 0.65rem 1.15rem;
    margin-top: 0.35rem;
}

button.secondary {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    box-shadow: var(--shadow);
    width: auto;
    display: inline-block;
    padding: 0.55rem 0.95rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
}

button.secondary:hover {
    background: var(--surface-2);
}

button.danger {
    border: 1px solid #fecaca !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    box-shadow: none !important;
    width: auto;
    display: inline-block;
    padding: 0.55rem 1rem;
    margin-top: 0.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.garage-card h2,
.card > h2:first-of-type {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
}

.garage-card {
    margin-bottom: 1rem;
}

.roller-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.65rem;
}

.roller-title {
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.muted {
    color: var(--muted);
    font-size: 0.86rem;
}

details summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
}

details summary:hover {
    color: var(--accent-hover);
}

/* Inner pages simple nav (fallback) */
.simple-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.simple-nav a {
    color: var(--accent);
    text-decoration: none;
}

.simple-nav a:hover {
    text-decoration: underline;
}

.simple-nav strong {
    color: var(--text);
}

/* Profil — fiók + roller csempék */
.profile-section {
    margin-bottom: 2rem;
}

.profile-account-card {
    max-width: 520px;
    margin-inline: auto;
}

.profile-avatar-card {
    max-width: 560px;
    margin-inline: auto;
}

.profile-avatar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.15rem 1.35rem;
}

.profile-avatar-preview__img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(13, 148, 136, 0.28);
    display: block;
}

.profile-avatar-preview__ph {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.35rem;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-soft);
    border: 3px solid rgba(13, 148, 136, 0.22);
}

.profile-avatar-actions {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.profile-avatar-upload__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
}

.profile-avatar-upload__file {
    font-size: 0.88rem;
    max-width: 100%;
}

.profile-avatar-upload__btn {
    margin-top: 0.2rem;
}

.profile-avatar-hint {
    margin: 1rem 0 0 !important;
}

.profile-section + .profile-section {
    margin-top: 2rem;
}

.section-heading--first {
    margin-top: 0;
}

.profile-section .hint a {
    color: var(--accent);
    font-weight: 600;
}

@media (max-width: 720px) {
    .profile-section {
        text-align: center;
    }

    .profile-avatar-row {
        justify-content: center;
        align-items: center;
    }

    .profile-avatar-actions {
        align-items: center;
    }

    .profile-avatar-upload {
        align-items: center;
    }

    .profile-account-card form {
        text-align: center;
    }

    .main-content .page-sub,
    .main-content .hint,
    .main-content .muted {
        text-align: center;
    }
}

.roller-tiles {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .roller-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .roller-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

.roller-tile {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.roller-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}


.roller-tile__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(145deg, var(--surface-2), #e2e8f0);
    border-bottom: 1px solid var(--border);
}

.roller-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.roller-tile__visual--slider {
    overflow: hidden;
}

.roller-tile__visual--slider .roller-tile__img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.roller-tile__visual--slider .roller-tile__img.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.roller-tile__placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.roller-tile__placeholder-icon {
    font-size: 2.25rem;
    opacity: 0.65;
}

.roller-tile__body {
    padding: 1rem 1.05rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.roller-tile__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.roller-tile__meta {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
}

.roller-tile__meta li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.roller-tile__k {
    min-width: 4.5rem;
    font-weight: 700;
    color: #475569;
}

.roller-tile__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.roller-tile__file-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
}

.roller-tile__file {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 0.8rem;
}

.roller-tile__photo-admin {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.roller-tile__photo-admin__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 0.35rem;
}

.roller-tile__photo-hint {
    margin: 0 0 0.75rem !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
}

.roller-tile__photo-meta {
    margin: -0.15rem 0 0.7rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.roller-tile__photo-meta strong {
    color: var(--text);
}

.roller-tile__photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.roller-tile__details .roller-tile__upload {
    display: flex;
    margin: 0;
    flex: 1 1 220px;
    align-items: center;
}

.roller-tile__pick-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    box-shadow: var(--shadow);
    margin: 0;
    text-align: center;
}

.roller-tile__pick-label:hover {
    background: var(--surface-2);
    border-color: rgba(13, 148, 136, 0.4);
    color: var(--accent);
}

.roller-tile__photo-upload-note {
    margin: 0.6rem 0 0 !important;
    font-size: 0.78rem !important;
}

.roller-flag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.roller-flag--stolen {
    color: #991b1b;
    background: rgba(254, 226, 226, 0.95);
    border: 1px solid rgba(220, 38, 38, 0.45);
}

.roller-tile__remove-img {
    margin: 0;
}

.roller-tile__btn-remove-img {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem;
    padding: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1;
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.45);
    background: rgba(254, 226, 226, 0.7) !important;
    cursor: pointer;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #991b1b !important;
}

.roller-tile__btn-remove-img:hover {
    background: rgba(254, 202, 202, 0.95) !important;
}

.roller-gallery-grid {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.5rem;
}

.roller-gallery-item {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    aspect-ratio: 1 / 1;
}

.roller-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.roller-gallery-item__remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    margin: 0;
}

.new-roller-photo-hint {
    margin-top: 0.4rem !important;
}

.roller-tile__upload button[type="submit"],
.roller-tile__remove button[type="submit"],
.roller-tile__btn-upload {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.75rem !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    box-shadow: var(--shadow) !important;
}

.roller-tile__remove {
    margin: 0;
}

.roller-tile__btn-remove {
    border: 1px solid var(--err-border) !important;
    background: var(--err-bg) !important;
    color: var(--err-text) !important;
}

/* Garázs: nagyobb csempék, futott km */
.roller-tiles--garage {
    gap: 1.35rem;
}

@media (min-width: 560px) {
    .roller-tiles--garage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .roller-tiles--garage {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

/* Álló / fekvő kép: teljes kép látszik, nem vágjuk le (contain) */
.roller-tile--garage .roller-tile__visual {
    aspect-ratio: unset;
    min-height: 200px;
    height: clamp(200px, 44vw, 268px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem;
    box-sizing: border-box;
    background: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 52%, #f8fafc 100%);
}

.roller-tile--garage .roller-tile__img {
    object-fit: contain;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.roller-tile--garage .roller-tile__visual--slider .roller-tile__img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.roller-tile--garage .roller-tile__title {
    font-size: 1.22rem;
}

.roller-tile--garage .roller-tile__body {
    padding: 1.15rem 1.2rem 1.2rem;
}

.roller-tile--garage .roller-tile__meta {
    font-size: 0.88rem;
    display: grid;
    gap: 0.32rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.roller-tile--garage .roller-tile__meta li {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.25fr);
    gap: 0.75rem;
    align-items: baseline;
}

.roller-tile--garage .roller-tile__k {
    min-width: 0;
    color: #334155;
}

.roller-tile--garage .roller-tile__v {
    min-width: 0;
    text-align: right;
    color: #475569;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.roller-tile--garage .roller-tile__meta-km .roller-tile__v {
    color: var(--accent);
}

.roller-tile__meta-km {
    align-items: baseline;
}

.roller-public-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.25fr);
    gap: 1.15rem;
    align-items: start;
    border: 1px solid rgba(13, 148, 136, 0.18);
    box-shadow: var(--shadow-md);
}

.roller-public-card__media {
    border-radius: calc(var(--radius-sm) + 4px);
    overflow: hidden;
    background: linear-gradient(160deg, #f1f5f9, #e0f2fe);
    border: 1px solid var(--border);
    min-height: 200px;
    aspect-ratio: 4 / 5;
}

.roller-public-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.roller-public-gallery {
    position: relative;
    min-height: 220px;
    height: 100%;
    overflow: hidden;
}

.roller-public-gallery__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.roller-public-gallery__img.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.roller-public-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(17, 24, 39, 0.45);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.roller-public-gallery__nav--prev {
    left: 0.45rem;
}

.roller-public-gallery__nav--next {
    right: 0.45rem;
}

.roller-public-card__ph {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 3rem;
    color: var(--muted);
}

.roller-public-card__body h2 {
    margin: 0 0 0.7rem;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    letter-spacing: -0.04em;
}

.roller-public-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.52rem;
}

.roller-public-card__meta li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.55rem 0.65rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.98));
}

.roller-public-card__meta li span {
    color: var(--muted);
}

.roller-public-card__meta li strong {
    text-align: right;
}

.roller-public-note {
    margin-top: 0.8rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(13, 148, 136, 0.18);
    background: linear-gradient(170deg, rgba(236, 253, 245, 0.65), #fff);
    color: #334155;
    line-height: 1.55;
}

.roller-public-sale {
    margin-top: 0.95rem;
    text-align: center;
    border: 1px solid rgba(13, 148, 136, 0.35);
    background: linear-gradient(170deg, rgba(13, 148, 136, 0.1), rgba(59, 130, 246, 0.08));
}

.roller-public-sale__label {
    font-size: 0.85rem;
    color: #0f766e;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.roller-public-sale__price {
    margin-top: 0.2rem;
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.roller-public-stolen {
    margin-top: 0.95rem;
    text-align: center;
    border: 1px solid rgba(220, 38, 38, 0.45);
    background: linear-gradient(170deg, rgba(254, 226, 226, 0.88), rgba(254, 242, 242, 0.98));
}

.roller-public-stolen__label {
    font-size: 0.95rem;
    color: #991b1b;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.roller-public-stolen__text {
    margin-top: 0.3rem;
    color: #7f1d1d;
    font-weight: 600;
}

.public-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.38rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    vertical-align: middle;
}

.public-ico--year { background: #dbeafe; }
.public-ico--sn { background: #ede9fe; }
.public-ico--buy { background: #fee2e2; }
.public-ico--baseline { background: #e0f2fe; }
.public-ico--odo { background: #dcfce7; }
.public-ico--total { background: #fef3c7; }
.public-ico--entries { background: #fce7f3; }
.public-ico--service { background: #ffedd5; }
.public-ico--cost { background: #d1fae5; }
.public-ico--last { background: #e2e8f0; }

.is-blurred-text {
    filter: blur(5px);
    user-select: none;
}

@media (max-width: 760px) {
    .roller-public-card {
        grid-template-columns: 1fr;
    }
}

.roller-tile__km-val {
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
    .roller-tile--garage .roller-tile__meta li {
        grid-template-columns: 1fr;
        gap: 0.05rem;
    }

    .roller-tile--garage .roller-tile__v {
        text-align: left;
    }
}

.roller-tile__select {
    margin: 0 0 0.35rem;
}

.roller-tile__select-btn {
    width: 100%;
}

.roller-tile__active-note {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

.roller-tile__active-note a {
    color: var(--accent);
    font-weight: 600;
}

.roller-tile__badge--inline {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(13, 148, 136, 0.25);
}

.roller-tile__details {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
}

.roller-tile__details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--accent);
    list-style: none;
}

.roller-tile__details summary::-webkit-details-marker {
    display: none;
}

.roller-tile__edit-form {
    margin-top: 0.75rem;
}

.roller-tile__delete-form {
    margin-top: 0.75rem;
}

/* ——— Kezdőoldal (vendég) ——— */
.app-body--landing {
    min-height: 100dvh;
}

.landing-shell {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: clamp(0.75rem, 3vw, 1.25rem) var(--layout-side-pad) 2.5rem;
}

.container--landing {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.landing-flash {
    margin: 0 0 1rem;
}

.landing-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.landing-topbar .brand {
    margin-right: 0;
    margin-left: 0;
    order: 0;
    flex: 0 0 auto;
}

.landing-topbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-left: auto;
}

.landing-topbar__actions .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.landing-topbar__actions .nav-link:hover {
    background: var(--surface-2);
    border-color: rgba(13, 148, 136, 0.35);
    color: var(--accent);
}

.landing-topbar__actions .nav-link--cta {
    color: var(--text) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow);
}

.landing-topbar__actions .nav-link--cta:hover {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
}

.nav-link--cta {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.25);
}

.nav-link--cta:hover {
    background: #ccfbf1 !important;
    color: var(--accent-hover) !important;
}

.nav-link--btn {
    font: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    line-height: 1.2;
    background: transparent;
    color: var(--muted);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
}

.landing-topbar__actions .nav-link--btn:not(.nav-link--cta):hover {
    color: var(--text);
    background: var(--surface-2);
}

@keyframes hero-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.landing-hero {
    position: relative;
    min-height: min(52vh, 440px);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
    background: var(--grad-hero);
    background-size: 300% 300%;
    animation: hero-gradient-shift 9s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero { animation: none; }
}

.landing-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-hero__overlay {
    position: relative;
    z-index: 1;
    min-height: min(52vh, 440px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
}

.landing-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.landing-hero__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.55rem, 1.1rem + 2.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45), 0 0 60px rgba(13, 148, 136, 0.35);
}

.landing-hero__lead {
    margin: 0;
    max-width: 36rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(248, 250, 252, 0.95);
}

.landing-tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 520px) {
    .landing-tiles {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
    }
}

.landing-tile {
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.landing-tile--primary {
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 55%);
    border-color: rgba(13, 148, 136, 0.35);
    border-top: 3px solid var(--c-perf);
}

.landing-tile--primary:hover {
    box-shadow: var(--shadow-colored-teal);
}

.landing-tile--form {
    padding-bottom: 1.25rem;
}

.landing-tile__icon {
    font-size: 1.5rem;
    line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--c-perf-soft);
    color: var(--c-perf);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.landing-tile__icon .bi {
    font-size: 1.25rem;
}

.landing-tile__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.landing-tile__title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.landing-tile__title-row .landing-tile__title {
    margin: 0;
}

.landing-tile__text {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.5;
}

.landing-tile .landing-tile__text:last-of-type {
    margin-bottom: 0.35rem;
}

.landing-tile__cta {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent);
}

.landing-tile__demo-form {
    margin: 0.45rem 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.landing-tile__demo-btn {
    width: auto;
    min-width: 220px;
}

.landing-login-form {
    width: 100%;
    margin-top: 0.35rem;
}

.auth-layout-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 0.75rem;
}

.auth-layout-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    padding: 0.8rem 0.85rem;
}

.auth-layout-tile--demo {
    background: linear-gradient(170deg, rgba(236, 253, 245, 0.75), rgba(240, 249, 255, 0.82));
}

.auth-layout-tile__title {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
}

.auth-layout-tile__text {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.55;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
}

.auth-layout-tile__demo-btn {
    width: 100%;
    margin-top: 0.25rem;
}

.landing-login-form label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0.65rem 0 0.25rem;
}

.landing-login-form label:first-of-type {
    margin-top: 0;
}

.landing-login-form input:not([type="checkbox"]) {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-family: inherit;
    font-size: 0.92rem;
}

.landing-login-form input:not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.remember-me-check {
    margin: 0.55rem 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.remember-me-check input[type="checkbox"] {
    accent-color: #0d9488;
    flex: 0 0 auto;
}

.landing-login-form__btn {
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.landing-login-form__btn:hover {
    filter: brightness(1.05);
}

.landing-about {
    margin: 1.75rem 0 0;
    padding: 1.35rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 244, 0.88) 55%, rgba(248, 250, 252, 0.98) 100%);
    box-shadow: var(--shadow);
}

.landing-about__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.landing-about__body {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.65;
}

.landing-about__body p {
    margin: 0 0 1rem;
}

.landing-about__body p:last-child {
    margin-bottom: 0;
}

.landing-about__body strong {
    font-weight: 700;
    color: var(--accent-hover);
}

.landing-about__lead {
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
}

.landing-about__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.landing-about__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    background: #fff;
    padding: 0.75rem 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.landing-about__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.landing-about__item h3 {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.landing-about__item p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--muted);
}

/* Feature icon badge */
.feature-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.feature-icon-badge--charge  { background: var(--c-perf-soft);   color: var(--c-perf); }
.feature-icon-badge--garage  { background: var(--c-blue-soft);   color: var(--c-blue); }
.feature-icon-badge--maint   { background: var(--c-violet-soft); color: var(--c-violet); }
.feature-icon-badge--payback { background: var(--c-emerald-soft);color: var(--c-emerald); }
.feature-icon-badge--profile { background: var(--c-sky-soft);    color: var(--c-sky); }
.feature-icon-badge--share   { background: var(--c-amber-soft);  color: var(--c-amber); }

/* Landing about item hover border-left per szín */
.landing-about__item--charge:hover  { border-left-color: var(--c-perf); }
.landing-about__item--garage:hover  { border-left-color: var(--c-blue); }
.landing-about__item--maint:hover   { border-left-color: var(--c-violet); }
.landing-about__item--payback:hover { border-left-color: var(--c-emerald); }
.landing-about__item--profile:hover { border-left-color: var(--c-sky); }
.landing-about__item--share:hover   { border-left-color: var(--c-amber); }

.landing-db-note {
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    border: 1px solid rgba(217, 119, 6, 0.35);
    font-size: 0.85rem;
    color: var(--warn);
}

.landing-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
}

.landing-footer p {
    margin: 0;
}

.landing-serial-check {
    margin-top: 1.2rem;
    padding: 1.1rem 1.2rem;
}

.landing-sn-module {
    margin-top: 1.4rem;
}

.landing-public-strip {
    margin-top: 1.4rem;
    padding: 1rem 0.9rem;
}

.landing-public-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

.landing-public-strip__head .landing-about__title {
    margin: 0;
}

.landing-public-strip__scroller {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.1rem 0.1rem 0.4rem;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.landing-public-chip {
    flex: 0 0 auto;
    min-width: 282px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 0.4rem;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.landing-public-chip__img {
    width: 84px;
    height: 62px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-2);
    flex: 0 0 auto;
}

.landing-public-chip__img--ph {
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.landing-public-chip__body {
    display: grid;
    gap: 0.22rem;
    width: 100%;
}

.landing-public-chip__body strong {
    font-size: 0.88rem;
}

.landing-public-chip__body span {
    font-size: 0.8rem;
    color: var(--muted);
}

.landing-public-chip__meta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.35rem;
}

.landing-public-chip__meta em {
    font-style: normal;
    color: var(--muted);
}

.landing-public-chip__meta b {
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

.landing-public-chip__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(13, 148, 136, 0.25);
    border-radius: 999px;
    padding: 0.1rem 0.42rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #065f46;
    background: #ecfdf5;
}

.landing-public-chip__badge--danger {
    border-color: rgba(185, 28, 28, 0.35);
    color: #991b1b;
    background: rgba(239, 68, 68, 0.1);
}

.landing-public-chip:hover {
    border-color: rgba(13, 148, 136, 0.35);
    background: #f8fffe;
}

.landing-public-strip__scroller.is-auto-scroll {
    cursor: grab;
}

.landing-public-strip__scroller.is-auto-scroll:active {
    cursor: grabbing;
}

.public-rollers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.85rem;
}

.public-roller-card {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.public-roller-card__media-link {
    display: block;
}

.public-roller-card__media {
    width: 100%;
    height: 165px;
    object-fit: cover;
    display: block;
    background: var(--surface-2);
}

.public-roller-card__media--ph {
    display: grid;
    place-items: center;
    font-size: 2rem;
}

.public-roller-card__body {
    padding: 0.75rem;
    display: grid;
    gap: 0.55rem;
}

.public-roller-card__title {
    margin: 0;
    font-size: 1rem;
}

.public-roller-card__owner {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.public-roller-card__meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
}

.public-roller-card__meta li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    font-size: 0.83rem;
}

.public-roller-card__meta li span {
    color: var(--muted);
}

.public-roller-card__meta li strong {
    text-align: right;
}

.public-roller-card__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
}

.public-roller-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.public-roller-card__badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.74rem;
    color: var(--accent-hover);
    background: #fff;
}

.public-roller-card__badge--danger {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.landing-sn-module__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}

.landing-sn-module__card-title {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 800;
}

.landing-sn-module__grid > .landing-serial-check {
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.landing-sn-module__grid > .serial-report-tile {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.landing-sn-module__grid .landing-serial-check__cta-row {
    margin-top: auto;
    margin-bottom: 0;
}

.landing-serial-check__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
    align-items: end;
    margin-top: 0.7rem;
}

.landing-serial-check__form label {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--muted);
}

.landing-serial-check__form input[type="text"] {
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
}

.landing-serial-check__form .landing-login-form__btn {
    width: auto;
    margin-top: 0;
}

.landing-serial-check .alert {
    margin-top: 0.85rem;
}

.landing-serial-check__note {
    margin-top: 0.65rem;
}

.landing-serial-check__cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0 0.85rem;
}

.serial-report-tile {
    margin-top: 0.8rem;
    margin-bottom: 0.95rem;
    padding: 0.9rem 0.95rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(220, 38, 38, 0.35);
    background: linear-gradient(165deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.96));
}

.serial-report-tile__title {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    color: #991b1b;
    font-weight: 800;
}

.serial-report-tile__text {
    margin: 0;
    color: #374151;
    line-height: 1.6;
}

.landing-serial-check__icon-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.landing-serial-community-note {
    margin-top: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(13, 148, 136, 0.35);
    background: linear-gradient(160deg, rgba(13, 148, 136, 0.12), rgba(14, 165, 233, 0.08));
    color: #0f172a;
    font-size: 0.87rem;
}

.landing-serial-community-note strong {
    color: #0f766e;
}

.auth-landing-modal {
    width: min(96vw, 520px);
    max-width: 520px;
}

.auth-landing-modal .modal-actions {
    margin-top: 1rem;
}

@media (max-width: 720px) {
    .landing-topbar {
        align-items: stretch;
        gap: 0.7rem;
    }

    .landing-topbar .brand {
        justify-content: center;
    }

    .landing-topbar__actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .landing-topbar__actions .nav-link {
        justify-content: center;
        width: 100%;
        min-height: 2.35rem;
        text-align: center;
    }

    .landing-topbar__actions .nav-link--cta {
        grid-column: 1 / -1;
    }

    .landing-about__grid {
        grid-template-columns: 1fr;
    }
    .landing-sn-module__grid {
        grid-template-columns: 1fr;
    }
    .landing-serial-check__form {
        grid-template-columns: 1fr;
    }
    .landing-serial-check__form .landing-login-form__btn {
        width: 100%;
    }

    .auth-layout-grid {
        grid-template-columns: 1fr;
    }
}

.admin-landing-preview {
    margin-top: 0.75rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    max-height: 220px;
    background: var(--surface-2);
}

.admin-landing-preview img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.admin-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.admin-dashboard > .page-title,
.admin-dashboard > .page-sub,
.admin-dashboard > .alert {
    margin-bottom: 0;
}

.admin-dashboard .admin-section {
    margin-top: 0 !important;
}

@media (min-width: 980px) {
    .admin-dashboard {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .admin-dashboard .admin-section--dashboard-hero,
    .admin-dashboard .admin-section--dashboard-wide,
    .admin-dashboard > .page-title,
    .admin-dashboard > .page-sub,
    .admin-dashboard > .alert {
        grid-column: 1 / -1;
    }
}

.admin-panel {
    padding: 0.95rem 1rem;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.admin-toggle-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.admin-toggle-panel__text {
    min-width: 220px;
}

.admin-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
}

.admin-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.admin-switch__slider {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background 0.16s ease;
}

.admin-switch__slider::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    left: 3px;
    top: 3px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    transition: transform 0.16s ease;
}

.admin-switch input[type="checkbox"]:checked + .admin-switch__slider {
    background: #0d9488;
}

.admin-switch input[type="checkbox"]:checked + .admin-switch__slider::after {
    transform: translateX(22px);
}

.admin-switch__label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--accent-hover);
}

.admin-panel__title {
    margin: 0 0 0.6rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-collapsible {
    padding: 0;
    overflow: hidden;
}

.admin-collapsible__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-collapsible__summary::-webkit-details-marker {
    display: none;
}

.admin-collapsible__summary::after {
    content: "Lenyitás";
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    background: var(--surface-2);
    color: var(--accent-hover);
    font-size: 0.76rem;
    letter-spacing: 0;
}

.admin-collapsible[open] .admin-collapsible__summary::after {
    content: "Bezárás";
}

.admin-collapsible--muted {
    border-style: dashed;
    background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
}

.admin-collapsible--muted .admin-collapsible__summary {
    opacity: 0.9;
}

.admin-collapsible__summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.admin-collapsible > :not(summary) {
    margin-left: 1rem;
    margin-right: 1rem;
}

.admin-collapsible > :last-child {
    margin-bottom: 1rem;
}

.admin-icon-btn {
    appearance: none;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--accent-hover);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.admin-icon-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

.modal-backdrop.modal-backdrop--admin-user {
    align-items: flex-start;
    overflow-y: auto;
    padding: 1rem;
}

.modal.modal--admin-user {
    width: min(620px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    margin: auto 0;
    text-align: left;
}

.admin-user-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.admin-user-form__grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.admin-user-form__grid input,
.admin-user-form__grid select {
    width: 100%;
}

.admin-user-form__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-user-form__meta span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    background: var(--surface-2);
}

.admin-user-form__actions {
    margin-top: 1rem;
}

.admin-user-danger {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.admin-user-danger .btn-del {
    border-color: var(--danger);
    color: var(--danger);
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 0.6rem;
}

.admin-stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 0.55rem 0.6rem;
    text-align: center;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.admin-stat-card .label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    line-height: 1.25;
}

.admin-stat-card .num {
    margin-top: 0.2rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.admin-activity-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1rem;
    margin-top: 1rem;
}

.admin-activity-grid table th,
.admin-activity-grid table td {
    text-align: center !important;
    vertical-align: middle;
}

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

    .admin-user-form__grid {
        grid-template-columns: 1fr;
    }
}

/* Garázs — roller kép kivágó modál (Cropper.js) */
.roller-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.roller-crop-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.roller-crop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
}

.roller-crop-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: min(94vh, 880px);
    overflow: auto;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    padding: 1rem 1.1rem 1.15rem;
}

.roller-crop-modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.roller-crop-modal__hint {
    margin: 0 0 1rem;
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.45;
}

.roller-crop-modal__stage {
    min-height: 200px;
    max-height: min(56vh, 460px);
    overflow: hidden;
    background: #0f172a;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.35);
    margin-bottom: 1rem;
}

.roller-crop-modal__stage .cropper-container {
    max-height: min(56vh, 460px) !important;
}

.roller-crop-modal__stage img {
    display: block;
    max-width: 100%;
}

.roller-crop-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    justify-content: flex-end;
}

.roller-crop-modal__actions .secondary {
    margin: 0;
}

.roller-crop-modal__actions .primary {
    margin: 0;
}