.xlupa2 {
    --xlupa2-ink: #14213a;
    --xlupa2-ink-soft: #5a6880;
    --xlupa2-brand: #172f55;
    --xlupa2-brand-dark: #0d1b34;
    --xlupa2-accent: #3b6db3;
    --xlupa2-surface: #ffffff;
    --xlupa2-surface-soft: #f3f5f9;
    --xlupa2-surface-brand: #e9eef6;
    --xlupa2-field: #f5f7fa;
    --xlupa2-line: #e3e8f0;
    --xlupa2-line-strong: #c8d2e0;
    --xlupa2-tint-line: #c9d5e6;
    --xlupa2-danger: #b42318;
    --xlupa2-danger-soft: #fef1ef;
    --xlupa2-success: #157347;
    --xlupa2-success-soft: #e8f7ef;
    --xlupa2-focus: #3b6db3;
    --xlupa2-radius: 22px;
    --xlupa2-radius-sm: 14px;
    --xlupa2-shadow: 0 30px 70px -30px rgba(23, 47, 85, .28), 0 2px 8px rgba(20, 28, 51, .04);
    --xlupa2-shadow-soft: 0 14px 34px -18px rgba(23, 47, 85, .22), 0 1px 3px rgba(20, 28, 51, .05);
    --xlupa2-shadow-brand: 0 12px 26px -10px rgba(13, 27, 52, .55);
    color: var(--xlupa2-ink);
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
    isolation: isolate;
    width: min(100%, 1160px);
    max-width: 1160px;
    min-width: 0;
    margin: 24px auto;
    padding: clamp(18px, 3.5vw, 40px);
    border: 1px solid var(--xlupa2-line);
    border-radius: 30px;
    background: var(--xlupa2-surface-soft);
    box-shadow: var(--xlupa2-shadow);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

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

.xlupa2 [hidden] { display: none !important; }
.xlupa2.xlupa2--auth { width: min(100%, 760px); }
.xlupa2.xlupa2--auth .xlupa2__header { margin-bottom: 26px; }
.xlupa2.xlupa2--auth .xlupa2__form { width: 100%; }

.xlupa2 h1,
.xlupa2 h2,
.xlupa2 h3,
.xlupa2 p,
.xlupa2 dl,
.xlupa2 dd,
.xlupa2 fieldset,
.xlupa2 legend { color: inherit; font-family: inherit; }

.xlupa2 h1 {
    max-width: 22ch;
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.xlupa2 h2 {
    margin: 0 0 10px;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.xlupa2 p { margin: 0 0 14px; }
.xlupa2 small { display: block; margin-top: 6px; color: var(--xlupa2-ink-soft); font-size: .82rem; line-height: 1.45; }
.xlupa2 strong,
.xlupa2 dd { font-variant-numeric: tabular-nums; }

.xlupa2 a {
    color: var(--xlupa2-brand);
    font-family: inherit;
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.xlupa2 a:hover { color: var(--xlupa2-brand-dark); }

.xlupa2 a:focus-visible,
.xlupa2 button:focus-visible {
    outline: 3px solid var(--xlupa2-focus) !important;
    outline-offset: 3px !important;
}

.xlupa2 :is(input, select, textarea):focus-visible { outline: 3px solid var(--xlupa2-focus) !important; outline-offset: 2px !important; }

/* Header: wordmark and account chip */
.xlupa2 .xlupa2__header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 14px 18px;
    min-width: 0;
    margin: 0 0 24px;
    padding: 0;
}

.xlupa2 .xlupa2__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--xlupa2-ink);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-decoration: none;
}

.xlupa2 .xlupa2__brand > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, #2b5089, var(--xlupa2-brand-dark));
    color: #fff;
    box-shadow: var(--xlupa2-shadow-brand);
    font-size: 1rem;
    letter-spacing: 0;
}

.xlupa2 .xlupa2__account {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    justify-self: end;
    max-width: 100%;
    padding: 6px 16px 6px 6px;
    border: 1px solid var(--xlupa2-line);
    border-radius: 999px;
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
    line-height: 1.3;
}

.xlupa2 .xlupa2__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--xlupa2-surface-brand);
    color: var(--xlupa2-brand);
    font-size: .95rem;
    font-weight: 800;
}

