/* Staff login: an independent theme so public pages and printed invoices keep their layout. */
.garage-login { display: block; min-height: 100vh; min-height: 100dvh; padding: 0; color: #f4f4f2; background: #0a0b0c; background-image: radial-gradient(ellipse at 23% 55%, #34201755, transparent 46%), linear-gradient(115deg, #11131555, transparent 55%); }
.garage-login::before { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff02 1px, transparent 1px), linear-gradient(90deg, #ffffff02 1px, transparent 1px); background-size: 56px 56px; content: ''; pointer-events: none; }
.login-shell { display: flex; flex-direction: column; width: min(1240px, 100%); min-height: 100vh; min-height: 100dvh; margin: auto; padding: 20px 44px 0; }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 98px; border-bottom: 1px solid #ffffff10; }
.login-brand { display: flex; align-items: center; gap: 23px; }
.login-brand img { display: block; width: 122px; height: 90px; object-fit: contain; mix-blend-mode: screen; }
.login-brand-divider { width: 1px; height: 29px; background: #ffffff20; }
.login-brand > span:last-child { color: #a2a2a7; font-size: 9px; line-height: 1.8; letter-spacing: .16em; }
.login-brand strong { color: #dedee0; font-size: 11px; font-weight: 400; letter-spacing: .015em; }
.login-access { display: inline-flex; align-items: center; gap: 9px; color: #bcbcc1; font-size: 11px; }
.login-access > span { width: 6px; height: 6px; background: #e7774b; border-radius: 50%; box-shadow: 0 0 12px #e7774b55; }
.login-header-actions { display: flex; align-items: center; gap: 24px; }
.login-customer-booking { display: inline-flex; min-height: 40px; align-items: center; gap: 15px; padding: 0 14px; color: #f0bea0; border: 1px solid #b779514d; border-radius: 7px; font-size: 11px; transition: background .2s; }
.login-customer-booking:hover { color: #ffe6d5; background: #c9794920; }
@media (max-width: 760px) { .login-header-actions .login-access, .garage-login .login-brand-divider, .garage-login .login-brand > span:last-child { display: none; } .login-header-actions { gap: 0; } }
.login-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(350px, .95fr); gap: clamp(35px, 6vw, 88px); align-items: center; flex: 1; padding: 44px 0; }
.login-showcase { min-width: 0; }
.login-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; color: #c0bab4; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.login-kicker > span { width: 22px; height: 2px; background: #f16b42; }
.login-showcase h2 { margin-bottom: 17px; font-size: clamp(56px, 5.8vw, 82px); font-weight: 700; line-height: .98; letter-spacing: -.015em; text-transform: uppercase; }
.login-showcase h2 > span { color: #ff794c; }
.showcase-copy { margin: 0; color: #a6a6ad; font-size: 13px; line-height: 1.8; }
.exhaust-stage { position: relative; isolation: isolate; height: 276px; margin: 4px -24px -5px; }
.exhaust-stage::before { position: absolute; right: 12%; bottom: 22%; left: 12%; height: 34%; background: radial-gradient(ellipse, #e8753726, transparent 70%); filter: blur(20px); content: ''; }
.exhaust-stage::after { position: absolute; right: 18%; bottom: 15%; left: 18%; height: 20px; border-radius: 50%; background: #0009; filter: blur(12px); content: ''; }
.exhaust-orbit { position: absolute; inset: 15% 7% 6%; border: 1px solid #ffffff10; border-radius: 50%; transform: rotate(-12deg) scaleY(.57); }
.exhaust-orbit::after { position: absolute; inset: -22px; border: 1px dashed #ffffff0b; border-radius: 50%; content: ''; }
.exhaust-canvas, .exhaust-fallback { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.exhaust-canvas { opacity: 0; transition: opacity .4s; }
.exhaust-stage.is-ready .exhaust-canvas { opacity: 1; }
.exhaust-stage.is-ready .exhaust-fallback { visibility: hidden; }
.exhaust-spec { position: absolute; z-index: 2; right: 20px; bottom: 9px; color: #959499; font-size: 8px; letter-spacing: .16em; }
.exhaust-spec > span { padding: 0 7px; color: #dc744d; }
.showcase-caption { display: flex; min-height: 32px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.showcase-caption > span { display: flex; align-items: center; gap: 8px; color: #a4a1a1; font-size: 10px; }
.showcase-caption i { width: 5px; height: 5px; background: #ea764e; border-radius: 50%; }
.rotation-toggle { min-height: 34px; padding: 5px 8px; color: #bcb8b6; background: transparent; border: 1px solid #ffffff17; border-radius: 5px; font-size: 10px; cursor: pointer; }
.rotation-toggle:hover { color: #fff; border-color: #c07955; }
.showcase-features { display: flex; gap: 0; margin-top: 18px; padding-top: 20px; border-top: 1px solid #ffffff12; }
.showcase-features span { display: flex; align-items: center; gap: 10px; color: #b9b9bc; font-size: 11px; }
.showcase-features span::before { color: #e98056; font-size: 12px; content: '\2713'; }
.showcase-features span + span { margin-left: 28px; }
.login-card { position: relative; min-width: 0; padding: 34px 35px 0; background: linear-gradient(135deg, #1c1e20, #141618 65%); border: 1px solid #ffffff16; border-radius: 18px; box-shadow: 0 24px 80px #0004, inset 0 1px 0 #ffffff06; }
.login-card::before { position: absolute; top: -1px; right: 20%; left: 20%; height: 1px; background: linear-gradient(90deg, transparent, #e8875c, transparent); content: ''; }
.login-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 29px; }
.login-card-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #ef956e; background: #d5804510; border: 1px solid #bd86572b; border-radius: 12px; }
.login-card-icon svg { width: 20px; height: 20px; }
.login-card-top > span:last-child { color: #a9a8ab; font-size: 8px; letter-spacing: .16em; }
.login-copy { margin-bottom: 30px; }
.login-copy .eyebrow { margin-bottom: 8px; color: #f3936e; font-size: 9px; letter-spacing: .16em; }
.login-copy h1 { margin-bottom: 11px; font-size: 43px; letter-spacing: -.02em; }
.login-copy > p:last-child { margin-bottom: 0; color: #a9a9ae; font-size: 12px; }
.login-form { gap: 9px; }
.login-form > label { color: #d3d3d7; font-size: 11px; font-weight: 500; }
.login-form > label:not(:first-of-type) { margin-top: 11px; }
.login-input-wrap { position: relative; }
.login-input-wrap > svg { position: absolute; top: 17px; left: 15px; width: 16px; height: 16px; color: #84868e; pointer-events: none; }
.login-input-wrap input { height: 50px; min-width: 0; padding: 12px 45px 12px 42px; color: #f5f5f7; background: #0e1012; border: 1px solid #33353a; border-radius: 8px; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.login-input-wrap input::placeholder { color: #909198; font-weight: 400; }
.login-input-wrap input:hover { border-color: #5d5752; }
.login-input-wrap input:focus { border-color: #ed8d63; box-shadow: 0 0 0 3px #e3814a18; }
.login-input-wrap input:-webkit-autofill { -webkit-text-fill-color: #f5f5f7; box-shadow: 0 0 0 1000px #0e1012 inset; caret-color: #f5f5f7; }
.login-input-wrap input[aria-invalid="true"] { border-color: #e58f7c; }
.password-toggle { position: absolute; top: 3px; right: 3px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; color: #a6a8b0; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.password-toggle:hover { color: #f1a17d; background: #ffffff07; }
.password-toggle svg { width: 18px; height: 18px; }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.login-submit.button.primary { justify-content: space-between; height: 51px; margin-top: 15px; padding: 0 19px; color: #fff; background: linear-gradient(110deg, #c44021, #b63b1f); border: 1px solid #ed88624f; border-radius: 8px; box-shadow: 0 5px 18px #bf451a22, inset 0 1px 0 #ffffff13; font-size: 12px; }
.login-submit.button.primary:hover { background: linear-gradient(110deg, #d84c2b, #c44625); box-shadow: 0 7px 24px #db522336; }
.login-submit svg { width: 18px; height: 18px; transition: transform .2s; }
.login-submit:hover svg { transform: translateX(3px); }
.login-help { margin: 25px 0 27px; text-align: center; font-size: 10px; }
.login-help > span { color: #c3c3c7; }
.login-help > p { margin: 4px 0 0; color: #92939b; }
.login-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 -35px; padding: 16px 18px; color: #9a9ba2; background: #00000012; border-top: 1px solid #ffffff08; border-radius: 0 0 18px 18px; font-size: 9px; }
.login-secure svg { width: 13px; height: 13px; color: #ada594; }
.login-card .alert { color: #efe6df; background: #47251e; border-color: #754132; box-shadow: none; font-size: 12px; }
.login-card .alert.success { color: #c9e8de; background: #173c32; border-color: #306a55; }
.login-footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; color: #929298; border-top: 1px solid #ffffff10; font-size: 9px; letter-spacing: .025em; }
.login-footer > span:nth-child(2) { margin-left: auto; }
.footer-stripes { display: flex; gap: 4px; margin-left: 8px; }
.footer-stripes i { width: 7px; height: 15px; background: #de693e; transform: skewX(-25deg); }
.footer-stripes i:nth-child(2) { opacity: .5; }
.footer-stripes i:nth-child(3) { opacity: .2; }
.garage-login :is(button, a):focus-visible { outline: 2px solid #ffad7b; outline-offset: 4px; }
.garage-login [hidden] { display: none !important; }
@media (min-width: 1500px) { .login-main { padding: 55px 0; } .exhaust-stage { height: 310px; } }
@media (min-width: 761px) and (max-height: 850px) { .login-shell { padding-top: 10px; } .login-header { min-height: 84px; } .login-brand img { height: 76px; } .login-main { padding-top: 28px; padding-bottom: 28px; } .login-showcase h2 { font-size: 70px; } .exhaust-stage { height: 225px; } .login-card { padding-top: 28px; } .login-card-top { margin-bottom: 20px; } .login-copy { margin-bottom: 22px; } .login-help { margin-top: 20px; margin-bottom: 20px; } .login-footer { min-height: 54px; } }
@media (max-width: 1000px) { .login-shell { padding: 14px 30px 0; } .login-main { gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr); } .login-card { padding: 28px 25px 0; } .login-secure { margin: 0 -25px; } .showcase-features span + span { margin-left: 15px; } .exhaust-stage { margin-right: -15px; margin-left: -15px; height: 240px; } .login-kicker { font-size: 8px; letter-spacing: .1em; } }
@media (max-width: 760px) { .login-shell { padding: 6px 24px 0; } .login-header { min-height: 84px; } .login-brand { gap: 14px; } .login-brand img { width: 100px; height: 74px; } .login-main { width: min(480px, 100%); margin: 0 auto; padding: 28px 0 32px; grid-template-columns: minmax(0, 1fr); gap: 32px; } .login-card { grid-row: 1; padding: 26px 28px 0; } .login-secure { margin: 0 -28px; } .login-card-top { margin-bottom: 22px; } .login-copy { margin-bottom: 25px; } .login-copy h1 { font-size: 40px; } .login-input-wrap input { font-size: 16px; } .login-showcase { padding: 0 5px; } .login-showcase h2 { font-size: 53px; } .login-showcase h2 br { display: none; } .showcase-copy { font-size: 12px; } .exhaust-stage { height: 235px; margin-top: 0; } .login-footer { font-size: 8px; gap: 12px; } .footer-stripes { display: none; } .showcase-features { justify-content: space-between; } .showcase-features span + span { margin-left: 0; } }
@media (max-width: 380px) { .login-shell { padding-right: 16px; padding-left: 16px; } .login-brand-divider, .login-brand > span:last-child { display: none; } .login-card { padding-right: 22px; padding-left: 22px; } .login-secure { margin-right: -22px; margin-left: -22px; font-size: 8px; } .login-showcase h2 { font-size: 46px; } }
@media (prefers-reduced-motion: reduce) { .garage-login *, .garage-login *::before, .garage-login *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }