/* Warm surfaces and lightweight motion, without external dependencies. */
.experience-eyebrow { color: #d5b779; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.experience-icon-btn { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #d5b77930; border-radius: 10px; background: #ffffff05; color: #f4eee4; font-family: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.experience-icon-btn:hover { background: #d5b77919; border-color: #d5b77980; }
:is(.collection-dialog,.search-dialog) { color: #f4eee4; padding: 0; border: 1px solid #d5b77940; border-radius: 20px; background: #12110f; box-shadow: 0 30px 100px #000a; max-height: calc(100svh - 40px); margin: auto; }
:is(.collection-dialog,.search-dialog)::backdrop { background: #050504cc; backdrop-filter: blur(14px); }
:is(.collection-dialog,.search-dialog)[open] { animation: experience-enter .3s ease-out both; }
body:has(:is(.collection-dialog,.search-dialog)[open]) { overflow: hidden; }
:is(.collection-dialog,.search-dialog) button:focus-visible, [role="button"]:focus-visible, #search-open:focus-visible { outline: 2px solid #d5b779; outline-offset: 4px; }

/* Search is an independent dialog; it no longer expands across the navigation. */
#search-open { cursor: pointer; color: #d5b779; }
#search-open .search-icon { pointer-events: none; }
.search-dialog { width: min(660px, calc(100vw - 32px)); margin-top: max(28px, 12svh); overflow: hidden; }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog > :not(.search-results) { flex-shrink: 0; }
.search-dialog .search-results { min-height: 0; }
.experience-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 26px 20px; gap: 20px; }
.experience-dialog-header h2 { margin: 7px 0 0; font-size: 25px; letter-spacing: -.03em; }
.search-field { display: flex; align-items: center; gap: 12px; margin: 0 24px; padding: 0 16px; min-height: 54px; background: #080807; border: 1px solid #d5b77960; border-radius: 12px; color: #d5b779; }
.search-field:focus-within { box-shadow: 0 0 0 3px #d5b7790d; border-color: #d5b779; }
.search-field input { flex: 1; min-width: 0; width: 100%; height: 52px; background: transparent; border: 0; outline: 0; color: #f4eee4; font: inherit; font-size: 14px; }
.search-field input::placeholder { color: #999082; }
.search-field kbd { flex-shrink: 0; font-family: inherit; font-size: 10px; border: 1px solid #d5b77930; border-radius: 4px; padding: 3px 6px; }
.search-status { margin: 18px 28px 10px; color: #a99f8f; font-size: 11px; }
#search-dialog .search-results { position: static; inset: auto; width: auto; max-height: min(390px, 45svh); overflow-y: auto; margin: 0 12px 12px; padding: 0 8px; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
#search-dialog .search-hit { display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 12px; width: 100%; text-align: left; padding: 13px 12px; margin: 3px 0; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #f4eee4; cursor: pointer; }
#search-dialog .search-hit:is(:hover,:focus-visible,.is-active) { background: #d5b7790f; border-color: #d5b77930; outline: none; }
#search-dialog .search-hit-icon { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d5b77920; border-radius: 9px; color: #d5b779; background: transparent; }
#search-dialog .search-hit-title { font-size: 14px; font-weight: 600; white-space: normal; }
#search-dialog .search-hit-meta { grid-column: 2; font-size: 11px; color: #a99f8f; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 3px; }
#search-dialog .search-hit-meta strong { color: #c5bcae; }
#search-dialog .search-empty { padding: 35px 15px; color: #b9afa0; font-size: 14px; text-align: center; }
.search-footer { display: flex; justify-content: space-between; gap: 10px; padding: 14px 26px; border-top: 1px solid #d5b77920; font-size: 10px; color: #a99f8f; }

/* Both collections use one accessible viewer. */
.collection-dialog { width: min(1000px, calc(100vw - 40px)); overflow: auto; }
.collection-toolbar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #d5b77920; font-size: 11px; color: #b9aa92; }
.collection-toolbar > :first-child { flex: 1; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.collection-layout { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 400px; }
.collection-media { position: relative; display: grid; place-items: center; background: #080807; min-width: 0; overflow: hidden; }
.collection-media img { display: block; width: 100%; height: 100%; max-height: 62svh; min-height: 340px; object-fit: contain; }
.collection-media img[hidden], .collection-media span[hidden] { display: none; }
.collection-media span { padding: 40px; color: #a99f8f; }
.collection-is-fit .collection-layout { grid-template-columns: 1fr 1fr; }
.collection-is-fit .collection-media img { height: 62svh; object-fit: contain; }
.collection-info { padding: clamp(22px, 3vw, 36px); min-width: 0; }
.collection-info h2 { margin: 12px 0 20px; color: #faf4e9; font-size: clamp(24px, 3vw, 32px); line-height: 1.18; letter-spacing: -.035em; }
.collection-info .car-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
.collection-info .car-desc { font-size: 14px; line-height: 1.85; color: #c2b8a8; }
.collection-info .car-desc strong { color: #eee4d2; }
.collection-note { font-size: 12px; line-height: 1.7; margin-bottom: 18px; color: #b4aa9a; }
.collection-info .fit-parts { padding: 0; margin: 0; }
.collection-info .fit-part { padding: 11px 0; border-color: #d5b7791c; }
.collection-info .fit-part-label { color: #bcb2a2; }
.collection-info .fit-part-value { color: #edcf94; font-variant-numeric: tabular-nums; }
.collection-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid #d5b77920; }
.collection-navigation button { border: 1px solid #d5b77940; border-radius: 9px; background: #d5b7790a; color: #e6c992; font: inherit; font-size: 12px; padding: 11px 16px; cursor: pointer; }
.collection-navigation button:hover { background: #d5b77920; border-color: #d5b77990; }
.collection-navigation > span { font-size: 10px; color: #918777; }
#pojazdy .car-card:not(.edit-row) { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
#pojazdy .car-card:not(.edit-row) .car-body { flex: 1; padding: 20px; }
#pojazdy .car-card:not(.edit-row) .car-title { font-size: 17px !important; line-height: 1.4; }
#pojazdy .car-card:not(.edit-row) .car-img-container { height: auto; aspect-ratio: 1.55; }
#pojazdy .car-card-vip:not(.edit-row) { grid-column: auto; }
#pojazdy .car-card:not(.edit-row) .car-desc { font-size: 12px !important; color: #bcb2a2; line-height: 1.8; }
.fit-media[role="button"], .car-img-container[role="button"] { cursor: pointer; }
.fit-media[role="button"]:focus-visible .img-click-hint, .car-img-container[role="button"]:focus-visible .img-click-hint { opacity: 1; }

/* Login panel, short initial loader, then a server-confirmed 3D welcome. */
.auth-gate { overflow-y: auto; align-items: safe center; }
.login-stage { width: min(460px, 100%); padding: 42px 34px 28px; border: 1px solid #d5b77945; border-radius: 24px; background: linear-gradient(145deg,#252016f0,#0d0c0bf5 70%); box-shadow: 0 35px 90px #0009, inset 0 1px #ffe8b31a; transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .22s ease-out; }
.login-stage .login-body { background: none; border: 0; box-shadow: none; padding: 0; width: 100%; }
.login-stage { animation: login-fade .5s ease-out both; }
.login-veil { background: linear-gradient(120deg,#100d09b8,#08070680), radial-gradient(ellipse at center,#d5b7790d,transparent 65%); }
.login-stage .login-brand { gap: 22px; flex-direction: column; }
.login-stage .login-brand-text { text-align: center; justify-items: center; }
.login-stage { isolation: isolate; transform-style: preserve-3d; background: radial-gradient(ellipse at 50% 0%,#d5b77912,transparent 58%),linear-gradient(145deg,#211d17f5,#0d0c0bf8 75%); }
.login-stage::before { content: ''; position: absolute; top: -1px; left: 25%; right: 25%; height: 1px; background: linear-gradient(90deg,transparent,#f0d5a0,transparent); pointer-events: none; }
.login-emblem { position: relative; display: grid; place-items: center; width: 124px; height: 124px; perspective: 600px; transform-style: preserve-3d; }
.login-emblem::after { content: ''; position: absolute; width: 75px; height: 12px; bottom: -4px; border-radius: 50%; background: #d5b77928; filter: blur(12px); }
.login-emblem .login-crest { width: 92px; height: 92px; animation: login-crest-float 5s ease-in-out infinite; filter: drop-shadow(0 12px 15px #0009); }
.login-orbit { position: absolute; inset: 0; border: 1px solid #d5b77925; border-radius: 50%; transform: rotateX(62deg) rotateZ(-25deg); animation: login-orbit-turn 9s linear infinite; }
.login-orbit::after { content: ''; position: absolute; width: 5px; height: 5px; top: 15%; left: 12%; border-radius: 50%; background: #e7c88b; box-shadow: 0 0 12px #e7c88b; }
.login-stage .login-brand h1 { font-size: 70px; color: #fcf3e3; }
.login-stage .login-eyebrow { color: #d5b779; }
.login-stage .login-sub, .login-stage .login-lead { color: #c7bdad; }
.login-stage .login-lead { font-size: 14px; line-height: 1.8; text-align: center; }
.login-stage .login-hint { color: #9b9181; font-size: 11px; line-height: 1.7; text-align: center; }
.login-stage .discord-btn { background: linear-gradient(120deg,#e7c88b,#c5a160); color: #201a10; border: 1px solid #f5dba2; box-shadow: 0 6px 22px #d5b77915; border-radius: 12px; }
.login-stage .discord-btn-icon { background: #32251012; border-color: #32251020; color: #322510; }
.login-stage .discord-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #d5b77925; }
.boot-screen { gap: 18px; animation: none; }
.boot-screen .boot-title { font-size: clamp(24px,5vw,32px); letter-spacing: -.02em; color: #f7eddc; }
.boot-screen .boot-sub { color: #b8ab96; font-size: 12px; }
.boot-screen .boot-crest { width: 88px; height: 88px; animation: crest-breathe 2s ease-in-out infinite; }
.boot-screen .boot-ring { width: 120px; height: 120px; position: absolute; top: 8px; margin: 0; border-color: #d5b77912; border-top-color: #d5b779; border-right-color: #d5b77950; }
.boot-screen .boot-bar { width: 150px; height: 2px; background: #d5b77915; }
.boot-screen .boot-bar span { background: #d5b779; }
.auth-success[hidden] { display: none; }
.auth-success { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; perspective: 1100px; background: #090806e8; backdrop-filter: blur(8px); pointer-events: none; animation: welcome-away 2.2s both; }
.auth-success-card { position: relative; overflow: hidden; text-align: center; padding: 36px 32px 26px; width: min(470px,calc(100vw - 40px)); border-radius: 26px; border: 1px solid #d5b77960; background: radial-gradient(ellipse at 50% 0%,#ba925327,transparent 65%),linear-gradient(145deg,#242017,#0e0d0b 75%); box-shadow: 0 35px 100px #0009,inset 0 1px #ffe5ae24; transform-style: preserve-3d; animation: welcome-3d 2.2s cubic-bezier(.2,.7,.2,1) both; }
.auth-success-card::before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -70%; width: 40%; background: linear-gradient(90deg,transparent,#ffe5ae0d,transparent); transform: rotate(25deg); animation: success-light 1.8s ease-out both; pointer-events: none; }
.success-emblem { position: relative; width: 152px; height: 152px; margin: 0 auto 24px; display: grid; place-items: center; perspective: 700px; }
.auth-success-card img { margin: 0; width: 106px; height: 106px; object-fit: contain; filter: drop-shadow(0 12px 24px #d5b77925); animation: success-crest 1.25s cubic-bezier(.2,.7,.2,1) both; }
.success-orbit { position: absolute; inset: 0; border: 1px solid #d5b77970; border-left-color: #d5b77912; border-right-color: #d5b77912; border-radius: 50%; animation: success-orbit 1.8s ease-out both; }
.success-orbit::after { content: ''; position: absolute; inset: 8px; border: 1px solid #d5b77920; border-radius: 50%; }
.auth-success-card h2 { color: #fff4df; font-size: clamp(25px,5vw,33px); margin: 12px 0 10px; letter-spacing: -.045em; }
.success-greeting { color: #b8ab96; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.success-greeting strong { color: #f0d4a1; font-weight: 600; }
.success-check { position: absolute; bottom: 14px; right: 8px; width: 32px; height: 32px; border: 1px solid #f9dea8; border-radius: 50%; background: #d5b779; color: #201a10; display: grid; place-items: center; box-shadow: 0 0 0 6px #17140e; animation: success-check-in .45s .5s both; }
.success-verified { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 26px; padding-top: 19px; border-top: 1px solid #d5b77920; color: #b9a883; font-size: 10px; }
.session-notice[hidden] { display: none !important; }
.session-notice { position: fixed; right: max(24px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); z-index: 21000; display: flex; align-items: center; gap: 14px; width: min(355px,calc(100vw - 32px)); padding: 18px; border: 1px solid #d5b77945; border-radius: 16px; background: linear-gradient(125deg,#272117f5,#11100ff8); box-shadow: 0 15px 50px #0008; backdrop-filter: blur(16px); animation: session-notice-in .45s cubic-bezier(.2,.7,.2,1) both; }
.session-notice img { flex: 0 0 42px; width: 42px; height: 42px; object-fit: cover; border: 1px solid #d5b77950; border-radius: 12px; }
.session-notice > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.session-notice span { color: #c1ad88; font-size: 10px; }
.session-notice strong { color: #fff2dc; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.session-notice small { color: #8f8677; font-size: 10px; }
.session-notice button { align-self: flex-start; background: transparent; color: #b9a883; border: 0; border-radius: 5px; padding: 0 4px; cursor: pointer; font-size: 20px; line-height: 1; }
.session-notice button:focus-visible { outline: 2px solid #d5b779; outline-offset: 4px; }
@keyframes experience-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes login-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crest-breathe { 50% { transform: translateY(-5px); filter: drop-shadow(0 8px 18px #d5b77930); } }
@keyframes welcome-3d { 0% { opacity: 0; transform: rotateY(-24deg) rotateX(9deg) translateZ(-100px) scale(.9); } 28%,80% { opacity: 1; transform: rotateY(0) rotateX(0) translateZ(0) scale(1); } 100% { opacity: 0; transform: translateY(-12px) translateZ(50px) scale(1.025); } }
@keyframes welcome-away { 0%,82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes login-crest-float { 0%,100% { transform: translateY(0) rotateY(-10deg); } 50% { transform: translateY(-7px) rotateY(12deg) rotateX(4deg); } }
@keyframes login-orbit-turn { from { transform: rotateX(62deg) rotateZ(-25deg); } to { transform: rotateX(62deg) rotateZ(335deg); } }
@keyframes success-crest { from { opacity: 0; transform: rotateY(-160deg) scale(.7); } 75%,100% { opacity: 1; transform: rotateY(0) scale(1); } }
@keyframes success-orbit { from { opacity: 0; transform: rotateX(70deg) rotateZ(-90deg) scale(.7); } to { opacity: 1; transform: rotateX(0) rotateZ(90deg) scale(1); } }
@keyframes success-check-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes success-light { from { left: -70%; } to { left: 140%; } }
@keyframes session-notice-in { from { opacity: 0; transform: translateX(22px) rotateY(-10deg); } to { opacity: 1; transform: none; } }
@media(max-width: 640px) {
    .collection-dialog { width: calc(100vw - 24px); max-height: calc(100svh - 24px); border-radius: 16px; }
    .collection-layout, .collection-is-fit .collection-layout { grid-template-columns: 1fr; min-height: 0; }
    .collection-media img { min-height: 0; max-height: 32svh; height: auto; object-fit: cover; }
    .collection-is-fit .collection-media img { height: 34svh; max-height: 34svh; object-fit: contain; }
    .collection-info { padding: 20px; }
    .collection-info h2 { font-size: 23px; margin: 8px 0 14px; }
    .collection-info .fit-part { padding: 8px 0; }
    .collection-navigation { position: sticky; bottom: 0; background: #12110f; padding: 12px; }
    .collection-navigation > span { display: none; }
    .collection-toolbar { position: sticky; top: 0; z-index: 2; background: #12110f; padding: 10px 14px; }
    .search-dialog { margin-top: 24px; }
    .experience-dialog-header { padding: 20px; }
    .search-field { margin: 0 16px; padding: 0 12px; }
    .search-field input { font-size: 13px; }
    .search-field kbd { display: none; }
    #search-dialog .search-results { max-height: 48svh; margin: 0 6px 8px; }
    .login-stage { padding: 32px 24px 24px; }
    .login-stage .login-brand h1 { font-size: 60px; }
    .session-notice { right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); padding: 15px; }
}
@media(prefers-reduced-motion: reduce) {
    .login-stage, .auth-success-card, .auth-success, .boot-screen .boot-crest, :is(.collection-dialog,.search-dialog)[open] { animation: none !important; transform: none !important; transition: none !important; }
    .login-emblem .login-crest, .login-orbit, .success-emblem img, .success-orbit, .success-check, .session-notice, .auth-success-card::before { animation: none !important; transform: none !important; }
    .auth-success-card::before { display: none; }
}