.xlupa2 .xlupa2__account-text { display: grid; min-width: 0; }
.xlupa2 .xlupa2__account-text > span { font-size: .86rem; font-weight: 750; }
.xlupa2 .xlupa2__account small {
    min-width: 0;
    max-width: 100%;
    margin: 1px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brand panel with summary tiles lifted over its lower edge */
.xlupa2 .xlupa2__hero {
    --xlupa2-focus: #ffd166;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
    padding: clamp(24px, 4vw, 40px);
    overflow: hidden;
    position: relative;
    border: 0;
    border-radius: 28px;
    background: radial-gradient(circle at 90% 0%, rgba(91, 141, 214, .28), transparent 45%), linear-gradient(140deg, #26487d 0%, var(--xlupa2-brand) 48%, var(--xlupa2-brand-dark) 100%);
    box-shadow: 0 26px 50px -26px rgba(13, 27, 52, .6);
    color: #fff;
}

.xlupa2 .xlupa2__hero::before,
.xlupa2 .xlupa2__hero::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.xlupa2 .xlupa2__hero::before { top: -120px; right: -80px; width: 300px; height: 300px; border: 34px solid rgba(255, 255, 255, .08); }
.xlupa2 .xlupa2__hero::after { right: 120px; bottom: -90px; width: 170px; height: 170px; background: rgba(255, 255, 255, .06); }
.xlupa2 .xlupa2__hero > * { position: relative; z-index: 1; }
.xlupa2 .xlupa2__hero--compact { padding-block: clamp(22px, 3vw, 32px); }
.xlupa2 .xlupa2__hero p:last-child { max-width: 62ch; margin-bottom: 0; color: rgba(255, 255, 255, .84); }
.xlupa2 .xlupa2__hero .xlupa2__eyebrow { color: rgba(255, 255, 255, .72); }
.xlupa2 .xlupa2__hero .xlupa2__button,
.xlupa2 .xlupa2__hero button { flex-shrink: 0; border-color: transparent !important; background: #fff !important; color: var(--xlupa2-brand) !important; -webkit-text-fill-color: var(--xlupa2-brand); box-shadow: 0 10px 24px -10px rgba(5, 18, 60, .55); }
.xlupa2 .xlupa2__hero h1 { color: #fff; }
.xlupa2 .xlupa2__hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.xlupa2 .xlupa2__share { min-width: 0; }
.xlupa2 .xlupa2__share > summary { list-style: none; cursor: pointer; }
.xlupa2 .xlupa2__share > summary::-webkit-details-marker { display: none; }
.xlupa2 .xlupa2__share-panel { padding: 12px; margin-top: 10px; width: min(320px, 100%); box-sizing: border-box; border-radius: 12px; background: #fff; color: var(--xlupa2-ink); }
.xlupa2 .xlupa2__share-panel input, .xlupa2 [data-xlupa2-copy-panel] input { width: 100%; box-sizing: border-box; min-width: 0; }
.xlupa2 [data-xlupa2-copy-value] { display: block; padding: 12px; margin-block: 8px; border: 1px solid var(--xlupa2-line-strong); border-radius: 10px; background: var(--xlupa2-field); color: var(--xlupa2-ink); font: inherit; }
.xlupa2 .xlupa2__share-panel p:last-child { color: var(--xlupa2-ink); }
@media (max-width: 600px) {
    .xlupa2 .xlupa2__hero-actions { width: 100%; flex-direction: column; }
    .xlupa2 .xlupa2__hero-actions > a, .xlupa2 .xlupa2__hero-actions > details { width: 100%; }
    .xlupa2 .xlupa2__share > summary { width: 100%; box-sizing: border-box; }
}
.xlupa2 .xlupa2__hero .xlupa2__button:hover,
.xlupa2 .xlupa2__hero button:hover { background: #eef2f8 !important; }
.xlupa2 .xlupa2__hero .xlupa2__button--secondary { border-color: rgba(255, 255, 255, .5) !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: none; }
.xlupa2 .xlupa2__hero .xlupa2__button--secondary:hover { border-color: #fff !important; background: rgba(255, 255, 255, .16) !important; }

@supports selector(:has(*)) {
    .xlupa2 .xlupa2__hero:has(+ .xlupa2__stats),
    .xlupa2 .xlupa2__auth-hero:has(+ .xlupa2__form) { padding-bottom: calc(clamp(24px, 4vw, 40px) + 46px); }
    .xlupa2 .xlupa2__hero + .xlupa2__stats,
    .xlupa2 .xlupa2__auth-hero + .xlupa2__form { position: relative; z-index: 1; margin-top: -70px; }
    .xlupa2 .xlupa2__hero + .xlupa2__stats { margin-inline: clamp(10px, 2.4vw, 24px); }
    .xlupa2 .xlupa2__auth-hero + .xlupa2__form { width: auto; margin-inline: clamp(10px, 2.4vw, 24px); }
}

.xlupa2 .xlupa2__title-row,
.xlupa2 .xlupa2__actions,
.xlupa2 .xlupa2__result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.xlupa2 .xlupa2__result-heading { margin: 30px 0 14px; }
.xlupa2 .xlupa2__result-heading h2 { margin: 0; }
.xlupa2 .xlupa2__result-heading span { padding: 4px 12px; border-radius: 999px; background: var(--xlupa2-surface); color: var(--xlupa2-ink-soft); font-size: .84rem; font-weight: 650; }

.xlupa2 .xlupa2__eyebrow {
    margin: 0 0 7px;
    color: var(--xlupa2-brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.xlupa2 .xlupa2__back { margin: 0 0 16px; }

/* Buttons */
.xlupa2 button,
.xlupa2 .xlupa2__button {
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    max-width: 100%;
    margin: 0;
    padding: 12px 22px;
    border: 1.5px solid transparent !important;
    border-radius: 14px;
    background: var(--xlupa2-brand) !important;
    box-shadow: var(--xlupa2-shadow-brand);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    cursor: pointer;
    font-family: inherit !important;
    font-size: .95rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-align: center;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-transform: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.xlupa2 button:hover,
.xlupa2 .xlupa2__button:hover { background: var(--xlupa2-brand-dark) !important; box-shadow: 0 16px 30px -12px rgba(13, 27, 52, .6); transform: translateY(-1px); }

.xlupa2 .xlupa2__icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; }
.xlupa2 .xlupa2__button--sm { min-height: 44px; padding: 9px 15px; border-radius: 12px; font-size: .86rem !important; }
.xlupa2 .xlupa2__button--sm .xlupa2__icon { flex-basis: 16px; width: 16px; height: 16px; }

/* Action colours: primary create/save (navy), view/open (outline), edit (soft), confirm (green), destructive (red), neutral (ghost). */
.xlupa2 .xlupa2__button--secondary { border-color: var(--xlupa2-tint-line) !important; background: var(--xlupa2-surface) !important; box-shadow: 0 1px 2px rgba(20, 33, 58, .05); color: var(--xlupa2-brand) !important; -webkit-text-fill-color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__button--secondary:hover { border-color: var(--xlupa2-brand) !important; background: var(--xlupa2-surface-brand) !important; box-shadow: none; }
.xlupa2 .xlupa2__button--soft { background: var(--xlupa2-surface-brand) !important; box-shadow: none; color: var(--xlupa2-brand) !important; -webkit-text-fill-color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__button--soft:hover { background: #dbe3ef !important; box-shadow: none; }
.xlupa2 .xlupa2__button--ghost { background: rgba(20, 33, 58, .05) !important; box-shadow: none; color: var(--xlupa2-ink) !important; -webkit-text-fill-color: var(--xlupa2-ink); }
.xlupa2 .xlupa2__button--ghost:hover { background: rgba(20, 33, 58, .1) !important; box-shadow: none; }
.xlupa2 .xlupa2__button--success { background: #157347 !important; box-shadow: 0 12px 24px -12px rgba(21, 115, 71, .65); }
.xlupa2 .xlupa2__button--success:hover { background: #0f5a37 !important; box-shadow: 0 14px 26px -12px rgba(21, 115, 71, .7); }
.xlupa2 .xlupa2__button--danger { background: var(--xlupa2-danger) !important; box-shadow: 0 12px 24px -12px rgba(180, 35, 24, .6); }
.xlupa2 .xlupa2__button--danger:hover { background: #8f1c13 !important; box-shadow: 0 14px 26px -12px rgba(180, 35, 24, .65); }
.xlupa2 .xlupa2__button--danger-soft { border-color: #f5cdc7 !important; background: var(--xlupa2-danger-soft) !important; box-shadow: none; color: var(--xlupa2-danger) !important; -webkit-text-fill-color: var(--xlupa2-danger); }
.xlupa2 .xlupa2__button--danger-soft:hover { border-color: var(--xlupa2-danger) !important; background: #fde0dc !important; box-shadow: none; }
.xlupa2 button:disabled { background: #8b95aa !important; box-shadow: none; color: #fff !important; -webkit-text-fill-color: #fff; cursor: not-allowed; opacity: .78 !important; transform: none; }

.xlupa2 button.xlupa2__link {
    min-height: 40px;
    padding: 8px 12px;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none;
    color: var(--xlupa2-brand) !important;
    -webkit-text-fill-color: var(--xlupa2-brand);
}
.xlupa2 button.xlupa2__link:hover { background: var(--xlupa2-surface-brand) !important; box-shadow: none; transform: none; }

/* Any remaining plain link renders as a neutral button; headings, pagination and in-sentence links opt out below. */
.xlupa2 :where(a[href]:not([class])) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border-radius: 12px;
    background: rgba(20, 33, 58, .05);
    color: var(--xlupa2-ink);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}
.xlupa2 :where(a[href]:not([class])):hover { background: rgba(20, 33, 58, .1); color: var(--xlupa2-ink); }
.xlupa2 :is(h1, h2, h3) a,
.xlupa2 .xlupa2__check a { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; font-size: inherit; }
.xlupa2 .xlupa2__check a { color: var(--xlupa2-brand); text-decoration: underline; }

/* Forms */
.xlupa2 form { max-width: 100%; margin: 0; }

.xlupa2 .xlupa2__form {
    display: grid;
    gap: 20px;
    width: min(100%, 780px);
    margin: 18px 0 26px;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid var(--xlupa2-line);
    border-radius: 24px;
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
}

.xlupa2 .xlupa2__form label,
.xlupa2 .xlupa2__form legend,
.xlupa2 .xlupa2__filters label > span { color: var(--xlupa2-ink); font-size: .88rem; font-weight: 700; }

.xlupa2 .xlupa2__form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.xlupa2 .xlupa2__form legend { margin-bottom: 8px; padding: 0; }

.xlupa2 .xlupa2__form input:not([type="checkbox"]):not([type="radio"]),
.xlupa2 .xlupa2__form select,
.xlupa2 .xlupa2__form textarea,
.xlupa2 .xlupa2__filters input,
.xlupa2 .xlupa2__filters select {
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 8px 0 0;
    padding: 12px 14px;
    border: 1.5px solid var(--xlupa2-line) !important;
    border-radius: 14px !important;
    background-color: var(--xlupa2-field) !important;
    box-shadow: none !important;
    color: var(--xlupa2-ink) !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.xlupa2 :is(.xlupa2__form, .xlupa2__filters) :is(input, select, textarea):hover { border-color: var(--xlupa2-line-strong) !important; }
.xlupa2 :is(.xlupa2__form, .xlupa2__filters) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--xlupa2-brand) !important;
    outline: none !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(59, 109, 179, .2) !important;
}
.xlupa2 :is(.xlupa2__form, .xlupa2__filters) :is(input, select, textarea):focus-visible { outline: none !important; }
.xlupa2 :is(.xlupa2__form, .xlupa2__filters) input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 3px solid var(--xlupa2-focus) !important; outline-offset: 2px !important; }

.xlupa2 .xlupa2__form select,
.xlupa2 .xlupa2__filters select {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--xlupa2-brand) 50%), linear-gradient(135deg, var(--xlupa2-brand) 50%, transparent 50%) !important;
    background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px !important;
    background-repeat: no-repeat !important;
    background-size: 5px 5px, 5px 5px !important;
}

.xlupa2 .xlupa2__form textarea { min-height: 128px; resize: vertical; }
.xlupa2 .xlupa2__form input::placeholder,
.xlupa2 .xlupa2__filters input::placeholder { color: #6b7790; opacity: 1; }

.xlupa2 .xlupa2__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xlupa2 .xlupa2__check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.xlupa2 .xlupa2__check input { flex: 0 0 auto; width: 21px; height: 21px; margin: 2px 0 0; accent-color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.xlupa2 .xlupa2__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid var(--xlupa2-line);
    border-radius: var(--xlupa2-radius);
    background: var(--xlupa2-surface);
}

.xlupa2 .xlupa2__filter--wide { grid-column: span 2; }
.xlupa2 .xlupa2__filter-actions { display: flex; align-items: center; gap: 14px; align-self: end; min-height: 48px; }

/* Cards */
.xlupa2 .xlupa2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.xlupa2 .xlupa2__card,
.xlupa2 .xlupa2__record,
.xlupa2 .xlupa2__empty,
.xlupa2 .xlupa2__danger {
    min-width: 0;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid var(--xlupa2-line);
    border-radius: var(--xlupa2-radius);
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
}

.xlupa2 .xlupa2__card { position: relative; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.xlupa2 .xlupa2__grid > .xlupa2__card:hover { box-shadow: 0 22px 44px -22px rgba(23, 47, 85, .35), 0 1px 3px rgba(20, 28, 51, .05); transform: translateY(-2px); }
.xlupa2 .xlupa2__record-list { display: grid; gap: 14px; }
.xlupa2 .xlupa2__record { margin-bottom: 14px; }
.xlupa2 .xlupa2__record-list .xlupa2__record { margin-bottom: 0; }
.xlupa2 .xlupa2__empty { padding-block: clamp(28px, 5vw, 44px); border: 1.5px dashed var(--xlupa2-line-strong); text-align: center; box-shadow: none; }
.xlupa2 .xlupa2__empty > :last-child { margin-bottom: 0; }
.xlupa2 .xlupa2__danger { margin-top: 30px; border-color: #f4c7c1; background: var(--xlupa2-danger-soft); box-shadow: none; }

.xlupa2 .xlupa2__plate {
    display: inline-flex;
    margin: 4px 0 12px;
    padding: 5px 12px;
    border: 2px solid #3a4558;
    border-radius: 9px;
    background: #121826;
    box-shadow: 0 6px 14px -8px rgba(18, 24, 38, .7);
    color: #fff;
    font-size: .94rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.xlupa2 dl { display: flex; gap: 28px; margin: 14px 0; }
.xlupa2 dl div { display: grid; }
.xlupa2 dt,
.xlupa2 .xlupa2__stats span { color: var(--xlupa2-ink-soft); font-size: .78rem; font-weight: 600; }
.xlupa2 dd { margin: 0; font-weight: 800; }

.xlupa2 .xlupa2__actions { justify-content: flex-start; gap: 10px; margin-top: 18px; }
.xlupa2 .xlupa2__actions form { margin: 0; }

.xlupa2 .xlupa2__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; margin-top: 8px; }
.xlupa2 .xlupa2__type { position: relative; cursor: pointer; }
.xlupa2 .xlupa2__type input { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; margin: 0; transform: translateY(-50%); accent-color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__type span { display: flex; align-items: center; min-height: 58px; padding: 11px 12px 11px 42px; border: 1.5px solid var(--xlupa2-line); border-radius: var(--xlupa2-radius-sm); background: var(--xlupa2-field); font-size: .9rem; font-weight: 650; transition: border-color .18s ease, background-color .18s ease; }
.xlupa2 .xlupa2__type:hover span { border-color: var(--xlupa2-line-strong); }
.xlupa2 .xlupa2__type input:checked + span { border-color: var(--xlupa2-brand); background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand-dark); box-shadow: inset 0 0 0 1px var(--xlupa2-brand); }
.xlupa2 .xlupa2__type input:focus-visible + span { outline: 3px solid var(--xlupa2-focus); outline-offset: 2px; }

/* Summary tiles: label above a large figure */
.xlupa2 .xlupa2__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 28px; }
.xlupa2 .xlupa2__stats div { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 18px 18px 20px; border: 1px solid var(--xlupa2-line); border-radius: 20px; background: var(--xlupa2-surface); box-shadow: var(--xlupa2-shadow-soft); }
.xlupa2 .xlupa2__stats span { order: -1; }
.xlupa2 .xlupa2__stats strong { color: var(--xlupa2-ink); overflow-wrap: anywhere; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.xlupa2 .xlupa2__stats strong a { text-decoration: none; }

/* Record rows: icon tile, title and odometer pill */
.xlupa2 .xlupa2__record > .xlupa2__title-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 14px;
    margin-bottom: 10px;
}
.xlupa2 .xlupa2__record > .xlupa2__title-row::before {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--xlupa2-surface-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172f55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E") center / 22px no-repeat;
    content: "";
}
.xlupa2 .xlupa2__record > .xlupa2__title-row h2 { margin: 1px 0 4px; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.xlupa2 .xlupa2__record > .xlupa2__title-row > strong,
.xlupa2 .xlupa2__odometer { padding: 6px 12px; border-radius: 999px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand-dark); font-size: .86rem; white-space: nowrap; }
.xlupa2 .xlupa2__record time { color: var(--xlupa2-ink-soft); font-size: .86rem; }
.xlupa2 .xlupa2__record-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--xlupa2-ink-soft); }
.xlupa2 .xlupa2__record-meta span:first-child { color: var(--xlupa2-ink); font-weight: 750; }
.xlupa2 .xlupa2__record-meta span + span::before { margin-right: 18px; color: var(--xlupa2-line-strong); content: "•"; }
.xlupa2 .xlupa2__historical { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: #fff4db; color: #73520f; font-size: .8rem; }
.xlupa2 .xlupa2__next-service { padding: 12px 14px; border-radius: var(--xlupa2-radius-sm); background: var(--xlupa2-surface-brand); color: var(--xlupa2-ink); font-size: .92rem; }
.xlupa2 .xlupa2__next-service strong { color: var(--xlupa2-brand-dark); }

.xlupa2 .xlupa2__notice {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: var(--xlupa2-radius-sm);
    font-weight: 600;
}

.xlupa2 .xlupa2__notice--success { border-color: #a6dcbc; background: var(--xlupa2-success-soft); color: #145c38; }
.xlupa2 .xlupa2__notice--error { border-color: #f0b4ac; background: var(--xlupa2-danger-soft); color: #7a1d15; }

.xlupa2 .xlupa2__pagination { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.xlupa2 .xlupa2__pagination a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--xlupa2-line); border-radius: 999px; background: var(--xlupa2-surface); text-decoration: none; }
.xlupa2 .xlupa2__pagination a:hover { border-color: var(--xlupa2-line-strong); }
.xlupa2 .xlupa2__pagination a[aria-current="page"] { border-color: var(--xlupa2-brand); background: var(--xlupa2-brand); box-shadow: var(--xlupa2-shadow-brand); color: #fff; }
.xlupa2 .xlupa2__auth-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.xlupa2 .xlupa2__transfer-code code { display: inline-block; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; padding: 8px 12px; border: 1.5px dashed var(--xlupa2-brand); border-radius: 12px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-ink); font-size: 1.08rem; letter-spacing: .12em; }

.xlupa2 form.is-processing { position: relative; }
.xlupa2 form.is-processing button[type="submit"]::after {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: xlupa2-spin .7s linear infinite;
    content: "";
}

.xlupa2 .xlupa2__processing-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes xlupa2-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .xlupa2 .xlupa2__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xlupa2 .xlupa2__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .xlupa2 { margin: 8px auto; padding: 18px; border-radius: 22px; }
    .xlupa2 .xlupa2__header { margin-bottom: 22px; }
    .xlupa2 .xlupa2__hero { align-items: flex-start; flex-direction: column; border-radius: 24px; }
    .xlupa2 .xlupa2__two,
    .xlupa2 .xlupa2__grid,
    .xlupa2 .xlupa2__filters { grid-template-columns: minmax(0, 1fr); }
    .xlupa2 .xlupa2__filter--wide { grid-column: auto; }
    .xlupa2 .xlupa2__title-row { align-items: flex-start; }
}

@media (max-width: 480px) {
    .xlupa2 { width: 100%; margin-inline: 0; padding: 15px; border-inline: 0; border-radius: 0; box-shadow: none; }
    .xlupa2 .xlupa2__header { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .xlupa2 .xlupa2__account { grid-column: 1; grid-row: 2; justify-self: stretch; }
    .xlupa2 .xlupa2__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .xlupa2 .xlupa2__stats div { padding: 14px; border-radius: 18px; }
    .xlupa2 .xlupa2__actions { align-items: stretch; }
    .xlupa2 .xlupa2__actions > a,
    .xlupa2 .xlupa2__actions > form { flex: 1 1 0; justify-content: center; }
    .xlupa2 .xlupa2__actions > .xlupa2__button:not([class*="xlupa2__button--"]) { flex-basis: 100%; }
    .xlupa2 .xlupa2__actions > form button { width: 100%; justify-content: center; }
    .xlupa2 .xlupa2__filter-actions { align-items: stretch; flex-direction: column; }
    .xlupa2 .xlupa2__record > .xlupa2__title-row { grid-template-columns: 42px minmax(0, 1fr); }
    .xlupa2 .xlupa2__record > .xlupa2__title-row::before { width: 42px; height: 42px; border-radius: 13px; }
    .xlupa2 .xlupa2__record > .xlupa2__title-row > strong { grid-column: 2; justify-self: start; }
}

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

/* Owner service archive */
.xlupa2 .xlupa2__search-hero h1 { max-width: none; }
.xlupa2 .xlupa2__search-panel {
    min-width: 0;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--xlupa2-line);
    border-radius: 24px;
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
}
.xlupa2 .xlupa2__search-intro { display: flex; align-items: end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.xlupa2 .xlupa2__search-intro h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.xlupa2 .xlupa2__search-intro > p { margin-bottom: 2px; color: var(--xlupa2-ink-soft); font-size: .9rem; }
.xlupa2 .xlupa2__search-panel .xlupa2__filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: none;
}
.xlupa2 .xlupa2__search-panel .xlupa2__filter--wide { grid-column: span 3; }
.xlupa2 .xlupa2__search-panel input[type="search"] {
    min-height: 56px;
    padding-left: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6680' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-position: 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    font-size: 1.05rem !important;
}
.xlupa2 .xlupa2__search-panel .xlupa2__filter-actions { justify-content: flex-end; flex-wrap: wrap; }
.xlupa2 .xlupa2__active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--xlupa2-line); }
.xlupa2 .xlupa2__active-filters > span:first-child { margin-right: 4px; color: var(--xlupa2-ink-soft); font-size: .8rem; font-weight: 750; }
.xlupa2 .xlupa2__filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: 100%;
    padding: 5px 13px;
    border: 1px solid var(--xlupa2-tint-line);
    border-radius: 999px;
    background: var(--xlupa2-surface-brand);
    color: var(--xlupa2-brand-dark);
    font-size: .82rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.xlupa2 .xlupa2__filter-chip:hover { background: #dbe3ef; }
.xlupa2 .xlupa2__search-status { margin: 0; color: var(--xlupa2-ink-soft); font-size: .88rem; }
.xlupa2 .xlupa2__search-status:empty { display: none; }
.xlupa2 .xlupa2__record-list[aria-busy="true"] { opacity: .72; }
.xlupa2 .xlupa2__search-record { padding: clamp(18px, 3vw, 24px); }
.xlupa2 .xlupa2__search-record .xlupa2__eyebrow { letter-spacing: .055em; }
.xlupa2 .xlupa2__search-record .xlupa2__actions { margin-top: 12px; }
.xlupa2 .xlupa2__record-note { white-space: pre-line; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 900px) {
    .xlupa2 .xlupa2__search-panel .xlupa2__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xlupa2 .xlupa2__search-panel .xlupa2__filter--wide { grid-column: span 2; }
}
@media (max-width: 680px) {
    .xlupa2 .xlupa2__search-panel .xlupa2__filters { grid-template-columns: minmax(0, 1fr); }
    .xlupa2 .xlupa2__search-panel .xlupa2__filter--wide { grid-column: auto; }
    .xlupa2 .xlupa2__search-panel .xlupa2__filter-actions { justify-content: flex-start; }
}
@media (forced-colors: active) {
    .xlupa2 .xlupa2__search-record,
    .xlupa2 .xlupa2__filter-chip { border: 1px solid CanvasText; }
}

/* Optional installable app invitation */
.xlupa2 .xlupa2__install {
    display: flex;
    align-items: center;
    gap: 12px 18px;
    flex-wrap: wrap;
    margin: -8px 0 24px;
    padding: 12px 12px 12px 18px;
    border: 1px solid var(--xlupa2-tint-line);
    border-radius: 18px;
    background: var(--xlupa2-surface-brand);
}
.xlupa2 .xlupa2__install-label { flex: 1 1 180px; color: var(--xlupa2-brand-dark); font-size: .9rem; font-weight: 750; }
.xlupa2 .xlupa2__install > button { flex: 0 0 auto; margin: 0; }
.xlupa2 .xlupa2__install-help { flex: 1 0 100%; padding-top: 11px; border-top: 1px solid var(--xlupa2-tint-line); }
.xlupa2 .xlupa2__install-help p { margin: 0 0 8px; font-size: .9rem; }
.xlupa2 .xlupa2__install-help button { margin: 0; padding: 0; }
@media (max-width: 480px) {
    .xlupa2 .xlupa2__install { gap: 10px; margin-top: -6px; padding: 10px 10px 10px 14px; }
    .xlupa2 .xlupa2__install-label { flex-basis: 100px; font-size: .82rem; }
    .xlupa2 .xlupa2__install > button { width: auto; min-height: 44px; padding: 10px 14px; font-size: .85rem !important; }
}
@media (forced-colors: active) {
    .xlupa2 .xlupa2__install { border-color: CanvasText; }
}

.xlupa2 .xlupa2__notification-permission { margin: 0 0 24px; padding: 22px; border: 1px solid var(--xlupa2-tint-line); border-radius: var(--xlupa2-radius); background: var(--xlupa2-surface-brand); }
.xlupa2 .xlupa2__notification-permission [role="status"] { margin: 12px 0 0; }
.xlupa2 [data-xlupa2-push-state="ready"] [data-xlupa2-push-enable]:disabled { background: var(--xlupa2-surface-brand) !important; color: var(--xlupa2-brand-dark) !important; opacity: 1 !important; cursor: default; }
.xlupa2 .xlupa2__notification-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, calc(50% - 8px))), 1fr)); align-items: start; gap: 16px; }
.xlupa2 .xlupa2__notification-card { padding: 22px; border: 1px solid var(--xlupa2-line); border-radius: var(--xlupa2-radius); background: var(--xlupa2-surface); box-shadow: var(--xlupa2-shadow-soft); }
/* Service schedule grouping retains the original vehicle-led card design. */
.xlupa2 .xlupa2__service-schedule { display: grid; gap: 32px; }
.xlupa2 .xlupa2__schedule-section { --schedule-color: var(--xlupa2-ink-soft); --schedule-tint: var(--xlupa2-surface-brand); min-width: 0; }
.xlupa2 .xlupa2__schedule-section--overdue { --schedule-color: var(--xlupa2-danger); --schedule-tint: var(--xlupa2-danger-soft); }
.xlupa2 .xlupa2__schedule-section--due { --schedule-color: #8a4b08; --schedule-tint: #fff3dc; }
.xlupa2 .xlupa2__schedule-section--upcoming { --schedule-color: #285a9e; --schedule-tint: #edf3fc; }
.xlupa2 .xlupa2__schedule-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; border-bottom: 2px solid var(--xlupa2-line); }
.xlupa2 .xlupa2__schedule-section-heading h3 { margin: 0; color: var(--schedule-color); font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.xlupa2 .xlupa2__schedule-section-heading > span { color: var(--xlupa2-ink-soft); font-size: .82rem; }
.xlupa2 .xlupa2__schedule-vehicle { margin-top: 20px; min-width: 0; }
.xlupa2 .xlupa2__schedule-vehicle-heading { margin: 0 0 10px; color: var(--xlupa2-ink-soft); font-family: inherit; font-size: .88rem; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__notification-card { min-width: 0; }
.xlupa2 .xlupa2__schedule-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 10px; color: var(--xlupa2-ink); font-family: inherit; font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__schedule-plate { color: var(--xlupa2-ink-soft); font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.xlupa2 .xlupa2__schedule-service, .xlupa2 .xlupa2__schedule-targets { margin: 0 0 14px; color: var(--xlupa2-ink); font-size: 1rem; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__schedule-targets > span { display: inline-block; max-width: 100%; }
@media (max-width: 720px) {
    .xlupa2 .xlupa2__notification-list { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
    .xlupa2 .xlupa2__notification-card { border-color: CanvasText; }
}
.xlupa2 .xlupa2__notification-status { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand-dark); font-size: .78rem; font-weight: 750; }
.xlupa2 .xlupa2__notification-status--overdue { background: var(--xlupa2-danger-soft); color: var(--xlupa2-danger); }

.xlupa2 .xlupa2__bell svg { width: 24px; height: 24px; }
.xlupa2 .xlupa2__unread-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--xlupa2-surface); border-radius: 999px; background: #e5484d; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; }
.xlupa2 .xlupa2__unread-badge[hidden] { display: none; }
.xlupa2 .xlupa2__inbox-list { display: grid; gap: 14px; margin-bottom: 24px; }
.xlupa2 .xlupa2__inbox-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 18px;
    padding: 18px 20px;
    border: 1px solid var(--xlupa2-line);
    border-radius: 20px;
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.xlupa2 .xlupa2__inbox-card:hover { border-color: var(--xlupa2-tint-line); box-shadow: 0 20px 40px -22px rgba(23, 47, 85, .35); transform: translateY(-1px); }
.xlupa2 .xlupa2__inbox-card--unread { border-color: var(--xlupa2-tint-line); }
.xlupa2 .xlupa2__inbox-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__inbox-icon .xlupa2__icon { width: 22px; height: 22px; }
.xlupa2 .xlupa2__inbox-icon--broadcast { background: #fff3e0; color: #a85a00; }
.xlupa2 .xlupa2__inbox-content { min-width: 0; }
.xlupa2 .xlupa2__inbox-card h2 { margin: 6px 0 2px; font-size: 1.05rem; font-weight: 700; }
.xlupa2 .xlupa2__inbox-card--unread h2 { font-weight: 800; }
.xlupa2 .xlupa2__inbox-card--unread h2::before { display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--xlupa2-accent); vertical-align: middle; content: ""; }
.xlupa2 .xlupa2__inbox-card h2 a { color: var(--xlupa2-ink); text-decoration: none; }
.xlupa2 .xlupa2__inbox-card h2 a::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.xlupa2 .xlupa2__inbox-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--xlupa2-ink-soft); font-size: .92rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.xlupa2 .xlupa2__inbox-open { position: relative; z-index: 1; }
.xlupa2 .xlupa2__inbox-card h2 a:focus-visible { outline: none !important; }
.xlupa2 .xlupa2__inbox-card:has(h2 a:focus-visible) { outline: 3px solid var(--xlupa2-focus); outline-offset: 3px; }
@media (max-width: 560px) {
    .xlupa2 .xlupa2__inbox-card { grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: 16px; }
    .xlupa2 .xlupa2__inbox-icon { width: 44px; height: 44px; border-radius: 14px; }
    .xlupa2 .xlupa2__inbox-open { grid-column: 2; justify-self: start; margin-top: 8px; }
}
.xlupa2 .xlupa2__inbox-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; color: var(--xlupa2-ink-soft); font-size: .78rem; font-weight: 600; }
.xlupa2 .xlupa2__inbox-meta time { margin-left: auto; }
.xlupa2 .xlupa2__notification-detail { max-width: 760px; padding: clamp(20px, 4vw, 40px); border: 1px solid var(--xlupa2-line); border-radius: 24px; background: var(--xlupa2-surface); box-shadow: var(--xlupa2-shadow-soft); }
.xlupa2 .xlupa2__notification-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 24px 0; }
.xlupa2 .xlupa2__notification-detail time { color: var(--xlupa2-ink-soft); font-size: .9rem; }
.xlupa2 .xlupa2__notification-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; }
/* Read state is a passive badge, never a control. */
.xlupa2 .xlupa2__read-status { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); font-size: .78rem; font-weight: 750; line-height: 1.4; cursor: default; user-select: none; }
.xlupa2 .xlupa2__read-status:empty { display: none; }
.xlupa2 .xlupa2__read-status::before { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.xlupa2 .xlupa2__read-status[data-state="read"] { background: var(--xlupa2-success-soft); color: var(--xlupa2-success); }
.xlupa2 .xlupa2__read-status[data-state="read"]::before { width: 5px; height: 9px; margin: 0 2px 2px 1px; border: solid currentColor; border-width: 0 2px 2px 0; border-radius: 0; background: none; transform: rotate(45deg); }
.xlupa2 .xlupa2__read-status[data-state="failed"] { background: var(--xlupa2-danger-soft); color: var(--xlupa2-danger); }
.xlupa2 .xlupa2__notification-detail form { margin-top: 8px; }
.xlupa2 .xlupa2__notification-permission { margin-top: 24px; }

.xlupa2 .xlupa2__workshop-picker { display: grid; gap: 6px; min-width: 0; }
.xlupa2 .xlupa2__workshop-input { position: relative; min-width: 0; }
.xlupa2 .xlupa2__workshop-options { position: absolute; z-index: 20; inset: calc(100% + 6px) 0 auto; max-height: 240px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--xlupa2-line); border-radius: 16px; background: var(--xlupa2-surface); box-shadow: 0 20px 40px -16px rgba(23, 47, 85, .3); touch-action: pan-y; }
.xlupa2 .xlupa2__workshop-options [role="option"] { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--xlupa2-ink); overflow-wrap: anywhere; cursor: pointer; }
.xlupa2 .xlupa2__workshop-options [role="option"]:hover,
.xlupa2 .xlupa2__workshop-options [aria-selected="true"] { background: var(--xlupa2-surface-brand); outline: 2px solid var(--xlupa2-brand); outline-offset: -2px; }
.xlupa2 .xlupa2__workshop-picker small { margin-top: 0; }

/* Signed-in account navigation */
.xlupa2.xlupa2--signed-in {
    /* Let the fixed navigation stack above later theme footer content. */
    isolation: auto;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
.xlupa2 .xlupa2__bottom-nav {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: 320px;
    max-width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    padding: 8px;
    border: 1px solid var(--xlupa2-line);
    border-radius: 24px;
    background: var(--xlupa2-surface);
    box-shadow: 0 22px 48px -16px rgba(23, 47, 85, .38), 0 2px 8px rgba(20, 28, 51, .06);
}
.xlupa2 .xlupa2__bottom-nav .xlupa2__bottom-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 44px;
    min-height: 52px;
    margin: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent !important;
    box-shadow: none;
    color: #8590a8 !important;
    -webkit-text-fill-color: currentColor;
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transform: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.xlupa2 .xlupa2__bottom-action svg { display: block; flex: 0 0 26px; width: 26px; height: 26px; }
.xlupa2 .xlupa2__bottom-nav .xlupa2__bottom-action:hover { background: var(--xlupa2-surface-brand) !important; color: var(--xlupa2-brand) !important; box-shadow: none; transform: none; }
.xlupa2 .xlupa2__bottom-nav .xlupa2__bottom-action[aria-current="page"] { border-color: transparent; background: var(--xlupa2-brand) !important; box-shadow: var(--xlupa2-shadow-brand); color: #fff !important; }
.xlupa2 .xlupa2__bottom-nav .xlupa2__logout-button:hover { background: var(--xlupa2-danger-soft) !important; color: var(--xlupa2-danger) !important; }
.xlupa2 .xlupa2__bottom-logout { min-width: 0; margin: 0; padding: 0; border: 0; }
.xlupa2 .xlupa2__bottom-nav .xlupa2__unread-badge { top: 4px; right: 6px; }
.xlupa2 .xlupa2__bottom-nav .xlupa2__bottom-action:disabled { opacity: .65; cursor: wait; }
.xlupa2 .xlupa2__bottom-logout.is-processing button[type="submit"]::after { position: absolute; right: 3px; bottom: 3px; border-color: var(--xlupa2-line-strong); border-top-color: var(--xlupa2-brand); }
.xlupa2 :is(input, select, textarea, button, a[href]) { scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
@media (forced-colors: active) {
    .xlupa2 .xlupa2__bottom-nav { border-color: CanvasText; }
    .xlupa2 .xlupa2__bottom-nav .xlupa2__bottom-action[aria-current="page"] { border-color: Highlight; color: Highlight !important; }
    .xlupa2 .xlupa2__unread-badge { border-color: Canvas; background: Highlight; color: HighlightText; }
    .xlupa2 :is(.xlupa2__form, .xlupa2__filters) :is(input, select, textarea):focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; }
}

/* XLUPA owner overview and reusable card details. */
.xlupa2 .xlupa2__garage-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xlupa2 .xlupa2__card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.xlupa2 .xlupa2__category { display: inline-flex; align-items: center; min-height: 28px; min-width: 0; overflow-wrap: anywhere; padding: 4px 11px; border-radius: 999px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); font-size: .75rem; font-weight: 750; }
.xlupa2 .xlupa2__vehicle-mark { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__vehicle-mark svg { display: block; width: 24px; height: 24px; }
.xlupa2 .xlupa2__card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; padding: 0; border: 0; }
.xlupa2 .xlupa2__card dl div { gap: 2px; padding: 12px 14px; border-radius: var(--xlupa2-radius-sm); background: var(--xlupa2-surface-soft); }
.xlupa2 .xlupa2__card dd { font-size: 1.05rem; }
.xlupa2 .xlupa2__card .xlupa2__actions { gap: 10px; }
.xlupa2 .xlupa2__section-heading { margin: 32px 0 14px; }
.xlupa2 .xlupa2__card-note { color: var(--xlupa2-ink-soft); font-size: .88rem; }
.xlupa2.xlupa2--auth { max-width: 640px; }
.xlupa2 .xlupa2__auth-hero { margin-bottom: 22px; }
.xlupa2 .xlupa2__auth-links { justify-content: center; }
.xlupa2 .xlupa2__header-link { grid-column: 1 / -1; justify-self: end; }
.xlupa2 a.xlupa2__account { color: var(--xlupa2-ink); text-decoration: none; min-width: 0; }
.xlupa2 a.xlupa2__account:hover .xlupa2__account-text { text-decoration: underline; }
.xlupa2 .xlupa2__account-section { margin-block: 20px; }
.xlupa2 .xlupa2__agreement { min-width: 0; width: 100%; }
.xlupa2 .xlupa2__agreement-scroll {
    height: clamp(240px, 45vh, 420px); overflow: auto; overscroll-behavior: contain;
    border: 1px solid var(--xlupa2-line); border-radius: 12px; padding: 16px;
    margin-block: 16px; background: var(--xlupa2-surface); overflow-wrap: anywhere;
    font-size: .9375rem; line-height: 1.7; text-align: start;
}
.xlupa2 .xlupa2__agreement-scroll :is(h2, h3) { line-height: 1.35; margin-block: 20px 10px; }
.xlupa2 .xlupa2__agreement-scroll h2 { font-size: 1.2rem; }
.xlupa2 .xlupa2__agreement-scroll h3 { font-size: 1rem; }
.xlupa2 .xlupa2__agreement-scroll :is(img, video, table) { max-width: 100%; }
.xlupa2 .xlupa2__agreement-scroll:focus-visible { outline: 3px solid var(--xlupa2-brand); outline-offset: 3px; }
.xlupa2 .xlupa2__agreement-check { align-items: start; }
.xlupa2 .xlupa2__agreement-check > span { min-width: 0; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__consent-copy { display: block; margin-top: 8px; font-weight: 400; color: var(--xlupa2-ink-soft); }
.xlupa2 .xlupa2__legal-link { text-align: center; font-size: .875rem; margin-block: 24px; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__consent-history { padding-inline-start: 20px; }
.xlupa2 .xlupa2__consent-history li { margin-bottom: 10px; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__consent-history a { display: inline-flex; }
.xlupa2 .xlupa2__bottom-nav--restricted { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 160px; }
.xlupa2 .xlupa2__form > button[type="submit"] { justify-self: start; min-width: 180px; }
.xlupa2.xlupa2--auth .xlupa2__form > button[type="submit"] { width: 100%; }
.xlupa2 .xlupa2__form label small { font-weight: 400; }

/* Vehicle management rows: icon tile, explanation and a right-aligned action */
.xlupa2 .xlupa2__manage { margin-top: 8px; }
.xlupa2 .xlupa2__manage-list { display: grid; gap: 14px; }
.xlupa2 .xlupa2__manage-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 20px;
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid var(--xlupa2-line);
    border-radius: var(--xlupa2-radius);
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
}
.xlupa2 .xlupa2__manage-icon { display: grid; place-items: center; align-self: start; width: 48px; height: 48px; border-radius: 15px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__manage-icon .xlupa2__icon { width: 22px; height: 22px; }
.xlupa2 .xlupa2__manage-body { min-width: 0; }
.xlupa2 .xlupa2__manage-body h3 { margin: 2px 0 4px; font-size: 1.05rem; font-weight: 750; letter-spacing: -.01em; }
.xlupa2 .xlupa2__manage-body p { margin: 0; color: var(--xlupa2-ink-soft); font-size: .92rem; }
.xlupa2 .xlupa2__manage-body p + p { margin-top: 12px; }
.xlupa2 .xlupa2__manage-body .xlupa2__transfer-code { color: var(--xlupa2-ink); }
.xlupa2 .xlupa2__manage-status { display: inline-flex; padding: 7px 12px; border-radius: 12px; background: #fff4db; color: #73520f !important; font-size: .82rem !important; font-weight: 700; }
.xlupa2 .xlupa2__manage-action form { margin: 0; }
.xlupa2 .xlupa2__manage-action button { white-space: nowrap; }
.xlupa2 .xlupa2__manage-card--danger { border-color: #f3d3ce; }
.xlupa2 .xlupa2__manage-card--danger .xlupa2__manage-icon { background: var(--xlupa2-danger-soft); color: var(--xlupa2-danger); }
@media (max-width: 680px) {
    .xlupa2 .xlupa2__manage-card { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
    .xlupa2 .xlupa2__manage-icon { width: 44px; height: 44px; border-radius: 14px; }
    .xlupa2 .xlupa2__manage-action { grid-column: 1 / -1; margin-top: 10px; }
    .xlupa2 .xlupa2__manage-action button { width: 100%; white-space: normal; }
}

/* Settings-style link rows: icon tile, label and chevron */
.xlupa2 .xlupa2__quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; }
.xlupa2 .xlupa2__quick-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--xlupa2-line);
    border-radius: 18px;
    background: var(--xlupa2-surface);
    box-shadow: var(--xlupa2-shadow-soft);
    color: var(--xlupa2-ink);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.xlupa2 .xlupa2__quick-link:hover { border-color: var(--xlupa2-tint-line); color: var(--xlupa2-ink); transform: translateY(-1px); }
.xlupa2 .xlupa2__quick-link > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.xlupa2 .xlupa2__quick-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__quick-link svg { display: block; width: 22px; height: 22px; }
.xlupa2 .xlupa2__quick-link > svg { flex: 0 0 18px; width: 18px; height: 18px; color: #9aa4ba; }

@media (max-width: 680px) {
    .xlupa2 .xlupa2__quick-links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .xlupa2 .xlupa2__garage-stats { gap: 8px; }
    .xlupa2 .xlupa2__garage-stats div { padding: 12px 10px; }
    .xlupa2 .xlupa2__garage-stats span { font-size: .72rem; }
    .xlupa2 .xlupa2__garage-stats strong { font-size: 1.35rem; }
    .xlupa2 .xlupa2__hero .xlupa2__button { width: 100%; }
    .xlupa2 .xlupa2__form > button[type="submit"] { width: 100%; min-width: 0; }
}
@media (forced-colors: active) {
    .xlupa2 .xlupa2__hero { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
    .xlupa2 .xlupa2__hero::before,
    .xlupa2 .xlupa2__hero::after { display: none; }
    .xlupa2 .xlupa2__hero :is(h1, .xlupa2__eyebrow, p:last-child) { color: CanvasText; }
    .xlupa2 .xlupa2__hero .xlupa2__button { background: ButtonFace !important; color: ButtonText !important; -webkit-text-fill-color: ButtonText; }
    .xlupa2 .xlupa2__quick-link { border-color: CanvasText; }
}

/* Personal Account: restrained typography, compact controls and clear sections. */
.xlupa2.xlupa2--personal-account { background: #f7f8fb; container-type: inline-size; }
.xlupa2 .xlupa2__account-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 30px 0 24px; }
.xlupa2 .xlupa2__account-heading h1 { margin-bottom: 8px; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 750; }
.xlupa2 .xlupa2__account-heading p:last-child { margin: 0; color: var(--xlupa2-ink-soft); font-size: .94rem; }
.xlupa2 .xlupa2__language { min-width: 0; margin: 0; }
.xlupa2 .xlupa2__language label { display: block; margin-bottom: 6px; color: var(--xlupa2-ink-soft); font-size: .8rem; font-weight: 500; }
.xlupa2 .xlupa2__language > div { display: flex; align-items: center; gap: 8px; }
.xlupa2 .xlupa2__language select { min-width: 0; min-height: 44px; max-width: 100%; padding: 8px 28px 8px 12px; border: 1px solid var(--xlupa2-line-strong); border-radius: 10px; background: #fff; color: var(--xlupa2-ink); font: inherit; font-size: .875rem; }
.xlupa2 .xlupa2__language button { min-height: 44px; border-radius: 10px; box-shadow: none; }
.xlupa2 .xlupa2__access-notice { display: flex; align-items: start; gap: 12px; margin: 0 0 22px; padding: 16px 18px; border: 1px solid #f3d4af; border-radius: 14px; background: #fff3e5; font-size: .875rem; line-height: 1.55; }
.xlupa2 .xlupa2__access-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: #ffe4c4; color: #8a4b14; }
.xlupa2 .xlupa2__access-notice strong { display: block; margin: 0 0 3px; font-size: .9rem; font-weight: 650; }
.xlupa2 .xlupa2__access-notice p { margin: 0; color: #52627a; font-size: .875rem; font-weight: 400; }
.xlupa2 .xlupa2__account-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); grid-template-areas: 'details legal' 'privacy legal' 'history history'; align-items: start; gap: 20px; }
.xlupa2 .xlupa2__account-section { min-width: 0; margin: 0; padding: 24px; border: 1px solid var(--xlupa2-line); border-radius: 18px; background: #fff; box-shadow: 0 3px 14px rgba(20, 33, 58, .025); }
.xlupa2 .xlupa2__account-details { grid-area: details; }
.xlupa2 .xlupa2__account-legal { grid-area: legal; }
.xlupa2 .xlupa2__account-privacy { grid-area: privacy; }
.xlupa2 .xlupa2__account-history { grid-area: history; }
.xlupa2 .xlupa2__section-heading { margin-bottom: 20px; }
.xlupa2 .xlupa2__account-section h2 { font-size: 1.06rem; font-weight: 650; margin-bottom: 6px; }
.xlupa2 .xlupa2__section-heading p { margin: 0; color: var(--xlupa2-ink-soft); font-size: .85rem; }
.xlupa2 .xlupa2__account-section .xlupa2__form { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 18px; }
.xlupa2 .xlupa2__account-section .xlupa2__form label { font-weight: 600; }
.xlupa2 .xlupa2__account-section .xlupa2__form input:not([type=checkbox]):not([type=radio]) { min-height: 46px; border-radius: 10px !important; background: #fafbfc !important; font-size: .9375rem !important; }
.xlupa2 .xlupa2__account-section button { min-width: 0; min-height: 44px; border-radius: 10px; padding: 10px 16px; font-size: .875rem; box-shadow: none; }
.xlupa2 .xlupa2__verified-email { min-width: 0; padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--xlupa2-line); border-radius: 10px; background: #fafbfc; }
.xlupa2 .xlupa2__verified-email span { display: block; margin-bottom: 4px; color: var(--xlupa2-ink-soft); font-size: .76rem; }
.xlupa2 .xlupa2__verified-email strong { font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__agreement-intro { color: var(--xlupa2-ink-soft); font-size: .85rem; font-weight: 400; }
.xlupa2 .xlupa2__agreement-link { display: inline-flex; min-height: 44px; align-items: center; font-size: .875rem; }
.xlupa2 .xlupa2__agreement-scroll { background: #fafbfc; border-radius: 10px; padding: 20px; }
.xlupa2 .xlupa2__agreement-scroll a { display: inline; padding: 0; min-height: 0; border-radius: 0; background: none; font-weight: 500; text-decoration: underline; }
.xlupa2 .xlupa2__account-legal .xlupa2__agreement-check { font-weight: 500; line-height: 1.65; }
.xlupa2 .xlupa2__consent-help { margin: 0; color: var(--xlupa2-ink-soft); font-size: .83rem; }
.xlupa2 .xlupa2__consent-details { color: var(--xlupa2-ink-soft); font-size: .83rem; }
.xlupa2 .xlupa2__consent-details summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 500; }
.xlupa2 .xlupa2__consent-details p { margin: 6px 0; }
.xlupa2 .xlupa2__account-privacy > p,
.xlupa2 .xlupa2__erasure p { color: var(--xlupa2-ink-soft); font-size: .84rem; line-height: 1.6; }
.xlupa2 .xlupa2__account-privacy form { margin: 0; }
.xlupa2 .xlupa2__account-privacy button { width: 100%; }
.xlupa2 .xlupa2__erasure { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--xlupa2-line); }
.xlupa2 button.xlupa2__button--erasure { background: #e02424 !important; border-color: #e02424 !important; color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: none; }
.xlupa2 button.xlupa2__button--erasure:hover { background: #c91d1d !important; border-color: #c91d1d !important; }
.xlupa2 .xlupa2__consent-history { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.xlupa2 .xlupa2__consent-history li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 12px 0; border-top: 1px solid var(--xlupa2-line); font-size: .82rem; }
.xlupa2 .xlupa2__consent-history time { color: var(--xlupa2-ink-soft); font-variant-numeric: tabular-nums; }
.xlupa2 .xlupa2__decision { padding: 4px 9px; border-radius: 6px; font-size: .75rem; font-weight: 600; background: #f0f2f5; color: var(--xlupa2-ink-soft); }
.xlupa2 .xlupa2__decision--accepted { background: #eaf5ee; color: #17613b; }
.xlupa2 .xlupa2__history-link { align-items: center; min-height: 44px; margin-left: auto; padding: 8px 12px; border: 1px solid var(--xlupa2-line); border-radius: 9px; background: #fafbfc; font-size: .82rem; font-weight: 500; text-decoration: none; }
.xlupa2 .xlupa2__legal-anchor { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--xlupa2-line); border-radius: 10px; color: var(--xlupa2-ink-soft); font-weight: 500; font-size: .82rem; background: #fff; text-decoration: none; }
.xlupa2.xlupa2--personal-account .xlupa2__notice { font-size: .875rem; font-weight: 400; }
@media (max-width: 820px) {
    .xlupa2 .xlupa2__account-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'details' 'legal' 'privacy' 'history'; gap: 16px; }
    .xlupa2 .xlupa2__account-section { padding: 20px; }
}
@container (max-width: 780px) {
    .xlupa2 .xlupa2__account-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'details' 'legal' 'privacy' 'history'; gap: 16px; }
    .xlupa2 .xlupa2__account-section { padding: 20px; }
}
@media (max-width: 480px) {
    .xlupa2 .xlupa2__account-heading { align-items: start; margin-top: 22px; gap: 16px; }
    .xlupa2 .xlupa2__account-section { padding: 18px; border-radius: 14px; }
    .xlupa2 .xlupa2__access-notice { padding: 14px; }
    .xlupa2 .xlupa2__agreement-scroll { padding: 14px; }
    .xlupa2 .xlupa2__history-link { margin-left: 0; }
}
@media (forced-colors: active) {
    .xlupa2 .xlupa2__access-notice,
    .xlupa2 .xlupa2__decision { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
    .xlupa2 button.xlupa2__button--erasure { background: ButtonFace !important; border-color: ButtonText !important; color: ButtonText !important; -webkit-text-fill-color: ButtonText; }
}

/* Invoice editing and detail stay within the scoped XLUPA layout. */
.xlupa2 .xlupa2__invoice-editor{padding:18px;border:1px solid #dce4ee;border-radius:18px;background:#f8fafc;margin:20px 0}
.xlupa2 .xlupa2__invoice-editor summary{cursor:pointer;font-weight:700;color:#142a4d;min-height:44px;display:flex;align-items:center}
.xlupa2 .xlupa2__form fieldset.xlupa2__invoice-row{min-width:0;padding:18px;margin:18px 0;border:1px solid #dce4ee;border-radius:14px;background:#fff;display:grid;gap:16px}
.xlupa2 .xlupa2__form .xlupa2__invoice-row legend{padding:0 8px;font-size:.95rem;font-weight:800;color:#334765}
.xlupa2 .xlupa2__invoice-row-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #e3e9f1;flex-wrap:wrap}
.xlupa2 .xlupa2__invoice-row output{display:block;font-weight:700;margin:0;color:#142a4d}
.xlupa2 .xlupa2__form .xlupa2__invoice-row-footer button,.xlupa2 .xlupa2__form .xlupa2__invoice-add button{min-height:44px;padding:10px 14px;font-size:.875rem;border-radius:10px;box-shadow:none;line-height:1.25}
.xlupa2 .xlupa2__invoice-row-footer:has(output:empty):has(button[hidden]){display:none}
.xlupa2 .xlupa2__invoice-add{display:flex;margin:20px 0 24px}
.xlupa2 .xlupa2__invoice-add:has(button[hidden]){display:none}
.xlupa2 .xlupa2__invoice-adjustments{padding:20px 0;border-top:1px solid #dce4ee;gap:20px}
.xlupa2 .xlupa2__invoice-summary{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 20px;margin-top:8px;border-radius:12px;background:#193154;color:#fff;font-weight:700}
.xlupa2 .xlupa2__invoice-summary[hidden]{display:none}
.xlupa2 .xlupa2__invoice-summary output{font-size:1.35rem;font-weight:800;color:inherit;overflow-wrap:anywhere}
.xlupa2 .xlupa2__invoice-scan{padding:20px;border:1px solid #c9d6e8;border-radius:18px;background:#f3f7fc;margin-bottom:24px;min-width:0}
.xlupa2 .xlupa2__invoice-scan[hidden],.xlupa2 .xlupa2__invoice-scan [hidden]{display:none}
.xlupa2 .xlupa2__invoice-scan summary{cursor:pointer;min-height:44px;font-weight:800;color:#193154;display:flex;align-items:center}
.xlupa2 .xlupa2__scan-privacy{font-size:.9rem;color:#536781}
.xlupa2 .xlupa2__scan-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.xlupa2 .xlupa2__invoice-scan input[type=file]{width:100%;max-width:100%;font-size:.875rem;padding:12px;background:#fff}
.xlupa2 .xlupa2__invoice-scan progress{width:100%;height:12px;accent-color:#193154}
.xlupa2 .xlupa2__scan-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.xlupa2 .xlupa2__scan-document,.xlupa2 .xlupa2__scan-draft{min-width:0}
.xlupa2 .xlupa2__scan-document canvas{width:100%;height:auto;display:block;background:#fff;border:1px solid #dce4ee;border-radius:10px;margin:12px 0}
.xlupa2 .xlupa2__scan-document pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:.85rem;padding:12px;background:#fff;color:#142a4d}
.xlupa2 .xlupa2__scan-field{min-width:0;margin:0;padding:10px;background:#fff;border:1px solid #dce4ee;border-radius:12px;display:grid;gap:4px}
.xlupa2 .xlupa2__scan-draft{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px}
.xlupa2 .xlupa2__scan-field .xlupa2__check{min-width:0;font-size:.85rem;min-height:32px;gap:6px;overflow-wrap:anywhere}
.xlupa2 .xlupa2__scan-field input[data-xlupa2-scan-value]{padding:10px;font-size:1rem;min-width:0}
.xlupa2 .xlupa2__scan-document{padding:12px;background:#fff;border:1px solid #dce4ee;border-radius:12px}
.xlupa2 .xlupa2__scan-common-service{display:block;min-width:0;margin:18px 0;padding:12px;border:1px solid #c9d6e8;border-radius:12px;background:#fff}
.xlupa2 .xlupa2__scan-common-service small{display:block;min-width:0;margin-top:8px;overflow-wrap:anywhere}
.xlupa2 .xlupa2__scan-breakdown{margin:14px 0;padding:12px;background:#fff;border:1px solid #dce4ee;border-radius:12px}
.xlupa2 .xlupa2__scan-line-summary{display:flex;justify-content:space-between;gap:12px;color:#193154;font-weight:700}
.xlupa2 .xlupa2__scan-item-details{padding:0;border:0}
.xlupa2 .xlupa2__scan-item-details summary{font-size:.875rem;font-weight:600}
.xlupa2 .xlupa2__scan-item-details[open]{display:grid;gap:8px}
.xlupa2 .xlupa2__scan-item-details .xlupa2__two{margin-top:8px}
.xlupa2 .xlupa2__scan-warnings{padding:14px 14px 14px 30px;background:#fff2db;border-radius:10px;color:#60491c;overflow-wrap:anywhere}
.xlupa2 .xlupa2__scan-warnings:empty{display:none}
.xlupa2 .xlupa2__form fieldset.xlupa2__scan-item{padding:12px;border:1px solid #dce4ee;border-radius:12px;background:#fff;margin:12px 0;min-width:0;display:grid;gap:6px}
.xlupa2 .xlupa2__scan-item label{gap:4px;font-size:.9rem}
.xlupa2 .xlupa2__scan-item input,.xlupa2 .xlupa2__scan-item select{padding:10px}
.xlupa2 .xlupa2__scan-item legend{font-weight:800;padding:0 8px;color:#193154}
.xlupa2 .xlupa2__invoice-scan button{min-height:44px;white-space:normal}
@media(max-width:680px){.xlupa2 .xlupa2__scan-layout{grid-template-columns:minmax(0,1fr)}.xlupa2 .xlupa2__invoice-scan{padding:12px}}
.xlupa2 .xlupa2__invoice-table{width:100%;border-collapse:collapse;table-layout:fixed;margin:24px 0}
.xlupa2 .xlupa2__invoice-table caption{text-align:left;font-weight:800;font-size:1.2rem;padding:14px 0;color:#142a4d}
.xlupa2 .xlupa2__invoice-table th,.xlupa2 .xlupa2__invoice-table td{padding:12px;border-bottom:1px solid #dce4ee;overflow-wrap:anywhere;text-align:right;vertical-align:top}
.xlupa2 .xlupa2__invoice-table th:first-child,.xlupa2 .xlupa2__invoice-table td:first-child{width:46%;text-align:left}
.xlupa2 .xlupa2__invoice-table th{background:#edf2f8;color:#142a4d}
.xlupa2 .xlupa2__invoice-totals{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:440px;margin:20px 0 20px auto;padding:18px;background:#edf2f8;border-radius:14px}
.xlupa2 .xlupa2__invoice-totals dt,.xlupa2 .xlupa2__invoice-totals dd{margin:0;overflow-wrap:anywhere}.xlupa2 .xlupa2__invoice-totals dd{text-align:right}
.xlupa2 .xlupa2__service-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.xlupa2 .xlupa2__service-tags span{padding:6px 10px;border-radius:10px;background:#edf2f8;color:#334765;font-size:.85rem}
.xlupa2 .xlupa2__sample{font-size:.82rem;color:#66758a;margin:12px 0}
@media(max-width:600px){.xlupa2 .xlupa2__invoice-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.xlupa2 .xlupa2__invoice-table,.xlupa2 .xlupa2__invoice-table tbody,.xlupa2 .xlupa2__invoice-table tr,.xlupa2 .xlupa2__invoice-table td{display:block;width:100%;box-sizing:border-box}.xlupa2 .xlupa2__invoice-table tr{padding:12px;border:1px solid #dce4ee;border-radius:12px;margin:12px 0}.xlupa2 .xlupa2__invoice-table td,.xlupa2 .xlupa2__invoice-table td:first-child{width:100%;display:grid;grid-template-columns:42% 1fr;gap:10px;text-align:right;padding:8px 0;border:0}.xlupa2 .xlupa2__invoice-table td::before{content:attr(data-label);text-align:left;font-weight:600;color:#66758a}.xlupa2 .xlupa2__invoice-table td:first-child{text-align:left}.xlupa2 .xlupa2__invoice-editor{padding:12px}.xlupa2 .xlupa2__invoice-totals{max-width:none}}

/* Optional reminders stay quiet within their service item. */
.xlupa2 .xlupa2__form fieldset.xlupa2__schedule-editor{margin:8px 0;padding:0;border:0;background:transparent}
.xlupa2 .xlupa2__schedule-cards{display:grid;gap:16px}
.xlupa2 .xlupa2__schedule-guidance{color:var(--xlupa2-ink-soft);font-size:.85rem}
.xlupa2 .xlupa2__schedule-row{min-width:0;margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--xlupa2-line);border-radius:0;background:transparent;box-shadow:none}
.xlupa2 .xlupa2__schedule-row>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;list-style:none;cursor:pointer}
.xlupa2 .xlupa2__schedule-row>summary::-webkit-details-marker{display:none}
.xlupa2 .xlupa2__schedule-row>summary:focus:not(:focus-visible){outline:none}
.xlupa2 .xlupa2__schedule-row>summary:focus-visible{outline:2px solid var(--xlupa2-brand);outline-offset:4px;border-radius:4px}
.xlupa2 .xlupa2__reminder-overview{display:grid;gap:3px;min-width:0}
.xlupa2 .xlupa2__reminder-label{font-size:.87rem;font-weight:650}
.xlupa2 .xlupa2__reminder-label small{display:inline;margin:0;white-space:nowrap;font-size:.8rem;font-weight:400;color:var(--xlupa2-ink-soft)}
.xlupa2 .xlupa2__reminder-value{font-size:.86rem;font-weight:400;color:var(--xlupa2-ink-soft);overflow-wrap:anywhere}
.xlupa2 .xlupa2__reminder-edit{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--xlupa2-brand);font-size:.85rem;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.xlupa2 .xlupa2__reminder-fields{display:grid;gap:12px;padding-top:16px}
.xlupa2 .xlupa2__reminder-fields small{color:var(--xlupa2-ink-soft);line-height:1.5}
.xlupa2 .xlupa2__reminder-actions{display:flex;flex-wrap:wrap;gap:8px 20px}
.xlupa2 .xlupa2__reminder-actions:has(>button[hidden]+button[hidden]){display:none}
.xlupa2 .xlupa2__form button.xlupa2__reminder-button{min-height:44px;width:auto;margin:0;padding:8px 0;border:0!important;border-radius:0;background:transparent!important;color:var(--xlupa2-ink-soft)!important;-webkit-text-fill-color:var(--xlupa2-ink-soft);box-shadow:none;font-size:.82rem!important;font-weight:500!important;text-decoration:underline!important;text-underline-offset:3px;transform:none}
.xlupa2 .xlupa2__form button.xlupa2__reminder-button--remove{color:var(--xlupa2-danger)!important;-webkit-text-fill-color:var(--xlupa2-danger)}
.xlupa2 .xlupa2__invoice-service-label{display:block;font-size:.85em;color:#66758a;margin-top:4px}

@media(max-width:600px){.xlupa2 .xlupa2__invoice-table caption{display:block;width:100%;box-sizing:border-box}}

/* Unified service entry: one list shared by manual input and invoice recognition. */
.xlupa2 .xlupa2__service-items{min-width:0;padding:18px;background:var(--xlupa2-surface-brand);border-radius:16px}
.xlupa2 .xlupa2__service-items h2{margin-top:0}
.xlupa2 .xlupa2__form fieldset.xlupa2__service-item{display:grid;gap:12px;min-width:0;margin:16px 0;padding:16px;border:1px solid var(--xlupa2-line-strong);border-radius:14px;background:#fff}
.xlupa2 .xlupa2__service-item legend{font-weight:750;padding:0 7px;color:var(--xlupa2-ink)}
.xlupa2 .xlupa2__service-item label{min-width:0;margin:0}
.xlupa2 .xlupa2__service-item input,.xlupa2 .xlupa2__service-item select,.xlupa2 .xlupa2__service-item textarea{min-width:0;width:100%;box-sizing:border-box}
.xlupa2 .xlupa2__service-item textarea{min-height:76px;line-height:1.45}
.xlupa2 .xlupa2__item-pricing{min-width:0;padding:10px 12px;border-radius:10px;background:#f4f7fb}
.xlupa2 [data-item-status]{color:#a32823;margin:0}
.xlupa2 .xlupa2__scanned-value{outline:2px solid #7597c5;outline-offset:1px}
.xlupa2 [data-service-total]{font-weight:650;color:var(--xlupa2-ink-soft)}
.xlupa2 [data-xlupa2-scan-document] canvas{display:block;max-width:100%;height:auto}
.xlupa2 [data-xlupa2-scan-text]{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto}
@media(max-width:680px){.xlupa2 .xlupa2__form--maintenance{padding:14px}.xlupa2 .xlupa2__service-items{padding:0;background:transparent}.xlupa2 .xlupa2__form fieldset.xlupa2__service-item{padding:12px}.xlupa2 .xlupa2__service-item .xlupa2__two{grid-template-columns:minmax(0,1fr)}}

/* Keep quick fuel entry short; optional fields use native details without JS. */
.xlupa2 .xlupa2__fuel-heading { margin: 22px 0 12px; }
.xlupa2 .xlupa2__fuel-heading h1 { margin: 4px 0 14px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.xlupa2 .xlupa2__main details > label { display: block; margin-top: 18px; }
.xlupa2 .xlupa2__main summary { cursor: pointer; font-weight: 700; }
.xlupa2 .xlupa2__main dd { margin: 4px 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

.xlupa2__fuel-brand-logo{object-fit:contain;max-width:100%;margin:.5rem 0}
.xlupa2__fuel-brand-logo[hidden]{display:none}
.xlupa2__fuel-choice-search{margin-bottom:1rem}

/* RC2 polish: layouts follow the app's own width inside any theme, not the viewport. */
.xlupa2 { container: xlupa2 / inline-size; }
.xlupa2 .xlupa2__nowrap { white-space: nowrap; }
.xlupa2 .xlupa2__fine-print { margin: -10px 0 22px; color: var(--xlupa2-ink-soft); font-size: .8rem; line-height: 1.5; }

/* Compact signed-in header: brand and account share one row on phones. */
.xlupa2 .xlupa2__account-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container xlupa2 (max-width: 560px) {
    .xlupa2 .xlupa2__header { grid-template-columns: max-content minmax(0, 1fr); gap: 10px 12px; margin-bottom: 16px; }
    .xlupa2 .xlupa2__account { grid-column: 2; grid-row: 1; justify-self: end; padding: 4px 12px 4px 4px; box-shadow: none; }
    .xlupa2 .xlupa2__account .xlupa2__avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: .85rem; }
    .xlupa2 .xlupa2__account small { display: none; }
    .xlupa2 .xlupa2__account-text > span { font-size: .8rem; font-weight: 650; }
    .xlupa2 .xlupa2__brand > span { width: 36px; height: 36px; border-radius: 12px; }
    .xlupa2 .xlupa2__install { margin: 0 0 18px; padding: 8px 8px 8px 14px; border-radius: 14px; }
    .xlupa2 .xlupa2__install-label { font-size: .8rem; }
    .xlupa2 .xlupa2__install > button { min-height: 40px; padding: 8px 12px; font-size: .82rem !important; box-shadow: none; }
}

/* Summary tiles: whole figures, never split mid-number. */
.xlupa2 .xlupa2__stats strong { overflow-wrap: normal; white-space: nowrap; font-size: clamp(1.1rem, 4.2cqi, 1.6rem); }
.xlupa2 .xlupa2__stats strong .xlupa2__button { width: 100%; white-space: nowrap; }
.xlupa2 .xlupa2__stats span { line-height: 1.35; }
@container xlupa2 (max-width: 760px) {
    .xlupa2 .xlupa2__stats:not(.xlupa2__garage-stats) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vehicle cards: one primary action, then an even grid of secondary actions. */
@container xlupa2 (max-width: 640px) { .xlupa2 .xlupa2__grid { grid-template-columns: minmax(0, 1fr); } }
.xlupa2 .xlupa2__card > h2 { margin-bottom: 6px; font-size: 1.2rem; letter-spacing: -.01em; }
.xlupa2 .xlupa2__card dl div { align-content: start; }
.xlupa2 .xlupa2__card-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.xlupa2 .xlupa2__card-note .xlupa2__icon { flex-basis: 16px; width: 16px; height: 16px; color: var(--xlupa2-ink-soft); }
.xlupa2 .xlupa2__card-note strong { color: var(--xlupa2-ink); font-weight: 650; }
.xlupa2 .xlupa2__card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.xlupa2 .xlupa2__card-actions > a { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: .88rem !important; }
.xlupa2 .xlupa2__card-actions > a .xlupa2__icon { flex-basis: 16px; width: 16px; height: 16px; }
.xlupa2 .xlupa2__card-actions > .xlupa2__card-primary { grid-column: 1 / -1; min-height: 48px; font-size: .95rem !important; }
.xlupa2 .xlupa2__card-actions > .xlupa2__button--secondary { box-shadow: none; }

/* Next service: label, status and one readable target line. */
.xlupa2 div.xlupa2__next-service { display: grid; gap: 2px; margin: 0; border: 1px solid transparent; }
.xlupa2 div.xlupa2__next-service p { margin: 0; }
.xlupa2 .xlupa2__next-service-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--xlupa2-ink-soft); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.xlupa2 .xlupa2__next-service-labels { color: var(--xlupa2-ink); font-weight: 650; line-height: 1.4; }
.xlupa2 .xlupa2__next-service-target { color: var(--xlupa2-brand-dark); font-weight: 750; }
.xlupa2 div.xlupa2__next-service > a { justify-self: start; margin-top: 6px; color: var(--xlupa2-accent); font-size: .85rem; font-weight: 650; text-underline-offset: 3px; }
.xlupa2 .xlupa2__next-service--overdue { border-color: #f3c9c3 !important; background: var(--xlupa2-danger-soft); }
.xlupa2 .xlupa2__next-service--due { border-color: #f1d39a !important; background: #fff7e6; }
.xlupa2 .xlupa2__due-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: .72rem; letter-spacing: 0; text-transform: none; }
.xlupa2 .xlupa2__due-badge--overdue { background: var(--xlupa2-danger); color: #fff; }
.xlupa2 .xlupa2__due-badge--due { background: #8a5a00; color: #fff; }
.xlupa2 .xlupa2__due-badge--upcoming { background: var(--xlupa2-brand); color: #fff; }

/* Garage shortcuts wrap evenly at any width. */
.xlupa2 .xlupa2__quick-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-bottom: 4px; }
.xlupa2 .xlupa2__quick-link { min-height: 60px; }
.xlupa2 .xlupa2__quick-icon .xlupa2__icon { width: 22px; height: 22px; }

/* Record cards: meta wraps without orphaned separators; one tidy action row. */
.xlupa2 .xlupa2__record-meta { gap: 4px 14px; }
.xlupa2 .xlupa2__record-meta span + span::before { content: none; }
.xlupa2 .xlupa2__record-meta span + span { color: var(--xlupa2-ink-soft); }
.xlupa2 .xlupa2__record p:not([class]) { margin-bottom: 8px; }
.xlupa2 .xlupa2__record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--xlupa2-line); }
.xlupa2 .xlupa2__record-actions > a,
.xlupa2 .xlupa2__record-actions > form { flex: 0 0 auto !important; }
.xlupa2 .xlupa2__record-actions .xlupa2__button--secondary { box-shadow: none; }
.xlupa2 .xlupa2__record-actions > form:last-child { margin-left: auto !important; }
.xlupa2 .xlupa2__record-actions .xlupa2__button--quiet-danger { width: auto !important; border-color: transparent !important; background: transparent !important; }
.xlupa2 .xlupa2__record-actions .xlupa2__button--quiet-danger:hover { border-color: #f5cdc7 !important; background: var(--xlupa2-danger-soft) !important; }

@media (forced-colors: active) {
    .xlupa2 .xlupa2__due-badge { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .xlupa2 .xlupa2__next-service--overdue,
    .xlupa2 .xlupa2__next-service--due { border-color: CanvasText !important; }
}

/* Account chip: full sentence on wide layouts, name only on phones. */
.xlupa2 .xlupa2__account-name { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 650; }
@container xlupa2 (max-width: 560px) {
    .xlupa2 .xlupa2__account-full { display: none; }
    .xlupa2 .xlupa2__account-name { display: block; }
}
.xlupa2 div.xlupa2__next-service > a { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; }

/* Owner search: essentials first, the rest one tap away. */
.xlupa2 .xlupa2__more-filters { min-width: 0; padding: 0; border-top: 1px solid var(--xlupa2-line); }
.xlupa2 .xlupa2__more-filters > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; color: var(--xlupa2-brand); cursor: pointer; font-weight: 700; list-style: none; }
.xlupa2 .xlupa2__more-filters > summary::-webkit-details-marker { display: none; }
.xlupa2 .xlupa2__more-filters > summary::before { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; content: ""; }
.xlupa2 .xlupa2__more-filters[open] > summary::before { transform: rotate(45deg); }
.xlupa2 .xlupa2__more-filters > summary:focus-visible { outline: 3px solid var(--xlupa2-focus); outline-offset: 2px; border-radius: 6px; }
.xlupa2 .xlupa2__more-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; padding: 4px 0 8px; }
.xlupa2 .xlupa2__filter-actions .xlupa2__button--secondary { box-shadow: none; }

/* Fuel: summary tiles and scannable purchase rows. */
.xlupa2 .xlupa2__fuel-nav { margin-top: 18px; }
.xlupa2 .xlupa2__fuel-heading .xlupa2__fuel-nav { margin-top: 0; }
.xlupa2 .xlupa2__fuel-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.xlupa2 .xlupa2__fuel-economy span { overflow-wrap: anywhere; }
@container xlupa2 (max-width: 560px) {
    .xlupa2 .xlupa2__fuel-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .xlupa2 .xlupa2__fuel-economy { grid-column: 1 / -1; }
}
.xlupa2 .xlupa2__fuel-filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; margin-bottom: 22px; }
.xlupa2 .xlupa2__fuel-filters > button { justify-self: stretch; }
.xlupa2 .xlupa2__fuel-reasons { margin: -12px 0 18px; padding-inline-start: 18px; }
.xlupa2 .xlupa2__fuel-list { display: grid; gap: 10px; }
.xlupa2 .xlupa2__fuel-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--xlupa2-line); border-radius: 18px; background: var(--xlupa2-surface); box-shadow: var(--xlupa2-shadow-soft); transition: border-color .18s ease; }
.xlupa2 .xlupa2__fuel-row:hover { border-color: var(--xlupa2-tint-line); }
.xlupa2 .xlupa2__fuel-row h2 { margin: 0; font-size: 1rem; font-weight: 750; }
.xlupa2 .xlupa2__fuel-row h2 a { color: var(--xlupa2-ink); text-decoration: none; }
.xlupa2 .xlupa2__fuel-row h2 a::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.xlupa2 .xlupa2__fuel-row h2 a:focus-visible { outline: none; }
.xlupa2 .xlupa2__fuel-row:has(a:focus-visible) { outline: 3px solid var(--xlupa2-focus); outline-offset: 2px; }
.xlupa2 .xlupa2__fuel-row p { margin: 2px 0 0; color: var(--xlupa2-ink-soft); font-size: .86rem; }
.xlupa2 .xlupa2__fuel-row .xlupa2__quick-icon .xlupa2__icon { width: 20px; height: 20px; }
.xlupa2 .xlupa2__fuel-amount { display: grid; justify-items: end; margin: 0 !important; white-space: nowrap; }
.xlupa2 .xlupa2__fuel-amount strong { color: var(--xlupa2-ink); font-size: 1rem; }
.xlupa2 .xlupa2__fuel-detail dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; margin: 16px 0; }
.xlupa2 .xlupa2__fuel-detail dt,
.xlupa2 .xlupa2__fuel-detail dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--xlupa2-line); }
.xlupa2 .xlupa2__fuel-detail dd { font-weight: 650; white-space: pre-wrap; overflow-wrap: anywhere; }
.xlupa2 .xlupa2__fuel-detail-actions { display: grid; gap: 16px; margin-top: 18px; }
.xlupa2 .xlupa2__fuel-detail-actions > a { justify-self: start; }
.xlupa2 .xlupa2__fuel-delete { display: grid; gap: 10px; padding: 14px; border: 1px solid #f3d3ce; border-radius: 14px; background: var(--xlupa2-danger-soft); }
.xlupa2 .xlupa2__fuel-delete button { justify-self: start; }
@media (forced-colors: active) { .xlupa2 .xlupa2__fuel-row { border-color: CanvasText; } }
.xlupa2 .xlupa2__fuel-filters .xlupa2__more-filters { grid-column: 1 / -1; }
.xlupa2 .xlupa2__schedule-explanation { margin-bottom: 4px; color: var(--xlupa2-ink); font-size: .92rem; }
.xlupa2 .xlupa2__schedule-source { color: var(--xlupa2-ink-soft); font-size: .84rem; }

/* Disclosure rows read as expandable sections, not empty fields. */
.xlupa2 :is(.xlupa2__invoice-scan, .xlupa2__invoice-editor) > summary { position: relative; justify-content: space-between; gap: 12px; padding-inline-end: 34px; list-style: none; }
.xlupa2 :is(.xlupa2__invoice-scan, .xlupa2__invoice-editor) > summary::-webkit-details-marker { display: none; }
.xlupa2 :is(.xlupa2__invoice-scan, .xlupa2__invoice-editor) > summary::after { position: absolute; top: 50%; right: 6px; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--xlupa2-brand); border-bottom: 2px solid var(--xlupa2-brand); transform: rotate(45deg); transition: transform .15s ease; content: ""; }
.xlupa2 :is(.xlupa2__invoice-scan, .xlupa2__invoice-editor)[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.xlupa2 :is(.xlupa2__invoice-scan, .xlupa2__invoice-editor) > summary:focus-visible { outline: 3px solid var(--xlupa2-focus); outline-offset: 4px; border-radius: 6px; }
.xlupa2 .xlupa2__invoice-scan { padding: 14px 18px; border-style: dashed; border-width: 1.5px; }
.xlupa2 .xlupa2__invoice-scan[open] { border-style: solid; }
.xlupa2 .xlupa2__invoice-editor { padding: 12px 18px; background: var(--xlupa2-surface); }

/* Garage shortcuts as one grouped list; vehicle name and plate on one line. */
.xlupa2 .xlupa2__quick-links { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--xlupa2-line); border-radius: 18px; background: var(--xlupa2-surface); box-shadow: var(--xlupa2-shadow-soft); }
.xlupa2 .xlupa2__quick-link { min-height: 58px; border: 0; border-radius: 0; box-shadow: none; }
.xlupa2 .xlupa2__quick-link + .xlupa2__quick-link { border-top: 1px solid var(--xlupa2-line); }
.xlupa2 .xlupa2__quick-link:hover { background: var(--xlupa2-surface-soft); transform: none; }
.xlupa2 .xlupa2__quick-link:focus-visible { outline: 3px solid var(--xlupa2-focus); outline-offset: -3px; }
.xlupa2 .xlupa2__quick-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; }
.xlupa2 .xlupa2__card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.xlupa2 .xlupa2__card-title h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.01em; }
.xlupa2 .xlupa2__card-title .xlupa2__plate { margin: 0; }
.xlupa2 .xlupa2__account-section > .xlupa2__section-heading:first-child { margin-top: 0; }
/* Amounts may wrap only after "RM"; digits are never broken. */
.xlupa2 .xlupa2__stats strong { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
@container xlupa2 (max-width: 360px) {
    .xlupa2 .xlupa2__stats div { padding: 12px 10px; }
    .xlupa2 .xlupa2__stats strong { font-size: 1.05rem; }
    .xlupa2 .xlupa2__stats strong .xlupa2__button { padding-inline: 8px; white-space: normal; }
}

/* RC2.1 fuel brand marks: one fixed tile, logo contained and centred, icon fallback. */
.xlupa2 .xlupa2__fuel-mark { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 14px; background: var(--xlupa2-surface-brand); color: var(--xlupa2-brand); }
.xlupa2 .xlupa2__fuel-mark .xlupa2__icon { width: 20px; height: 20px; }
.xlupa2 .xlupa2__fuel-mark--logo { border: 1px solid var(--xlupa2-line); background: #fff; }
.xlupa2 .xlupa2__fuel-mark img { display: block; width: 34px; height: 34px; max-width: none; object-fit: contain; }
.xlupa2 .xlupa2__story-entry { white-space: nowrap; }

/* RC2.1 monthly fuel story studio. */
.xlupa2 .xlupa2__story-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; gap: 12px; margin: 0 0 18px; }
.xlupa2 .xlupa2__story-picker label { display: grid; gap: 6px; font-size: .85rem; font-weight: 650; }
.xlupa2 .xlupa2__story-picker select { min-height: 46px; padding: 8px 12px; border: 1px solid var(--xlupa2-line-strong); border-radius: 12px; background: #fff; font: inherit; }
.xlupa2 .xlupa2__story-picker button { min-height: 46px; box-shadow: none; }
.xlupa2 .xlupa2__story-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@container xlupa2 (max-width: 760px) { .xlupa2 .xlupa2__story-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xlupa2 .xlupa2__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px; }
@container xlupa2 (max-width: 760px) { .xlupa2 .xlupa2__story { grid-template-columns: minmax(0, 1fr); } }
/* The preview stays beside the controls only in the two-column layout; on phones it scrolls with the page. */
.xlupa2 .xlupa2__story-viewer { position: relative; min-width: 0; }
@container xlupa2 (min-width: 761px) { .xlupa2 .xlupa2__story-viewer { position: sticky; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 1; align-self: start; } }
.xlupa2 .xlupa2__story-track { display: grid; grid-auto-columns: 100%; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px; }
.xlupa2 .xlupa2__story-track::-webkit-scrollbar { display: none; }
.xlupa2 .xlupa2__story-track:focus-visible { outline: 3px solid var(--xlupa2-focus); outline-offset: 4px; }
.xlupa2 .xlupa2__story-slide { margin: 0; scroll-snap-align: start; }
.xlupa2 .xlupa2__story-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 26px; background: var(--xlupa2-surface-brand); box-shadow: 0 30px 60px -30px rgba(13, 27, 52, .55); }
.xlupa2 .xlupa2__story-dots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.xlupa2 button.xlupa2__story-dot { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none; }
.xlupa2 button.xlupa2__story-dot::before { display: block; width: 8px; height: 8px; margin: auto; border-radius: 999px; background: var(--xlupa2-line-strong); transition: width .2s ease, background-color .2s ease; content: ""; }
.xlupa2 button.xlupa2__story-dot[aria-current="true"]::before { width: 22px; background: var(--xlupa2-brand); }
.xlupa2 button.xlupa2__story-dot:hover { transform: none; }
.xlupa2 .xlupa2__story-controls { display: grid; gap: 18px; min-width: 0; }
.xlupa2 .xlupa2__story-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.xlupa2 .xlupa2__story-controls legend { margin-bottom: 10px; padding: 0; color: var(--xlupa2-ink-soft); font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.xlupa2 .xlupa2__story-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.xlupa2 .xlupa2__story-theme { position: relative; cursor: pointer; }
.xlupa2 .xlupa2__story-theme input { position: absolute; opacity: 0; pointer-events: none; }
.xlupa2 .xlupa2__story-theme span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 10px; border: 1.5px solid var(--xlupa2-line); border-radius: 999px; background: #fff; font-size: .88rem; font-weight: 700; }
.xlupa2 .xlupa2__story-theme span::before { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); content: ""; }
.xlupa2 .xlupa2__story-theme--navy span::before { background: linear-gradient(140deg, #2b5089, #0b1730); }
.xlupa2 .xlupa2__story-theme--midnight span::before { background: linear-gradient(140deg, #1d2333, #08090c); }
.xlupa2 .xlupa2__story-theme--light span::before { background: linear-gradient(140deg, #fff, #e4ebf5); }
.xlupa2 .xlupa2__story-theme input:checked + span { border-color: var(--xlupa2-brand); box-shadow: inset 0 0 0 1px var(--xlupa2-brand); }
.xlupa2 .xlupa2__story-theme input:focus-visible + span { outline: 3px solid var(--xlupa2-focus); outline-offset: 2px; }
.xlupa2 .xlupa2__story-options { overflow: hidden; border: 1px solid var(--xlupa2-line) !important; border-radius: 18px !important; background: #fff; }
.xlupa2 .xlupa2__story-options legend { float: left; width: 100%; margin: 0; padding: 14px 16px 6px; }
.xlupa2 .xlupa2__switch { display: flex; clear: both; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 8px 16px; border-top: 1px solid var(--xlupa2-line); cursor: pointer; }
.xlupa2 .xlupa2__switch > span { display: grid; min-width: 0; font-weight: 650; }
.xlupa2 .xlupa2__switch small { color: var(--xlupa2-ink-soft); font-size: .78rem; font-weight: 400; }
.xlupa2 .xlupa2__switch input { appearance: none; position: relative; flex: 0 0 52px; width: 52px; height: 30px; margin: 0; border-radius: 999px; background: var(--xlupa2-line-strong); cursor: pointer; transition: background-color .18s ease; }
.xlupa2 .xlupa2__switch input::after { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s ease; content: ""; }
.xlupa2 .xlupa2__switch input:checked { background: var(--xlupa2-brand); }
.xlupa2 .xlupa2__switch input:checked::after { transform: translateX(22px); }
.xlupa2 .xlupa2__switch input:focus-visible { outline: 3px solid var(--xlupa2-focus); outline-offset: 2px; }
.xlupa2 .xlupa2__story-share { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
@container xlupa2 (max-width: 420px) { .xlupa2 .xlupa2__story-share { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .xlupa2 .xlupa2__story-track { scroll-behavior: auto; } }
@media (forced-colors: active) {
    .xlupa2 .xlupa2__switch input { border: 1px solid CanvasText; }
    .xlupa2 .xlupa2__switch input:checked { background: Highlight; }
    .xlupa2 .xlupa2__story-theme input:checked + span { border-color: Highlight; }
}
.xlupa2 .xlupa2__story-page.is-story-ready .xlupa2__story-summary { display: none; }
.xlupa2 .xlupa2__story-picker.is-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xlupa2 .xlupa2__story-picker.is-live button { display: none !important; }
.xlupa2 .xlupa2__fuel-row > div { min-width: 0; }
.xlupa2 .xlupa2__fuel-row h2 a { overflow-wrap: break-word; }