:root{color-scheme:light;--ink:#15201e;--muted:#64716e;--line:#dce4e1;--paper:#f4f6f4;--card:#fff;--accent:#08aeb0;--dark:#101817;--danger:#b52936;--radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
button,input,textarea,select{font:inherit}
.skip{position:fixed;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.7rem 1rem}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,3.5rem);color:#fff;background:rgba(16,24,23,.96);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:800;letter-spacing:.08em}
.mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#092323}
.top-actions{display:flex;align-items:center;gap:.6rem}
.lang{border:1px solid #51605d;background:#202c2a;color:#fff;border-radius:9px;padding:.55rem}
.button{border:0;border-radius:10px;padding:.7rem 1rem;font-weight:750;cursor:pointer}
.button.primary{background:var(--accent);color:#082424}
.button.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}
.button.ghost{background:transparent;color:inherit}
.button:disabled{opacity:.55;cursor:not-allowed}
.hero{padding:3.2rem clamp(1rem,5vw,5rem) 2.5rem;color:#fff;background:linear-gradient(120deg,#101817,#263532)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:800;color:#63d7d5}
.hero h1{max-width:860px;margin:.55rem 0;font-size:clamp(2rem,5vw,4rem);line-height:1.03}
.hero p{max-width:700px;color:#c7d1cf}
.layout{max-width:1500px;margin:0 auto;padding:2rem clamp(1rem,4vw,3.5rem) 4rem}
.toolbar{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.8rem;font-weight:750;color:var(--muted)}
.input{width:100%;border:1px solid #bdc9c6;border-radius:10px;background:#fff;padding:.75rem .85rem;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:1.25rem}
.vehicle{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 10px 32px rgba(30,49,45,.06)}
.vehicle-media{position:relative;aspect-ratio:16/10;background:#e7ecea}
.vehicle-media img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:.8rem;top:.8rem;padding:.35rem .55rem;border-radius:999px;background:rgba(16,24,23,.88);color:#fff;font-size:.72rem;font-weight:750}
.vehicle-body{padding:1.1rem}
.vehicle h2{margin:0 0 .35rem;font-size:1.25rem}
.meta{color:var(--muted);font-size:.86rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}
.facts span{display:block;color:var(--muted);font-size:.72rem}
.facts strong{display:block;margin-top:.2rem}
.pricebox{padding:.85rem;border-radius:12px;background:#eef5f3}
.pricebox div{display:flex;justify-content:space-between;gap:1rem}
.pricebox small{color:var(--muted)}
.positive{color:#087e70}
.vehicle-actions{display:flex;gap:.6rem;margin-top:1rem}
.vehicle-actions .button{flex:1}
.center{min-height:100vh;display:grid;place-items:center;padding:1rem}
.auth{width:min(430px,100%);padding:2rem;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 22px 70px rgba(24,40,37,.14)}
.auth h1{margin:.4rem 0}
.auth form{display:grid;gap:1rem;margin-top:1.5rem}
.error{padding:.7rem;border-radius:9px;background:#fff0f0;color:var(--danger)}
.loader{width:40px;height:40px;border:4px solid #d9e4e1;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.modal-backdrop{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:1rem;background:rgba(6,12,11,.7)}
.modal-card{width:min(640px,100%);max-height:92vh;overflow:auto;border-radius:20px;background:#fff;padding:1.5rem}
.modal-head{display:flex;justify-content:space-between;gap:1rem}
.modal-head h2{margin:0}
.modal-card form{display:grid;gap:1rem;margin-top:1rem}
.summary{display:grid;gap:.5rem;padding:1rem;border-radius:12px;background:#f0f5f3}
.summary div{display:flex;justify-content:space-between;gap:1rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.toast{position:fixed;right:1rem;bottom:1rem;z-index:30;max-width:360px;padding:1rem;border-radius:10px;background:#15201e;color:#fff;transform:translateY(150%);transition:.2s}
.toast.show{transform:none}
.empty{padding:3rem;text-align:center;border:1px dashed #a9b6b3;border-radius:16px;color:var(--muted)}
.language-picker{position:relative}
.flag{display:inline-block;flex:0 0 auto;width:22px;height:15px;border:1px solid rgba(16,24,23,.18);border-radius:2px;box-shadow:0 1px 2px rgba(16,24,23,.12)}
.flag-cs{background:linear-gradient(33deg,#11457e 0 49%,transparent 50%),linear-gradient(#fff 0 50%,#d7141a 50%)}
.flag-nl{background:linear-gradient(#ae1c28 0 33.33%,#fff 33.33% 66.66%,#21468b 66.66%)}
.flag-de{background:linear-gradient(#111 0 33.33%,#d00 33.33% 66.66%,#ffce00 66.66%)}
.flag-en{background:linear-gradient(90deg,transparent 42%,#cf142b 42% 58%,transparent 58%),linear-gradient(transparent 37%,#cf142b 37% 63%,transparent 63%),linear-gradient(35deg,transparent 43%,#fff 43% 48%,#cf142b 48% 52%,#fff 52% 57%,transparent 57%),linear-gradient(-35deg,transparent 43%,#fff 43% 48%,#cf142b 48% 52%,#fff 52% 57%,transparent 57%),#012169}
.language-button{display:flex;align-items:center;gap:.5rem;min-height:2.7rem;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer}
.language-menu{position:absolute;right:0;top:calc(100% + .45rem);z-index:40;min-width:180px;padding:.35rem;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 15px 45px rgba(16,24,23,.18)}
.language-menu button{display:flex;width:100%;align-items:center;gap:.65rem;padding:.65rem .75rem;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.language-menu button:hover,.language-menu button:focus-visible,.language-menu button[aria-current=true]{background:#eaf6f4}
.login-language{position:fixed;right:clamp(1rem,4vw,3.5rem);top:1rem;z-index:15}
.login-language + .center{padding-top:5.5rem}
.google-login{display:flex;width:100%;align-items:center;justify-content:center;margin-top:1.5rem;text-decoration:none}
.auth-divider{display:flex;align-items:center;gap:.7rem;margin:1rem 0;color:var(--muted);font-size:.8rem;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--line)}
@media(max-width:650px){.top{align-items:flex-start}
.brand span:last-child{display:none}
.toolbar{display:grid}
.facts{grid-template-columns:1fr}
.gallery{grid-template-columns:1fr 1fr}
.top .button{padding:.55rem}
.hero{padding-top:2rem}
.language-button{padding:.5rem}
.login-language{right:1rem}
.language-menu{min-width:165px}
}
