:root {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: #192b45;
    background: #edf3f9;
    font-size: 15px;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.layout { display: flex; min-height: 100vh; }
.sidebar {
    width: 250px;
    background: linear-gradient(160deg, #1a2a40, #111c2c);
    color: #d3e0f1;
    flex: none;
    padding: 26px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.brand { font-size: 21px; color: white; font-weight: 800; padding: 0 12px; }
.brand span { color: #76b7ff; }
.nav { display: grid; gap: 5px; }
.nav a { padding: 13px 15px; border-radius: 9px; font-weight: 600; font-size: 14px; }
.nav a:hover, .nav a.active { background: #315889; color: #fff; }
.sidebarfoot { margin-top: auto; padding: 12px; background: #20334c; border-radius: 14px; font-size: 13px; }
.main { padding: 30px; max-width: 1650px; flex: 1; min-width: 0; }

.top { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; }
.top h1 { font-size: 29px; margin: 0 0 5px; letter-spacing: -.7px; }
.muted { color: #71829b; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.control, input, select, textarea {
    border: 1px solid #d9e4ef;
    border-radius: 9px;
    background: #fff;
    padding: 11px;
    color: #203451;
    min-width: 0;
}
.btn { border: 0; padding: 11px 16px; border-radius: 9px; font-weight: 700; background: #246de0; color: #fff; }
.btn.secondary { background: #e8f0fb; color: #2869c4; }
.btn.danger { background: #fff1f1; color: #cc3e44; }
.btn:hover { filter: brightness(.96); }
.btn-upload { margin-top: 12px; }
.link-primary { color: #246de0; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card, .panel {
    background: white;
    border: 1px solid #e5edf6;
    border-radius: 15px;
    box-shadow: 0 6px 24px rgba(35, 65, 102, .04);
}
.card { padding: 19px; display: flex; align-items: center; gap: 15px; }
.icon { font-size: 25px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 13px; flex: none; }
.fuel-bg { background: #ffe9eb; }
.charge-bg { background: #ddf8e9; }
.vignette-bg { background: #e5f1ff; }
.sum-bg { background: #e2f0ff; }
.label { font-size: 13px; color: #63758f; }
.value { font-size: 24px; color: #122b56; font-weight: 800; margin-top: 5px; white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; margin-top: 16px; }
.panel { padding: 20px; min-width: 0; }
.panel h2 { font-size: 18px; margin: 0 0 18px; }

/* The chart keeps the original appearance, using SVG geometry instead of inline CSS. */
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #687b92; }
.dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; }
.dot-fuel, .chart-segment-fuel { background: #3986ed; fill: #3986ed; }
.dot-charge, .chart-segment-charge { background: #30b67d; fill: #30b67d; }
.dot-vignette, .chart-segment-vignette { background: #ffaa4e; fill: #ffaa4e; }
.dot-other, .chart-segment-other { background: #a1a9bd; fill: #a1a9bd; }
.chart { height: 240px; display: flex; align-items: flex-end; gap: 9px; padding: 15px 0 25px; border-bottom: 1px solid #dbe5f0; }
.barwrap { flex: 1; min-width: 0; text-align: center; position: relative; height: 100%; }
.chart-bar { width: 100%; height: 100%; display: block; overflow: hidden; }
.monthlabel { font-size: 11px; position: absolute; bottom: -23px; left: 0; right: 0; color: #71829b; }

.donut { width: 200px; height: 200px; margin: 20px auto; position: relative; display: grid; place-items: center; }
.donut-ring { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-ring circle { fill: none; stroke-width: 39px; }
.donut-track { stroke: #a1a9bd; }
.donut-segment-fuel { stroke: #3986ed; }
.donut-segment-charge { stroke: #30b67d; }
.donut-segment-vignette { stroke: #ffaa4e; }
.donut-segment-other { stroke: #a1a9bd; }
.hole {
    position: relative;
    z-index: 1;
    background: white;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
    color: #203451;
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #ecf1f6; }
.row:last-child { border: 0; }
.small { font-size: 12px; }
.statbig { font-size: 25px; font-weight: 800; color: #183c72; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 13px; }
.field.full { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.tablewrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; background: #f1f6fb; color: #4c6483; }
th, td { padding: 11px; border-bottom: 1px solid #e8eef5; white-space: nowrap; }
.notice { padding: 12px 15px; border-radius: 9px; background: #e2f7e9; color: #126b3a; margin-bottom: 17px; }
.notice.error { background: #ffedef; color: #a52b37; }
.empty { padding: 45px 20px; text-align: center; color: #7d8ca1; }
.tag { font-size: 12px; background: #e8f1fc; color: #366aa8; padding: 5px 8px; border-radius: 6px; }

/* Performance Garage – isolated login experience. Application UI stays untouched. */
.loginpage {
    --garage-padding: clamp(12px, 2.2vw, 34px);
    --garage-text: #f7faff;
    --garage-muted: #cbd4e1;
    --garage-blue: #318cff;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--garage-padding);
    background: #070e19;
    color: var(--garage-text);
}

.garage-scene {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: calc(100svh - 2 * var(--garage-padding));
    overflow: hidden;
    border: 1px solid rgb(192 211 231 / 18%);
    border-radius: 21px;
    background: #101925;
    box-shadow: 0 28px 90px rgb(0 0 0 / 42%);
}

.garage-scenery {
    position: absolute;
    inset: -9px;
    z-index: -2;
    background: url('?page=login_media&name=garage-desktop') center / cover no-repeat;
    transform: scale(1.025);
    transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* Gentle lights, not a video strip laid over the photograph. */
.garage-scene::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(2 7 15 / 38%), transparent 35%, rgb(3 8 15 / 20%) 100%);
    content: '';
    pointer-events: none;
}
.garage-scene::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #050b12;
    animation: garage-lights-on 1.7s ease-out both;
    content: '';
    pointer-events: none;
}
@keyframes garage-lights-on {
    from { opacity: .82; }
    to { opacity: 0; }
}

.garage-lighting {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.garage-lighting::before,
.garage-lighting::after {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 360ms ease;
    content: '';
}
.garage-lighting::before {
    background:
        radial-gradient(ellipse 9% 7% at 20% 50%, rgb(150 211 255 / 49%), transparent 85%),
        radial-gradient(ellipse 11% 8% at 31% 51%, rgb(111 188 255 / 35%), transparent 85%);
    mix-blend-mode: screen;
}
.garage-lighting::after {
    background:
        radial-gradient(ellipse 12% 11% at 83% 60%, rgb(252 194 80 / 30%), transparent 90%),
        radial-gradient(ellipse 14% 14% at 75% 74%, rgb(241 152 49 / 12%), transparent 95%);
    mix-blend-mode: screen;
}
.garage-scene[data-active='car'] .garage-lighting::before,
.garage-scene[data-active='bike'] .garage-lighting::after { opacity: 1; }

/* Small responsive parallax steps avoid inline styles and keep the artwork sharp. */
.garage-scene[data-tilt='lt'] .garage-scenery { transform: translate3d(7px, 5px, 0) scale(1.025); }
.garage-scene[data-tilt='ct'] .garage-scenery { transform: translate3d(0, 5px, 0) scale(1.025); }
.garage-scene[data-tilt='rt'] .garage-scenery { transform: translate3d(-7px, 5px, 0) scale(1.025); }
.garage-scene[data-tilt='lc'] .garage-scenery { transform: translate3d(7px, 0, 0) scale(1.025); }
.garage-scene[data-tilt='rc'] .garage-scenery { transform: translate3d(-7px, 0, 0) scale(1.025); }
.garage-scene[data-tilt='lb'] .garage-scenery { transform: translate3d(7px, -5px, 0) scale(1.025); }
.garage-scene[data-tilt='cb'] .garage-scenery { transform: translate3d(0, -5px, 0) scale(1.025); }
.garage-scene[data-tilt='rb'] .garage-scenery { transform: translate3d(-7px, -5px, 0) scale(1.025); }
.garage-scene[data-view='opening'] .garage-scenery { transform: scale(1.06); }

.garage-hotspot {
    position: absolute;
    z-index: 1;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    cursor: pointer;
}
.garage-hotspot--car { top: 27%; left: 2%; width: 35%; height: 50%; }
.garage-hotspot--bike { top: 46%; right: 4%; width: 35%; height: 47%; }
.garage-hotspot:focus-visible { outline: 2px solid var(--garage-blue); outline-offset: 4px; }
.garage-scene[data-view='login'] .garage-hotspot,
.garage-scene[data-view='opening'] .garage-hotspot { display: none; }

/* Both screens use the same centered glass treatment. */
.garage-card {
    position: relative;
    z-index: 2;
    width: min(400px, calc(100% - 32px));
    padding: 35px 24px 28px;
    border: 1px solid rgb(218 231 252 / 34%);
    border-radius: 21px;
    background: linear-gradient(145deg, rgb(16 25 40 / 52%), rgb(31 24 28 / 48%));
    -webkit-backdrop-filter: blur(27px) saturate(125%);
    backdrop-filter: blur(27px) saturate(125%);
    box-shadow: 0 24px 80px rgb(0 0 0 / 50%), inset 0 1px 0 rgb(255 255 255 / 10%);
    text-align: center;
}
.garage-card[hidden] { display: none; }
.garage-chooser { animation: garage-enter 650ms cubic-bezier(.16, 1, .3, 1) both; }
.garage-login { padding-top: 56px; animation: garage-enter 550ms cubic-bezier(.16, 1, .3, 1) both; }
.garage-scene[data-view='opening'] .garage-chooser {
    opacity: 0;
    transform: translateY(-12px) scale(.985);
    transition: opacity 420ms ease, transform 500ms ease;
    pointer-events: none;
}
@keyframes garage-enter {
    from { opacity: 0; transform: translateY(17px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.garage-wordmark {
    margin: 0;
    color: #fff;
    font-size: clamp(36px, 3.9vw, 47px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2.2px;
    text-shadow: 0 2px 14px rgb(0 0 0 / 16%);
}
.garage-wordmark span { color: var(--garage-blue); }
.garage-brandline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 13px 0 0;
    color: #e5eaf3;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3.3px;
    line-height: 1.5;
    text-transform: uppercase;
}
.garage-brandline::before,
.garage-brandline::after {
    width: 27px;
    height: 1px;
    background: rgb(233 243 255 / 42%);
    content: '';
}
.garage-instruction {
    margin: 32px 0 15px;
    color: #f1f5fc;
    font-size: 14px;
}
.garage-choices { display: grid; gap: 13px; }
.garage-choice {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 90px;
    padding: 9px 15px 9px 7px;
    border: 1px solid rgb(202 218 240 / 30%);
    border-radius: 14px;
    background: linear-gradient(120deg, rgb(23 36 55 / 75%), rgb(29 36 52 / 58%));
    color: #fff;
    text-align: left;
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.garage-choice img {
    display: block;
    width: 114px;
    height: 68px;
    flex: none;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
    mask-image: linear-gradient(to right, #000 72%, transparent 100%);
}
.garage-choice-label {
    flex: 1;
    margin-left: 8px;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.3px;
}
.garage-choice-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: rgb(113 171 226 / 18%);
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}
.garage-choice--car {
    border-color: rgb(97 175 255 / 85%);
    box-shadow: inset 0 0 19px rgb(43 136 237 / 12%), 0 0 18px rgb(26 121 238 / 17%);
}
.garage-choice--bike .garage-choice-arrow { background: rgb(245 180 92 / 16%); }
.garage-choice:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .garage-choice:hover { transform: translateY(-2px); }
    .garage-choice--car:hover {
        border-color: #83c8ff;
        box-shadow: 0 0 27px rgb(46 150 255 / 34%);
    }
    .garage-choice--bike:hover {
        border-color: #e6b871;
        box-shadow: 0 0 27px rgb(215 147 64 / 21%);
    }
}
.garage-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin: 25px 0 8px;
    color: #c9d3e0;
    font-size: 11px;
}
.garage-caption::before,
.garage-caption::after { width: 25px; height: 1px; background: rgb(226 237 255 / 35%); content: ''; }
.garage-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: 5px 9px;
    border: 0;
    background: transparent;
    color: #e2e9f5;
    font-size: 11px;
    text-decoration: underline;
    text-decoration-color: rgb(210 229 255 / 45%);
    text-underline-offset: 4px;
}
.garage-shortcut span { margin-left: 5px; }
.garage-shortcut:hover { color: white; }
.garage-shortcut:focus-visible { outline: 2px solid white; border-radius: 4px; }

/* Login remains a real POST form using the existing CSRF and authentication. */
.garage-back {
    position: absolute;
    top: 13px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #c8d5e6;
    font-size: 12px;
}
.garage-back:hover { color: white; }
.garage-back:focus-visible { outline: 2px solid white; }
.garage-brand--login .garage-wordmark { font-size: 43px; }
.garage-login-intro {
    margin: 21px 0 21px;
    color: var(--garage-muted);
    font-size: 13px;
    line-height: 1.5;
}
.garage-selected {
    margin: -10px auto 15px;
    color: #b5d8ff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.garage-selected[data-category='bike'] { color: #f9c780; }
.garage-error {
    margin: 0 0 15px;
    padding: 11px 12px;
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
}
.garage-field {
    position: relative;
    height: 54px;
    margin-bottom: 12px;
    text-align: left;
}
.garage-field > svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #e0eaf6;
    pointer-events: none;
}
.garage-field input {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 19px 45px 5px 44px;
    border: 1px solid rgb(205 226 251 / 27%);
    border-radius: 11px;
    outline: 0;
    background: rgb(20 34 52 / 73%);
    color: #fff;
    caret-color: #fff;
    font-size: 16px;
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.garage-field input:hover { border-color: rgb(186 214 245 / 50%); }
.garage-field input:focus {
    border-color: #6cb8ff;
    background: rgb(23 41 64 / 92%);
    box-shadow: 0 0 0 2px rgb(48 147 255 / 23%);
}
.garage-field input:-webkit-autofill,
.garage-field input:-webkit-autofill:hover,
.garage-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0 1000px #18283b inset;
    caret-color: white;
}
.garage-field label {
    position: absolute;
    top: 50%;
    left: 44px;
    transform: translateY(-50%);
    color: #d9e3ef;
    font-size: 13px;
    line-height: 1;
    cursor: text;
    transition: top 160ms ease, font-size 160ms ease, color 160ms ease;
}
.garage-field input:focus ~ label,
.garage-field input:not(:placeholder-shown) ~ label,
.garage-field input:-webkit-autofill ~ label {
    top: 11px;
    color: #a5d1ff;
    font-size: 10px;
}
.garage-password-toggle {
    position: absolute;
    top: 5px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #bacbe1;
}
.garage-password-toggle svg { display: block; width: 20px; height: 20px; }
.garage-password-toggle:hover { color: #fff; }
.garage-password-toggle:focus-visible { outline: 2px solid #fff; }
.garage-password-toggle[aria-pressed='true'] { color: #79bdff; }
.garage-submit.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 9px;
    padding: 12px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(180deg, #409dff, #1970e8);
    box-shadow: 0 9px 28px rgb(34 124 245 / 32%);
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.garage-submit span { font-size: 21px; font-weight: 400; }
.garage-submit.btn:hover { filter: brightness(1.09); box-shadow: 0 11px 32px rgb(34 124 245 / 46%); }
.garage-submit.btn:active { transform: translateY(1px); }
.garage-submit.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.garage-login-footnote {
    margin: 22px 0 0;
    color: #c5d0de;
    font-size: 11px;
}
.garage-motion-hint {
    position: absolute;
    right: 21px;
    bottom: 11px;
    z-index: 1;
    margin: 0;
    color: rgb(246 249 255 / 60%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.1px;
    text-shadow: 0 1px 7px #000;
    pointer-events: none;
}

@media (max-width: 780px) {
    .loginpage { --garage-padding: 0px; }
    .garage-scene {
        min-height: 100svh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .garage-scenery {
        background-image: url('?page=login_media&name=garage-mobile');
        background-position: center center;
    }
    .garage-scene::before {
        background: linear-gradient(180deg, rgb(3 8 17 / 35%), rgb(5 10 19 / 10%) 50%, rgb(3 8 15 / 33%));
    }
    .garage-hotspot { display: none; }
    .garage-card { width: min(400px, calc(100% - 28px)); }
    .garage-motion-hint { display: none; }
}
@media (max-width: 390px) {
    .garage-card { padding: 28px 17px 24px; border-radius: 17px; }
    .garage-login { padding-top: 54px; }
    .garage-wordmark { font-size: 36px; }
    .garage-brandline { gap: 8px; font-size: 9px; letter-spacing: 2.8px; }
    .garage-instruction { margin-top: 24px; }
    .garage-choice { min-height: 77px; padding: 7px 12px 7px 4px; }
    .garage-choice img { width: 94px; height: 62px; }
    .garage-choice-label { font-size: 16px; margin-left: 4px; }
    .garage-choice-arrow { width: 33px; height: 33px; }
    .garage-caption { margin-top: 17px; }
}
@media (max-height: 610px) and (min-width: 781px) {
    .garage-scene { min-height: 610px; }
}
@media (prefers-reduced-motion: reduce) {
    .garage-scene::after,
    .garage-chooser,
    .garage-login { animation: none; }
    .garage-scenery,
    .garage-lighting::before,
    .garage-lighting::after,
    .garage-choice,
    .garage-field input,
    .garage-field label,
    .garage-submit.btn { transition: none; }
}

.mobilebar { display: none; }
.help { line-height: 1.75; color: #546b88; }
.navform { margin: 0; }
.navform-spaced { margin-top: 10px; }
.navform button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.receipt { padding: 14px; border: 2px dashed #b7cde6; border-radius: 11px; background: #f7faff; }
.receipt input { width: 100%; }
.pill { display: inline-block; padding: 4px 8px; background: #e6f8f0; color: #15925c; border-radius: 7px; font-size: 12px; font-weight: 700; }

@media (max-width: 1150px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .grid3 { grid-template-columns: 1fr 1fr; }
    .grid3 .panel:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .layout { display: block; padding-bottom: 65px; }
    .sidebar { display: none; }
    .mobilebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        z-index: 9;
        background: #19283d;
        color: white;
        padding: 9px 5px calc(9px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 20px #0002;
    }
    .mobilebar a { font-size: 11px; text-align: center; padding: 5px; }
    .main { padding: 18px 13px; }
    .top { display: block; }
    .top h1 { font-size: 24px; }
    .filters { margin-top: 17px; }
    .cards { gap: 9px; }
    .card { padding: 12px; gap: 8px; }
    .icon { width: 36px; height: 36px; font-size: 20px; }
    .value { font-size: 18px; }
    .label { font-size: 11px; }
    .grid2, .grid3 { grid-template-columns: 1fr; }
    .grid3 .panel:last-child { grid-column: auto; }
    .panel { padding: 15px; }
    .chart { gap: 4px; }
    .formgrid { grid-template-columns: 1fr; }
    .donut { width: 180px; height: 180px; }
}